/* ==========================================================================
   ADP Dental Clinic — Premium UI Theme
   Design: Calm, trustworthy medical blue/white palette
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --adp-blue-50:  #EBF8FF;
  --adp-blue-100: #BEE3F8;
  --adp-blue-200: #90CDF4;
  --adp-blue-300: #63B3ED;
  --adp-blue-400: #4299E1;
  --adp-blue-500: #3182CE;
  --adp-blue-600: #2B6CB0;
  --adp-blue-700: #2C5282;
  --adp-blue-800: #2A4365;

  --adp-teal-400: #38B2AC;
  --adp-teal-500: #319795;
  --adp-teal-600: #2C7A7B;

  --adp-green-50:  #F0FFF4;
  --adp-green-400: #48BB78;
  --adp-green-500: #38A169;
  --adp-green-600: #276749;

  --adp-amber-50:  #FFFBEB;
  --adp-amber-100: #FEF3C7;
  --adp-amber-200: #F6E05E;
  --adp-amber-400: #ECC94B;
  --adp-amber-500: #D69E2E;
  --adp-amber-600: #B7791F;
  --adp-amber-700: #92400E;

  /* Semantic Colors */
  --adp-primary:       var(--adp-blue-600);
  --adp-primary-light: var(--adp-blue-400);
  --adp-primary-dark:  var(--adp-blue-700);
  --adp-primary-bg:    var(--adp-blue-50);

  --adp-success: #38A169;
  --adp-warning: #D69E2E;
  --adp-danger:  #C53030;
  --adp-info:    var(--adp-teal-500);

  /* Neutrals */
  --adp-gray-50:  #F7FAFC;
  --adp-gray-100: #EDF2F7;
  --adp-gray-200: #E2E8F0;
  --adp-gray-300: #CBD5E0;
  --adp-gray-400: #A0AEC0;
  --adp-gray-500: #718096;
  --adp-gray-600: #4A5568;
  --adp-gray-700: #2D3748;
  --adp-gray-800: #1A202C;

  /* Typography */
  --adp-font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --adp-font-size-xs:  0.75rem;
  --adp-font-size-sm:  0.875rem;
  --adp-font-size-base: 1rem;
  --adp-font-size-md:  1.0625rem;
  --adp-font-size-lg:  1.125rem;
  --adp-font-size-xl:  1.25rem;
  --adp-font-size-2xl: 1.5rem;
  --adp-font-size-3xl: 1.875rem;

  /* Spacing */
  --adp-radius-sm:  6px;
  --adp-radius:     10px;
  --adp-radius-md:  12px;
  --adp-radius-lg:  14px;
  --adp-radius-xl:  20px;
  --adp-radius-pill: 9999px;

  /* Shadows */
  --adp-shadow-xs:  0 1px 3px rgba(0,0,0,0.08);
  --adp-shadow-sm:  0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --adp-shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --adp-shadow-lg:  0 8px 30px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --adp-shadow-xl:  0 20px 60px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.10);

  /* Transitions */
  --adp-transition: all 0.2s ease;
  --adp-transition-slow: all 0.35s ease;

  /* Layout */
  --adp-topbar-height: 64px;
  --adp-navbar-height: 56px;

  /* Border alias */
  --adp-border: var(--adp-gray-200);
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* SVG icon sprite (assets/img/empty-state-icons.svg) — symbols are only
   rendered via <use>, but the unsized <svg> root still occupies default
   replaced-element space (~300x150px) unless hidden. Was inline style="display:none"
   until the style-src CSP tightening (see PATIENT_DATA_SECURITY_REMEDIATION.md #10)
   started blocking it. */
.adp-svg-sprite {
  display: none;
}

body {
  font-family: var(--adp-font-sans);
  font-size: var(--adp-font-size-base);
  line-height: 1.6;
  color: var(--adp-gray-700);
  background-color: var(--adp-gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. Top Bar (Brand Header)
   -------------------------------------------------------------------------- */
.adp-topbar {
  height: var(--adp-topbar-height);
  background: linear-gradient(135deg, var(--adp-blue-700) 0%, var(--adp-blue-600) 100%);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  box-shadow: 0 2px 8px rgba(43, 108, 176, 0.25);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* When scrolling down: hide topbar, snap navbar to top */
body.adp-topbar-hidden .adp-topbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

body.adp-topbar-hidden .adp-navbar {
  top: 0;
}

.adp-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: #fff;
  font-size: var(--adp-font-size-lg);
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.adp-brand:hover {
  color: var(--adp-blue-200);
}

.adp-brand-icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.18);
  border-radius: var(--adp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.adp-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.adp-topbar-btn {
  color: rgba(255,255,255,1.0);
  background: transparent;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: var(--adp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: var(--adp-transition);
  position: relative;
  text-decoration: none;
}

.adp-topbar-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.adp-topbar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.9);
  font-size: var(--adp-font-size-sm);
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: var(--adp-radius-pill);
  cursor: pointer;
  transition: var(--adp-transition);
  border: none;
  background: rgba(255,255,255,0.1);
}

.adp-topbar-user:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.adp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3b. Top Bar — Global Patient Search
   -------------------------------------------------------------------------- */
.adp-topbar-search {
  flex: 1;
  max-width: 360px;
  margin: 0 1.25rem;
}

.adp-topbar .adp-search-wrap {
  position: relative;
}

.adp-search-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  pointer-events: none;
}

.adp-search-input {
  width: 100%;
  height: 36px;
  padding: 0 0.75rem 0 2.1rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--adp-radius-pill);
  color: #fff;
  font-size: var(--adp-font-size-sm);
  outline: none;
  transition: var(--adp-transition);
}

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

.adp-search-input:focus {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}

.adp-search-input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.6);
}

.adp-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--adp-gray-200);
  border-radius: var(--adp-radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  z-index: 1050;
  max-height: 320px;
  overflow-y: auto;
}

.adp-search-result-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  color: var(--adp-gray-800);
  font-size: var(--adp-font-size-sm);
  text-decoration: none;
  transition: background 0.15s;
}

.adp-search-result-item:hover,
.adp-search-result-item.focused {
  background: var(--adp-blue-50);
  color: var(--adp-blue-700);
}

.adp-search-result-item .result-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--adp-blue-100);
  color: var(--adp-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.adp-search-result-item .result-name {
  font-weight: 500;
  flex: 1;
}

.adp-search-result-item .result-meta {
  color: var(--adp-gray-500);
  font-size: 0.72rem;
}

.adp-search-no-results {
  padding: 0.875rem;
  text-align: center;
  color: var(--adp-gray-500);
  font-size: var(--adp-font-size-sm);
}

.adp-search-all-link {
  display: block;
  padding: 0.5rem 0.875rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--adp-blue-600);
  border-top: 1px solid var(--adp-gray-100);
  text-decoration: none;
}

.adp-search-all-link:hover {
  background: var(--adp-blue-50);
}

.adp-search-group-header {
  padding: 0.25rem 0.875rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--adp-gray-400);
  background: var(--adp-gray-50);
  border-bottom: 1px solid var(--adp-border);
}

/* Mobile search toggle button (visible only on mobile) */
.adp-search-mobile-btn {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  line-height: 1;
  border-radius: var(--adp-radius-sm);
  transition: background var(--adp-transition);
}

.adp-search-mobile-btn:hover,
.adp-search-mobile-btn:focus {
  background: rgba(255,255,255,0.15);
  outline: none;
}

/* Full-width slide-down search overlay (mobile only) */
.adp-mobile-search-overlay {
  display: none;
  background: var(--adp-blue-700, #1a56db);
  border-top: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
  max-height: 0;
  padding: 0;
  transition: max-height 0.28s ease, padding 0.28s ease;
}

.adp-mobile-search-overlay.open {
  max-height: 80px;
  padding: 0.625rem 1rem;
}

.adp-mobile-search-overlay .adp-search-wrap {
  position: relative;
}

.adp-mobile-search-overlay .adp-search-results {
  left: 0;
  right: 0;
}

@media (max-width: 767.98px) {
  .adp-topbar-search {
    display: none;
  }

  .adp-search-mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .adp-mobile-search-overlay {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   4. Navigation Bar
   -------------------------------------------------------------------------- */
.adp-navbar {
  background: #fff;
  border-bottom: 1px solid var(--adp-gray-200);
  box-shadow: var(--adp-shadow-xs);
  position: sticky;
  top: var(--adp-topbar-height);
  z-index: 1020;
  transition: top 0.25s ease;
}

.adp-navbar .navbar-toggler {
  border: 1.5px solid var(--adp-gray-300);
  border-radius: var(--adp-radius-sm);
  padding: 0.3rem 0.6rem;
  color: var(--adp-gray-600);
}

.adp-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
}

.adp-navbar .nav-link {
  color: var(--adp-gray-600) !important;
  font-size: var(--adp-font-size-sm);
  font-weight: 500;
  padding: 0.85rem 0.81rem !important;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--adp-transition);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.adp-navbar .nav-link i {
  font-size: 1rem;
  opacity: 0.75;
}

.adp-navbar .nav-link:hover {
  color: var(--adp-primary) !important;
  background: var(--adp-blue-50);
}

.adp-navbar .nav-link:hover i {
  opacity: 1;
}

.adp-navbar .nav-link.active {
  color: var(--adp-primary) !important;
  border-bottom-color: var(--adp-primary);
  background: var(--adp-blue-50);
  font-weight: 600;
}

.adp-navbar .nav-link.active i {
  opacity: 1;
}

.adp-navbar .dropdown-toggle::after {
  margin-left: 0.3rem;
  vertical-align: middle;
  opacity: 0.6;
}

/* Dropdown menus */
.adp-navbar .dropdown-menu {
  border: 1px solid var(--adp-gray-200);
  border-radius: var(--adp-radius);
  box-shadow: var(--adp-shadow-lg);
  padding: 0.5rem;
  min-width: 220px;
  margin-top: 0 !important;
}

.adp-navbar .dropdown-item {
  color: var(--adp-gray-700);
  font-size: var(--adp-font-size-sm);
  font-weight: 400;
  padding: 0.55rem 0.875rem;
  border-radius: var(--adp-radius-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--adp-transition);
}

.adp-navbar .dropdown-item i {
  width: 16px;
  text-align: center;
  color: var(--adp-gray-400);
  flex-shrink: 0;
}

.adp-navbar .dropdown-item:hover {
  background: var(--adp-blue-50);
  color: var(--adp-primary);
}

.adp-navbar .dropdown-item:hover i {
  color: var(--adp-primary);
}

.adp-navbar .dropdown-item.active {
  background: var(--adp-blue-50);
  color: var(--adp-primary);
  font-weight: 500;
}

.adp-navbar .dropdown-divider {
  border-color: var(--adp-gray-100);
  margin: 0.375rem 0;
}

.adp-navbar .dropdown-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--adp-gray-400);
  padding: 0.5rem 0.875rem 0.25rem;
}

/* Notification bell */
/* DEPRECATED: .adp-notif-badge (dot-only) has no ARIA label and must not be used.
   Use the numeric badge in header.php with aria-label instead. */
.adp-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FC8181;
  border: 2px solid transparent;
  /* accessibility: always pair with aria-label on the parent element */
}

.adp-notif-dropdown {
  min-width: 340px;
  max-height: 420px;
  overflow-y: auto;
  border-radius: var(--adp-radius);
  border: 1px solid var(--adp-gray-200);
  box-shadow: var(--adp-shadow-lg);
  padding: 0;
}

@media (max-width: 480px) {
  .adp-notif-dropdown {
    min-width: calc(100vw - 2rem);
    right: 0;
    left: auto;
  }
}

.adp-notif-header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--adp-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--adp-gray-50);
  border-radius: var(--adp-radius) var(--adp-radius) 0 0;
}

/* --------------------------------------------------------------------------
   5. Page Layout
   -------------------------------------------------------------------------- */
.adp-page-wrapper {
  min-height: calc(100vh - var(--adp-topbar-height) - var(--adp-navbar-height));
  padding: 1.125rem 1.75rem 2.5rem;
}

.adp-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.adp-page-title {
  font-size: var(--adp-font-size-xl);
  font-weight: 700;
  color: var(--adp-gray-800);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adp-page-title i {
  color: var(--adp-primary);
}

.adp-page-subtitle {
  font-size: var(--adp-font-size-sm);
  color: var(--adp-gray-500);
  margin: 0.1rem 0 0;
}

/* Breadcrumb */
.adp-breadcrumb {
  padding: 0;
  margin: 0 0 0.625rem;
  background: none;
}

.adp-breadcrumb .breadcrumb-item {
  font-size: var(--adp-font-size-sm);
  color: var(--adp-gray-500);
}

.adp-breadcrumb .breadcrumb-item a {
  color: var(--adp-primary);
  text-decoration: none;
}

.adp-breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}

.adp-breadcrumb .breadcrumb-item.active {
  color: var(--adp-gray-600);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.adp-card {
  background: #fff;
  border: 1px solid var(--adp-gray-200);
  border-radius: var(--adp-radius-lg);
  box-shadow: var(--adp-shadow-sm);
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: var(--adp-transition);
}

.adp-card:hover {
  box-shadow: var(--adp-shadow-md);
}

.adp-card-header {
  padding: 1.125rem 1.375rem;
  border-bottom: 1px solid var(--adp-gray-100);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.adp-card-title {
  font-size: var(--adp-font-size-md);
  font-weight: 600;
  color: var(--adp-gray-800);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adp-card-title i {
  color: var(--adp-primary);
}

.adp-card-body {
  padding: 1.375rem;
}

.adp-card-body-flush {
  padding: 0;
}

.adp-card-footer {
  padding: 0.875rem 1.375rem;
  background: var(--adp-gray-50);
  border-top: 1px solid var(--adp-gray-100);
}

/* Metric Cards */
.adp-metric-card {
  background: #fff;
  border: 1px solid var(--adp-gray-200);
  border-radius: var(--adp-radius-lg);
  box-shadow: var(--adp-shadow-sm);
  padding: 1.375rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: var(--adp-transition);
  position: relative;
  overflow: hidden;
}

.adp-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: var(--adp-radius-lg) 0 0 var(--adp-radius-lg);
}

.adp-metric-card:hover {
  box-shadow: var(--adp-shadow-md);
  transform: translateY(-1px);
}

.adp-metric-card.metric-blue::before   { background: var(--adp-primary); }
.adp-metric-card.metric-green::before  { background: var(--adp-success); }
.adp-metric-card.metric-teal::before   { background: var(--adp-teal-500); }
.adp-metric-card.metric-amber::before  { background: var(--adp-warning); }
.adp-metric-card.metric-red::before    { background: var(--adp-danger); }

.adp-metric-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--adp-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.adp-metric-card.metric-blue  .adp-metric-icon { background: var(--adp-blue-50);  color: var(--adp-primary); }
.adp-metric-card.metric-green .adp-metric-icon { background: var(--adp-green-50); color: var(--adp-success); }
.adp-metric-card.metric-teal  .adp-metric-icon { background: #E6FFFA;             color: var(--adp-teal-500); }
.adp-metric-card.metric-amber .adp-metric-icon { background: #FFFBEB;             color: var(--adp-warning); }
.adp-metric-card.metric-red   .adp-metric-icon { background: #FFF5F5;             color: var(--adp-danger); }

.adp-metric-content {
  flex: 1;
  min-width: 0;
}

.adp-metric-label {
  font-size: var(--adp-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--adp-gray-500);
  margin-bottom: 0.25rem;
}

.adp-metric-value {
  font-size: var(--adp-font-size-2xl);
  font-weight: 700;
  color: var(--adp-gray-800);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.adp-metric-sub {
  font-size: var(--adp-font-size-xs);
  color: var(--adp-gray-500);
}

.adp-metric-sub .positive { color: var(--adp-success); }
.adp-metric-sub .negative { color: var(--adp-danger); }

/* --------------------------------------------------------------------------
   6b. Page Actions (header button group)
   -------------------------------------------------------------------------- */
.adp-page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.adp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.125rem;
  font-size: var(--adp-font-size-sm);
  font-weight: 500;
  border-radius: var(--adp-radius-sm);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: var(--adp-transition);
  line-height: 1.5;
  white-space: nowrap;
}

.adp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.35);
}

.adp-btn-primary {
  background: var(--adp-primary);
  border-color: var(--adp-primary);
  color: #fff;
}

.adp-btn-primary:hover {
  background: var(--adp-blue-500);
  border-color: var(--adp-blue-500);
  color: #fff;
  box-shadow: 0 4px 12px rgba(43, 108, 176, 0.35);
}

.adp-btn-secondary {
  background: var(--adp-gray-100);
  border-color: var(--adp-gray-200);
  color: var(--adp-gray-700);
}

.adp-btn-secondary:hover {
  background: var(--adp-gray-200);
  border-color: var(--adp-gray-300);
  color: var(--adp-gray-800);
}

.adp-btn-ghost {
  background: transparent;
  border-color: var(--adp-gray-300);
  color: var(--adp-gray-600);
}

.adp-btn-ghost:hover {
  background: var(--adp-gray-100);
  border-color: var(--adp-gray-400);
  color: var(--adp-gray-800);
}

.adp-btn-success {
  background: var(--adp-success);
  border-color: var(--adp-success);
  color: #fff;
}

.adp-btn-success:hover {
  background: var(--adp-green-600);
  border-color: var(--adp-green-600);
  color: #fff;
  box-shadow: 0 4px 12px rgba(56, 161, 105, 0.35);
}

.adp-btn-danger {
  background: var(--adp-danger);
  border-color: var(--adp-danger);
  color: #fff;
}

.adp-btn-danger:hover {
  background: #9B2C2C;
  border-color: #9B2C2C;
  color: #fff;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  font-size: var(--adp-font-size-sm);
  font-weight: 500;
  border-radius: var(--adp-radius-sm);
  padding: 0.5rem 1.125rem;
  transition: var(--adp-transition);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.5;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.35);
  outline: none;
}

.adp-pw-toggle {
  cursor: pointer;
  background: #fff;
  border-left: 0;
}

.adp-pw-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.35);
  outline: none;
  border-color: var(--adp-primary);
  z-index: 1;
}

.btn-primary {
  background: var(--adp-primary);
  border-color: var(--adp-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--adp-blue-500);
  border-color: var(--adp-blue-500);
  box-shadow: 0 4px 12px rgba(43, 108, 176, 0.35);
}

.btn-primary:active {
  background: var(--adp-blue-700);
  border-color: var(--adp-blue-700);
}

.btn-outline-primary {
  color: var(--adp-primary);
  border-color: var(--adp-blue-300);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--adp-blue-50);
  border-color: var(--adp-primary);
  color: var(--adp-primary);
}

.btn-success {
  background: var(--adp-success);
  border-color: var(--adp-success);
}

.btn-success:hover {
  background: var(--adp-green-600);
  border-color: var(--adp-green-600);
  box-shadow: 0 4px 12px rgba(56, 161, 105, 0.35);
}

.btn-lg {
  padding: 0.7rem 1.75rem;
  font-size: var(--adp-font-size-base);
  border-radius: var(--adp-radius);
}

.btn-xl {
  padding: 0.875rem 2.25rem;
  font-size: var(--adp-font-size-lg);
  border-radius: var(--adp-radius);
  font-weight: 600;
}

.btn-pill {
  border-radius: var(--adp-radius-pill);
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: var(--adp-radius-sm);
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.form-label {
  font-size: var(--adp-font-size-sm);
  font-weight: 600;
  color: var(--adp-gray-700);
  margin-bottom: 0.4rem;
}

.form-label .required {
  color: var(--adp-danger);
  margin-left: 0.2rem;
}

.form-control,
.form-select {
  border: 1.5px solid var(--adp-gray-300);
  border-radius: var(--adp-radius-sm);
  color: var(--adp-gray-800);
  font-size: var(--adp-font-size-base);
  padding: 0.6rem 0.875rem;
  transition: var(--adp-transition);
  background-color: #fff;
}

.form-control:hover,
.form-select:hover {
  border-color: var(--adp-blue-300);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--adp-primary);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.18);
  outline: none;
}

.form-control::placeholder {
  color: var(--adp-gray-400);
  font-size: var(--adp-font-size-sm);
}

.form-control.is-valid  { border-color: var(--adp-success); }
.form-control.is-invalid { border-color: var(--adp-danger); }

/* ── adp-input: unified input + select skin ──────────────────────── */
.adp-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--adp-font-size-sm);
  font-weight: 450;
  color: var(--adp-gray-800);
  background-color: #fff;
  border: 1.5px solid var(--adp-gray-300);
  border-radius: var(--adp-radius-sm);
  padding: 0.46rem 0.85rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* Custom chevron for select elements */
select.adp-input {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232B6CB0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px 14px;
  cursor: pointer;
}

/* Date inputs – calendar icon tint via accent-color */
input[type="date"].adp-input {
  accent-color: var(--adp-primary);
  padding-right: 0.75rem;
}

.adp-input::placeholder {
  color: var(--adp-gray-400);
}

.adp-input:hover {
  border-color: var(--adp-blue-300);
  background-color: var(--adp-gray-50);
}

.adp-input:focus {
  outline: none;
  border-color: var(--adp-primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.14);
}

.adp-input:focus-visible {
  outline: none;
}

/* Active / filled state – subtle left accent */
select.adp-input:not([value=""]):not(:placeholder-shown),
input.adp-input:not([value=""]):valid {
  border-left-color: var(--adp-primary);
  border-left-width: 2.5px;
}

.adp-input.is-valid  { border-color: var(--adp-success); }
.adp-input.is-invalid { border-color: var(--adp-danger); }

/* Dark mode */
.adp-dark .adp-input {
  background-color: var(--adp-surface-2);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark select.adp-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2390CDF4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.adp-dark .adp-input:hover {
  border-color: var(--adp-blue-400, #63B3ED);
  background-color: var(--adp-surface);
}

.adp-dark .adp-input:focus {
  border-color: var(--adp-blue-400, #63B3ED);
  box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.18);
  background-color: var(--adp-surface-2);
}
/* ───────────────────────────────────────────────────────────────── */

.form-text {
  font-size: var(--adp-font-size-xs);
  color: var(--adp-gray-500);
  margin-top: 0.3rem;
}

.input-group-text {
  background: var(--adp-gray-50);
  border: 1.5px solid var(--adp-gray-300);
  color: var(--adp-gray-500);
  font-size: 1rem;
}

.input-group:focus-within .input-group-text {
  border-color: var(--adp-primary);
}

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

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.adp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.adp-table th {
  font-size: var(--adp-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--adp-gray-500);
  background: var(--adp-gray-50);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--adp-gray-200);
  white-space: nowrap;
}

.adp-table td {
  padding: 0.875rem 1rem;
  font-size: var(--adp-font-size-sm);
  color: var(--adp-gray-700);
  border-bottom: 1px solid var(--adp-gray-100);
  vertical-align: middle;
}

.adp-table tbody tr {
  transition: var(--adp-transition);
}

.adp-table tbody tr:hover {
  background: var(--adp-blue-50);
}

.adp-table tbody tr:last-child td {
  border-bottom: none;
}

.adp-table tbody tr[data-href] {
  cursor: pointer;
}

/* Bootstrap table override */
.table {
  --bs-table-striped-bg: var(--adp-gray-50);
  --bs-table-hover-bg: var(--adp-blue-50);
}

.table thead th {
  font-size: var(--adp-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--adp-gray-500);
  background: var(--adp-gray-50);
  border-bottom: 2px solid var(--adp-gray-200);
  padding: 0.75rem 1rem;
}

.table td {
  padding: 0.875rem 1rem;
  font-size: var(--adp-font-size-sm);
  color: var(--adp-gray-700);
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   10. Badges & Status
   -------------------------------------------------------------------------- */
.adp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--adp-radius-pill);
  font-size: var(--adp-font-size-xs);
  font-weight: 600;
  line-height: 1;
}

.adp-badge-blue   { background: var(--adp-blue-50);  color: var(--adp-primary); }
.adp-badge-green  { background: var(--adp-green-50); color: var(--adp-green-600); }
.adp-badge-red    { background: #FFF5F5;              color: var(--adp-danger); }
.adp-badge-amber  { background: #FFFBEB;              color: var(--adp-amber-700); }
.adp-badge-teal   { background: #E6FFFA;              color: var(--adp-teal-500); }
.adp-badge-gray   { background: var(--adp-gray-100);  color: var(--adp-gray-600); }

/* Status dot */
.adp-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.adp-status-dot.active    { background: var(--adp-success); }
.adp-status-dot.inactive  { background: var(--adp-gray-400); }
.adp-status-dot.pending   { background: var(--adp-warning); }
.adp-status-dot.danger    { background: var(--adp-danger); }

/* --------------------------------------------------------------------------
   11. Alerts & Feedback
   -------------------------------------------------------------------------- */
.adp-alert {
  border: none;
  border-radius: var(--adp-radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--adp-font-size-sm);
  margin-bottom: 1.25rem;
}

.adp-alert-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.adp-alert-content {
  flex: 1;
}

.adp-alert-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.adp-alert.adp-alert-success {
  background: #F0FFF4;
  color: var(--adp-green-600);
  border-left: 4px solid var(--adp-success);
}

.adp-alert.adp-alert-danger {
  background: #FFF5F5;
  color: var(--adp-danger);
  border-left: 4px solid var(--adp-danger);
}

.adp-alert.adp-alert-info {
  background: var(--adp-blue-50);
  color: var(--adp-blue-700);
  border-left: 4px solid var(--adp-primary);
}

.adp-alert.adp-alert-warning {
  background: #FFFBEB;
  color: #92400E;
  border-left: 4px solid var(--adp-warning);
}

/* Bootstrap alert overrides */
.alert {
  border: none;
  border-radius: var(--adp-radius);
  border-left: 4px solid transparent;
  font-size: var(--adp-font-size-sm);
}

.alert-success { background: #F0FFF4; color: var(--adp-green-600); border-left-color: var(--adp-success); }
.alert-danger   { background: #FFF5F5; color: var(--adp-danger);    border-left-color: var(--adp-danger); }
.alert-warning  { background: #FFFBEB; color: #92400E;              border-left-color: var(--adp-warning); }
.alert-info     { background: var(--adp-blue-50); color: var(--adp-blue-700); border-left-color: var(--adp-primary); }

/* --------------------------------------------------------------------------
   12. Toast Notifications
   -------------------------------------------------------------------------- */
.adp-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 360px;
  pointer-events: none;
}

.adp-toast {
  background: #fff;
  border-radius: var(--adp-radius);
  box-shadow: var(--adp-shadow-xl);
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-left: 4px solid var(--adp-primary);
  pointer-events: all;
  font-size: var(--adp-font-size-sm);
}

.adp-toast.success { border-left-color: var(--adp-success); }
.adp-toast.error   { border-left-color: var(--adp-danger); }
.adp-toast.warning { border-left-color: var(--adp-warning); }

.adp-toast-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.adp-toast.success .adp-toast-icon { color: var(--adp-success); }
.adp-toast.error   .adp-toast-icon { color: var(--adp-danger); }
.adp-toast.warning .adp-toast-icon { color: var(--adp-warning); }
.adp-toast.info    .adp-toast-icon { color: var(--adp-primary); }

.adp-toast-body { flex: 1; }
.adp-toast-title {
  font-weight: 600;
  color: var(--adp-gray-800);
  margin-bottom: 0.15rem;
}
.adp-toast-msg {
  color: var(--adp-gray-600);
}

.adp-toast-close {
  background: none;
  border: none;
  color: var(--adp-gray-400);
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.adp-toast-close:hover { color: var(--adp-gray-700); }

@media (prefers-reduced-motion: no-preference) {
  .adp-toast {
    animation: adp-toast-in 0.3s ease;
  }
  .adp-toast.dismissing {
    animation: adp-toast-out 0.25s ease forwards;
  }
  @keyframes adp-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes adp-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(24px); }
  }
}

/* --------------------------------------------------------------------------
   13. Loading Overlay
   -------------------------------------------------------------------------- */
.adp-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

.adp-loading-overlay.visible {
  display: flex;
}

.adp-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--adp-blue-100);
  border-top-color: var(--adp-primary);
  border-radius: 50%;
}

.adp-loading-text {
  color: var(--adp-gray-600);
  font-size: var(--adp-font-size-sm);
  font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
  .spin { animation: adp-spin 0.6s linear infinite; display: inline-block; }
}

@media (prefers-reduced-motion: no-preference) {
  .adp-spinner {
    animation: adp-spin 0.8s linear infinite;
  }
  @keyframes adp-spin {
    to { transform: rotate(360deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .adp-spinner,
  .adp-filter-card .adp-search-wrap .adp-search-spinner {
    animation: none;
    border-top-color: var(--adp-primary);
    opacity: 0.6;
  }
  .adp-metric-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   14. Section Headers / Dividers
   -------------------------------------------------------------------------- */
.adp-section-label {
  font-size: var(--adp-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--adp-gray-400);
  margin-bottom: 0.75rem;
}

.adp-divider {
  border: none;
  border-top: 1px solid var(--adp-gray-200);
  margin: 1.5rem 0;
}

/* --------------------------------------------------------------------------
   15. Appointment / Status Cards (Dashboard)
   -------------------------------------------------------------------------- */
.adp-appt-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--adp-radius);
  border: 1px solid var(--adp-gray-200);
  background: #fff;
  margin-bottom: 0.5rem;
  transition: var(--adp-transition);
}

.adp-appt-item:hover {
  border-color: var(--adp-blue-300);
  background: var(--adp-blue-50);
}

.adp-appt-time {
  font-size: var(--adp-font-size-sm);
  font-weight: 700;
  color: var(--adp-primary);
  white-space: nowrap;
  min-width: 68px;
}

.adp-appt-info {
  flex: 1;
  min-width: 0;
}

.adp-appt-name {
  font-size: var(--adp-font-size-sm);
  font-weight: 600;
  color: var(--adp-gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adp-appt-doctor {
  font-size: var(--adp-font-size-xs);
  color: var(--adp-gray-500);
}

.adp-appt-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   16. Today Panel
   -------------------------------------------------------------------------- */
.adp-today-panel {
  border: 1.5px solid var(--adp-blue-200);
  border-radius: var(--adp-radius-lg);
  overflow: hidden;
  box-shadow: var(--adp-shadow-sm);
}

.adp-today-header {
  background: linear-gradient(135deg, var(--adp-primary) 0%, var(--adp-blue-500) 100%);
  color: #fff;
  padding: 1rem 1.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.adp-today-title {
  font-size: var(--adp-font-size-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.adp-today-body {
  background: #fff;
}

.adp-today-section {
  padding: 1rem 1.375rem;
}

.adp-today-section + .adp-today-section {
  border-top: 1px solid var(--adp-gray-100);
}

.adp-today-section-title {
  font-size: var(--adp-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--adp-gray-500);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* --------------------------------------------------------------------------
   17. Charts
   -------------------------------------------------------------------------- */
.adp-chart-container {
  position: relative;
  padding: 0.5rem 0;
}

/* --------------------------------------------------------------------------
   18. Empty States
   -------------------------------------------------------------------------- */
.adp-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--adp-gray-400);
}

.adp-empty-icon {
  font-size: 2.75rem;
  margin-bottom: 0.875rem;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  transform: translateZ(0);
}

.adp-empty-icon svg {
  width: 2.75rem;
  height: 2.75rem;
  display: block;
  margin: 0 auto;
}

.adp-empty-title {
  font-size: var(--adp-font-size-base);
  font-weight: 600;
  color: var(--adp-gray-600);
  margin-bottom: 0.4rem;
}

.adp-empty-text {
  font-size: var(--adp-font-size-sm);
}

/* --------------------------------------------------------------------------
   19. Login Page
   -------------------------------------------------------------------------- */
.adp-login-page {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--adp-blue-700) 0%, var(--adp-blue-600) 45%, var(--adp-teal-500) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
}

.adp-login-page::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  top: -200px;
  right: -150px;
}

.adp-login-page::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  bottom: -100px;
  left: -100px;
}

.adp-login-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: var(--adp-radius-xl);
  box-shadow: var(--adp-shadow-xl);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.adp-login-header {
  background: linear-gradient(135deg, var(--adp-blue-700) 0%, var(--adp-blue-600) 100%);
  padding: 2.25rem 2rem 2rem;
  text-align: center;
  color: #fff;
}

.adp-login-logo {
  width: 68px;
  height: 68px;
  background: rgba(255,255,255,0.18);
  border-radius: var(--adp-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.125rem;
  font-size: 2rem;
}

.adp-login-clinic-name {
  font-size: var(--adp-font-size-xl);
  font-weight: 700;
  margin-bottom: 0.25rem;
  letter-spacing: -0.3px;
}

.adp-login-tagline {
  font-size: var(--adp-font-size-sm);
  opacity: 0.8;
  margin: 0;
}

.adp-login-body {
  padding: 2rem;
}

.adp-login-welcome {
  font-size: var(--adp-font-size-base);
  font-weight: 600;
  color: var(--adp-gray-800);
  margin-bottom: 0.25rem;
}

.adp-login-instruction {
  font-size: var(--adp-font-size-sm);
  color: var(--adp-gray-500);
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   20. Registration Page
   -------------------------------------------------------------------------- */
.adp-register-page {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--adp-blue-50) 0%, #fff 60%);
  padding: 2rem 1rem 3rem;
}

.adp-register-card {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--adp-radius-xl);
  box-shadow: var(--adp-shadow-lg);
  overflow: hidden;
}

.adp-register-header {
  background: linear-gradient(135deg, var(--adp-blue-700) 0%, var(--adp-blue-500) 100%);
  color: #fff;
  padding: 2rem 2rem 1.75rem;
  text-align: center;
}

.adp-register-icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.75rem;
}

.adp-register-title {
  font-size: var(--adp-font-size-2xl);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.adp-register-subtitle {
  font-size: var(--adp-font-size-sm);
  opacity: 0.85;
  margin: 0;
}

/* Progress steps */
.adp-steps {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 1.25rem 2rem;
  background: var(--adp-gray-50);
  border-bottom: 1px solid var(--adp-gray-200);
}

.adp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  position: relative;
}

a.adp-step {
  text-decoration: none;
  cursor: pointer;
}

a.adp-step:hover .adp-step-circle {
  border-color: var(--adp-primary);
  color: var(--adp-primary);
}

.adp-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 60%;
  width: 80%;
  height: 2px;
  background: var(--adp-gray-200);
  z-index: 0;
}

.adp-step.completed:not(:last-child)::after {
  background: var(--adp-primary);
}

.adp-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  border: 2px solid var(--adp-gray-300);
  background: #fff;
  color: var(--adp-gray-400);
  z-index: 1;
  transition: var(--adp-transition);
}

.adp-step.active .adp-step-circle {
  border-color: var(--adp-primary);
  background: var(--adp-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--adp-blue-100);
}

.adp-step.completed .adp-step-circle {
  border-color: var(--adp-success);
  background: var(--adp-success);
  color: #fff;
}

.adp-step-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--adp-gray-400);
  text-align: center;
}

.adp-step.active .adp-step-label { color: var(--adp-primary); }
.adp-step.completed .adp-step-label { color: var(--adp-success); }

.adp-register-body {
  padding: 2rem;
}

.adp-form-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--adp-gray-100);
}

.adp-form-section:last-of-type {
  border-bottom: none;
}

.adp-form-section-title {
  font-size: var(--adp-font-size-base);
  font-weight: 700;
  color: var(--adp-gray-800);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adp-form-section-title i {
  color: var(--adp-primary);
}

.adp-form-section-desc {
  font-size: var(--adp-font-size-sm);
  color: var(--adp-gray-500);
  margin-bottom: 1.25rem;
}

/* Camera / selfie */
.adp-camera-preview {
  border-radius: var(--adp-radius);
  background: var(--adp-gray-50);
  border: 2px dashed var(--adp-gray-300);
  overflow: hidden;
  position: relative;
  text-align: center;
}

.adp-camera-placeholder {
  padding: 2.5rem 1rem;
  color: var(--adp-gray-400);
  font-size: 2.5rem;
}

.adp-camera-placeholder p {
  font-size: var(--adp-font-size-sm);
  margin-top: 0.5rem;
}

/* Consent box */
.adp-consent-box {
  border: 1.5px solid var(--adp-gray-200);
  border-radius: var(--adp-radius);
  background: var(--adp-gray-50);
  max-height: 300px;
  overflow-y: auto;
  padding: 1.25rem 1.375rem;
  font-size: var(--adp-font-size-sm);
  line-height: 1.7;
  color: var(--adp-gray-700);
  user-select: none;
}

.adp-consent-box h6 {
  color: var(--adp-primary);
  font-weight: 700;
  margin-bottom: 1rem;
}

.adp-consent-agree {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: #FFFBEB;
  border: 1.5px solid #F6E05E;
  border-radius: var(--adp-radius);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.adp-consent-agree .form-check-input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}

.adp-consent-agree label {
  font-size: var(--adp-font-size-sm);
  font-weight: 600;
  color: var(--adp-gray-700);
  cursor: pointer;
}

/* Signature */
.adp-signature-pad {
  border: 2px dashed var(--adp-gray-300);
  border-radius: var(--adp-radius);
  background: var(--adp-gray-50);
  cursor: crosshair;
  display: block;
  width: 100%;
  touch-action: none;
}

/* Patient options */
.adp-patient-option {
  border: 2px solid var(--adp-gray-200);
  border-radius: var(--adp-radius);
  padding: 1rem 1.125rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: var(--adp-transition);
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.adp-patient-option:hover,
.adp-patient-option.selected {
  border-color: var(--adp-primary);
  background: var(--adp-blue-50);
}

.adp-patient-option-new {
  border-color: var(--adp-green-400);
  background: var(--adp-green-50);
}

.adp-patient-option-new:hover {
  border-color: var(--adp-success);
  background: #DCFCE7;
}

/* --------------------------------------------------------------------------
   21. Scrollbar Styling
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--adp-gray-100); }
::-webkit-scrollbar-thumb { background: var(--adp-gray-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--adp-gray-400); }

/* --------------------------------------------------------------------------
   22. Utility Classes
   -------------------------------------------------------------------------- */
.text-primary-adp { color: var(--adp-primary) !important; }
.text-muted-adp   { color: var(--adp-gray-500) !important; }
.bg-primary-adp   { background: var(--adp-primary) !important; }
.bg-light-adp     { background: var(--adp-gray-50) !important; }
.border-light-adp { border-color: var(--adp-gray-200) !important; }

.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.rounded-adp    { border-radius: var(--adp-radius) !important; }
.rounded-adp-lg { border-radius: var(--adp-radius-lg) !important; }

.shadow-adp-sm { box-shadow: var(--adp-shadow-sm) !important; }
.shadow-adp-md { box-shadow: var(--adp-shadow-md) !important; }

/* --------------------------------------------------------------------------
   23. Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .adp-topbar {
    padding: 0 1rem;
  }

  /* Navbar collapses to a hamburger on mobile — no need to be sticky and eat 56px */
  .adp-navbar {
    position: relative;
    top: auto;
  }

  .adp-brand span.brand-text {
    display: none;
  }

  .adp-page-wrapper {
    padding: 1.25rem 1rem 2rem;
    min-height: calc(100vh - var(--adp-topbar-height));
  }

  .adp-card-body {
    padding: 1rem;
  }

  .adp-card-header {
    padding: 0.875rem 1rem;
  }

  .adp-metric-card {
    padding: 1rem;
  }

  .adp-metric-value {
    font-size: var(--adp-font-size-xl);
  }

  .adp-login-card {
    border-radius: var(--adp-radius-lg);
  }

  .adp-login-header {
    padding: 1.75rem 1.5rem 1.5rem;
  }

  .adp-login-body {
    padding: 1.5rem;
  }

  .adp-register-body {
    padding: 1.5rem;
  }

  .adp-steps {
    padding: 1rem;
    gap: 0;
  }

  .adp-step-label {
    font-size: 0.55rem;
  }

  .adp-toast-container {
    right: 0.75rem;
    left: 0.75rem;
    max-width: none;
  }
}

@media (max-width: 991.98px) {
  .adp-navbar .nav-link {
    padding: 0.6rem 1rem !important;
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .adp-navbar .nav-link.active,
  .adp-navbar .nav-link.dropdown-toggle.active {
    border-left-color: var(--adp-primary) !important;
    border-bottom: none;
    color: var(--adp-primary) !important;
    font-weight: 600;
    background: var(--adp-blue-50);
  }

  .adp-today-panel .row > div:first-child {
    border-right: none;
    border-bottom: 1px solid var(--adp-gray-100);
  }
}

/* --------------------------------------------------------------------------
   24. Print Styles
   -------------------------------------------------------------------------- */
@page {
  size: A4;
  margin: 15mm;
}

.adp-print-header {
  display: none;
}

@media print {
  .adp-topbar,
  .adp-navbar,
  .adp-toast-container,
  .adp-sidebar,
  .adp-filter-card,
  .adp-page-actions,
  .adp-row-actions,
  .btn,
  .btn-group,
  .btn-toolbar,
  .no-print,
  nav.breadcrumb,
  nav[aria-label="breadcrumb"],
  .adp-breadcrumb,
  .modal,
  .dropdown-menu {
    display: none !important;
  }

  .adp-page-wrapper {
    max-width: 180mm;
    margin: 0 auto;
    padding: 0;
  }

  .adp-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  tr {
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  .adp-print-header {
    display: block;
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #000;
  }

  .adp-print-header img {
    max-height: 60px;
    margin-bottom: 6px;
  }

  .adp-print-header h2 {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 700;
  }

  .adp-print-header p {
    margin: 0;
    font-size: 12px;
    color: #444;
  }
}

/* ==========================================================================
   25. LIST PAGE COMPONENTS
   Shared across all index/list pages: patients, invoices, appointments,
   staff, inventory, expenses
   ========================================================================== */

/* ------------------------------------------------------------------
   25a. Stat Mini-Cards (row of 4 counts at top of list pages)
------------------------------------------------------------------ */
.adp-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.adp-stat-card {
  background: #fff;
  border: 1px solid var(--adp-gray-200);
  border-radius: var(--adp-radius);
  padding: 0.45rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: default;
  transition: var(--adp-transition);
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 140px;
}

a.adp-stat-card:hover {
  border-color: var(--adp-blue-300);
  box-shadow: var(--adp-shadow-sm);
  color: inherit;
}

.adp-stat-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--adp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.adp-stat-icon.blue   { background: var(--adp-blue-50);  color: var(--adp-primary); }
.adp-stat-icon.green  { background: var(--adp-green-50); color: var(--adp-success); }
.adp-stat-icon.teal   { background: #E6FFFA;             color: var(--adp-teal-500); }
.adp-stat-icon.amber  { background: #FFFBEB;             color: var(--adp-warning); }
.adp-stat-icon.red    { background: #FFF5F5;             color: var(--adp-danger); }
.adp-stat-icon.gray   { background: var(--adp-gray-100); color: var(--adp-gray-500); }

.adp-stat-body { display: flex; align-items: baseline; gap: 0.5rem; }

.adp-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--adp-gray-500);
  line-height: 1;
}

.adp-stat-value {
  font-size: var(--adp-font-size-md);
  font-weight: 700;
  color: var(--adp-gray-800);
  line-height: 1;
}

/* ------------------------------------------------------------------
   25b. Filter / Search Panel
------------------------------------------------------------------ */
.adp-filter-card {
  background: #fff;
  border: 1px solid var(--adp-gray-200);
  border-radius: var(--adp-radius-lg);
  padding: 0.6rem 1rem;
  margin-bottom: 0.625rem;
  box-shadow: var(--adp-shadow-xs);
}

.adp-filter-card .form-control,
.adp-filter-card .form-select {
  height: auto;
  min-height: unset;
}

.adp-filter-card .btn {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-size: var(--adp-font-size-sm);
}

.adp-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.adp-filter-field {
  flex: 1;
  min-width: 160px;
}

.adp-filter-field label {
  display: block;
  font-size: var(--adp-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--adp-gray-500);
  margin-bottom: 0.15rem;
}

.adp-filter-field.search-wide {
  min-width: 220px;
  flex: 2;
}

.adp-filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-shrink: 0;
  padding-bottom: 0.05rem;
}

/* Vertical divider between filter groups */
.adp-filter-divider {
  width: 1px;
  align-self: stretch;
  background: var(--adp-gray-200);
  margin: 0.1rem 0.15rem;
  flex-shrink: 0;
}

/* Inline date-range group */
.adp-filter-date-range {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.adp-filter-range-sep {
  color: var(--adp-gray-400);
  font-size: 0.8rem;
  padding-bottom: 0.55rem;
  flex-shrink: 0;
  line-height: 1;
}

/* "Today" quick-pick button inside label */
.adp-date-shortcut {
  background: none;
  border: 1px solid var(--adp-blue-200);
  border-radius: var(--adp-radius-sm);
  color: var(--adp-primary);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1;
  padding: 0.15rem 0.45rem;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}

.adp-date-shortcut:hover {
  background: var(--adp-blue-50);
}

/* Active filter chips */
.adp-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.adp-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--adp-blue-50);
  color: var(--adp-primary);
  border: 1px solid var(--adp-blue-200);
  border-radius: var(--adp-radius-pill);
  padding: 0.2rem 0.65rem;
  font-size: var(--adp-font-size-xs);
  font-weight: 500;
  text-decoration: none;
}

.adp-filter-chip:hover {
  background: var(--adp-blue-100);
  color: var(--adp-primary);
}

.adp-filter-chip i {
  font-size: 0.7rem;
}

/* Search input with live indicator (filter card context only) */
.adp-filter-card .adp-search-wrap {
  position: relative;
}

.adp-filter-card .adp-search-wrap .adp-search-spinner {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--adp-blue-200);
  border-top-color: var(--adp-primary);
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .adp-filter-card .adp-search-wrap .adp-search-spinner {
    animation: adp-spin 0.7s linear infinite;
  }
}

.adp-filter-card .adp-search-wrap.searching .adp-search-spinner {
  display: block;
}

.adp-filter-card .adp-search-wrap.searching .form-control {
  padding-right: 2.25rem;
}

/* ------------------------------------------------------------------
   25c. List Card (wraps the table)
------------------------------------------------------------------ */
.adp-list-card {
  background: #fff;
  border: 1px solid var(--adp-gray-200);
  border-radius: var(--adp-radius-lg);
  box-shadow: var(--adp-shadow-sm);
  overflow: hidden;
}

.adp-list-header {
  padding: 1rem 1.375rem;
  border-bottom: 1px solid var(--adp-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff;
}

.adp-list-title {
  font-size: var(--adp-font-size-md);
  font-weight: 700;
  color: var(--adp-gray-800);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adp-list-title i {
  color: var(--adp-primary);
}

.adp-list-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 0.5rem;
  background: var(--adp-blue-50);
  color: var(--adp-primary);
  border-radius: var(--adp-radius-pill);
  font-size: var(--adp-font-size-xs);
  font-weight: 700;
}

.adp-list-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ------------------------------------------------------------------
   25d. Sortable Table Headers
------------------------------------------------------------------ */
.adp-th-sort {
  white-space: nowrap;
  user-select: none;
}

.adp-th-sort a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--adp-gray-500);
  text-decoration: none;
  font-size: var(--adp-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: color 0.15s;
}

.adp-th-sort a:hover {
  color: var(--adp-primary);
}

.adp-th-sort a .sort-icon {
  font-size: 0.75rem;
  opacity: 0.5;
}

.adp-th-sort a.sorted {
  color: var(--adp-primary);
}

.adp-th-sort a.sorted .sort-icon {
  opacity: 1;
}

/* ------------------------------------------------------------------
   25e. Table Row — consistent style for all list pages
------------------------------------------------------------------ */
.adp-list-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--adp-font-size-sm);
}

.adp-list-table thead th {
  background: var(--adp-gray-50);
  padding: 0.7rem 1rem;
  border-bottom: 2px solid var(--adp-gray-200);
  font-size: var(--adp-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--adp-gray-500);
  white-space: nowrap;
}

.adp-list-table tbody tr {
  transition: background 0.12s;
}

.adp-list-table tbody tr:hover {
  background: var(--adp-blue-50);
}

.adp-list-table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--adp-gray-100);
  vertical-align: middle;
  color: var(--adp-gray-700);
}

.adp-list-table tbody tr:last-child td {
  border-bottom: none;
}

.adp-list-table tbody tr[data-href] {
  cursor: pointer;
}

/* Primary cell: bold name / main identifier */
.adp-cell-primary {
  font-weight: 600;
  color: var(--adp-gray-800);
}

.adp-cell-primary a {
  color: var(--adp-gray-800);
  text-decoration: none;
}

.adp-cell-primary a:hover {
  color: var(--adp-primary);
}

.adp-cell-secondary {
  font-size: var(--adp-font-size-xs);
  color: var(--adp-gray-500);
  margin-top: 0.15rem;
}

.adp-cell-muted {
  color: var(--adp-gray-400);
  font-size: var(--adp-font-size-sm);
}

/* Avatar circle for patient/staff rows */
.adp-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--adp-blue-50);
  color: var(--adp-primary);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.adp-row-avatar.female {
  background: #FFF0F6;
  color: #C2185B;
}

.adp-row-avatar.male {
  background: var(--adp-blue-50);
  color: var(--adp-primary);
}

/* ------------------------------------------------------------------
   25f. Row Action Buttons
------------------------------------------------------------------ */
.adp-row-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.adp-action-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--adp-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: var(--adp-transition);
  flex-shrink: 0;
}

.adp-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(49,130,206,0.25);
}

/* View — blue */
.adp-action-btn.view {
  border-color: var(--adp-blue-200);
  color: var(--adp-primary);
}
.adp-action-btn.view:hover {
  background: var(--adp-blue-50);
  border-color: var(--adp-primary);
  color: var(--adp-primary);
}

/* Edit — slate */
.adp-action-btn.edit {
  border-color: var(--adp-gray-300);
  color: var(--adp-gray-600);
}
.adp-action-btn.edit:hover {
  background: var(--adp-gray-100);
  border-color: var(--adp-gray-400);
  color: var(--adp-gray-800);
}

/* Delete — red */
.adp-action-btn.delete {
  border-color: #FED7D7;
  color: var(--adp-danger);
}
.adp-action-btn.delete:hover {
  background: #FFF5F5;
  border-color: var(--adp-danger);
}

/* Success / pay / check-in — green */
.adp-action-btn.success {
  border-color: #C6F6D5;
  color: var(--adp-success);
}
.adp-action-btn.success:hover {
  background: #F0FFF4;
  border-color: var(--adp-success);
}

/* Warning — amber */
.adp-action-btn.warn {
  border-color: #FEEBC8;
  color: var(--adp-warning);
}
.adp-action-btn.warn:hover {
  background: #FFFBEB;
  border-color: var(--adp-warning);
}

/* ------------------------------------------------------------------
   25g. Pagination
------------------------------------------------------------------ */
.adp-pagination-wrap {
  padding: 0.875rem 1.375rem;
  border-top: 1px solid var(--adp-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--adp-gray-50);
}

.adp-pagination-info {
  font-size: var(--adp-font-size-xs);
  color: var(--adp-gray-500);
}

.adp-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.adp-pagination li a,
.adp-pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.5rem;
  border-radius: var(--adp-radius-sm);
  font-size: var(--adp-font-size-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--adp-gray-600);
  border: 1.5px solid var(--adp-gray-200);
  background: #fff;
  transition: var(--adp-transition);
}

.adp-pagination li a:hover {
  background: var(--adp-blue-50);
  border-color: var(--adp-blue-300);
  color: var(--adp-primary);
}

.adp-pagination li.active a,
.adp-pagination li.active span {
  background: var(--adp-primary);
  border-color: var(--adp-primary);
  color: #fff;
}

.adp-pagination li.disabled span {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--adp-gray-50);
}

.adp-pagination li.ellipsis span {
  border-color: transparent;
  background: transparent;
  color: var(--adp-gray-400);
}

/* ------------------------------------------------------------------
   25g-2. Flat pagination (adp-page-btn variant — diagnosis/prescription pages)
------------------------------------------------------------------- */
.adp-pagination:not(ul):not(ol) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  border-top: 1px solid var(--adp-gray-100);
  background: var(--adp-gray-50);
}

.adp-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.625rem;
  border-radius: var(--adp-radius-sm);
  font-size: var(--adp-font-size-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--adp-gray-600);
  border: 1.5px solid var(--adp-gray-200);
  background: #fff;
  transition: var(--adp-transition);
}

.adp-page-btn:hover {
  background: var(--adp-blue-50);
  border-color: var(--adp-blue-300);
  color: var(--adp-primary);
  text-decoration: none;
}

.adp-page-btn.active {
  background: var(--adp-primary);
  border-color: var(--adp-primary);
  color: #fff;
  pointer-events: none;
}

.adp-page-info {
  font-size: var(--adp-font-size-xs);
  color: var(--adp-gray-500);
  margin-left: auto;
  padding-left: 0.5rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   25h. Low-stock / warning row highlight
------------------------------------------------------------------ */
.adp-row-warn {
  background: #FFFBEB !important;
}

.adp-row-warn:hover {
  background: #FEF3C7 !important;
}

.adp-row-danger {
  background: #FFF5F5 !important;
}

.adp-row-danger:hover {
  background: #FED7D7 !important;
}

/* ------------------------------------------------------------------
   25i. Mobile responsive list
------------------------------------------------------------------ */

/* Allow horizontal scroll inside the card without clipping the table */
.adp-list-card .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hide secondary columns tagged [data-hide-mobile] on small screens */
@media (max-width: 767.98px) {
  [data-hide-mobile] {
    display: none !important;
  }
}

/* Keep the "Today's Queue" Action column (Check In / Continue / View) pinned
   to the right edge on phone widths so it's never scrolled out of view --
   this is the button front-desk staff need most, right when they need it. */
@media (max-width: 767.98px) {
  /* .table thead th (padding: .75rem 1rem) otherwise beats .table-sm's
     compact padding on specificity, ties up columns and pushes the
     Action column further than it needs to go. */
  .adp-queue-table thead th {
    padding: 0.25rem 0.25rem;
  }

  .adp-queue-action-col {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.25);
  }

  .adp-queue-table thead .adp-queue-action-col {
    background: #f8f9fa;
  }

  .adp-queue-table tbody tr:hover .adp-queue-action-col {
    background: var(--bs-table-hover-bg, #f5f5f5);
  }
}

@media (max-width: 479.98px) {
  .adp-stat-card {
    flex: 1 1 calc(50% - 0.25rem);
  }
}

@media (max-width: 767.98px) {
  .adp-stat-row {
    flex-wrap: wrap;
  }

  .adp-stat-row .adp-stat-card {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .adp-filter-row {
    gap: 0.5rem;
  }

  .adp-filter-divider {
    display: none;
  }

  .adp-filter-field {
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 calc(50% - 0.375rem);
  }

  .adp-filter-field.search-wide {
    flex: 1 1 100%;
  }

  .adp-filter-date-range {
    flex: 1 1 100%;
  }

  .adp-filter-date-range .adp-filter-field {
    flex: 1 1 calc(50% - 1rem);
  }

  .adp-filter-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  .adp-pagination-wrap {
    justify-content: center;
    padding: 0.75rem 1rem;
  }

  .adp-pagination-info {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Dark Mode
   Activated by adding .adp-dark to <html>
   ========================================================================== */
.adp-dark {
  --adp-bg:          #0F172A;
  --adp-surface:     #1E293B;
  --adp-surface-2:   #273347;
  --adp-border:      #334155;
  --adp-text:        #E2E8F0;
  --adp-text-muted:  #94A3B8;
}

.adp-dark body {
  background: var(--adp-bg);
  color: var(--adp-text);
}

.adp-dark .adp-topbar {
  background: #0B1526;
  border-bottom-color: #1E293B;
}

.adp-dark .adp-navbar {
  background: #111827;
  border-bottom-color: #1E293B;
}

.adp-dark .adp-navbar .nav-link,
.adp-dark .adp-navbar .dropdown-toggle {
  color: #CBD5E0;
}

.adp-dark .adp-navbar .nav-link:hover,
.adp-dark .adp-navbar .dropdown-toggle:hover {
  color: #fff;
}

.adp-dark .dropdown-menu {
  background: #1E293B;
  border-color: #334155;
}

.adp-dark .dropdown-item {
  color: #CBD5E0;
}

.adp-dark .dropdown-item:hover {
  background: #273347;
  color: #fff;
}

.adp-dark .card {
  background: var(--adp-surface);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .card-header {
  background: var(--adp-surface-2);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .table {
  color: var(--adp-text);
  border-color: var(--adp-border);
}

.adp-dark .table-light,
.adp-dark thead.table-light {
  background: var(--adp-surface-2) !important;
  color: var(--adp-text-muted);
}

.adp-dark .table-hover > tbody > tr:hover > td {
  background: rgba(255,255,255,0.04);
}

.adp-dark .adp-filter-card,
.adp-dark .adp-list-card,
.adp-dark .adp-stat-card {
  background: var(--adp-surface);
  border-color: var(--adp-border);
}

.adp-dark input.form-control,
.adp-dark select.form-control,
.adp-dark textarea.form-control,
.adp-dark input.form-select,
.adp-dark select.form-select {
  background: var(--adp-surface-2);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .text-muted {
  color: var(--adp-text-muted) !important;
}

.adp-dark .border-bottom,
.adp-dark .border-top,
.adp-dark hr {
  border-color: var(--adp-border) !important;
}

.adp-dark .adp-topbar-btn,
.adp-dark .adp-search-input {
  color: #CBD5E0;
  background: transparent;
}

.adp-dark .adp-search-input {
  background: #1E293B;
  border-color: #334155;
}

.adp-dark .adp-search-results {
  background: #1E293B;
  border-color: #334155;
}

.adp-dark .adp-search-result-item {
  color: #CBD5E0;
}

.adp-dark .adp-search-result-item:hover {
  background: #273347;
}

.adp-dark .adp-search-group-header {
  background: #1a2535;
  color: #64748B;
  border-bottom-color: #2d3748;
}

.adp-dark .sticky-alert-bar {
  background: #1A2744;
  border-color: #2B4070;
}

.adp-dark .modal-content {
  background: var(--adp-surface);
  color: var(--adp-text);
}

.adp-dark .modal-header {
  border-color: var(--adp-border);
}

.adp-dark .modal-footer {
  border-color: var(--adp-border);
}

.adp-dark .bg-light {
  background: var(--adp-surface-2) !important;
}

.adp-dark .adp-notif-dropdown {
  background: var(--adp-surface);
  border-color: var(--adp-border);
}

.adp-dark .adp-notif-header {
  border-color: var(--adp-border);
}

.adp-dark code,
.adp-dark pre {
  background: var(--adp-surface-2);
  color: #93C5FD;
}

.adp-dark .adp-page-wrapper {
  background: var(--adp-bg);
}

.adp-dark .adp-breadcrumb {
  background: var(--adp-surface);
  border-color: var(--adp-border);
}

.adp-dark .alert-item {
  background: rgba(255,255,255,0.05);
}

.adp-dark .tab-content,
.adp-dark .nav-tabs {
  border-color: var(--adp-border);
}

.adp-dark .nav-tabs .nav-link {
  color: var(--adp-text-muted);
}

.adp-dark .nav-tabs .nav-link.active {
  background: var(--adp-surface);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

/* Select2 — dark mode */
.adp-dark .select2-container--bootstrap-5 .select2-selection,
.adp-dark .select2-container--default .select2-selection--single,
.adp-dark .select2-container--default .select2-selection--multiple {
  background: var(--adp-surface-2);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.adp-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--adp-text);
}

.adp-dark .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
.adp-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--adp-surface);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove,
.adp-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--adp-text-muted);
}

.adp-dark .select2-container .select2-dropdown,
.adp-dark .select2-container--bootstrap-5 .select2-dropdown,
.adp-dark .select2-container--default .select2-dropdown {
  background: var(--adp-surface);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .select2-container--bootstrap-5 .select2-results__option,
.adp-dark .select2-container--default .select2-results__option {
  background: var(--adp-surface);
  color: var(--adp-text);
}

.adp-dark .select2-container--bootstrap-5 .select2-results__option--highlighted,
.adp-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--adp-surface-2);
  color: var(--adp-text);
}

.adp-dark .select2-container--bootstrap-5 .select2-results__option[aria-selected=true],
.adp-dark .select2-container--default .select2-results__option[aria-selected=true] {
  background: #1e3a5f;
  color: #93C5FD;
}

.adp-dark .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
.adp-dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--adp-surface-2);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field::placeholder,
.adp-dark .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
  color: var(--adp-text-muted);
}

.adp-dark .select2-container--bootstrap-5 .select2-selection__placeholder,
.adp-dark .select2-container--default .select2-selection__placeholder {
  color: var(--adp-text-muted);
}

.adp-dark .select2-container--bootstrap-5 .select2-selection__arrow b,
.adp-dark .select2-container--default .select2-selection__arrow b {
  border-color: var(--adp-text-muted) transparent transparent transparent;
}

/* jQuery UI Datepicker — dark mode */
.adp-dark .ui-datepicker {
  background: var(--adp-surface);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .ui-datepicker .ui-datepicker-header {
  background: var(--adp-surface-2);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .ui-datepicker .ui-datepicker-title {
  color: var(--adp-text);
}

.adp-dark .ui-datepicker .ui-datepicker-prev,
.adp-dark .ui-datepicker .ui-datepicker-next {
  color: var(--adp-text-muted);
}

.adp-dark .ui-datepicker .ui-datepicker-prev:hover,
.adp-dark .ui-datepicker .ui-datepicker-next:hover {
  background: var(--adp-surface);
  border-color: var(--adp-border);
}

.adp-dark .ui-datepicker table {
  color: var(--adp-text);
}

.adp-dark .ui-datepicker th {
  color: var(--adp-text-muted);
}

.adp-dark .ui-datepicker td a,
.adp-dark .ui-datepicker td span {
  color: var(--adp-text);
  background: transparent;
}

.adp-dark .ui-datepicker td a:hover {
  background: var(--adp-surface-2);
  color: var(--adp-text);
}

.adp-dark .ui-datepicker .ui-datepicker-today a,
.adp-dark .ui-datepicker .ui-datepicker-today a:hover {
  background: #1e3a5f;
  color: #93C5FD;
}

.adp-dark .ui-datepicker .ui-state-active,
.adp-dark .ui-datepicker .ui-state-highlight {
  background: #1e3a5f;
  color: #93C5FD;
  border-color: #2d5a9e;
}

.adp-dark .ui-datepicker td.ui-datepicker-other-month a {
  color: var(--adp-text-muted);
}

.adp-dark .ui-widget-content {
  background: var(--adp-surface);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

.adp-dark .ui-widget-header {
  background: var(--adp-surface-2);
  border-color: var(--adp-border);
  color: var(--adp-text);
}

/* Bootstrap modal backdrop — dark mode */
.adp-dark .modal-backdrop {
  background-color: #000;
}

.adp-dark .modal-backdrop.show {
  opacity: 0.7;
}

/* Custom tooth icon — not in Bootstrap Icons font, rendered via inline SVG mask */
.bi-tooth::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.152 0h1.696c.94 0 1.826.204 2.487.677.661.473 1.02 1.176 1.02 2.073 0 .656-.187 1.427-.39 2.24-.203.814-.43 1.695-.53 2.64-.1.946-.047 1.927.27 2.88.318.953.885 1.847 1.818 2.583a.5.5 0 0 1-.62.788c-1.108-.87-1.78-1.949-2.147-3.06-.367-1.11-.41-2.252-.3-3.283.113-1.031.354-1.97.558-2.79.204-.82.378-1.518.378-2.02 0-.563-.21-.94-.582-1.203C8.956 1.15 8.32 1 7.848 1H6.152c-.472 0-1.108.15-1.56.463-.453.312-.74.726-.74 1.336 0 .502.174 1.2.378 2.02.204.82.445 1.759.558 2.79.11 1.03.067 2.172-.3 3.283-.367 1.111-1.04 2.19-2.147 3.06a.5.5 0 0 1-.62-.788c.933-.736 1.5-1.63 1.818-2.583.317-.953.37-1.934.27-2.88-.1-.945-.327-1.826-.53-2.64C3.077 3.177 2.89 2.406 2.89 1.75c0-.897.359-1.6 1.02-2.073C4.57.204 5.212 0 5.152 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.152 0h1.696c.94 0 1.826.204 2.487.677.661.473 1.02 1.176 1.02 2.073 0 .656-.187 1.427-.39 2.24-.203.814-.43 1.695-.53 2.64-.1.946-.047 1.927.27 2.88.318.953.885 1.847 1.818 2.583a.5.5 0 0 1-.62.788c-1.108-.87-1.78-1.949-2.147-3.06-.367-1.11-.41-2.252-.3-3.283.113-1.031.354-1.97.558-2.79.204-.82.378-1.518.378-2.02 0-.563-.21-.94-.582-1.203C8.956 1.15 8.32 1 7.848 1H6.152c-.472 0-1.108.15-1.56.463-.453.312-.74.726-.74 1.336 0 .502.174 1.2.378 2.02.204.82.445 1.759.558 2.79.11 1.03.067 2.172-.3 3.283-.367 1.111-1.04 2.19-2.147 3.06a.5.5 0 0 1-.62-.788c.933-.736 1.5-1.63 1.818-2.583.317-.953.37-1.934.27-2.88-.1-.945-.327-1.826-.53-2.64C3.077 3.177 2.89 2.406 2.89 1.75c0-.897.359-1.6 1.02-2.073C4.57.204 5.212 0 5.152 0z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ---- Extracted from inline style="..." attributes (CSP style-src hardening) ---- */
.s-0a90a8f2{background: var(--adp-amber-50);}
.s-498332ac{background: var(--adp-amber-50); border-bottom: 1px solid var(--adp-amber-200); border-radius: var(--adp-radius-lg) var(--adp-radius-lg) 0 0;}
.s-a086a19e{background: var(--adp-blue-50); border-color: var(--adp-blue-100);}
.s-901b3bc8{background: var(--adp-gray-50); border-top: 2px solid var(--adp-gray-200);}
.s-d1293a09{background: var(--adp-red-50, #FFF5F5); border-bottom: 1px solid var(--adp-red-100, #FED7D7); border-radius: var(--adp-radius-lg) var(--adp-radius-lg) 0 0;}
.s-6be8536e{background: var(--bs-light);}
.s-fb1525d7{background:#0d9488;display:none;}
.s-d3734a06{background:#0d9488;font-size:0.7rem;}
.s-1291f01d{background:#2563eb;color:#fff;border-color:#1d4ed8;}
.s-2dbd5995{background:#495057;}
.s-088361ef{background:#7c3aed;color:#fff;}
.s-efb7206b{background:#C53030;color:#fff}
.s-2caa76d1{background:#FC8181;color:#fff}
.s-d93c95b3{background:#FED7D7;color:#9B2C2C}
.s-97d25ad4{background:#FFF5F5;border-bottom:1px solid #FED7D7;border-radius:var(--adp-radius-lg) var(--adp-radius-lg) 0 0;}
.s-b76c5d7b{background:#e9ecef;color:#333;}
.s-9a4c768a{background:#e9ecef;color:#333;border-color:#ced4da;}
.s-a170b25d{background:#f0f9ff;}
.s-a4d1f05c{background:#f0fdfa;}
.s-92ffe96a{background:#f0fff4;border:1px solid #9AE6B4;}
.s-4d7b54c9{background:#f59e0b;color:#fff;}
.s-8a481e45{background:#f59e0b;color:#fff;border-color:#d97706;}
.s-234696d7{background:#f8fafc;}
.s-ce41701a{background:none;border:none;cursor:pointer;color:#999;font-size:1rem;padding:0;line-height:1;}
.s-aa9ecc8a{background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.3);}
.s-5efa4ca0{background:rgba(255,255,255,0.2); color:#fff; border:1.5px solid rgba(255,255,255,0.35);}
.s-b71e1ab9{background:rgba(255,255,255,0.2);color:#fff;border:1px solid rgba(255,255,255,0.35);}
.s-ccc4afa7{background:rgba(46,134,171,0.12);color:#1d6a8a;font-weight:600;}
.s-4136a402{background:var(--adp-amber-100); color:var(--adp-amber-700);}
.s-84c9764f{background:var(--adp-amber-100);color:var(--adp-amber-700)}
.s-87490dd7{background:var(--adp-amber-500); color:#fff;}
.s-80ca40f8{background:var(--adp-blue-50,#eff6ff);}
.s-65c3e7a4{background:var(--adp-gray-100);border-radius:99px;height:6px;margin-bottom:.25rem;}
.s-5f068ab3{background:var(--adp-gray-100);color:var(--adp-gray-500);}
.s-ab3f56d3{background:var(--adp-gray-100);color:var(--adp-gray-700);font-weight:500}
.s-ca098294{background:var(--adp-gray-50);border-top:1px solid var(--adp-gray-200)}
.s-5c60ebe6{background:var(--adp-gray-50);border-top:2px solid var(--adp-gray-200);font-weight:700;}
.s-38120493{background:var(--adp-gray-50);color:var(--adp-gray-600);}
.s-2c0c6d1f{background:var(--adp-primary);color:#fff;}
.s-78cdf140{background:var(--adp-primary-light,#EBF4FF); color:var(--adp-primary,#2563EB);}
.s-f2392ead{border-bottom:1px solid var(--adp-gray-100);}
.s-a2e44dcd{border-color:transparent;background:transparent;color:var(--adp-gray-400);pointer-events:none;}
.s-2ec13524{border-color:var(--adp-gray-100)!important;}
.s-c2965a8a{border-left-color: #007bff;}
.s-b9d5ad7b{border-left-color: #17a2b8;}
.s-3af4bbbd{border-left-color: #20c997;}
.s-e6adb68e{border-left-color: #28a745;}
.s-b70f6525{border-left-color: #6610f2;}
.s-8068d2eb{border-left-color: #dc3545;}
.s-e8e9916c{border-left-color: #e83e8c;}
.s-328623a1{border-left-color: #fd7e14;}
.s-d788a0ea{border-left-color: #ffc107;}
.s-d6bdcc50{border-left-color:var(--adp-danger);background:#FFF5F5;}
.s-0b0ac4b9{border-left: 4px solid var(--adp-amber-400);}
.s-7184d676{border-left:4px solid var(--adp-blue-400,#60a5fa);}
.s-11626d42{border-left:4px solid var(--adp-blue-500,#3182CE);}
.s-201922e2{border-radius: var(--adp-radius-lg); border: none; background: var(--adp-amber-50); color: var(--adp-amber-700); border-left: 4px solid var(--adp-amber-400);}
.s-89e5748b{border-radius: var(--adp-radius-lg); border: none; box-shadow: var(--adp-shadow-xl);}
.s-f913005c{border-radius:var(--adp-radius);overflow:hidden;}
.s-6e6f7568{border-radius:var(--adp-radius-lg); border:none; background:var(--adp-amber-50); color:var(--adp-amber-700); border-left:4px solid var(--adp-amber-400);}
.s-782acfd7{border-radius:var(--adp-radius-lg);border:none;background:#f0fdf4;color:#15803d;border-left:4px solid #4ade80;}
.s-1dc7e9bf{border-radius:var(--adp-radius-lg);border:none;background:#fef2f2;color:#b91c1c;border-left:4px solid #f87171;}
.s-12ed251b{border-radius:var(--adp-radius-lg);border:none;background:var(--adp-green-50,#f0fdf4);color:var(--adp-green-700,#15803d);border-left:4px solid var(--adp-green-400,#4ade80);}
.s-76ee30f0{border-radius:var(--adp-radius-lg);border:none;background:var(--adp-red-50,#fef2f2);color:var(--adp-red-700,#b91c1c);border-left:4px solid var(--adp-red-400,#f87171);}
.s-163ecea2{border-radius:var(--adp-radius-lg);border:none;box-shadow:var(--adp-shadow-xl);}
.s-cbf68d0e{border-right:1px solid var(--adp-gray-100);}
.s-3af57a12{border-top: 1px solid var(--adp-gray-100);}
.s-39058418{border-top:1px solid var(--adp-gray-100);}
.s-f4f738fc{border:1.5px solid var(--adp-blue-100);}
.s-316ca5bb{border:2px solid #0ea5e9;}
.s-c5be5534{border:none;}
.s-b68207db{clear:both;}
.s-e2239f14{color: #0d6efd;}
.s-7d8ba3b6{color: #dc3545;}
.s-81201c80{color: var(--adp-amber-600);}
.s-e2aa3f0c{color: var(--adp-amber-700);}
.s-8077dbe2{color: var(--adp-amber-700); text-decoration:underline; margin-left:.5rem;}
.s-35a88262{color: var(--adp-gray-600);}
.s-8d6669c9{color: var(--adp-gray-700);}
.s-ee80d520{color: var(--adp-red-500); font-weight: 600;}
.s-6cd15f53{color: var(--adp-red-500); font-weight: 600; white-space:nowrap;}
.s-65edca34{color: var(--adp-red-500); font-weight: 700; font-size: 1.25rem;}
.s-0a827891{color: var(--adp-red-700, #C53030);}
.s-89c90341{color:#06b6d4;}
.s-15be0418{color:#0d9488;}
.s-2f8ca66e{color:#1a8a3a;}
.s-aefb3459{color:#22c55e;}
.s-7b8348a4{color:#2E86AB}
.s-1655473f{color:#3b82f6;}
.s-cf7c1f09{color:#44BBA4}
.s-64f863bb{color:#4a90d9}
.s-b804283a{color:#666;}
.s-8d63b6c7{color:#666;font-size:11px;margin-left:6px;}
.s-749cff35{color:#888;}
.s-7c597066{color:#888;font-size:10px;}
.s-1333dc9f{color:#92400E;}
.s-ba341822{color:#B7791F;}
.s-591901f8{color:#C73E1D}
.s-056ce72a{color:#F5A623}
.s-d652d4fc{color:#aaa;}
.s-e04aeda4{color:#b45309;}
.s-e0a2d1df{color:#ccc;}
.s-953f8fcf{color:#f59e0b;}
.s-2efd6432{color:inherit;text-decoration:none;}
.s-023bb62c{color:var(--adp-amber-700);}
.s-23dfc9be{color:var(--adp-amber-700); text-decoration:underline; margin-left:.4rem;}
.s-f4532821{color:var(--adp-blue-500,#3b82f6);}
.s-90a743d9{color:var(--adp-blue-600);text-decoration:none;}
.s-72f20717{color:var(--adp-color-green,#16a34a);}
.s-f76b4edd{color:var(--adp-danger)}
.s-caacc823{color:var(--adp-danger);}
.s-7b5da3d6{color:var(--adp-gray-400);font-weight:400;}
.s-1f1fcbf0{color:var(--adp-gray-500)}
.s-96ede867{color:var(--adp-gray-500,#6c757d);}
.s-2785b20a{color:var(--adp-gray-500,#6c757d);font-size:18px;margin-bottom:30px;}
.s-ae41c06f{color:var(--adp-gray-700)}
.s-bc750d05{color:var(--adp-green-500,#22c55e);}
.s-8a77e8f5{color:var(--adp-green-600)}
.s-13af406c{color:var(--adp-green-600,#16a34a);}
.s-9342200b{color:var(--adp-green-600,#38a169)}
.s-562db126{color:var(--adp-green-600,#38a169);font-weight:700;}
.s-5893ed2e{color:var(--adp-info)}
.s-fea152f1{color:var(--adp-primary)}
.s-d9571e55{color:var(--adp-primary);}
.s-899db55f{color:var(--adp-primary);font-size:var(--adp-font-size-xs)}
.s-da2bab53{color:var(--adp-primary);margin-bottom:15px;}
.s-904c3a8d{color:var(--adp-red-500)}
.s-0517fa2b{color:var(--adp-red-500);}
.s-788092bb{color:var(--adp-red-500);font-weight:600;}
.s-25ac4d51{color:var(--adp-red-500);font-weight:700;}
.s-f9bcb288{color:var(--adp-red-500, #E53E3E)}
.s-5667b5ff{color:var(--adp-red-600,#dc2626);}
.s-1321f680{color:var(--adp-success)}
.s-ffdee833{color:var(--adp-success);}
.s-8b6d392b{color:var(--adp-teal-500)}
.s-344b550d{color:var(--adp-teal-500);}
.s-2e716f4c{color:var(--adp-teal-500);font-family:monospace;font-size:.85em}
.s-fa0c9fb6{color:var(--adp-teal-500);font-family:monospace;font-size:.85em;margin-left:.5rem}
.s-e63fe969{color:var(--adp-warning)}
.s-51ad3202{cursor: pointer; transition: all 0.2s;}
.s-aeb737c9{cursor:default;}
.s-1bb4b11f{cursor:grab;}
.s-5d72e925{cursor:grab; font-size:0.82rem; user-select:none;}
.s-b202c6d4{cursor:pointer}
.s-58aba575{cursor:pointer;}
.s-53a6f4c1{cursor:pointer;font-size:.85rem;}
.s-3df0a395{display: inline;}
.s-224b51a7{display: none;}
.s-5aa15589{display:block; margin-bottom:.4rem;}
.s-79bbf31d{display:block;margin-bottom:.4rem;font-weight:500;}
.s-5f4bb6f1{display:flex; align-items:center; gap:.75rem;}
.s-3fd07a33{display:flex; align-items:center; justify-content:space-between;}
.s-7457aa39{display:flex;align-items:center;gap:.6rem;padding:.4rem .6rem;background:var(--adp-blue-50,#EBF8FF);border-radius:8px;font-size:.9rem;}
.s-2d68e69a{display:flex;align-items:center;gap:0.25rem;flex-wrap:wrap;}
.s-bc737815{display:flex;align-items:center;gap:6px;}
.s-2a718679{display:inline-flex;align-items:center;gap:.4rem;margin-top:.25rem;font-size:.88rem;color:var(--adp-blue-600);text-decoration:none;font-weight:500;}
.s-bc959b30{display:inline-flex;align-items:center;gap:4px;}
.s-37a35cff{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--adp-gray-700);}
.s-cb458930{display:none}
.s-93b8ea5b{display:none;}
.s-f7692f85{display:none; flex:1 1 0; min-width:0;}
.s-0f0de729{display:none; margin-top:1rem; text-align:center;}
.s-e5fe56f0{display:none; margin-top:6px;}
.s-a51c8552{display:none; padding:0.75rem;}
.s-025b8e63{display:none; text-align:center; padding:40px 20px;}
.s-1b03dacb{display:none;position:absolute;z-index:9999;width:30%;max-height:200px;overflow-y:auto;}
.s-d7ec9edb{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.45);z-index:9999;align-items:center;justify-content:center;}
.s-579052d9{flex-direction:column; align-items:stretch; padding:0;}
.s-43ec803f{flex:1.2; min-width:160px;}
.s-80a2a455{flex:1.4; min-width:170px;}
.s-f8435d21{flex:1;font-size:.9rem;color:#333;}
.s-6d447572{flex:1;height:8px;border-radius:99px;background:linear-gradient(to right,#EBF8FF,#90CDF4,#4299E1,#2B6CB0)}
.s-13598fc1{flex:2}
.s-b28cb14f{font-size: 1.2rem;}
.s-d0f8c0c8{font-size: 1.5rem; font-weight: bold;}
.s-3579e93e{font-size: 10px; color: #999;}
.s-1c2ff3af{font-size: 12pt; margin-top: 10px;}
.s-ca1de63f{font-size: 14pt;}
.s-8f029035{font-size: 14pt; color: #198754;}
.s-5afc7337{font-size: 3rem;}
.s-4b77038a{font-size: 3rem; color: #ccc;}
.s-b0c64075{font-size: 4rem;}
.s-9f1fa8fe{font-size: 4rem; color: #0d6efd;}
.s-500ba4f8{font-size: 4rem; color: #ccc;}
.s-64421442{font-size: 5rem;}
.s-df0f9439{font-size:.65rem;}
.s-1735debf{font-size:.72rem; color:var(--adp-red-500);}
.s-91df7316{font-size:.72rem; text-align:right;}
.s-48389280{font-size:.72rem;color:#6c757d;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.s-f4c7d512{font-size:.72rem;font-weight:600;white-space:nowrap;}
.s-f600f3f0{font-size:.72rem;line-height:1.4;}
.s-ecbbd342{font-size:.73rem;line-height:1.35;}
.s-fde308b4{font-size:.75rem;}
.s-f4b55a49{font-size:.75rem;color:#6c757d;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.s-d57e33f5{font-size:.78rem;}
.s-becb2616{font-size:.7rem;}
.s-a10d0958{font-size:.7rem;color:#6c757d;font-weight:600;text-transform:uppercase;}
.s-2ca45289{font-size:.7rem;line-height:1.4;}
.s-f44fcf55{font-size:.82rem;font-weight:400;color:var(--adp-gray-500);}
.s-43f56b74{font-size:.83rem;}
.s-41801cb3{font-size:.85rem;}
.s-a2924fe1{font-size:.85rem;color:var(--adp-gray-500);margin-bottom:.75rem;}
.s-511861cb{font-size:.875rem;}
.s-d2b8fa50{font-size:.88rem;}
.s-3cfc5dc8{font-size:.8rem;}
.s-422948ab{font-size:.8rem;font-weight:600;white-space:nowrap;}
.s-705d37ff{font-size:.8rem;min-height:1.5rem;}
.s-8f18b464{font-size:0.65rem;}
.s-a831bea1{font-size:0.65rem;display:none;}
.s-39c28d2d{font-size:0.65rem;opacity:0.85;}
.s-2c965077{font-size:0.6rem;}
.s-6160e605{font-size:0.6rem; top:6px; right:6px; min-width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;}
.s-369236b2{font-size:0.6rem; top:6px; right:6px; min-width:17px; height:17px; display:none; align-items:center; justify-content:center; padding:0 4px;}
.s-879cadd5{font-size:0.72rem;}
.s-cfbb4361{font-size:0.75rem;}
.s-19826533{font-size:0.7rem;}
.s-3d33cc25{font-size:0.85rem; color:var(--adp-gray-600);}
.s-67793f04{font-size:0.85rem; color:var(--adp-primary);}
.s-50915cf7{font-size:0.875rem;}
.s-fb27a55d{font-size:0.875rem; color:#1A202C;}
.s-f257e119{font-size:0.8rem;}
.s-9ac7d548{font-size:0.8rem; color:var(--adp-gray-400);}
.s-e5dacb2d{font-size:0.9rem; margin-bottom:0.5rem;}
.s-40a550ea{font-size:1.4rem;}
.s-b6cb5a59{font-size:1.4rem;color:#B7791F;flex-shrink:0;margin-top:.1rem;}
.s-06d51caa{font-size:1.5rem;}
.s-3e1a6c8f{font-size:1.6rem;}
.s-ee6d8678{font-size:1.6rem;font-weight:800;color:#2d3748;}
.s-e2b3aaf4{font-size:10px;color:#555;}
.s-11effa14{font-size:10px;color:#888;margin-bottom:3px;}
.s-c51cb8d3{font-size:10px;color:var(--adp-gray-400);}
.s-6b52bf58{font-size:10px;color:var(--adp-gray-500);letter-spacing:.5px;text-transform:uppercase;}
.s-9bd93d36{font-size:12px;}
.s-d36f0ec4{font-size:15px;font-weight:bold;margin-bottom:12px;}
.s-e4c3541b{font-size:1rem;}
.s-b178ddac{font-size:2.5rem}
.s-9e4641be{font-size:2.5rem; opacity:.35;}
.s-11a6cc16{font-size:2.5rem;color:var(--adp-danger);}
.s-e669d7a4{font-size:2.5rem;color:var(--adp-gray-300)}
.s-d99dfd96{font-size:2.5rem;color:var(--adp-gray-300);}
.s-ba2c5c3e{font-size:2rem;}
.s-aff95d4e{font-size:3rem;color:#ccc;}
.s-af515974{font-size:50px;color:#fff;}
.s-908ae8d1{font-size:8px}
.s-6d8d6153{font-size:9px;}
.s-3af44cdb{font-size:var(--adp-font-size-sm)}
.s-3142b09e{font-size:var(--adp-font-size-sm);font-weight:400}
.s-2c178fb7{font-size:var(--adp-font-size-xs)}
.s-745412bd{font-size:var(--adp-font-size-xs);}
.s-6a254626{font-size:var(--adp-font-size-xs);color:var(--adp-gray-500)}
.s-dc8fb289{font-size:var(--adp-font-size-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--adp-gray-500)}
.s-a46c537f{font-size:var(--adp-font-size-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--adp-gray-500);margin-bottom:.35rem}
.s-db117290{font-weight: 600;}
.s-0010ff67{font-weight:400;font-size:0.85rem;color:var(--adp-danger,#dc3545);}
.s-1e29eefb{font-weight:500}
.s-44265a69{font-weight:500;}
.s-a5d2baa1{font-weight:600;}
.s-26f36c47{font-weight:600;color:var(--adp-gray-800,#1A202C);}
.s-8168ca5d{font-weight:700;font-size:11px;}
.s-358621e0{height: 6px;}
.s-9525cc7a{height:10px;}
.s-59546c0f{height:10px;border-radius:99px;overflow:hidden;}
.s-9cd86d77{height:200px}
.s-b4023803{height:280px;}
.s-eb134b17{height:280px; position:relative;}
.s-6fb86ec7{height:300px;}
.s-b03e5595{height:360px;}
.s-e553a07d{height:420px;}
.s-f6734d1d{height:5px;border-radius:99px;}
.s-89024287{height:6px;}
.s-6a3f24ac{height:6px;border-radius:99px;}
.s-e712c6c6{height:6px;width:60px;}
.s-dba04080{height:80px;object-fit:cover;}
.s-a65de023{line-height:1; font-size:0.75rem;}
.s-1959cba8{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;}
.s-5534b3b3{margin-bottom:16px;}
.s-4906158f{margin-right:4px; opacity:.6;}
.s-bbfebe59{margin-top: 10px; white-space: pre-wrap;}
.s-8ecca844{margin-top: 15px;}
.s-90da2d22{margin-top: 30px; padding: 15px; background: #f8f9fa; border-radius: 5px; font-size: 9pt;}
.s-19af346a{margin-top: 50px; text-align: center; color: #6c757d; font-size: 10px;}
.s-4b7eedc2{margin-top: 5px; font-size: 10pt;}
.s-52c03745{margin-top:.25rem; display:block; width:fit-content}
.s-78f6f2c9{margin-top:12px;}
.s-c12b6ff9{margin-top:14px;font-size:16px;color:#444;}
.s-21ccb4bf{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--adp-gray-100);font-size:.82rem;color:var(--adp-gray-400);}
.s-d93d4aed{margin:.4rem 0 0;font-weight:600;}
.s-3db97814{max-height: 300px; overflow-y: auto;}
.s-a232baf2{max-height: 350px; overflow-y: auto;}
.s-5327c0b1{max-height: 70vh; overflow-y: auto;}
.s-36e31d4d{max-height:130px; overflow-y:auto;}
.s-b533057d{max-height:140px;overflow-y:auto;}
.s-0029e73a{max-height:180px;}
.s-5a0b4a61{max-height:180px;overflow-y:auto;display:none;}
.s-ec10d7a3{max-height:200px;}
.s-5f88cdda{max-height:220px;}
.s-4774aece{max-height:220px;overflow-y:auto;}
.s-fc315c14{max-height:300px; overflow-y:auto; padding-right:4px;}
.s-278099c2{max-height:300px;overflow-y:auto;}
.s-f4b1c0ff{max-height:400px;overflow-y:auto;}
.s-40aa0183{max-height:480px;overflow-y:auto;}
.s-21c75a6a{max-width: 100%; max-height: 400px;}
.s-51177bfc{max-width: 100%; max-height: 400px; display: none;}
.s-51fd1518{max-width: 150px; max-height: 150px;}
.s-2383b5f1{max-width: 450px;}
.s-7b533272{max-width:100%; display:none;}
.s-0a287b54{max-width:110px;}
.s-0b6b41dc{max-width:120px;}
.s-a11e1f82{max-width:240px;}
.s-2c34c898{max-width:300px;}
.s-438051e1{max-width:320px; margin:0 auto;}
.s-498da9fa{max-width:480px;}
.s-d34bf768{max-width:520px;display:block;margin:auto;font-family:inherit;}
.s-03d8b7e6{max-width:800px;display:block;margin:auto;font-family:inherit;}
.s-31d8aa1d{min-height:38px;}
.s-f1d02c8b{min-width: 80px;}
.s-c8419cd8{min-width:120px;}
.s-89ea8774{min-width:130px;}
.s-c860c5b6{min-width:140px;}
.s-a0653300{min-width:155px; max-width:175px;}
.s-25169fd2{min-width:2.5rem}
.s-2a4879f5{min-width:200px; border-radius:12px; border:1px solid #E2E8F0; box-shadow:0 8px 30px rgba(0,0,0,0.12);}
.s-13c741d1{min-width:22px;}
.s-d2d0c32b{min-width:50px;text-align:right;color:var(--adp-gray-500)}
.s-ec59b4b8{opacity:.4}
.s-bcd80787{opacity:.6; margin-right:3px;}
.s-2879e211{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.s-013814b8{padding-top:0;}
.s-2e6c05e6{padding: .75rem 1rem; font-size: .8rem; color: var(--adp-gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;}
.s-a7edf703{padding: .75rem 1rem; font-weight: 700; color: var(--adp-red-500);}
.s-01bf9fc0{padding: 0}
.s-9eb1b8ae{padding:.25rem .6rem;font-size:var(--adp-font-size-xs)}
.s-f584448a{padding:.2rem .6rem;font-size:var(--adp-font-size-xs);border:1px solid var(--adp-gray-300);border-radius:var(--adp-radius-sm);color:var(--adp-primary)}
.s-abe7bf22{padding:.3rem .55rem}
.s-f32bb7da{padding:.3rem .55rem;color:var(--adp-danger)}
.s-db1ff39b{padding:.75rem 1rem;}
.s-70374951{padding:1.25rem 1.25rem 1.25rem 1.5rem;}
.s-8081fb3f{padding:10px 14px;color:#888;font-style:italic;font-size:11px;}
.s-2d423872{padding:1rem 1.25rem;}
.s-cd290153{padding:8px 18px;background:#0d6efd;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;}
.s-ef4b5faf{padding:8px 18px;background:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;margin-left:8px;font-size:13px;}
.s-d2979ede{position:absolute;bottom:-60px;left:-60px;opacity:0.06;}
.s-8770eae9{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.s-4524936d{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.s-f4b59cba{position:absolute;top:-6px;right:-4px;background:#f97316;color:#fff;border-radius:50%;width:16px;height:16px;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #fff;line-height:1;}
.s-c32e94d8{position:absolute;top:-80px;right:-80px;opacity:0.08;}
.s-758f0c73{position:absolute;top:50%;left:50%;transform:translate(-50%,-65%);text-align:center;pointer-events:none;}
.s-b6256bd2{position:fixed;top:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;min-width:280px;max-width:360px;pointer-events:none;}
.s-ff6b3c10{position:relative;height:200px}
.s-ec381af7{position:relative;padding-right:1.1rem;background:#e9ecef;color:#333;border-color:#ced4da;}
.s-93689b71{position:sticky;top:0;z-index:1;}
.s-c7c82ba4{text-align:center;padding:1rem;background:#FFF5F5;border-radius:var(--adp-radius);color:var(--adp-danger);}
.s-7113ed8f{text-align:center;padding:1rem;background:var(--adp-amber-50);border-radius:var(--adp-radius);color:var(--adp-amber-700);}
.s-d9a8e5b6{text-align:center;padding:1rem;background:var(--adp-green-50);border-radius:var(--adp-radius);color:var(--adp-green-600);}
.s-08a0ed40{text-align:right;}
.s-f397b439{text-align:right; color:green;}
.s-116e33d4{text-decoration:none}
.s-8fdce8d5{text-decoration:none;}
.s-da7d987f{text-decoration:none;color:inherit;}
.s-ca25e39c{top: 1rem;}
.s-9ad971b1{top: 20px;}
.s-15610ad8{top:0;z-index:1;}
.s-4f5f61b5{white-space: pre-wrap;}
.s-8b2da0b4{white-space:nowrap;}
.s-c7ee8088{width: 15%;}
.s-f6f6b116{width: 20%;}
.s-90e137e3{width: 32px; height: 32px; line-height: 20px;}
.s-5172a7c4{width: 40%;}
.s-1d8db72a{width: 5%;}
.s-902c6d16{width: 60px;}
.s-40430a3c{width: 70px;}
.s-d7321001{width: auto; display: none;}
.s-6d567387{width:100%}
.s-4c0d995d{width:100%; height:600px; border:none;}
.s-0429d8e5{width:100%;font-size:13px;}
.s-ee0435f7{width:100px}
.s-51346740{width:100px;}
.s-1a30558f{width:110px}
.s-10e8bb83{width:110px;}
.s-7c032f0b{width:12%}
.s-088cf005{width:120px}
.s-db8a217b{width:120px;}
.s-729192c0{width:130px}
.s-6306c189{width:14%}
.s-27e6fc6b{width:14px;height:14px;border-radius:50%;background:#e9ecef;border:1px solid #ced4da;display:inline-block;}
.s-6a40f29b{width:14px;height:14px;border-radius:50%;background:#f59e0b;display:inline-block;}
.s-be99ae25{width:16%}
.s-64fa8f47{width:160px;}
.s-bae1e199{width:18%}
.s-1dfda96a{width:180px}
.s-10082952{width:20%}
.s-b94aef74{width:22%}
.s-c36b2672{width:24%}
.s-3d14175e{width:28px;height:28px;font-size:0.75rem;flex-shrink:0;}
.s-068afcca{width:28px;height:28px;line-height:20px;font-size:12px;text-align:center;}
.s-59c8d6ff{width:30%}
.s-f451bb36{width:32%}
.s-f9357ada{width:32px;height:32px;line-height:20px;text-align:center;}
.s-c04d504d{width:3rem}
.s-aea9c910{width:40%;color:#666;}
.s-e7888e12{width:40px;height:40px;font-size:1rem;}
.s-51b859ab{width:50%;text-align:center;}
.s-9ab095ba{width:50px}
.s-68dba3e7{width:50px;}
.s-8396cf31{width:56px;height:38px;padding:2px;}
.s-aa6b0fd9{width:60px;}
.s-7c850c89{width:72px;height:72px;object-fit:cover;border-radius:50%;border:2px solid var(--adp-blue-100);box-shadow:var(--adp-shadow-sm);}
.s-22f61117{width:8%}
.s-8db8d854{width:80px}
.s-a28ea79e{width:80px;height:80px;background:linear-gradient(135deg,var(--adp-primary) 0%,var(--adp-primary-dark,#4a6cf7) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.s-4f15898a{width:auto}
.s-88f39caf{z-index:11000;}
.s-cb18758d{z-index:9999;}

/* ---- Conditional-class replacements for ternary inline styles (CSP style-src hardening) ---- */
.text-profit-pos{color:var(--adp-blue-600,#3182ce)}
.text-profit-neg{color:var(--adp-red-500)}
.bg-profit-pos{background:var(--adp-blue-50,#ebf8ff)}
.bg-profit-neg{background:var(--adp-red-50,#ebf8ff)}
.kpi-border-pos{border-left-color:#28a745}
.kpi-border-neg{border-left-color:#dc3545}
.kpi-border-warn{border-left-color:#ffc107}
.allergy-border{border-left:4px solid #dc3545;border-radius:8px}
.no-allergy-border{border-left:4px solid #6c757d;border-radius:8px}
.text-overdue{color:var(--adp-red-500);font-weight:600}
.mt-6{margin-top:6px}
.w-54{width:54%}
.w-70{width:70%}
.gender-badge-male{background:var(--adp-blue-100);color:var(--adp-blue-700)}
.gender-badge-female{background:var(--adp-green-50);color:var(--adp-green-600)}

/* ---- adp-ui.js markup classes (was inline style="" in JS strings) ---- */
.adp-modal-content{border-radius:14px;overflow:hidden;}
.adp-modal-title-sm{font-size:1rem;font-weight:700;}
.adp-modal-body-sm{font-size:0.9rem;color:#4A5568;}
.adp-notif-item{white-space:normal;}
.adp-notif-time{font-size:0.68rem;}
.adp-shortcuts-box{background:var(--adp-surface,#fff);border-radius:var(--adp-radius-lg,14px);padding:1.5rem 2rem;min-width:320px;max-width:90vw;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.adp-shortcuts-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.adp-shortcuts-title{font-size:1rem}
.adp-shortcuts-close{background:none;border:none;font-size:1.4rem;cursor:pointer;line-height:1;padding:0}
.adp-shortcuts-table{width:100%;border-collapse:collapse}
.adp-shortcuts-hint{margin-top:.75rem;font-size:.8rem;color:var(--adp-muted,#6c757d)}
.adp-session-box{background:#fff;border-radius:12px;padding:24px;max-width:340px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,.18);}
.adp-session-title{margin:0 0 8px;color:#D69E2E;}
.adp-session-msg{margin:0 0 16px;font-size:.9rem;}
.adp-session-actions{display:flex;gap:8px;}
.hour-heat-bar{height:22px;display:flex;align-items:center;padding:0 8px;transition:var(--adp-transition)}
.hour-heat-label{font-weight:600}
.outstanding-card{border:none;border-radius:var(--adp-radius);box-shadow:var(--adp-shadow-sm);border-left:4px solid transparent;}
.outstanding-amount{font-size:var(--adp-font-size-2xl);font-weight:700;margin:0}
.gender-bar-male{background:var(--adp-info)}
.gender-bar-female{background:var(--adp-success)}
.gender-bar-other{background:var(--adp-gray-300)}
.share-bar{background:var(--adp-primary)}
.share-bar-success{background:var(--adp-success)}
.fs-09rem{font-size:.9rem;}
.impact-color-swatch{display:inline-block;width:32px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.15);}
.impact-badge{font-size:.85rem;padding:.35em .75em;}
.legend-dot-12{display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0;}
.rank-circle-22{display:inline-block;width:22px;height:22px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;text-align:center;line-height:22px;}
.phase-progress-bar{background:var(--adp-green-500);border-radius:99px;height:6px;}
.legend-dot-14{width:14px;height:14px;border-radius:50%;display:inline-block;}
.legend-dot-12-sq{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:4px;}
.notif-badge-shape{font-size:0.6rem;top:6px;right:6px;min-width:17px;height:17px;align-items:center;justify-content:center;padding:0 4px;}

/* ---- CSSOM style-mutation replacements (CSP style-src has no unsafe-inline;
   el.style.x = ... is restricted the same as style="", so these toggle via
   classList instead) ---- */
.adp-scroll-lock{overflow:hidden;}
.adp-fade-out{transition:opacity .4s;opacity:0;}
tr[data-href]{cursor:pointer;}
.adp-shortcut-overlay-backdrop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);}
.adp-session-overlay-backdrop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);}

/* ---- Bootstrap Modal compatibility under strict style-src ----
   Bootstrap's own bundled JS shows/hides .modal via this._element.style.display
   = 'block'/'none' (bootstrap.bundle.js _showElement()/_hideModal()), which CSP
   style-src with no 'unsafe-inline' silently blocks just like any other inline
   style write. Bootstrap *does* still add/remove the .show class via classList
   (unrestricted), so this override reproduces the same visibility using that
   class instead of relying on the blocked inline write - no vendor file patch
   needed. */
.modal.show{display:block!important;}
.s-2efd6432:hover{text-decoration:underline;}

/* ---- check_in_v2 toast (was toast.style.cssText=...) ---- */
.v2-toast-base{background:#fff;border-left:4px solid;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:.65rem 1rem;display:flex;align-items:center;gap:.65rem;pointer-events:all;opacity:0;transform:translateX(20px);transition:opacity .25s,transform .25s;}
.v2-toast-success{border-left-color:#198754;}
.v2-toast-danger{border-left-color:#dc3545;}
.v2-toast-warning{border-left-color:#fd7e14;}
.v2-toast-info{border-left-color:#0d6efd;}
.v2-toast-visible{opacity:1;transform:translateX(0);}
.v2-toast-icon{font-size:1.1rem;}
.v2-toast-icon-success{color:#198754;}
.v2-toast-icon-danger{color:#dc3545;}
.v2-toast-icon-warning{color:#fd7e14;}
.v2-toast-icon-info{color:#0d6efd;}
.fs-075rem{font-size:0.75rem;}
.fs-07rem{font-size:0.7rem;}
.tp-teal-badge{background:#0d9488;}

/* ---- Password strength meter (was strengthBar.style.width/backgroundColor) ---- */
.pw-strength-0{width:0%;background-color:#e9ecef;}
.pw-strength-1{width:20%;background-color:#dc3545;}
.pw-strength-2{width:40%;background-color:#fd7e14;}
.pw-strength-3{width:60%;background-color:#ffc107;}
.pw-strength-4{width:80%;background-color:#28a745;}
.pw-strength-5{width:100%;background-color:#28a745;}
.cal-loading{opacity:0.5;pointer-events:none;}
.flash-success{background:#198754!important;transition:background 0.3s;}
.apv-toggle-icon-rotated{transform:rotate(180deg);}
.signature-canvas-height{height:200px;}
.pt-tooth-dimmed{opacity:0.5;}

/* ---- Chart.js compatibility under strict style-src ----
   Chart.js's internal retina-scaling code (chart.umd.min.js) does
   canvas.style.height = ...; canvas.style.width = ...; on every render,
   same restricted-by-CSP pattern as Bootstrap Modal. That write silently
   no-ops under style-src with no 'unsafe-inline' (chart resolution/redraw
   is unaffected - that's controlled by canvas.width/height content
   attributes, not CSP-restricted), but with no CSS fallback the canvas's
   display box would default to its full backing-buffer pixel size (often
   2-3x too large on retina/high-DPI screens) since nothing scales it back
   down to the intended CSS size. This caps it defensively. */
canvas:not(.signature-canvas-height){max-width:100%;}

/* --------------------------------------------------------------------------
   16. Guided Tour Popovers (driver.js branding — see assets/js/adp-tour.js,
   which sets popoverClass: 'adp-tour-popover' on every tour instance)
   -------------------------------------------------------------------------- */
.driver-popover.adp-tour-popover {
  font-family: var(--adp-font-sans);
  border-radius: var(--adp-radius-md);
  box-shadow: var(--adp-shadow-xl);
  padding: 1.125rem 1.25rem;
  border-top: 4px solid var(--adp-primary);
}

.adp-tour-popover .driver-popover-title {
  font: 700 var(--adp-font-size-lg)/1.3 var(--adp-font-sans);
  color: var(--adp-gray-800);
}

.adp-tour-popover .driver-popover-description {
  font: 400 var(--adp-font-size-sm)/1.5 var(--adp-font-sans);
  color: var(--adp-gray-600);
}

.adp-tour-popover .driver-popover-progress-text {
  font-size: var(--adp-font-size-xs);
  color: var(--adp-gray-500);
}

.adp-tour-popover .driver-popover-close-btn {
  color: var(--adp-gray-400);
}

.adp-tour-popover .driver-popover-close-btn:hover,
.adp-tour-popover .driver-popover-close-btn:focus {
  color: var(--adp-gray-700);
}

.adp-tour-popover .driver-popover-footer button {
  font: 500 var(--adp-font-size-sm)/1 var(--adp-font-sans);
  border-radius: var(--adp-radius-sm);
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--adp-gray-300);
  background: #fff;
  color: var(--adp-gray-700);
  text-shadow: none;
  transition: var(--adp-transition);
}

.adp-tour-popover .driver-popover-footer button:hover,
.adp-tour-popover .driver-popover-footer button:focus {
  background: var(--adp-gray-100);
}

.adp-tour-popover .driver-popover-footer .driver-popover-next-btn {
  background: var(--adp-primary);
  border-color: var(--adp-primary);
  color: #fff;
}

.adp-tour-popover .driver-popover-footer .driver-popover-next-btn:hover,
.adp-tour-popover .driver-popover-footer .driver-popover-next-btn:focus {
  background: var(--adp-blue-500);
  border-color: var(--adp-blue-500);
}