/* Appointment Design System — bootstrap-theme.css
 * Bridges the design tokens (tokens.css) onto Bootstrap 5.3.
 * Gradual: tokens first, components are progressively replaced.
 */

:root {
  --bs-primary: var(--ds-accent-500);
  --bs-primary-rgb: 14, 122, 95;
  --bs-secondary: var(--ds-neutral-5);
  --bs-secondary-rgb: 111, 107, 102;
  --bs-success: var(--ds-success-500);
  --bs-success-rgb: 61, 122, 78;
  --bs-warning: var(--ds-warning-500);
  --bs-warning-rgb: 178, 106, 0;
  --bs-danger: var(--ds-danger-500);
  --bs-danger-rgb: 179, 69, 47;
  --bs-info: var(--ds-info-500);
  --bs-info-rgb: 47, 111, 143;
  --bs-light: var(--ds-neutral-1);
  --bs-light-rgb: 239, 238, 235;
  --bs-dark: var(--ds-neutral-8);
  --bs-dark-rgb: 28, 27, 25;

  --bs-body-bg: var(--ds-bg);
  --bs-body-color: var(--ds-text);
  --bs-body-font-family: var(--ds-font-sans);
  --bs-border-color: var(--ds-border);
  --bs-border-radius: var(--ds-radius-md);
  --bs-border-radius-sm: var(--ds-radius-sm);
  --bs-border-radius-lg: var(--ds-radius-lg);

  --bs-link-color: var(--ds-accent-500);
  --bs-link-hover-color: var(--ds-accent-600);
  --bs-link-decoration: none;

  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
  --bs-focus-ring-width: 0;
}

/* ---- Dark theme via Bootstrap toggle + token roles ---- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--ds-neutral-dark-0);
  --bs-body-color: var(--ds-neutral-dark-7);
  --bs-secondary-color: var(--ds-neutral-dark-5);
  --bs-tertiary-color: var(--ds-neutral-dark-4);
  --bs-border-color: var(--ds-neutral-dark-3);
  --bs-emphasis-color: var(--ds-neutral-dark-8);
  --bs-light: var(--ds-neutral-dark-2);
  --bs-light-rgb: 38, 37, 35;
  --bs-dark: var(--ds-neutral-dark-8);
  --bs-dark-rgb: 242, 240, 237;
}

/* ---- Base ---- */
body {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-font-md);
  line-height: var(--ds-lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  color: var(--ds-heading);
  letter-spacing: var(--ds-track-subtitle);
  font-weight: var(--ds-weight-bold);
}

/* ---- Buttons ---- */
.btn {
  border-radius: var(--ds-radius-md);
  font-weight: var(--ds-weight-semibold);
  transition: background-color var(--ds-motion-fast) var(--ds-ease-in),
    border-color var(--ds-motion-fast) var(--ds-ease-in),
    color var(--ds-motion-fast) var(--ds-ease-in),
    box-shadow var(--ds-motion-fast) var(--ds-ease-in);
}

.btn-primary {
  --bs-btn-bg: var(--ds-accent-500);
  --bs-btn-border-color: var(--ds-accent-500);
  --bs-btn-hover-bg: var(--ds-accent-600);
  --bs-btn-hover-border-color: var(--ds-accent-600);
  --bs-btn-active-bg: var(--ds-accent-700);
  --bs-btn-active-border-color: var(--ds-accent-700);
  --bs-btn-disabled-bg: var(--ds-faint);
  --bs-btn-disabled-border-color: var(--ds-faint);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--ds-accent-500);
  --bs-btn-border-color: var(--ds-accent-500);
  --bs-btn-hover-bg: var(--ds-accent-050);
  --bs-btn-hover-border-color: var(--ds-accent-500);
  --bs-btn-active-bg: var(--ds-accent-500);
}

.btn-link { color: var(--ds-accent-500); }

.btn:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-accent);
  outline-offset: var(--ds-focus-offset);
  box-shadow: none;
}

/* ---- Navbar: quiet surface, hairline bottom ---- */
.navbar {
  background-color: var(--ds-surface) !important;
  border-bottom: var(--ds-border-hairline) solid var(--ds-border);
}
.navbar-dark {
  background-color: var(--ds-surface) !important;
  --bs-navbar-color: var(--ds-muted);
  --bs-navbar-hover-color: var(--ds-text);
  --bs-navbar-active-color: var(--ds-accent-500);
  --bs-navbar-brand-color: var(--ds-heading);
  --bs-navbar-brand-hover-color: var(--ds-heading);
}
.navbar-dark .navbar-brand { font-weight: var(--ds-weight-bold); color: var(--ds-heading); }
.navbar-dark .navbar-toggler-icon { filter: invert(0.35); }
.navbar-text { color: var(--ds-muted) !important; }

/* ---- Nav tabs: hairline + accent underline ---- */
.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  border-bottom: var(--ds-border-hairline) solid var(--ds-border);
}
.nav-tabs .nav-link {
  color: var(--ds-muted);
  border: 0;
  border-bottom: var(--ds-border-strong) solid transparent;
  border-radius: 0;
  margin-bottom: calc(-1 * var(--ds-border-hairline));
  padding: var(--ds-space-3) var(--ds-space-4);
  font-weight: var(--ds-weight-medium);
  font-size: var(--ds-font-sm);
  transition: color var(--ds-motion-fast) var(--ds-ease-in),
    border-color var(--ds-motion-fast) var(--ds-ease-in);
}
.nav-tabs .nav-link:hover { color: var(--ds-text); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--ds-accent-500);
  background: transparent;
  border-color: var(--ds-accent-500);
}
.nav-tabs .nav-link:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-accent);
  outline-offset: var(--ds-focus-offset);
}

/* ---- Cards: hairline, generous radius ---- */
.card {
  --bs-card-border-radius: var(--ds-radius-lg);
  --bs-card-border-color: var(--ds-border);
  background-color: var(--ds-surface);
  box-shadow: none;
}

/* ---- Tables ---- */
.table {
  --bs-table-color: var(--ds-text);
  --bs-table-hover-bg: var(--ds-surface-2);
  --bs-table-border-color: var(--ds-border);
  font-size: var(--ds-font-sm);
}
.table thead th {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: var(--ds-border-hairline) solid var(--ds-border-strong);
}

/* ---- Forms ---- */
.form-control, .form-select {
  border-color: var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text);
  background-color: var(--ds-surface);
  padding: 10px 12px;
  transition: border-color var(--ds-motion-fast) var(--ds-ease-in),
    box-shadow var(--ds-motion-fast) var(--ds-ease-in);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ds-accent-400);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
  background-color: var(--ds-surface);
}
.form-label { color: var(--ds-text); font-size: var(--ds-font-sm); font-weight: var(--ds-weight-medium); }
.form-text, .text-muted { color: var(--ds-muted) !important; }

.form-check-input:checked {
  background-color: var(--ds-accent-500);
  border-color: var(--ds-accent-500);
}
.form-check-input:focus {
  border-color: var(--ds-accent-400);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* ---- Badges: soft, quiet ---- */
.badge {
  font-weight: var(--ds-weight-medium);
  border-radius: var(--ds-radius-full);
}
.badge.bg-success { background-color: var(--ds-success-050) !important; color: var(--ds-success-500); }
.badge.bg-warning { background-color: var(--ds-warning-050) !important; color: var(--ds-warning-500); }
.badge.bg-danger { background-color: var(--ds-danger-050) !important; color: var(--ds-danger-500); }
.badge.bg-info { background-color: var(--ds-info-050) !important; color: var(--ds-info-500); }
.badge.bg-secondary { background-color: var(--ds-neutral-1) !important; color: var(--ds-muted); }
.badge.bg-primary { background-color: var(--ds-accent-050) !important; color: var(--ds-accent-600); }

/* ---- Breadcrumb / pagination ---- */
.breadcrumb { --bs-breadcrumb-divider-color: var(--ds-faint); font-size: var(--ds-font-sm); }
.breadcrumb-item.active { color: var(--ds-muted); }
.pagination {
  --bs-pagination-color: var(--ds-text);
  --bs-pagination-hover-color: var(--ds-accent-500);
  --bs-pagination-active-bg: var(--ds-accent-500);
  --bs-pagination-active-border-color: var(--ds-accent-500);
  --bs-pagination-border-radius: var(--ds-radius-sm);
}

/* ---- Dropdown / modal ---- */
.dropdown-menu {
  --bs-dropdown-border-color: var(--ds-border);
  --bs-dropdown-border-radius: var(--ds-radius-md);
  --bs-dropdown-link-hover-bg: var(--ds-surface-2);
  --bs-dropdown-link-active-bg: var(--ds-accent-500);
  box-shadow: var(--ds-shadow-1);
}
.modal-content { border: var(--ds-border-hairline) solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-2); }

/* ---- Alerts ---- */
.alert { border: 0; border-radius: var(--ds-radius-md); }
.alert-success { background-color: var(--ds-success-050); color: var(--ds-success-500); }
.alert-warning { background-color: var(--ds-warning-050); color: var(--ds-warning-500); }
.alert-danger { background-color: var(--ds-danger-050); color: var(--ds-danger-500); }
.alert-info { background-color: var(--ds-info-050); color: var(--ds-info-500); }

/* ---- Misc ---- */
.table-responsive, .card-body { scrollbar-color: var(--ds-border-strong) transparent; }

kbd, .text-monospace { font-family: var(--ds-font-sans); }