/* Internal Operations Console v1.0.0 layout overrides */

:root {
  --nav-bg: #0f172a;
  --nav-active: #1e293b;
  --nav-text: #94a3b8;
  --nav-hover: #e2e8f0;
  --accent: #2864dc;
  --accent-light: #eef3fb;
  --danger: #b42318;
  --danger-bg: #fff0f0;
  --success: #087f5b;
  --warning: #b45309;
  --radius: 14px;
}
/* --border intentionally not redefined here: the kit sets --border on its
   own :root (loaded after this file) and every remaining rule below that
   references var(--border) should track that single source of truth. */

* { box-sizing: border-box; }

/* Regression: kit's `.btn`/`.btn-primary`/etc. (components.css) declare
   `display: inline-flex` with normal author-origin specificity, which beats
   the browser's built-in `[hidden] { display: none }` UA-stylesheet rule
   (author styles always win over user-agent styles, regardless of selector
   specificity). Any button toggled via the `hidden` DOM property/attribute —
   e.g. a conditionally-shown "Retry" action — stayed visible. `!important`
   here is deliberate and safe: `hidden` must always mean hidden. */
[hidden] { display: none !important; }

/*
 * Everything below `.panel` used to also include a full pre-kit shell
 * (`.shell`/`.side`/`.top`/`.cards`/`.metric-row`/`#globalSearch` etc.).
 * That markup no longer exists in index.html — it now uses the kit's
 * `.app-shell`/`.sidebar`/`.topbar`/`.metric-grid`/`.card.metric` classes
 * instead — so that whole block was dead CSS. Worse, a few of its rules
 * shared a selector with a kit rule but set a property the kit rule never
 * touches (e.g. `.card { padding: 18px }`, `.nav-group { gap: 16px }`,
 * `.main { padding: 26px }`, `#globalSearch` as an ID beating the kit's
 * class selector), so instead of being harmlessly overridden they kept
 * silently leaking into the live, kit-styled pages — extra padding on
 * every card, oversized gaps between sidebar nav items, an inset topbar,
 * a wrongly-boxed search input. Removed rather than "overridden" so there
 * is exactly one source of truth for each of these, per the design-system
 * requirement that spacing/color come only from the shared tokens.
 */

#mobileNavToggle { display: none; }

/* kit's .nav-link was written for the mockup's <a class="nav-link">; this
   app's sidebar items are <button class="nav-link"> (they drive JS view
   switching, not real navigation), which inherit the browser's default
   button chrome — a visible border/background the mockup's anchor never
   had. Reset only the button-specific properties kit never touches, so
   nothing here duplicates/overrides kit's own color, padding, gap, etc.
   Regression: this used to also set `font: inherit`, which seems harmless
   but `button.nav-link` (element+class) is MORE specific than kit's own
   plain `.nav-link { font-size: 13px; font-weight: 550 }` — so it silently
   beat kit's rule regardless of stylesheet load order, and every sidebar
   button rendered at the browser's inherited body font-size instead of the
   mockup's 13px. design-system.css already has a global, correctly-scoped
   `button { font: inherit }` (element-only specificity) for the
   font-family reset; duplicating it here at higher specificity was both
   redundant and the actual bug. */
button.nav-link { border: 0; background: transparent; text-align: left; cursor: pointer; }

/* ops-console.js still renders a handful of dashboard/detail stat blocks
   (KDM Pipeline, Storage Usage, System Health, Workers queue, the asset
   detail "PKL assets / Verified hashes / MXF" summary) with the pre-kit
   `.metric-row > .metric > span + b` / `.cards > .card > span + b`
   pattern rather than the kit's own `.stat-line`/`.metric-grid` markup.
   Scoped to `.metric-row`/`.cards` specifically so it can't also match —
   and silently reflow — the kit's unrelated `.metric-top`/`.metric-foot`
   spans inside `<article class="card metric">` on the main dashboard grid. */
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; }
.metric-row .metric { text-align: left; }
.metric-row .metric span { display: block; font-size: 12px; color: var(--ink-500); margin-bottom: 4px; }
.metric-row .metric b { font-size: 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 22px; }
.cards .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: 0 3px 14px rgba(20, 30, 55, 0.04); }
.cards .card span { display: block; font-size: 12px; color: var(--ink-500); margin-bottom: 4px; }
.cards .card b { font-size: 20px; }

.panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 3px 14px rgba(20, 30, 55, 0.04);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 15px;
}

.panel h2 { margin: 0; font-size: 17px; }

/* .metric-row / bare .metric (span/b children) were the pre-kit metric
   pattern; current markup uses `.metric-grid` > `<article class="card
   metric">`, fully styled by the kit. `.progress`'s only unique property
   here was `margin: 10px 0`, which the kit's `.progress` never sets and so
   quietly added stray vertical margin around every progress bar (dashboard
   storage/health stat-lines). `.notice` is fully defined by the kit
   (components.css) plus an intentional inline <style> patch in index.html
   for the .error/.warning/.success/.loading/[hidden] states — this copy
   only ever contributed a duplicate, slightly different palette. */

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge.ok,
.badge.ready,
.badge.valid,
.badge.completed,
.badge.success,
.badge.succeeded,
.badge.generated,
.badge.active { background: #e6fcf5; color: var(--success); }
.badge.degraded,
.badge.warning,
.badge.pending,
.badge.paused,
.badge.partially_failed,
.badge.attention { background: #fff9db; color: var(--warning); }
.badge.fail,
.badge.failed,
.badge.invalid,
.badge.error,
.badge.expired,
.badge.revoked,
.badge.cancelled { background: #fff0f0; color: var(--danger); }
.badge.running,
.badge.queued,
.badge.scheduled,
.badge.draft { background: #eef3fb; color: var(--accent); }
.badge.unknown,
.badge.imported,
.badge.missing,
.badge.none,
.badge.low,
.badge.medium,
.badge.high,
.badge.info,
.badge.acknowledged,
.badge.resolved { background: #f1f5f9; color: #475569; }
.badge.critical,
.badge.major { background: #fff0f0; color: var(--danger); }
.badge.minor { background: #fff9db; color: var(--warning); }
.badge.unresolved { background: #fff0f0; color: var(--danger); }

.view { display: none; }
.view.active { display: block; }

/* Consistent data tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { background: #f8fafc; color: #475569; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
tr:hover td { background: #f8fafc; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }

.muted { color: #68748a; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
/* .empty is fully owned by the kit (.empty/.empty-icon/.list-title/.list-meta,
   rendered via DcpComponents.emptyState()); this file previously also set a
   background/color/padding on the same selector, and since the kit's own
   `.empty` rule never declares a background, that boxed gray background
   quietly won in both themes instead of the kit's borderless icon+text
   empty state. */
.loading-block { display: flex; align-items: center; gap: 10px; color: #68748a; padding: 18px 0; }
.spinner {
  width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Filter toolbar */
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: #f8fafc; padding: 12px 14px; border-radius: var(--radius); margin-bottom: 14px;
  border: 1px solid var(--border);
}
.filters label { display: block; font-size: 11px; font-weight: 700; color: #475569; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.filters input, .filters select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; min-width: 120px; }

/* Pagination */
.job-pagination, .pagination {
  display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px;
}
.job-pagination button, .pagination button {
  min-width: 32px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: white; font-weight: 650; cursor: pointer;
}
.job-pagination button:disabled, .pagination button:disabled { opacity: 0.5; cursor: default; }

/* Dialogs */
.modal { border: 0; padding: 24px; border-radius: var(--radius); min-width: 360px; max-width: 90vw; }
.wide-dialog .modal { min-width: 700px; max-width: 95vw; }
dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.actions button { padding: 8px 14px; border-radius: 8px; border: 0; font-weight: 650; cursor: pointer; }
.actions .primary, button.primary { background: var(--accent); color: white; }
.actions .secondary, button.secondary { background: #f1f5f9; color: #334155; border: 1px solid var(--border); }
.actions .danger, button.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid #fecdca; }

/* Destination preview */
.destination-preview { padding: 10px 12px; background: #f8fafc; border-radius: 8px; font-size: 13px; color: #475569; }
.destination-preview.error { background: #fff0f0; color: var(--danger); }
.destination-preview.loading { color: #68748a; }

.validation {
  padding: 10px 12px; border-radius: 8px; background: #fff0f0; color: var(--danger); margin-top: 12px;
}

/* Job progress */
.job-name-button {
  background: transparent; border: 0; padding: 0; color: var(--accent); font-weight: 700;
  cursor: pointer; text-align: left; font-size: inherit;
}
.job-name-button:hover { text-decoration: underline; }
.job-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: #68748a; margin-bottom: 4px; }
.job-publish-error { color: var(--danger); font-weight: 700; }
.job-control-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.job-detail-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 14px 0; }
.job-detail-stat { background: #f8fafc; border-radius: 10px; padding: 10px 12px; }
.job-detail-stat span { display: block; font-size: 11px; color: #68748a; margin-bottom: 4px; }
.job-detail-stat b { font-size: 18px; }
.job-detail-stat .ready-count { color: var(--success); }
.job-detail-stat .blocked-count { color: var(--danger); }
.blocking-reason { display: inline-block; background: #fff0f0; color: var(--danger); padding: 2px 8px; border-radius: 999px; font-size: 11px; margin-right: 6px; }

/* Family tree */
.family-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.family-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.family-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.family-card-head h3 { margin: 0; font-size: 16px; }
.package-node { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 8px 0; }
.package-node.ov { background: #f8fafc; border-left: 4px solid var(--accent); }
.package-node.vf { background: white; border-left: 4px solid var(--success); }
.package-node .node-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.package-node .node-title { font-weight: 700; font-size: 13px; }
.package-node .node-meta { font-size: 11px; color: #68748a; margin-top: 2px; }
.evidence { margin: 6px 0; padding-left: 18px; color: #475569; font-size: 12px; }
.family-counts { font-size: 11px; color: #68748a; margin-top: 4px; }
.family-ov-node { border-left: 3px solid var(--accent); padding: 10px 12px; margin: 8px 0; background: #f8fafc; border-radius: var(--radius); display: flex; justify-content: space-between; gap: 12px; }
.family-vf-node { border-left: 3px solid var(--success); padding: 10px 12px; margin: 8px 0; background: #fff; border-radius: var(--radius); }
.family-vf-head { display: flex; justify-content: space-between; gap: 12px; }
.family-detail-actions { margin-top: 14px; display: flex; gap: 8px; }

/* KDM / DKDM detail lists */
.kdm-detail dt { font-weight: 700; font-size: 12px; color: #475569; margin-top: 12px; }
.kdm-detail dd { margin: 0 0 12px 0; }

/* Cinema directory */
.cinema-directory-list { display: grid; gap: 10px; }
.cinema-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.cinema-card h3 { margin: 0 0 4px 0; font-size: 15px; }
.cinema-card .sub { font-size: 12px; color: #68748a; }
.cinema-detail-pane { border-left: 1px solid var(--border); padding-left: 20px; }

/* Cinema collections */
.collection-list { display: grid; gap: 10px; }
.collection-item { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.collection-item-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.collection-member { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tag-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: white; border: 1px solid var(--border); border-radius: var(--radius); }

/* Target selection for delivery jobs */
.target-selection-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: #f8fafc; margin: 12px 0; }
.target-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.target-filter-grid label, .target-group-grid label { display: block; font-size: 11px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.target-filter-grid input, .target-filter-grid select, .target-group-grid select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; width: 100%; }
.target-group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.target-select-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 13px; }
.target-cinema-table { margin-top: 10px; }
.target-preview { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: white; margin-top: 10px; }
.target-preview-actions { margin-top: 10px; }
.target-csv-row { display: flex; gap: 12px; align-items: flex-end; margin-top: 10px; }

.workflow-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 12px;
  color: #68748a;
}

.workflow-legend span { display: flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
  /* Mobile sidebar open/close is handled by the kit (body.nav-open .sidebar
     in kit/layout.css); #mobileNavToggle itself has no kit equivalent. */
  #mobileNavToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--nav-bg);
    color: white;
    border: 0;
    cursor: pointer;
  }
}