/* ============================================================
   admin-companies.css — Company Analysis tab styling
   ------------------------------------------------------------
   Scoped under #companies-content. Consumes the admin theme tokens
   defined in custom-ia-scorecard-admin.hbs (:root for dark + the
   [data-theme="light"] block) — tab adapts to the admin shell's
   light/dark toggle in both directions.

   Visual fidelity to the dark mockup at
   docs/marketing/admin-dashboard-company-analysis-mockup.html
   (Worker repo) is preserved in DARK theme — the mockup file
   remains the dark-canonical reference; this CSS derives from
   tokens rather than hardcoding the mockup palette.

   History — Session 6.5 (design-fidelity restyle, 2026-05-31)
   originally pinned the tab to the dark Space palette by REDEFINING
   theme tokens on #companies-content (--bg: #162535; --bg-card:
   #1d3044; etc.). That choice shipped the dark-mockup fidelity but
   broke the admin light-theme toggle — operator saw a dark-on-dark
   tab when admin was set to light (production confirmed 2026-06-01
   post Tier 1-2 deploy). The pin block was retired on the hotfix
   that introduced this comment. Mockup file is unchanged; only the
   CSS consumption pattern flipped from "redefine tokens" to "consume
   tokens." Pre-flight orphan-token cross-reference verified 21/21
   consumed tokens fall through to admin shell with theme awareness
   intact — see commit message for the table.

   Mobile-first; admin shell's @max-768 block handles responsive
   widths for shared primitives.
   ============================================================ */

/* ============================================================
   SHARED — primitives + layout classes used across sub-views
   ============================================================ */

/* .card is NOT defined in admin-shared.css — add it (mockup spec) */
#companies-content .card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px;
}

/* mockup badge weight/tracking (admin-shared uses 600/0.2px) */
#companies-content .badge { font-weight: 500; letter-spacing: 0.3px; }

/* Sub-nav (Queue + Find Candidates) */
#companies-content .sub-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
#companies-content .sub-nav-btn {
  padding: 8px 16px; font-family: var(--font-header); font-weight: 400;
  font-size: 0.7rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); background: none; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
}
#companies-content .sub-nav-btn.active { color: var(--bg); background: var(--teal); border-color: var(--teal); }
#companies-content .sub-nav-btn:not(.active):hover { color: var(--teal); border-color: var(--teal); }

/* Section header — mobile-first (stack) → row at 769px */
#companies-content .section-header {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; margin-bottom: 20px;
}
@media (min-width: 769px) {
  #companies-content .section-header { flex-direction: row; align-items: center; justify-content: space-between; }
}
#companies-content .section-title {
  font-family: var(--font-header); font-weight: 300; font-size: 1.3rem;
  color: var(--white); letter-spacing: 0.5px;
}
#companies-content .section-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }

/* Company name cell (Queue table) */
#companies-content .cell-company { display: flex; flex-direction: column; gap: 2px; }
#companies-content .cell-company-name { color: var(--white); font-weight: 500; }
#companies-content .cell-company-ticker { font-size: 0.72rem; color: var(--text-muted); }

/* Row-click → Sub-view E (Article Review). Visual cue + hover state apply
   only to rows that have an article (article_drafting / published) — see
   admin-companies-queue.js renderRow(). Scoped to #companies-content so it
   does not bleed to other admin tabs' tables. */
#companies-content .data-table tbody tr.row-clickable { cursor: pointer; }
#companies-content .data-table tbody tr.row-clickable:hover {
  background: color-mix(in srgb, var(--teal) 8%, transparent);
}

/* Per-company header (Answers / Article) */
#companies-content .company-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 8px;
}
#companies-content .company-header-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#companies-content .company-header-name { font-family: var(--font-header); font-weight: 300; font-size: 1.6rem; color: var(--white); }
#companies-content .company-header-ticker { font-family: var(--font-header); font-size: 0.85rem; color: var(--text-muted); letter-spacing: 1px; }
#companies-content .company-header-meta { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 20px; }

/* Pipeline strip */
#companies-content .pipeline-strip {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 24px; overflow-x: auto;
}
#companies-content .pipeline-step {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: var(--radius); font-size: 0.72rem; font-family: var(--font-header);
  font-weight: 400; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
}
#companies-content .pipeline-step.done   { color: var(--green); }
#companies-content .pipeline-step.active  { color: var(--teal); background: var(--teal-bg); border: 1px solid var(--teal-dim); }
#companies-content .pipeline-step.pending { color: var(--text-muted); }
#companies-content .pipeline-arrow { color: var(--text-muted); flex-shrink: 0; }

/* Status dots */
#companies-content .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
#companies-content .dot.ok   { background: var(--green); box-shadow: 0 0 6px var(--green); }
#companies-content .dot.warn { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
#companies-content .dot.bad  { background: var(--red);   box-shadow: 0 0 6px var(--red);   }
#companies-content .dot.idle { background: var(--text-muted); }

/* Empty state */
#companies-content .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 0.9rem; }

/* Info block (Find Candidates banner + Answers agi-thin/failed-pillar warnings) */
#companies-content .info-block {
  background: var(--purple-bg); border-left: 3px solid var(--purple);
  padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 20px;
}
#companies-content .info-block-title {
  font-family: var(--font-header); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--purple); margin-bottom: 6px;
}
#companies-content .info-block-body { font-size: 0.85rem; color: var(--text); line-height: 1.5; }

/* Sticky action bar (Find Candidates / Answers / Article) — mobile-first stack
   → row at 769px. Negative margins bleed to .tab-content padding
   (mobile 16/36, desktop 32/48). */
#companies-content .sticky-actions {
  position: sticky; bottom: 0; z-index: 50;
  margin: 24px -16px -36px; padding: 14px 16px;
  /* Theme-aware glass: 95%-opaque version of --bg, theme-switching
     automatically. color-mix is broadly supported (Safari 16.4+,
     March 2023) — internal admin tool, fine.
     R1 HR1-1 fix (Copilot): progressive enhancement — declare the
     solid var(--bg) fallback FIRST so unsupported browsers honor it
     when the subsequent color-mix() line is dropped by the parser.
     Two-declaration cascade: older browsers see solid bg (readable);
     modern browsers see the glass effect. Reverting to color-mix-
     only restores the unsupported-browser transparency regression
     R1 closed. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 769px) {
  #companies-content .sticky-actions {
    margin: 24px -32px -48px; padding: 16px 32px;
    flex-direction: row; align-items: center; justify-content: space-between;
  }
}
#companies-content .sticky-actions-info { font-size: 0.82rem; color: var(--text-muted); }
#companies-content .sticky-actions-info strong { color: var(--white); }
#companies-content .sticky-actions-buttons { display: flex; gap: 10px; }

/* ============================================================
   SUB-VIEW 1 — QUEUE
   admin-shared maps table + controls to var(--bg) (#162535); the mockup
   uses the lighter space-light panel surface (#1d3044). Width handling is
   left to the admin shell's existing @max-768 responsive rules.
   ============================================================ */
#companies-content .table-wrapper { background: var(--bg-card); box-shadow: none; }
#companies-content .filter-select { background: var(--bg-card); }
#companies-content .search-input  { background: var(--bg-card); }

/* ============================================================
   SUB-VIEW 2 — FIND CANDIDATES
   ============================================================ */
/* Candidate rows — mobile-first stack → 4-col grid at 769px */
#companies-content .candidate-row {
  display: grid; grid-template-columns: 24px 1fr; gap: 4px 14px;
  padding: 16px 0; border-bottom: 1px solid var(--border-light); align-items: start;
}
#companies-content .candidate-row:last-child { border-bottom: none; }
#companies-content .candidate-row > .candidate-checkbox { grid-column: 1; grid-row: 1; }
#companies-content .candidate-row > div:nth-child(2)     { grid-column: 2; grid-row: 1; }
#companies-content .candidate-row > .candidate-sector    { grid-column: 2; grid-row: 2; }
#companies-content .candidate-row > div:last-child       { grid-column: 2; grid-row: 3; }
@media (min-width: 769px) {
  #companies-content .candidate-row { grid-template-columns: 32px 1fr 100px 140px; gap: 16px; }
  #companies-content .candidate-row > .candidate-checkbox { grid-column: 1; grid-row: 1; }
  #companies-content .candidate-row > div:nth-child(2)     { grid-column: 2; grid-row: 1; }
  #companies-content .candidate-row > .candidate-sector    { grid-column: 3; grid-row: 1; }
  #companies-content .candidate-row > div:last-child       { grid-column: 4; grid-row: 1; }
}
#companies-content .candidate-checkbox { width: 18px; height: 18px; accent-color: var(--teal); margin-top: 2px; }
#companies-content .candidate-name { color: var(--white); font-weight: 500; font-size: 0.95rem; }
#companies-content .candidate-ticker { color: var(--text-muted); font-size: 0.78rem; }
#companies-content .candidate-reasoning { color: var(--text); font-size: 0.85rem; line-height: 1.55; margin-top: 8px; }
#companies-content .candidate-sector { color: var(--text-muted); font-size: 0.78rem; padding-top: 2px; }
/* Gap-2: the single "Candidate" pill uses the standard dim .badge-teal
   (var(--teal-bg) fill + var(--teal) text via the pin) — no override needed.
   Future Opus `tier` field will add per-tier badges at the same dim weight. */

/* ============================================================
   SUB-VIEW 3 — ANSWERS REVIEW
   ============================================================ */
#companies-content .pillar-tab-bar {
  display: flex; gap: 4px; margin-bottom: 20px; padding: 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto;
}
@media (min-width: 769px) { #companies-content .pillar-tab-bar { width: fit-content; } }
#companies-content .pillar-tab {
  padding: 8px 18px; font-family: var(--font-header); font-weight: 400;
  font-size: 0.7rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); background: none; border: none; border-radius: 4px;
  cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0;
}
#companies-content .pillar-tab.active { color: var(--bg); background: var(--teal); }
#companies-content .pillar-tab .dot { width: 6px; height: 6px; }
#companies-content .pillar-tab.active .dot { background: var(--bg); box-shadow: none; }

#companies-content .pillar-section { margin-bottom: 24px; }
#companies-content .pillar-header {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 12px 18px; background: var(--bg-card);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
@media (min-width: 769px) {
  #companies-content .pillar-header { flex-direction: row; align-items: center; justify-content: space-between; }
}
#companies-content .pillar-header h3 {
  font-family: var(--font-header); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal);
}
#companies-content .pillar-count { font-size: 0.75rem; color: var(--text-muted); }
#companies-content .pillar-body {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}

#companies-content .answer-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px;
}
#companies-content .answer-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
#companies-content .answer-q { flex: 1; min-width: 200px; }
#companies-content .answer-q-num {
  font-family: var(--font-header); font-size: 0.68rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
#companies-content .answer-q-text { color: var(--white); font-size: 0.95rem; line-height: 1.4; font-weight: 500; }
#companies-content .answer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#companies-content .answer-score-display {
  font-family: var(--font-header); font-weight: 300; font-size: 1.8rem;
  color: var(--teal); line-height: 1;
}
#companies-content .answer-score-display small { font-size: 0.8rem; color: var(--text-muted); }
#companies-content .answer-body textarea {
  width: 100%; padding: 10px 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-body); font-size: 0.86rem;
  line-height: 1.55; outline: none; resize: vertical; min-height: 64px;
}
#companies-content .answer-body textarea:focus { border-color: var(--teal); color: var(--white); }
#companies-content .answer-sources { margin-top: 10px; }
#companies-content .answer-sources-label {
  font-family: var(--font-header); font-size: 0.62rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; font-weight: 600;
}
#companies-content .answer-actions {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--border-light);
}

/* ============================================================
   SUB-VIEW 4 — ARTICLE REVIEW
   The article body renders inside a sandboxed iframe (Session 6 R4-G3);
   the iframe keeps its own inline styling and sandbox/csp attributes —
   only the surrounding .article-preview pane + .meta-pill are styled here.
   ============================================================ */
#companies-content .article-sub-tabs {
  display: flex; margin-bottom: 16px;
  border-bottom: 1px solid var(--border); overflow-x: auto;
}
#companies-content .article-sub-tab {
  padding: 12px 20px; font-family: var(--font-header); font-weight: 400;
  font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: all var(--transition); white-space: nowrap; flex-shrink: 0;
}
#companies-content .article-sub-tab.active { color: var(--teal); border-bottom-color: var(--teal); }

#companies-content .article-pane { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 769px) { #companies-content .article-pane { grid-template-columns: 1fr 1fr; } }
#companies-content .article-fields { display: flex; flex-direction: column; gap: 14px; }
#companies-content .article-preview {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
#companies-content .meta-pill {
  align-self: flex-start; padding: 3px 10px;
  background: var(--purple-bg); color: var(--purple);
  border-radius: 100px; font-size: 0.7rem;
}
#companies-content .char-count { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; text-align: right; }

/* ─── Fix 4 (Session 8, audit 2026-05-31 L2-B1): inline stuck indicator
   Appended to the status badge in the Queue table when isStuck(c) is
   true. Uses Session 7 amber tokens (already scoped on #companies-
   content). Sized to match other badge primitives. ────────────────── */
#companies-content .badge-amber {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--amber-bg);
  color: var(--amber);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  margin-left: 6px;
  white-space: nowrap;
}

/* ─── Fix 8 (Session 8, audit 2026-05-31 L4-B3): missing-fields hint
   Surfaces next to the Publish button when isArticleComplete() is
   false. Amber palette matches "attention but not error" weight. ── */
#companies-content .article-incomplete-hint {
  display: inline-block;
  font-size: 12px;
  color: var(--amber);
  margin-right: 12px;
  align-self: center;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   Sub-view C — Sources Review (theme 6.6.0). Mockup-bound:
   docs/marketing/admin-dashboard-company-analysis-mockup.html lines 379-470.
   Scoped to #companies-content so styles don't bleed across admin tabs.
═══════════════════════════════════════════════════════════════════════ */

#companies-content .pillar-section { margin-bottom: 24px; }

#companies-content .pillar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  /* v6.7.1 light-theme fix: the original 6.6.0 commit used a
     `var(--bg-elevated, var(--space-light, #1d3044))` fallback chain,
     but NEITHER `--bg-elevated` nor `--space-light` are defined in
     custom-ia-scorecard-admin.hbs (the admin theme tokens). The chain
     fell through to the hardcoded #1d3044 in BOTH dark AND light mode,
     producing the dark-navy-on-light-bg leak operators reported. The
     "pre-flight 21/21 tokens verified" claim in the 6.6.0 commit was
     wrong — the orphan tokens never resolved. Now using --bg-card
     directly (theme-aware: #1a2d3d dark, #f7f8f9 light). */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
}
#companies-content .pillar-header h3 {
  font-family: var(--font-header, 'Work Sans', sans-serif);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--teal, #30ffeb);
}
#companies-content .pillar-count {
  font-size: 0.75rem;
  color: var(--text-muted, rgba(226, 226, 225, 0.6));
}
/* M1 — unmet-pillar surface: amber count line when 0 approved */
#companies-content .pillar-count.pillar-unmet {
  color: var(--amber, #ffb84d);
}
#companies-content .pillar-body {
  /* v6.7.1 light-theme fix — same orphan-token chain as .pillar-header. */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0;
}

#companies-content .source-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 20px;
  /* v6.7.1 light-theme fix: hardcoded rgba(36, 58, 82, X) = dark navy at
     fixed opacity ignored the theme. Use --border-light if defined
     (admin-shared cascade), else --border. Both are theme-aware. */
  border-bottom: 1px solid var(--border-light, var(--border));
  align-items: start;
}
#companies-content .source-row:last-child { border-bottom: none; }
#companies-content .source-pub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#companies-content .source-pub a {
  color: var(--white, #fff);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition, 0.2s ease);
}
#companies-content .source-pub a:hover { color: var(--teal, #30ffeb); }
#companies-content .source-date {
  font-size: 0.75rem;
  color: var(--text-muted, rgba(226, 226, 225, 0.6));
}
#companies-content .source-title {
  /* v6.7.1: dropped the orphan `--titanium` fallback (never defined) for
     consistency with the rest of admin-shared. --text is theme-aware. */
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 4px;
}
#companies-content .source-excerpt {
  color: var(--text-muted, rgba(226, 226, 225, 0.6));
  font-size: 0.8rem;
  line-height: 1.55;
  padding-top: 8px;
  margin-top: 6px;
  /* v6.7.1 light-theme fix — same hardcoded RGBA leak as .source-row
     border-bottom. */
  border-top: 1px dashed var(--border-light, var(--border));
}

#companies-content .source-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  min-width: 110px;
}
#companies-content .pillar-reassign {
  padding: 4px 8px;
  /* v6.7.1: dropped orphan --space / --space-lighter / --titanium
     fallbacks (never defined in admin theme tokens). Primary tokens
     --bg / --border / --text are all theme-aware. The reassign
     dropdown was rendering dark navy on dark navy in light mode —
     visible-but-jarring panel-on-panel contrast. */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.72rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  cursor: pointer;
}
#companies-content .source-action-buttons {
  display: flex;
  gap: 4px;
}

/* Reject button — red-outline pill style (mockup .btn-danger-outline) */
#companies-content .btn-danger-outline {
  background: none;
  border: 1px solid var(--red-dim, rgba(255, 77, 77, 0.12));
  color: var(--red, #ff4d4d);
  padding: 5px 10px;
  font-size: 0.65rem;
  font-family: var(--font-header, 'Work Sans', sans-serif);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition, 0.2s ease);
}
#companies-content .btn-danger-outline:hover {
  background: var(--red-dim, rgba(255, 77, 77, 0.12));
}
#companies-content .btn-danger-outline[disabled],
#companies-content .btn-danger-outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* R1 G-C1 (Copilot): the .dot.warn rule that was here is now removed —
   the existing "Status dots" definition earlier in this stylesheet
   (line 117) already supplies it for #companies-content. A second copy
   here was overriding the global with a fractionally-different box-shadow
   value, creating a hard-to-spot precedence trap. Sub-view C source rows
   pick up the existing definition automatically. */

/* ─── v6.8.0 "Add Own Resource" — per-pillar manual source form ──────────
   v6.9.1: consumes canonical admin theme tokens (--bg-card / --text /
   --text-secondary / --text-muted / --border / --teal / --teal-bg /
   --radius) so the form adapts to the admin light/dark toggle. The 6.8.0
   ship used invented token names (--input-bg / --text-1/2/3 / --acid-teal)
   that fell through to hardcoded DARK fallbacks → dark-on-light inputs in
   light mode. Mirrors .login-box input + .answer-body textarea (consume
   tokens, never hardcode — see this file's header re: the Session 6.5
   token-pin regression). ─────────────────────────────────────────────── */
#companies-content .add-source-toggle {
  margin-left: auto;
  white-space: nowrap;
}
#companies-content .add-source-form {
  margin: 8px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--teal-bg);
}
#companies-content .add-source-row { margin-bottom: 8px; }
#companies-content .add-source-row-split {
  display: flex;
  gap: 12px;
}
#companies-content .add-source-row-split label { flex: 1; }
#companies-content .add-source-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
#companies-content .add-source-form .req { color: var(--teal); }
#companies-content .add-source-form input,
#companies-content .add-source-form select,
#companies-content .add-source-form textarea {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  box-sizing: border-box;
  /* Native controls (date-picker calendar icon, select chevron) follow the
     admin theme in both directions. */
  color-scheme: light dark;
}
#companies-content .add-source-form input:focus,
#companies-content .add-source-form select:focus,
#companies-content .add-source-form textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-dim);
  outline: none;
}
#companies-content .add-source-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
#companies-content .add-source-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* SLIDER-4 — company slider-logo upload (article sub-view, published only) */
#companies-content .company-logo-section { display: flex; align-items: center; gap: 16px; margin: 18px 0 24px; }
#companies-content .company-logo-thumb { width: 64px; height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
#companies-content .company-logo-img { width: 100%; height: 100%; object-fit: contain; }
#companies-content .company-logo-placeholder { font-family: var(--font-header); font-weight: 300; font-size: 1.6rem; color: var(--text-muted); }
#companies-content .company-logo-controls { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
#companies-content .company-logo-label { font-family: var(--font-header); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
#companies-content .company-logo-status { font-size: 0.75rem; color: var(--text-muted); }
#companies-content .company-logo-status.is-error { color: var(--red, #ff6b6b); }

/* SLIDER-9 — company display-name + slider-verdict overrides (article sub-view, published only) */
#companies-content .company-slidermeta-section { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--teal-bg, rgba(48, 255, 235, 0.06)); }
#companies-content .company-slidermeta-label { font-family: var(--font-header); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
#companies-content .company-slidermeta-field { margin-bottom: 12px; }
#companies-content .company-slidermeta-sublabel { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
#companies-content .company-slidermeta-input,
#companies-content .company-slidermeta-textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 13px; box-sizing: border-box; color-scheme: light dark; }
#companies-content .company-slidermeta-textarea { min-height: 52px; resize: vertical; font-family: inherit; }
#companies-content .company-slidermeta-input:focus,
#companies-content .company-slidermeta-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim, rgba(48, 255, 235, 0.15)); outline: none; }
#companies-content .company-slidermeta-counter { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: right; }
#companies-content .company-slidermeta-counter.is-over { color: var(--red, #ff6b6b); }
#companies-content .company-slidermeta-actions { display: flex; align-items: center; gap: 12px; }
#companies-content .company-slidermeta-status { font-size: 0.75rem; color: var(--text-muted); }
#companies-content .company-slidermeta-status.is-error { color: var(--red, #ff6b6b); }