/* ============================================================
   CERTIX Cloud — folha de estilo única de todas as telas.
   Tema ESCURO por padrão; o claro entra com html[data-tema="claro"].
   O botao no topo alterna e o navegador lembra a escolha.
   ============================================================ */

/* ---------- tokens: ESCURO (padrao) ---------- */
:root{
  --bg:#070f1e;
  --surface:#0f1c31;
  --surface-2:#13233c;
  --sunken:#0b1626;
  --text:#eaf1fb;
  --text-2:#a9b8cd;
  --muted:#8496af;
  --line:#20324e;
  --line-2:#1a2a42;

  --navy:#0a1830;            /* sidebar - escura nos dois temas */
  --navy2:#060f20;
  --blue:#4f97ec;
  --blue-ink:#7fb2f2;
  --blue-strong:#3d84ff;
  --blue-soft:#16294a;

  --ok:#2bbd88;   --ok-soft:#0f2c25;  --ok-ink:#57d3a6;
  --warn:#e0a53a; --warn-soft:#2e2410; --warn-ink:#e8bd6b;
  --crit:#ef6b6a; --crit-soft:#2e1616; --crit-ink:#f39a99;
  --green:#2bbd88;

  --ring:0 0 0 3px #4f97ec44;
  --card-sh:0 1px 2px #0004, 0 14px 36px #0006;
  --card-sh-h:0 2px 6px #0006, 0 22px 54px #0008;
  --r:16px;
  --r-sm:10px;
}

/* ---------- tokens: CLARO ---------- */
html[data-tema="claro"]{
  --bg:#eef2f8;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --sunken:#f8faff;
  --text:#0f1b2e;
  --text-2:#5a6472;
  --muted:#6b7688;
  --line:#e7edf6;
  --line-2:#edf1f6;

  --navy:#0b1930;
  --navy2:#081426;
  --blue:#246bfd;
  --blue-ink:#1b5cb8;
  --blue-strong:#377cff;
  --blue-soft:#eaf1fd;

  --ok:#16a673;   --ok-soft:#e6f7f0;  --ok-ink:#0a6b48;
  --warn:#c98500; --warn-soft:#fbf1d8; --warn-ink:#8a5b00;
  --crit:#e34948; --crit-soft:#fcebeb; --crit-ink:#b32f2e;
  --green:#16a673;

  --ring:0 0 0 3px #246bfd22;
  --card-sh:0 1px 2px #0b1f3a0a, 0 10px 30px #0b1f3a10;
  --card-sh-h:0 2px 6px #0b1f3a14, 0 18px 46px #0b1f3a20;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease,color .25s ease;
}
a{text-decoration:none;color:inherit}
.numero,.metric strong,.bar-item strong,td strong,.metric .val{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- estrutura ---------- */
.shell{min-height:100vh;display:flex}
.sidebar{
  width:250px;color:#dfe8f5;padding:24px 16px;position:fixed;inset:0 auto 0 0;
  background:
    radial-gradient(120% 55% at 0% 0%, #16386b55 0, transparent 60%),
    linear-gradient(180deg,var(--navy),var(--navy2));
  border-right:1px solid #0c1c38;
}
.brand,.login-brand{display:flex;align-items:center;gap:12px}
.brand{padding:6px 8px 26px}
.brand-mark{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;
  background:linear-gradient(135deg,var(--blue-strong),#64a4ff);
  box-shadow:0 10px 22px #1261ff55, inset 0 1px 0 #ffffff55;
}
.brand strong,.login-brand strong{display:block;font-size:15px;letter-spacing:.2px}
.brand small,.login-brand small{display:block;color:#9dabc0;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.nav-label{display:block;color:#5f728f;font-size:10px;letter-spacing:1.4px;margin:20px 12px 8px}
.sidebar nav a,.sidebar nav .disabled{
  display:flex;align-items:center;color:#a7b6cd;padding:11px 13px;border-radius:10px;gap:12px;margin:2px 0;
  font-size:14px;font-weight:520;transition:all .16s ease;position:relative
}
.sidebar nav a:hover{background:#ffffff12;color:#eaf1fb}
.sidebar nav a.active{
  background:linear-gradient(90deg,#2163ed,#3f7bf5);color:#fff;
  box-shadow:0 8px 20px #0d4ee955, inset 0 1px 0 #ffffff33
}
.sidebar nav a.active::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:3px;background:#8fc0ff}
.sidebar nav a.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}
.sidebar-footer{position:absolute;bottom:24px;color:#8595ac;font-size:11px;padding:0 10px}
.status-dot{display:inline-block;width:7px;height:7px;background:#32d99a;border-radius:50%;margin-right:6px;box-shadow:0 0 0 3px #32d99a33}

.main-area{margin-left:250px;width:calc(100% - 250px)}
.topbar{
  height:72px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:6
}
.topbar strong{display:block;font-size:14px}
.topbar>div:last-child{display:flex;align-items:center;gap:14px}
.eyebrow{color:var(--blue-ink);font-weight:800;font-size:10px;letter-spacing:1.6px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-soft);color:var(--blue-ink);display:grid;place-items:center;font-weight:800;font-size:12px}
.tema-btn{
  width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--text);font-size:17px;cursor:pointer;transition:all .16s ease;line-height:1
}
.tema-btn:hover{border-color:var(--blue);box-shadow:var(--ring)}
.content{padding:30px;max-width:1500px;margin:auto}

/* ---------- cabecalho de pagina ---------- */
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:18px;flex-wrap:wrap}
.page-heading h1{font-size:29px;margin:6px 0 4px;letter-spacing:-.5px}
.page-heading p{color:var(--muted);margin:0}
.date-chip{background:var(--surface);border:1px solid var(--line);padding:9px 14px;border-radius:var(--r-sm);color:var(--muted);font-size:12.5px;box-shadow:var(--card-sh)}

/* ---------- cartoes / metricas ---------- */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.metric,.panel,.table-card,.form-card,.chart-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--card-sh)
}
.metric{position:relative;padding:20px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.metric::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--blue-strong),var(--blue))}
.metric span,.metric small{display:block;color:var(--muted);font-size:12px;font-weight:600}
.metric strong{display:block;font-size:32px;font-weight:800;letter-spacing:-1px;margin:8px 0 2px;line-height:1}
.metric small{font-weight:500;margin-top:2px}
.metric-button{text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.metric-button:hover,.metric:hover{transform:translateY(-3px);box-shadow:var(--card-sh-h);border-color:var(--blue)}

.panel{margin-top:20px;padding:20px;display:flex;gap:16px;align-items:center}
.panel h2{margin:0 0 5px;font-size:17px}
.panel p{margin:0;color:var(--muted)}
.panel-icon{width:42px;height:42px;background:var(--ok-soft);color:var(--ok-ink);border-radius:50%;display:grid;place-items:center}

/* ---------- botoes ---------- */
.btn-primary,.btn-secondary{border:0;border-radius:var(--r-sm);padding:12px 18px;font-weight:700;cursor:pointer;transition:all .15s ease}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 18px #246bfd33}
.btn-primary:hover:not(:disabled){background:var(--blue-ink);transform:translateY(-1px);box-shadow:0 10px 24px #246bfd44}
.btn-primary.compact,.btn-secondary.compact{padding:10px 14px}
.btn-secondary{background:var(--surface-2);color:var(--text-2);border:1px solid var(--line)}
.btn-secondary:hover:not(:disabled){border-color:var(--blue);color:var(--blue-ink)}
.btn-link{background:none;border:0;color:var(--blue-ink);cursor:pointer;font-weight:600}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.55;cursor:not-allowed}

/* ---------- tabelas ---------- */
.table-card{overflow:hidden}
.table-tools{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;gap:12px;flex-wrap:wrap}
.table-tools input{border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:10px 12px;border-radius:var(--r-sm);width:270px}
.table-responsive{overflow:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line);font-size:13px}
th{color:var(--muted);font-size:10px;letter-spacing:.8px;text-transform:uppercase;background:var(--surface-2);font-weight:700}
td strong,td small{display:block}
td small{color:var(--muted);margin-top:4px}
tbody tr{transition:background .13s ease}
tbody tr:hover{background:var(--surface-2)}

/* ---------- selos ---------- */
.badge{padding:5px 11px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--ok-soft);color:var(--ok-ink)}
.badge.off{background:var(--crit-soft);color:var(--crit-ink)}
.badge.warn{background:var(--warn-soft);color:var(--warn-ink);font-weight:700}
.badge.info{background:var(--blue-soft);color:var(--blue-ink)}

/* ---------- formularios ---------- */
.form-card{padding:26px;max-width:900px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.span-2{grid-column:span 2}
.field label{display:block;font-size:12px;font-weight:700;margin-bottom:7px;color:var(--text-2)}
.field input,.field select,.field textarea,
.form-card textarea,.form-card>select,.form-card>input,.company-form .field textarea{
  width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-sm);padding:12px 13px
}
.field input:focus,.field select:focus,.field textarea:focus,
.filter-grid input:focus,.filter-grid select:focus,.table-tools input:focus{
  outline:none;border-color:var(--blue);box-shadow:var(--ring)
}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.form-card textarea{display:block;min-height:100px;margin:8px 0 14px}
.form-card>label{display:block;margin:12px 0 6px;font-size:12px;font-weight:700}
.company-form h2{font-size:15px;margin:24px 0 14px;border-bottom:1px solid var(--line);padding-bottom:9px}
.company-form h2:first-child{margin-top:0}

/* ---------- avisos ---------- */
.alert-error{background:var(--crit-soft);color:var(--crit-ink);padding:11px 13px;border-radius:var(--r-sm);margin:14px 0;font-size:13px}
.alert-success{background:var(--ok-soft);color:var(--ok-ink);padding:11px 13px;border-radius:var(--r-sm);margin:14px 0;font-size:13px}

/* ---------- login ---------- */
.login-shell{position:relative;min-height:100vh;display:grid;place-items:center;padding:25px;
  background:radial-gradient(circle at 20% 10%,#1e416d 0,transparent 35%),linear-gradient(135deg,#071426,#102847)}
.login-content{display:grid;width:100%;place-items:center}
.login-card{background:var(--surface);width:min(430px,100%);border-radius:18px;padding:38px;box-shadow:0 25px 70px #0008}
.login-brand{margin-bottom:30px}
.login-card h1{font-size:28px;margin:8px 0}
.login-card>p{color:var(--muted);margin:0 0 25px}
.login-card .field{margin-bottom:16px}
.login-card .btn-primary{width:100%;margin-top:8px}
.login-card .brand-mark{flex:none}
.security-note{display:block;text-align:center;color:var(--muted);margin-top:22px}
.login-footer{position:absolute;bottom:20px;padding:0 16px;color:#c4cfde;font-size:11px;text-align:center}

/* ---------- rodape / erro ---------- */
.main-area{display:flex;min-height:100vh;flex-direction:column}
.content{width:100%;flex:1}
.app-footer{padding:4px 24px 20px;color:var(--muted);font-size:11px;text-align:center}
#blazor-error-ui{display:none;position:fixed;bottom:0;background:#fff3cd;color:#5b4a00;width:100%;padding:12px;z-index:999}

/* ---------- dashboard ---------- */
.dashboard-metrics{grid-template-columns:repeat(5,1fr)}
.dashboard-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;margin-top:20px}
.chart-card{padding:22px}
.chart-card h2,.card-title{font-size:16px;margin:0 0 20px}
.bar-chart{height:250px;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid var(--line);padding-top:10px}
.bar-item{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.bar-item strong,.bar-item small{font-size:10.5px;color:var(--muted)}
.bar-item strong{color:var(--text-2);font-weight:700}
.bar{width:66%;min-height:4px;background:linear-gradient(180deg,#5b9bf0,var(--blue));border-radius:5px 5px 2px 2px;box-shadow:0 6px 14px #246bfd26;transition:filter .15s ease,transform .15s ease}
.bar-item:hover .bar{filter:brightness(1.07);transform:scaleY(1.02);transform-origin:bottom}
.clickable{cursor:pointer}
.clickable:hover{background:var(--surface-2)}

/* ---------- filtros / paginacao / detalhe ---------- */
.filter-grid{padding:16px;display:grid;grid-template-columns:2fr repeat(5,1fr);gap:10px;border-bottom:1px solid var(--line)}
.filter-grid input,.filter-grid select{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:var(--r-sm);padding:10px;min-width:0}
.pagination,.action-row{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px}
.detail-grid>div{padding:14px;background:var(--sunken);border:1px solid var(--line-2);border-radius:10px}
.detail-grid small,.detail-grid strong{display:block}
.detail-grid small{color:var(--muted);margin-bottom:5px}
.wide-card{max-width:1200px}
.danger-text{color:var(--crit-ink)!important;font-weight:700}
.expired-preview{border:2px solid var(--crit);padding:12px;border-radius:10px;background:var(--crit-soft)}

/* ---------- feedback ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.sidebar nav a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}
.btn-primary,.btn-secondary,.btn-link,.metric-button,.tema-btn{transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:mc-spin .7s linear infinite;vertical-align:middle}
@keyframes mc-spin{to{transform:rotate(360deg)}}
.state-msg{padding:34px;text-align:center;color:var(--muted);font-size:14px}

/* ---------- portais ---------- */
.portal-busca{max-width:430px}
.portal-secao{margin-top:32px}
.portal-secao-topo{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:6px}
.portal-secao-topo h2{margin:0;font-size:18px}
.portal-secao>p{color:var(--muted);font-size:13.5px;margin:0 0 16px;max-width:78ch;line-height:1.55}
.portal-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.portal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--card-sh);padding:20px;display:flex;flex-direction:column;gap:11px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.portal-card:hover{transform:translateY(-3px);box-shadow:var(--card-sh-h);border-color:var(--blue)}
.portal-topo{display:flex;align-items:center;gap:13px}
.portal-icone{position:relative;width:46px;height:46px;flex:none;border-radius:12px;overflow:hidden;display:grid;place-items:center;box-shadow:0 6px 16px #1b345214}
.portal-icone span{color:#fff;font-weight:800;font-size:13px;letter-spacing:.3px}
.portal-icone img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:7px}
.portal-nome{font-weight:700;font-size:15px;line-height:1.3}
.portal-orgao{color:var(--muted);font-size:12px;margin-top:3px;line-height:1.4}
.portal-desc{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2);flex:1}
.portal-url{font-size:11.5px;color:var(--muted);word-break:break-all}
.portal-acoes{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:2px}
.portal-abrir{background:var(--blue);color:#fff;border-radius:var(--r-sm);padding:10px 15px;font-weight:700;font-size:13px;display:inline-block}
.portal-abrir:hover{background:var(--blue-ink)}
.portal-embreve{font-size:11.5px;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-sm);padding:9px 11px}

/* ---------- responsivo ---------- */
@media(max-width:1000px){.dashboard-metrics{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.filter-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){
  .sidebar{width:74px;padding:22px 10px}
  .brand{padding:0 6px 25px}
  .brand>div:last-child,.sidebar nav a span:not(.nav-label),.nav-label,.sidebar-footer{display:none}
  .sidebar nav a{justify-content:center;font-size:18px}
  .main-area{margin-left:74px;width:calc(100% - 74px)}
  .content{padding:16px}.topbar{padding:0 20px}
  .metric-grid,.dashboard-metrics,.filter-grid,.detail-grid,.form-grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .page-heading{align-items:flex-start;gap:15px;flex-direction:column}
  .table-tools{flex-wrap:wrap}.table-tools input{width:100%}.pagination{flex-wrap:wrap}
  .portal-grade{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* menu lateral rolavel -- sem isto o ultimo item do menu (Auditoria) fica
   escondido embaixo quando a lista passa da altura da tela (preservado do servidor) */
.sidebar{display:flex;flex-direction:column;overflow:hidden}
.sidebar .brand{flex:none}
.sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar nav::-webkit-scrollbar-thumb{background:#2a3f60;border-radius:3px}
.sidebar nav::-webkit-scrollbar-thumb:hover{background:#3b5580}
.sidebar-footer{position:static;bottom:auto;flex:none;padding-top:14px}

/* ---------- listas suspensas legiveis nos dois temas ----------
   A listinha que abre ao clicar num <select> e desenhada pelo NAVEGADOR,
   fora da pagina. Ela nao herda o fundo do formulario: no tema escuro o
   texto claro caia num fundo branco e sumia. A cor tem de ser dita no
   proprio <option>. */
select{color:var(--text);background:var(--surface-2)}
select option,select optgroup{background:#13233c;color:#eaf1fb}
html[data-tema="claro"] select option,html[data-tema="claro"] select optgroup{background:#ffffff;color:#0f1b2e}