/* ============================================================================
   CW3 Admin design-system kit — formal tokens + component base classes.
   Loads AFTER cw3-admin.css. Scoped to .cw3-admin (the admin shell wrapper).
   Colour/font tokens come from .cw3 (cw3.css); this file adds the
   spacing/radius/shadow tokens the visual spec formalised, then the kit.
============================================================================ */

/* Formalised layout tokens — augment the .cw3 token block. */
.cw3, .cw3-admin {
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 36px;
    --r-sm: 8px;  --r-md: 10px; --r-lg: 12px; --r-pill: 100px;
    --shadow-card: 0 1px 0 rgba(255,255,255,.04), 0 30px 80px -20px rgba(0,0,0,.6);
}

/* ── StatusBadge pills (accent text on accent@12%) ───────────────────── */
.cwk-badge {
    font-family: var(--cw3-mono);
    font-size: 8.5px; letter-spacing: .06em;
    border-radius: var(--r-pill); padding: 2px 8px;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.cwk-badge--mech    { color: var(--cw3-mech);    background: rgba(34,211,238,.12); }
.cwk-badge--plumb   { color: var(--cw3-plumb);   background: rgba(167,139,250,.12); }
.cwk-badge--struct  { color: var(--cw3-struct);  background: rgba(255,138,76,.12); }
.cwk-badge--elec    { color: var(--cw3-elec);    background: rgba(250,204,21,.12); }
.cwk-badge--success { color: var(--cw3-success); background: rgba(74,222,128,.12); }
.cwk-badge--clash   { color: var(--cw3-clash);   background: rgba(244,63,94,.12); }
.cwk-badge--muted   { color: var(--cw3-text-3);  background: rgba(168,174,183,.10); }
.cwk-badge .cwk-dot { width: 5px; height: 5px; border-radius: var(--r-pill); }

/* ── Page header ─────────────────────────────────────────────────────── */
.cwk-pageheader { display:flex; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.cwk-pageheader__grow { flex:1; min-width:0; }
.cwk-pageheader__title { margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--cw3-text); }
.cwk-pageheader__desc { margin:3px 0 0; font-size:11px; color:var(--cw3-text-3); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.cwk-btn { font-size:11px; font-weight:600; border-radius:var(--r-sm); padding:7px 12px; border:0; cursor:pointer;
           background:var(--cw3-text); color:#0b0c0f; }
.cwk-btn--ghost { background:transparent; color:var(--cw3-text-2); border:1px solid var(--cw3-line-2); }
.cwk-btn--cyan  { background:transparent; color:var(--cw3-mech); border:1px solid rgba(34,211,238,.4); }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.cwk-toolbar { display:flex; align-items:center; gap:var(--sp-2);
               background:var(--cw3-panel); border:1px solid var(--cw3-line);
               border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); }
.cwk-toolbar__search { flex:1; background:var(--cw3-bg); border:1px solid var(--cw3-line-2);
                       border-radius:var(--r-sm); padding:6px 10px; font-size:11px; color:var(--cw3-text); }

/* ── StatCard ────────────────────────────────────────────────────────── */
.cwk-stat { background:var(--cw3-panel-2); border:1px solid var(--cw3-line); border-radius:var(--r-md); padding:var(--sp-3); }
.cwk-stat__k { font-family:var(--cw3-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cw3-text-3); }
.cwk-stat__v { font-size:22px; font-weight:600; margin-top:5px; letter-spacing:-.01em; color:var(--cw3-text); }
.cwk-stat__d { font-size:9.5px; color:var(--cw3-text-3); margin-top:2px; }
.cwk-stat--soon { opacity:.55; }
.cwk-stat__soon { font-family:var(--cw3-mono); font-size:9px; letter-spacing:.1em; color:var(--cw3-text-3);
                  border:1px dashed var(--cw3-line-2); border-radius:var(--r-pill); padding:2px 8px; margin-top:6px; display:inline-block; }

/* ── Activity feed row ───────────────────────────────────────────────── */
.cwk-feed { display:flex; gap:var(--sp-3); padding:9px 13px; border-bottom:1px solid var(--cw3-line); font-size:11.5px; align-items:flex-start; }
.cwk-feed:last-child { border-bottom:0; }
.cwk-feed__ico { width:22px; height:22px; border-radius:7px; background:var(--cw3-panel-2); border:1px solid var(--cw3-line-2);
                 flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; }
.cwk-feed__txt { color:var(--cw3-text-2); flex:1; min-width:0; }
.cwk-feed__txt b { color:var(--cw3-text); font-weight:600; }
.cwk-feed__time { font-family:var(--cw3-mono); font-size:9px; color:var(--cw3-text-3); white-space:nowrap; }

/* ── States ──────────────────────────────────────────────────────────── */
.cwk-state { text-align:center; padding:var(--sp-6); color:var(--cw3-text-3); font-size:12px; }
.cwk-state--error { color:var(--cw3-clash); }
.cwk-state__ref { font-family:var(--cw3-mono); font-size:9px; color:var(--cw3-text-3); }
.cwk-skel { height:34px; border-bottom:1px solid var(--cw3-line);
            background:linear-gradient(90deg, var(--cw3-panel) 0%, var(--cw3-panel-2) 50%, var(--cw3-panel) 100%);
            background-size:200% 100%; animation:cwk-shimmer 1.2s infinite; }
@keyframes cwk-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── DetailDrawer (right-side) ───────────────────────────────────────── */
.cwk-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1400; display:flex; justify-content:flex-end; }
.cwk-drawer { width:380px; max-width:92vw; height:100%; background:var(--cw3-panel); border-left:1px solid var(--cw3-line-2);
              box-shadow:var(--shadow-card); display:flex; flex-direction:column; animation:cwk-slidein .16s ease-out; }
@keyframes cwk-slidein { from{transform:translateX(24px); opacity:.6} to{transform:translateX(0); opacity:1} }
.cwk-drawer__head { padding:11px 13px; border-bottom:1px solid var(--cw3-line); display:flex; align-items:center; gap:9px; }
.cwk-drawer__body { padding:11px 13px; overflow:auto; flex:1; }
.cwk-drawer__kv { display:flex; justify-content:space-between; padding:5px 0; font-size:10.5px; border-bottom:1px solid var(--cw3-line); }
.cwk-drawer__kv .k { color:var(--cw3-text-3); font-family:var(--cw3-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; }
.cwk-drawer__lbl { font-family:var(--cw3-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cw3-text-3); margin:12px 0 6px; }
.cwk-drawer__footer { padding:11px 13px; border-top:1px solid var(--cw3-line); display:flex; gap:var(--sp-2); }

/* ── Admin shell (sidebar + topbar) ──────────────────────────────────── */
.cwk-shell { display:flex; min-height:calc(100vh - 60px); background:var(--cw3-bg); }
.cwk-side { width:220px; flex:none; border-right:1px solid var(--cw3-line); background:var(--cw3-panel); padding:var(--sp-3) 0; overflow:auto; }
.cwk-side__grp { font-family:var(--cw3-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cw3-text-3); padding:10px 16px 4px; }
.cwk-side__link { display:block; font-size:12px; color:var(--cw3-text-2); padding:7px 16px; text-decoration:none; white-space:nowrap; }
.cwk-side__link:hover { color:var(--cw3-text); background:rgba(255,255,255,.02); }
.cwk-side__link.active { color:var(--cw3-text); border-left:2px solid var(--cw3-mech); background:linear-gradient(90deg, rgba(34,211,238,.10), transparent); }
.cwk-side__link--soon { opacity:.5; pointer-events:none; }
.cwk-topbar { display:flex; align-items:center; gap:var(--sp-2); padding:10px 16px; border-bottom:1px solid var(--cw3-line); background:var(--cw3-panel); }
.cwk-topbar__brand { font-family:var(--cw3-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--cw3-text-2); }
.cwk-topbar__brand b { color:var(--cw3-text); }
.cwk-topbar__env { margin-left:auto; font-family:var(--cw3-mono); font-size:9px; letter-spacing:.12em; color:var(--cw3-mech); border:1px solid var(--cw3-mech); border-radius:var(--r-pill); padding:2px 9px; }
.cwk-main { flex:1; min-width:0; padding:var(--sp-5) var(--sp-5); overflow:auto; }

/* ── AdminGrid (dense Telerik) — rides on cw3-admin.css grid overrides ─ */
.cwk-grid .k-grid-header .k-cell-inner > .k-link { font-family:var(--cw3-mono); font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--cw3-text-3); }
.cwk-grid .k-table-td { font-size:11.5px; padding:7px 13px; }
.cwk-grid .k-table-row.k-selected > .k-table-td { background:linear-gradient(90deg, rgba(34,211,238,.08), transparent); }

/* ── ActivityLog rows (audit/errors column table) ────────────────────── */
.cwk-actlog__row { display:flex; gap:12px; padding:8px 13px; border-bottom:1px solid var(--cw3-line); font-size:11.5px; color:var(--cw3-text-2); align-items:center; cursor:pointer; }
.cwk-actlog__row:hover { background:rgba(255,255,255,.02); }
.cwk-actlog__row:last-child { border-bottom:0; }
.cwk-actlog__head { display:flex; gap:12px; padding:8px 13px; border-bottom:1px solid var(--cw3-line); font-family:var(--cw3-mono); font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--cw3-text-3); }
.cwk-actlog .cwk-actlog__c-time { width:120px; flex:none; font-family:var(--cw3-mono); font-size:10px; color:var(--cw3-text-3); }
.cwk-actlog .cwk-actlog__c-actor { flex:1.4; min-width:0; color:var(--cw3-text); }
.cwk-actlog .cwk-actlog__c-action { flex:1.4; min-width:0; font-family:var(--cw3-mono); font-size:10px; }
.cwk-actlog .cwk-actlog__c-target { flex:1.4; min-width:0; }
.cwk-actlog .cwk-actlog__c-sev { width:90px; flex:none; }
.cwk-actlog .cwk-actlog__c-ref { width:90px; flex:none; font-family:var(--cw3-mono); font-size:9px; color:var(--cw3-text-3); }