/* ==========================================================================
   Smart Appointment Scheduler — shared design system (Metronic-inspired)
   Design tokens + reusable component classes layered on top of the vendor
   Bootstrap template (styles.css). Additive only: existing Bootstrap classes
   (.card, .btn, .badge, .table, ...) keep working unchanged; "sas-*" classes
   are meant to be added alongside them, not replace them.

   Every custom property already in use elsewhere (blade views, inline
   scripts) keeps its original name here — only values are refined and new
   tokens/components are added, so nothing downstream breaks.
   ========================================================================== */

:root {
  /* Primary ramp — "Ichelon Enterprise" sapphire blue, fixed for decorative
     surfaces (gradients, chart palettes, soft/light buttons, subtle tints)
     that shouldn't shift with per-clinic branding. Anything that must
     rebrand per clinic uses --bs-primary / --sas-primary (single value),
     overridden in layouts/app.blade.php. */
  --sas-primary-25:  #f5f9ff;
  --sas-primary-50:  #eff6ff;
  --sas-primary-100: #dbeafe;
  --sas-primary-200: #bfdbfe;
  --sas-primary-300: #93c5fd;
  --sas-primary-400: #60a5fa;
  --sas-primary-500: #3b82f6;
  --sas-primary-600: #2563eb;
  --sas-primary-700: #1d4ed8;
  --sas-primary-800: #1e40af;
  --sas-primary-900: #1e3a8a;

  /* Current brand accent — single override point for per-clinic white-label.
     Defaults to the primary-600 ramp (the sapphire anchor); layouts/app.blade.php
     overrides --bs-primary/--sas-primary directly, this token tracks it for
     anything authored against --sas-primary specifically. */
  --sas-primary: var(--sas-primary-600);

  /* Neutrals — Tailwind slate ramp (Ichelon Enterprise house neutral) */
  --sas-gray-25:  #fbfcfe;
  --sas-gray-50:  #f8fafc;
  --sas-gray-100: #f1f5f9;
  --sas-gray-200: #e2e8f0;
  --sas-gray-300: #cbd5e1;
  --sas-gray-400: #94a3b8;
  --sas-gray-500: #64748b;
  --sas-gray-600: #475569;
  --sas-gray-700: #334155;
  --sas-gray-800: #1e293b;
  --sas-gray-900: #0f172a;

  /* Semantic — formalizes the -subtle pairing already dominant in the app */
  --sas-success: #059669; --sas-success-subtle: #ecfdf5; --sas-success-emphasis: #047857;
  --sas-warning: #d97706; --sas-warning-subtle: #fffbeb; --sas-warning-emphasis: #92400e;
  --sas-danger:  #dc2626; --sas-danger-subtle:  #fef2f2; --sas-danger-emphasis:  #b91c1c;
  --sas-info:    #2563eb; --sas-info-subtle:    #eff6ff; --sas-info-emphasis:    #1d4ed8;

  /* Accent — violet, reserved for a single special surface at a time (never
     competes with the sapphire primary). First use: money-moving audit
     events and the audit/security module's icon accent. */
  --sas-accent: #7c3aed; --sas-accent-subtle: #f5f3ff; --sas-accent-emphasis: #6d28d9;

  /* Radius scale — premium SaaS pass: chips 6px, controls 10px, cards 16px, surfaces 20px max, never pill */
  --sas-radius-sm: .375rem;
  --sas-radius-md: .625rem;
  --sas-radius-lg: 1rem;
  --sas-radius-xl: 1rem;
  --sas-radius-2xl: 1.25rem;

  /* Shadow scale — soft, layered elevation (defined edge + a real but gentle shadow) */
  --sas-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --sas-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --sas-shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
  --sas-shadow-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04);
  --sas-shadow-float: 0 20px 40px -12px rgba(15, 23, 42, .16), 0 6px 12px -4px rgba(15, 23, 42, .06);
  --sas-shadow-brand: 0 1px 2px rgba(37, 99, 235, .05);
  --sas-shadow-brand-lg: 0 8px 20px -6px rgba(37, 99, 235, .35);

  /* Soft gradients — used sparingly: hero surfaces, icon tiles, chart fills, focal accents */
  --sas-gradient-brand: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
  --sas-gradient-brand-soft: linear-gradient(135deg, var(--sas-primary-50) 0%, var(--sas-primary-100) 100%);
  --sas-gradient-success-soft: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  --sas-gradient-warning-soft: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  --sas-gradient-danger-soft: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  --sas-gradient-mesh: radial-gradient(ellipse 80% 60% at 15% -10%, rgba(59, 130, 246, .16), transparent 60%),
                       radial-gradient(ellipse 60% 50% at 100% 0%, rgba(124, 58, 237, .08), transparent 55%);

  /* Glass — reserved for the sticky topbar-on-scroll and floating overlays only */
  --sas-glass-bg: rgba(255, 255, 255, .78);
  --sas-glass-border: rgba(226, 232, 240, .8);
  --sas-glass-blur: saturate(180%) blur(14px);

  /* Spacing scale (8px grid) */
  --sas-space-1: .25rem;
  --sas-space-2: .5rem;
  --sas-space-3: .75rem;
  --sas-space-4: 1rem;
  --sas-space-5: 1.25rem;
  --sas-space-6: 1.5rem;
  --sas-space-8: 2rem;
  --sas-space-10: 2.5rem;

  /* Type scale — Caption 13 / Body 15 / Card 18 / Section 24 / Page title 34 */
  --sas-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sas-fs-xs: .72rem;
  --sas-fs-sm: .82rem;
  --sas-fs-base: .9375rem;
  --sas-fs-lg: 1.125rem;
  --sas-fs-xl: 1.375rem;
  --sas-fs-2xl: 1.75rem;
  --sas-fs-3xl: 2.125rem;

  /* Motion */
  --sas-ease: cubic-bezier(.4, 0, .2, 1);
  --sas-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* --------------------------------------------------------------------
     Bootstrap native palette override — the vendor theme (styles.css)
     hardcodes its own --bs-* variables (old Metronic purple/teal/violet).
     Every plain Bootstrap class (.btn-primary, .badge-success, .alert-*,
     .text-info, .border-primary, ...) reads --bs-*, not --sas-*, so it
     must be repointed here too or raw Bootstrap components stay unthemed.
     -------------------------------------------------------------------- */
  --bs-primary: var(--sas-primary-600);
  --bs-primary-rgb: 37, 99, 235;
  --bs-primary-text-emphasis: var(--sas-primary-900);
  --bs-primary-bg-subtle: var(--sas-primary-50);
  --bs-primary-border-subtle: var(--sas-primary-200);

  --bs-secondary: var(--sas-gray-700);
  --bs-secondary-rgb: 51, 65, 85;
  --bs-secondary-text-emphasis: var(--sas-gray-900);
  --bs-secondary-bg-subtle: var(--sas-gray-100);
  --bs-secondary-border-subtle: var(--sas-gray-300);

  --bs-success: var(--sas-success);
  --bs-success-rgb: 5, 150, 105;
  --bs-success-text-emphasis: #065f46;
  --bs-success-bg-subtle: var(--sas-success-subtle);
  --bs-success-border-subtle: #a7f3d0;

  --bs-info: var(--sas-info);
  --bs-info-rgb: 37, 99, 235;
  --bs-info-text-emphasis: var(--sas-primary-900);
  --bs-info-bg-subtle: var(--sas-info-subtle);
  --bs-info-border-subtle: var(--sas-primary-200);

  --bs-warning: var(--sas-warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-text-emphasis: #78350f;
  --bs-warning-bg-subtle: var(--sas-warning-subtle);
  --bs-warning-border-subtle: #fde68a;

  --bs-danger: var(--sas-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #7f1d1d;
  --bs-danger-bg-subtle: var(--sas-danger-subtle);
  --bs-danger-border-subtle: #fecaca;

  --bs-light: var(--sas-gray-100);
  --bs-light-rgb: 241, 245, 249;
  --bs-light-bg-subtle: var(--sas-gray-50);
  --bs-light-border-subtle: var(--sas-gray-200);

  --bs-dark: var(--sas-gray-900);
  --bs-dark-rgb: 15, 23, 42;
  --bs-dark-bg-subtle: var(--sas-gray-100);
  --bs-dark-border-subtle: var(--sas-gray-300);

  --bs-gray: var(--sas-gray-500);
  --bs-gray-rgb: 100, 116, 139;

  --bs-body-font-family: var(--sas-font-sans);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--sas-font-sans);
  color: var(--sas-gray-800);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'ss02';
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--sas-font-sans);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sas-gray-900);
}

a { color: var(--sas-primary); }
a:hover { color: var(--sas-primary-700); }

::selection { background: var(--sas-primary-200); }

/* --------------------------------------------------------------------------
   Buttons — base refinement + Metronic-style soft/light variants
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--sas-radius-md);
  font-weight: 600;
  font-size: var(--sas-fs-sm);
  letter-spacing: -.005em;
  transition: transform .12s var(--sas-ease), box-shadow .18s var(--sas-ease), background-color .15s var(--sas-ease), border-color .15s var(--sas-ease);
}
.btn-sm { border-radius: var(--sas-radius-md); }
.btn-lg { border-radius: var(--sas-radius-lg); }

.btn-primary {
  box-shadow: var(--sas-shadow-brand);
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(.94);
}

.btn:active {
  transform: scale(.97);
}
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

/* Soft/"light" buttons — tinted background, colored text, no border.
   Primary uses the fixed decorative ramp (not the tenant-brand color) so it
   always reads as a calm neutral-brand accent even on white-labeled clinics. */
.btn-light-primary { background: var(--sas-primary-50); color: var(--sas-primary-600); border: 0; }
.btn-light-primary:hover, .btn-light-primary:focus { background: var(--sas-primary-100); color: var(--sas-primary-700); }

.btn-light-success { background: var(--sas-success-subtle); color: var(--sas-success-emphasis); border: 0; }
.btn-light-success:hover, .btn-light-success:focus { background: #d7f7e3; color: var(--sas-success-emphasis); }

.btn-light-warning { background: var(--sas-warning-subtle); color: var(--sas-warning-emphasis); border: 0; }
.btn-light-warning:hover, .btn-light-warning:focus { background: #fef0c2; color: var(--sas-warning-emphasis); }

.btn-light-danger { background: var(--sas-danger-subtle); color: var(--sas-danger-emphasis); border: 0; }
.btn-light-danger:hover, .btn-light-danger:focus { background: #fbd7e2; color: var(--sas-danger-emphasis); }

.btn-light-info { background: var(--sas-info-subtle); color: var(--sas-info-emphasis); border: 0; }
.btn-light-info:hover, .btn-light-info:focus { background: #e6d9fb; color: var(--sas-info-emphasis); }

.btn-light-secondary, .btn-light { background: var(--sas-gray-100); color: var(--sas-gray-700); border: 0; }
.btn-light-secondary:hover, .btn-light:hover { background: var(--sas-gray-200); color: var(--sas-gray-800); }

.btn-light-dark { background: var(--sas-gray-200); color: var(--sas-gray-900); border: 0; }
.btn-light-dark:hover, .btn-light-dark:focus { background: var(--sas-gray-300); color: var(--sas-gray-900); }

.btn-icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-action-gray { background: var(--sas-gray-100); color: var(--sas-gray-700); border: 0; }
.btn-action-gray:hover { background: var(--sas-gray-200); color: var(--sas-gray-900); }

/* --------------------------------------------------------------------------
   Badges / labels
   -------------------------------------------------------------------------- */
.badge {
  font-weight: 600;
  font-size: var(--sas-fs-xs);
  letter-spacing: .01em;
  padding: .4em .65em;
  border-radius: var(--sas-radius-sm);
}
.badge.rounded-pill { border-radius: var(--sas-radius-sm); } /* Ichelon: chips never pill */
.sas-badge-icon i { margin-right: .3rem; font-size: .85em; }

/* Soft/"light" badges — Metronic's `badge-light-{color}` label convention */
.badge-light-primary { background: var(--sas-primary-50); color: var(--sas-primary-600); }
.badge-light-success { background: var(--sas-success-subtle); color: var(--sas-success-emphasis); }
.badge-light-warning { background: var(--sas-warning-subtle); color: var(--sas-warning-emphasis); }
.badge-light-danger  { background: var(--sas-danger-subtle);  color: var(--sas-danger-emphasis); }
.badge-light-info    { background: var(--sas-info-subtle);    color: var(--sas-info-emphasis); }
.badge-light-secondary, .badge-light { background: var(--sas-gray-100); color: var(--sas-gray-700); }
.badge-light-dark { background: var(--sas-gray-200); color: var(--sas-gray-900); }
.badge-light-accent { background: var(--sas-accent-subtle); color: var(--sas-accent-emphasis); }

/* Raw bg-{color}-subtle / text-{color} utilities — Bootstrap only ships these
   for its own theme colors, but x-badge-status/x-stat-widget accept any
   color name, so "accent" needs its own pair to be usable the same way. */
.bg-accent-subtle { background-color: var(--sas-accent-subtle) !important; }
.text-accent { color: var(--sas-accent-emphasis) !important; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--sas-gray-100);
  border-radius: var(--sas-radius-lg);
  box-shadow: var(--sas-shadow-sm);
  transition: box-shadow .2s var(--sas-ease), border-color .2s var(--sas-ease);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--sas-gray-100);
  font-weight: 700;
  padding: var(--sas-space-4) var(--sas-space-5);
}
.card-body { padding: var(--sas-space-5); }
.card-footer {
  background: transparent;
  border-top: 1px solid var(--sas-gray-100);
}

.sas-card {
  border: 1px solid var(--sas-gray-100);
  border-radius: var(--sas-radius-lg);
  box-shadow: var(--sas-shadow-sm);
}

.sas-card-hover {
  transition: transform .22s var(--sas-ease), box-shadow .22s var(--sas-ease), border-color .22s var(--sas-ease);
}
.sas-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--sas-shadow-float);
  border-color: var(--sas-gray-200);
}
@media (prefers-reduced-motion: reduce) {
  .sas-card-hover:hover { transform: none; }
}

/* Hero surface — soft brand gradient + a faint radial mesh highlight, never a hard glossy sheen */
.sas-card-hero {
  border: 0;
  color: #fff;
  background: var(--sas-gradient-brand);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sas-shadow-brand-lg);
}
.sas-card-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 100% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%);
  pointer-events: none;
}
.sas-card-hero > * { position: relative; z-index: 2; }

/* Glass surface — reserved for the topbar-on-scroll state and floating command palette */
.sas-glass {
  background: var(--sas-glass-bg);
  -webkit-backdrop-filter: var(--sas-glass-blur);
  backdrop-filter: var(--sas-glass-blur);
  border-color: var(--sas-glass-border) !important;
}

/* Card header with a trailing actions row ("toolbar") — the recurring
   title + filter/action-buttons pattern across index pages. */
.sas-card-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sas-space-2);
}
.sas-card-toolbar .sas-card-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sas-space-2);
}

/* Compact button-group toggle used inside card toolbars (e.g. chart type switch) */
.sas-chart-toggle .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .55rem; font-size: .78rem; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table thead th {
  text-transform: uppercase;
  font-size: var(--sas-fs-xs);
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--sas-gray-500);
  background: var(--sas-gray-25);
  border-bottom: 1px solid var(--sas-gray-100);
  white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .85rem .9rem; }
.table-hover > tbody > tr:hover > * {
  background-color: var(--sas-primary-25);
}
.table td { color: var(--sas-gray-800); vertical-align: middle; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-label {
  font-weight: 600;
  font-size: var(--sas-fs-sm);
  color: var(--sas-gray-700);
  margin-bottom: .4rem;
}
.form-control, .form-select {
  border-radius: var(--sas-radius-md);
  border-color: var(--sas-gray-200);
  font-size: var(--sas-fs-base);
  padding: .55rem .85rem;
}
.form-control:hover, .form-select:hover { border-color: var(--sas-gray-300); }
.form-control:focus, .form-select:focus {
  border-color: var(--sas-primary);
  box-shadow: 0 0 0 .2rem var(--sas-primary-100);
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  box-shadow: 0 0 0 .2rem var(--sas-danger-subtle);
}
.form-control.is-valid:focus, .form-select.is-valid:focus {
  box-shadow: 0 0 0 .2rem var(--sas-success-subtle);
}
.form-text {
  font-size: var(--sas-fs-xs);
  color: var(--sas-gray-500);
}
.invalid-feedback { font-size: var(--sas-fs-xs); font-weight: 500; }
.form-check-input:checked {
  background-color: var(--sas-primary);
  border-color: var(--sas-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 .2rem var(--sas-primary-100);
}

/* --------------------------------------------------------------------------
   Outline field — plain label-above-input, bold label + simple bordered box.
   No floating animation, no notch — label is a normal block element above
   the input. Markup: resources/views/components/outline-field.blade.php
   (fieldset/legend elements it still emits are unused here and hidden).
   -------------------------------------------------------------------------- */
.sas-outline-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.sas-outline-field__label {
  order: -1;
  font-weight: 700;
  font-size: var(--sas-fs-sm);
  color: var(--sas-gray-900);
}
.sas-outline-field__fieldset {
  display: none;
}
.sas-outline-field__input {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--sas-gray-300);
  border-radius: var(--sas-radius-md);
  outline: none;
  padding: .55rem .85rem;
  font-size: var(--sas-fs-base);
  color: var(--sas-gray-800);
  transition: border-color .15s var(--sas-ease), box-shadow .15s var(--sas-ease);
}
.sas-outline-field__input::placeholder {
  color: var(--sas-gray-400);
}
textarea.sas-outline-field__input {
  resize: vertical;
  min-height: 5.5rem;
}
.sas-outline-field:hover .sas-outline-field__input {
  border-color: var(--sas-gray-400);
}
.sas-outline-field__input:focus {
  border-color: var(--sas-primary);
  box-shadow: 0 0 0 .2rem var(--sas-primary-100);
}
.sas-outline-field__input:disabled {
  background: var(--sas-gray-50);
  color: var(--sas-gray-400);
}
.sas-outline-field.is-invalid .sas-outline-field__input {
  border-color: var(--sas-danger);
}
.sas-outline-field.is-invalid .sas-outline-field__input:focus {
  box-shadow: 0 0 0 .2rem var(--sas-danger-subtle);
}

/* Trailing icon (static) / show-password toggle (button) — .fieldset is
   display:none and contributes no height, so the input's bottom edge lines
   up with the column's own bottom edge; positioning from `bottom` here
   keeps the icon aligned with the input regardless of label wrapping. */
.sas-outline-field.has-trailing-icon .sas-outline-field__input { padding-right: 2.6rem; }
.sas-outline-field__icon,
.sas-outline-field__icon-btn {
  position: absolute;
  right: .75rem;
  bottom: .55rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  color: var(--sas-gray-400);
}
.sas-outline-field__icon-btn {
  border: 0;
  background: transparent;
  padding: 0 .1rem;
  cursor: pointer;
  transition: color .15s var(--sas-ease);
}
.sas-outline-field__icon-btn:hover { color: var(--sas-gray-600); }
.sas-outline-field { position: relative; }

/* --------------------------------------------------------------------------
   Alerts / toasts
   -------------------------------------------------------------------------- */
.alert {
  border: 0;
  border-radius: var(--sas-radius-lg);
  font-size: var(--sas-fs-sm);
}
.toast {
  border: 0;
  border-radius: var(--sas-radius-lg);
  box-shadow: var(--sas-shadow-md);
}
.toast-header {
  background: transparent;
  border-bottom: 1px solid var(--sas-gray-100);
  border-radius: var(--sas-radius-lg) var(--sas-radius-lg) 0 0;
}

/* --------------------------------------------------------------------------
   Dropdowns / modals / pagination
   -------------------------------------------------------------------------- */
.dropdown-menu {
  border: 0;
  border-radius: var(--sas-radius-md);
  box-shadow: var(--sas-shadow-md);
  padding: .5rem;
}
.dropdown-item {
  border-radius: var(--sas-radius-sm);
  padding: .5rem .75rem;
  font-size: var(--sas-fs-sm);
  font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--sas-primary-50);
  color: var(--sas-primary-700);
}
.dropdown-item.text-danger:hover { background: var(--sas-danger-subtle); }

.modal-content {
  border: 0;
  border-radius: var(--sas-radius-lg);
  box-shadow: var(--sas-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--sas-gray-100); }
.modal-footer { border-top: 1px solid var(--sas-gray-100); }

.pagination .page-link {
  border: 0;
  margin: 0 .15rem;
  border-radius: var(--sas-radius-sm);
  color: var(--sas-gray-700);
  font-weight: 600;
  font-size: var(--sas-fs-sm);
}
.pagination .page-item.active .page-link {
  background: var(--sas-primary);
  color: #fff;
  box-shadow: var(--sas-shadow-brand);
}
.pagination .page-link:hover { background: var(--sas-gray-100); }

/* --------------------------------------------------------------------------
   Avatars / symbols
   -------------------------------------------------------------------------- */
.sas-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--sas-primary-50);
  color: var(--sas-primary-600);
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.sas-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sas-avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.sas-avatar-md { width: 40px; height: 40px; font-size: .85rem; }
.sas-avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   Badges — small semantic icon glyph alongside the dominant `-subtle` color
   convention, so status is never conveyed by color alone.
   -------------------------------------------------------------------------- */
.sas-empty-state {
  text-align: center;
  color: var(--sas-gray-500);
  padding: 3rem 1rem;
}
.sas-empty-state__ring {
  width: 56px;
  height: 56px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sas-gray-50);
  border: 1px solid var(--sas-gray-100);
}
.sas-empty-state__ring i {
  font-size: 1.4rem;
  color: var(--sas-gray-400);
}
.sas-empty-state strong {
  display: block;
  font-size: var(--sas-fs-base);
  color: var(--sas-gray-700);
  font-weight: 600;
  margin-bottom: .2rem;
}
.sas-empty-state .small { color: var(--sas-gray-500); }

/* --------------------------------------------------------------------------
   Chart slot — reserves height and shows a shimmer until ApexCharts fills it,
   so charts never cause a layout jump on load.
   -------------------------------------------------------------------------- */
.sas-chart-slot { min-height: var(--sas-chart-h, 260px); }
.sas-chart-slot:empty {
  position: relative;
  overflow: hidden;
  background: var(--sas-gray-50);
  border-radius: var(--sas-radius-md);
}
.sas-chart-slot:empty::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  background-size: 200% 100%;
  animation: sasShimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sas-chart-slot:empty::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Skeleton loaders — for client-side-rendered content (charts, calendar)
   -------------------------------------------------------------------------- */
.sas-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--sas-gray-100);
  border-radius: var(--sas-radius-md);
}
.sas-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  background-size: 200% 100%;
  animation: sasShimmer 1.4s ease-in-out infinite;
}
@keyframes sasShimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sas-skeleton::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Row-actions dropdown — replaces multi-button table rows
   -------------------------------------------------------------------------- */
.sas-dropdown-actions .btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.sas-dropdown-actions .dropdown-menu {
  min-width: 11rem;
}
.sas-dropdown-actions .dropdown-item i { width: 18px; text-align: center; margin-right: .5rem; }
.sas-dropdown-actions form { margin: 0; }
.sas-dropdown-actions form .dropdown-item { width: 100%; text-align: left; border: 0; background: none; }

/* --------------------------------------------------------------------------
   Micro-interactions
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--sas-primary-500);
  outline-offset: 2px;
}

.sas-pulse {
  animation: sasPulse 1.6s ease-in-out infinite;
}
@keyframes sasPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .45); }
  50% { box-shadow: 0 0 0 .5rem rgba(220, 53, 69, 0); }
}

.sas-count { font-variant-numeric: tabular-nums; }

/* Staggered fade/slide-in for card grids on page load (CSS-only, capped so
   long lists don't produce absurd cumulative delay). */
.sas-stagger > * {
  opacity: 0;
  animation: sasFadeUp .45s var(--sas-ease) forwards;
}
.sas-stagger > *:nth-child(1) { animation-delay: .02s; }
.sas-stagger > *:nth-child(2) { animation-delay: .06s; }
.sas-stagger > *:nth-child(3) { animation-delay: .10s; }
.sas-stagger > *:nth-child(4) { animation-delay: .14s; }
.sas-stagger > *:nth-child(5) { animation-delay: .18s; }
.sas-stagger > *:nth-child(6) { animation-delay: .22s; }
.sas-stagger > *:nth-child(n+7) { animation-delay: .26s; }
@keyframes sasFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sas-stagger > * { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Plugin re-theming — DataTables, Flatpickr, FullCalendar
   (ApexCharts is configured per-page via inline JS options instead, since it
   has no separate stylesheet to override.)
   -------------------------------------------------------------------------- */

/* DataTables — search box / length select / pagination controls */
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--sas-radius-md);
  border: 1px solid var(--sas-gray-200);
  padding: .4rem .75rem;
  margin-left: .5rem;
}
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--sas-primary);
  box-shadow: 0 0 0 .2rem var(--sas-primary-100);
}
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--sas-radius-sm);
  border: 1px solid var(--sas-gray-200);
  padding: .25rem .5rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { font-size: var(--sas-fs-sm); color: var(--sas-gray-600); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--sas-radius-sm) !important;
  border: 0 !important;
  margin: 0 .15rem !important;
  color: var(--sas-gray-700) !important;
  font-weight: 600;
  font-size: var(--sas-fs-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 30px;
  height: 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 .5rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--sas-primary) !important;
  color: #fff !important;
  box-shadow: var(--sas-shadow-brand);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: var(--sas-gray-100) !important;
  color: var(--sas-gray-900) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--sas-gray-300) !important;
  cursor: default;
}
/* Bottom info + pagination row — comfortable padding so it reads as part of
   the card, not raw plugin markup bolted underneath the table. */
.dataTables_wrapper {
  padding: 0 var(--sas-space-2) var(--sas-space-2);
}
.dataTables_wrapper .row:last-child {
  align-items: center;
  padding: var(--sas-space-3) var(--sas-space-3) 0;
}

/* Flatpickr */
.flatpickr-calendar {
  border-radius: var(--sas-radius-lg);
  box-shadow: var(--sas-shadow-md);
  border: 0;
  font-family: var(--sas-font-sans);
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--sas-primary);
  border-color: var(--sas-primary);
}
.flatpickr-day.today { border-color: var(--sas-primary); }
.flatpickr-day:hover { background: var(--sas-primary-50); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays { background: #fff; }
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover { background: var(--sas-primary-50); }

/* FullCalendar */
.fc {
  font-family: var(--sas-font-sans);
  --fc-border-color: var(--sas-gray-100);
  --fc-today-bg-color: var(--sas-primary-25);
  --fc-neutral-bg-color: var(--sas-gray-50);
  --fc-page-bg-color: #fff;
}
.fc .fc-toolbar-title { font-size: var(--sas-fs-xl); font-weight: 800; color: var(--sas-gray-900); }
.fc .fc-button {
  border-radius: var(--sas-radius-sm) !important;
  background: var(--sas-gray-100) !important;
  border: 0 !important;
  color: var(--sas-gray-700) !important;
  font-weight: 600;
  text-transform: capitalize;
  box-shadow: none !important;
}
.fc .fc-button:hover { background: var(--sas-gray-200) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--sas-primary) !important;
  color: #fff !important;
}
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today { background: var(--sas-primary-25); }
.fc-event {
  border-radius: var(--sas-radius-sm);
  border: 0;
  font-size: var(--sas-fs-xs);
  font-weight: 600;
  padding: 1px 4px;
}

/* --------------------------------------------------------------------------
   Star rating input — used by patient-facing feedback forms
   -------------------------------------------------------------------------- */
.sas-star-rating__stars {
  gap: .35rem;
}
.sas-star-rating__star {
  border: 0;
  background: transparent;
  padding: .2rem;
  cursor: pointer;
  color: var(--sas-gray-300);
  font-size: 2rem;
  line-height: 1;
  transition: color .15s var(--sas-ease), transform .15s var(--sas-ease);
}
.sas-star-rating__star:hover,
.sas-star-rating__star:focus-visible {
  transform: scale(1.12);
}
.sas-star-rating__star.is-filled {
  color: #f59e0b;
}
.sas-star-rating__label {
  margin-top: .5rem;
  font-weight: 600;
  font-size: var(--sas-fs-sm);
  min-height: 1.2em;
  color: var(--sas-gray-400);
}
.sas-star-rating__label.is-set {
  color: var(--sas-gray-800);
}

/* --------------------------------------------------------------------------
   Rating breakdown bars (reviews dashboard)
   -------------------------------------------------------------------------- */
.sas-rating-bar__track {
  height: 8px;
  background: var(--sas-gray-100);
  border-radius: var(--sas-radius-sm);
  overflow: hidden;
}
.sas-rating-bar__fill {
  height: 100%;
  background: var(--sas-primary);
  border-radius: var(--sas-radius-sm);
  transition: width .4s var(--sas-ease);
}

/* --------------------------------------------------------------------------
   Table toolbar — the recurring search + filter-selects + date-range row
   above a data table. One shared pattern so every index page (audit,
   appointments, patients, ...) can reuse it instead of hand-rolling layout.
   -------------------------------------------------------------------------- */
.sas-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: var(--sas-space-4) var(--sas-space-5);
  border-bottom: 1px solid var(--sas-gray-100);
}
.sas-table-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.sas-table-toolbar .form-select,
.sas-table-toolbar .sas-daterange-btn {
  width: auto;
  min-width: 9rem;
}
.sas-table-toolbar__search {
  position: relative;
  margin-left: auto;
  width: 240px;
  max-width: 100%;
}
.sas-table-toolbar__search i {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sas-gray-400);
  font-size: .85rem;
  pointer-events: none;
}
.sas-table-toolbar__search input {
  padding-left: 2.1rem;
}
.sas-daterange-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .75rem;
  border: 1px solid var(--sas-gray-200);
  border-radius: var(--sas-radius-md);
  background: #fff;
  color: var(--sas-gray-700);
  font-size: var(--sas-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s var(--sas-ease), background .15s var(--sas-ease);
}
.sas-daterange-btn:hover { border-color: var(--sas-gray-300); background: var(--sas-gray-50); }
.sas-daterange-btn i:first-child { color: var(--sas-gray-400); }
@media (max-width: 767.98px) {
  .sas-table-toolbar__search { margin-left: 0; width: 100%; order: 99; }
}

/* Hide the auto-injected DataTables length/filter row when a page supplies
   its own toolbar (above) driving the same table instance — the info text
   + pagination row (last) stays, since that's still the real page state. */
.sas-table-toolbar ~ .table-responsive .dataTables_wrapper > .row:first-child {
  display: none;
}

/* --------------------------------------------------------------------------
   Filter chips — removable "active filter" tokens above list/table toolbars
   -------------------------------------------------------------------------- */
.sas-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .6rem;
  border-radius: var(--sas-radius-sm);
  background: var(--sas-primary-50);
  color: var(--sas-primary-700);
  font-size: var(--sas-fs-xs);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s var(--sas-ease), border-color .15s var(--sas-ease);
}
.sas-filter-chip i { font-size: .85em; }
.sas-filter-chip:hover {
  background: var(--sas-primary-100);
  color: var(--sas-primary-700);
  border-color: var(--sas-primary-200);
}

/* --------------------------------------------------------------------------
   Icon tile — square tinted icon container (distinct from the circular
   .sas-avatar), used to lead a list row or card section with a semantic glyph
   -------------------------------------------------------------------------- */
.sas-icon-tile {
  width: 36px;
  height: 36px;
  border-radius: var(--sas-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Stat strip — several KPIs as one card, divided by hairlines, instead of a
   row of separate cards. Markup: components/stat-strip(-item).blade.php.
   -------------------------------------------------------------------------- */
.sas-stat-strip__row {
  display: flex;
  flex-wrap: wrap;
}
.sas-stat-strip__item {
  flex: 1 1 0;
  min-width: 160px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sas-space-3);
  padding: var(--sas-space-5);
  border-right: 1px solid var(--sas-gray-100);
}
.sas-stat-strip__item:last-child { border-right: 0; }
.sas-stat-strip__value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--sas-gray-900);
  line-height: 1.2;
  margin-top: .15rem;
}
.sas-stat-strip__icon {
    width: auto;
    height: 100%;
    aspect-ratio: 1 / 1;
    font-size: 2rem;
}
@media (max-width: 767.98px) {
  .sas-stat-strip__item {
    flex: 1 1 50%;
    border-right: 0;
    border-bottom: 1px solid var(--sas-gray-100);
  }
  .sas-stat-strip__item:nth-child(odd) { border-right: 1px solid var(--sas-gray-100); }
}

/* --------------------------------------------------------------------------
   Dense list row — a clickable row inside a card (e.g. dashboard "high risk"
   list) that reads as an item, not a plain link
   -------------------------------------------------------------------------- */
.sas-row-link {
  display: flex;
  align-items: center;
  gap: var(--sas-space-3);
  padding: var(--sas-space-2) var(--sas-space-2);
  margin: 0 calc(var(--sas-space-2) * -1);
  border-radius: var(--sas-radius-md);
  transition: background-color .15s var(--sas-ease);
}
.sas-row-link:hover { background: var(--sas-gray-50); }

/* --------------------------------------------------------------------------
   Calendar event hover preview — quick patient/appointment glance without
   leaving the calendar
   -------------------------------------------------------------------------- */
.sas-event-popover {
  position: fixed;
  z-index: 1060;
  width: 260px;
  background: #fff;
  border: 1px solid var(--sas-gray-300);
  border-radius: var(--sas-radius-lg);
  box-shadow: var(--sas-shadow-md);
  padding: var(--sas-space-4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s var(--sas-ease), transform .12s var(--sas-ease);
}
.sas-event-popover.show { opacity: 1; transform: translateY(0); }
.sas-event-popover__title { font-weight: 700; font-size: var(--sas-fs-base); color: var(--sas-gray-900); margin-bottom: .15rem; }
.sas-event-popover__time { font-size: var(--sas-fs-xs); color: var(--sas-gray-500); margin-bottom: .6rem; display: flex; align-items: center; gap: .35rem; }
.sas-event-popover__row { display: flex; align-items: center; justify-content: space-between; font-size: var(--sas-fs-xs); color: var(--sas-gray-600); margin-bottom: .3rem; }
.sas-event-popover__row span:first-child { color: var(--sas-gray-500); }

/* --------------------------------------------------------------------------
   Calendar legend — restyled as compact chips instead of bare dot + text
   -------------------------------------------------------------------------- */
.sas-cal-legend__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .55rem;
  border-radius: var(--sas-radius-sm);
  background: var(--sas-gray-50);
  font-size: var(--sas-fs-xs);
  font-weight: 600;
  color: var(--sas-gray-700);
}
.sas-cal-legend__chip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Confirm modal (shared, replaces native confirm())
   -------------------------------------------------------------------------- */
#sasConfirmModal .sas-confirm-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sas-danger-subtle);
  color: var(--sas-danger);
  font-size: 1.1rem;
}