/* =========================================================
   Civera Enterprise Dark (Regulatory-grade)
   - Strong card separation, glass headers, neon accents
   - Readable hierarchy (no "black carpet")
   ========================================================= */

:root{
  --bg0:#070B14;
  --bg1:#0B1020;
  --bg2:#0B1226;

  --panel0:rgba(10,18,38,.78);
  --panel1:rgba(15,27,54,.72);
  --panel2:rgba(12,21,44,.86);

  --border:rgba(148,163,184,.18);
  --border2:rgba(56,189,248,.20);

  --text:rgba(226,232,240,.94);
  --muted:rgba(148,163,184,.86);

  --brand:#38BDF8;
  --brand2:#60A5FA;

  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;

  --shadow1: 0 10px 26px rgba(0,0,0,.55);
  --shadow2: 0 18px 60px rgba(0,0,0,.55);

  --ring: 0 0 0 4px rgba(56,189,248,.12);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;

  /* layered background */
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(56,189,248,.22), transparent 55%),
    radial-gradient(900px 560px at 90% 0%, rgba(96,165,250,.18), transparent 52%),
    radial-gradient(700px 520px at 50% 110%, rgba(56,189,248,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg2));
}

a{color:inherit; text-decoration:none}
code,.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.container{max-width:1240px; margin:0 auto; padding:20px}

/* ---------------- Top bar (glass) ---------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(56,189,248,.10);
  background: rgba(7,11,20,.58);
  backdrop-filter: blur(14px);
}
.topbar:after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.35), transparent);
  pointer-events:none;
}
.topbar-left{display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{
  width:300px; height:60px;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.25));
}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-name{font-weight:900; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--muted)}

.nav{display:flex; gap:8px}
.nav-link{
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--muted);
  transition: .12s ease;
}
.nav-link:hover{
  border-color: rgba(56,189,248,.20);
  color: var(--text);
  box-shadow: var(--ring);
}

.topbar-right{display:flex; align-items:center; gap:10px}

/* ------------- Base components ------------- */
.footer{padding:18px; text-align:center; color:var(--muted)}

.h1{margin:0; font-size:26px; letter-spacing:.2px}
.muted{color:var(--muted)}
.right{text-align:right}

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; padding:6px 0 14px;
}
.page-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.card{
  background: linear-gradient(180deg, var(--panel1), var(--panel0));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow1);
}
.card:hover{border-color: rgba(56,189,248,.14)}
.panel{padding:16px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.panel-title{font-weight:900}
.panel-actions{margin-top:12px}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  background: rgba(2,6,23,.18);
}
.pill.link{border-color: rgba(56,189,248,.28); color: var(--brand)}
.pill.link:hover{box-shadow: var(--ring); background: rgba(56,189,248,.06)}
.pill.subtle{color:var(--muted)}
.pill.ok{border-color: rgba(34,197,94,.28); color: var(--ok)}
.pill.warn{border-color: rgba(245,158,11,.28); color: var(--warn)}
.pill.danger{border-color: rgba(239,68,68,.28); color: var(--danger)}

/* ---------------- KPI cards ---------------- */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:12px;
  margin: 10px 0 16px;
}
.kpi-grid-3{grid-template-columns: repeat(3, minmax(0, 1fr));}

.kpi{
  padding:16px;
  position:relative;
  overflow:hidden;
}
.kpi:before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: var(--radius);
  background: radial-gradient(380px 200px at 20% 0%, rgba(56,189,248,.12), transparent 60%);
  pointer-events:none;
}
.kpi-label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.10em;
}
.kpi-value{
  font-size:24px;
  font-weight:950;
  margin-top:10px;
  letter-spacing:.2px;
}
.kpi-value.brand{
  color: var(--brand);
  text-shadow: 0 0 16px rgba(56,189,248,.25);
}
.kpi-unit{font-size:14px; color:var(--muted); margin-left:4px}
.kpi-sub{margin-top:8px; font-size:12px}

.ok{color:var(--ok)}
.warn{color:var(--warn)}
.danger{color:var(--danger)}

/* ---------------- Maturity badges ---------------- */
.badge{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background: rgba(2,6,23,.20);
  color:var(--muted);
}
.m-advanced{color: var(--ok); border-color: rgba(34,197,94,.30)}
.m-managed{color: var(--brand); border-color: rgba(56,189,248,.30)}
.m-developing{color: var(--warn); border-color: rgba(245,158,11,.30)}
.m-basic{color: var(--danger); border-color: rgba(239,68,68,.30)}

/* --------------- Sections grid --------------- */
.sections-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.section-card{
  border:1px solid rgba(148,163,184,.16);
  border-radius: var(--radius);
  padding:16px;
  background: linear-gradient(180deg, rgba(12,21,44,.62), rgba(9,16,34,.78));
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.section-card:hover{
  transform: translateY(-3px);
  border-color: rgba(56,189,248,.30);
  box-shadow: var(--shadow2), var(--ring);
  background: linear-gradient(180deg, rgba(14,30,60,.62), rgba(9,16,34,.82));
}
.section-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.section-code{font-weight:950; letter-spacing:.08em; color: rgba(226,232,240,.96)}
.section-title{
  margin-top:10px;
  font-weight:700;
  color: rgba(226,232,240,.92);
  min-height:42px;
}
.section-metrics{display:flex; gap:14px; margin-top:12px; flex-wrap:wrap}
.metric-label{font-size:11px; color:var(--muted)}
.metric-value{font-weight:900}
.metric-value.danger{color:var(--danger)}

/* ---------------- Tables ---------------- */
.table-wrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.14);
  background: rgba(2,6,23,.22);
}
.table{width:100%; border-collapse:collapse; font-size:13px}
.table th, .table td{
  padding:11px 10px;
  border-bottom:1px solid rgba(148,163,184,.10);
  vertical-align:top;
}
.table th{
  color: rgba(148,163,184,.92);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  background: rgba(2,6,23,.34);
}
.table tr:hover td{background: rgba(56,189,248,.05)}
.row-danger td{background: rgba(239,68,68,.06)}
.link{color:var(--brand)}
.link:hover{text-decoration:underline}

/* ------------- Run Assessment inline form ------------- */
.run-form{
  display:flex; gap:10px; align-items:center;
  padding:8px 10px;
  border:1px solid rgba(56,189,248,.16);
  border-radius:999px;
  background: rgba(2,6,23,.22);
}
.run-input{
  width:120px;
  background: transparent;
  border:none;
  outline:none;
  color: var(--text);
  font-size:13px;
}
.run-input::placeholder{color: rgba(148,163,184,.65)}

/* ---------------- Empty state ---------------- */
.card.empty{padding:16px}
.empty-title{font-weight:950; font-size:16px; margin-bottom:6px}

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px){
  .kpi-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .sections-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 720px){
  .sections-grid{grid-template-columns: 1fr;}
  .topbar{flex-direction:column; align-items:flex-start; gap:10px}
  .topbar-right{width:100%; justify-content:space-between}
  .run-input{width:90px}
}

/* =====================================================
   LOGIN – Enterprise Civera
   ===================================================== */

.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(56,189,248,.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(96,165,250,.06), transparent 40%),
    var(--bg0);
}

.login-panel{
  width:420px;
  background:var(--panel2);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:40px;
  box-shadow:var(--shadow2);
  backdrop-filter:blur(10px);
}

.login-brand{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:30px;
}

.login-logo{
  width:48px;
  height:48px;
}

.login-title{
  font-size:20px;
  font-weight:600;
  color:var(--text);
}

.login-subtitle{
  font-size:13px;
  color:var(--muted);
}

.login-alert{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35);
  color:var(--danger);
  padding:10px 14px;
  border-radius:10px;
  margin-bottom:20px;
  font-size:13px;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.form-group label{
  font-size:13px;
  color:var(--muted);
}

.form-input{
  background:var(--bg1);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  color:var(--text);
  font-size:14px;
  transition:all .2s ease;
}

.form-input:focus{
  outline:none;
  border:1px solid var(--brand);
  box-shadow:var(--ring);
}

.login-button{
  margin-top:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border:none;
  border-radius:12px;
  padding:12px;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:all .2s ease;
}

.login-button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(56,189,248,.35);
}

.login-footer{
  margin-top:28px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}