/* ============================================================
   Credenxia Manager — styles layered on the shared design system
   ============================================================ */

/* boot wordmark already styled by app.css; ensure brand subtitle on rail */
.rail .brand small, .topbar .brand span { color: var(--teal-400); }

/* page header */
.mgr-head { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin:6px 0 18px; }
.mgr-head .hi { flex:1; min-width:240px; }
.mgr-head h1 { font-size:28px; margin:10px 0 4px; }
.mgr-head .sub { color:var(--fg-muted); font-size:15px; }
.mgr-head .sub b { color:var(--fg-strong); }
.mgr-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ---- triage tiles ---- */
.tiles { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:6px 0 22px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px;
  box-shadow:var(--sh-1); cursor:pointer; transition:transform var(--t-fast),box-shadow var(--t-fast); position:relative; overflow:hidden; }
.tile:hover { transform:translateY(-2px); box-shadow:var(--sh-2); }
.tile .n { font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--fg-strong); line-height:1; }
.tile .l { font-size:12.5px; color:var(--fg-muted); margin-top:6px; font-weight:500; }
.tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--slate-300); }
.tile.ok::before { background:var(--green); }
.tile.action::before { background:var(--teal-500); }
.tile.warn::before { background:var(--amber); }
.tile.pending::before { background:var(--blue); }
.tile.pay::before { background:var(--slate-500); }
.tile.action .n { color:var(--teal-700); }
.tile.warn .n { color:#9a5a13; }

/* ---- action / triage list ---- */
.section-label { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle); margin:20px 0 10px; }
.action-row { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); margin:9px 0; transition:transform var(--t-fast),box-shadow var(--t-fast); cursor:pointer; }
.action-row:hover { transform:translateY(-2px); box-shadow:var(--sh-2); }
.action-row .glyph { width:42px; height:42px; flex:0 0 auto; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:19px; background:var(--slate-50); }
.action-row.action .glyph { background:var(--teal-100); }
.action-row.warn .glyph { background:var(--amber-bg); }
.action-row.pending .glyph { background:var(--blue-bg); }
.action-row .txt { flex:1; min-width:0; }
.action-row .txt h4 { font-size:14.5px; font-weight:600; color:var(--fg-strong); }
.action-row .txt .l2 { font-size:12.5px; color:var(--fg-muted); margin-top:2px; }
.action-row .who { display:flex; align-items:center; gap:8px; }

/* avatar */
.av-sm { width:34px; height:34px; border-radius:var(--r-full); flex:0 0 auto; background:linear-gradient(135deg,var(--teal-400),var(--teal-700));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }

/* ---- toolbar / search ---- */
.toolbar { display:flex; align-items:center; gap:10px; margin:4px 0 14px; flex-wrap:wrap; }
.search { flex:1; min-width:200px; display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-full); padding:9px 14px; }
.search input { border:none; outline:none; flex:1; font-family:inherit; font-size:14px; color:var(--fg-strong); background:transparent; }
.seg { display:flex; gap:4px; background:var(--slate-100); border-radius:var(--r-full); padding:3px; }
.seg button { border:none; background:transparent; padding:7px 14px; border-radius:var(--r-full); font-size:13px; font-weight:600; color:var(--fg-muted); }
.seg button.on { background:var(--surface); color:var(--teal-700); box-shadow:var(--sh-1); }

/* ---- roster ---- */
.roster { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.person-row { display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; transition:background var(--t-fast); }
.person-row + .person-row { border-top:1px solid var(--line); }
.person-row:hover { background:var(--slate-50); }
.person-row .info { flex:1; min-width:0; }
.person-row .info h4 { font-size:14.5px; font-weight:600; color:var(--fg-strong); }
.person-row .info .pos { font-size:12.5px; color:var(--fg-muted); }
.person-row .bar { width:96px; height:6px; border-radius:var(--r-full); background:var(--slate-200); overflow:hidden; flex:0 0 auto; }
.person-row .bar span { display:block; height:100%; background:var(--teal-500); border-radius:var(--r-full); }
.person-row .chev { color:var(--slate-300); font-weight:700; }

/* ---- person detail ---- */
.detail-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.detail-head .av-lg { width:56px; height:56px; border-radius:var(--r-full); background:linear-gradient(135deg,var(--teal-400),var(--teal-700));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; }
.detail-head h1 { font-size:24px; }
.detail-head .meta { color:var(--fg-muted); font-size:13.5px; }
.back-link { display:inline-flex; align-items:center; gap:6px; color:var(--fg-muted); font-size:13.5px; font-weight:500; margin-bottom:14px; background:none; border:none; cursor:pointer; }
.back-link:hover { color:var(--fg); }
.auto-note { display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:var(--r-md); background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-800); font-size:13px; margin:14px 0; }

/* compliance line (reuses .req card look) */
.cline { display:flex; align-items:center; gap:13px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-md); margin:9px 0; background:var(--surface); }
.cline .glyph { width:38px; height:38px; flex:0 0 auto; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--slate-50); }
.cline .txt { flex:1; min-width:0; }
.cline .txt h4 { font-size:14px; font-weight:600; color:var(--fg-strong); }
.cline .txt .l2 { font-size:12px; color:var(--fg-muted); margin-top:2px; }

/* auto-allocated pill */
.pill.teal { color:var(--teal-800); background:var(--teal-100); } .pill.teal .d { background:var(--teal-500); }

/* ---- requirement tree ---- */
.tree { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:8px 6px; }
.tnode { }
.trow { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-md); cursor:pointer; }
.trow:hover { background:var(--slate-50); }
.trow .tw { width:22px; text-align:center; color:var(--slate-400); font-size:11px; }
.trow .glyph { width:32px; height:32px; border-radius:var(--r-sm); background:var(--slate-50); display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto; }
.trow .nm { font-weight:600; font-size:14px; color:var(--fg-strong); }
.trow .nm small { display:block; font-weight:400; color:var(--fg-subtle); font-size:11.5px; }
.tchildren { margin-left:26px; border-left:2px solid var(--slate-100); padding-left:6px; }
.level-chip { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:var(--r-full); }
.level-chip.position { background:#eae6ff; color:#5b3fb5; }
.level-chip.group { background:var(--teal-50); color:var(--teal-700); }
.level-chip.credential { background:var(--slate-100); color:var(--fg-muted); }
.mand { font-size:10.5px; font-weight:700; color:#9a5a13; background:var(--amber-bg); padding:2px 8px; border-radius:var(--r-full); }

/* params panel (configure) */
.params { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.param { background:var(--slate-50); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; }
.param .k { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-subtle); font-weight:600; }
.param .v { font-size:14px; color:var(--fg-strong); font-weight:600; margin-top:3px; }

/* ---- billing ---- */
.bill { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.bill-row { display:flex; align-items:center; gap:14px; padding:15px 16px; }
.bill-row + .bill-row { border-top:1px solid var(--line); }
.bill-row .txt { flex:1; }
.bill-row .txt h4 { font-size:14.5px; font-weight:600; color:var(--fg-strong); }
.bill-row .txt .l2 { font-size:12.5px; color:var(--fg-muted); margin-top:2px; }
.bill-row .amt { font-weight:700; color:var(--fg-strong); font-variant-numeric:tabular-nums; }
.bill-row.paid { opacity:.55; }
.bill-total { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; margin-top:16px;
  background:linear-gradient(120deg,var(--teal-600),var(--teal-800)); color:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-brand); }
.bill-total .lab { font-size:14px; color:var(--teal-100); }
.bill-total .big { font-size:26px; font-weight:800; letter-spacing:-.02em; }

/* focused (invite / configure) reuses Ready's .focus-* from app.css */

/* ---- responsive ---- */
@media (max-width:820px) {
  .tiles { grid-template-columns:repeat(2,1fr); }
  .mgr-head h1 { font-size:23px; }
  .params { grid-template-columns:1fr; }
}