/* ============================================================================
   Nalam360 / MedWay — Enterprise Polish
   ----------------------------------------------------------------------------
   Single cohesive stylesheet that refines the look-and-feel of the whole app
   (cards, buttons, inputs, tables, headings, scrollbars, Syncfusion overrides).
   Built on top of /css/design-tokens.css — does NOT replace any tokens; only
   re-tunes the *visible* palette to a calmer enterprise indigo/slate, then
   polishes shared component surfaces.
   ============================================================================ */

:root {
  /* ── ClinexGen brand palette (orange primary + deep-navy secondary) ─── */
  /* Brand Orange #FF6A00 — the "Gen" / G-mark accent (brand kit 2026-08).
     500 is the exact brand orange, for accents, indicators and borders. White text on
     it is only 2.87:1, so every white-on-primary FILL uses 600 (#CC4A00, 4.62:1 AA). */
  --n360-color-primary-50: #fff4eb;
  --n360-color-primary-100: #ffe4cc;
  --n360-color-primary-200: #ffc999;
  --n360-color-primary-300: #ffa766;
  --n360-color-primary-400: #ff8833;
  --n360-color-primary-500: #ff6a00; /* Brand Orange */
  --n360-color-primary-600: #cc4a00; /* button fill / text-primary — white 4.62:1 */
  --n360-color-primary-700: #a33800; /* hover / active */
  --n360-color-primary-800: #7f2c00;
  --n360-color-primary-900: #5c2000;

  /* Deep Navy secondary — the "Clinex" wordmark / C-mark. */
  --n360-color-secondary-500: #1b2b40;
  --n360-color-secondary-600: #0d1b2a; /* Deep Navy */
  --n360-color-secondary-700: #08121d;

  /* Neutral grey scale — 500 is brand Slate Grey #6B7280, 900 is Deep Navy */
  --n360-color-neutral-50: #f9fafb;
  --n360-color-neutral-100: #f3f4f6;
  --n360-color-neutral-200: #e5e7eb;
  --n360-color-neutral-300: #d1d5db;
  --n360-color-neutral-400: #9ca3af;
  --n360-color-neutral-500: #6b7280; /* Slate Grey */
  --n360-color-neutral-600: #4b5563;
  --n360-color-neutral-700: #374151;
  --n360-color-neutral-800: #1f2937;
  --n360-color-neutral-900: #0d1b2a; /* Deep Navy */

  /* Refined semantic colors (slightly desaturated).
     success-500 was #16a34a (green-600): white-on-green buttons = 3.29:1 and
     green .text-success on white = 3.36:1 — both fail WCAG AA (1.4.3). green-700
     (#15803d) lifts both to ~5:1 while staying a modern, professional green. */
  --n360-color-success-500: #15803d;
  --n360-color-success-700: #166534;
  --n360-color-warning-500: #d97706;
  --n360-color-warning-700: #b45309;
  /* warning-900 is the alert/warning TEXT colour on the light warning-50 bg.
     Default #e65100 was 3.45:1 on #fff3e0 (fails AA); #9a3412 lifts it to ~6.8:1. */
  --n360-color-warning-900: #9a3412;
  --n360-color-error-500: #dc2626;
  --n360-color-error-700: #b91c1c;
  /* info-500 was #0284c7: white on .n360-button--info = 4.09:1 (fails AA 4.5).
     #0369a1 lifts it to ~5.9:1 while staying a clear blue. */
  --n360-color-info-500: #0369a1;
  --n360-color-info-700: #075985;

  /* Refined elevation — softer, layered shadows */
  --n360-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --n360-shadow-sm:
    0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --n360-shadow-base:
    0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --n360-shadow-md:
    0 10px 20px -4px rgba(15, 23, 42, 0.08),
    0 4px 8px -3px rgba(15, 23, 42, 0.04);
  --n360-shadow-lg:
    0 20px 40px -8px rgba(15, 23, 42, 0.12),
    0 8px 16px -6px rgba(15, 23, 42, 0.06);
  --n360-shadow-xl: 0 32px 64px -16px rgba(15, 23, 42, 0.18);

  /* Page surfaces */
  --n360-page-bg: #f7f8fa;
  --n360-surface-card: #ffffff;
  --n360-surface-subtle: #fafbfc;
  --n360-divider: rgba(13, 27, 42, 0.08);
  --n360-divider-strong: rgba(13, 27, 42, 0.14);
  --n360-focus-ring: 0 0 0 3px rgba(255, 106, 0, 0.28);

  /* ── Enterprise shell theme (replaces the VS Code navy/purple shell) ──
       Graphite-slate surfaces with a refined indigo accent. These re-tune the
       shell tokens defined in design-tokens.css; every shell surface (activity
       rail, sidebar panel, section headers, top bar, status bar) references
       these via var(), so the whole chrome restyles from this one block. */
  --n360-activitybar-bg: #f3f4f6; /* icon rail — light grey, distinct from the white panel */
  --n360-activity-bar-width: 48px; /* matches app.css .activity-bar width */
  --n360-titlebar-bg: #0d1b2a; /* top bar — ClinexGen Deep Navy */
  --n360-titlebar-border: #060e17; /* top bar bottom border */
  --n360-sidebar-bg: #ffffff; /* sidebar panel — white */
  --n360-sidebar-header-bg: #f9fafb; /* panel header strip — off-white */
  --n360-dropdown-bg: #ffffff; /* context menus / panels */
  --n360-dropdown-border: rgba(13, 27, 42, 0.12);
  --n360-sidebar-gradient: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  --n360-sidebar-border-color: rgba(13, 27, 42, 0.08);

  /* List / tree interaction states — orange accent */
  --n360-list-hover: rgba(255, 106, 0, 0.08);
  --n360-list-active-bg: rgba(255, 106, 0, 0.14);
  --n360-list-inactive-bg: rgba(255, 106, 0, 0.05);

  /* Status bar + accent links */
  --n360-statusbar-bg: #0d1b2a;
  --n360-statusbar-fg: #ffffff;
  --n360-link-color: #cc4a00;
}

/* Dark theme refinements (keep the same look/feel, just darker surfaces) */
[data-theme="dark"] {
  --n360-page-bg: #0b1020;
  --n360-surface-card: #131a2e;
  --n360-surface-subtle: #161e35;
  --n360-divider: rgba(255, 255, 255, 0.08);
  --n360-divider-strong: rgba(255, 255, 255, 0.14);
  --n360-focus-ring: 0 0 0 3px rgba(255, 136, 51, 0.32);

  /* The :root block above re-declares the neutral scale and the shell surfaces. This sheet loads
     after design-tokens.css, and :root ties [data-theme="dark"] on specificity (both sit on
     <html>), so those LIGHT values overrode design-tokens' dark ones: in dark mode the sidebar,
     rail and menus stayed white and --n360-text-primary stayed Deep Navy on a near-black page.
     Every token :root sets that has a different dark value must therefore be restated here.
     The scale is inverted (0 = surface, 900 = text) and tinted navy to sit with the surfaces above. */
  --n360-color-neutral-0: #131a2e;
  --n360-color-neutral-50: #161e35;
  --n360-color-neutral-100: #1c2540;
  --n360-color-neutral-200: #26304d;
  --n360-color-neutral-300: #36415f;
  --n360-color-neutral-400: #6b7691;
  --n360-color-neutral-500: #8b95ad;
  --n360-color-neutral-600: #b4bccd;
  --n360-color-neutral-700: #cfd5e1;
  --n360-color-neutral-800: #e3e7ee;
  --n360-color-neutral-900: #f3f5f9;

  --n360-activitybar-bg: #0f1526;
  --n360-sidebar-bg: #131a2e;
  --n360-sidebar-header-bg: #161e35;
  --n360-dropdown-bg: #161e35;
  --n360-dropdown-border: rgba(255, 255, 255, 0.12);
  --n360-sidebar-gradient: linear-gradient(180deg, #131a2e 0%, #0f1526 100%);
  --n360-sidebar-border-color: rgba(255, 255, 255, 0.08);

  --n360-list-hover: rgba(255, 136, 51, 0.12);
  --n360-list-active-bg: rgba(255, 136, 51, 0.2);
  --n360-list-inactive-bg: rgba(255, 136, 51, 0.08);

  /* #cc4a00 is 3.3:1 on these surfaces; the lifted orange is 7.4:1. */
  --n360-link-color: #ff8a3d;
}

/* ────────────────────────────────────────────────────────────────────────────
   1. Page background + base typography
   ──────────────────────────────────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--n360-page-bg);
  color: var(--n360-color-neutral-800);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.005em;
  line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--n360-font-family-sans);
  color: var(--n360-color-neutral-900);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
}

h1,
.h1 {
  font-size: 1.75rem;
  font-weight: 700;
}
h2,
.h2 {
  font-size: 1.5rem;
}
h3,
.h3 {
  font-size: 1.25rem;
}
h4,
.h4 {
  font-size: 1.125rem;
}
h5,
.h5 {
  font-size: 1rem;
}
h6,
.h6 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--n360-color-neutral-600);
}

small,
.small {
  color: var(--n360-color-neutral-600);
}
hr {
  border-color: var(--n360-divider);
  opacity: 1;
}

/* ────────────────────────────────────────────────────────────────────────────
   2. Cards (Bootstrap + Syncfusion + N360)
   ──────────────────────────────────────────────────────────────────────────── */
.card,
.e-card,
.n360-card {
  background-color: var(--n360-surface-card);
  border: 1px solid var(--n360-divider);
  border-radius: 12px;
  box-shadow: var(--n360-shadow-sm);
  transition:
    box-shadow var(--n360-transition-base),
    transform var(--n360-transition-base);
}

.card:hover,
.e-card:hover,
.n360-card:hover {
  box-shadow: var(--n360-shadow-md);
}

.card-header,
.e-card .e-card-header,
.n360-card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--n360-divider);
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--n360-color-neutral-900);
}

.card-body,
.e-card .e-card-content,
.n360-card-body {
  padding: 1.25rem;
}

.card-footer {
  background-color: var(--n360-surface-subtle);
  border-top: 1px solid var(--n360-divider);
  padding: 0.875rem 1.25rem;
}

/* Stat card polish */
.n360-stat-card,
.stat-card {
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(
    135deg,
    var(--n360-surface-card) 0%,
    var(--n360-surface-subtle) 100%
  );
  border: 1px solid var(--n360-divider);
  box-shadow: var(--n360-shadow-sm);
  transition:
    transform var(--n360-transition-base),
    box-shadow var(--n360-transition-base);
}

.n360-stat-card:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--n360-shadow-md);
}

/* ────────────────────────────────────────────────────────────────────────────
   3. Buttons
   ──────────────────────────────────────────────────────────────────────────── */
.btn,
.e-btn,
.e-css.e-btn {
  font-family: var(--n360-font-family-sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.005em;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition:
    background-color var(--n360-transition-fast),
    border-color var(--n360-transition-fast),
    box-shadow var(--n360-transition-fast),
    transform 80ms ease;
  box-shadow: var(--n360-shadow-xs);
}

.btn:active,
.e-btn:active {
  transform: translateY(1px);
}
.btn:focus-visible,
.e-btn:focus {
  box-shadow: var(--n360-focus-ring) !important;
  outline: none;
}

.btn-primary,
.e-btn.e-primary {
  background-color: var(--n360-color-primary-500);
  border-color: var(--n360-color-primary-500);
  color: #fff;
}
.btn-primary:hover,
.e-btn.e-primary:hover {
  background-color: var(--n360-color-primary-600);
  border-color: var(--n360-color-primary-600);
}

.btn-secondary {
  background-color: var(--n360-color-neutral-100);
  border-color: var(--n360-divider);
  color: var(--n360-color-neutral-800);
}
.btn-secondary:hover {
  background-color: var(--n360-color-neutral-200);
  color: var(--n360-color-neutral-900);
}

.btn-success {
  background-color: var(--n360-color-success-500);
  border-color: var(--n360-color-success-500);
}
.btn-success:hover {
  background-color: var(--n360-color-success-700);
  border-color: var(--n360-color-success-700);
}

.btn-danger {
  background-color: var(--n360-color-error-500);
  border-color: var(--n360-color-error-500);
}
.btn-danger:hover {
  background-color: var(--n360-color-error-700);
  border-color: var(--n360-color-error-700);
}

.btn-warning {
  background-color: var(--n360-color-warning-500);
  border-color: var(--n360-color-warning-500);
  color: #fff;
}
.btn-warning:hover {
  background-color: var(--n360-color-warning-700);
  border-color: var(--n360-color-warning-700);
  color: #fff;
}

.btn-outline-primary {
  color: var(--n360-color-primary-600);
  border-color: var(--n360-color-primary-300);
  background-color: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--n360-color-primary-50);
  border-color: var(--n360-color-primary-500);
  color: var(--n360-color-primary-700);
}

.btn-link {
  color: var(--n360-color-primary-600);
  text-decoration: none;
  box-shadow: none;
}
.btn-link:hover {
  color: var(--n360-color-primary-700);
  text-decoration: underline;
}

.btn-sm,
.e-btn.e-small {
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: 6px;
}
.btn-lg,
.e-btn.e-large {
  padding: 0.6875rem 1.375rem;
  font-size: 0.9375rem;
  border-radius: 10px;
}

/* ────────────────────────────────────────────────────────────────────────────
   4. Form controls (Bootstrap + Syncfusion)
   ──────────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select,
.input-group-text {
  border-color: var(--n360-color-neutral-300);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--n360-color-neutral-900);
  background-color: var(--n360-surface-card);
  transition:
    border-color var(--n360-transition-fast),
    box-shadow var(--n360-transition-fast);
}

.form-control {
  padding: 0.5rem 0.75rem;
  min-height: 2.5rem;
}
.form-select {
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  min-height: 2.5rem;
}

.form-control::placeholder {
  color: var(--n360-color-neutral-400);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--n360-color-primary-500);
  box-shadow: var(--n360-focus-ring);
  outline: none;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--n360-color-neutral-100);
  color: var(--n360-color-neutral-500);
  cursor: not-allowed;
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--n360-color-neutral-700);
  margin-bottom: 0.375rem;
  letter-spacing: 0.005em;
}

.form-text {
  color: var(--n360-color-neutral-500);
  font-size: 0.75rem;
}

/* Syncfusion input parity */
.e-input-group,
.e-float-input.e-input-group,
.e-input-group:not(.e-success):not(.e-warning):not(.e-error) {
  border-color: var(--n360-color-neutral-300) !important;
  border-radius: 8px !important;
  transition:
    border-color var(--n360-transition-fast),
    box-shadow var(--n360-transition-fast) !important;
}

.e-input-group.e-input-focus,
.e-float-input.e-input-group.e-input-focus,
.e-input-group:not(.e-success):not(.e-warning):not(.e-error).e-input-focus {
  border-color: var(--n360-color-primary-500) !important;
  box-shadow: var(--n360-focus-ring) !important;
}

.e-input-group .e-input,
.e-float-input.e-input-group input.e-input {
  color: var(--n360-color-neutral-900);
  font-size: 0.875rem;
}

.e-float-text {
  color: var(--n360-color-neutral-600) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
}

/* Validation states */
.is-invalid,
.invalid {
  border-color: var(--n360-color-error-500) !important;
}
.is-invalid:focus,
.invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}
.is-valid,
.valid.modified {
  border-color: var(--n360-color-success-500) !important;
}
.validation-message {
  color: var(--n360-color-error-700);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Check / radio polish */
.form-check-input {
  border-color: var(--n360-color-neutral-400);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--n360-color-primary-500);
  border-color: var(--n360-color-primary-500);
}
.form-check-input:focus {
  box-shadow: var(--n360-focus-ring);
  border-color: var(--n360-color-primary-500);
}

/* ────────────────────────────────────────────────────────────────────────────
   5. Tables / Grids
   ──────────────────────────────────────────────────────────────────────────── */
.table,
.e-grid {
  background-color: var(--n360-surface-card);
  border-color: var(--n360-divider);
  color: var(--n360-color-neutral-800);
}

.table > :not(caption) > * > * {
  padding: 0.75rem 1rem;
}

.table > thead {
  background-color: var(--n360-surface-subtle);
  color: var(--n360-color-neutral-700);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table > thead > tr > th {
  border-bottom: 1px solid var(--n360-divider-strong);
  border-top: none;
  background-color: var(--n360-surface-subtle);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--n360-surface-subtle);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--n360-color-primary-50);
  color: var(--n360-color-neutral-900);
}

/* Syncfusion grid */
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
  background-color: var(--n360-surface-subtle) !important;
  color: var(--n360-color-neutral-700) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--n360-divider-strong) !important;
}

.e-grid .e-rowcell {
  color: var(--n360-color-neutral-800) !important;
  font-size: 0.875rem !important;
  border-bottom-color: var(--n360-divider) !important;
}

.e-grid .e-row:hover .e-rowcell {
  background-color: var(--n360-color-primary-50) !important;
}

.e-grid .e-altrow .e-rowcell {
  background-color: var(--n360-surface-subtle) !important;
}

.e-grid .e-gridheader,
.e-grid .e-gridcontent {
  border-color: var(--n360-divider) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   6. Badges, chips, pills
   ──────────────────────────────────────────────────────────────────────────── */
.badge {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 0.3125rem 0.625rem;
  border-radius: 6px;
  text-transform: uppercase;
}
.badge.bg-primary {
  background-color: var(--n360-color-primary-100) !important;
  color: var(--n360-color-primary-700) !important;
}
.badge.bg-success {
  background-color: #dcfce7 !important;
  color: #15803d !important;
}
.badge.bg-warning {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
}
.badge.bg-danger {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
}
.badge.bg-info {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
}
.badge.bg-secondary {
  background-color: var(--n360-color-neutral-200) !important;
  color: var(--n360-color-neutral-700) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   7. Alerts
   ──────────────────────────────────────────────────────────────────────────── */
.alert {
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
}
.alert-success {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.alert-warning {
  background-color: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.alert-danger {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.alert-info {
  background-color: #f0f9ff;
  border-color: #bae6fd;
  color: #075985;
}

/* ────────────────────────────────────────────────────────────────────────────
   8. Modals / Dialogs
   ──────────────────────────────────────────────────────────────────────────── */
.modal-content,
.e-dialog {
  border: 1px solid var(--n360-divider);
  border-radius: 14px;
  box-shadow: var(--n360-shadow-xl);
}
.modal-header,
.e-dialog .e-dlg-header-content {
  border-bottom: 1px solid var(--n360-divider);
  padding: 1rem 1.25rem;
}
.modal-footer,
.e-dialog .e-footer-content {
  border-top: 1px solid var(--n360-divider);
  background-color: var(--n360-surface-subtle);
  padding: 0.875rem 1.25rem;
}
.modal-backdrop.show {
  opacity: 0.45;
  backdrop-filter: blur(2px);
}

/* ────────────────────────────────────────────────────────────────────────────
   9. Tabs / Nav
   ──────────────────────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--n360-divider);
  gap: 0.25rem;
}
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--n360-color-neutral-600);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
  border-radius: 0;
  transition:
    color var(--n360-transition-fast),
    border-color var(--n360-transition-fast);
}
.nav-tabs .nav-link:hover {
  color: var(--n360-color-primary-600);
  border-color: var(--n360-color-primary-200);
}
.nav-tabs .nav-link.active {
  color: var(--n360-color-primary-700);
  background-color: transparent;
  border-color: var(--n360-color-primary-500);
}

.nav-pills .nav-link {
  color: var(--n360-color-neutral-700);
  font-weight: 500;
  border-radius: 8px;
  padding: 0.5rem 1rem;
}
.nav-pills .nav-link.active {
  background-color: var(--n360-color-primary-500);
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────────────────
  10. Dropdowns / Menus
   ──────────────────────────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--n360-divider);
  border-radius: 10px;
  box-shadow: var(--n360-shadow-lg);
  padding: 0.375rem;
  font-size: 0.875rem;
}
.dropdown-item {
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--n360-color-neutral-800);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--n360-color-primary-50);
  color: var(--n360-color-primary-700);
}
.dropdown-divider {
  border-top: 1px solid var(--n360-divider);
}

/* ────────────────────────────────────────────────────────────────────────────
  11. Page header tile (N360PageHeader icon-placeholder polish)
   ──────────────────────────────────────────────────────────────────────────── */
.icon-placeholder {
  background: linear-gradient(
    135deg,
    var(--n360-color-primary-500) 0%,
    var(--n360-color-secondary-500) 100%
  );
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, 0.5);
  border-radius: 12px;
}

/* ────────────────────────────────────────────────────────────────────────────
  12. Pagination
   ──────────────────────────────────────────────────────────────────────────── */
.page-link {
  color: var(--n360-color-neutral-700);
  border-color: var(--n360-divider);
  font-size: 0.875rem;
  padding: 0.4375rem 0.75rem;
}
.page-link:hover {
  background-color: var(--n360-color-primary-50);
  color: var(--n360-color-primary-700);
  border-color: var(--n360-color-primary-200);
}
.page-item.active .page-link {
  background-color: var(--n360-color-primary-500);
  border-color: var(--n360-color-primary-500);
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────────────────
  13. Scrollbars (subtle, modern)
   ──────────────────────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--n360-color-neutral-300) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--n360-color-neutral-300);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--n360-color-neutral-400);
}

/* ────────────────────────────────────────────────────────────────────────────
  14. Focus rings (accessibility)
   ──────────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--n360-focus-ring);
  border-radius: 4px;
}

/* ────────────────────────────────────────────────────────────────────────────
  15. Misc utilities + transitions
   ──────────────────────────────────────────────────────────────────────────── */
.shadow-soft {
  box-shadow: var(--n360-shadow-sm) !important;
}
.shadow-med {
  box-shadow: var(--n360-shadow-md) !important;
}
.shadow-elev {
  box-shadow: var(--n360-shadow-lg) !important;
}
.rounded-xl {
  border-radius: 12px !important;
}
.rounded-2xl {
  border-radius: 16px !important;
}
.bg-surface {
  background-color: var(--n360-surface-card) !important;
}
.bg-subtle {
  background-color: var(--n360-surface-subtle) !important;
}
.divider {
  border-top: 1px solid var(--n360-divider);
}

/* Print niceties */
@media print {
  body {
    background: #fff;
  }
  .card,
  .e-card,
  .n360-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  .btn,
  .e-btn {
    display: none !important;
  }
}

/* ============================================================================
   Form field-label alignment — fixes "zig-zag" rows
   ----------------------------------------------------------------------------
   N360 input components render their <label> above the control, with no fixed
   height. When two fields sit side-by-side in an N360Row and one label wraps to
   a second line, that field's input box is pushed down relative to its
   neighbour, so inputs in the same row no longer line up (the "zig-zag" look).

   Reserve a uniform 2-line height for every field label (line-height 1.5 → two
   lines ≈ 3em of the label's own 0.875rem font). This is a FLOOR only: 1-line
   labels reserve the same space as 2-line labels so their inputs align; labels
   longer than two lines still grow naturally. No label text is ever hidden.
   ============================================================================ */
.n360-textbox__label,
.n360-select__label,
.n360-numeric-textbox__label,
.n360-masked-textbox__label,
.n360-multiselect__label,
.n360-combobox__label,
.n360-dropdown__label,
.n360-autocomplete__label,
.n360-treeselect__label,
.n360-datetimepicker__label,
.n360-daterangepicker__label,
.n360-colorpicker__label,
.n360-switch__label,
.n360-textarea-label,
.n360-label {
  display: block;
  min-height: 1.5em; /* one line — was 2.4em which reserved ~13px empty space under every
                        single-line label (excess gap on all forms). 1-line labels now sit
                        tight to their input; labels that wrap to 2 lines still grow naturally. */
}

/* ============================================================================
   N360 THEME BRIDGE (full re-theme) — route framework-styled controls through
   the n360 palette so Syncfusion/Bootstrap defaults follow the theme color.
   Added 2026-06-18: primary buttons rendered Syncfusion gray (.e-btn) because
   nothing mapped n360/Syncfusion primary classes to --n360-color-primary-*.
   ============================================================================ */
.n360-button--primary,
.n360-button--primary.e-btn,
.e-btn.e-primary,
.e-css.e-btn.e-primary,
button.e-primary,
.btn-primary {
  background-color: var(--n360-color-primary-600, #4f46e5) !important;
  border-color: var(--n360-color-primary-600, #4f46e5) !important;
  color: #fff !important;
}
.n360-button--primary:hover,
.e-btn.e-primary:hover,
.btn-primary:hover {
  background-color: var(--n360-color-primary-700, #4338ca) !important;
  border-color: var(--n360-color-primary-700, #4338ca) !important;
}
.n360-button--primary:active,
.e-btn.e-primary:active,
.btn-primary:active {
  background-color: var(--n360-color-primary-800, #3730a3) !important;
}
.text-primary {
  color: var(--n360-color-primary-600, #4f46e5) !important;
}
.bg-primary {
  background-color: var(--n360-color-primary-600, #4f46e5) !important;
}
.border-primary {
  border-color: var(--n360-color-primary-600, #4f46e5) !important;
}
/* Syncfusion accents */
.e-tab .e-toolbar-items .e-toolbar-item.e-active {
  border-color: var(--n360-color-primary-600, #4f46e5) !important;
}
.e-tab .e-toolbar-item.e-active .e-tab-text {
  color: var(--n360-color-primary-600, #4f46e5) !important;
}
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
  background-color: var(--n360-color-primary-600, #4f46e5) !important;
  border-color: var(--n360-color-primary-600, #4f46e5) !important;
}
.e-input-group.e-control-wrapper.e-input-focus:not(.e-error)::before,
.e-input-group.e-control-wrapper.e-input-focus:not(.e-error)::after {
  background: var(--n360-color-primary-600, #4f46e5) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--n360-color-primary-500, #6366f1) !important;
  box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25) !important;
}

/* THEME BRIDGE pt.2 — N360Button color VARIANTS also fell back to Syncfusion
   gray .e-btn (e.g. "New Patient" = --success rendered gray). Map each variant
   to its semantic palette color. (2026-06-18) */
.n360-button--success,
.n360-button--success.e-btn {
  background-color: var(--n360-color-success-500, #22c55e) !important;
  border-color: var(--n360-color-success-500, #22c55e) !important;
  color: #fff !important;
}
.n360-button--success:hover {
  background-color: var(--n360-color-success-700, #15803d) !important;
  border-color: var(--n360-color-success-700, #15803d) !important;
}
.n360-button--danger,
.n360-button--danger.e-btn,
.n360-button--error,
.n360-button--error.e-btn {
  background-color: var(--n360-color-error-500, #ef4444) !important;
  border-color: var(--n360-color-error-500, #ef4444) !important;
  color: #fff !important;
}
.n360-button--danger:hover,
.n360-button--error:hover {
  background-color: var(--n360-color-error-700, #b91c1c) !important;
  border-color: var(--n360-color-error-700, #b91c1c) !important;
}
.n360-button--warning,
.n360-button--warning.e-btn {
  background-color: var(--n360-color-warning-500, #f59e0b) !important;
  border-color: var(--n360-color-warning-500, #f59e0b) !important;
  color: #1f2937 !important;
}
.n360-button--warning:hover {
  background-color: var(--n360-color-warning-700, #b45309) !important;
  color: #fff !important;
}
.n360-button--info,
.n360-button--info.e-btn {
  background-color: var(--n360-color-info-500, #0ea5e9) !important;
  border-color: var(--n360-color-info-500, #0ea5e9) !important;
  color: #fff !important;
}
.n360-button--info:hover {
  background-color: var(--n360-color-info-700, #0369a1) !important;
}
.n360-button--secondary,
.n360-button--secondary.e-btn {
  background-color: var(--n360-color-secondary-600, #475569) !important;
  border-color: var(--n360-color-secondary-600, #475569) !important;
  color: #fff !important;
}
.n360-button--secondary:hover {
  background-color: var(--n360-color-secondary-700, #334155) !important;
  border-color: var(--n360-color-secondary-700, #334155) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Navigation clarity (2026-10-07)
   1. The icon rail showed icons only: app.css hid every .activity-label
      ("tooltips only", 0.6 s hover delay), so the main menu was a column of
      unlabelled pictograms. Labels are shown again on a rail wide enough for them.
   2. Opening the module panel pushed <main> right by rail + panel width but did
      not narrow it, so the last ~280 px of every page fell off-screen (grids cut
      at the right edge). The panel now overlays the page instead.
   3. Both widths are driven from the two tokens, so the Settings page's
      "compact sidebar" (which sets --n360-sidebar-panel-width) finally takes
      effect - the hard-coded 280 px / 328 px in app.css ignored it.
   4. Module-panel group titles were squeezed into ~100 px of a 270 px header and
      cut with an ellipsis ("MY WORKSPA..."); item labels likewise. Both may now
      wrap, and item text is darker for contrast.
   Desktop only: below 769 px the rail becomes the bottom tab bar (ActivityBar.razor.css).
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  :root {
    --n360-activity-bar-width: 72px;
  }

  .activity-bar {
    width: var(--n360-activity-bar-width) !important;
  }

  .activity-item {
    width: var(--n360-activity-bar-width) !important;
    min-width: var(--n360-activity-bar-width) !important;
    height: 54px !important;
    min-height: 54px !important;
    gap: 3px !important;
  }

  .activity-label {
    display: block !important;
    max-width: calc(var(--n360-activity-bar-width) - 8px) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
  }

  /* The label now says what the icon is; the hover tooltip is a duplicate. */
  .activity-item::after {
    display: none !important;
  }

  /* Collapsed rail keeps the icon-only look the user chose. */
  .mw-rail-collapsed .activity-label {
    display: none !important;
  }

  .sidebar-panel {
    left: var(--n360-activity-bar-width) !important;
    width: var(--n360-sidebar-panel-width, 280px) !important;
  }

  .vscode-shell main {
    margin-left: var(--n360-activity-bar-width) !important;
    max-width: calc(100% - var(--n360-activity-bar-width)) !important;
  }

  /* The module panel OVERLAYS the page (as .sidebar-panel in app.css always intended: "overlay/
     drawer, no layout shift"). Pushing <main> aside squeezed every page by 280 px while the menu
     was open, so 10-column grids broke words mid-letter. */
  .vscode-shell.panel-open main {
    margin-left: var(--n360-activity-bar-width) !important;
    max-width: calc(100% - var(--n360-activity-bar-width)) !important;
  }
}

/* Module panel: full group titles and item labels, readable contrast. */
.tree-group-header .tree-group-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  letter-spacing: 0.4px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.tree-item {
  height: auto !important;
  min-height: 30px !important;
  white-space: normal !important;
  color: #334155 !important;
}

.tree-item .tree-item-label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.3 !important;
  padding: 3px 0 !important;
  color: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Navigation shell refresh (2026-10-14)
   The module panel was still laid out as a VS Code explorer: 22px edge-to-edge rows, a
   dark header strip over a white panel, header actions invisible until hovered, a black
   drop shadow and a scrollbar thumb drawn in white. This block restyles it with the
   brand tokens only, so it follows the light and dark themes without its own colours.

   It sits here, not in app.css, because it must load after app.css: both sheets use
   !important at the same specificity, so the later one wins. The [data-theme] rules in
   app.css are more specific and still apply on top of this.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Panel */
.sidebar-panel {
  border-right: 1px solid var(--n360-sidebar-border-color) !important;
  box-shadow: 14px 0 36px -18px rgba(13, 27, 42, 0.3) !important;
}

/* Header: same surface family as the panel, title in text colour with a brand tick */
.sidebar-header {
  padding: 14px 10px 12px 16px !important;
  background: var(--n360-sidebar-header-bg) !important;
  border-bottom: 1px solid var(--n360-sidebar-border-color) !important;
}

.sidebar-header h3 {
  position: relative !important;
  padding-left: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--n360-color-neutral-900) !important;
}

.sidebar-header h3::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 14px !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #ff8c00 0%, #ff3000 100%) !important;
}

/* Expand all / collapse all / close were opacity 0 until the header was hovered, so on a
   touch screen and for keyboard users they did not exist. */
.sidebar-header-actions {
  opacity: 0.6 !important;
  gap: 4px !important;
}

.sidebar-header:hover .sidebar-header-actions,
.sidebar-header-actions:focus-within {
  opacity: 1 !important;
}

.sidebar-action-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  color: var(--n360-color-neutral-600) !important;
  transition:
    color 0.12s ease,
    background 0.12s ease !important;
}

.sidebar-action-btn:hover {
  color: var(--n360-link-color) !important;
  background: var(--n360-list-hover) !important;
}

/* Scroll area: the thumb was white at 15% and could not be seen on the white panel */
.sidebar-content {
  padding: 6px 0 20px !important;
  scrollbar-color: rgba(107, 114, 128, 0.4) transparent !important;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.32);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 6px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.55);
  background-clip: padding-box;
}

/* Group headings: quieter than the rows they label, with the module icon in brand orange */
.tree-group-header {
  height: auto !important;
  min-height: 30px !important;
  margin-top: 8px !important;
  padding: 4px 12px 4px 14px !important;
  gap: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  color: var(--n360-color-neutral-600) !important;
}

.tree-group-header .tree-group-icon {
  width: 16px !important;
  text-align: center !important;
  color: var(--n360-color-primary-500) !important;
}

.tree-group-header .tree-chevron {
  color: var(--n360-color-neutral-400) !important;
}

.tree-group-header:hover {
  background: transparent !important;
}

.tree-group-header:hover .tree-group-title {
  color: var(--n360-link-color) !important;
}

/* Rows: inset rounded targets, 32px tall, instead of 22px full-bleed lines */
.tree-item {
  width: calc(100% - 16px) !important;
  min-height: 32px !important;
  margin: 1px 8px !important;
  padding: 0 10px 0 calc(8px + var(--tree-depth, 0) * 14px) !important;
  gap: 8px !important;
  border-radius: 8px !important;
  transition:
    background-color 0.12s ease,
    color 0.12s ease !important;
}

.tree-item,
.tree-item:link,
.tree-item:visited {
  color: var(--n360-color-neutral-700) !important;
}

.tree-item:hover,
.tree-item:focus,
.tree-item:focus-visible {
  color: var(--n360-color-neutral-900) !important;
}

/* app.css removes the outline on :focus; give keyboard focus a ring of its own */
.tree-item:focus-visible {
  outline: 2px solid rgba(255, 106, 0, 0.55) !important;
  outline-offset: -2px !important;
}

.tree-item .tree-item-icon {
  width: 16px !important;
  text-align: center !important;
  color: var(--n360-color-neutral-400) !important;
  transition: color 0.12s ease !important;
}

.tree-item:hover .tree-item-icon {
  color: var(--n360-color-neutral-600) !important;
}

/* Current page: orange tint, darker orange text (#a33800 is 6.0:1 on the tint), orange icon */
.tree-item-active,
.tree-item-active:link,
.tree-item-active:visited,
.tree-item-active:hover,
.tree-item-active:focus {
  color: var(--n360-color-primary-700) !important;
  font-weight: 600 !important;
}

.tree-item-active .tree-item-icon,
.tree-item-active:hover .tree-item-icon {
  color: var(--n360-color-primary-500) !important;
}

.tree-item-active::before {
  top: 7px !important;
  bottom: 7px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
}

/* Rail (desktop only — at <=768px the rail is the bottom navigation bar) */
@media (min-width: 769px) {
  /* A rounded tile inset 4px inside the labelled rail. Height stays with the labelled-rail block
     above (54px: icon over label). The first version of this rule forced 40x40, narrower than
     the label it contains, so "Pharmacy" and "Analytics" overflowed the tile and were cut off
     at the screen edge. */
  .activity-item {
    width: calc(var(--n360-activity-bar-width) - 8px) !important;
    min-width: calc(var(--n360-activity-bar-width) - 8px) !important;
    margin: 2px 4px !important;
    border-radius: 10px !important;
  }

  .activity-label {
    max-width: calc(var(--n360-activity-bar-width) - 14px) !important;
  }

  .activity-item.active::before {
    left: -4px !important;
    height: 20px !important;
  }

  .activity-item::after {
    padding: 6px 10px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #0d1b2a !important;
    color: #ffffff !important;
    font-family: var(--n360-font-family-sans) !important;
    box-shadow: 0 8px 20px -6px rgba(13, 27, 42, 0.45) !important;
    transition: opacity 0.12s ease 0.3s !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Grid readability (2026-10-07)
   Syncfusion row and header cells are nowrap + overflow:hidden. Row action
   buttons therefore spilled past their column (and the card edge) instead of
   wrapping, and "small" icon buttons came out 39 px or 48 px tall depending on
   the icon font. Headers and values were cut mid-word ("Referen...", "07-Oct-2026 -> 0").
   ══════════════════════════════════════════════════════════════════════════════ */
.e-grid .e-rowcell:has(.n360-button) {
  white-space: normal !important;
  overflow: visible !important;
}

.e-grid .e-rowcell .n360-button {
  margin: 2px !important;
  vertical-align: middle !important;
}

.e-grid .e-rowcell .n360-button--small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
}

.e-grid .e-rowcell .n360-button--small .material-icons {
  font-size: 18px !important;
}

.e-grid .e-headercell .e-headercelldiv {
  height: auto !important;
  min-height: 30px !important;
  line-height: 1.3 !important;
}

/* Headers wrap only BETWEEN words - "anywhere" split them mid-word ("Referenc|e"). A single word
   too long for its column keeps the ellipsis. Values may break inside a long token. */
.e-grid .e-headercell {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* 13 px with no extra tracking: at 14 px + 0.48 px letter-spacing, one-word headers such as
   "Committee" and "Submitted" did not fit a 10-column grid beside the filter icon. */
.e-grid .e-headercell .e-headertext {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.e-grid .e-rowcell {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   N360Card: one frame, one padding (2026-10-07)
   N360Card's inner .e-card / .e-card-content used to be unresolved <SfCard> tags, so the
   theme styled the OUTER .n360-card as the visible card and pages padded it themselves
   (.stat-card, p-N / pa-N utilities). Now that the inner elements render, the inner card
   must not draw a second border/shadow, and where the page already pads the outer card
   the inner content adds no second padding (dashboard tiles showed a box inside a box).
   ══════════════════════════════════════════════════════════════════════════════ */
.n360-card > .e-card,
.n360-card > .e-card:hover {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: inherit !important;
}

.n360-card:is(.stat-card, .n360-stat-card, .p-1, .p-2, .p-3, .p-4, .p-5, .pa-2, .pa-3, .pa-4, .pa-5) > .e-card > .e-card-content {
  padding: 0 !important;
}