/* =============================================================================
   Sanlam Claims System — Brand Identity & Custom Components
   Works on top of Vuexy core.css + demo.css

   Brand Palette
   ─────────────
   --sanlam-navy  : #003781  (dark navy — headings, emphasis, active states)
   --sanlam-blue  : #0075C9  (primary — buttons, links, interactive elements)
   --sanlam-light : #E8F4FD  (tint — subtle backgrounds, label badges)

   Dark-mode adjusted
   --sanlam-blue-dm : #5AAFE6  (lighter for readability on dark backgrounds)
   --sanlam-navy-dm : #4DA3E0  (softer navy for dark headings)
   ============================================================================= */


/* =============================================================================
   1. CSS Custom Properties — Single Source of Truth
   ============================================================================= */

:root {
  /* Brand tokens (constant across themes) */
  --sanlam-navy: #003781;
  --sanlam-blue: #0075C9;
  --sanlam-light: #E8F4FD;
  --sanlam-blue-rgb: 0, 117, 201;
  --sanlam-navy-rgb: 0, 55, 129;
}


/* =============================================================================
   2. Bootstrap / Vuexy Variable Overrides — Light Mode
   ============================================================================= */

:root,
[data-bs-theme="light"] {
  /* Primary palette */
  --bs-primary: var(--sanlam-blue);
  --bs-primary-rgb: var(--sanlam-blue-rgb);
  --bs-primary-bg-subtle: rgba(var(--sanlam-blue-rgb), 0.08);
  --bs-primary-border-subtle: rgba(var(--sanlam-blue-rgb), 0.25);
  --bs-primary-text-emphasis: var(--sanlam-navy);

  /* Links */
  --bs-link-color: var(--sanlam-blue);
  --bs-link-color-rgb: var(--sanlam-blue-rgb);
  --bs-link-hover-color: #005FA3;
  --bs-link-hover-color-rgb: 0, 95, 163;
}


/* =============================================================================
   3. Bootstrap / Vuexy Variable Overrides — Dark Mode
   ============================================================================= */

[data-bs-theme="dark"] {
  --bs-primary: #5AAFE6;
  --bs-primary-rgb: 90, 175, 230;
  --bs-primary-bg-subtle: rgba(90, 175, 230, 0.12);
  --bs-primary-border-subtle: rgba(90, 175, 230, 0.3);
  --bs-primary-text-emphasis: #8AC8F0;
  --bs-link-color: #5AAFE6;
  --bs-link-color-rgb: 90, 175, 230;
  --bs-link-hover-color: #8AC8F0;
  --bs-link-hover-color-rgb: 138, 200, 240;
}


/* =============================================================================
   4. Button Overrides
   ============================================================================= */

/* ─ Primary (solid) ───────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--sanlam-blue);
  --bs-btn-border-color: var(--sanlam-blue);
  --bs-btn-hover-bg: #005FA3;
  --bs-btn-hover-border-color: #005494;
  --bs-btn-active-bg: var(--sanlam-navy);
  --bs-btn-active-border-color: var(--sanlam-navy);
  --bs-btn-disabled-bg: var(--sanlam-blue);
  --bs-btn-disabled-border-color: var(--sanlam-blue);
}

/* ─ Outline ───────────────────────────────────────────────────────────────── */
.btn-outline-primary {
  --bs-btn-color: var(--sanlam-blue);
  --bs-btn-border-color: var(--sanlam-blue);
  --bs-btn-hover-bg: var(--sanlam-blue);
  --bs-btn-hover-border-color: var(--sanlam-blue);
  --bs-btn-active-bg: #005FA3;
  --bs-btn-active-border-color: var(--sanlam-navy);
}

/* ─ Label (subtle bg) ─────────────────────────────────────────────────────── */
.btn-label-primary {
  --bs-btn-color: var(--sanlam-blue);
  --bs-btn-bg: rgba(var(--sanlam-blue-rgb), 0.08);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: rgba(var(--sanlam-blue-rgb), 0.15);
  --bs-btn-hover-color: #005FA3;
  --bs-btn-active-bg: rgba(var(--sanlam-blue-rgb), 0.2);
}

/* ─ Text (ghost) ──────────────────────────────────────────────────────────── */
.btn-text-primary {
  --bs-btn-color: var(--sanlam-blue);
  --bs-btn-hover-color: #005FA3;
  --bs-btn-hover-bg: rgba(var(--sanlam-blue-rgb), 0.08);
  --bs-btn-active-color: var(--sanlam-navy);
}

/* ─ Dark mode button adjustments ──────────────────────────────────────────── */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #5AAFE6;
  --bs-btn-border-color: #5AAFE6;
  --bs-btn-hover-bg: #4DA3E0;
  --bs-btn-hover-border-color: #4097D4;
  --bs-btn-active-bg: #4097D4;
  --bs-btn-active-border-color: #3690CC;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #5AAFE6;
  --bs-btn-border-color: #5AAFE6;
  --bs-btn-hover-bg: #5AAFE6;
  --bs-btn-hover-border-color: #5AAFE6;
}

[data-bs-theme="dark"] .btn-label-primary {
  --bs-btn-color: #5AAFE6;
  --bs-btn-bg: rgba(90, 175, 230, 0.12);
  --bs-btn-hover-bg: rgba(90, 175, 230, 0.2);
  --bs-btn-hover-color: #8AC8F0;
}

[data-bs-theme="dark"] .btn-text-primary {
  --bs-btn-color: #5AAFE6;
  --bs-btn-hover-color: #8AC8F0;
  --bs-btn-hover-bg: rgba(90, 175, 230, 0.12);
}


/* =============================================================================
   5. Badge & Label Overrides
   ============================================================================= */

.bg-primary {
  background-color: var(--sanlam-blue) !important;
}

.bg-label-primary {
  background-color: rgba(var(--sanlam-blue-rgb), 0.08) !important;
  color: var(--sanlam-blue) !important;
}

[data-bs-theme="dark"] .bg-primary {
  background-color: #5AAFE6 !important;
}

[data-bs-theme="dark"] .bg-label-primary {
  background-color: rgba(90, 175, 230, 0.12) !important;
  color: #5AAFE6 !important;
}


/* =============================================================================
   6. Text & Link Overrides
   ============================================================================= */

.text-primary {
  color: var(--sanlam-blue) !important;
}

[data-bs-theme="dark"] .text-primary {
  color: #5AAFE6 !important;
}


/* =============================================================================
   7. Sidebar / Menu
   ============================================================================= */

/* Sidebar brand area — navy accent stripe */
.menu .app-brand {
  border-bottom: 2px solid rgba(var(--sanlam-blue-rgb), 0.15);
}


/* =============================================================================
   8. Navigation & Pagination
   ============================================================================= */

/* Nav pills */
.nav-pills .nav-link.active {
  background-color: var(--sanlam-blue);
}

[data-bs-theme="dark"] .nav-pills .nav-link.active {
  background-color: #5AAFE6;
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--sanlam-blue);
  border-color: var(--sanlam-blue);
}

[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: #5AAFE6;
  border-color: #5AAFE6;
}


/* =============================================================================
   9. Form Controls
   ============================================================================= */

.form-control:focus,
.form-select:focus {
  border-color: var(--sanlam-blue);
  box-shadow: 0 0 0 0.25rem rgba(var(--sanlam-blue-rgb), 0.15);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: #5AAFE6;
  box-shadow: 0 0 0 0.25rem rgba(90, 175, 230, 0.15);
}

/* Override input-group ::before focus shadow to match sanlam ring style */
.input-group:focus-within::before {
  box-shadow: 0 0 0 0.25rem rgba(var(--sanlam-blue-rgb), 0.15);
}

[data-bs-theme="dark"] .input-group:focus-within::before {
  box-shadow: 0 0 0 0.25rem rgba(90, 175, 230, 0.15);
}

/* Fix input-group-merge stacking: promote input-group-text above ::before
   so the focus shadow doesn't bleed through its transparent background */
.input-group.input-group-merge .input-group-text {
  position: relative;
  z-index: 1;
}

.form-check-input:checked {
  background-color: var(--sanlam-blue);
  border-color: var(--sanlam-blue);
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: #5AAFE6;
  border-color: #5AAFE6;
}


/* =============================================================================
   10. Progress Bars
   ============================================================================= */

.progress-bar {
  background-color: var(--sanlam-blue);
}

[data-bs-theme="dark"] .progress-bar {
  background-color: #5AAFE6;
}

/* Keep semantic progress bar colors intact */
.progress-bar.bg-success { background-color: var(--bs-success) !important; }
.progress-bar.bg-warning { background-color: var(--bs-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--bs-danger) !important; }
.progress-bar.bg-info    { background-color: var(--bs-info) !important; }


/* =============================================================================
   11. Card Border Shadow (Vuexy pattern — primary accent)
   ============================================================================= */

.card-border-shadow-primary::after {
  border-bottom-color: var(--sanlam-blue) !important;
}

[data-bs-theme="dark"] .card-border-shadow-primary::after {
  border-bottom-color: #5AAFE6 !important;
}


/* =============================================================================
   12. Hero Cards & Gradient Backgrounds
   ============================================================================= */

/* Primary bg cards get a subtle gradient with both brand colors */
.card.bg-primary {
  background: linear-gradient(135deg, var(--sanlam-navy) 0%, var(--sanlam-blue) 100%) !important;
}

[data-bs-theme="dark"] .card.bg-primary {
  background: linear-gradient(135deg, #1a4f8a 0%, #5AAFE6 100%) !important;
}


/* =============================================================================
   13. Logo Dark Mode
   ============================================================================= */

[data-bs-theme="dark"] .app-brand-logo {
  filter: brightness(0) invert(0.9);
}


/* =============================================================================
   14. Status Timeline (Claimant Portal)
   ============================================================================= */

.status-timeline {
  position: relative;
  padding-left: 1.5rem;
}

.status-timeline::before {
  content: '';
  position: absolute;
  left: 0.4375rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background-color: var(--bs-border-color);
}

.timeline-item {
  position: relative;
  padding-bottom: 1.25rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -1.5rem;
  top: 0.3125rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 2px solid var(--bs-body-bg);
  background-color: var(--bs-border-color);
  z-index: 1;
}

.timeline-dot.active {
  background-color: var(--sanlam-blue);
}

[data-bs-theme="dark"] .timeline-dot.active {
  background-color: #5AAFE6;
}

.timeline-dot.success { background-color: #28c76f; }
.timeline-dot.warning { background-color: #ff9f43; }
.timeline-dot.danger  { background-color: #ea5455; }

.timeline-label {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.timeline-meta {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* Vuexy timeline primary color */
.timeline .timeline-point-primary {
  background-color: var(--sanlam-blue) !important;
  border-color: var(--sanlam-blue) !important;
}

[data-bs-theme="dark"] .timeline .timeline-point-primary {
  background-color: #5AAFE6 !important;
  border-color: #5AAFE6 !important;
}


/* =============================================================================
   15. Chat Bubbles
   ============================================================================= */

.chat-container {
  max-height: 520px;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-bubble {
  max-width: 75%;
  padding: 0.75rem 1rem;
  border-radius: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-bubble.chat-staff {
  background-color: var(--sanlam-blue);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
  align-self: flex-end;
}

[data-bs-theme="dark"] .chat-bubble.chat-staff {
  background-color: #5AAFE6;
  color: #1a1a2e;
}

.chat-bubble.chat-claimant {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-bottom-left-radius: 0.25rem;
  align-self: flex-start;
}

.chat-bubble.chat-system {
  background-color: rgba(255, 159, 67, 0.1);
  border: 1px solid rgba(255, 159, 67, 0.3);
  align-self: center;
  text-align: center;
  font-style: italic;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  max-width: 90%;
}

.chat-meta {
  font-size: 0.6875rem;
  margin-top: 0.25rem;
  opacity: 0.7;
}

.chat-input-area {
  border-top: 1px solid var(--bs-border-color);
  padding: 0.875rem 1rem;
}


/* =============================================================================
   16. Document Upload Drop Zone
   ============================================================================= */

.doc-upload-zone {
  position: relative;
  border: 2px dashed var(--bs-border-color);
  border-radius: 0.75rem;
  padding: 2.5rem;
  text-align: center;
  background-color: var(--bs-tertiary-bg);
  transition: all 150ms ease;
  cursor: pointer;
}

.doc-upload-zone:hover,
.doc-upload-zone.dragover {
  border-color: var(--sanlam-blue);
  background-color: rgba(var(--sanlam-blue-rgb), 0.05);
}

[data-bs-theme="dark"] .doc-upload-zone:hover,
[data-bs-theme="dark"] .doc-upload-zone.dragover {
  border-color: #5AAFE6;
  background-color: rgba(90, 175, 230, 0.08);
}

.doc-upload-zone .ti {
  font-size: 2.5rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.75rem;
}

.doc-upload-zone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* =============================================================================
   17. OTP Input
   ============================================================================= */

.otp-input {
  font-size: 1.5rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.25em;
  text-align: center;
  font-weight: 700;
}


/* =============================================================================
   18. DataTables Pagination Spacing
   ============================================================================= */

.dt-layout-row:last-child {
  padding-bottom: 1rem;
}


/* =============================================================================
   19. intl-tel-input Vuexy Integration
   ============================================================================= */

.iti { width: 100%; }
.iti__tel-input { height: auto; }


/* =============================================================================
   20. Utility Helpers
   ============================================================================= */

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Brand utility classes */
.text-sanlam-navy { color: var(--sanlam-navy) !important; }
.text-sanlam-blue { color: var(--sanlam-blue) !important; }
.bg-sanlam-navy   { background-color: var(--sanlam-navy) !important; }
.bg-sanlam-blue   { background-color: var(--sanlam-blue) !important; }
.bg-sanlam-light  { background-color: var(--sanlam-light) !important; }

[data-bs-theme="dark"] .text-sanlam-navy { color: #4DA3E0 !important; }
[data-bs-theme="dark"] .text-sanlam-blue { color: #5AAFE6 !important; }
[data-bs-theme="dark"] .bg-sanlam-light  { background-color: rgba(90, 175, 230, 0.08) !important; }


/* =============================================================================
   21. Loading States
   ============================================================================= */

.btn-loading-spinner {
  vertical-align: -0.125em;
}


/* =============================================================================
   22. Responsive
   ============================================================================= */

@media (max-width: 767.98px) {
  .chat-bubble {
    max-width: 90%;
  }
}


/* =============================================================================
   23. Print
   ============================================================================= */

@media print {
  .layout-menu,
  .layout-navbar,
  .content-footer,
  .btn,
  .pagination {
    display: none !important;
  }

  .layout-page {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .content-wrapper {
    padding: 0 !important;
  }
}