/* ============================================================================
   TopHat Security — brand theme layer for the support portal
   Loaded AFTER the compiled React CSS (index-*.css). The React source isn't in
   this repo, so the portal is re-themed here by overriding its design tokens
   and a handful of hardcoded classes. Palette is taken from the logo:
     red   #BE2026  (lock)       black #0D0D0D (linework)     white #FFFFFF
   ========================================================================== */

:root {
  --brand-red: #BE2026;
  --brand-red-hover: #9E1A1F;
  --brand-red-tint: #FCEEEE;
  --brand-black: #0D0D0D;
  --brand-white: #FFFFFF;

  /* shadcn/ui tokens (HSL triplets) — neutral greys, no blue cast */
  --background: 0 0% 100%;
  --foreground: 0 0% 7%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --primary: 358 71% 44%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 38%;
  --accent: 358 71% 44%;
  --accent-foreground: 0 0% 100%;
  --destructive: 358 71% 44%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 89%;
  --input: 0 0% 84%;
  --ring: 358 71% 44%;
  --radius: .625rem;
}

.dark {
  --brand-red: #E0353B;          /* lifted so it keeps contrast on black */
  --brand-red-hover: #C1272D;
  --brand-red-tint: rgba(224, 53, 59, .14);

  --background: 0 0% 5%;
  --foreground: 0 0% 96%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 96%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 96%;
  --primary: 358 73% 54%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 13%;
  --secondary-foreground: 0 0% 90%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 66%;
  --accent: 358 73% 54%;
  --accent-foreground: 0 0% 100%;
  --destructive: 358 73% 54%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 17%;
  --input: 0 0% 22%;
  --ring: 358 73% 54%;
}

html.dark { background-color: #0D0D0D !important; }

/* ── One red everywhere: route the bundle's hardcoded #cc0c1a/#a80916 ─────── */
.bg-\[\#cc0c1a\], .hover\:bg-\[\#cc0c1a\]:hover { background-color: var(--brand-red) !important; }
.hover\:bg-\[\#a80916\]:hover { background-color: var(--brand-red-hover) !important; }
.text-\[\#cc0c1a\], .hover\:text-\[\#cc0c1a\]:hover,
.group:hover .group-hover\:text-\[\#cc0c1a\],
.dark\:hover\:text-\[\#cc0c1a\]:hover:is(.dark *) { color: var(--brand-red) !important; }
.hover\:text-\[\#a80916\]:hover { color: var(--brand-red-hover) !important; }
.border-\[\#cc0c1a\] { border-color: var(--brand-red) !important; }
.border-l-\[\#cc0c1a\] { border-left-color: var(--brand-red) !important; }
.border-t-\[\#cc0c1a\] { border-top-color: var(--brand-red) !important; }

/* Primary buttons: slightly bolder, clear hover/focus feedback */
button.bg-primary, a.bg-primary { font-weight: 600; letter-spacing: .01em; }
button.bg-primary:hover, a.bg-primary:hover { background-color: var(--brand-red-hover); }
:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
::selection { background: var(--brand-red); color: #fff; }

/* ── Portal header: black brand bar in both themes ───────────────────────── */
#root header.h-16.border-b.bg-card {
  background: var(--brand-black);
  border-bottom: 3px solid var(--brand-red);
  color: #fff;
}
#root header.h-16 img {           /* hat logo is black-on-transparent → give it a white tile */
  background: #fff;
  border-radius: 8px;
  padding: 3px 6px;
  height: 2.5rem;
}
#root header.h-16 .text-foreground { color: #fff; }
#root header.h-16 .text-\[\#cc0c1a\] { color: #E0353B !important; }
#root header.h-16 button,
#root header.h-16 a.inline-flex {
  color: #fff;
  background: transparent;
  border-color: rgba(255,255,255,.22);
}
#root header.h-16 svg { color: #fff; }
#root header.h-16 button:hover,
#root header.h-16 a.inline-flex:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── Sidebar: full height, clearer nav states ───────────────────────────── */
#root aside.border-r.h-full { height: auto; align-self: stretch; }
#root aside nav a { border-radius: 8px; }
#root aside nav a[aria-current="page"],
#root aside nav a.bg-accent,
#root aside nav a.bg-primary,
#root aside nav a.bg-primary\/10 {
  background: var(--brand-red-tint) !important;
  color: var(--brand-red) !important;
  box-shadow: inset 3px 0 0 var(--brand-red);
  font-weight: 600;
}
#root aside nav a:not([aria-current="page"]):not(.bg-accent):not(.bg-primary):hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

/* ── Cards & tables: a little more breathing room and definition ────────── */
#root main .rounded-lg.border.bg-card { border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.dark #root main .rounded-lg.border.bg-card { box-shadow: none; }
#root main h1.text-2xl { letter-spacing: -.01em; }
#root main h1.text-2xl::after {
  content: ''; display: block; width: 40px; height: 3px; margin-top: 10px;
  background: var(--brand-red); border-radius: 2px;
}

/* ── Public landing (/): logo + "SUPPORT" title + help callout ─────────── */
#root .rounded-full.border-2.border-\[\#cc0c1a\]:has(> img) {
  background: #fff;
  border: 0 !important;
  border-radius: 20px;
  padding: 18px 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06);
}
.dark #root .rounded-full.border-2.border-\[\#cc0c1a\]:has(> img) {
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
#root h1.tracking-\[0\.3em\].text-white {      /* was white-on-white in light mode */
  color: hsl(var(--foreground));
  font-size: 1.75rem;
  letter-spacing: .35em;
}
#root h1.tracking-\[0\.3em\].text-white::after {
  content: ''; display: block; width: 56px; height: 3px; margin: 12px auto 0;
  background: var(--brand-red); border-radius: 2px;
}
#root .bg-slate-800.border-slate-600.text-blue-300 {   /* these utilities were never compiled */
  background: var(--brand-red-tint);
  border: 1px solid transparent;
  border-left: 4px solid var(--brand-red);
  color: hsl(var(--foreground));
  font-size: .925rem;
  line-height: 1.55;
}