/* ============================================================
   Lastro by DrK — captura fiscal
   Identidade da família DrK (Lastro & Leme): campo petróleo,
   formas claras, UM acento de cobre; tipografia Bricolage
   Grotesque (display) + Hanken Grotesk (UI) + Spline Sans Mono
   (números/chaves). Os nomes de token --drk-* são mantidos
   porque as páginas os usam inline — só os VALORES mudam.
   ============================================================ */
:root {
    /* marca */
    --drk-petroleo: #123B42;      /* campo da marca */
    --drk-petroleo-2: #0B2F35;    /* topbar / fundos escuros */
    --drk-petroleo-3: #16484F;    /* hover/ativo sobre o escuro */
    --drk-cobre: #B8641F;         /* acento de cobre (marca/destaque, nunca semântica) */
    --drk-cobre-claro: #E09A55;   /* peça de cobre da marca / detalhes sobre escuro */

    /* aliases históricos (páginas usam inline) — re-apontados p/ a família */
    --drk-indigo: #0E6E78;        /* cor de ação/links (teal petróleo) */
    --drk-violet: #123B42;
    --drk-cyan: #0E6E78;
    --drk-ink: #13242B;
    --drk-ink-2: #22343B;
    --drk-slate: #4A5E66;
    --drk-bg: #F6F8F8;
    --drk-card: #ffffff;
    --drk-border: #DCE5E6;
    --drk-green: #157A46;
    --drk-amber: #B45309;
    --drk-red: #C03B2E;
    --drk-sidebar-w: 256px;

    --font: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
    --mono: 'Spline Sans Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--font);
    background: var(--drk-bg);
    color: var(--drk-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
a { color: var(--drk-indigo); text-decoration: none; }
a:hover { color: var(--drk-cobre); }
:focus-visible { outline: 2px solid var(--drk-indigo); outline-offset: 2px; }

/* ===== Layout (menu horizontal no topo) ===== */
.drk-app { display: flex; flex-direction: column; min-height: 100vh; }

.drk-topbar {
    background: var(--drk-petroleo-2);
    border-bottom: 1px solid rgba(234,244,245,.09);
    display: flex; align-items: center; gap: 24px;
    padding: 0 24px; height: 60px;
    position: sticky; top: 0; z-index: 30;
}

.drk-brand {
    display: flex; align-items: center; gap: 11px;
    flex-shrink: 0;
}
.drk-brand img { width: 34px; height: 34px; }
.drk-brand .brand-name { display: block; font-family: var(--display); font-weight: 750; font-size: 1.15rem; color: #EAF4F5; line-height: 1; letter-spacing: -.015em; }
.drk-brand .brand-sub { display: block; font-size: .6rem; letter-spacing: 2.2px; text-transform: uppercase; color: var(--drk-cobre-claro); margin-top: 3px; }

.drk-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; }
.drk-nav a {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 8px 13px; border-radius: 8px;
    color: #B9CBCD; font-weight: 500; font-size: .9rem; transition: background .12s, color .12s;
    position: relative;
}
.drk-nav a i { font-size: 1rem; opacity: .85; }
.drk-nav a:hover { background: rgba(234,244,245,.07); color: #EAF4F5; }
.drk-nav a.active { background: var(--drk-petroleo-3); color: #fff; }
.drk-nav a.active::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
    border-radius: 2px; background: var(--drk-cobre-claro);
}

.drk-content { padding: 26px 28px; width: 100%; }
.drk-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600;
    background: rgba(234,244,245,.08); color: #A9E3C4; padding: 6px 12px; border-radius: 999px; }
.drk-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #35C77E; box-shadow: 0 0 0 3px rgba(53,199,126,.2); }

/* ===== Cards / KPIs ===== */
.drk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.drk-card { background: var(--drk-card); border: 1px solid var(--drk-border); border-radius: 12px; padding: 16px 18px; }
.drk-stat { display:flex; justify-content:space-between; align-items:flex-start; }
.drk-stat .label { font-size: .72rem; color: var(--drk-slate); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; display:flex; align-items:center; gap:8px; }
.drk-stat .value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.65rem; font-weight: 600; margin-top: 8px; letter-spacing: -.5px; }
.drk-stat .sub { font-size: .78rem; color: var(--drk-slate); margin-top: 4px; }
.drk-stat .ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex:none; }
/* chips de ícone: tintas da família (sem gradiente); nomes bg-* mantidos p/ não tocar as páginas */
.bg-indigo { background: #E5EFF0; color: var(--drk-petroleo); }
.bg-cyan   { background: #E5EFF0; color: var(--drk-indigo); }
.bg-green  { background: #E4F3EB; color: var(--drk-green); }
.bg-amber  { background: #F8EEDF; color: var(--drk-amber); }
.bg-rose   { background: #F9E8E5; color: var(--drk-red); }
.bg-slate  { background: #EEF2F2; color: var(--drk-slate); }

.section-title { font-family: var(--display); font-size: 1.02rem; font-weight: 700; margin: 26px 0 12px; }

/* ===== Tables ===== */
.drk-table-wrap { background:#fff; border:1px solid var(--drk-border); border-radius:12px; overflow:hidden; }
table.drk-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.drk-table thead th { background:#EEF3F3; text-align:left; padding:10px 16px; font-weight:600; color:var(--drk-slate);
    font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--drk-border); }
.drk-table td { padding: 10px 16px; border-bottom: 1px solid #EFF4F4; }
.drk-table td strong { font-weight: 600; }
.drk-table tbody tr:hover { background:#F3F7F7; }
.drk-table tbody tr:last-child td { border-bottom: none; }

/* layout fixo p/ colunas redimensionáveis + truncamento de células */
table.drk-table--resizable { table-layout: fixed; }
.drk-table--resizable td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drk-table--resizable.resizing { user-select:none; cursor:col-resize; }

/* cabeçalho ordenável */
.drk-table th.th-sort { position:relative; cursor:pointer; user-select:none; -webkit-user-select:none; }
.drk-table th.th-sort:hover { background:#E5EFF0; color:var(--drk-indigo); }
.drk-table th.th-sort.th-active { color:var(--drk-indigo); }
.drk-table th.ta-right .th-in { justify-content:flex-end; }
.th-in { display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sort-ico { font-size:.85rem; opacity:.5; }
.th-active .sort-ico { opacity:1; }

/* alça de redimensionamento (borda direita do th) */
.col-resizer { position:absolute; top:0; right:0; width:8px; height:100%; cursor:col-resize; z-index:2; }
.col-resizer:hover { background:linear-gradient(90deg, transparent, rgba(14,110,120,.35)); }

/* ===== Badges & buttons ===== */
.badge-soft { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:600; }
.b-entrada{ background:#E5EFF0; color:var(--drk-petroleo);} .b-saida{ background:#E4F3EB; color:var(--drk-green);}
.b-completo{ background:#E4F3EB; color:var(--drk-green);} .b-resumo{ background:#F8EEDF; color:var(--drk-amber);} .b-evento{ background:#EEF2F2; color:var(--drk-slate);}
.b-on{ background:#E4F3EB; color:var(--drk-green);} .b-off{ background:#F9E8E5; color:var(--drk-red);}
.b-autorizada{ background:#E4F3EB; color:var(--drk-green);} .b-cancelada{ background:#F9E8E5; color:var(--drk-red);}

.btn-drk { display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer; font-weight:600; font-size:.85rem;
    padding:8px 14px; border-radius:9px; transition:background .12s, color .12s, filter .12s; text-decoration:none; font-family:var(--font); }
.btn-primary-drk { background: var(--drk-petroleo); color:#EAF4F5; }
.btn-primary-drk:hover { background: var(--drk-petroleo-3); color:#fff; }
.btn-ghost { background:#EEF2F2; color:var(--drk-ink-2); } .btn-ghost:hover{ background:#E2E9E9; }
.btn-sm { padding:5px 10px; font-size:.8rem; }
.btn-icon-link { color: var(--drk-indigo); font-size:1.05rem; }

.drk-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:18px; }
.drk-field { display:flex; flex-direction:column; gap:5px; }
.drk-field label { font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--drk-slate); }
.drk-field input, .drk-field select { padding:8px 11px; border:1px solid var(--drk-border); border-radius:8px; font-size:.88rem; background:#fff; min-width:150px; font-family:var(--font); color:var(--drk-ink); }
.drk-field input:focus, .drk-field select:focus { outline:2px solid rgba(14,110,120,.3); border-color:var(--drk-indigo); }

.empty-state { text-align:center; padding:48px 20px; color:var(--drk-slate); }
.empty-state i { font-size:2.4rem; opacity:.4; display:block; margin-bottom:10px; }

.alert-warn { background:#F8EEDF; border:1px solid #ECD9B8; color:#8A4A0B; padding:12px 16px; border-radius:10px; font-size:.88rem; display:flex; gap:10px; align-items:center; }
.alert-ok { background:#E4F3EB; border:1px solid #BFE3D0; color:#0E5A34; padding:12px 16px; border-radius:10px; font-size:.88rem; display:flex; gap:10px; align-items:center; margin-bottom:18px; }

.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:14px; font-size:.85rem; color:var(--drk-slate); }

/* topbar: seletor de empresa / chips (sobre o petróleo) */
.drk-topbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.empresa-select { display:flex; align-items:center; gap:8px; background:rgba(234,244,245,.08); border:1px solid rgba(234,244,245,.14); border-radius:9px; padding:5px 12px; }
.empresa-select i { color:var(--drk-cobre-claro); }
.empresa-select select { border:none; background:transparent; font-weight:600; font-size:.86rem; color:#EAF4F5; outline:none; cursor:pointer; min-width:180px; max-width:280px; font-family:var(--font); }
.empresa-select select option { color: var(--drk-ink); background:#fff; }

/* gráfico mensal */
.chart { display:flex; gap:14px; padding:12px 4px 0; align-items:flex-end; }
.chart .col { flex:1; text-align:center; min-width:0; }
.chart .bars { height:150px; display:flex; align-items:flex-end; justify-content:center; gap:4px; }
.chart .bar { width:18px; border-radius:4px 4px 0 0; min-height:2px; transition:height .3s; }
.chart .bar.ent { background:var(--drk-indigo); }
.chart .bar.sai { background:var(--drk-cobre-claro); }
.chart .mtot { font-family:var(--mono); font-size:.78rem; font-weight:600; margin-bottom:4px; }
.chart .mlabel { font-size:.74rem; color:var(--drk-slate); font-weight:600; margin-top:6px; }
.chart-legend { display:flex; gap:16px; font-size:.78rem; color:var(--drk-slate); }
.chart-legend .sw { width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }
.sw-ent { background:var(--drk-indigo); }
.sw-sai { background:var(--drk-cobre-claro); }

/* topbar: usuário + sair */
.user-chip { display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:#EAF4F5; background:rgba(234,244,245,.08); padding:5px 12px; border-radius:999px; max-width:220px; }
.user-chip i { color:var(--drk-cobre-claro); font-size:1.05rem; }
.user-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-logout { border:none; background:rgba(234,244,245,.08); color:#B9CBCD; width:36px; height:36px; border-radius:9px; cursor:pointer; font-size:1.05rem; transition:background .12s, color .12s; }
.btn-logout:hover { background:rgba(192,59,46,.25); color:#F5B9B1; }

/* ===== Login — palco da marca ===== */
.login-wrap { min-height:100vh; display:flex; align-items:stretch; background:var(--drk-bg); }

/* página de login: hero petróleo + formulário */
.login-split { display:flex; width:100%; min-height:100vh; }
.login-hero { flex:1.1; background:var(--drk-petroleo-2); display:flex; align-items:center; justify-content:center; padding:40px; }
.login-hero .lh-centro { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.login-hero img { width:104px; height:104px; }
.login-hero .lh-nome { font-family:var(--display); font-weight:750; font-size:56px; letter-spacing:-.015em; color:#EAF4F5; line-height:1; }
.login-hero .lh-linha { width:64px; height:4px; border-radius:2px; background:var(--drk-cobre-claro); }
.login-hero .lh-tag { font-size:13px; color:#8FB0B4; letter-spacing:.04em; }
.login-hero .lh-tag b { color:#C6DADC; font-weight:600; }
.login-form-side { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px; }

.login-card { background:#fff; width:100%; max-width:400px; border-radius:14px; padding:34px 32px;
    border:1px solid var(--drk-border); }
.login-wrap > .login-card { margin:auto; }  /* trocar-senha: cartão centrado no claro */
.login-brand { display:flex; align-items:center; gap:13px; margin-bottom:24px; }
.login-brand img { width:48px; height:48px; }
.login-brand .lb-name { font-family:var(--display); font-size:1.5rem; font-weight:750; letter-spacing:-.015em; color:var(--drk-ink); line-height:1; }
.login-brand .lb-name span { color:var(--drk-cobre); }
.login-brand .lb-sub { font-size:.68rem; letter-spacing:2px; text-transform:uppercase; color:var(--drk-slate); margin-top:4px; }
.login-title { font-size:1.02rem; font-weight:700; margin:0 0 18px; color:var(--drk-ink); }
.login-field { margin-bottom:14px; }
.login-field label { display:block; font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--drk-slate); margin-bottom:6px; }
.login-input { width:100%; padding:11px 13px; border:1px solid var(--drk-border); border-radius:9px; font-size:.95rem; font-family:var(--font); }
.login-input:focus { outline:2px solid rgba(14,110,120,.3); border-color:var(--drk-indigo); }
.login-btn { width:100%; margin-top:6px; padding:12px; border:none; border-radius:9px; cursor:pointer;
    background:var(--drk-petroleo); color:#EAF4F5; font-weight:700; font-size:.95rem; font-family:var(--font);
    display:flex; align-items:center; justify-content:center; gap:8px; transition:background .12s; }
.login-btn:hover { background:var(--drk-petroleo-3); color:#fff; }
.login-erro { background:#F9E8E5; border:1px solid #EFC5BE; color:#96291E; padding:10px 13px; border-radius:9px;
    font-size:.85rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.login-foot { text-align:center; font-size:.74rem; color:var(--drk-slate); margin-top:22px; }

/* bulk selection bar */
.bulk-bar { display:flex; align-items:center; gap:12px; background:#E5EFF0; border:1px solid #C5D9DB;
    border-radius:10px; padding:10px 16px; margin-bottom:14px; font-size:.9rem; color:var(--drk-petroleo); }
.bulk-bar strong { font-weight:800; }

/* chave de acesso */
.chave-cell { display:flex; align-items:center; gap:6px; min-width:0; }
.chave-cell code { font-family:var(--mono); font-size:.74rem;
    color:var(--drk-ink-2); letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.chave-copy { flex-shrink:0; border:none; background:transparent; color:var(--drk-slate); cursor:pointer;
    font-size:.9rem; padding:0 2px; line-height:1; transition:color .15s; }
.chave-copy:hover { color:var(--drk-indigo); }

/* download actions */
.doc-actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.doc-actions a { color:var(--drk-slate); font-size:1.05rem; transition:color .15s; }
.doc-actions a:hover { color:var(--drk-indigo); }
.doc-actions a.pdf:hover { color:var(--drk-red); }
.doc-actions .disabled { opacity:.25; pointer-events:none; }

@media (max-width: 980px){
  .drk-topbar{ flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 12px; }
  .drk-nav{ order: 3; flex-basis: 100%; }
  .drk-topbar-right{ flex-wrap: wrap; }
  .empresa-select select{ min-width: 120px; }
  .drk-content{ padding: 18px; }
  .login-split{ flex-direction: column; }
  .login-hero{ min-height: 34vh; flex: none; }
  .login-hero img{ width: 72px; height: 72px; }
  .login-hero .lh-nome{ font-size: 40px; }
}

@media (prefers-reduced-motion: reduce){
  * { transition: none !important; }
}

/* error UI from template */
#blazor-error-ui {
    background: #F8EEDF; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }