/*
 * tools-brutalist.css — Neo-brutalist override for tools.mytcrplus.com
 * Loaded AFTER Tailwind CDN and app.css as an !important override layer.
 * Design tokens: ink #111111 | paper #ffffff | accent #ff5518 | wash #f4f1ec
 */

/* ── Google Fonts: Space Grotesk + IBM Plex Mono ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
  --ink:          #111111 !important;
  --paper:        #ffffff !important;
  --accent:       #ff5518 !important;
  --accent-dark:  #d63d05 !important;
  --muted:        #6b6560 !important;
  --wash:         #f4f1ec !important;

  /* Override app CSS variables */
  --bg-main:           #f4f1ec !important;
  --bg-card:           #ffffff !important;
  --bg-nav:            #111111 !important;
  --bg-sidebar:        #111111 !important;
  --bg-hover:          #f4f1ec !important;
  --bg-active:         rgba(255,85,24,0.12) !important;
  --bg-header:         rgba(244,241,236,0.95) !important;
  --text-primary:      #111111 !important;
  --text-secondary:    #111111 !important;
  --text-muted:        #6b6560 !important;
  --border:            #111111 !important;
  --border-light:      #111111 !important;
  --brand-primary:     #ff5518 !important;
  --brand-subtle:      rgba(255,85,24,0.08) !important;
  --brand-accent-hover:#ff5518 !important;

  /* Kill all rounding */
  --radius-sm: 0 !important;
  --radius-md: 0 !important;
  --radius-lg: 0 !important;

  /* Hard-offset shadows */
  --shadow-sm:    3px 3px 0 #111111 !important;
  --shadow-md:    6px 6px 0 #111111 !important;
  --shadow-brand: 6px 6px 0 #ff5518 !important;
  --transition-base: 0.15s ease !important;
}

/* ── Global typography ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  border-radius: 0 !important;
}

html, body {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  background: #f4f1ec !important;
  color: #111111 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

code, pre, kbd, samp,
.font-mono, [class*="font-mono"] {
  font-family: 'IBM Plex Mono', monospace !important;
}

/* ── Kill ALL gradients ─────────────────────────────────────────────────────── */
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-b,
.bg-gradient-to-l,
[class*="bg-gradient"],
[style*="gradient"],
.hero-gradient,
[class*="hero-gradient"] {
  background-image: none !important;
  background: #111111 !important;
  color: #ffffff !important;
}

/* ── Auth gate ──────────────────────────────────────────────────────────────── */
#authGate {
  background: #111111 !important;
  background-image: none !important;
}

#authGate * {
  border-radius: 0 !important;
}

#authGate .bg-white\/10,
#authGate [class*="bg-white"] {
  background: rgba(255,255,255,0.08) !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
}

#authGate input {
  background: #1a1a1a !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
}

#authGate button[type="submit"],
#authGate .btn-brand,
#authGate [class*="bg-brand"],
#authGate [class*="bg-violet"],
#authGate [class*="bg-purple"],
#authGate [class*="bg-indigo"] {
  background: #ff5518 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
  box-shadow: 4px 4px 0 rgba(255,255,255,0.4) !important;
}

/* ── Topbar / header ────────────────────────────────────────────────────────── */
/* header[class] (0,1,1) beats .bg-white (0,1,0) when both use !important */
header[class],
nav[class],
[id*="topbar"],
[id*="header"],
[id*="nav-top"] {
  background: #111111 !important;
  border-bottom: 4px solid #ff5518 !important;
  color: #ffffff !important;
}

header[class] *,
nav[class] * {
  color: #ffffff !important;
}

header[class] a:hover,
nav[class] a:hover {
  color: #ff5518 !important;
}

/* Light-bg utility classes inside header — translucent on dark */
header[class] .bg-slate-50,
header[class] .bg-slate-100,
header[class] .bg-white,
header[class] [class*="bg-slate-5"],
header[class] [class*="bg-slate-1"],
header[class] [class*="bg-amber-"],
header[class] [class*="bg-green-"],
header[class] [class*="bg-red-"],
header[class] [class*="bg-blue-"] {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Dropdown menus inside header — keep light with dark text */
header[class] #avatarDropdown {
  background: #ffffff !important;
  border: 3px solid #111111 !important;
  box-shadow: 4px 4px 0 #111111 !important;
}

header[class] #avatarDropdown * {
  color: #111111 !important;
}

header[class] #avatarDropdown .text-slate-500,
header[class] #avatarDropdown .text-slate-400 {
  color: #6b6560 !important;
}

header[class] #avatarDropdown a:hover,
header[class] #avatarDropdown button:hover {
  background: rgba(255,85,24,0.08) !important;
  color: #ff5518 !important;
}

/* Logo text */
header .font-bold,
header [class*="font-display"] {
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Dark mode toggle — restyle */
.dark-toggle {
  color: #ffffff !important;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
#sidebar-menu,
[id*="sidebar"],
[class*="sidebar"] {
  background: #111111 !important;
  border-right: 4px solid #ff5518 !important;
  color: #ffffff !important;
}

#sidebar-menu *,
[id*="sidebar"] * {
  color: #ffffff !important;
}

.nav-item {
  border-left: 4px solid transparent !important;
  transition: background 0.1s, border-color 0.1s !important;
}

.nav-item:hover:not(.active) {
  background: rgba(255,85,24,0.15) !important;
  border-left-color: rgba(255,85,24,0.5) !important;
}

.nav-item.active {
  background: rgba(255,85,24,0.2) !important;
  border-left-color: #ff5518 !important;
  color: #ff5518 !important;
}

.nav-item.active * {
  color: #ff5518 !important;
}

/* Sidebar label / section headers */
.sidebar-label,
[class*="sidebar-label"] {
  color: #6b6560 !important;
  letter-spacing: 0.08em !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.6875rem !important;
}

/* ── Main content area ──────────────────────────────────────────────────────── */
#app-content,
[id*="app-content"],
main {
  background: #f4f1ec !important;
}

/* ── Tool section headers ───────────────────────────────────────────────────── */
.tool-section > .border-b,
.tool-section [class*="border-b"] {
  background: #f4f1ec !important;
  border-bottom: 3px solid #111111 !important;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.bg-white,
[class*="bg-white"],
.bg-slate-50,
.bg-slate-100,
.bg-card {
  background: #ffffff !important;
}

.result-card,
.option-card,
.provider-card,
.tcr-violation-card,
[class*="-card"] {
  border: 3px solid #111111 !important;
  box-shadow: 4px 4px 0 #111111 !important;
  border-radius: 0 !important;
  transition: box-shadow 0.1s, transform 0.1s !important;
}

.result-card:hover,
.option-card:hover,
.provider-card:hover {
  border-color: #ff5518 !important;
  box-shadow: 6px 6px 0 #ff5518 !important;
  transform: translateY(-2px) !important;
}

.option-card.selected,
.provider-card.selected,
.radio-option.selected {
  border-color: #ff5518 !important;
  background: rgba(255,85,24,0.06) !important;
  box-shadow: 6px 6px 0 #ff5518 !important;
}

/* TCR violation cards — keep semantic border colors, just enforce 3px solid */
.tcr-violation-card.blocking {
  border-color: #ef4444 !important;
  box-shadow: 4px 4px 0 #ef4444 !important;
}

.tcr-violation-card.warning {
  border-color: #f59e0b !important;
  box-shadow: 4px 4px 0 #f59e0b !important;
}

.tcr-violation-card.compliant {
  border-color: #10b981 !important;
  box-shadow: 4px 4px 0 #10b981 !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
button,
.btn,
[class*="btn-"],
[type="button"],
[type="submit"] {
  border-radius: 0 !important;
}

/* Primary / brand button */
.btn-brand,
button[class*="bg-brand"],
button[class*="bg-violet"],
button[class*="bg-purple"],
button[class*="bg-indigo"],
[class*="btn-primary"] {
  background: #ff5518 !important;
  color: #ffffff !important;
  border: 3px solid #111111 !important;
  box-shadow: 4px 4px 0 #111111 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  transition: box-shadow 0.1s, transform 0.1s !important;
}

.btn-brand:hover,
button[class*="bg-brand"]:hover,
button[class*="bg-violet"]:hover {
  background: #d63d05 !important;
  box-shadow: 6px 6px 0 #111111 !important;
  transform: translateY(-2px) !important;
}

.btn-brand:active,
button[class*="bg-brand"]:active {
  transform: scale(0.97) !important;
  box-shadow: 2px 2px 0 #111111 !important;
}

/* Secondary / white buttons */
button.bg-white,
button[class*="border-brand"],
button[class*="border-violet"],
button[class*="border-purple"],
button[class*="border-indigo"] {
  background: #ffffff !important;
  color: #ff5518 !important;
  border: 3px solid #ff5518 !important;
  box-shadow: 3px 3px 0 #ff5518 !important;
}

/* Destructive / gray buttons */
button.bg-slate-100,
button.bg-slate-200,
button[class*="bg-slate"] {
  background: #f4f1ec !important;
  color: #111111 !important;
  border: 3px solid #111111 !important;
  box-shadow: 3px 3px 0 #111111 !important;
}

/* ── Inputs / Selects / Textareas ───────────────────────────────────────────── */
input,
textarea,
select {
  border-radius: 0 !important;
  border: 2px solid #111111 !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  outline: none !important;
  transition: border-color 0.1s, box-shadow 0.1s !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #ff5518 !important;
  box-shadow: 3px 3px 0 #ff5518 !important;
  outline: none !important;
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
table {
  border-collapse: collapse !important;
  border: 2px solid #111111 !important;
}

th {
  background: #111111 !important;
  color: #ffffff !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border: 1px solid #111111 !important;
}

td {
  border: 1px solid #d0cac3 !important;
}

tr:hover td {
  background: rgba(255,85,24,0.04) !important;
}

/* ── Progress bars ──────────────────────────────────────────────────────────── */
.progress-bg {
  background: #d0cac3 !important;
  border-radius: 0 !important;
  border: 1px solid #111111 !important;
}

.progress-fill {
  background: #ff5518 !important;
  border-radius: 0 !important;
}

/* ── Sample message blocks ──────────────────────────────────────────────────── */
.sample-message {
  background: #f4f1ec !important;
  border-left: 5px solid #ff5518 !important;
  border: 2px solid #111111 !important;
  border-left: 5px solid #ff5518 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.8125rem !important;
}

/* ── Text gradient — strip gradient, use accent ──────────────────────────────── */
.text-gradient,
[class*="text-gradient"] {
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  color: #ff5518 !important;
  -webkit-text-fill-color: #ff5518 !important;
}

/* ── Tailwind brand-* purple purge ──────────────────────────────────────────── */
/* BG classes */
.bg-brand-900, .bg-brand-700, .bg-brand-600, .bg-brand-500 {
  background-color: #ff5518 !important;
  color: #ffffff !important;
}

.bg-brand-400 {
  background-color: rgba(255,85,24,0.7) !important;
  color: #ffffff !important;
}

.bg-brand-100 {
  background-color: rgba(255,85,24,0.1) !important;
}

.bg-brand-50 {
  background-color: rgba(255,85,24,0.06) !important;
}

/* Purple/violet/indigo BG */
.bg-violet-600, .bg-violet-500, .bg-violet-700, .bg-violet-900,
.bg-purple-600, .bg-purple-500, .bg-purple-700, .bg-purple-900,
.bg-indigo-600, .bg-indigo-500, .bg-indigo-700, .bg-indigo-900 {
  background-color: #ff5518 !important;
  color: #ffffff !important;
}

.bg-violet-100, .bg-violet-50,
.bg-purple-100, .bg-purple-50,
.bg-indigo-100, .bg-indigo-50 {
  background-color: rgba(255,85,24,0.08) !important;
}

/* Text classes */
.text-brand-600, .text-brand-700, .text-brand-900 {
  color: #ff5518 !important;
}

.text-brand-500, .text-brand-400 {
  color: #ff5518 !important;
}

.text-violet-600, .text-violet-700, .text-violet-900,
.text-purple-600, .text-purple-700, .text-purple-900,
.text-indigo-600, .text-indigo-700, .text-indigo-900 {
  color: #ff5518 !important;
}

.text-violet-500, .text-purple-500, .text-indigo-500 {
  color: #ff5518 !important;
}

/* Border classes */
.border-brand-600, .border-brand-500, .border-brand-700 {
  border-color: #ff5518 !important;
}

.border-violet-600, .border-violet-500,
.border-purple-600, .border-purple-500,
.border-indigo-600, .border-indigo-500 {
  border-color: #ff5518 !important;
}

/* Focus ring */
.focus\:ring-brand-500:focus,
.focus\:ring-violet-500:focus,
.focus\:ring-purple-500:focus,
.focus\:ring-indigo-500:focus {
  --tw-ring-color: #ff5518 !important;
}

/* Divide */
.divide-brand-100, .divide-brand-200 {
  border-color: #d0cac3 !important;
}

/* Ring */
.ring-brand-500, .ring-violet-500 {
  --tw-ring-color: #ff5518 !important;
}

/* ── Tier filters / badges ───────────────────────────────────────────────────── */
.tier-filter.active {
  background-color: #ff5518 !important;
  color: #ffffff !important;
  border: 2px solid #111111 !important;
}

.tier-badge {
  border-radius: 0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
}

/* ── Notyf toasts ───────────────────────────────────────────────────────────── */
.notyf__toast {
  border-radius: 0 !important;
  border: 3px solid #111111 !important;
  box-shadow: 4px 4px 0 #111111 !important;
}

/* ── Checklist / wizard option containers ────────────────────────────────────── */
.checklist-grid [class*="border"],
.option-card {
  border: 3px solid #111111 !important;
}

/* ── Alternative uses section ───────────────────────────────────────────────── */
.alternative-uses {
  background: rgba(255,85,24,0.06) !important;
  border: 3px solid #ff5518 !important;
  border-radius: 0 !important;
}

.alternative-uses h4 {
  color: #ff5518 !important;
}

/* ── Dark mode — map to brutalist dark ───────────────────────────────────────── */
/* Override dark mode CSS variables to use brutalist palette in dark context */
html.dark-mode {
  --bg-main:    #111111 !important;
  --bg-card:    #1a1a1a !important;
  --bg-nav:     #111111 !important;
  --bg-sidebar: #111111 !important;
  --bg-hover:   #222222 !important;
  --bg-active:  rgba(255,85,24,0.2) !important;
  --bg-header:  rgba(17,17,17,0.95) !important;
  --text-primary:   #f4f1ec !important;
  --text-secondary: #d0cac3 !important;
  --text-muted:     #6b6560 !important;
  --border:         rgba(244,241,236,0.3) !important;
  --border-light:   rgba(244,241,236,0.15) !important;
  --brand-primary:  #ff5518 !important;
  --brand-subtle:   rgba(255,85,24,0.15) !important;
  --brand-accent-hover: #ff5518 !important;
}

html.dark-mode body {
  background: #111111 !important;
  color: #f4f1ec !important;
}

html.dark-mode #app-content {
  background: #111111 !important;
}

html.dark-mode .bg-white {
  background: #1a1a1a !important;
  color: #f4f1ec !important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background: #222222 !important;
  border-color: rgba(244,241,236,0.4) !important;
  color: #f4f1ec !important;
}

html.dark-mode .result-card,
html.dark-mode .option-card,
html.dark-mode .provider-card {
  background: #1a1a1a !important;
  border-color: rgba(244,241,236,0.3) !important;
  box-shadow: 4px 4px 0 rgba(244,241,236,0.2) !important;
}

html.dark-mode .result-card:hover,
html.dark-mode .option-card:hover,
html.dark-mode .provider-card:hover {
  border-color: #ff5518 !important;
  box-shadow: 6px 6px 0 #ff5518 !important;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f4f1ec; }
::-webkit-scrollbar-thumb { background: #111111; border: 2px solid #f4f1ec; }
::-webkit-scrollbar-thumb:hover { background: #ff5518; }

/* ── Quill editor ───────────────────────────────────────────────────────────── */
.ql-toolbar,
.ql-container {
  border-radius: 0 !important;
  border: 2px solid #111111 !important;
}

.ql-toolbar {
  background: #f4f1ec !important;
  border-bottom: 2px solid #111111 !important;
}

/* ── Dashboard-specific overrides (dashboard.html purple scheme) ─────────────── */
/* dashboard.html uses #8F6DD6 / #2E1A47 / #A586FE */
[style*="#8F6DD6"],
[style*="#2E1A47"],
[style*="#A586FE"],
[style*="#a586fe"] {
  color: #ff5518 !important;
}

/* Gradient text used in dashboard */
.text-gradient,
[class*="bg-clip-text"] {
  -webkit-text-fill-color: #ff5518 !important;
  background-image: none !important;
}

/* Logo cloud shadow */
.logo-cloud {
  filter: drop-shadow(0 2px 0 #111111) !important;
}