/* ============================================================
   Theme Overrides — Path 2 foundation
   Retargets Bootstrap CSS variables to the new design language:
     - Geist typography
     - Indigo primary (#5b5bf0)
     - Off-white surface (#f6f5f1)
     - Warm thin lines (#ebe8df)
     - Near-black body text (#1a1a17)
   Loaded AFTER theme-default.css + demo.css so it wins.
   ============================================================ */

@font-face { font-display: swap; }

:root {
  /* ---- Brand / accent ---- */
  --bs-primary: #5b5bf0;
  --bs-primary-rgb: 91, 91, 240;
  --bs-primary-bg-subtle: #ecebff;
  --bs-primary-border-subtle: #c9c9fa;
  --bs-primary-text-emphasis: #3d3dd1;

  /* ---- Surfaces ---- */
  --bs-body-bg: #f6f5f1;
  --bs-body-bg-rgb: 246, 245, 241;
  --bs-paper-bg: #ffffff;
  --bs-secondary-bg: #faf9f5;

  /* ---- Text ---- */
  --bs-body-color: #1a1a17;
  --bs-body-color-rgb: 26, 26, 23;
  --bs-heading-color: #1a1a17;
  --bs-secondary-color: #76746c;
  --bs-secondary-color-rgb: 118, 116, 108;

  /* ---- Lines / borders ---- */
  --bs-border-color: #ebe8df;
  --bs-border-color-translucent: rgba(26, 26, 23, 0.08);

  /* ---- Type ---- */
  --bs-body-font-family: "Geist", "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bs-body-font-weight: 400;

  /* ---- Component tokens we use across redesigned pages ---- */
  --artra-bg: #f6f5f1;
  --artra-surface: #ffffff;
  --artra-surface-2: #faf9f5;
  --artra-line: #ebe8df;
  --artra-line-2: #e3dfd2;
  --artra-ink: #1a1a17;
  --artra-ink-2: #3f3f3a;
  --artra-ink-3: #76746c;
  --artra-ink-4: #a7a49a;
  --artra-accent: #5b5bf0;
  --artra-accent-soft: #ecebff;
  --artra-accent-ink: #3d3dd1;
  --artra-pos: #2d8f5e;
  --artra-pos-soft: #e3f3eb;
  --artra-neg: #c4564a;
  --artra-warn: #c98a2e;
  --artra-warn-soft: #f7eedd;
  --artra-radius: 10px;
  --artra-radius-sm: 6px;
  --artra-font: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --artra-mono: "Geist Mono", ui-monospace, monospace;
}

/* ---- Body / typography ---- */
body {
  font-family: var(--bs-body-font-family);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-feature-settings: "ss01", "cv11", "cv09";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.003em;
}

/* Headings — calmer weight, tighter tracking */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--bs-heading-color);
}

/* ---- Cards — thin lines, less shadow ---- */
.card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--artra-radius);
  box-shadow: none;
  background-color: var(--bs-paper-bg);
}
.card-header {
  border-bottom: 1px solid var(--bs-border-color);
  background: transparent;
}
.card-title {
  color: var(--bs-heading-color);
}

/* ---- Buttons — crisper radius, calmer hover ---- */
.btn {
  border-radius: var(--artra-radius-sm);
  font-weight: 500;
  letter-spacing: -0.003em;
}
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #4a4adb;
  --bs-btn-hover-border-color: #4a4adb;
  --bs-btn-active-bg: #4a4adb;
  --bs-btn-active-border-color: #4a4adb;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-primary-bg-subtle);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
}

/* "label" buttons (Sneat custom) — keep them but desaturate */
.bg-label-primary {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
}

/* ---- Form controls — thinner borders ---- */
.form-control,
.form-select {
  border-color: var(--bs-border-color);
  border-radius: var(--artra-radius-sm);
  color: var(--bs-body-color);
  background-color: var(--bs-paper-bg);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(91, 91, 240, 0.12);
}

/* ---- Links ---- */
a {
  color: var(--bs-primary-text-emphasis);
  text-decoration: none;
}
a:hover {
  color: var(--bs-primary);
}

/* ---- Tables — thin row dividers ---- */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--bs-border-color);
}
.table > thead {
  color: var(--artra-ink-3);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* ---- Navbar / topbar ---- */
.layout-navbar {
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: none !important;
  background: color-mix(in oklab, var(--bs-body-bg) 88%, transparent) !important;
  backdrop-filter: saturate(140%) blur(10px);
}

/* ---- Sidebar — keep neutral but inherit Geist + tighter borders ---- */
.bg-menu-theme {
  border-right: 1px solid var(--bs-border-color);
}
.bg-menu-theme .menu-inner > .menu-item .menu-link {
  border-radius: var(--artra-radius-sm);
}

/* ---- Dropdowns ---- */
.dropdown-menu {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--artra-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 4px;
}
.dropdown-item {
  border-radius: 4px;
  font-size: 0.85rem;
}

/* ---- Modals ---- */
.modal-content {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--artra-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* ---- Badges — calmer ---- */
.badge {
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 4px;
}

/* ---- Nav pills (tabs) — flat underline style ---- */
.nav-pills .nav-link {
  border-radius: var(--artra-radius-sm);
  color: var(--artra-ink-3);
  font-weight: 500;
}
.nav-pills .nav-link.active {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

/* ---- Avatars / icons retain shape but use accent ---- */
.avatar-initial.bg-label-primary {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
}

/* Notification dropdown initials — warm amber chip (matches contact-view profile) */
.layout-navbar .notif-avatar-initial {
  background: var(--artra-warn-soft) !important;
  background-image: none !important;
  color: var(--artra-warn) !important;
  border: 1px solid var(--artra-warn) !important;
}
.layout-navbar .notif-avatar-initial.bg-label-primary,
.layout-navbar .notif-avatar-initial.bg-label-warning,
.layout-navbar .notif-avatar-initial.bg-label-danger,
.layout-navbar .notif-avatar-initial.bg-label-info,
.layout-navbar .notif-avatar-initial.bg-label-success,
.layout-navbar .notif-avatar-initial.bg-label-secondary {
  background: var(--artra-warn-soft) !important;
  background-image: none !important;
  color: var(--artra-warn) !important;
  border: 1px solid var(--artra-warn) !important;
}
.layout-navbar .notif-avatar-initial i.bx {
  color: var(--artra-warn) !important;
}

/* ---- Text muted / small ---- */
.text-muted {
  color: var(--artra-ink-3) !important;
}
.text-primary {
  color: var(--bs-primary-text-emphasis) !important;
}

/* ---- Selection color ---- */
::selection {
  background: var(--bs-primary);
  color: #fff;
}

/* ============================================================
   Loading spinner — match the new theme
   Bootstrap's default .spinner-border uses border-color: currentColor
   with one side transparent. We retarget the colors via tokens so
   it reads as part of the design (warm line as the track, ink as
   the spinning highlight) regardless of `.text-primary` etc.
   ============================================================ */
.spinner-border {
  width: 22px !important;
  height: 22px !important;
  border-width: 2px !important;
  border-style: solid;
  border-color: var(--artra-line) !important;
  border-top-color: var(--artra-ink) !important;
  border-right-color: var(--artra-ink) !important;
  border-radius: 50% !important;
  animation: artra-spin 0.85s linear infinite;
  background: transparent !important;
  flex: 0 0 auto !important;
  aspect-ratio: 1 / 1;
}
.spinner-border.spinner-border-sm {
  width: 14px !important;
  height: 14px !important;
  border-width: 1.5px !important;
}
.spinner-border.text-primary,
.spinner-border.text-secondary,
.spinner-border.text-success,
.spinner-border.text-info,
.spinner-border.text-warning,
.spinner-border.text-danger,
.spinner-border.text-body,
.spinner-border.text-muted {
  border-color: var(--artra-line) !important;
  border-top-color: var(--artra-ink) !important;
  border-right-color: var(--artra-ink) !important;
  color: var(--artra-ink) !important;
}
@keyframes artra-spin {
  to { transform: rotate(360deg); }
}

/* Three-dots pulse spinner (used in some places via .spinner-grow) */
.spinner-grow {
  background-color: var(--artra-ink) !important;
}

/* Page-loading overlay (full-screen) — clean ink-tinted backdrop + card */
.page-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--artra-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  font-family: var(--artra-font);
}
.page-loading-overlay.d-none { display: none !important; }
.page-loading-overlay .overlay-content {
  background: var(--artra-surface);
  border: 1px solid var(--artra-line);
  border-radius: var(--artra-radius);
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(26, 26, 23, 0.08);
}
.page-loading-overlay .overlay-content .spinner-border {
  width: 24px !important;
  height: 24px !important;
}
.page-loading-overlay .overlay-content .text-muted,
.page-loading-overlay .overlay-content .small {
  font-family: var(--artra-mono) !important;
  font-size: 11.5px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--artra-ink-3) !important;
  margin: 0;
}