/* ════════════════════════════════════════════════════════════════════════
   mobile.css — camada mobile do dashboard Altrix.
   Carrega DEPOIS de responsive.css. Nada aqui toca em >640px.

   Referência visual: design_handoff_mobile/maquetes/Mobile *.dc.html
   Sistema: barra de topo numa linha · período dentro do 1º cartão ·
   o número antes do gráfico · nada colado ao topo · alvos de 44px.

   ┌─ SELETORES CONFIRMADOS (2026-08-18, a 390px, página a página) ──────┐
   │ O bloco CONFIRMAR do handoff assumia nomes que em parte não         │
   │ existiam. O que foi corrigido:                                      │
   │                                                                     │
   │   .card             → não existe. Os cartões são .chart-section,    │
   │                       .bar-panel, .table-section, .calendar-section,│
   │                       .op-section, .rebate-card-large, .perf-panel, │
   │                       .cl-card, .pamm-chart-card                    │
   │   .panel            → só existe no /analysis, e ali é o contentor   │
   │                       do layout dividido, NÃO um cartão. Excluído.  │
   │   .chart-body /                                                     │
   │   .chart-wrap /     → não existem. Os contentores de gráfico são    │
   │   .chart-canvas-wrap  .equity-wrap e .bar-wrap (Overview),          │
   │                       .perf-chart-h220 e .perf-chart-h200 (Perf.)   │
   │   [class*=cal-grid] → a grelha chama-se .calendar-grid (Overview) e │
   │                       .perf-calendar (Performance)                  │
   │   [class*=cal-week] → a coluna WEEK é .cal-day-header.cal-week-col  │
   │                       e o total de semana é .cal-week-total         │
   │   [class*=axis-y] /                                                 │
   │   [class*=axis-x]   → não existem: os eixos são desenhados dentro   │
   │                       do <canvas> pelo Chart.js. Os limites de      │
   │                       rótulos passaram para o JS dos gráficos.      │
   │   [class*=kpi-hero]                                                 │
   │   [class*=hero-value] → o herói é .hc-pnl-pct .hc-value (Overview)  │
   │                       e .perf-total-return (Performance)            │
   │   .metrics-row      → não existe. O grupo de 3 métricas é           │
   │                       .tier2-row (Overview)                         │
   │   .topbar .seg      → o filho direto do .topbar é .seg-wrap;        │
   │                       o order tem de ir ao .seg-wrap                │
   │   .topbar-bell      → chama-se .notif-bell                          │
   │   .main             → só index/mt5/definições. Clientes usa         │
   │                       .cl-main, PAMM .pamm-main, Performance        │
   │                       .perf-wrap, Analysis nenhum                   │
   │   .cmp-*            → a Comparison v2 usa .cv-* (ver §7)            │
   └─────────────────────────────────────────────────────────────────────┘
   ════════════════════════════════════════════════════════════════════════ */

/* A matriz do Comparison é peça só do telemóvel: o compare-v2.js pinta-a
   sempre, ao lado da faixa, para não ter de repintar tudo ao rodar o
   telemóvel. Fora do telemóvel não se vê. Isto não mexe em nada do que já
   existia acima dos 640px — só esconde um elemento novo. Fica ANTES do
   @media: com a mesma especificidade, ganha quem vem depois. */
.cmp-board { display: none; }

@media (max-width: 639.98px) {

  /* ╔══ 1. BARRA DE TOPO — UMA LINHA ═══════════════════════════════════╗
     A barra do telemóvel é a .app-topbar (sanduíche + marca). O
     mobile-rows.js muda-lhe o título para o da página e traz-lhe o botão
     do tema. O .topbar do desktop deixa de ser barra: desce e passa a ser
     o primeiro cartão da página, com as setas de data e as pills.        */

  /* Nada cola ao topo — decisão explícita do cliente (README §4) */
  .app-topbar { position: static; }
  .topbar { position: static; }

  .app-topbar__theme {
    margin-left: auto;
    flex: 0 0 var(--tap, 44px);
    width: var(--tap, 44px);
    height: var(--tap, 44px);
  }

  /* O .topbar vira cartão: mesma pele dos outros cartões da página */
  .main > .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 12px 14px 12px;
    background: var(--glass-1);
    border: 1px solid var(--border-glass);
    border-radius: 18px;
    box-shadow: var(--elev-1);
  }
  .main > .topbar > .topbar-label {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13.5px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* O que sai da barra no telemóvel */
  .topbar .topbar-search,
  .topbar .notif-bell { display: none; }

  /* O bloco de período desce para a segunda linha do cartão. O filho
     direto do .topbar é o .seg-wrap — o .seg está lá dentro. */
  .topbar .seg-wrap {
    order: 99;
    flex: 1 0 100%;
    min-width: 0;
    margin-top: 8px;
  }

  /* Pills rolam na horizontal em vez de partir a linha */
  .seg {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .seg::-webkit-scrollbar { display: none; }
  .seg > * {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* O .pill tem height:28px fixo (dashboard.css:405) e a altura ganha
       sempre ao min-height — daí as duas. 38px é o valor da maqueta
       (Overview.dc.html: min-height:38px). */
    height: 38px;
    min-height: 38px;
    white-space: nowrap;
  }
  /* A placa fica nos 38px da maqueta, mas o ALVO cresce para os 44px
     exigidos: a área de toque sai do desenho, não o contrário. */
  .seg > *::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: var(--tap, 44px);
    transform: translateY(-50%);
  }


  /* ╔══ 2. RITMO DA PÁGINA ═════════════════════════════════════════════╗
     Margem 16px · raio 18px · padding 16px 16px 18px · 14px entre cartões */

  .main,
  .cl-main,
  .pamm-main,
  .perf-wrap {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  .chart-section,
  .bar-panel,
  .table-section,
  .calendar-section,
  .op-section,
  .rebate-card-large,
  .rebates-explorer,
  .rebates-info,
  .adv-metrics-section,
  .terminal-list,
  .perf-panel,
  .cl-card,
  .pamm-chart-card {
    border-radius: 18px;
    padding: 16px 16px 18px;
  }

  /* Espaço entre cartões: 14px (maqueta). O contentor do Overview é uma
     coluna flex com gap de 18px. */
  .comparison-col { gap: 14px; }


  /* ╔══ 3. NÚMEROS ═════════════════════════════════════════════════════╗
     O herói primeiro, o gráfico depois. Grelhas de KPI a duas colunas.  */

  .hc-pnl-pct .hc-value,
  .perf-total-return {
    /* Overview.dc.html: font-size:54px;font-weight:600;
       letter-spacing:-0.035em;line-height:1 */
    font-size: clamp(40px, 12vw, 54px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
  }

  /* "+$2,216.12 · BALANCE $94,590.36" — uma linha, extremos afastados
     (Overview.dc.html: justify-content:space-between;gap:12px;margin-top:14px) */
  .hc-pnl-pct .hc-top {
    column-gap: 12px;
    row-gap: 14px;
  }
  .hc-pnl-pct .hc-balance { gap: 8px; }

  /* No desktop lê-se da esquerda para a direita (gráfico | números); no
     telemóvel de cima para baixo, e o número vem primeiro. */
  .top-grid {
    display: flex !important;
    flex-direction: column;
    /* o .top-grid é uma grelha com align-items:start; ao virar coluna,
       o start passa a encolher os filhos à largura do conteúdo */
    align-items: stretch;
  }
  .top-grid > .hero-stack { order: 1; }
  .top-grid > .chart-section { order: 2; }

  /* O dashboard.css põe P&L e WIN RATE lado a lado numa @container
     dashcol (max-width:600px). A 390px os dois não cabem: a percentagem
     do herói e o mostrador entram um no outro. Empilha. */
  .tier1-row {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
  }

  [class*="kpi"], [class*="metric-grid"], [class*="stat-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Grupos de 3 métricas: em vez de 3 colunas espremidas, linhas
     rótulo-esquerda / valor-direita (padrão das maquetes). */
  .tier2-row {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }
  .tier2-row > .tier2-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border-glass);
    border-right: 0 !important;
  }


  /* ╔══ 4. TABELAS: RESUMO + TOQUE PARA ABRIR ══════════════════════════╗
     Depende de mobile-rows.js, que marca .rwd-lead a partir de
     data-rwd-lead="Symbol,Dir,P&L $" no <table>.                        */

  table.rwd-cards tr {
    position: relative;
    padding: 12px 14px;
    margin-bottom: 8px;
  }

  /* Por omissão só as células de resumo aparecem */
  table.rwd-cards[data-rwd-lead] tbody td { display: none; }
  table.rwd-cards[data-rwd-lead] tbody td.rwd-lead { display: flex; }
  table.rwd-cards[data-rwd-lead] tbody tr.is-open td { display: flex; }

  /* A célula de resumo não repete o rótulo — o valor chega */
  table.rwd-cards[data-rwd-lead] tbody td.rwd-lead::before { content: none; }
  table.rwd-cards[data-rwd-lead] tbody td.rwd-lead {
    justify-content: flex-start;
    border-bottom: 0;
    padding: 4px 0;
    font-size: 15px;
    font-weight: 700;
  }
  table.rwd-cards[data-rwd-lead] tbody td.rwd-lead ~ td.rwd-lead {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-2);
  }

  /* As células escondidas, quando abrem, viram pares rótulo/valor em duas
     colunas (MT5 Accounts.dc.html: repeat(2,minmax(0,1fr));gap:0 18px). */
  table.rwd-cards[data-rwd-lead] tbody tr.is-open {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
  }
  /* O resumo fica em cima, como na maqueta; o detalhe vem por baixo. */
  table.rwd-cards[data-rwd-lead] tbody tr.is-open td.rwd-lead { flex: 1 0 100%; order: -1; }
  table.rwd-cards[data-rwd-lead] tbody tr.is-open td:not(.rwd-lead) {
    flex: 1 1 calc(50% - 9px);
    min-width: 0;
    border-top: 1px solid var(--border-glass);
    border-bottom: 0;
    padding: 7px 0;
    font-size: 12.5px;
  }

  /* A linha de estado ("a carregar", "sem dados") nunca é um cartão */
  table.rwd-cards[data-rwd-lead] tbody tr.empty-row td { display: table-cell; }
  table.rwd-cards[data-rwd-lead] tbody tr.empty-row .rwd-caret { display: none; }

  /* Seta de estado, posta pelo JS */
  .rwd-caret {
    position: absolute;
    top: 14px; right: 12px;
    width: 13px; height: 13px;
    color: var(--text-3);
    transition: transform .2s ease, color .2s ease;
    pointer-events: none;
  }
  tr.is-open .rwd-caret {
    transform: rotate(90deg);
    color: var(--brand);
  }
  tr.is-open { background: var(--overlay-subtle); }

  /* Ação destrutiva sempre visível na linha, pequena, à direita */
  /* A célula da ação fica sempre à vista; o resto do que lá está dentro
     (snooze, etc.) só aparece com a linha aberta. */
  table.rwd-cards[data-rwd-lead] tbody td:has(.rwd-action) {
    display: flex !important;
    justify-content: flex-end;
    border-bottom: 0;
    padding: 4px 0;
  }
  table.rwd-cards[data-rwd-lead] tbody td:has(.rwd-action)::before { content: none; }
  table.rwd-cards[data-rwd-lead] tbody tr:not(.is-open) td .row-actions > *:not(.rwd-action) { display: none; }
  /* MT5 Accounts.dc.html: min-height:32px;padding:0 12px;border-radius:8px;
     font-size:11px;font-weight:700;letter-spacing:0.04em;
     box-shadow:0 8px 16px -8px rgba(165,40,44,0.6)
     O escuro é o tema por omissão (o claro é que é o data-theme="light"),
     por isso o gradiente escuro é a base. */
  td .rwd-action, .rwd-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, #E0575D, #B02F35);
    border: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 16px -8px rgba(165, 38, 44, 0.6);
  }
  [data-theme="light"] td .rwd-action,
  [data-theme="light"] .rwd-action {
    background: linear-gradient(180deg, #CE4A50, #A5262C);
  }
  td .rwd-action:disabled, .rwd-action:disabled { opacity: 0.45; }


  /* ╔══ 5. GRÁFICOS ════════════════════════════════════════════════════╗
     Limita o CONTENTOR, nunca o <canvas> — o Chart.js dimensiona-se a
     partir do pai e limitar o canvas deixa faixa morta por baixo.
     A .gauge-wrap fica de fora: é o mostrador de 72px do win rate.      */

  .equity-wrap,
  .bar-wrap,
  .perf-chart-h220,
  .perf-chart-h200 { height: 170px; max-height: 170px; }   /* Overview.dc.html: height:170px */

  /* Sem isto, arrastar no gráfico bloqueia o scroll vertical da página */
  .equity-wrap,
  .bar-wrap,
  .perf-chart-h220,
  .perf-chart-h200,
  .cv-chart,
  .chart-section canvas,
  .bar-panel canvas,
  .perf-panel canvas { touch-action: pan-y; }


  /* ╔══ 6. CALENDÁRIO ══════════════════════════════════════════════════╗
     7 colunas + linha-resumo da semana. A coluna WEEK sai da grelha:
     com grid-column:1/-1 o total cai sozinho para a linha seguinte, que
     é exatamente onde a maqueta o põe (PL Calendar.dc.html).           */

  .calendar-grid,
  .perf-calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px;
  }
  .cal-day-header.cal-week-col { display: none; }

  /* PL Calendar.dc.html: min-height:56px;border-radius:10px;padding:6px 5px;
     flex-direction:column;align-items:center;justify-content:flex-start */
  .cal-cell {
    aspect-ratio: auto;
    min-height: 56px;
    padding: 6px 4px;
    border-radius: 10px;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    /* A percentagem é medida contra a largura da própria placa: a 375px
       a placa tem 40px e "+12.34" a 10.5px não lá cabe. O mesmo truque
       que o performance.css já usa nas placas estreitas. */
    container-type: inline-size;
  }
  /* No desktop o número do dia está em position:absolute no canto; na
     maqueta do telemóvel está no fluxo, por cima da percentagem e
     centrado com ela. */
  .cal-cell .cal-day {
    position: static;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
  }
  /* O dashboard.css esconde o valor e a percentagem numa
     @container dashcol (max-width:360px) — a coluna do telemóvel cai
     sempre nessa medida. A percentagem tem de voltar: é o único número
     dentro da placa. */
  .cal-cell .cal-pct {
    display: block;
    margin-top: 5px;
    font-size: clamp(7.5px, 33cqw, 10.5px);
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
  }
  /* A maqueta escreve "+0.42", sem o sinal: numa placa de 42px o
     "+0.42%" não cabe e sai cortado. */
  .cal-cell .cal-pct-sign { display: none; }
  /* Dias de dois algarismos ("+12.34"): o mobile-rows.js mede e marca. */
  .cal-cell .cal-pct.cal-pct--long { font-size: clamp(6.5px, 27cqw, 8.5px); }
  /* O valor em euros não cabe dentro da placa — aparece ao tocar no dia */
  .cal-cell .cal-pnl,
  .cal-cell .cal-count { display: none; }
  .cal-cell:hover:not(.empty) { transform: none; box-shadow: none; }
  .cal-cell.is-selected { outline: 2px solid var(--brand); outline-offset: -2px; }

  /* O total da semana passa a faixa a toda a largura, por baixo da semana
     (PL Calendar.dc.html: gap:10px;margin-top:4px;padding:7px 11px;
      border-radius:8px). */
  .cal-week-total {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;          /* o desktop empilha-a numa coluna */
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    height: auto;
    margin: 4px 0 0;
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--overlay-subtle);
    border: 0;
    border-left: 0;
    text-align: left;
  }
  .cal-week-total::before {
    content: 'WEEK';
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-3);
  }
  /* O dashboard.css esconde o valor numa @container dashcol de 600px —
     a coluna do telemóvel cai sempre lá. Na faixa da semana o valor é o
     que interessa: volta. */
  .cal-week-total .cwt-money {
    display: block;
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.1;
  }
  .cal-week-total .cwt-pct { font-size: 10.5px; color: var(--text-3); }

  /* Painel do dia escolhido, posto pelo mobile-rows.js
     (PL Calendar.dc.html: gap:12px;margin-top:14px;padding:12px 14px;
      border-radius:12px;background:var(--brand-bg)) */
  .cal-day-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(var(--brand-rgb), 0.14);
  }
  .cal-day-detail .cdd-day {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    color: var(--brand);
  }
  .cal-day-detail .cdd-pnl { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
  .cal-day-detail .cdd-pct { font-size: 17px; font-weight: 600; }


  /* ╔══ 7. COMPARISON: COLUNA FIXA + SCROLL LATERAL ════════════════════╗
     A Comparison v2 do desktop (.cv-strip) não tem coluna de rótulos: o
     railCell() da maqueta devolve null e cada .cv-row é só uma fila de
     .cv-col, uma por conta. A maqueta do telemóvel pede outra coisa —
     uma matriz com os rótulos fixos à esquerda. O mobile-rows.js
     constrói essa matriz (.cmp-table) a partir dos dados que já estão no
     ecrã e esconde a faixa do desktop abaixo dos 640px.

     As duas metades TÊM de ter a mesma altura de linha ou desalinham.   */

  /* O #cv-strip é o hospedeiro das duas: esconde-se a FAIXA (.cv-board),
     não o hospedeiro, senão ia a matriz atrás. */
  .cv-board { display: none; }
  .cmp-board { display: block; }

  .cmp-table { display: flex; }
  .cmp-fixed {
    flex: 0 0 116px;
    border-right: 1px solid var(--border-glass);
  }
  .cmp-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .cmp-scroll::-webkit-scrollbar { display: none; }
  .cmp-scroll > * { display: flex; min-width: min-content; }
  .cmp-col {
    /* min-width:0 é preciso: sem ele o nome da conta impõe a largura
       mínima do conteúdo e a coluna estica para lá dos 128px da maqueta. */
    flex: 0 0 128px;
    min-width: 0;
    scroll-snap-align: start;
    border-right: 1px solid var(--border-glass);
  }
  .cmp-fixed > *, .cmp-col > * {
    height: 52px;            /* alinhamento: não mudar num lado só */
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-top: 1px solid var(--border-glass);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  .cmp-fixed > * {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .cmp-fixed > .cmp-head, .cmp-col > .cmp-head {
    height: 46px;
    border-top: 0;
    background: var(--overlay-subtle);
    font-size: 11px;
  }
  .cmp-fixed > .cmp-head { font-size: 8.5px; letter-spacing: 0.1em; }
  .cmp-col > .cmp-head > .cmp-mono {
    flex: 0 0 20px;
    width: 20px; height: 20px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 8.5px; font-weight: 700; color: #fff;
  }
  .cmp-col > .cmp-head > .cmp-name {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cmp-col > * { overflow: hidden; white-space: nowrap; }

  /* Chips de conta rolam de lado */
  .cmp-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cmp-chips::-webkit-scrollbar { display: none; }
  .cmp-chips > * { flex: 0 0 auto; min-height: 40px; }

  /* Mobile Comparison.dc.html: min-height:44px;margin-top:4px;
     border-top:1px solid var(--rule);font-size:13.5px;font-weight:600 */
  .cmp-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--tap, 44px);
    margin-top: 4px;
    border-top: 1px solid var(--border-glass);
    color: var(--brand);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
  }


  /* ╔══ 8. ALVOS DE TOQUE ══════════════════════════════════════════════╗ */

  button, .btn, [role="button"], .nav-item, select {
    min-height: var(--tap, 44px);
  }
  /* Links que fazem de botão e não são <button>: o "← Dashboard" do
     /analysis (20px), os atalhos do topo dos Clientes (34px) e as
     entradas do menu do utilizador no PAMM (40px). */
  .back-link,
  .cl-nav-link,
  .user-menu-panel a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap, 44px);
  }
  .icon-btn, .theme-toggle, .topbar-arrow, .cl-icon-btn {
    width: var(--tap, 44px);
    height: var(--tap, 44px);
  }

  /* Interruptores: esticá-los a 44px de altura desfigurava-os (o
     .auto-toggle é uma placa de 34×19 com o botão no ::after). O
     desenho fica; o alvo cresce num ::before invisível. */
  .auto-toggle {
    position: relative;
    min-height: 19px;
    height: 19px;
  }
  .auto-toggle::before {
    content: '';
    position: absolute;
    left: -5px; right: -5px; top: 50%;
    height: var(--tap, 44px);
    transform: translateY(-50%);
  }
  /* "AUTO diz ON/OFF por escrito" (README) — a cor sozinha não chega.
     O rótulo é só do telemóvel: no desktop a coluna já se chama Auto. */
  table.rwd-cards td:has(> .auto-toggle) { gap: 8px; }
  table.rwd-cards td:has(> .auto-toggle)::after {
    content: 'OFF';
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-3);
  }
  table.rwd-cards td:has(> .auto-toggle.is-on)::after {
    content: 'ON';
    color: var(--profit);
  }
}

/* Landscape em ecrã baixo: o drawer não ocupa o ecrã todo */
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 500px) {
  .app-drawer { width: min(280px, 60vw); }
}