/*
 * WA — Base CSS
 * Componentes universais (.app-*, .ui-*) construídos com tokens em var(--*).
 * Cada tema em /css/themes/<id>.css redefine as variáveis. Alguns temas
 * também sobrescrevem seletores específicos (festa, aurora, etc).
 *
 * Tipografia padrão do projeto: Poppins (todos os temas usam).
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ============ TOKENS DEFAULT (sobrescritos pelo tema) ============ */
:root {
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
    --font-display: var(--font-sans);

    --bg-base: #f5f5f7;
    --bg-surface: rgba(255,255,255,0.78);
    --bg-elevated: #ffffff;
    --bg-hover: rgba(0,0,0,0.04);
    --bg-active: rgba(0,0,0,0.08);

    --text-primary: #1d1d1f;
    --text-secondary: #4a4a4f;
    --text-tertiary: #8a8a90;
    --text-inverse: #ffffff;

    --border: rgba(0,0,0,0.08);
    --border-strong: rgba(0,0,0,0.16);
    --divider: rgba(0,0,0,0.06);

    --accent: #007aff;
    --accent-hover: #0066d6;
    --accent-soft: rgba(0,122,255,0.12);
    --on-accent: #ffffff;

    --green: #34c759;
    --red: #ff3b30;
    --orange: #ff9500;
    --yellow: #ffcc00;
    --purple: #af52de;
    --pink: #ff2d55;

    --grad-brand: linear-gradient(135deg, #ff2d55, #af52de, #007aff);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
    --shadow-window: 0 30px 80px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.1);

    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 9999px;

    /* Cor da marca do SaaS — master configura em /master-ajustes.html.
       Default = verde WA (#1E7A45); redefinida em runtime via App.applyBranding. */
    --brand-color: #1E7A45;

    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --blur: blur(22px) saturate(180%);
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
/* Densidade global do sistema — reduz tudo proporcionalmente (~8% menor)
 * em todos os elementos: fontes, padding, ícones, etc. Pra mais ou menos
 * agressivo, ajuste o `zoom` aqui. zoom é suportado por Chrome, Edge, Safari
 * e Firefox 126+.
 *
 * Compensação do zoom: como o body é renderizado a 90% do tamanho lógico,
 * `min-height` precisa ser 1/0.9 (~111%) pra encher o viewport visualmente
 * — senão sobra uma faixa em branco/cinza no rodapé. */
body {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
    zoom: 0.9;
    min-height: calc(100vh / 0.9);
}

a, a:hover, a:focus, a:active, a:visited { text-decoration: none; }
a { color: var(--accent); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.02em; font-family: var(--font-display); }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

p { margin: 0 0 16px; color: var(--text-secondary); }

button, input, textarea, select {
    font-family: inherit; font-size: inherit; color: inherit;
}

::selection { background: var(--accent); color: var(--on-accent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.22);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.36); background-clip: padding-box; }

/* ============ UTILIDADES ============ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.row { display: flex; gap: 16px; align-items: center; }
.spacer { flex: 1; }

/* ============ CARD / SURFACE ============ */
.ui-card {
    background: var(--bg-elevated);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    border: 0.5px solid var(--border);
    padding: 24px;
}

.ui-surface {
    background: var(--bg-surface);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 0.5px solid var(--border);
    border-radius: var(--r-lg);
}

/* ============ BOTÕES ============ */
.ui-btn {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 16px;
    border-radius: var(--r-sm);
    border: 0.5px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 500; font-size: 12px;
    cursor: pointer;
    transition: transform 120ms var(--ease), background 120ms var(--ease), box-shadow 120ms var(--ease);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
}
.ui-btn:hover { background: var(--bg-hover); }
.ui-btn:active { transform: scale(0.97); background: var(--bg-active); }
.ui-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ui-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border-color: transparent;
}
.ui-btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.ui-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.ui-btn-ghost:hover { background: var(--bg-hover); }

.ui-btn-danger { background: var(--red); color: #fff; border-color: transparent; }
.ui-btn-danger:hover { background: #d9302a; }

/* ============ INPUTS ============ */
.ui-input, .ui-textarea, .ui-select {
    width: 100%;
    padding: 9px 12px;
    border: 0.5px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 12.5px;
    outline: none;
    transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
    font-family: inherit;
}
.ui-input:focus, .ui-textarea:focus, .ui-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--text-tertiary); }

.ui-field { display: flex; flex-direction: column; gap: 8px; }
.ui-field + .ui-field { margin-top: 12px; }
.ui-field label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }

/* ============ JANELA (estilo Mac, mas tema pode redefinir) ============ */
.ui-window {
    background: var(--bg-elevated);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-window);
    overflow: hidden;
    border: 0.5px solid var(--border);
}
.ui-titlebar {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    background: var(--bg-surface);
    backdrop-filter: blur(20px);
    border-bottom: 0.5px solid var(--divider);
    user-select: none;
}
.ui-traffic { display: flex; gap: 8px; }
.ui-traffic .dot {
    width: 12px; height: 12px; border-radius: 50%;
    display: inline-block;
}
.ui-traffic .dot.red    { background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.08); }
.ui-traffic .dot.yellow { background: #ffbd2e; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.08); }
.ui-traffic .dot.green  { background: #28c940; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.08); }
.ui-title {
    flex: 1; text-align: center;
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
}

/* ============ SIDEBAR ============ */
.ui-sidebar {
    width: 240px; flex-shrink: 0;
    background: var(--bg-surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 0.5px solid var(--divider);
    padding: 20px 12px 12px;
    /* Sticky: gruda no topo do viewport ocupando 100vh — sempre visível enquanto rola
       e visualmente "cobre" a página inteira sem cortes. */
    position: sticky;
    top: 0;
    height: calc(100vh / 0.9); max-height: calc(100vh / 0.9);
    align-self: flex-start;
    display: flex; flex-direction: column;
    overflow-y: auto;   /* scroll quando o conteúdo passa da altura */
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.ui-sidebar::-webkit-scrollbar { width: 6px; }
.ui-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); border-radius: 3px; }
.ui-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }
/* Wrapper opcional pra fazer o miolo rolar e manter brand/footer fixos */
.ui-sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; }
/* Última section "empurra" os elementos finais (presença, sair) pro rodapé */
.ui-sidebar > .ui-sidebar-bottom { margin-top: auto; padding-top: 8px; }
.ui-sidebar-section { margin-bottom: 18px; }
.ui-sidebar-section:last-child { margin-bottom: 0; }
.ui-sidebar-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: var(--text-tertiary); padding: 0 14px 8px;
    letter-spacing: 0.04em;
}
.ui-sidebar-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    color: var(--text-primary);
    cursor: pointer; font-size: 13.5px;
    transition: background 100ms var(--ease);
    text-decoration: none;
}
.ui-sidebar-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.ui-sidebar-item.active { background: var(--accent); color: var(--on-accent); }
.ui-sidebar-item.active i { color: var(--on-accent); }
.ui-sidebar-item i {
    width: 20px; text-align: center; font-size: 13px;
    color: var(--text-secondary);
}

/* ===== Sidebar collapsável (estado controlado por <body data-sidebar="collapsed">) ===== */
body[data-sidebar="collapsed"] .ui-sidebar {
    width: 56px;
    padding-left: 6px; padding-right: 6px;
}
body[data-sidebar="collapsed"] .ui-sidebar .ui-sidebar-item {
    padding-left: 0; padding-right: 0; justify-content: center; gap: 0;
    /* Esconde os text nodes (texto solto dentro do <a>) sem afetar elementos filhos */
    font-size: 0;
    color: transparent;
}
body[data-sidebar="collapsed"] .ui-sidebar .ui-sidebar-item > *:not(i) { display: none; }
body[data-sidebar="collapsed"] .ui-sidebar .ui-sidebar-item i {
    font-size: 15px;
    color: var(--text-secondary);
}
body[data-sidebar="collapsed"] .ui-sidebar .ui-sidebar-item:hover i,
body[data-sidebar="collapsed"] .ui-sidebar .ui-sidebar-item.active i {
    color: var(--text-primary);
}
body[data-sidebar="collapsed"] .ui-sidebar .ui-sidebar-label,
body[data-sidebar="collapsed"] .ui-sidebar .sidebar-brand .name,
body[data-sidebar="collapsed"] .ui-sidebar .sidebar-brand .sub,
body[data-sidebar="collapsed"] .ui-sidebar .my-presence .info,
body[data-sidebar="collapsed"] .ui-sidebar .my-presence > i { display: none; }
body[data-sidebar="collapsed"] .ui-sidebar .sidebar-brand,
body[data-sidebar="collapsed"] .ui-sidebar .my-presence { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
/* Pill do usuário injetada por App.renderUserPill — quando colapsada, mostra só o avatar.
   `!important` é necessário porque a pill é montada via JS com style inline. */
body[data-sidebar="collapsed"] #app-user-pill {
    justify-content: center !important;
    padding: 6px 0 !important;
    gap: 0 !important;
    margin: 0 0 4px !important;
}
body[data-sidebar="collapsed"] #app-user-pill > div:nth-child(2) { display: none !important; }   /* esconde o balão do nome */
body[data-sidebar="collapsed"] #app-user-pill .up-avatar { width: 30px !important; height: 30px !important; }

/* Botão de toggle do sidebar — centralizado exatamente na divisão do sidebar (no topo) */
.app-sidebar-toggle {
    position: fixed; z-index: 999;
    top: 14px; left: 229px;   /* centro do botão (22px) na borda direita do sidebar (240px) */
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-elevated); color: var(--text-secondary);
    border: 0.5px solid var(--border); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: left 0.18s ease, background 0.15s, color 0.15s;
}
.app-sidebar-toggle:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
body[data-sidebar="collapsed"] .app-sidebar-toggle { left: 45px; }   /* sidebar colapsado = 56px de largura */
@media (max-width: 900px) { .app-sidebar-toggle { display: none; } }

/* ===== Busca inteligente no sidebar ============================================
 * Injetada por App.setupSidebarSearch(). Aparece abaixo do .sidebar-brand.
 * Procura em conversas, contatos, etiquetas, respostas, agentes e nas páginas.
 * Resultados agrupados num popover abaixo do input.
 * ============================================================================ */
.sidebar-search {
    position: relative;
    padding: 6px 14px 12px;
    border-bottom: 0.5px solid var(--divider);
    margin-bottom: 8px;
}
.sidebar-search-input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid transparent;
    font-size: 13px;
    color: var(--text-primary);
    transition: background 120ms, border-color 160ms, box-shadow 160ms;
}
.sidebar-search-input::placeholder { color: var(--text-tertiary); }
.sidebar-search-input:focus {
    outline: none;
    background: var(--bg-elevated);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.sidebar-search-icon {
    position: absolute;
    left: 24px; top: 50%; transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 12px;
    pointer-events: none;
}
.sidebar-search-clear {
    position: absolute;
    right: 22px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 50%;
    border: none; background: var(--text-tertiary); color: var(--bg-elevated);
    font-size: 9px; cursor: pointer;
    display: none; align-items: center; justify-content: center;
}
.sidebar-search-clear.show { display: flex; }

.sidebar-search-results {
    display: none;
    position: absolute;
    top: calc(100% - 4px);
    left: 8px; right: 8px;
    background: var(--bg-elevated);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
    max-height: 60vh;
    overflow-y: auto;
    z-index: 100;
    padding: 6px 0;
}
.sidebar-search-results.show { display: block; }
.sidebar-search-group {
    padding: 6px 12px 4px;
    font-size: 10px; font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.sidebar-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    text-decoration: none; color: var(--text-primary);
    font-size: 13px;
    border-radius: 0;
    transition: background 80ms;
}
.sidebar-search-item:hover, .sidebar-search-item.kbd-active { background: var(--bg-hover); }
.sidebar-search-item i { color: var(--text-tertiary); width: 14px; text-align: center; flex-shrink: 0; }
.sidebar-search-item .ssi-meta { color: var(--text-tertiary); font-size: 11px; margin-left: auto; }
.sidebar-search-item mark { background: rgba(46,204,113,0.30); color: inherit; padding: 0 2px; border-radius: 3px; }
.sidebar-search-empty {
    padding: 18px 12px; text-align: center;
    color: var(--text-tertiary); font-size: 12px;
}
.sidebar-search-loading {
    padding: 14px; text-align: center;
}
/* Quando colapsado, esconde a busca (sidebar fica só com ícones) */
body[data-sidebar="collapsed"] .sidebar-search { display: none; }

/* ===== Sidebar colapsado: troca logo pelo favicon ==============================
 * applyBranding insere uma <img class="brand-img-favicon"> dentro de .sidebar-brand .logo,
 * sempre escondida no estado expandido. Ao colapsar, o conteúdo padrão (texto/img de logo)
 * some e o favicon aparece como ícone identificador.
 * ============================================================================ */
.sidebar-brand .logo .brand-img-favicon { display: none; }
body[data-sidebar="collapsed"] .sidebar-brand .logo {
    width: 36px !important;
    height: 36px !important;
    font-size: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    padding: 0 !important;
}
body[data-sidebar="collapsed"] .sidebar-brand .logo > * { display: none !important; }
body[data-sidebar="collapsed"] .sidebar-brand .logo .brand-img-favicon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

/* ===== Logo customizada (horizontal) ============================================
 * Marcado em <body> pelo App.applyBranding quando há b.logoUrl.
 * Expande os containers de logo (sidebar + login + topbar mobile) para o formato
 * horizontal — logos profissionais costumam ter wordmark ao lado do símbolo.
 * ============================================================================ */
body.has-brand-logo .sidebar-brand {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 12px 18px;
}
body.has-brand-logo .sidebar-brand .logo {
    width: 100% !important;
    height: 56px !important;
    border-radius: 6px;
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 6px;
}
body.has-brand-logo .sidebar-brand .logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}
/* Quando a sidebar está colapsada, volta pra um quadrado pequeno */
body.has-brand-logo[data-sidebar="collapsed"] .sidebar-brand {
    flex-direction: row;
    padding: 10px 6px;
}
body.has-brand-logo[data-sidebar="collapsed"] .sidebar-brand .logo {
    width: 36px !important;
    height: 36px !important;
}

/* Topbar mobile — logo horizontal compacta */
body.has-brand-logo .app-mobile-top .logo {
    width: auto !important;
    min-width: 90px; max-width: 160px;
    height: 36px !important;
    background: transparent !important;
    padding: 2px 4px;
}
body.has-brand-logo .app-mobile-top .logo img {
    object-fit: contain !important;
}

/* ============ BADGE ============ */
.ui-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px; font-weight: 600;
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.ui-badge.green  { background: var(--green); color: #fff; }
.ui-badge.red    { background: var(--red); color: #fff; }
.ui-badge.yellow { background: var(--yellow); color: #1d1d1f; }
.ui-badge.purple { background: var(--purple); color: #fff; }
.ui-badge.accent { background: var(--accent); color: var(--on-accent); }

/* ============ DIVIDER ============ */
.ui-divider { height: 0.5px; background: var(--divider); margin: 20px 0; border: 0; }

/* ============ FADE-IN ============ */
.ui-fade-in { animation: uiFadeIn 260ms var(--ease) both; }
@keyframes uiFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ SPINNER ============ */
.ui-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: uiSpin 0.7s linear infinite;
    display: inline-block;
}
@keyframes uiSpin { to { transform: rotate(360deg); } }

/* ============ TOAST ============ */
.ui-toast {
    position: fixed; top: 24px; right: 24px;
    padding: 14px 18px;
    background: var(--bg-elevated);
    border: 0.5px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    font-size: 13px; font-weight: 500;
    z-index: 10000;
    animation: uiFadeIn 200ms var(--ease) both;
    min-width: 220px; max-width: 360px;
}
.ui-toast.success { border-left: 3px solid var(--green); }
.ui-toast.error   { border-left: 3px solid var(--red); }
.ui-toast.info    { border-left: 3px solid var(--accent); }
.ui-toast.warning { border-left: 3px solid var(--orange); }

/* ============ APP SHELL ============ */
/* min-height compensa o zoom: 0.9 do body — sem isso sobra ~10vh de gap embaixo. */
.app-shell { display: flex; align-items: flex-start; min-height: calc(100vh / 0.9); }
.app-main { flex: 1; min-width: 0; padding: 32px 36px; }

/* ============ MOBILE BOTTOM NAV ============ */
.app-mobile-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg-elevated);
    border-top: 0.5px solid var(--divider);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.06);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.app-mobile-nav-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.app-mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 7px 4px 5px; gap: 3px;
    text-decoration: none; color: var(--text-secondary);
    font-size: 10.5px; font-weight: 500;
    border-radius: var(--r-sm);
    transition: color 120ms, background 120ms, transform 120ms var(--ease);
}
.app-mobile-nav-item:hover, .app-mobile-nav-item:active { color: var(--text-primary); background: var(--bg-hover); }
.app-mobile-nav-item.active { color: var(--accent); }
.app-mobile-nav-item.active i { transform: scale(1.08); }
.app-mobile-nav-item i { font-size: 18px; transition: transform 120ms var(--ease); }

/* Top mobile header (logo + título + sair) — exibido só em mobile, em páginas que tem sidebar */
.app-mobile-top {
    display: none;
    align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border-bottom: 0.5px solid var(--divider);
    position: sticky; top: 0; z-index: 50;
}
.app-mobile-top .logo { width: 30px; height: 30px; border-radius: 9px; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.app-mobile-top .title { flex: 1; font-weight: 700; font-size: 16px; }
.app-mobile-top .top-action { width: 36px; height: 36px; border-radius: var(--r-sm); border: none; background: var(--bg-hover); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ===== Mobile menu drawer (hamburger) =====
 * O botão ≡ é injetado por App.setupMobileMenu() no início do .app-mobile-top.
 * Quando aberto (body.mobile-menu-open) a .ui-sidebar vira um drawer slide-in
 * com backdrop escuro atrás. Em desktop o botão e o backdrop ficam ocultos. */
.app-mobile-menu-btn { display: none; }
.app-mobile-menu-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 998;
    animation: uiFadeIn 180ms var(--ease) both;
}
body.mobile-menu-open .app-mobile-menu-backdrop { display: block; }

/* ============ MOBILE (≤900px) ============
 * Tudo aqui é override dos defaults pra otimizar a experiência em celular:
 * - Desliga `zoom: 0.9` do body (em mobile cada pixel conta).
 * - Aumenta tap targets pra ≥40px (Apple/Material guideline).
 * - Inputs com 16px pra evitar zoom automático do iOS Safari ao focar.
 * - Respeita safe-areas (notch/home indicator).
 * - Modais ocupam a tela toda em phones bem pequenos.
 * - Grids genéricos colapsam pra coluna única.
 * - Tabelas ganham overflow-x (não estouram a largura). */
@media (max-width: 900px) {
    html { overflow-x: hidden; }
    body {
        zoom: 1;
        min-height: 100vh;
        min-height: 100dvh;
        font-size: 14px;
        -webkit-tap-highlight-color: transparent;
        overflow-x: hidden;
    }

    .ui-sidebar { display: none; }
    .app-mobile-nav { display: block; }
    .app-mobile-top { display: flex; }
    .app-mobile-menu-btn { display: flex; }
    .app-shell { min-height: 100vh; min-height: 100dvh; flex-direction: column; }
    .app-sidebar-toggle { display: none; }

    /* Drawer: quando body tem .mobile-menu-open, sidebar vira drawer fixo
       slide-in da esquerda (mesmo conteúdo do desktop, mas posicionado).
       NÃO forçamos background — deixamos o tema decidir (ex: verde tema usa
       #0F3D2E dark; outros temas podem usar bg-surface). Só desligamos o blur
       pra ficar opaco e legível. */
    body.mobile-menu-open .ui-sidebar {
        display: flex !important;
        position: fixed !important;
        top: 0; bottom: 0; left: 0;
        width: min(290px, 86vw) !important;
        max-height: 100dvh !important; height: 100dvh !important;
        z-index: 999;
        box-shadow: 4px 0 24px rgba(0,0,0,0.22);
        animation: drawerSlideIn 220ms var(--ease) both;
        padding-top: calc(20px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    @keyframes drawerSlideIn {
        from { transform: translateX(-100%); }
        to   { transform: translateX(0); }
    }
    /* Quando o drawer abre, trava scroll do body */
    body.mobile-menu-open { overflow: hidden; }
    .app-main {
        padding: 16px 14px calc(82px + env(safe-area-inset-bottom, 0px));
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
        width: 100%;
        max-width: 100vw;
        min-width: 0;
    }
    /* Páginas sem bottom-nav (login, etc) — menos padding embaixo */
    body:not(:has(.app-mobile-nav)) .app-main {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    /* Tipografia mobile bem compactada — aproveita o pouco espaço da tela. */
    h1 { font-size: 16px !important; line-height: 1.2; }
    h2 { font-size: 13.5px !important; line-height: 1.25; }
    h3 { font-size: 12.5px !important; }
    h4 { font-size: 11.5px !important; }
    body { font-size: 12px; }
    p { font-size: 11.5px; }
    label { font-size: 11px !important; }
    code, pre { font-size: 11px; }
    small, .help, .hint { font-size: 10.5px !important; }

    /* Container/row genéricos colapsam */
    .container { padding: 0 10px; }
    .row { flex-wrap: wrap; gap: 6px; }

    /* Inputs: font 16px só pra evitar zoom no iOS, padding compacto */
    .ui-input, .ui-textarea, .ui-select {
        font-size: 16px;
        padding: 7px 10px;
        border-radius: var(--r-sm);
    }

    /* Botões compactos mantendo tap target mínimo de 36px */
    .ui-btn {
        min-height: 34px;
        padding: 7px 12px;
        font-size: 11.5px;
    }
    .ui-btn-ghost { min-height: 30px; }

    /* Cards com menos padding pra aproveitar a largura */
    .ui-card { padding: 16px; border-radius: var(--r-md); }
    .ui-divider { margin: 14px 0; }

    /* Sidebar items mais espaçados quando viram drawer */
    body.mobile-menu-open .ui-sidebar-item {
        padding: 12px 14px;
        font-size: 14px;
        min-height: 44px;
    }
    body.mobile-menu-open .ui-sidebar-item i { font-size: 16px; }

    /* Toasts no mobile: largura toda, perto do topo respeitando notch */
    .ui-toast {
        top: max(12px, env(safe-area-inset-top, 12px));
        right: 12px; left: 12px;
        min-width: 0; max-width: none;
        font-size: 13.5px;
    }

    /* Top bar respeita notch superior */
    .app-mobile-top {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
    }
    .app-mobile-top .title {
        font-size: 16px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        min-width: 0;
    }
    .app-mobile-top .top-action {
        width: 38px; height: 38px;
        flex-shrink: 0;
    }

    /* Bottom nav: mais respiro vertical pra dedos médios */
    .app-mobile-nav-item {
        padding: 9px 4px 6px;
        font-size: 10.5px;
        min-height: 56px;
    }
    .app-mobile-nav-item i { font-size: 19px; }

    /* Tabelas: rolagem horizontal em vez de quebrar layout.
       Wrappers comuns (.table-wrap, .ui-table-wrap) já garantem isso;
       <table> "soltas" também ficam protegidas. */
    .ui-table-wrap, .table-wrap, .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    table { max-width: 100%; }

    /* ========== TABELA QUE VIRA CARDS NO MOBILE ==========
     * Adicione `class="ui-table-stack"` em qualquer <table>: as <tr> viram
     * cards verticais e as <td> viram pares <label>: <valor>.
     *
     * O label vem do atributo `data-label` em cada <td> (preferido) — se
     * faltar, a célula aparece sem rótulo. Use `data-stack-hide` no <td> pra
     * esconder uma célula no mobile (ex: campos secundários).
     *
     * Exemplos:
     *   <td data-label="Quando">29/04/2026</td>
     *   <td data-label="" class="actions">…botões…</td>   (sem label)
     *
     * O wrapper externo (overflow-x:auto) não interfere — em modo card a
     * tabela já cabe em 100% sem rolar. */
    .ui-table-stack {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        font-size: 13px;
    }
    .ui-table-stack thead { display: none; }
    .ui-table-stack,
    .ui-table-stack tbody,
    .ui-table-stack tr,
    .ui-table-stack td {
        display: block;
        width: 100%;
    }
    .ui-table-stack tr {
        background: var(--bg-elevated);
        border: 0.5px solid var(--border);
        border-radius: 12px;
        padding: 11px 13px;
        margin-bottom: 9px;
        box-shadow: var(--shadow-sm);
    }
    .ui-table-stack tr:last-child { margin-bottom: 0; }
    .ui-table-stack td {
        padding: 4px 0;
        border-bottom: 0;
        text-align: left;
        white-space: normal;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 22px;
    }
    .ui-table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-tertiary);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
    }
    /* Célula sem label (data-label="" ou ausente): some o ::before */
    .ui-table-stack td:not([data-label])::before,
    .ui-table-stack td[data-label=""]::before { content: none; display: none; }
    /* Célula marcada como secundária some no mobile */
    .ui-table-stack td[data-stack-hide] { display: none; }
    /* Container .actions (botões da linha): cai pra próxima linha em coluna,
       ocupando 100% e empilhando se forem múltiplos. */
    .ui-table-stack td.actions,
    .ui-table-stack td[data-stack-row="actions"] {
        display: flex; flex-wrap: wrap; gap: 6px;
        margin-top: 8px;
        padding-top: 9px;
        border-top: 0.5px solid var(--divider);
        justify-content: flex-start;
    }
    .ui-table-stack td.actions::before,
    .ui-table-stack td[data-stack-row="actions"]::before { display: none; }
    .ui-table-stack td.actions .ui-btn,
    .ui-table-stack td[data-stack-row="actions"] .ui-btn {
        flex: 1 1 auto; min-width: 0;
    }

    /* Grids genéricos colapsam pra coluna única */
    .stat-grid,
    .grid,
    .grid-2, .grid-3, .grid-4,
    .ui-grid, .ui-grid-2, .ui-grid-3 {
        grid-template-columns: 1fr !important;
    }
    .form-grid, .form-row {
        grid-template-columns: 1fr !important;
        flex-direction: column;
        align-items: stretch;
    }

    /* Modais: ocupam a maior parte da tela e respeitam safe-area */
    .modal-bg, .ui-modal-bg, .app-modal-bg, .modal-backdrop {
        padding: 12px !important;
        align-items: flex-end;
    }
    .modal, .ui-modal, .app-modal, .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh;
        overflow-y: auto;
        border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
        margin-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Barras flutuantes (.bulk-bar etc) precisam ficar acima da bottom-nav */
    .bulk-bar,
    .floating-bar,
    .ui-floating-bar {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important; right: 12px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* FAB (botão flutuante "+") também respeita a bottom-nav */
    .app-fab, .ui-fab {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
    }

    /* Theme picker FAB respeita a bottom-nav */
    .theme-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

    /* Search no sidebar quando aberto em modal (desktop only) — em mobile a busca está em outra UI */
    .sidebar-search-results { max-height: 70vh; }
    body.mobile-menu-open .sidebar-search { display: block; }

    /* Cropper modal mais alto pra dar espaço ao crop em phone */
    .app-cropper-card { max-height: 92dvh; }
    .app-cropper-card .acc-body { height: min(50vh, 360px); }
    .app-cropper-card .acc-tools { padding: 8px 12px; gap: 4px; }
    .app-cropper-card .acc-tool { padding: 8px 10px; font-size: 12px; min-height: 38px; }
    .app-cropper-card .acc-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ MOBILE NARROW (≤480px) ============
 * Ajustes adicionais pra phones bem estreitos (iPhone SE etc): grids 1col,
 * modais ocupam quase toda a tela, espaçamentos ainda mais compactos. */
@media (max-width: 480px) {
    .app-main { padding: 10px 8px calc(74px + env(safe-area-inset-bottom, 0px)); }
    .ui-card { padding: 11px; border-radius: var(--r-sm); }
    h1 { font-size: 15px !important; }
    h2 { font-size: 13px !important; }
    h3 { font-size: 12px !important; }
    body { font-size: 11.5px; }
    p { font-size: 11px; }
    .container { padding: 0 10px; }
    .app-mobile-top { padding: calc(8px + env(safe-area-inset-top,0px)) 10px 8px; gap: 8px; }
    .app-mobile-top .logo { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
    .app-mobile-top .title { font-size: 13.5px; }
    .app-mobile-top .top-action { width: 34px; height: 34px; }
    .app-mobile-nav-grid { gap: 0; }
    .app-mobile-nav-item { font-size: 9px; padding: 6px 2px 4px; min-height: 48px; }
    .app-mobile-nav-item i { font-size: 16px; }

    /* Botões compactos */
    .ui-btn { padding: 8px 12px; font-size: 11.5px; min-height: 32px; }

    /* Inputs com 16px (impede zoom iOS) mas padding mínimo */
    .ui-input, .ui-textarea, .ui-select { padding: 8px 10px; }

    /* Drawer ocupa quase a tela toda */
    body.mobile-menu-open .ui-sidebar { width: min(300px, 90vw) !important; }
}

/* ============ FLOATING THEME PICKER (login/register) ============ */
.theme-fab {
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    right: 16px; z-index: 200;
}
.theme-fab-btn {
    appearance: none; border: 0.5px solid var(--border-strong);
    background: var(--bg-elevated); color: var(--text-primary);
    padding: 10px 16px; border-radius: var(--r-pill);
    font-family: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; box-shadow: var(--shadow-md);
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform 120ms var(--ease);
}
.theme-fab-btn:hover { transform: translateY(-2px); }
.theme-fab-menu {
    display: none;
    position: absolute; bottom: calc(100% + 8px); right: 0;
    background: var(--bg-elevated); border: 0.5px solid var(--border-strong);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    padding: 6px; min-width: 200px; max-height: 360px; overflow-y: auto;
}
.theme-fab.open .theme-fab-menu { display: block; }
.theme-fab-menu button {
    width: 100%; appearance: none; border: 0;
    padding: 9px 12px; background: transparent;
    text-align: left; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--text-primary);
    border-radius: var(--r-xs);
    display: flex; align-items: center; gap: 8px;
}
.theme-fab-menu button:hover { background: var(--bg-hover); }
.theme-fab-menu button .dot { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.theme-fab-menu button.active { font-weight: 600; color: var(--accent); }
.theme-fab-menu button.active::after { content: '✓'; margin-left: auto; color: var(--accent); }

/* ===== Cropper modal (App.openImageCropper) ===== */
.app-cropper-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 1300; padding: 16px;
}
.app-cropper-card {
    background: var(--bg-elevated); border-radius: var(--r-lg);
    width: 100%; max-width: 540px;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.app-cropper-card .acc-head {
    padding: 14px 18px; border-bottom: 0.5px solid var(--divider);
    display: flex; align-items: center; gap: 10px;
}
.app-cropper-card .acc-head h3 { flex: 1; margin: 0; font-size: 15px; }
.app-cropper-card .acc-close {
    background: none; border: 0; cursor: pointer;
    color: var(--text-secondary); font-size: 16px; padding: 4px 8px;
}
.app-cropper-card .acc-body {
    background: #1a1a1a; height: min(420px, 60vh);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.app-cropper-card .acc-img { max-width: 100%; max-height: 100%; display: block; }
/* O preview do cropper fica retangular pelo crop-box do Cropper.js — quando round-preview,
   forçamos o crop-box a aparecer como círculo (visual; o crop continua quadrado). */
.app-cropper-card .acc-body.round-preview .cropper-view-box,
.app-cropper-card .acc-body.round-preview .cropper-face { border-radius: 50%; }
.app-cropper-card .acc-tools {
    padding: 10px 18px; border-top: 0.5px solid var(--divider);
    display: flex; gap: 6px; flex-wrap: wrap;
}
.app-cropper-card .acc-tool { padding: 6px 10px; font-size: 12px; }
.app-cropper-card .acc-foot {
    padding: 12px 18px; border-top: 0.5px solid var(--divider);
    display: flex; gap: 8px; justify-content: flex-end;
}