/* ==========================================================================
   BiotNEA Design System — Brand System (Research Blue + Biolab Green)
   Base visual: docs/brand-assets/*
   ========================================================================== */

/* 1. Fontes */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,400,0,0&family=Montserrat:ital,wght@0,700;0,900;1,900&display=swap');

/* 2. Tokens — Dark Mode */
:root {
    /* --- Background --- */
    --bg:         #0b1220;
    --surface:    #101a2e;
    --surface2:   #14233e;
    --surface3:   #1b2d4f;

    /* --- Bordas --- */
    --border:     #233759;
    --border-subtle: rgba(148,163,184,0.18);

    /* --- Texto --- */
    --text:       #f8fafc;
    --text2:      #cbd5e1;
    --text3:      rgba(203,213,225,0.65);

    /* --- Brand accent --- */
    --accent:        #0d5ca9;
    --accent-hover:  #0a4a89;
    --accent-bright: #3aa0d8;
    --accent-dim:    rgba(13,92,169,0.20);
    --accent-glow:   rgba(58,160,216,0.34);
    --accent-soft:   #5eb86d;

    /* --- Layout surfaces --- */
    --header-bg:     rgba(11,18,32,0.90);
    --header-border: #233759;
    --topbar-bg:     rgba(11,18,32,0.92);
    --sidebar-bg:    var(--bg);
    --sidebar-hover: rgba(148,163,184,0.14);
    --sidebar-active-bg: var(--accent-dim);
    --sidebar-active-text: var(--accent-bright);
    --overlay-bg:    rgba(2,6,23,0.58);

    /* --- Status --- */
    --green:   #1e8a3a;
    --orange:  #f59e0b;
    --red:     #ef4444;
    --pink:    #ec4899;
    --blue:    #3aa0d8;
    --yellow:  #facc15;

    --status-success: #1e8a3a;
    --status-warning: #f59e0b;
    --status-error:   #ef4444;
    --status-info:    #0d5ca9;

    /* --- Sombras --- */
    --shadow-card: 0 10px 30px rgba(2,6,23,.35);
    --shadow-sm:   0 3px 10px rgba(2,6,23,.18);
    --shadow-pop:  0 24px 70px rgba(2,6,23,.55);

    /* --- Foco --- */
    --focus-ring: 0 0 0 3px rgba(13,92,169,0.32);
    --focus-outline: 2px solid #3aa0d8;

    /* --- Raios --- */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-pill: 9999px;

    /* --- Tipografia --- */
    --font-sans: 'DM Sans', system-ui, sans-serif;
    --font-display: 'Fraunces', 'DM Sans', serif;
    --font-wordmark: 'Montserrat', 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --lh-hero:    1.07;
    --lh-heading: 1.10;
    --lh-title:   1.14;
    --lh-card:    1.19;
    --lh-body:    1.47;
    --lh-caption: 1.29;

    --ls-hero:    -0.36px;
    --ls-heading: -0.28px;
    --ls-title:   -0.20px;
    --ls-body:    -0.20px;
    --ls-caption: -0.14px;
    --ls-micro:   -0.08px;

    /* --- Transições --- */
    --ease-out: cubic-bezier(.4,0,.2,1);
    --ease-spring: cubic-bezier(.4,0,.2,1);
}

/* 2b. Light Mode tokens — ativado via html.light */
html.light {
    --bg:         #faf8f3;
    --surface:    #ffffff;
    --surface2:   #f3f4f6;
    --surface3:   #e7edf5;
    --border:     #d9e0ea;
    --border-subtle: rgba(0,0,0,0.06);
    --text:       #1f2937;
    --text2:      #6b7280;
    --text3:      rgba(107,114,128,0.65);
    --accent:        #0d5ca9;
    --accent-hover:  #0a4a89;
    --accent-bright: #3aa0d8;
    --accent-dim:    rgba(13,92,169,0.10);
    --accent-glow:   rgba(13,92,169,0.24);
    --accent-soft:   #1e8a3a;
    --shadow-card: 0 10px 24px rgba(15,23,42,.10);
    --shadow-sm:   0 2px 7px rgba(15,23,42,.08);
    --shadow-pop:  0 20px 50px rgba(15,23,42,.18);

    --header-bg:     rgba(250,248,243,0.97);
    --header-border: #d9e0ea;
    --topbar-bg:     rgba(250,248,243,0.97);
    --sidebar-bg:    #ffffff;
    --sidebar-hover: rgba(13,92,169,0.07);
    --sidebar-active-bg: rgba(13,92,169,0.10);
    --sidebar-active-text: #0d5ca9;
    --overlay-bg:    rgba(15,23,42,0.25);
}
html.light body,
html.light .main-layout,
html.light .app-content {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* Tailwind overrides — light mode inverte backgrounds */
html.light .bg-white                 { background-color:#ffffff !important; }
html.light .bg-gray-50               { background-color:#f8fafc !important; }
html.light .bg-gray-100              { background-color:#f0f2f5 !important; }
html.light .bg-gray-200              { background-color:#e4e7ec !important; }
html.light .text-gray-900, html.light .text-gray-800 { color:#1a1d2e !important; }
html.light .text-gray-700, html.light .text-gray-600 { color:#5a6072 !important; }
html.light .text-gray-500, html.light .text-gray-400 { color:#9399aa !important; }
html.light .border                   { border-color:#d8dce5 !important; }
html.light .border-gray-200          { border-color:#d8dce5 !important; }
html.light .shadow-sm { box-shadow:0 1px 4px rgba(0,0,0,.08) !important; }
html.light header { background:var(--header-bg) !important; border-color:var(--header-border) !important; }
html.light .rounded-xl.border { background-color:#ffffff !important; border-color:#d8dce5 !important; }
html.light input, html.light select, html.light textarea { background:var(--surface2); color:var(--text); border-color:var(--border); }
html.light .bg-white.rounded-xl.shadow-lg { background:#ffffff !important; }
html.light .lang-dropdown-inner { background:#ffffff !important; border-color:#d8dce5 !important; }
html.light .bg-slate-700,
html.light .bg-slate-800,
html.light .bg-slate-900,
html.light .bg-gray-700,
html.light .bg-gray-800,
html.light .bg-gray-900,
html.light .bg-neutral-800,
html.light .bg-neutral-900,
html.light .bg-zinc-800,
html.light .bg-zinc-900,
html.light .bg-black {
    background-color:var(--surface2) !important;
    border-color:var(--border) !important;
}
html.light .bg-slate-800\/50 { background-color:var(--surface2) !important; }
html.light .bg-slate-700.text-white,
html.light .bg-slate-800.text-white,
html.light .bg-slate-900.text-white,
html.light .bg-gray-700.text-white,
html.light .bg-gray-800.text-white,
html.light .bg-gray-900.text-white {
    color:var(--text) !important;
}
html.light .text-gray-300,
html.light .text-gray-200 { color:var(--text2) !important; }
html.light .hover\:text-white:hover { color:var(--text) !important; }
html.light .glass-panel,
html.light .glass-panel-dark {
    background:var(--surface) !important;
    border-color:var(--border) !important;
}

/* 3. Reset & Base */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; }

body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* 4. Tipografia */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    letter-spacing: var(--ls-heading);
}
h1 { font-size: clamp(1.5rem,3vw,2.5rem); font-weight:500; line-height:var(--lh-heading); font-family:var(--font-display); }
h2 { font-size: 1.75rem; font-weight:500; line-height:var(--lh-title); font-family:var(--font-display); }
h3 { font-size: 1.125rem; font-weight:600; line-height:var(--lh-card); letter-spacing:var(--ls-caption); }
h4 { font-size: 1rem; font-weight:600; line-height:var(--lh-card); letter-spacing:var(--ls-caption); }
p  { font-size: 0.9375rem; line-height:var(--lh-body); color:var(--text2); }

.text-hero    { font-size:clamp(2rem,5vw,3.5rem); font-weight:600; line-height:var(--lh-hero); letter-spacing:var(--ls-hero); }
.text-caption { font-size:0.875rem; line-height:var(--lh-caption); letter-spacing:var(--ls-caption); color:var(--text2); }
.text-micro   { font-size:0.75rem; letter-spacing:var(--ls-micro); color:var(--text3); }
.brand-wordmark {
    font-family:var(--font-wordmark);
    font-style:italic;
    font-weight:900;
    letter-spacing:-.03em;
    line-height:1;
}

/* 5. Links */
a { color: var(--accent-bright); text-decoration:none; transition:color .15s var(--ease-out); }
a:hover { color:var(--accent-soft); }
html.light a:hover { color:var(--accent-hover); }
a:focus-visible { outline:var(--focus-outline); outline-offset:2px; border-radius:var(--radius-xs); }

/* 6. Botões */
.btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 20px;
    background:var(--accent); color:#fff;
    font-family:var(--font-sans); font-size:.82rem; font-weight:600;
    border:none; border-radius:var(--radius-sm);
    cursor:pointer; white-space:nowrap;
    transition:filter .2s var(--ease-out), transform .2s var(--ease-out);
}
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn-primary:active { opacity:.88; transform:scale(.98); }

.btn-secondary {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 20px;
    background:var(--surface2); color:var(--text);
    font-family:var(--font-sans); font-size:.82rem; font-weight:600;
    border:1px solid var(--border); border-radius:var(--radius-sm);
    cursor:pointer; white-space:nowrap;
    transition:border-color .2s, background .2s;
}
.btn-secondary:hover { border-color:var(--accent-bright); background:var(--surface3); }
.btn-secondary:active { opacity:.80; }

/* Pill CTA */
.btn-pill {
    display:inline-flex; align-items:center; gap:4px;
    padding:7px 16px;
    background:transparent; color:var(--accent-bright);
    font-size:.875rem; font-weight:500;
    border:1px solid var(--accent-bright); border-radius:var(--radius-pill);
    cursor:pointer; white-space:nowrap;
    transition:background .15s, color .15s;
}
.btn-pill:hover { background:var(--accent-dim); }

/* Icon button */
.icon-btn {
    width:38px; height:38px; border-radius:var(--radius-sm);
    background:var(--surface2); border:1px solid var(--border);
    display:grid; place-items:center; cursor:pointer; color:var(--text2);
    transition:all .2s; position:relative;
}
.icon-btn:hover { background:var(--border); color:var(--text); }

/* 7. Cards */
.card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    transition:border-color .25s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
    position:relative; overflow:hidden;
}
.card:hover {
    border-color:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 8px 30px rgba(0,0,0,.3);
}

/* Card com barra colorida no topo no hover */
.card::after {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--card-accent, var(--accent));
    opacity:0; transition:opacity .3s;
}
.card:hover::after { opacity:1; }

.card-subtle {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
}

/* Stat card do dashboard */
.stat-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:20px 24px;
    transition:border-color .25s, transform .25s, box-shadow .25s;
}
.stat-card:hover {
    border-color:var(--accent);
    transform:translateY(-2px);
    box-shadow:var(--shadow-card);
}

/* 8. Stat pill (summary strip do dashboard) */
.stat-pill {
    display:flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:40px; padding:8px 18px 8px 12px;
    font-size:.82rem; transition:all .25s; cursor:default;
}
.stat-pill:hover { border-color:var(--accent); transform:translateY(-1px); }
.stat-pill strong { font-weight:600; color:var(--text); }
.stat-pill span { color:var(--text2); }
.stat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* 9. Section title (barra gradiente à esquerda) */
.section-title {
    font-weight:600; font-size:1.1rem; letter-spacing:var(--ls-caption);
    margin-bottom:18px;
    display:flex; align-items:center; gap:10px; color:var(--text);
}
.section-title::before {
    content:''; width:3px; height:20px; border-radius:2px; flex-shrink:0;
    background:var(--accent);
}

/* 10. Navigation grid cards */
.nav-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
    gap:12px; margin-bottom:40px;
}
.nav-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:22px 18px;
    cursor:pointer; text-decoration:none; color:inherit;
    display:flex; flex-direction:column; gap:12px;
    position:relative; overflow:hidden;
    transition:all .3s var(--ease-out);
}
.nav-card::after {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--card-accent, var(--accent));
    opacity:0; transition:opacity .3s;
}
.nav-card:hover {
    border-color:var(--card-accent, var(--accent));
    transform:translateY(-4px);
    box-shadow:0 8px 30px rgba(0,0,0,.3);
    color:inherit; text-decoration:none;
}
.nav-card:hover::after { opacity:1; }
.nav-card:active { transform:translateY(-1px); }
.nav-icon {
    width:42px; height:42px; border-radius:12px;
    display:grid; place-items:center; font-size:1.2rem;
    background:color-mix(in srgb,var(--card-accent,var(--accent)) 12%,transparent);
    color:var(--card-accent, var(--accent));
    transition:transform .3s;
}
.nav-card:hover .nav-icon { transform:scale(1.08); }
.nav-label { font-weight:600; font-size:.88rem; line-height:1.2; color:var(--text); }
.nav-desc  { font-size:.72rem; color:var(--text2); line-height:1.4; }
.nav-badge {
    position:absolute; top:14px; right:14px;
    background:var(--card-accent, var(--accent)); color:#fff;
    font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:20px;
}

/* 11. Topbar / Header */
header {
    background:var(--header-bg) !important;
    backdrop-filter:saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter:saturate(180%) blur(20px) !important;
    border-bottom:1px solid var(--header-border) !important;
}

.topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 32px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:100;
    backdrop-filter:blur(20px);
}

/* Search box no header */
.search-box {
    display:flex; align-items:center; gap:8px;
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:8px 16px; width:280px;
    color:var(--text2); font-size:.85rem; cursor:pointer;
    transition:border-color .2s;
}
.search-box:hover { border-color:var(--accent); }

/* 12. Sidebar */
.sidebar {
    background:var(--sidebar-bg);
}
.sidebar-item {
    border-left:3px solid transparent;
    color:var(--text2);
    transition:color .12s var(--ease-out), background .12s var(--ease-out), border-color .12s var(--ease-out);
}
.sidebar-item:hover {
    background:var(--sidebar-hover) !important;
    color:var(--text) !important;
}
.sidebar-item.active {
    background:var(--sidebar-active-bg) !important;
    border-left-color:var(--accent-bright) !important;
    color:var(--sidebar-active-text) !important;
}

/* 13. Modal */
.modal-bg {
    background:var(--overlay-bg);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.modal-panel {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-2xl);
    box-shadow:var(--shadow-pop);
}

/* 14. Inputs & Forms */
input, select, textarea {
    font-family:var(--font-sans);
    font-size:0.9375rem;
    letter-spacing:var(--ls-body);
    color:var(--text);
    background:var(--surface2);
    border-color:var(--border);
    transition:border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color:var(--text3); }
input:focus, select:focus, textarea:focus {
    outline:none;
    border-color:var(--accent) !important;
    box-shadow:var(--focus-ring) !important;
}

/* Dark mode: garante contraste legível em campos nativos de formulário */
html.dark input,
html.dark select,
html.dark textarea {
    background:#e2e8f0 !important;
    color:#0f172a !important;
    border-color:#94a3b8 !important;
    -webkit-text-fill-color:#0f172a !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color:#64748b !important;
}

html.dark select option {
    background:#f8fafc !important;
    color:#0f172a !important;
}

html.dark select option:checked,
html.dark select option:hover,
html.dark select option:focus {
    background:#bfdbfe !important;
    color:#0f172a !important;
}

/* 15. Alerts panel */
.alerts-panel {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:20px 22px; margin-bottom:32px;
}
.alert-row {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-radius:var(--radius-sm);
    background:var(--surface2); cursor:pointer;
    transition:background .2s;
}
.alert-row:hover { background:var(--border); }

/* Badge de tipo de alerta */
.alert-type {
    font-size:.65rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.06em; padding:3px 10px; border-radius:20px; white-space:nowrap;
}
.alert-type.weaning  { background:rgba(253,121,168,.12); color:var(--pink); }
.alert-type.culling  { background:rgba(240,147,43,.12);  color:var(--orange); }
.alert-type.stock    { background:rgba(116,185,255,.12); color:var(--blue); }
.alert-type.tissue   { background:rgba(0,206,201,.12);   color:var(--green); }
.alert-type.ceua     { background:rgba(255,234,167,.12); color:var(--yellow); }
.alert-type.cage     { background:rgba(255,107,107,.12); color:var(--red); }

/* 16. Status badges */
.badge-success { background:rgba(16,185,129,.12); color:#34d399; border-radius:var(--radius-pill); }
.badge-warning { background:rgba(245,158,11,.12); color:#fbbf24; border-radius:var(--radius-pill); }
.badge-error   { background:rgba(239,68,68,.12);  color:#f87171; border-radius:var(--radius-pill); }
.badge-info    { background:rgba(6,182,212,.12);  color:#22d3ee; border-radius:var(--radius-pill); }
.badge-neutral { background:rgba(255,255,255,.07); color:var(--text2); border-radius:var(--radius-pill); }
.badge-teal    { background:var(--accent-dim); color:var(--accent-bright); border-radius:var(--radius-pill); }

/* 17. Chip */
.chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:var(--radius-pill);
    font-size:0.75rem; font-weight:500; letter-spacing:var(--ls-micro);
    white-space:nowrap;
    background:rgba(255,255,255,.07); color:var(--text2);
}
.chip-accent { background:var(--accent-dim); color:var(--accent-bright); }

/* Dash chip (compat) */
.dash-chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:var(--radius-pill);
    font-size:.75rem; font-weight:500; letter-spacing:var(--ls-micro);
    white-space:nowrap;
}

/* 18. Glass panels */
.glass-panel {
    background:rgba(24,26,36,.88);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
}
.glass-panel-dark {
    background:rgba(15,17,23,.85);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg);
}

/* 19. Tabela */
table { border-collapse:collapse; width:100%; }
thead th {
    font-size:.75rem; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; color:var(--text3);
    padding:10px 12px; border-bottom:1px solid var(--border); text-align:left;
}
tbody td {
    font-size:.875rem; letter-spacing:var(--ls-caption); color:var(--text);
    padding:10px 12px; border-bottom:1px solid var(--border-subtle);
}
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(13,92,169,0.06); }

/* 20. Spinner */
.spinner {
    border:2px solid rgba(255,255,255,.08);
    border-top:2px solid var(--accent-bright);
    border-radius:50%;
    width:20px; height:20px;
    animation:spin .7s linear infinite;
    display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* 21. Animações */
.fade-in      { animation:fadeUp .35s var(--ease-out) both; }
.fade-in-fast { animation:fadeUp .18s var(--ease-out) both; }

@keyframes fadeUp {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Stagger para nav cards (aplicado via JS inline ou nth-child) */
@keyframes fadeIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* 22. Scrollbar */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background:var(--surface3); }

/* 23. Focus global */
:focus-visible { outline:var(--focus-outline); outline-offset:2px; }

/* 24. Dividers */
hr, .divider {
    border:none; border-top:1px solid var(--border); margin:0;
}

/* 25. Print */
@media print {
    .no-print   { display:none !important; }
    .print-only { display:block !important; }
    body { background:white; color:black; }
}
.print-only { display:none; }

/* 26. Responsive */
@media (max-width:768px) {
    .topbar { padding:12px 16px; }
    .nav-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
    .nav-card { padding:16px 14px; }
}
@media (max-width:480px) {
    .nav-grid { grid-template-columns:repeat(2,1fr); }
}


/* ============================================================
   TAILWIND DARK OVERRIDES
   Substitui classes de tema claro geradas pelo JS dos módulos
   ============================================================ */

/* Backgrounds */
.bg-white                 { background-color:var(--surface)  !important; }
.bg-gray-50               { background-color:var(--surface2) !important; }
.bg-gray-100              { background-color:var(--surface2) !important; }
.bg-gray-200              { background-color:var(--surface3) !important; }
.bg-slate-50              { background-color:var(--surface2) !important; }
.bg-slate-100             { background-color:var(--surface2) !important; }
.bg-slate-200             { background-color:var(--surface3) !important; }

/* Texto */
.text-gray-900, .text-gray-800 { color:var(--text)  !important; }
.text-gray-700, .text-gray-600 { color:var(--text2) !important; }
.text-gray-500, .text-gray-400 { color:var(--text3) !important; }
.text-slate-900, .text-slate-800 { color:var(--text)  !important; }
.text-slate-700, .text-slate-600 { color:var(--text2) !important; }
.text-slate-500, .text-slate-400 { color:var(--text3) !important; }

/* Bordas */
.border                  { border-color:var(--border) !important; }
.border-gray-100         { border-color:var(--border-subtle) !important; }
.border-gray-200         { border-color:var(--border) !important; }
.border-gray-300         { border-color:var(--border) !important; }
.border-slate-100        { border-color:var(--border-subtle) !important; }
.border-slate-200        { border-color:var(--border) !important; }
.border-slate-700        { border-color:var(--border) !important; }
.divide-gray-100 > * + * { border-color:var(--border-subtle) !important; }
.divide-gray-200 > * + * { border-color:var(--border) !important; }

/* Sombras — trocar por bordas no dark */
.shadow-sm  { box-shadow:none !important; }
.shadow     { box-shadow:var(--shadow-sm) !important; }
.shadow-md  { box-shadow:var(--shadow-card) !important; }
.shadow-lg  { box-shadow:var(--shadow-pop) !important; }
.shadow-xl  { box-shadow:var(--shadow-pop) !important; }
.shadow-2xl { box-shadow:var(--shadow-pop) !important; }

/* Hover backgrounds */
.hover\:bg-gray-50:hover  { background-color:var(--surface3) !important; }
.hover\:bg-gray-100:hover { background-color:var(--surface3) !important; }
.hover\:bg-slate-50:hover { background-color:var(--surface3) !important; }

/* Cards específicos do dashboard */
.rounded-xl.border,
.rounded-xl.shadow-sm,
.rounded-xl.bg-white {
    background-color:var(--surface) !important;
    border-color:var(--border) !important;
    box-shadow:none !important;
    transition:border-color .25s, transform .25s, box-shadow .25s;
}
.rounded-xl.border:hover,
.rounded-xl.shadow-sm:hover {
    border-color:var(--accent) !important;
    transform:translateY(-2px);
    box-shadow:var(--shadow-card) !important;
}

/* Header do sistema (router.js:373) */
header.bg-white,
header.border-b {
    background:var(--header-bg) !important;
    border-color:var(--header-border) !important;
}

/* Input de busca no header */
.bg-gray-100.rounded-xl,
input.bg-gray-100 {
    background:var(--surface2) !important;
    color:var(--text) !important;
}

/* Dropdown de idioma e search results */
.bg-white.rounded-xl.shadow-lg {
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    box-shadow:var(--shadow-pop) !important;
}

/* Botões "hover:bg-gray-50" (controles do operational panel) */
button.border.hover\:bg-gray-50 {
    background:var(--surface2) !important;
    border-color:var(--border) !important;
    color:var(--text2) !important;
}
button.border.hover\:bg-gray-50:hover {
    background:var(--surface3) !important;
    color:var(--text) !important;
}

/* Seções colapsáveis (border rounded-lg com bg-gray-50 no header) */
.border.rounded-lg > .border-b.bg-gray-50,
.px-4.py-3.border-b.bg-gray-50 {
    background:var(--surface2) !important;
    border-color:var(--border) !important;
}

/* Pulse skeleton */
.animate-pulse .bg-gray-200 { background-color:var(--surface3) !important; }
.h-20.bg-gray-200            { background-color:var(--surface3) !important; }
.h-32.bg-gray-200            { background-color:var(--surface3) !important; }

/* Badges inline (text-[11px] border bg-gray-50) */
.border.bg-gray-50 { background:var(--surface2) !important; border-color:var(--border) !important; }

/* Indigo/Cyan/Teal overrides → Brand palette */
.text-indigo-600  { color:var(--accent-bright) !important; }
.bg-indigo-50     { background:var(--accent-dim) !important; }
.hover\:text-indigo-600:hover { color:var(--accent-bright) !important; }
.hover\:bg-indigo-50:hover    { background:var(--accent-dim) !important; }
.border-indigo-300 { border-color:var(--accent) !important; }
.text-indigo-700   { color:var(--accent-bright) !important; }
.bg-white.hover\:bg-indigo-50 { background:var(--surface2) !important; }

/* Core utility classes used in modules */
.text-cyan-400 { color:var(--accent-bright) !important; }
.text-cyan-500, .text-cyan-600 { color:var(--accent) !important; }
.bg-cyan-500, .bg-cyan-600, .bg-indigo-600, .bg-teal-600, .bg-teal-500 { background:var(--accent) !important; }
.hover\:bg-cyan-700:hover, .hover\:bg-indigo-700:hover, .hover\:bg-teal-700:hover { background:var(--accent-hover) !important; }
.text-teal-600, .text-teal-700, .text-blue-700 { color:var(--accent) !important; }
.text-blue-600, .text-cyan-700 { color:var(--accent-bright) !important; }
.border-cyan-300, .border-cyan-200, .border-indigo-200, .border-teal-200 { border-color:rgba(13,92,169,.25) !important; }
.from-cyan-500, .from-teal-500, .from-teal-600 { --tw-gradient-from:var(--accent) !important; }
.to-blue-500, .to-cyan-600, .to-indigo-600 { --tw-gradient-to:var(--accent) !important; }
.ring-cyan-500, .focus\:ring-cyan-500:focus { --tw-ring-color:var(--accent-glow) !important; }
.focus\:ring-teal-500:focus { --tw-ring-color:var(--accent-glow) !important; }
.focus\:border-cyan-500:focus, .focus\:border-teal-500:focus { border-color:var(--accent) !important; }

/* Vermelho/Amarelo/Verde inline alerts */
.bg-red-50     { background:rgba(255,107,107,.10) !important; }
.bg-amber-50   { background:rgba(240,147,43,.10)  !important; }
.bg-cyan-50    { background:rgba(13,92,169,.10)  !important; }
.border-red-200   { border-color:rgba(255,107,107,.25) !important; }
.border-amber-200 { border-color:rgba(240,147,43,.25)  !important; }
.border-cyan-200  { border-color:rgba(13,92,169,.25)  !important; }
.hover\:bg-red-100:hover   { background:rgba(255,107,107,.18) !important; }
.hover\:bg-amber-100:hover { background:rgba(240,147,43,.18)  !important; }
.hover\:bg-cyan-100:hover  { background:rgba(13,92,169,.18)  !important; }

/* Login modal — manter levemente elevado sobre o dark bg */
#loginModal .bg-white,
.max-w-5xl.bg-white {
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
}


/* ============================================================
   NOVO LAYOUT — Topbar fullwidth + Sidebar Drawer
   ============================================================ */

/* Aplicar tema dark por padrão no html (antes do JS carregar) */
html { background: #0b1220; }
html.light { background: #faf8f3; }

/* Prevenir scroll do body quando sidebar está aberta (mobile) */
body.sidebar-open { overflow: hidden; }

/* --- Main layout --- */
.main-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Topbar --- */
.app-topbar {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    background: var(--topbar-bg);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
    transition: background .2s;
}
html.light .app-topbar { background: var(--topbar-bg) !important; }

.app-topbar-left  { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.app-topbar-center { flex:1; display:flex; justify-content:center; max-width:480px; margin:0 auto; }
.app-topbar-right  { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* Brand */
.topbar-brand {
    display:flex; align-items:center; gap:8px;
    background:none; border:none; cursor:pointer; padding:4px 6px;
    border-radius:var(--radius-sm);
    transition:background .15s;
}
.topbar-brand:hover { background:var(--surface2); }
.topbar-brand-name {
    font-family:var(--font-wordmark);
    font-style:italic;
    font-weight:900;
    font-size:1.18rem;
    letter-spacing:-.03em;
    line-height:1;
}
.brand-mark {
    width:32px;
    height:32px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:var(--accent);
    color:#fff;
    font-family:var(--font-wordmark);
    font-style:italic;
    font-size:1.45rem;
    font-weight:900;
    box-shadow:var(--shadow-sm);
}
.brand-mark.brand-mark-lg {
    width:56px;
    height:56px;
    border-radius:16px;
    font-size:2rem;
}
.brand-word-biot { color:#1e8a3a; }
.brand-word-nea { color:#0d5ca9; }
html.dark .brand-word-biot { color:#5eb86d; }
html.dark .brand-word-nea { color:#3aa0d8; }
html.dark .brand-mark {
    background:#0d5ca9;
    border:1px solid rgba(58,160,216,.45);
}

/* Breadcrumb */
.topbar-breadcrumb {
    font-size:.78rem; color:var(--text2);
    padding: 3px 10px;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    max-width:160px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.topbar-breadcrumb:empty { display:none; }

/* Search */
.topbar-search-wrap {
    position:relative; width:100%;
}
.topbar-search-icon {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--text3); pointer-events:none;
}
.topbar-search-input {
    width:100%; padding:8px 14px 8px 36px;
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); font-size:.85rem; color:var(--text);
    transition:border-color .15s, box-shadow .15s;
}
.topbar-search-input:focus {
    outline:none;
    border-color:var(--accent) !important;
    box-shadow:var(--focus-ring) !important;
    background:var(--surface) !important;
}

/* Avatar */
.topbar-avatar {
    width:34px; height:34px; border-radius:50%;
    background:var(--accent);
    display:grid; place-items:center;
    font-weight:700; font-size:.78rem; color:#fff;
    cursor:pointer; border:2px solid transparent;
    transition:border-color .2s;
    flex-shrink:0;
}
.topbar-avatar:hover { border-color:var(--accent-bright); }

/* Lang dropdown */
.lang-dropdown-inner {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-pop);
    overflow:hidden;
    max-height:340px;
    overflow-y:auto;
}
.lang-dropdown-inner button {
    color:var(--text) !important;
    background:transparent !important;
}
.lang-dropdown-inner button:hover { background:var(--surface2) !important; }

/* --- Content area --- */
.app-content {
    flex:1;
    padding:28px 28px 60px;
    max-width:1440px;
    margin:0 auto;
    width:100%;
}

/* --- Sidebar Drawer --- */
.sidebar-drawer {
    position:fixed; top:0; left:0; bottom:0;
    width:260px;
    z-index:200;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column;
}
.sidebar-drawer.open {
    transform:translateX(0);
}
.sidebar-drawer-inner {
    display:flex; flex-direction:column;
    height:100%;
    background:var(--surface);
    border-right:1px solid var(--border);
    box-shadow:4px 0 32px rgba(0,0,0,.35);
}
.sidebar-drawer-header {
    height:58px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.sidebar-drawer-nav {
    flex:1; overflow-y:auto; padding:8px 0;
}
.sidebar-drawer-footer {
    padding:12px;
    border-top:1px solid var(--border);
    flex-shrink:0;
}
.sidebar-user-btn:hover { background:var(--surface2); }

/* Sidebar items dentro do drawer */
.sidebar-drawer .sidebar-item {
    width:100%; display:flex; align-items:center; gap:10px;
    padding:10px 16px; text-align:left;
    background:none; border:none; cursor:pointer;
    border-left:3px solid transparent;
    color:var(--text2);
    font-size:.88rem; font-weight:500;
    transition:color .12s, background .12s, border-color .12s;
}
.sidebar-drawer .sidebar-item:hover {
    background:var(--surface2) !important;
    color:var(--text) !important;
}
.sidebar-drawer .sidebar-item.active {
    background:var(--accent-dim) !important;
    border-left-color:var(--accent-bright) !important;
    color:var(--accent-bright) !important;
}

/* Submenu */
.sidebar-drawer .sidebar-submenu {
    padding:4px 0;
    background:var(--surface2);
}
.sidebar-drawer .sidebar-submenu button {
    width:100%; display:flex; align-items:center; gap:8px;
    padding:8px 16px 8px 40px; text-align:left;
    background:none; border:none; cursor:pointer;
    color:var(--text2); font-size:.83rem;
    transition:color .12s, background .12s;
}
.sidebar-drawer .sidebar-submenu button:hover { background:var(--surface3) !important; color:var(--text) !important; }
.sidebar-drawer .sidebar-submenu button.active  { color:var(--accent-bright) !important; background:var(--accent-dim) !important; }

/* Overlay escuro */
.sidebar-overlay {
    position:fixed; inset:0; z-index:199;
    background:var(--overlay-bg);
    opacity:0; pointer-events:none;
    transition:opacity .28s;
    backdrop-filter:blur(2px);
}
.sidebar-overlay.visible {
    opacity:1; pointer-events:auto;
}

/* Responsive */
@media (max-width: 640px) {
    .app-topbar-center { display:none; }
    .app-content { padding:16px 14px 48px; }
    .topbar-brand-name { display:none; }
}
@media (max-width: 900px) {
    .app-content { padding:20px 18px 52px; }
}