/* cad_compact.css — the Compact console style: the Legacy board, drawn the
   way classic desktop CAD/RMS clients look. Grey window chrome, navy title
   bars, white gridded tables, small type, and as many rows on screen as
   will fit. Scoped to body.skin-compact; it changes no markup. */

body.skin-compact {
  --bg:        #ffffff;
  --bg1:       #ece9e2;
  --bg2:       #dcd8cf;
  --bg3:       #cfcac0;
  --border:    #a9a59b;
  --borderhi:  #8c887f;
  --accent:    #0a3d8f;
  --accentdim: #c9d8f2;
  --accentglow:rgba(10,61,143,.35);
  --green:     #0b7a2a;
  --greendim:  #d5f0dc;
  --yellow:    #9a6200;
  --yellowdim: #fbecc8;
  --red:       #b3121f;
  --reddim:    #f8d6d8;
  --text:      #111111;
  --text2:     #44474d;
  --text3:     #6b6e74;
  --mono:      Consolas, 'Lucida Console', 'Share Tech Mono', monospace;
  --cond:      Tahoma, Verdana, 'Segoe UI', sans-serif;
  --body:      Tahoma, Verdana, 'Segoe UI', sans-serif;
  --r:         0px;
  background: var(--bg1);
  color: var(--text);
  font-size: 11px;
}

/* ── Top bar: a slim window menu strip ──────────────────────────── */
body.skin-compact .topbar { height: 30px; background: linear-gradient(#f7f6f2, #dedad1); border-bottom: 1px solid var(--borderhi); }
body.skin-compact .topbar-brand { padding: 0 8px; gap: 6px; border-right-color: var(--border); }
body.skin-compact .brand-shield { width: 18px; height: 18px; }
body.skin-compact .brand-title { font-size: 11px; letter-spacing: .5px; font-weight: 700; }
body.skin-compact .brand-sub { display: none; }
body.skin-compact .nav-btn {
  flex-direction: row; gap: 4px; min-width: 0; padding: 0 9px;
  font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text);
  border-right-color: var(--border);
}
body.skin-compact .nav-btn:hover, body.skin-compact .nav-btn.active { background: var(--accentdim); color: var(--accent); }
body.skin-compact .nav-btn > *:first-child { font-size: 12px; }
body.skin-compact .topbar-status { font-size: 10px; }

/* ── Tool bar ───────────────────────────────────────────────────── */
body.skin-compact .cad-bar { min-height: 0; padding: 2px 6px; gap: 6px; background: var(--bg1); border-bottom-color: var(--border); }
body.skin-compact .cad-quick-btn, body.skin-compact .cad-bar-btn, body.skin-compact .cad-quick-edit {
  font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: 0;
  padding: 1px 7px; color: var(--text);
  background: linear-gradient(#fdfdfc, #e3e0d8); border: 1px solid var(--borderhi); border-radius: 2px;
}
body.skin-compact .cad-quick-btn { border-left-width: 3px; }
body.skin-compact .cad-quick-btn:hover, body.skin-compact .cad-bar-btn:hover { background: var(--accentdim); border-color: var(--accent); }
body.skin-compact .cad-bar-btn.on { color: var(--yellow); background: var(--yellowdim); }

/* ── Panels: navy title bar, white grid ─────────────────────────── */
body.skin-compact .workspace { gap: 3px; padding: 3px; background: var(--bg1); }
body.skin-compact .quad { background: var(--bg); border: 1px solid var(--borderhi) !important; }
body.skin-compact .qhead {
  min-height: 0; height: 22px; padding: 0 6px; gap: 6px;
  background: linear-gradient(#1c4fa3, #0a3d8f); border-bottom: 1px solid #072a63;
}
body.skin-compact .qhead-title { color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: none; }
body.skin-compact .qhead-count { background: rgba(255,255,255,.18); color: #fff; border: 0; font-size: 9px; padding: 0 5px; }
body.skin-compact .qhead-actions button, body.skin-compact .qhead-actions .btn-ghost {
  font-family: var(--body); font-size: 10px; letter-spacing: 0; padding: 0 6px; height: 16px; line-height: 14px;
  background: #e8ecf5; color: #0a3d8f; border: 1px solid #072a63; border-radius: 2px; text-transform: none;
}
body.skin-compact .qhead-search { height: 16px; background: #fff; border: 1px solid #072a63; border-radius: 0; padding: 0 4px; }
body.skin-compact .qhead-search input { font-size: 10px; color: var(--text); }

body.skin-compact .cad-table { font-family: var(--body); font-size: 11px; }
body.skin-compact .cad-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 2px 5px; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--text); background: linear-gradient(#f6f5f1, #dcd8cf);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--borderhi);
}
body.skin-compact .cad-table th.sorted { color: var(--accent); }
body.skin-compact .cad-table td {
  padding: 1px 5px; height: 18px; line-height: 16px; color: var(--text);
  border-right: 1px solid #e3e1dc; border-bottom: 1px solid #e3e1dc;
  font-family: var(--body); font-size: 11px;
}
body.skin-compact .cad-table tr:nth-child(even) td { background: #f5f7fb; }
body.skin-compact .cad-table tr:hover td { background: #e6eefc; }
body.skin-compact .cad-table tr.sel-row td, body.skin-compact .cad-table tr.sel-row:hover td { background: #0a3d8f; color: #fff; }
body.skin-compact .cad-table tr.sel-row td * { color: #fff !important; }
body.skin-compact .st-cell { font-family: var(--body); font-size: 10px; padding: 0 4px; border-radius: 0; letter-spacing: 0; }
body.skin-compact .empty { color: var(--text3); font-size: 11px; padding: 10px; }

/* ── Call drawer, dialogs, menus ────────────────────────────────── */
body.skin-compact .inc-detail.cad-drawer { background: var(--bg1); border-left: 2px solid var(--accent); box-shadow: -6px 0 18px rgba(0,0,0,.25); padding: 8px 10px; }
body.skin-compact .dtitle, body.skin-compact .inc-edit-label { font-family: var(--body); letter-spacing: 0; text-transform: none; color: var(--accent); font-weight: 700; }
body.skin-compact .inc-edit-input, body.skin-compact .finput, body.skin-compact .fsel, body.skin-compact .fta,
body.skin-compact .assign-search, body.skin-compact .cad-tl-add textarea {
  background: #fff; color: var(--text); border: 1px solid var(--borderhi); border-radius: 0; font-family: var(--body); font-size: 11px;
}
body.skin-compact .backdrop { background: rgba(0,0,0,.35); }
body.skin-compact .modal { border: 1px solid #072a63; border-radius: 0; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
body.skin-compact .mhead { padding: 4px 8px; background: linear-gradient(#1c4fa3, #0a3d8f); border-bottom: 0; }
body.skin-compact .mhead, body.skin-compact .mhead .mtitle, body.skin-compact .mhead .mclose { color: #fff; font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: 12px; }
body.skin-compact .cad-pop { background: #fff; border-color: var(--borderhi); border-radius: 0; box-shadow: 2px 3px 10px rgba(0,0,0,.3); padding: 2px; }
body.skin-compact .cad-pop-head { font-family: var(--body); letter-spacing: 0; text-transform: none; color: var(--accent); }
body.skin-compact .cad-menu-item { padding: 3px 8px; border-radius: 0; font-size: 11px; }
body.skin-compact .cad-menu-item:hover:not([disabled]), body.skin-compact .cad-menu-item:focus { background: #0a3d8f; color: #fff; }
body.skin-compact .toast { background: #fffbe6; color: var(--text); border-radius: 0; }

body.skin-compact ::-webkit-scrollbar { width: 14px; height: 14px; background: #ece9e2; }
body.skin-compact ::-webkit-scrollbar-thumb { background: #cfcac0; border: 1px solid #a9a59b; }

/* ── Dark ───────────────────────────────────────────────────────── */
/* The same compact shape at night: charcoal window, dark grid, the navy
   title bars kept. On by default; the ☾/☀ button beside the style
   switch flips it and is remembered (cad_realistic.js). */
body.skin-compact.compact-dark {
  --bg:        #1b1e23;
  --bg1:       #23272e;
  --bg2:       #2c313a;
  --bg3:       #353b45;
  --border:    #3a404a;
  --borderhi:  #4a515d;
  --accent:    #5b9bff;
  --accentdim: rgba(91,155,255,.16);
  --accentglow:rgba(91,155,255,.35);
  --green:     #3ddc72;
  --greendim:  rgba(61,220,114,.14);
  --yellow:    #ffb547;
  --yellowdim: rgba(255,181,71,.14);
  --red:       #ff5c66;
  --reddim:    rgba(255,92,102,.14);
  --text:      #e6e9ee;
  --text2:     #a3abb8;
  --text3:     #737c8a;
  color-scheme: dark;
}
body.skin-compact.compact-dark .topbar { background: linear-gradient(#2a2f37, #1f2329); }
body.skin-compact.compact-dark .cad-quick-btn, body.skin-compact.compact-dark .cad-bar-btn, body.skin-compact.compact-dark .cad-quick-edit {
  background: linear-gradient(#323843, #272c34); color: var(--text);
}
body.skin-compact.compact-dark .qhead { background: linear-gradient(#173a7a, #0f2c60); border-bottom-color: #0a1f45; }
body.skin-compact.compact-dark .qhead-actions button, body.skin-compact.compact-dark .qhead-actions .btn-ghost {
  background: #233d6e; color: #dce8ff; border-color: #0a1f45;
}
body.skin-compact.compact-dark .qhead-search { background: var(--bg); border-color: #0a1f45; }
body.skin-compact.compact-dark .cad-table th { background: linear-gradient(#2e333c, #262a31); }
body.skin-compact.compact-dark .cad-table td { border-right-color: #2b3038; border-bottom-color: #2b3038; }
body.skin-compact.compact-dark .cad-table tr:nth-child(even) td { background: #20242a; }
body.skin-compact.compact-dark .cad-table tr:hover td { background: #26344d; }
body.skin-compact.compact-dark .cad-table tr.sel-row td, body.skin-compact.compact-dark .cad-table tr.sel-row:hover td { background: #1d4fa8; color: #fff; }
body.skin-compact.compact-dark .inc-edit-input, body.skin-compact.compact-dark .finput, body.skin-compact.compact-dark .fsel,
body.skin-compact.compact-dark .fta, body.skin-compact.compact-dark .assign-search, body.skin-compact.compact-dark .cad-tl-add textarea,
body.skin-compact.compact-dark .cad-pop-search { background: var(--bg); color: var(--text); }
body.skin-compact.compact-dark .modal { border-color: #0a1f45; }
body.skin-compact.compact-dark .mhead { background: linear-gradient(#173a7a, #0f2c60); }
body.skin-compact.compact-dark .cad-pop { background: var(--bg1); }
body.skin-compact.compact-dark .cad-menu-item:hover:not([disabled]), body.skin-compact.compact-dark .cad-menu-item:focus { background: #1d4fa8; }
body.skin-compact.compact-dark .toast { background: var(--bg2); color: var(--text); }
body.skin-compact.compact-dark ::-webkit-scrollbar { background: var(--bg1); }
body.skin-compact.compact-dark ::-webkit-scrollbar-thumb { background: #3a404a; border-color: #4a515d; }

/* The light/dark button only means something in Compact. */
.rl-theme-btn { display: none; }
body.skin-compact .rl-theme-btn { display: inline-block; }