:root{
  --topA-bg:#141e28;
  --topA-text:#c6d0da;
  --topB-bg:#22333f;
  --topB-text:#dbe4ec;
  --toolbar-bg:#f6f7f9;
  --toolbar-border:#dde2e8;
  --toolbar-text:#5a6672;

  --rail-bg:#182530;
  --rail-text:#94a3b3;
  --rail-text-active:#ffffff;
  --rail-active-bg:#22333f;

  --bg:#eef1f4;
  --surface:#ffffff;
  --border:#dbe1e7;
  --border-strong:#c7cfd8;
  --text:#1c2733;
  --text-muted:#5a6672;
  --text-faint:#8996a3;

  --link:#1a73c7;
  --link-hover:#125a9c;

  --blue:#1a73c7;
  --green:#2f8f3f;
  --amber:#b9750d;
  --red:#c0392b;
  --grey:#6b7785;
  --teal:#0f8b8d;
  --purple:#6c5ce7;

  --c-candidate:#2f8f3f;
  --c-candidate-dark:#1f5c2b;
  --c-contact:#0f8b8d;
  --c-contact-dark:#0c6668;
  --c-job:#c0392b;
  --c-job-dark:#8f2a20;
  --c-company:#1a73c7;
  --c-company-dark:#144f8c;
  --c-submission:#6c5ce7;
}

*{ box-sizing:border-box; }
html,body{ background:var(--bg); margin:0; }
body{
  color:var(--text);
  font-family:'Inter',Arial,Helvetica,sans-serif;
  font-size:12.5px;
  line-height:1.45;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
table{ font-variant-numeric: tabular-nums; }
::selection{ background:#cfe3f7; }

#app{ display:flex; flex-direction:column; height:100vh; }

/* ---------------- Bar A (top black bar) ---------------- */
.bar-a{
  background:var(--topA-bg); color:var(--topA-text);
  height:58px; flex-shrink:0; display:flex; align-items:center;
  padding:0 14px; gap:12px; border-bottom:1px solid #0c141c;
}
.brand{ display:flex; align-items:center; gap:8px; }
.brand-chip{
  background:#f4f1ea; border-radius:6px; padding:5px 14px; display:flex; align-items:center;
  height:46px;
}
.brand-chip img{ height:36px; width:auto; display:block; image-rendering:-webkit-optimize-contrast; }
.bar-a-divider{ width:1px; height:26px; background:#324352; }
.account-pill{
  font-size:11px; color:#9fb0bf; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  background:#1c2b38; border:1px solid #324352; padding:4px 11px; border-radius:3px;
}
.bar-a-spacer{ flex:1; }
.bar-a-user{ display:flex; align-items:center; gap:7px; font-size:12px; color:#dbe4ec; }
.bar-a-user .u-av{
  width:26px; height:26px; border-radius:50%; background:#324352; color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.help-btn{
  background:#c0392b; color:#fff; border:none; border-radius:3px; padding:8px 14px;
  font-size:11.5px; font-weight:700; letter-spacing:.03em; cursor:pointer;
}

/* ---------------- Bar B (module breadcrumb) ---------------- */
.bar-b{
  background:var(--topB-bg); color:var(--topB-text);
  height:44px; flex-shrink:0; display:flex; align-items:center;
  padding:0 16px; gap:12px; border-bottom:1px solid #1a2833;
}
.rail-toggle{
  display:flex; align-items:center; gap:6px; color:#aebac6; font-size:12.5px; cursor:pointer;
  padding:5px 8px; border-radius:3px;
}
.rail-toggle:hover{ background:#1a2833; }
.module-icon{ width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.module-name{ font-size:14.5px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; }
.module-name .caret{ font-size:10px; color:#8fa0af; }
.module-search{
  margin-left:14px; background:#fff; border:1px solid #16222c; border-radius:3px;
  padding:6px 10px; font-size:12px; width:230px; color:#333;
}
.module-search::placeholder{ color:#9aa5af; }
.bar-b-spacer{ flex:1; }
.btn-add{
  background:#2f8f3f; color:#fff; border:none; border-radius:3px; padding:7px 14px;
  font-size:12px; font-weight:700; cursor:pointer;
}

/* ---------------- Rail ---------------- */
.shell{ flex:1; display:flex; min-height:0; }
.rail{
  width:196px; flex-shrink:0; background:var(--rail-bg); display:flex; flex-direction:column;
  border-right:1px solid #0e1720; transition:width .12s;
}
#app.rail-collapsed .rail{ width:52px; }
#app.rail-collapsed .rail-label{ display:none; }
#app.rail-collapsed .rail-footer a{ display:none; }
.rail-nav{ padding:10px 8px; display:flex; flex-direction:column; gap:1px; }
.rail-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:3px;
  color:var(--rail-text); font-size:12.8px; font-weight:500; cursor:pointer; white-space:nowrap; overflow:hidden;
}
.rail-item:hover{ background:#1e2c38; color:#dbe4ec; }
.rail-item.active{ background:var(--rail-active-bg); color:var(--rail-text-active); font-weight:700; }
.rail-dot{ width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.rail-footer{
  margin-top:auto; padding:12px 14px; border-top:1px solid #0e1720;
  display:flex; flex-direction:column; gap:7px;
}
.rail-footer a{ font-size:11px; color:#66768a; cursor:pointer; }
.rail-footer a:hover{ color:#aebac6; }

/* ---------------- Workspace ---------------- */
.workspace{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--surface); }
.toolbar{
  background:var(--toolbar-bg); border-bottom:1px solid var(--toolbar-border);
  height:36px; flex-shrink:0; display:flex; align-items:center; padding:0 14px; gap:16px;
}
.toolbar button{
  background:none; border:none; color:var(--toolbar-text); font-size:12px; cursor:pointer;
  display:flex; align-items:center; gap:4px; font-weight:500;
}
.toolbar button:hover{ color:var(--text); text-decoration:underline; }
.toolbar .tb-count{ margin-left:auto; color:var(--text-faint); font-size:11.5px; }
.toolbar input[type=checkbox]{ margin:0; }

/* ---------------- Split view ---------------- */
.split-view{ flex:1; min-height:0; display:flex; overflow:hidden; }
.list-pane{ flex:1; min-width:0; overflow:auto; }
.list-pane.narrow{ flex:1 1 auto; }

table.data{ width:100%; border-collapse:collapse; min-width:620px; }
table.data thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-faint); font-weight:700; padding:8px 12px; border-bottom:1px solid var(--border-strong);
  background:#eef1f4; white-space:nowrap; position:sticky; top:0;
}
table.data thead th.chk{ width:30px; }
table.data tbody td{
  padding:7px 12px; border-bottom:1px solid var(--border); font-size:12.3px; vertical-align:middle; white-space:nowrap;
}
table.data tbody tr{ cursor:pointer; }
table.data tbody tr:hover{ background:#f2f6fa; }
table.data tbody tr.selected{ background:#e6f0fb; box-shadow:inset 3px 0 0 var(--row-accent, var(--blue)); }
.rowlink{ color:var(--link); font-weight:600; }
.rowlink:hover{ text-decoration:underline; }
.cell-muted{ color:var(--text-muted); }
.cell-name{ display:flex; align-items:center; gap:8px; }

/* ---------------- Photo tiles ---------------- */
.photo{
  width:28px; height:28px; border-radius:3px; flex-shrink:0; background-size:cover;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.photo.lg{ width:64px; height:64px; border-radius:4px; }
.photo svg{ width:100%; height:100%; display:block; }
.badge{
  width:28px; height:28px; border-radius:3px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; color:#fff;
}
.badge.lg{ width:64px; height:64px; font-size:19px; border-radius:4px; }

/* ---------------- Status text ---------------- */
.stx{ font-weight:700; font-size:12px; display:inline-flex; align-items:center; gap:5px; }
.stx::before{ content:''; width:6px; height:6px; border-radius:1px; background:currentColor; flex-shrink:0; }
.stx.blue{ color:var(--blue); } .stx.green{ color:var(--green); } .stx.amber{ color:var(--amber); }
.stx.red{ color:var(--red); } .stx.grey{ color:var(--grey); }

/* ---------------- Detail / quickview panel ---------------- */
.detail-pane{
  width:440px; flex-shrink:0; border-left:1px solid var(--border-strong); background:var(--surface);
  display:flex; flex-direction:column; min-height:0;
}
.qv-header{
  padding:16px 18px; display:flex; gap:14px; align-items:flex-start; position:relative; color:#fff;
}
.qv-close{
  position:absolute; top:10px; right:10px; background:rgba(255,255,255,.15); border:none; color:#fff;
  width:22px; height:22px; border-radius:3px; cursor:pointer; font-size:13px; line-height:1;
}
.qv-close:hover{ background:rgba(255,255,255,.28); }
.qv-name{ font-size:16.5px; font-weight:700; color:#fff; }
.qv-role{ font-size:12px; color:rgba(255,255,255,.82); margin-top:3px; }
.qv-role a{ color:#fff; text-decoration:underline; cursor:pointer; }
.qv-meta{ margin-top:9px; display:flex; flex-direction:column; gap:2px; font-size:11.3px; color:rgba(255,255,255,.75); }

.qv-tabs{ display:flex; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; }
.qv-tab{
  padding:10px 13px; font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer;
  border-bottom:2px solid transparent;
}
.qv-tab.active{ color:var(--qv-accent,var(--blue)); border-bottom-color:var(--qv-accent,var(--blue)); }
.qv-body{ flex:1; overflow:auto; padding:16px 18px; }
.qv-panel{ display:none; }
.qv-panel.active{ display:block; }

.field-row{ display:flex; padding:7px 0; border-bottom:1px solid #f0f2f5; font-size:12.3px; }
.field-row .fl{ width:130px; flex-shrink:0; color:var(--text-faint); font-weight:600; text-transform:uppercase; font-size:10.3px; letter-spacing:.03em; padding-top:1px; }
.field-row .fvv{ color:var(--text); }

.plain-list{ list-style:none; padding:0; margin:0; }
.plain-list li{ padding:5px 0; border-bottom:1px solid #f0f2f5; font-size:12.3px; display:flex; align-items:center; gap:7px; }
.plain-list li::before{ content:''; width:5px; height:5px; background:var(--text-faint); flex-shrink:0; }

.section-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); font-weight:700;
  margin:16px 0 6px;
}
.section-label:first-child{ margin-top:0; }

.note-plain{ padding:8px 0; border-bottom:1px solid #f0f2f5; font-size:12.2px; }
.note-plain .nh{ color:var(--text-faint); font-size:11px; margin-bottom:2px; }
.note-plain .nh b{ color:var(--text); }

/* ---------------- Submission / pipeline table inside quickview ---------------- */
table.mini{ width:100%; border-collapse:collapse; }
table.mini th{
  text-align:left; font-size:10.3px; text-transform:uppercase; color:var(--text-faint); font-weight:700;
  padding:6px 8px; border-bottom:1px solid var(--border-strong); background:#f6f7f9;
}
table.mini td{ padding:6px 8px; border-bottom:1px solid #f0f2f5; font-size:12.2px; }

details.sg{ border:1px solid var(--border); border-bottom:none; }
details.sg:last-of-type{ border-bottom:1px solid var(--border); }
details.sg summary{
  list-style:none; cursor:pointer; padding:9px 10px; display:flex; align-items:center; gap:10px;
  background:var(--surface);
}
details.sg summary::-webkit-details-marker{ display:none; }
details.sg[open] summary{ background:#f6f7f9; border-bottom:1px solid var(--border); }
details.sg summary .arrow{ transition:transform .1s; color:var(--text-faint); font-size:10px; }
details.sg[open] summary .arrow{ transform:rotate(90deg); }
.sg-body{ padding:10px 12px 12px; }
.sg-name{ flex:1; font-weight:600; }
.sg-stage{ width:110px; }
.sg-score{ width:120px; text-align:right; font-weight:700; font-size:11.5px; }

table.gapchk{ width:100%; border-collapse:collapse; margin-top:2px; }
table.gapchk th{ text-align:left; font-size:10px; text-transform:uppercase; color:var(--text-faint); font-weight:700; padding:4px 6px; border-bottom:1px solid var(--border-strong); }
table.gapchk td{ padding:4px 6px; font-size:12px; border-bottom:1px solid #f0f2f5; }
.gap-yes{ color:var(--green); font-weight:700; }
.gap-no{ color:var(--red); font-weight:700; }

/* ---------------- Dashboard widgets ---------------- */
.dash-wrap{ padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.widget{ border:1px solid var(--border); background:var(--surface); }
.widget-head{
  background:#f6f7f9; border-bottom:1px solid var(--border); padding:8px 12px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--toolbar-text);
}
.widget-body{ padding:0; }
.empty-row{ padding:16px; color:var(--text-faint); font-size:12.3px; text-align:center; }

@media (max-width: 980px){
  .dash-wrap{ grid-template-columns:1fr; }
  .detail-pane{ width:360px; }
}

/* =========================================================
   Additions for the working app (not in the mockup)
   ========================================================= */

[hidden]{ display:none !important; }

/* ---------------- Focus + keyboard ---------------- */
:focus-visible{ outline:2px solid #1a73c7; outline-offset:1px; }
.rail-item:focus-visible, table.data tbody tr:focus-visible, .qv-tab:focus-visible{ outline-offset:-2px; }
table.data tbody tr:focus-visible{ background:#f2f6fa; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------------- Header extras ---------------- */
.bar-a-user{ position:relative; cursor:pointer; padding:5px 8px; border-radius:3px; border:none; background:none; }
.bar-a-user:hover{ background:#1c2b38; }
.mock-pill{
  font-size:10px; font-weight:800; letter-spacing:.06em; color:#141e28; background:#f2c94c;
  padding:3px 8px; border-radius:3px; text-transform:uppercase;
}
.menu{
  position:absolute; top:calc(100% + 4px); right:0; min-width:180px; background:#fff; color:var(--text);
  border:1px solid var(--border-strong); border-radius:3px; box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:40;
  padding:4px 0; text-align:left;
}
.menu-item{
  display:block; width:100%; text-align:left; background:none; border:none; padding:8px 12px; font-size:12.3px;
  color:var(--text); cursor:pointer;
}
.menu-item:hover{ background:#f2f6fa; }
.menu-item.muted{ color:var(--text-faint); cursor:default; }
.menu-item.muted:hover{ background:none; }
.menu-sep{ border-top:1px solid var(--border); margin:4px 0; }
.bar-b .module-name{ position:relative; }
.btn-add{ position:relative; }
.add-wrap{ position:relative; }
.help-btn{ text-decoration:none; display:inline-flex; align-items:center; }

/* ---------------- Toolbar: global search ---------------- */
.gsearch{ position:relative; margin-left:auto; display:flex; align-items:center; gap:8px; }
.gsearch input{
  border:1px solid var(--border-strong); border-radius:3px; padding:4px 8px; font-size:12px; width:220px; background:#fff;
}
.gsearch-results{
  position:absolute; top:calc(100% + 4px); right:0; width:360px; max-height:340px; overflow:auto; background:#fff;
  border:1px solid var(--border-strong); border-radius:3px; box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:40;
}
.gsearch-row{
  display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; border-bottom:1px solid #f0f2f5; font-size:12.3px;
  background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left;
}
.gsearch-row:hover, .gsearch-row:focus-visible{ background:#f2f6fa; }
.gsearch-row .kind{ margin-left:auto; font-size:10px; text-transform:uppercase; font-weight:700; letter-spacing:.04em; }
.kind-candidate{ color:var(--c-candidate); } .kind-contact{ color:var(--c-contact); }
.kind-job{ color:var(--c-job); } .kind-company{ color:var(--c-company); }
.toolbar .tb-count{ margin-left:0; }
.toolbar .tb-filter{ position:relative; }

/* ---------------- Sortable headers + load more ---------------- */
table.data thead th.sortable{ cursor:pointer; user-select:none; }
table.data thead th.sortable:hover{ color:var(--text); }
table.data thead th .sort-ind{ margin-left:4px; font-size:9px; color:var(--text-muted); }
.load-more{ padding:12px; display:flex; justify-content:center; align-items:center; gap:12px; color:var(--text-faint); font-size:11.5px; }
.list-foot{ padding:10px 12px; color:var(--text-faint); font-size:11.5px; display:flex; gap:12px; align-items:center; }

/* ---------------- Buttons + forms ---------------- */
.btn{
  background:#fff; color:var(--text); border:1px solid var(--border-strong); border-radius:3px; padding:6px 12px;
  font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; line-height:1.3;
}
.btn:hover{ background:#f2f6fa; }
.btn:disabled{ opacity:.55; cursor:default; }
.btn.primary{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.primary:hover{ background:var(--link-hover); }
.btn.success{ background:var(--green); border-color:var(--green); color:#fff; }
.btn.danger{ background:#fff; border-color:var(--red); color:var(--red); }
.btn.danger:hover{ background:#fdf1ef; }
.btn.sm{ padding:3px 8px; font-size:11.3px; }
.btn.link{ border:none; background:none; color:var(--link); padding:2px 4px; }
.btn.link:hover{ text-decoration:underline; background:none; }
.btn.ghost{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); color:#fff; }
.btn.ghost:hover{ background:rgba(255,255,255,.28); }
.btn-row{ display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.btn-row .spacer{ flex:1; }

.fld{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.fld label, .fld .lbl{ font-size:10.3px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-faint); font-weight:700; }
.fld label .req{ color:var(--red); }
.fld input, .fld select, .fld textarea, .inline-edit input, .inline-edit select{
  font-family:inherit; font-size:12.3px; color:var(--text); border:1px solid var(--border-strong); border-radius:3px;
  padding:6px 8px; background:#fff; width:100%;
}
.fld textarea{ min-height:70px; resize:vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline:2px solid #1a73c7; outline-offset:-1px; border-color:#1a73c7; }
.fld .hint{ font-size:11px; color:var(--text-faint); }
.fld .err{ font-size:11px; color:var(--red); }
.fld-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.fld.chk{ flex-direction:row; align-items:center; gap:8px; }
.fld.chk input{ width:auto; }
.fld.chk label{ text-transform:none; font-size:12.3px; letter-spacing:0; color:var(--text); font-weight:500; }
.form-title{ font-size:14px; font-weight:700; margin:0 0 12px; }
.form-error{ background:#fdf1ef; border:1px solid #f0c2bb; color:var(--red); padding:8px 10px; border-radius:3px; font-size:12px; margin-bottom:10px; }
.qv-form{ padding:0; }

/* picker (autocomplete) */
.picker{ position:relative; }
.picker-list{
  position:absolute; top:100%; left:0; right:0; max-height:220px; overflow:auto; background:#fff; z-index:30;
  border:1px solid var(--border-strong); border-radius:0 0 3px 3px; box-shadow:0 6px 18px rgba(0,0,0,.16);
}
.picker-item{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none; padding:7px 9px; font-size:12.3px; cursor:pointer;
  border-bottom:1px solid #f0f2f5;
}
.picker-item:hover, .picker-item:focus-visible{ background:#f2f6fa; }
.picker-item .sub{ color:var(--text-faint); font-size:11px; margin-left:auto; }
.picker-empty{ padding:8px 9px; color:var(--text-faint); font-size:11.5px; }
.picker-chosen{ display:flex; align-items:center; gap:8px; }
.picker-chosen .btn{ margin-left:auto; }

/* ---------------- Quick view extras ---------------- */
.qv-header .qv-actions{ position:absolute; top:10px; right:38px; display:flex; gap:6px; }
.qv-header .pill-persona{
  display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:10.3px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); color:#fff; padding:2px 8px; border-radius:3px;
}
.pill-persona.inline{ margin:0 0 0 6px; background:#eef4fb; border:1px solid #cfe0f5; color:var(--blue); font-size:9.5px; padding:1px 6px; vertical-align:middle; display:inline-flex; font-weight:800; letter-spacing:.04em; text-transform:uppercase; border-radius:3px; }
.qv-tab{ background:none; border:none; border-bottom:2px solid transparent; font-family:inherit; }
.qv-body .empty-row{ padding:20px 8px; }
.field-row .fvv{ flex:1; min-width:0; overflow-wrap:anywhere; }
.field-row .fvv.editable{ cursor:text; display:flex; align-items:center; gap:6px; }
.field-row .fvv.editable:hover{ background:#f6f7f9; margin:-2px -4px; padding:2px 4px; border-radius:2px; }
.field-row .fvv.editable .pen{ color:var(--text-faint); font-size:10px; opacity:0; }
.field-row .fvv.editable:hover .pen{ opacity:1; }
.field-row .fvv .none{ color:var(--text-faint); font-style:italic; }
.inline-edit{ display:flex; gap:6px; align-items:center; flex:1; }
.inline-edit input, .inline-edit select{ padding:3px 6px; font-size:12px; }
.qv-body .section-label.with-action{ display:flex; align-items:center; }
.qv-body .section-label.with-action .btn{ margin-left:auto; text-transform:none; letter-spacing:0; }
.note-add{ margin-bottom:12px; }
.note-add textarea{
  width:100%; min-height:64px; font-family:inherit; font-size:12.3px; border:1px solid var(--border-strong); border-radius:3px; padding:7px 9px; resize:vertical;
}
.note-add textarea:focus{ outline:2px solid #1a73c7; outline-offset:-1px; }
.note-add .btn-row{ margin-top:6px; }
.note-plain .nt{ white-space:pre-wrap; overflow-wrap:anywhere; }
.note-plain .nh .when{ color:var(--text-faint); }
table.mini select.stage, table.data select.stage{
  font-family:inherit; font-size:11.5px; font-weight:700; border:1px solid transparent; background:transparent; padding:2px 4px; border-radius:3px; cursor:pointer;
  max-width:130px;
}
table.mini select.stage:hover, table.data select.stage:hover, .sg-stage select.stage:hover{ border-color:var(--border-strong); background:#fff; }
.sg-stage select.stage{
  font-family:inherit; font-size:11.5px; font-weight:700; border:1px solid transparent; background:transparent; padding:2px 4px; border-radius:3px; cursor:pointer; width:100%;
}
.stx.blue select, .sg-stage .blue{ color:var(--blue); } .sg-stage .green{ color:var(--green); } .sg-stage .amber{ color:var(--amber); }
.sg-stage .red{ color:var(--red); } .sg-stage .grey{ color:var(--grey); }
.stage-blue{ color:var(--blue); } .stage-green{ color:var(--green); } .stage-amber{ color:var(--amber); } .stage-red{ color:var(--red); } .stage-grey{ color:var(--grey); }
.sg-stage{ width:128px; }
details.sg summary .sg-stage{ display:flex; }
.add-cand{ margin-top:12px; }
.persona-box{ margin-top:14px; border:1px solid var(--border); background:#f6f7f9; padding:10px 12px; border-radius:3px; }
.persona-box .fld{ margin-bottom:8px; }

/* confirm rows (no dialogs) */
.confirm-row{
  display:flex; align-items:center; gap:8px; background:#fff8e6; border:1px solid #f0d78a; padding:8px 10px; border-radius:3px; margin:8px 0; font-size:12px;
  flex-wrap:wrap;
}
.confirm-row.danger{ background:#fdf1ef; border-color:#f0c2bb; }
.confirm-row .msg{ flex:1; min-width:180px; }

/* ---------------- Toasts ---------------- */
.toasts{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:100; max-width:380px; }
.toast{
  background:#1c2733; color:#fff; padding:10px 14px; border-radius:4px; font-size:12.3px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  display:flex; align-items:flex-start; gap:10px; animation:toast-in .15s ease-out;
}
.toast.ok{ border-left:4px solid var(--green); } .toast.err{ border-left:4px solid var(--red); } .toast.info{ border-left:4px solid var(--blue); }
.toast .msg{ flex:1; white-space:pre-wrap; }
.toast button{ background:none; border:none; color:#aebac6; cursor:pointer; font-size:14px; line-height:1; padding:0; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* ---------------- Skeletons + empty states ---------------- */
.skel{ background:linear-gradient(90deg,#eef1f4 25%,#f6f7f9 50%,#eef1f4 75%); background-size:200% 100%; animation:skel 1.1s infinite; border-radius:3px; height:12px; }
@keyframes skel{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.skel-rows{ padding:12px; display:flex; flex-direction:column; gap:14px; }
.skel-rows .skel{ height:14px; }
.skel-rows .skel:nth-child(2n){ width:70%; } .skel-rows .skel:nth-child(3n){ width:85%; }
.empty-state{ padding:40px 20px; text-align:center; color:var(--text-faint); font-size:12.5px; }
.empty-state b{ display:block; color:var(--text-muted); font-size:13.5px; margin-bottom:4px; }
.error-state{ padding:20px; color:var(--red); font-size:12.5px; }

/* ---------------- Login ---------------- */
.login-wrap{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:24px; }
.login-card{ width:360px; background:#fff; border:1px solid var(--border-strong); border-radius:4px; padding:24px; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.login-card .brand-chip{ display:inline-flex; margin-bottom:18px; }
.login-card h1{ font-size:15px; margin:0 0 4px; }
.login-card p.sub{ color:var(--text-muted); font-size:12px; margin:0 0 16px; }
.login-card .btn{ width:100%; justify-content:center; padding:8px; }
.login-card .mock-hint{ margin-top:14px; font-size:11px; color:var(--text-faint); border-top:1px solid var(--border); padding-top:10px; }
.login-card .mock-hint button{ font-size:11px; }

/* ---------------- Settings ---------------- */
.settings-wrap{ flex:1; overflow:auto; padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.settings-wrap .widget{ min-width:0; }
.settings-wrap .widget-body{ padding:12px; }
.settings-wrap .widget-body table.mini{ margin-bottom:10px; }
.settings-wrap table.mini td{ vertical-align:middle; }
.settings-wrap .widget-head{ display:flex; align-items:center; }
.settings-wrap .widget-head .btn{ margin-left:auto; text-transform:none; letter-spacing:0; }
.key-reveal{ background:#f6f7f9; border:1px solid var(--border); padding:10px; border-radius:3px; margin:8px 0; }
.key-reveal code{ display:block; font-size:12px; word-break:break-all; background:#fff; border:1px solid var(--border); padding:6px 8px; border-radius:3px; margin:6px 0; }
.key-reveal .warn{ font-size:11px; color:var(--amber); font-weight:600; }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11.5px; }
.tag{ display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px; border-radius:3px; background:#eef1f4; color:var(--text-muted); }
.tag.admin{ background:#eef4fb; color:var(--blue); } .tag.write{ background:#eaf6ec; color:var(--green); } .tag.read{ background:#eef1f4; }
.tag.off{ background:#fdf1ef; color:var(--red); }
.settings-wrap .sub-form{ border-top:1px dashed var(--border); margin-top:10px; padding-top:10px; }
.kind-tabs{ display:flex; gap:4px; margin-bottom:10px; }
.kind-tabs button{ background:#fff; border:1px solid var(--border-strong); border-radius:3px; padding:4px 10px; font-size:11.5px; font-weight:600; cursor:pointer; color:var(--text-muted); }
.kind-tabs button.active{ color:#fff; border-color:transparent; }
.kind-tabs button.active.candidate{ background:var(--c-candidate); } .kind-tabs button.active.contact{ background:var(--c-contact); }
.kind-tabs button.active.job{ background:var(--c-job); } .kind-tabs button.active.company{ background:var(--c-company); }

/* ---------------- Dashboard extras ---------------- */
.dash-wrap{ overflow:auto; flex:1; }
.dash-wrap .note-plain .rec{ color:var(--link); font-weight:600; cursor:pointer; }
.dash-wrap .note-plain .rec:hover{ text-decoration:underline; }

/* ---------------- Not found ---------------- */
.page-center{ flex:1; display:flex; align-items:center; justify-content:center; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px){
  .detail-pane{ width:380px; }
  .module-search{ width:170px; }
  .gsearch input{ width:170px; }
  .settings-wrap{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .detail-pane{ width:340px; }
  .toolbar button.tb-opt{ display:none; }
}
.login-card .mock-hint .btn{ width:auto; display:inline; padding:0 2px; font-weight:600; }