/* ============================================================
   ST. VINCENT'S COLLEGE — PANELING & ADVISING MANAGEMENT SYSTEM
   Design system: collegiate navy + Veritas gold accent
   Headings: Sora · Body: Plus Jakarta Sans
   ============================================================ */

/* Fonts are stored in the fonts/ folder, so the system looks the same
   with or without internet (e.g. at the defense venue). SIL Open Font License. */
@font-face{ font-family:'Libre Baskerville'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/libre-baskerville-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Libre Baskerville'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/libre-baskerville-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Libre Baskerville'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/libre-baskerville-latin-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Source Sans 3'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Source Sans 3'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/source-sans-3-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Source Sans 3'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Source Sans 3'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Source Sans 3'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/source-sans-3-latin-800-normal.woff2') format('woff2'); }

/* ---------- TOKENS ---------- */
:root{
  --navy-900:#14204a;
  --navy-700:#1d3a8f;
  --blue-600:#2f5fd0;
  --blue-500:#3d6fe0;
  --blue-100:#e3ebfc;
  --blue-050:#f2f6fe;

  --gold-500:#d9a441;   /* Veritas gold — the one accent */
  --gold-100:#f9efd8;

  --ink-900:#1b2340;
  --ink-600:#52607f;
  --ink-400:#8b96ad;

  --bg:#eef2f9;
  --surface:#ffffff;
  --line:#d3dcec;          /* borders: dark enough to see on the light-blue panels */

  --success:#2f9e63;
  --warn:#ef8f3c;
  --danger:#d64550;

  --radius-lg:20px;
  --radius-md:12px;
  --radius-sm:8px;

  --shadow-card:0 8px 24px rgba(20,32,74,0.07);
  --shadow-pop:0 12px 32px rgba(20,32,74,0.14);

  --font-display:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3','Segoe UI',Arial,sans-serif;
}

/* ---------- RESET ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  height:100%;
  overflow:hidden;
}

body{
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--ink-900);
  margin:0;
  background:var(--bg);
}

/* campus photo, softened so the interface stays airy */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(238,242,249,0.86), rgba(226,233,246,0.9)),
    url("Background.jpg") no-repeat center center/cover;
  z-index:-1;
}

/* ---------- FOCUS & MOTION ---------- */
:focus-visible{
  outline:2px solid var(--blue-500);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ---------- SLIM SCROLLBARS ---------- */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:#c6d2ea;
  border-radius:99px;
}
*::-webkit-scrollbar-thumb:hover{ background:#a9bae0; }
*{ scrollbar-width:thin; scrollbar-color:#c6d2ea transparent; }

/* ---------- HEADER ---------- */
.header{
  height:60px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  color:var(--navy-900);
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.06em;
}

/* Veritas gold tick before the page title */
.header > div:not(.header-user)::before{
  content:"";
  display:inline-block;
  width:8px;
  height:22px;
  margin-right:12px;
  border-radius:99px;
  background:linear-gradient(180deg, var(--gold-500), #eac97e);
  vertical-align:-5px;
}

/* ---------- LAYOUT ---------- */
.layout{
  display:flex;
  height:calc(100vh - 60px);
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:236px;
  flex-shrink:0;
  background:linear-gradient(180deg, var(--navy-700), var(--navy-900));
  color:#fff;
  padding:20px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border-radius:0 22px 22px 0;
  box-shadow:6px 0 24px rgba(20,32,74,0.16);
}

.sidebar h3{
  margin:0 10px 12px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.22em;
  color:rgba(255,255,255,0.55);
}

.sidebar button{
  position:relative;
  background:transparent;
  border:none;
  padding:11px 14px;
  color:rgba(255,255,255,0.88);
  border-radius:var(--radius-md);
  text-align:left;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background 0.18s, transform 0.18s, color 0.18s;
}

.sidebar button:hover{
  background:rgba(255,255,255,0.12);
  transform:translateX(3px);
}

/* active pill: white with a gold notch */
.sidebar button.active{
  background:#fff;
  color:var(--navy-700);
  font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,0.18);
}

.sidebar button.active::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:60%;
  border-radius:99px;
  background:var(--gold-500);
}

.sidebar button.active:hover{
  background:#fff;
  transform:none;
}

.sidebar button.danger{
  background:rgba(214,69,80,0.22);
  color:#ffd9dc;
  text-align:center;
  font-weight:600;
}

.sidebar button.danger:hover{
  background:var(--danger);
  color:#fff;
  transform:none;
}

.logout-btn{ margin-top:auto; }

/* ---------- MAIN ---------- */
.main-content{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:24px 28px;
  overflow:hidden;
  min-height:0;
}

/* ---------- CARD (global scroll container) ---------- */
.card{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,0.97);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:26px 28px;
}

.card > *{ flex-shrink:0; }

/* nested cards (e.g. official group info) sit flat inside */
.card .card{
  flex:0 0 auto;
  overflow:visible;
  box-shadow:none;
  background:var(--blue-050);
  border:1px solid var(--line);
  padding:16px 18px;
  margin-bottom:14px;
}

/* card title carries the Veritas line */
.card > h3:first-child{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  color:var(--navy-900);
  margin:0 0 18px;
  padding-bottom:12px;
  position:relative;
}

.card > h3:first-child::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:48px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg, var(--gold-500), rgba(217,164,65,0));
}

/* secondary headings inside cards become quiet labels */
.card h3:not(:first-child),
.card h4{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-600);
  margin:18px 0 8px;
}

.card p{ color:var(--ink-600); margin:0 0 10px; }

label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink-600);
  margin:10px 0 2px;
}

/* ---------- INPUTS ---------- */
input, select, textarea{
  width:100%;
  margin:6px 0;
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink-900);
  background:#f6f8fd;
  border:1.5px solid transparent;
  border-radius:var(--radius-md);
  transition:border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

input::placeholder{ color:var(--ink-400); }

input:focus, select:focus, textarea:focus{
  background:#fff;
  border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(61,111,224,0.14);
  outline:none;
}

input[type="file"]{
  padding:10px;
  background:var(--blue-050);
  border:1.5px dashed #b9c9ec;
  cursor:pointer;
}

input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:8px 14px;
  border:none;
  border-radius:var(--radius-sm);
  background:var(--blue-600);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

/* ---------- BUTTONS ---------- */
button{
  padding:11px 18px;
  border:none;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color:#fff;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(47,95,208,0.32);
  filter:brightness(1.05);
}

button:active{ transform:translateY(0); }

button.secondary{
  background:#fff;
  color:var(--ink-600);
  border:1.5px solid var(--line);
}

button.secondary:hover{ box-shadow:0 6px 14px rgba(20,32,74,0.1); }

button.danger{
  background:linear-gradient(135deg, #e05561, var(--danger));
}

button.danger:hover{ box-shadow:0 6px 16px rgba(214,69,80,0.32); }

/* ---------- ROWS ---------- */
.row{ display:flex; gap:12px; }
.row > *{ flex:1; }

/* ---------- LISTS ---------- */
ul{ padding-left:0; margin:6px 0; }

li{
  list-style:none;
  padding:13px 16px;
  margin-bottom:8px;
  background:#fbfcff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  transition:border-color 0.15s, box-shadow 0.15s;
}

li:hover{
  border-color:#c8d6f2;
  box-shadow:0 4px 12px rgba(20,32,74,0.06);
}

/* ---------- BADGES ---------- */
.badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  background:var(--blue-100);
  margin-left:6px;
  font-size:12px;
  font-weight:600;
  color:var(--blue-600);
}

.small{ font-size:12.5px; color:var(--ink-600); }

.status-badge{
  display:inline-block;
  margin-top:10px;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  color:#fff;
}

.status-approved{ background:var(--success); }
.status-pending{ background:var(--warn); }
.status-rejected{ background:var(--danger); }
.status-done{ background:var(--blue-600); }       /* every panelist has scored */
.status-badge.status-waiting{ background:#e6eaf2; color:#3c4a66; }

/* ---------- LOGIN ---------- */
.login-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  padding:20px;
}

.login-card{
  width:400px;
  max-width:100%;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(10px);
  padding:34px 32px 30px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop);
  position:relative;
  overflow:hidden;
}

/* Veritas line across the top of the login card */
.login-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--gold-500), #eac97e, var(--gold-500));
}

.login-header{ text-align:center; margin-bottom:22px; }

.login-header h2{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  line-height:1.45;
  color:var(--navy-900);
}

.login-header p{
  margin:0;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--ink-600);
  text-transform:uppercase;
}

.form-group{ margin-bottom:14px; }

.password-box{ position:relative; }

.password-box span{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  opacity:0.65;
  transition:opacity 0.15s;
}

.password-box span:hover{ opacity:1; }

.login-btn{
  width:100%;
  margin-top:8px;
  padding:13px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.03em;
}

#errorBox{
  display:none;
  background:#fdeceb;
  color:#8a2830;
  padding:11px 14px;
  border-radius:var(--radius-md);
  margin-bottom:12px;
  font-size:13px;
  font-weight:500;
  border:1px solid #f5c9cc;
}


/* ---------- DASHBOARD STAT CARDS ---------- */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(175px, 1fr));
  gap:14px;
  margin-top:18px;
}

.stat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 16px 18px;
  text-align:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.stat-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:linear-gradient(90deg, var(--gold-500), #eac97e);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.22s;
}

.stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-pop);
  border-color:#c8d6f2;
}

.stat-card:hover::after{ transform:scaleX(1); }

.stat-value{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:800;
  color:var(--navy-700);
  line-height:1.2;
  word-break:break-word;
}

.stat-label{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-600);
  margin-top:6px;
}

/* ---------- TOASTS ---------- */
#toastHolder{
  position:fixed;
  top:20px;
  right:20px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  min-width:230px;
  max-width:340px;
  padding:13px 18px 13px 16px;
  border-radius:14px;
  background:var(--success);
  color:#fff;
  font-size:14px;
  font-weight:600;
  box-shadow:0 10px 28px rgba(20,32,74,0.25);
  border-left:4px solid rgba(255,255,255,0.5);
  opacity:0;
  transform:translateX(40px);
  transition:opacity 0.3s, transform 0.3s;
}

.toast.error{ background:var(--danger); }

.toast.show{
  opacity:1;
  transform:translateX(0);
}

/* ---------- DROPDOWNS (multi-select) ---------- */
.multi-dropdown{ position:relative; }

.dropdown-btn{
  height:44px;
  padding:0 16px;
  background:#f6f8fd;
  color:var(--ink-600);
  border:1.5px solid transparent;
  border-radius:var(--radius-md);
  min-width:170px;
  font-size:14px;
  font-weight:500;
  text-align:left;
}

.dropdown-btn:hover{
  transform:none;
  box-shadow:none;
  filter:none;
  border-color:var(--blue-500);
  background:#fff;
}

.dropdown-options{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:230px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:8px;
  box-shadow:var(--shadow-pop);
  z-index:100;
}

.dropdown-options label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  margin:0;
  font-size:14px;
  font-weight:500;
  color:var(--ink-900);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background 0.12s;
}

.dropdown-options label:hover{ background:var(--blue-050); }

.dropdown-options input{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--blue-600);
}

.member-inline-box{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.member-inline-box input{ width:230px; }

/* ---------- RUBRICS ---------- */
.rubric-section{
  margin:22px 0 10px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--navy-700);
  border-bottom:2px solid var(--blue-100);
  padding-bottom:6px;
}

.rubric-row{
  padding:10px 12px;
  margin-bottom:6px;
  background:#fbfcff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}

.rubric-line{
  display:grid;
  grid-template-columns:1fr 190px 200px;
  align-items:center;
  gap:12px;
  padding:10px 4px;
  border-bottom:1px solid var(--line);
}

.rubric-line:last-child{ border-bottom:none; }

.rubric-name{
  font-size:14px;
  line-height:1.4;
  color:var(--ink-900);
}

/* rating chips */
.rating-inline{ display:flex; gap:6px; }

.rating-inline button{
  width:36px;
  height:34px;
  padding:0;
  font-weight:700;
  font-size:13px;
  background:#fff;
  color:var(--blue-600);
  border:1.5px solid #c8d6f2;
  border-radius:10px;
}

.rating-inline button:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(47,95,208,0.2);
  border-color:var(--blue-500);
  filter:none;
}

.rating-inline button.active{
  background:linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color:#fff;
  border-color:var(--blue-600);
  box-shadow:0 4px 12px rgba(47,95,208,0.35);
}

.rating-group{ display:flex; gap:10px; }

.rating-group button{ flex:1; }

.comment-inline{
  width:100%;
  height:34px;
  padding:6px 10px;
  font-size:12.5px;
  background:#f6f8fd;
  border:1.5px solid transparent;
  border-radius:var(--radius-sm);
}

.mini-input{
  width:150px;
  height:34px;
  padding:5px 10px;
  font-size:12.5px;
  text-align:center;
}

.score-box{
  margin:0 0 14px;
  padding:12px 16px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--blue-050), var(--blue-100));
  color:var(--navy-700);
  font-weight:700;
  text-align:center;
  font-size:14px;
}

.current-group-label,
#current_group{
  margin-bottom:14px;
  padding:10px 16px;
  background:var(--gold-100);
  border:1px solid #eedcb2;
  border-radius:var(--radius-md);
  color:#8a6a1e;
  font-weight:600;
  font-size:13.5px;
}

/* ---------- MANUSCRIPT ROWS ---------- */
.manuscript-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.manuscript-row div{ font-size:14px; }

.manuscript-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.manuscript-actions button{
  padding:8px 14px;
  font-size:13px;
}

/* ---------- COMMENTS ---------- */
.comment-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.comment-label{ min-width:220px; font-weight:600; }

.comment-input{ flex:1; height:40px; resize:none; }

/* ---------- STUDENT GRADES ---------- */
.grade-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 20px;
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  transition:transform 0.18s, box-shadow 0.18s;
}

.grade-box:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
}

.grade-role{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  color:var(--navy-700);
}

.grade-value{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
}

.grade-pass{ color:var(--success); }
.grade-minor{ color:#1b93a8; }
.grade-major{ color:var(--warn); }
.grade-reject{ color:var(--danger); }

/* ============================================================
   PANEL EVALUATION — INDEPENDENT SCROLL PANES
   ============================================================ */

#eval.card{ overflow:hidden; }

.eval-layout{
  flex:1;
  display:flex;
  min-height:0;
  overflow:hidden;
  gap:16px;
}

.eval-left{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:12px;
}

.eval-left > button{
  position:sticky;
  bottom:0;
  width:100%;
  margin-top:12px;
  padding:13px;
  font-size:15px;
  box-shadow:0 -8px 16px rgba(20,32,74,0.1), 0 6px 16px rgba(47,95,208,0.3);
}

.eval-right{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

#panel_pdf_viewer{
  flex:1;
  width:100%;
  height:100%;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#e8ecf5;
}

/* generic split layouts keep growing correctly */
.table-container,
.list-container{
  flex:1;
  display:flex;
  min-height:0;
}


/* ---------- RESEARCH ROUTING PIPELINE ---------- */
.pipeline{
  display:flex;
  align-items:flex-start;
  gap:4px;
  margin:16px 0 6px;
  padding:18px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow-x:auto;
}

.pipe-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:86px;
  flex-shrink:0;
}

.pipe-dot{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
  background:#eef1f8;
  color:var(--ink-400);
  border:2px solid var(--line);
  transition:0.2s;
}

.pipe-step.done .pipe-dot{
  background:linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color:#fff;
  border-color:var(--blue-600);
  box-shadow:0 4px 12px rgba(47,95,208,0.3);
}

.pipe-label{
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-600);
  text-align:center;
  line-height:1.3;
}

.pipe-step.done .pipe-label{ color:var(--navy-700); }

.pipe-bar{
  flex:1;
  min-width:18px;
  height:3px;
  border-radius:99px;
  background:var(--line);
  margin-top:16px;
}

.pipe-bar.done{
  background:linear-gradient(90deg, var(--blue-500), var(--gold-500));
}

/* ---------- UNSCORED CRITERIA HIGHLIGHT ---------- */
.rubric-row.needs-score{
  border-color:var(--danger);
  background:#fdf1f1;
  box-shadow:0 0 0 3px rgba(214,69,80,0.12);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px){
  .layout{ flex-direction:column; }

  .sidebar{
    width:100%;
    flex-direction:row;
    overflow-x:auto;
    border-radius:0;
    padding:10px 12px;
    gap:8px;
  }

  .sidebar h3{ display:none; }

  .sidebar button{
    flex:0 0 auto;
    text-align:center;
    white-space:nowrap;
    padding:9px 14px;
  }

  .sidebar button.active::before{ display:none; }

  .logout-btn{ margin-top:0; margin-left:auto; }

  .main-content{ padding:14px; }

  .card{ padding:18px 16px; }

  .row{ flex-direction:column; }

  .header{ padding:0 16px; font-size:13px; }

  .eval-layout{
    flex-direction:column;
    overflow-y:auto;
  }

  .eval-left,
  .eval-right{
    flex:none;
    max-height:45vh;
  }

  .rubric-line{
    grid-template-columns:1fr;
    gap:8px;
  }
}

/* ============================================================
   BUSY INDICATORS — full-screen overlay for blocking actions,
   corner pill for background saves. Both respect the
   reduced-motion preference set near the top of this file.
   ============================================================ */

#busyOverlay{
  position:fixed;
  inset:0;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(20,32,74,0.45);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

#busyOverlay.show{
  opacity:1;
  pointer-events:auto;   /* blocks double-clicks while working */
}

#busyOverlay .busy-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:26px 34px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-pop);
}

#busyOverlay .busy-spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid var(--blue-100);
  border-top-color:var(--blue-600);
  animation:busySpin .8s linear infinite;
}

#busyOverlay .busy-label{
  font-size:14px;
  letter-spacing:.2px;
  color:var(--ink-900);
  font-family:var(--font-body);
}

@keyframes busySpin{ to{ transform:rotate(360deg); } }

#savingPill{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9997;
  padding:7px 14px;
  border-radius:999px;
  font-size:12px;
  font-family:var(--font-body);
  background:var(--surface);
  color:var(--ink-600);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}

#savingPill.show{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  #busyOverlay .busy-spinner{ animation-duration:2s; }
  #savingPill{ transition:none; }
}

@media (max-width:768px){
  #savingPill{ right:10px; bottom:10px; }
  #busyOverlay .busy-box{ padding:22px 26px; }
}

/* ============================================================
   ADVISER DIRECTORY + DEPARTMENT PICKER
   ============================================================ */

/* shown instead of the department dropdown when none exist yet */
.dept-empty{
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 12px;
  border:1px dashed var(--line);
  border-radius:var(--radius-sm);
  background:var(--blue-050);
}
.dept-empty button{ margin:0; padding:7px 14px; }

/* the clickable part of an adviser row */
.adviser-open{
  cursor:pointer;
  flex:1;
  min-width:0;
  padding:6px 8px;
  margin:-6px -8px;
  border-radius:var(--radius-sm);
  transition:background .15s ease;
}
.adviser-open:hover,
.adviser-open:focus-visible{
  background:var(--blue-050);
  outline:none;
}

.assign-head{
  margin:16px 0 8px;
  font-size:13px;
  color:var(--ink-600);
  text-transform:uppercase;
  letter-spacing:.4px;
}

.assign-items{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.assign-items li{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
}
.assign-item-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.assign-items .status-badge{ margin:0; }

.adviser-missing{ color:var(--warn); font-weight:600; }

.modal-body .status-banner{ margin:10px 0; }

/* ============================================================
   PDF MARK-UP — panel button, student inbox
   ============================================================ */

.eval-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.eval-topbar button{ margin:0; }

.nav-badge{
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:6px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
}

.new-chip{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  vertical-align:middle;
}

.markup-item.unread{ border-left:4px solid var(--danger); }

.markup-msg{
  margin-top:6px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  background:var(--gold-100);
  color:var(--ink-900);
  font-size:13px;
  white-space:pre-wrap;
}
body.dark .markup-msg{ background:#3b2f14; }

/* ============================================================
   STUDENT SETUP GUIDE — blurred page, guide card, highlighted step
   ============================================================ */

.main-content{ position:relative; }

.main-content.gate-on > .section.active{
  filter:blur(6px);
  pointer-events:none;
  user-select:none;
}

.setup-overlay{
  position:absolute;
  inset:0;
  z-index:40;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:70px 20px 20px;
  background:rgba(238,242,249,.45);
  animation:modalFade .2s ease;
}
body.dark .setup-overlay{ background:rgba(15,21,38,.5); }

.setup-overlay-card{
  width:420px;
  max-width:100%;
  padding:28px 28px 22px;
  text-align:center;
  border-radius:var(--radius-lg);
  border-top:5px solid var(--gold-500);
  background:var(--surface);
  box-shadow:var(--shadow-pop);
  animation:modalPop .22s ease;
}
.setup-overlay-card h3{
  margin:4px 0 8px;
  font-family:var(--font-display);
  color:var(--navy-900);
}
body.dark .setup-overlay-card h3{ color:var(--ink-900); }
.setup-overlay-card p{ margin:0 0 18px; line-height:1.5; }
.setup-overlay-card button{ width:100%; }
.setup-overlay-hint{ margin-top:12px; color:var(--ink-400); }

.setup-overlay-icon{
  width:46px;
  height:46px;
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--gold-100);
  border:2px solid var(--gold-500);
  color:#9a6a12;
  font-size:22px;
  font-weight:700;
}

/* sidebar: the step to do next glows, the rest fade back */
.sidebar button.nav-dim{ opacity:.4; filter:blur(1.2px); }
.sidebar button.nav-dim:hover{ opacity:.8; filter:none; }

.sidebar button.nav-spotlight{
  background:var(--gold-500);
  color:var(--navy-900);
  font-weight:600;
  box-shadow:0 0 0 0 rgba(217,164,65,.7);
  animation:navPulse 1.8s ease-out 3;
}
.sidebar button.nav-spotlight::after{
  content:attr(data-step);
  flex-shrink:0;
  padding:2px 8px;
  border-radius:999px;
  background:var(--navy-900);
  color:#fff;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  line-height:17px;
  padding:0 8px;
  white-space:nowrap;
}
.sidebar button.nav-spotlight.active{ background:#fff; color:var(--navy-900); }

@keyframes navPulse{
  0%  { box-shadow:0 0 0 0 rgba(217,164,65,.7); }
  70% { box-shadow:0 0 0 10px rgba(217,164,65,0); }
  100%{ box-shadow:0 0 0 0 rgba(217,164,65,0); }
}
@media (prefers-reduced-motion: reduce){
  .sidebar button.nav-spotlight{ animation:none; box-shadow:0 0 0 3px rgba(217,164,65,.6); }
}
@media (max-width:768px){
  .setup-overlay{ padding-top:30px; }
}

/* dashboard during Group Setup: everything blurred except the Group Request card */
.main-content.gate-spot #welcome > :not(.stats-grid),
.main-content.gate-spot #welcome .stats-grid > .stat-card:not(.stat-spotlight){
  filter:blur(5px);
  opacity:.55;
  pointer-events:none;
  user-select:none;
}

.stat-card.stat-spotlight{
  border:2px solid var(--gold-500);
  box-shadow:0 0 0 0 rgba(217,164,65,.7);
  animation:navPulse 1.8s ease-out 3;
  z-index:2;
}
.stat-card.stat-spotlight::after{ transform:scaleX(1); }

.stat-hint{
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--gold-500);
  color:var(--navy-900);
  font-size:12px;
  font-weight:700;
  display:inline-block;
}

@media (prefers-reduced-motion: reduce){
  .stat-card.stat-spotlight{ animation:none; box-shadow:0 0 0 3px rgba(217,164,65,.6); }
}

/* ============================================================
   HIGHLIGHT TIERS
   Tier 1 required · Tier 2 waiting on you · Tier 3 for your info
   ============================================================ */

.sidebar button.hl-t1,
.sidebar button.hl-t2,
.sidebar button.hl-t3,
.sidebar button.hl-quiet,
.sidebar button.nav-spotlight{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-family:var(--font-body);
  font-size:14px;
}
.sidebar button.hl-t1,
.sidebar button.hl-t2{
  background:var(--gold-500);
  color:var(--navy-900);
  font-weight:600;
}
.sidebar button.hl-t3.hl-t3::after{ min-width:20px; text-align:center; padding:0 6px; }
.sidebar button.hl-t1{ animation:navPulse 1.8s ease-out 3; }
.sidebar button.hl-t2.hl-escalate{ animation:navPulse 1.8s ease-out 3; }

.sidebar button.hl-t1::after,
.sidebar button.hl-t2::after,
.sidebar button.hl-t3::after,
.sidebar button.hl-quiet::after{
  content:attr(data-hl);
  flex-shrink:0;
  padding:0 8px;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
  line-height:17px;
  white-space:nowrap;
}
.sidebar button.hl-t1::after,
.sidebar button.hl-t2::after{ background:var(--navy-900); color:#fff; }

/* Tier 3, and Tier 2 in Quiet mode: no fill, just a small badge */
.sidebar button.hl-t3,
.sidebar button.hl-quiet{
  background:transparent;
  color:rgba(255,255,255,0.88);
  font-weight:500;
  animation:none;
}
.sidebar button.hl-t3::after,
.sidebar button.hl-quiet::after{
  background:rgba(217,164,65,.18);
  color:var(--gold-500);
  box-shadow:inset 0 0 0 1px rgba(217,164,65,.55);   /* outline without adding height */
}

.sidebar button.hl-t1.active,
.sidebar button.hl-t2.active{ background:#fff; color:var(--navy-900); animation:none; }
.sidebar button.hl-t3.active,
.sidebar button.hl-quiet.active{ background:#fff; color:var(--navy-900); }
.sidebar button.hl-t3.active::after,
.sidebar button.hl-quiet.active::after{ color:#9a6a12; }

/* dashboard card for an overdue Tier 2 keeps pulsing; others hold still */
.stat-card.hl-card{ animation:none; }
.stat-card.hl-card.hl-escalate{ animation:navPulse 1.8s ease-out 3; }

@media (prefers-reduced-motion: reduce){
  .sidebar button.hl-t1,
  .sidebar button.hl-t2.hl-escalate,
  .stat-card.hl-card.hl-escalate{ animation:none; box-shadow:0 0 0 3px rgba(217,164,65,.6); }
}


/* ============================================================
   CORNER DOCK — Light/Dark switch + Highlights menu
   ============================================================ */

#uiDock{
  position:fixed;
  right:15px;
  bottom:15px;
  z-index:9998;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
}

.theme-switch,
.hl-menu-btn{
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 12px;
  border-radius:999px;
  background:var(--surface);
  color:var(--ink-600);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  opacity:.92;
}
.theme-switch:hover,
.hl-menu-btn:hover{ opacity:1; transform:translateY(-1px); filter:none; }

.ts-label{ transition:color .2s; white-space:nowrap; }
.theme-switch:not(.is-dark) .ts-light,
.theme-switch.is-dark .ts-dark{ color:var(--navy-900); font-weight:700; }
body.dark .theme-switch.is-dark .ts-dark{ color:var(--gold-500); }

.ts-track{
  position:relative;
  width:36px;
  height:20px;
  border-radius:999px;
  background:var(--blue-100);
  transition:background .2s;
  flex-shrink:0;
}
.ts-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--gold-500);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .2s;
}
.theme-switch.is-dark .ts-track{ background:var(--navy-700); }
.theme-switch.is-dark .ts-thumb{ transform:translateX(16px); }

.hl-menu{ position:relative; }
.hl-menu-btn strong{ color:var(--navy-900); }
body.dark .hl-menu-btn strong{ color:var(--gold-500); }
.hl-caret{ font-size:10px; opacity:.7; }

.hl-pop{
  position:absolute;
  right:0;
  bottom:44px;
  width:260px;
  padding:10px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-pop);
  animation:modalPop .16s ease;
}
.hl-pop[hidden]{ display:none; }
.hl-pop-title{
  padding:2px 6px 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ink-400);
}
.hl-opt{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  padding:9px 8px;
  margin:0;
  text-align:left;
  background:transparent;
  color:var(--ink-900);
  border-radius:var(--radius-sm);
  font-weight:500;
}
.hl-opt:hover{ background:var(--blue-050); transform:none; box-shadow:none; filter:none; }
.hl-opt.selected{ background:var(--blue-050); }
.hl-opt strong{ display:block; font-size:13px; }
.hl-opt-text{ display:block; font-size:12px; color:var(--ink-600); margin-top:1px; }
.hl-radio{
  width:14px;
  height:14px;
  margin-top:2px;
  border-radius:50%;
  border:2px solid var(--ink-400);
  flex-shrink:0;
}
.hl-opt.selected .hl-radio{
  border-color:var(--gold-500);
  background:radial-gradient(circle, var(--gold-500) 45%, transparent 50%);
}
.hl-pop-note{
  margin-top:6px;
  padding:8px 6px 2px;
  border-top:1px solid var(--line);
  font-size:11.5px;
  color:var(--ink-400);
}

@media (max-width:768px){
  #uiDock{ right:10px; bottom:10px; gap:6px; }
  .theme-switch, .hl-menu-btn{ height:32px; padding:0 10px; font-size:11.5px; }
}

/* pending requests stand out in the Approvals list */
li.approval-row.approval-waiting{
  border-left:4px solid var(--gold-500);
  background:var(--gold-100);
}
body.dark li.approval-row.approval-waiting{ background:#2c2616; }

/* setup card on My Account */
.setup-card{
  margin-bottom:16px;
  padding:16px 18px;
  border-radius:var(--radius-md);
  border:1px solid #ecd9a8;
  border-left:5px solid var(--gold-500);
  background:var(--gold-100);
}
.setup-card p{ margin:6px 0 0; }
.setup-step{
  font-size:11px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#9a6a12;
}
.setup-title{
  font-family:var(--font-display);
  font-size:18px;
  color:var(--navy-900);
  margin-top:2px;
}
body.dark .setup-card{ background:#3b2f14; border-color:#5a4520; }
body.dark .setup-title{ color:var(--ink-900); }
body.dark .setup-step{ color:#f0c674; }

/* ---- error details under a toast ---- */
.toast-detail{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.3);
  font-size:11.5px;
  font-weight:400;
  opacity:.9;
  word-break:break-word;
}

/* ---- student: Upload & History in one section ---- */
.upload-box{
  padding:16px 18px;
  margin-bottom:18px;
  border:1px dashed var(--line);
  border-radius:var(--radius-md);
  background:var(--blue-050);
}
.upload-box h4{ margin:0 0 4px; }
.upload-box p{ margin:0 0 12px; }
.upload-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.upload-row input[type=file]{ flex:1; min-width:200px; margin:0; }
.upload-row button{ margin:0; }
.history-head{ margin:4px 0 10px; }

/* ============================================================
   PANELIST EVALUATION — mark-up tools, rubric toggle, focus mode
   ============================================================ */

.eval-tools{ display:flex; gap:8px; flex-wrap:wrap; }
.eval-tools button{ margin:0; padding:8px 13px; font-size:13px; }
.eval-tools .note-btn{ background:var(--gold-500); color:var(--navy-900); }
.eval-tip{ margin:6px 0 10px; color:var(--ink-600); }

.eval-msg-label{ display:block; margin-top:14px; }
#eval_msg{ margin-top:4px; }

/* rubric beside the manuscript: name and score on one line, comment below,
   so nothing runs past the edge and the manuscript gets more width */
#eval .eval-left{ flex:0 0 42%; min-width:360px; }
#eval .eval-right{ flex:1; min-width:0; }
#eval .rubric-line{
  grid-template-columns:minmax(0, 1fr) auto;
  row-gap:8px;
}
#eval .rubric-line .comment-cell{ grid-column:1 / -1; }
#eval .rating-inline{ flex-wrap:nowrap; }

/* hide the rubric: the manuscript takes the whole width */
.eval-layout.rubric-hidden .eval-left{ display:none; }

/* focus: no menu, no header, minimal padding */
body.focus-mode .sidebar,
body.focus-mode .header,
body.focus-mode #uiDock{ display:none; }
body.focus-mode .layout{ height:100vh; }
body.focus-mode .main-content{ padding:10px; }
body.focus-mode #eval.card{ padding:14px 16px; }

/* ============================================================
   SIGN IN AGAIN — over everything, including the loading overlay
   ============================================================ */

.reauth-overlay{
  position:fixed;
  inset:0;
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(20,32,74,.55);
  backdrop-filter:blur(4px);
  animation:modalFade .2s ease;
}
.reauth-card{
  width:380px;
  max-width:100%;
  padding:26px 26px 20px;
  border-radius:var(--radius-lg);
  border-top:5px solid var(--gold-500);
  background:var(--surface);
  box-shadow:var(--shadow-pop);
  animation:modalPop .22s ease;
}
.reauth-icon{ font-size:28px; text-align:center; }
.reauth-card h3{
  margin:6px 0 6px;
  text-align:center;
  font-family:var(--font-display);
  color:var(--navy-900);
}
body.dark .reauth-card h3{ color:var(--ink-900); }
.reauth-card p{ margin:0 0 14px; line-height:1.5; text-align:center; }
.reauth-card label{ display:block; margin-top:8px; }
.reauth-card button{ width:100%; margin-top:12px; }
.reauth-card button.secondary{ margin-top:8px; }
.reauth-error{
  margin-top:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  background:#fdf1f2;
  color:var(--danger);
  font-size:13px;
}
body.dark .reauth-error{ background:#3a1d22; }
.reauth-note{ margin-top:12px; text-align:center; color:var(--ink-400); }

/* ============================================================
   IN-APP DIALOGS (replace the browser's confirm / alert / prompt)
   ============================================================ */

.ui-dialog-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(20,32,74,.45);
  backdrop-filter:blur(3px);
  animation:modalFade .18s ease;
}
.ui-dialog{
  width:420px;
  max-width:100%;
  max-height:88vh;
  overflow-y:auto;
  padding:22px 24px 18px;
  border-radius:var(--radius-lg);
  border-top:4px solid var(--blue-500);
  background:var(--surface);
  box-shadow:var(--shadow-pop);
  animation:modalPop .2s ease;
}
.ui-dialog.is-danger{ border-top-color:var(--danger); }
.ui-dialog h4{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:17px;
  color:var(--navy-900);
}
body.dark .ui-dialog h4{ color:var(--ink-900); }
.ui-dialog-msg{ margin:0 0 12px; font-size:14px; line-height:1.55; color:var(--ink-600); }
.ui-dialog label{ display:block; margin-top:6px; }
.ui-dialog textarea{ width:100%; resize:vertical; }
.ui-dialog-list{
  margin:0 0 12px;
  padding:10px 12px 10px 28px;
  border-radius:var(--radius-sm);
  background:var(--blue-050);
  font-size:13.5px;
  line-height:1.6;
}
.ui-dialog-err{ margin-top:6px; font-size:13px; color:var(--danger); }
.ui-dialog-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.ui-dialog-foot button{ margin:0; }

/* ============================================================
   DASHBOARDS — recent activity, clickable progress steps
   ============================================================ */

.activity{ margin-top:24px; }
.activity h4{ margin:0 0 10px; }
.activity-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.activity-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s, transform .15s;
}
.activity-item:hover,
.activity-item:focus-visible{ border-color:var(--gold-500); transform:translateX(2px); outline:none; }
.activity-icon{
  flex-shrink:0;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:14px;
  font-weight:700;
  background:var(--blue-050);
  color:var(--blue-600);
}
.activity-icon.kind-eval{ background:var(--gold-100); color:#9a6a12; }
.activity-icon.kind-approve{ background:#e6f5ec; color:var(--success); }
.activity-icon.kind-mark{ background:#fdf1f2; color:var(--danger); }
.activity-icon.kind-archive{ background:#eef0f5; color:var(--ink-600); }
body.dark .activity-icon.kind-eval{ background:#3b2f14; color:#f0c674; }
body.dark .activity-icon.kind-approve{ background:#14291f; color:#6ee7a5; }
body.dark .activity-icon.kind-mark{ background:#3a1d22; color:#f5a3aa; }
body.dark .activity-icon.kind-archive{ background:#232c45; color:var(--ink-600); }
.activity-text{ flex:1; min-width:0; font-size:14px; color:var(--ink-900); }
.activity-time{ flex-shrink:0; font-size:12px; color:var(--ink-400); }
.activity-empty{ margin:0; padding:14px; border:1px dashed var(--line); border-radius:var(--radius-md); }

.pipe-step{ cursor:pointer; border-radius:var(--radius-md); transition:background .15s; }
.pipe-step:hover,
.pipe-step:focus-visible{ background:var(--blue-050); outline:none; }
.pipe-date{ margin-top:2px; font-size:11px; color:var(--ink-400); }

/* ---- header: who is signed in ---- */
.header-user{
  letter-spacing:normal;
  text-transform:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 12px 5px 6px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  font-family:var(--font-body);
  max-width:320px;
}
.header-user.is-link{ cursor:pointer; }
.header-user.is-link:hover{ border-color:var(--gold-500); }
.hu-avatar{
  width:30px;
  height:30px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--navy-900);
  color:#fff;
  font-size:12px;
  font-weight:700;
  border:2px solid var(--gold-500);
}
.hu-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.hu-text strong{ font-size:13.5px; color:var(--navy-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hu-text small{ font-size:11.5px; color:var(--ink-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.dark .hu-text strong{ color:var(--ink-900); }

/* ---- status filter chips (Approvals) ---- */
.filter-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.filter-chips .chip{
  margin:0;
  padding:6px 12px;
  border-radius:999px;
  background:var(--blue-050);
  color:var(--ink-600);
  border:1px solid var(--line);
  font-size:12.5px;
  font-weight:600;
}
.filter-chips .chip::after{
  content:attr(data-n);
  margin-left:6px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(20,32,74,.08);
  font-size:11px;
}
.filter-chips .chip:hover{ transform:none; box-shadow:none; filter:none; border-color:var(--blue-500); }
.filter-chips .chip.active{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.filter-chips .chip.active::after{ background:rgba(255,255,255,.2); }
body.dark .filter-chips .chip.active{ background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); }

/* ---- Routing Slip: groups by batch with progress ---- */
#routing_list{ list-style:none; padding:0; margin:8px 0 0; }
#routing_list li.batch-header strong{ font-size:14px; color:var(--navy-900); }
body.dark #routing_list li.batch-header strong{ color:var(--ink-900); }
.routing-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 190px 150px;
  align-items:center;
  gap:14px;
  margin:0 0 6px 22px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.routing-row:hover,
.routing-row:focus-visible{ border-color:var(--blue-500); outline:none; }
.routing-row.selected{ border-color:var(--gold-500); background:var(--gold-100); box-shadow:inset 4px 0 0 var(--gold-500); }
body.dark .routing-row.selected{ background:#2c2616; }
.rr-main{ display:flex; flex-direction:column; min-width:0; }
.rr-main strong{ font-size:14px; color:var(--ink-900); }
.rr-main .small{ color:var(--ink-600); }
.rr-progress{ display:flex; align-items:center; gap:8px; }
.rr-bar{ flex:1; height:6px; border-radius:999px; background:var(--blue-100); overflow:hidden; }
.rr-fill{ height:100%; border-radius:999px; background:var(--blue-500); }
.rr-fill.kind-done{ background:var(--success); }
.rr-status{
  justify-self:end;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  background:var(--blue-050);
  color:var(--blue-600);
}
.rr-status.kind-idle{ background:transparent; color:var(--ink-400); border:1px dashed var(--line); }
.rr-status.kind-done{ background:#e6f5ec; color:var(--success); }
body.dark .rr-status.kind-done{ background:#14291f; color:#6ee7a5; }

/* ============================================================
   Edit Panel dialog + Panel Scores reset
   ============================================================ */
.ui-dialog .panel-picker-dialog{ flex-direction:column; gap:8px; margin:6px 0 12px; }
.ui-dialog .panel-picker-dialog .panel-option{ display:flex; margin:0; }
.ui-dialog .panel-option-name{ flex:1; }
.scored-tag{ font-weight:700; color:var(--success); }
.panel-option.checked .scored-tag{ color:var(--gold-500); }
.ui-dialog select{ width:100%; }
.score-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.score-line .small-btn{ padding:6px 12px; font-size:12.5px; flex-shrink:0; }
.score-invalid{ border-left:4px solid var(--danger); }
.score-invalid .grade-value{ color:var(--danger); }

/* ============================================================
   Rubric lock banner (admin)
   ============================================================ */
.lock-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:4px 0 14px; padding:12px 16px;
  border-radius:var(--radius-md);
  background:#fff6e3; border:1px solid #ecd39a; border-left:4px solid var(--gold-500);
  color:#5c4400;
}
.lock-banner strong{ display:block; margin-bottom:2px; }
.lock-banner .small{ color:inherit; opacity:.85; }
.lock-banner button{ flex-shrink:0; }
.lock-banner.is-open{ background:var(--blue-050); border-color:#c3d2ef; border-left-color:var(--blue-500); color:var(--navy-900); }
body.dark .lock-banner{ background:#2a2412; border-color:#5a4a1e; color:#f1dca6; }
body.dark .lock-banner.is-open{ background:#1c2540; border-color:#34436b; color:var(--ink-900); }
#rubrics input:disabled, #rubrics button:disabled{ opacity:.55; cursor:not-allowed; }

/* ============================================================
   Scores with their formula, dean profile box, cleaner batches
   ============================================================ */
.grade-formula{ margin-top:4px; font-size:12.5px; color:var(--ink-600); font-weight:400; font-family:inherit; }
.grade-formula em{ font-style:italic; }
body.dark .grade-formula{ color:var(--ink-400); }
.score-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.score-table th, .score-table td{ padding:9px 10px; border-bottom:1px solid var(--line); text-align:center; vertical-align:top; }
.score-table th{ font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-600); background:var(--blue-050); }
.score-table .l{ text-align:left; }
body.dark .score-table th{ background:#1c2540; }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); }

.profile-prompt{
  position:fixed; right:16px; bottom:64px; z-index:9000; width:320px; max-width:calc(100vw - 32px);
  padding:16px 16px 14px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--gold-500);
  box-shadow:var(--shadow-pop); animation:modalPop .2s ease;
}
.profile-prompt .pp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.profile-prompt .pp-head strong{ font-family:var(--font-display); font-size:15px; color:var(--navy-900); }
body.dark .profile-prompt .pp-head strong{ color:var(--ink-900); }
.profile-prompt .pp-x{ background:none; border:0; box-shadow:none; color:var(--ink-400); font-size:20px; padding:0 4px; width:auto; }
.profile-prompt label{ display:block; margin:8px 0 3px; font-size:12px; font-weight:600; }
.profile-prompt input{ width:100%; }
.profile-prompt .pp-err{ color:var(--danger); margin-top:6px; }
.profile-prompt .pp-foot{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.profile-prompt .pp-foot button{ width:auto; padding:8px 14px; }

li.batch-header.batch-clean{ display:flex; align-items:center; gap:14px; cursor:pointer; }
li.batch-header.batch-clean .batch-toggle{ font-size:14px; width:18px; text-align:center; }
li.batch-header.batch-clean .batch-title{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.batch-name-row{ display:flex; align-items:center; gap:6px; }
.batch-name-text{ font-size:15.5px; }
.icon-btn{ background:none !important; border:0 !important; box-shadow:none !important; padding:2px 6px !important; width:auto !important;
  color:var(--ink-400) !important; font-size:14px; border-radius:6px; cursor:pointer; }
.icon-btn:hover{ color:var(--blue-600) !important; background:var(--blue-050) !important; }
.batch-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.meta-chip{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; background:#fff; color:var(--blue-600); border:1px solid #c3d1ee; }
body.dark .meta-chip{ background:#1f2c52; color:#9db6ff; border-color:#33447a; }
.batch-date{ margin-left:4px; }
.batch-progress{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.batch-progress .rr-bar{ display:block; flex:none; width:140px; }
.batch-progress .rr-fill{ display:block; }
@media (max-width:640px){ .batch-progress .rr-bar{ width:70px; } }

/* continuous mark-up: "your last marks are loaded" */
.eval-prev-note{ margin:0 0 8px; padding:8px 12px; border-radius:var(--radius-sm); font-size:12.5px;
  background:#e3f4ec; color:#1d5c3f; border:1px solid #b8e0cb; }
body.dark .eval-prev-note{ background:#16362a; color:#9fe0bf; border-color:#23543f; }

/* ============================================================
   Signatories, routing people, dates, dean approvals
   ============================================================ */
li.role-header{ display:flex; align-items:center; gap:10px; list-style:none; margin:14px 0 6px; padding:0 4px;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-600); }
.cred-box{ display:grid; gap:8px; margin-top:6px; padding:12px 14px; border-radius:var(--radius-md); background:var(--blue-050); border:1px solid var(--line); }
.cred-box div{ display:flex; justify-content:space-between; gap:12px; align-items:center; }
.cred-box .mono{ font-family:Consolas, 'Courier New', monospace; font-size:15px; letter-spacing:.04em; user-select:all; }
body.dark .cred-box{ background:#1c2540; }
select.routing-person{ width:200px; max-width:100%; }
.routing-signed{ color:var(--success); font-weight:600; margin-top:4px; }
.routing-returned{ color:var(--danger); font-weight:700; font-size:12.5px; }
.routing-dates{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin-bottom:14px; }
.routing-dates > div{ padding:10px 14px; border-radius:var(--radius-md); background:var(--blue-050); border:1px solid var(--line); }
.routing-dates span{ display:block; margin-bottom:2px; }
body.dark .routing-dates > div{ background:#1c2540; }
.routing-step.returned{ border-left-color:var(--danger) !important; }
.routing-step.returned .list-meta{ color:var(--danger); font-weight:600; }
.upload-for-label{ margin:0; font-weight:600; font-size:13px; white-space:nowrap; }
#s_for{ max-width:260px; }

/* Email Outbox (admin) */
.outbox-item{ list-style:none; }
.outbox-item details{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); margin-bottom:8px; }
.outbox-item summary{ display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 14px; cursor:pointer; list-style:none; }
.outbox-item summary::-webkit-details-marker{ display:none; }
.ob-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ob-side{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.ob-body{ margin:0; padding:12px 14px; border-top:1px solid var(--line); white-space:pre-wrap; font-family:inherit; font-size:13px; color:var(--ink-600); }

/* word values on dashboard cards (APPROVED, Final Defense) stay on one line */
.stat-value.stat-text{ font-size:24px; line-height:1.2; padding:6px 4px 0; overflow-wrap:normal; word-break:normal; }

/* System status (admin) */
.sys-recheck{ width:auto !important; align-self:flex-start; margin:10px 0 4px; padding:8px 16px; }
.sys-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.sys-card{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:var(--radius-md);
  background:var(--blue-050); border:1px solid var(--line); border-left:4px solid var(--blue-500); }
.sys-card strong{ font-size:22px; font-family:var(--font-display); color:var(--navy-900); }
.sys-card em{ font-style:normal; font-size:12px; color:var(--ink-600); }
.sys-card.sys-ok{ border-left-color:var(--success); }
.sys-card.sys-mid{ border-left-color:var(--gold-500); }
.sys-card.sys-bad{ border-left-color:var(--danger); }
body.dark .sys-card{ background:#1c2540; }
body.dark .sys-card strong{ color:var(--ink-900); }

/* ============================================================
   WIDE LAYOUTS: two panes on laptop and desktop screens
   ============================================================ */
.wide-split{ display:block; }
.wide-split > .pane{ min-width:0; }
@media (min-width:1180px){
  .wide-split{ display:grid; gap:26px; align-items:start; }
  .wide-split.split-form{ grid-template-columns:minmax(300px, 400px) minmax(0, 1fr); }
  .wide-split.split-even{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .wide-split.split-detail{ grid-template-columns:minmax(300px, 380px) minmax(0, 1fr); }
  .wide-split.split-dash{ grid-template-columns:minmax(0, 1.55fr) minmax(300px, 1fr); }

  /* the form side stays in view while the list scrolls */
  .wide-split.split-form > .pane-a{ position:sticky; top:0; padding:16px 18px; border-radius:var(--radius-lg);
    background:var(--blue-050); border:1px solid var(--line); }
  body.dark .wide-split.split-form > .pane-a{ background:#18203a; }
  .wide-split.split-form > .pane-a .row{ flex-direction:column; gap:0; }
  .wide-split.split-form > .pane-a .row > *{ width:100%; }
  .wide-split > .pane-b > .toolbar:first-child, .wide-split > .pane-b > h4:first-child{ margin-top:0; }
  .wide-split.split-detail > .pane-b{ position:sticky; top:0; }

  /* routing: compact group rows beside the slip */
  #routing .pane-a .routing-row{ grid-template-columns:minmax(0, 1fr) 90px; row-gap:6px; }
  #routing .pane-a .routing-row .rr-status{ grid-column:1 / -1; justify-self:start; }
  #routing .pane-a .rr-progress .rr-bar{ display:none; }
  #routing .pane-b #routing_box{ margin-top:0 !important; }

  /* dashboards: activity column */
  .split-dash .pane-b .activity{ margin-top:0; }
  .split-dash .pane-a .stats-grid{ grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }

  /* panelist groups and signatory papers use the width as a card grid */
  #pa_groups, #sig_list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  #pa_groups > li, #sig_list > li{ margin:0; }
  #pa_groups > li .manuscript-row, #sig_list > li .manuscript-row{ flex-direction:column; align-items:stretch; }
  #pa_groups > li .manuscript-row > :first-child, #sig_list > li .manuscript-row > :first-child{ flex:none; }
  #pa_groups > li .manuscript-actions, #sig_list > li .manuscript-actions{ justify-content:flex-start; }
}

/* Approvals: the chosen request, with its file */
#ap_detail{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px; background:var(--surface); }
.ap-detail-head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:8px; flex-wrap:wrap; }
.ap-title{ margin:0 0 6px; font-size:17px; font-weight:700; text-transform:none; letter-spacing:0; font-family:var(--font-display); color:var(--navy-900); }
body.dark .ap-title{ color:var(--ink-900); }
.ap-pdf{ width:100%; height:62vh; border:1px solid var(--line); border-radius:var(--radius-md); margin-top:12px; background:#525659; }
#approval_list li.approval-row{ cursor:pointer; }
#approval_list li.approval-row.selected{ outline:2px solid var(--gold-500); outline-offset:-2px; }
@media (max-width:1179px){ .ap-pdf{ height:420px; } }

/* collapsible sidebar */
.nav-toggle{ width:34px !important; height:34px; padding:0 !important; margin-right:12px; border-radius:10px;
  background:rgba(20,32,74,.08) !important; color:var(--navy-900) !important; border:0 !important; box-shadow:none !important;
  font-size:17px; line-height:34px; flex-shrink:0; cursor:pointer; }
.nav-toggle:hover{ background:rgba(20,32,74,.16) !important; }
body.dark .nav-toggle{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
.header{ justify-content:flex-start !important; }
.header .header-user{ margin-left:auto; }
body.nav-collapsed .sidebar{ display:none; }

/* ============================================================
   RESPONSIVE FIXES: rows wrap instead of overflowing, phones
   scroll the whole page, and the bottom dock never hides content
   ============================================================ */
/* list rows: the details take the space, buttons wrap underneath when it runs out */
.manuscript-row{ flex-wrap:wrap; }
.manuscript-row > :first-child{ flex:1 1 260px; min-width:0; }
.manuscript-actions{ flex-wrap:wrap; flex-shrink:1; justify-content:flex-end; }
.account-main > div:last-child{ min-width:0; }
.mini-input{ max-width:100%; }
.group-fields .mini-input{ text-align:left; }
.group-fields .mini-user{ width:200px; }
.field-hint{ margin:4px 0 0; }
@media (max-width:640px){
  li.group-row{ margin-left:0; }
  .group-row .account-main{ align-items:flex-start; }
  .group-fields{ flex-direction:column; align-items:stretch; flex:1; }
  .group-fields .mini-input{ width:100% !important; }
  .group-fields .badge{ align-self:flex-start; }
}
.grade-box, .score-line, .lock-banner{ flex-wrap:wrap; }
.grade-box > :first-child, .score-line > :first-child{ min-width:0; flex:1 1 240px; }
.list-meta, .rr-main .small{ overflow-wrap:anywhere; }
li strong, .grade-value{ overflow-wrap:anywhere; }

/* medium screens (tablets, small laptops) with the sidebar open */
@media (max-width:1100px){
  .sidebar{ width:212px; }
  .rubric-line{ grid-template-columns:1fr; gap:8px; }
  .routing-row{ grid-template-columns:minmax(0, 1fr) auto; row-gap:6px; }
  .routing-row .rr-progress{ grid-column:1 / -1; grid-row:2; }
  .routing-row .rr-status{ grid-column:2; grid-row:1; }
}

/* phones and small tablets */
@media (max-width:768px){
  html, body{ height:auto; overflow-x:hidden; overflow-y:auto; }
  .header{ position:sticky; top:0; z-index:60; padding:0 12px; gap:8px; }
  .header > div:not(.header-user){ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  .header > div:not(.header-user)::before{ margin-right:8px; }
  .nav-toggle{ display:none; }
  .header-user{ flex-shrink:0; max-width:46vw; }
  .layout{ height:auto; min-height:calc(100vh - 60px); }
  .sidebar{ position:sticky; top:60px; z-index:50; width:100%; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 85%, transparent); }
  .sidebar::-webkit-scrollbar{ display:none; }
  .sidebar button:last-of-type{ margin-right:40px; }
  body.nav-collapsed .sidebar{ display:flex; }
  .main-content{ overflow:visible; padding:14px 12px 84px; }
  .card, .card.section{ flex:none; overflow:visible; min-height:0; }
  #eval.card{ overflow:visible; }
  .eval-layout{ overflow:visible; }
  .eval-left, .eval-right{ max-height:none; overflow:visible; padding-right:0; }
  #eval .eval-left, #eval .eval-right{ flex:none; min-width:0; }
  .eval-left > button{ bottom:62px; }
  .rubric-line{ grid-template-columns:1fr; }
  #panel_pdf_viewer{ height:70vh; min-height:420px; }
  .wide-split.split-form > .pane-a{ position:static; }
  .toolbar{ flex-wrap:wrap; }
  .toolbar-actions{ flex-wrap:wrap; flex:1 1 100%; justify-content:flex-start; }
  .toolbar .search-input{ flex:1 1 180px; min-width:0; max-width:none; }
  .routing-row{ margin-left:8px; }
  .comment-row{ flex-wrap:wrap; }
  .comment-label{ min-width:0; flex:1 1 100%; }
  .stat-value{ font-size:30px; }
}

@media (max-width:480px){
  .hu-text{ display:none; }
  .header-user{ padding:4px !important; }
  .manuscript-actions{ justify-content:flex-start; }
  .manuscript-actions button{ flex:1 1 auto; }
  li{ padding:12px; }
  .card{ padding:16px 14px; }
  .rating-inline{ flex-wrap:wrap; }
}

/* ============================================================
   LOGIN: account-type picker (grouped list, replaces the plain dropdown)
   ============================================================ */
.login-card{ overflow:visible; }
.login-card::before{ border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.login-mark{ display:inline-block; margin-bottom:10px; padding:4px 12px; border-radius:999px;
  background:var(--navy-900); color:#fff; font-size:12px; font-weight:700; letter-spacing:.18em; }
.role-native{ position:absolute !important; width:1px !important; height:1px !important; opacity:0; pointer-events:none; margin:0 !important; padding:0 !important; }
.role-picker{ position:relative; margin:6px 0; }
.role-btn{ width:100%; display:flex; align-items:center; gap:12px; padding:9px 14px 9px 10px !important;
  background:#f6f8fd !important; color:var(--ink-900) !important; border:1.5px solid transparent !important;
  border-radius:var(--radius-md) !important; box-shadow:none !important; text-align:left; font-weight:400 !important;
  cursor:pointer; transform:none !important; filter:none !important; }
.role-btn:hover{ border-color:#c8d6f2 !important; }
.role-btn[aria-expanded="true"], .role-btn:focus-visible{ border-color:var(--blue-500) !important; background:#fff !important; outline:none; }
.role-btn-text{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.role-btn-text strong, .role-option-text strong{ font-size:14px; font-weight:600; color:var(--ink-900); }
.role-btn-text small, .role-option-text small{ font-size:12px; color:var(--ink-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role-caret{ width:9px; height:9px; border-right:2px solid var(--ink-600); border-bottom:2px solid var(--ink-600);
  transform:rotate(45deg) translate(-2px, -2px); transition:transform .15s; flex-shrink:0; margin-right:4px; }
.role-btn[aria-expanded="true"] .role-caret{ transform:rotate(-135deg) translate(-2px, -2px); }
.role-dot{ width:32px; height:32px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--navy-900); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.03em; box-shadow:inset 0 -2px 0 var(--gold-500); }
.role-menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; max-height:min(480px, 70vh); overflow-y:auto;
  padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-pop); }
.role-menu.up{ top:auto; bottom:calc(100% + 6px); }
.role-group{ padding:8px 10px 3px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); }
.role-group:first-child{ padding-top:4px; }
.role-option{ display:flex; align-items:center; gap:12px; padding:6px 10px; border-radius:10px; cursor:pointer; outline:none; }
.role-option-text{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.role-option:hover, .role-option:focus{ background:var(--blue-050); }
.role-option[aria-selected="true"]{ background:#fff6e3; }
.role-option[aria-selected="true"]::after{ content:""; width:6px; height:11px; margin-right:6px; flex-shrink:0;
  border-right:2.5px solid var(--gold-500); border-bottom:2.5px solid var(--gold-500); transform:rotate(45deg); }
body.dark .role-btn{ background:#1c2540 !important; }
body.dark .role-btn[aria-expanded="true"], body.dark .role-btn:focus-visible{ background:#1c2540 !important; }
body.dark .role-option:hover, body.dark .role-option:focus{ background:#1c2540; }
body.dark .role-option[aria-selected="true"]{ background:#2c2616; }
body.dark .role-dot{ background:#2a3866; }
body.dark .login-mark{ background:var(--gold-500); color:var(--navy-900); }
@media (max-width:768px){
  .login-wrapper{ min-height:100vh; height:auto; padding:24px 14px 80px; }
  .login-card{ padding:28px 20px 24px; }
}

/* ============================================================
   CONNECTION BAR: offline / back online
   ============================================================ */
#netBar{ position:fixed; left:50%; top:68px; z-index:9500; width:min(760px, calc(100vw - 24px));
  display:flex; align-items:center; gap:12px; padding:11px 14px 11px 16px; border-radius:14px;
  font-size:13.5px; line-height:1.4; box-shadow:0 12px 32px rgba(20,32,74,.22);
  transform:translate(-50%, -14px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
#netBar.show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
#netBar.net-offline{ background:#3a1d20; color:#ffe3e5; border:1px solid #7c3038; }
#netBar.net-online{ background:#e6f5ec; color:#14532d; border:1px solid #9fd9b5; }
#netBar .net-text{ flex:1; min-width:0; }
#netBar .net-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
#netBar.net-offline .net-dot{ background:#ff6b74; box-shadow:0 0 0 4px rgba(255,107,116,.22); animation:netBlink 1.4s infinite; }
#netBar.net-online .net-dot{ background:var(--success); }
#netBar .net-check{ font-size:12px; opacity:.75; white-space:nowrap; }
#netBar .net-close{ background:transparent !important; color:inherit !important; border:0 !important; box-shadow:none !important;
  width:28px; height:28px; padding:0 !important; font-size:20px; line-height:1; cursor:pointer; flex-shrink:0; }
#netBar.pulse{ animation:netPulse .5s; }
@keyframes netBlink{ 50%{ opacity:.35; } }
@keyframes netPulse{ 0%,100%{ transform:translate(-50%, 0); } 25%{ transform:translate(calc(-50% - 6px), 0); } 75%{ transform:translate(calc(-50% + 6px), 0); } }
body.dark #netBar.net-online{ background:#14291f; color:#b9f0cf; border-color:#2f6b4a; }
/* buttons that would send look paused while offline */
body.is-offline .main-content button:not(.rating-inline button):not(.secondary):not(.note-btn):not(.chip):not(.icon-btn),
body.is-offline .logout-btn{ opacity:.55; }
@media (max-width:768px){
  #netBar{ top:auto; bottom:62px; font-size:12.5px; }
  #netBar .net-check{ display:none; }
}

/* ============================================================
   ADD ROWS (field + button) and inline-renamable list items
   ============================================================ */
.row.add-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; flex-direction:row; margin:6px 0 10px; }
.row.add-row > input{ flex:1 1 220px; margin:0; height:46px; }
.row.add-row > button{ flex:0 0 auto; margin:0; height:46px; padding:0 22px; white-space:nowrap; }
.row.add-row > input[type=file]{ padding:7px 10px; display:flex; align-items:center; }
.wide-split.split-form > .pane-a .row.add-row{ flex-direction:column; }
.wide-split.split-form > .pane-a .row.add-row > *{ flex:none; width:100%; }
.wide-split > .pane-a > h4:first-child{ margin-top:0; }

.inline-edit{ width:100%; margin:0; padding:8px 10px; height:auto; font-size:14px; font-weight:600; text-align:left;
  background:transparent; border:1.5px dashed transparent; border-radius:var(--radius-sm); color:var(--ink-900); cursor:text; }
.inline-edit:hover{ border-color:var(--line); background:var(--blue-050); }
.inline-edit:focus{ border-style:solid; border-color:var(--blue-500); background:#fff; }
body.dark .inline-edit{ background:transparent; border-color:transparent; }
body.dark .inline-edit:hover{ background:#1c2540; border-color:var(--line); }
body.dark .inline-edit:focus{ background:#1c2540; border-color:var(--blue-500); }
li .manuscript-row > div > .inline-edit{ margin-left:-10px; width:calc(100% + 10px); }

/* System & Backup: the quiet wipe button beside Download Backup */
.backup-actions{ display:flex; align-items:center; gap:8px; }
.backup-actions .wipe-btn{ width:36px; height:36px; padding:0 !important; display:flex; align-items:center; justify-content:center;
  background:transparent !important; color:var(--ink-400) !important; border:1px solid transparent !important; box-shadow:none !important;
  opacity:.35; border-radius:10px; transition:opacity .15s, color .15s, border-color .15s; }
.backup-actions .wipe-btn:hover, .backup-actions .wipe-btn:focus-visible{ opacity:1; color:var(--danger) !important; border-color:#f0b8bd !important; transform:none; }

/* leader accounts: set-up groups are read-only in the list; batch-name preview and login list */
.group-row .account-main > .group-fields{ flex:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:6px; }
.group-row .group-fields .mini-input{ width:100% !important; }
.group-row .group-fields .badge{ grid-column:1 / -1; justify-self:start; }
.group-row > .manuscript-row{ flex-direction:column; align-items:stretch; gap:10px; }
.group-row > .manuscript-row > .account-main{ flex:none; width:100%; }
.group-row > .manuscript-row > .manuscript-actions{ justify-content:flex-start; padding-left:58px; }
@media (max-width:640px){ .group-row > .manuscript-row > .manuscript-actions{ padding-left:0; } }
.group-locked{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; }
.group-locked strong{ font-size:14px; color:var(--ink-900); }
.group-locked .small{ color:var(--ink-600); overflow-wrap:anywhere; }
.badge-set{ background:#e6f5ec !important; color:var(--success) !important; }
body.dark .badge-set{ background:#14291f !important; color:#6ee7a5 !important; }
.batch-preview{ margin:8px 0 2px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--blue-050); font-size:13px; color:var(--ink-900); }
body.dark .batch-preview{ background:#1c2540; }
.mono, .batch-preview .mono, .login-table .mono{ font-family:Consolas, 'Courier New', monospace; }
.login-table{ margin-top:4px; }
.login-table th, .login-table td{ text-align:left; padding:6px 10px; font-size:13px; }
.ui-dialog .login-table + .small{ color:var(--ink-600); }
.ui-dialog:has(.login-table){ max-height:86vh; overflow-y:auto; }

/* an unfinished account: gold dot on the header chip (click it to finish) */
body.needs-finish .header-user{ position:relative; border-color:var(--gold-500); }
body.needs-finish .header-user::after{ content:""; position:absolute; top:4px; right:6px; width:9px; height:9px; border-radius:50%;
  background:var(--gold-500); box-shadow:0 0 0 3px rgba(212,160,23,.25); }
.no-email{ color:var(--gold-600, #a07400); font-style:italic; }
body.dark .no-email{ color:#e8c46a; }

/* login: one login that fits two account types */
.login-choices{ display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
.login-choice{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--radius-md); cursor:pointer; font-weight:600; }
.login-choice input{ width:auto; margin:0; }
.login-choice:has(input:checked){ border-color:var(--blue-500); background:var(--blue-050); }
body.dark .login-choice:has(input:checked){ background:#1c2540; }

/* sort menu beside a list's search box */
.toolbar-actions .sort-select, .sort-select{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; max-width:150px; padding-right:30px; cursor:pointer; }
/* research teachers grouped by department */
li.dept-header .batch-title{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
li.dept-header .batch-title .small{ color:rgba(255,255,255,.72); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#a_list > li.dept-header:first-child, #batch_list > li.dept-header:first-child, #sg_list > li.dept-header:first-child{ margin-top:4px; }
li.dept-row{ margin-left:22px; }
@media (max-width:640px){ li.dept-row{ margin-left:0; } }

/* ============================================================
   CALENDAR DATE PICKER (defense date)
   ============================================================ */
.cal-picker{ margin:6px 0; }
.cal-field{ width:100%; display:flex; align-items:center; gap:10px; padding:11px 14px !important; text-align:left;
  background:#f6f8fd !important; color:var(--ink-900) !important; border:1.5px solid transparent !important;
  border-radius:var(--radius-md) !important; box-shadow:none !important; font-weight:400 !important; transform:none !important; cursor:pointer; }
.cal-field svg{ color:var(--blue-500); flex-shrink:0; }
.cal-field:hover{ border-color:#c8d6f2 !important; }
.cal-field.is-open, .cal-field:focus-visible{ border-color:var(--blue-500) !important; background:#fff !important; }
.cal-label{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.cal-label strong{ font-size:14px; font-weight:600; }
.cal-ph{ color:var(--ink-400); font-size:14px; }
.cal-when{ font-size:12px; font-weight:600; color:var(--gold-600, #9a6b00); background:#fff6e3; padding:1px 8px; border-radius:99px; }
.cal-warn{ margin-top:6px; padding:7px 10px; border-radius:var(--radius-sm); background:#fff6e3; color:#6b4e00; font-size:12.5px; border:1px solid #ecd39a; }
.cal-pop{ margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-card); max-width:340px; }
.cal-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-top strong{ font-family:var(--font-display); font-size:15px; color:var(--navy-900); }
.cal-nav{ width:32px !important; height:32px; padding:0 !important; border-radius:10px !important; font-size:20px; line-height:1;
  background:var(--blue-050) !important; color:var(--navy-900) !important; border:0 !important; box-shadow:none !important; }
.cal-nav:hover{ background:#e1e9fb !important; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; }
.cal-head{ text-align:center; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--ink-400); padding:4px 0; }
.cal-day{ position:relative; height:38px; padding:0 !important; border-radius:10px !important; font-size:13.5px; font-weight:500 !important;
  background:transparent !important; color:var(--ink-900) !important; border:1.5px solid transparent !important; box-shadow:none !important; transform:none !important; cursor:pointer; }
.cal-day:hover:not(:disabled){ background:var(--blue-050) !important; }
.cal-day.is-weekend{ color:var(--ink-600) !important; }
.cal-day.is-today{ border-color:var(--blue-500) !important; font-weight:700 !important; }
.cal-day.is-picked{ background:linear-gradient(135deg, var(--blue-500), var(--blue-600)) !important; color:#fff !important; font-weight:700 !important; }
.cal-day.is-past, .cal-day:disabled{ color:var(--ink-400) !important; opacity:.45; cursor:default; }
.cal-day.is-booked::after{ content:""; position:absolute; left:50%; bottom:4px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--gold-500); }
.cal-day.is-picked.is-booked::after{ background:#fff; }
.cal-empty{ height:38px; }
.cal-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12px; color:var(--ink-600); }
.cal-key{ display:flex; align-items:center; gap:6px; }
.cal-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold-500); }
.cal-link{ background:none !important; border:0 !important; box-shadow:none !important; color:var(--blue-600) !important; padding:4px 6px !important; font-size:12.5px; font-weight:600; width:auto; }
.cal-link:hover{ text-decoration:underline; }
body.dark .cal-field{ background:#1c2540 !important; }
body.dark .cal-field.is-open{ background:#1c2540 !important; }
body.dark .cal-top strong{ color:var(--ink-900); }
body.dark .cal-nav{ background:#1c2540 !important; color:var(--ink-900) !important; }
body.dark .cal-day:hover:not(:disabled){ background:#1c2540 !important; }
body.dark .cal-when, body.dark .cal-warn{ background:#2c2616; color:#f1dca6; border-color:#5a4a1e; }

/* ============================================================
   LIGHT MODE FIELDS: white with a visible border, so text boxes and
   dropdowns stand out on the light-blue panels (dark mode unchanged)
   ============================================================ */
body:not(.dark) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.inline-edit),
                    select, textarea, .comment-inline, .dropdown-btn){
  background:#fff;
  border-color:#cdd7ea;
}
body:not(.dark) :is(input:not(.inline-edit), select, textarea, .comment-inline):hover:not(:focus){ border-color:#9fb3db; }
body:not(.dark) :is(input, select, textarea, .comment-inline):focus{
  border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(61,111,224,0.14);
}
body:not(.dark) .search-input{ background:#fff; border:1.5px solid #cdd7ea; }
body:not(.dark) :is(.role-btn, .cal-field){ background:#fff !important; border-color:#cdd7ea !important; }
body:not(.dark) :is(.role-btn, .cal-field):hover{ border-color:#9fb3db !important; }
body:not(.dark) :is(.role-btn[aria-expanded="true"], .cal-field.is-open){ border-color:var(--blue-500) !important; }
body:not(.dark) input::placeholder, body:not(.dark) textarea::placeholder{ color:#8a95ab; }

/* ============================================================
   SECTION VISIBILITY (must stay at the END of this file)
   Only the .active section is visible; keeps priority over
   the .card display rules above.
   ============================================================ */
.section{
  display:none;
}

.section.active{
  display:flex;
  flex-direction:column;
}

/* ============================================================
   ADMIN ENHANCEMENTS — toolbars, counts, empty states
   (additive classes only; other pages are unaffected)
   ============================================================ */

/* toolbar: section heading + search / actions on one line */
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:20px;
}

.toolbar h4{ margin:0; }

.toolbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:flex-end;
}

.toolbar-actions button{ flex-shrink:0; padding:9px 14px; font-size:13px; }

/* compact search field */
.search-input{
  width:auto;
  min-width:220px;
  max-width:320px;
  flex:1;
  margin:0;
  padding:9px 14px;
  font-size:13px;
  border-radius:999px;
  background:var(--blue-050);
}

.search-input:focus{ background:#fff; }

/* count chip next to headings */
.count-chip{
  display:inline-block;
  min-width:22px;
  padding:2px 9px;
  margin-left:6px;
  border-radius:999px;
  background:var(--navy-700);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  text-align:center;
  letter-spacing:0.02em;
  vertical-align:1px;
}

/* friendly empty states */
li.empty-state{
  text-align:center;
  padding:26px 16px;
  color:var(--ink-400);
  background:var(--blue-050);
  border:1.5px dashed #c3d2ef;
  font-size:13.5px;
}

li.empty-state:hover{ box-shadow:none; border-color:#c3d2ef; }

/* secondary meta line under a list item's title */
.list-meta{ margin-top:3px; }

/* disabled adviser rows fade back */
li.row-disabled{
  opacity:0.62;
  background:#f4f6fb;
}

/* muted badge for disabled state */
.badge-off{
  background:#e8e8ee;
  color:var(--ink-600);
}

/* rubric section headers read as dividers, not items */
li.rubric-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(90deg, var(--navy-700), var(--navy-900));
  color:#fff;
  border:none;
  padding:10px 16px;
  margin-top:14px;
  letter-spacing:0.05em;
  font-size:13px;
}

li.rubric-section-header .count-chip{
  background:var(--gold-500);
  color:var(--navy-900);
}

li.rubric-section-header:hover{ box-shadow:none; }

/* ============================================================
   ROUND 2 ENHANCEMENTS — panel status colors, approval chips,
   rubric legend, grading scale
   ============================================================ */

/* ---- panelist group list: red = pending, green = evaluated ---- */
li.eval-pending{
  background:#fdf1f2;
  border-color:#f0bfc4;
  border-left:5px solid var(--danger);
}

li.eval-pending:hover{ border-color:#e59aa2; }

li.eval-done{
  background:#eefaf3;
  border-color:#bfe5cf;
  border-left:5px solid var(--success);
}

li.eval-done:hover{ border-color:#9fd8b8; }

.eval-tag{
  display:inline-block;
  margin-left:8px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.03em;
  vertical-align:1px;
}

.eval-tag-pending{ background:var(--danger); color:#fff; }
.eval-tag-done{ background:var(--success); color:#fff; }

/* ---- approval member chips ---- */
.member-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0;
}

.member-chip{
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  background:var(--blue-100);
  color:var(--navy-700);
  font-size:12px;
  font-weight:600;
}

.member-chip.leader-chip{
  background:var(--gold-100);
  color:#8a6414;
  border:1px solid #ecd9a8;
}

/* ---- rubric legend (adviser view) ---- */
li.rubric-legend{
  background:var(--gold-100);
  border:1px solid #ecd9a8;
}

li.rubric-legend:hover{ box-shadow:none; }

/* ---- grading scale (student view) ---- */
.grade-scale li{
  font-weight:600;
  border-left:5px solid transparent;
}

.grade-scale li.scale-pass{ border-left-color:var(--success); color:var(--success); }
.grade-scale li.scale-minor{ border-left-color:#1b93a8; color:#1b93a8; }
.grade-scale li.scale-major{ border-left-color:var(--warn); color:#b26a20; }
.grade-scale li.scale-fail{ border-left-color:var(--danger); color:var(--danger); }

/* ============================================================
   PANEL PICKER — inline selectable cards
   (replaces the old floating multi-select dropdown)
   ============================================================ */

.panel-picker{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 4px;
}

.panel-option{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:10px 16px;
  background:#f6f8fd;
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  cursor:pointer;
  user-select:none;
  font-size:14px;
  font-weight:600;
  color:var(--ink-900);
  transition:border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.panel-option:hover{
  border-color:var(--blue-500);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(47,95,208,0.12);
}

.panel-option input[type="checkbox"]{
  width:17px;
  height:17px;
  margin:0;
  padding:0;
  accent-color: var(--blue-600);
  cursor:pointer;
  flex-shrink:0;
}

.panel-option-role{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.04em;
  padding:3px 10px;
  border-radius:999px;
  background:var(--blue-100);
  color:var(--blue-600);
}

/* selected card: navy fill so the choice is unmistakable */
.panel-option.checked{
  background:linear-gradient(135deg, var(--navy-700), var(--navy-900));
  border-color:var(--navy-700);
  color:#fff;
  box-shadow:0 6px 16px rgba(20,32,74,0.28);
}

.panel-option.checked .panel-option-role{
  background:var(--gold-500);
  color:var(--navy-900);
}

/* ============================================================
   MODERN ACCOUNT SYSTEM — cards, modals, password tools
   ============================================================ */

/* ---- account cards with avatar ---- */
.account-main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.account-avatar{
  width:44px;
  height:44px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.03em;
  box-shadow:inset 0 -2px 0 var(--gold-500);
}

li.row-disabled .account-avatar{
  background:#aab3c8;
  box-shadow:none;
}

.account-card .manuscript-actions button{
  padding:8px 12px;
  font-size:12.5px;
}

/* ---- modal ---- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(20,32,74,0.45);
  backdrop-filter:blur(3px);
  animation:modalFade 0.18s ease;
}

@keyframes modalFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

.modal-card{
  width:420px;
  max-width:100%;
  max-height:90vh;
  overflow-y:auto;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop);
  animation:modalPop 0.2s ease;
}

@keyframes modalPop{
  from{ transform:translateY(10px) scale(0.98); opacity:0; }
  to{ transform:none; opacity:1; }
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
}

.modal-head h4{
  margin:0;
  font-family:var(--font-display);
  font-size:16px;
  color:var(--navy-900);
}

.modal-x{
  background:transparent;
  color:var(--ink-400);
  padding:4px 10px;
  font-size:15px;
  border-radius:var(--radius-sm);
}

.modal-x:hover{
  background:var(--blue-050);
  color:var(--ink-900);
  transform:none;
  box-shadow:none;
  filter:none;
}

.modal-body{ padding:16px 22px; }

.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 22px 18px;
  border-top:1px solid var(--line);
}

/* ---- password strength meter ---- */
.pw-meter{
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0 4px;
  min-height:16px;
}

.pw-track{
  flex:1;
  height:5px;
  border-radius:99px;
  background:var(--line);
  overflow:hidden;
}

.pw-bar{
  height:100%;
  width:0%;
  border-radius:99px;
  transition:width 0.25s, background 0.25s;
}

.pw-text{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.04em;
  min-width:58px;
  text-align:right;
}

.pw-meter.pw-weak .pw-bar{ background:var(--danger); }
.pw-meter.pw-weak .pw-text{ color:var(--danger); }
.pw-meter.pw-fair .pw-bar{ background:var(--warn); }
.pw-meter.pw-fair .pw-text{ color:#b26a20; }
.pw-meter.pw-good .pw-bar{ background:#1b93a8; }
.pw-meter.pw-good .pw-text{ color:#1b93a8; }
.pw-meter.pw-strong .pw-bar{ background:var(--success); }
.pw-meter.pw-strong .pw-text{ color:var(--success); }

/* ---- generate password link-button ---- */
.pw-gen{
  background:transparent;
  color:var(--blue-600);
  padding:2px 0;
  font-size:12.5px;
  font-weight:600;
}

.pw-gen:hover{
  transform:none;
  box-shadow:none;
  filter:none;
  text-decoration:underline;
}

/* ============================================================
   DARK MODE
   Toggled by the floating moon/sun button (bottom-right).
   The choice is remembered per browser via localStorage.
   ============================================================ */

body.dark{
  /* token overrides — most of the UI recolors itself from these */
  --bg:#0f1526;
  --surface:#171f36;
  --line:#2a3552;

  --ink-900:#e8ecf6;
  --ink-600:#a9b4cd;
  --ink-400:#707d9c;

  --blue-050:#1c2540;
  --blue-100:#243155;
  --blue-500:#5b86ec;
  --blue-600:#6d94f0;

  --gold-100:#33290f;

  --shadow-card:0 8px 24px rgba(0,0,0,0.35);
  --shadow-pop:0 12px 32px rgba(0,0,0,0.5);

  color:var(--ink-900);
  background:var(--bg);
}

/* darken the campus photo backdrop instead of hiding it */
body.dark::before{
  background:
    linear-gradient(rgba(11,16,30,0.92), rgba(11,16,30,0.94)),
    url("Background.jpg") no-repeat center center/cover;
}

/* surfaces that were hardcoded white/near-white */
body.dark .card{ background:rgba(23,31,54,0.97); }
body.dark .login-card,
body.dark .modal-card{ background:var(--surface); }

body.dark input,
body.dark select,
body.dark textarea{
  background:#1c2540;
  color:var(--ink-900);
  border-color:var(--line);
}

body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus{ background:#20294a; }

body.dark input[type="file"]{ background:#1c2540; }

body.dark li{
  background:#1c2540;
  border-color:var(--line);
}

body.dark .mini-input{ background:#141b31; }

body.dark .panel-option{ background:#1c2540; }
body.dark .panel-option.checked{
  background:linear-gradient(135deg, var(--navy-700), #0e1733);
}

body.dark .search-input{ background:#1c2540; }
body.dark .search-input:focus{ background:#20294a; }

body.dark li.empty-state{
  background:#141b31;
  border-color:#33405f;
}
body.dark li.empty-state:hover{ border-color:#33405f; }

body.dark li.row-disabled{ background:#131a2e; }

body.dark .badge-off{
  background:#2a3552;
  color:var(--ink-600);
}

/* status tints re-mixed for dark backgrounds */
body.dark li.eval-pending{
  background:#2b1a1f;
  border-color:#54303a;
}
body.dark li.eval-done{
  background:#14291f;
  border-color:#28503c;
}

body.dark li.rubric-legend{
  background:var(--gold-100);
  border-color:#54461d;
}

body.dark .member-chip{
  background:var(--blue-100);
  color:#cdd9f5;
}
body.dark .member-chip.leader-chip{
  background:#33290f;
  color:#e6c675;
  border-color:#54461d;
}

body.dark .grade-scale li.scale-minor{ color:#4fc3d8; border-left-color:#4fc3d8; }
body.dark .grade-scale li.scale-major{ color:#f0a860; }

body.dark .pw-track{ background:#2a3552; }
body.dark .pw-gen{ color:var(--blue-500); }

body.dark .modal-x:hover{ background:#1c2540; }

/* ---- the toggle button itself ---- */

/* ============================================================
   STUDENT COMMENTS — panelist headers + comment cards
   ============================================================ */

li.comment-panel-header{
  display:flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:none;
  padding:14px 4px 6px;
  margin-top:8px;
}

li.comment-panel-header:hover{ box-shadow:none; }

li.comment-panel-header strong{
  font-family:var(--font-display);
  font-size:14.5px;
  color:var(--navy-900);
}

.comment-panel-avatar{
  width:32px;
  height:32px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color:#fff;
  font-size:12px;
  font-weight:700;
  box-shadow:inset 0 -2px 0 var(--gold-500);
}

li.comment-card{
  margin-left:42px;               /* indents under the panelist header */
  padding:12px 16px;
  border-left:4px solid var(--gold-500);
  border-radius:6px var(--radius-md) var(--radius-md) 6px;
}

.comment-criterion{
  display:inline-block;
  padding:2px 10px;
  margin-bottom:6px;
  border-radius:999px;
  background:var(--blue-100);
  color:var(--navy-700);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.03em;
}

.comment-text{
  color:var(--ink-900);
  line-height:1.55;
}

/* dark mode */
body.dark li.comment-panel-header strong{ color:var(--ink-900); }
body.dark .comment-criterion{
  background:var(--blue-100);
  color:#cdd9f5;
}

/* ---- collapsible comment groups + dates ---- */
li.comment-panel-header{
  cursor:pointer;
  user-select:none;
  border-radius:var(--radius-md);
  transition:background 0.15s;
}

li.comment-panel-header:hover{ background:var(--blue-050); }

.comment-panel-title{
  display:flex;
  flex-direction:column;
  gap:1px;
  flex:1;
  min-width:0;
}

.comment-date{ color:var(--ink-400); font-size:11.5px; }

.comment-chevron{
  color:var(--ink-400);
  font-size:14px;
  margin-left:4px;
  transition:transform 0.2s;
  transform:rotate(-90deg);      /* pointing right = closed */
}

li.comment-panel-header.open .comment-chevron{ transform:rotate(0deg); }

.comment-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.comment-card-top .comment-criterion{ margin-bottom:0; }

body.dark li.comment-panel-header:hover{ background:#1c2540; }

/* ============================================================
   DARK MODE — text contrast fixes
   The navy brand tokens stay navy in dark mode (the sidebar
   depends on them), so any TEXT painted with them has to be
   re-pointed at the light ink tokens here.
   ============================================================ */

/* headings and titles */
body.dark .card > h3:first-child,
body.dark .card h3,
body.dark .card h4,
body.dark .login-header h2,
body.dark .modal-head h4,
body.dark .grade-role,
body.dark label{
  color:var(--ink-900);
}

/* the header bar */
body.dark .header{
  background:rgba(23,31,54,0.9);
  color:var(--ink-900);
}

body.dark .header div{ color:var(--ink-900); }

/* dashboard stat cards */
body.dark .stat-value{ color:var(--blue-500); }
body.dark .stat-card{ background:#1c2540; }
body.dark .stat-label{ color:var(--ink-600); }

/* active sidebar pill: white bg would show white-on-navy text */
body.dark .sidebar button.active{
  background:var(--gold-500);
  color:var(--navy-900);
}

/* rubric + score + grade blocks */
body.dark .rubric-section{ color:var(--ink-900); }
body.dark .rubric-name{ color:var(--ink-900); }
body.dark .score-box{ background:#1c2540; color:var(--ink-900); }
body.dark .grade-box{ background:#1c2540; }
body.dark .grade-value{ color:var(--ink-900); }

/* pipeline steps */
body.dark .pipe-step.done .pipe-label{ color:var(--blue-500); }
body.dark .pipe-label{ color:var(--ink-600); }

/* chips and badges that sit on light-blue fills */
body.dark .badge{
  background:var(--blue-100);
  color:#cdd9f5;
}

body.dark .count-chip{
  background:var(--blue-500);
  color:#0f1526;
}

body.dark li.rubric-section-header .count-chip,
body.dark li.comment-panel-header .count-chip{
  background:var(--gold-500);
  color:var(--navy-900);
}

/* status badges */
body.dark .status-pending{ background:#3b2f14; color:#f0c674; }
body.dark .status-approved{ background:#14291f; color:#6ee7a5; }
body.dark .status-rejected{ background:#2b1a1f; color:#f08a95; }

/* anything still inheriting a dark brand color inside cards */
body.dark .card,
body.dark .card p,
body.dark .card div,
body.dark li{
  color:var(--ink-900);
}

body.dark .small{ color:var(--ink-600); }

/* keep intentionally-colored text readable rather than overriding it */
body.dark .grade-pass{ color:#6ee7a5; }
body.dark .grade-minor{ color:#4fc3d8; }
body.dark .grade-major{ color:#f0a860; }
body.dark .grade-reject,
body.dark .grade-fail{ color:#f08a95; }

/* the navy-filled elements keep white text (they are dark already) */
body.dark li.rubric-section-header,
body.dark li.rubric-section-header strong,
body.dark .panel-option.checked,
body.dark .account-avatar,
body.dark .comment-panel-avatar,
body.dark .member-chip.leader-chip{
  color:#fff;
}

body.dark .member-chip.leader-chip{ color:#e6c675; }
body.dark .panel-option.checked .panel-option-role{ color:var(--navy-900); }

/* ============================================================
   DARK MODE — EVALUATION SCREEN
   These panels used hardcoded near-white fills, so in dark mode
   they stayed light while the text went light. Recolored here.
   ============================================================ */

/* criterion rows */
body.dark .rubric-row{
  background:#1c2540;
  border-color:var(--line);
}

body.dark .rubric-line{ border-bottom-color:var(--line); }

body.dark .rubric-name{ color:var(--ink-900); }

/* unscored highlight */
body.dark .rubric-row.needs-score{
  background:#2b1a1f;
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(214,69,80,0.22);
}

/* 5–1 rating chips */
body.dark .rating-inline button{
  background:#141b31;
  color:var(--blue-500);
  border-color:#33405f;
}

body.dark .rating-inline button:hover{
  border-color:var(--blue-500);
  background:#1f2947;
}

body.dark .rating-inline button.active{
  background:linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color:#0f1526;
  border-color:var(--blue-500);
}

/* inline comment boxes */
body.dark .comment-inline{
  background:#141b31;
  color:var(--ink-900);
  border-color:#2a3552;
}

body.dark .comment-inline:focus{
  background:#20294a;
  border-color:var(--blue-500);
}

body.dark .comment-inline::placeholder{ color:var(--ink-400); }

/* "Rated 0 / 24 criteria" progress bar */
body.dark .score-box{
  background:linear-gradient(135deg, #1c2540, #243155);
  color:var(--ink-900);
}

/* "Currently Scoring →" banner */
body.dark .current-group-label,
body.dark #current_group{
  background:#33290f;
  border-color:#54461d;
  color:#e6c675;
}

/* section headings inside the rubric (INTRODUCTION, METHODS…) */
body.dark .rubric-section{
  color:var(--ink-900);
  border-bottom-color:var(--line);
}

/* PDF viewer frame */
body.dark #panel_pdf_viewer{
  background:#1c2540;
  border-color:var(--line);
}

body.dark .eval-left > button{
  box-shadow:0 -8px 16px rgba(0,0,0,0.45), 0 6px 16px rgba(47,95,208,0.3);
}

/* scrollbars in the rubric pane */
body.dark .eval-left::-webkit-scrollbar-track{ background:#141b31; }
body.dark .eval-left::-webkit-scrollbar-thumb{ background:#33405f; }
body.dark .eval-left::-webkit-scrollbar-thumb:hover{ background:#44547a; }

/* mini inputs used in editable lists */
body.dark .mini-input{
  background:#141b31;
  color:var(--ink-900);
  border-color:#2a3552;
}

/* remaining light-filled controls */
body.dark button.secondary{
  background:#1f2947;
  color:var(--ink-900);
  border-color:#33405f;
}

body.dark button.secondary:hover{ background:#263254; }

body.dark #errorBox{
  background:#2b1a1f;
  border-color:#54303a;
  color:#f08a95;
}

/* ============================================================
   PANEL — GROUP PICKER (right pane when nothing is selected)
   ============================================================ */

#panel_group_picker{
  flex:1;
  display:none;                 /* shown by JS only when needed */
  align-items:center;
  justify-content:center;
  padding:20px;
  border:1.5px dashed #c3d2ef;
  border-radius:var(--radius-md);
  background:var(--blue-050);
  overflow-y:auto;
}

.picker-card{
  width:100%;
  max-width:420px;
  text-align:center;
}

.picker-title{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  color:var(--navy-900);
  margin-bottom:6px;
}

.picker-bubbles{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
  text-align:left;
}

/* each group is a tappable bubble */
.group-bubble{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 16px;
  background:#fff;
  color:var(--ink-900);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  text-align:left;
}

.group-bubble:hover{
  border-color:var(--blue-500);
  transform:translateY(-2px);
  filter:none;
  box-shadow:0 8px 20px rgba(47,95,208,0.18);
}

.bubble-avatar{
  width:38px;
  height:38px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color:#fff;
  font-size:13px;
  font-weight:700;
  box-shadow:inset 0 -2px 0 var(--gold-500);
}

.bubble-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.bubble-name{
  font-weight:700;
  font-size:14px;
  color:var(--navy-900);
}

.picker-foot{ margin-top:14px; }

/* dark mode */
body.dark #panel_group_picker{
  background:#141b31;
  border-color:#33405f;
}

body.dark .picker-title,
body.dark .bubble-name{ color:var(--ink-900); }

body.dark .group-bubble{
  background:#1c2540;
  border-color:var(--line);
  color:var(--ink-900);
}

body.dark .group-bubble:hover{ border-color:var(--blue-500); background:#20294a; }

/* ---- offline build: Reset Scores button, beside Presentation Mode ---- */
#resetToggle{
  position:fixed;
  bottom:15px;
  right:140px;             /* sits to the left of Presentation Mode */
  font-size:12px;
  padding:6px 12px;
  border-radius:var(--radius-sm);
  background:var(--danger);
  color:#fff;
  cursor:pointer;
  opacity:0.08;
  z-index:9999;
  transition:opacity 0.2s;
}

#resetToggle:hover{ opacity:0.95; }

/* the dark-mode button already sits above these two */
body:has(#resetToggle) #uiDock{ bottom:52px; }

/* ============================================================
   DARK MODE — STUDENT PAGES
   The pipeline and group-info panels used hardcoded white fills.
   ============================================================ */

body.dark .pipeline{
  background:#1c2540;
  border-color:var(--line);
}

body.dark .pipe-dot{
  background:#141b31;
  color:var(--ink-400);
  border-color:#33405f;
}

body.dark .pipe-step.done .pipe-dot{
  background:linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color:#0f1526;
  border-color:var(--blue-500);
}

body.dark .pipe-bar{ background:#33405f; }
body.dark .pipe-bar.done{ background:var(--blue-500); }

body.dark #official_group_info{
  background:#1c2540;
  border-color:var(--line);
}

body.dark .status-badge.status-pending{ background:#3b2f14; color:#f0c674; }
body.dark .status-badge.status-approved{ background:#14291f; color:#6ee7a5; }
body.dark .status-badge.status-rejected{ background:#2b1a1f; color:#f08a95; }
body.dark .status-badge.status-done{ background:#172544; color:#9bb8ff; }
body.dark .status-badge.status-waiting{ background:#232a38; color:#b7c2d6; }

/* ============================================================
   APPROVED GROUP DETAILS — clearer labels, responsive text
   ============================================================ */

.approved-panel{
  padding:18px 20px;
}

.approved-panel h4{
  margin:0 0 14px;
  font-size:clamp(15px, 1.4vw, 18px);
}

.detail-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(13.5px, 1.15vw, 16px);
  line-height:1.5;
}

.detail-row:last-of-type{ border-bottom:none; }

.detail-label{
  min-width:120px;
  font-weight:700;
  color:var(--ink-600);
  letter-spacing:0.02em;
}

.detail-value{ flex:1; min-width:180px; color:var(--ink-900); }

.member-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.member-list li{
  padding:8px 14px;
  margin:0;
  border-radius:var(--radius-sm);
  background:var(--blue-050);
  border:1px solid var(--line);
  font-size:clamp(13px, 1.1vw, 15px);
}

.member-list li.is-leader{
  background:var(--gold-100);
  border-color:#ecd9a8;
  font-weight:700;
}

.member-role{
  font-size:0.85em;
  font-weight:700;
  color:var(--ink-600);
  letter-spacing:0.03em;
}

body.dark .detail-label{ color:var(--ink-600); }
body.dark .member-list li{ background:#1c2540; border-color:var(--line); }
body.dark .member-list li.is-leader{ background:#33290f; border-color:#54461d; color:#e6c675; }
body.dark .approved-panel{ background:transparent; }

/* pending / waiting banner */
.status-banner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  margin-top:10px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:var(--blue-050);
}

.status-banner.pending{ background:var(--gold-100); border-color:#ecd9a8; }
.status-banner.rejected{ background:#fdf1f2; border-color:#f0bfc4; }

.banner-icon{
  width:42px;
  height:42px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:18px;
  font-weight:700;
  background:#fff;
  border:1.5px solid var(--line);
}

.status-banner.pending .banner-icon{ color:#b26a20; border-color:#ecd9a8; }
.status-banner.rejected .banner-icon{ color:var(--danger); border-color:#f0bfc4; }

.banner-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(14px, 1.3vw, 17px);
  color:var(--navy-900);
}

body.dark .status-banner{ background:#1c2540; border-color:var(--line); }
body.dark .status-banner.pending{ background:#33290f; border-color:#54461d; }
body.dark .status-banner.rejected{ background:#2b1a1f; border-color:#54303a; }
body.dark .banner-icon{ background:#141b31; border-color:#33405f; }
body.dark .banner-title{ color:var(--ink-900); }

/* ---- page-anchored comment inputs on the evaluation screen ---- */
.comment-cell{
  display:flex;
  gap:6px;
  align-items:center;
}

.page-inline{
  width:52px;
  flex-shrink:0;
  height:34px;
  padding:6px 6px;
  font-size:12.5px;
  text-align:center;
  background:#f6f8fd;
  border:1.5px solid transparent;
  border-radius:var(--radius-sm);
}

.page-inline::-webkit-outer-spin-button,
.page-inline::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.page-inline{ -moz-appearance:textfield; }

body.dark .page-inline{
  background:#141b31;
  color:var(--ink-900);
  border-color:#2a3552;
}

body.dark .page-inline:focus{ background:#20294a; border-color:var(--blue-500); }
body.dark .page-inline::placeholder{ color:var(--ink-400); }

/* the page reference shown to students */
.page-tag{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  background:var(--gold-100);
  color:#8a6414;
  border:1px solid #ecd9a8;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.02em;
}

body.dark .page-tag{
  background:#33290f;
  color:#e6c675;
  border-color:#54461d;
}

/* default-login badge on batch-created student accounts */
.badge-default{
  background:var(--gold-100);
  color:#8a6414;
  border:1px solid #ecd9a8;
}

body.dark .badge-default{
  background:#33290f;
  color:#e6c675;
  border-color:#54461d;
}

/* ============================================================
   STUDENT LEADER BATCHES — collapsible groups with inline edit
   ============================================================ */

li.batch-header{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
  margin-top:14px;
  padding:12px 16px;
  background:var(--blue-050);
  border:1.5px solid var(--line);
  border-left:5px solid var(--navy-700);
}

li.batch-header:hover{ background:var(--blue-100); }

.batch-toggle{
  color:var(--ink-400);
  font-size:14px;
  transition:transform 0.2s;
  transform:rotate(-90deg);
}

li.batch-header.open .batch-toggle{ transform:rotate(0deg); }

.batch-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}

.batch-name{
  width:220px;
  margin:0;
  padding:5px 10px;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:700;
  color:var(--navy-900);
  background:#fff;
  border:1.5px solid transparent;
  border-radius:var(--radius-sm);
}

.batch-name:hover{ border-color:var(--line); }
.batch-name:focus{ border-color:var(--blue-500); background:#fff; }

/* the editable fields on each group row */
.group-fields{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  min-width:0;
}

li.group-row{ margin-left:22px; }

/* dark mode */
body.dark li.batch-header{
  background:#1c2540;
  border-color:var(--line);
  border-left-color:var(--blue-500);
}
body.dark li.batch-header:hover{ background:#20294a; }
body.dark .batch-name{
  background:#141b31;
  color:var(--ink-900);
  border-color:transparent;
}
body.dark .batch-name:hover{ border-color:#33405f; }
body.dark .batch-name:focus{ border-color:var(--blue-500); background:#20294a; }

/* Archive Batch button in the batch header */
.batch-delete{
  padding:7px 14px;
  font-size:12px;
  flex-shrink:0;
  margin-left:4px;
}

/* approval rows indent under their batch header */
li.approval-row{ margin-left:22px; }

/* department grouping in the admin batch monitor */
li.dept-header{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
  margin-top:18px;
  padding:12px 16px;
  background:linear-gradient(90deg, var(--navy-700), var(--navy-900));
  color:#fff;
  border:none;
}

li.dept-header:hover{ box-shadow:var(--shadow-pop); }
li.dept-header strong{ color:#fff; font-family:var(--font-display); font-size:14.5px; }
li.dept-header .batch-toggle{ color:#fff; }
li.dept-header .count-chip{ background:var(--gold-500); color:var(--navy-900); }

li.dept-header.open .batch-toggle{ transform:rotate(0deg); }

/* batch monitor rows sit under their batch header */
li.batch-row{ margin-left:44px; }
li.batch-header[data-dept]{ margin-left:22px; }

body.dark li.dept-header{
  background:linear-gradient(90deg, #1c2540, #0e1733);
}

/* ============================================================
   ROUTING SLIP
   ============================================================ */

.routing-table{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
  font-size:13px;
}

.routing-table th{
  background:var(--navy-700);
  color:#fff;
  text-align:left;
  padding:9px 10px;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.routing-table td{
  border:1px solid var(--line);
  padding:8px 10px;
  vertical-align:middle;
}

.routing-table tr.routing-done td{ background:#eefaf3; }

.routing-role{
  font-weight:700;
  font-size:12px;
  color:var(--ink-600);
  margin-bottom:4px;
}

.routing-date{
  font-weight:700;
  color:var(--success);
}

.link-btn{
  background:transparent;
  color:var(--ink-400);
  padding:2px 6px;
  font-size:11px;
}

.link-btn:hover{
  background:transparent;
  color:var(--danger);
  transform:none;
  box-shadow:none;
  filter:none;
  text-decoration:underline;
}

/* student's read-only view */
.routing-steps{ margin-top:10px; }

li.routing-step{
  border-left:5px solid var(--line);
  background:#f8fafe;
}

li.routing-step.done{
  border-left-color:var(--success);
  background:#eefaf3;
}

li.routing-step.current{
  border-left-color:var(--warn);
  background:var(--gold-100);
}

/* dark mode */
body.dark .routing-table td{ border-color:var(--line); }
body.dark .routing-table tr.routing-done td{ background:#14291f; }
body.dark .routing-role{ color:var(--ink-600); }
body.dark li.routing-step{ background:#1c2540; border-left-color:#33405f; }
body.dark li.routing-step.done{ background:#14291f; border-left-color:var(--success); }
body.dark li.routing-step.current{ background:#33290f; border-left-color:var(--warn); }

/* routing action bar + current-stage highlight */
.routing-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:14px 0 4px;
}

.routing-actions button{ width:auto; margin:0; }

.routing-table tr.routing-current td{
  background:var(--gold-100);
  border-color:#ecd9a8;
}

.routing-table tr.routing-current .routing-role{ color:#8a6414; }

body.dark .routing-table tr.routing-current td{ background:#33290f; border-color:#54461d; }
body.dark .routing-table tr.routing-current .routing-role{ color:#e6c675; }

/* routing rows nobody is assigned to: N/A, skipped */
li.routing-step.skipped{ opacity:.55; border-left-style:dashed !important; }
.routing-table tr.routing-na td{ opacity:.6; }
.routing-table tr.routing-na td:first-child{ opacity:1; }
.routing-actions button[disabled]{ opacity:.55; cursor:not-allowed; }

/* ============================================================
   STUDENT DASHBOARD — one column: next step, progress, numbers, activity
   ============================================================ */
.next-step{
  display:flex; align-items:center; gap:16px;
  margin:16px 0 4px; padding:16px 18px;
  background:var(--blue-050); border:1px solid var(--line); border-left:4px solid var(--blue-500);
  border-radius:var(--radius-md);
}
.next-step .ns-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--blue-600); font-size:19px; font-weight:700;
  border:1px solid var(--line);
}
.next-step .ns-body{ flex:1; min-width:0; }
.next-step .ns-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); }
.next-step .ns-title{ font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--ink-900); line-height:1.3; margin-top:2px; }
.next-step .ns-text{ font-size:13.5px; color:var(--ink-600); margin-top:4px; overflow-wrap:anywhere; }
.next-step > button{ flex-shrink:0; margin:0; white-space:nowrap; }
.next-step.kind-act{ border-left-color:var(--gold-500); background:var(--gold-100); }
.next-step.kind-act .ns-icon{ color:#9a6a12; }
.next-step.kind-alert{ border-left-color:var(--danger); }
.next-step.kind-alert .ns-icon{ color:var(--danger); }
.next-step.kind-done{ border-left-color:var(--success); }
.next-step.kind-done .ns-icon{ color:var(--success); }
.next-step.kind-date .ns-icon{ font-size:18px; }
body.dark .next-step.kind-act .ns-icon{ color:#f0c674; }

/* progress steps: the step the group is on now stands out */
#welcome .pipeline{ background:var(--surface); }
#welcome .pipe-text{ text-align:center; }
#welcome .pipe-date{ min-height:14px; }
#welcome .pipe-step.current .pipe-dot{ border-color:var(--gold-500); color:var(--navy-700); background:var(--gold-100); box-shadow:0 0 0 4px rgba(217,164,65,.18); }
#welcome .pipe-step.current .pipe-date{ color:#9a6a12; font-weight:700; }
body.dark #welcome .pipe-step.current .pipe-dot{ color:#f0c674; }
body.dark #welcome .pipe-step.current .pipe-date{ color:#f0c674; }

/* the four numbers sit in one row on a laptop */
.page-student #welcome .stats-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.page-student #welcome .stat-value.stat-text{ font-size:20px; padding-top:8px; }
.page-student #welcome .activity-list .activity-item{ padding-block:9px; }

@media (max-width:900px){
  .page-student #welcome .stats-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .next-step{ flex-wrap:wrap; }
  .next-step > button{ width:100%; }
  /* steps stack top to bottom instead of scrolling sideways */
  #welcome .pipeline{ flex-direction:column; align-items:stretch; gap:0; padding:12px 14px; overflow:visible; }
  #welcome .pipe-step{ flex-direction:row; align-items:center; gap:12px; min-width:0; padding:4px 6px; }
  #welcome .pipe-text{ text-align:left; display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex:1; }
  #welcome .pipe-dot{ width:28px; height:28px; font-size:12px; }
  #welcome .pipe-bar{ flex:none; width:3px; min-width:3px; height:12px; margin:0 0 0 19px; }
  #welcome .pipe-bar.done{ background:linear-gradient(180deg, var(--blue-500), var(--gold-500)); }
  .page-student #welcome .stat-value.stat-text{ font-size:17px; }
  .page-student #welcome .stat-card{ padding:16px 10px 14px; }
}
/* phones: room at the bottom so the floating Highlights / theme buttons never cover the last item */
@media (max-width:700px){
  .main-content{ padding-bottom:84px; }
}

/* Reschedule Defense dialog */
.resched-now{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; margin-bottom:6px;
  background:var(--blue-050); border:1px solid var(--line); border-radius:var(--radius-sm); }
.resched-now strong{ color:var(--ink-900); }
.resched-history{ margin-top:12px; }
.resched-history ul{ margin:4px 0 0; padding-left:18px; font-size:13px; color:var(--ink-600); }