/* HKUST Research Support System — Sample Screens (Mockups)
   Branding: HKUST Blue + Gold accent, Muli/Mulish typeface */
:root {
  --blue: #003366;
  --blue-2: #0057a8;
  --blue-3: #e8f1fa;
  --gold: #c9a227;
  --bg: #f4f6fa;
  --card: #ffffff;
  --text: #1f2a3d;
  --muted: #6b7a90;
  --line: #dde4ee;
  --ok: #1e8e5a;
  --warn: #b9770e;
  --bad: #c0392b;
  --radius: 10px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  font-family: 'Muli', 'Mulish', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
}
a { color: var(--blue-2); text-decoration: none; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; min-height: 64px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 8px rgba(0, 26, 64, .25);
  flex-wrap: wrap;
}
.topbar .logo { display: flex; align-items: center; gap: 12px; }
.topbar .logo svg { display: block; }
.topbar .wordmark { line-height: 1.15; }
.topbar .wordmark b { font-size: 16px; letter-spacing: .4px; display: block; }
.topbar .wordmark span { font-size: 11.5px; color: #bcd2ec; font-weight: 600; letter-spacing: .3px; }
.topbar nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.topbar nav a {
  color: #d6e4f5; font-weight: 600; font-size: 12.5px;
  padding: 6px 9px; border-radius: 2px; white-space: nowrap;
}
.topbar nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.topbar nav a.active { background: rgba(255,255,255,.16); color: #fff; }
.navdrop { position: relative; }
.navdrop > button {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: #d6e4f5; border: 0; border-radius: 2px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 9px; cursor: pointer;
}
.navdrop > button svg { width: 15px; height: 15px; }
.navdrop > button .chev { width: 14px; height: 14px; opacity: .85; margin-left: 2px; }
.navdrop.open > button, .navdrop.here > button, .navdrop > button:hover { background: rgba(255,255,255,.16); color: #fff; }
.navdrop .menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px;
  background: #fff; color: #1f2a3d; border-radius: 8px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 20;
}
.navdrop.open .menu { display: block; }
.navdrop .menu a { display: block; color: #1f2a3d; padding: 8px 10px; border-radius: 6px; font-weight: 700; font-size: 13.5px; }
.navdrop .menu a:hover, .navdrop .menu a.on { background: #f4f7fb; color: #003366; }
.navdrop .sep { height: 1px; background: #e4e9f0; margin: 6px 4px; }
.topbar .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; margin-left: 10px;
}

/* ---------- Layout ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: 28px 28px 64px; }
.page.wide { max-width: 1440px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; color: var(--blue); font-weight: 800; letter-spacing: .2px; }
.page-head p { color: var(--muted); font-size: 13.5px; margin-top: 4px; max-width: 62ch; line-height: 1.45; }
/* Title sits closer to card tabs so the page reads as one surface */
.page-head:has(+ .form-tabs),
.page-head:has(+ .notice + .form-tabs) { margin-bottom: 14px; }
.page-head + .notice:has(+ .form-tabs) { margin-bottom: 14px; }

/* ---------- Cards & widgets ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 1px 3px rgba(15, 40, 80, .05);
}
.stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; }
.stat {
  border-radius: 8px; padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
}
.stat .ic {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.stat .ic svg { width: 20px; height: 20px; stroke-width: 2; }
.stat .meta { min-width: 0; }
.stat b { display: block; font-size: 24px; line-height: 1.1; color: #1f2a3d; font-weight: 800; font-family: 'Roboto Mono', monospace; }
.stat span { display: block; margin-top: 3px; color: #5a6a82; font-size: 12px; font-weight: 700; line-height: 1.3; }
.stat.c1 { background: #e9f1fb; } .stat.c1 .ic { background: #d3e3f6; color: #1c5aa8; }
.stat.c2 { background: #e7f6ef; } .stat.c2 .ic { background: #d0ecdf; color: #1e8e5a; }
.stat.c3 { background: #f0ecfa; } .stat.c3 .ic { background: #e1d9f5; color: #5b4bb7; }
.stat.c4 { background: #fdefe6; } .stat.c4 .ic { background: #fbdfca; color: #c2600e; }
.stat.c5 { background: #e6f5f7; } .stat.c5 .ic { background: #cdebf0; color: #0e7d93; }

/* ---------- Tables ---------- */
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 800; padding: 10px 12px;
  border-bottom: 2px solid var(--line); background: #fafbfe;
}
table.data td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:hover td { background: #f7fafd; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .2px; white-space: nowrap;
}
.b-draft    { background: #eef1f6; color: #55637a; }
.b-pending  { background: #fdf3d7; color: var(--warn); }
.b-review   { background: #e3f0ff; color: var(--blue-2); }
.b-sign     { background: #e8e4fb; color: #5b4bb7; }
.b-done     { background: #dcf2e7; color: var(--ok); }
.b-alert    { background: #fbe3df; color: var(--bad); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 13.5px;
  padding: 11px 20px; border-radius: 2px; letter-spacing: .2px;
}
.btn:hover { background: var(--blue-2); }
.btn.gold { background: var(--gold); color: var(--blue); }
.btn.gold:hover { background: #d9b63e; }
.btn.ghost { background: var(--blue); color: #fff; border: none; }
.btn.ghost:hover { background: var(--blue-2); }
.btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 2px; font-weight: 600; }

/* ---------- Forms ---------- */
.form-section { margin-bottom: 26px; }
.form-section > h2 {
  font-size: 15px; color: var(--blue); font-weight: 800;
  padding-bottom: 8px; border-bottom: 2px solid var(--blue-3); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.form-section > h2 .tag {
  font-size: 10.5px; background: var(--gold); color: var(--blue);
  padding: 2px 8px; border-radius: 4px; font-weight: 800; letter-spacing: .4px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 20px; }
.field label { display: block; font-size: 12.5px; font-weight: 800; color: #3c4a60; margin-bottom: 5px; }
.field label small { color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 13.5px; color: var(--text);
  padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 7px; background: #fff;
}
.field.tick { margin-top: 12px; }
.field.tick label {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  font-size: 13.5px; font-weight: 700; color: var(--text);
}
.field.tick input[type=checkbox] {
  width: 16px; height: 16px; flex: none; margin-top: 2px; padding: 0; accent-color: var(--blue);
}
.btn.line { background: #fff; color: var(--blue); border: 1.5px solid #c5d0e0; }
.btn.line:hover { background: #f4f7fb; border-color: var(--blue); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-2); box-shadow: 0 0 0 3px rgba(0, 87, 168, .12);
}
.field.diff input, .field.diff select, .field.diff textarea,
td.diff input {
  border-color: #c9a227; background: #fff8e6; box-shadow: inset 3px 0 0 #c9a227;
}
.field .was { display: none; font-size: 12px; font-weight: 800; color: #8a6a12; margin-top: 4px; }
.field.diff .was { display: block; }
.field .delta-val {
  display: none; font-size: 12px; font-weight: 700; color: #2a5f8f; margin-top: 4px;
}
.field.delta-on .delta-val { display: block; }
.field.delta-diff {
  box-shadow: inset 3px 0 0 #2a5f8f;
}
.field.delta-diff .delta-val { color: #8a6a12; background: #fff6de; padding: 2px 6px; border-radius: 4px; }
.check-row .was, .check-row .delta-val {
  display: none; font-size: 12px; font-weight: 800; margin-top: 4px; margin-left: 28px;
}
.check-row.diff .was { display: block; color: #8a6a12; }
.check-row.delta-on .delta-val { display: block; color: #2a5f8f; }
.check-row.delta-diff .delta-val { color: #8a6a12; }
.seg-was { display: none; font-size: 12px; font-weight: 800; color: #8a6a12; margin-top: 6px; }
.seg-wrap.diff .seg-was { display: block; }
.delta-banner {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
  background: #eef5fc; border: 1px solid #c5d6ea; font-size: 13.5px; color: #1c2b42;
}
.delta-banner.warn { background: #fff6de; border-color: #e2c76a; }
.delta-banner.ok { background: #eef8f0; border-color: #b7dfc0; }
.delta-banner.checked {
  background: #e8f4ef; border-color: #9bc9b5;
  color: #006850; font-weight: 700;
}
.delta-banner b { font-weight: 800; }
.diff-log { margin-top: 14px; padding: 10px 12px; background: #fff8e6; border-radius: 8px; font-size: 13px; }
.diff-log b { color: #8a6a12; }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.field .error { font-size: 11.5px; color: var(--bad); margin-top: 4px; font-weight: 700; }
.field.invalid input { border-color: var(--bad); background: #fff8f7; }
.autofill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; color: var(--blue-2);
  background: var(--blue-3); border-radius: 4px; padding: 1px 7px; margin-left: 6px;
}

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: center; gap: 0; margin: 6px 0 26px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; }
.step .dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #dfe6f0; color: #7a8aa0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px;
}
.step span.lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.step.done .dot { background: var(--ok); color: #fff; }
.step.done span.lbl { color: var(--ok); }
.step.now .dot { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(0, 51, 102, .15); }
.step.now span.lbl { color: var(--blue); }
.step .bar { width: 34px; height: 2px; background: var(--line); margin: 0 10px; }
.step.done .bar { background: var(--ok); }

/* ---------- Notices ---------- */
.notice {
  border-left: 4px solid var(--gold); background: #fdf8ea;
  padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 13px; margin-bottom: 18px;
}
.notice.info { border-left-color: var(--blue-2); background: var(--blue-3); }
.notice.warn { border-left-color: #c98900; background: #fff6de; color: #6b4e00; }

/* ---------- Upload list ---------- */
.doc-row {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px dashed var(--line); border-radius: 8px;
  padding: 13px 16px; margin-bottom: 10px; background: #fff;
}
.doc-row .ic {
  width: 38px; height: 38px; border-radius: 8px; flex: none;
  background: var(--blue-3); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.doc-row .meta { flex: 1; }
.doc-row .meta b { font-size: 13.5px; display: block; }
.doc-row .meta span { font-size: 12px; color: var(--muted); }
.doc-row.uploaded { border-style: solid; border-color: #cfe3d6; background: #f6fbf8; }
.doc-row.uploaded .ic { background: #dcf2e7; color: var(--ok); }

/* ---------- Candidate layout ---------- */
.candidate-wrap { max-width: 860px; margin: 0 auto; padding: 30px 24px 70px; }
.progress { height: 8px; background: #e3e9f2; border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-2), var(--gold)); border-radius: 99px; }

.footer-note { text-align: center; color: var(--muted); font-size: 11.5px; padding: 26px 0 10px; }
.footer-note b { color: var(--blue); }

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.pill {
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--muted); cursor: pointer;
}
.pill.active { border-color: var(--blue); color: var(--blue); background: var(--blue-3); }

.sig-box {
  border: 2px dashed var(--blue-2); border-radius: 10px; background: #fbfdff;
  padding: 26px; text-align: center; color: var(--muted);
}
.sig-box .script { font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 30px; color: var(--blue); }

@media (max-width: 960px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.topbar .brand-logo { height: 34px; width: auto; display: block; }
.topbar .sys-sep { width: 1px; height: 26px; background: rgba(255,255,255,.35); margin: 0 4px 0 10px; }
.topbar .sys-name { font-size: 12.5px; font-weight: 600; color: #d6e4f5; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }

/* ---------- Viewer identity (who is using this screen) ---------- */
.viewer { display: flex; align-items: center; gap: 10px; margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); }
.viewer .v-meta { line-height: 1.2; text-align: right; }
.viewer .v-meta b { display: block; font-size: 13px; font-weight: 800; color: #fff; }
.viewer .v-meta span { display: block; font-size: 10.5px; color: #bcd2ec; font-weight: 700; }

/* ---------- Role context banner ---------- */
.role-banner {
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(90deg, #eef4fb, #f7f9fc);
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 8px; padding: 10px 16px; margin-bottom: 22px;
  font-size: 12.8px; color: #3c4a60;
}
.role-banner b { color: var(--blue); }
.role-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-2); flex: none; }

/* ---------- (i) tooltips ---------- */
.tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: var(--blue-3); color: var(--blue-2);
  font-size: 10px; font-weight: 800; cursor: help; margin-left: 5px; vertical-align: middle;
  font-style: normal; user-select: none;
}
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
  width: 220px; background: #22314a; color: #e8eef7; font-size: 11.5px; font-weight: 500;
  line-height: 1.45; padding: 8px 11px; border-radius: 7px; z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .15s;
  box-shadow: 0 4px 14px rgba(10,30,60,.3); text-transform: none; letter-spacing: 0;
}
.tip:hover::after { opacity: 1; }

/* ---------- Checklist rows (approval screens) ---------- */
.check-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.check-row:last-child { border-bottom: none; }
.check-block { border-bottom: 1px solid var(--line); }
.check-block > .check-row { border-bottom: none; }
.group-link { margin: 2px 0 4px; font-size: 13px; font-weight: 700; }
.check-row input[type=checkbox] {
  width: 17px; height: 17px; margin-top: 2px; accent-color: #4d94d4; flex: none; cursor: pointer;
  border-radius: 4px;
}
.check-row input[type=checkbox]:hover { accent-color: #2f7ec4; box-shadow: 0 0 0 4px rgba(77, 148, 212, .22); }
.check-row .txt b { display: block; font-size: 13.5px; color: var(--text); }
.check-row .txt span { font-size: 12px; color: var(--muted); }

/* ---------- LA document preview ---------- */
.doc-preview {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 26px 30px; font-size: 13px; line-height: 1.7; color: #2a3648;
}
.doc-preview .la-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--blue); padding-bottom: 14px; margin-bottom: 16px; }
.doc-preview .la-head img { height: 30px; }
.doc-preview .la-head .ref { font-size: 11px; color: var(--muted); text-align: right; }
.doc-preview h4 { font-size: 14px; color: var(--blue); margin: 0 0 8px; }
.doc-preview table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; }
.doc-preview table td { padding: 5px 8px; border: 1px solid var(--line); font-size: 12.5px; }
.doc-preview table td:first-child { background: #f6f9fd; font-weight: 700; width: 38%; }

.kv { display: flex; gap: 6px; font-size: 12.5px; padding: 4px 0; }
.kv b { color: #3c4a60; min-width: 118px; }
.kv span { color: var(--muted); }

@media (max-width: 960px) {
  .viewer .v-meta { display: none; }
}

/* ---------- Clickable table rows ---------- */
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: #eef4fb; }

/* ---------- Dashboard 2-column layout ---------- */
.dash-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

/* ---------- Workflow path (rich stepper with states) ---------- */
.flow { display: flex; align-items: stretch; gap: 0; margin: 4px 0 14px; }
.fstep {
  flex: 1; position: relative; background: #f6f8fb; border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 16px 12px; margin-right: 26px;
}
.fstep:last-child { margin-right: 0; }
.fstep::after {
  content: ""; position: absolute; right: -19px; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-left-color: #c3cedd;
}
.fstep:last-child::after { display: none; }
.fstep .fs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.fstep .fs-stage { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.fstep .fs-name { font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.3; }
.fstep .fs-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.fstep .fs-state {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.fstep.done { background: #f2faf6; border-color: #cde9db; }
.fstep.done .fs-stage { color: var(--ok); }
.fstep.done .fs-state { background: #dcf2e7; color: var(--ok); }
.fstep.done::after { border-left-color: #9fd4bb; }
.fstep.now { background: #eef4fc; border-color: #b9d2ee; box-shadow: 0 0 0 3px rgba(0, 87, 168, .10); }
.fstep.now .fs-stage { color: var(--blue-2); }
.fstep.now .fs-state { background: var(--blue); color: #fff; }
.fstep.todo .fs-state { background: #e6ebf2; color: #728199; }

/* ---------- Filter bar above work tables ---------- */
.filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filterbar .flabel { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-right: 2px; }
.filterbar select, .filterbar input {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text);
  padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff;
}
.filterbar input { min-width: 240px; font-weight: 500; }
.filterbar .q-step { min-width: 190px; }
.filterbar .spacer { flex: 1; }
.filterbar .count { font-size: 12px; color: var(--muted); font-weight: 700; }

/* ---------- Admin dashboard cards ---------- */
.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }
.admin-card { display: flex; flex-direction: column; gap: 8px; }
.admin-card .ac-head { display: flex; align-items: center; gap: 12px; }
.admin-card .ac-ic {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.admin-card .ac-ic svg { width: 19px; height: 19px; stroke-width: 2; }
.admin-card .ac-head b { font-size: 15px; color: var(--blue); }
.admin-card p { font-size: 12.5px; color: var(--muted); flex: 1; }
.admin-card .ac-link { font-size: 12.5px; font-weight: 800; color: var(--blue-2); }
.admin-card .ac-link:hover { text-decoration: underline; }

/* ---------- Sub-page tab nav ---------- */
.subnav { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.subnav a {
  font-size: 13px; font-weight: 700; color: var(--muted); padding: 9px 16px;
  border-bottom: 2.5px solid transparent; margin-bottom: -2px;
}
.subnav a:hover { color: var(--blue); }
.subnav a.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ---------- End-user service tiles ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
.svc {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px;
  display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: box-shadow .15s;
}
.svc:hover { box-shadow: 0 3px 12px rgba(15, 40, 80, .10); border-color: #b9d2ee; }
.svc .ic, .svc .svc-ic { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.svc .ic svg, .svc .svc-ic svg { width: 18px; height: 18px; stroke-width: 2; }
.svc b { font-size: 13.5px; color: var(--blue); }
.svc span { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* ---------- To-Do list (clean rows) ---------- */
.todo-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.todo-item:last-child { border-bottom: none; padding-bottom: 4px; }
.todo-item .todo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.todo-item .todo-title { font-size: 13px; }
.todo-item .todo-desc { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.todo-item .todo-act { margin-top: 2px; }

/* ---------- One-line KPI strip ---------- */
.kstrip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 22px; margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(15, 40, 80, .05);
}
.kstrip .k-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-right: 18px; }
.kstrip .k { display: flex; align-items: baseline; gap: 7px; padding: 0 18px; border-left: 1px solid var(--line); }
.kstrip .k:first-of-type { border-left: none; padding-left: 0; }
.kstrip .k b { font-family: 'Roboto Mono', monospace; font-size: 20px; font-weight: 800; color: var(--blue); }
.kstrip .k span { font-size: 12px; font-weight: 700; color: #5a6a82; white-space: nowrap; }
.kstrip .k small { font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* ---------- Stage / status tags (short) ---------- */
.stag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.stag.s-go  { background: #fdf3d7; color: var(--warn); }
.stag.s-nt  { background: #e3f0ff; color: var(--blue-2); }
.stag.s-sd  { background: #fdefe6; color: #c2600e; }
.stag.s-done{ background: #dcf2e7; color: var(--ok); }
.stag.s-draft{ background: #eef1f6; color: #55637a; }
.stag.mine { box-shadow: inset 0 0 0 1.5px currentColor; }
.kind {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 800; white-space: nowrap; line-height: 1.3;
}
.kind svg { width: 14px; height: 14px; flex: none; }
.kind.newline { background: #e3f0ff; color: #0057a8; }
.kind.update { background: #fdf3d7; color: #8a6a12; }
.kind.incident { background: #fde8e4; color: #b23b2e; }
.kind.fax { background: #ece8fb; color: #5b4bb7; }
.do {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue); color: #fff; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.task.is-other { color: var(--muted); font-weight: 700; }
.yours { border: 1.5px solid #b9d2ee; box-shadow: 0 0 0 3px rgba(0, 87, 168, .08); }
.subhead { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
.log { list-style: none; margin: 4px 0 0; }
.log li { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.log li:last-child { border-bottom: none; }
.log time { font-size: 12px; font-weight: 800; color: var(--muted); }
.log b { color: var(--blue); }
.task { font-weight: 800; color: var(--text); }

/* ---------- Case ID (monospace) ---------- */
.cid { font-family: 'Roboto Mono', monospace; font-weight: 700; font-size: 12.5px; color: var(--blue); white-space: nowrap; }

/* ---------- Pill tabs with JS panes ---------- */
.ptabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ptabs button {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; color: #55637a;
}
.ptabs button:hover { border-color: var(--blue-2); color: var(--blue-2); }
.ptabs button.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.pane { display: none; }
.pane.active { display: block; }

/* Card-type tabs (Ant Design card tabs) — active tab merges into the pane below */
.form-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end;
  margin: 0; padding: 0;
  border-bottom: 1px solid #d5e0ec;
  background: transparent;
}
.form-tabs button:first-child {
  border-top-left-radius: 8px;
}
.form-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  position: relative; z-index: 0;
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; min-height: 40px; padding: 0 20px;
  margin: 0 0 -1px;
  color: #4a5a70;
  background: #f0f3f7;
  border: 1px solid #d5e0ec;
  border-radius: 8px 8px 0 0;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.form-tabs button svg {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
.form-tabs button:hover {
  color: var(--blue);
  background: #e8eef6;
}
.form-tabs button.active {
  z-index: 2;
  color: var(--blue);
  font-weight: 700;
  background: #fff;
  border-color: #d5e0ec;
  border-bottom-color: #fff; /* covers the bar so the pane reads as one piece */
}
.form-tabs button.active svg { opacity: 1; }
.form-pane { display: none; }
.form-pane.active {
  display: block;
  background: #fff;
  border: 1px solid #d5e0ec;
  border-top: none; /* tab bar supplies the top edge; active tab punches through */
  border-radius: 0 10px 12px 12px;
  padding: 24px 24px 12px;
  margin: 0 0 28px;
  box-shadow: 0 1px 3px rgba(15, 40, 80, .04);
}
/* Flatten nested cards so the tab + pane read as one surface */
.form-pane.active > .card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 20px;
  margin: 0;
}
.form-pane.active > .card.form-section { margin-bottom: 0; }
.form-pane.active > .card.form-section > h2:first-child {
  margin-top: 0;
}
.form-pane.active > .card + .card {
  border-top: 1px solid #e7edf4;
  padding-top: 20px;
  margin-top: 4px;
}
.form-pane.active > .actionbar {
  position: static;
  margin: 8px -24px -12px;
  padding: 14px 24px;
  border-top: 1px solid #e7edf4;
  background: #fafbfd;
  border-radius: 0 0 12px 12px;
  box-shadow: none;
}
/* Directory / list pages that use card tabs without .form-pane wrappers */
.form-tabs:not([hidden]) ~ .card.form-tab-pane {
  border-radius: 0 10px 12px 12px;
  border-top: none;
  margin-top: 0;
}

/* ---------- Info card (end-user line) ---------- */
.linecard { display: flex; gap: 16px; align-items: flex-start; }
.linecard .lc-ic {
  width: 46px; height: 46px; border-radius: 10px; flex: none;
  background: #e9f1fb; color: #1c5aa8;
  display: flex; align-items: center; justify-content: center;
}
.linecard .lc-ic svg { width: 22px; height: 22px; stroke-width: 2; }
.kvl { display: grid; grid-template-columns: 110px 1fr; row-gap: 6px; font-size: 13.5px; margin-top: 10px; }
.kvl dt { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.kvl dd { font-weight: 600; }

/* Role switcher in the header */
.rolepick {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 4px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 8px; max-width: 210px;
}
.rolepick option { color: #1f2a3d; }

/* What is waiting, not a monthly scoreboard */
.today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.today a, .today .tn {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; border-top: 4px solid var(--blue); text-decoration: none; color: inherit;
}
.today a:hover { border-color: #b9d2ee; box-shadow: 0 3px 12px rgba(15,40,80,.08); }
.today b { display: block; font-family: 'Roboto Mono', monospace; font-size: 28px; line-height: 1; color: var(--blue); font-weight: 800; }
.today span { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: #3c4a60; }
.today small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
@media (max-width: 800px) { .today { grid-template-columns: 1fr; } }

/* Legacy large choice cards — keep for any leftover uses */
.usage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.usage button {
  text-align: left; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; font-family: inherit;
}
.usage button b { display: block; color: var(--blue); font-size: 14px; }
.usage button span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.usage button.active { border-color: var(--blue); background: var(--blue-3); box-shadow: 0 0 0 3px rgba(0,87,168,.12); }
@media (max-width: 700px) { .usage { grid-template-columns: 1fr; } }

/* Compact Usage / mode toggle — sits in the section heading */
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 2px solid var(--blue-3);
}
.section-head h2 {
  margin: 0; padding: 0; border: none;
  font-size: 15px; color: var(--blue); font-weight: 800;
  display: flex; align-items: center; gap: 10px;
}
.form-section > .section-head + .seg-hint { margin-top: -2px; }
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: #e4ebf3; border-radius: 8px; flex: none;
}
.seg button {
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 16px; border: none; border-radius: 6px;
  background: transparent; color: #4a5a70; cursor: pointer;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.seg button:hover { color: var(--blue); }
.seg button.active {
  background: #fff; color: var(--blue);
  box-shadow: 0 1px 3px rgba(15, 40, 80, .14);
}
.seg-hint {
  margin: 0 0 16px; font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.4;
}
.handset-block {
  border: 1px solid #e0e7ef; border-radius: 10px; padding: 14px 16px 8px;
  background: #fafbfd; margin-top: 12px;
}
.handset-block + .handset-block { margin-top: 14px; }
.handset-block .hb-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 800; color: var(--blue); margin-bottom: 12px;
}
.handset-block .hb-title span { color: var(--muted); font-weight: 600; font-size: 12px; }

.members {
  background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; font-size: 13px; margin-top: 10px;
}
.members b { color: var(--blue); }
.reveal { display: none; }
.reveal.on { display: block; }
.exist { font-size: 10.5px; font-weight: 800; color: #8a6a12; background: #fdf3d7; border-radius: 4px; padding: 1px 7px; margin-left: 6px; }

.bars { display: flex; flex-direction: column; gap: 7px; max-height: 280px; overflow: auto; padding-right: 4px; }
.bar-row { display: grid; grid-template-columns: 64px 1fr 36px; gap: 8px; align-items: center; font-size: 12px; font-weight: 800; color: #3c4a60; }
.track { display: flex; height: 12px; background: transparent; border-radius: 6px; overflow: hidden; }
.track i { display: block; height: 100%; }
.track i.a { background: #0057a8; }
.track i.v { background: #c9a227; }
.legend { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.legend b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.legend b.a { background: #0057a8; }
.legend b.v { background: #c9a227; }
.topbar nav a { display: inline-flex; align-items: center; gap: 6px; }
.topbar nav a svg { width: 15px; height: 15px; }
.navdrop .menu a { display: block; color: #1f2a3d; }

.typebar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.typechip {
  flex: 1; min-width: 180px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  padding: 8px 8px 8px 12px; cursor: pointer; font-family: inherit; text-align: left;
}
.typechip .nm { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--blue); }
.typechip .ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: #eef1f6; color: #3c4a60; }
.typechip .ic svg { width: 15px; height: 15px; }
.typechip .n { margin-left: auto; font-family: 'Roboto Mono', monospace; font-weight: 800; color: var(--blue); font-size: 16px; }
.typechip .add {
  border: none; background: var(--blue); color: #fff; border-radius: 4px;
  font-family: inherit; font-weight: 700; font-size: 12px; padding: 6px 10px; cursor: pointer;
}
.typechip[data-type="newline"] { background: #f4f8fd; color: #0057a8; }
.typechip[data-type="newline"] .ic { background: #e3f0ff; color: #0057a8; }
.typechip[data-type="newline"] .nm, .typechip[data-type="newline"] .n { color: #0057a8; }
.typechip[data-type="update"] { background: #fdfaf2; color: #8a6a12; }
.typechip[data-type="update"] .ic { background: #fdf3d7; color: #8a6a12; }
.typechip[data-type="update"] .nm, .typechip[data-type="update"] .n { color: #8a6a12; }
.typechip[data-type="incident"] { background: #fdf7f6; color: #b23b2e; }
.typechip[data-type="incident"] .ic { background: #fde8e4; color: #b23b2e; }
.typechip[data-type="incident"] .nm, .typechip[data-type="incident"] .n { color: #b23b2e; }
.typechip[data-type="fax"] { background: #f7f6fc; color: #5b4bb7; }
.typechip[data-type="fax"] .ic { background: #ece8fb; color: #5b4bb7; }
.typechip[data-type="fax"] .nm, .typechip[data-type="fax"] .n { color: #5b4bb7; }
.typechip.active { box-shadow: inset 0 0 0 1.5px currentColor; }
.typechip[data-type="all"].active { border-color: var(--blue); background: #e8f1fb; color: var(--blue); }
table.data td.nowrap, table.data th.nowrap { white-space: nowrap; }

.dir-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dir-filters { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; flex: 1; min-width: 0; }
.dir-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 1px; flex: none; }
.dir-cta { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 14px; }
.tool-link { font-size: 13px; font-weight: 700; color: var(--blue-2); padding: 6px 10px; white-space: nowrap; }
.tool-link:hover { text-decoration: underline; }
.icon-btn {
  width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; color: #3c4a60;
  border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: #f4f7fb; color: var(--blue); }
.icon-btn svg { width: 16px; height: 16px; }
.table-wrap { overflow: auto; margin: 0 -2px; }
table.dir { font-size: 13px; }
table.dir th { position: sticky; top: 0; z-index: 2; background: #fafbfe; white-space: nowrap; padding: 8px 10px; }
table.dir td { padding: 8px 10px; }
table.dir td:nth-child(2), table.dir th:nth-child(2) { font-family: 'Roboto Mono', monospace; font-weight: 700; }
table.dir td:nth-child(6) { color: var(--muted); }
table.dir td:nth-child(12), table.dir th:nth-child(12) { text-align: center; }
table.dir td.pick, table.dir th.pick { width: 36px; text-align: center; }
table.dir .pick input { width: 16px; height: 16px; }
.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px; background: #e8f1fb; border-radius: 8px;
}
.bulk-bar[hidden] { display: none !important; }
.bulk-bar b { margin-right: auto; }
.modal {
  position: fixed; inset: 0; background: rgba(16, 32, 58, .45);
  display: flex; align-items: center; justify-content: center; z-index: 80; padding: 24px;
}
.modal[hidden] { display: none !important; }
.modal-card { background: #fff; border-radius: 12px; padding: 22px 24px; width: min(560px, 100%); box-shadow: 0 16px 40px rgba(16, 32, 58, .2); }
.modal-card h2 { margin: 0 0 8px; color: var(--blue); font-size: 18px; }
.modal-card p { margin: 0 0 8px; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
tr.bad td { background: #fdecea; }
.val-ok { color: #1e7a45; font-weight: 800; }
.val-bad { color: #b23b2e; font-weight: 800; }
table.dir td:last-child { position: sticky; right: 0; background: #fff; }
table.dir tr:hover td:last-child { background: #f7fafd; }
table.dir tr.is-vacant td:last-child { background: #fbfcfe; }
.fgroup { display: flex; flex-direction: column; gap: 6px; }
.fgroup .flabel { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.fgroup select {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
  padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff;
}
.dir-filters select { min-width: 148px; }
.pick { position: relative; }
.pick-native {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none; border: 0;
}
.pick-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
  padding: 6px 28px 6px 10px; border: 1.5px solid var(--line); border-radius: 6px;
  background: #fff; min-width: 148px; text-align: left; cursor: pointer; position: relative;
}
.pick-btn::after {
  content: ""; position: absolute; right: 10px; top: 50%; margin-top: -1px;
  border: 4px solid transparent; border-top-color: #5c6b80;
}
.pick-btn:disabled { color: #8ea0b5; background: #f6f8fb; cursor: default; }
.pick-btn:disabled::after { border-top-color: #b7c2d0; }
.pick-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 42, 78, .12); padding: 4px;
}
.pick-list[hidden] { display: none !important; }
.pick-list button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #1c2b42;
  padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.pick-list button:hover { background: #f4f7fb; }
.pick-list button[aria-selected="true"] { background: #e8f1fb; color: var(--blue); }
.dir-filters .count { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button {
  border: 1.5px solid var(--line); background: #fff; color: #3c4a60;
  border-radius: 999px; padding: 6px 12px; font-family: inherit;
  font-size: 13px; font-weight: 800; cursor: pointer;
}
.chips button b { font-family: 'Roboto Mono', monospace; margin-left: 6px; color: var(--blue); }
.chips button.on { border-color: var(--blue); background: #e8f1fb; color: var(--blue); }
.adv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); background: #fff; color: #3c4a60;
  border-radius: 999px; padding: 6px 12px; font-family: inherit;
  font-size: 13px; font-weight: 800; cursor: pointer; margin-bottom: 1px;
}
.adv-btn svg { width: 15px; height: 15px; }
.adv-btn.on { border-color: var(--blue); background: #e8f1fb; color: var(--blue); }
.adv {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 14px; background: #f7f9fc;
  border: 1px solid var(--line); border-radius: 8px;
}
.adv[hidden] { display: none; }
.adv input {
  font-family: inherit; font-size: 13px; padding: 7px 10px;
  border: 1.5px solid var(--line); border-radius: 6px; min-width: 160px; background: #fff;
}
td .blank { color: #d0d7e2; }
tr.is-vacant td { background: #fbfcfe; }
.row-acts { width: 44px; text-align: right; }
.menu { position: relative; display: inline-block; }
.menu > button {
  width: 32px; height: 32px; border: none; background: transparent; color: #3c4a60;
  border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.menu > button svg { width: 16px; height: 16px; }
.menu > button:hover, .menu.open > button { background: #eef3f9; }
.menu .drop {
  display: none; position: absolute; right: 0; top: 36px; z-index: 30;
  min-width: 210px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 42, 78, .12); padding: 6px;
}
.menu.open .drop { display: block; }
.menu.up .drop { top: auto; bottom: 36px; }
.menu .drop a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px;
  color: #1c2b42; text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.menu .drop a svg { width: 15px; height: 15px; flex: none; }
.menu .drop a:hover { background: #f4f7fb; }
.card { overflow: visible; }
.idd-sheet { padding: 22px 26px 28px; }
.idd-report { color: #1c2b42; }
.idd-report .prov { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .08em; margin: 0; }
.idd-report .idd-title { text-align: center; font-weight: 800; font-size: 16px; margin: 4px 0 2px; }
.idd-report .idd-dept { text-align: center; font-weight: 700; margin: 0 0 18px; }
.idd-report .idd-date { font-size: 13px; margin: 0 0 6px; }
.idd-report table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.idd-report col.d { width: 14%; } .idd-report col.t { width: 12%; } .idd-report col.dest { width: 28%; }
.idd-report col.no { width: 18%; } .idd-report col.m { width: 12%; } .idd-report col.ch { width: 16%; }
.idd-report th { text-align: left; border-bottom: 2px solid #1c2b42; padding: 6px 8px; font-size: 12px; white-space: nowrap; }
.idd-report td { padding: 4px 8px; }
.idd-report .money, .idd-report th.money { text-align: right; }
.idd-who td { padding-top: 12px; font-weight: 800; border-top: 1px solid #1c2b42; }
.idd-sub td { font-weight: 700; padding-bottom: 8px; }
.idd-deptot td { border-top: 2px solid #1c2b42; font-weight: 800; padding-top: 8px; }
.idd-foot { margin: 28px 0 0; font-size: 13px; font-weight: 700; }
@media print {
  #tsms-bar, .dir-toolbar, .dir-filters, .dir-tools, .dir-cta, .adv, #pool-actions, .row-acts, .footer-note, #dept-chart, .pick, .bulk-bar, .modal, .no-print, #month-card { display: none !important; }
  body { background: #fff; }
  .idd-sheet { box-shadow: none; border: none; padding: 0; }
}

/* ---------- Case: form plus actions ---------- */
.case-page { max-width: 1560px; }
.case-page .case-kicker { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: #6d7f99; }
.case-page .page-head { margin-top: 8px; }
.case-page .page-head > div { flex: 1; min-width: 0; }
.case-page .page-head h1 { font-size: 34px; }
.case-page .page-head p,
.case-page #case-sub {
  max-width: none;
  white-space: nowrap;
}
.case-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 4px; }
.case-meta p { margin: 0; }
.case-page #line-link { margin-top: 0; white-space: nowrap; }
.who-name { color: #0057a8; font-weight: 800; }
.case-page .when { font-weight: 800; }
.field.view .val {
  min-height: 0; padding: 1px 0 0; border-bottom: none;
  font-weight: 600; font-size: 14.5px; color: #6b7a90;
}
.field.view.diff .val { background: #fff6de; color: #6d5420; padding: 2px 8px; border-radius: 4px; }
.field.view label { margin-bottom: 2px; }
.check-row input:disabled { opacity: 1; }
.confirm-card { width: min(480px, 100%); }
.confirm-line {
  background: #f4f7fb; border-radius: 8px; padding: 12px 14px; margin: 12px 0;
  font-weight: 800; color: var(--blue);
}
.confirm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 18px; }
.menu .drop button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #1c2b42; text-align: left;
}
.menu .drop button svg { width: 15px; height: 15px; flex: none; }
.menu .drop button:hover { background: #f4f7fb; }
.rail { display: flex; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.rail li {
  flex: 1; min-width: 0; background: #f4f7fb; border-radius: 8px;
  padding: 6px 10px 7px; border-bottom: 2px solid transparent;
}
.rail b { display: block; font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail span { display: block; font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail li.done { background: #eef8f3; border-bottom-color: #8fceb0; }
.rail li.now { background: #e7f0fb; border-bottom-color: var(--blue); }
.rail li.now b { color: var(--blue); }
.case-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.case-main { container-type: inline-size; min-width: 0; }
.case-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 18px; }
.case-fields .wide { grid-column: 1 / -1; }
@container (max-width: 980px) {
  .case-fields { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 640px) {
  .case-fields { grid-template-columns: 1fr; }
}
.case-side { position: sticky; top: 16px; }
.side-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.side-tabs button {
  flex: 1; font-family: inherit; font-weight: 800; font-size: 13px;
  border: 1.5px solid var(--line); background: #fff; color: #3c4a60;
  border-radius: 8px; padding: 7px 8px; cursor: pointer;
}
.side-tabs button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.rev { padding: 10px 0; border-top: 1px solid var(--line); }
.rev:first-child { border-top: none; padding-top: 0; }
.rev button {
  font-family: inherit; background: none; border: none; padding: 0;
  color: var(--blue); font-weight: 800; cursor: pointer; text-align: left;
}
.rev .meta { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-top: 2px; }
.rev ul { margin: 6px 0 0; padding-left: 16px; color: #3c4a60; font-size: 12.5px; }
.viewing {
  margin: 0 0 12px; padding: 8px 12px; background: #fff6de; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #6d5420;
}
.case-side .field textarea, .case-side .field input { width: 100%; }
.side-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.side-actions .btn { justify-content: center; }
@media (max-width: 1200px) {
  .case-layout { grid-template-columns: 1fr; }
  .case-side { position: static; order: -1; }
}

.steps { display: flex; align-items: flex-start; margin: 6px 0 22px; min-height: 88px; padding-top: 6px; }
.tick { flex: 1; text-align: center; position: relative; min-width: 0; }
.tick i {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #c5d0e0; background: #fff; position: relative; z-index: 1;
}
.tick b { display: block; margin-top: 6px; font-size: 14px; font-weight: 800; color: #aeb8c6; line-height: 1.25; }
.tick .role { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: #b4becc; line-height: 1.2; }
.tick.now .role { font-weight: 800; color: #003366; }
.tick::before {
  content: ""; position: absolute; top: 12px; left: -50%; right: 50%;
  height: 2px; background: #d5deea; z-index: 0;
}
.tick:first-child::before { display: none; }
.tick.done i { background: #1f7a4d; border-color: #1f7a4d; }
.tick.done i::after {
  content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin-top: -2px;
}
.tick.done b { color: #1f7a4d; }
.tick.done::before { background: #1f7a4d; }
.tick.now i { border-color: #4d94d4; animation: step-halo 2.8s ease-in-out infinite; }
.tick.now i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4d94d4; }
@keyframes step-halo {
  0%, 100% { box-shadow: 0 0 0 3px rgba(77, 148, 212, .28); }
  50% { box-shadow: 0 0 0 8px rgba(77, 148, 212, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tick.now i { animation: none; box-shadow: 0 0 0 4px rgba(77, 148, 212, .2); }
}
.tick.now b { font-size: 16px; color: #4d94d4; }
.tick.now::before { background: #1f7a4d; }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  border-top: 3px solid transparent;
  background-image:
    linear-gradient(#f4f8fc, #f4f8fc),
    linear-gradient(90deg, #003366 0%, #003366 46%, #3d6d94 50%, #003366 54%, #003366 100%);
  background-size: auto, 240% 100%;
  background-position: 0 0, 0 0;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 -10px 28px rgba(0, 51, 102, .18);
  padding: 8px max(28px, calc((100% - 1180px) / 2 + 28px));
  animation: line-sheen 9s ease-in-out infinite;
}
@keyframes line-sheen {
  0%, 100% { background-position: 0 0, 0% 0; }
  50% { background-position: 0 0, 100% 0; }
}
.actionbar.casewide {
  padding-left: max(28px, calc((100% - 1560px) / 2 + 28px));
  padding-right: max(28px, calc((100% - 1560px) / 2 + 28px));
}
.actionbar.is-sheet {
  flex-direction: column; align-items: stretch; gap: 0;
  padding-top: 0; padding-bottom: 4px; overflow: visible;
}
.sheet-top { display: flex; justify-content: center; align-items: flex-end; height: 0; }
.task-lip {
  position: relative; isolation: isolate; z-index: 2;
  flex: none; align-self: flex-end;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 32px;
  background: transparent; border: none; border-radius: 0;
  padding: 0 36px; min-width: 176px;
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-weight: 600; font-size: 15px; line-height: 18px; color: var(--blue);
  cursor: pointer;
}
.task-lip::before,
.task-lip::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0;
}
.task-lip::before {
  background-image: linear-gradient(90deg, #003366 0%, #003366 46%, #3d6d94 50%, #003366 54%, #003366 100%);
  background-size: 240% 100%;
  background-position: 0 0;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% calc(100% - 1px), 0 calc(100% - 1px));
  animation: lip-sheen 9s ease-in-out infinite;
}
.task-lip::after {
  background: #f4f8fc;
  clip-path: polygon(18.7px 1.3px, calc(100% - 18.7px) 1.3px, calc(100% - 3.4px) 100%, 3.4px 100%);
}
@keyframes lip-sheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
.task-lip:hover { color: var(--blue-2); }
.task-lip:hover::after { background: #e7f0f8; }
.task-sheet { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.actionbar.is-sheet.open .task-sheet { grid-template-rows: 1fr; }
.task-sheet-inner { overflow: hidden; padding-top: 8px; }
.task-opt {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 2px; border-top: 1px solid #d5e0ec;
  font-weight: 600; font-size: 14.5px; color: #1c2b42;
}
.task-opt:first-child { border-top: none; padding-top: 4px; }
.task-opt input { width: 18px; height: 18px; accent-color: #4d94d4; flex: none; }
.task-label { min-width: 7.5rem; }
.task-ran { margin-left: 2px; font-size: 12.5px; font-weight: 700; color: #006850; white-space: nowrap; }
.delta-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: 8px; }
.delta-actions.has-ran .check-delta { margin-left: 10px; }
.delta-actions .btn.delta { margin-left: 0; }
.btn.quiet {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  background: #e7f0fb; color: #0057a8; border: none; border-radius: 7px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 5px 10px; cursor: pointer;
}
.btn.quiet:hover { background: #d5e6f8; }
.btn.delta {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e6f3ee; color: #006850; border: none; border-radius: 7px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 5px 10px; cursor: pointer;
}
.btn.delta:hover { background: #d2ebe1; }
.btn.quiet svg, .btn.delta svg { flex: none; }
.task-alt {
  margin-left: 10px; padding: 2px 0; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #6b7a90;
  text-decoration: underline; text-underline-offset: 2px;
}
.task-alt:hover { color: #0057a8; }
.task-hint { margin: 2px 0 6px; font-size: 13px; font-weight: 400; color: #6b7a90; }
.task-hint.warn { color: #9a6b00; font-weight: 600; }
.task-row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 2px 0 0; gap: 14px;
}
.task-current {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 46%; text-align: center; font-family: inherit; font-weight: 600; font-size: 14.5px;
  color: #1c2b42; background: none; border: none; border-radius: 8px; cursor: pointer;
  padding: 6px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-current:hover { background: #f3f6fa; color: #003366; }
.task-current.pending { font-weight: 400; color: #8ea0b5; }
.task-current.pending:hover { color: #003366; }
.btn.hold, .btn.hold:hover { background: #e6ebf1; color: #8ea0b5; cursor: default; }
body:has(.actionbar:not([hidden])) .page { padding-bottom: 112px; }
body:has(.actionbar.is-sheet.open) .page { padding-bottom: 340px; }
@media (prefers-reduced-motion: reduce) {
  .task-sheet { transition: none; }
  .actionbar, .task-lip::before { animation: none; }
}
.btn.go { background: #1e8e5a; }
.btn.go:hover { background: #18764b; }
.linkish {
  background: none; border: none; padding: 8px 2px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #6b7a90;
}
.linkish:hover { color: var(--blue); text-decoration: underline; }
.case-page .field.view .val {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #FAFAFA; border: none; border-radius: 7px;
  min-height: 38px; padding: 9px 12px; font-weight: 600; font-size: 14.5px; color: #5c6b80;
}
.case-page .field.view .val.has-log { padding: 3px 4px 3px 12px; }
.with-log { position: relative; }
.with-log input, .with-log select { padding-right: 40px; }
.with-log.with-check input, .with-log.with-check select { padding-right: 76px; }
.ext-tools { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.loglink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; color: #8ea0b5; background: #f3f6fa; flex: none;
  border: none; padding: 0; cursor: pointer; font: inherit;
}
.with-log > .loglink { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.with-log .ext-tools { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.loglink svg { width: 22px; height: 22px; }
.loglink:hover { color: #0057a8; background: #e7f0fb; }
.loglink:hover svg { stroke-width: 2.4; }
.checklink { color: #4d94d4; }
.case-page .field.view .val.has-check { padding-right: 4px; }
.linecheck-card { width: min(480px, 100%); }
.linecheck-sub { margin: 0 0 14px; font-size: 13.5px; color: #6b7a90; }
.linecheck-grid { display: grid; gap: 0; border: 1px solid #d5e0ec; border-radius: 10px; overflow: hidden; }
.linecheck-row {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px;
  padding: 10px 14px; border-top: 1px solid #e7edf4; font-size: 13.5px;
}
.linecheck-grid.check-3 .linecheck-row { grid-template-columns: 1fr 1fr 1fr; }
.linecheck-row:first-child { border-top: none; }
.linecheck-row.head { background: #f3f6fa; font-weight: 700; }
.linecheck-row.head b { font-weight: 700; color: #6b7a90; }
.linecheck-row.diff { background: #fff6de; }
.linecheck-row span { color: #6b7a90; }
.linecheck-row b { font-weight: 700; color: #1c2b42; word-break: break-word; }
.linecheck-note { margin: 12px 0 0; font-size: 12.5px; color: #8ea0b5; }
.line-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.line-side { position: sticky; top: 12px; }
.line-side h2 { margin: 0 0 4px; font-size: 15px; color: var(--blue); }
.line-side .side-note { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.line-side h3 { margin: 14px 0 0; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6b7a90; }
.case-hit {
  display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: inherit; border: 1px solid #d5e0ec; background: #fff;
}
.case-hit:hover { border-color: var(--blue-2); }
.case-hit .hit-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.case-hit .cid { font-weight: 800; color: var(--blue); }
.case-hit .hit-type { margin-top: 4px; font-size: 13px; font-weight: 700; }
.case-hit .hit-delta { margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: #3d5f86; }
.case-hit.done { background: #f6f8fb; border-color: #e4e9f0; }
.case-hit.done .cid, .case-hit.done .hit-type { color: #5c6b80; }
.case-hit.done .hit-delta { color: #6b7a90; }
.hist-case { border: 1px solid #d5e0ec; border-radius: 12px; padding: 14px 16px; margin-top: 12px; background: #fff; }
.hist-case.done { background: #f6f8fb; border-color: #e4e9f0; }
.hist-meta { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: #1c2b42; }
.hist-case.done .hist-meta, .hist-case.done .cid { color: #5c6b80; }
.hist-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.hist-steps li {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: start;
  padding: 8px 0; border-top: 1px solid #e7edf4; font-size: 13.5px;
}
.hist-steps .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: #c5d0e0; }
.hist-steps li.done .dot { background: #1f7a4d; }
.hist-steps li.now .dot { background: #0057a8; }
.hist-steps li.wait { color: #8ea0b5; }
.hist-steps li b { font-weight: 800; }
.hist-steps li span:last-child { color: #5c6b80; text-align: right; }
#line-log h3 { margin: 16px 0 0; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6b7a90; }
#line-log .side-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
#line-log .cid { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--blue); text-decoration: none; }
#line-log .cid svg { flex: 0 0 auto; }
@media (max-width: 860px) {
  .line-split { grid-template-columns: 1fr; }
  .line-side { position: static; }
}
.case-page .field.view.diff .val { background: #fff6de; color: #6d5420; border: none; }
#line-link { display: inline-block; margin-top: 6px; font-weight: 800; font-size: 13.5px; }
.bar-status { margin-right: auto; font-weight: 800; color: var(--blue); }
.bar-note { margin-right: auto; font-weight: 800; color: #1f7a4d; }
.handset-flag {
  margin-right: auto; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 13.5px; color: #1c2b42;
}
.handset-flag input { width: 16px; height: 16px; accent-color: var(--blue); }
.bar-input {
  font-family: inherit; font-size: 13.5px; padding: 8px 10px; width: 180px;
  border: 1.5px solid var(--line); border-radius: 7px;
}
.task-card ol { list-style: none; margin: 0; padding: 0; }
.task-card li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.task-card li:first-child { border-top: none; padding-top: 0; }
.task-card li b { font-size: 14.5px; }
.task-card .state { font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #8ea0b5; white-space: nowrap; }
.task-card li.done b, .task-card li.done .state { color: #1f7a4d; }
.task-card li.now b { color: #003366; }
.task-card li.now .state { color: #4d94d4; }
.task-card .next {
  margin: 14px 0 0; padding: 12px 14px; background: #f4f7fb; border-radius: 8px;
  font-size: 14px; line-height: 1.45; color: #3c4a60;
}
.task-card .next b { color: #003366; }
.outcome { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.outcome button {
  text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-family: inherit; cursor: pointer;
}
.outcome button.now { border-color: #4d94d4; background: #f3f8fd; box-shadow: 0 0 0 3px rgba(77, 148, 212, .18); }
.outcome button b { display: block; color: #003366; font-size: 14px; }
.outcome button span { display: block; margin-top: 2px; font-weight: 600; font-size: 13px; color: #5c6b80; }
.dropup { position: relative; }
.dropup .upmenu {
  display: none; position: absolute; right: 0; bottom: calc(100% + 8px);
  min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 42, 78, .14); padding: 8px 12px;
}
.dropup.open .upmenu { display: block; }
.dropup .upmenu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-radius: 6px; font-family: inherit; font-weight: 700; font-size: 13.5px;
  padding: 8px 10px; cursor: pointer; color: #1c2b42;
}
.dropup .upmenu button:hover { background: #f4f7fb; }
.dropup .upmenu button.done { color: #1f7a4d; }
.dropup .upmenu button.done::before { content: "✓  "; }
.dropup .upmenu button.now { background: #e8f1fa; color: var(--blue); }
.dropup .upmenu button.alt { color: #6b7a90; }
.dropup .upmenu button.sep { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0; }
.stepcell { position: relative; white-space: nowrap; }
.stepcell .info {
  width: 18px; height: 18px; margin-left: 6px; border-radius: 50%;
  border: 1.5px solid #9aafc8; background: #fff; color: var(--blue);
  font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1;
  cursor: pointer; vertical-align: middle;
}
.stepcell .pop {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 5;
  min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 42, 78, .14); padding: 8px 12px;
}
.stepcell .pop.open { display: block; }
.stepcell .pop p { margin: 0; padding: 6px 0; font-size: 13px; font-weight: 700; color: #3c4a60; }
.stepcell .pop p.done { color: #1f7a4d; }
.stepcell .pop p.done::before { content: "✓  "; }
td.mono { font-variant-numeric: tabular-nums; font-weight: 800; }
.ext { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ext-pre { font-weight: 800; color: #3d5168; }
table.dir tbody tr.rowlink { cursor: pointer; }

.log-row { cursor: pointer; }
.log-row:hover td { background: #f4f8fc; }
.modal-form .field input, .modal-form .field textarea { background: #f7f9fc; }
.modal-form .case-fields { grid-template-columns: 1fr 1fr; }