/**
 * ==============================================================================
 * Apotheca Modern Noir & Crimson (Option 1) Design System
 * Chatwoot Webhook, Widget & Admin Dashboard Custom Stylesheet
 *
 * Core Palette:
 * - Obsidian Noir Base:      #0A0A0C
 * - Dark Charcoal Surface:   #121214
 * - Card Charcoal Elevation: #18181B
 * - Graphite Borders:        #27272A
 * - Muted Border / Subtle:   #3F3F46
 * - Rich Crimson:            #9E1A21
 * - Crimson Dark (Hover):    #7F1319
 * - Crimson Light / Bright:  #B91C1C / #DC2626
 * - Crimson Glow:            rgba(158, 26, 33, 0.35)
 * - High-Contrast Pure White: #FFFFFF
 * ==============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   1. Root Design Tokens & Tailwind / Chatwoot Variable Overrides
   ========================================================================== */

:root,
html,
body,
[data-theme="dark"],
[data-theme="light"],
.dark,
.light {
  /* Core Brand Tokens */
  --apotheca-noir: #0A0A0C;
  --apotheca-noir-surface: #121214;
  --apotheca-noir-card: #18181B;
  --apotheca-noir-border: #27272A;
  --apotheca-noir-subtle: #3F3F46;

  --apotheca-crimson: #9E1A21;
  --apotheca-crimson-hover: #7F1319;
  --apotheca-crimson-light: #B91C1C;
  --apotheca-crimson-bright: #DC2626;
  --apotheca-crimson-glow: rgba(158, 26, 33, 0.35);
  --apotheca-crimson-subtle: rgba(158, 26, 33, 0.15);
  --apotheca-crimson-muted: rgba(158, 26, 33, 0.08);

  --apotheca-white: #FFFFFF;
  --apotheca-neutral-50: #FFFFFF;
  --apotheca-neutral-100: #F4F4F5;
  --apotheca-neutral-200: #E4E4E7;
  --apotheca-neutral-300: #D4D4D8;
  --apotheca-text-primary: #FFFFFF;
  --apotheca-text-secondary: #D4D4D8;
  --apotheca-text-muted: #71717A;

  /* Chatwoot Core Palette Aliases */
  --color-primary: #9E1A21;
  --color-primary-light: #B91C1C;
  --color-primary-dark: #7F1319;
  --color-woot: #9E1A21;
  --color-brand: #9E1A21;
  --brand-500: #9E1A21;

  /* Chatwoot Tailwind Primary Scale (--woot-*) */
  --woot-25: rgba(158, 26, 33, 0.05);
  --woot-50: rgba(158, 26, 33, 0.10);
  --woot-100: rgba(158, 26, 33, 0.15);
  --woot-200: rgba(158, 26, 33, 0.25);
  --woot-300: #DC2626;
  --woot-400: #B91C1C;
  --woot-500: #9E1A21;
  --woot-600: #8E171D;
  --woot-700: #7F1319;
  --woot-800: #630F13;
  --woot-900: #480A0E;
  --woot-950: #2E0608;

  /* Short alias (--w-*) */
  --w-50: rgba(158, 26, 33, 0.10);
  --w-100: rgba(158, 26, 33, 0.15);
  --w-200: rgba(158, 26, 33, 0.25);
  --w-300: #DC2626;
  --w-400: #B91C1C;
  --w-500: #9E1A21;
  --w-600: #8E171D;
  --w-700: #7F1319;
  --w-800: #630F13;
  --w-900: #480A0E;

  /* Brand Scale (--brand-*) */
  --brand-50: rgba(158, 26, 33, 0.10);
  --brand-100: rgba(158, 26, 33, 0.15);
  --brand-200: rgba(158, 26, 33, 0.25);
  --brand-300: #DC2626;
  --brand-400: #B91C1C;
  --brand-600: #8E171D;
  --brand-700: #7F1319;
  --brand-800: #630F13;
  --brand-900: #480A0E;

  /* Chatwoot Slate / Neutral Scales (--s-*) mapped to Obsidian Noir & Charcoal */
  --s-25: #FFFFFF;
  --s-50: #FFFFFF;
  --s-100: #F4F4F5;
  --s-200: #E4E4E7;
  --s-300: #D4D4D8;
  --s-400: #A1A1AA;
  --s-500: #71717A;
  --s-600: #3F3F46;
  --s-700: #27272A;
  --s-800: #18181B;
  --s-900: #121214;
  --s-950: #0A0A0C;

  /* Chatwoot semantic surface & text variables */
  --color-background: #0A0A0C;
  --color-surface: #121214;
  --color-border: #27272A;
  --color-border-dark: #3F3F46;
  --color-heading: #FFFFFF;
  --color-body: #FFFFFF;
  --color-text: #FFFFFF;
  --color-text-muted: #71717A;

  /* Status Colors (Purged of green & gold) */
  --color-success: #9E1A21;
  --color-warning: #7F1319;
  --color-danger: #9E1A21;
  --color-error: #9E1A21;

  /* Typography */
  --font-serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Geometry & Shadows */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(39, 39, 42, 0.6);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(39, 39, 42, 0.8);
  --shadow-crimson: 0 0 20px var(--apotheca-crimson-glow);
}

/* ==========================================================================
   2. Global Base & Noir Custom Scrollbar
   ========================================================================== */

html, body {
  font-family: var(--font-sans) !important;
  color: var(--apotheca-white) !important;
  background-color: var(--apotheca-noir) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Noir & Crimson Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--apotheca-noir-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--apotheca-noir-border);
  border-radius: var(--radius-full);
  border: 1px solid var(--apotheca-noir);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--apotheca-crimson-hover);
}

/* ==========================================================================
   3. Login Screen Sizing & Branding (At Least 4X Bigger)
   ========================================================================== */

.login-wrapper,
.auth-wrapper,
.auth-container,
main[class*="auth"],
div[class*="auth-page"] {
  background: radial-gradient(circle at top center, #18181B 0%, #0A0A0C 100%) !important;
  min-height: 100vh !important;
}

/* Expanded Auth Card Container (max-width: 640px, width: 95%, padding: 2.5rem) */
.auth-card,
.login-box,
.auth-wrapper .auth-card,
.login-wrapper .login-box,
.login-card,
.auth-box,
.auth--card,
div[class*="auth-card"],
div[class*="login-box"],
div[class*="login-card"],
.flex-col.items-center.justify-center.min-h-screen > div,
.flex.items-center.justify-center.min-h-screen > div {
  max-width: 640px !important;
  width: 95% !important;
  padding: 2.5rem !important;
  background-color: #121214 !important;
  border: 1px solid #27272A !important;
  border-top: 4px solid #9E1A21 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 24px rgba(158, 26, 33, 0.35) !important;
  backdrop-filter: blur(16px);
}

/* Login Screen Logo: ApothecaLetterHead.png (At Least 4X Bigger) */
img[src*="ApothecaLetterHead"],
.auth-card img,
.login-wrapper img,
.auth-wrapper img,
.login-box img,
.login-card img,
form img.logo,
.auth-card .logo,
form img,
div[class*="login"] img,
div[class*="auth"] img {
  min-width: 360px !important;
  max-width: 520px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 120px !important;
  max-height: 200px !important;
  margin: 0 auto 2.5rem auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 16px rgba(158, 26, 33, 0.35)) !important;
}

/* Auth Headings and Titles */
.auth-card h1,
.auth-card h2,
.auth-card h3,
.auth-card .title,
.login-box h1,
.login-box h2,
.login-box .title,
.auth--card h1,
.auth--card h2 {
  font-family: var(--font-serif) !important;
  color: var(--apotheca-white) !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
}

/* Auth Subtitles & Labels */
.auth-card label,
.login-box label,
.auth-wrapper label,
.login-wrapper label {
  color: var(--apotheca-white) !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   4. Dashboard Top-Left Logo & Sidebar Sizing (At Least 2X Bigger)
   ========================================================================== */

/* Expand sidebar containers (min-width: 220px, width: 220px) */
aside,
.sidebar-wrap,
.left-sidebar,
div:has(> img[src*="PWA"]),
nav[class*="sidebar"],
aside[class*="sidebar"],
.app-sidebar,
.main-navigation {
  min-width: 220px !important;
  width: 220px !important;
  background-color: var(--apotheca-noir) !important;
  border-right: 1px solid var(--apotheca-noir-border) !important;
}

/* Dashboard Top-Left Logo: ApothecaPWA512.png (At Least 2X Bigger) */
aside img,
.sidebar-wrap img,
.left-sidebar img,
img[src*="ApothecaPWA512"],
img[src*="ApothecaPWA"],
img[src*="logo_thumbnail"],
.logo-thumbnail,
a[href*="/app/accounts/"] img,
nav[class*="sidebar"] img,
.sidebar-header img,
.brand-logo img,
.sidebar-wrap .logo,
.left-sidebar .brand-logo,
aside.sidebar img.logo,
header .brand-logo img,
.navigation-bar .logo img {
  min-width: 180px !important;
  width: 180px !important;
  height: 180px !important;
  min-height: 180px !important;
  max-width: 180px !important;
  max-height: 180px !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  margin: 1rem auto !important;
  display: block !important;
  box-shadow: 0 6px 24px rgba(158, 26, 33, 0.4) !important;
}

/* ==========================================================================
   5. Comprehensive UI Overrides for Modern Noir & Crimson
   ========================================================================== */

/* App Wrapper & Structure */
.app-wrapper,
.app-container,
.main-content,
#app {
  background-color: var(--apotheca-noir) !important;
  color: var(--apotheca-white) !important;
}

/* --------------------------------------------------------------------------
   5.1 Active Navigation / Tabs (Crimson border-left & subtle background)
   -------------------------------------------------------------------------- */

.sidebar-wrap a.active,
.sidebar-wrap .nav-link.active,
.left-sidebar .menu-item.active,
.router-link-active,
.router-link-exact-active,
aside a.active,
nav a.active,
li.active a,
a[aria-current="page"],
.tabs-title.is-active a,
.nav-tabs .nav-link.active,
.menu li.active > a,
.sidebar-wrap a[class*="active"],
.left-sidebar a[class*="active"] {
  background: var(--apotheca-crimson-subtle) !important;
  border-left: 3px solid var(--apotheca-crimson) !important;
  color: var(--apotheca-white) !important;
  font-weight: 600 !important;
}

.sidebar-wrap a:hover,
.left-sidebar .menu-item:hover,
aside a:hover,
nav a:hover,
.menu li > a:hover {
  background-color: var(--apotheca-crimson-muted) !important;
  color: var(--apotheca-white) !important;
}

.sidebar-wrap a,
.left-sidebar .menu-item,
aside a,
nav a {
  color: var(--apotheca-neutral-300) !important;
  transition: all 0.15s ease-in-out !important;
}

/* Secondary Navigation & Settings Submenu */
.secondary-menu,
.sub-sidebar,
.settings-menu {
  background-color: var(--apotheca-noir-surface) !important;
  border-right: 1px solid var(--apotheca-noir-border) !important;
}

/* --------------------------------------------------------------------------
   5.2 Conversation List Column
   -------------------------------------------------------------------------- */

.conversations-wrap,
.conversation-list-wrap,
.conversation-sidebar {
  background-color: var(--apotheca-noir-surface) !important;
  border-right: 1px solid var(--apotheca-noir-border) !important;
}

.conversation-item,
.conversation-card {
  border-bottom: 1px solid var(--apotheca-noir-border) !important;
  background-color: transparent !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.conversation-item:hover,
.conversation-card:hover {
  background-color: var(--apotheca-noir-card) !important;
}

.conversation-item.active,
.conversation-item.is-active,
.conversation-card.active {
  background: var(--apotheca-crimson-subtle) !important;
  border-left: 3px solid var(--apotheca-crimson) !important;
}

.conversation-item .name,
.conversation-card .name {
  color: var(--apotheca-white) !important;
  font-weight: 600 !important;
}

.conversation-item .preview,
.conversation-card .preview {
  color: var(--apotheca-neutral-300) !important;
}

/* --------------------------------------------------------------------------
   5.3 Chat Panel & Headers
   -------------------------------------------------------------------------- */

.conversation-panel,
.chat-window,
.messages-wrap {
  background-color: var(--apotheca-noir) !important;
}

.conversation-header,
.chat-header,
.top-bar {
  background-color: var(--apotheca-noir-surface) !important;
  border-bottom: 1px solid var(--apotheca-noir-border) !important;
  backdrop-filter: blur(12px);
}

.conversation-header .title,
.chat-header .title,
.top-bar .title {
  font-family: var(--font-serif) !important;
  letter-spacing: 0.05em !important;
  color: var(--apotheca-white) !important;
}

/* --------------------------------------------------------------------------
   5.4 Outbound & Inbound Chat Bubbles
   -------------------------------------------------------------------------- */

/* Outbound Chat Bubbles: Crimson gradient with crisp white text */
.message-wrap .message-bubble.outgoing,
.chat-bubble.outbound,
.chat-bubble--outgoing,
.message--outgoing,
.bubble.is-outgoing,
[data-message-type="outgoing"] .message-bubble,
.conversation-bubble--outgoing,
.message-bubble.is-agent {
  background: linear-gradient(135deg, #9E1A21 0%, #7F1319 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(185, 28, 28, 0.4) !important;
  border-radius: 12px 12px 2px 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

.message-wrap .message-bubble.outgoing *,
.chat-bubble.outbound *,
.chat-bubble--outgoing *,
.message--outgoing * {
  color: #FFFFFF !important;
}

.chat-bubble.outbound a,
.message-wrap .message-bubble.outgoing a {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* Inbound Chat Bubbles: Card Noir (#18181B) with #27272A borders and crisp white text */
.message-wrap .message-bubble.incoming,
.chat-bubble.inbound,
.chat-bubble--incoming,
.message--incoming,
.bubble.is-incoming,
[data-message-type="incoming"] .message-bubble,
.conversation-bubble--incoming,
.message-bubble.is-user {
  background-color: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid #27272A !important;
  border-radius: 12px 12px 12px 2px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

.message-wrap .message-bubble.incoming *,
.chat-bubble.inbound *,
.chat-bubble--incoming *,
.message--incoming * {
  color: #FFFFFF !important;
}

.chat-bubble.inbound a,
.message-wrap .message-bubble.incoming a {
  color: var(--apotheca-crimson-light) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   5.5 Message Composer Box
   -------------------------------------------------------------------------- */

.chat-composer,
.message-reply-box,
.reply-box {
  background-color: var(--apotheca-noir-surface) !important;
  border-top: 1px solid var(--apotheca-noir-border) !important;
}

.chat-composer textarea,
.message-reply-box textarea,
.reply-box textarea {
  background-color: var(--apotheca-noir-card) !important;
  color: var(--apotheca-white) !important;
  border: 1px solid var(--apotheca-noir-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
}

.chat-composer textarea:focus,
.message-reply-box textarea:focus,
.reply-box textarea:focus {
  border-color: var(--apotheca-crimson) !important;
  box-shadow: 0 0 0 2px var(--apotheca-crimson-glow) !important;
}

/* --------------------------------------------------------------------------
   5.6 Buttons / CTAs (Rich Crimson #9E1A21 hover #7F1319)
   -------------------------------------------------------------------------- */

.button.primary,
.btn-primary,
button[type="submit"],
.button--primary,
.button-primary,
.woot-button,
.woot-button--primary,
button.primary,
.button.success,
.btn-success,
.button--success {
  background: linear-gradient(135deg, #9E1A21 0%, #7F1319 100%) !important;
  background-color: #9E1A21 !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  border: 1px solid #9E1A21 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 2px 10px var(--apotheca-crimson-glow) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.button.primary:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.button--primary:hover,
.button-primary:hover,
.woot-button:hover,
.woot-button--primary:hover,
button.primary:hover,
.button.success:hover,
.btn-success:hover,
.button--success:hover {
  background: linear-gradient(135deg, #B91C1C 0%, #9E1A21 100%) !important;
  background-color: #7F1319 !important;
  border-color: #B91C1C !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(158, 26, 33, 0.5) !important;
  transform: translateY(-1px);
}

.button.secondary,
.btn-secondary,
.button--secondary,
.woot-button--secondary {
  background-color: var(--apotheca-noir-card) !important;
  color: var(--apotheca-white) !important;
  border: 1px solid var(--apotheca-noir-border) !important;
  border-radius: var(--radius-md) !important;
}

.button.secondary:hover,
.btn-secondary:hover,
.button--secondary:hover,
.woot-button--secondary:hover {
  background-color: var(--apotheca-noir-border) !important;
  border-color: var(--apotheca-crimson) !important;
  color: var(--apotheca-white) !important;
}

/* --------------------------------------------------------------------------
   5.7 Unread Counters & Badges (Crimson #9E1A21 with White Text)
   -------------------------------------------------------------------------- */

.conversation-item .unread-count,
.unread-badge,
.badge.unread,
.badge--unread,
.badge-count,
.unread-count,
span.unread-count,
.badge.badge--primary,
.badge--primary {
  background-color: #9E1A21 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
  box-shadow: 0 0 10px var(--apotheca-crimson-glow) !important;
  border: 1px solid #7F1319 !important;
}

/* General Badges & Tags (Zero Green / Zero Gold) */
.badge,
.tag {
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

.badge.badge--success,
.badge-success,
.tag--success {
  background-color: rgba(158, 26, 33, 0.15) !important;
  color: #FFFFFF !important;
  border: 1px solid #9E1A21 !important;
}

.badge.badge--warning,
.badge-warning,
.tag--warning {
  background-color: var(--apotheca-noir-card) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--apotheca-noir-border) !important;
}

.badge.badge--danger,
.badge-danger,
.tag--danger {
  background-color: rgba(158, 26, 33, 0.25) !important;
  color: #FFFFFF !important;
  border: 1px solid #DC2626 !important;
}

/* --------------------------------------------------------------------------
   5.8 Links & Highlights (Crimson #9E1A21 hover #B91C1C)
   -------------------------------------------------------------------------- */

a {
  color: #9E1A21;
  transition: color 0.15s ease-in-out;
}

a:hover {
  color: #B91C1C;
}

.link,
.text-link {
  color: #9E1A21 !important;
}

.link:hover,
.text-link:hover {
  color: #B91C1C !important;
}

.text-primary,
.text-woot-500,
.text-brand-500,
.text-woot-600,
.text-brand-600 {
  color: #9E1A21 !important;
}

::selection {
  background-color: #9E1A21 !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   5.9 Form Controls & Inputs
   -------------------------------------------------------------------------- */

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select,
.form-input {
  background-color: var(--apotheca-noir-card) !important;
  color: var(--apotheca-white) !important;
  border: 1px solid var(--apotheca-noir-border) !important;
  border-radius: var(--radius-md) !important;
}

.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.form-input:focus {
  border-color: var(--apotheca-crimson) !important;
  box-shadow: 0 0 0 2px var(--apotheca-crimson-glow) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   5.10 Modals, Dropdowns & Elevated Panels
   -------------------------------------------------------------------------- */

.modal-container,
.modal--container,
.modal-wrap,
.modal-content,
.dialog,
.dropdown-pane,
.dropdown-menu,
.popover,
.tooltip {
  background-color: var(--apotheca-noir-surface) !important;
  color: var(--apotheca-white) !important;
  border: 1px solid var(--apotheca-noir-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg), var(--shadow-crimson) !important;
}

.modal-header,
.dialog-header {
  border-bottom: 1px solid var(--apotheca-noir-border) !important;
  font-family: var(--font-serif) !important;
  color: var(--apotheca-white) !important;
}

.modal-footer,
.dialog-footer {
  border-top: 1px solid var(--apotheca-noir-border) !important;
}