/* =========================================================
   IDMIS — Office of the Data Protection Commissioner (ODPC)
   Design tokens
   ========================================================= */
:root{
  /* ODPC brand: the official mark is a padlock rendered in graduated shades
     of blue, so the palette below stays within that blue family — an
     indigo primary, a deep royal accent, and a bright sky-cyan highlight —
     rather than introducing an unrelated brand color. */
  --odpc-navy:        #2E3191;
  --odpc-navy-700:     #20236D;
  --odpc-navy-600:     #272A7E;
  --odpc-teal:         #00ADEE;
  --odpc-teal-600:     #0091C7;
  --odpc-teal-100:     #E1F5FC;
  --odpc-gold:         #1B3B8C;
  --odpc-gold-600:     #15306F;
  --odpc-ink:          #1B2430;
  --odpc-slate:        #5B6B7B;
  --odpc-slate-200:    #DDE4EA;
  --odpc-bg:           #F5F7FA;
  --odpc-card:         #FFFFFF;
  --odpc-line:         #E4E9EE;
  --odpc-danger:       #B3261E;
  --odpc-warn:         #B07F2C;
  --odpc-ok:           #0F766E;
  --odpc-radius:       10px;
  --odpc-radius-lg:    16px;
  --odpc-shadow:       0 1px 2px rgba(10,37,64,.06), 0 4px 16px rgba(10,37,64,.06);
  --odpc-font-display: 'Fraunces', Georgia, serif;
  --odpc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --odpc-font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--odpc-font-body);
  background:var(--odpc-bg);
  color:var(--odpc-ink);
  font-size:15px;
  line-height:1.55;
}
h1,h2,h3,h4,.font-display{ font-family:var(--odpc-font-display); }
.mono{ font-family:var(--odpc-font-mono); letter-spacing:.02em; }
a{ color:var(--odpc-teal); text-decoration:none; }
a:hover{ color:var(--odpc-teal-600); }
:focus-visible{ outline:3px solid var(--odpc-teal); outline-offset:2px; }

/* ---------- Crest / wordmark ---------- */
.odpc-crest{
  width:38px; height:38px; border-radius:9px;
  background:linear-gradient(155deg, var(--odpc-navy) 0%, var(--odpc-teal) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--odpc-font-display); font-weight:700; font-size:17px;
  flex:0 0 auto;
  box-shadow:0 2px 6px rgba(10,37,64,.25);
}
.odpc-wordmark{ display:flex; align-items:center; gap:.65rem; }
.odpc-wordmark .name{ font-family:var(--odpc-font-display); font-weight:700; font-size:1.05rem; color:var(--odpc-navy); line-height:1.1; }
.odpc-wordmark .tag{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--odpc-slate); }

/* ---------- Top public navbar ---------- */
.public-topbar{
  background:var(--odpc-navy); color:#fff; font-size:.78rem; padding:.35rem 0;
  letter-spacing:.01em;
}
.public-topbar a{ color:#CFE3DE; }
.public-navbar{ background:#fff; border-bottom:1px solid var(--odpc-line); }
.public-navbar .nav-link{ color:var(--odpc-navy); font-weight:500; }
.public-navbar .nav-link.active{ color:var(--odpc-teal); font-weight:600; }

/* ---------- Buttons ---------- */
.btn-odpc{
  background:var(--odpc-teal); border-color:var(--odpc-teal); color:#fff;
  font-weight:600;
}
.btn-odpc:hover{ background:var(--odpc-teal-600); border-color:var(--odpc-teal-600); color:#fff; }
.btn-odpc-outline{
  background:transparent; border:1.5px solid var(--odpc-teal); color:var(--odpc-teal); font-weight:600;
}
.btn-odpc-outline:hover{ background:var(--odpc-teal-100); color:var(--odpc-teal-600); }
.btn-gold{
  background:var(--odpc-gold); border-color:var(--odpc-gold); color:#fff; font-weight:700;
}
.btn-gold:hover{ background:var(--odpc-gold-600); border-color:var(--odpc-gold-600); color:#fff; }
.btn-navy{ background:var(--odpc-navy); border-color:var(--odpc-navy); color:#fff; font-weight:600; }
.btn-navy:hover{ background:var(--odpc-navy-600); border-color:var(--odpc-navy-600); color:#fff; }

/* ---------- Hero ---------- */
.odpc-hero{
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(0,173,238,.22), transparent 60%),
    linear-gradient(165deg, var(--odpc-navy) 0%, #0C2E4E 55%, var(--odpc-teal-600) 130%);
  color:#fff;
  position:relative; overflow:hidden;
}
.odpc-hero .grid-overlay{
  position:absolute; inset:0; opacity:.08;
  background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
}
.odpc-hero h1{ font-weight:700; }
.odpc-stat{ border-left:2px solid rgba(255,255,255,.25); padding-left:.9rem; }
.odpc-stat .num{ font-family:var(--odpc-font-display); font-size:1.9rem; font-weight:700; color:var(--odpc-teal); line-height:1; }
.odpc-stat .lbl{ font-size:.74rem; color:#CBD8E2; text-transform:uppercase; letter-spacing:.05em; }

/* ---------- Cards ---------- */
.card-odpc{
  background:var(--odpc-card); border:1px solid var(--odpc-line); border-radius:var(--odpc-radius-lg);
  box-shadow:var(--odpc-shadow);
}
.module-card{
  border-radius:var(--odpc-radius-lg); border:1px solid var(--odpc-line); background:#fff;
  padding:1.5rem; height:100%; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.module-card:hover{ transform:translateY(-3px); box-shadow:var(--odpc-shadow); border-color:var(--odpc-teal); }
.module-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--odpc-teal-100); color:var(--odpc-teal); font-size:1.25rem; margin-bottom:.85rem;
}
.module-code{
  font-family:var(--odpc-font-mono); font-size:.68rem; color:var(--odpc-teal-600); letter-spacing:.08em;
}

/* ---------- App shell (entity / staff portals) ---------- */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width:248px; flex:0 0 248px; background:var(--odpc-navy); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.app-sidebar .brand{ padding:1.1rem 1.1rem .9rem; border-bottom:1px solid rgba(255,255,255,.1); }
.app-sidebar .brand .name{ color:#fff; }
.app-sidebar .brand .tag{ color:#9FB4C6; }
.app-sidebar .portal-pill{
  display:inline-block; font-size:.62rem; letter-spacing:.07em; text-transform:uppercase;
  background:rgba(0,173,238,.18); color:var(--odpc-teal); padding:.15rem .5rem; border-radius:20px; margin-top:.5rem;
}
.app-sidebar .nav-section-title{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:#7C93A8;
  padding:1rem 1.1rem .35rem;
}
.app-sidebar .nav-link{
  color:#CFE0EC; padding:.55rem 1.1rem; font-size:.86rem; display:flex; align-items:center; gap:.6rem;
  border-left:3px solid transparent;
}
.app-sidebar .nav-link i{ font-size:1rem; width:18px; text-align:center; opacity:.85; }
.app-sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.app-sidebar .nav-link.active{
  background:rgba(0,173,238,.22); color:#fff; border-left-color:var(--odpc-teal); font-weight:600;
}
.app-sidebar .nav-badge{
  margin-left:auto; background:var(--odpc-teal); color:#fff; font-size:.65rem; font-weight:700;
  padding:.05rem .42rem; border-radius:20px;
}
.app-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.app-topbar{
  background:#fff; border-bottom:1px solid var(--odpc-line); padding:.7rem 1.5rem;
  display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:20;
}
.app-content{ padding:1.6rem; flex:1 1 auto; }
.breadcrumb-odpc{ font-size:.78rem; color:var(--odpc-slate); }
.page-title{ font-family:var(--odpc-font-display); font-weight:700; color:var(--odpc-navy); }

@media (max-width: 991.98px){
  .app-sidebar{ position:fixed; left:0; top:0; z-index:1040; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.3);}
  .app-sidebar.open{ transform:translateX(0); }
  .sidebar-backdrop{ position:fixed; inset:0; background:rgba(10,37,64,.45); z-index:1035; display:none; }
  .sidebar-backdrop.show{ display:block; }
}

/* ---------- KPI tiles ---------- */
.kpi-tile{
  background:#fff; border:1px solid var(--odpc-line); border-radius:var(--odpc-radius-lg);
  padding:1.1rem 1.25rem; height:100%;
}
.kpi-tile .kpi-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.kpi-tile .kpi-num{ font-family:var(--odpc-font-display); font-weight:700; font-size:1.6rem; color:var(--odpc-navy); }
.kpi-tile .kpi-lbl{ font-size:.76rem; color:var(--odpc-slate); }
.kpi-tile .kpi-delta{ font-size:.72rem; font-weight:600; }
.bg-teal-soft{ background:var(--odpc-teal-100); color:var(--odpc-teal); }
.bg-gold-soft{ background:#E7EBFA; color:var(--odpc-gold-600); }
.bg-navy-soft{ background:#E7ECF2; color:var(--odpc-navy); }
.bg-danger-soft{ background:#FBE9E8; color:var(--odpc-danger); }

/* ---------- Status badges ---------- */
.badge-status{ font-weight:600; font-size:.7rem; padding:.32rem .6rem; border-radius:20px; letter-spacing:.01em; }
.badge-approved, .badge-resolved, .badge-active, .badge-issued, .badge-closed{ background:#E3F3F1; color:#0D685F; }
.badge-pending, .badge-review, .badge-inprogress{ background:#FBF1DF; color:#B07F2C; }
.badge-rejected, .badge-overdue, .badge-declined{ background:#FBE9E8; color:#B3261E; }
.badge-draft, .badge-new{ background:#E7ECF2; color:#3D5266; }

/* ---------- Forms ---------- */
.form-label{ font-weight:600; font-size:.84rem; color:var(--odpc-navy); }
.form-section-title{
  font-family:var(--odpc-font-display); font-weight:700; color:var(--odpc-navy); font-size:1.05rem;
  border-bottom:2px solid var(--odpc-line); padding-bottom:.5rem; margin-bottom:1.1rem;
}
.form-control:focus, .form-select:focus{ border-color:var(--odpc-teal); box-shadow:0 0 0 .2rem rgba(15,118,110,.15); }
.required:after{ content:" *"; color:var(--odpc-danger); }
.help-text{ font-size:.78rem; color:var(--odpc-slate); }

/* ---------- Wizard / stepper ---------- */
.wizard-steps{ display:flex; flex-wrap:wrap; gap:0; margin-bottom:2rem; }
.wizard-step{
  flex:1 1 0; text-align:center; position:relative; padding-top:2.6rem; min-width:90px;
}
.wizard-step .circle{
  width:34px; height:34px; border-radius:50%; background:#fff; border:2px solid var(--odpc-slate-200);
  color:var(--odpc-slate); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
}
.wizard-step .lbl{ font-size:.72rem; color:var(--odpc-slate); font-weight:600; }
.wizard-step:before{
  content:""; position:absolute; top:17px; left:0; right:50%; height:2px; background:var(--odpc-slate-200); z-index:1;
}
.wizard-step:first-child:before{ display:none; }
.wizard-step.done .circle{ background:var(--odpc-teal); border-color:var(--odpc-teal); color:#fff; }
.wizard-step.done .lbl{ color:var(--odpc-teal-600); }
.wizard-step.done:before{ background:var(--odpc-teal); }
.wizard-step.active .circle{ border-color:var(--odpc-gold); color:var(--odpc-gold-600); }
.wizard-step.active .lbl{ color:var(--odpc-navy); }
.wizard-pane{ display:none; }
.wizard-pane.show{ display:block; }

/* ---------- Tables ---------- */
.table-odpc thead th{
  background:#F0F3F6; color:var(--odpc-navy); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:none; font-weight:700; white-space:nowrap;
}
.table-odpc td{ vertical-align:middle; font-size:.86rem; }
.table-odpc tbody tr:hover{ background:#FAFBFC; }

/* ---------- Timeline ---------- */
.odpc-timeline{ list-style:none; padding-left:0; margin:0; position:relative; }
.odpc-timeline:before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--odpc-line); }
.odpc-timeline li{ position:relative; padding-left:2.1rem; padding-bottom:1.3rem; }
.odpc-timeline li:last-child{ padding-bottom:0; }
.odpc-timeline .dot{
  position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--odpc-teal); display:flex; align-items:center; justify-content:center;
}
.odpc-timeline .dot:after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--odpc-teal); }
.odpc-timeline li.pending .dot{ border-color:var(--odpc-slate-200); }
.odpc-timeline li.pending .dot:after{ background:var(--odpc-slate-200); }
.odpc-timeline .t-title{ font-weight:600; font-size:.86rem; color:var(--odpc-navy); }
.odpc-timeline .t-meta{ font-size:.74rem; color:var(--odpc-slate); }

/* ---------- Misc ---------- */
.section-eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--odpc-teal);
}
.footer-odpc{ background:var(--odpc-navy); color:#B9C9D6; }
.footer-odpc a{ color:#E3ECF3; }
.divider-gold{ height:3px; width:54px; background:var(--odpc-teal); border-radius:3px; }
.qr-box{
  width:140px; height:140px; border:1px dashed var(--odpc-slate-200); border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:var(--odpc-slate); font-size:2.2rem; background:#fff;
}
.score-ring{ position:relative; width:140px; height:140px; }
.score-ring .score-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.score-ring .score-num .v{ font-family:var(--odpc-font-display); font-weight:700; font-size:1.9rem; color:var(--odpc-navy); }
.score-ring .score-num .l{ font-size:.65rem; color:var(--odpc-slate); text-transform:uppercase; letter-spacing:.05em; }

.upload-box{
  border:1.5px dashed var(--odpc-slate-200); border-radius:var(--odpc-radius); padding:1.5rem; text-align:center; background:#FBFCFD;
}
.upload-box i{ font-size:1.6rem; color:var(--odpc-teal); }

.list-clean{ list-style:none; padding-left:0; margin:0; }
.avatar-circle{
  width:34px; height:34px; border-radius:50%; background:var(--odpc-navy); color:#fff; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:.78rem; flex:0 0 auto;
}