/* ============================================================
   Digest — Clinical Design Tokens  (single source of truth)
   Loaded from base_template.html AFTER page-level styles.
   Brand: clinical blue. Neutrals: Tailwind slate scale.
   ============================================================ */

:root {
    /* ── Brand (blue) ── */
    --c-primary: #0369a1;
    --c-primary-light: #0ea5e9;
    --c-primary-dark: #075985;
    --c-primary-tint: #f0f9ff;          /* near-white surface wash */
    --c-primary-tint-strong: #e0f2fe;   /* borders / chips */

    /* ── Status ── */
    --c-danger: #dc2626;
    --c-danger-dark: #b91c1c;
    --c-danger-tint: #fef2f2;
    --c-danger-border: #fecaca;
    --c-danger-strong-ink: #b91c1c;
    --c-warning: #f59e0b;
    --c-warning-ink: #b45309;
    --c-warning-tint: #fffbeb;
    --c-warning-border: #fde68a;
    --c-success: #059669;
    --c-success-bg: #ecfdf5;
    --c-success-border: #a7f3d0;
    --c-info: #0369a1;
    --c-info-bg: #e6f4ff;
    --c-info-border: #bfdbfe;

    /* ── Neutrals (slate) ── */
    --c-neutral-50:  #f8fafc;
    --c-neutral-100: #f1f5f9;
    --c-neutral-200: #e2e8f0;
    --c-neutral-300: #cbd5e1;
    --c-neutral-400: #94a3b8;
    --c-neutral-500: #64748b;
    --c-neutral-600: #475569;
    --c-neutral-700: #334155;
    --c-neutral-800: #1e293b;
    --c-neutral-900: #0f172a;

    --c-body-ink: var(--c-neutral-700);   /* replaces Cork #515365 */
    --c-heading-ink: var(--c-neutral-800);/* replaces Cork #3b3f5c */
    --c-muted-ink: var(--c-neutral-500);  /* replaces Cork #888ea8 */

    /* ── Radii ── */
    --c-radius-sm: 6px;
    --c-radius-md: 10px;
    --c-radius-lg: 14px;
    --c-radius-pill: 999px;

    /* ── Shadows ── */
    --c-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06);
    --c-shadow-hover: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
    --c-shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    --c-focus-ring: 0 0 0 3px rgba(7, 89, 133, 0.2);
}

/* ── Step 3: typography contract ─────────────────────────── */
html,
body {
    /* !important: structure.css is JS-injected after this file and
       re-sets Cork tracking; this must win regardless of order. */
    letter-spacing: normal !important;
    font-kerning: normal;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--c-heading-ink) !important;
}

p {
    color: var(--c-body-ink);
}

/* ── Step 3: visible keyboard focus for mouse users ─────── */
:focus:focus-visible {
    outline: 2px solid var(--c-primary) !important;
    outline-offset: 2px;
}
.sidebar-wrapper :focus:not(:focus-visible) {
    outline: none !important;
}

/* ── Flash messages (message.html cleanup lives in tokens.css) ── */
.alert-success {
    background-color: var(--c-success-bg) !important;
    border: 1px solid var(--c-success-border) !important;
    color: #065f46 !important;
}

.alert-danger,
.alert-error {
    background-color: var(--c-danger-tint) !important;
    border: 1px solid var(--c-danger-border) !important;
    color: var(--c-danger-strong-ink) !important;
}

.alert-warning {
    background-color: var(--c-warning-tint) !important;
    border: 1px solid var(--c-warning-border) !important;
    color: var(--c-warning-ink) !important;
}

.alert-info,
.alert-primary {
    background-color: var(--c-info-bg) !important;
    border: 1px solid var(--c-info-border) !important;
    color: var(--c-info) !important;
}

/* ============================================================
   Step 6: Reusable confirm-modal pattern (generic)
   Was the sidebar-specific "Clinical Logout Modal" block.
   Usage: .clinical-modal-backdrop(.active) > .clinical-modal
   Danger theme is applied via .clinical-modal--danger.
   ============================================================ */

.clinical-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--c-neutral-900);
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.clinical-modal-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

.clinical-modal {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--c-neutral-200);
  box-shadow: var(--c-shadow-pop);
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 28px 28px 22px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.clinical-modal-backdrop.active .clinical-modal {
  transform: translateY(0) scale(1);
}

.clinical-modal-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--c-radius-md);
  background: #fef2f2;
  border: 1px solid #fecaca;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.clinical-modal-icon .material-symbols-outlined {
  font-size: 20px;
  color: var(--c-danger);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 24;
}

.clinical-modal h3 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-neutral-900);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.clinical-modal p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--c-muted-ink);
  margin: 0 0 22px;
  line-height: 1.55;
}

.clinical-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-modal-cancel {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-neutral-700);
  background: var(--c-neutral-50);
  border: 1px solid var(--c-neutral-200);
  border-radius: var(--c-radius-sm);
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  line-height: 1;
}

.btn-modal-cancel:hover {
  background: var(--c-neutral-100);
  border-color: var(--c-neutral-300);
}

.btn-modal-confirm {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  background: var(--c-danger);
  border: 1px solid var(--c-danger);
  border-radius: var(--c-radius-sm);
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  line-height: 1;
}

.btn-modal-confirm:hover {
  background: var(--c-danger-dark);
  border-color: var(--c-danger-dark);
}

/* ── Step 26: DataTables empty-state + processing polish ── */
.dataTables_wrapper .dataTables_processing {
    background: #ffffff;
    border: 1px solid var(--c-neutral-200);
    border-radius: var(--c-radius-md);
    box-shadow: var(--c-shadow-card);
    color: var(--c-neutral-600);
    font-size: 0.8125rem;
    padding: 12px 20px;
}

.dataTables_wrapper .dataTables_empty {
    padding: 2.5rem 1rem;
    color: var(--c-neutral-500);
    font-size: 0.875rem;
    text-align: center;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--c-neutral-200);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--c-neutral-700);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: var(--c-focus-ring);
}

/* ── Spinner utility (replaces FontAwesome fa-spin) ── */
@keyframes c-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.spin {
    display: inline-block;
    animation: c-spin 0.8s linear infinite;
}

/* ── Step 1: Bootstrap 5 variable bridging (plugin components) ── */
:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-body-color: var(--c-body-ink);
    --bs-body-font-size: 0.875rem;
    --bs-primary: #0369a1;
    --bs-primary-rgb: 3, 105, 161;
    --bs-success: #059669;
    --bs-success-rgb: 5, 150, 105;
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: #f59e0b;
    --bs-warning-rgb: 245, 158, 11;
    --bs-info: #0369a1;
    --bs-info-rgb: 3, 105, 161;
    --bs-border-color: var(--c-neutral-200);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-pill: 999px;
    --bs-link-color: #0369a1;
    --bs-link-color-rgb: 3, 105, 161;
    --bs-link-hover-color: #075985;
    --bs-link-hover-color-rgb: 7, 89, 133;
}

.text-form-element,
small,
.small {
    letter-spacing: normal;
}