/* ─────────────────────────────────────────────────────────────
   Elysian Works Dashboard — Enhancements II
   Focus coverage · Density mode · Empty states

   Load AFTER enhancements.css so token overrides win on source order:

     <link rel="stylesheet" href="enhancements.css">
     <link rel="stylesheet" href="enhancements-2.css">   ← this file

   Pairs with enhancements-2.js (density toggle button + empty-state
   injection). The CSS is harmless on its own; the JS adds the control.
   ───────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════
   A. FOCUS — keyboard visibility everywhere, not just the toolbar
   enhancements.css already rings .btn / .fp / .pf-preset.
   This extends the same tokens to the surfaces a keyboard user
   actually lands on next: inputs, selects, side-nav, row actions.
   :focus-visible keeps mouse clicks clean — rings show only for
   keyboard / programmatic focus.
   ═══════════════════════════════════════════════════════════ */
.search-inp:focus-visible,
.lf input:focus-visible,
select:focus-visible,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--ring-cyan);
}

/* Side-nav items are clickable divs — give them a real focus state.
   Make them keyboard-reachable via enhancements-2.js (adds tabindex). */
.sn-item:focus-visible{
  outline:none;
  box-shadow:var(--ring-accent);
  color:var(--text-bright);
}
.sn-item:focus-visible svg{ color:var(--heat); }

/* In-row action controls (buttons / links inside table cells). */
tbody td button:focus-visible,
tbody td a:focus-visible,
.tbl-wrap [role="button"]:focus-visible{
  outline:none;
  box-shadow:var(--ring-accent);
}

/* Checkboxes — the queue/bulk selectors read as invisible when focused. */
input[type="checkbox"]:focus-visible{
  outline:none;
  box-shadow:var(--ring-cyan);
  border-radius:3px;
}


/* ═══════════════════════════════════════════════════════════
   B. DENSITY — comfortable (default) ⇄ compact
   Operators reading the jobs table all day can trade air for rows.
   td/th padding becomes token-driven; body.ew-compact swaps tokens.
   Only table cells change — card view, stats, and chrome are untouched.
   ═══════════════════════════════════════════════════════════ */
:root{
  --cell-py:12px;   /* matches enhancements.css td padding */
  --cell-px:16px;
}
body.ew-compact{
  --cell-py:6px;
  --cell-px:12px;
}

td{ padding:var(--cell-py) var(--cell-px); }
th{ padding:calc(var(--cell-py) - 1px) var(--cell-px); }

/* Tighten the hover heat-bar inset and line-height to match the
   shorter rows so the 2px marker still reads centered. */
body.ew-compact tbody tr::before{ top:3px; bottom:3px; }
body.ew-compact tbody td,
body.ew-compact thead th{ line-height:1.35; }

/* The injected toggle button — styled to sit beside the view toggle.
   Mirrors the existing 28×28 view-cards / view-table buttons. */
.ew-density-btn{
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:6px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.ew-density-btn:hover{
  color:var(--text-bright);
  border-color:var(--border-bright);
}
.ew-density-btn:focus-visible{
  outline:none;
  box-shadow:var(--ring-accent);
}
.ew-density-btn svg{
  width:15px; height:15px;
  stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
/* Active (compact engaged) picks up the accent like the pills do. */
body.ew-compact .ew-density-btn{
  color:var(--accent);
  border-color:var(--accent);
  background:oklch(0.40 0.13 205/.12);
}


/* ═══════════════════════════════════════════════════════════
   C. EMPTY STATES — say "nothing here yet", not "still loading"
   The shimmer in enhancements.css fires on ANY empty <tbody>, so a
   user with zero jobs sees a loading band forever. enhancements-2.js
   injects a real empty row once data has resolved; this styles it.
   Because the row exists, :empty no longer matches → shimmer stops.
   ═══════════════════════════════════════════════════════════ */
tbody .ew-empty-row td{
  padding:34px 16px;
  text-align:center;
  color:var(--text-soft, var(--text-dim));
  background:transparent;
}
.ew-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.ew-empty .ew-empty-ico{
  width:30px; height:30px;
  opacity:.55;
  stroke:currentColor; fill:none;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.ew-empty .ew-empty-title{
  font-size:13px;
  color:var(--text);
}
.ew-empty .ew-empty-hint{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--text-soft, var(--text-dim));
}

/* An injected empty row must never show the hover heat-bar. */
tbody tr.ew-empty-row::before{ display:none !important; }
tbody tr.ew-empty-row:hover{ background:transparent !important; }


/* ═══════════════════════════════════════════════════════════
   D. REDUCED MOTION — keep the new transitions honest too
   enhancements.css already zeroes animations globally; this just
   ensures the density button's color transition is included.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .ew-density-btn{ transition:none; }
}