/* ══════════════════════════════════════════════════════════════════════
   Hermes Theme — Argus / Eule & Spiegel reskin of Postiz 2.21.7
   Lean rewrite (v17). Tokens 1:1 from Argus (packages/ui tailwind +
   globals.css). Priority order: (1) high-contrast visible surfaces,
   (2) restrained buttons — gold ONLY on the true submit CTA,
   (3) coherent typography. No geometry guessing, no substring warfare.
   Auth (/auth) styling is intentionally minimal + scoped so it can't
   regress; rebrand.js builds the auth wordmark/card.
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600&family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
  --bg:        #041a13;   /* page base (Argus brg-950) */
  --bg-grad-a: #071f18;
  --bg-grad-b: #0b3d2e;   /* brg-800 */
  --bg-grad-c: #08291f;

  /* Surfaces are deliberately near-opaque + lifted vs. the page so cards,
     inputs and panels are OBVIOUSLY distinct (the #1 defect was ~0.02-0.07
     alpha cream over a dark gradient → invisible flat void). */
  --surface:    #0d2e23;  /* card / panel */
  --surface-2:  #103528;  /* nested / hover surface */
  --surface-3:  #082019;  /* recessed (inputs, table headers) */

  --border:      rgba(249,245,236,0.12);  /* hairline */
  --border-soft: rgba(249,245,236,0.07);
  --border-gold: rgba(176,141,87,0.40);

  --text:       #f9f5ec;  /* cream-100 */
  --text-muted: rgba(249,245,236,0.62);
  --text-faint: rgba(249,245,236,0.40);

  --gold:        #b08d57;
  --gold-strong: #8f6d3b;
  --gold-hover:  #c39d62;

  --shadow-card: 0 12px 32px -18px rgba(0,0,0,0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 220ms;
}

/* ── Postiz CSS-variable bridge ─────────────────────────────────────────
   Postiz themes via these custom props; mapping them to our tokens fixes
   the bulk of surfaces with NO selector warfare. */
html body, html body.dark, body.dark, :root, :root .dark {
  --color-primary: var(--bg) !important;
  --color-secondary: var(--surface) !important;
  --color-text: var(--text) !important;
  --color-third: var(--surface-2) !important;
  --color-forth: var(--gold) !important;
  --color-fifth: var(--border) !important;
  --color-sixth: var(--surface) !important;
  --color-seventh: var(--gold-hover) !important;
  --color-gray: var(--text-muted) !important;
  --color-input: var(--surface-3) !important;
  --new-bgColor: var(--bg) !important;
  --new-bgColorInner: var(--surface) !important;
  --new-back-drop: var(--bg) !important;
  --new-settings: var(--surface) !important;
  --new-border: var(--border) !important;
  --new-sep: var(--border-soft) !important;
  --new-bgLineColor: var(--surface-3) !important;
  --new-textItemFocused: var(--text) !important;
  --new-textItemBlur: var(--text-muted) !important;
  --new-boxFocused: var(--gold) !important;
  --new-textColor: 249 245 236 !important;
  --new-blockSeparator: var(--border-soft) !important;
  --new-btn-text: var(--bg) !important;
  --new-btn-primary: var(--gold) !important;
  --new-btn-simple: var(--surface-2) !important;
  --new-ai-btn: var(--gold-hover) !important;
  --new-box-hover: rgba(176,141,87,0.14) !important;
  --new-table-text-focused: var(--gold) !important;
  --new-table-header: var(--surface-3) !important;
  --new-table-text: var(--text-muted) !important;
  --popup-color: rgba(4,26,19,0.72) !important;
  --linkedin-bg: var(--surface) !important;
  --facebook-bg: var(--surface) !important;
  --instagram-bg: var(--surface) !important;
  --tiktok-item-bg: var(--surface) !important;
  --youtube-bg: var(--surface) !important;
}

/* ── Page base ──────────────────────────────────────────────────────── */
html, body, body.dark, .bg-\[\#0E0E0E\] {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(circle at 14% 10%, rgba(73,157,106,0.13), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(14,40,33,0.50), transparent 38%),
    linear-gradient(164deg, var(--bg-grad-a), var(--bg-grad-b) 46%, var(--bg-grad-c)) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

/* ── Sidebar ────────────────────────────────────────────────────────── */
aside, [class*="bg-newBgColor"]:not(body) {
  background: rgba(6,30,23,0.92) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  border-right: 1px solid var(--border-soft) !important;
  border-radius: 0 !important;
}

/* ── Surfaces: cards, inner panels, table headers ──────────────────────
   HIGH CONTRAST. Near-opaque distinct surface + hairline + soft shadow.
   This is the single most important block — it kills the "flat void". */
.bg-secondary,
.bg-newBgColorInner,
[class*="bg-newBgColorInner"],
.bg-third,
.bg-sixth {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  /* Argus signature: hairline + soft drop + a 1px inner top highlight so
     the card edge catches light and reads as elevated, not a flat fill. */
  box-shadow: var(--shadow-card),
              inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease) !important;
}
.bg-secondary:hover,
[class*="bg-newBgColorInner"]:hover {
  border-color: rgba(176,141,87,0.22) !important;
}
.bg-primary, .bg-newBgColor { background: transparent !important; }

.bg-newTableHeader, [class*="bg-newTableHeader"] {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 10px !important;
}
.bg-newBgLineColor {
  background: var(--surface-3) !important;
  border-radius: 12px !important;
}

/* ── Typography ─────────────────────────────────────────────────────── */
.text-primary, .text-textColor, .text-textItemFocused,
.text-newTextColor, .text-text { color: var(--text) !important; }
.text-textItemBlur, .text-gray { color: var(--text-muted) !important; }

h1, h2, h3,
[class*="text-[40px]"], [class*="text-[32px]"], [class*="text-[28px]"],
[class*="text-[24px]"], [class*="text-[20px]"],
.text-\[20px\].font-\[600\], .text-\[24px\].font-\[600\],
.text-\[28px\].font-\[600\], .text-\[32px\].font-\[600\] {
  font-family: "Cormorant Garamond", serif !important;
  color: var(--text) !important;
  letter-spacing: -0.015em !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
}
h1 { font-size: clamp(30px, 4.5vw, 44px) !important; }
h2 { font-size: clamp(24px, 3.2vw, 32px) !important; }
h3 { font-size: clamp(19px, 2.4vw, 24px) !important; }

b, strong { color: var(--gold-hover) !important; font-weight: 600; }

/* ── Inputs ───────────────────────────────────────────────────────────
   Distinct dark surface, visible hairline border, cream text, gold focus
   ring (no permanent heavy glow). Also covers Postiz's contenteditable
   message box + role=textbox so the chat "Type a message…" field is not
   dark-brown-on-green. */
input, select, textarea,
[contenteditable="true"], [role="textbox"] {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-family: "Manrope", sans-serif !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease) !important;
}
input:focus, select:focus, textarea:focus,
[contenteditable="true"]:focus, [role="textbox"]:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(176,141,87,0.20) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder,
[contenteditable="true"]:empty:before { color: var(--text-faint) !important; }
select { color: var(--text) !important; }
select option { background: #07261c !important; color: var(--text) !important; }

input:-webkit-autofill, input:autofill,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--gold) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface-3) inset !important;
  transition: background-color 99999s ease-in-out 0s !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────
   STRATEGY: every Postiz button defaults to a RESTRAINED style — subtle
   surface, visible hairline border, legible cream/gold label + icon.
   Solid gold is applied ONLY to the genuine primary CTA via the narrowest
   reliable signal: button[type=submit] and Postiz's primary-button class.
   No geometry guessing → no "shapeless gold blobs". */
button {
  font-family: "Manrope", sans-serif !important;
}
button:not([role="switch"]):not([data-hermes-skip]) {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease) !important;
}
button:not([role="switch"]):not([data-hermes-skip]):hover {
  background: rgba(176,141,87,0.14) !important;
  border-color: var(--border-gold) !important;
  color: var(--text) !important;
}
/* Icons/SVGs inside ANY button must always stay visible — never folded
   into a fill. Inherit the (cream/gold) text colour. */
button svg, button svg * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Primary CTA — solid Argus gold pill. Narrow, reliable signals only:
   real submit buttons + Postiz's exact primary-button class tokens.
   (bg-forth / bg-newBtnPrimary / bg-btnPrimary are Postiz's PRIMARY
   button classes specifically — not the generic icon-rail bg-newBtnSimple.) */
button[type="submit"]:not([role="switch"]),
button.bg-forth,
button.bg-newBtnPrimary,
button.bg-btnPrimary,
a.bg-forth[role="button"] {
  background: var(--gold) !important;
  color: var(--bg) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 11px 26px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  box-shadow: 0 2px 8px rgba(176,141,87,0.20) !important;
  transition: background var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease) !important;
}
button[type="submit"]:not([role="switch"]):hover,
button.bg-forth:hover,
button.bg-newBtnPrimary:hover,
button.bg-btnPrimary:hover {
  background: var(--gold-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(176,141,87,0.34) !important;
  color: var(--bg) !important;
}
button[type="submit"] svg, button[type="submit"] svg *,
button.bg-forth svg, button.bg-forth svg *,
button.bg-newBtnPrimary svg, button.bg-newBtnPrimary svg *,
button.bg-btnPrimary svg, button.bg-btnPrimary svg * {
  color: var(--bg) !important;
  fill: currentColor !important;
}
button:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

/* ── Contrast floor — kill "dark-brown-on-green" illegible controls ─────
   Defect 3. Postiz paints some secondary/ghost actions (e.g. the chat
   "Medien einfügen / Medien gestalten / KI image" buttons) with a near-
   background brown fill + dim text → invisible on the emerald bg. These
   selectors are Postiz's own ghost/secondary classes; force a visible
   surface, hairline border and cream label. Children inherit so any
   nested span/svg label is legible too. Scoped away from the true
   primary CTA (already gold) and from toggles. */
button.bg-newBtnSimple,
button[class*="bg-customColor"]:not(.bg-customColor4):not(.bg-customColor7),
[role="button"]:not(.bg-forth):not(.bg-newBtnPrimary):not(.bg-btnPrimary),
.bg-newBgColorInner button:not([role="switch"]),
button[class*="border-"][class*="bg-transparent"],
button.bg-transparent:not([role="switch"]) {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  opacity: 1 !important;
}
button.bg-newBtnSimple *,
[role="button"]:not(.bg-forth):not(.bg-newBtnPrimary):not(.bg-btnPrimary) *,
button.bg-transparent:not([role="switch"]) * {
  color: var(--text) !important;
}
button.bg-newBtnSimple:hover,
[role="button"]:not(.bg-forth):not(.bg-newBtnPrimary):not(.bg-btnPrimary):hover,
button.bg-transparent:not([role="switch"]):hover {
  background: rgba(176,141,87,0.14) !important;
  border-color: var(--border-gold) !important;
}
/* Any control/text that resolves to the gold token sitting directly on
   a recessed (input) surface would be brown-on-near-black: lift it to
   cream so it stays readable. */
.bg-newBgLineColor .text-forth,
.bg-newTableHeader .text-forth,
input + .text-forth,
[class*="bg-newBgLineColor"] [class*="text-forth"] {
  color: var(--text) !important;
}

/* ── Labels (editorial eyebrow style) ───────────────────────────────── */
label:not([data-hermes-skip] label) {
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  margin-bottom: 7px !important;
  font-family: "Manrope", sans-serif !important;
  display: block;
}

/* ── Links / focus ──────────────────────────────────────────────────── */
a:hover { color: var(--gold-hover) !important; }
*:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
}

/* "Logout from Hermes" — cream, not Postiz red */
.text-red-400 {
  color: var(--text) !important;
  opacity: 0.92 !important;
  font-weight: 600 !important;
}
.text-red-400:hover { color: var(--gold-hover) !important; opacity: 1 !important; }

/* ── Toggles / accent fills ─────────────────────────────────────────── */
.bg-customColor4 { background-color: var(--gold) !important; border-color: var(--gold-hover) !important; }
.bg-customColor7 { background-color: var(--gold) !important; }
.bg-customColor8 { background-color: rgba(176,141,87,0.18) !important; }

/* Residual Postiz purple/violet/indigo → gold */
[class*="border-purple"], [class*="border-violet"], [class*="border-indigo"] {
  border-color: var(--border-gold) !important;
}
[class*="bg-purple"], [class*="bg-violet"] {
  background: var(--surface) !important;
}

/* Settings sub-nav active-strip SVG → gold */
[class*="group/profile"] div[class*="w-[4px]"] svg path { fill: var(--gold) !important; }
[class*="group/profile"] div[class*="w-[4px]"] svg stop { stop-color: var(--gold) !important; }
.group\/profile.bg-boxHover, [class*="bg-boxHover"][class*="group/profile"] {
  background: rgba(176,141,87,0.10) !important;
  border-radius: 0 10px 10px 0 !important;
}

/* Hide Postiz default empty-state illustrations (cartoon purple art) */
img[src$="/no-channels.svg"], img[src$="/no-analytics.svg"],
img[src$="/empty-state.svg"], img[src$="/peoplemarketplace.svg"],
img[src$="/notifications.svg"], img[src$="/marketplace.svg"],
img[src*="/no-"][src$=".svg"] {
  display: none !important;
}

/* Hide empty SuperAdmin bar wrapper */
.bg-forth.h-\[52px\] { display: none !important; }

/* ── Sidebar nav: de-clip labels + Argus active state ──────────────────
   Defect 2: "Integrationen"/"Einstellungen"/"Analytiken" were truncated
   ("angeschnitten"). Prior fixes used selectors that didn't match the
   real DOM. Fix structurally: widen the rail AND, as a robust fallback,
   forbid clipping on the link + ALL its descendants and let the label
   wrap instead of ellipsis-truncate (wrap survives even if the rail
   stays narrow). Targets the nav by structure, not class names. */
aside:not([data-hermes-skip]),
aside:not([data-hermes-skip]) > div,
nav[class*="newBgColor"] {
  min-width: 244px !important;
}
aside a, aside nav a, nav a[href^="/"] {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
}
/* Every text-bearing descendant of a nav link must not clip/ellipsis. */
aside a *, aside nav a *, nav a[href^="/"] * {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  max-width: none !important;
}
aside nav a[href^="/"], aside a[href^="/"] {
  border-radius: 10px !important;
  padding: 9px 14px !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease) !important;
}
/* Keep icon + label aligned on one row; only the label may wrap. */
aside a[href^="/"], aside nav a[href^="/"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
aside a[href^="/"] svg, aside nav a[href^="/"] svg { flex-shrink: 0 !important; }
aside a[href^="/"]:hover {
  background: rgba(249,245,236,0.04) !important;
  color: var(--text) !important;
}
/* Active nav row — restrained gold wash + left spine (Argus signature) */
aside a.bg-forth, aside nav a.bg-forth {
  background: linear-gradient(90deg, rgba(176,141,87,0.16), rgba(176,141,87,0.05) 55%, transparent) !important;
  color: var(--gold-hover) !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: inset 3px 0 0 var(--gold) !important;
}
aside a.bg-forth *, aside nav a.bg-forth * { color: var(--gold-hover) !important; }
aside a.bg-forth svg, aside nav a.bg-forth svg {
  color: var(--gold-hover) !important; fill: currentColor !important;
}

/* ── Modals / popups / dropdowns / toasts ──────────────────────────────
   Solid high-contrast surface (no washed translucency). */
[role="dialog"], [class*="modal"] > div, [class*="Popup"] > div, [class*="popup"] > div {
  background: var(--surface) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.50) !important;
}
[class*="backdrop"], .fixed.inset-0[class*="bg-black"] {
  background: rgba(4,26,19,0.62) !important;
  backdrop-filter: blur(4px) !important;
}
[role="menu"], [role="listbox"], [class*="dropdown"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important;
  padding: 6px !important;
}
[role="option"]:hover, [role="menuitem"]:hover {
  background: rgba(176,141,87,0.14) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
}
[class*="toast"], [class*="Toast"], [class*="notification"]:not(button) {
  background: var(--surface) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important;
  padding: 14px 18px !important;
}

/* Loading spinner — gold */
[class*="spinner"], [class*="Spinner"], [class*="animate-spin"] {
  border-color: rgba(176,141,87,0.30) !important;
  border-top-color: var(--gold) !important;
}

/* ── Calendar grid — clean editorial cells ─────────────────────────────
   Cells stamped by rebrand.js stay; this is purely declarative styling. */
[class*="aspect-square"] {
  background: var(--surface-3) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-soft) !important;
}
[class*="grid-template-columns:136px"] > div,
[class*="grid-cols-"] > div { border-color: var(--border-soft) !important; }
[data-hermes-calhour] {
  color: var(--text-faint) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  font-family: "Manrope", sans-serif !important;
}
[data-hermes-today] {
  background: rgba(176,141,87,0.08) !important;
  box-shadow: inset 0 2px 0 rgba(176,141,87,0.45) !important;
}
[data-hermes-pastcol] {
  background: rgba(4,26,19,0.30) !important;
  opacity: 0.85 !important;
}

/* Channel-rail empty-state card (stamped [data-hermes-chanempty]) */
[data-hermes-chanempty] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  margin: 14px !important;
  padding: 32px 24px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
}
[data-hermes-chanempty] * { text-align: center !important; }

/* ── Argus editorial polish ────────────────────────────────────────────
   Defect 4: pull concrete cues from Argus globals.css / tailwind config
   without regressing the Calendar (its [class*="aspect-square"] +
   [data-hermes-*] rules are above and untouched). Lean + well-scoped. */

/* Pills / tags / chips → Argus .tag: gold uppercase on a recessed wash,
   pill radius, hairline border. Scoped to Postiz badge-ish classes. */
[class*="rounded-full"][class*="text-["][class*="px-"],
[class*="badge"]:not(button), [class*="Badge"]:not(button),
[class*="chip"]:not(button), [class*="Tag"]:not(button) {
  border: 1px solid var(--border) !important;
  color: var(--gold-hover) !important;
  letter-spacing: 0.05em !important;
}

/* Eyebrow / kicker labels above sections (small uppercase muted text)
   get Argus letterspacing — only tiny text, never body copy. */
[class*="uppercase"][class*="tracking"][class*="text-[1"],
[class*="uppercase"][class*="text-[0."] {
  letter-spacing: 0.28em !important;
  color: var(--text-muted) !important;
  font-family: "Manrope", sans-serif !important;
}

/* Hairline dividers → Argus faint cream, not hard black. */
hr, [class*="border-t"][class*="border-"]:empty,
[class*="divide-y"] > * + * {
  border-color: var(--border-soft) !important;
}

/* Tabs / segmented controls: active = restrained gold underline + cream;
   idle = muted. Argus uses understated gold accents, not filled blobs. */
[role="tab"][aria-selected="true"], [role="tab"].active {
  color: var(--gold-hover) !important;
  border-bottom: 2px solid var(--gold) !important;
}
[role="tab"]:not([aria-selected="true"]) {
  color: var(--text-muted) !important;
}

/* Section headers in panels lean serif + tighter tracking (editorial). */
.bg-secondary > h2, .bg-secondary > h3,
[class*="bg-newBgColorInner"] > h2,
[class*="bg-newBgColorInner"] > h3 {
  font-family: "Cormorant Garamond", serif !important;
  letter-spacing: -0.01em !important;
}

/* ── Scrollbars ─────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(249,245,236,0.18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(249,245,236,0.16);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(176,141,87,0.55); background-clip: padding-box; }

/* ══════════════════════════════════════════════════════════════════════
   AUTH (/auth) — scoped, minimal. rebrand.js builds the wordmark + card.
   Selectors here only match the auth form column / its marketing twin,
   which never render in the app shell — so the app pages are untouched.
   ══════════════════════════════════════════════════════════════════════ */

/* Suppress the decorative marketing column so it can't bleed off-screen. */
.text-\[36px\].flex-1.pt-\[88px\].hidden.lg\:flex,
[class*="lg:flex"][class*="pt-[88px]"][class*="text-[36px]"] {
  display: none !important;
}
.flex.flex-col.py-\[40px\].px-\[20px\].flex-1 {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
}
body:has(.flex.flex-col.py-\[40px\].px-\[20px\].flex-1) > div,
body:has(.flex.flex-col.py-\[40px\].px-\[20px\].flex-1) > div > div {
  max-width: 100vw !important;
}

/* Auth inputs / labels (the global rules already cover dark surface +
   gold focus; this only tunes the auth label spacing). */
.flex.flex-col.py-\[40px\].px-\[20px\].flex-1 label {
  letter-spacing: 0.14em !important;
  font-size: 10.5px !important;
  color: rgba(249,245,236,0.55) !important;
  margin-bottom: 7px !important;
}
/* Full-width gold submit pill on auth (sign-in / create account) */
.flex.flex-col.py-\[40px\].px-\[20px\].flex-1 button[type="submit"],
.flex.flex-col.py-\[40px\].px-\[20px\].flex-1 button.bg-forth,
.flex.flex-col.py-\[40px\].px-\[20px\].flex-1 button.bg-newBtnPrimary {
  width: 100% !important;
  margin-top: 6px !important;
}
.flex.flex-col.py-\[40px\].px-\[20px\].flex-1 a {
  color: rgba(249,245,236,0.55) !important;
  transition: color 200ms var(--ease) !important;
}
.flex.flex-col.py-\[40px\].px-\[20px\].flex-1 a:hover { color: var(--gold-hover) !important; }

/* Auth wordmark dedup (rebrand.js may stamp siblings) */
[data-hermes-replaced] ~ [data-hermes-replaced] { display: none !important; }
.cursor-pointer.flex-1 [data-hermes-replaced] { display: none !important; }

@media (max-width: 460px) {
  .flex.flex-col.py-\[40px\].px-\[20px\].flex-1 .w-full.max-w-\[440px\] {
    padding: 40px 24px 32px !important;
    border-radius: 16px !important;
  }
}

/* ── Injected Hermes Bridge controls (edit/reject modal) ───────────────
   Reason labels must stay readable (lowercase), overriding the global
   uppercase <label> rule at matching specificity. */
[data-hermes="reject-panel"] label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  margin-bottom: 0 !important;
  color: rgba(249,245,236,0.82) !important;
  display: flex !important;
}
[data-hermes="reject-panel"] input[type="radio"] {
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  accent-color: var(--gold-hover) !important;
}
[data-hermes="schedule"] input[type="date"],
[data-hermes="schedule"] input[type="time"] { color-scheme: dark; }
[data-hermes="reject-submit"]:disabled { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}