/*
 * =====================================================
 * FLUXUSBI - TEMA CENTRAL DO APP TÉCNICO
 * Arquivo: /modules/assistenciatecnica/app/pwa-theme.css
 * =====================================================
 * Claro por padrão. Escuro somente por escolha do técnico.
 */

:root,
html[data-pwa-theme="light"],
html[data-theme="light"] {
    color-scheme: light;
    --accent:#667eea;
    --accent2:#764ba2;
    --surface:#ffffff;
    --surface2:#f7f8fb;
    --surface3:#eef2f7;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e2e8f0;
    --blue:#2563eb;
    --green:#16a34a;
    --yellow:#d97706;
    --red:#dc2626;
    --orange:#ea580c;
    --shadow:0 2px 8px rgba(15,23,42,.08);
    --shadow-lg:0 12px 30px rgba(15,23,42,.14);
}

html[data-pwa-theme="dark"],
html[data-theme="dark"] {
    color-scheme: dark;
    --accent:#8b9cff;
    --accent2:#9b7de8;
    --surface:#101827;
    --surface2:#0b1420;
    --surface3:#182235;
    --text:#eef4fb;
    --muted:#a8b5c4;
    --border:#2b3b50;
    --blue:#60a5fa;
    --green:#4ade80;
    --yellow:#fbbf24;
    --red:#f87171;
    --orange:#fb923c;
    --shadow:0 3px 10px rgba(0,0,0,.28);
    --shadow-lg:0 14px 34px rgba(0,0,0,.38);
}

body {
    background:var(--surface2);
    color:var(--text);
    transition:background-color .2s ease,color .2s ease;
}

/* Estrutura mínima comum às telas operacionais do APP. */
body.app-tecnico {
    min-height:100dvh;
    margin:0;
}
.app-content {
    width:min(100%, 900px);
    min-height:calc(100dvh - 76px - 72px - env(safe-area-inset-bottom));
    margin:0 auto;
    padding:18px 16px calc(90px + env(safe-area-inset-bottom));
    box-sizing:border-box;
}
.app-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow);
    color:var(--text);
}

.perfil-card,
.contato-card,
.appearance-card,
.form-card,
.fuel-card,
.vehicle-card,
.card,
.view-card,
.os-card,
.filter-form {
    background:var(--surface)!important;
    border-color:var(--border)!important;
    color:var(--text)!important;
}

.perfil-info,
.info-box {
    background:var(--surface2)!important;
}

.perfil-value,
.contato-info h3,
.appearance-title,
.fuel-title,
.vehicle-name,
.value,
.os-cliente {
    color:var(--text)!important;
}

.contato-info p,
.contato-numero,
.appearance-description,
.fuel-meta,
.vehicle-driver,
.help,
.text-muted {
    color:var(--muted)!important;
}

.form-control,
.form-select,
textarea,
input {
    background-color:var(--surface)!important;
    border-color:var(--border)!important;
    color:var(--text)!important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color:var(--muted)!important;
}

.bottom-nav {
    background:var(--surface)!important;
    border-top:1px solid var(--border)!important;
    box-shadow:0 -4px 14px rgba(0,0,0,.12)!important;
}

.bottom-nav .nav-item {
    color:var(--muted)!important;
}

.bottom-nav .nav-item.active {
    color:var(--accent)!important;
}

.theme-status {
    background:var(--surface2)!important;
    color:var(--muted)!important;
}

/* Casca única: dashboard, agenda, visitas, despesas, chat, biblioteca e perfil. */
.pwa-standard-header,
.header,
.header-os,
.dash-header,
.app-header {
    position:relative;
    min-height:76px;
    padding:calc(14px + env(safe-area-inset-top)) 16px 14px!important;
    color:#fff!important;
    background:linear-gradient(120deg,#073350 0%,#086fb4 62%,#04a9b7 100%)!important;
    border:0!important;
    box-shadow:0 7px 20px rgba(4,48,77,.20)!important;
}
.pwa-standard-header h1,.pwa-standard-header h4,.header h1,.header-os h4,.dash-header h1,.app-header h1 { color:#fff!important; }
.pwa-standard-header p,.header p,.app-header p { color:rgba(255,255,255,.80)!important; }
.pwa-header-layout { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; width:min(100%,900px); margin:auto; }
.pwa-header-copy { min-width:0; }
.pwa-header-copy strong { display:block; overflow:hidden; color:#fff; font-size:1.05rem; font-weight:800; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.pwa-header-copy span { display:block; overflow:hidden; margin-top:3px; color:rgba(255,255,255,.78); font-size:.74rem; text-overflow:ellipsis; white-space:nowrap; }
.pwa-header-actions { display:flex; flex:0 0 auto; align-items:center; gap:10px; }
.pwa-header-actions a { display:grid; flex:0 0 38px; place-items:center; width:38px; height:38px; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:12px; text-decoration:none; box-sizing:border-box; }
.pwa-header-actions a.pwa-system-link {
    display:flex;
    flex:0 0 auto;
    width:auto;
    min-width:82px;
    padding:0 14px;
    justify-content:center;
    color:#684000!important;
    background:linear-gradient(135deg,#fffde9 0%,#ffe68d 52%,#ffc44d 100%)!important;
    border-color:rgba(255,205,67,.92)!important;
    box-shadow:0 7px 18px rgba(115,72,0,.25),inset 0 1px 0 rgba(255,255,255,.78)!important;
    font-size:.73rem;
    font-weight:850;
    letter-spacing:.02em;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
}
.pwa-header-actions a.pwa-system-link:hover,.pwa-header-actions a.pwa-system-link:focus-visible { transform:translateY(-1px); filter:brightness(1.05) saturate(1.05); box-shadow:0 9px 22px rgba(99,49,5,.30),inset 0 1px 0 rgba(255,255,255,.78)!important; }
.pwa-header-actions a.pwa-logout-link {
    color:#fff!important;
    background:linear-gradient(135deg,#ff9aa8 0%,#ee4963 55%,#b91535 100%)!important;
    border-color:rgba(255,150,166,.82)!important;
    box-shadow:0 7px 17px rgba(104,5,29,.28),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.pwa-header-actions a.pwa-logout-link:hover,.pwa-header-actions a.pwa-logout-link:focus-visible { transform:translateY(-1px); filter:brightness(1.05) saturate(1.06); box-shadow:0 9px 21px rgba(104,5,29,.36),inset 0 1px 0 rgba(255,255,255,.34)!important; }
@media (max-width:430px) {
    .pwa-header-layout { gap:8px; }
    .pwa-header-actions { gap:7px; }
    .pwa-header-actions a.pwa-system-link { min-width:76px; padding:0 11px; }
}
@keyframes fluxus-check-pulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(8,159,114,.25); } 50% { transform:scale(1.04); box-shadow:0 0 0 12px rgba(8,159,114,0); } }
.check-card .state { animation:fluxus-check-pulse 2.2s ease-in-out infinite; }
.checkin-page,.checkout-page { overflow-x:hidden; }
.pwa-back,.app-header__back,.header-back {
    display:grid!important; place-items:center; width:42px!important; height:42px!important;
    color:#fff!important; background:rgba(255,255,255,.14)!important;
    border:1px solid rgba(255,255,255,.34)!important; border-radius:13px!important;
    text-decoration:none!important; box-shadow:none!important;
}
.pwa-standard-header .pwa-back,.header .pwa-back,.header-os .pwa-back { position:static; transform:none; z-index:3; }
.header:has(.pwa-back),.header-os:has(.pwa-back),.dash-header:has(.pwa-back) { padding-left:16px!important; }
.bottom-nav,.app-bottom-nav {
    position:fixed!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    z-index:1100!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-around!important;
    height:calc(72px + env(safe-area-inset-bottom)); padding:8px 4px calc(8px + env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
    background:var(--surface)!important; border-top:1px solid var(--border)!important;
    box-shadow:0 -5px 18px rgba(4,26,44,.13)!important;
}
.bottom-nav .nav-item,.app-bottom-nav a { color:var(--muted)!important; font-size:10px!important; font-weight:700!important; }
.app-bottom-nav a {
    display:flex!important;
    flex:1 1 0!important;
    min-width:0!important;
    height:54px!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    text-align:center!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    margin:0 3px!important;
    border:1px solid color-mix(in srgb, var(--border) 78%, transparent)!important;
    border-radius:14px!important;
    background:linear-gradient(155deg,var(--surface) 0%,var(--surface2) 100%)!important;
    box-shadow:0 4px 10px rgba(4,32,52,.14),inset 0 1px 0 rgba(255,255,255,.65)!important;
    transition:transform .16s ease,box-shadow .16s ease,color .16s ease!important;
}
.app-bottom-nav a span { display:block!important; overflow:hidden!important; max-width:100%!important; text-overflow:ellipsis!important; }
.bottom-nav .nav-item i,.app-bottom-nav a i { font-size:20px!important; margin-bottom:3px!important; }
.bottom-nav .nav-item.active,.app-bottom-nav a.active { color:#0878c9!important; }
.app-bottom-nav a:hover,.app-bottom-nav a:focus-visible { transform:translateY(-2px); box-shadow:0 7px 15px rgba(4,32,52,.20),inset 0 1px 0 rgba(255,255,255,.72)!important; }
.app-bottom-nav a.active { background:linear-gradient(155deg,rgba(225,244,255,.96),rgba(204,234,252,.90))!important; border-color:rgba(8,120,201,.28)!important; box-shadow:0 6px 14px rgba(8,120,201,.24),inset 0 1px 0 rgba(255,255,255,.82)!important; }
.app-bottom-nav a.active i { color:#0878c9!important; filter:drop-shadow(0 2px 4px rgba(8,120,201,.22)); }
html[data-pwa-theme="dark"] .app-bottom-nav a,html[data-theme="dark"] .app-bottom-nav a { box-shadow:0 5px 12px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)!important; }
html[data-pwa-theme="dark"] .app-bottom-nav a.active,html[data-theme="dark"] .app-bottom-nav a.active { background:linear-gradient(155deg,rgba(16,71,105,.94),rgba(10,48,76,.96))!important; border-color:rgba(96,184,238,.38)!important; box-shadow:0 6px 15px rgba(0,0,0,.42),0 0 0 1px rgba(41,151,218,.12)!important; }
html[data-pwa-theme="dark"] .pwa-standard-header,html[data-pwa-theme="dark"] .header,html[data-pwa-theme="dark"] .header-os,html[data-pwa-theme="dark"] .dash-header,html[data-pwa-theme="dark"] .app-header { background:linear-gradient(120deg,#061d30,#08466d 62%,#086f7b)!important; }

/* Prioridade sobre CSS legado de cada tela: este é o gradiente oficial do APP. */
body .pwa-standard-header.header,
body .pwa-standard-header.header-os,
body .pwa-standard-header.dash-header,
body .pwa-standard-header.app-header {
    background:linear-gradient(120deg,#073350 0%,#086fb4 62%,#04a9b7 100%)!important;
}
html[data-pwa-theme="dark"] body .pwa-standard-header.header,
html[data-pwa-theme="dark"] body .pwa-standard-header.header-os,
html[data-pwa-theme="dark"] body .pwa-standard-header.dash-header,
html[data-pwa-theme="dark"] body .pwa-standard-header.app-header {
    background:linear-gradient(120deg,#061d30 0%,#08466d 62%,#086f7b 100%)!important;
}