/*
 * Fallback styling for older Android TV browsers and legacy WebViews that load
 * the app CSS file but fail to evaluate modern CSS color syntax (e.g. `hsl(h s l / a)`
 * or `rgb(r g b / a)` without commas), CSS variables in complex selectors,
 * or drop modern color declarations.
 *
 * This restores complete backgrounds, cards, sidebar colors, button states,
 * and badge tints across KDS, POS, and all client pages.
 */

html.no-css-vars-display,
html.no-css-vars-display body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.no-css-vars-display body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html.no-css-vars-display *,
html.no-css-vars-display *::before,
html.no-css-vars-display *::after {
  border-color: #e2e8f0;
}

/* ─── Links & Default Form Controls ────────────────────────────────────────── */
html.no-css-vars-display a {
  color: #166534;
}

html.no-css-vars-display input:not([type="checkbox"]):not([type="radio"]),
html.no-css-vars-display select,
html.no-css-vars-display textarea {
  color: #0f172a;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}

/* ─── Base Background & Surface Fallbacks ──────────────────────────────────── */
html.no-css-vars-display [class*="bg-background"],
html.no-css-vars-display [class*="bg-slate-50"] {
  background-color: #f8fafc !important;
}

html.no-css-vars-display [class*="text-foreground"],
html.no-css-vars-display [class*="text-slate-900"],
html.no-css-vars-display [class*="text-zinc-950"] {
  color: #0f172a !important;
}

html.no-css-vars-display [class*="bg-card"],
html.no-css-vars-display [class*="bg-white"] {
  background-color: #ffffff !important;
}

html.no-css-vars-display [class*="text-card-foreground"] {
  color: #0f172a !important;
}

html.no-css-vars-display [class*="bg-popover"] {
  background-color: #ffffff !important;
}

html.no-css-vars-display [class*="text-popover-foreground"] {
  color: #0f172a !important;
}

html.no-css-vars-display [class*="bg-muted"] {
  background-color: #f1f5f9 !important;
}

html.no-css-vars-display [class*="text-muted-foreground"],
html.no-css-vars-display [class*="text-slate-500"],
html.no-css-vars-display [class*="text-zinc-500"] {
  color: #64748b !important;
}

html.no-css-vars-display [class*="border-border"],
html.no-css-vars-display [class*="border-slate-200"],
html.no-css-vars-display [class*="border-zinc-200"] {
  border-color: #e2e8f0 !important;
}

html.no-css-vars-display [class*="border-input"] {
  border-color: #cbd5e1 !important;
}

/* ─── Primary, Secondary, Destructive Tokens ───────────────────────────────── */
html.no-css-vars-display [class*="text-primary"] {
  color: #059669 !important;
}

html.no-css-vars-display [class*="bg-primary"]:not([class*="bg-primary/"]) {
  background-color: #059669 !important;
}

html.no-css-vars-display [class*="text-primary-foreground"] {
  color: #ffffff !important;
}

html.no-css-vars-display [class*="bg-secondary"] {
  background-color: #e2e8f0 !important;
}

html.no-css-vars-display [class*="text-secondary-foreground"] {
  color: #0f172a !important;
}

html.no-css-vars-display [class*="bg-accent"] {
  background-color: #ecfdf5 !important;
}

html.no-css-vars-display [class*="text-accent-foreground"] {
  color: #065f46 !important;
}

html.no-css-vars-display [class*="bg-destructive"] {
  background-color: #dc2626 !important;
}

html.no-css-vars-display [class*="text-destructive"] {
  color: #dc2626 !important;
}

html.no-css-vars-display [class*="text-destructive-foreground"] {
  color: #ffffff !important;
}

/* ─── Standard Tailwind Colors & Button Fallbacks ──────────────────────────── */
html.no-css-vars-display [class*="bg-indigo-600"],
html.no-css-vars-display button[class*="bg-indigo-600"] {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
}

html.no-css-vars-display [class*="text-indigo-600"] {
  color: #4f46e5 !important;
}

html.no-css-vars-display [class*="bg-emerald-600"],
html.no-css-vars-display button[class*="bg-emerald-600"] {
  background-color: #059669 !important;
  color: #ffffff !important;
  border-color: #047857 !important;
}

html.no-css-vars-display [class*="bg-emerald-500"],
html.no-css-vars-display button[class*="bg-emerald-500"] {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

html.no-css-vars-display [class*="text-emerald-600"] {
  color: #059669 !important;
}

html.no-css-vars-display [class*="text-emerald-700"] {
  color: #047857 !important;
}

html.no-css-vars-display [class*="bg-amber-500"],
html.no-css-vars-display button[class*="bg-amber-500"] {
  background-color: #f59e0b !important;
  color: #ffffff !important;
}

html.no-css-vars-display [class*="bg-amber-600"],
html.no-css-vars-display button[class*="bg-amber-600"] {
  background-color: #d97706 !important;
  color: #ffffff !important;
}

html.no-css-vars-display [class*="text-amber-600"] {
  color: #d97706 !important;
}

html.no-css-vars-display [class*="text-amber-700"] {
  color: #b45309 !important;
}

html.no-css-vars-display [class*="text-amber-800"],
html.no-css-vars-display [class*="text-amber-900"] {
  color: #78350f !important;
}

html.no-css-vars-display [class*="bg-rose-600"],
html.no-css-vars-display button[class*="bg-rose-600"],
html.no-css-vars-display [class*="bg-red-600"],
html.no-css-vars-display button[class*="bg-red-600"] {
  background-color: #e11d48 !important;
  color: #ffffff !important;
}

html.no-css-vars-display [class*="text-rose-600"] {
  color: #e11d48 !important;
}

html.no-css-vars-display [class*="bg-slate-900"] {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

/* ─── Alpha / Translucent Badges Fallbacks ─────────────────────────────────── */
html.no-css-vars-display [class*="bg-amber-500/"],
html.no-css-vars-display [class*="bg-amber-50"] {
  background-color: #fef3c7 !important;
  border-color: #fde68a !important;
}

html.no-css-vars-display [class*="bg-emerald-500/"],
html.no-css-vars-display [class*="bg-emerald-50"] {
  background-color: #d1fae5 !important;
  border-color: #a7f3d0 !important;
}

html.no-css-vars-display [class*="bg-indigo-500/"],
html.no-css-vars-display [class*="bg-indigo-50"] {
  background-color: #e0e7ff !important;
  border-color: #c7d2fe !important;
}

html.no-css-vars-display [class*="bg-rose-500/"],
html.no-css-vars-display [class*="bg-rose-50"] {
  background-color: #ffe4e6 !important;
  border-color: #fecdd3 !important;
}

/* ─── Layout, Sidebar & Navigation ─────────────────────────────────────────── */
html.no-css-vars-display header,
html.no-css-vars-display nav,
html.no-css-vars-display aside,
html.no-css-vars-display main,
html.no-css-vars-display section,
html.no-css-vars-display article {
  color: inherit;
}

/* Left Navigation Sidebar styling */
html.no-css-vars-display aside,
html.no-css-vars-display div[class*="bg-[hsl(var(--sidebar-bg"] {
  background-color: #064e3b !important;
  color: #ffffff !important;
  border-right: 1px solid #047857 !important;
}

html.no-css-vars-display aside a,
html.no-css-vars-display div[class*="bg-[hsl(var(--sidebar-bg"] a {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.no-css-vars-display aside a:hover,
html.no-css-vars-display div[class*="bg-[hsl(var(--sidebar-bg"] a:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

html.no-css-vars-display header[class*="bg-card"],
html.no-css-vars-display header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* ─── Tables, Dialogs & Modals ─────────────────────────────────────────────── */
html.no-css-vars-display table {
  background-color: #ffffff;
  color: #0f172a;
}

html.no-css-vars-display th {
  background-color: #f8fafc;
  color: #334155;
  border-color: #e2e8f0 !important;
}

html.no-css-vars-display td {
  border-color: #e2e8f0 !important;
}

html.no-css-vars-display [role="dialog"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html.no-css-vars-display [data-state="open"][class*="bg-black"],
html.no-css-vars-display [class*="bg-black/60"] {
  background-color: rgba(15, 23, 42, 0.65) !important;
}

html.no-css-vars-display img {
  opacity: 1;
}