/* Calendário principal, seletor de veículos e seletores de data */

/* ---- Paleta categórica (cor por veículo no calendário) ----
   Única exceção à regra "sem cor solta": seis tons dessaturados,
   harmonizados com a marca (azul, verde, âmbar, ardósia, vinho,
   petróleo). --cat-N é a faixa lateral/bolinha da legenda;
   --cat-N-surface é o fundo tingido do evento, sólido para que as
   linhas da grade não apareçam através dele. O texto do evento usa
   --text/--text-muted (≥ 5:1 sobre qualquer --cat-N-surface nos dois
   temas). js/calendar.js (CALENDAR_VEHICLE_COLORS) só referencia
   estas variáveis. --cat-1 também é a cor padrão de uma reserva. */
:root{
  --cat-1:#3d5f96;          /* azul */
  --cat-1-surface:#e8eef7;
  --cat-2:#3f7657;          /* verde */
  --cat-2-surface:#e7f1eb;
  --cat-3:#94681f;          /* âmbar */
  --cat-3-surface:#f6eedf;
  --cat-4:#5a6677;          /* ardósia */
  --cat-4-surface:#eceef2;
  --cat-5:#8b3e55;          /* vinho */
  --cat-5-surface:#f5e8ec;
  --cat-6:#2f7174;          /* petróleo */
  --cat-6-surface:#e4f0f0;
}

:root[data-theme="dark"]{
  --cat-1:#7c9dd0;
  --cat-1-surface:#1f2838;
  --cat-2:#6ea888;
  --cat-2-surface:#1d2b24;
  --cat-3:#c79f64;
  --cat-3-surface:#2d271c;
  --cat-4:#98a2b0;
  --cat-4-surface:#252a31;
  --cat-5:#c07f93;
  --cat-5-surface:#302229;
  --cat-6:#69a9ac;
  --cat-6-surface:#1b2c2e;
}

/* ---- Calendário mensal de reservas ---- */
  .calendar-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }

  .calendar-nav-period{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
  }

  .calendar-today-btn{
    min-height:38px;
    padding:8px 16px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font:inherit;
    font-size:var(--fs-2xs);
    font-weight:600;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .calendar-today-btn:hover{
    background:var(--surface-hover);
  }

  .calendar-nav-btn{
    background:var(--surface);
    border:1px solid var(--border-strong);
    cursor:pointer;
    font-size:1.05rem;
    line-height:1;
    padding:8px 15px;
    border-radius:var(--radius-sm);
    color:var(--text);
    font-weight:600;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .calendar-nav-btn:hover{
    background:var(--surface-hover);
  }

  .calendar-month-label{
    display:flex;
    align-items:center;
    gap:6px;
    border:0;
    background:transparent;
    padding:6px 10px;
    border-radius:var(--radius-sm);
    font:inherit;
    font-weight:700;
    color:var(--text);
    font-size:1.05rem;
    text-transform:capitalize;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease);
  }

  .calendar-month-label:hover,
  .calendar-month-label[aria-expanded="true"]{
    background:var(--surface-hover);
  }

  .calendar-month-label-chevron{
    flex:none;
    color:var(--text-muted);
    transition:transform .2s;
  }

  .calendar-month-label[aria-expanded="true"] .calendar-month-label-chevron{
    transform:rotate(180deg);
  }

  .calendar-drag-hint{
    margin:-2px 0 12px;
    color:var(--text-muted);
    font-size:var(--fs-2xs);
  }

  /* ---- Agenda semanal ---- */
  .weekly-calendar{
    --week-slot-height:30px;
    position:relative;
    overflow:auto;
    max-height:min(72vh,820px);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
    scrollbar-color:var(--border-strong) transparent;
  }

  .week-calendar-header{
    position:sticky;
    top:0;
    z-index:12;
    display:grid;
    grid-template-columns:68px repeat(7,minmax(112px,1fr));
    min-width:852px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
  }

  .week-header-corner{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:10px 4px;
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    font-weight:600;
  }

  .week-day-header{
    min-height:70px;
    padding:8px 4px 7px;
    border:0;
    border-left:1px solid var(--border);
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font:inherit;
    transition:background-color var(--dur) var(--ease);
  }

  .week-day-header span,
  .week-day-header strong{
    display:block;
  }

  .week-day-header span{
    margin-bottom:4px;
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    font-weight:600;
    letter-spacing:.08em;
  }

  .week-day-header strong{
    width:34px;
    height:34px;
    margin:0 auto;
    border-radius:50%;
    font-size:1.15rem;
    font-weight:600;
    line-height:34px;
  }

  .week-day-header:hover{
    background:var(--surface-hover);
  }

  /* Hoje: marcador discreto (número na cor de destaque + anel fino). */
  .week-day-header.today strong{
    color:var(--accent);
    font-weight:700;
    box-shadow:inset 0 0 0 1.5px var(--accent);
  }

  .week-day-header.selected{
    background:var(--primary-soft);
  }

  .week-day-header.selected strong{
    background:var(--primary);
    color:var(--on-primary);
    box-shadow:none;
  }

  .week-calendar-body{
    display:grid;
    grid-template-columns:68px minmax(784px,1fr);
    min-width:852px;
  }

  .week-time-axis{
    display:grid;
    grid-template-rows:repeat(48,var(--week-slot-height));
    background:var(--surface-2);
  }

  .week-time-label{
    position:relative;
    padding-right:9px;
    color:var(--text-muted);
    text-align:right;
    font-size:var(--fs-2xs);
    line-height:1;
    transform:translateY(-4px);
  }

  .week-time-label.full-hour{
    color:var(--text-muted);
    font-weight:600;
  }

  .week-days{
    display:grid;
    grid-template-columns:repeat(7,minmax(112px,1fr));
  }

  .week-day-column{
    position:relative;
    display:grid;
    grid-template-rows:repeat(48,var(--week-slot-height));
    min-height:calc(48 * var(--week-slot-height));
    border-left:1px solid var(--border);
    background:var(--surface);
  }

  .week-day-column:nth-child(odd){
    background:var(--surface-2);
  }

  /* Linha de hora cheia (filhos ímpares) = --border; meia hora = mesma
     cor com metade da opacidade. */
  .week-time-slot{
    position:relative;
    z-index:1;
    min-height:var(--week-slot-height);
    border-top:1px solid color-mix(in srgb, var(--border) 50%, transparent);
    cursor:crosshair;
    touch-action:pan-y;
  }

  .week-time-slot:nth-child(odd){
    border-top-color:var(--border);
  }

  .week-time-slot:hover{
    background:var(--primary-soft);
  }

  .week-time-slot.disabled{
    cursor:not-allowed;
    background:var(--surface-sunken);
  }

  .week-time-slot.disabled:hover{
    background:var(--surface-sunken);
  }

  /* Perfil Portaria: calendário só para consulta. */
  .calendar-read-only .week-time-slot{
    cursor:default;
  }

  .calendar-read-only .week-time-slot:hover{
    background:transparent;
  }

  .week-reservation-event{
    /* Cor por veículo (js/calendar.js define --event-accent/--event-bg
       inline com var(--cat-N) quando o local tem mais de um veículo e
       nenhum está selecionado sozinho) - --cat-1 aqui é só o padrão de
       fora dessa condição. */
    --event-accent:var(--cat-1);
    --event-bg:var(--cat-1-surface);
    position:absolute;
    z-index:5;
    left:4px;
    right:4px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-height:25px;
    padding:5px 7px;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--event-accent) 35%, transparent);
    border-left:3px solid var(--event-accent);
    border-radius:var(--radius-xs);
    background:var(--event-bg);
    color:var(--text);
    text-align:left;
    font:inherit;
    cursor:pointer;
    box-shadow:none;
    transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }

  .week-reservation-event:hover{
    border-color:var(--event-accent);
    box-shadow:var(--shadow-sm);
    z-index:7;
  }

  .week-reservation-event strong{
    max-width:100%;
    overflow:hidden;
    font-size:var(--fs-2xs);
    line-height:1.15;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .week-reservation-event span{
    max-width:100%;
    overflow:hidden;
    font-size:var(--fs-2xs);
    font-weight:600;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .week-reservation-event small{
    max-width:100%;
    overflow:hidden;
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .week-reservation-event .calendar-event-time strong{
    font-weight:600;
  }

  .week-reservation-event .calendar-event-id{
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    font-weight:600;
  }

  .week-reservation-event .calendar-event-route{
    font-weight:700;
  }

  .week-reservation-event .calendar-event-vehicle{
    color:var(--text);
    font-weight:600;
  }

  .week-reservation-event .calendar-event-requester{
    color:var(--text-muted);
  }

  .week-reservation-event.is-detailed .calendar-event-route,
  .week-reservation-event.is-detailed .calendar-event-vehicle,
  .week-reservation-event.is-detailed .calendar-event-requester{
    display:block;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.3;
  }

  .week-reservation-event.is-detailed .calendar-event-vehicle{
    margin-top:2px;
  }

  .week-reservation-event.is-short .calendar-event-vehicle,
  .week-reservation-event.is-short .calendar-event-route,
  .week-reservation-event.is-short .calendar-event-requester{
    display:none;
  }

  /* Setas geométricas (não-emoji) indicando que o evento continua
     antes/depois da janela visível. */
  .week-reservation-event.clipped-start::before,
  .week-reservation-event.clipped-end::after{
    position:absolute;
    right:5px;
    color:var(--text-muted);
    font-size:var(--fs-2xs);
  }

  .week-reservation-event.clipped-start::before{
    top:2px;
    content:"▲";
  }

  .week-reservation-event.clipped-end::after{
    bottom:2px;
    content:"▼";
  }

  .week-selection-preview{
    position:absolute;
    z-index:8;
    left:4px;
    right:4px;
    display:flex;
    flex-direction:column;
    padding:6px 8px;
    overflow:hidden;
    pointer-events:none;
    border:1px dashed var(--success);
    border-left:3px solid var(--success);
    border-radius:var(--radius-xs);
    background:var(--success-surface);
    color:var(--success-text);
    box-shadow:none;
  }

  .week-selection-preview strong{
    font-size:var(--fs-2xs);
  }

  .week-selection-preview span{
    font-size:var(--fs-2xs);
  }

  .week-now-line{
    position:absolute;
    z-index:9;
    left:0;
    right:0;
    height:2px;
    pointer-events:none;
    background:var(--danger);
  }

  .week-now-line::before{
    position:absolute;
    top:-4px;
    left:-5px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--danger);
    content:"";
  }

  .calendar-legend{
    display:flex;
    gap:16px;
    margin-top:14px;
    font-size:var(--fs-2xs);
    color:var(--text-muted);
    flex-wrap:wrap;
  }

  .legend-dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:3px;
    margin-right:5px;
    vertical-align:middle;
  }

  .calendar-day-details{
    margin-top:16px;
    border-top:1px solid var(--border);
    padding-top:14px;
  }

  .calendar-day-details.hidden{
    display:none;
  }

  .day-details-title{
    font-weight:600;
    color:var(--text);
    margin-bottom:10px;
    font-size:0.92rem;
  }

  /* .day-detail-item foi removido: o painel de dia do calendário agora
     reaproveita .reservation-item (mesmo cartão de Minhas Reservas) para
     que o layout seja idêntico nas duas telas. Só a margem entre cartões
     e o destaque de "focado" (ao navegar de um evento do calendário até
     a reserva) continuam específicos daqui. */
  .calendar-day-details .reservation-item{
    margin-bottom:12px;
  }

  .reservation-item.focused{
    border-color:var(--primary);
    border-left-color:var(--primary);
    box-shadow:0 0 0 3px var(--focus-ring);
  }

  /* ---- Seletor de local/veículo no Calendário ---- */
  .calendar-filters-row{
    margin-bottom:18px;
  }

  /* Mantido no DOM (js/calendar.js ainda popula #carSelector), mas a
     interface usa os combobox acima em .calendar-filters-row. */
  .car-selector{
    display:none;
  }

  .car-tab-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1 1 150px;
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--text-muted);
    min-height:42px;
    padding:9px 14px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-family:inherit;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .car-tab-btn:hover{
    background:var(--surface-hover);
    color:var(--text);
  }

  .car-tab-btn.active{
    background:var(--primary);
    color:var(--on-primary);
    border-color:transparent;
    box-shadow:none;
  }

  .car-tab-city{
    font-size:var(--fs-2xs);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.4px;
    opacity:0.85;
  }

  /* Aparece só quando o filtro de veículo está em "Selecione..." (todos os
     veículos do local) e há mais de um - explica as cores das reservas na
     grade (ver CALENDAR_VEHICLE_COLORS em js/calendar.js e a paleta
     --cat-N no topo deste arquivo). */
  .calendar-vehicle-legend{
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    margin:-6px 0 14px;
    font-size:var(--fs-2xs);
    color:var(--text-muted);
  }

  .calendar-vehicle-legend-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

  .calendar-vehicle-legend-dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:3px;
  }

  .car-tab-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
  }

  /* ---- Ações do dia selecionado no calendário por carro ---- */
  .day-actions{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .day-empty-msg{
    color:var(--text-muted);
    font-size:0.88rem;
    margin-bottom:4px;
  }

/* ---- Popup de seleção de data (bloqueio de datas ocupadas) ---- */
  /* position:fixed com top/left calculados em js/modals.js (positionPopup) -
     flutua solto do body, então nunca fica preso à altura/rolagem de um
     modal. z-index acima de .modal-overlay (200) pra aparecer por cima de
     um modal aberto. */
  .date-popup{
    display:none;
    position:fixed;
    z-index:300;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
    padding:14px;
    width:292px;
    color:var(--text);
  }

  .date-popup.show{
    display:block;
    animation:fadeIn .2s ease;
  }

  .date-popup-nav-btn{
    background:none;
    border:none;
    cursor:pointer;
    font-size:1.05rem;
    color:var(--text-muted);
    padding:2px 9px;
    border-radius:var(--radius-xs);
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .date-popup-nav-btn:hover{
    background:var(--surface-hover);
    color:var(--text);
  }

  .date-popup-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:3px;
  }

  .date-popup-weekday{
    font-size:var(--fs-2xs);
    color:var(--text-muted);
    text-align:center;
    font-weight:600;
    padding:2px 0;
  }

  .date-popup-day{
    font-size:var(--fs-2xs);
    text-align:center;
    min-height:32px;
    display:grid;
    place-items:center;
    padding:5px 0;
    border-radius:var(--radius-xs);
    cursor:pointer;
    color:var(--text);
  }

  .date-popup-day:hover:not(.blocked):not(.other-month):not(.past){
    background:var(--surface-hover);
    color:var(--text);
  }

  .date-popup-day.other-month{
    color:var(--text-subtle);
    cursor:default;
  }

  .date-popup-day.past{
    color:var(--text-subtle);
    cursor:not-allowed;
  }

  .date-popup-day.blocked{
    background:var(--danger-surface);
    color:var(--danger-text);
    text-decoration:line-through;
    cursor:not-allowed;
  }

  .date-popup-day.selected{
    background:var(--primary);
    color:var(--on-primary);
    font-weight:600;
  }

  .date-popup-legend{
    display:flex;
    gap:10px;
    margin-top:8px;
    font-size:var(--fs-2xs);
    color:var(--text-muted);
    flex-wrap:wrap;
  }

/* Variações visuais da legenda do calendário */
.legend-reserved{
  background:var(--cat-1-surface);
  border:1px solid var(--cat-1);
}

.legend-today{
  background:transparent;
  border:2px solid var(--accent);
}

.legend-selection{
  background:var(--success-surface);
  border:1px dashed var(--success);
}

@media (max-width:720px){
  .calendar-filters-row{
    margin-bottom:9px;
  }

  .date-popup-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid var(--border);
  }

  .date-popup-clear-btn{
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    padding:6px 13px;
    font-size:var(--fs-2xs);
    font-weight:600;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease);
  }

  .date-popup-clear-btn:hover:not(:disabled){
    background:var(--surface-hover);
  }

  .date-popup-clear-btn:disabled{
    opacity:.5;
    cursor:default;
  }


  .app-screen.calendar-mobile-view{
    width:100%;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  .app-screen.calendar-mobile-view main{
    flex:1;
    min-height:0;
    padding:10px 9px calc(9px + env(safe-area-inset-bottom, 0px));
    overflow:hidden;
  }

  .app-screen.calendar-mobile-view footer{
    display:none;
  }

  .app-screen.calendar-mobile-view #panel-calendario{
    height:100%;
    min-height:0;
  }

  .app-screen.calendar-mobile-view #panel-calendario > .card{
    display:flex;
    height:100%;
    min-height:0;
    flex-direction:column;
    margin:0;
    padding:13px 11px;
    overflow:hidden;
  }

  .app-screen.calendar-mobile-view #panel-calendario > .card > h2{
    margin-bottom:10px;
    font-size:1rem;
  }

  .app-screen.calendar-mobile-view .calendar-filters-row{
    margin:0 0 9px;
  }

  .app-screen.calendar-mobile-view .calendar-nav{
    margin-bottom:8px;
  }

  .app-screen.calendar-mobile-view .calendar-drag-hint{
    margin:0 0 7px;
  }

  .app-screen.calendar-mobile-view .calendar-legend{
    display:none;
  }

  .app-screen.calendar-mobile-view .weekly-calendar{
    flex:1;
    min-height:0;
    max-height:none;
  }

  .calendar-nav{
    align-items:flex-start;
    gap:10px;
  }

  .calendar-nav-period{
    flex:1;
    gap:6px;
  }

  .calendar-month-label{
    flex:1;
    font-size:.88rem;
    text-align:center;
    justify-content:center;
    pointer-events:none;
  }

  .calendar-month-label-chevron{
    display:none;
  }

  .calendar-today-btn{
    padding:8px 12px;
  }

  .calendar-nav-btn{
    padding:8px 12px;
  }

  .calendar-drag-hint{
    line-height:1.45;
  }

  .weekly-calendar{
    max-height:68vh;
    margin-right:-4px;
  }

  .week-calendar-header,
  .week-calendar-body{
    min-width:796px;
  }

  .week-calendar-header{
    grid-template-columns:60px repeat(7,105px);
  }

  .week-calendar-body{
    grid-template-columns:60px 735px;
  }

  .week-days{
    grid-template-columns:repeat(7,105px);
  }

  .week-header-corner{
    font-size:var(--fs-2xs);
  }

  .weekly-calendar.mobile-month-mode{
    display:flex;
    min-height:0;
    flex-direction:column;
    max-height:none;
    margin:0;
    overflow:hidden;
    border-radius:var(--radius-lg);
    background:var(--surface);
  }

  .mobile-month-calendar{
    position:relative;
    display:flex;
    min-height:0;
    flex:1;
    flex-direction:column;
  }

  .mobile-month-weekdays,
  .mobile-month-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
  }

  .mobile-month-weekdays{
    flex:0 0 auto;
    padding:10px 0 7px;
    border-bottom:1px solid var(--border);
    background:var(--surface-2);
  }

  .mobile-month-weekdays span{
    color:var(--text-muted);
    text-align:center;
    font-size:var(--fs-2xs);
    font-weight:600;
  }

  .mobile-month-day{
    position:relative;
    min-width:0;
    min-height:82px;
    padding:7px 3px 4px;
    overflow:hidden;
    border:0;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    text-align:left;
    font:inherit;
    cursor:pointer;
  }

  .app-screen.calendar-mobile-view .mobile-month-grid{
    min-height:0;
    flex:1;
    grid-template-rows:repeat(6,minmax(0,1fr));
  }

  .app-screen.calendar-mobile-view .mobile-month-day{
    min-height:0;
  }

  .mobile-month-day:nth-child(7n){
    border-right:0;
  }

  .mobile-month-day strong{
    display:flex;
    align-items:center;
    justify-content:center;
    width:27px;
    height:27px;
    margin:0 auto 4px;
    border-radius:50%;
    font-size:var(--fs-2xs);
    font-weight:600;
  }

  /* Hoje: mesmo marcador discreto da agenda semanal. */
  .mobile-month-day.today strong{
    color:var(--accent);
    font-weight:700;
    box-shadow:inset 0 0 0 1.5px var(--accent);
  }

  .mobile-month-day.other-month{
    color:var(--text-subtle);
    background:var(--surface-2);
  }

  .mobile-month-day:active{
    background:var(--surface-hover);
  }

  .mobile-month-events{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:3px;
  }

  .mobile-month-event{
    display:block;
    max-width:100%;
    padding:2px 4px;
    overflow:hidden;
    border-left:3px solid var(--cat-1);
    border-radius:3px;
    background:var(--cat-1-surface);
    color:var(--text);
    font-size:var(--fs-2xs);
    font-weight:600;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-month-more{
    padding-left:4px;
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    font-weight:600;
  }

  .mobile-calendar-add{
    position:absolute;
    right:16px;
    bottom:18px;
    z-index:8;
    width:58px;
    height:58px;
    border:0;
    border-radius:var(--radius-lg);
    background:var(--primary);
    color:var(--on-primary);
    font-size:2rem;
    font-weight:400;
    line-height:1;
    box-shadow:var(--shadow-md);
    cursor:pointer;
    transition:background-color var(--dur) var(--ease);
  }

  .mobile-calendar-add:active{
    background:var(--primary-hover);
  }

  .mobile-calendar-add:disabled{
    opacity:.5;
    cursor:not-allowed;
  }

  .mobile-month-mode + .calendar-legend{
    display:none;
  }

  .weekly-calendar.mobile-day-mode{
    display:flex;
    min-height:0;
    flex-direction:column;
    max-height:none;
    margin:0;
    overflow:hidden;
    border:0;
    background:transparent;
  }

  .mobile-day-calendar{
    display:flex;
    min-height:0;
    flex:1;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
  }

  .mobile-day-top{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:10px;
    align-items:center;
    padding:13px 12px;
    border-bottom:1px solid var(--border);
    background:var(--surface-2);
  }

  .mobile-day-back{
    width:40px;
    height:40px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font-size:1.45rem;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease);
  }

  .mobile-day-back:active{
    background:var(--surface-hover);
  }

  .mobile-day-top span,
  .mobile-day-top strong,
  .mobile-day-top small{
    display:block;
  }

  .mobile-day-top span{
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .mobile-day-top strong{
    margin-top:2px;
    color:var(--text);
    font-size:.98rem;
  }

  .mobile-day-top small{
    margin-top:3px;
    color:var(--text-muted);
    font-size:var(--fs-2xs);
  }

  .mobile-day-scroll{
    min-height:0;
    flex:1;
    max-height:62vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-color:var(--border-strong) transparent;
  }

  .app-screen.calendar-mobile-view .mobile-day-scroll{
    max-height:none;
  }

  .mobile-day-body{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    min-width:0;
  }

  .mobile-day-mode .week-time-axis{
    grid-template-rows:repeat(48,42px);
  }

  .mobile-day-mode .week-time-label{
    padding-right:8px;
    font-size:var(--fs-2xs);
  }

  .mobile-day-mode .week-days.mobile-one-day{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    min-width:0;
  }

  .mobile-day-mode .week-day-column{
    grid-template-rows:repeat(48,42px);
    min-height:calc(48 * 42px);
    border-left:1px solid var(--border);
  }

  .mobile-day-mode .week-time-slot{
    min-height:42px;
    touch-action:pan-y;
    user-select:none;
  }

  .mobile-day-mode .week-reservation-event{
    left:7px;
    right:7px;
    padding:7px 9px;
  }

  .mobile-day-mode .week-reservation-event strong{
    font-size:var(--fs-2xs);
  }

  .mobile-day-mode .week-reservation-event span{
    font-size:var(--fs-2xs);
  }

  .mobile-day-mode .week-selection-preview{
    left:7px;
    right:7px;
    padding:8px 10px;
  }

  .mobile-day-mode .mobile-pending-selection{
    overflow:visible;
    pointer-events:auto;
    border:2px solid var(--primary);
    border-left-width:2px;
    background:var(--primary-soft-strong);
    color:var(--text);
    box-shadow:none;
  }

  .mobile-selection-handle{
    position:absolute;
    z-index:12;
    width:25px;
    height:25px;
    padding:0;
    border:5px solid var(--surface);
    border-radius:50%;
    background:var(--primary);
    box-shadow:var(--shadow-sm);
    touch-action:none;
  }

  .mobile-selection-handle.start{
    top:-13px;
    left:-13px;
  }

  .mobile-selection-handle.end{
    right:-13px;
    bottom:-13px;
  }

  .mobile-selection-sheet{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:13px 14px;
    border-top:1px solid var(--border);
    background:var(--surface);
    box-shadow:var(--shadow-md);
  }

  .mobile-selection-sheet.hidden{
    display:none;
  }

  .mobile-selection-sheet span,
  .mobile-selection-sheet strong{
    display:block;
  }

  .mobile-selection-sheet span{
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    font-weight:600;
  }

  .mobile-selection-sheet strong{
    margin-top:3px;
    color:var(--text);
    font-size:.84rem;
  }

  .mobile-selection-actions{
    display:flex;
    gap:7px;
  }

  .mobile-selection-cancel,
  .mobile-selection-confirm{
    min-height:38px;
    padding:8px 12px;
    border-radius:var(--radius-sm);
    font:inherit;
    font-size:var(--fs-2xs);
    font-weight:600;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease);
  }

  .mobile-selection-cancel{
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--text);
  }

  .mobile-selection-cancel:active{
    background:var(--surface-hover);
  }

  .mobile-selection-confirm{
    border:1px solid transparent;
    background:var(--primary);
    color:var(--on-primary);
    box-shadow:none;
  }

  .mobile-selection-confirm:active{
    background:var(--primary-hover);
  }
}

.range-calendar-topline{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
  padding:0 3px;
}

.range-calendar-topline strong,
.range-calendar-topline span{
  display:block;
}

.range-calendar-topline strong{
  color:var(--text);
  font-size:var(--fs-2xs);
}

.range-calendar-topline span{
  margin-top:2px;
  color:var(--text-muted);
  font-size:var(--fs-2xs);
}

.range-calendar-header{
  display:grid;
  grid-template-columns:32px 1fr 32px;
  align-items:center;
  margin-bottom:6px;
}

.range-calendar-header strong{
  color:var(--text);
  text-align:center;
  font-size:.86rem;
  text-transform:lowercase;
}

.range-calendar-nav{
  width:30px;
  height:30px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text-muted);
  font-size:1.2rem;
  cursor:pointer;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Cabeçalho "yearNav": dois <select> (mês/ano) no lugar do texto fixo,
   pra pular direto pro mês/ano certo sem clicar dezenas de vezes em
   "próximo mês" (caso de uso: validade de CNH, até ~10 anos à frente). */
.range-calendar-header.has-year-nav{
  grid-template-columns:32px 1fr 32px;
}

.date-popup-monthyear-select{
  display:flex;
  gap:6px;
  justify-content:center;
}

.date-popup-month-select,
.date-popup-year-select{
  /* width:auto é essencial aqui: a regra global "select{width:100%}" (ver
     css/base.css) vira a flex-basis de cada <select> quando flex-basis fica
     no "auto" padrão, e com os dois pedindo 100% do wrapper o flexbox
     espremia o select de mês perto de 0px pra sobrar espaço pro de ano.
     Com width:auto a base volta a ser o conteúdo, e o flex-grow abaixo
     distribui o espaço direito. */
  width:auto;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  font-size:var(--fs-2xs);
  padding:4px 6px;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.date-popup-month-select{
  flex:1 1 auto;
  min-width:0;
}

.date-popup-year-select{
  flex:0 0 auto;
}

.date-popup-month-select:hover,
.date-popup-year-select:hover{
  border-color:var(--text-subtle);
}

.date-popup-month-select:focus,
.date-popup-year-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--focus-ring);
  outline:none;
}

.range-calendar-nav:hover{
  background:var(--surface-hover);
  color:var(--text);
}

.range-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:2px 1px;
}

.range-calendar-weekday{
  padding:2px 0 3px;
  color:var(--text-muted);
  text-align:center;
  font-size:var(--fs-2xs);
  font-weight:600;
  text-transform:uppercase;
}

.range-calendar-day{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  min-width:0;
  padding:0;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-size:var(--fs-2xs);
  font-weight:600;
}

.range-calendar-day span{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.range-calendar-day:hover:not(:disabled) span{
  background:var(--surface-hover);
  color:var(--text);
}

.range-calendar-day.other-month{
  visibility:hidden;
}

.range-calendar-day.disabled{
  color:var(--text-subtle);
  cursor:not-allowed;
}

.range-calendar-day.unavailable{
  color:var(--danger-text);
  text-decoration:line-through;
  cursor:not-allowed;
}

.date-popup.range-style-date-popup{
  width:min(360px,calc(100vw - 32px));
  padding:12px;
  border-color:var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-md);
}

.range-style-date-popup .single-date-topline{
  margin-bottom:8px;
}

.range-style-date-popup .date-popup-day.selected,
.range-style-date-popup .date-popup-day.blocked{
  background:transparent;
}

.range-style-date-popup .date-popup-day.blocked{
  color:var(--danger-text);
}

.range-style-date-popup .date-popup-actions{
  display:flex;
  justify-content:flex-end;
}

/* Hoje: anel fino na cor de destaque. */
.range-calendar-day.today span{
  color:var(--accent);
  box-shadow:inset 0 0 0 1.5px var(--accent);
}

/* Dia selecionado / início do intervalo: sólido na cor primária. */
.range-calendar-day.range-start span,
.range-calendar-day.range-start:hover:not(:disabled) span{
  background:var(--primary);
  color:var(--on-primary);
  box-shadow:none;
  font-weight:700;
}

.range-calendar-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:6px 3px 0;
  color:var(--text-muted);
  font-size:var(--fs-2xs);
}

.range-calendar-legend span{
  display:flex;
  align-items:center;
  gap:6px;
}

.range-legend-dot{
  width:8px;
  height:8px;
  border-radius:50%;
}

.range-legend-dot.selected{
  background:var(--primary);
}

.range-legend-dot.unavailable{
  background:var(--danger);
}

.range-calendar-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:6px;
  padding-top:7px;
  border-top:1px solid var(--border);
}

.range-clear-btn{
  padding:7px 12px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-2xs);
  font-weight:600;
  cursor:pointer;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text);
  transition:background-color var(--dur) var(--ease);
}

.range-clear-btn:hover:not(:disabled){
  background:var(--surface-hover);
}

@media (max-width:480px){
  .range-calendar-day{
    height:34px;
  }
  .range-calendar-day span{
    width:25px;
    height:25px;
  }
}

/* =========================================================
   Seletor de semana (clicar no título "30 de Ago – 05 de Set")
   Reaproveita .date-popup (posicionamento/animação) e as classes
   .range-calendar-* do date-popup de dia único (cabeçalho, navegação,
   dia, weekday) - só o agrupamento em linhas de semana e o painel de
   meses/ano à direita são específicos daqui.
   ========================================================= */
.date-popup.week-picker-popover{
  display:none;
  width:min(560px,calc(100vw - 32px));
  padding:14px;
  border-color:var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-md);
}

.date-popup.week-picker-popover.show{
  display:flex;
}

.week-picker-panel{
  flex:1;
  min-width:0;
}

.week-picker-panel + .week-picker-panel{
  margin-left:16px;
  padding-left:16px;
  border-left:1px solid var(--border);
}

.week-picker-grid{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.week-picker-row{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  border-radius:var(--radius-sm);
}

/* Semana atual = faixa suave da cor primária. */
.week-picker-row.current{
  background:var(--primary-soft-strong);
}

.week-picker-row .range-calendar-day.other-month{
  visibility:visible;
  color:var(--text-subtle);
}

.week-picker-months{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

.week-picker-month-btn{
  padding:10px 4px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text);
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  text-transform:capitalize;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.week-picker-month-btn:hover{
  background:var(--surface-hover);
}

.week-picker-month-btn.active{
  background:var(--primary);
  color:var(--on-primary);
  font-weight:600;
}

@media (max-width:600px){
  .date-popup.week-picker-popover{
    flex-direction:column;
    width:min(320px,calc(100vw - 32px));
  }

  .week-picker-panel + .week-picker-panel{
    margin-left:0;
    padding-left:0;
    border-left:0;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--border);
  }
}