/**
 * 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;
}

/* ---------- 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 {
  color: var(--brand-blue);
  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; }
.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);
}

.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 {
  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);
}

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 {
  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;
  }
}