:root{--bg:#0d0f0f;--bg2:#141717;--bg3:#1c2020;--border:#2a2e2e;--border2:#353c3c;--text:#e8eded;--text2:#8a9494;--text3:#4a5252;--teal:#00c9a7;--teal-dim:#00897b;--teal-bg:rgba(0,201,167,.08);--amber:#ffb347;--amber-bg:rgba(255,179,71,.08);--red:#ff5c5c;--red-bg:rgba(255,92,92,.08);--blue:#5b9cf6;--blue-bg:rgba(91,156,246,.08);--r:6px;--rl:10px;--sans:'IBM Plex Sans',sans-serif;--mono:'IBM Plex Mono',monospace;--sw:220px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--text);display:flex;min-height:100vh;font-size:14px}
.sidebar{width:var(--sw);background:var(--bg2);border-right:.5px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 16px;border-bottom:.5px solid var(--border)}
.brand-mark{width:32px;height:32px;border-radius:6px;background:var(--teal);color:#0a1a17;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:500}
.brand-name{font-weight:600;font-size:15px;letter-spacing:.5px}
.brand-sub{font-size:11px;color:var(--text2);margin-top:1px}
.sidebar-nav{flex:1;padding:12px 8px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r);color:var(--text2);text-decoration:none;font-size:13px;margin-bottom:2px;transition:all .12s}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:var(--teal-bg);color:var(--teal)}
.notif-bell{position:relative;margin-left:auto;flex-shrink:0;background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;border-radius:var(--r);display:flex;align-items:center;justify-content:center}
.notif-bell:hover{background:var(--bg3);color:var(--text)}
.notif-badge{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:10px;font-weight:600;border-radius:10px;padding:1px 5px;line-height:1.4;min-width:16px;text-align:center;font-family:var(--mono)}
.notif-item{padding:12px 0;border-bottom:.5px solid var(--border)}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{position:relative}
.notif-item.unread::before{content:'';position:absolute;left:-12px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.notif-title{font-size:13px;font-weight:500;margin-bottom:3px}
.notif-msg{font-size:12px;color:var(--text2);line-height:1.5}
.notif-time{font-size:11px;color:var(--text3);font-family:var(--mono);margin-top:5px}
.notif-actions{display:flex;gap:8px;margin-top:8px}
.sidebar-footer{padding:14px 16px;border-top:.5px solid var(--border);display:flex;align-items:center;gap:7px}
.conn-dot{width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0;transition:all .3s}
.conn-dot.ok{background:var(--teal);box-shadow:0 0 6px var(--teal)}
.conn-dot.err{background:var(--red)}
.conn-label{font-size:11px;color:var(--text2);font-family:var(--mono)}
.main-content{margin-left:var(--sw);flex:1;min-height:100vh}
.view{display:none;padding:28px 32px;max-width:1100px}
.view.active{display:block}
.view-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:.5px solid var(--border)}
.view-hdr h1{font-size:20px;font-weight:500;letter-spacing:-.3px}
.view-desc{color:var(--text2);font-size:13px;margin-bottom:16px;line-height:1.6}
.hdr-tools{display:flex;gap:8px;align-items:center}
.search-inp{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--r);color:var(--text);padding:7px 12px;font-size:13px;font-family:var(--sans);width:200px;outline:none;transition:border-color .12s}
.search-inp:focus{border-color:var(--teal)}
.filter-sel{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--r);color:var(--text);padding:7px 10px;font-size:13px;font-family:var(--sans);outline:none;cursor:pointer}
.sync-time{font-size:11px;color:var(--text3);font-family:var(--mono)}
.section-hdr{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);margin-bottom:12px}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.stat-card{background:var(--bg2);border:.5px solid var(--border);border-radius:var(--rl);padding:16px 18px}
.stat-val{font-size:28px;font-weight:600;font-family:var(--mono)}
.stat-lbl{font-size:12px;color:var(--text2);margin-top:3px}
.stat-card.green .stat-val{color:var(--teal)}
.stat-card.amber .stat-val{color:var(--amber)}
.stat-card.red .stat-val{color:var(--red)}
.eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:12px}
.eq-card{background:var(--bg2);border:.5px solid var(--border);border-radius:var(--rl);padding:16px;cursor:pointer;transition:all .14s;position:relative;overflow:hidden}
.eq-card:hover{border-color:var(--border2);background:var(--bg3);transform:translateY(-1px)}
.eq-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--teal);opacity:0;transition:opacity .14s}
.eq-card:hover::before{opacity:1}
.eq-id{font-family:var(--mono);font-size:10px;color:var(--text3);margin-bottom:4px}
.eq-name{font-size:14px;font-weight:500;margin-bottom:6px;line-height:1.4}
.eq-mfg{font-size:11px;color:var(--text3);margin-bottom:8px}
.eq-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.eq-tag{font-size:11px;padding:2px 7px;border-radius:4px;background:var(--bg3);color:var(--text2);border:.5px solid var(--border);font-family:var(--mono)}
.eq-footer{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:.5px solid var(--border)}
.eq-meta{font-size:11px;color:var(--text2)}
.status-pill{font-size:10px;font-weight:500;font-family:var(--mono);padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.4px}
.status-available{background:rgba(0,201,167,.15);color:var(--teal)}
.status-in_use{background:rgba(255,179,71,.15);color:var(--amber)}
.status-maintenance{background:rgba(255,92,92,.15);color:var(--red)}
.status-reserved{background:var(--blue-bg);color:var(--blue)}
.status-pending_approval{background:var(--blue-bg);color:var(--blue)}
table.data-table{width:100%;border-collapse:collapse}
table.data-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);font-weight:500;padding:8px 12px;border-bottom:.5px solid var(--border)}
table.data-table td{padding:11px 12px;border-bottom:.5px solid var(--border);font-size:13px;vertical-align:middle}
table.data-table tr:last-child td{border-bottom:none}
table.data-table tr:hover td{background:var(--bg3)}
.mono{font-family:var(--mono);font-size:12px}
.sop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.sop-card{background:var(--bg2);border:.5px solid var(--border);border-radius:var(--rl);padding:16px;cursor:pointer;transition:all .14s}
.sop-card:hover{border-color:var(--border2);background:var(--bg3)}
.sop-card-title{font-size:14px;font-weight:500;margin-bottom:6px;line-height:1.4}
.sop-card-meta{font-size:12px;color:var(--text2);margin-bottom:10px}
.sop-card-footer{display:flex;gap:6px;flex-wrap:wrap}
.qr-actions{display:flex;gap:8px;margin-bottom:16px}
.qr-sel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.qr-item{background:var(--bg2);border:.5px solid var(--border);border-radius:var(--rl);padding:12px;cursor:pointer;display:flex;gap:10px;align-items:center;transition:all .12s}
.qr-item:hover{border-color:var(--border2)}
.qr-item.sel{border-color:var(--teal);background:var(--teal-bg)}
.qr-thumb{width:52px;height:52px;background:#fff;border-radius:4px;padding:3px;flex-shrink:0}
.qr-thumb img{width:100%;height:100%}
.qr-item-name{font-size:12px;font-weight:500;line-height:1.4}
.qr-item-loc{font-size:10px;color:var(--text2);font-family:var(--mono);margin-top:3px}
.qr-check{margin-left:auto;color:var(--teal);opacity:0;font-size:14px}
.qr-item.sel .qr-check{opacity:1}
.form-card{background:var(--bg2);border:.5px solid var(--border);border-radius:var(--rl);padding:24px;max-width:800px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{display:flex;flex-direction:column;gap:6px}
.fg.full{grid-column:1/-1}
.fs{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);grid-column:1/-1;margin-top:6px;padding-top:16px;border-top:.5px solid var(--border)}
.fg label,.fg>span{font-size:12px;color:var(--text2);font-weight:500}
input,textarea,select{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--r);color:var(--text);padding:8px 10px;font-size:13px;font-family:var(--sans);width:100%;outline:none;resize:vertical;transition:border-color .12s}
input:focus,textarea:focus,select:focus{border-color:var(--teal)}
.tier-sel{display:flex;flex-direction:column;gap:6px}
.tier-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--bg3);border:.5px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .12s}
.tier-opt:hover{border-color:var(--border2)}
.tier-opt:has(input:checked){border-color:var(--teal);background:var(--teal-bg)}
.tier-opt input{margin-top:2px;accent-color:var(--teal)}
.tier-opt div{display:flex;flex-direction:column;gap:2px}
.tier-opt strong{font-size:13px;font-weight:500}
.tier-opt small{font-size:11px;color:var(--text2)}
.form-footer{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:16px;border-top:.5px solid var(--border)}
.form-msg{font-size:12px;font-family:var(--mono)}
.form-msg.ok{color:var(--teal)}
.form-msg.err{color:var(--red)}
.sop-hint{font-size:12px;color:var(--text2);margin-bottom:6px;padding:8px 12px;background:var(--bg3);border-radius:var(--r);border:.5px solid var(--border)}
.btn-primary{background:var(--teal);color:#0a1a17;border:none;border-radius:var(--r);padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:opacity .12s}
.btn-primary:hover{opacity:.85}
.btn-primary:disabled{opacity:.45;cursor:default}
.btn-ghost{background:transparent;color:var(--text2);border:.5px solid var(--border);border-radius:var(--r);padding:8px 14px;font-size:13px;cursor:pointer;font-family:var(--sans);transition:all .12s}
.btn-ghost:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.btn-danger{background:var(--red-bg);color:var(--red);border:.5px solid var(--red);border-radius:var(--r);padding:8px 14px;font-size:12px;cursor:pointer;font-family:var(--sans)}
.btn-return{background:var(--amber-bg);color:var(--amber);border:.5px solid var(--amber);border-radius:var(--r);padding:9px 18px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--sans)}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200}
.overlay.open{display:block}
.detail-panel{position:fixed;top:0;right:-500px;width:480px;bottom:0;background:var(--bg2);border-left:.5px solid var(--border);z-index:201;overflow-y:auto;transition:right .22s ease}
.detail-panel.open{right:0}
.panel-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text2);font-size:16px;cursor:pointer}
.panel-close:hover{color:var(--text)}
.panel-body{padding:24px}
.panel-title{font-size:18px;font-weight:500;margin-bottom:4px}
.panel-id{font-family:var(--mono);font-size:11px;color:var(--text3);margin-bottom:12px}
.panel-qr{display:flex;justify-content:center;margin:20px 0}
.panel-qr img{width:140px;height:140px;background:#fff;padding:6px;border-radius:6px}
.panel-table{width:100%;font-size:13px;border-collapse:collapse;margin:12px 0}
.panel-table td{padding:7px 0;border-bottom:.5px solid var(--border)}
.panel-table td:first-child{color:var(--text2);width:44%}
.panel-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.panel-actions a,.panel-actions button{display:block;font-size:12px;padding:9px 14px;border-radius:var(--r);text-align:center;text-decoration:none;cursor:pointer;border:none;font-family:var(--sans)}
.pa-teal{background:var(--teal-bg);color:var(--teal);border:.5px solid rgba(0,201,167,.3)!important}
.pa-ghost{background:transparent;color:var(--text2);border:.5px solid var(--border)!important}
.panel-tabs{display:flex;gap:4px;margin:16px 0 12px;border-bottom:.5px solid var(--border)}
.ptab{font-size:13px;padding:7px 12px;cursor:pointer;border:none;background:none;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-.5px;font-family:var(--sans)}
.ptab.active{color:var(--text);border-bottom-color:var(--teal);font-weight:500}
.tab-content{display:none}
.tab-content.active{display:block}
.loading{color:var(--text3);font-size:13px;padding:20px 0;font-family:var(--mono)}
.empty{color:var(--text3);font-size:13px;text-align:center;padding:40px 0}
/* Scan page */
.scan-body{flex-direction:column;align-items:center;padding:24px 16px;margin-left:0}
.scan-wrap{background:var(--bg2);border:.5px solid var(--border);border-radius:var(--rl);padding:24px;max-width:480px;width:100%}
.scan-head{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.scan-qr-img{width:72px;height:72px;background:#fff;padding:4px;border-radius:6px}
.scan-eq-id{font-family:var(--mono);font-size:10px;color:var(--text3);margin-bottom:3px}
.scan-eq-name{font-size:16px;font-weight:600;margin-bottom:6px}
.scan-meta-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.meta-tag{font-size:12px;padding:4px 10px;background:var(--bg3);border:.5px solid var(--border);border-radius:20px;color:var(--text2)}
.sop-banner{display:block;text-align:center;padding:10px;background:var(--teal-bg);color:var(--teal);border:.5px solid rgba(0,201,167,.3);border-radius:var(--r);font-size:13px;text-decoration:none;margin-bottom:16px}
.scan-form{display:flex;flex-direction:column;gap:10px}
.scan-form h2{font-size:14px;font-weight:500;color:var(--text2);border-top:.5px solid var(--border);padding-top:16px}
.scan-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text2)}
.in-use-notice{background:var(--amber-bg);border:.5px solid rgba(255,179,71,.3);border-radius:var(--r);padding:14px;font-size:13px;color:var(--amber);margin-bottom:12px}
.scan-success{text-align:center;padding:32px 0}
.scan-check{font-size:48px;margin-bottom:12px}
.scan-success h2{font-size:20px;font-weight:500;margin-bottom:8px}
@media(max-width:860px){.sidebar{display:none}.main-content{margin-left:0}.stats-row{grid-template-columns:1fr 1fr}.view{padding:16px}}

/* ── Calendar ──────────────────────────────────────────────────────────────── */
.cal-nav { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; }
.cal-day-hdr { background:var(--bg2); padding:8px; text-align:center; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.6px; color:var(--text2); }
.cal-cell { background:var(--bg); min-height:90px; padding:6px; cursor:pointer; transition:background .12s; }
.cal-cell:hover { background:var(--bg3); }
.cal-empty { background:var(--bg2); cursor:default; }
.cal-date { font-size:12px; font-weight:500; color:var(--text2); margin-bottom:4px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.cal-today { background:var(--bg3); }
.cal-date-today { background:var(--teal); color:#0a1a17; font-weight:600; }
.cal-event { font-size:11px; padding:2px 5px; border-radius:3px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:300; display:flex; align-items:center; justify-content:center; }
.modal-card { background:var(--bg2); border:.5px solid var(--border); border-radius:var(--rl); padding:24px; width:560px; max-width:95vw; max-height:90vh; overflow-y:auto; }
.modal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.modal-hdr h2 { font-size:16px; font-weight:500; margin:0; }

/* ── Mobile & auth additions ────────────────────────────────────────────────── */
.hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  background: var(--bg2);
  border: .5px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--text);
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 150;
}
.nav-user {
  padding: 12px 16px;
  border-top: .5px solid var(--border);
  margin-top: auto;
}
.role-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.role-admin    { background: rgba(255,100,100,.15); color: #ff6464; }
.role-pi       { background: rgba(0,201,167,.15);   color: var(--teal); }
.role-researcher { background: var(--bg3); color: var(--text2); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 8px 10px; color: var(--text2); font-weight: 500; border-bottom: .5px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.data-table td { padding: 10px; border-bottom: .5px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }

@media (max-width: 768px) {
  .hamburger { display: flex; align-items: center; justify-content: center; }
  .sidebar-overlay.open { display: block; }
  nav {
    position: fixed;
    left: -240px;
    top: 0;
    height: 100vh;
    z-index: 160;
    transition: left .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
  }
  nav.open { left: 0; }
  main { margin-left: 0 !important; padding: 16px; padding-top: 56px; }
  .view-hdr { flex-direction: column; align-items: flex-start; gap: 8px; }
  .view-hdr h1 { font-size: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .fg.full, .fg { grid-column: 1; }
  .modal-card { width: 95vw; padding: 16px; }
  .cal-grid { grid-template-columns: repeat(7,1fr); font-size: 10px; }
  .cal-cell { min-height: 60px; padding: 4px; }
  .cal-event { font-size: 9px; padding: 1px 3px; }
  .eq-grid { grid-template-columns: 1fr 1fr; }
  input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom */
  .btn-primary, .btn-ghost, .btn-return, .btn-danger { min-height: 44px; font-size: 15px; }
  .scan-wrap { padding: 16px; max-width: 100%; }
  .panel { width: 100% !important; right: -100% !important; }
  .panel.open { right: 0 !important; }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 7px 6px; }
  .nav-item { padding: 10px 16px; min-height: 44px; }
  .nav-logo { padding: 16px; padding-top: 56px; }
}

@media (max-width: 480px) {
  .eq-grid { grid-template-columns: 1fr; }
  .cal-day-hdr { font-size: 9px; padding: 4px 2px; }
}

/* Equipment checkbox list in group form */
#grpEqSelect label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 5px;
  transition: background .1s;
}
#grpEqSelect label:hover { background: var(--bg2); }
#grpEqSelect input[type=checkbox] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--teal);
  cursor: pointer;
}

/* ── Light mode (follows OS preference) ───────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f0f4f4;
    --bg2:       #ffffff;
    --bg3:       #e4ecec;
    --border:    #ccd8d8;
    --border2:   #aabfbf;
    --text:      #0d1a1a;
    --text2:     #4a6666;
    --text3:     #8aaaaa;
    --teal:      #00897b;
    --teal-dim:  #00695c;
    --teal-bg:   rgba(0,137,123,.12);
    --amber:     #b55e00;
    --amber-bg:  rgba(181,94,0,.1);
    --red:       #c62828;
    --red-bg:    rgba(198,40,40,.1);
    --blue:      #1565c0;
    --blue-bg:   rgba(21,101,192,.1);
  }

  /* Status pills — bump opacity so they read on white cards */
  .status-available   { background: rgba(0,137,123,.15); }
  .status-in_use      { background: rgba(181,94,0,.15); }
  .status-maintenance { background: rgba(198,40,40,.15); }

  /* Role badges */
  .role-admin { background: rgba(198,40,40,.12); color: #c62828; }

  /* Overlays stay dark */
  .overlay, .sidebar-overlay { background: rgba(0,0,0,.45); }
  .modal-overlay { background: rgba(0,0,0,.5); }

  /* Sidebar shadow on mobile */
  nav { box-shadow: 4px 0 20px rgba(0,0,0,.15); }

  /* Scrollbar (Chromium) */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
}

/* ─── Quill rich text editor ────────────────────────────────────────────────── */
.ql-toolbar.ql-snow {
  background: var(--bg2);
  border: 1px solid var(--border) !important;
  border-radius: 6px 6px 0 0;
  padding: 6px 8px;
}
.ql-container.ql-snow {
  background: var(--bg);
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 6px 6px;
  font-family: var(--sans);
  font-size: 13px;
}
.ql-editor {
  color: var(--text);
  min-height: 340px;
  line-height: 1.65;
}
.ql-editor.ql-blank::before { color: var(--text3); font-style: italic; }
.ql-editor h2 { font-size: 1.15em; font-weight: 600; margin: 1em 0 0.4em; color: var(--text); }
.ql-editor h3 { font-size: 1em;    font-weight: 600; margin: 0.8em 0 0.3em; color: var(--text); }
.ql-editor a  { color: var(--teal); }
.ql-editor blockquote { border-left: 3px solid var(--teal); padding-left: 1em; color: var(--text2); margin: 6px 0; }
.ql-snow .ql-stroke { stroke: var(--text2); }
.ql-snow .ql-fill   { fill:   var(--text2); }
.ql-snow .ql-picker  { color: var(--text2); }
.ql-snow button:hover .ql-stroke, .ql-snow .ql-active .ql-stroke { stroke: var(--teal); }
.ql-snow button:hover .ql-fill,   .ql-snow .ql-active .ql-fill   { fill:   var(--teal); }
.ql-snow .ql-picker-label:hover, .ql-snow .ql-active.ql-picker-label { color: var(--teal); }
.ql-snow .ql-picker-options {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.ql-snow .ql-picker-item { color: var(--text); }
.ql-snow .ql-picker-item:hover { color: var(--teal); }
.ql-snow .ql-tooltip {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  z-index: 9999;
}
.ql-snow .ql-tooltip input[type=text] {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text);
  outline: none;
  border-radius: 4px;
}
/* Shrink edit Quill in the side panel */
#seBodyEditor .ql-editor { min-height: 260px; }

/* ─── Bulk edit ────────────────────────────────────────────────────────────── */
.bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  border: .5px solid var(--teal);
  border-radius: var(--rl);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  z-index: 150;
  flex-wrap: wrap;
}
.bulk-bar span { font-size: 13px; font-weight: 500; color: var(--teal); }

/* ─── Equipment card badges ─────────────────────────────────────────────────── */
.eq-badge-wrench { font-size: 11px; }
.eq-badge-issue {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
  margin-left: 4px;
}

/* ─── Charts row ────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .charts-row { grid-template-columns: 1fr !important; }
}

/* ─── Training matrix ───────────────────────────────────────────────────────── */
#trainingTable th, #trainingTable td { text-align: center; }
#trainingTable th:first-child, #trainingTable td:first-child { text-align: left; white-space: nowrap; }

/* ─── Activity feed ──────────────────────────────────────────────────────────── */
#activityFeed { overflow-x: auto; }

/* ─── Scan page issue report form ───────────────────────────────────────────── */
.scan-body .btn-return { font-size: 13px; padding: 10px 16px; }

/* ─── PhD Study Readiness ────────────────────────────────────────────────────── */
.phd-card {
  background: var(--bg2);
  border: .5px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s;
}
.phd-card:hover { border-color: var(--teal); }
.phd-card-uninit { cursor: default; }
.phd-card-uninit:hover { border-color: var(--border); }
.phd-card-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.phd-card-meta { font-size: 12px; color: var(--text2); }
.phd-card-phase { font-size: 11px; color: var(--text2); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phd-progress-bar { height: 3px; background: var(--bg3); border-radius: 2px; margin: 8px 0 4px; }
.phd-progress-fill { height: 3px; background: var(--teal); border-radius: 2px; transition: width .4s; }

/* Pipeline */
.phd-pipeline { display: flex; align-items: flex-start; padding: 8px 0; min-width: max-content; }
.phd-connector { width: 20px; height: 2px; background: var(--border); margin-top: 16px; flex-shrink: 0; }
.phd-node { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; flex-shrink: 0; }
.phd-node-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--mono);
  border: 2px solid transparent; transition: transform .15s, box-shadow .15s;
}
.phd-node:hover .phd-node-circle { transform: scale(1.12); }
.phd-node-label { font-size: 9px; color: var(--text2); white-space: nowrap; max-width: 52px; text-align: center; overflow: hidden; text-overflow: ellipsis; }

/* Node states */
.phd-node-future  .phd-node-circle { background: var(--bg3);      color: var(--text3); border-color: var(--border);  }
.phd-node-current .phd-node-circle { background: var(--blue-bg);   color: var(--blue);  border-color: var(--blue);   }
.phd-node-passed  .phd-node-circle { background: var(--teal-bg);   color: var(--teal);  border-color: var(--teal);   }
.phd-node-adapt   .phd-node-circle { background: var(--amber-bg);  color: var(--amber); border-color: var(--amber);  }
.phd-node-hold    .phd-node-circle { background: var(--red-bg);    color: var(--red);   border-color: var(--red);    }
.phd-node-sel .phd-node-circle { box-shadow: 0 0 0 3px var(--teal); }
.phd-node-current .phd-node-label,
.phd-node-sel     .phd-node-label { color: var(--text); }

/* Phase detail */
.phd-phase-detail { padding: 4px 0; }
/* ── Criteria tab redesign ─────────────────────────────────────────────────── */
.phd-crit-header {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 20px; background: var(--bg2);
  border: .5px solid var(--border); border-radius: var(--rl);
  margin-bottom: 20px;
}
.phd-crit-ring { flex-shrink: 0; }
.phd-crit-summary { display: flex; flex-direction: column; gap: 4px; }
.phd-crit-pct { font-size: 28px; font-weight: 700; line-height: 1; }
.phd-crit-label-text { font-size: 13px; color: var(--text2); }
.phd-crit-note { font-size: 11px; color: var(--text3); margin-top: 4px; }
.phd-crit-list { display: flex; flex-direction: column; }
.phd-crit-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 4px; border-bottom: .5px solid var(--border);
  cursor: default; user-select: none; transition: background .1s;
}
.phd-crit-item:last-child { border-bottom: none; }
.phd-crit-admin { cursor: pointer; }
.phd-crit-admin:hover { background: var(--bg2); border-radius: var(--r); }
.phd-crit-input { display: none; }
.phd-crit-box {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: transparent; transition: all .15s;
  margin-top: 1px;
}
.phd-crit-input:checked ~ .phd-crit-box {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.phd-crit-text { font-size: 13px; line-height: 1.5; color: var(--text); padding-top: 2px; }
.phd-crit-done .phd-crit-text { color: var(--text3); text-decoration: line-through; }

/* keep old classes for any residual usage */
.phd-criteria { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.phd-criterion {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: var(--r);
  background: var(--bg2); border: .5px solid var(--border);
  font-size: 13px; line-height: 1.45; cursor: pointer; transition: border-color .15s;
}
.phd-criterion:has(input:disabled) { cursor: default; }
.phd-criterion input[type=checkbox] { margin-top: 2px; flex-shrink: 0; accent-color: var(--teal); }
.phd-criterion-done { border-color: var(--teal); background: var(--teal-bg); }
.phd-criterion-done span { color: var(--text2); text-decoration: line-through; }

/* Gate outcome record */
.phd-gate-outcome {
  border: 1px solid; border-radius: var(--r);
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--bg2); font-size: 13px;
}

/* Gate decision form */
.phd-gate-form {
  border-top: .5px solid var(--border);
  padding-top: 16px; margin-top: 4px;
}

/* Tab bar */
.phd-tab-bar {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  margin-bottom: 16px; flex-wrap: wrap;
}
.phd-tab-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; padding: 7px 16px; font-size: 13px; cursor: pointer;
  color: var(--text2); font-family: var(--sans); transition: color .15s;
}
.phd-tab-btn:hover { color: var(--text); }
.phd-tab-active { color: var(--teal) !important; border-bottom-color: var(--teal) !important; font-weight: 600; }
.phd-tab-content { padding: 4px 0; }

/* Section header inside tabs */
.phd-section-hdr {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text2); margin-bottom: 10px;
}

/* Submissions list */
.phd-sub-empty { font-size: 12px; color: var(--text3); margin-bottom: 10px; }
.phd-submission {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: var(--r);
  border: .5px solid var(--border); background: var(--bg2);
  margin-bottom: 7px; font-size: 13px;
}
.phd-sub-icon { font-size: 16px; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.phd-sub-body { flex: 1; min-width: 0; }
.phd-sub-label { font-weight: 600; color: var(--teal); text-decoration: none; word-break: break-word; display: block; }
.phd-sub-label:hover { text-decoration: underline; }
.phd-sub-text { font-size: 12px; color: var(--text); white-space: pre-wrap; word-break: break-word; margin-top: 4px; }
.phd-sub-meta { font-size: 11px; color: var(--text3); margin-top: 3px; }
.phd-del-btn {
  flex-shrink: 0; background: none; border: none; color: var(--text3);
  cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: var(--r);
  opacity: .6; line-height: 1;
}
.phd-del-btn:hover { opacity: 1; color: var(--red); background: var(--red-bg); }

/* Template cards */
.phd-tpl-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.phd-tpl-card {
  border: .5px solid var(--border); border-radius: var(--rl);
  background: var(--bg2); padding: 12px 14px;
  transition: border-color .15s;
}
.phd-tpl-done { border-color: var(--teal); background: var(--teal-bg); }
.phd-tpl-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.phd-tpl-icon { font-size: 18px; flex-shrink: 0; line-height: 1; padding-top: 1px; }
.phd-tpl-info { flex: 1; min-width: 0; }
.phd-tpl-title { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.phd-tpl-check { color: var(--teal); margin-left: 4px; }
.phd-tpl-prompt { font-size: 12px; color: var(--text2); line-height: 1.55; }
.phd-tpl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.phd-tpl-btn {
  font-size: 11px; padding: 4px 10px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.phd-tpl-fields { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.phd-tpl-field {
  font-size: 10px; background: var(--bg3); color: var(--text2);
  border-radius: 10px; padding: 2px 8px; white-space: nowrap;
}
.phd-tpl-req { background: var(--amber-bg); color: var(--amber); }

/* Submissions — updated layout */
.phd-sub-left { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.phd-sub-num { font-size: 10px; color: var(--text3); font-weight: 600; }
.phd-sub-extbadge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  background: var(--bg3); color: var(--text2); border-radius: 3px;
  padding: 2px 4px; letter-spacing: .5px;
}
.phd-sub-filename { font-size: 11px; color: var(--text3); margin-top: 2px; word-break: break-all; }
.phd-sub-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--text3); margin-top: 5px; }
.phd-sub-meta span { display: flex; align-items: center; gap: 3px; }

/* Deliver form header */
.phd-deliver-form-hdr {
  font-size: 11px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}

/* Deliver forms (upload + note) */
.phd-deliver-forms {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 600px) { .phd-deliver-forms { grid-template-columns: 1fr; } }
.phd-deliver-form {
  background: var(--bg2); border: .5px solid var(--border);
  border-radius: var(--r); padding: 12px; display: flex; flex-direction: column;
}
.phd-deliver-form input[type=text],
.phd-deliver-form textarea {
  width: 100%; box-sizing: border-box;
}

/* Comments thread */
.phd-comment {
  padding: 9px 12px; border-radius: var(--r);
  border: .5px solid var(--border2); background: var(--bg2);
  margin-bottom: 7px; font-size: 13px; position: relative;
}
.phd-comment-author { font-weight: 600; font-size: 12px; margin-bottom: 4px; }
.phd-comment-role { font-weight: 400; color: var(--teal); font-size: 11px; margin-left: 4px; }
.phd-comment-date { font-weight: 400; color: var(--text3); font-size: 11px; margin-left: 4px; }
.phd-comment-text { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.phd-comment-form { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.phd-comment-form textarea { width: 100%; box-sizing: border-box; }