/* =====================================================================
   timesheet-review — project override layer
   ---------------------------------------------------------------------
   Tokens, reset, and the generic component vocabulary now come from frykt
   (vendor/frykt/tokens/build/tokens.css + components/css/components.css,
   linked ahead of this file in _base.html). What remains here is
   timesheet-specific: the match ecosystem, inline-cell-edit, summary/KPI
   cards, combobox, drift, and the login shell — plus a small set of
   status-token aliases so this project CSS keeps reading --green/--amber/
   --red while frykt declares the values as --success-fg/--warning-fg/etc.

   The match ecosystem (pill, picker, filter icons) and inline-cell-edit
   stay project-side until frykt absorbs them in Phase 6.
   ===================================================================== */

/* =====================================================================
   Z-INDEX SCALE
   ---------------------------------------------------------------------
   One layered system shared by app.css, page-level inline <style>
   blocks, and the iframe report. Pick the lowest layer that solves the
   problem; don't invent new values mid-tree. frykt's components.css
   inlines the same layers (topnav 50, popovers/dropdowns 100, modal 200,
   toast 1000); keep project popovers/modals on these rungs.
       1     sticky table headers — must cover scrolling rows beneath
             them but sit below every popover.
       20    in-stack rescue — temporarily lift an element above
             surrounding sticky chrome (e.g. .tooltip:hover so a row's
             tooltiptext escapes the sticky thead).
       50    sticky page chrome (topnav, sticky toolbars). Above sticky
             table headers, below popovers.
       100   button/cell-anchored popovers — column-filter dropdowns,
             combo menus, inline-edit popovers, header dropdowns
             (uploads/history), follow-mouse hover tooltips (pie chart).
       200   modal backdrop + modal content. Above all in-page popovers.
       1000  toast notifications. Above modals so they remain visible.
       10000 in-iframe modals (.txlog-overlay) — the report iframe is
             a separate stacking context; this is its local "above
             everything else inside the iframe."
   Anything above 1000 in the parent document is a smell — toasts already
   beat modals. Avoid 9999.
   ===================================================================== */

/* =====================================================================
   STATUS-TOKEN ALIASES
   ---------------------------------------------------------------------
   frykt declares status colors semantically (--success-fg, --warning-fg,
   --danger-fg, …). A few project-kept rules below still reference the
   legacy --green/--amber/--red names; alias them onto frykt's values so
   those rules render unchanged. Light values are byte-identical to the
   old hex, so this is a pure rename with zero visual shift. Scoped to
   [data-theme="light"] for forward-compat with a future dark theme.
   ===================================================================== */
[data-theme="light"] {
  --green:      var(--success-fg);
  --green-soft: var(--success-bg-soft);
  --amber:      var(--warning-fg);
  --amber-soft: var(--warning-bg-soft);
  --red:        var(--danger-fg);
  --red-soft:   var(--danger-bg-soft);
}

/* =====================================================================
   SUMMARY / KPI WIDGETS
   ---------------------------------------------------------------------
   Optional row of KPI cards rendered above the toolbar(s) when a page
   has top-level numbers worth surfacing. Currently only Timesheets uses
   these. Add .hidden to collapse.
   ===================================================================== */
.summary-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  padding: 4px 0;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.summary-toggle:hover { color: var(--text); }
.summary-toggle .toggle-icon { transition: transform 0.2s; display: inline-block; font-size: 10px; }
.summary-toggle .toggle-icon.collapsed { transform: rotate(-90deg); }
.summary {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  align-items: stretch;
}
.summary.hidden { display: none; }
.summary-cards-group { display: flex; gap: var(--space-3); flex: 1; }
.summary-card {
  background: var(--surface-alt);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--link);
  flex: 1;
}
.summary-card h3 {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-semibold);
}
.summary-card .value { font-size: 24px; font-weight: var(--fw-semibold); color: var(--text); }
.summary-card.flagged { border-left-color: var(--red); }
.summary-card.flagged .value { color: var(--red); }
.pie-chart-card {
  background: var(--surface-alt);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--link);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pie-chart-card h3 {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-bottom: 0;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-semibold);
}

/* --- Edit pencil (used in Match columns) ---------------------------- */
.btn-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-edit:hover { background: var(--hover); color: var(--text); border-color: var(--border); }
.btn-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Notes-icon button variant: same look as .btn-edit but auto-widens to
   accommodate a count badge next to the icon (".note-count"). */
.btn-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-size: 0.8125rem;
}
.btn-note:hover { background: var(--hover); color: var(--text); border-color: var(--border); }
.btn-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-note .note-count { font-weight: 500; line-height: 1; }

/* --- Match pill (link state — see partials/_macros.html match_pill) -- */
.match-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 10px;
  vertical-align: middle;
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1;
  border: 1px solid transparent;
  text-align: left;
  max-width: 100%;
}
.match-pill svg { flex: none; }
.match-pill-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
/* Canonical match-pill backgrounds. These hex values are the agreed
 * visual vocabulary across every page; do NOT swap them back to the
 * theme variables (--amber-soft, --red-soft, etc.) — those are reused
 * by status badges / sync pills / chips and a different saturation
 * level. Keep match-pill independent. */
.match-pill-hard     { background: #E8F0DE; color: #3B6D11; }
.match-pill-soft     { background: #FBF0DC; color: #7A4D0F; }
.match-pill-unlinked { background: #FCEBEB; color: #A32D2D; }
.match-pill-none     { background: var(--hover); color: var(--text); }

/* Clickable variant — opens the shared match picker on click. */
button.match-pill.is-clickable {
  cursor: pointer;
  transition: filter 0.12s, border-color 0.12s, box-shadow 0.12s;
}
button.match-pill.is-clickable:hover     { filter: brightness(0.96); border-color: currentColor; }
button.match-pill.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Inline confirm affordance inside a soft-match pill. Sits to the left
 * of the chain-link icon; clicking it confirms the match without
 * opening the modal. Uses role="button" (not a real <button>) because
 * the pill itself is already a <button> and nesting is invalid. */
.match-pill-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: -2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.match-pill-confirm:hover { background: rgba(255, 255, 255, 0.95); }
.match-pill-confirm:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Standalone colored icon (no pill background) used in the per-state
   filter buttons in the toolbar. */
.match-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.match-filter-icon-hard     { color: #3B6D11; }
.match-filter-icon-soft     { color: #7A4D0F; }
.match-filter-icon-unlinked { color: #A32D2D; }
.match-filter-icon-none     { color: var(--text-muted); }
.filter-link .match-filter-icon { pointer-events: none; }
.filter-link:has(.match-filter-icon) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Nested anchor inside the employee match pill. Keeps the pill's
   chromatic look intact but lets the ID text drill into the employee
   detail page without opening the picker. Click handler in the macro
   uses event.stopPropagation() to keep the outer button's onclick
   from firing. */
.match-pill .match-pill-drill { color: inherit; text-decoration: none; }
.match-pill .match-pill-drill:hover { text-decoration: underline; }

/* Match column: drop the leading dot on entity_status — the badge text
   alone carries the match state, and the row's other columns already
   convey severity. (.status itself comes from frykt.) */
.col-match .status::before { content: none; }

/* --- Match picker (shared modal) ------------------------------------
 * Layers on top of frykt's generic .modal-backdrop / .modal.
 * Device-meta strip rendered under the modal title when the pill targets
 * a known device. Make / model · class · serial-link. Match-method line
 * surfaces the auto-match origin plus who confirmed and when. */
.modal-device-meta {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.modal-device-meta a { color: inherit; text-decoration: underline; }
.modal-device-meta a:hover { color: var(--text); }
.modal-match-method {
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--text);
}

.picker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.picker-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover { background: var(--surface-alt); }
.picker-item-main { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.picker-item-inactive { color: var(--text-muted); }
.picker-empty { cursor: default; color: var(--text-subtle); }
.picker-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

/* Source-column dot variants (base .dot comes from frykt). */
.dot-foundation { background: var(--link); }       /* blue */
.dot-local { background: var(--amber); }            /* amber */

/* --- Drift indicator (color + weight, no icon) --------------------- */
.drift {
  display: block;
  font-size: var(--fs-micro);
  color: var(--amber);
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}

/* --- Inline cell editor (Inventory Status / Location popover) ----
 * Anchored to its <td>; the trigger lives inside the cell, the
 * dropdown opens below. Used by app/static/js/inline-cell-edit.js. */
.inline-edit-cell {
  position: relative;
  cursor: pointer;
}
.inline-edit-cell:hover .inline-edit-trigger {
  opacity: 1;
}
.inline-edit-trigger {
  opacity: 0.45;
  margin-left: var(--space-2);
  font-size: 10px;
  color: var(--text-muted);
}
.inline-edit-popover {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 200px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 50;
  padding: var(--space-2);
}
.inline-edit-popover.show { display: block; }
.inline-edit-popover button,
.inline-edit-popover .inline-edit-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: var(--fs-small);
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.inline-edit-popover button:hover,
.inline-edit-popover .inline-edit-option:hover {
  background: var(--hover);
}
.inline-edit-popover input[type="text"] {
  width: 100%;
  padding: 4px 6px;
  font-size: var(--fs-small);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.inline-edit-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-2) 0;
}

/* --- Combobox / week selector ------------------------------------- */
.combo {
  position: relative;
  display: inline-block;
}
.combo-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  font-size: var(--fs-body);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.combo-button:hover { background: var(--hover); }
.combo-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 50;
  display: none;
}
.combo-menu.show { display: block; }
.combo-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-body);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.combo-item:hover { background: var(--hover); }
.combo-item.selected { font-weight: var(--fw-semibold); }

/* --- Login-specific (centered single-card auth) -------------------- */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-5);
  background: var(--surface-alt);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.auth-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}
.auth-subtitle {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

/* ===== ASSET ACTION POPOVER (Phase 10.B) =====
   Hover popover on the Inventory "Action Required" column: lists open
   action items with inline complete checkboxes. Positioned with `fixed`
   from JS (asset-actions.js), so coordinates are viewport-relative. */
.action-popover {
  display: none;
  position: fixed;
  min-width: 220px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
  padding: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text);
}
.action-pop-title { font-weight: var(--fw-semibold, 600); margin-bottom: var(--space-1); }
.action-pop-row { display: flex; gap: var(--space-2); align-items: flex-start; padding: 3px 2px; cursor: pointer; }
.action-pop-row:hover { background: var(--hover); }
.action-pop-row input[type="checkbox"] { margin: 2px 0 0; cursor: pointer; }
.action-pop-empty, .action-pop-loading { color: var(--text-muted); padding: 2px; }
.action-cell .chip { cursor: default; }

/* Issues popover groups (drift / reconciliation / actions). Read-only drift
   & reconciliation rows have no checkbox; action rows do. */
.issue-pop-title { font-weight: var(--fw-semibold, 600); margin: var(--space-2) 0 2px; font-size: var(--fs-small); color: var(--text-muted); }
.issue-pop-title:first-child { margin-top: 0; }
.issue-pop-row { display: flex; gap: var(--space-2); align-items: flex-start; padding: 3px 2px; }
.issue-pop-row.action-pop-row { cursor: pointer; }
.issue-pop-row.action-pop-row:hover { background: var(--hover); }
.issue-readonly { color: var(--text); text-decoration: none; display: block; }
a.issue-readonly:hover { text-decoration: underline; }
.issue-critical { color: var(--red); }
.issue-pop-row input[type="checkbox"] { margin: 2px 0 0; cursor: pointer; }

/* Stacked filter-groups inside a detail-2col column must not inherit frykt's
   horizontal `.filter-group + .filter-group { margin-left }` rule (meant for
   filter bars). Without this reset every item after the first is indented,
   implying a false parent/child hierarchy (e.g. HH2 under Microsoft Entra,
   Phone under Computer). Used by the Eligibility section in employee_detail.html. */
.detail-2col > .detail-col > .filter-group + .filter-group { margin-left: 0; }