/**
 * Crimson Wave ERP — Premium Maroon + Dark Royal Blue + White Soft 3D theme
 * Loaded after the compiled Vite bundle. Tokens only; no layout/behavior changes.
 */

:root {
  --brand-maroon: #AE2129;
  --brand-maroon-hover: #971B23;
  --brand-maroon-dark: #7E161D;
  --brand-maroon-soft: #F9E9EA;
  --brand-maroon-light: #FDF4F4;
  --brand-maroon-border: #EBC4C7;
  --brand-maroon-bright: #BE2A33;

  --brand-blue: #161C34;
  --brand-blue-hover: #202946;
  --brand-blue-medium: #293555;
  --brand-blue-soft: #EEF1F8;
  --brand-blue-light: #F5F7FC;
  --brand-blue-border: #CBD2E2;
  --brand-blue-muted: #445378;
  --brand-blue-mist: #8994B0;

  --white: #FFFFFF;
  --warm-white: #FAFAF9;
  --background: #F5F5F3;
  --surface: #FFFFFF;
  --surface-alt: #F0F1F4;
  --border: #E3E5EA;
  --text-primary: #161C34;
  --text-secondary: #646978;
  --text-muted: #969BA7;

  --status-success: #27966D;
  --status-warning: #D99B31;
  --status-danger: #D84A4A;
  --status-info: #3C72C8;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius: 18px;
  --radius-2xl: 28px;

  --shadow-card:
    0 18px 45px rgba(22, 28, 52, 0.08),
    0 5px 14px rgba(22, 28, 52, 0.05);
  --shadow-card-hover:
    0 22px 50px rgba(22, 28, 52, 0.10),
    0 8px 18px rgba(22, 28, 52, 0.06);
  --shadow-blue: 0 8px 18px rgba(22, 28, 52, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --shadow-maroon: 0 8px 18px rgba(174, 33, 41, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);

  --font-sans: Inter, Manrope, "IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display: Manrope, Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  /* Map compiled Tailwind / shadcn tokens */
  --navy: #161C34;
  --navy-foreground: #FFFFFF;
  --crimson: #AE2129;
  --crimson-foreground: #FFFFFF;
  --color-navy: #161C34;
  --color-crimson: #AE2129;
  --color-primary: #161C34;
  --color-background: #F5F5F3;
  --color-card: #FFFFFF;
  --color-foreground: #161C34;
  --foreground: #161C34;
  --card: #FFFFFF;
  --card-foreground: #161C34;
  --muted: #EEF1F8;
  --muted-foreground: #646978;
  --primary: #161C34;
  --primary-foreground: #FFFFFF;
  --secondary: #EEF1F8;
  --secondary-foreground: #161C34;
  --accent: #AE2129;
  --accent-foreground: #FFFFFF;
  --destructive: #D84A4A;
  --destructive-foreground: #FFFFFF;
  --input: #E3E5EA;
  --ring: #293555;
  --popover: #FFFFFF;
  --popover-foreground: #161C34;
  --sidebar: #161C34;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #AE2129;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #202946;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #293555;
  --sidebar-ring: #AE2129;
  --surface: #FFFFFF;

  --ams-primary: #AE2129;
  --ams-secondary: #161C34;
  --ams-sidebar: #161C34;
  --ams-button: #AE2129;
  --ams-text: #161C34;
  --ams-surface: #FFFFFF;
  --ams-muted: #646978;
  --ams-border: #E3E5EA;
  --ams-soft: #F5F7FC;
}

.dark {
  --background: #161C34;
  --foreground: #FFFFFF;
  --card: #202946;
  --card-foreground: #FFFFFF;
  --muted: #293555;
  --muted-foreground: #CBD2E2;
  --border: #293555;
  --primary: #EEF1F8;
  --primary-foreground: #161C34;
  --secondary: #293555;
  --secondary-foreground: #FFFFFF;
  --accent: #AE2129;
  --popover: #202946;
  --popover-foreground: #FFFFFF;
  --sidebar: #121528;
  --sidebar-foreground: #FFFFFF;
  --navy: #EEF1F8;
  --navy-foreground: #161C34;
  --surface: #202946;
  --color-background: #161C34;
  --color-card: #202946;
  --color-foreground: #FFFFFF;
  --ams-text: #FFFFFF;
  --ams-surface: #202946;
  --text-primary: #FFFFFF;
  --text-secondary: #CBD2E2;
  --text-muted: #8994B0;
  --input: #293555;
  --surface-alt: #293555;
  --ams-muted: #8994B0;
  --ams-border: #293555;
  --ams-soft: #202946;
}

/* ---------- Base canvas ---------- */
html,
body,
#app {
  background-color: var(--background);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

body.ams-premium {
  background:
    radial-gradient(1200px 420px at 0% -10%, rgba(174, 33, 41, 0.05), transparent 55%),
    radial-gradient(900px 380px at 100% 0%, rgba(22, 28, 52, 0.06), transparent 50%),
    var(--background);
}

h1, h2, h3, h4 {
  /* Was a constant --brand-blue (never flips) — every heading in the app
     rendered dark navy on the now-correctly-dark canvas, i.e. invisible.
     --text-primary carries the identical value in light mode (#161C34) so
     this changes nothing there, and correctly flips to white in dark mode. */
  color: var(--text-primary);
  font-family: var(--font-display);
}
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4,
.bg-crimson h1, .bg-crimson h2, .bg-crimson h3,
.bg-sidebar h1, .bg-sidebar h2, .bg-sidebar h3,
.bg-primary h1, .bg-primary h2 {
  color: #fff;
}

.bg-background { background-color: var(--background) !important; }
.bg-card { background-color: var(--card) !important; }
.bg-surface { background-color: var(--surface-alt) !important; }
.bg-muted { background-color: var(--muted) !important; }
.text-foreground { color: var(--foreground) !important; }
.text-muted-foreground { color: var(--text-secondary) !important; }
.border-border { border-color: var(--border) !important; }

.bg-crimson {
  background-color: var(--brand-maroon) !important;
  color: #fff !important;
}
.bg-crimson:hover,
.hover\:bg-crimson\/90:hover {
  background-color: var(--brand-maroon-hover) !important;
}
.text-crimson { color: var(--brand-maroon) !important; }
.text-crimson-foreground { color: #fff !important; }
.border-crimson { border-color: var(--brand-maroon) !important; }

.bg-navy {
  background-color: var(--brand-blue) !important;
  color: #fff !important;
}
.text-navy { color: var(--brand-blue) !important; }
html.dark .text-navy { color: #FFFFFF !important; }
/* Tailwind opacity-modifier utilities (bg-surface/50 etc.) compile to their
   own literal rgba() rule rather than reading our --surface-alt override, so
   they don't pick up the dark-mode token fixes above at all — confirmed on
   the mobile app upload card (Settings), white card + near-white text. */
html.dark .bg-surface\/50 { background-color: rgba(32, 41, 70, 0.5) !important; }
html.dark .bg-surface\/40 { background-color: rgba(32, 41, 70, 0.4) !important; }
html.dark .bg-surface\/60 { background-color: rgba(32, 41, 70, 0.6) !important; }
html.dark .bg-surface\/70 { background-color: rgba(32, 41, 70, 0.7) !important; }
html.dark .bg-surface\/80 { background-color: rgba(32, 41, 70, 0.8) !important; }
html.dark .bg-surface\/90 { background-color: rgba(32, 41, 70, 0.9) !important; }
.text-navy-foreground { color: #fff !important; }
.border-navy { border-color: var(--brand-blue) !important; }

.bg-primary { background-color: var(--brand-blue) !important; color: #fff !important; }
.bg-accent { background-color: var(--brand-maroon) !important; color: #fff !important; }
.bg-destructive { background-color: var(--status-danger) !important; color: #fff !important; }

/* ---------- Soft 3D cards ---------- */
.bg-card,
.rounded-xl.border.border-border,
.rounded-2xl.border,
.shadow-sm.bg-card,
.ams-section,
.ams-wa-panel,
.ams-workspace .ams-card {
  border-radius: var(--radius-lg) !important;
  background: var(--white);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(22, 28, 52, 0.06);
}

/* This is the single most common "card" pattern in the compiled bundle
   (every rounded-xl/rounded-2xl bordered panel, plus our own .ams-section /
   .ams-wa-panel), and it was hardcoded to the constant --white with a
   near-invisible dark-tinted border — the root cause of "random white cards"
   and "invisible borders" across the whole app in dark mode, not just one
   page. Every element matched above needs the exact same dark treatment. */
html.dark .bg-card,
html.dark .rounded-xl.border.border-border,
html.dark .rounded-2xl.border,
html.dark .shadow-sm.bg-card,
html.dark .ams-section,
html.dark .ams-wa-panel,
html.dark .ams-workspace .ams-card {
  background: var(--card, #202946) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35), 0 5px 14px rgba(0, 0, 0, 0.25) !important;
}

.rounded-2xl.bg-navy,
.rounded-2xl.bg-navy.text-navy-foreground {
  background: linear-gradient(145deg, #202946, #161C34) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(22, 28, 52, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Public homepage navy hero: restore dark glass stats card.
   Global .rounded-2xl.border paints these panels white, which hides
   navy-foreground / white copy. Keep admin WhatsApp + login cards untouched. */
body.ams-public section.bg-navy .rounded-2xl.border.backdrop-blur-xl,
body.ams-public section.bg-navy .rounded-2xl.border[class*="bg-white/"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 24px 48px rgba(8, 12, 28, 0.32);
  color: #fff !important;
}

body.ams-public section.bg-navy .rounded-2xl.border.backdrop-blur-xl :is(.text-foreground, .text-navy, .text-navy-foreground),
body.ams-public section.bg-navy .rounded-2xl.border[class*="bg-white/"] :is(.text-foreground, .text-navy, .text-navy-foreground) {
  color: #fff !important;
}

body.ams-public section.bg-navy .rounded-2xl.border.backdrop-blur-xl .text-muted-foreground,
body.ams-public section.bg-navy .rounded-2xl.border[class*="bg-white/"] .text-muted-foreground {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* Dashboard metric cards with left accent */
.relative.overflow-hidden.rounded-xl.border.border-border.bg-card {
  border-radius: 22px !important;
}

/* ---------- Sidebar ---------- */
aside.bg-sidebar,
.bg-sidebar:not(.ams-lc-sidebar):not(.ams-lc-desk):not(.ams-wa-list-wrap) {
  background: linear-gradient(180deg, #202946 0%, #161C34 100%) !important;
  color: #fff !important;
  border-color: #293555 !important;
  box-shadow: 8px 0 32px rgba(22, 28, 52, 0.18);
}

aside.bg-sidebar a,
.bg-sidebar a,
.bg-sidebar button {
  border-radius: 14px !important;
  color: rgba(255, 255, 255, 0.78);
}

aside.bg-sidebar a:hover,
.bg-sidebar a:hover,
.bg-sidebar button:hover {
  background: var(--brand-blue-hover) !important;
  color: #fff !important;
}

aside.bg-sidebar a.bg-crimson,
.bg-sidebar a.bg-crimson,
.bg-sidebar button.bg-crimson,
aside.bg-sidebar [aria-current="page"] {
  background: var(--brand-maroon) !important;
  color: #fff !important;
  box-shadow: var(--shadow-maroon);
}

/* ---------- Floating white navbar ---------- */
header.sticky {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px);
  border-color: rgba(22, 28, 52, 0.06) !important;
  box-shadow: 0 8px 24px rgba(22, 28, 52, 0.06);
  color: var(--brand-blue);
}

html.dark header.sticky,
html.dark header.border-b {
  background: rgba(32, 41, 70, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  color: #EEF1F8;
}

body.ams-admin header.sticky,
body.ams-admin header.border-b {
  border-radius: 18px;
  margin: 10px 14px 0;
  width: auto;
}

/* ---------- Buttons ---------- */
main button.bg-crimson,
main a.bg-crimson,
.ams-wa-btn.primary,
.ams-wa-composer button[type="submit"] {
  background: var(--brand-maroon) !important;
  color: #fff !important;
  border-radius: 14px !important;
  border-color: var(--brand-maroon) !important;
  box-shadow: var(--shadow-maroon);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

main button.bg-navy,
main button.bg-primary,
main a.bg-navy {
  background: var(--brand-blue) !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-blue);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

main button.bg-crimson:hover,
main a.bg-crimson:hover,
.ams-wa-btn.primary:hover {
  background: var(--brand-maroon-hover) !important;
  transform: translateY(-1px);
}

main button.bg-navy:hover,
main button.bg-primary:hover {
  background: var(--brand-blue-hover) !important;
  transform: translateY(-1px);
}

main button.bg-crimson:active,
main button.bg-navy:active,
main button.bg-primary:active,
.ams-wa-btn.primary:active {
  transform: translateY(1px);
}

button.bg-destructive,
.ams-row-btn.danger {
  background: var(--status-danger) !important;
  color: #fff !important;
}

/* Outline / ghost */
button[class*="variant"],
button.border.bg-background,
button.bg-secondary {
  border-radius: 14px;
}

/* ---------- Forms ---------- */
main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
main select,
main textarea,
.ams-section input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ams-section select,
.ams-section textarea,
.ams-wa-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ams-wa-form select,
.ams-wa-form textarea,
#ams-wa-settings .ams-wa-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#ams-wa-settings .ams-wa-form select,
#ams-wa-settings .ams-wa-form textarea {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: #161C34 !important;
  caret-color: #161C34 !important;
  min-height: 44px;
  width: 100%;
}

main input:focus,
main select:focus,
main textarea:focus,
.ams-section input:focus,
.ams-section select:focus,
.ams-section textarea:focus,
.ams-wa-form input:focus,
.ams-wa-form select:focus,
.ams-wa-form textarea:focus {
  border-color: var(--brand-blue-medium) !important;
  box-shadow: 0 0 0 4px rgba(22, 28, 52, 0.10) !important;
  outline: none !important;
}

/* ---------- Tables ---------- */
main table,
.ams-table {
  color: var(--text-primary);
}

main thead,
.ams-table thead {
  background: var(--brand-blue-soft);
}

main tbody tr {
  border-color: var(--border);
}

main tbody tr:hover {
  background: var(--brand-blue-light);
}

main .overflow-x-auto,
main .overflow-auto:has(table) {
  border-radius: 20px;
}

/* ---------- Modals ---------- */
.bg-black\/80,
.fixed.inset-0.z-50.bg-black\/80 {
  background: rgba(22, 28, 52, 0.32) !important;
  backdrop-filter: blur(8px);
}

.ams-modal {
  background: rgba(22, 28, 52, 0.32) !important;
  backdrop-filter: blur(8px);
}

.ams-modal .box,
[role="dialog"] {
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(22, 28, 52, 0.28);
}

/* ---------- Status (do not reuse brand maroon for danger) ---------- */
.text-emerald-600, .text-green-600, .bg-emerald-500 { color: var(--status-success); }
.bg-emerald-500 { background-color: var(--status-success) !important; }
.text-amber-600, .text-yellow-600 { color: var(--status-warning); }
.text-red-600, .text-rose-600 { color: var(--status-danger); }
.text-blue-600, .text-sky-600 { color: var(--status-info); }

/* ---------- Auth / login ---------- */
body.ams-auth {
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(174, 33, 41, 0.08), transparent 50%),
    radial-gradient(800px 480px at 100% 100%, rgba(22, 28, 52, 0.10), transparent 46%),
    #F5F5F3;
}

body.ams-auth::after {
  content: "";
  position: fixed;
  left: -8%;
  right: -8%;
  bottom: -12%;
  height: 28vh;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(174, 33, 41, 0.16), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(22, 28, 52, 0.12), transparent 50%);
  z-index: 0;
}

body.ams-auth #app {
  position: relative;
  z-index: 1;
}

body.ams-auth #app .rounded-xl,
body.ams-auth #app .rounded-2xl,
body.ams-auth #app .bg-card {
  border-radius: 28px !important;
  box-shadow: var(--shadow-card);
}

/* ---------- Overlay modules (WhatsApp, live chat, workspace) ---------- */
.ams-workspace,
.ams-section,
.ams-wa-root {
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.ams-wa-root {
  --wa-navy: #161C34;
  --wa-crimson: #AE2129;
  --wa-muted: #646978;
  --wa-border: #E3E5EA;
  --wa-soft: #F5F7FC;
  --wa-in: #FFFFFF;
  --wa-out: #F9E9EA;
  color: #161C34;
}

#ams-wa-settings .ams-wa-form label,
#ams-wa-settings .ams-wa-form .full,
.ams-wa-form label {
  display: flex !important;
  visibility: visible !important;
  color: #161C34 !important;
  background: transparent !important;
  opacity: 1 !important;
}

#ams-wa-slot.ams-wa-slot-fallback,
body.ams-overlay-page.ams-wa-fixed-fallback #ams-wa-slot {
  position: fixed !important;
  z-index: 40 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#ams-wa-slot:not(.ams-wa-slot-fallback) {
  position: relative;
  z-index: 1;
}

.ams-wa-btn.primary,
.ams-wa-composer button[type="submit"] {
  background: var(--brand-maroon) !important;
  box-shadow: var(--shadow-maroon);
}

#ams-brand-tools-toggle {
  background: var(--brand-blue);
  border-radius: 999px;
  box-shadow: var(--shadow-blue);
}

/* Chatbot */
#ams-chat-toggle {
  background: var(--brand-maroon) !important;
  box-shadow: var(--shadow-maroon) !important;
  border-radius: 16px !important;
}
#ams-chat-panel {
  border-radius: 22px !important;
  box-shadow: var(--shadow-card) !important;
  border-color: var(--border) !important;
}
#ams-chat-head {
  background: linear-gradient(145deg, #BE2A33, #AE2129) !important;
}
#ams-chat-chooser {
  z-index: 2147483600 !important;
  background: #fff !important;
  color: #161C34 !important;
  border: 1px solid var(--border, #E3E5EA) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-card, 0 18px 40px rgba(22, 28, 52, 0.14)) !important;
}
#ams-chat-chooser .ams-chat-choose-live {
  background: var(--brand-maroon, #AE2129) !important;
  color: #fff !important;
}
#ams-chat-chooser .ams-chat-choose-wa {
  background: var(--brand-blue, #161C34) !important;
  color: #fff !important;
}
body.ams-public button[data-ams-hidden-chat-fab],
body.ams-public a[data-ams-hidden-chat-fab] {
  display: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  body.ams-admin header.sticky,
  body.ams-admin header.border-b {
    margin: 8px;
    border-radius: 16px;
  }

  /* Admin page title: one line in h-16, not crushed between hamburger and controls */
  body.ams-admin header.sticky.top-0 {
    height: 4rem;
    max-height: 4rem;
    align-items: center;
  }

  body.ams-admin header.sticky.top-0 > button {
    flex-shrink: 0;
  }

  body.ams-admin header.sticky.top-0 > div:has(> h1) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  body.ams-admin header.sticky.top-0 > div:last-child:not(:has(> h1)) {
    flex: 0 0 auto;
  }

  body.ams-admin header.sticky.top-0 h1 {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
}

@media (max-width: 760px) {
  .ams-section,
  .ams-wa-panel,
  .bg-card {
    border-radius: 18px !important;
  }

  main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  main select,
  main textarea {
    width: 100%;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  main button,
  .ams-wa-btn {
    transition: none !important;
    transform: none !important;
  }
}