/* ck-theme.css — Task G Wave 4: utility classes extracted from
   high-frequency inline style="..." occurrences in index.html.
   Goal: reduce index.html byte size without touching JS semantics
   or breaking CSS specificity for existing .class rules.

   Namespacing: every class uses the `u-` prefix to avoid any chance of
   colliding with the 633 existing classes in css/chriven.css and
   assets/ck-admin.css. Added 2026-04-18. */

/* ─── Display / visibility ─── */
.u-hide         { display:none; }
.u-block        { display:block; }
.u-inline       { display:inline; }

/* ─── Flex primitives ─── */
.u-flex         { display:flex; }
.u-flex-col     { display:flex; flex-direction:column; }
.u-flex-row-c   { display:flex; align-items:center; }
.u-flex-row-cg4 { display:flex; align-items:center; gap:4px; }
.u-flex-row-cg8 { display:flex; align-items:center; gap:8px; }
.u-flex-row-cg10{ display:flex; align-items:center; gap:10px; }
.u-flex-gap4    { display:flex; gap:4px; }
.u-flex-gap6    { display:flex; gap:6px; }
.u-flex-gap8    { display:flex; gap:8px; }
.u-flex-col-g4  { display:flex; flex-direction:column; gap:4px; }
.u-flex-col-g5  { display:flex; flex-direction:column; gap:5px; }
.u-flex-wrap    { display:flex; gap:6px; flex-wrap:wrap; }
.u-flex-between { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.u-flex-1       { flex:1; }

/* ─── Cursor / interaction ─── */
.u-pointer      { cursor:pointer; }
.u-pointer-nowrap { cursor:pointer; white-space:nowrap; }
.u-overflow-x   { overflow-x:auto; }

/* ─── Opacity ─── */
.u-op-50        { opacity:.5; }
.u-op-55        { opacity:.55; }

/* ─── Mono font scale ─── */
.u-mono-11-muted    { font-family:var(--mono); font-size:11px; color:var(--muted); }
.u-mono-11-muted-mt { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:4px; }
.u-mono-11-muted-mt2{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px; }
.u-mono-12-muted    { font-family:var(--mono); font-size:12px; color:var(--muted); }
.u-mono-11-up       { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }

/* ─── Plain font sizes ─── */
.u-fs-10        { font-size:10px; }
.u-fs-11-muted  { font-size:11px; color:var(--muted); }

/* ─── Brand colour shorthands (dark theme) ─── */
.u-c-green      { color:#00ff94; }
.u-c-cyan       { color:#00d9ff; }
.u-c-yellow     { color:#ffe033; }
.u-c-purple     { color:#a855f7; }
.u-c-ice        { color:#e8f4ff; }

/* ─── Border + colour combos for soft-status pills ─── */
.u-bd-green     { border-color:rgba(0,255,148,.4); color:#00ff94; }
.u-bd-cyan      { border-color:rgba(0,217,255,.4); color:#00d9ff; }
.u-bd-green-3   { border-color:rgba(0,255,148,.3); color:#00ff94; }
.u-bd-cyan-3    { border-color:rgba(0,217,255,.3); color:#00d9ff; }
.u-bd-yellow-3  { border-color:rgba(255,224,51,.3); color:#ffe033; }
.u-bd-orange-3  { border-color:rgba(255,107,43,.3); color:#ff6b2b; }
.u-bd-purple-3  { border-color:rgba(168,85,247,.3); color:#a855f7; }

/* ─── Additional colour shorthands ─── */
.u-c-orange     { color:#ff6b2b; }
.u-c-amber      { color:#ffc800; }
.u-c-steel      { color:#a0b4c8; }
.u-c-slate      { color:#4a8fa8; }
.u-c-muted      { color:var(--muted); }
.u-c-cyan-var   { color:var(--cyan); }

/* ─── More flex permutations ─── */
.u-flex-gap8-c  { display:flex; gap:8px; align-items:center; }
.u-flex-gap6-c  { display:flex; gap:6px; align-items:center; }
.u-flex-row-cg4-s { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.u-flex-row-cg8-w { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.u-flex-row-cg3-f { display:flex; align-items:center; gap:3px; flex:1; }
.u-flex-between-cg4 { display:flex; justify-content:space-between; align-items:center; gap:4px; }
.u-flex-between-fs8 { display:flex; justify-content:space-between; font-size:8px; color:var(--muted); }
.u-flex-1-minw  { flex:1; min-width:0; }

/* ─── Additional muted/mono text styles ─── */
.u-fs-11-muted-cm { color:var(--muted); font-size:11px; }
.u-fs-12-muted-cm { color:var(--muted); font-size:12px; }
.u-fs-10-text3  { font-size:10px; color:var(--text3); }
.u-mono-12-b-text { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text); }
.u-mono-12-b-ice  { font-family:var(--mono); font-size:12px; font-weight:700; color:#e8f4ff; }
.u-mono-13-b-ice  { font-family:var(--mono); font-size:13px; font-weight:800; color:#e8f4ff; }
.u-mono-12-btc    { font-family:var(--mono); font-size:12px; color:#f7931a; }
.u-mono-12-muted-self { font-family:var(--mono); font-size:12px; color:var(--muted); align-self:center; }
.u-mono-11-muted-ls { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:1.5px; margin-bottom:8px; }
.u-mono-11-muted-blk{ font-family:var(--mono); font-size:11px; color:var(--muted); display:block; margin-bottom:5px; }
.u-mono-8-muted-mb  { font-family:var(--mono); font-size:8px; color:var(--muted); margin-bottom:3px; }

/* ─── Hidden content that keeps margin for reveal ─── */
.u-hide-mb16    { display:none; margin-bottom:16px; }

/* ─── Table cell styles (admin + stock-detail tables) ─── */
.u-th-r {
  padding:8px 12px;
  font-family:var(--mono); font-size:11px;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--border); text-align:right;
}
.u-th-r-7 {
  padding:7px 10px;
  font-family:var(--mono); font-size:11px;
  text-transform:uppercase; color:var(--muted);
  text-align:right; border-bottom:1px solid var(--border);
}
.u-td-sub { padding:8px 12px; color:#9ab8d0; }
.u-td-cell { padding:8px 12px; }
.u-td-cell-green { padding:8px 12px; text-align:center; color:#00ff94; }

/* ─── Radar/Risk action pills (red small) ─── */
.u-pill-red-sm {
  font-family:var(--mono); font-size:11px;
  padding:4px 8px; border-radius:5px;
  border:1px solid rgba(255,51,85,.25);
  background:none; color:rgba(255,51,85,.5);
  cursor:pointer;
}

/* ─── Outer page container ─── */
.u-page-1800 { max-width:1800px; margin:0 auto; }
.u-page-1700 { max-width:1700px; margin:0 auto; }

/* ─── Small status dot (idle) ─── */
.u-dot-idle {
  width:9px; height:9px; border-radius:50%;
  background:#3a5a7a; flex-shrink:0;
}

/* ─── Soft border + status pill variants ─── */
.u-bd-purple-4 { border-color:rgba(168,85,247,.4); color:#a855f7; }
.u-bd-red-3-dim { border-color:rgba(255,51,85,.3); color:#ff3355; opacity:.6; }

/* ─── Micro-mono labels (fs8, fs7) ─── */
.u-mono-8-muted-mt  { font-family:var(--mono); font-size:8px; color:var(--muted); margin-top:2px; }
.u-mono-8-muted-mt1 { font-family:var(--mono); font-size:8px; color:var(--muted); margin-top:1px; }
.u-mono-7-dim       { font-family:var(--mono); font-size:7px; color:#7a9ab8; }

/* ─── Flex layouts (more variants) ─── */
.u-flex-gap8-wrap    { display:flex; gap:8px; flex-wrap:wrap; }
.u-flex-gap10-mt     { display:flex; gap:10px; margin-top:10px; }
.u-flex-between-mb12 { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.u-inline-flex-g3    { display:inline-flex; align-items:center; gap:3px; }
.u-flex-row-cg6      { display:flex; align-items:center; gap:6px; }

/* ─── Margin helpers (plain) ─── */
.u-mt-8      { margin-top:8px; }
.u-mb-10     { margin-bottom:10px; }
.u-mb-12     { margin-bottom:12px; }
.u-mb-14     { margin-bottom:14px; }
.u-mt-8-fs11 { margin-top:8px; font-size:11px; color:#2d4460; }

/* ─── Small labels for bar charts / score widgets ─── */
.u-label-fs11-blk { font-size:11px; color:var(--text2); margin-bottom:4px; display:block; }
.u-label-fs8-blk  { font-size:8px; color:var(--muted); display:block; margin-bottom:4px; letter-spacing:.5px; }
.u-label-fs9-ls   { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:1px; }

/* ─── Help-tooltip dot (tiny ? circle) ─── */
.u-help-dot {
  font-family:var(--mono); font-size:8px; color:#3a5070;
  cursor:help; border:1px solid #2a3f55; border-radius:50%;
  width:14px; height:14px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}