/* ClickTesouro — "lq" design system (Inter + indigo/slate), from the approved
   design comps. Replaces the MudBlazor chrome; pages compose these tokens/classes. */

:root {
    --lqbg:#F8FAFC; --lqsurface:#fff; --lqborder:#CBD5E1; --lqink:#0F172A;
    --lqmuted:#64748B; --lqmuted2:#475569; --lqfaint:#7A89A0;   /* faint darkened from #94A3B8 (2.6:1 on white) to ~3.5:1; text <12px should use --lqmuted (4.8:1, AA) */
    --lqsoft:#EEF2F7; --lqsoft2:#F1F5F9; --lqline2:#CBD5E1;
    /* brand: clicktesouro blue #008CFF + deep blue #063CFF + teal #00D7C2 (from the logo signature) */
    --lqindigobg:#E6F4FF; --lqprevbg:#E3F1FF; --lqprevborder:#B8DEFF; --lqaccent:#008CFF; --lqaccent-ink:#0069BD; --lqaccent2:#063CFF; --lqteal:#00D7C2;
    /* per-mode accents (pink retinted to brand teal) */
    --lqgreen:#10B981; --lqamber:#F59E0B; --lqpink:#00B3A6; --lqsky:#0EA5E9; --lqskybg:#E0F2FE;
    --lqsuccess:#0F9669; --lqsuccessbg:#E7F8F0; --lqdanger:#DC2626; --lqdangerbg:#FEECEC;
    --lqwarn:#B45309; --lqwarnbg:#FEF4E6;
    /* A ARESTA MEDIDA do cartao de precedencia. Ela era --lqdanger, e vermelho nesta tela significa
       PROBLEMA (faltando, Failed) -- uma dependencia dura nao e problema, e um fato do grafo, verdadeiro
       com tudo verde. Token proprio e nao --lqamber porque amber ja e a aresta de RULING, e colapsar as
       duas apagaria a distincao que o cartao existe para fazer. */
    --lqedgehard:#B45309;
    /* AA-safe solid-accent fill + on-fill ink (white on #008CFF is only ~3.4:1) and the "na curva/carrego" carry accent */
    --lqbtn:#0072CE; --lqbtnink:#fff; --lqbtnink2:rgba(255,255,255,.82); --lqcurve:#C2680C;
}
html.lqdark {
    --lqbg:#0F172A; --lqsurface:#1E293B; --lqborder:#334155; --lqink:#E6EAF2;
    --lqmuted:#9AA6B8; --lqmuted2:#C2CAD8; --lqfaint:#71809A;
    --lqsoft:#22324A; --lqsoft2:#1C2940; --lqline2:#3C4B62;
    --lqindigobg:#0E2E4D; --lqprevbg:#0F2540; --lqprevborder:#1E4E7A; --lqaccent:#4DA6FF; --lqaccent-ink:#66B3FF; --lqaccent2:#5B8CFF; --lqteal:#00D7C2;
    --lqsuccess:#34D399; --lqsuccessbg:#10312A; --lqdanger:#F87171; --lqdangerbg:#3A1D1D;
    --lqwarn:#FBBF24; --lqwarnbg:#3A2E12;
    --lqedgehard:#FB923C;   /* no escuro, --lqwarn e #FBBF24: o MESMO do amber */
    --lqsky:#38BDF8; --lqskybg:#0C2D42;   /* sky lifted for dark; bg = deep sky-tinted navy */
    --lqgreen:#34D399; --lqamber:#FBBF24; --lqpink:#2DD4C4;   /* rail-icon accents lifted for the dark surface */
    --lqbtn:#4DA6FF; --lqbtnink:#0F172A; --lqbtnink2:rgba(15,23,42,.72); --lqcurve:#E0A86A;   /* dark button: bright fill + dark ink (white would be ~2.6:1) */
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background:var(--lqbg); color:var(--lqink); -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
.tabular-nums { font-variant-numeric:tabular-nums; }
.lqmi { font-family:'Material Icons'; font-feature-settings:'liga'; line-height:1; }

/* ── App shell: sticky top bar + left rail + content ── */
.lq-topbar { position:sticky; top:0; z-index:40; background:var(--lqsurface); border-bottom:1px solid var(--lqborder); }
.lq-topbar__in { max-width:1240px; margin:0 auto; height:64px; padding:0 24px; display:flex; align-items:center; gap:14px; }
.lq-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:-.02em; }
.lq-brand__mark { width:34px; height:34px; border-radius:9px; background:var(--lqaccent); display:flex; align-items:center; justify-content:center; color:#fff; }
.lq-tag { display:inline-flex; align-items:center; gap:5px; background:var(--lqindigobg); color:var(--lqaccent); font-weight:600; font-size:12px; padding:5px 11px; border-radius:999px; }
.lq-iconbtn { width:38px; height:38px; border-radius:10px; border:1px solid var(--lqborder); background:var(--lqsurface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--lqmuted); transition:border-color .12s, box-shadow .12s; }
.lq-iconbtn:hover { border-color:var(--lqaccent); box-shadow:0 3px 8px rgba(15,23,42,.10); }
.lq-avatar { width:38px; height:38px; border-radius:50%; background:var(--lqaccent); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }

.lq-body { max-width:1240px; margin:0 auto; padding:26px 24px 72px; display:grid; grid-template-columns:228px minmax(0,1fr); gap:26px; align-items:start; }
.lq-body--wide { max-width:1600px; }
.lq-rail { position:sticky; top:88px; background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:16px; padding:12px; }
.lq-rail__head { padding:14px 12px 6px; font-weight:700; font-size:11px; color:var(--lqmuted); text-transform:uppercase; letter-spacing:.07em; }
.lq-rail a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:var(--lqmuted2); font-weight:500; font-size:14px; transition:background .12s; }
/* Fixed icon slot so a missing/wide glyph can never shove the label (keeps every item left-aligned). */
.lq-rail a .lqmi { flex:none; width:22px; overflow:hidden; }
.lq-rail a:hover { background:var(--lqbg); }
.lq-rail a.active { background:var(--lqindigobg); color:var(--lqaccent); font-weight:600; }
/* Collapsible section header (e.g. Admin): a clickable lq-rail__head with a chevron. */
.lq-rail__group { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; padding:14px 12px 6px; font-weight:700; font-size:11px; color:var(--lqmuted); text-transform:uppercase; letter-spacing:.07em; }
.lq-rail__group:hover { color:var(--lqmuted2); }
.lq-rail__chev { color:var(--lqfaint); text-transform:none; letter-spacing:normal; }
.lq-main { display:flex; flex-direction:column; gap:24px; min-width:0; }

/* Collapsed rail (hamburger toggle): hide the rail, let content span full width. */
.lq-body.lq-rail-collapsed { grid-template-columns:minmax(0,1fr); }
.lq-body.lq-rail-collapsed .lq-rail { display:none; }
.lq-hamburger { flex:none; }

/* ── Surfaces ── */
.lq-card { background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:16px; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.lq-stat { background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:16px; padding:18px; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.lq-stat__label { font-weight:500; font-size:12.5px; color:var(--lqmuted); }
.lq-stat__value { font-weight:700; font-size:24px; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; }
.lq-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lq-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--lqaccent); background:var(--lqindigobg); padding:6px 12px; border-radius:999px; }
.lq-h1 { font-size:2rem; line-height:1.15; letter-spacing:-.02em; font-weight:700; margin:14px 0 8px; }
.lq-h2 { font-size:1.5rem; font-weight:700; letter-spacing:-.01em; margin:0; }
.lq-sub { font-size:.95rem; line-height:1.6; color:var(--lqmuted); margin:0; max-width:60ch; }

/* ── Chips / pills / buttons ── */
.lq-chip { padding:8px 15px; border-radius:999px; font-weight:600; font-size:13px; cursor:pointer; border:1px solid var(--lqborder); background:var(--lqsurface); color:var(--lqmuted2); transition:border-color .12s, background .12s; }
.lq-chip.active { background:var(--lqbtn); color:var(--lqbtnink); border-color:var(--lqbtn); }
.lq-pill { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--lqmuted); background:var(--lqsoft2); padding:4px 10px; border-radius:999px; }
.lq-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 18px; border-radius:11px; font-weight:600; font-size:.9rem; cursor:pointer; border:1px solid var(--lqborder); background:var(--lqsurface); color:var(--lqink); transition:background .12s, border-color .12s, box-shadow .12s; }
.lq-btn:hover { border-color:var(--lqline2); }
.lq-btn:disabled { opacity:.55; cursor:default; }
/* O FOCO DO TECLADO APARECE: o CSS do MudBlazor zera o outline dos botões, e um .lq-btn com foco de teclado ficava igual ao
   sem foco (medido 2026-10-04 na página diária: :focus-visible verdadeiro, outline none, sem sombra). */
.lq-btn:focus-visible { outline:2px solid var(--lqaccent); outline-offset:2px; }
.lq-btn--primary { background:var(--lqbtn); border-color:var(--lqbtn); color:var(--lqbtnink); }
.lq-btn--primary:hover { box-shadow:0 6px 16px rgba(79,70,229,.30); }
.lq-link { display:inline-flex; align-items:center; gap:4px; color:var(--lqaccent); font-weight:600; }

/* ── Title/offer cards ── */
.lq-titlecard { background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:11px; transition:transform .15s, box-shadow .15s, border-color .15s; }
.lq-titlecard:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(15,23,42,.08); border-color:var(--lqline2); }
.lq-cardgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

/* ── Data tables ── */
.lq-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.lq-table th { text-align:left; font-weight:600; font-size:11.5px; color:var(--lqmuted); text-transform:uppercase; letter-spacing:.04em; padding:10px 14px; border-bottom:1px solid var(--lqborder); }   /* muted: 11.5px needs AA contrast */
.lq-table td { padding:12px 14px; border-bottom:1px solid var(--lqsoft); }
.lq-table tbody tr:last-child td { border-bottom:0; }
.lq-table tbody tr:hover { background:var(--lqsoft2); }
.lq-num { font-variant-numeric:tabular-nums; }
.lq-pos { color:var(--lqsuccess); } .lq-neg { color:var(--lqdanger); }

/* ── Native form controls in lq style (used for aporte/indexador/prazo) ── */
.lq-field { width:100%; }
.lq-field > label { display:block; font-weight:500; font-size:12.5px; color:var(--lqmuted); margin-bottom:6px; }
.lq-input, .lq-select { width:100%; font-family:inherit; font-size:14px; color:var(--lqink); background:var(--lqsurface); border:1px solid var(--lqborder); border-radius:11px; padding:11px 13px; outline:none; transition:border-color .12s, box-shadow .12s; }
.lq-input:focus, .lq-select:focus { border-color:var(--lqaccent); box-shadow:0 0 0 3px rgba(79,70,229,.15); }

/* Range sliders (Simulação controls) */
.lq-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:var(--lqsoft); outline:none; cursor:pointer; }
.lq-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--lqaccent); border:2px solid var(--lqsurface); box-shadow:0 1px 3px rgba(15,23,42,.25); cursor:pointer; }
.lq-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--lqaccent); border:2px solid var(--lqsurface); box-shadow:0 1px 3px rgba(15,23,42,.25); cursor:pointer; }
.lq-range::-moz-range-track { height:6px; border-radius:999px; background:var(--lqsoft); }

/* Segmented chip toggle (Simulação Indexador) */
.lq-seg { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.lq-seg__chip { text-align:center; padding:9px 6px; border-radius:10px; font-weight:600; font-size:12px; cursor:pointer; border:1px solid var(--lqborder); background:var(--lqsurface); color:var(--lqmuted2); transition:.12s; user-select:none; }
.lq-seg__chip:hover { border-color:var(--lqline2); }
.lq-seg__chip.is-active { border-color:var(--lqaccent); background:var(--lqindigobg); color:var(--lqaccent); }

/* Spinner (top-bar refresh) */
@keyframes lq-spin { to { transform: rotate(360deg); } }
.lq-spin { display:inline-block; animation: lq-spin .9s linear infinite; }

/* Compact data grid (ASEL007 consult — many narrow columns) */
.lq-asel-grid .mud-table-cell { padding:3px 8px !important; font-size:12px !important; white-space:nowrap; }
.lq-asel-grid .mud-table-cell .mud-typography { font-size:12px !important; }
.lq-asel-grid .mud-table-head .mud-table-cell { font-size:11.5px !important; font-weight:600; }
.lq-asel-grid .mud-table-head .mud-table-cell .mud-typography { font-size:11.5px !important; }

/* ── Toast (order feedback) ── */
.lq-toast-wrap { position:fixed; bottom:22px; right:22px; z-index:60; display:flex; flex-direction:column; gap:10px; }
.lq-toast { background:var(--lqsurface); border:1px solid var(--lqborder); border-left:4px solid var(--lqaccent); border-radius:12px; padding:13px 16px; box-shadow:0 10px 30px rgba(15,23,42,.18); font-size:13.5px; max-width:360px; }
.lq-toast--ok { border-left-color:var(--lqsuccess); }
.lq-toast--err { border-left-color:var(--lqdanger); }

@media (max-width: 880px) {
    .lq-body { grid-template-columns:1fr; }
    .lq-rail { position:static; }
    .lq-grid4 { grid-template-columns:repeat(2,1fr); }
}

/* A BARRA SUPERIOR QUEBRA EM LINHAS na tela estreita em vez de alargar a página: em 390 px ela pedia 726 px, e a página inteira
   rolava na horizontal (medido 2026-10-04 nas páginas do ADM). Nada some; o grupo da direita desce para a linha de baixo. */
@media (max-width: 600px) {
    .lq-topbar__in { flex-wrap:wrap; height:auto; min-height:64px; padding:8px 12px; row-gap:6px; }
}

/* Daily admin process receipts */
.daily-process-scroll { overflow-x:auto; }
.daily-process-table { width:100%; border-collapse:collapse; font-size:12px; }
.daily-process-table th, .daily-process-table td { padding:6px 8px; border-bottom:1px solid var(--lqsoft); text-align:left; line-height:1.35; }
.daily-process-table thead th { color:var(--lqmuted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.daily-process-table tbody th { font-weight:500; min-width:220px; }
.daily-process-table tbody tr:last-child > * { border-bottom:0; }
.daily-process-table td { white-space:nowrap; font-size:11px; }
.daily-process-level { display:inline-block; width:18px; margin-right:8px; color:var(--lqfaint); font-size:10px; }
.daily-process-badge { display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.daily-process-badge .lqmi { font-size:16px; }
.daily-process-source { color:var(--lqmuted); }
.daily-process-log { background:none; border:0; padding:0; cursor:pointer; color:var(--lqaccent); font:inherit; }
.daily-process-log:hover { text-decoration:underline; }
.daily-process-log:focus-visible { outline:2px solid var(--lqaccent); outline-offset:3px; }
.daily-process-pending { color:inherit; background:none; border:0; padding:0; cursor:pointer; font:inherit; text-decoration:underline; text-underline-offset:3px; }
.daily-process-table .daily-process-detail { white-space:normal; padding:12px; background:var(--lqbg); color:var(--lqdanger); line-height:1.6; }