/* ==========================================================================
   MODERN MINIMAL DESIGN SYSTEM FOR BULMA CSS
   Clean, modern typography (14px base), refined component heights,
   multi-layered soft elevation/shadows, and harmonized container spacing.
   ========================================================================== */

:root {
  /* --- Modern Font Stacks --- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* --- Typographic Scale (Modern SaaS: 14px base) --- */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 0.9375rem;   /* 15px */
  --text-lg: 1.0625rem;   /* 17px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */

  /* --- Modern Border Radii (Smooth squircles) --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- Multi-layered Soft Shadows (Light theme) --- */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 12px 24px -4px rgba(0, 0, 0, 0.09);
  --shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 20px 40px -12px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-button: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-button-hover: 0 2px 5px 0 rgba(0, 0, 0, 0.08);

  /* --- Multi-layered Soft Shadows (Dark theme) --- */
  --shadow-dark-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-dark-card: 0 4px 16px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-dark-card-hover: 0 8px 24px 0 rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12);
  --shadow-dark-dropdown: 0 12px 30px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-dark-modal: 0 24px 48px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);

  /* --- Bulma CSS Custom Property Overrides --- */
  --bulma-family-primary: var(--font-sans);
  --bulma-body-family: var(--font-sans);
  --bulma-body-font-size: var(--text-base);
  --bulma-radius: var(--radius-md);
  --bulma-radius-small: var(--radius-sm);
  --bulma-radius-medium: var(--radius-lg);
  --bulma-radius-large: var(--radius-xl);
  --bulma-control-radius: var(--radius-md);
  --bulma-control-radius-small: var(--radius-sm);
  --bulma-control-height: 2.25rem; /* 36px */
  --bulma-size-small: var(--text-sm);
  --bulma-size-normal: var(--text-base);
  --bulma-size-medium: var(--text-lg);
  --bulma-size-large: var(--text-xl);
  --bulma-block-spacing: 1.125rem;
  --bulma-column-gap: 1.125rem;
}

/* ==========================================================================
   GLOBAL BASE & TYPOGRAPHY
   ========================================================================== */

html, body {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings normalization */
h1, h2, h3, h4, h5, h6,
.title {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: inherit;
}

.title.is-1 { font-size: var(--text-3xl) !important; letter-spacing: -0.025em !important; margin-bottom: 1rem !important; }
.title.is-2 { font-size: var(--text-2xl) !important; letter-spacing: -0.022em !important; margin-bottom: 0.875rem !important; }
.title.is-3 { font-size: var(--text-xl) !important; letter-spacing: -0.02em !important; margin-bottom: 0.75rem !important; }
.title.is-4 { font-size: var(--text-lg) !important; letter-spacing: -0.015em !important; margin-bottom: 0.625rem !important; }
.title.is-5 { font-size: var(--text-md) !important; letter-spacing: -0.012em !important; margin-bottom: 0.5rem !important; }
.title.is-6 { font-size: var(--text-base) !important; letter-spacing: -0.01em !important; margin-bottom: 0.375rem !important; }

.subtitle {
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  margin-top: -0.25rem !important;
  margin-bottom: 0.75rem !important;
}

/* Micro typography utilities */
.is-size-7 {
  font-size: var(--text-xs) !important;
  line-height: 1.4 !important;
}

.is-size-6 {
  font-size: var(--text-base) !important;
}

.is-size-5 {
  font-size: var(--text-md) !important;
}

/* ==========================================================================
   CONTAINER SPACING & DISTANCES (Layout remains in exact place)
   ========================================================================== */

/* Columns gutter optimization (18px gutter instead of 24px) */
.columns {
  margin-left: -0.5625rem !important;
  margin-right: -0.5625rem !important;
  margin-top: -0.5625rem !important;
}

.columns:last-child {
  margin-bottom: -0.5625rem !important;
}

.columns > .column {
  padding: 0.5625rem !important;
}

/* Section vertical padding normalization (no huge empty dead bands) */
.section {
  padding: 1.25rem 1rem !important;
}

.section.is-small {
  padding: 1rem 0.75rem !important;
}

@media (max-width: 768px) {
  .section {
    padding: 0.875rem 0.625rem !important;
  }
}

/* Margin utilities normalization */
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }

.mt-5 { margin-top: 1.25rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-2 { margin-top: 0.5rem !important; }

.my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }

/* Buttons group spacing */
.buttons {
  margin-bottom: -0.375rem !important;
  gap: 6px 8px !important;
}

.buttons .button {
  margin-right: 0 !important;
  margin-bottom: 0.375rem !important;
}

/* ==========================================================================
   COMPONENTS: BUTTONS
   ========================================================================== */

.button {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  height: 2.25rem !important; /* 36px */
  padding: 0 14px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-button);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-width: 1px;
}

.button:hover {
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}

.button:active {
  box-shadow: none !important;
  transform: translateY(0) !important;
}

.button.is-small {
  height: 1.875rem !important; /* 30px */
  padding: 0 10px !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-sm) !important;
}

.button.is-medium {
  height: 2.625rem !important; /* 42px */
  padding: 0 18px !important;
  font-size: var(--text-md) !important;
  border-radius: var(--radius-lg) !important;
}

.button.is-large,
.hero-cta-btn {
  height: 3.25rem !important; /* 52px prominent size */
  padding: 0 32px !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-lg) !important;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   COMPONENTS: FORM CONTROLS
   ========================================================================== */

.input,
.select select {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  height: 2.5rem; /* 40px comfortable height */
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 0 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Fix for inputs with left/right icons overlapping text */
.control.has-icons-left .input,
.control.has-icons-left .select select {
  padding-left: 2.75rem !important;
}

.control.has-icons-right .input,
.control.has-icons-right .select select {
  padding-right: 2.75rem !important;
}

.control.has-icons-left.has-icons-right .input {
  padding-left: 2.75rem !important;
  padding-right: 2.75rem !important;
}

.control.has-icons-left .icon.is-left,
.control.has-icons-right .icon.is-right {
  height: 100% !important;
  top: 0 !important;
  width: 2.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 4 !important;
  color: #9ca3af !important;
}

.control.has-icons-left .icon.is-left {
  left: 0 !important;
}

.control.has-icons-right .icon.is-right {
  right: 0 !important;
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
  outline: none !important;
}

.input.is-small,
.select.is-small select {
  height: 1.875rem !important; /* 30px */
  padding: 0 10px;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-sm) !important;
}

.control.has-icons-left .input.is-small {
  padding-left: 2.25rem !important;
}

.textarea {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  height: auto !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 10px 12px !important;
  min-height: 80px;
}

.label {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  margin-bottom: 0.375rem !important;
  letter-spacing: -0.005em;
}

.help {
  font-size: var(--text-xs) !important;
  margin-top: 0.25rem !important;
}

/* ==========================================================================
   COMPONENTS: CARDS & BOXES
   ========================================================================== */

.card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.box {
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 16px 20px !important;
}

.card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
  padding: 12px 18px !important;
  align-items: center;
}

.card-header-title {
  padding: 0 !important;
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.card-content {
  padding: 16px 20px !important;
}

.card-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 6px 12px !important;
  background: rgba(0, 0, 0, 0.015);
}

.card-footer-item {
  padding: 8px 12px !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: background-color 0.15s ease;
}

.card-footer-item:last-child {
  border-right: none !important;
}

/* ==========================================================================
   COMPONENTS: PANELS
   ========================================================================== */

.panel {
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  font-size: var(--text-base);
}

.panel-heading {
  padding: 12px 16px !important;
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.panel-block {
  padding: 10px 14px !important;
  font-size: var(--text-sm) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: background-color 0.15s ease;
}

.panel-block.buttons {
  padding: 8px 12px !important;
}

.panel-icon {
  margin-right: 0.625rem !important;
  font-size: var(--text-sm) !important;
}

/* ==========================================================================
   COMPONENTS: TABS (Modern Segmented Pills)
   ========================================================================== */

.tabs {
  margin-bottom: 0.75rem !important;
}

.tabs ul {
  border-bottom-width: 1px;
}

.tabs.is-boxed li a {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: 8px 16px !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  transition: all 0.15s ease;
}

.tabs.is-toggle li.is-active a {
  border-radius: var(--radius-md) !important;
}

/* ==========================================================================
   COMPONENTS: TAGS & BADGES
   ========================================================================== */

.tag {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  height: 1.5rem !important; /* 24px */
  padding: 0 8px !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: 0.01em;
}

.tag.is-small {
  height: 1.25rem !important; /* 20px */
  padding: 0 6px !important;
  font-size: var(--text-2xs) !important;
}

/* ==========================================================================
   COMPONENTS: MODALS (High-end Glassmorphism)
   ========================================================================== */

.modal-background {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
}

.modal-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-modal) !important;
  overflow: hidden;
  max-width: calc(100vw - 32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-card-head {
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.modal-card-title {
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.modal-card-body {
  padding: 20px !important;
  font-size: var(--text-base) !important;
}

.modal-card-foot {
  padding: 14px 20px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
}

/* ==========================================================================
   COMPONENTS: NOTIFICATIONS / FLASH (Glassmorphism & Frosted Glass)
   ========================================================================== */

/* Universal Glassmorphic Notification */
.notification {
  position: relative;
  border-radius: 14px !important;
  padding: 14px 44px 14px 18px !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.22), 0 4px 12px -2px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  overflow: hidden;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              margin 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-width 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Semi-transparent vibrant states */
.notification.is-success {
  background: rgba(16, 185, 129, 0.84) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.notification.is-info {
  background: rgba(37, 99, 235, 0.84) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.notification.is-warning {
  background: rgba(234, 138, 0, 0.86) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.notification.is-danger {
  background: rgba(239, 68, 68, 0.86) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.notification.is-primary {
  background: rgba(99, 102, 241, 0.84) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Light / Subtle frosted variants */
.notification.is-light {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #1e293b !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.notification.is-light.is-success {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #065f46 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
.app-theme-dark .notification.is-light.is-success,
.theme-dark .notification.is-light.is-success {
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.42) !important;
}

.notification.is-light.is-info {
  background: rgba(37, 99, 235, 0.16) !important;
  color: #1e40af !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
}
.app-theme-dark .notification.is-light.is-info,
.theme-dark .notification.is-light.is-info {
  color: #93c5fd !important;
  border-color: rgba(59, 130, 246, 0.42) !important;
}

.notification.is-light.is-warning {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #92400e !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
.app-theme-dark .notification.is-light.is-warning,
.theme-dark .notification.is-light.is-warning {
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.42) !important;
}

.notification.is-light.is-danger {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #991b1b !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
.app-theme-dark .notification.is-light.is-danger,
.theme-dark .notification.is-light.is-danger {
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.42) !important;
}

/* Close button on notification */
.notification > .delete {
  position: absolute !important;
  right: 12px !important;
  top: 14px !important;
  background-color: rgba(0, 0, 0, 0.18) !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  border-radius: 50% !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}
.notification > .delete:hover {
  background-color: rgba(0, 0, 0, 0.38) !important;
  transform: scale(1.12);
}
.notification > .delete::before,
.notification > .delete::after {
  background-color: #ffffff !important;
}
.notification.is-light > .delete::before,
.notification.is-light > .delete::after {
  background-color: currentColor !important;
}

/* Internal structure for notification badge */
.notification-body {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.notification-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notification-content {
  flex: 1 1 auto;
  font-weight: 500;
  line-height: 1.45;
}

/* Floating Toast Container for Flash Messages */
#flash-messages {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 99999 !important;
  max-width: 440px !important;
  width: calc(100% - 48px) !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

@media (max-width: 600px) {
  #flash-messages {
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
  }
}

#flash-messages .notification {
  pointer-events: auto !important;
  margin: 0 !important;
  animation: notificationSlideIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Smooth Dismiss Transition */
.notification.is-dismissing {
  opacity: 0 !important;
  transform: translateY(-16px) scale(0.95) !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none !important;
}

/* 5-Second Animated Progress Bar */
.notification-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.42);
  transform-origin: left;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  animation: notificationProgress 5s linear forwards;
}
.notification.is-light .notification-progress-bar {
  background: currentColor;
  opacity: 0.25;
}
.notification.is-paused .notification-progress-bar {
  animation-play-state: paused !important;
}

@keyframes notificationProgress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* ==========================================================================
   COMPONENTS: DROPDOWNS
   ========================================================================== */

.dropdown-content {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dropdown) !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 6px !important;
}

.dropdown-item {
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  font-size: var(--text-sm) !important;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

/* ==========================================================================
   COMPONENTS: NAVBAR POLISH
   ========================================================================== */

.navbar {
  font-family: var(--font-sans);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-height: 3rem;
}

.navbar-item {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.navbar.is-dark {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   COMPONENTS: TABLES
   ========================================================================== */

.table {
  font-size: var(--text-sm);
  border-collapse: separate;
  border-spacing: 0;
}

.table th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  color: #6b7280;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.table td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   COMPONENTS: CHAT MESSAGES
   ========================================================================== */

.system-message,
.message-bubble {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  font-size: var(--text-base) !important;
  line-height: 1.45 !important;
}

/* ==========================================================================
   DARK THEME SPECIFIC ELEVATIONS & SURFACES
   ========================================================================== */

.theme-dark .card,
.theme-dark-purple .card,
.theme-dark-primary .card,
.theme-dark-link .card,
.theme-dark-orange .card,
.panel.is-dark {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-dark-card) !important;
}

.theme-dark .box,
.theme-dark-purple .box,
.theme-dark-primary .box,
.theme-dark-link .box,
.theme-dark-orange .box {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-dark-card) !important;
}

.theme-dark .input,
.theme-dark-purple .input,
.theme-dark-primary .input,
.theme-dark-link .input,
.theme-dark-orange .input,
.theme-dark .select select,
.theme-dark-purple .select select,
.theme-dark-primary .select select,
.theme-dark-link .select select,
.theme-dark-orange .select select {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.theme-dark .modal-card,
.theme-dark-purple .modal-card,
.theme-dark-primary .modal-card,
.theme-dark-link .modal-card,
.theme-dark-orange .modal-card {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--shadow-dark-modal) !important;
}

.theme-dark .dropdown-content,
.theme-dark-purple .dropdown-content,
.theme-dark-primary .dropdown-content,
.theme-dark-link .dropdown-content,
.theme-dark-orange .dropdown-content {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-dark-dropdown) !important;
}

/* ==========================================================================
   LANDING PAGES & BLOG: DISPLAY TYPOGRAPHY, GRADIENTS & HERO SCALING
   ========================================================================== */

/* Distinctive Display Font for Landing & Blog Hero Titles */
body.landing-bg .hero .title,
body.landing-bg .hero .title.is-1,
.landing-hero-title,
.blog-hero-title,
.hero-title-display {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(2.75rem, 6.5vw, 4.5rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
}

/* Vibrant Hero Gradients with Glow */
.hero-gradient-text,
.gradient-text-blue {
  background: linear-gradient(135deg, #ffffff 15%, #93c5fd 50%, #3b82f6 80%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
  filter: drop-shadow(0 4px 20px rgba(59, 130, 246, 0.3));
}

.hero-gradient-primary,
.gradient-text-purple {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
  filter: drop-shadow(0 4px 20px rgba(129, 140, 248, 0.35));
}

.hero-gradient-accent,
.gradient-text-cyan {
  background: linear-gradient(135deg, #34d399 0%, #22d3ee 50%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
  filter: drop-shadow(0 4px 20px rgba(34, 211, 238, 0.35));
}

.hero-gradient-fire,
.gradient-text-amber {
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 45%, #ec4899 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
  filter: drop-shadow(0 4px 20px rgba(249, 115, 22, 0.35));
}

.hero-gradient-silver {
  background: linear-gradient(180deg, #ffffff 30%, #94a3b8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block;
}

/* ==========================================================================
   BLOG SECTION: HERO, SEARCH, FILTERS & CARDS
   ========================================================================== */

/* Blog Hero Section: More generous vertical breath */
.blog-hero-section {
  padding: 4.5rem 1.5rem 3.5rem !important;
  background-color: transparent !important;
}

@media (max-width: 768px) {
  .blog-hero-section {
    padding: 3rem 1rem 2rem !important;
  }
}

/* Blog Hero Title: Grand size with multi-stop gradient */
.blog-hero-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.75rem, 6vw, 4.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  background: linear-gradient(135deg, #ffffff 10%, #93c5fd 45%, #60a5fa 70%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 6px 28px rgba(96, 165, 250, 0.35));
  margin-bottom: 0.75rem !important;
}

/* Blog Hero Subtitle */
.blog-hero-subtitle {
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  max-width: 680px;
  margin: 1.25rem auto 2.5rem !important;
}

/* Blog Search Form & Controls (Enlarged & Polished) */
.blog-hero-search-form .field.has-addons {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.blog-hero-search-form .control.has-icons-left {
  flex: 1 1 auto;
  position: relative;
}

/* High-impact Search Input */
.blog-hero-search-form .blog-hero-input {
  height: 3.75rem !important; /* 60px */
  font-size: 1.1875rem !important;
  padding-left: 3.75rem !important;
  padding-right: 1.5rem !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}

.blog-hero-search-form .blog-hero-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.blog-hero-search-form .blog-hero-input:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25), 0 12px 35px rgba(0, 0, 0, 0.4) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
}

/* Search Icon */
.blog-hero-search-form .control.has-icons-left .icon.is-left {
  left: 1.25rem !important;
  width: 2rem !important;
  height: 100% !important;
  font-size: 1.35rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Search Action Button */
.blog-hero-search-form .blog-hero-search-btn {
  width: 3.75rem !important;
  height: 3.75rem !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45) !important;
  border: none !important;
  font-size: 1.25rem !important;
  color: #ffffff !important;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.blog-hero-search-form .blog-hero-search-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6) !important;
}

/* Topic Filter Tags (Bigger, Modern Pill Navigation) */
.blog-hero-topic-tags .tags {
  gap: 0.625rem 0.75rem !important;
  margin-top: 1.5rem !important;
}

.blog-hero-topic-tags .tag {
  font-size: 0.9375rem !important; /* 15px */
  font-weight: 500 !important;
  padding: 8px 20px !important;
  border-radius: 9999px !important;
  height: auto !important;
  letter-spacing: -0.005em !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}

.blog-hero-topic-tags .tag.is-link {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.45) !important;
}

.blog-hero-topic-tags .tag.is-light {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.blog-hero-topic-tags .tag.is-light:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* Mobile Select for Topics */
.blog-hero-topic-select .blog-hero-select {
  height: 3rem !important;
  font-size: 1rem !important;
  padding-left: 1.25rem !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

/* ==========================================================================
   EDITORIAL & BLOG ARTICLE CONTENT (Optimal, comfortable reading sizes)
   ========================================================================== */

/* Blog Show Hero Title */
.blog-article-hero-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Blog Article Body Typography (18px - 19px base reading size) */
.blog-article-body,
.blog-post-content,
.content.blog-content {
  font-size: 1.1875rem !important; /* 19px - ideal reading size */
  line-height: 1.85 !important;
  letter-spacing: -0.003em;
  color: #374151; /* Dark gray for light backgrounds */
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* In dark mode or dark landing */
body.landing-bg .blog-article-body,
body.landing-bg .content.blog-content,
.theme-dark .blog-article-body {
  color: #e2e8f0 !important;
}

.blog-article-body p,
.blog-post-content p,
.content.blog-content p {
  font-size: 1.1875rem !important;
  line-height: 1.85 !important;
  margin-bottom: 1.85rem !important;
}

/* Article Headings */
.blog-article-body h1,
.content.blog-content h1 {
  font-family: var(--font-display) !important;
  font-size: 2.25rem !important; /* 36px */
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  margin-top: 3rem !important;
  margin-bottom: 1.25rem !important;
  color: inherit;
}

.blog-article-body h2,
.content.blog-content h2 {
  font-family: var(--font-display) !important;
  font-size: 1.875rem !important; /* 30px */
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  margin-top: 2.75rem !important;
  margin-bottom: 1rem !important;
  color: inherit;
}

.blog-article-body h3,
.content.blog-content h3 {
  font-family: var(--font-display) !important;
  font-size: 1.45rem !important; /* 23px */
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
  margin-top: 2.25rem !important;
  margin-bottom: 0.875rem !important;
  color: inherit;
}

.blog-article-body h4,
.content.blog-content h4 {
  font-family: var(--font-sans) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.75rem !important;
  color: inherit;
}

/* Article Lists */
.blog-article-body ul,
.blog-article-body ol,
.content.blog-content ul,
.content.blog-content ol {
  font-size: 1.1875rem !important;
  line-height: 1.8 !important;
  margin-bottom: 1.85rem !important;
  padding-left: 1.75rem !important;
}

.blog-article-body li,
.content.blog-content li {
  margin-bottom: 0.625rem !important;
}

/* Article Blockquotes */
.blog-article-body blockquote,
.content.blog-content blockquote {
  font-size: 1.25rem !important;
  line-height: 1.75 !important;
  font-style: italic !important;
  color: #4b5563 !important;
  border-left: 4px solid #3b82f6 !important;
  background: rgba(59, 130, 246, 0.05) !important;
  padding: 1.25rem 1.75rem !important;
  border-radius: 0 12px 12px 0 !important;
  margin: 2.25rem 0 !important;
}

body.landing-bg .blog-article-body blockquote,
body.landing-bg .content.blog-content blockquote {
  color: #cbd5e1 !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

/* Article Strong */
.blog-article-body strong,
.content.blog-content strong {
  font-weight: 700 !important;
  color: inherit !important;
}

/* ==========================================================================
   LANDING FEATURE CARDS (Booking, Support, HR, Website, QA, Themes)
   ========================================================================== */

/* Enlarged, more prominent feature cards with modern dark glass aesthetic */
.box.feature-card,
.feature-card {
  padding: 24px 28px !important;
  border-radius: 18px !important;
  background: rgba(24, 24, 30, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.box.feature-card:hover,
.feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(96, 165, 250, 0.4) !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Feature Card Display Titles (Display font, punchy size) */
.feature-card-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.65rem, 2.75vw, 2.25rem) !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
  max-width: 95% !important;
}

/* Feature Card Descriptions (Bigger, brighter, readable) */
.feature-card-desc,
.feature-card .subtitle,
.feature-card .subtitle.is-4 {
  font-family: var(--font-sans) !important;
  font-size: 1.15rem !important; /* ~18.5px, slightly larger */
  line-height: 1.7 !important;
  color: #f1f5f9 !important; /* Brighter, high-contrast readable text */
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.75rem !important;
  opacity: 0.98 !important;
}

@media (max-width: 768px) {
  .box.feature-card,
  .feature-card {
    padding: 20px 18px !important;
  }

  .feature-card-desc,
  .feature-card .subtitle,
  .feature-card .subtitle.is-4 {
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
  }
}

/* Hero Title Centering Support */
.hero-title-container {
  max-width: 1100px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.hero-title-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 0.35em !important;
}

/* Hero Subtitle with healthy letter-spacing to prevent letter overlap */
.hero-subtitle {
  font-family: var(--font-sans) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.015em !important;
  line-height: 1.65 !important;
  color: #cbd5e1 !important;
  max-width: 720px !important;
  margin: 1.25rem auto 0 !important;
  text-align: center !important;
}

/* ==========================================================================
   WORKDESK CRM SECTION (Significantly larger titles and subtitles)
   ========================================================================== */

.crm-feature-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(2.15rem, 3.2vw, 2.85rem) !important; /* Significantly larger */
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  margin-bottom: 1.25rem !important;
}

.crm-feature-desc {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.2rem, 1.8vw, 1.375rem) !important; /* Significantly larger */
  line-height: 1.65 !important;
  color: #f1f5f9 !important; /* Whiter, lighter text */
  font-weight: 400 !important;
  margin-bottom: 1.5rem !important;
  max-width: 600px !important;
}

/* ==========================================================================
   PRICING SECTION (Larger cards, display font titles, whiter description)
   ========================================================================== */

.pricing-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 430px !important; /* Slightly larger */
  margin: 0 auto !important;
  min-height: 560px !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(24, 24, 30, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.pricing-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(96, 165, 250, 0.4) !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

.pricing-header {
  position: relative !important;
  height: 220px !important;
  flex-shrink: 0 !important;
}

.pricing-plan-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.55rem !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.pricing-content {
  padding: 26px 24px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  background: transparent !important;
}

.pricing-price {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 2.75rem !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-bottom: 0.75rem !important;
}

.pricing-desc {
  color: #e2e8f0 !important; /* Lighter, whiter color */
  font-size: 1.0625rem !important;
  line-height: 1.62 !important;
  margin-bottom: 1.25rem !important;
  text-align: center !important;
}

.pricing-content ul {
  flex-grow: 1 !important;
  margin-bottom: 1.5rem !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.pricing-content ul li {
  color: #f1f5f9 !important; /* Whiter text */
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin-bottom: 0.65rem !important;
  display: flex !important;
  align-items: center !important;
}

.pricing-content ul li::before {
  content: "✓";
  color: #38bdf8;
  font-weight: 700;
  margin-right: 10px;
  font-size: 1.1rem;
}

/* ==========================================================================
   APPLE iOS CHAT UI DESIGN SYSTEM
   ========================================================================== */

/* Chat Page Outer Container */
.chat-show {
  font-family: var(--font-sans) !important;
  background: var(--ios-chat-bg, #f8fafc) !important;
  transition: background-color 0.25s ease !important;
}

@media (min-width: 1024px) {
  .chat-show .chat-show-columns {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Chat Page Header */
.chat-page-header {
  position: relative !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  background: var(--ios-chat-header-bg, rgba(255, 255, 255, 0.92)) !important;
  border-bottom: 1px solid var(--ios-chat-header-border, rgba(0, 0, 0, 0.08)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  min-height: 64px !important;
  transition: all 0.25s ease !important;
}

@media (min-width: 1024px) {
  .chat-page-header {
    border-radius: 16px 16px 0 0 !important;
  }
}

.chat-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.chat-header-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: rgba(125, 125, 135, 0.12) !important;
  color: var(--ios-chat-header-text, #0f172a) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.chat-header-back-btn:hover {
  background: rgba(125, 125, 135, 0.22) !important;
  transform: translateX(-2px) !important;
}

.chat-avatar-wrapper {
  position: relative !important;
  flex-shrink: 0 !important;
}

.chat-avatar-circle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--ios-send-btn-gradient, linear-gradient(135deg, #007aff 0%, #3b82f6 50%, #4f46e5 100%)) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

.chat-status-dot {
  position: absolute !important;
  bottom: 1px !important;
  right: 1px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  border: 2px solid var(--ios-chat-header-bg, #ffffff) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

.chat-header-meta {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.chat-header-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.28rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  color: var(--ios-chat-header-text, #0f172a) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chat-header-status {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chat-status-text {
  color: #10b981 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.chat-header-dot-sep {
  opacity: 0.4 !important;
}

.chat-header-address {
  opacity: 0.85 !important;
}

.chat-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.chat-mobile-nav-pills {
  display: flex !important;
  gap: 6px !important;
}

.chat-header-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(125, 125, 135, 0.12) !important;
  border: 1px solid rgba(125, 125, 135, 0.15) !important;
  color: var(--ios-chat-header-text, #0f172a) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.chat-header-pill-btn:hover {
  background: rgba(125, 125, 135, 0.22) !important;
  transform: scale(1.06) !important;
}

/* Chat Messages Container */
.messages-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 20px 22px calc(86px + env(safe-area-inset-bottom)) !important;
  background: var(--ios-chat-bg, #f8fafc) !important;
  transition: background-color 0.25s ease !important;
}

/* User Message (Right Aligned, Apple iOS Gradient) */
.user-message {
  align-self: flex-end !important;
  background: var(--ios-bubble-user-bg, linear-gradient(135deg, #007aff 0%, #2563eb 100%)) !important;
  color: var(--ios-bubble-user-text, #ffffff) !important;
  padding: 12px 18px !important;
  border-radius: 20px 20px 4px 20px !important;
  max-width: 80% !important;
  word-wrap: break-word !important;
  box-shadow: 0 3px 12px rgba(0, 122, 255, 0.28) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
}

/* Assistant / Team Message (Left Aligned, Apple Sleek Bubble) */
.team-message,
.assistant-message {
  align-self: flex-start !important;
  background: var(--ios-bubble-team-bg, #f1f5f9) !important;
  color: var(--ios-bubble-team-text, #0f172a) !important;
  padding: 12px 18px !important;
  border-radius: 20px 20px 20px 4px !important;
  max-width: 80% !important;
  word-wrap: break-word !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
}

/* System & Business Greeting Message (Left Aligned, Apple Incoming Bubble) */
.system-message {
  align-self: flex-start !important;
  text-align: left !important;
  background: var(--ios-bubble-team-bg, #f1f5f9) !important;
  color: var(--ios-bubble-team-text, #0f172a) !important;
  padding: 12px 18px !important;
  border-radius: 20px 20px 20px 4px !important;
  max-width: 80% !important;
  word-wrap: break-word !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
  margin: 2px 0 6px 0 !important;
  border: 1px solid rgba(125, 125, 135, 0.12) !important;
}

/* Service & Position Cards inside Chat */
.service-card,
.position-card {
  border-radius: 16px !important;
  padding: 14px 18px !important;
  background: var(--ios-bubble-team-bg, #f1f5f9) !important;
  border: 1px solid rgba(125, 125, 135, 0.15) !important;
  transition: all 0.2s ease !important;
}

.service-card:hover,
.position-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Appointment Slot Buttons inside Chat */
.appointment-slot-button,
.appointment-selection-button {
  border-radius: 9999px !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background: var(--ios-send-btn-gradient, linear-gradient(135deg, #007aff 0%, #3b82f6 100%)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.3) !important;
  transition: all 0.2s ease !important;
}

.appointment-slot-button:hover,
.appointment-selection-button:hover {
  transform: scale(1.04) translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(0, 122, 255, 0.45) !important;
}

/* Actionable URL Buttons inside Chat */
.chat-link-card {
  margin: 6px 0 !important;
  display: block !important;
  max-width: 100% !important;
}

.chat-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #007aff 0%, #0056b3 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  max-width: 100% !important;
}

.chat-action-btn:hover {
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.45) !important;
  text-decoration: none !important;
}

.chat-action-btn .chat-action-btn-icon {
  display: inline-flex !important;
  font-size: 13px !important;
  opacity: 0.9 !important;
}

.chat-action-btn .chat-action-btn-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 240px !important;
}

.chat-action-btn .chat-action-btn-arrow {
  font-size: 11px !important;
  opacity: 0.8 !important;
  transition: transform 0.2s ease !important;
}

.chat-action-btn:hover .chat-action-btn-arrow {
  transform: translateX(3px) !important;
  opacity: 1 !important;
}

.chat-inline-link {
  color: #007aff !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  word-break: break-all !important;
}

.chat-inline-link:hover {
  color: #0056b3 !important;
  text-decoration: underline !important;
}

/* Input Bar & Controls */
.mobile-input-bar {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 25 !important;
  background: var(--ios-input-bar-bg, rgba(255, 255, 255, 0.94)) !important;
  border-top: 1px solid var(--ios-input-bar-border, rgba(0, 0, 0, 0.08)) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  padding: 12px 18px !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04) !important;
}

@media (max-width: 768px) {
  .mobile-input-bar {
    border-radius: 0 !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }
}

.custom-input-container {
  position: relative !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.custom-input {
  width: 100% !important;
  padding: 11px 20px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  min-height: 44px !important;
  max-height: 180px !important;
  border: 1px solid var(--ios-input-field-border, rgba(0, 0, 0, 0.08)) !important;
  outline: none !important;
  box-sizing: border-box !important;
  color: var(--ios-input-field-text, #0f172a) !important;
  overflow-y: auto !important;
  background: var(--ios-input-field-bg, #f1f5f9) !important;
  border-radius: 26px !important;
  line-height: 1.45 !important;
  transition: all 0.2s ease !important;
}

.custom-input:focus {
  background: var(--ios-input-field-focus-bg, #ffffff) !important;
  border-color: var(--theme-primary, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.custom-input-placeholder {
  position: absolute !important;
  top: 12px !important;
  left: 20px !important;
  color: var(--ios-input-placeholder, rgba(100, 116, 139, 0.65)) !important;
  pointer-events: none !important;
  font-size: 15px !important;
  z-index: 1 !important;
}

.custom-input:not(:empty) + .custom-input-placeholder {
  display: none !important;
}

/* Send Message Button (Apple iOS Circular Gradient Button) */
#send-message-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: var(--ios-send-btn-gradient, linear-gradient(135deg, #007aff 0%, #3b82f6 50%, #4f46e5 100%)) !important;
  border: none !important;
  box-shadow: var(--ios-send-btn-shadow, 0 4px 14px rgba(0, 122, 255, 0.4)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#send-message-btn .icon {
  color: #ffffff !important;
  font-size: 15px !important;
}

#send-message-btn:hover:not(:disabled) {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.55) !important;
}

#send-message-btn:active:not(:disabled) {
  transform: scale(0.95) !important;
}

#send-message-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Suggestion Action Chips */
.help-buttons {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
}

.help-buttons .help-button {
  border-radius: 9999px !important;
  padding: 7px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  background: var(--ios-chip-bg, rgba(59, 130, 246, 0.08)) !important;
  color: var(--ios-chip-text, #2563eb) !important;
  border: 1px solid var(--ios-chip-border, rgba(59, 130, 246, 0.22)) !important;
  transition: all 0.2s ease !important;
}

.help-buttons .help-button:hover:not(:disabled) {
  background: var(--ios-chip-hover-bg, rgba(59, 130, 246, 0.16)) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   CHATS SELECTION SWITCHER (Dashboard chats/index.html.erb)
   ========================================================================== */

.chat-selection-wrapper {
  padding: 12px 16px;
  margin-bottom: 1.5rem;
}

.chat-selection-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  box-shadow: none !important;
}

.chat-buttons-container {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.chat-selector-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #cbd5e1 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}

.chat-selector-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.chat-selector-btn.is-active,
.chat-selector-btn.is-link {
  background: linear-gradient(135deg, #007aff 0%, #3b82f6 50%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.45) !important;
  font-weight: 600 !important;
}

.new-chat-btn-modern {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.new-chat-btn-modern:hover {
  transform: scale(1.04) translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5) !important;
  color: #ffffff !important;
}

/* Mobile Header Bar for Chats */
.mobile-chat-nav-bar {
  padding: 10px 14px !important;
  background: rgba(20, 20, 26, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
}

.mobile-chat-select-wrapper {
  flex: 1 !important;
  position: relative !important;
}

.mobile-chat-select-wrapper select {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 8px 36px 8px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
}

.mobile-chat-select-wrapper::after {
  content: "▼" !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

/* Chat Show Left Panel Styling */
#left-panel {
  background: var(--theme-secondary, rgba(245, 245, 247, 0.6)) !important;
  border-right: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08)) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.theme-dark #left-panel,
.theme-dark-purple #left-panel,
.theme-dark-primary #left-panel,
.theme-dark-link #left-panel,
.theme-dark-orange #left-panel,
.theme-gray #left-panel {
  background: rgba(18, 18, 22, 0.8) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#left-panel .tabs.is-toggle li a {
  border-radius: 9999px !important;
  font-weight: 500;
  transition: all 0.2s ease;
}

#left-panel .tabs.is-toggle li.is-active a {
  background: var(--ios-send-btn-gradient, linear-gradient(135deg, #007aff, #3b82f6)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.35);
}

#left-panel .card {
  border-radius: 16px !important;
  border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.faq-drawer-btn {
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: var(--ios-chip-bg, rgba(59, 130, 246, 0.08)) !important;
  color: var(--ios-chip-text, #2563eb) !important;
  border: 1px solid var(--ios-chip-border, rgba(59, 130, 246, 0.22)) !important;
  transition: all 0.2s ease !important;
}

.faq-drawer-btn:hover {
  background: var(--ios-chip-hover-bg, rgba(59, 130, 246, 0.16)) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   CLEAN MINIMAL PORTFOLIO MODAL (PICTURE, DESCRIPTION, SERVICE & SCROLL)
   ========================================================================== */

.portfolio-modal-clean {
  z-index: 1050 !important;
}

.portfolio-modal-clean.is-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.portfolio-backdrop {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.portfolio-modal-container {
  position: relative !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 12px auto !important;
  padding: 10px !important;
  z-index: 20 !important;
}

.portfolio-close-btn {
  position: absolute !important;
  top: -46px !important;
  right: 12px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 25 !important;
}

.portfolio-close-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.08) !important;
}

.portfolio-modal-card {
  background: #141418 !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Modal Top Bar */
.portfolio-modal-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  background: #181820 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.portfolio-counter-pill {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.02em !important;
}

.portfolio-inline-close-btn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.2s ease !important;
}

.portfolio-inline-close-btn:hover {
  color: #ffffff !important;
}

/* Media Viewport (Picture + Carousel) */
.portfolio-media-viewport {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 480px !important;
  overflow: hidden !important;
  background: #08080a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 768px) {
  .portfolio-media-viewport {
    max-height: 380px !important;
  }
}

.portfolio-slides-track {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.portfolio-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #08080a !important;
}

.portfolio-slide-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Chevrons */
.portfolio-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10 !important;
}

.portfolio-prev-btn {
  left: 12px !important;
}

.portfolio-next-btn {
  right: 12px !important;
}

.portfolio-nav-btn:hover {
  background: rgba(0, 0, 0, 0.85) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* Dots */
.portfolio-dots-wrapper {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 0 6px !important;
  background: #141418 !important;
}

.portfolio-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.25) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.portfolio-dot.is-active {
  background: #38bdf8 !important;
  transform: scale(1.3) !important;
  width: 7px !important;
  height: 7px !important;
}

/* Details Box (Title, Description, Service Tag) */
.portfolio-details-box {
  padding: 14px 20px 22px !important;
  background: #141418 !important;
  font-family: var(--font-sans) !important;
}

.portfolio-item-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}

.portfolio-item-desc {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #94a3b8 !important;
  margin-top: 4px !important;
}

.portfolio-service-tag {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 12px !important;
  padding: 5px 14px !important;
  border-radius: 9999px !important;
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

/* ==========================================================================
   FULL PAGE DARK THEME & LIGHT THEME COMPLETE INTEGRATION
   ========================================================================== */

/* 1. Full Viewport Dark Backgrounds */
html.theme-dark,
html.theme-dark-purple,
html.theme-dark-primary,
html.theme-dark-link,
html.theme-dark-orange,
html.theme-gray,
body.theme-dark,
body.theme-dark-purple,
body.theme-dark-primary,
body.theme-dark-link,
body.theme-dark-orange,
body.theme-gray {
  background-color: #0b0b0f !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
}

html:has(.theme-dark),
html:has(.theme-dark-purple),
html:has(.theme-dark-primary),
html:has(.theme-dark-link),
html:has(.theme-dark-orange),
html:has(.theme-gray),
body:has(.theme-dark),
body:has(.theme-dark-purple),
body:has(.theme-dark-primary),
body:has(.theme-dark-link),
body:has(.theme-dark-orange),
body:has(.theme-gray) {
  background-color: #0b0b0f !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
}

/* 2. Chat Show Outer & Column Containers in Dark */
.theme-dark .chat-show,
.theme-dark-purple .chat-show,
.theme-dark-primary .chat-show,
.theme-dark-link .chat-show,
.theme-dark-orange .chat-show,
.theme-gray .chat-show,
.chat-show.theme-dark,
.chat-show.theme-dark-purple,
.chat-show.theme-dark-primary,
.chat-show.theme-dark-link,
.chat-show.theme-dark-orange,
.chat-show.theme-gray {
  background: #0f0f14 !important;
}

.theme-dark .chat-show-columns,
.theme-dark-purple .chat-show-columns,
.theme-dark-primary .chat-show-columns,
.theme-dark-link .chat-show-columns,
.theme-dark-orange .chat-show-columns,
.theme-gray .chat-show-columns {
  background: #0f0f14 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .mobile-chat-pane,
.theme-dark-purple .mobile-chat-pane,
.theme-dark-primary .mobile-chat-pane,
.theme-dark-link .mobile-chat-pane,
.theme-dark-orange .mobile-chat-pane,
.theme-gray .mobile-chat-pane,
.theme-dark .chat-show .box,
.theme-dark-purple .chat-show .box,
.theme-dark-primary .chat-show .box,
.theme-dark-link .chat-show .box,
.theme-dark-orange .chat-show .box,
.theme-gray .chat-show .box {
  background: #0f0f14 !important;
  color: #f8fafc !important;
}

/* 3. Left Panel Complete Overhaul in Dark Themes */
.theme-dark #left-panel,
.theme-dark-purple #left-panel,
.theme-dark-primary #left-panel,
.theme-dark-link #left-panel,
.theme-dark-orange #left-panel,
.theme-gray #left-panel {
  background: #111116 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

.theme-dark #left-panel .title,
.theme-dark-purple #left-panel .title,
.theme-dark-primary #left-panel .title,
.theme-dark-link #left-panel .title,
.theme-dark-orange #left-panel .title,
.theme-gray #left-panel .title {
  color: #ffffff !important;
}

.theme-dark #left-panel .card,
.theme-dark-purple #left-panel .card,
.theme-dark-primary #left-panel .card,
.theme-dark-link #left-panel .card,
.theme-dark-orange #left-panel .card,
.theme-gray #left-panel .card {
  background: #181820 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  color: #f8fafc !important;
}

.theme-dark #left-panel .card-content,
.theme-dark-purple #left-panel .card-content,
.theme-dark-primary #left-panel .card-content,
.theme-dark-link #left-panel .card-content,
.theme-dark-orange #left-panel .card-content,
.theme-gray #left-panel .card-content {
  color: #f8fafc !important;
}

.theme-dark #left-panel .table,
.theme-dark-purple #left-panel .table,
.theme-dark-primary #left-panel .table,
.theme-dark-link #left-panel .table,
.theme-dark-orange #left-panel .table,
.theme-gray #left-panel .table {
  background: transparent !important;
  color: #f8fafc !important;
}

.theme-dark #left-panel .table td,
.theme-dark #left-panel .table th,
.theme-dark-purple #left-panel .table td,
.theme-dark-primary #left-panel .table td,
.theme-dark-link #left-panel .table td,
.theme-dark-orange #left-panel .table td,
.theme-gray #left-panel .table td {
  background: transparent !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.theme-dark #left-panel .table.is-striped tbody tr:not(.is-selected):nth-child(even),
.theme-dark-purple #left-panel .table.is-striped tbody tr:not(.is-selected):nth-child(even),
.theme-dark-primary #left-panel .table.is-striped tbody tr:not(.is-selected):nth-child(even),
.theme-dark-link #left-panel .table.is-striped tbody tr:not(.is-selected):nth-child(even),
.theme-dark-orange #left-panel .table.is-striped tbody tr:not(.is-selected):nth-child(even),
.theme-gray #left-panel .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.theme-dark #left-panel .tabs.is-toggle li:not(.is-active) a,
.theme-dark-purple #left-panel .tabs.is-toggle li:not(.is-active) a,
.theme-dark-primary #left-panel .tabs.is-toggle li:not(.is-active) a,
.theme-dark-link #left-panel .tabs.is-toggle li:not(.is-active) a,
.theme-dark-orange #left-panel .tabs.is-toggle li:not(.is-active) a,
.theme-gray #left-panel .tabs.is-toggle li:not(.is-active) a {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}

.theme-dark #left-panel ul li,
.theme-dark-purple #left-panel ul li,
.theme-dark-primary #left-panel ul li,
.theme-dark-link #left-panel ul li,
.theme-dark-orange #left-panel ul li,
.theme-gray #left-panel ul li {
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 4. Light Theme Specific Styling */
html.theme-white,
body.theme-white,
html.theme-white-primary,
body.theme-white-primary,
html.theme-white-purple,
body.theme-white-purple,
html.theme-white-orange,
body.theme-white-orange,
html.theme-white-link,
body.theme-white-link {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  color-scheme: light !important;
}

.theme-white #left-panel,
.theme-white-primary #left-panel,
.theme-white-purple #left-panel,
.theme-white-orange #left-panel,
.theme-white-link #left-panel {
  background: #f1f5f9 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.theme-white #left-panel .card,
.theme-white-primary #left-panel .card,
.theme-white-purple #left-panel .card,
.theme-white-orange #left-panel .card,
.theme-white-link #left-panel .card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   MODALS: COMPREHENSIVE LIGHT & DARK THEME SYSTEM
   (Client Cards, Add Service, Add Portfolio, FAQ, Appointments, etc.)
   ========================================================================== */

/* 1. Base Dark Theme Modals for Chat Show (when in chat page dark view) */
.theme-dark .modal-card,
.theme-dark-purple .modal-card,
.theme-dark-primary .modal-card,
.theme-dark-link .modal-card,
.theme-dark-orange .modal-card,
.theme-gray .modal-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75) !important;
}

.theme-dark .modal-card-head,
.theme-dark .modal-card-foot,
.theme-dark-purple .modal-card-head,
.theme-dark-purple .modal-card-foot,
.theme-dark-primary .modal-card-head,
.theme-dark-primary .modal-card-foot,
.theme-dark-link .modal-card-head,
.theme-dark-link .modal-card-foot,
.theme-dark-orange .modal-card-head,
.theme-dark-orange .modal-card-foot,
.theme-gray .modal-card-head,
.theme-gray .modal-card-foot {
  background-color: #181820 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.theme-dark .modal-card-head .modal-card-title,
.theme-dark-purple .modal-card-head .modal-card-title,
.theme-dark-primary .modal-card-head .modal-card-title,
.theme-dark-link .modal-card-head .modal-card-title,
.theme-dark-orange .modal-card-head .modal-card-title,
.theme-gray .modal-card-head .modal-card-title {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

.theme-dark .modal-card-body,
.theme-dark-purple .modal-card-body,
.theme-dark-primary .modal-card-body,
.theme-dark-link .modal-card-body,
.theme-dark-orange .modal-card-body,
.theme-gray .modal-card-body {
  background-color: #141418 !important;
  color: #e2e8f0 !important;
}

.theme-dark .modal-card-body .box,
.theme-dark-purple .modal-card-body .box,
.theme-dark-primary .modal-card-body .box,
.theme-dark-link .modal-card-body .box,
.theme-dark-orange .modal-card-body .box,
.theme-gray .modal-card-body .box {
  background-color: #1e1e26 !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .modal-card-body .title,
.theme-dark-purple .modal-card-body .title,
.theme-dark-primary .modal-card-body .title,
.theme-dark-link .modal-card-body .title,
.theme-dark-orange .modal-card-body .title,
.theme-gray .modal-card-body .title {
  color: #ffffff !important;
}

/* 2. APP THEME LIGHT: MODALS (High Specificity to Override Any Embedded Dark Schemes) */
.app-theme-light .modal-card,
.app-theme-light .theme-dark .modal-card,
.app-theme-light .theme-dark-purple .modal-card,
.app-theme-light .theme-dark-primary .modal-card,
.app-theme-light .theme-dark-link .modal-card,
.app-theme-light .theme-dark-orange .modal-card,
.app-theme-light .theme-gray .modal-card {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
}

.app-theme-light .modal-card-head,
.app-theme-light .theme-dark .modal-card-head,
.app-theme-light .theme-dark-purple .modal-card-head,
.app-theme-light .theme-dark-primary .modal-card-head,
.app-theme-light .theme-dark-link .modal-card-head,
.app-theme-light .theme-dark-orange .modal-card-head,
.app-theme-light .theme-gray .modal-card-head {
  background-color: #f8fafc !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
  padding: 16px 22px !important;
}

.app-theme-light .modal-card-title,
.app-theme-light .theme-dark .modal-card-head .modal-card-title,
.app-theme-light .theme-dark-purple .modal-card-head .modal-card-title,
.app-theme-light .theme-dark-primary .modal-card-head .modal-card-title,
.app-theme-light .theme-dark-link .modal-card-head .modal-card-title,
.app-theme-light .theme-dark-orange .modal-card-head .modal-card-title,
.app-theme-light .theme-gray .modal-card-head .modal-card-title {
  color: #0f172a !important;
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
}

.app-theme-light .modal-card-body,
.app-theme-light .theme-dark .modal-card-body,
.app-theme-light .theme-dark-purple .modal-card-body,
.app-theme-light .theme-dark-primary .modal-card-body,
.app-theme-light .theme-dark-link .modal-card-body,
.app-theme-light .theme-dark-orange .modal-card-body,
.app-theme-light .theme-gray .modal-card-body {
  background-color: #ffffff !important;
  color: #0f172a !important;
  padding: 22px !important;
}

.app-theme-light .modal-card-body label,
.app-theme-light .modal-card-body .label,
.app-theme-light .theme-dark .modal-card-body label,
.app-theme-light .theme-dark .modal-card-body .label,
.app-theme-light .theme-dark-purple .modal-card-body label,
.app-theme-light .theme-dark-purple .modal-card-body .label,
.app-theme-light .theme-dark-primary .modal-card-body label,
.app-theme-light .theme-dark-primary .modal-card-body .label,
.app-theme-light .theme-dark-link .modal-card-body label,
.app-theme-light .theme-dark-link .modal-card-body .label,
.app-theme-light .theme-dark-orange .modal-card-body label,
.app-theme-light .theme-dark-orange .modal-card-body .label,
.app-theme-light .theme-gray .modal-card-body label,
.app-theme-light .theme-gray .modal-card-body .label {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  margin-bottom: 6px !important;
}

.app-theme-light .modal-card-body .title,
.app-theme-light .modal-card-body .subtitle,
.app-theme-light .theme-dark .modal-card-body .title,
.app-theme-light .theme-dark-purple .modal-card-body .title,
.app-theme-light .theme-dark-primary .modal-card-body .title,
.app-theme-light .theme-dark-link .modal-card-body .title,
.app-theme-light .theme-dark-orange .modal-card-body .title,
.app-theme-light .theme-gray .modal-card-body .title {
  color: #0f172a !important;
}

.app-theme-light .modal-card-body .help {
  color: #64748b !important;
}

.app-theme-light .modal-card-body .input,
.app-theme-light .modal-card-body .textarea,
.app-theme-light .modal-card-body .select select,
.app-theme-light .theme-dark .modal-card-body .input,
.app-theme-light .theme-dark .modal-card-body .textarea,
.app-theme-light .theme-dark .modal-card-body .select select,
.app-theme-light .theme-dark-purple .modal-card-body .input,
.app-theme-light .theme-dark-purple .modal-card-body .textarea,
.app-theme-light .theme-dark-purple .modal-card-body .select select,
.app-theme-light .theme-dark-primary .modal-card-body .input,
.app-theme-light .theme-dark-primary .modal-card-body .textarea,
.app-theme-light .theme-dark-primary .modal-card-body .select select,
.app-theme-light .theme-dark-link .modal-card-body .input,
.app-theme-light .theme-dark-link .modal-card-body .textarea,
.app-theme-light .theme-dark-link .modal-card-body .select select,
.app-theme-light .theme-dark-orange .modal-card-body .input,
.app-theme-light .theme-dark-orange .modal-card-body .textarea,
.app-theme-light .theme-dark-orange .modal-card-body .select select,
.app-theme-light .theme-gray .modal-card-body .input,
.app-theme-light .theme-gray .modal-card-body .textarea,
.app-theme-light .theme-gray .modal-card-body .select select {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-light .modal-card-body .input:focus,
.app-theme-light .modal-card-body .textarea:focus,
.app-theme-light .modal-card-body .select select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.app-theme-light .modal-card-body .button.is-static {
  background-color: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #1e293b !important;
  border-radius: 10px 0 0 10px !important;
  font-weight: 600 !important;
}

.app-theme-light .modal-card-body hr {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.app-theme-light .modal-card-body .box,
.app-theme-light .theme-dark .modal-card-body .box,
.app-theme-light .theme-dark-purple .modal-card-body .box,
.app-theme-light .theme-dark-primary .modal-card-body .box,
.app-theme-light .theme-dark-link .modal-card-body .box,
.app-theme-light .theme-dark-orange .modal-card-body .box,
.app-theme-light .theme-gray .modal-card-body .box {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
  border-radius: 14px !important;
}

.app-theme-light .modal-card-foot,
.app-theme-light .theme-dark .modal-card-foot,
.app-theme-light .theme-dark-purple .modal-card-foot,
.app-theme-light .theme-dark-primary .modal-card-foot,
.app-theme-light .theme-dark-link .modal-card-foot,
.app-theme-light .theme-dark-orange .modal-card-foot,
.app-theme-light .theme-gray .modal-card-foot {
  background-color: #f8fafc !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 14px 22px !important;
}

.app-theme-light .modal-card-foot .button:not(.is-link):not(.is-primary):not(.is-danger),
.app-theme-light .modal-card-body .button:not(.is-link):not(.is-primary):not(.is-danger) {
  background-color: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #334155 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

.app-theme-light .modal-card-foot .button:not(.is-link):not(.is-primary):not(.is-danger):hover,
.app-theme-light .modal-card-body .button:not(.is-link):not(.is-primary):not(.is-danger):hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

.app-theme-light .modal-card-foot .button.is-link,
.app-theme-light .modal-card-foot .button.is-primary,
.app-theme-light .modal-card-body .button.is-link,
.app-theme-light .modal-card-body .button.is-primary {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.app-theme-light .modal-card-head .delete {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.app-theme-light .modal-card-head .delete:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

/* 3. APP THEME DARK: MODALS */
.app-theme-dark .modal-card {
  background-color: #14141a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75) !important;
  overflow: hidden !important;
}

.app-theme-dark .modal-card-head {
  background-color: #181822 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  padding: 16px 22px !important;
}

.app-theme-dark .modal-card-title {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
}

.app-theme-dark .modal-card-body {
  background-color: #14141a !important;
  color: #e2e8f0 !important;
  padding: 22px !important;
}

.app-theme-dark .modal-card-body label,
.app-theme-dark .modal-card-body .label {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  margin-bottom: 6px !important;
}

.app-theme-dark .modal-card-body .title,
.app-theme-dark .modal-card-body .subtitle {
  color: #ffffff !important;
}

.app-theme-dark .modal-card-body .help {
  color: #94a3b8 !important;
}

.app-theme-dark .modal-card-body .input,
.app-theme-dark .modal-card-body .textarea,
.app-theme-dark .modal-card-body .select select {
  background-color: #181822 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

.app-theme-dark .modal-card-body .button.is-static {
  background-color: #181822 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  border-radius: 10px 0 0 10px !important;
  font-weight: 600 !important;
}

.app-theme-dark .modal-card-body hr {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .modal-card-body .box {
  background-color: #181822 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border-radius: 14px !important;
}

.app-theme-dark .modal-card-foot {
  background-color: #181822 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 14px 22px !important;
}

.app-theme-dark .modal-card-foot .button:not(.is-link):not(.is-primary):not(.is-danger),
.app-theme-dark .modal-card-body .button:not(.is-link):not(.is-primary):not(.is-danger) {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

.app-theme-dark .modal-card-foot .button.is-link,
.app-theme-dark .modal-card-foot .button.is-primary,
.app-theme-dark .modal-card-body .button.is-link,
.app-theme-dark .modal-card-body .button.is-primary {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.45) !important;
}

/* ==========================================================================
   APP THEME (DARK / LIGHT) SYSTEM FOR DASHBOARD, PROFILE, CHATS INDEX
   ========================================================================== */

/* --- APP THEME: DARK MODE --- */
html.app-theme-dark,
body.app-theme-dark {
  background-color: #0b0b0f !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
}

.app-theme-dark .box,
.app-theme-dark .card {
  background-color: #14141a !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.app-theme-dark .title,
.app-theme-dark .subtitle {
  color: #ffffff !important;
}

.app-theme-dark .label {
  color: #cbd5e1 !important;
}

.app-theme-dark .input,
.app-theme-dark .textarea,
.app-theme-dark .select select {
  background-color: #1a1a24 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.app-theme-dark .input::placeholder,
.app-theme-dark .textarea::placeholder {
  color: #64748b !important;
}

/* App Theme Switcher Button */
.app-theme-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-theme-dark .app-theme-toggle-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f8fafc !important;
}

.app-theme-dark .app-theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* App Theme Segmented Switch (Mobile Drawer) */
.app-theme-segmented-switch {
  display: flex !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 4px !important;
  border-radius: 12px !important;
  gap: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.app-theme-seg-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.app-theme-seg-btn.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}

/* ==========================================================================
   APP NAVIGATION TABS (Dashboard, Chats, Websites, Profile)
   Using the same display font as the Inbox widget (--font-display)
   and enlarged for desktop view
   ========================================================================== */

.app-navigation-tabs {
  font-family: var(--font-display) !important;
}

@media screen and (min-width: 769px) {
  .app-navigation-tabs ul {
    gap: 8px !important;
    border-bottom-width: 2px !important;
  }

  .app-navigation-tabs li a {
    font-family: var(--font-display) !important;
    font-size: 1.18rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    padding: 10px 22px !important;
    border-radius: 12px 12px 0 0 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .app-navigation-tabs li a span {
    font-family: var(--font-display) !important;
    font-size: 1.18rem !important;
    letter-spacing: -0.01em !important;
  }

  .app-navigation-tabs li a .icon {
    font-size: 1.05rem !important;
    margin-right: 0.45rem !important;
  }

  .app-navigation-tabs li.is-active a,
  .app-navigation-tabs li.is-active a span {
    font-weight: 700 !important;
  }
}

/* App Navigation Tabs (Dashboard, Chats, Profile) in Dark */
.app-theme-dark .app-navigation-tabs ul {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .app-navigation-tabs li a {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
}

.app-theme-dark .app-navigation-tabs li a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.app-theme-dark .app-navigation-tabs li.is-active a {
  background: #14141a !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  border-bottom-color: #14141a !important;
  color: #38bdf8 !important;
}

/* Top Navbars in Dark */
/* ==========================================================================
   APP THEME DARK: NAVBAR & DROPDOWNS (SLEEK GRAPHITE OVERHAUL)
   ========================================================================== */

/* Navbar Container */
.app-theme-dark .navbar,
.app-theme-dark .dashboard-navbar,
.app-theme-dark .app-navbar,
.app-theme-dark nav.navbar.is-dark {
  background-color: #101015 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Navbar Items and Links */
.app-theme-dark .navbar.is-dark .navbar-item,
.app-theme-dark .navbar.is-dark .navbar-link,
.app-theme-dark .dashboard-navbar .navbar-item,
.app-theme-dark .dashboard-navbar .navbar-link,
.app-theme-dark .app-navbar .navbar-item,
.app-theme-dark .app-navbar .navbar-link {
  color: #e2e8f0 !important;
  background-color: transparent !important;
}

/* Hovering on navbar item / link */
.app-theme-dark .navbar.is-dark .navbar-item:hover,
.app-theme-dark .navbar.is-dark .navbar-link:hover,
.app-theme-dark .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link,
.app-theme-dark .navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link,
.app-theme-dark .dashboard-navbar .navbar-item:hover,
.app-theme-dark .dashboard-navbar .navbar-link:hover,
.app-theme-dark .dashboard-navbar .navbar-item.has-dropdown:hover .navbar-link,
.app-theme-dark .dashboard-navbar .navbar-item.has-dropdown.is-active .navbar-link,
.app-theme-dark .app-navbar .navbar-item:hover,
.app-theme-dark .app-navbar .navbar-link:hover,
.app-theme-dark .app-navbar .navbar-item.has-dropdown:hover .navbar-link,
.app-theme-dark .app-navbar .navbar-item.has-dropdown.is-active .navbar-link {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Dropdown arrow icon (::after) */
.app-theme-dark .navbar.is-dark .navbar-link:not(.is-arrowless)::after,
.app-theme-dark .dashboard-navbar .navbar-link:not(.is-arrowless)::after,
.app-theme-dark .app-navbar .navbar-link:not(.is-arrowless)::after {
  border-color: #94a3b8 !important;
}

.app-theme-dark .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link:not(.is-arrowless)::after,
.app-theme-dark .dashboard-navbar .navbar-item.has-dropdown:hover .navbar-link:not(.is-arrowless)::after,
.app-theme-dark .app-navbar .navbar-item.has-dropdown:hover .navbar-link:not(.is-arrowless)::after {
  border-color: #38bdf8 !important;
}

/* Navbar Dropdowns */
.app-theme-dark .navbar-dropdown,
.app-theme-dark .navbar.is-dark .navbar-dropdown,
.app-theme-dark .dashboard-navbar .navbar-dropdown,
.app-theme-dark .app-navbar .navbar-dropdown {
  background-color: #16161e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
  padding: 6px 0 !important;
}

/* Items inside dropdown */
.app-theme-dark .navbar-dropdown .navbar-item,
.app-theme-dark .navbar.is-dark .navbar-dropdown .navbar-item,
.app-theme-dark .navbar-dropdown a.navbar-item,
.app-theme-dark .navbar.is-dark .navbar-dropdown a.navbar-item,
.app-theme-dark .navbar-dropdown button.dropdown-item,
.app-theme-dark .dropdown-content .dropdown-item,
.app-theme-dark .dropdown-content a.dropdown-item {
  background-color: transparent !important;
  color: #cbd5e1 !important;
  font-size: 13.5px !important;
}

.app-theme-dark .navbar-dropdown strong,
.app-theme-dark .navbar.is-dark .navbar-dropdown strong,
.app-theme-dark .dropdown-content strong {
  color: #ffffff !important;
}

.app-theme-dark .navbar-dropdown .navbar-item:hover,
.app-theme-dark .navbar.is-dark .navbar-dropdown .navbar-item:hover,
.app-theme-dark .navbar-dropdown a.navbar-item:hover,
.app-theme-dark .navbar.is-dark .navbar-dropdown a.navbar-item:hover,
.app-theme-dark .navbar-dropdown button.dropdown-item:hover,
.app-theme-dark .dropdown-content .dropdown-item:hover,
.app-theme-dark .dropdown-content a.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #38bdf8 !important;
}

.app-theme-dark .navbar-dropdown button.dropdown-item {
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
}

/* Dividers in dropdowns */
.app-theme-dark .navbar-dropdown .navbar-divider,
.app-theme-dark .navbar.is-dark .navbar-dropdown .navbar-divider,
.app-theme-dark .dropdown-divider {
  background-color: rgba(255, 255, 255, 0.08) !important;
  margin: 6px 0 !important;
}

/* Chat selector dropdown button on dashboard left */
.app-theme-dark .dashboard-navbar .navbar-brand .button.is-dark {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
}

.app-theme-dark .dashboard-navbar .navbar-brand .button.is-dark:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.app-theme-dark .dashboard-navbar .navbar-brand .dropdown-menu .dropdown-content {
  background-color: #16161e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}

/* Table inside Specialists dropdown */
.app-theme-dark .navbar-dropdown table.table {
  background-color: transparent !important;
  color: #ffffff !important;
}

.app-theme-dark .navbar-dropdown table.table th {
  color: #94a3b8 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .navbar-dropdown table.table td {
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Mobile Header in Dark */
.app-theme-dark .dashboard-mobile-header {
  background: #121217 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Dashboard Columns Layout */
.dashboard-columns {
  align-items: stretch !important;
  margin-top: 0.5rem !important;
  margin-bottom: 2rem !important;
}

/* Dashboard Panel & Cards in Dark */
.app-theme-dark .dashboard-panel {
  background: #14141a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
}

.app-theme-dark .dashboard-panel-heading {
  background: #181822 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  padding: 14px 18px !important;
}

/* Filter Bar & Pills in Dark */
.dashboard-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .dashboard-filter-bar {
  background: #101015 !important;
}

.dashboard-filter-pill {
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.app-theme-dark .dashboard-filter-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .dashboard-filter-pill:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.app-theme-dark .dashboard-filter-pill.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.4) !important;
}

/* Inbox Panel Items in Dark */
.app-theme-dark .dashboard-panel .panel-block {
  background: transparent !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 12px 16px !important;
  transition: background 0.15s ease !important;
}

.app-theme-dark .dashboard-panel .panel-block:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #ffffff !important;
}

.app-theme-dark .dashboard-panel .panel-block.is-active {
  background: rgba(56, 189, 248, 0.08) !important;
  border-left: 3px solid #38bdf8 !important;
  color: #ffffff !important;
}

.app-theme-dark .dashboard-panel .panel-block strong {
  color: #ffffff !important;
}

/* Dashboard Client Card */
.dashboard-client-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.dashboard-client-card:hover {
  transform: translateY(-2px) !important;
}

.app-theme-dark .dashboard-client-card {
  background: #14141a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.dashboard-client-card-inner {
  display: flex !important;
  gap: 14px !important;
  padding: 16px 18px !important;
}

.dashboard-client-avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0284c7 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

.dashboard-client-details {
  flex: 1 !important;
  min-width: 0 !important;
}

.dashboard-client-name {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.dashboard-contact-row {
  display: flex !important;
  align-items: center !important;
  font-size: 13px !important;
  margin-bottom: 3px !important;
}

.app-theme-dark .dashboard-contact-row {
  color: #94a3b8 !important;
}

.app-theme-dark .dashboard-contact-row i {
  color: #38bdf8 !important;
  width: 16px !important;
}

/* Dashboard Subcards & Empty States in Dark */
.app-theme-dark .dashboard-subcard {
  background: #181822 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: #f8fafc !important;
}

.app-theme-dark .dashboard-empty-state {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 24px 18px !important;
  text-align: center !important;
  color: #94a3b8 !important;
}

.app-theme-dark .dashboard-table {
  background: transparent !important;
  color: #f8fafc !important;
}

.app-theme-dark .dashboard-table th {
  color: #94a3b8 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .dashboard-table td {
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   APP THEME: LIGHT MODE COMPLETE ADAPTATION
   ========================================================================== */

html.app-theme-light,
body.app-theme-light {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  color-scheme: light !important;
}

.app-theme-light .box,
.app-theme-light .card {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-light .title,
.app-theme-light .subtitle {
  color: #0f172a !important;
}

.app-theme-light .label {
  color: #334155 !important;
}

.app-theme-light .input,
.app-theme-light .textarea,
.app-theme-light .select select {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

.app-theme-light .input::placeholder,
.app-theme-light .textarea::placeholder {
  color: #94a3b8 !important;
}

/* App Theme Switcher Button in Light */
.app-theme-light .app-theme-toggle-btn {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

.app-theme-light .app-theme-toggle-btn:hover {
  background: #e2e8f0 !important;
  transform: translateY(-1px) !important;
}

/* App Theme Segmented Switch in Light */
.app-theme-light .app-theme-segmented-switch {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.app-theme-light .app-theme-seg-btn {
  color: #64748b !important;
}

.app-theme-light .app-theme-seg-btn.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

/* App Navigation Tabs in Light */
.app-theme-light .app-navigation-tabs ul {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.app-theme-light .app-navigation-tabs li a {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

.app-theme-light .app-navigation-tabs li a:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.app-theme-light .app-navigation-tabs li.is-active a {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  border-bottom-color: #ffffff !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   APP THEME LIGHT: NAVBAR & DROPDOWNS (COMPLETE CRISP OVERHAUL)
   ========================================================================== */

/* Navbar Container */
.app-theme-light .navbar,
.app-theme-light .dashboard-navbar,
.app-theme-light .app-navbar,
.app-theme-light nav.navbar.is-dark {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Navbar Items and Links */
.app-theme-light .navbar.is-dark .navbar-item,
.app-theme-light .navbar.is-dark .navbar-link,
.app-theme-light .dashboard-navbar .navbar-item,
.app-theme-light .dashboard-navbar .navbar-link,
.app-theme-light .app-navbar .navbar-item,
.app-theme-light .app-navbar .navbar-link {
  color: #1e293b !important;
  background-color: transparent !important;
}

/* Hovering on navbar item / link */
.app-theme-light .navbar.is-dark .navbar-item:hover,
.app-theme-light .navbar.is-dark .navbar-link:hover,
.app-theme-light .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link,
.app-theme-light .navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link,
.app-theme-light .dashboard-navbar .navbar-item:hover,
.app-theme-light .dashboard-navbar .navbar-link:hover,
.app-theme-light .dashboard-navbar .navbar-item.has-dropdown:hover .navbar-link,
.app-theme-light .dashboard-navbar .navbar-item.has-dropdown.is-active .navbar-link,
.app-theme-light .app-navbar .navbar-item:hover,
.app-theme-light .app-navbar .navbar-link:hover,
.app-theme-light .app-navbar .navbar-item.has-dropdown:hover .navbar-link,
.app-theme-light .app-navbar .navbar-item.has-dropdown.is-active .navbar-link {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}

/* Dropdown arrow icon (::after) */
.app-theme-light .navbar.is-dark .navbar-link:not(.is-arrowless)::after,
.app-theme-light .dashboard-navbar .navbar-link:not(.is-arrowless)::after,
.app-theme-light .app-navbar .navbar-link:not(.is-arrowless)::after {
  border-color: #475569 !important;
}

.app-theme-light .navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link:not(.is-arrowless)::after,
.app-theme-light .dashboard-navbar .navbar-item.has-dropdown:hover .navbar-link:not(.is-arrowless)::after,
.app-theme-light .app-navbar .navbar-item.has-dropdown:hover .navbar-link:not(.is-arrowless)::after {
  border-color: #0284c7 !important;
}

/* Navbar Dropdowns (Visitors, Appointments, Customers, Specialists, Profile, Account Settings, Language) */
.app-theme-light .navbar-dropdown,
.app-theme-light .navbar.is-dark .navbar-dropdown,
.app-theme-light .dashboard-navbar .navbar-dropdown,
.app-theme-light .app-navbar .navbar-dropdown {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
  padding: 6px 0 !important;
}

/* Items inside dropdown */
.app-theme-light .navbar-dropdown .navbar-item,
.app-theme-light .navbar.is-dark .navbar-dropdown .navbar-item,
.app-theme-light .navbar-dropdown a.navbar-item,
.app-theme-light .navbar.is-dark .navbar-dropdown a.navbar-item,
.app-theme-light .navbar-dropdown button.dropdown-item,
.app-theme-light .dropdown-content .dropdown-item,
.app-theme-light .dropdown-content a.dropdown-item {
  background-color: transparent !important;
  color: #1e293b !important;
  font-size: 13.5px !important;
}

.app-theme-light .navbar-dropdown strong,
.app-theme-light .navbar.is-dark .navbar-dropdown strong,
.app-theme-light .dropdown-content strong {
  color: #020617 !important;
}

.app-theme-light .navbar-dropdown .navbar-item:hover,
.app-theme-light .navbar.is-dark .navbar-dropdown .navbar-item:hover,
.app-theme-light .navbar-dropdown a.navbar-item:hover,
.app-theme-light .navbar.is-dark .navbar-dropdown a.navbar-item:hover,
.app-theme-light .navbar-dropdown button.dropdown-item:hover,
.app-theme-light .dropdown-content .dropdown-item:hover,
.app-theme-light .dropdown-content a.dropdown-item:hover {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}

.app-theme-light .navbar-dropdown button.dropdown-item {
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
}

/* Dividers in dropdowns */
.app-theme-light .navbar-dropdown .navbar-divider,
.app-theme-light .navbar.is-dark .navbar-dropdown .navbar-divider,
.app-theme-light .dropdown-divider {
  background-color: rgba(0, 0, 0, 0.06) !important;
  margin: 6px 0 !important;
}

/* Chat selector dropdown button on dashboard left */
.app-theme-light .dashboard-navbar .navbar-brand .button.is-dark {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
}

.app-theme-light .dashboard-navbar .navbar-brand .button.is-dark:hover {
  background: #e2e8f0 !important;
}

.app-theme-light .dashboard-navbar .navbar-brand .dropdown-menu .dropdown-content {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Table inside Specialists dropdown */
.app-theme-light .navbar-dropdown table.table {
  background-color: transparent !important;
  color: #0f172a !important;
}

.app-theme-light .navbar-dropdown table.table th {
  color: #64748b !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

.app-theme-light .navbar-dropdown table.table td {
  color: #1e293b !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Mobile Header in Light */
.app-theme-light .dashboard-mobile-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Dashboard Panel & Cards in Light */
.app-theme-light .dashboard-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-light .dashboard-panel-heading {
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  padding: 14px 18px !important;
}

/* Filter Bar & Pills in Light */
.app-theme-light .dashboard-filter-bar {
  background: #f8fafc !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

.app-theme-light .dashboard-filter-pill {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.app-theme-light .dashboard-filter-pill:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.app-theme-light .dashboard-filter-pill.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.35) !important;
}

/* Inbox Panel Items in Light */
.app-theme-light .dashboard-panel .panel-block {
  background: transparent !important;
  color: #334155 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 12px 16px !important;
  transition: background 0.15s ease !important;
}

.app-theme-light .dashboard-panel .panel-block:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.app-theme-light .dashboard-panel .panel-block.is-active {
  background: rgba(2, 132, 199, 0.06) !important;
  border-left: 3px solid #0284c7 !important;
  color: #0f172a !important;
}

.app-theme-light .dashboard-panel .panel-block strong {
  color: #0f172a !important;
}

/* Customer Inbox Row & Card Button */
.customer-inbox-row {
  transition: all 0.2s ease !important;
}

.customer-inbox-row:hover .client-card-trigger-btn {
  transform: scale(1.04) !important;
}

.client-card-trigger-btn {
  border-radius: 9999px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.app-theme-light .client-card-trigger-btn {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.2) !important;
}

.app-theme-light .client-card-trigger-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

.app-theme-dark .client-card-trigger-btn {
  background: rgba(56, 189, 248, 0.1) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.app-theme-dark .client-card-trigger-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4) !important;
}

/* Dashboard Client Card in Light */
.app-theme-light .dashboard-client-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-light .dashboard-client-name {
  color: #0f172a !important;
}

.app-theme-light .dashboard-contact-row {
  color: #475569 !important;
}

.app-theme-light .dashboard-contact-row i {
  color: #0284c7 !important;
  width: 16px !important;
}

.app-theme-light .dashboard-client-card-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Dashboard Subcards & Empty States in Light */
.app-theme-light .dashboard-subcard {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: #0f172a !important;
}

.app-theme-light .dashboard-empty-state {
  background: #f8fafc !important;
  border: 1px dashed rgba(0, 0, 0, 0.12) !important;
  border-radius: 14px !important;
  padding: 24px 18px !important;
  text-align: center !important;
  color: #64748b !important;
}

.app-theme-light .dashboard-table,
.app-theme-light .dashboard-client-panel table.table,
.app-theme-light .dashboard-client-panel .table {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.app-theme-light .dashboard-table thead,
.app-theme-light .dashboard-table thead tr,
.app-theme-light .dashboard-client-panel .table thead,
.app-theme-light .dashboard-client-panel .table thead tr {
  background-color: #ffffff !important;
}

.app-theme-light .dashboard-table th,
.app-theme-light .dashboard-client-panel .table th {
  background-color: #ffffff !important;
  color: #64748b !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.app-theme-light .dashboard-table tbody,
.app-theme-light .dashboard-table tbody tr,
.app-theme-light .dashboard-client-panel .table tbody,
.app-theme-light .dashboard-client-panel .table tbody tr {
  background-color: #ffffff !important;
}

.app-theme-light .dashboard-table td,
.app-theme-light .dashboard-client-panel .table td {
  background-color: #ffffff !important;
  color: #334155 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

.app-theme-light .dashboard-table.is-striped tbody tr:not(.is-selected):nth-child(even),
.app-theme-light .dashboard-table.is-striped tbody tr:not(.is-selected):nth-child(even) td,
.app-theme-light .dashboard-client-panel .table.is-striped tbody tr:not(.is-selected):nth-child(even),
.app-theme-light .dashboard-client-panel .table.is-striped tbody tr:not(.is-selected):nth-child(even) td {
  background-color: #f8fafc !important;
}

.app-theme-light .dashboard-table.is-hoverable tbody tr:not(.is-selected):hover,
.app-theme-light .dashboard-table.is-hoverable tbody tr:not(.is-selected):hover td,
.app-theme-light .dashboard-client-panel .table.is-hoverable tbody tr:not(.is-selected):hover,
.app-theme-light .dashboard-client-panel .table.is-hoverable tbody tr:not(.is-selected):hover td {
  background-color: #f1f5f9 !important;
}

/* ==========================================================================
   DASHBOARD 3-COLUMN VIEWPORT SIZING & VISIBILITY (COMPACT & CONTAINED)
   ========================================================================== */

@media screen and (min-width: 1024px) {
  html:has(.dashboard-columns),
  body:has(.dashboard-columns) {
    overflow-y: hidden;
  }

  .dashboard-columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    height: calc(100vh - var(--dashboard-top-offset, 220px)) !important;
    min-height: 320px !important;
    max-height: calc(100vh - var(--dashboard-top-offset, 220px)) !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
  }

  .dashboard-col {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 1023px) {
  .dashboard-columns {
    height: auto !important;
    max-height: none !important;
  }
  .dashboard-col {
    width: 100% !important;
    margin-bottom: 1.25rem !important;
  }
}

/* Client Column Layout */
.dashboard-col-client .dashboard-client-panel {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.dashboard-client-scroll-container {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding-right: 4px !important;
}

/* Client Card Compact Sizing */
.dashboard-client-card {
  border-radius: 14px !important;
  margin-bottom: 0.75rem !important;
}

.dashboard-client-card-inner {
  display: flex !important;
  gap: 10px !important;
  padding: 12px 14px !important;
}

.dashboard-client-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}

.dashboard-client-name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

.dashboard-contact-row {
  font-size: 12px !important;
  margin-bottom: 2px !important;
}

/* Inbox Column Layout */
.dashboard-col-inbox .dashboard-panel {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 0 !important;
}

.dashboard-inbox-scroll-area {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

.dashboard-panel .panel-block {
  padding: 10px 14px !important;
  font-size: 13px !important;
}

/* Live Chat / Message Box Column Layout */
.dashboard-chat-container {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.dashboard-chat-box {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

.dashboard-chat-header {
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}

.dashboard-chat-messages,
.dashboard-chat-box .messages-container {
  flex: 1 1 0% !important;
  flex-grow: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 12px 14px !important;
}

.dashboard-chat-input-bar {
  padding: 8px 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Dark Theme Chat Styling */
.app-theme-dark .dashboard-chat-box {
  background: #14141a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.app-theme-dark .dashboard-chat-box .dashboard-chat-header {
  background: #14141a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.app-theme-dark .dashboard-chat-box .dashboard-chat-title {
  color: #ffffff !important;
}

.app-theme-dark .dashboard-chat-box .dashboard-chat-messages,
.app-theme-dark .dashboard-chat-box .messages-container {
  background: #14141a !important;
}

.app-theme-dark .dashboard-chat-box .dashboard-chat-input-bar {
  background: #101015 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .dashboard-chat-box .custom-input {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.app-theme-dark .dashboard-chat-box .custom-input-placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Light Theme Chat Styling */
.app-theme-light .dashboard-chat-box {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-light .dashboard-chat-box .dashboard-chat-header {
  background: #ffffff !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

.app-theme-light .dashboard-chat-box .dashboard-chat-title {
  color: #0f172a !important;
}

.app-theme-light .dashboard-chat-box .dashboard-chat-messages,
.app-theme-light .dashboard-chat-box .messages-container {
  background: #ffffff !important;
}

.app-theme-light .dashboard-chat-box .dashboard-chat-input-bar {
  background: #f8fafc !important;
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

.app-theme-light .dashboard-chat-box .custom-input {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.app-theme-light .dashboard-chat-box .custom-input-placeholder {
  color: #94a3b8 !important;
}

.dashboard-chat-send-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.dashboard-chat-send-btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.04) !important;
}

.dashboard-chat-send-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Empty chat state */
.dashboard-chat-empty {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* ==========================================================================
   ENHANCED HIGH-CONTRAST DARK TEXT IN LIGHT THEME
   (Subscriptions, Tokens, User Cards, Tables, Headings)
   ========================================================================== */

.app-theme-light body,
.app-theme-light .box,
.app-theme-light .card,
.app-theme-light .content,
.app-theme-light p,
.app-theme-light strong,
.app-theme-light b,
.app-theme-light h1,
.app-theme-light h2,
.app-theme-light h3,
.app-theme-light h4,
.app-theme-light h5,
.app-theme-light h6,
.app-theme-light .title,
.app-theme-light .subtitle,
.app-theme-light .label,
.app-theme-light td,
.app-theme-light th,
.app-theme-light .dashboard-client-name,
.app-theme-light .dashboard-chat-title,
.app-theme-light .dashboard-panel-heading {
  color: #0f172a !important; /* Rich, crisp near-black */
}

.app-theme-light strong,
.app-theme-light b {
  color: #020617 !important; /* Absolute deep dark black for bold items */
  font-weight: 700 !important;
}

.app-theme-light small,
.app-theme-light .has-text-grey,
.app-theme-light .has-text-grey-light,
.app-theme-light .has-text-grey-dark,
.app-theme-light .dashboard-contact-row,
.app-theme-light .dashboard-table td,
.app-theme-light .panel-block {
  color: #334155 !important; /* Clear charcoal instead of washed out light grey */
}

.app-theme-light .dashboard-contact-row i {
  color: #0284c7 !important;
}

/* Profile specific cards in light theme */
.app-theme-light [data-controller="profile"] strong,
.app-theme-light [data-controller="tokens"] strong,
.app-theme-light [data-controller="subscription"] strong,
.app-theme-light [data-controller="tokens"] [data-tokens-target="balance"] {
  color: #020617 !important;
  font-weight: 700 !important;
}

.app-theme-light [data-controller="profile"] p,
.app-theme-light [data-controller="tokens"] p,
.app-theme-light [data-controller="subscription"] p {
  color: #0f172a !important;
}

.app-theme-light [data-controller="profile"] small,
.app-theme-light [data-controller="tokens"] small,
.app-theme-light [data-controller="subscription"] small {
  color: #334155 !important;
  font-weight: 500 !important;
}

/* Inputs in light theme chat */
.app-theme-light .custom-input-container #custom-input {
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
}

.app-theme-light .custom-input-placeholder {
  color: #64748b !important;
}

/* ==========================================================================
   CHATS PAGE (/chats): MINI PREVIEWS & CHAT SELECTOR BUTTONS
   ========================================================================== */

/* Chat Selector Pills (Mini chat switchers) */
.app-theme-light .chat-selector-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-light .chat-selector-btn:hover {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
}

.app-theme-light .chat-selector-btn.is-active,
.app-theme-light .chat-selector-btn.is-link {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

.app-theme-dark .chat-selector-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}

.app-theme-dark .chat-selector-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.app-theme-dark .chat-selector-btn.is-active,
.app-theme-dark .chat-selector-btn.is-link {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
}

/* ==========================================================================
   CHAT PREVIEW CARDS (.chat-card) COLOR SCHEMES & ADAPTATION
   ========================================================================== */

.chat-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- DARK THEMES CHAT PREVIEW CARDS --- */
.chat-card.theme-dark,
.chat-card.theme-dark-purple,
.chat-card.theme-dark-primary,
.chat-card.theme-dark-link,
.chat-card.theme-dark-orange,
.chat-card.theme-gray {
  background: #14141a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  color: #f8fafc !important;
}

/* Dark Card Headers */
.chat-card.theme-dark .card-header {
  background: linear-gradient(135deg, #22222d 0%, #14141a 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.chat-card.theme-dark-purple .card-header {
  background: linear-gradient(135deg, #581c87 0%, #2e1065 100%) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.25) !important;
}

.chat-card.theme-dark-primary .card-header {
  background: linear-gradient(135deg, #065f46 0%, #022c22 100%) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.chat-card.theme-dark-link .card-header {
  background: linear-gradient(135deg, #0369a1 0%, #082f49 100%) !important;
  border-bottom: 1px solid rgba(14, 165, 233, 0.25) !important;
}

.chat-card.theme-dark-orange .card-header {
  background: linear-gradient(135deg, #c2410c 0%, #431407 100%) !important;
  border-bottom: 1px solid rgba(249, 115, 22, 0.25) !important;
}

.chat-card.theme-gray .card-header {
  background: linear-gradient(135deg, #3f3f46 0%, #18181b 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chat-card.theme-dark .card-header-title,
.chat-card.theme-dark-purple .card-header-title,
.chat-card.theme-dark-primary .card-header-title,
.chat-card.theme-dark-link .card-header-title,
.chat-card.theme-dark-orange .card-header-title,
.chat-card.theme-gray .card-header-title {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* Theme Dropdown in Card Header for Dark Themes */
.chat-card.theme-dark .card-header .select select,
.chat-card.theme-dark-purple .card-header .select select,
.chat-card.theme-dark-primary .card-header .select select,
.chat-card.theme-dark-link .card-header .select select,
.chat-card.theme-dark-orange .card-header .select select,
.chat-card.theme-gray .card-header .select select {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.chat-card.theme-dark .card-header .select select option,
.chat-card.theme-dark-purple .card-header .select select option,
.chat-card.theme-dark-primary .card-header .select select option,
.chat-card.theme-dark-link .card-header .select select option,
.chat-card.theme-dark-orange .card-header .select select option,
.chat-card.theme-gray .card-header .select select option {
  background: #181822 !important;
  color: #ffffff !important;
}

/* Dark Card Body & Content */
.chat-card.theme-dark .card-content,
.chat-card.theme-dark-purple .card-content,
.chat-card.theme-dark-primary .card-content,
.chat-card.theme-dark-link .card-content,
.chat-card.theme-dark-orange .card-content,
.chat-card.theme-gray .card-content {
  background: #14141a !important;
  color: #cbd5e1 !important;
}

/* Section Toggle Bar for Dark Cards */
.chat-card.theme-dark .section-toggle-bar .button,
.chat-card.theme-dark-purple .section-toggle-bar .button,
.chat-card.theme-dark-primary .section-toggle-bar .button,
.chat-card.theme-dark-link .section-toggle-bar .button,
.chat-card.theme-dark-orange .section-toggle-bar .button,
.chat-card.theme-gray .section-toggle-bar .button {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.chat-card.theme-dark .section-toggle-bar .button:hover,
.chat-card.theme-dark-purple .section-toggle-bar .button:hover,
.chat-card.theme-dark-primary .section-toggle-bar .button:hover,
.chat-card.theme-dark-link .section-toggle-bar .button:hover,
.chat-card.theme-dark-orange .section-toggle-bar .button:hover,
.chat-card.theme-gray .section-toggle-bar .button:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.chat-card.theme-dark .section-toggle-bar .button.is-link,
.chat-card.theme-dark-purple .section-toggle-bar .button.is-link,
.chat-card.theme-dark-primary .section-toggle-bar .button.is-link,
.chat-card.theme-dark-link .section-toggle-bar .button.is-link,
.chat-card.theme-dark-orange .section-toggle-bar .button.is-link,
.chat-card.theme-gray .section-toggle-bar .button.is-link {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}

/* Tables inside Dark Cards */
.chat-card.theme-dark table,
.chat-card.theme-dark-purple table,
.chat-card.theme-dark-primary table,
.chat-card.theme-dark-link table,
.chat-card.theme-dark-orange table,
.chat-card.theme-gray table {
  background-color: transparent !important;
  color: #e2e8f0 !important;
}

.chat-card.theme-dark table th,
.chat-card.theme-dark-purple table th,
.chat-card.theme-dark-primary table th,
.chat-card.theme-dark-link table th,
.chat-card.theme-dark-orange table th,
.chat-card.theme-gray table th {
  color: #94a3b8 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.chat-card.theme-dark table td,
.chat-card.theme-dark-purple table td,
.chat-card.theme-dark-primary table td,
.chat-card.theme-dark-link table td,
.chat-card.theme-dark-orange table td,
.chat-card.theme-gray table td {
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Footer for Dark Cards */
.chat-card.theme-dark .card-footer,
.chat-card.theme-dark-purple .card-footer,
.chat-card.theme-dark-primary .card-footer,
.chat-card.theme-dark-link .card-footer,
.chat-card.theme-dark-orange .card-footer,
.chat-card.theme-gray .card-footer {
  background: #101015 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.chat-card.theme-dark .card-footer-item,
.chat-card.theme-dark-purple .card-footer-item,
.chat-card.theme-dark-primary .card-footer-item,
.chat-card.theme-dark-link .card-footer-item,
.chat-card.theme-dark-orange .card-footer-item,
.chat-card.theme-gray .card-footer-item {
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

.chat-card.theme-dark .card-footer-item:hover,
.chat-card.theme-dark-purple .card-footer-item:hover,
.chat-card.theme-dark-primary .card-footer-item:hover,
.chat-card.theme-dark-link .card-footer-item:hover,
.chat-card.theme-dark-orange .card-footer-item:hover,
.chat-card.theme-gray .card-footer-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #38bdf8 !important;
}

/* --- WHITE / LIGHT THEMES CHAT PREVIEW CARDS --- */
.chat-card.theme-white,
.chat-card.theme-white-purple,
.chat-card.theme-white-primary,
.chat-card.theme-white-link,
.chat-card.theme-white-orange {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

/* White Card Headers */
.chat-card.theme-white .card-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.chat-card.theme-white-purple .card-header {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15) !important;
}

.chat-card.theme-white-primary .card-header {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.chat-card.theme-white-link .card-header {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border-bottom: 1px solid rgba(14, 165, 233, 0.15) !important;
}

.chat-card.theme-white-orange .card-header {
  background: linear-gradient(135deg, #fffaf0 0%, #ffedd5 100%) !important;
  border-bottom: 1px solid rgba(249, 115, 22, 0.15) !important;
}

.chat-card.theme-white .card-header-title,
.chat-card.theme-white-purple .card-header-title,
.chat-card.theme-white-primary .card-header-title,
.chat-card.theme-white-link .card-header-title,
.chat-card.theme-white-orange .card-header-title {
  color: #0f172a !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* Theme Dropdown in Card Header for White Themes */
.chat-card.theme-white .card-header .select select,
.chat-card.theme-white-purple .card-header .select select,
.chat-card.theme-white-primary .card-header .select select,
.chat-card.theme-white-link .card-header .select select,
.chat-card.theme-white-orange .card-header .select select {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
  border-radius: 8px !important;
}

.chat-card.theme-white .card-header .select select option,
.chat-card.theme-white-purple .card-header .select select option,
.chat-card.theme-white-primary .card-header .select select option,
.chat-card.theme-white-link .card-header .select select option,
.chat-card.theme-white-orange .card-header .select select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* White Card Body & Content */
.chat-card.theme-white .card-content,
.chat-card.theme-white-purple .card-content,
.chat-card.theme-white-primary .card-content,
.chat-card.theme-white-link .card-content,
.chat-card.theme-white-orange .card-content {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Section Toggle Bar for White Cards */
.chat-card.theme-white .section-toggle-bar .button,
.chat-card.theme-white-purple .section-toggle-bar .button,
.chat-card.theme-white-primary .section-toggle-bar .button,
.chat-card.theme-white-link .section-toggle-bar .button,
.chat-card.theme-white-orange .section-toggle-bar .button {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.chat-card.theme-white .section-toggle-bar .button:hover,
.chat-card.theme-white-purple .section-toggle-bar .button:hover,
.chat-card.theme-white-primary .section-toggle-bar .button:hover,
.chat-card.theme-white-link .section-toggle-bar .button:hover,
.chat-card.theme-white-orange .section-toggle-bar .button:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.chat-card.theme-white .section-toggle-bar .button.is-link,
.chat-card.theme-white-purple .section-toggle-bar .button.is-link,
.chat-card.theme-white-primary .section-toggle-bar .button.is-link,
.chat-card.theme-white-link .section-toggle-bar .button.is-link,
.chat-card.theme-white-orange .section-toggle-bar .button.is-link {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

/* Tables inside White Cards */
.chat-card.theme-white table,
.chat-card.theme-white-purple table,
.chat-card.theme-white-primary table,
.chat-card.theme-white-link table,
.chat-card.theme-white-orange table {
  background-color: transparent !important;
  color: #0f172a !important;
}

.chat-card.theme-white table th,
.chat-card.theme-white-purple table th,
.chat-card.theme-white-primary table th,
.chat-card.theme-white-link table th,
.chat-card.theme-white-orange table th {
  color: #64748b !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.chat-card.theme-white table td,
.chat-card.theme-white-purple table td,
.chat-card.theme-white-primary table td,
.chat-card.theme-white-link table td,
.chat-card.theme-white-orange table td {
  color: #1e293b !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Footer for White Cards */
.chat-card.theme-white .card-footer,
.chat-card.theme-white-purple .card-footer,
.chat-card.theme-white-primary .card-footer,
.chat-card.theme-white-link .card-footer,
.chat-card.theme-white-orange .card-footer {
  background: #f8fafc !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.chat-card.theme-white .card-footer-item,
.chat-card.theme-white-purple .card-footer-item,
.chat-card.theme-white-primary .card-footer-item,
.chat-card.theme-white-link .card-footer-item,
.chat-card.theme-white-orange .card-footer-item {
  color: #334155 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

.chat-card.theme-white .card-footer-item:hover,
.chat-card.theme-white-purple .card-footer-item:hover,
.chat-card.theme-white-primary .card-footer-item:hover,
.chat-card.theme-white-link .card-footer-item:hover,
.chat-card.theme-white-orange .card-footer-item:hover {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
}

/* ==========================================================================
   CALENDAR SYSTEM (MONTH, WEEK, DAY, YEAR, SLOTS, APPOINTMENTS)
   ========================================================================== */

.calendar-page-wrapper {
  padding-bottom: 2rem;
}

/* 1. Navbar & Top Navigation */
.calendar-navbar {
  border-radius: 16px !important;
  transition: all 0.25s ease !important;
}

.sticky-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  transition: all 0.25s ease !important;
}

.app-theme-light .sticky-navbar.scrolled {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.app-theme-dark .sticky-navbar.scrolled {
  background: rgba(16, 16, 21, 0.88) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.chat-picker-btn {
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 6px 14px !important;
  transition: all 0.2s ease !important;
}

.app-theme-light .chat-picker-btn {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

.app-theme-light .chat-picker-btn:hover {
  background: #e2e8f0 !important;
}

.app-theme-dark .chat-picker-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

.app-theme-dark .chat-picker-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.calendar-action-btn {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35) !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.calendar-action-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
}

.calendar-back-btn {
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.app-theme-light .calendar-back-btn {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #334155 !important;
}

.app-theme-light .calendar-back-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.app-theme-dark .calendar-back-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
}

.app-theme-dark .calendar-back-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* 2. Calendar Header Bar & Controls */
.calendar-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding: 8px 4px !important;
  transition: all 0.25s ease !important;
}

.sticky-header {
  position: sticky !important;
  top: 56px !important;
  z-index: 25 !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  transition: all 0.25s ease !important;
}

.app-theme-light .sticky-header.scrolled {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.app-theme-dark .sticky-header.scrolled {
  background: rgba(20, 20, 26, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.calendar-segmented-control {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  border-radius: 12px !important;
  padding: 3px !important;
}

.app-theme-light .calendar-segmented-control {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.app-theme-dark .calendar-segmented-control {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.calendar-seg-btn {
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-theme-light .calendar-seg-btn {
  color: #64748b !important;
}

.app-theme-light .calendar-seg-btn:hover {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.6) !important;
}

.app-theme-light .calendar-seg-btn.is-active {
  background: #ffffff !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.app-theme-dark .calendar-seg-btn {
  color: #94a3b8 !important;
}

.app-theme-dark .calendar-seg-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .calendar-seg-btn.is-active {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}

.calendar-date-heading {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  text-align: center !important;
}

.app-theme-light .calendar-date-heading {
  color: #0f172a !important;
}

.app-theme-dark .calendar-date-heading {
  color: #f8fafc !important;
}

.calendar-nav-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.calendar-nav-btn,
.calendar-today-btn {
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.app-theme-light .calendar-nav-btn,
.app-theme-light .calendar-today-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-light .calendar-nav-btn:hover,
.app-theme-light .calendar-today-btn:hover {
  background: #f8fafc !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}

.app-theme-dark .calendar-nav-btn,
.app-theme-dark .calendar-today-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
}

.app-theme-dark .calendar-nav-btn:hover,
.app-theme-dark .calendar-today-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

/* 3. Calendar Viewport Card Container */
.calendar-viewport-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.app-theme-light .calendar-viewport-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-dark .calendar-viewport-card {
  background: #14141a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* 4. Month View Styles */
.calendar-month-table {
  border-collapse: collapse !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

.app-theme-light .calendar-month-table,
.app-theme-light .calendar-table {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.app-theme-light .calendar-month-table tbody,
.app-theme-light .calendar-month-table tr {
  background-color: #ffffff !important;
}

.calendar-weekday-header {
  padding: 12px 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.app-theme-light .calendar-weekday-header {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.app-theme-dark .calendar-weekday-header {
  background: #181822 !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.calendar-day-cell {
  height: 124px !important;
  vertical-align: top !important;
  padding: 8px !important;
  transition: background 0.15s ease !important;
  position: relative !important;
  cursor: pointer !important;
}

.app-theme-light .calendar-day-cell {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.app-theme-light .calendar-day-cell:hover {
  background-color: #f8fafc !important;
}

.app-theme-light .calendar-day-cell.is-today {
  background-color: rgba(2, 132, 199, 0.04) !important;
}

.app-theme-light .calendar-day-cell.is-empty {
  background-color: #f8fafc !important;
  opacity: 1 !important;
  cursor: default !important;
}

.app-theme-dark .calendar-day-cell {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: transparent;
}

.app-theme-dark .calendar-day-cell:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.app-theme-dark .calendar-day-cell.is-today {
  background-color: rgba(56, 189, 248, 0.04) !important;
}

.app-theme-dark .calendar-day-cell.is-empty {
  background: #0d0d12 !important;
  opacity: 0.4 !important;
  cursor: default !important;
}

.calendar-day-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.calendar-day-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.app-theme-light .calendar-day-badge {
  color: #1e293b !important;
}

.app-theme-light .calendar-day-badge.is-today {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35) !important;
  font-weight: 700 !important;
}

.app-theme-dark .calendar-day-badge {
  color: #cbd5e1 !important;
}

.app-theme-dark .calendar-day-badge.is-today {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.5) !important;
  font-weight: 700 !important;
}

.calendar-day-count {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
}

.app-theme-light .calendar-day-count {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

.app-theme-dark .calendar-day-count {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

/* Month Event Pill */
.calendar-event-pill {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  margin-bottom: 4px !important;
  font-size: 11.5px !important;
  border-left-width: 3px !important;
  border-left-style: solid !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.calendar-event-pill .event-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.calendar-event-pill .event-time {
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  font-size: 10.5px !important;
  opacity: 0.85 !important;
}

.calendar-event-pill .event-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}

.app-theme-light .calendar-event-pill {
  background: #f0f9ff !important;
  color: #0369a1 !important;
  border-top: 1px solid rgba(2, 132, 199, 0.15) !important;
  border-right: 1px solid rgba(2, 132, 199, 0.15) !important;
  border-bottom: 1px solid rgba(2, 132, 199, 0.15) !important;
}

.app-theme-light .calendar-event-pill:hover {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.15) !important;
}

.app-theme-dark .calendar-event-pill {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #e0f2fe !important;
  border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
  border-right: 1px solid rgba(56, 189, 248, 0.2) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
}

.app-theme-dark .calendar-event-pill:hover {
  background: rgba(14, 165, 233, 0.25) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.calendar-more-badge {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  margin-top: 2px !important;
  transition: all 0.2s ease !important;
}

.app-theme-light .calendar-more-badge {
  color: #0284c7 !important;
  background: #f1f5f9 !important;
}

.app-theme-light .calendar-more-badge:hover {
  background: #e2e8f0 !important;
}

.app-theme-dark .calendar-more-badge {
  color: #38bdf8 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .calendar-more-badge:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* 5. Week View Styles */
.calendar-week-scroll-container {
  height: calc(100vh - 200px) !important;
  overflow-y: scroll !important;
  overflow-x: auto !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch !important;
}

.calendar-week-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  position: relative !important;
}

.app-theme-light .calendar-week-table {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.app-theme-light .calendar-week-table tbody,
.app-theme-light .calendar-week-table tr {
  background-color: #ffffff !important;
}

/* Floating Sticky Secondary Navbar for Days of the Week */
.calendar-week-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

.calendar-week-table thead th.calendar-time-col-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 30 !important;
}

.calendar-week-table tbody th.calendar-time-label-cell {
  position: sticky !important;
  left: 0 !important;
  z-index: 15 !important;
}

.app-theme-light .calendar-week-table thead th {
  background: #f8fafc !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.06) !important;
}

.app-theme-dark .calendar-week-table thead th {
  background: #181822 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4) !important;
}

.app-theme-light .calendar-time-col-header {
  background: #f8fafc !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.app-theme-dark .calendar-time-col-header {
  background: #181822 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.calendar-week-header-cell {
  padding: 10px 6px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.app-theme-light .calendar-week-header-cell {
  background: #f8fafc !important;
  color: #1e293b !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
}

.app-theme-light .calendar-week-header-cell:hover {
  background: #e2e8f0 !important;
}

.app-theme-dark .calendar-week-header-cell {
  background: #181822 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
}

.app-theme-dark .calendar-week-header-cell:hover {
  background: #232330 !important;
}

.week-header-dayname {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

.week-header-daynum {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}

.week-header-daynum.is-today-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

.calendar-time-label-cell {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-align: right !important;
  padding-right: 8px !important;
}

.app-theme-light .calendar-time-label-cell {
  color: #94a3b8 !important;
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.app-theme-dark .calendar-time-label-cell {
  color: #64748b !important;
  background: #181822 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.calendar-time-slot {
  transition: background 0.15s ease !important;
}

.app-theme-light .calendar-time-slot {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background-color: #ffffff !important;
}

.app-theme-light .calendar-time-slot.is-open-hour {
  background-color: #ffffff !important;
}

.app-theme-light .calendar-time-slot:hover {
  background-color: #f8fafc !important;
}

.app-theme-dark .calendar-time-slot {
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.app-theme-dark .calendar-time-slot.is-open-hour {
  background-color: rgba(56, 189, 248, 0.03) !important;
}

.app-theme-dark .calendar-time-slot:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.calendar-week-event-card {
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.app-theme-light .calendar-week-event-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

.app-theme-light .calendar-week-event-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  z-index: 50 !important;
}

.app-theme-dark .calendar-week-event-card {
  background: #1e1e28 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  color: #f8fafc !important;
}

.app-theme-dark .calendar-week-event-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important;
  z-index: 50 !important;
}

.week-card-title {
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.week-card-time {
  font-size: 10.5px !important;
  color: #64748b !important;
}

.week-card-service {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
  width: fit-content !important;
}

/* 6. Day View Styles */
.staff-headers {
  transition: all 0.25s ease !important;
}

.app-theme-light .staff-headers {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-dark .staff-headers {
  background: #181822 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.staff-header-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  font-size: 13.5px !important;
}

.app-theme-light .staff-header-col {
  color: #1e293b !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.app-theme-dark .staff-header-col {
  color: #f8fafc !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.staff-header-time {
  font-weight: 700 !important;
}

.app-theme-light .staff-header-time {
  background: #f8fafc !important;
  color: #64748b !important;
}

.app-theme-dark .staff-header-time {
  background: #14141a !important;
  color: #94a3b8 !important;
}

.staff-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

.hour-row {
  transition: background 0.15s ease !important;
}

.app-theme-light .calendar-day-scroll-container,
.app-theme-light .day-view-grid-body,
.app-theme-light .hour-row {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.app-theme-light .hour-row.is-business-hour {
  background-color: #ffffff !important;
}

.app-theme-dark .hour-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.app-theme-dark .hour-row.is-business-hour {
  background-color: rgba(56, 189, 248, 0.03) !important;
}

.hour-label-cell {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.app-theme-light .hour-label-cell {
  color: #64748b !important;
  background-color: #f8fafc !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.app-theme-dark .hour-label-cell {
  color: #64748b !important;
  background: #181822 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.app-theme-light .day-slot-unassigned,
.app-theme-light .day-slot-member {
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.app-theme-dark .day-slot-unassigned,
.app-theme-dark .day-slot-member {
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.calendar-day-event-card {
  padding: 8px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.app-theme-light .calendar-day-event-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

.app-theme-light .calendar-day-event-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
  z-index: 10 !important;
}

.app-theme-dark .calendar-day-event-card {
  background: #1c1c24 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  color: #f8fafc !important;
}

.app-theme-dark .calendar-day-event-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7) !important;
  z-index: 10 !important;
}

.day-card-client-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.day-card-client-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.day-card-service-tag {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(2, 132, 199, 0.1) !important;
  color: #0284c7 !important;
  white-space: nowrap !important;
}

.day-card-time-row {
  font-size: 12px !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
}

.day-card-notes {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  font-style: italic !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 7. Year View Styles */
.month-calendar-card {
  border-radius: 16px !important;
  padding: 16px !important;
  transition: all 0.2s ease !important;
}

.app-theme-light .month-calendar-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.app-theme-light .month-calendar-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

.app-theme-dark .month-calendar-card {
  background: #14141a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.app-theme-dark .month-calendar-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-2px) !important;
}

.month-card-title a {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.app-theme-light .month-card-title a {
  color: #0f172a !important;
}

.app-theme-light .month-card-title a:hover {
  color: #0284c7 !important;
}

.app-theme-dark .month-card-title a {
  color: #f8fafc !important;
}

.app-theme-dark .month-card-title a:hover {
  color: #38bdf8 !important;
}

.calendar-header-row {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
  margin-bottom: 6px !important;
}

.day-header-cell {
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  padding: 2px !important;
}

.calendar-days-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
}

.year-day-cell {
  aspect-ratio: 1 !important;
  border-radius: 6px !important;
  padding: 2px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: all 0.15s ease !important;
}

.app-theme-light .year-day-cell {
  color: #1e293b !important;
}

.app-theme-light .year-day-cell:hover {
  background: #f1f5f9 !important;
}

.app-theme-dark .year-day-cell {
  color: #cbd5e1 !important;
}

.app-theme-dark .year-day-cell:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.year-day-cell.other-month {
  opacity: 0.25 !important;
}

.app-theme-light .year-day-cell.has-events {
  background: rgba(2, 132, 199, 0.08) !important;
}

.app-theme-dark .year-day-cell.has-events {
  background: rgba(56, 189, 248, 0.12) !important;
}

.year-day-cell.is-today {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.day-number-label {
  font-size: 11px !important;
  line-height: 1 !important;
}

.year-appointment-dots {
  display: flex !important;
  gap: 2px !important;
  align-items: center !important;
  margin-top: 2px !important;
}

.year-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
}

.year-more-count {
  font-size: 9px !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* 8. Slot Picker Buttons (Appointment Form) */
.appointment-slot-button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 6px 12px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.app-theme-light .appointment-slot-button {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.app-theme-light .appointment-slot-button:hover {
  background: #e2e8f0 !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}

.app-theme-light .appointment-slot-button.is-info,
.app-theme-light .appointment-slot-button.is-selected,
.app-theme-light .appointment-slot-button.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.app-theme-dark .appointment-slot-button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.app-theme-dark .appointment-slot-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

.app-theme-dark .appointment-slot-button.is-info,
.app-theme-dark .appointment-slot-button.is-selected,
.app-theme-dark .appointment-slot-button.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.45) !important;
}

/* 9. Daily Map Frames, Subticks & Duration Badges */
.calendar-time-slot-frame {
  width: 100% !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  position: relative !important;
}

.app-theme-light .calendar-time-slot-frame:hover {
  background-color: rgba(2, 132, 199, 0.12) !important;
}

.app-theme-dark .calendar-time-slot-frame:hover {
  background-color: rgba(56, 189, 248, 0.15) !important;
}

.app-theme-light .calendar-time-slot-frame.has-frame-divider {
  border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
}

.app-theme-dark .calendar-time-slot-frame.has-frame-divider {
  border-top: 1px dashed rgba(255, 255, 255, 0.07) !important;
}

.hour-main-label {
  display: block !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.hour-subticks {
  position: absolute !important;
  right: 6px !important;
  top: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
}

.subtick {
  position: absolute !important;
  right: 0 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

.app-theme-light .subtick {
  color: #94a3b8 !important;
}

.app-theme-dark .subtick {
  color: #64748b !important;
}

.day-card-duration-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  letter-spacing: 0.02em !important;
}

.app-theme-light .day-card-duration-badge {
  background: rgba(2, 132, 199, 0.12) !important;
  color: #0284c7 !important;
}

.app-theme-dark .day-card-duration-badge {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
}

.day-card-price-row {
  font-size: 11px !important;
  color: #10b981 !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

.app-theme-dark .day-card-price-row {
  color: #34d399 !important;
}

/* 10. Firebase Auth & Google Sign-In */
.firebase-google-btn {
  background-color: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.firebase-google-btn:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
  color: #111827 !important;
}

.auth-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.auth-divider::before,
.auth-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.auth-divider span {
  padding: 0 12px !important;
}