/* Rush Wash design system — tokens, fonts and base rules for whatsapp.rush.com.sa
   Source: Rush Wash design system (tokens.json). Light is the default theme;
   dark applies when <html data-theme="dark"> (and class="dark" for Tailwind). */

@font-face { font-family: "HelveticaNeueLTStd"; src: url("/static/brand/fonts/HelveticaNeueLTStd-Roman.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "HelveticaNeueLTStd"; src: url("/static/brand/fonts/HelveticaNeueLTStd-Md.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "HelveticaNeueLTStd"; src: url("/static/brand/fonts/HelveticaNeueLTStd-Hv.otf") format("opentype"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Swissra"; src: url("/static/brand/fonts/Swissra-Normal.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Swissra"; src: url("/static/brand/fonts/Swissra-Medium.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Swissra"; src: url("/static/brand/fonts/Swissra-Bold.otf") format("opentype"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "rush-icons"; src: url("/static/brand/fonts/rush-icons.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  /* Colour channels ("r g b") so Tailwind can apply alpha: rgb(var(--x) / .5) */
  --background-rgb: 249 250 251;
  --foreground-rgb: 28 28 30;
  --card-rgb: 255 255 255;
  --secondary-rgb: 243 244 246;
  --muted-rgb: 249 250 251;
  --muted-foreground-rgb: 107 114 128;
  --accent-rgb: 254 242 242;
  --border-rgb: 229 231 235;
  --primary-rgb: 201 30 47;
  --primary-hover-rgb: 176 24 38;
  --destructive-rgb: 220 38 38;
  --success-rgb: 22 163 74;
  --link-rgb: 37 99 235;
  --warning-rgb: 180 83 9;

  --success-text: #15803d;
  --warning-text: #b45309;
  --danger-text: #dc2626;
  --info-text: #2563eb;

  --background: rgb(var(--background-rgb));
  --foreground: rgb(var(--foreground-rgb));
  --card: rgb(var(--card-rgb));
  --card-foreground: var(--foreground);
  --popover: #ffffff;
  --popover-foreground: var(--foreground);
  --primary: rgb(var(--primary-rgb));
  --primary-foreground: #ffffff;
  --secondary: rgb(var(--secondary-rgb));
  --secondary-foreground: var(--foreground);
  --muted: rgb(var(--muted-rgb));
  --muted-foreground: rgb(var(--muted-foreground-rgb));
  --accent: rgb(var(--accent-rgb));
  --accent-foreground: #c91e2f;
  --destructive: rgb(var(--destructive-rgb));
  --destructive-foreground: #ffffff;
  --success: rgb(var(--success-rgb));
  --link: rgb(var(--link-rgb));
  --border: rgb(var(--border-rgb));
  --ring: rgb(var(--primary-rgb));
  --chart-1: #c91e2f; --chart-2: #16a34a; --chart-3: #2563eb; --chart-4: #dc2626; --chart-5: #6b7280;
  --sidebar: #ffffff; --sidebar-foreground: #1c1c1e; --sidebar-primary: #c91e2f;
  --sidebar-accent: #fef2f2; --sidebar-border: #e5e7eb;

  --brand-red: #c91e2f; --brand-black: #000000; --brand-gray: #f2f2f2;
  --radius-sm: 6.5px; --radius-md: 8.5px; --radius-lg: 10.5px; --radius-xl: 14.5px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);

  --font-sans: "HelveticaNeueLTStd", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-arabic: "Swissra", Cairo, "Noto Sans Arabic", sans-serif;
  --font-icons: "rush-icons";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Legacy aliases so existing rules keep working (main UI "wa-*", cron dashboard) */
  --wa-bg-deep: var(--background);
  --wa-panel-bg: var(--card);
  --wa-surface: var(--secondary);
  --wa-border: var(--border);
  --wa-green: var(--primary);
  --wa-green-bright: var(--primary);
  --wa-text-primary: var(--foreground);
  --wa-text-secondary: var(--muted-foreground);
  --rush-red: var(--primary);
  --rush-red-glow: rgba(201, 30, 47, 0.18);
  --bg-deep: var(--background);
  --bg-card: var(--card);
  --bg-card-hover: var(--secondary);
  --bg-glass: var(--card);
  --border-color: var(--border);
  --border-highlight: #d1d5db;
  --emerald: var(--success);
  --emerald-glow: rgba(22, 163, 74, 0.2);
  --amber: #b45309;
  --sky: var(--link);
  --purple: #6b7280;
  --text-main: var(--foreground);
  --text-muted: var(--muted-foreground);
  --text-sub: #6b7280;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --background-rgb: 11 11 15;
  --foreground-rgb: 244 244 245;
  --card-rgb: 19 19 24;
  --secondary-rgb: 31 31 38;
  --muted-rgb: 24 24 31;
  --muted-foreground-rgb: 156 163 175;
  --accent-rgb: 31 31 38;
  --border-rgb: 35 35 41;
  --primary-rgb: 230 57 70;
  --primary-hover-rgb: 214 40 54;
  --destructive-rgb: 220 38 38;
  --success-rgb: 34 197 94;
  --link-rgb: 96 165 250;
  --warning-rgb: 245 158 11;
  --success-text: #22c55e;
  --warning-text: #f59e0b;
  --danger-text: #f87171;
  --info-text: #60a5fa;

  --popover: #16161c;
  --accent-foreground: #f4f4f5;
  --chart-1: #e63946; --chart-2: #22c55e; --chart-3: #3b82f6; --chart-4: #f59e0b; --chart-5: #a1a1aa;
  --sidebar: #0f0f14; --sidebar-foreground: #e4e4e7; --sidebar-primary: #e63946;
  --sidebar-accent: #1a1a21; --sidebar-border: #1f1f26;
  --rush-red-glow: rgba(230, 57, 70, 0.25);
  --border-highlight: #2c2c35;
  --emerald-glow: rgba(34, 197, 94, 0.25);
  --amber: #f59e0b;
  --purple: #a1a1aa;
  --text-sub: #9ca3af;

  color-scheme: dark;
}

html { font-size: 14px; }
body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); }
h1, h2, h3, h4 { font-weight: 500; }
.font-arabic, [lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); }
code, pre, kbd, samp, .font-mono { font-family: var(--font-mono); }
::selection { background: rgb(var(--primary-rgb) / .2); }

/* Focus: primary ring (buttons/links), primary border (inputs) */
:focus-visible { outline: 3px solid rgb(var(--primary-rgb) / .5); outline-offset: 1px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* Inputs: tint-based state model (default 5% foreground, focus 6% primary) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
textarea, select {
  background-color: rgb(var(--foreground-rgb) / .05);
  color: var(--foreground);
  border-color: transparent;
  border-radius: var(--radius-md);
}
input::placeholder, textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
textarea:focus, select:focus {
  background-color: rgb(var(--primary-rgb) / .06);
  border-color: var(--primary);
  box-shadow: none;
}
input:disabled, textarea:disabled, select:disabled { opacity: .4; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px rgb(var(--card-rgb)) inset; -webkit-text-fill-color: var(--foreground); }

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--border-highlight); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Cards / panels: solid, 1px border, hairline shadow (no glass, no glow) */
.glass-panel { background: var(--card); backdrop-filter: none; box-shadow: var(--shadow-card); }

/* Skeleton-first loading */
@keyframes rw-skeleton { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 1; } }
.rw-skeleton { background: var(--secondary); border-radius: var(--radius-md); animation: rw-skeleton 1.4s ease-in-out infinite; }

/* Rush icon font */
.rw-icon { font-family: var(--font-icons); font-size: 24px; line-height: 1; font-style: normal; }

/* Theme toggle button (shared across pages) */
.rw-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--card); color: var(--muted-foreground);
  border: 1px solid var(--border); cursor: pointer; transition: background .15s, color .15s;
}
.rw-theme-toggle:hover { background: var(--accent); color: var(--primary); }
.rw-theme-toggle svg { width: 16px; height: 16px; }
.rw-theme-toggle .rw-sun { display: none; }
:root[data-theme="dark"] .rw-theme-toggle .rw-sun { display: block; }
:root[data-theme="dark"] .rw-theme-toggle .rw-moon { display: none; }

/* ------------------------------------------------------------------
   Tailwind-utility bridges for the main dashboard (legacy hard-coded
   dark-UI utilities remapped to design-system tokens)
   ------------------------------------------------------------------ */

/* Gradients -> solid primary (design system forbids gradients) */
[class*="bg-gradient-to-"][class*="text-white"] { background-image: none; background-color: var(--primary); }
[class*="bg-gradient-to-"][class*="text-white"]:hover { background-color: rgb(var(--primary-hover-rgb)); }
[class*="bg-gradient-to-"]:not([class*="text-white"]) { background-image: none; }

/* text-white was written for dark surfaces: follow foreground, keep white on filled controls */
html:not(.dark) .text-white { color: var(--foreground); }
html:not(.dark) :is(button, a, span, div, label, i)[class*="bg-wa-green"].text-white,
html:not(.dark) :is(button, a, span, div, label, i)[class*="bg-rush-red"].text-white,
html:not(.dark) :is(button, a, span, div, label)[class*="bg-gradient-to-"].text-white,
html:not(.dark) :is(button, a, span, div, label)[class*="bg-emerald-"].text-white,
html:not(.dark) :is(button, a, span, div, label)[class*="bg-blue-"].text-white,
html:not(.dark) :is(button, a, span, div, label)[class*="bg-indigo-"].text-white,
html:not(.dark) :is(button, a, span, div, label)[class*="bg-purple-"].text-white,
html:not(.dark) :is(button, a, span, div, label)[class*="bg-red-"].text-white,
html:not(.dark) :is(button, a, span, div, label)[class*="bg-rose-"].text-white,
html:not(.dark) :is(button, a, span, div, label)[class*="bg-amber-"].text-white,
html:not(.dark) :is(button, a, span, div, label)[class*="bg-yellow-"].text-white { color: #ffffff; }
html:not(.dark) .hover\:text-white:hover { color: var(--primary); }

/* Pastel -400/-300 status text is unreadable on light surfaces: use darker hues */
html:not(.dark) .text-emerald-400, html:not(.dark) .text-emerald-300 { color: #15803d; }
html:not(.dark) .text-amber-400, html:not(.dark) .text-amber-300, html:not(.dark) .text-yellow-400, html:not(.dark) .text-yellow-300 { color: #b45309; }
html:not(.dark) .text-rose-400, html:not(.dark) .text-red-400 { color: #dc2626; }
html:not(.dark) .text-sky-400, html:not(.dark) .text-sky-300, html:not(.dark) .text-blue-400, html:not(.dark) .text-blue-300 { color: #2563eb; }
html:not(.dark) .text-indigo-400, html:not(.dark) .text-indigo-300, html:not(.dark) .text-purple-400, html:not(.dark) .text-purple-300 { color: #4b5563; }
html:not(.dark) .text-cyan-400, html:not(.dark) .text-cyan-300, html:not(.dark) .text-teal-400, html:not(.dark) .text-teal-300 { color: #2563eb; }
html:not(.dark) .text-orange-400, html:not(.dark) .text-orange-300 { color: #b45309; }
html:not(.dark) [class*="text-purple-200"], html:not(.dark) [class*="text-indigo-200"], html:not(.dark) [class*="text-blue-200"] { color: #4b5563; }
html:not(.dark) .text-gray-400 { color: #6b7280; }
html:not(.dark) .border-white\/10 { border-color: var(--border); }
html:not(.dark) .bg-black\/30 { background-color: rgb(0 0 0 / .06); }

/* Chat bubbles: incoming = secondary, outgoing = primary */
.wa-bubble-in { background-color: var(--secondary); color: var(--foreground); border-radius: 2px 12px 12px 12px; }
.wa-bubble-out { background-color: var(--primary); color: #ffffff; border-radius: 12px 2px 12px 12px; }

/* Phone mockup frame */
.phone-mockup { border-color: var(--foreground); box-shadow: var(--shadow-card); background: var(--background); }