/* === Remedica stable grey theme === */
/* Main content only. Sidebar is separate. No JavaScript needed. */

body {
  background: #101012 !important;
}

/* Main area */
main,
.main {
  background: #101012 !important;
  color: #f5f5f7 !important;
}

/* Dark only. This used to be unqualified, which meant it forced white text in
   light mode too. light-compat.css answered the h1..h4 half with a near-black
   of its own, but nothing answered b/strong/label, so every piece of bold text
   inside `main` was white-on-white in light mode.
   Qualifying is better than adding another !important override on top: an
   !important declaration beats a non-important one whatever its specificity,
   so an override here would also have flattened every page's own `.card b`
   colour - the good/bad highlights on /non-compliance among them. Excluded
   from light, each page's own colours simply apply, and text with no colour of
   its own inherits from its card, which is what it should do in both modes. */
html:not([data-appearance="light"]) main h1,
html:not([data-appearance="light"]) main h2,
html:not([data-appearance="light"]) main h3,
html:not([data-appearance="light"]) main h4,
html:not([data-appearance="light"]) main b,
html:not([data-appearance="light"]) main strong,
html:not([data-appearance="light"]) main label {
  color: #ffffff !important;
}

main p,
main small,
main .sub,
main .meta,
main .muted,
main .description {
  color: #a1a1a6 !important;
}

/* Cards and panels */
/* .card removed here (Phase 0 0.6) - now handled natively by the
   token-based .card rule in legacy_app.py Style Block 1 (var(--surface-1)
   etc.), which renders identically. .panel/.box/.table-card/.log-stat/
   .filters/section/article are NOT yet migrated - kept forced dark here. */
/* Dark only, for the same reason as the text rule above: unqualified, this
   left every page built from bare <section> as a dark slab in light mode
   (/files, /roles, /dsc-bot, /logs), with light-compat.css then repainting
   their headings near-black on top of it. */
html:not([data-appearance="light"]) main .panel,
html:not([data-appearance="light"]) main .box,
html:not([data-appearance="light"]) main .table-card,
html:not([data-appearance="light"]) main .log-stat,
html:not([data-appearance="light"]) main .filters,
/* NOT the page wrapper. A page root -- .cx-page, .rg-page, .qf-page,
   .hx-home, .sx-page and 15 others -- is a layout container that holds cards;
   it is not itself a card. Painting it turned it into a dark slab with a drop
   shadow and NO padding, so the first thing on the page sat flush against its
   top edge. Measured: 20 of the 40 page wrappers were painted this way and
   every one had a gap of 0 to its first child, which is what reads as text
   hugging the frame. The other 20 use a <div> wrapper and were always fine,
   which is why the panel looked inconsistent from page to page.

   The pages already tried to opt out -- returns_pages.py and others carry
   `main section.rg-page{background:transparent!important}` -- and lost,
   because :not() takes its argument's specificity, so this selector is
   (0,1,3) against their (0,1,2). Excluding them here is the fix; raising
   every page to (0,2,x) to fight a global would not be. */
html:not([data-appearance="light"]) main section:not([class*="-page"]):not([class*="-shell"]):not([class*="-home"]),
html:not([data-appearance="light"]) main article {
  background: #1f1f22 !important;
  color: #f5f5f7 !important;
  border-color: #34343a !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.25) !important;
}

/* Dark cards should stay dark, but not pure black everywhere */
main .card.dark {
  background: linear-gradient(145deg,#050505,#101012) !important;
  color: #ffffff !important;
  border-color: #101012 !important;
}

/* Stat boxes removed here (Phase 0 0.6) - now handled natively by the
   token-based .stat/.stat-label/.stat-value rules in legacy_app.py
   (var(--surface-2)/var(--text-1)/var(--text-2)), which render
   identically. */

/* Note/info boxes */
main .note {
  background: #2a2a2f !important;
  color: #f5f5f7 !important;
  border-color: #3a3a42 !important;
}

main .note * {
  color: inherit !important;
}

/* Tables */
main .table-scroll {
  background: #1f1f22 !important;
  border-color: #34343a !important;
}

main table {
  background: #1f1f22 !important;
  color: #f5f5f7 !important;
  border-color: #34343a !important;
}

main thead,
main tbody,
main tr {
  background: #1f1f22 !important;
  color: #f5f5f7 !important;
}

main th {
  background: #2a2a2f !important;
  color: #ffffff !important;
  border-color: #3a3a42 !important;
}

main td {
  background: #1f1f22 !important;
  color: #f5f5f7 !important;
  border-color: #34343a !important;
}

main tr:hover td {
  background: #29292e !important;
}

/* Logs */
main pre,
main code {
  background: #050505 !important;
  color: #f5f5f7 !important;
  border-color: #34343a !important;
}

/* Inputs/select */
main input,
main select,
main textarea {
  background: #2a2a2f !important;
  color: #f5f5f7 !important;
  border-color: #3a3a42 !important;
}

main input::placeholder,
main textarea::placeholder {
  color: #7d7d86 !important;
}

/* Buttons */
main .btn.white,
main a.btn.white,
main button.white {
  background: #f5f5f7 !important;
  color: #111113 !important;
  border-color: #e5e7eb !important;
}

main .btn.white *,
main a.btn.white *,
main button.white * {
  color: #111113 !important;
}

main .btn.green,
main a.btn.green,
main button.green {
  background: #12813a !important;
  color: #ffffff !important;
  border-color: #12813a !important;
}

main .btn.red,
main a.btn.red,
main button.red {
  background: #c1121f !important;
  color: #ffffff !important;
  border-color: #c1121f !important;
}

main .btn.orange,
main a.btn.orange,
main button.orange {
  background: #b45309 !important;
  color: #ffffff !important;
  border-color: #b45309 !important;
}

/* === REAL BADGES: app.py uses .badge.good/.bad/.warn/.neutral === */

main .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 74px !important;
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
}

/* Online / Healthy / Protected */
main .badge.good {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac !important;
}

/* Warning / Medium risk */
main .badge.warn {
  background: #fff3cd !important;
  color: #92400e !important;
  border-color: #fbbf24 !important;
}

/* Problem / Missing / Error / Failed */
main .badge.bad {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
}

/* Neutral / Stopped / SSH */
main .badge.neutral {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #d1d5db !important;
}

/* Inherit text inside badge */
main .badge * {
  color: inherit !important;
  text-shadow: none !important;
}

/* Keep top panel-online badge readable */
main .top .badge.good {
  background: #dcfce7 !important;
  color: #166534 !important;
}

/* Fix inline white blocks used by progress cards */
main div[style*="background:#f1f1f1"],
main div[style*="background: #f1f1f1"],
main div[style*="background:#fff"],
main div[style*="background: #fff"],
main div[style*="background:white"],
main div[style*="background: white"] {
  background: #2a2a2f !important;
  color: #f5f5f7 !important;
  border-color: #3a3a42 !important;
}

main div[style*="background:#f1f1f1"] *,
main div[style*="background: #f1f1f1"] *,
main div[style*="background:#fff"] *,
main div[style*="background: #fff"] *,
main div[style*="background:white"] *,
main div[style*="background: white"] * {
  color: inherit !important;
}

/* Progress bar inner fill must stay black/colored */
main div[style*="height:100%"] {
  color: inherit !important;
}

/* === End stable grey theme === */

/* === TABLE STATUS PILL FIX === */
/* Fix small table status pills that are not using .badge.good/.warn/.bad/.neutral */

/* Base: any small rounded span inside main tables */
main table span,
main .table-scroll span {
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Any span that looks like a pill */
main table span[style*="border-radius"],
main .table-scroll span[style*="border-radius"],
main table span[class*="pill"],
main .table-scroll span[class*="pill"],
main table span[class*="status"],
main .table-scroll span[class*="status"],
main table span[class*="badge"],
main .table-scroll span[class*="badge"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 64px !important;
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

/* Green-ish / ok / public / listening / active */
main table span.good,
main table span.ok,
main table span.online,
main table span.active,
main table span.public,
main table span.listen,
main table span.listening,
main table span[class*="good"],
main table span[class*="ok"],
main table span[class*="online"],
main table span[class*="active"],
main table span[class*="public"],
main table span[class*="listen"] {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}

/* Warning-ish */
main table span.warn,
main table span.warning,
main table span.unknown,
main table span[class*="warn"],
main table span[class*="warning"],
main table span[class*="unknown"] {
  background: #fff3cd !important;
  color: #92400e !important;
  border: 1px solid #fbbf24 !important;
}

/* Bad-ish */
main table span.bad,
main table span.error,
main table span.danger,
main table span.failed,
main table span.closed,
main table span[class*="bad"],
main table span[class*="error"],
main table span[class*="danger"],
main table span[class*="failed"],
main table span[class*="closed"] {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}

/* Neutral / SSH / local */
main table span.neutral,
main table span.ssh,
main table span.local,
main table span.internal,
main table span[class*="neutral"],
main table span[class*="ssh"],
main table span[class*="local"],
main table span[class*="internal"] {
  background: #111113 !important;
  color: #ffffff !important;
  border: 1px solid #3a3a42 !important;
}

/* If a pill has no matching class but is pale, make text visible */
main table span[style*="background"],
main .table-scroll span[style*="background"] {
  color: #111113 !important;
  font-weight: 950 !important;
}

/* Preserve black SSH pills */
main table span[style*="black"],
main table span[style*="#000"],
main table span[style*="#050505"] {
  color: #ffffff !important;
}

/* === END TABLE STATUS PILL FIX === */