/* ============================================================
   Judge Mwaanza's CAS · Chambers Workspace — main stylesheet
   ============================================================ */

:root{
  --eggshell:#FBF7F0;
  --paper:#FFFDFA;
  --beige:#EDE1CF;
  --beige-deep:#D9C4A4;
  --pink:#F0D2D3;
  --pink-deep:#D98E96;
  --lilac:#E1D2EF;
  --lilac-mid:#C7AEDD;
  --lilac-deep:#8E72B5;
  --ink:#3C3548;
  --ink-soft:#766C84;
  --ink-faint:#A89DB6;
  --line:#E8DCEE;
  --line-soft:#F1E7DD;
  --good:#9CB593;
  --shadow-sm:0 2px 10px -4px rgba(60,53,72,0.12);
  --shadow-md:0 12px 30px -10px rgba(60,53,72,0.22);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --serif:'Fraunces',serif;
  --sans:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--eggshell);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
  background-image:
    radial-gradient(circle at 8% 4%, rgba(225,210,239,0.5), transparent 40%),
    radial-gradient(circle at 96% 10%, rgba(240,210,211,0.45), transparent 38%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--ink);margin:0;}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:var(--sans);font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;background:var(--paper);width:100%;}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--lilac-deep);outline-offset:2px;}
label{font-size:12.5px;color:var(--ink-soft);font-weight:600;letter-spacing:.02em;text-transform:uppercase;display:block;margin-bottom:5px;}
.field{margin-bottom:14px;}
.mono{font-family:var(--mono);}
.hidden{display:none !important;}
.muted{color:var(--ink-soft);}
::selection{background:var(--lilac-mid);}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:600;transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--lilac-deep);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{box-shadow:var(--shadow-md);}
.btn-soft{background:var(--lilac);color:var(--ink);}
.btn-soft:hover{background:var(--lilac-mid);}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--line-soft);}
.btn-danger{background:transparent;color:var(--pink-deep);border:1px solid var(--pink);}
.btn-danger:hover{background:var(--pink);color:#6b2f36;}
.btn-sm{padding:6px 12px;font-size:12.5px;}
.icon-btn{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);}
.icon-btn:hover{background:var(--line-soft);color:var(--ink);}

/* ---------- red trash button (attachments, etc.) ---------- */
.btn-trash{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid #f2c0c0;
  color:#d92d20;cursor:pointer;transition:background .15s ease, color .15s ease;
}
.btn-trash:hover{background:#d92d20;color:#fff;border-color:#d92d20;}
.btn-trash svg{display:block;}

/* ---------- attachment dropzone ---------- */
.dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;cursor:pointer;
  padding:22px 16px;margin:0;width:100%;
  border:1.5px dashed var(--lilac-mid);border-radius:var(--radius-md);
  background:linear-gradient(var(--paper),var(--eggshell));
  color:var(--ink-soft);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
  margin-bottom: 20px;
}
.dropzone:hover{border-color:var(--lilac-deep);background:var(--paper);box-shadow:var(--shadow-sm);}
.dropzone.dragover{
  border-color:var(--lilac-deep);border-style:solid;
  background:var(--lilac);color:var(--ink);
  transform:translateY(-1px);box-shadow:var(--shadow-md);
}
.dropzone-icon{
  width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lilac);color:var(--lilac-deep);
  transition:background .15s ease, color .15s ease;
}
.dropzone.dragover .dropzone-icon{background:var(--paper);}
.dropzone-text{font-size:13.5px;color:var(--ink);}
.dropzone-text strong{color:var(--lilac-deep);font-weight:600;}
.dropzone-hint{font-size:11.5px;color:var(--ink-faint);letter-spacing:.01em;}

/* ---------- microphone test ---------- */
.mic-test{margin:10px 0 4px;display:flex;flex-direction:column;gap:7px;}
.mic-meter{
  width:100%;height:12px;border-radius:999px;overflow:hidden;
  background:var(--line-soft);border:1px solid var(--line);
}
.mic-meter-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--good),var(--lilac-deep));
  transition:width .06s linear;
}
.mic-test-msg{font-size:12.5px;line-height:1.5;}
.mic-ok{color:var(--good);font-weight:600;}

/* live interim (not-yet-final) transcript text */
.transcript-box .interim{color:var(--ink-faint);font-style:italic;}

/* transcription option toggle (e.g. Identify speakers) */
.tx-opt{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:500;color:var(--ink-soft);
  text-transform:none;letter-spacing:0;margin:0;cursor:pointer;white-space:nowrap;
}
.tx-opt input{width:15px;height:15px;cursor:pointer;}

/* upload/transcribe progress bar */
.tx-progress{
  width:100%;height:10px;border-radius:999px;overflow:hidden;margin-top:10px;
  background:var(--line-soft);border:1px solid var(--line);
}
.tx-progress-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--good),var(--lilac-deep));
  transition:width .15s ease;
}

/* ---------- attachment list ---------- */
.attach-hint{font-size:12px;margin-top:4px;}
.attach-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.attach-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px 9px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);box-shadow:var(--shadow-sm);
}
.attach-row::before{
  content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;
  background:var(--lilac-mid);
}
.attach-name{flex:1;font-size:13px;font-weight:500;word-break:break-word;color:var(--ink);text-decoration:none;}
a.attach-name:hover{text-decoration:underline;color:var(--lilac-deep);}
.attach-size{font-size:12px;white-space:nowrap;color:var(--ink-faint);}

/* ---------- seal signature element ---------- */
.seal{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;}
.seal svg{display:block;}

/* ---------- landing screen ---------- */
#landingScreen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;overflow-y:auto;background:
  radial-gradient(circle at 12% 12%, rgba(225,210,239,0.65), transparent 42%),
  radial-gradient(circle at 90% 18%, rgba(240,210,211,0.55), transparent 40%),
  radial-gradient(circle at 50% 95%, rgba(217,196,164,0.4), transparent 45%),
  var(--eggshell);}
.landing-wrap{max-width:620px;width:100%;text-align:center;animation:riseIn .6s ease both;padding:20px 0;}
.landing-seal{margin:0 auto 22px;}
.landing-wrap .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac-deep);font-weight:700;}
.landing-wrap h1{font-size:clamp(28px,5vw,42px);line-height:1.18;margin-top:14px;}
.landing-wrap .sub{color:var(--ink-soft);font-size:15px;max-width:460px;margin:16px auto 0;line-height:1.6;}
.landing-features{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:34px 0 38px;}
.landing-feature{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:14px 18px;width:170px;transition:transform .15s ease, box-shadow .15s ease;}
.landing-feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.landing-feature .ic{font-size:20px;margin-bottom:6px;}
.landing-feature .t{font-family:var(--serif);font-weight:600;font-size:14px;margin-bottom:3px;}
.landing-feature .d{font-size:12px;color:var(--ink-soft);line-height:1.45;}
#landingEnter{font-size:14.5px;padding:13px 30px;}
.landing-foot{margin-top:30px;font-size:11.5px;color:var(--ink-faint);}

/* ---------- login / setup screen ---------- */
#loginScreen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;overflow-y:auto;background:
  radial-gradient(circle at 20% 20%, rgba(225,210,239,0.6), transparent 45%),
  radial-gradient(circle at 80% 85%, rgba(240,210,211,0.55), transparent 45%),
  var(--eggshell);}
.login-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:44px 40px;max-width:400px;width:100%;text-align:center;animation:riseIn .5s ease both;}
@keyframes riseIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.login-card h1{font-size:22px;margin-top:18px;}
.login-card .eyebrow{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac-deep);font-weight:700;margin-top:4px;}
.login-card .sub{color:var(--ink-soft);font-size:13.5px;margin-top:6px;margin-bottom:26px;}
.login-card .field{text-align:left;}
.pin-row{display:flex;gap:8px;justify-content:center;margin-bottom:20px;}
.pin-row input{width:42px;height:50px;text-align:center;font-size:20px;font-family:var(--mono);}
.login-error{color:var(--pink-deep);font-size:13px;margin-bottom:10px;min-height:18px;}
.login-link{font-size:12.5px;color:var(--lilac-deep);cursor:pointer;text-decoration:underline;background:none;border:none;padding:0;}
.otp-dev-hint{font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--line-soft);border-radius:var(--radius-sm);padding:8px 10px;margin-bottom:12px;}
/* password field with show/hide eye toggle */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:42px;}
.pw-toggle{position:absolute;top:0;right:0;height:100%;width:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--ink-soft);}
.pw-toggle:hover{color:var(--ink);}
.pw-toggle:focus-visible{outline:2px solid var(--lilac-deep);outline-offset:-2px;border-radius:var(--radius-sm);}
.pw-toggle svg{width:18px;height:18px;display:block;}

/* ---------- app shell ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{width:236px;flex-shrink:0;background:linear-gradient(180deg,var(--beige) 0%, var(--eggshell) 100%);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px;position:relative;z-index:10;}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 22px;border-bottom:1px solid var(--line);margin-bottom:14px;}
.brand-text .name{font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1.2;}
.brand-text .court{font-size:11px;color:var(--ink-soft);}
nav.navlist{display:flex;flex-direction:column;gap:3px;flex:1;}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius-sm);text-align:left;font-size:13.8px;font-weight:600;color:var(--ink-soft);transition:background .15s, color .15s;}
.nav-item .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);transition:background .15s;}
.nav-item:hover{background:var(--line-soft);color:var(--ink);}
.nav-item.active{background:var(--paper);color:var(--lilac-deep);box-shadow:var(--shadow-sm);}
.nav-item.active .dot{background:var(--lilac-deep);}
.sidebar-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:10px;}
.judge-chip{display:flex;align-items:center;gap:9px;padding:6px;border-radius:var(--radius-sm);margin-bottom:8px;}
.judge-chip .who .n{font-size:13px;font-weight:700;}
.judge-chip .who .r{font-size:11px;color:var(--ink-soft);}
#lockBtn{width:100%;justify-content:center;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 30px;border-bottom:1px solid var(--line);background:rgba(255,253,250,0.6);backdrop-filter:blur(6px);position:sticky;top:0;z-index:5;}
.topbar h2{font-size:19px;}
.topbar .sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
#menuToggle{display:none;font-size:20px;}
.clock{font-family:var(--mono);font-size:13px;color:var(--ink-soft);text-align:right;}
.clock .d{font-size:11.5px;}

/* ---------- topbar bell ---------- */
.topbar-right{display:flex;align-items:center;gap:18px;}
.bell{position:relative;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);background:transparent;transition:background .15s ease, color .15s ease, transform .15s ease;}
.bell:hover{background:var(--line-soft);color:var(--ink);transform:translateY(-1px);}
.bell.has-due{color:var(--lilac-deep);}
.bell.has-due svg{animation:bellSwing 2.4s ease-in-out infinite;transform-origin:top center;}
.bell-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--pink-deep);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--paper);}
@keyframes bellSwing{0%,88%,100%{transform:rotate(0);}91%{transform:rotate(11deg);}94%{transform:rotate(-9deg);}97%{transform:rotate(5deg);}}

.view{padding:28px 30px 60px;animation:fadeUp .35s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ---------- cards / grid ---------- */
.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow-sm);}
.card h3{font-size:15.5px;display:flex;align-items:center;gap:8px;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.empty{text-align:center;padding:28px 10px;color:var(--ink-soft);}
.empty .big{font-size:28px;margin-bottom:6px;}
.empty p{font-size:13px;max-width:280px;margin:4px auto 12px;}

/* ---------- chips / badges ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.count-chip{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;box-shadow:var(--shadow-sm);transition:transform .15s;}
.count-chip:hover{transform:translateY(-2px);}
.count-chip .num{font-family:var(--serif);font-weight:600;font-size:17px;}
.count-chip .lbl{font-size:11.5px;color:var(--ink-soft);font-weight:600;}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:999px;text-transform:uppercase;}
.badge-high{background:var(--pink);color:#7A3138;}
.badge-medium{background:var(--lilac);color:#5B3E80;}
.badge-low{background:var(--beige);color:#7A5B2A;}
.badge-stage{background:var(--line-soft);color:var(--ink-soft);text-transform:none;font-weight:600;}
.badge-done{background:#E4ECE1;color:#516E48;text-transform:none;}

.milestone{display:flex;align-items:center;gap:13px;padding:12px 8px;border-bottom:1px solid var(--line-soft);cursor:pointer;border-radius:var(--radius-sm);}
.milestone:last-child{border-bottom:none;}
.milestone:hover{background:var(--line-soft);}
.milestone .meta{flex:1;min-width:0;}
.milestone .meta .t1{font-weight:700;font-size:13.8px;}
.milestone .meta .t2{font-size:12px;color:var(--ink-soft);}
.milestone .countdown{font-family:var(--mono);font-size:12px;text-align:right;color:var(--ink-soft);white-space:nowrap;}
.countdown.overdue{color:var(--pink-deep);font-weight:700;}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:0 12px 10px;font-weight:700;border-bottom:1px solid var(--line);}
td{padding:13px 12px;border-bottom:1px solid var(--line-soft);font-size:13.6px;vertical-align:top;}
/* Case registry table sits in a padding:0 card — give the cells extra breathing room */
#caseTable th,#caseTable td{padding-left:18px;padding-right:18px;}
#caseTable th{padding-top:16px;}
#caseTable th:first-child,#caseTable td:first-child{padding-left:26px;}
#caseTable th:last-child,#caseTable td:last-child{padding-right:26px;}
tbody tr{cursor:pointer;transition:background .12s;}
tbody tr:hover{background:var(--line-soft);}
.toolbar{display:flex;gap:10px;margin-bottom:18px;align-items:center;flex-wrap:wrap;}
.toolbar input[type=text], .toolbar input[type=search]{max-width:260px;}
.toolbar .spacer{flex:1;}

/* ---------- stepper ---------- */
.stepper{display:flex;align-items:center;margin:6px 0 4px;flex-wrap:wrap;}
.step{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 6px;border-radius:999px;font-size:12.3px;font-weight:600;color:var(--ink-faint);}
.step .pip{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink-faint);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.step.done{color:var(--ink-soft);}
.step.done .pip{background:var(--lilac);border-color:var(--lilac-mid);color:#5B3E80;}
.step.current{color:var(--lilac-deep);}
.step.current .pip{background:var(--lilac-deep);border-color:var(--lilac-deep);color:#fff;}
.step-line{width:18px;height:2px;background:var(--line);margin:0 2px;}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(60,53,72,0.32);display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;animation:fadeIn .2s ease both;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-panel{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:28px 30px;animation:riseIn .25s ease both;}
.modal-panel.wide{max-width:780px;}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:10px;}
.modal-head h3{font-size:18px;}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;border-top:1px solid var(--line-soft);padding-top:18px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.checklist-item{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line-soft);}
.checklist-item input[type=checkbox]{width:17px;height:17px;flex-shrink:0;}
.checklist-item.checked label{text-decoration:line-through;color:var(--ink-faint);}
.note-entry{padding:10px 0;border-bottom:1px solid var(--line-soft);}
.note-entry .ts{font-family:var(--mono);font-size:11px;color:var(--ink-faint);}

/* ---------- transcription ---------- */
.tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.tab-btn{padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--ink-soft);border-bottom:2px solid transparent;}
.tab-btn.active{color:var(--lilac-deep);border-bottom-color:var(--lilac-deep);}
.speaker-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.speaker-chip{padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;border:1.5px solid var(--line);}
.speaker-chip.active{border-color:var(--lilac-deep);background:var(--lilac);}
.speaker-chip .spk-del{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:7px;margin-right:-3px;border-radius:50%;font-size:13px;line-height:1;color:var(--ink-soft);opacity:.65;vertical-align:middle;}
.speaker-chip .spk-del:hover{opacity:1;background:var(--pink-deep);color:#fff;}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--pink-deep);display:inline-block;margin-right:6px;}
.live-dot.on{animation:pulse 1.2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,142,150,.6);}70%{box-shadow:0 0 0 8px rgba(217,142,150,0);}100%{box-shadow:0 0 0 0 rgba(217,142,150,0);}}
.transcript-box{min-height:200px;max-height:340px;overflow-y:auto;background:var(--eggshell);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;font-size:13.6px;line-height:1.7;white-space:pre-wrap;}
.transcript-box[contenteditable]:focus{outline:none;border-color:var(--lilac-mid);}
.transcript-box .spk{font-weight:700;color:var(--lilac-deep);display:block;margin-top:8px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;}
.saved-row{display:flex;align-items:center;gap:14px;padding:13px 6px;border-bottom:1px solid var(--line-soft);}
.saved-row .mtitle{font-weight:700;font-size:13.6px;}
.saved-row .msnip{font-size:12px;color:var(--ink-soft);max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.recbar{display:flex;gap:10px;align-items:center;margin:14px 0;}
.audio-wrap audio{width:100%;margin:10px 0;}
.speaker-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;}

/* ---------- staff ---------- */
.staff-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 18px;margin-bottom:14px;}
.staff-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.perm-item{display:flex;align-items:center;gap:8px;font-size:12.8px;}
.perm-item input{width:15px;height:15px;}

footer.app-foot{padding:18px 30px 36px;font-size:11.5px;color:var(--ink-faint);text-align:center;}

/* ---------- responsive ---------- */
/* ---------- stat tiles (counters) ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px;}
.stat-tile{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--lilac-mid);border-radius:var(--radius-md);padding:15px 18px;box-shadow:var(--shadow-sm);}
.stat-tile.clickable{cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;}
.stat-tile.clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.stat-tile .n{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1;color:var(--ink);}
.stat-tile .l{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:7px;}
.stat-tile .s{font-size:11px;color:var(--ink-faint);margin-top:2px;}

/* ---------- report tabs ---------- */
.rtabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.rtab{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:13px;font-weight:600;color:var(--ink-soft);transition:transform .15s;}
.rtab:hover{transform:translateY(-1px);}
.rtab.active{background:var(--lilac-deep);color:#fff;border-color:var(--lilac-deep);}

/* ---------- report lists ---------- */
.report-list{display:flex;flex-direction:column;}
.report-row{display:flex;align-items:center;gap:14px;padding:12px 8px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .12s;border-radius:var(--radius-sm);}
.report-row:last-child{border-bottom:none;}
.report-row:hover{background:var(--line-soft);}
.rr-main{flex:1;min-width:0;}
.rr-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rr-sub{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.rr-date{font-size:12.5px;text-align:right;color:var(--ink-soft);flex-shrink:0;}
.rr-date.overdue{color:var(--pink-deep);font-weight:600;}

/* ---------- charts ---------- */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;}
.chart-title{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:14px;}
.chart-flex{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.donut{flex-shrink:0;}
.donut-num{font-family:var(--serif);font-weight:600;font-size:8px;fill:var(--ink);}
.donut-cap{font-size:2.6px;fill:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;}
.legend{display:flex;flex-direction:column;gap:8px;}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);}
.legend-item strong{color:var(--ink);}
.legend-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
.bars{display:flex;flex-direction:column;gap:11px;}
.bar-row{display:grid;grid-template-columns:130px 1fr 30px;align-items:center;gap:12px;}
.bar-label{font-size:12px;color:var(--ink-soft);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{background:var(--line-soft);border-radius:999px;height:11px;overflow:hidden;}
.bar-fill{height:100%;border-radius:999px;min-width:2px;transition:width .45s ease;}
.bar-val{font-family:var(--mono);font-size:12px;text-align:right;color:var(--ink);}

@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .25s ease;width:248px;box-shadow:var(--shadow-md);}
  .sidebar.open{transform:translateX(0);}
  #menuToggle{display:inline-flex;}
  .grid-2{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .view{padding:20px 16px 50px;}
  .topbar{padding:14px 16px;}
  .perm-grid{grid-template-columns:1fr;}
  .bar-row{grid-template-columns:104px 1fr 26px;}
}

/* ============================================================
   Bootstrap 5 compatibility overrides — keep the original look
   (this file is loaded AFTER bootstrap.min.css)
   ============================================================ */
body{--bs-body-bg:var(--eggshell);--bs-body-color:var(--ink);--bs-body-font-family:var(--sans);}
.btn,.btn:hover,.btn:focus,.btn:active,.btn:first-child:active,.btn.active{border:none;box-shadow:none;}
.btn{--bs-btn-focus-box-shadow:none;}
.btn:hover{transform:translateY(-1px);}
.btn-primary,.btn-primary:hover,.btn-primary:focus,.btn-primary:focus-visible,.btn-primary:active,.btn-primary:first-child:active,.btn-primary.active,.btn-primary:disabled{background:var(--lilac-deep);color:#fff;}
.btn-primary{box-shadow:var(--shadow-sm);}
.btn-primary:hover{box-shadow:var(--shadow-md);}
.btn-soft,.btn-soft:focus,.btn-soft:active{background:var(--lilac);color:var(--ink);}
.btn-soft:hover{background:var(--lilac-mid);color:var(--ink);}
.btn-ghost,.btn-ghost:focus,.btn-ghost:active{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--line-soft);color:var(--ink);border:1px solid var(--line);}
.btn-danger,.btn-danger:focus,.btn-danger:active,.btn-danger:first-child:active{background:transparent;color:var(--pink-deep);border:1px solid var(--pink);}
.btn-danger:hover{background:var(--pink);color:#6b2f36;border:1px solid var(--pink);}
.badge{line-height:1.3;color:inherit;}
.badge-high{color:#7A3138;}
.badge-medium{color:#5B3E80;}
.badge-low{color:#7A5B2A;}
.badge-stage{color:var(--ink-soft);}
.badge-done{color:#516E48;}
label{display:block;margin-bottom:5px;}
h1,h2,h3,h4{margin-bottom:0;}

/* ---------- SweetAlert2 theming to match the workspace ---------- */
.swal2-popup{font-family:var(--sans) !important;border-radius:var(--radius-lg) !important;background:var(--paper) !important;color:var(--ink) !important;}
.swal2-title{font-family:var(--serif) !important;color:var(--ink) !important;font-size:20px !important;}
.swal2-html-container{color:var(--ink-soft) !important;font-size:14px !important;}
.swal2-confirm{background:var(--lilac-deep) !important;border-radius:999px !important;font-weight:600 !important;box-shadow:none !important;}
.swal2-cancel{background:transparent !important;color:var(--ink-soft) !important;border:1px solid var(--line) !important;border-radius:999px !important;font-weight:600 !important;}
.swal2-deny{background:var(--pink-deep) !important;border-radius:999px !important;font-weight:600 !important;}
.swal2-popup.swal2-toast{background:var(--ink) !important;color:#fff !important;border-radius:var(--radius-sm) !important;box-shadow:var(--shadow-md) !important;padding:12px 18px !important;}
.swal2-popup.swal2-toast .swal2-title{color:#fff !important;font-family:var(--sans) !important;font-size:13.3px !important;font-weight:500 !important;}
.swal2-input{font-family:var(--sans) !important;border:1px solid var(--line) !important;border-radius:var(--radius-sm) !important;box-shadow:none !important;}