/* ============================================================
   modules.css — chrome rebuilt on 20-Aug-2026 against the live
   ess.emgage.work. Every pattern here was measured off a real
   screen; nothing is invented.
   ============================================================ */

/* ---------- tab row — sits on the PAGE, above the card ---------- */
.tabbar{
  display:flex;align-items:center;gap:12px;min-height:52px;margin:2px 0 10px;
}
.tabbar.hidden{display:none}
.tabset{display:flex;align-items:flex-end;gap:2px}
.tabbar .tab{
  display:flex;align-items:center;gap:8px;padding:10px 18px;height:44px;font-size:14px;
  border-bottom:2px solid transparent;color:var(--text-2);background:none;border-radius:6px 6px 0 0;
}
.tabbar .tab:hover{color:var(--blue)}
.tabbar .tab.on{color:var(--blue);font-weight:500;border-bottom-color:var(--blue);background:var(--blue-bg-2)}
.tabbar .tab .cnt{
  background:#F0F0F0;color:var(--text-2);font-size:12px;border-radius:4px;padding:1px 8px;min-width:22px;text-align:center;
}
.tabbar .tab.on .cnt{background:#E6E6E6;color:var(--text)}
.tabbar .tab-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.tbl-search{display:flex;align-items:center;height:34px;border:1px solid var(--border-input);border-radius:var(--radius);padding:0 10px}
.tbl-search input{border:0;outline:0;background:none;font-size:13px;width:190px}

/* ---------- bulk approve row — REPLACES the tab row ---------- */
.bulkrow{display:none}
.bulkrow.on{display:flex}
.remark-input{
  flex:0 1 560px;height:38px;border:1px solid var(--border-input);border-radius:var(--radius);
  padding:0 12px;font-size:14px;outline:0;background:#fff;
}
.remark-input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(22,119,255,.12)}
.remark-input::placeholder{color:var(--text-3)}
.btn-appr{border:1px solid var(--blue);color:var(--blue);background:#fff;height:38px;padding:0 22px}
.btn-appr:hover{background:var(--blue-bg)}
.btn-rej{border:1px solid var(--red);color:var(--red);background:#fff;height:38px;padding:0 22px}
.btn-rej:hover{background:#FFF1F0}

/* ---------- selection footer ---------- */
.selbar{
  display:none;align-items:center;gap:14px;padding:12px 24px;font-size:13.5px;color:var(--text-2);
  background:#F6FBFC;border-top:1px solid var(--border);
}
.selbar.on{display:flex}
.selbar b{font-weight:600;color:var(--text)}
.selbar button{color:var(--blue);font-size:13.5px;font-weight:500;padding:2px 4px;border-radius:4px}
.selbar button:hover{background:var(--blue-bg)}

/* ---------- two-line headers and cells ---------- */
.th2{display:grid;gap:2px;line-height:1.25}
.th2 b{font-weight:600}
.th2 i{font-style:normal;font-weight:400;color:var(--text-3);text-transform:uppercase}
.td2{display:grid;gap:2px;line-height:1.3}
.td2 b{font-weight:400}
.td2 i{font-style:normal;color:var(--text-3);font-size:13px}
th.th2col{white-space:normal;line-height:1.25}
.tbl-empty{text-align:center;color:var(--text-3);height:96px;font-style:italic}

/* ---------- toggle switch (setup tables use this, not chips) ---------- */
.toggle{
  display:inline-flex;align-items:center;width:38px;height:20px;border-radius:10px;background:#BFBFBF;
  padding:2px;cursor:pointer;transition:background .15s;
}
.toggle i{width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;display:block}
.toggle.on{background:var(--blue)}
.toggle.on i{transform:translateX(18px)}

/* ---------- row action icons ---------- */
.act{display:flex;align-items:center;gap:14px}
.act button{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;color:var(--text-3)}
.act button:hover{background:var(--hover)}
.act .edit{color:var(--blue)}
.act .del{color:var(--red)}
.act .hist{color:#FAAD14}
.act .assign,.act .view,.act .copy,.act .down{color:var(--text-3)}

/* ---------- colour swatch (shift name, Add Shift) ---------- */
.sw{width:14px;height:14px;border-radius:3px;display:inline-block;vertical-align:-2px;margin-right:9px}
.stag{color:#D48806;font-size:12px;margin-left:7px}
.swatches{display:flex;align-items:center;gap:7px;height:36px}
.swatches button{width:20px;height:20px;border-radius:4px;position:relative}
.swatches button.on::after{
  content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;
}
.swatches .pick{width:20px;height:20px;display:grid;place-items:center;color:var(--text-3)}

/* ---------- amber note strip ---------- */
.note-strip{
  display:inline-flex;align-items:center;gap:8px;background:#FFFBE6;color:#AD6800;
  border-radius:var(--radius);padding:7px 14px;font-size:13px;margin-bottom:22px;
}
.note-strip::before{content:'●';font-size:9px;color:#FAAD14}

/* ---------- right-side drawer (filters and row detail) ---------- */
.drawer-host{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:65;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-host.on{opacity:1;pointer-events:auto}
.drawer{
  position:absolute;inset:0 0 0 auto;width:460px;max-width:100%;background:#fff;display:flex;flex-direction:column;
  box-shadow:-8px 0 32px rgba(0,0,0,.16);transform:translateX(100%);transition:transform .22s ease;
}
.drawer.filter{width:470px}
.drawer-host.on .drawer{transform:none}
.drawer-head{display:flex;align-items:center;gap:14px;padding:18px 22px 14px}
.drawer-head h3{font-size:17px;font-weight:500;display:flex;align-items:center;gap:8px}
.drawer-head h3 svg{color:var(--text-3)}
.drawer-head small{color:var(--text-3);font-size:12.5px;display:block}
.drawer-head .x{margin-left:auto;color:var(--red);padding:2px 6px;border-radius:var(--radius)}
.drawer-head .x.plain{color:var(--text-2)}
.drawer-head .x:hover{background:var(--hover)}
.drawer-body{flex:1;overflow:auto;padding:4px 22px 22px}
.drawer.filter .grid2{gap:14px 20px}
.drawer.filter label{font-size:13.5px;margin-bottom:5px}
.drawer-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:26px}
.drawer-foot{border-top:1px solid var(--border);padding:16px 22px 20px;background:var(--page)}
.inp.chips{gap:6px;flex-wrap:wrap}
.fchip-in{
  display:inline-flex;align-items:center;gap:5px;background:#F0F0F0;border-radius:4px;
  padding:2px 7px;font-size:12.5px;color:var(--text-2);
}
.fchip-in svg{color:var(--text-3)}
.dl{display:grid;grid-template-columns:150px 1fr;gap:9px 14px;font-size:13.5px}
.dl dt{color:var(--text-3)}

/* ---------- approval trail ---------- */
.trail{list-style:none;display:grid;gap:2px}
.trail li{display:flex;gap:12px;padding:0 0 14px;position:relative}
.trail li:last-child{padding-bottom:0}
.trail li i{
  flex:0 0 12px;width:12px;height:12px;border-radius:50%;margin-top:3px;background:#D9D9D9;
  box-shadow:0 0 0 3px #fff;position:relative;z-index:1;
}
.trail li:not(:last-child)::before{content:'';position:absolute;left:5px;top:14px;bottom:0;width:2px;background:var(--border-2)}
.trail li.ok i{background:var(--green)}
.trail li.no i{background:var(--red)}
.trail li.now i{background:var(--blue)}
.trail b{font-size:13.5px;font-weight:500;display:block}
.trail small{font-size:12px;color:var(--text-3)}
.trail em{display:block;font-size:12.5px;color:var(--text-2);font-style:italic;margin-top:3px}

/* ---------- panels used by the settings-shaped screens ---------- */
.panel{background:#fff;border:1px solid var(--border-2);border-radius:var(--radius);padding:20px 22px 22px;margin-bottom:16px}
.panel > h3{font-size:15px;font-weight:500;margin-bottom:4px}
.panel > .sub{font-size:12.5px;color:var(--text-3);margin-bottom:16px;line-height:1.55}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;border-radius:4px;padding:2px 8px;background:var(--hover);color:var(--text-2)}
.tag.ok{background:#F6FFED;color:#237804}
.tag.no{background:#FFF1F0;color:#CF1322}
.tag.warn{background:#FFF7E6;color:#AD6800}
.tag.info{background:var(--blue-bg);color:var(--blue)}
.tag.teal{background:#E6FFFB;color:#08979C}
.txt-ok{color:#389E0D}
.txt-warn{color:#D48806}
.txt-pend{color:#D48806;font-weight:500;letter-spacing:.3px}

/* toggle row used by the notification setup screen */
.toggle-row{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:10px}
.toggle-row label{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}

/* ---------- three-card choice selector (Add Work Schedule) ---------- */
.choice-cards{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border-2);border-radius:var(--radius);overflow:hidden}
@media (max-width:860px){ .choice-cards{grid-template-columns:1fr} }
.choice-cards button{
  padding:16px 18px 18px;text-align:center;background:#fff;border-right:1px solid var(--border-2);
}
.choice-cards button:last-child{border-right:0}
.choice-cards b{display:flex;align-items:center;justify-content:center;gap:7px;font-size:15px;font-weight:500;margin-bottom:6px}
.choice-cards small{display:block;font-size:12.5px;color:var(--text-3);line-height:1.5}
.choice-cards button.on{background:var(--blue-bg-2)}
.choice-cards button.on b,.choice-cards button.on small{color:var(--blue)}

/* ---------- wizard stepper + dropzone (Import Attendance) ---------- */
.stepper{display:flex;align-items:center;gap:0;margin:8px 0 34px}
.stepper .st{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.stepper .st i{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:12.5px;font-weight:600;background:#E8E8E8;color:var(--text-3);
}
.stepper .st.on i{background:var(--blue);color:#fff}
.stepper .st b{display:block;font-size:13.5px;font-weight:500}
.stepper .st small{display:block;font-size:12px;color:var(--text-3)}
.stepper .line{flex:1;height:1px;background:var(--border-2);margin:0 18px}
.dropzone{
  border:1px dashed var(--border-input);border-radius:var(--radius);padding:26px 24px;
  display:flex;align-items:center;gap:26px;background:#fff;cursor:pointer;
}
.dropzone:hover{border-color:var(--blue)}
.dropzone .art{width:96px;height:78px;flex:0 0 96px;border-radius:10px;background:var(--blue-bg);display:grid;place-items:center;color:var(--blue)}
.dropzone b{display:block;font-size:15px;font-weight:600;margin-bottom:5px}
.dropzone small{color:var(--text-3);font-size:12.5px;line-height:1.5}

/* ---------- extra form field types ---------- */
.field.span2{grid-column:span 2}
@media (max-width:640px){ .field.span2{grid-column:span 1} }
.field > label .lbl-tag{margin-left:8px;font-size:11px;color:var(--blue);background:var(--blue-bg);border-radius:3px;padding:1px 6px}
.fhelp{display:block;margin-top:5px;font-size:12px;color:var(--text-3);line-height:1.45}
.inp.ro{background:#FAFAFB;cursor:default;border-color:var(--border)}
.inp .sfx{color:var(--text-3);font-size:13px;flex:0 0 auto}
.seg.seg-field{height:36px}
.seg.seg-field button{height:100%;flex:1;justify-content:center}
.chk{display:flex;align-items:center;gap:9px;height:36px;font-size:14px;cursor:pointer}
.filefield{
  display:flex;align-items:center;gap:9px;height:36px;padding:0 10px;font-size:14px;cursor:pointer;
  border:1px dashed var(--border-input);border-radius:var(--radius);background:#fff;color:var(--text-3);
}
.filefield:hover{border-color:var(--blue);color:var(--blue)}
.filefield.has{border-style:solid;color:var(--text)}
.filefield .fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filefield .pick{font-size:12px;color:var(--blue)}
.form-info{
  display:flex;gap:10px;background:var(--blue-bg-2);border:1px solid #D6EAFF;border-radius:var(--radius);
  padding:10px 12px;font-size:13px;line-height:1.55;color:var(--text-2);
}
.form-info svg{flex:0 0 auto;color:var(--blue);margin-top:2px}
.form-note{font-size:12.5px;color:var(--text-3);line-height:1.6}
/* the readout block the real Regularization popup puts ABOVE the fields */
.modal-readout{font-size:13.5px;line-height:1.9;margin:-6px 0 20px}
.modal-readout b{font-weight:600}
.modal-readout span{color:var(--text-2)}
.field.shake .inp,.field.shake textarea,.field.shake .seg{border-color:var(--red);animation:shake .38s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------- nav phase markers ---------- */
.nav-item.unverified{opacity:.62;cursor:default}
.nav-item.unverified:hover{background:none}
.nav-phase.legacy{background:#FFF7E6;color:#AD6800}

/* ---------- flow launcher additions ---------- */
.flow-scroll{max-height:44vh;overflow-y:auto;margin:0 -4px;padding:0 4px}
.fgroup{margin-bottom:10px}
.fgroup-h{
  display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;color:var(--text-3);padding:8px 4px 6px;
}
.fgroup-h .ph{font-style:normal;font-size:10px;min-width:16px;height:16px;line-height:16px;border-radius:8px;text-align:center}
.ph-ready{background:#F6FFED;color:#237804}
.ph-next{background:var(--blue-bg);color:var(--blue)}
.ph-planned{background:#F0F0F0;color:var(--text-4)}
.fitem.here{border-color:#BAE0FF;background:var(--blue-bg-2)}
.fitem.reset{margin-top:6px}
.flow-fab .fcount{background:rgba(255,255,255,.22);border-radius:9px;font-size:11px;padding:1px 7px;margin-left:2px}

/* ---------- phases / placeholder screens ---------- */
.page-intro{color:var(--text-2);font-size:13.5px;line-height:1.6;max-width:820px;margin:0 0 14px}
.page-foot{color:var(--text-3);font-size:12.5px;line-height:1.7;margin-top:14px;max-width:900px}
.phase-list{display:grid;gap:12px}
.phase-row{
  display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:start;background:#fff;
  border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:16px 18px;
}
.phase-row .n{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:600;font-size:14px;background:var(--hover);color:var(--text-3)}
.phase-row.ready .n{background:#F6FFED;color:#237804}
.phase-row.next .n{background:var(--blue-bg);color:var(--blue)}
.phase-row h3{font-size:15px;font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:9px}
.phase-row p{font-size:13px;color:var(--text-2);line-height:1.6;max-width:640px}
.phase-row .links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.phase-row .links a,.phase-row .links span{font-size:12px;border:1px solid var(--border-2);border-radius:20px;padding:3px 11px;color:var(--text-2);background:#fff}
.phase-row .links a:hover{border-color:#BAE0FF;background:var(--blue-bg-2);color:var(--blue)}
.phase-row .links span{color:var(--text-4);border-style:dashed}
.phase-row .meta{text-align:right;font-size:12px;color:var(--text-3);white-space:nowrap}
.phase-row .meta b{display:block;font-size:19px;font-weight:600;color:var(--text);line-height:1.2}
.stat-strip{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.stat-card{--sc:var(--blue);flex:1 1 150px;min-width:150px;background:#fff;border:1px solid var(--border-2);border-radius:var(--radius);padding:12px 14px 11px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--sc)}
.stat-card b{display:block;font-size:22px;font-weight:600;line-height:1.15;color:var(--sc)}
.stat-card span{display:block;font-size:12.5px;color:var(--text-2);margin-top:2px}
.stat-card small{display:block;font-size:11px;color:var(--text-4);margin-top:3px}
.soon{max-width:620px;margin:60px auto;text-align:center}
.soon .ic{width:64px;height:64px;border-radius:16px;background:var(--blue-bg);color:var(--blue);display:grid;place-items:center;margin:0 auto 18px}
.soon h2{font-size:21px;font-weight:600;margin-bottom:8px}
.soon p{color:var(--text-2);font-size:14px;line-height:1.65}
.soon .acts{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}

/* ============================================================
   Monthly Attendance — rebuilt from the live screen
   ============================================================ */
.ma-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:56px;margin-bottom:8px}
.ma-views{display:flex;align-items:flex-end;gap:2px}
.ma-views button{
  width:52px;height:44px;display:grid;place-items:center;color:var(--text-3);
  border-bottom:2px solid transparent;border-radius:6px 6px 0 0;
}
.ma-views button.on{color:var(--blue);border-bottom-color:var(--blue);background:var(--blue-bg-2)}
.ma-month{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.ma-month button{width:24px;height:24px;display:grid;place-items:center;border-radius:4px;color:var(--text-2)}
.ma-month button:hover{background:var(--hover)}
.ma-month span{display:flex;align-items:center;gap:7px}
.ma-month i{color:var(--text-3);display:flex}
.ma-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ma-split{grid-template-columns:minmax(0,1fr) 470px;gap:22px;align-items:start}
@media (max-width:1240px){ .ma-split{grid-template-columns:1fr} }

/* ---- calendar ---- */
.cal-card{padding:0;overflow:visible}
table.cal{table-layout:fixed;border-collapse:separate;border-spacing:0}
table.cal thead th{
  background:#FAFAFB;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;
  text-align:center;height:38px;color:var(--text-2);border-bottom:1px solid var(--border);
}
table.cal td{
  height:135px;vertical-align:top;padding:8px 9px;border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);background:#fff;position:relative;white-space:normal;cursor:pointer;
}
table.cal td:last-child{border-right:0}
table.cal tr:last-child td{border-bottom:0}
table.cal td.mute{background:#F0F0F0;cursor:default}
table.cal td.mute .dnum{color:var(--text-3)}
table.cal td .dnum{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text-2);margin-bottom:8px}
table.cal td .up{color:#52C41A;display:flex}
table.cal td.sel{
  background:#fff;border-radius:8px;box-shadow:0 8px 26px rgba(20,40,80,.18);
  transform:scale(1.06);z-index:5;border-color:transparent;
}
table.cal td.sel .dnum .n{
  background:var(--blue);color:#fff;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;
}
.cell-chip{
  display:block;text-align:center;font-size:12.5px;border-radius:4px;padding:4px 6px;
  border-left:4px solid transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cell-chip.sm{display:inline-block;padding:2px 10px;font-size:12px}
.cc-present{background:#9BD4D4;border-left-color:#0F7171;color:#123}
.cc-absent{background:var(--absent-bg);border-left-color:#D44145}
.cc-off{background:#fff;border:1px solid var(--border-input);border-left:4px solid #BFBFBF;color:var(--text-2)}
.cc-holiday{background:#FBF0BF;border-left-color:#E8C547}
.cc-pending{background:var(--pending-corr-bg);border-left-color:var(--blue)}
table.cal td .times{text-align:center;font-size:12.5px;color:var(--text-2);margin-top:7px}
table.cal td .times.corrected{color:var(--blue);font-weight:500}
.cal-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--border)}
.cal-legend.top{padding:0 0 14px;border-top:0}
.lg{display:inline-flex;align-items:center}
.lg i{width:4px;height:20px;border-radius:2px 0 0 2px;display:block}
.lg span{font-size:12.5px;padding:2px 10px;border-radius:0 3px 3px 0;line-height:16px}
.lg-divider{width:1px;height:18px;background:var(--border-2)}

/* ---- stat pills ---- */
.statpills{display:flex;align-items:center;gap:5px;padding:9px 12px;margin-bottom:14px}
.statpills .pill-x{color:var(--red);display:flex;margin-right:4px}
.statpills .pill{
  min-width:30px;height:22px;border-radius:4px;display:grid;place-items:center;
  font-size:12.5px;font-weight:600;padding:0 7px;
}
.statpills .pill-div{width:1px;height:18px;background:var(--border-2);margin:0 3px}

/* ---- day rail ---- */
.card.detail{padding:18px 20px 20px}
.dtitle{text-align:center;font-size:19px;font-weight:500;margin-bottom:18px}
.dkv{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:14px}
.dkv .tick{width:3px;height:18px;border-radius:2px;flex:0 0 3px}
.dkv .k{color:var(--text-3);flex:0 0 210px}
.dkv .v{color:var(--text)}
.dkv .ii{color:var(--text-3);display:inline-flex;vertical-align:-2px}
.dbtns{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 22px}
.ptitle{text-align:center;font-size:14px;font-weight:400;color:var(--text-2);margin-bottom:10px}
table.punch{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
table.punch th{
  background:#fff;font-size:11.5px;height:40px;text-align:center;color:var(--text-2);
  border-bottom:1px solid var(--border);
}
table.punch td{text-align:center;height:38px;font-size:13.5px;border-bottom:1px solid var(--border)}
table.punch tr:last-child td{border-bottom:0}
table.punch .src{color:var(--text-4);display:inline-flex;vertical-align:-2px;margin-left:3px}

/* ---- detail view ---- */
.dbar{width:26px;height:16px;border-radius:3px;display:inline-block;vertical-align:-3px;margin-right:10px}

/* title info glyph sits inline, as it does in the real dialog */
.modal-head h3{display:flex;align-items:center;gap:8px}
.modal-head h3 .ttip{display:inline-flex;color:var(--text-3);cursor:help}

/* ============================================================
   PHASE 3 · Leave — patterns captured from the live app
   ============================================================ */

/* the three count chips centred above the Leave Request fields */
.form-chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:-4px 0 22px}
.form-chips span{
  border:1px solid var(--blue);color:var(--blue);border-radius:var(--radius);
  padding:5px 12px;font-size:13px;background:#fff;
}

/* progressive form — fields stay hidden until the first one is answered */
.field.veiled{display:none}

/* the "Balance" chip floated above-right of a field */
.field > label{position:relative;display:flex;align-items:center;gap:8px}
.side-chip{
  margin-left:auto;font-size:11.5px;color:var(--blue);background:var(--blue-bg);
  border-radius:4px;padding:2px 8px;line-height:16px;
}
.side-chip:hover{background:#D6EAFF}

/* the solid blue balance strip that appears under Leave Code */
.fstrip{
  background:var(--blue);color:#fff;font-size:12.5px;font-weight:500;
  padding:3px 10px;border-radius:0 0 var(--radius) var(--radius);margin-top:-1px;
}
.field.has-strip .inp{border-bottom-left-radius:0;border-bottom-right-radius:0}
.help-ok{color:#389E0D}
.menu button.nores{color:var(--text-3);cursor:default;font-style:italic}
.menu button.nores:hover{background:none;color:var(--text-3)}

/* paid / unpaid badge on Leave Code Master */
.pbadge{
  display:inline-grid;place-items:center;width:16px;height:16px;border-radius:3px;
  font-size:10.5px;font-weight:700;margin-left:8px;vertical-align:1px;
}
.pbadge.p{background:#F6FFED;color:#389E0D}
.pbadge.u{background:#FFF1F0;color:#CF1322}

/* the four-chip Leave Allotment cell */
.allot{display:inline-flex;gap:5px}
.allot span{
  background:var(--blue-bg);color:var(--blue);border-radius:4px;
  padding:1px 7px;font-size:11.5px;line-height:17px;min-width:26px;text-align:center;
}

/* holiday type codes + the legend row in the header */
.hcode{border-radius:4px;padding:1px 7px;font-size:11.5px;font-weight:600;line-height:17px}
.hlegend{display:inline-flex;gap:6px}
.hlegend span{border-radius:4px;padding:1px 7px;font-size:11px;font-weight:600}
tr.codebar th{height:30px;border-bottom:0;padding-top:8px}

/* the boxed calendar-day count under Total Leaves */
.calbox{
  display:inline-grid;place-items:center;min-width:18px;height:18px;border:1px solid var(--border-2);
  border-radius:3px;font-size:11px;font-weight:500;color:var(--text-3);
}
/* the blue D chip beside Actual Hour(s)/Day(s) */
.dchip{color:var(--blue);font-size:11.5px;font-weight:600;margin-left:5px}

/* the inline editable Expiry Date cell on Extra Working */
.inline-date{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-input);
  border-radius:var(--radius);padding:3px 8px;background:#fff;
}
.inline-date input{border:0;outline:0;width:96px;font-size:13px;text-align:left;background:none}
.inline-date svg{color:var(--text-3)}

/* ============================================================
   Add Attendance Policy — the full-page form with blue bands
   ============================================================ */
.ap-head{display:flex;align-items:center;padding:14px 20px;background:#fff;
  border:1px solid var(--border-2);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0}
.ap-head h3{font-size:17px;font-weight:600;margin:0}
.ap-head .x{margin-left:auto;color:var(--red);padding:2px 6px;border-radius:4px}
.ap-head .x:hover{background:#FFF1F0}
.ap-band{
  background:var(--blue-bg-2);color:var(--blue);font-size:14px;font-weight:500;
  padding:11px 20px;border:1px solid var(--border-2);border-bottom:0;
}
.ap-body{background:#fff;border:1px solid var(--border-2);border-bottom:0;padding:18px 20px 22px}
.ap-body:last-of-type{border-bottom:1px solid var(--border-2);border-radius:0 0 var(--radius) var(--radius)}
.ap-sub{font-size:13px;color:var(--text-3);margin:6px 0 10px}
.ap-rule{background:#FFFBF0;border:1px solid #FFE7BA;border-radius:var(--radius);padding:12px;
  display:flex;justify-content:flex-end}
.ap-card{border:1px solid var(--border-2);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px}
.capset{display:flex;gap:14px;flex-wrap:wrap}
.capset label{
  display:flex;align-items:center;gap:9px;border:1px solid var(--border-2);border-radius:var(--radius);
  padding:7px 14px;font-size:14px;cursor:pointer;background:#fff;
}
.capset label svg{color:var(--text-3)}
.ap-calc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media (max-width:960px){ .ap-calc{grid-template-columns:1fr} }
.ap-calc label{display:flex;align-items:center;gap:6px;font-size:13.5px;margin-bottom:8px}
.ap-calc label i{font-style:normal;color:var(--text-3)}
.ap-calc label svg{color:var(--text-4)}
.ap-limits{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:960px){ .ap-limits{grid-template-columns:1fr} }
.ap-lim-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ap-lim-h b{font-size:14px;font-weight:500}
.ap-lim-h .toggle{margin-left:auto}
.ap-ignore{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.ap-ignore b{font-weight:500}
.inp.sm{width:88px;height:32px;display:inline-flex}
.ap-toggle-row{display:flex;align-items:center;gap:16px;font-size:14px}
.ap-toggle-row .chk{margin-left:0}
.ap-notif label{align-items:flex-start;height:auto;padding:6px 0}

/* ============================================================
   Add location — the two-column dialog with the map panel
   ============================================================ */
.modal-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
@media (max-width:900px){ .modal-split{grid-template-columns:1fr} }
.side-label{display:block;font-size:14px;margin-bottom:6px}
.mapfield{
  position:relative;height:330px;border-radius:var(--radius);overflow:hidden;
  background:
    radial-gradient(ellipse 26% 30% at 32% 44%, #EEF5FC 0 70%, transparent 71%),
    radial-gradient(ellipse 18% 22% at 70% 30%, #F0F7F1 0 70%, transparent 71%),
    repeating-linear-gradient(0deg,#EDEFF2 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,#EDEFF2 0 1px,transparent 1px 44px),#E5E3DF;
}
.mapfield .locate{
  position:absolute;left:10px;top:10px;width:34px;height:34px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--border-2);border-radius:4px;color:var(--text-2);
}
.mapfield .mapsearch{
  position:absolute;left:56px;top:12px;right:12px;height:32px;border:1px solid var(--border-2);
  border-radius:4px;padding:0 12px;font-size:13px;outline:0;background:#fff;
}
.mapfield .ring{position:absolute;left:50%;top:56%;border-radius:50%;transform:translate(-50%,-50%)}
.mapfield .ring.fence{width:190px;height:190px;border:2px dashed #52C41A;background:rgba(82,196,26,.08)}
.mapfield .ring.punch{width:86px;height:86px;border:2px solid #1677FF;background:rgba(22,119,255,.12)}
.ldot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:6px}
.charcount{display:block;text-align:right;font-size:11.5px;color:var(--text-4);margin-top:4px}

/* ============================================================
   PHASE 4 · PayRoll — captured 20-Aug-2026
   ============================================================ */

/* ---- shared bits ---- */
.tag.teal   { background:#e0f5f2; color:#0d7d6e; }
.tag.green  { background:#e3f6e8; color:#1c7a3a; }
.tag.amber  { background:#fdf0dc; color:#a2650c; }
.tag.red    { background:#fdeaea; color:#b4292a; }
.tag.blue   { background:#e6f0fd; color:#1657b8; }
.ok-txt     { color:#1c7a3a; font-weight:600; }
.amt-g      { color:#1c7a3a; font-weight:600; }
.amt-r      { color:#c33; font-weight:600; }
.amt-a      { color:#c07408; font-weight:600; }
.pe-txt     { color:#1c7a3a; font-weight:600; }
.lnk        { color:#1657b8; }
.neg        { color:#c33; }
.sw         { display:inline-block; width:11px; height:11px; border-radius:3px;
              margin-right:9px; vertical-align:-1px; }
.sw.g       { background:#3aa76d; }
.mini       { border:0; background:transparent; padding:3px; border-radius:6px;
              color:var(--text-3); cursor:pointer; line-height:0; }
.mini:hover { background:var(--bg-2); color:var(--text); }
.mini.blue  { color:#1e73e8; } .mini.amber { color:#e09b16; } .mini.red { color:#d24242; }
.rd         { accent-color:#1e73e8; width:15px; height:15px; }
.err-line   { color:#c33; font-size:13px; margin:8px 0 0; }
.form-band  { background:#eef4fd; border:1px solid #dbe6f7; border-radius:8px;
              padding:9px 14px; font-weight:700; font-size:14px; color:#1a4b8f; margin:6px 0 2px; }
.lbl-i      { display:inline-flex; vertical-align:-2px; margin-left:5px; color:var(--text-3); cursor:help; }

/* the five compliance chips, in the app's own colours */
.cchips     { display:inline-flex; gap:5px; flex-wrap:wrap; }
.cchips span{ font-size:11px; font-weight:600; padding:2px 7px; border-radius:5px; }
.c-pf   { background:#e6f0fd; color:#1657b8; }
.c-pt   { background:#e3f6e8; color:#1c7a3a; }
.c-tds  { background:#fdeaea; color:#b4292a; }
.c-esic { background:#e0f5f2; color:#0d7d6e; }
.c-tax  { background:#fdf0dc; color:#a2650c; }
.c-lwf  { background:#eceafd; color:#4a3ab0; }

/* ---- Company profile card ---- */
.co-card    { padding:20px 22px; margin-bottom:14px; }
.co-top     { display:flex; align-items:flex-start; gap:20px; }
.co-top h2  { margin:0 0 10px; font-size:21px; display:flex; align-items:center; gap:6px; }
.co-meta    { display:flex; flex-wrap:wrap; gap:6px 26px; font-size:13px; color:var(--text-2); }
.co-meta span{ display:inline-flex; align-items:center; gap:7px; }
.co-logos   { margin-left:auto; display:flex; gap:10px; }
.co-logos .lg { width:112px; height:44px; border:1px solid var(--border); border-radius:8px;
                display:grid; place-items:center; font-size:12px; font-weight:800;
                letter-spacing:.06em; color:#1a7fc1; background:#fff; }
.co-logos .lg.alt { color:transparent; }
.co-strip   { display:grid; grid-template-columns:34px repeat(4, 1fr); gap:16px; align-items:center;
              margin-top:16px; padding:12px 14px; background:var(--bg-2); border-radius:9px; }
.co-strip label { display:block; font-size:11px; color:var(--text-3); margin-bottom:3px; }
.co-strip b { font-size:13.5px; font-weight:600; }
.co-strip .chev { border:0; background:transparent; color:var(--text-3); cursor:pointer; line-height:0; }
.logo-cell  { display:inline-grid; place-items:center; width:104px; height:30px; border-radius:5px;
              font-size:11px; font-weight:800; letter-spacing:.05em; }
.logo-cell.em { background:#eaf4fb; color:#1a7fc1; }
.logo-cell.hl { background:#fdf0e8; color:#d2622a; }

/* ---- page-level tab strip (Payroll Settings / Payroll Compliance) ---- */
.pgtabs     { display:flex; gap:2px; border-bottom:1px solid var(--border);
              background:#fff; border-radius:12px 12px 0 0; padding:0 8px; margin-bottom:0; }
.pgtabs button { border:0; background:transparent; padding:13px 20px; font-size:14px;
              color:var(--text-2); cursor:pointer; border-bottom:2px solid transparent; }
.pgtabs button.on { color:#1e73e8; border-bottom-color:#1e73e8; font-weight:600; }
.pgtabs + .card, .pgtabs + div > .card:first-child { border-radius:0 0 12px 12px; margin-top:0; }

.ps-bar     { display:flex; align-items:center; gap:16px; padding:14px 16px; }
.ps-lbl     { font-size:14px; color:var(--text-2); }
.ps-bar .btn:last-child { margin-left:auto; }
.lvl-chip   { display:block; width:max-content; margin:14px auto; background:#e0f5f2;
              color:#0d7d6e; font-size:12.5px; font-weight:600; padding:4px 14px; border-radius:20px; }

/* ---- accordion (Payroll Cycle Setup, Payroll Master) ---- */
.acc        { border-top:1px solid var(--border); }
.acc:first-of-type { border-top:0; }
.acc-head   { display:flex; align-items:center; gap:16px; padding:15px 18px; }
.acc-head b { font-size:14px; }
.acc-head span:not(.acc-ico):not(.acc-bar):not(.acc-cnt) { font-size:13px; color:var(--text-2); }
.acc-ico    { margin-left:0; line-height:0; }
.acc-head .acc-ico { margin-left:auto; display:inline-flex; gap:4px; }
.acc-chev   { border:0; background:transparent; color:var(--text-3); cursor:pointer;
              line-height:0; padding:4px; transition:transform .18s; }
.acc.open .acc-chev { transform:rotate(180deg); }
.acc-body   { display:none; padding:0 18px 16px; }
.acc.open .acc-body { display:block; }
.cmp-acct   { display:flex; align-items:center; gap:12px; padding:14px 18px; margin-bottom:12px; }
.cmp-acct b { font-size:14px; }
.cmp-acct .btn { margin-left:auto; }
.cmp-acct.open .acc-chev { transform:rotate(90deg); }
.cmp-rule-head { display:flex; align-items:center; gap:12px; padding:14px 18px; }
.cmp-rule-head b { font-size:14px; }
.cmp-rule-head .inp { margin-left:auto; }
.cmp-rule-head .btn { margin-left:0; }

/* ---- Payroll Master dashboard ---- */
.pm-band    { display:flex; align-items:center; gap:44px; background:var(--bg-2);
              border:1px solid var(--border); border-radius:12px; padding:14px 20px; margin-bottom:14px; }
.pm-band label { display:flex; align-items:center; gap:6px; font-size:11px;
              text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin-bottom:3px; }
.pm-band b  { font-size:14px; }
.pm-band .icon-btn { margin-left:auto; }
.pm-pipe    { padding:16px 18px; margin-bottom:14px; }
.pm-pipe-head { display:flex; align-items:center; margin-bottom:14px; }
.pm-pipe-head h3 { margin:0; font-size:15px; }
.stepchip   { margin-left:auto; background:#e6f0fd; color:#1657b8; font-size:11px;
              font-weight:700; text-transform:uppercase; letter-spacing:.05em;
              padding:4px 10px; border-radius:20px; }
.pm-pipe-body { display:flex; align-items:center; gap:12px; }
.pipe-tile  { flex:1; border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:#fff; }
.pipe-tile.on { border-color:#1e73e8; box-shadow:0 0 0 3px rgba(30,115,232,.10); background:#f7fbff; }
.pipe-tile.off { opacity:.55; }
.pipe-tile > div:first-child { display:flex; align-items:center; gap:9px; }
.pipe-tile b { color:#1e73e8; font-size:13px; }
.pipe-tile.off b { color:var(--text-3); }
.pipe-tile span { font-weight:600; font-size:14px; }
.pipe-tile i { margin-left:auto; font-style:normal; font-size:12.5px; color:var(--text-3); }
.pipe-arrow { color:var(--text-3); line-height:0; }
.bar        { height:5px; border-radius:4px; background:#e8edf4; margin-top:12px; overflow:hidden; }
.bar > span { display:block; height:100%; background:#1e73e8; border-radius:4px; }
.bar.wide   { margin:12px 0 16px; }
.bar.wide > span { background:#3aa76d; }
.pm-two     { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.pm-two > .card { padding:16px 18px; }
.pm-card-head { display:flex; align-items:flex-start; margin-bottom:4px; }
.pm-card-head b { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.pm-card-head small { display:block; font-size:13px; color:var(--text-2); margin-top:2px; }
.chip-lock  { margin-left:auto; display:inline-flex; align-items:center; gap:5px;
              background:#e3f6e8; color:#1c7a3a; font-size:11.5px; font-weight:600;
              padding:4px 10px; border-radius:20px; }
.pm-stats   { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pm-stats > div { border:1px solid var(--border); border-radius:10px; padding:13px 14px; position:relative; }
.pm-stats > div.on { background:var(--bg-2); }
.pm-stats .ic { color:var(--text-3); line-height:0; display:block; margin-bottom:12px; }
.pm-stats b { display:block; font-size:22px; line-height:1.1; }
.pm-stats small { font-size:12.5px; color:var(--text-3); }
.pm-stats .delta { position:absolute; top:13px; right:13px; font-size:11px; font-weight:600; }
.delta.up, .rd-n .up { color:#1c7a3a; } .delta.dn, .rd-n .dn { color:#c33; }
.rd-row     { display:flex; align-items:center; gap:13px; border:1px solid var(--border);
              border-radius:10px; padding:12px 14px; margin-top:10px; }
.rd-ic      { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; line-height:0; }
.rd-ic.g    { background:#e3f6e8; color:#1c7a3a; }
.rd-ic.a    { background:#fdf0dc; color:#a2650c; }
.rd-ic.b    { background:#e6f0fd; color:#1657b8; }
.rd-row > div:nth-child(2) b { display:block; font-size:13.5px; }
.rd-row > div:nth-child(2) small { font-size:12px; color:var(--text-3); }
.rd-n       { margin-left:auto; text-align:right; }
.rd-n b     { font-size:19px; }
.rd-n span  { display:block; font-size:11px; font-weight:600; }
.rd-btns    { display:flex; gap:7px; }
.pm-pending { padding:16px 18px; }
.pm-acc     { border:1px solid var(--border); border-radius:10px; margin-top:11px; overflow:hidden; }
.acc-bar    { width:3px; height:26px; border-radius:3px; }
.acc-bar.amber { background:#e09b16; } .acc-bar.orange { background:#e2703a; } .acc-bar.blue { background:#1e73e8; }
.acc-ic.amber  { color:#e09b16; } .acc-ic.orange { color:#e2703a; } .acc-ic.blue { color:#1e73e8; }
.acc-cnt    { margin-left:auto; background:#fdf0dc; color:#a2650c; font-size:11.5px;
              font-weight:600; padding:3px 10px; border-radius:20px; }
.dropgroup  { border:1px dashed var(--border); border-radius:8px; padding:9px 14px;
              font-size:12.5px; color:var(--text-3); margin-bottom:10px; }
.bulkmini   { display:flex; gap:8px; margin-bottom:10px; }
.acc-note   { font-size:13px; color:var(--text-2); margin:4px 0 0; }
.acc-note a { color:#1e73e8; }

/* ---- Process Payroll ---- */
.pp-head h2 { margin:0; font-size:20px; }
.pp-head small { color:var(--text-3); font-size:13px; }
.pp-wiz     { display:flex; align-items:stretch; gap:8px; margin:14px 0; }
.pp-card    { flex:1; text-align:left; border:1px solid var(--border); border-radius:11px;
              background:#fff; padding:14px 16px; cursor:pointer; }
.pp-card b  { display:block; font-size:12px; color:var(--text-3); }
.pp-card span { display:block; font-size:14.5px; font-weight:600; margin:3px 0 4px; }
.pp-card i  { font-style:normal; font-size:12px; color:var(--text-3); }
.pp-card.on { border-color:#1e73e8; box-shadow:0 0 0 3px rgba(30,115,232,.10); background:#f7fbff; }
.pp-card.on b, .pp-card.on span { color:#1657b8; }
.pp-card.off { opacity:.55; }
.pp-go      { align-self:center; width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
              background:#fff; color:var(--text-3); cursor:pointer; display:grid; place-items:center; }
.pp-go:hover{ border-color:#1e73e8; color:#1e73e8; }
.pp-hold    { display:inline-flex; align-items:center; gap:8px; margin-left:10px; }
.pp-hold .inp { width:140px; }
.seg.sm button { padding:6px 11px; font-size:12.5px; }
.pp-foot    { display:flex; justify-content:space-between; padding:14px 16px; border-top:1px solid var(--border); }

/* ---- Form 24Q / generic act buttons ---- */
.act .addc  { color:#1e73e8; } .act .regen { color:#d24242; }

/* ---- Process Salary Import ---- */
.imp        { padding:22px 24px; }
.imp-title  { margin:0 0 20px; font-size:19px; }
.stepper    { display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.stepper .line { flex:1; height:1px; background:var(--border); }
.stepper .step { display:flex; align-items:center; gap:10px; opacity:.55; }
.stepper .step.on { opacity:1; }
.stepper .dot { width:24px; height:24px; border-radius:50%; background:#dfe5ee; color:#fff;
                display:grid; place-items:center; font-size:12px; font-weight:700; }
.stepper .step.on .dot { background:#1e73e8; }
.stepper b  { display:block; font-size:13px; }
.stepper i  { font-style:normal; font-size:12px; color:var(--text-3); }
.imp-box    { max-width:640px; margin:0 auto; border:1px solid var(--border); border-radius:11px; padding:18px; }
.imp-sample { display:flex; align-items:center; gap:9px; font-size:13.5px; margin-bottom:14px; }
.dropzone   { border:1.5px dashed #c9d3e2; border-radius:10px; padding:26px 22px;
              display:flex; align-items:center; gap:22px; cursor:pointer; }
.dropzone:hover, .dropzone.over { border-color:#1e73e8; background:#f7fbff; }
.dropzone.filled { border-style:solid; border-color:#3aa76d; background:#f6fcf8; }
.dropzone .cloud { color:#1e73e8; line-height:0; }
.dropzone b { display:block; font-size:15px; }
.dropzone small { font-size:12.5px; color:var(--text-3); }
.imp-done   { text-align:center; }
.imp-done .ic { color:#3aa76d; display:block; margin-bottom:8px; line-height:0; }
.imp-done h3 { margin:0 0 6px; font-size:17px; }
.imp-done p { font-size:13.5px; color:var(--text-2); margin:0; }
.imp-foot   { display:flex; justify-content:center; gap:10px; margin-top:22px; }

/* ---- TDS Cycle cards ---- */
.tdsgrid    { display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:14px; }
.tdscard    { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.tds-head   { background:#eef6fd; padding:15px 18px 13px; position:relative; }
.tds-head h3{ margin:0; font-size:18px; }
.tds-ico    { position:absolute; top:14px; right:16px; display:flex; gap:4px; }
.tds-sub    { display:flex; align-items:center; gap:9px; margin-top:8px; font-size:13px; color:var(--text-2); }
.tds-sub em { margin-left:auto; font-style:normal; font-size:12.5px; }
.tds-sub em.amber { color:#c07408; } .tds-sub em.blue { color:#1657b8; }
.tds-body   { padding:16px 18px; }
.tds-grid   { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:14px; }
.tds-grid label { display:block; font-size:12px; color:var(--text-3); margin-bottom:3px; }
.tds-grid b { font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.tds-req    { display:flex; align-items:center; padding:9px 0; border-top:1px solid var(--border); font-size:13.5px; }
.tds-req .tag { margin-left:auto; }
.tds-notif  { border-top:1px solid var(--border); padding-top:11px; margin-top:4px; }
.tds-notif > div { display:flex; align-items:center; gap:14px; padding:5px 0; font-size:13.5px; }
.tds-notif span { display:inline-flex; align-items:center; gap:8px; }
.tds-notif em { margin-left:auto; font-style:normal; font-size:12.5px; color:#c33;
                display:inline-flex; align-items:center; gap:4px; }
.tds-notif em + em { margin-left:14px; }

/* ---- salary-structure builder grid (template add + assign) ---- */
.sstable    { margin-top:14px; }
.sstable .sec-row td { background:var(--bg-2); font-size:12px; text-transform:uppercase;
              letter-spacing:.05em; color:var(--text-2); padding:9px 12px; }
.sstable .sec-row .plus { border:0; background:transparent; color:#3aa76d;
              cursor:pointer; line-height:0; margin-left:8px; vertical-align:-3px; }
.sstable .line-row td { padding:8px 12px; }
.sstable .line-row .inp { min-height:34px; }
.sstable .line-row .inp.sm { width:74px; margin-left:8px; display:inline-block; }
.sstable .tot-row td { background:#f7fafd; font-size:13px; font-weight:600; padding:8px 12px; }
.sstable .tot-row.big td { background:#eef4fd; color:#1657b8; }
.ss-amt     { text-align:center; position:relative; }
.ss-prog    { display:inline-block; width:150px; height:5px; border-radius:4px;
              background:#f0e2c2; margin:0 8px; vertical-align:middle; overflow:hidden; }
.ss-prog i  { display:block; height:100%; background:#e6a723; }
.ss-amt em  { font-style:normal; font-size:12px; color:var(--text-2); }
.ss-modal .modal-actions { justify-content:flex-end; }
.ss-top     { display:grid; grid-template-columns:1.3fr 1fr 1.8fr; gap:16px; align-items:start;
              border:1px solid var(--border); border-radius:11px; padding:16px; margin-bottom:14px; }
.ss-money   { border:1px solid var(--border); border-radius:9px; padding:10px 14px 12px; margin:0;
              display:grid; grid-template-columns:auto 1fr 1fr; gap:12px; align-items:end; }
.ss-money legend { font-size:12px; color:var(--text-3); padding:0 5px; }
.ss-mode    { display:flex; align-items:flex-end; gap:20px; }
.ss-mode .field { min-width:210px; }

/* ---- rule builder (shared with Add Attendance Policy) ---- */
.rule-head  { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rule-head .btn { margin-left:auto; }
.notchip    { border:1px solid var(--border); background:#fff; border-radius:6px;
              padding:4px 12px; font-size:12.5px; cursor:pointer; color:var(--text-2); }
.notchip.on { background:#fdeaea; border-color:#f2c4c4; color:#b4292a; font-weight:600; }
.rule-line  { display:flex; align-items:center; gap:8px; padding:6px 0; }
.rule-line .inp { max-width:190px; min-height:32px; }
.tpl-top    { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.tpl-crit   { display:flex; align-items:center; font-size:14px; margin-bottom:8px; }
.tpl-crit .mini { margin-left:auto; }

/* ---- Sorting dialog ---- */
.sortlist   { max-height:360px; overflow:auto; border:1px solid var(--border); border-radius:9px; }
.sl-head, .sl-row { display:grid; grid-template-columns:80px 1fr 40px; align-items:center;
              gap:10px; padding:9px 14px; }
.sl-head    { background:var(--bg-2); font-size:11px; text-transform:uppercase;
              letter-spacing:.05em; color:var(--text-3); position:sticky; top:0; }
.sl-row     { border-top:1px solid var(--border); font-size:13.5px; cursor:grab; background:#fff; }
.sl-row:hover { background:#f7fbff; }
.sl-row.dragging { opacity:.4; }
.sl-row .grip { color:var(--text-3); text-align:right; cursor:grab; }

/* ---- Phase 4 polish ---------------------------------------- */
/* a text/number field must not draw a second border inside .inp */
.inp > input.val, .inp > input.mapsearch {
  border:0; background:transparent; outline:none; padding:0;
  font:inherit; color:inherit; width:100%; min-width:0;
}
.inp > input.val::placeholder { color:var(--text-4); }

/* the applicability panel is a stack, not a row, when it holds rules */
[data-f="tplRules"], [data-f="apRules"] { display:block; }
[data-f="tplRules"] .rule-line:first-child { border-top:1px dashed #f0dcb4; margin-top:4px; padding-top:10px; }

/* Assign Salary Structure — the boxed "Monthly" group */
.ss-money { border:1px solid var(--border-input); background:#fff; }
.ss-money legend { font-size:12px; color:var(--text-3); }
.ss-top .field > label, .ss-money .field > label { font-size:13px; }
/* the two value inputs sit side by side, as they do live */
.sstable .line-row td.vcell { display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.sstable .line-row td.vcell .inp { flex:1 1 auto; }
.sstable .line-row td.vcell .inp.sm { flex:0 0 74px; margin:0; }

/* Company profile card */
.co-strip { background:#f6f8fb; }
.co-logos .lg { border:1px solid var(--border-input); }

/* ============================================================
   PHASE 5 · Travel And Expense — captured 20-Aug-2026
   ============================================================ */
.no-txt      { color:#c33; font-weight:600; }
.lnk-cell    { color:#1657b8; text-decoration:none; }
.lnk-cell:hover { text-decoration:underline; }
.tglyph      { display:inline-block; min-width:20px; font-weight:700; font-size:12px;
               color:var(--text-3); margin-right:8px; }
.amt-in      { max-width:160px; height:32px; }
.sect-lbl    { font-size:14px; margin:16px 0 8px; display:flex; align-items:center; gap:6px; }
.cntchip     { background:#e6f0fd; color:#1657b8; font-size:11.5px; font-weight:600;
               padding:3px 10px; border-radius:20px; margin-left:auto; }
.plus        { border:0; background:transparent; color:#3aa76d; cursor:pointer;
               line-height:0; padding:2px; }

/* Manage Policy — the Instance × Amount matrix and the slider */
.limitbox    { padding:16px 18px; }
.limit-head  { display:flex; align-items:center; margin-bottom:12px; }
.limit-head b{ font-size:14px; }
.limit-head .chk { margin-left:auto; font-size:13px; }
table.limitgrid th { background:var(--bg-2); font-size:11px; text-transform:uppercase;
               letter-spacing:.05em; color:var(--text-3); padding:9px 12px; text-align:left; }
table.limitgrid tbody th { background:transparent; text-transform:none; letter-spacing:0;
               font-size:13.5px; color:var(--text); font-weight:600; }
table.limitgrid td { padding:7px 10px; }
.slider-row  { display:flex; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap; }
.slider-row b{ font-size:13.5px; }
.rng         { flex:0 0 240px; accent-color:#1e73e8; }
.slider-row .ticks { display:flex; gap:0; width:240px; margin-left:-256px;
               margin-top:26px; justify-content:space-between; pointer-events:none; }
.slider-row .ticks i { font-style:normal; font-size:11px; color:var(--text-3); }
.inp.num     { width:92px; }

/* Expense Policy — the two buttons in the MANAGE column */
.mngbtns     { display:inline-flex; gap:8px; }

/* Expense Request — the repeating line cards */
.exp-lines   { display:block; }
.exp-linebar { display:flex; justify-content:flex-end; margin:4px 0 12px; }
p.form-note.exp-lines { color:inherit; font-size:inherit; margin:0; }
.exp-line    { position:relative; border:1px solid var(--border-input); border-radius:11px;
               background:#fff;
               padding:16px; margin-bottom:12px;
               display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.exp-line .del { position:absolute; top:10px; right:10px; }
.dropzone.sm { padding:12px 14px; gap:12px; }
.dropzone.sm b { font-size:13px; color:#1e73e8; }
.dropzone.sm small { font-size:11.5px; }

/* Travel Setup — POC cards */
.poc-card    { padding:16px 18px; margin-bottom:12px; }
.poc-head    { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.poc-head b  { font-size:14.5px; }
.poc-ic      { width:34px; height:34px; border-radius:50%; background:#e6f0fd; color:#1657b8;
               display:grid; place-items:center; line-height:0; flex:0 0 auto; }
.pgtabs.upper button { text-transform:uppercase; letter-spacing:.04em; font-size:13px; }
.chipset     { display:inline-flex; gap:6px; flex-wrap:wrap; }

/* Travel Request form */
.tr-top      { display:grid; grid-template-columns:1.9fr 1fr; gap:14px; }
.tr-top > .ap-card { margin:0; padding:16px 18px; }
.paxlist     { min-height:60px; }
.paxrow      { display:flex; align-items:center; gap:10px; padding:8px 10px;
               border:1px solid var(--border); border-radius:8px; margin-bottom:8px; font-size:13.5px; }
.paxrow em   { margin-left:auto; font-style:normal; font-size:11.5px; color:var(--text-3); }

/* Travel Booking — the real 403 */
.err403      { text-align:center; padding:90px 20px; }
.err403 h1   { font-size:64px; margin:0; color:var(--text-2); letter-spacing:.02em; }
.err403 h2   { font-size:30px; margin:4px 0 14px; letter-spacing:.04em; }
.err403 p    { color:var(--text-3); font-size:14px; margin:0 0 18px; }
.err403 a    { color:#1e73e8; font-size:14px; }
.err403 .err-note { max-width:620px; margin:26px auto 0; font-size:13px; color:var(--text-2);
               background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
               padding:14px 16px; text-align:left; }

/* full-page form footers (Add Attendance Policy, Salary Structure Template, Travel Request) */
.ap-foot     { display:flex; justify-content:flex-end; gap:10px; padding:16px 4px 4px; }

/* ============================================================
   PHASE 6 · Asset — captured 21-Aug-2026
   ============================================================ */

/* the applicability panel stacks its rules, same as Phases 2 and 4 */
[data-f="atRules"] { display:block; }

/* the three inventory counts on Asset Type really are links */
.inv-num     { color:#1657b8; font-weight:600; text-decoration:none; }
.inv-num:hover { text-decoration:underline; }

/* a filter icon the app draws "off" when nothing is applied */
.icon-btn.off { color:var(--text-4); opacity:.72; }

/* Add Asset Type — the Custom Fields card */
.cf-card     { padding:14px 16px; margin-top:16px; }
.cf-head     { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cf-head b   { font-size:14px; }
.cf-head .btn:first-of-type { margin-left:auto; }
table.cf-table th { white-space:nowrap; }
table.cf-table td { padding:7px 12px; vertical-align:middle; }
table.cf-table .inp { min-height:32px; }
table.cf-table .toggle { vertical-align:-4px; }

/* Default Asset Fields Overview — four cards, one per input type */
.dfgrid      { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.dfcard      { border:1px solid var(--border-2); border-radius:11px; padding:14px 15px; background:#fff; }
.dfcard h4   { margin:0 0 11px; font-size:13.5px; font-weight:600; display:flex;
               align-items:center; gap:8px; }
.dfcard .cnt { margin-left:auto; font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; }
.dfcard ul   { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.dfcard li   { font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:6px; }
.df-text li, .df-text .cnt { background:#e6f0fd; color:#1657b8; }
.df-drop li, .df-drop .cnt { background:#e3f6e8; color:#1c7a3a; }
.df-sw   li, .df-sw   .cnt { background:#fdf0dc; color:#a2650c; }
.df-date li, .df-date .cnt { background:#e0f5f2; color:#0d7d6e; }

/* the same four cards, filled in for one asset */
.dfcard .dl.compact { grid-template-columns:1fr; gap:0; }
.dfcard .dl.compact dt { font-size:11px; color:var(--text-3); margin-top:8px; }
.dfcard .dl.compact dt:first-child { margin-top:0; }
.dfcard .dl.compact dd { margin:0; font-size:13px; font-weight:500; color:var(--text); }
.illus       { font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.03em;
               text-transform:uppercase; color:#a2650c; background:#fdf0dc;
               padding:1px 6px; border-radius:4px; margin-left:6px; }

/* the widest action set in the prototype */
.act .pin    { color:var(--text-3); }
.act .assign { color:#1c7a3a; }

/* ============================================================
   PHASE 7 · Employees — captured 21-Aug-2026
   The first phase that is not a table.
   ============================================================ */

/* ---- shared card grid ---- */
.pgrid       { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
@media (max-width:1400px){ .pgrid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1100px){ .pgrid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pav         { width:78px; height:78px; border-radius:50%; object-fit:cover; margin:0 auto;
               display:block; background:#e9edf3; }
.pname       { font-size:14.5px; font-weight:600; margin:10px 0 2px; text-align:center;
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcode       { font-size:12.5px; color:var(--text-3); text-align:center; margin:0;
               display:flex; align-items:center; justify-content:center; gap:2px; }
.pdesig      { font-size:12.5px; color:var(--text-2); text-align:center; margin:2px 0 0; }

/* ---- My Team card ---- */
.pcard       { border:1px solid var(--border-2); border-radius:6px; background:#fff;
               overflow:hidden; display:flex; flex-direction:column; }
.pcard-strip { position:relative; text-align:center; padding:5px 0; font-size:12.5px; font-weight:500; }
.pcard-strip.in  { background:#d9f2dd; color:#1c7a3a; }
.pcard-strip.out { background:#fbdcda; color:#c0392b; }
.lchip       { position:absolute; left:6px; top:3px; border:1px solid #e79c9c; background:#fff;
               color:#c0392b; font-size:10.5px; font-weight:700; border-radius:3px; padding:0 5px;
               line-height:16px; }
.pcard-body  { padding:16px 14px 14px; display:flex; flex-direction:column; flex:1; }
.pmeta       { display:flex; flex-direction:column; gap:7px; margin:16px 0 14px; font-size:13px; }
.pmeta span  { display:flex; align-items:center; gap:9px; min-width:0; }
.pmeta span > svg { flex:0 0 auto; color:var(--text-3); }
.pmeta i     { font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmeta a     { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pview       { width:100%; margin-top:auto; }
.btn.btn-outline { border:1px solid #9dc2f2; background:#fff; color:#1e73e8; }
.btn.btn-outline:hover { background:#f2f7fe; }

/* ---- Employee Search card ---- */
.srch-card   { padding:18px 20px; margin-bottom:14px; display:flex; justify-content:center; }
.tbl-search.big, .tbl-search.wide { border:1px solid var(--border-input); border-radius:8px;
               display:flex; align-items:center; gap:9px; padding:0 12px; height:40px; background:#fff; }
.tbl-search.big { width:min(720px,100%); }
.tbl-search.wide { width:230px; height:36px; }
.tbl-search .si { color:var(--text-3); line-height:0; }
.tbl-search.big input, .tbl-search.wide input { border:0; outline:none; flex:1; font:inherit;
               background:transparent; min-width:0; }
.scard       { border:1px solid var(--border-2); border-radius:6px; background:#fff; padding:18px 14px 14px; }
.scard .pcode{ margin-bottom:6px; }
.scard-foot  { border-top:1px solid var(--border); margin-top:14px; padding-top:12px;
               display:flex; flex-direction:column; gap:8px; font-size:12.5px; align-items:center; }
.scard-foot span { display:flex; align-items:center; gap:8px; max-width:100%; }
.scard-foot a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-sel    { width:170px; height:36px; }

/* ---- the app's other empty state ---- */
.nodata      { text-align:center; padding:70px 20px; color:var(--text-3); }
.nodata svg  { color:var(--text-4); }
.nodata p    { font-size:15px; margin:14px 0 0; }

/* ---- Employee Profile modal ---- */
.prof-split  { display:grid; grid-template-columns:340px 1fr; gap:18px; }
.prof-left   { border:1px solid var(--border-2); border-radius:10px; padding:20px 18px; }
.prof-av     { width:96px; height:96px; border-radius:50%; display:block; margin:0 auto 12px; }
.prof-left h4{ text-align:center; font-size:19px; font-weight:600; margin:0; }
.prof-dl     { display:grid; grid-template-columns:auto 1fr; gap:9px 14px; font-size:13.5px; margin:16px 0 0; }
.prof-dl dt  { color:var(--text-3); }
.prof-dl dd  { margin:0; text-align:right; }
.prof-band   { margin-top:18px; padding-top:14px; border-top:1px solid var(--border);
               font-size:13.5px; color:var(--text-2); }
.prof-right .pgtabs { border-radius:10px 10px 0 0; }
.prof-card   { border-radius:0 0 10px 10px; padding:16px 18px; }
.prof-right .prof-card + .prof-card { border-radius:10px; margin-top:12px; }
.prof-three  { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
               font-size:13.5px; margin-bottom:16px; }
.prof-three span { display:flex; align-items:center; gap:9px; }
.prof-three svg  { color:var(--text-3); flex:0 0 auto; }
.prof-lbl    { display:block; font-size:12px; color:var(--text-3); margin-bottom:3px; }
.prof-addr   { font-size:13.5px; margin:0 0 14px; line-height:1.6; }
.prof-h      { font-size:14px; display:block; margin-bottom:12px; }
.prof-four   { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:12px; }
.prof-four p { margin:0; font-size:13.5px; }
.privacy-note{ display:flex; gap:9px; align-items:flex-start; margin:16px 0 0; padding:12px 14px;
               background:#fffbe6; border:1px solid #ffe7ba; border-radius:9px;
               font-size:12.5px; line-height:1.6; color:#8a5a00; }
.privacy-note svg { flex:0 0 auto; margin-top:1px; }

/* ---- Organization Chart ---- */
.oc-head     { display:flex; align-items:flex-start; gap:20px; margin-bottom:14px; }
.oc-head h2  { font-size:22px; margin:0 0 4px; }
.oc-head p   { font-size:13px; color:var(--text-3); margin:0; max-width:640px; }
.oc-search   { width:250px; height:40px; margin-left:auto; }
.oc-canvas   { position:relative; border:1px solid var(--border-2); border-radius:10px;
               background:#fff; height:calc(100vh - 250px); min-height:520px; overflow:auto; }
.oc-stage    { position:relative; transform-origin:0 0; }
.oc-links    { position:absolute; left:0; top:0; pointer-events:none; }
.oc-node     { position:absolute; width:236px; }
.oc-card     { border:1px solid var(--border-2); border-radius:10px; background:#fff;
               padding:11px 12px; box-shadow:0 1px 3px rgba(16,32,64,.06); font-size:12px; }
.oc-company  { border-color:#cfe0f7; }
.oc-top      { display:flex; gap:10px; align-items:flex-start; }
.oc-ic       { width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
               flex:0 0 auto; line-height:0; }
.oc-ic.blue  { background:#e6f0fd; color:#1657b8; }
.oc-ic.green { background:#e3f6e8; color:#1c7a3a; }
.oc-ic.orange{ background:#fdf0dc; color:#a2650c; }
.oc-top > div { min-width:0; }
.oc-top b    { display:block; font-size:13px; font-weight:600; margin:3px 0 1px;
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-top small{ color:var(--text-3); font-size:11px; display:flex; align-items:center; gap:4px; }
.oc-chip     { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.06em;
               padding:1px 6px; border-radius:4px; }
.c-company   { background:#e6f0fd; color:#1657b8; }
.c-sbu       { background:#e3f6e8; color:#1c7a3a; }
.c-dept      { background:#fdf0dc; color:#c07408; }
.c-head, .c-emp { background:#fde7f1; color:#b5177e; }
.c-emp       { letter-spacing:0; text-transform:none; font-weight:600; }
.oc-head-row { display:flex; align-items:center; gap:6px; }
.oc-head-row small { color:var(--text-3); font-size:10.5px; overflow:hidden;
               text-overflow:ellipsis; white-space:nowrap; }
.oc-stats    { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; margin-top:11px; }
.oc-stats span { display:flex; align-items:center; gap:7px; font-size:10.5px; color:var(--text-3); }
.oc-stats b  { font-size:14px; color:var(--text); }
.oc-stats i  { width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
               line-height:0; flex:0 0 auto; }
.s-green{background:#e3f6e8;color:#1c7a3a} .s-pink{background:#fde7f1;color:#b5177e}
.s-orange{background:#fdf0dc;color:#c07408} .s-blue{background:#e6f0fd;color:#1657b8}
.oc-foot     { display:flex; gap:14px; margin-top:9px; font-size:10.5px; color:var(--text-3); }
.oc-foot b   { color:var(--text); font-size:12px; margin-right:3px; }
.oc-foot.three { justify-content:space-between; border-top:1px solid var(--border); padding-top:7px; }
.oc-person   { display:flex; gap:8px; margin-top:9px; padding-top:9px; border-top:1px solid var(--border); }
.oc-person.lead { border-top:0; padding-top:4px; }
.oc-person img { width:26px; height:26px; border-radius:50%; flex:0 0 auto; }
.oc-person > div { min-width:0; }
.oc-person b { display:block; font-size:12px; font-weight:600; }
.oc-person small { display:block; color:var(--text-3); font-size:10.5px; margin-bottom:2px; }
.oc-person span { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--text-3);
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-toggle   { position:absolute; left:50%; transform:translateX(-50%); bottom:-13px;
               width:24px; height:24px; border-radius:50%; border:1px solid var(--border-2);
               background:#fff; color:var(--text-3); display:grid; place-items:center;
               cursor:pointer; z-index:2; box-shadow:0 1px 3px rgba(16,32,64,.1); }
.oc-toggle.open svg { transform:rotate(180deg); }
.oc-toggle:hover { border-color:#1e73e8; color:#1e73e8; }

/* the control rail — icons only until you hover it, exactly as the real one behaves */
.oc-rail     { position:absolute; right:14px; top:14px; display:flex; flex-direction:column;
               gap:8px; background:#fff; border:1px solid var(--border-2); border-radius:10px;
               padding:10px; z-index:5; box-shadow:0 2px 8px rgba(16,32,64,.08); }
.oc-btn      { display:flex; align-items:center; gap:0; justify-content:center; width:34px;
               height:32px; border:1px solid #9dc2f2; border-radius:7px; background:#fff;
               color:#1e73e8; cursor:pointer; overflow:hidden; transition:width .18s; }
.oc-btn.gap  { margin-bottom:8px; }
.oc-btn.on   { background:#1e73e8; color:#fff; border-color:#1e73e8; }
.oc-btn span { display:none; font-size:12.5px; font-weight:500; white-space:nowrap; }
.oc-rail:hover .oc-btn { width:132px; justify-content:flex-start; gap:9px; padding:0 10px; }
.oc-rail:hover .oc-btn span { display:inline; }

/* ============================================================
   PHASE 8 · Workforce Management — captured 11-Sep-2026 (26.C.51)
   ============================================================ */

/* the green Approved chip Promotion and Single Transfer use */
.ok-chip     { background:#e3f6e8; color:#1c7a3a; font-size:11.5px; font-weight:600;
               padding:2px 9px; border-radius:5px; }

/* the blue "effective from" notice the three request popups carry */
.eff-note    { display:block; color:#1e73e8; font-size:13px; font-weight:500; }
.modal-lede .eff-note { margin:0; }

/* Promotion → Configuration */
.cfg-card    { padding:16px 18px; margin:0 0 12px; }
.cfg-head    { display:flex; align-items:center; gap:6px; font-size:14px; margin-bottom:12px; }
.cfg-row     { display:flex; align-items:flex-end; gap:24px; }
.cfg-row .field { min-width:230px; }
.cfg-row .chk { height:36px; }

/* Single Transfer — the back-dated marker */
.back-dot    { font-style:normal; color:#e09b16; font-size:10px; margin-left:5px; cursor:help; }

/* Separation Setup — Required / Not Required, and the three-chip initiation rule */
.req-yes     { color:#c0392b; font-weight:500; }
.req-no      { color:#1c7a3a; font-weight:500; }
.initchips   { display:inline-flex; gap:7px; flex-wrap:wrap; align-items:center; }
.initchips span { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:5px; }
.i-auto      { background:#e6f0fd; color:#1657b8; }
.i-days      { background:#fdf3e0; color:#b3780c; }
.i-anchor    { background:#f2eafd; color:#6b34b8; }

/* the M1 / M2 point-of-contact chips */
.mchips      { display:inline-flex; gap:5px; }
.mchips span { background:#e6f0fd; color:#1657b8; font-size:11px; font-weight:600;
               padding:2px 7px; border-radius:4px; }

/* the two identical notice-period policies */
tr.dupe td:first-child::after { content:'duplicate'; margin-left:10px; font-size:10px;
               font-weight:600; letter-spacing:.04em; text-transform:uppercase;
               color:#b3780c; background:#fdf3e0; padding:1px 6px; border-radius:4px; }

/* Separation List — the revoke badge and the status vocabulary */
.r-badge     { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:3px;
               background:#fdeaea; color:#c0392b; font-size:10px; font-weight:700;
               margin-left:6px; vertical-align:1px; cursor:help; }
.sep-txt     { font-weight:500; }
.sep-txt.s-blue { color:#1657b8; } .sep-txt.s-amber { color:#b3780c; }
.sep-txt.s-green{ color:#1c7a3a; } .sep-txt.s-red   { color:#c0392b; }
.sep-txt.s-teal { color:#0d7d6e; }

/* the only master-detail table in the product */
.sep-exp     { position:static; transform:none; width:22px; height:22px; box-shadow:none;
               border-color:var(--border); }
.sep-exp.open svg { transform:rotate(90deg); }
tr.exp-row td { background:#f7fafd; padding:0; }
.exp-note    { display:flex; gap:10px; align-items:flex-start; padding:14px 18px;
               font-size:12.5px; line-height:1.6; color:var(--text-2); }
.exp-note svg { flex:0 0 auto; margin-top:1px; color:var(--text-3); }

/* Department Clearance — the dimmed download */
.mini.dim    { opacity:.35; }

/* Full & Final — the PDF / XLSX pair */
.dl-pair     { display:inline-flex; gap:2px; margin-left:8px; vertical-align:-3px; }
.mini.pdf    { color:#d0342c; } .mini.xls { color:#1d7044; }

/* Team Transfer — the member table inside the popup */
.tt-table    { border:1px solid var(--border-input); border-radius:10px; overflow:hidden;
               margin-top:6px; }
.tt-table table { font-size:13px; }
.tt-table th { background:var(--bg-2); }

/* ============================================================
   PHASE 9 · Documents — captured 11-Sep-2026 (26.C.51)
   ============================================================ */

/* Payment Slip — the dynamic heading */
.ps-head     { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ps-head h2  { font-size:17px; font-weight:600; margin:0; }
.ps-body     { height:44px; margin:0; }
.ps-note     { max-width:780px; margin-top:14px; padding:0 2px; }
.inp.num-days{ width:150px; }
.inp.num-days .sfx { color:var(--text-3); font-size:12.5px; }

/* the yes/no + required/not-required chips this phase uses (Phase 8 used plain text) */
.chip-yes    { background:#e3f6e8; color:#1c7a3a; font-size:11.5px; font-weight:600;
               padding:2px 9px; border-radius:5px; }
.chip-no     { background:#fdeaea; color:#c0392b; font-size:11.5px; font-weight:600;
               padding:2px 9px; border-radius:5px; }

/* the DOCX / HTML template badges */
.fbadge      { display:inline-block; font-size:9px; font-weight:800; letter-spacing:.04em;
               text-transform:uppercase; padding:2px 5px; border-radius:3px; margin-left:7px;
               vertical-align:1px; }
.f-docx      { background:#e6f0fd; color:#1657b8; }
.f-html      { background:#fdf0dc; color:#c07408; }

/* HR Letter Setup → Settings */
.set-grid    { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:1100px){ .set-grid { grid-template-columns:1fr; } }
.set-card    { padding:16px 18px; margin:0; }
.set-q       { display:flex; align-items:flex-start; gap:16px; }
.set-q b     { font-size:14px; display:block; }
.set-q small { display:block; color:var(--text-3); font-size:12.5px; margin-top:3px; line-height:1.5; }
.set-q .toggle { margin-left:auto; flex:0 0 auto; margin-top:2px; }
.set-panel   { background:#eef6fe; border-radius:9px; padding:14px 16px; margin-top:14px; }
.set-panel b { font-size:13.5px; display:block; }
.set-panel small { display:block; color:var(--text-3); font-size:12.5px; margin:3px 0 12px; line-height:1.5; }
.inp.chipbox { min-height:40px; flex-wrap:wrap; gap:6px; padding:6px 10px; background:#fff; }
.inp.chipbox .fchip-in { background:#eef1f6; }

/* HR Document Setup → Setup */
.mand-band   { display:flex; align-items:flex-end; gap:16px; background:#eef6fe;
               border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.mand-band .field { flex:1; min-width:0; }
.cnt-tabs    { display:flex; gap:2px; background:#fff; border:1px solid var(--border);
               border-bottom:0; border-radius:12px 12px 0 0; padding:4px 8px 0; overflow-x:auto; }
.cnt-tabs .ct { border:0; background:transparent; padding:11px 14px; font-size:13px;
               color:var(--text-2); cursor:pointer; white-space:nowrap;
               border-bottom:2px solid transparent; display:flex; align-items:center; gap:7px; }
.cnt-tabs .ct.on { color:#1e73e8; border-bottom-color:#1e73e8; font-weight:600; }
.cnt-tabs .ct .cnt { background:#eef1f6; color:var(--text-2); font-size:11px; font-weight:600;
               padding:1px 7px; border-radius:20px; }
.cnt-tabs .ct.on .cnt { background:#e6f0fd; color:#1657b8; }

/* HR Document — the casing duplicate */
.dupe-tag    { font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
               color:#b3780c; background:#fdf3e0; padding:1px 6px; border-radius:4px; margin-left:8px; }

/* HR Letters */
.ack-shield  { display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%;
               background:#e3f6e8; color:#1c7a3a; vertical-align:-4px; margin-left:4px; }
.act .lt-doc { color:#1657b8; }
.act .lt-pdf { color:#d0342c; }

/* Document Audit */
.audit-legend{ display:flex; gap:26px; justify-content:flex-end; align-items:center;
               padding:10px 18px; background:#fff; border:1px solid var(--border);
               border-bottom:0; border-radius:12px 12px 0 0; font-size:12.5px; color:var(--text-2); }
.audit-legend span { display:flex; align-items:center; gap:8px; }
.audit-legend i { font-style:normal; font-weight:700; font-size:12px; }
#reqTabs + .audit-legend { border-radius:0; border-top:0; margin-bottom:0; }
#reqTabs + .audit-legend + .card { margin-top:0; border-radius:0 0 12px 12px; }
.n-red       { color:#c0392b; font-weight:600; }
.n-green     { color:#1c7a3a; font-weight:600; }
.n-blue      { color:#1657b8; font-weight:600; }
.numset      { display:inline-flex; gap:12px; justify-content:flex-end; }
.numset .n-red { cursor:help; }
.scorebar    { display:block; min-width:180px; }
.scorebar .bar { display:flex; height:7px; border-radius:4px; overflow:hidden; background:#eef1f6; }
.scorebar .bar i.g { background:#3aa76d; } .scorebar .bar i.r { background:#e05a52; }
.scorebar .pcts { display:flex; justify-content:space-between; margin-top:5px; font-size:11.5px; }
.scorebar .pcts b.g { color:#1c7a3a; } .scorebar .pcts b.r { color:#c0392b; }
.xls-btn     { color:#1d7044; }

/* ============================================================
   PHASE 10 · Reports — captured 11-Sep-2026 (26.C.51)
   One screen, 78 reports, a wall of category cards.
   ============================================================ */
.rp-panel    { padding:22px 24px 26px; }
.rp-top      { display:flex; align-items:center; gap:20px; margin-bottom:20px; }
.rp-top h2   { font-size:19px; font-weight:600; margin:0; }
.rp-search   { margin-left:auto; width:min(280px,42%); height:38px; }

.rp-wall     { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:1250px){ .rp-wall { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px) { .rp-wall { grid-template-columns:1fr; } }
.rp-card     { border:1px solid var(--border-2); border-radius:12px; background:#fff;
               display:flex; flex-direction:column; overflow:hidden; }
.rp-head     { display:flex; align-items:center; gap:10px; padding:16px 18px 14px; }
.rp-head b   { font-size:14.5px; font-weight:600; }
.rp-head .cnt{ background:#e6f0fd; color:#1657b8; font-size:11.5px; font-weight:700;
               padding:2px 9px; border-radius:20px; }
.rp-list     { max-height:392px; overflow-y:auto; padding:0 6px 6px; }
.rp-list::-webkit-scrollbar { width:5px; }
.rp-list::-webkit-scrollbar-thumb { background:#d8dee8; border-radius:3px; }

.rp-row      { display:flex; align-items:center; gap:12px; padding:13px 12px;
               border-top:1px solid var(--border); }
.rp-row:first-child { border-top:0; }
.rp-row:hover{ background:#f7fafd; }
.rp-txt      { min-width:0; flex:1; }
.rp-name     { font-size:13.5px; margin:0; line-height:1.4; }
.rp-desc     { font-size:12px; color:var(--text-3); margin:3px 0 0; line-height:1.45; }
.rp-row mark { background:#fdf1b8; color:inherit; border-radius:2px; padding:0 1px; }
.rp-acts     { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.rp-btn      { border:0; background:transparent; padding:5px; border-radius:7px; cursor:pointer;
               line-height:0; color:var(--text-3); }
.rp-btn:hover{ background:var(--bg-2); color:var(--text); }
.rp-btn.eye  { color:#1e73e8; }
.rp-row.is-legacy .rp-name::after { content:'legacy'; margin-left:9px; font-size:9.5px;
               font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#a2650c;
               background:#fdf0dc; padding:1px 6px; border-radius:4px; vertical-align:1px; }
.rp-note     { max-width:860px; margin:16px 2px 0; }

/* the legacy-app preview inside the modal */
.legacy-frame{ border:1px solid var(--border); border-radius:10px; overflow:hidden;
               background:#e3e7ee; }
.lg-top      { display:flex; align-items:center; gap:14px; background:#fff; padding:12px 16px;
               border-bottom:1px solid #dfe4ec; }
.lg-burger   { color:var(--text-2); line-height:0; }
.lg-logo     { font-size:15px; font-weight:800; letter-spacing:.02em; color:#1a7fc1; }
.lg-logo i   { display:block; font-style:normal; font-size:8px; font-weight:600; color:#3aa76d;
               letter-spacing:.04em; }
.lg-right    { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px;
               color:var(--text-2); }
.lg-bell     { position:relative; line-height:0; color:var(--text-3); }
.lg-bell i   { position:absolute; top:-7px; left:8px; background:#1e73e8; color:#fff;
               font-style:normal; font-size:8px; font-weight:700; padding:1px 4px;
               border-radius:8px; }
.lg-av       { width:22px; height:22px; border-radius:50%; background:#b9c3d1; display:block; }
.lg-body     { display:flex; min-height:190px; }
.lg-rail     { width:42px; background:#fff; border-right:1px solid #dfe4ec; padding:10px 0;
               display:flex; flex-direction:column; align-items:center; gap:11px; }
.lg-rail i   { width:15px; height:15px; border-radius:3px; background:#cfd6e0; display:block; }
.lg-main     { flex:1; padding:16px 18px; }
.lg-h        { display:flex; align-items:center; margin-bottom:12px; }
.lg-h h4     { font-size:19px; font-weight:600; margin:0; color:#2b3440; }
.lg-new      { margin-left:auto; background:#1e6fd9; color:#fff; font-size:11.5px; font-weight:600;
               padding:5px 12px; border-radius:4px; display:inline-flex; align-items:center; gap:5px; }
.lg-bar      { background:#fff; border-radius:4px; padding:9px 14px; font-size:12.5px;
               font-weight:600; color:#2b3440; display:flex; align-items:center; gap:9px;
               margin-bottom:10px; }
.lg-row      { background:#fff; border-radius:4px; padding:11px 14px; font-size:13px;
               color:#2b3440; display:flex; align-items:center; gap:10px; }
.lg-row span { flex:1; }
.lg-row svg  { color:var(--text-3); }

/* ============================================================
   PHASE 11 · Ticket — captured 11-Sep-2026 (26.C.51)
   ============================================================ */

/* the six-tile status strip above My Ticket */
.tk-tiles    { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.tk-tile     { min-width:96px; border-radius:8px; padding:9px 14px 8px; text-align:center;
               cursor:pointer; transition:transform .12s; }
.tk-tile:hover { transform:translateY(-1px); }
.tk-tile b   { display:block; font-size:17px; font-weight:600; line-height:1.2; }
.tk-tile span{ font-size:11.5px; font-weight:600; }
.t-closed    { background:#e8eaee; color:#5a6472; }
.t-done      { background:#d9f2dd; color:#1c7a3a; }
.t-prog      { background:#ecdcf8; color:#7b2cbf; }
.t-new       { background:#cfeaf2; color:#0d6d86; }
.t-hold      { background:#fce4c4; color:#a2650c; }
.t-reopen    { background:#fbd7d4; color:#b4292a; }

/* the same palette as inline status chips in the grid */
.tstat       { font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:5px;
               display:inline-block; }
.tstat.t-closed { background:#1657b8; color:#fff; }
.tstat.t-done   { background:#cfeaf2; color:#0d6d86; }
.tstat.t-new    { background:#d9ecfb; color:#1657b8; }
.tstat.t-prog   { background:#ecdcf8; color:#7b2cbf; }
.tstat.t-hold   { background:#fce4c4; color:#a2650c; }
.tstat.t-reopen { background:#fbd7d4; color:#b4292a; }

.tpri        { font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:5px; }
.p-high      { background:#fdf0dc; color:#a2650c; }
.p-medium    { background:#d9ecfb; color:#1657b8; }
.p-low       { background:#e8eaee; color:#5a6472; }

/* the amber marker the mock adds where the live app says nothing */
.stale-dot   { font-style:normal; color:#e09b16; font-size:10px; margin-left:6px; cursor:help; }

/* Ticket Status — Yes / No escalation chips */
.chip-yes2   { background:#d9ecfb; color:#1657b8; font-size:11.5px; font-weight:600;
               padding:2px 9px; border-radius:5px; }
.chip-no2    { background:#fdf0dc; color:#a2650c; font-size:11.5px; font-weight:600;
               padding:2px 9px; border-radius:5px; }

/* ============================================================
   PHASE 12 · Productivity Management
   ============================================================ */

/* --- the hours slider: blue under budget, red at or over --- */
.pslide { min-width:190px }
.ptrack { position:relative; height:4px; border-radius:3px; background:var(--border); margin:2px 0 5px }
.ptrack i { position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--blue) }
.ptrack b { position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:#fff; border:2px solid var(--blue) }
.pslide.over .ptrack i, .pslide.over .ptrack b { background:var(--red); border-color:var(--red) }
.pslide.over .ptrack i { background:var(--red) }
.pnums { display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--text) }
.pnums .pc { color:var(--text-3) }
.pnums .tot { color:var(--text-3) }
.pslide.over .pnums .pc, .pslide.over .pnums .tot { color:var(--red); font-weight:600 }
td.wide, th.wide { min-width:210px }

/* --- horizontal scroll, the first table in the product to need it --- */
.tbl-wrap.scrollx { overflow-x:auto }
.tbl-wrap.scrollx table { min-width:1580px }
.dayct { color:var(--text-3); font-size:11px }
.pri1 { display:inline-block; min-width:22px; text-align:center; padding:1px 6px; border-radius:5px;
  font-size:11.5px; font-weight:700 }
.pri1.p-h { background:#fdeaea; color:#c0392b }
.pri1.p-m { background:#fdf3e2; color:#b26b00 }
.pri1.p-l { background:#e8f6ec; color:#1e7d42 }
.acts8 .act { white-space:nowrap }
.acts8 .act button { padding:2px }

/* --- the row expander and its nested, blue-tinted table --- */
.xcol { width:66px }
.xp { position:relative; display:inline-flex; align-items:center; border:0; background:none;
  cursor:pointer; color:var(--text-2); padding:4px 16px 4px 4px }
.xp svg { flex:0 0 16px; width:16px; height:16px }
.xp:hover { color:var(--blue) }
.xp.open svg { transform:rotate(180deg) }
.xp.dis, .xp[disabled] { opacity:.35; cursor:default }
.xbadge { position:absolute; top:-3px; right:0; min-width:15px; height:15px; line-height:15px;
  border-radius:8px; background:var(--blue); color:#fff; font-size:10px; font-weight:700;
  text-align:center; padding:0 3px }
tr.xrow > td { background:#f7fafd; padding:10px 14px 4px }
table.nested { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border);
  border-radius:8px; overflow:hidden }
table.nested thead th { background:#eaf2fb; color:#2b4a6b; font-size:11px; letter-spacing:.03em;
  text-transform:uppercase; padding:9px 11px; text-align:left; font-weight:700 }
table.nested thead th.r, table.nested td.r { text-align:right }
table.nested td { padding:9px 11px; border-top:1px solid var(--border); font-size:12.5px;
  vertical-align:top }
table.nested td.clip { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
table.nested .sub { color:var(--text-3); font-size:11px }

/* --- the shared dashboard widget block --- */
.tdwrap { padding:4px 0 2px }
.tdstats { display:grid; gap:8px; margin-bottom:14px; max-width:430px }
.tdstat { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border);
  border-radius:9px; padding:10px 12px }
.tdstat b { flex:1; font-size:13px; font-weight:500 }
.tdval { min-width:56px; text-align:center; font-size:17px; font-weight:700; padding:8px 6px;
  border-radius:7px }
.tdval.g { background:#e8f6ec; color:#1e7d42 } .tdval.r { background:#fdeaea; color:#c0392b }
.tdicon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; color:#fff }
.tdicon.g { background:#27ae60 } .tdicon.r { background:#e74c3c } .tdicon.b { background:#2f80ed }
.tdicon.p { background:#e6399b } .tdicon.a { background:#f2a413 } .tdicon.d { background:#1f4e9c }
.tdcards { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:14px }
.tdcard { background:#fff; border:1px solid var(--border); border-radius:9px; padding:14px 14px 12px;
  text-align:center }
.tdcard .tdicon { margin-bottom:8px }
.tdlab { font-size:12.5px; color:var(--text-3) }
.tdnum { font-size:15px; font-weight:700; margin:2px 0 8px }
.tdbar { height:4px; border-radius:3px; background:var(--border); position:relative }
.tdbar i { position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--blue) }
.tdpc { font-size:10.5px; color:var(--text-3); display:block; margin-top:4px }
.tdrings { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px }
.tdring { background:#fff; border:1px solid var(--border); border-radius:9px; padding:20px;
  display:flex; flex-direction:column; align-items:center; gap:10px }
.ring { width:112px; height:112px; border-radius:50%; border:7px solid var(--border);
  display:flex; align-items:center; justify-content:center }
.ring span { font-size:19px; font-weight:700 }
.ring.rr { border-color:#e74c3c } .ring.rr span { color:#e74c3c }
.ring.ra { border-color:#f2a413 } .ring.ra span { color:#f2a413 }
.ring.rg { border-color:#4caf22 } .ring.rg span { color:#4caf22 }
.ring.rb { border-color:#2f80ed } .ring.rb span { color:#2f80ed }
.rlab { font-size:12.5px; color:var(--text) }

/* --- Project Reports: segmented views, inline filters, the board --- */
.segbar { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;
  background:#fff }
.segbar .seg { display:inline-flex; align-items:center; gap:6px; border:0; background:#eef1f4;
  color:var(--text); padding:8px 14px; font-size:12.5px; font-weight:600; cursor:pointer }
.segbar .seg.on { background:var(--blue); color:#fff }
.segbar.sm .seg { padding:6px 12px; font-size:12px }
.rp-views { padding:4px 0 }
.inline-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin:14px 0 16px;
  padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius:9px }
.inline-filters .fld { min-width:160px; margin:0 }
.board { display:flex; gap:12px; overflow-x:auto; padding-bottom:10px }
.bcol { flex:0 0 268px; border:1px solid var(--border); border-radius:9px; overflow:hidden;
  background:#fff }
.bhead { display:flex; gap:9px; align-items:center; padding:10px 12px; background:#eaf2fb }
.bhead img { width:30px; height:30px; border-radius:50%; object-fit:cover }
.bhead span { display:block; font-size:11px; color:var(--text-3) }
.blink { color:var(--blue); font-size:12.5px; text-decoration:none; font-weight:500 }
.bbody { padding:26px 12px; text-align:center; color:var(--text-3); font-size:12.5px }
.pvacc { border-bottom:1px solid var(--border) }
.pvaccrow { display:flex; align-items:center; gap:9px; width:100%; border:0; background:none;
  padding:14px 16px; cursor:pointer; font-size:13px; text-align:left }
.pvaccrow b { flex:1; font-weight:600 }
.pvaccn { min-width:24px; text-align:center; background:#e8effa; color:var(--blue);
  border-radius:9px; font-size:11px; font-weight:700; padding:2px 6px }

/* --- the Create Template custom-field builder --- */
.note-line { margin:10px 0 14px; font-size:12.5px }
.note-line .req { color:var(--red); font-weight:700 }
.chip-b { display:inline-block; background:#e8effa; color:var(--blue); border-radius:5px;
  padding:1px 7px; font-size:11.5px; font-weight:600; margin:0 2px }
.cf-wrap { max-height:430px; overflow:auto; border:1px solid var(--border); border-radius:9px }
.cf-wrap.short { max-height:330px }
.cf-tbl { width:100%; border-collapse:collapse }
.cf-tbl thead th { position:sticky; top:0; z-index:1; background:#f2f4f7; font-size:11px;
  text-transform:uppercase; letter-spacing:.03em; padding:10px 12px; text-align:left;
  border-bottom:1px solid var(--border) }
.cf-tbl th.c, .cf-tbl td.c { text-align:center }
.cf-tbl td { padding:8px 12px; border-bottom:1px solid var(--border); font-size:12.5px }
.ty { display:inline-block; border-radius:5px; padding:1px 7px; font-size:11px; font-weight:700 }
.ty-ms { background:#e8f6ec; color:#1e7d42 } .ty-ss { background:#fdeaea; color:#c0392b }
.ty-txt { background:#fdf3e2; color:#b26b00 } .ty-date { background:#e8effa; color:#2f6fd0 }
.toggle.lock { opacity:.4; pointer-events:none }
.tot-line { font-size:13px; margin:0 0 10px }
/* Template Assign stacks its rule rows under the Not / Add rule header;
   Phase 2's .ap-rule is a single right-aligned row, so this variant unstacks it */
.ap-rule.stack { display:block }
.ap-rule.stack .rule-head { margin-bottom:8px }

/* grids the house set does not have yet, built on .field/.inp */
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px 24px }
.grid5 { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px 18px;
  margin-top:16px }
.char-cnt { font-size:11.5px; color:var(--text-3); margin:5px 0 0 }
.sub-card { border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px;
  margin-top:18px; background:#FAFAFB }
.sub-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.hhmm { display:flex; gap:6px }
.hhmm .inp { width:66px; padding:0 8px }
.recrow { display:grid; grid-template-columns:190px 1fr; gap:16px; align-items:start;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border) }
.togfield { display:flex; align-items:center; gap:9px; padding-top:26px }
.dropzone { display:flex; align-items:center; justify-content:center; gap:7px; height:60px;
  border:1.5px dashed var(--border-input); border-radius:var(--radius); font-size:13px;
  color:var(--text-3); background:#FAFAFB; cursor:pointer }
.dropzone b { color:var(--blue); font-weight:500 }
.dropzone.blue { border-color:var(--blue); background:#F4F9FF }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.inp.numbox { width:96px }
.inp.numbox.sm { width:60px; height:32px; display:inline-flex }
.inp.numbox input { text-align:center }
/* the live app stacks the second Add Task dialog on the first, both titled the same,
   with the outer header still visible above it */
.overlay.stacked { background:rgba(20,28,40,.30); align-items:flex-start; padding-top:132px }
.overlay.stacked .modal { box-shadow:0 26px 70px rgba(16,24,40,.34) }

/* --- Timesheet's five-value chip strips --- */
.tstrip { display:inline-flex; align-items:center; gap:5px; white-space:nowrap }
.tstrip i { display:inline-block; border-radius:5px; padding:2px 7px; font-size:11.5px;
  font-weight:600; font-style:normal; cursor:help }
.tstrip.wide i { font-size:11px; padding:2px 6px }
.tstrip .sep { color:var(--border); font-weight:700 }
.tsb-b { background:#e8effa; color:#2f6fd0 } .tsb-g { background:#f1f3f5; color:#5b6675 }
.tsb-r { background:#fdeaea; color:#c0392b } .tsb-n { background:#e8f6ec; color:#1e7d42 }
.tsb-t { background:#e4f6f8; color:#12788a; font-weight:700 }

/* --- OKR Setup: the question-and-answer settings page --- */
.band { background:#eaf2fb; color:#2b4a6b; font-weight:600; font-size:13px; padding:9px 16px;
  border-radius:7px; margin:16px 0 10px }
.card.qcard { padding:16px 18px; margin-bottom:12px }
.qh { margin:0 0 12px; font-size:13.5px; font-weight:600 }
.qcols { display:grid; grid-template-columns:1fr 1fr; gap:18px 26px }
.qcols.gap { gap:12px 12px; align-items:start }
.qrow { padding:10px 0; border-bottom:1px solid var(--border) }
.qrow:last-child { border-bottom:0 }
.qrow.inline, .qrow { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center }
.qtext b { display:block; font-size:13px; font-weight:600 }
.qtext span { display:block; font-size:11.5px; color:var(--text-3); margin-top:2px }
.qctrl { display:flex; align-items:center; gap:8px; justify-self:end }
.qnote { grid-column:1 / -1; margin:6px 0 0; font-size:11.5px; color:var(--text-3) }
.radios { display:flex; gap:16px; flex-wrap:wrap }
.radios label, .cks label { display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  cursor:pointer }
.cks { display:flex; gap:16px; flex-wrap:wrap }
.cks label.dis { opacity:.45; cursor:default }
.qsub { padding:10px 0 2px }
.qsub.off { opacity:.55 }
.qsub b { display:block; font-size:12.5px; margin-bottom:8px }
.wgt { padding:12px 0 4px; border-top:1px solid var(--border) }
.wgt-head { display:flex; justify-content:space-between; gap:16px; margin-bottom:12px }
.wgt-head b { font-size:12.5px } .wgt-head span { display:block; font-size:11.5px; color:var(--text-3) }
.wgt-tot { text-align:right; font-size:11px; color:var(--text-3); white-space:nowrap }
.wgt-tot b { color:var(--blue); font-size:13px }
.wgt-boxes { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px }
.wbox { border:1px solid var(--border); border-radius:8px; padding:8px 10px; display:block }
.wbox.zero { border-color:#f3c9c9; background:#fffafa }
.wn { display:block; font-size:11.5px; color:var(--text-3); margin-bottom:4px }
.wn b { color:var(--text) }
.winp { display:flex; align-items:center; gap:4px }
.winp input { width:100%; border:1px solid var(--border); border-radius:6px; padding:6px 8px;
  font:inherit; font-size:12.5px }
.winp em { font-style:normal; color:var(--text-3); font-size:12px }

/* --- Objectives: the progress bar and the C tag --- */
.pbar { display:inline-block; width:120px; height:5px; border-radius:3px; background:var(--border);
  position:relative; vertical-align:middle }
.pbar i { position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--blue) }
.pbn { font-size:12px; margin-left:8px; color:var(--text) }
.ctag { display:inline-block; background:#e8f6ec; color:#1e7d42; border-radius:4px;
  padding:0 5px; font-size:10.5px; font-weight:700; margin-left:6px }
.av.sm { width:28px; height:28px; border-radius:50%; object-fit:cover; vertical-align:middle }
.act button.dis, .act button[disabled] { opacity:.35; cursor:default }
.t-hold2 { background:#f1f3f5; color:#5b6675 }
.t-self  { background:#fdf3e2; color:#b26b00 }
.warn-txt { color:#b26b00 }

/* --- the recurring day strip --- */
.daystrip { display:inline-flex; gap:3px }
.daystrip i { display:inline-block; width:19px; height:19px; line-height:19px; text-align:center;
  border-radius:4px; font-style:normal; font-size:10.5px; font-weight:700;
  background:#f4f5f7; color:var(--text-3) }
.daystrip i.on { background:#fdf3e2; color:#b26b00 }

/* --- PIP Set Up: sentence-style fields and the chip input --- */
.pipsetup { padding:4px 0 }
.sentence-row { display:flex; flex-wrap:wrap; gap:12px 34px; padding:14px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.sent { display:inline-flex; align-items:center; gap:8px; font-size:13px }
.mailids { padding:14px 0 4px }
.mailids b { font-size:12.5px } .mailids .sub { display:block; font-size:11.5px; color:var(--text-3);
  margin:2px 0 8px }
.chipinput { border:1px solid var(--border); border-radius:8px; padding:8px 10px; min-height:38px;
  background:#fff }
.chip-x { display:inline-flex; align-items:center; gap:6px; background:#f1f3f5; border-radius:14px;
  padding:3px 6px 3px 11px; font-size:12px }
.chip-x button { border:0; background:#d9dde2; color:#556; border-radius:50%; width:17px;
  height:17px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer }
.ph-tag { display:inline-block; background:#fdf3e2; color:#b26b00; border-radius:4px;
  padding:0 5px; font-size:9.5px; font-weight:700; letter-spacing:.04em; margin-left:6px;
  vertical-align:middle }

/* --- the mock's own annotation paragraphs --- */
.mock-note { background:#fffdf5; border:1px solid #f0e3c2; border-left:3px solid #e8b84b;
  border-radius:7px; padding:10px 13px; font-size:12px; line-height:1.62; color:#5a4a22;
  margin:12px 0 0 }
.mock-note.top { margin:0 0 12px }
.mock-note.in { margin:10px 0 4px }
.mock-note code { background:#f6efdc; border-radius:4px; padding:0 4px; font-size:11.5px }
.privacy-note.top { margin:0 0 10px }
.form-foot.right { display:flex; justify-content:flex-end; gap:10px; margin-top:14px }

@media (max-width:1180px) {
  .tdcards, .tdrings, .wgt-boxes { grid-template-columns:repeat(2, 1fr) }
  .qcols, .qcols.gap { grid-template-columns:1fr }
  .grid3, .grid5 { grid-template-columns:1fr 1fr }
  .recrow { grid-template-columns:1fr }
}

/* ============================================================
   PHASE 13 · System Configuration — captured 14-Sep-2026 (26.C.51)
   ============================================================ */

/* --- the Onboarding Dashboard hero and its overlapping cards --- */
.ob-hero { position:relative; border-radius:12px; padding:26px 28px 62px;
  background:linear-gradient(100deg, #1352c9 0%, #2f80ed 52%, #64a7f5 100%); color:#fff }
.ob-htext h2 { font-size:22px; font-weight:600; margin:0 0 6px }
.ob-htext p { font-size:13px; opacity:.92; margin:0 }
.ob-play { position:absolute; top:22px; right:24px; width:34px; height:34px; border:0;
  border-radius:50%; background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center }
.ob-play:hover { background:rgba(255,255,255,.3) }
.ob-cards { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin:-46px 14px 18px }
.ob-card { position:relative; background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:16px 34px 14px 16px; box-shadow:0 4px 14px rgba(16,24,40,.06) }
.ob-ic { display:inline-flex; color:var(--blue); margin-bottom:22px }
.ob-tick { position:absolute; top:14px; right:14px; width:17px; height:17px; border-radius:50%;
  background:#27ae60; color:#fff; display:inline-flex; align-items:center; justify-content:center }
.ob-card b { display:block; font-size:14px; font-weight:600 }
.ob-sub { display:block; font-size:11.5px; color:var(--text-3); margin-top:2px }
.ob-chev { position:absolute; right:12px; bottom:12px; color:var(--text-3); line-height:0 }
.ob-chev.sm { position:static; margin-left:6px; vertical-align:middle }
.ob-modhead { padding:14px 18px; margin-bottom:12px }
.ob-modhead b { display:block; font-size:14px; font-weight:600 }
.ob-modhead span { font-size:12px; color:var(--text-3) }
.tabbar .tab .cnt.warnc { background:#fdf3e2; color:#b26b00 }
.tabbar .tab .cnt.red, .cnt.red { background:#fdeaea; color:#c0392b }

/* --- the 20-module wall --- */
.ob-wall { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;
  align-items:start }
.ob-col3 { display:grid; gap:12px }
.ob-mcard { padding:0; overflow:hidden }
.ob-mhead { display:flex; gap:11px; align-items:flex-start; padding:14px 16px; cursor:pointer }
.ob-mhead > div { flex:1; min-width:0 }
.ob-mhead b { display:block; font-size:13.5px; font-weight:600 }
.ob-mhead span { display:block; font-size:11.5px; color:var(--text-3); margin-top:2px }
.ob-mic { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:9px; background:#eef3fb; color:#3b6bb5; flex:0 0 32px }
.ob-mic.sm { width:26px; height:26px; flex:0 0 26px; border-radius:7px }
.ob-chevup { color:var(--text-3); line-height:0; transition:transform .16s }
.ob-mcard.shut .ob-chevup { transform:rotate(180deg) }
.ob-mcard.shut .ob-prog, .ob-mcard.shut .ob-items, .ob-mcard.shut .mock-note.in { display:none }
.ob-prog { display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:0 16px 10px }
.ob-prog span { font-size:11.5px; color:var(--text-3) }
.ob-prog b { font-size:11.5px; font-weight:600; text-align:right }
.ob-bar { grid-column:1 / -1; height:4px; border-radius:3px; background:var(--border);
  position:relative }
.ob-bar i { position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--blue) }
.ob-items { border-top:1px solid var(--border) }
.ob-item { display:flex; gap:10px; align-items:flex-start; padding:10px 16px;
  border-bottom:1px solid var(--border) }
.ob-item:last-child { border-bottom:0 }
.ob-item > div { flex:1; min-width:0 }
.ob-item b { display:block; font-size:12.5px; font-weight:500 }
.ob-item span { display:block; font-size:11px; color:var(--text-3); margin-top:1px }
.ob-item em { display:block; font-size:10.5px; color:var(--text-4); font-style:normal;
  margin-top:2px }
.ob-itick { flex:0 0 17px; width:17px; height:17px; border-radius:50%; background:#27ae60;
  color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-top:1px }
.ob-item.todo .ob-itick { background:#fff; border:1.5px solid var(--border) }
.ob-item.todo b, .ob-item.todo span { color:var(--text-3) }
.ob-go { border:0; background:var(--blue); color:#fff; width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 22px }
.ob-item.todo .ob-go { background:#c9d3e0 }
.ob-mrow { display:flex; gap:10px; align-items:center; padding:0 16px 12px }
.ob-mrow.between { justify-content:space-between; padding:0; width:100% }
.ob-mrow .inp { max-width:180px }
.ob-mtbl { width:100%; border-collapse:collapse; border-top:1px solid var(--border) }
.ob-mtbl th { font-size:10.5px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--text-3); padding:9px 16px; text-align:left; border-bottom:1px solid var(--border) }
.ob-mtbl th.r, .ob-mtbl td.r { text-align:right }
.ob-mtbl td { padding:10px 16px; border-bottom:1px solid var(--border); font-size:12.5px }
.ml { text-decoration:none; font-weight:500 }
.m-red { color:#c0392b } .m-amber { color:#b26b00 } .m-green { color:#1e7d42 }
.m-blue { color:#2f6fd0 } .m-violet { color:#6b4bbd } .m-pink { color:#c2367f }
.ob-next { display:flex; gap:10px; align-items:center; width:100%; border:0; background:none;
  border-top:1px solid var(--border); padding:11px 16px; cursor:pointer; text-align:left;
  color:var(--text) }
.ob-next:hover { background:#f8fafc }
.ob-next > div { flex:1; min-width:0 }
.ob-next b { display:block; font-size:12.5px; font-weight:500 }
.ob-next span { display:block; font-size:11px; color:var(--text-3) }
.ob-upsell { padding:18px 16px; text-align:center }
.ob-upsell b { display:block; font-size:15px; font-weight:600 }
.ob-upsell span { display:block; font-size:12.5px; color:var(--text-3) }
.ob-upsell .btn { margin-top:10px }

/* --- SMTP Set Up: the provider carousel and the guide --- */
.prov-head { display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:12px }
.prov-head b { font-size:14px; font-weight:600 }
.prov-rail { display:flex; align-items:center; gap:6px }
.rail-arrow { flex:0 0 26px; width:26px; height:26px; border:1px solid var(--border);
  border-radius:50%; background:#fff; color:var(--text-3); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center }
.prov-strip { flex:1; display:flex; gap:8px; overflow-x:auto; padding:2px; scrollbar-width:none }
.prov-strip::-webkit-scrollbar { display:none }
.prov { flex:0 0 108px; height:54px; border:1px solid var(--border); border-radius:8px;
  background:#fff; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; padding:4px 8px }
.prov span { font-size:11.5px; font-weight:700; color:#4a5568; text-align:center; line-height:1.2 }
.prov.on { border-color:var(--blue); box-shadow:0 0 0 2px rgba(22,119,255,.14) }
.prov.on span { color:var(--blue) }
.togline { display:flex; align-items:center; gap:9px; padding:8px 0; font-size:13px }
.togline b { font-weight:500 }
.togwall { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:2px 18px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--border) }
.togwall .togline { align-items:flex-start }
.togwall .togline b { font-size:12.5px; line-height:1.35 }
.pill { display:inline-block; border-radius:5px; padding:1px 8px; font-size:11px; font-weight:700 }
.pill.ok  { background:#e8f6ec; color:#1e7d42 }
.pill.bad { background:#fdeaea; color:#c0392b }
.qh.big { font-size:17px; font-weight:600 }
.qh.flat { margin:0 }
.qsubtitle { font-size:12.5px; color:var(--text-3); margin:-6px 0 14px }
.step { display:flex; align-items:center; gap:10px; margin:16px 0 10px }
.step b { font-size:14px; font-weight:600 }
.step-n { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:8px; background:#e8effa; color:var(--blue) }
.step-n.lock { background:#eeeafd; color:#6b4bbd }
.guide-card { border:1px solid var(--border); border-radius:9px; padding:12px 14px;
  background:#FAFAFB }
.guide-card b { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-3) }
.guide-card span { display:block; font-size:13px; margin:4px 0 3px }
.guide-card em { font-size:11.5px; color:var(--text-4); font-style:normal }
.guide-panel { border:1px solid var(--border); border-radius:9px; overflow:hidden }
.guide-head { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#eef3fb;
  font-size:13px; color:#2b4a6b }
.guide-list { margin:0; padding:12px 14px 12px 34px; font-size:12.5px; line-height:1.9 }
.guide-list li.hi { background:#fffdf5; border-radius:5px; padding:0 6px; margin-left:-6px }
.guide-notes { margin:0 14px 14px; padding:11px 13px; border-radius:8px; background:#eef3fb;
  font-size:12px }
.guide-notes b { display:block; margin-bottom:5px }
.guide-notes ul { margin:0; padding-left:18px; color:var(--blue); line-height:1.75 }

/* --- Email Notification Setup: accordions and the preview panel --- */
.en-acc { padding:0; margin-bottom:10px; overflow:hidden }
.en-head { display:flex; gap:12px; align-items:center; padding:15px 18px; cursor:pointer }
.en-head > div { flex:1; min-width:0 }
.en-head b { display:block; font-size:14px; font-weight:600 }
.en-head span { display:block; font-size:11.5px; color:var(--text-3); margin-top:2px }
.en-ic { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:9px; background:#e8effa; color:var(--blue); flex:0 0 34px }
.en-chev { color:var(--text-3); line-height:0; transition:transform .16s }
.en-acc.open { border-color:var(--blue) }
.en-acc.open .en-chev { transform:rotate(180deg) }
.en-body { display:none; border-top:1px solid var(--border); padding:16px 18px }
.en-acc.open .en-body { display:block }
.en-split { display:grid; grid-template-columns:1fr 380px; gap:22px; align-items:start }
.en-cycle b { display:block; font-size:12.5px; margin-bottom:8px }
.en-cfg { border:1px solid var(--border); border-radius:9px; padding:14px; margin-top:14px }
.en-cfgh { display:flex; align-items:center; gap:8px; margin-bottom:12px }
.en-cfgh b { font-size:13px; font-weight:600 }
.bul { width:7px; height:7px; border-radius:50%; background:var(--blue); display:inline-block }
.daysrow { display:flex; align-items:center; gap:9px }
.daysrow em { font-style:normal; font-size:12.5px; color:var(--text-3) }
.inp .more { font-size:11.5px; color:var(--text-3) }
.en-preview { background:#f7f9fb; border:1px solid var(--border); border-radius:10px; padding:14px }
.pv-title { display:block; font-size:13px; font-weight:600; margin-bottom:12px }
.pv-block { background:#fff; border:1px solid var(--border); border-radius:9px; padding:12px 14px;
  margin-bottom:10px }
.pv-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.pv-head b { font-size:11px; letter-spacing:.06em; color:var(--text-3) }
.pv-head svg { color:var(--text-3) }
.pv-first { background:#eef6ff; border:1px solid #cfe3fb; border-radius:7px; padding:9px 11px;
  margin-bottom:10px }
.pv-first b { display:block; font-size:12.5px; font-weight:600 }
.pv-first span { display:block; font-size:12px; color:var(--blue); margin-top:2px }
.pv-dl { display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:0 }
.pv-dl dt { font-size:12px; color:var(--text-3) }
.pv-dl dd { margin:0; font-size:12px; text-align:right; font-weight:500 }
.pv-sent { font-size:11.5px; color:var(--text-3); line-height:1.6;
  margin:10px 0 0; padding-top:9px; border-top:1px solid var(--border) }
.pv-sent a { color:var(--blue); text-decoration:none }

/* --- Integration cards --- */
.int-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;
  align-items:start }
.int-card { position:relative; padding:16px 18px }
.int-card .pill { position:absolute; top:14px; right:16px }
.int-card > b { display:block; font-size:15px; font-weight:600; padding-right:66px }
.int-sub { display:block; font-size:11.5px; color:var(--text-3); margin:2px 0 12px }
.int-dl { display:grid; grid-template-columns:auto 1fr; gap:9px 14px; margin:0 0 14px;
  padding-top:12px; border-top:1px solid var(--border) }
.int-dl dt { font-size:12.5px; color:var(--text-3) }
.int-dl dd { margin:0; font-size:12.5px; text-align:right; font-weight:500 }
.prov-badge { display:inline-block; border:1px solid var(--border); border-radius:5px;
  padding:2px 7px; font-size:10px; font-weight:700; color:#4a5568; letter-spacing:.04em }
.int-btns { display:flex; gap:8px; flex-wrap:wrap }
.btn-dark { background:#1f3352; color:#fff }
.btn-dark:hover { background:#16263e }
.int-line { font-size:13px; margin:12px 0 4px; padding-top:12px;
  border-top:1px solid var(--border) }
.int-muted { font-size:12.5px; color:var(--text-4); margin:0 0 14px }
.int-centre { text-align:center; font-size:13px; margin:12px 0 14px; padding:12px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border) }

/* --- Footer Signatures --- */
.sig-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start }
.sig-card { padding:16px 18px }
.sig-card.wide { grid-column:1 / -1; max-width:calc(50% - 6px) }
.sig-row { display:flex; align-items:center; gap:10px; margin:14px 0 12px }
.sig-row .segbar { flex:1 }
.sig-row .seg { flex:1; justify-content:center }
.dropzone.tall { height:auto; padding:18px 16px; gap:14px; flex-direction:row; text-align:left }
.dropzone.tall svg { color:var(--blue); flex:0 0 22px }
.dropzone.tall b { display:block; font-size:13px; color:var(--text) }
.dropzone.tall span { display:block; font-size:11.5px; color:var(--text-3); margin-top:2px }
.filerow { display:flex; align-items:center; gap:10px; margin-top:10px; padding:9px 12px;
  border:1px solid var(--border); border-radius:8px }
.filerow > div { flex:1; min-width:0 }
.filerow b { display:block; font-size:12px; font-weight:500; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.filerow span { display:block; font-size:11px; color:var(--text-3) }
.fileok { width:18px; height:18px; border-radius:50%; background:var(--blue); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px }

/* --- HCM --- */
.tabbar.wrap .tabset { flex-wrap:wrap }
.grid4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px 20px }
.mode-key dl.dl { grid-template-columns:96px 1fr }
.mode-key > b { display:block; font-size:13px; font-weight:600; margin-bottom:10px }
.tip { display:inline-flex; vertical-align:middle; color:var(--text-3); cursor:help }
.sub-lab { display:block; font-size:12.5px; color:var(--text-3); margin-bottom:10px }
.addbox { width:42px; height:42px; border:1px dashed var(--border-input); border-radius:9px;
  background:#FAFAFB; color:var(--blue); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center }
.amber-strip { min-height:38px; border-radius:8px; background:#FFFBF0;
  border:1px solid #FFE7BA; margin-top:12px; display:flex; align-items:center;
  justify-content:center }
.btn.dis, .btn[disabled] { opacity:.4; cursor:default }

/* inline icons inside these small badges need an explicit box or they squash */
.ob-tick svg, .ob-itick svg, .fileok svg { width:11px; height:11px; flex:0 0 11px }
.ob-item span svg, .qtext span svg, .togline svg, .int-sub svg { vertical-align:-2px;
  width:11px; height:11px }
.ob-item span { display:flex; align-items:flex-start; gap:4px }
.ob-go svg { width:13px; height:13px }
.rt svg { width:11px; height:11px }

/* --- small shared bits --- */
.up-chip { display:inline-block; background:#fdf3e2; color:#b26b00; border-radius:5px;
  padding:1px 7px; font-size:10.5px; font-weight:700; margin-left:8px }
.no-chip { display:inline-block; background:#fdeaea; color:#c0392b; border-radius:5px;
  padding:1px 8px; font-size:11px; font-weight:600 }
.rt { display:inline-flex; align-items:center; gap:4px; border-radius:5px; padding:2px 8px;
  font-size:11.5px; font-weight:600 }
.rt-a { background:#e8effa; color:#2f6fd0 } .rt-e { background:#e8f6ec; color:#1e7d42 }
.muted-txt { color:var(--text-4) }
.warn-row td { background:#fffdf5 }
.mini { border:0; background:none; color:var(--text-3); cursor:pointer; padding:0 2px;
  vertical-align:middle }
.mini:hover { color:var(--blue) }
.th2 b { display:block } .th2 i { display:block; font-style:normal; color:var(--text-3) }

@media (max-width:1280px) {
  .ob-cards { grid-template-columns:repeat(3, 1fr) }
  .ob-wall, .int-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .en-split { grid-template-columns:1fr }
  .togwall { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .grid4 { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .sig-card.wide { max-width:none }
}
@media (max-width:820px) {
  .ob-cards, .ob-wall, .int-grid, .sig-grid { grid-template-columns:1fr }
  .togwall, .grid4 { grid-template-columns:1fr }
}

/* ============================================================
   PHASE 14 — Recruitment and Onboarding, captured 14-Sep-2026.
   Tokens: use var(--border) and var(--text-3). There is no --line
   and no --muted in tokens.css; a declaration using them is
   INVALID and silently renders a zero-width border.
   ============================================================ */

/* one-column form row, to sit beside .grid2 / .grid3 / .grid5 */
.grid1 { display:grid; grid-template-columns:minmax(0,1fr); gap:16px 24px }
/* Phase 14 is the first phase to stack SEVERAL grids inside one .qcard
   (Email Setup has three, the candidate portal four), so consecutive grids
   need the gap the single-grid cards never asked for. */
.qcard .grid1 + .grid1, .qcard .grid1 + .grid2, .qcard .grid1 + .grid3,
.qcard .grid2 + .grid1, .qcard .grid2 + .grid2, .qcard .grid2 + .grid3,
.qcard .grid3 + .grid1, .qcard .grid3 + .grid2, .qcard .grid3 + .grid3 { margin-top:18px }
.qcard .togline + .grid1, .qcard .grid1 + .togline { margin-top:16px }

/* Phase 14's own action-icon colours: the amber star and the red revoke ✕ */
.act .star   { color:#FAAD14 }
.act .revoke { color:var(--red) }
.act .restore, .act .send, .act .link, .act .chat, .act .docx { color:var(--text-3) }
.act .mail   { color:var(--text-3) }

/* an action cell that also carries an annotation dot */
.nowr { display:inline-flex; align-items:center; gap:6px; white-space:nowrap }

/* the invented-data tag — this phase's rows are candidates */
.ph-tag2 { display:none }

/* status pills — Joining Form has four, Candidate Offer two */
.jstat { display:inline-block; border-radius:5px; padding:2px 9px;
         font-size:11.5px; font-weight:600; white-space:nowrap }
.jstat.j-g { background:#d9f2dd; color:#1c7a3a }   /* Completed */
.jstat.j-a { background:#fce4c4; color:#a2650c }   /* Link Generated */
.jstat.j-b { background:#d9ecfb; color:#1657b8 }   /* In Progress / Released */
.jstat.j-n { background:#e8eaee; color:#5a6472 }   /* Form Open / Draft */

/* the Joining Form toolbar strip: a master toggle and Copy Link,
   in front of the three create buttons */
.jftog { display:flex; align-items:center; gap:9px; margin-right:4px }
.jftog > span:first-child { font-size:13px; font-weight:600; color:var(--text-2) }
.jftog .btn { white-space:nowrap }

/* Add Candidate — the repeating-row bulk grid */
.bulkhead { display:flex; align-items:center; justify-content:space-between;
            margin:2px 0 12px }
.bulkgrid th { font-size:11px; letter-spacing:.02em; white-space:nowrap }
.bulkgrid td { padding:8px 10px; vertical-align:middle }
.bulkgrid td.c { text-align:center }
.bulkgrid .inp { height:34px }
.bulkgrid .inp input { font-size:13px }
.cntchip.zero { background:#e8eaee; color:#5a6472 }

/* a file chip, for the Docx template row */
.chip-file { background:#eef2f7; color:#40506a; border:1px solid var(--border);
             border-radius:5px; padding:1px 8px; font-size:11.5px; font-weight:600 }

/* a plain file picker — the candidate portal has five of them */
.upbox { display:flex; align-items:center; gap:0; height:38px;
         border:1px solid var(--border-input); border-radius:var(--radius);
         overflow:hidden; background:#fff }
.upbox span { display:inline-flex; align-items:center; gap:6px; height:100%;
              padding:0 12px; background:#f4f6f9; border-right:1px solid var(--border);
              font-size:12.5px; font-weight:600; color:var(--text-2); white-space:nowrap }
.upbox i { font-style:normal; padding:0 12px; font-size:12.5px; color:var(--text-4) }

/* Offer Expiry Time — three spinners with colons between */
.expiry { display:flex; align-items:center; gap:8px }
.expiry i { font-style:normal; color:var(--text-4); font-weight:700 }
.expiry .numbox { display:inline-flex; align-items:center; gap:6px; height:38px;
                  padding:0 12px; border:1px solid var(--border-input);
                  border-radius:var(--radius); background:#fff;
                  font-size:12.5px; color:var(--text-3) }
.expiry .numbox b { font-size:14px; color:var(--text) }

/* ---- the first WYSIWYG editor in fourteen phases ---- */
.rte { border:1px solid var(--border); border-radius:var(--radius-lg);
       background:#fff; overflow:hidden }
.qcard + .rte { margin-top:18px }
.rte-menu { display:flex; gap:2px; padding:5px 7px; border-bottom:1px solid var(--border);
            background:#fbfcfd; flex-wrap:wrap }
.rte-menu button { border:0; background:transparent; font:inherit; font-size:12.5px;
                   color:var(--text-2); padding:4px 9px; border-radius:5px; cursor:pointer }
.rte-menu button:hover { background:var(--hover) }
.rte-menu button.cf { color:#1657b8; font-weight:600 }
.rte-bar { display:flex; align-items:center; gap:3px; padding:5px 7px; flex-wrap:wrap;
           border-bottom:1px solid var(--border) }
.rte-bar button { min-width:28px; height:28px; border:0; background:transparent;
                  border-radius:5px; cursor:pointer; color:var(--text-2);
                  display:inline-flex; align-items:center; justify-content:center;
                  font-size:13px; padding:0 5px }
.rte-bar button:hover { background:var(--hover) }
.rte-bar button svg { width:14px; height:14px; flex:0 0 14px }
.rte-bar button.b { font-weight:800 } .rte-bar button.i { font-style:italic }
.rte-bar button.u { text-decoration:underline }
.rte-bar button.col { flex-direction:column; gap:1px; height:30px }
.rte-bar button.col em { display:block; width:13px; height:3px; border-radius:2px }
.rte-sel { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 9px;
           border:1px solid var(--border); border-radius:5px; font-size:12px;
           color:var(--text-2); background:#fff; cursor:pointer }
.rte-sel.sm { padding:0 7px }
.rte-sep { width:1px; height:20px; background:var(--border-2); margin:0 4px }
.rte-doc { padding:20px 24px; font-size:13.5px; line-height:1.7; color:var(--text);
           min-height:230px; background:#fff }
.rte-doc p { margin:0 0 12px }

/* ---- the candidate portal: a third shell, framed inside the mock ---- */
.cp-tabs { display:flex; gap:6px; margin:2px 0 14px }
.cp-tabs .tab { border:1px solid var(--border); background:#fff; border-radius:7px;
                padding:7px 15px; font:inherit; font-size:13px; font-weight:600;
                color:var(--text-2); cursor:pointer }
.cp-tabs .tab.on { background:var(--blue); border-color:var(--blue); color:#fff }
.cp-frame { border:1px solid var(--border); border-radius:var(--radius-lg);
            background:#f6f8fb; overflow:hidden }
.cp-url { display:flex; align-items:center; gap:8px; padding:8px 14px;
          background:#eceff4; border-bottom:1px solid var(--border);
          font-size:12px; color:var(--text-3) }
.cp-url svg { width:13px; height:13px; flex:0 0 13px }
.cp-url code { font-size:11.5px; color:var(--text-2); word-break:break-all }
.cp-url code b { color:#b4292a }
.cp-top { display:flex; align-items:center; justify-content:space-between;
          padding:12px 18px; background:#fff; border-bottom:1px solid var(--border) }
.cp-logo { font-size:15px; font-weight:800; letter-spacing:.02em; color:#1657b8 }
.cp-logo i { display:block; font-style:normal; font-size:9px; font-weight:500;
             letter-spacing:.06em; color:var(--text-4) }
.cp-who { display:inline-flex; align-items:center; gap:8px; font-size:13px;
          font-weight:600; color:var(--text-2) }
.cp-av { width:26px; height:26px; border-radius:50%; background:#dbe3ee;
         border:1px solid var(--border) }
.cp-prog { padding:13px 18px; background:#fff; border-bottom:1px solid var(--border) }
.cp-prog > div:first-child { display:flex; align-items:baseline; gap:10px;
                             margin-bottom:8px; font-size:13px }
.cp-prog b { font-size:13.5px } .cp-prog span { color:var(--text-3); font-size:12.5px }
.cp-bar { height:6px; border-radius:4px; background:#e8ecf2; overflow:hidden }
.cp-bar i { display:block; height:100%; background:var(--blue) }
.cp-body { padding:16px 18px }
.cp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
           gap:10px }
.cp-sec { display:flex; align-items:center; gap:9px; background:#fff;
          border:1px solid var(--border); border-radius:8px; padding:11px 13px;
          cursor:pointer }
.cp-sec:hover { border-color:var(--blue) }
.cp-sec.on { border-color:var(--blue); background:#f4f9ff }
.cp-num { width:22px; height:22px; flex:0 0 22px; border-radius:50%;
          background:#eef2f7; color:var(--text-3); font-size:11.5px; font-weight:700;
          display:grid; place-items:center }
.cp-nm { flex:1; font-size:13px; font-weight:600; color:var(--text) }
.cp-must { background:#fdeaea; color:#b4292a; font-size:10px; font-weight:700;
           border-radius:4px; padding:2px 6px; white-space:nowrap }
.cp-ch { color:var(--text-4); line-height:0 }
.cp-ch svg { width:14px; height:14px; flex:0 0 14px }
.cp-step { font-size:11.5px; font-weight:600; color:var(--text-3);
           background:#eef2f7; border-radius:5px; padding:2px 8px; margin-left:8px }
.cp-foot { display:flex; align-items:center; justify-content:space-between; gap:14px;
           padding:12px 18px; background:#fff; border-top:1px solid var(--border) }
.cp-meter { display:inline-flex; align-items:center; gap:7px; font-size:12px;
            color:var(--text-3) }
.cp-meter svg { width:13px; height:13px; flex:0 0 13px }
.cp-meter b { color:var(--text-2) }
.cp-legal { padding:11px 18px; background:#f0f3f7; border-top:1px solid var(--border);
            font-size:11.5px; color:var(--text-4); display:flex; gap:16px;
            align-items:center; flex-wrap:wrap }
.cp-legal a { color:#1e73e8; text-decoration:none }
.cp-legal a:hover { text-decoration:underline }
.cp-help { padding:9px 18px; background:#fff8e8; border-top:1px solid #f2e2bd;
           font-size:12px; color:#7a5a12 }
.cp-help b { color:#b4292a }
.cp-host .cp-body .card { background:#fff }
.cp-host .qh { margin-top:14px }
.cp-host .qh:first-child { margin-top:0 }

/* a select the product greys out because the toggle above it is off */
.inp.disabled { background:#f1f3f6; color:var(--text-4); pointer-events:none }
.inp.disabled .val, .inp.disabled .caret { color:var(--text-4) }

/* the red ✕ the Joining Form popups use */
.modal-head .x.red { color:#c0392b }
.modal-head .x.red:hover { background:#fdeaea }

@media (max-width:900px) {
  .grid1, .grid3 { grid-template-columns:minmax(0,1fr) }
  .jftog { flex-wrap:wrap }
  .cp-grid { grid-template-columns:minmax(0,1fr) }
}

/* ============================================================
   PHASE 15 — Others, captured 14-Sep-2026.  (the last phase)
   Tokens: var(--border) / var(--text-3). There is no --line and no
   --muted; a declaration using them is INVALID and renders a
   zero-width border.
   ============================================================ */

/* `.mono` has been used since PHASE 12 (data-productivity, data-sysconfig)
   and was never defined — so every employee code and system-account name
   rendered in the body font instead of monospace. Third latent bug of this
   class, after var(--line) and the `.dl` action-button collision. */
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size:.94em; letter-spacing:-.01em }

/* a plain section heading that lives in a .tabbar where tabs would be */
.sect-h { margin:0; font-size:15px; font-weight:600; color:var(--text);
          display:inline-flex; align-items:center; gap:8px }
.sect-h svg { width:17px; height:17px; flex:0 0 17px; color:#FAAD14 }
.sect-h.sub { margin:18px 0 10px; font-size:14px; color:var(--text-2) }

/* a 4-column form row, beside .grid1/2/3/5 */
.grid4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px 20px }
.qcard .grid4 + .modal-actions { margin-top:18px }
.modal-actions.tight { margin-top:14px; padding-top:0; border-top:0 }

/* a text input with a unit suffix baked in (“… days”) */
.inp.sfx { display:flex; align-items:center; padding-right:0; overflow:hidden }
.inp.sfx input { flex:1; min-width:0 }
.inp.sfx .unit { flex:0 0 auto; padding:0 11px; height:100%; display:flex; align-items:center;
  background:#f4f6f9; border-left:1px solid var(--border); font-size:12.5px; color:var(--text-3) }
/* a textarea wearing the .inp chrome */
.inp.ta { height:auto; padding:0 }
.inp.ta textarea { width:100%; border:0; outline:0; background:transparent; resize:vertical;
  padding:9px 12px; font:inherit; font-size:13px; color:var(--text); line-height:1.55 }

/* the rule-builder block, headed and with a Show All Members icon */
.crit { margin-top:18px }
.crit-head { display:flex; align-items:center; margin:0 0 8px }
.crit-head > span { font-size:14px; font-weight:500; color:var(--text) }
.crit-head .icon-btn { margin-left:auto }

/* toggles: a tight inline one, and a four-across wall */
.togfield.tight { padding-top:0 }
.togwall4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:14px 18px; margin:18px 0 4px }
.togwall4 .togline { margin:0 }
/* checkbox rows — Polls & Surveys is the only screen that uses checkboxes here */
.notif { margin:18px 0 18px }
/* Phase 15's create forms stack many bare grids straight into the modal, not
   inside a .qcard — so they need the same sibling gap the cards get. */
.modal > .grid1 + .grid1, .modal > .grid1 + .grid2, .modal > .grid1 + .grid3,
.modal > .grid2 + .grid1, .modal > .grid3 + .grid1,
.modal > .notif + .grid1, .modal > .crit + .grid1, .modal > .grid1 + .addopt,
.modal > .togwall4 + .crit { margin-top:18px }
.ckline { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text) }
.ckline input { width:16px; height:16px; accent-color:var(--blue); cursor:pointer }

.addopt { display:flex; justify-content:flex-end; margin-top:12px }
.qbox { margin-top:18px }
.qfoot { display:flex; align-items:center; justify-content:space-between; margin-top:14px }

/* ---- LMS Setup: four stat cards ---- */
.lms-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px;
             margin:4px 0 6px }
.lms-stat { padding:15px 18px 16px }
.ls-head { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600;
           color:var(--text); margin-bottom:12px }
.ls-ico { width:26px; height:26px; flex:0 0 26px; border-radius:7px; display:grid;
          place-items:center; line-height:0 }
.ls-ico svg { width:15px; height:15px; flex:0 0 15px }
.ls-ico.b { background:#e6f0fd; color:#1657b8 } .ls-ico.g { background:#d9f2dd; color:#1c7a3a }
.ls-ico.t { background:#cfeaf2; color:#0d6d86 } .ls-ico.r { background:#fdeaea; color:#c0392b }
.ls-two { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.ls-two b { display:block; font-size:26px; font-weight:700; line-height:1.1; color:var(--text) }
.ls-two span { font-size:11.5px; color:var(--text-3) }
.ls-num { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px }
.ls-num b { font-size:26px; font-weight:700; line-height:1; color:var(--text) }
.ls-num i { font-style:normal; font-size:12px; color:var(--text-3) }
.ls-bar { height:6px; border-radius:4px; background:#eef1f5; overflow:hidden }
.ls-bar i { display:block; height:100% }
.ls-bar i.g { background:#2eab55 } .ls-bar i.t { background:#1aa8c4 }
.ls-bar i.r { background:#e05a52 }
.ls-pct { margin-top:7px; font-size:11.5px; color:var(--text-3) }

/* ---- course cards: a paged rail, and a grid on Learning Hub ---- */
.cc-rail { position:relative; margin-top:4px }
.cc-row { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px;
          align-items:stretch }
.cc-next { position:absolute; right:-14px; top:118px; width:36px; height:36px; border-radius:50%;
  border:0; background:var(--blue); color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 4px 14px rgba(22,87,184,.34) }
.cc-next:hover { background:var(--blue-hover) }
.cc-next svg { width:18px; height:18px; flex:0 0 18px }
.cc-count { text-align:center; font-size:12.5px; color:var(--text-3); margin:14px 0 4px }
.cc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 300px)); gap:16px }

.cc { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
      overflow:hidden; display:flex; flex-direction:column; cursor:pointer }
.cc:hover { border-color:var(--blue); box-shadow:0 4px 16px rgba(16,24,40,.07) }
.cc-art { position:relative; height:116px; display:grid; place-items:center; overflow:hidden }
.cc-exam { background:#5b8c3e; color:#fff2c4; font-size:13px; font-weight:700; letter-spacing:.04em;
  padding:8px 18px; border-radius:40px; border:2px solid #fff8dc }
.cc-art.art-exam { background:#6fa04a }
.cc-art.art-logo, .cc-art.art-mark { background:#f5f8fc }
.cc-logo { font-size:17px; font-weight:800; letter-spacing:.03em; color:#1657b8; text-align:center }
.cc-logo i { display:block; font-style:normal; font-size:9px; font-weight:500;
             letter-spacing:.08em; color:#5a6472 }
.cc-blob { width:56px; height:56px; border-radius:12px;
  background:radial-gradient(circle at 30% 30%, #4096FF 0 34%, transparent 35%),
             radial-gradient(circle at 70% 34%, #1657b8 0 30%, transparent 31%),
             radial-gradient(circle at 50% 74%, #6fb3ff 0 32%, transparent 33%), #eaf2fd }
.cc-mand { position:absolute; top:9px; right:9px; justify-self:end; align-self:start;
  background:#e0393e; color:#fff;
  font-size:10px; font-weight:700; border-radius:20px; padding:3px 9px 3px 7px;
  display:inline-flex; align-items:center; gap:4px }
.cc-mand svg { width:10px; height:10px; flex:0 0 10px }
.cc-exp { position:absolute; top:9px; right:9px; justify-self:end; align-self:start;
  background:#f0932b; color:#fff;
  font-size:10px; font-weight:700; border-radius:20px; padding:3px 9px 3px 7px;
  display:inline-flex; align-items:center; gap:4px }
.cc-exp svg { width:10px; height:10px; flex:0 0 10px }
/* Learning Hub cards carry TWO pills — a Mandatory and an Expired — and they sit
   side by side across the top of the art on the live app, not stacked. */
/* .cc-art is a centring grid, and a grid container centres its ABSOLUTELY
   POSITIONED children too — so left+right alone collapses this strip to its
   minimum width and the pills overflow. An explicit width sidesteps it. */
.cc-pills { position:absolute; top:9px; left:9px; width:calc(100% - 18px);
            display:flex; gap:5px; flex-wrap:wrap; align-items:flex-start; z-index:1 }
.cc-pills .cc-mand, .cc-pills .cc-exp { position:static; top:auto; right:auto; left:auto;
            white-space:nowrap; font-size:9.5px; padding:3px 8px 3px 6px }
.cc-grid { grid-template-columns:repeat(auto-fill, minmax(290px, 330px)) }
.cc-meta { display:flex; align-items:center; justify-content:space-between; gap:8px;
           padding:10px 12px 0 }
.cc-cat { background:#e6f0fd; color:#1657b8; font-size:10.5px; font-weight:600;
          border-radius:4px; padding:2px 8px }
.cc-dur { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text-3) }
.cc-dur svg { width:12px; height:12px; flex:0 0 12px }
.cc-title { display:block; padding:8px 12px 0; font-size:13.5px; font-weight:600;
            color:#1e73e8; text-decoration:none; line-height:1.35 }
.cc-title:hover { text-decoration:underline }
.cc-desc { padding:5px 12px 14px; margin:0; font-size:12px; color:var(--text-3);
           line-height:1.5; flex:1 }
.cc-prog { padding:0 12px 14px; margin-top:auto }
.cc-plab { display:flex; align-items:baseline; justify-content:space-between;
           font-size:12px; color:var(--text-3); margin-bottom:6px }
.cc-plab b { font-size:12.5px; color:var(--text-2) }
.cc-pbar { height:5px; border-radius:4px; background:#eef1f5; overflow:hidden }
.cc-pbar i { display:block; height:100%; background:var(--blue) }

.hub-empty { display:grid; place-items:center; gap:10px; padding:70px 20px; color:#c3cbd8 }
.hub-empty svg { width:56px; height:56px; flex:0 0 56px }
.hub-empty p { margin:0; font-size:14px; font-weight:600; color:var(--text-3) }

/* ---- LMS Recent Activity feed ---- */
.actfeed { padding:6px 0 12px }
.af-row { display:flex; align-items:center; gap:12px; padding:11px 18px;
          border-bottom:1px solid var(--border) }
.af-row:last-of-type { border-bottom:0 }
.af-av { width:34px; height:34px; flex:0 0 34px; border-radius:50%; object-fit:cover;
         border:1px solid var(--border) }
.af-txt { flex:1; min-width:0 }
.af-txt p { margin:0; font-size:13px; color:var(--text-2); line-height:1.45 }
.af-txt p b { color:var(--text); font-weight:600 }
.af-txt small { font-size:11.5px; color:var(--text-4) }
.af-chip { flex:0 0 auto; font-size:11px; font-weight:700; border-radius:5px; padding:3px 9px }
.af-enrolled  { background:#e8eaee; color:#5a6472 }
.af-completed { background:#d9f2dd; color:#1c7a3a }
.af-failed    { background:#fdeaea; color:#c0392b }
.af-pager { display:flex; align-items:center; gap:5px; justify-content:center;
            padding:14px 0 4px }
.af-pager button { min-width:28px; height:28px; border:1px solid var(--border); background:#fff;
  border-radius:6px; font:inherit; font-size:12.5px; color:var(--text-2); cursor:pointer }
.af-pager button.on { background:var(--blue); border-color:var(--blue); color:#fff }
.af-pager span { color:var(--text-4); padding:0 2px }

/* ---- the two-step Add Course wizard ---- */
.wiz { display:flex; gap:14px; margin:2px 0 20px }
.wiz-step { flex:0 0 172px; border:1.5px solid var(--border); border-radius:var(--radius-lg);
  background:#fbfcfd; padding:13px 15px; cursor:pointer; color:var(--text-3) }
.wiz-step.on { border-color:var(--blue); background:#f4f9ff; color:var(--text) }
.wiz-step span { display:block; line-height:0; margin-bottom:8px; color:#9aa5b5 }
.wiz-step.on span { color:var(--blue) }
.wiz-step svg { width:20px; height:20px; flex:0 0 20px }
.wiz-step b { display:block; font-size:13.5px; font-weight:600 }
.wiz-step i { font-style:normal; font-size:11.5px; color:var(--text-4) }

/* underlined text tabs inside a dialog — Detailed Result and Select Criteria.
   (Phase 14's .cp-tabs pills stay as they are: those tabs are the mock's own.) */
.utabs { display:flex; gap:4px; margin:2px 0 16px; border-bottom:1px solid var(--border) }
.utabs .tab { border:0; background:none; font:inherit; font-size:13.5px; font-weight:600;
  color:var(--text-3); padding:9px 16px 10px; cursor:pointer; position:relative }
.utabs .tab:hover { color:var(--text-2) }
.utabs .tab.on { color:var(--blue) }
.utabs .tab.on::after { content:''; position:absolute; left:10px; right:10px; bottom:-1px;
  height:2px; border-radius:2px; background:var(--blue) }

/* ---- Polls & Surveys ---- */
.ps-none { padding:34px 20px; text-align:center; font-size:13.5px; color:var(--text-3) }
.jstat.j-r { background:#fdeaea; color:#c0392b }   /* Closed */
.sched-head { display:flex; justify-content:flex-end; margin:2px 0 12px }
.votebar { display:flex; flex-direction:column; align-items:flex-end; gap:5px }
.votebar span { font-size:12.5px; font-weight:600; color:var(--text-2) }
.votebar i { display:block; width:220px; max-width:100%; height:6px; border-radius:4px;
             background:#eef1f5; overflow:hidden }
.votebar i b { display:block; height:100%; background:var(--blue) }
.optchip { background:#eef2f7; color:#40506a; border:1px solid var(--border);
           border-radius:5px; padding:2px 9px; font-size:11.5px; font-weight:600 }
.ballot-q { margin:0 0 14px; font-size:13.5px; color:var(--text); line-height:1.5 }
.ballot { display:flex; align-items:center; gap:11px; border:1.5px solid var(--border);
  border-radius:8px; padding:12px 14px; margin-bottom:9px; font-size:13.5px;
  color:var(--text-2); background:#fbfcfd }
.ballot.on { border-color:var(--blue); background:#f4f9ff; color:#1657b8; font-weight:600 }
.radio { width:16px; height:16px; flex:0 0 16px; border-radius:50%;
         border:1.5px solid #b9c2d0; background:#fff; position:relative }
.radio.on { border-color:var(--blue) }
.radio.on::after { content:''; position:absolute; inset:3px; border-radius:50%;
                   background:var(--blue) }

/* a second overlay, stacked above the first (View Response) */
.overlay.lvl2 { z-index:78; background:rgba(20,28,40,.34); align-items:flex-start;
                padding-top:96px }
.overlay.lvl2 .modal { box-shadow:0 26px 70px rgba(16,24,40,.34) }

/* ---- Album: the in-row upload control ---- */
.upcell { display:inline-flex; align-items:center; position:relative }
.upcell .btn { white-space:nowrap; gap:7px }
.upcnt { position:absolute; top:-7px; right:-9px; min-width:18px; height:18px; padding:0 5px;
  border-radius:10px; background:var(--blue); color:#fff; font-style:normal; font-size:10.5px;
  font-weight:700; display:grid; place-items:center }
.upcnt.zero { background:#9aa5b5 }

/* ---- Compose Email ---- */
.ce-top { display:flex; align-items:flex-start; gap:18px; margin-bottom:18px; flex-wrap:wrap }
.ce-subj { flex:1 1 320px; min-width:240px }
.ce-subj.half { flex:1 1 220px }
.recip { flex:0 0 400px; display:flex; align-items:center; gap:12px; padding:13px 15px;
         background:#f6f8fc }
.rc-ico { width:36px; height:36px; flex:0 0 36px; border-radius:9px; background:#e6f0fd;
          color:#1657b8; display:grid; place-items:center; line-height:0 }
.rc-ico svg { width:20px; height:20px; flex:0 0 20px }
.rc-txt { flex:1; min-width:0 }
.rc-txt b { display:block; font-size:13px; color:var(--text) }
.rc-txt small { font-size:11.5px; color:var(--text-3) }
.ce-send { display:flex; justify-content:flex-end; margin-top:16px }
.rte-bar button.s { text-decoration:line-through }
.rte-doc.mail { min-height:260px }
.rte-foot { display:flex; align-items:center; padding:5px 10px; border-top:1px solid var(--border);
  background:#fbfcfd; font-size:11px; color:var(--text-4) }
.rte-foot b { margin:0 auto; font-weight:500 }
.rte-grip { width:12px; height:12px; flex:0 0 12px;
  background:linear-gradient(135deg, transparent 45%, #c3cbd8 45% 55%, transparent 55%),
             linear-gradient(135deg, transparent 68%, #c3cbd8 68% 78%, transparent 78%) }
.rc-empty { padding:30px 20px; text-align:center; font-size:13px; color:var(--text-3);
            font-style:italic; margin-top:14px }
.rc-foot { display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:14px; padding:12px 15px; background:#f6f8fc; border-radius:var(--radius);
  font-size:12.5px; color:var(--text-2) }
.rc-foot .btn[disabled] { opacity:.45; pointer-events:none }
.hist-none { margin:8px 0 0; font-size:13.5px; color:var(--text-3) }

/* ---- the Unlayer drag-and-drop builder ---- */
.unl { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
       background:#fff }
.unl-bar { display:flex; align-items:center; gap:4px; padding:6px 10px;
           border-bottom:1px solid var(--border); background:#fbfcfd }
.unl-dev, .unl-eye { width:28px; height:28px; border-radius:6px; display:grid; place-items:center;
  color:var(--text-3); cursor:pointer; line-height:0 }
.unl-dev.on { background:#e6f0fd; color:#1657b8 }
.unl-dev:hover, .unl-eye:hover { background:var(--hover) }
.unl-eye { margin-left:auto }
.unl-dev svg, .unl-eye svg { width:15px; height:15px; flex:0 0 15px }
.unl-body { display:flex; min-height:330px }
.unl-canvas { flex:1; min-width:0; padding:24px;
  background-image:linear-gradient(45deg, #f0f2f5 25%, transparent 25% 75%, #f0f2f5 75%),
                   linear-gradient(45deg, #f0f2f5 25%, transparent 25% 75%, #f0f2f5 75%);
  background-size:18px 18px; background-position:0 0, 9px 9px }
.unl-drop { border:1.5px dashed #9ec5f5; border-radius:6px; background:#eaf3fe;
  padding:34px 20px; text-align:center; font-size:12.5px; color:#1e73e8 }
.unl-pal { flex:0 0 300px; display:flex; border-left:1px solid var(--border); background:#f6f8fc }
.unl-tiles { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:14px }
.unl-tile { background:#fff; border:1px solid var(--border); border-radius:8px;
  display:grid; place-items:center; gap:5px; padding:12px 4px; cursor:grab;
  color:var(--text-2); font-size:10.5px; text-align:center }
.unl-tile:hover { border-color:var(--blue); color:var(--blue) }
.unl-tile svg { width:18px; height:18px; flex:0 0 18px }
.unl-tabs { flex:0 0 62px; border-left:1px solid var(--border); background:#fff;
            padding-top:14px }
.unl-tabs span { display:grid; place-items:center; gap:4px; padding:11px 2px; cursor:pointer;
  color:var(--text-3); font-size:9.5px; line-height:1 }
.unl-tabs span.on { color:var(--blue); background:#f4f9ff }
.unl-tabs span i { font-style:normal }
.unl-tabs span svg { width:15px; height:15px; flex:0 0 15px }
.unl-foot { display:flex; justify-content:flex-end; padding:7px 12px;
            border-top:1px solid var(--border); background:#f6f8fc }
.unl-by { font-size:11px; color:var(--text-3) }
.unl-by b { color:#7b2cbf; font-weight:600 }

@media (max-width:1180px) {
  .lms-stats { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .cc-row { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .cc-next { top:96px }
  .grid4, .togwall4 { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .unl-pal { flex:0 0 220px }
  .unl-tiles { grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:760px) {
  .lms-stats, .cc-row, .grid4, .togwall4 { grid-template-columns:minmax(0, 1fr) }
  .recip { flex:1 1 100% }
  .unl-body { flex-direction:column }
  .unl-pal { flex:0 0 auto; border-left:0; border-top:1px solid var(--border) }
}

/* ============================================================
   Profile photos — synthetic portraits (see data.js `av`), square JPEGs.
   Every avatar render point already rounds to a circle; these add the
   cover-fit and rendering hints the SVG placeholders never needed.
   ============================================================ */
.pav, .prof-av, .af-av, .av, .av.sm, .oc-person img, .bhead img,
.me img, .side-foot .av, .ev-row .av, .av-stack img,
.role-switch img, .role-badge img {
  object-fit:cover; background:#eef2f7;
}