/* BIG BEN — Dark Graphite 2.3
   A visual-only layer. Financial rules and database behavior are untouched. */

:root {
    --ink: #f4f1e9;
    --muted: #9ba3a8;
    --line: rgba(224, 180, 92, .13);
    --line-strong: rgba(224, 180, 92, .28);
    --surface: rgba(20, 24, 28, .94);
    --surface-solid: #151a1e;
    --canvas: #090c0e;
    --sidebar: #07090b;
    --sidebar-soft: #171c20;
    --wine: #d2a54d;
    --wine-dark: #a97829;
    --wine-bright: #e7be6d;
    --wine-soft: rgba(210, 165, 77, .13);
    --gold: #d2a54d;
    --gold-light: #efcd86;
    --gold-soft: rgba(210, 165, 77, .13);
    --green: #55b894;
    --green-soft: rgba(52, 150, 113, .15);
    --red: #ed6a72;
    --red-soft: rgba(199, 68, 77, .15);
    --amber: #e2ae54;
    --amber-soft: rgba(210, 165, 77, .13);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-sm: 0 12px 30px rgba(0, 0, 0, .24);
    --shadow: 0 22px 58px rgba(0, 0, 0, .34);
    --shadow-lg: 0 34px 100px rgba(0, 0, 0, .48);
}

* { scrollbar-color: rgba(210, 165, 77, .32) transparent; }
*::-webkit-scrollbar-thumb { background-color: rgba(210, 165, 77, .28); }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(231, 190, 109, .48); }
::selection { color: #0a0c0d; background: rgba(231, 190, 109, .88); }

body, body.app-shell {
    color: var(--ink);
    background:
        radial-gradient(circle at 88% 0, rgba(210,165,77,.07), transparent 28%),
        radial-gradient(circle at 8% 92%, rgba(45,111,113,.07), transparent 30%),
        #090c0e;
}
body::after { opacity: .1; }
.ambient-canvas span:nth-child(1) { background: radial-gradient(circle, rgba(210,165,77,.11), transparent 68%); }
.ambient-canvas span:nth-child(2) { background: radial-gradient(circle, rgba(45,111,113,.08), transparent 68%); }
.ambient-canvas span:nth-child(3) { background: radial-gradient(circle, rgba(255,255,255,.035), transparent 70%); }

/* Shared icon treatment */
.button { gap: 9px; }
.button .ui-icon { width: 17px; height: 17px; }
.icon-text { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.icon-text .ui-icon { width: 16px; height: 16px; }
.metric-icon .ui-icon { width: 22px; height: 22px; }
.info-banner > span .ui-icon { width: 17px; height: 17px; }
.empty-icon .ui-icon { width: 23px; height: 23px; }

/* Navigation */
.sidebar {
    border-right-color: rgba(224,180,92,.1);
    background:
        radial-gradient(circle at 12% 0, rgba(210,165,77,.13), transparent 26%),
        linear-gradient(165deg, #111518, #07090b 72%);
    box-shadow: 24px 0 70px rgba(0,0,0,.28);
}
.nav-link { color: rgba(237,235,229,.62); }
.nav-link:hover { border-color: rgba(224,180,92,.11); background: rgba(255,255,255,.045); }
.nav-link.active {
    color: #fff9ed;
    border-color: rgba(224,180,92,.22);
    background: linear-gradient(100deg, rgba(210,165,77,.19), rgba(61,91,94,.12));
}

.nav-link.active .nav-icon, .nav-link-primary .nav-icon { color: #f0c77d; filter: drop-shadow(0 0 7px rgba(210,165,77,.4)); }
.nav-icon .ui-icon { transition: transform .25s cubic-bezier(.2,.9,.25,1.25); }
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover .nav-icon .ui-icon { transform: scale(1.1); }
}
.nav-link-primary { color: #f2d79f; border-color: rgba(210,165,77,.22); background: rgba(210,165,77,.075); }
.nav-count { border-color: #121619; background: #d9a847; box-shadow: 0 4px 14px rgba(210,165,77,.25); color: #111; }
.sidebar-user { border-color: rgba(224,180,92,.12); background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(210,165,77,.025)); }
.avatar { color: #17130c; background: linear-gradient(145deg, #edc879, #b7812e); box-shadow: 0 8px 20px rgba(210,165,77,.2); }

.mobile-header { background: rgba(8,11,13,.96) !important; border-bottom-color: rgba(224,180,92,.11) !important; }
.mobile-header.is-scrolled { background: rgba(6,9,10,.985) !important; box-shadow: 0 12px 34px rgba(0,0,0,.38) !important; }
.sidebar-overlay { background: rgba(0,0,0,.68) !important; }
.icon-button { border-color: rgba(224,180,92,.12) !important; background: rgba(255,255,255,.035) !important; }
.bottom-nav {
    border-color: rgba(224,180,92,.13) !important;
    background: rgba(8,11,13,.965) !important;
    box-shadow: 0 22px 65px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.045) !important;
}
.bottom-nav a, .bottom-nav button { color: rgba(239,236,228,.56) !important; }
.bottom-nav .ui-icon { color: rgba(224,180,92,.78) !important; }
.bottom-nav a.active { color: #fff !important; background: rgba(210,165,77,.085) !important; }
.bottom-nav a.active::before { background: var(--gold-light) !important; }
.bottom-nav .bottom-action {
    color: #16130d !important;
    border-color: #090c0e !important;
    background: linear-gradient(145deg, #efca7b, #b88330) !important;
    box-shadow: 0 14px 34px rgba(210,165,77,.26), inset 0 1px rgba(255,255,255,.38) !important;
}
.bottom-nav .bottom-action .ui-icon, .bottom-nav .bottom-action span { color: #17130c !important; }

/* Hierarchy and surfaces */
.page-heading h1, .block-heading h2, .section-heading h2, .card h2, .card h3 { color: #f7f3eb; }
.page-heading p, .section-heading p { color: #9ca3a7; }
.page-heading::before { border-color: rgba(210,165,77,.22); }
.eyebrow { color: var(--gold-light); }
.subtle-label { border-color: var(--line); color: #b8b0a4; background: rgba(255,255,255,.035); }
.card, .metric-card, .store-card {
    border-color: var(--line);
    background: linear-gradient(145deg, rgba(24,29,33,.97), rgba(17,21,24,.97));
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255,255,255,.035);
}
.card:hover, .metric-card:hover, .store-card:hover { border-color: var(--line-strong); }
.section-block { border-color: var(--line); }

/* Buttons */
.button-primary {
    color: #15120c;
    border-color: rgba(255,224,158,.35);
    background: linear-gradient(145deg, #efca7c, #b9822c);
    box-shadow: 0 12px 30px rgba(210,165,77,.2), inset 0 1px rgba(255,255,255,.4);
}
.button-primary:hover { color: #0e0c08; background: linear-gradient(145deg, #f4d58e, #c89438); box-shadow: 0 16px 36px rgba(210,165,77,.27); }
.button-secondary { color: #eee9df; border-color: rgba(224,180,92,.16); background: rgba(255,255,255,.045); box-shadow: 0 7px 20px rgba(0,0,0,.18); }
.button-secondary:hover { color: #fff; border-color: rgba(224,180,92,.34); background: rgba(210,165,77,.08); }
.button-danger { color: #fff; background: linear-gradient(145deg, #cf515a, #8f2934); }
.button:disabled { color: #747b7e; border-color: rgba(255,255,255,.06); background: #202529; box-shadow: none; }
.text-link, .row-action, .link-button, .card-arrow-link { color: var(--gold-light); }
.danger-link { color: var(--red); }

/* Metrics */
.metric-card::after { border-color: rgba(210,165,77,.08); box-shadow: 0 0 0 20px rgba(210,165,77,.018); }
.metric-card strong { color: #f8f4eb; }
.metric-card span:not(.metric-icon) { color: #a8adaf; }
.metric-card small { color: #7f888d; }
.metric-icon { color: var(--gold-light) !important; border: 1px solid rgba(224,180,92,.1); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.metric-icon.wine, .metric-icon.gold, .metric-icon.brown { background: linear-gradient(145deg, rgba(210,165,77,.17), rgba(210,165,77,.07)); }
.metric-icon.green { color: #73caa9 !important; background: rgba(52,150,113,.13); }
.metric-icon.red { color: #f27a81 !important; background: rgba(199,68,77,.14); }
.store-card { background: linear-gradient(145deg, #181d21, #121619); }
.store-number { color: var(--gold-light); border-color: rgba(210,165,77,.16); background: rgba(210,165,77,.1); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.store-card h3, .store-total strong { color: #f2eee6; }
.store-card p, .store-total span { color: var(--muted); }

/* Tables */
.table-card { background: #121619; }
table { color: #e8e5de; }
th { color: #9fa5a8; background: #181d21; }
td { border-top-color: rgba(224,180,92,.09); }
tbody tr:hover { background: rgba(210,165,77,.045); }
tfoot td { color: #f2eee6; border-top-color: rgba(224,180,92,.3); background: #1a2024; }
code { color: #e7c986; background: rgba(210,165,77,.08); }
.badge-admin { color: #ebc978; border-color: rgba(210,165,77,.15); background: rgba(210,165,77,.12); }
.badge-neutral { color: #bdc3c5; background: rgba(255,255,255,.07); }
.badge-success { color: #7ed1b1; background: var(--green-soft); }
.badge-warning { color: #edc36c; background: var(--amber-soft); }
.badge-danger { color: #f2888e; background: var(--red-soft); }
.badge { border-color: rgba(255,255,255,.06); }

/* 2.3.32 — refinamento visual consolidado da auditoria externa.
   Evita fill genérico nos SVGs e pseudo-elementos globais em .card, pois ambos
   conflitam com ícones de traço aberto e com efeitos ::before já usados em cards. */
.avatar { position: relative; box-shadow: 0 8px 20px rgba(210,165,77,.2), 0 0 0 2px rgba(210,165,77,.28), 0 0 0 4px rgba(210,165,77,.08); }
.empty-icon { width: 56px; height: 56px; border-width: 1px; border-style: dashed; }
.notification-icon .ui-icon, .empty-icon .ui-icon { stroke-width: 1.9; }

.status-dot.active { background: var(--green); }
.status-dot.inactive { background: #7e8589; }

/* Forms and operational components */
.field > span:first-child { color: #c3beb4; }
input, select, textarea {
    color: #f0ece3;
    border-color: rgba(224,180,92,.14);
    background: #0f1316;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
input:hover, select:hover, textarea:hover { border-color: rgba(224,180,92,.28); background: #11171a; }
input:focus, select:focus, textarea:focus { color: #fff; border-color: rgba(231,190,109,.65); background: #11171a; box-shadow: 0 0 0 4px rgba(210,165,77,.1), 0 9px 26px rgba(0,0,0,.2); }
input:disabled { color: #8f9699; background: #171b1e; }
input::placeholder, textarea::placeholder { color: #687176; }
select { color-scheme: dark; }
.input-prefix b { color: #a9a198; }
.divider { background: linear-gradient(90deg, transparent, rgba(224,180,92,.2), transparent); }
.step-number { color: #17130c; border-color: rgba(255,255,255,.22); background: linear-gradient(145deg, #edc777, #ae7929); box-shadow: 0 8px 18px rgba(210,165,77,.16); }
.target-pill { color: #d9bd80; border-color: rgba(210,165,77,.2); background: rgba(210,165,77,.08); box-shadow: none; }
.expected-cash-box, .sales-total-box, .settings-total { color: #f4efe5; border-color: rgba(224,180,92,.13); background: linear-gradient(135deg, #1d2428, #0d1113); }
.sales-total-box { color: #f1d393; }
.confirm-box { border-color: rgba(210,165,77,.17); background: rgba(210,165,77,.065); }
.confirm-box small { color: #9ca2a4; }
.confirm-box input { accent-color: var(--gold); }
.selected-sale-summary > div, .payment-summary > div { border-color: var(--line); background: #111619; }
.selected-sale-summary .featured, .payment-summary .featured { color: #17130c; border-color: var(--gold); background: linear-gradient(145deg, #e9c373, #b27c29); box-shadow: 0 9px 22px rgba(210,165,77,.15); }
.selected-sale-summary .featured span, .payment-summary .featured span { color: rgba(20,16,10,.7); }
.count-stepper button { color: var(--gold-light); border-color: rgba(224,180,92,.18); background: #151a1e; }
.count-stepper button:hover { color: #111; background: var(--gold); }
.count-stepper input { background: #0d1113; }
.banknote { color: #e9c778; border-color: rgba(224,180,92,.3); background: linear-gradient(145deg, #252218, #171712); box-shadow: inset 0 0 0 3px rgba(255,255,255,.018); }
.destination.neutral { color: #abb1b3; background: rgba(255,255,255,.06); }
.destination.surplus { color: #e9c778; background: rgba(210,165,77,.12); }
.destination.complete { color: #77cbaa; background: var(--green-soft); }
.summary-item { color: #ebe7de; border-color: var(--line); background: linear-gradient(145deg, #181e22, #111518); box-shadow: var(--shadow-xs); }
.summary-item > span, .summary-item small { color: #929a9e; }
.summary-item.accent { color: #17130c; border-color: rgba(224,180,92,.36); background: linear-gradient(145deg, #ecc878, #ae7828); box-shadow: 0 13px 30px rgba(210,165,77,.18); }
.summary-item.accent > span, .summary-item.accent small { color: rgba(20,16,10,.68); }
.summary-item.accent-soft { color: #e9c778; border-color: rgba(210,165,77,.18); background: rgba(210,165,77,.1); }
.summary-item.warning-soft { color: #edc36c; border-color: rgba(210,165,77,.2); background: rgba(210,165,77,.095); }
.difference-neutral { color: #c1c5c6; background: #171c20; }
.difference-positive { color: #75cbaa; border-color: rgba(85,184,148,.25); background: var(--green-soft); }
.difference-negative { color: #f17d84; border-color: rgba(237,106,114,.25); background: var(--red-soft); }
.notes-box { background: #101417; }
.replenishment-inline { border-color: rgba(210,165,77,.2); background: rgba(210,165,77,.09); }
.timeline-event { border-bottom-color: rgba(224,180,92,.1); }
.danger-zone { border-color: rgba(237,106,114,.24); background: rgba(199,68,77,.07); }

/* Reports, banners and specialty cards */
.filter-card { background: #14191d; }
.report-period, .results-bar { color: var(--muted); }
.bar-track { background: #0d1113; }
.bar-track span { background: linear-gradient(180deg, #f0cc81, #b87f29 72%, #7e561f); box-shadow: 0 8px 18px rgba(210,165,77,.16); }
.bar-value, .month-bar strong { color: #9da4a7; }
.annual-value-list > div { color: #eeeae1; border-color: var(--line); background: #111619; }
.annual-value-list .featured { color: #17130c; border-color: var(--gold); background: linear-gradient(145deg, #ebc777, #ad7727); box-shadow: 0 12px 28px rgba(210,165,77,.18); }
.annual-value-list .featured span { color: rgba(20,16,10,.68); }
.comparison-banner.positive { color: #d9f4e9; border-color: rgba(85,184,148,.24); background: rgba(52,150,113,.12); }
.comparison-banner.negative { color: #f6d6d8; border-color: rgba(237,106,114,.24); background: rgba(199,68,77,.12); }
.comparison-banner p { color: #9ea6a8; }
.info-banner { color: #dedad1; border-color: rgba(210,165,77,.18); background: linear-gradient(135deg, rgba(210,165,77,.08), rgba(255,255,255,.025)); }
.info-banner > span { color: #15120c; background: var(--gold); }
.rule-card, .denomination-setting, .rule-example { border-color: var(--line); background: #12171a; }
.rule-icon { color: #17130c; background: linear-gradient(145deg,#edc879,#b7812e); }
.rule-icon .ui-icon { width: 18px; height: 18px; }
.setting-subtotal { color: var(--gold-light); }
.audit-item { border-bottom-color: rgba(224,180,92,.09); }
.audit-dot { background: var(--gold); box-shadow: 0 0 0 4px rgba(210,165,77,.12); }
.notification-item.unread { border-left-color: var(--gold); }
.notification-title span { color: #17130c; background: var(--gold); }
.profile-card dl > div { border-bottom-color: rgba(224,180,92,.1); }
.toast { color: #f2eee6; border-color: rgba(224,180,92,.15); background: rgba(18,23,26,.96); }
.empty-state { color: #d8d4cc; }
.empty-icon { color: var(--gold-light); border-color: rgba(210,165,77,.14); background: rgba(210,165,77,.1); }

/* Keep the printable physical envelope label light and legible. */
.envelope-label { color: #181315; border-color: #181315; background: #fffdf9; }
.envelope-label .label-brand strong, .envelope-label .label-store, .envelope-label dd { color: #181315; }
.envelope-label .label-total { color: #17130c; background: linear-gradient(145deg, #efca7b, #b9822d); }

/* Login remains cinematic, now fully dark instead of rose-tinted. */
.auth-shell { background: #07090b; }
.auth-shell .ambient-canvas span:nth-child(2) { background: radial-gradient(circle,rgba(42,104,104,.15),transparent 66%); }
.login-scene::before { background: linear-gradient(105deg,transparent 0 46%,rgba(255,255,255,.018) 49%,transparent 53%), radial-gradient(circle at 50% 42%,transparent 0 17%,rgba(210,165,77,.085) 17.2% 17.45%,transparent 17.7%), repeating-radial-gradient(circle at 50% 42%,transparent 0 68px,rgba(255,255,255,.014) 69px 70px), linear-gradient(145deg,#050708,#151a1d 48%,#080a0c); }
.halo-two { background: radial-gradient(circle,rgba(42,104,104,.15),rgba(24,68,70,.03) 48%,transparent 70%); }
.auth-card.login-premium { color: #f1ede4; border-color: rgba(224,180,92,.18); background: linear-gradient(145deg,rgba(25,30,34,.985),rgba(12,16,18,.97)); box-shadow: 0 55px 130px rgba(0,0,0,.62),0 12px 30px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.05); }
.auth-card.login-premium::after { background: #c39139; opacity: .1; }
.login-card-glow::before { background: radial-gradient(circle,rgba(255,219,145,.18),rgba(210,165,77,.055) 38%,transparent 69%); }
.auth-brand strong, .auth-heading h1 { color: #f8f3e9; }
.auth-heading p, .auth-footnote, .auth-brand small { color: #92999c; }
.login-premium .field input { color: #f1ede5; border-color: rgba(224,180,92,.14); background: rgba(5,8,9,.55); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.login-premium .field input:focus { border-color: rgba(231,190,109,.62); box-shadow: 0 0 0 4px rgba(210,165,77,.1),0 12px 24px rgba(0,0,0,.2); }
.password-field button { color: #c7bca9; }
.sticky-actions { border-top-color: rgba(224,180,92,.12); background: rgba(10,13,15,.95); box-shadow: 0 -15px 38px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(8px); }
.completed-by { display: flex; align-items: center; gap: 6px; }
.completed-by .ui-icon { width: 15px; height: 15px; }

/* Mobile corrections found during real-device review. */
@media (max-width: 900px) {
    body { background: #090c0e; }
    .mobile-filter-trigger { color: #eee9df; border-color: rgba(224,180,92,.14); background: #151a1e; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
    .mobile-filter-trigger > span { color: var(--gold-light); }
    .mobile-filter-trigger > span svg { width: 22px; height: 22px; }
    .mobile-filter-trigger strong { color: #f2eee6; }
    .filter-card[data-filter-ready="1"] { color: #eee9df; background: rgba(16,20,23,.99); box-shadow: 0 -26px 90px rgba(0,0,0,.55); }
    .mobile-sheet-header { background: linear-gradient(rgba(16,20,23,1) 75%,rgba(16,20,23,0)); }
    .mobile-sheet-handle { background: #535b5f; }
    .mobile-sheet-header button { color: #eee9df; background: #242a2e; }
    .mobile-sheet-overlay { background: rgba(0,0,0,.7); }
}

@media (max-width: 680px) {
    .content { padding-right: 14px; padding-left: 14px; }
    .page-heading { gap: 14px; margin-bottom: 20px; }
    .page-heading h1 { margin-bottom: 7px; font-size: clamp(1.75rem,8vw,2.15rem); line-height: 1.04; }
    .page-heading p { line-height: 1.45; }
    .page-actions { gap: 10px; }
    .page-dashboard .page-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .page-dashboard .page-actions .button { min-height: 54px; padding-inline: 10px; }
    .page-users .page-actions { display: block; }

    .mobile-denomination-cards tr, .mobile-record-table tr, .mobile-report-table tbody tr { border-color: rgba(224,180,92,.12); background: linear-gradient(145deg,#181d21,#111518); box-shadow: 0 12px 34px rgba(0,0,0,.24); }
    .mobile-record-table td, .mobile-report-table tbody td { color: #ece8df; border-bottom-color: rgba(224,180,92,.09); }
    .mobile-record-table td::before, .mobile-report-table tbody td::before { color: #929a9e; }
    .mobile-record-table td:first-child { color: #f6f2e9; }
    .mobile-record-table .mobile-card-action { margin-top: 4px; }
    .mobile-record-table .mobile-card-action .table-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .mobile-record-table .mobile-card-action .table-actions > :only-child { grid-column: 1 / -1; }
    .mobile-record-table .mobile-card-action a, .mobile-record-table .mobile-card-action button { min-height: 46px; padding: 0 12px; border: 1px solid rgba(224,180,92,.15); border-radius: 12px; background: rgba(210,165,77,.075); }
    .mobile-record-table .mobile-card-action form { width: 100%; }
    .mobile-record-table .mobile-card-action form button { width: 100%; }
    .mobile-users-table td:first-child::before { display: none; }
    .mobile-users-table td:first-child { min-height: 58px; }
    .mobile-users-table code { overflow-wrap: anywhere; }
    .mobile-users-table .badge { max-width: 100%; white-space: normal; text-align: right; }
    .mobile-users-table .person-cell { max-width: 100%; white-space: normal; text-align: left; }
    .mobile-users-table .person-cell strong { overflow-wrap: anywhere; }
    .mobile-auto-table td:empty { display: none; }

    /* Rebuild the broken annual total as one readable summary card. */
    .mobile-report-table tfoot { display: block; margin-top: 14px; }
    .mobile-report-table tfoot tr { display: block; overflow: hidden; padding: 8px 16px; border: 1px solid rgba(224,180,92,.28); border-radius: 18px; color: #eee9df; background: linear-gradient(145deg,#222821,#141914); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
    .mobile-report-table tfoot td { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid rgba(224,180,92,.1); color: #eee9df; background: transparent !important; text-align: right; }
    .mobile-report-table tfoot td::before { flex: 0 0 42%; color: #969d9f; content: attr(data-label); text-align: left; font-size: .72rem; font-weight: 800; }
    .mobile-report-table tfoot td:first-child { min-height: 54px; color: var(--gold-light); font-size: 1.05rem; }
    .mobile-report-table tfoot td:first-child::before { display: none; }
    .mobile-report-table tfoot td:last-child { border-bottom: 0; }
    .mobile-report-table tfoot .money-accent { color: var(--gold-light); }

    .mobile-step-progress span { background: #2c3337; }
    .mobile-step-progress span::after { background: linear-gradient(90deg,#a9762a,#edca7d); }
    .mobile-live-summary { border-color: rgba(224,180,92,.15); background: rgba(8,11,13,.965); box-shadow: 0 20px 54px rgba(0,0,0,.46); -webkit-backdrop-filter: blur(18px) saturate(140%); }
    .mobile-live-summary > div { border-right-color: rgba(224,180,92,.1); }
    .draft-recovery { color: #e8e3da; border-color: rgba(210,165,77,.22); background: rgba(210,165,77,.09); }
    .info-banner { max-width: none; }
}

@media (max-width: 390px) {
    .page-dashboard .page-actions { grid-template-columns: 1fr; }
    .page-heading h1 { font-size: 1.72rem; }
    .mobile-record-table tr { padding-right: 13px; padding-left: 13px; }
}


/* 2.3.3 — densidade mobile: remove espaços vazios sem reduzir áreas de toque. */
@media (max-width: 680px) {
    .content {
        padding-top: calc(78px + env(safe-area-inset-top));
        padding-right: 12px;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
        padding-left: 12px;
    }
    .page-heading { gap: 10px; margin-bottom: 14px; }
    .page-heading h1 { margin-bottom: 5px; }
    .eyebrow { margin-bottom: 5px; }
    .page-actions { gap: 8px; }
    .section-block { margin-top: 22px; }
    .block-heading { gap: 10px; margin-bottom: 11px; }
    .section-heading { gap: 10px; margin-bottom: 14px; }
    .section-heading.compact { margin-bottom: 10px; }

    .metric-grid { gap: 9px; }
    .metric-card { min-height: 88px; padding: 13px 14px; }
    .metric-card strong { margin-top: 2px; }
    .metric-icon { width: 40px; height: 40px; }
    .sales-metrics { margin-top: 10px; }

    .form-card, .detail-card, .narrow-card, .report-chart-card, .annual-summary-card { padding: 15px 14px; }
    .closure-layout, .detail-layout, .settings-layout { gap: 14px; }
    .stack-form, .form-grid { gap: 12px; }
    .field { gap: 6px; }
    .form-actions { gap: 8px; margin-top: 2px; }
    .info-banner { margin-top: 12px; padding: 12px; }

    .selected-sale-summary { gap: 8px; margin-top: 10px; }
    .selected-sale-summary > div { min-height: 62px; padding: 10px; }
    .payment-summary { gap: 8px; }
    .payment-summary > div { padding: 10px; }
    .summary-grid { gap: 8px; margin-bottom: 14px; }
    .summary-item { min-height: 78px; }

    .mobile-step-progress { margin-bottom: 12px; }
    .mobile-step-actions { margin-top: 14px; }
    .sales-form-card { min-height: 0; }

    .mobile-denomination-cards tbody { gap: 9px; }
    .mobile-denomination-cards tr { gap: 8px 12px; padding: 13px; border-radius: 16px; }
    .mobile-denomination-cards .count-stepper button,
    .mobile-denomination-cards .count-stepper input { min-height: 48px; }

    .mobile-record-table tbody, .mobile-report-table tbody { gap: 9px; }
    .mobile-record-table tr, .mobile-report-table tbody tr { padding: 6px 13px; border-radius: 16px; }
    .mobile-record-table td, .mobile-report-table tbody td { gap: 10px; min-height: 36px; padding: 6px 0; }
    .mobile-record-table .mobile-card-action { padding-top: 8px; }

    .results-bar { margin: 13px 2px 8px; padding: 0 2px; gap: 4px; }
    .filter-card[data-filter-ready="1"] { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .filter-card[data-filter-ready="1"] .filter-form,
    .filter-card[data-filter-ready="1"] .report-filter-form { gap: 10px; }
    .mobile-sheet-header { min-height: 68px; margin-bottom: 10px; padding-top: 17px; padding-bottom: 7px; }
    .report-period { margin: 14px 2px 9px; }
    .report-metrics { margin-bottom: 12px; }
    .monthly-bars { height: 215px; padding-top: 15px; }
    .report-swipe-hint { margin: -2px 0 10px; }

    .empty-state { min-height: 0; padding: 32px 16px; }
    .empty-state p { margin-bottom: 13px; }
    .profile-card { padding: 18px 15px; }
    .profile-card dl { margin: 14px 0; }
    .profile-card dl > div { padding: 8px 0; }
    .danger-zone { gap: 14px; margin-top: 14px; padding: 15px; }
    .envelope-workflow { margin-top: 14px; padding: 15px; }
    .replenishment-inline { margin-top: 12px; padding: 12px; }
    .annual-value-list > div { padding: 11px; }
    .replenishment-list { gap: 9px; margin-top: 12px; }
    .replenishment-card { padding: 14px 14px 34px; }
    .notification-list { gap: 8px; }
    .notification-item { padding: 12px; }
    .audit-card { padding: 7px 14px; }
    .audit-item { min-height: 58px; padding: 8px 0; }

    .sticky-actions { margin-top: 14px; }
}

@media (max-width: 390px) {
    .content { padding-right: 10px; padding-left: 10px; }
    .form-card, .detail-card, .narrow-card, .report-chart-card, .annual-summary-card { padding-right: 12px; padding-left: 12px; }
    .metric-card { padding: 12px; }
    .mobile-record-table tr, .mobile-report-table tbody tr { padding-right: 11px; padding-left: 11px; }
}

@media print {
    :root { --ink:#181315; --muted:#6f6762; --line:#ddd5cd; --surface:#fff; --canvas:#fff; }
    body, body.app-shell { color:#181315; background:#fff; }
    .card, .metric-card, .store-card, .table-card, .report-chart-card, .annual-summary-card { color:#181315; border-color:#ddd5cd; background:#fff; box-shadow:none; }
    .page-heading h1, .block-heading h2, .section-heading h2, .card h2, .card h3, .metric-card strong { color:#181315; }
    th { color:#625b56; background:#f5f2ee; }
    td { color:#181315; border-color:#ddd5cd; }
    .annual-value-list > div { color:#181315; background:#fff; }
}

/* 2.3.8 — métricas administrativas no tema dark */
.performance-preview-card,
.performance-period-card,
.best-period-card,
.metrics-cost-form-card,
.metrics-cost-list-card { border-color:rgba(210,165,77,.12); background:linear-gradient(145deg,rgba(20,25,27,.94),rgba(15,19,21,.94)); }
.performance-preview-card > span,
.best-period-card > span,
.performance-period-heading > div > span,
.performance-note,
.metrics-cost-item span,
.metrics-cost-item small,
.metrics-danger-zone small { color:#8f999b; }
.performance-preview-card strong,
.best-period-card strong,
.performance-period-heading > div > strong,
.performance-breakdown strong,
.metrics-cost-item strong { color:#f1eee7; }
.performance-breakdown > div { border-color:rgba(255,255,255,.07); background:rgba(255,255,255,.025); }
.performance-breakdown span { color:#8f999b; }
.metrics-cost-item { border-color:rgba(255,255,255,.07); }
.metrics-reset-banner,
.metrics-roi-note { border-color:rgba(210,165,77,.18); background:linear-gradient(135deg,rgba(210,165,77,.075),rgba(255,255,255,.018)); }
.metrics-danger-zone { border-color:rgba(224,91,100,.24); background:linear-gradient(135deg,rgba(130,34,43,.10),rgba(255,255,255,.015)); }

/* 2.3.11 — composição do envelope */

/* 2.3.14 — divergência financeira positiva também exige revisão */
.difference-warning { color: #edc36c; border-color: rgba(210,165,77,.24); background: rgba(210,165,77,.11); }
.text-warning { color: #edc36c !important; }

/* 2.3.23 — final dark responsive overrides (loaded last) */
.bottom-nav button.active { color: #fff !important; background: rgba(210,165,77,.085) !important; }
.bottom-nav button.active .ui-icon { color: #f0c77d !important; filter: drop-shadow(0 0 8px rgba(198,148,66,.35)); }
.bottom-nav button.active::before { background: var(--gold-light) !important; }

@media (max-width: 900px) {
    .mobile-header {
        padding-right: max(16px, env(safe-area-inset-right));
        padding-left: max(16px, env(safe-area-inset-left));
    }
    .content {
        padding-right: max(20px, env(safe-area-inset-right));
        padding-left: max(20px, env(safe-area-inset-left));
    }
    .bottom-nav {
        right: max(12px, env(safe-area-inset-right));
        left: max(12px, env(safe-area-inset-left));
    }
    .toast {
        right: max(12px, env(safe-area-inset-right));
        left: max(12px, env(safe-area-inset-left));
    }
}

@media (max-width: 680px) {
    .content {
        padding-right: max(12px, env(safe-area-inset-right));
        padding-left: max(12px, env(safe-area-inset-left));
    }
    .metric-card strong { overflow: visible; text-overflow: clip; }
}

@media (max-width: 480px) {
    .metrics-top-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 390px) {
    .content {
        padding-right: max(10px, env(safe-area-inset-right));
        padding-left: max(10px, env(safe-area-inset-left));
    }
    .bottom-nav {
        right: max(8px, env(safe-area-inset-right));
        left: max(8px, env(safe-area-inset-left));
    }
}

/* 2.3.24 — Stage 2: premium shell, hierarchy and dashboard depth */
@media (min-width: 901px) {
    .sidebar { isolation: isolate; }
    .sidebar::after {
        position: absolute; z-index: -1; top: 18%; right: -90px; width: 180px; height: 420px; border-radius: 50%; content: "";
        background: radial-gradient(ellipse, rgba(211,166,77,.075), transparent 68%); filter: blur(18px); pointer-events: none;
    }
    .nav-link { overflow: hidden; }
    .nav-link::after {
        position: absolute; top: -60%; bottom: -60%; left: -45%; width: 32%; content: "";
        background: linear-gradient(90deg, transparent, rgba(255,224,162,.085), transparent); transform: skewX(-18deg); transition: left .72s cubic-bezier(.22,1,.36,1);
    }
    .nav-link:hover::after { left: 118%; }
    .sidebar-user { transition: border-color .25s, background .25s, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
    .sidebar-user:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0,0,0,.22); }
}

.page-heading { padding-bottom: 3px; }
.page-heading h1 { text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.18); }
.page-heading .eyebrow { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.page-heading .eyebrow::before { width: 18px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--gold-light)); box-shadow: 0 0 10px rgba(224,180,92,.32); }
.block-heading h2, .section-heading h2 { letter-spacing: -.035em; }

.card, .metric-card, .store-card, .filter-card, .detail-card, .table-card {
    -webkit-backdrop-filter: saturate(115%); backdrop-filter: saturate(115%);
}
.metric-card { isolation: isolate; }
.metric-card::before {
    position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; opacity: .72;
    background: linear-gradient(125deg, rgba(255,255,255,.025), transparent 34%, rgba(211,166,77,.018) 72%, transparent);
}
.metric-card .metric-icon { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.16); transition: transform .3s cubic-bezier(.2,.9,.25,1.25), box-shadow .3s; }
.metric-card:hover .metric-icon { transform: translateY(-2px) rotate(-3deg) scale(1.04); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 16px 34px rgba(0,0,0,.22); }
.metric-card strong { font-variant-numeric: tabular-nums; text-wrap: nowrap; }

.page-dashboard .metric-grid .metric-card:nth-child(1) { background-image: radial-gradient(circle at 85% 10%, rgba(80,176,129,.055), transparent 34%); }
.page-dashboard .metric-grid .metric-card:nth-child(2) { background-image: radial-gradient(circle at 85% 10%, rgba(220,174,84,.07), transparent 36%); }
.page-dashboard .metric-grid .metric-card:nth-child(3) { background-image: radial-gradient(circle at 85% 10%, rgba(206,148,74,.052), transparent 35%); }
.page-dashboard .metric-grid .metric-card:nth-child(4) { background-image: radial-gradient(circle at 85% 10%, rgba(196,67,84,.06), transparent 35%); }

.performance-preview-card, .best-period-card, .performance-period-card { position: relative; overflow: hidden; }
.performance-preview-card::after, .best-period-card::after, .performance-period-card::after {
    position: absolute; right: -28px; bottom: -34px; width: 92px; height: 92px; border: 1px solid rgba(220,178,94,.08); border-radius: 50%; content: ""; box-shadow: 0 0 0 18px rgba(220,178,94,.014); pointer-events: none;
}
.performance-preview-card strong, .best-period-card strong, .performance-period-card strong { font-variant-numeric: tabular-nums; }
.store-card .card-arrow, .notification-preview .card-arrow { transition: transform .28s cubic-bezier(.22,1,.36,1), color .25s; }
.store-card:hover .card-arrow, .notification-preview:hover .card-arrow { color: var(--gold-light); transform: translateX(4px); }

.button-primary { box-shadow: inset 0 1px rgba(255,255,255,.16), 0 10px 24px rgba(188,137,47,.11); }
.button-primary:hover { box-shadow: inset 0 1px rgba(255,255,255,.2), 0 16px 32px rgba(188,137,47,.18); }
.button-secondary { background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(210,165,77,.025)); }

@media (hover: none), (pointer: coarse) {
    .metric-card:hover .metric-icon, .sidebar-user:hover, .store-card:hover .card-arrow, .notification-preview:hover .card-arrow { transform: none; }
}

/* 2.3.24 — Stage 3: reports, metrics, forms, tables and admin surfaces */
.report-chart-card, .annual-summary-card, .metrics-cost-form-card, .metrics-cost-list-card { position: relative; overflow: hidden; }
.report-chart-card::before, .annual-summary-card::before, .metrics-cost-form-card::before, .metrics-cost-list-card::before {
    position: absolute; inset: 0; content: ""; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.025), transparent 32%, rgba(211,166,77,.018) 78%, transparent);
}
.report-chart-card .monthly-bars { position: relative; z-index: 1; }
.month-bar .bar-track { position: relative; overflow: hidden; border: 1px solid rgba(224,180,92,.07); box-shadow: inset 0 1px 10px rgba(0,0,0,.22); }
.month-bar .bar-track::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent); pointer-events: none; }
.month-bar .bar-track > span { position: relative; background: linear-gradient(to top, #9f6b22, #d6a54a 55%, #f0ca78); box-shadow: 0 -6px 22px rgba(224,180,92,.18); transition: filter .25s, transform .25s; }
.month-bar:hover .bar-track > span { filter: brightness(1.12); transform: scaleX(1.05); transform-origin: bottom center; }
.month-bar .bar-value { font-variant-numeric: tabular-nums; }

.annual-value-list > div { position: relative; overflow: hidden; transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .25s, background .25s; }
.annual-value-list > div::after { position: absolute; right: -30px; bottom: -38px; width: 78px; height: 78px; border: 1px solid rgba(224,180,92,.07); border-radius: 50%; content: ""; }
.annual-value-list > div:not(.featured):hover { transform: translateY(-2px); border-color: rgba(224,180,92,.18); background: #151b1e; }
.annual-value-list strong { font-variant-numeric: tabular-nums; }
.annual-value-list .featured { box-shadow: 0 18px 38px rgba(210,165,77,.15), inset 0 1px rgba(255,255,255,.28); }

.filter-card { position: relative; overflow: hidden; }
.filter-card::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 86% 0, rgba(219,171,80,.055), transparent 28%); }
.filter-card .field, .filter-card .button { position: relative; z-index: 1; }
.field input, .field select, .field textarea { transition: border-color .22s, box-shadow .22s, background .22s, transform .22s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(224,180,92,.18); }
.field input:focus, .field select:focus, .field textarea:focus { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(211,166,77,.075), 0 12px 28px rgba(0,0,0,.14); }
.field > span { letter-spacing: .01em; }

.table-card { overflow: hidden; }
.responsive-table table thead { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)); }
.responsive-table tbody tr { transition: background .22s, transform .22s; }
@media (hover: hover) and (pointer: fine) {
    .responsive-table tbody tr:hover { background: rgba(224,180,92,.035); }
}
.responsive-table td strong, .responsive-table tfoot strong { font-variant-numeric: tabular-nums; }
.row-action { transition: color .2s, transform .2s; }
.row-action:hover { transform: translateX(2px); }

.performance-period-card { transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s; }
.performance-period-card:hover { transform: translateY(-3px); border-color: rgba(224,180,92,.18); box-shadow: 0 18px 44px rgba(0,0,0,.2); }
.performance-breakdown > div { position: relative; overflow: hidden; transition: border-color .22s, background .22s; }
.performance-breakdown > div::after { position: absolute; right: -18px; bottom: -24px; width: 52px; height: 52px; border: 1px solid rgba(224,180,92,.055); border-radius: 50%; content: ""; }
.performance-breakdown > div:hover { border-color: rgba(224,180,92,.15); background: rgba(255,255,255,.025); }
.performance-period-heading > div > strong, .performance-breakdown strong, .best-period-card strong { font-variant-numeric: tabular-nums; }

.metrics-cost-item { border-radius: 14px; transition: background .22s, border-color .22s, transform .22s; }
.metrics-cost-item:hover { border-color: rgba(224,180,92,.15); background: rgba(255,255,255,.018); transform: translateY(-1px); }
.metrics-cost-item > div > strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.metrics-danger-zone { position: relative; overflow: hidden; }
.metrics-danger-zone::after { position: absolute; right: -54px; bottom: -72px; width: 180px; height: 180px; border: 1px solid rgba(224,91,100,.08); border-radius: 50%; content: ""; box-shadow: 0 0 0 30px rgba(224,91,100,.018); pointer-events: none; }

.info-banner { box-shadow: inset 0 1px rgba(255,255,255,.035); }
.info-banner > span:first-child { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.14); }
.empty-state { position: relative; overflow: hidden; }
.empty-state::before { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; border: 1px solid rgba(224,180,92,.045); border-radius: 50%; content: ""; box-shadow: 0 0 0 24px rgba(224,180,92,.012); transform: translate(-50%,-50%); pointer-events: none; }
.empty-state > * { position: relative; z-index: 1; }
.empty-icon { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.16); }

.notification-item, .replenishment-card, .profile-card, .backup-status-card, .rule-card { transition: border-color .25s, background .25s, box-shadow .25s, transform .25s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) and (pointer: fine) {
    .notification-item:hover, .replenishment-card:hover, .profile-card:hover, .backup-status-card:hover, .rule-card:hover { border-color: rgba(224,180,92,.16); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
}

@media (hover: none), (pointer: coarse) {
    .annual-value-list > div:not(.featured):hover, .performance-period-card:hover, .metrics-cost-item:hover, .row-action:hover { transform: none; }
}

/* 2.3.34 — navegação operacional simplificada do funcionário */
@media (max-width: 900px) {
    .bottom-nav.employee-bottom-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 420px; margin-inline: auto; }
    .bottom-nav.employee-bottom-nav .bottom-action { top: 0 !important; width: auto !important; height: auto !important; border-width: 0 !important; border-radius: 15px !important; }
}

/* 2.3.34 — funcionário: somente Fechar caixa na navegação móvel */
@media (max-width: 900px) {
    .bottom-nav.employee-bottom-nav { grid-template-columns: minmax(0, 1fr) !important; max-width: 260px; }
}

/* 2.3.38 — fundos específicos por unidade */
.store-fund-rule-card { border-color: var(--line); background: #12171a; }

/* 2.3.41 — acabamento Dark e semântica neutra de volume */
.comparison-banner.volume-change { color: #eee9df; border-color: rgba(210,165,77,.22); background: rgba(210,165,77,.08); }
.comparison-banner.volume-change > span { color: #17130c; background: linear-gradient(145deg, #edc777, #ae7929); }
.trend.volume-trend { color: #e4c479; border: 1px solid rgba(210,165,77,.12); background: rgba(210,165,77,.10); }

@media (max-width: 900px) {
    .mobile-denomination-cards tr,
    .mobile-record-table tr,
    .mobile-report-table tbody tr {
        color: #e8e5de;
        border-color: rgba(224,180,92,.10);
        background: linear-gradient(145deg, #171c20, #111518);
        box-shadow: 0 10px 28px rgba(0,0,0,.16);
    }
    .mobile-record-table td, .mobile-report-table tbody td { border-bottom-color: rgba(224,180,92,.08); }
    .mobile-report-table tfoot tr { color: #17130c; background: linear-gradient(145deg, #ecc878, #ae7828); }
    .mobile-report-table tfoot td { color: #17130c; }
    .mobile-denomination-cards td:nth-child(4) strong { color: var(--gold-light); }
}

/* Em telas ultrawide, centraliza a coluna útil sem deslocar a sidebar fixa. */
@media (min-width: 2200px) {
    body.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
    body.app-shell .content { grid-column: 2; justify-self: center; width: 100%; max-width: 1780px; margin-left: 0; }
}


/* 2.3.43 — correções após revisão em iPhone real (18/09/2026). */
.mobile-users-table .status-inline { color: #eee9df; }
.mobile-users-table .status-inline .status-dot { margin-right: 0; }

@media (max-width: 900px) {
    /* Situação é uma unidade visual: ponto + texto não podem ser separados pelo space-between da linha. */
    .mobile-users-table td[data-label="Situação"] .status-inline { margin-left: auto; white-space: nowrap; }

    /* O rodapé de totais mantém contraste alto e deixa o dourado somente como acento. */
    .page-reports .mobile-report-table tfoot tr {
        color: #f2eee6;
        border: 1px solid rgba(224,180,92,.24);
        background: linear-gradient(145deg, #20262a, #12171a);
        box-shadow: 0 14px 38px rgba(0,0,0,.28);
    }
    .page-reports .mobile-report-table tfoot td { color: #f2eee6; border-bottom-color: rgba(224,180,92,.10); }
    .page-reports .mobile-report-table tfoot td::before { color: #aab0b1; }
    .page-reports .mobile-report-table tfoot td:first-child { color: #edc777; }
    .page-reports .mobile-report-table tfoot .money-accent { color: #edc777; }

    /* O sheet continua rolável, porém sem a barra dourada chamando mais atenção que os filtros. */
    .filter-card[data-filter-ready="1"] { scrollbar-width: none; }
    .filter-card[data-filter-ready="1"]::-webkit-scrollbar { width: 0; height: 0; display: none; }
    .filter-card[data-filter-ready="1"]:focus { outline: none; }
    .mobile-sheet-header button { width: 44px; height: 44px; padding: 0; line-height: 1; }

    /* Reserva real para a navegação fixa: o último card pode subir totalmente acima da barra. */
    body.app-shell.role-admin:not(.page-new-closure) .content { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
    body.app-shell.role-employee:not(.page-new-closure) .content { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
}

@media (max-width: 680px) {
    /* WebKit/iOS atribui largura intrínseca ao controle nativo de horário; zera essa pressão. */
    .settings-operational-card input[type="time"] { width: 100%; min-width: 0; max-width: 100%; }
    .settings-operational-card input[type="time"]::-webkit-date-and-time-value { width: 100%; min-width: 0; text-align: center; }
    .settings-operational-card .form-actions { width: 100%; justify-content: stretch; }
    .settings-operational-card .form-actions .button { width: 100%; }
}


/* 2.3.44 — funcionário sem navegação inferior redundante e controles WebKit contidos. */
@media (max-width: 900px) {
    body.role-employee .employee-bottom-nav { display: none !important; }

    .page-new-closure .closure-date-field {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .page-new-closure .closure-date-field input[type="date"] {
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
        -webkit-appearance: none;
        appearance: none;
    }

    .page-profile.role-employee .profile-layout {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}