/* ============================================================================
   MedWay — Global Page Design System
   ----------------------------------------------------------------------------
   Provides reusable utility classes that apply the Patient Registration design
   language to every module: list pages, form pages, dashboards, settings, etc.

   Usage: Add .mw-* classes to page markup. All classes are non-scoped globals.
   Reference design: Register.razor + Register.razor.css
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS (page-level palette extensions)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Page header icon gradient presets */
    --mw-grad-violet: linear-gradient(135deg, #6d28d9, #7c3aed);
    --mw-grad-teal:   linear-gradient(135deg, #0d9488, #14b8a6);
    --mw-grad-blue:   linear-gradient(135deg, #1d4ed8, #3b82f6);
    --mw-grad-rose:   linear-gradient(135deg, #be123c, #f43f5e);
    --mw-grad-amber:  linear-gradient(135deg, #b45309, #f59e0b);
    --mw-grad-green:  linear-gradient(135deg, #15803d, #22c55e);
    --mw-grad-indigo: linear-gradient(135deg, #3730a3, #6366f1);
    --mw-grad-cyan:   linear-gradient(135deg, #0e7490, #22d3ee);
    --mw-grad-orange: linear-gradient(135deg, #c2410c, #f97316);
    --mw-grad-pink:   linear-gradient(135deg, #9d174d, #ec4899);

    /* Stat card surface colors */
    --mw-stat-green-bg:  linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    --mw-stat-green-bdr: #bbf7d0;
    --mw-stat-green-ico: #16a34a;
    --mw-stat-green-val: #15803d;

    --mw-stat-amber-bg:  linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    --mw-stat-amber-bdr: #fde68a;
    --mw-stat-amber-ico: #d97706;
    --mw-stat-amber-val: #b45309;

    --mw-stat-red-bg:    linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    --mw-stat-red-bdr:   #fecaca;
    --mw-stat-red-ico:   #dc2626;
    --mw-stat-red-val:   #b91c1c;

    --mw-stat-blue-bg:   linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    --mw-stat-blue-bdr:  #bfdbfe;
    --mw-stat-blue-ico:  #2563eb;
    --mw-stat-blue-val:  #1d4ed8;

    --mw-stat-violet-bg:  linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    --mw-stat-violet-bdr: #ddd6fe;
    --mw-stat-violet-ico: #7c3aed;
    --mw-stat-violet-val: #6d28d9;

    --mw-stat-teal-bg:  linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    --mw-stat-teal-bdr: #99f6e4;
    --mw-stat-teal-ico: #0d9488;
    --mw-stat-teal-val: #0f766e;
}

/* ════════════════════════════════════════════════════════════════════════════
   1. PAGE WRAPPER
   ════════════════════════════════════════════════════════════════════════════ */
.mw-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1600px;
    width: 100%;
    margin-inline: auto;
    /* No extra padding — MainLayout article already provides 16-24px */
    box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. PAGE HEADER  (icon + title + subtitle + optional right-side actions)
   ════════════════════════════════════════════════════════════════════════════ */
.mw-page-header {
    display: flex;
    align-items: center;        /* requirement 1: vertically centered */
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    min-height: 56px;           /* prevents jumping when no subtitle */
}

.mw-page-header__left {
    display: flex;
    align-items: center;        /* requirement 1: icon + text block centered */
    gap: 12px;
    min-width: 0;
    flex: 1 1 0;
}

/* Icon badge */
.mw-page-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;            /* requirement 7: never shrinks/overflows */
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    align-self: center;         /* requirement 1: stay centered in row */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    background: var(--mw-grad-indigo);
}

/* Color variants for page header icon */
.mw-page-header__icon--violet { background: var(--mw-grad-violet); box-shadow: 0 4px 12px rgba(109, 40, 217, 0.28); }
.mw-page-header__icon--teal   { background: var(--mw-grad-teal);   box-shadow: 0 4px 12px rgba(13, 148, 136, 0.28); }
.mw-page-header__icon--blue   { background: var(--mw-grad-blue);   box-shadow: 0 4px 12px rgba(29, 78, 216, 0.28); }
.mw-page-header__icon--rose   { background: var(--mw-grad-rose);   box-shadow: 0 4px 12px rgba(190, 18, 60, 0.28); }
.mw-page-header__icon--amber  { background: var(--mw-grad-amber);  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.28); }
.mw-page-header__icon--green  { background: var(--mw-grad-green);  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.28); }
.mw-page-header__icon--indigo { background: var(--mw-grad-indigo); box-shadow: 0 4px 12px rgba(55, 48, 163, 0.28); }
.mw-page-header__icon--cyan   { background: var(--mw-grad-cyan);   box-shadow: 0 4px 12px rgba(14, 116, 144, 0.28); }
.mw-page-header__icon--orange { background: var(--mw-grad-orange); box-shadow: 0 4px 12px rgba(194, 65, 12, 0.28); }
.mw-page-header__icon--pink   { background: var(--mw-grad-pink);   box-shadow: 0 4px 12px rgba(157, 23, 77, 0.28); }

.mw-page-header__text {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* requirement 1: text block centered */
    gap: 2px;
    min-width: 0;
    flex: 1 1 0;
}

.mw-page-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-page-header__subtitle {
    /* #64748b (slate-500) was ~4.4:1 on the header surface (fails AA); slate-600 → ~6:1. */
    font-size: 0.8125rem;
    color: #475569;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.mw-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-self: center;         /* requirement 1: actions vertically centered */
}

/* ════════════════════════════════════════════════════════════════════════════
   3. STATS / KPI GRID
   ════════════════════════════════════════════════════════════════════════════ */
.mw-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    /* requirement 9: aligns with header/table (same width) */
}

/* requirement 5: responsive — tablet */
@media (max-width: 1024px) {
    .mw-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* requirement 5: responsive — mobile */
@media (max-width: 575px) {
    .mw-stats-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* Base stat card */
.mw-stat-card {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 14px 16px;
    display: flex;
    align-items: center;        /* requirement 4: icon + body vertically centered */
    gap: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: transform 150ms ease, box-shadow 150ms ease;
    cursor: default;
    position: relative;
    overflow: hidden;
    min-width: 0;               /* requirement 7: prevent overflow in grid */
}

.mw-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}

/* Color variants */
.mw-stat-card--green  { background: var(--mw-stat-green-bg);  border-color: var(--mw-stat-green-bdr); }
.mw-stat-card--amber  { background: var(--mw-stat-amber-bg);  border-color: var(--mw-stat-amber-bdr); }
.mw-stat-card--red    { background: var(--mw-stat-red-bg);    border-color: var(--mw-stat-red-bdr); }
.mw-stat-card--blue   { background: var(--mw-stat-blue-bg);   border-color: var(--mw-stat-blue-bdr); }
.mw-stat-card--violet { background: var(--mw-stat-violet-bg); border-color: var(--mw-stat-violet-bdr); }
.mw-stat-card--teal   { background: var(--mw-stat-teal-bg);   border-color: var(--mw-stat-teal-bdr); }

/* Icon inside stat card */
.mw-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    color: #fff;
    font-size: 0.9rem;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mw-stat-card--green  .mw-stat-card__icon { background: var(--mw-grad-green);  }
.mw-stat-card--amber  .mw-stat-card__icon { background: var(--mw-grad-amber);  }
.mw-stat-card--red    .mw-stat-card__icon { background: var(--mw-grad-rose);   }
.mw-stat-card--blue   .mw-stat-card__icon { background: var(--mw-grad-blue);   }
.mw-stat-card--violet .mw-stat-card__icon { background: var(--mw-grad-violet); }
.mw-stat-card--teal   .mw-stat-card__icon { background: var(--mw-grad-teal);   }

.mw-stat-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mw-stat-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.mw-stat-card--green  .mw-stat-card__value { color: var(--mw-stat-green-val); }
.mw-stat-card--amber  .mw-stat-card__value { color: var(--mw-stat-amber-val); }
.mw-stat-card--red    .mw-stat-card__value { color: var(--mw-stat-red-val);   }
.mw-stat-card--blue   .mw-stat-card__value { color: var(--mw-stat-blue-val);  }
.mw-stat-card--violet .mw-stat-card__value { color: var(--mw-stat-violet-val); }
.mw-stat-card--teal   .mw-stat-card__value { color: var(--mw-stat-teal-val);  }

.mw-stat-card__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-stat-card__sub {
    font-size: 0.6875rem;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 1px;
}

/* ════════════════════════════════════════════════════════════════════════════
   4. FILTER BAR
   ════════════════════════════════════════════════════════════════════════════ */
.mw-filter-bar {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;          /* requirement 3: tighter vertical padding */
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.mw-filter-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: end;
}

/* requirement 5: responsive filter grid */
@media (max-width: 1024px) {
    .mw-filter-bar__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .mw-filter-bar__grid { grid-template-columns: 1fr; }
}

.mw-filter-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. TABLE CARD  (wraps N360Grid or standard table)
   ════════════════════════════════════════════════════════════════════════════ */
.mw-table-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.mw-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.mw-table-toolbar__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mw-table-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mw-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    flex-wrap: wrap;
}

.mw-table-footer__info {
    font-size: 0.8125rem;
    color: #64748b;
}

/* ════════════════════════════════════════════════════════════════════════════
   6. FORM CARD  (white card containing form sections — like Register.razor)
   ════════════════════════════════════════════════════════════════════════════ */
.mw-form-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    padding: 0;
    overflow: hidden;
}

/* ── Form Section ─────────────────────────────────────────────────────────── */
.mw-section {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.mw-section:last-of-type,
.mw-section--last {
    border-bottom: none;
}

.mw-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.mw-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 0.75rem;
    flex-shrink: 0;
    color: #fff;
    background: var(--mw-grad-indigo);
}

/* Section icon color variants */
.mw-section__icon--violet { background: var(--mw-grad-violet); }
.mw-section__icon--teal   { background: var(--mw-grad-teal); }
.mw-section__icon--blue   { background: var(--mw-grad-blue); }
.mw-section__icon--rose   { background: var(--mw-grad-rose); }
.mw-section__icon--amber  { background: var(--mw-grad-amber); }
.mw-section__icon--green  { background: var(--mw-grad-green); }
.mw-section__icon--indigo { background: var(--mw-grad-indigo); }
.mw-section__icon--cyan   { background: var(--mw-grad-cyan); }
.mw-section__icon--orange { background: var(--mw-grad-orange); }
.mw-section__icon--pink   { background: var(--mw-grad-pink); }

.mw-section__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.01em;
}

.mw-section__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Form Actions Bar ─────────────────────────────────────────────────────── */
.mw-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* ════════════════════════════════════════════════════════════════════════════
   7. STATUS BADGES  (inline pill labels for record status)
   ════════════════════════════════════════════════════════════════════════════ */
.mw-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mw-badge--active,
.mw-badge--success  { background: #dcfce7; color: #15803d; }
.mw-badge--inactive,
.mw-badge--default  { background: #f1f5f9; color: #475569; }
.mw-badge--pending,
.mw-badge--warning  { background: #fef3c7; color: #b45309; }
.mw-badge--danger,
.mw-badge--error    { background: #fee2e2; color: #b91c1c; }
.mw-badge--info,
.mw-badge--primary,
.mw-badge--blue     { background: #dbeafe; color: #1d4ed8; }
.mw-badge--violet   { background: #ede9fe; color: #6d28d9; }
.mw-badge--indigo   { background: #e0e7ff; color: #4338ca; }
.mw-badge--teal     { background: #ccfbf1; color: #0f766e; }
.mw-badge--amber    { background: #fef3c7; color: #b45309; }

/* Dot indicator */
.mw-badge::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   8. EXPORT BUTTONS
   ════════════════════════════════════════════════════════════════════════════ */
.mw-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 34px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 7px;
    border: 1px solid;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
    text-decoration: none;
}

.mw-export-btn--excel {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}
.mw-export-btn--excel:hover {
    background: #dcfce7;
    box-shadow: 0 2px 6px rgba(22, 101, 52, 0.15);
    color: #14532d;
}

.mw-export-btn--pdf {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}
.mw-export-btn--pdf:hover {
    background: #fee2e2;
    box-shadow: 0 2px 6px rgba(153, 27, 27, 0.15);
    color: #7f1d1d;
}

/* ════════════════════════════════════════════════════════════════════════════
   9. GLOBAL PAGE SURFACE IMPROVEMENTS
      (apply automatically without requiring .mw-* class changes)
   ════════════════════════════════════════════════════════════════════════════ */

/* Content area: article scoped CSS controls padding;
   this rule exists as a fallback for non-MainLayout pages only. */
.content {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Breadcrumb refinement */
.breadcrumb {
    font-size: 0.8125rem;
    color: #64748b;
    margin-bottom: 0.25rem;
    background: transparent;
    padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #94a3b8;
}

.breadcrumb-item.active {
    color: #1e293b;
    font-weight: 500;
}

.breadcrumb-item a {
    color: #64748b;
    text-decoration: none;
    transition: color 120ms ease;
}

.breadcrumb-item a:hover {
    color: #6d28d9;
    text-decoration: none;
}

/* ── N360 component global polish ──────────────────────────────────────────── */

/* Labels of date/time pickers (.n360-label) and form labels, sized like N360TextBox / N360Select
   labels (.n360-textbox__label / .n360-select__label: 0.875rem, 0.25rem below). This rule used to
   set 0.8125rem / 0.375rem, which made every date label smaller and lower than its neighbours. */
.n360-label,
.n360-form-label {
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    margin-bottom: 0.25rem !important;
}

/* Required asterisk color. #ef4444 measured 3.54:1 on the #f7f8fa form surface, below the 4.5:1
   the asterisk needs as the only visible 'required' cue; #c62828 is 5.29:1 there and 5.62:1 on white. */
.n360-required-indicator {
    color: #c62828 !important;
}

/* Consistent input min-height */
.e-input-group,
.e-float-input.e-input-group {
    min-height: 2.5rem;
}

/* N360Grid — row hover highlight */
.n360-grid .e-row:hover .e-rowcell,
.e-grid .e-row:hover .e-rowcell {
    background-color: #f5f3ff !important;
}

/* N360PageHeader — consistent 16px spacing below, reduce excess top gap */
.n360-page-header {
    margin-bottom: 16px;
}

/* Override the component's 20px padding to a compact 10px/8px */
.n360-page-header .page-header-container {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
}

/* Compact title: 32px → 1.375rem (22px) with plain dark color instead of gradient */
.n360-page-header .page-title {
    font-size: 1.375rem !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--n360-color-neutral-900, #0f172a) !important;
    background-clip: unset !important;
    color: var(--n360-color-neutral-900, #0f172a) !important;
}

/* Tighten title-row bottom gap */
.n360-page-header .page-title-row {
    margin-bottom: 2px !important;
}

/* Compact description/subtitle */
.n360-page-header .page-description {
    font-size: 0.8125rem;
    color: var(--n360-color-neutral-500, #64748b);
    margin: 0;
}

/* N360Card — consistent border radius */
.n360-card {
    border-radius: 12px !important;
    border-color: #e2e8f0 !important;
}

/* N360Button size standardization */
.n360-button {
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
}

/* Smooth transitions on interactive elements */
.n360-button,
.btn,
.e-btn,
.form-control,
.form-select,
.e-input-group {
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease;
}

/* ── N360Breadcrumb: compact vertical spacing before page header ─────────── */
.n360-breadcrumb {
    margin-bottom: 4px !important;
}

/* Breadcrumb text inside N360Breadcrumb component */
.n360-breadcrumb .breadcrumb-list {
    font-size: 0.8125rem;
}

/* ── N360Card on slate background: amplify box-shadow for depth ─────────── */
/* When the page bg is #f5f7fb, plain white cards need a clearer shadow lift */
.n360-card,
.n360-card.pa-4,
.n360-card[class*="pa-4"] {
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.07),
        0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.n360-card:hover {
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.10),
        0 1px 4px rgba(15, 23, 42, 0.06) !important;
}

/* ── TopBar logo+title alignment: ensure 35px flex row is always centered ── */
/* (additional guard in case the scoped rule doesn't apply everywhere) */
.top-row {
    align-items: center !important;
}

.top-row-left,
.top-row-center,
.top-row-right {
    align-items: center !important;
}

/* ── Prevent section header icon circles from shifting layout on load ─────── */
.ho-form-section-icon,
.mw-page-header__icon,
.mw-stat-card__icon,
.mw-section__icon {
    flex-shrink: 0;
    align-self: center;
}

/* ── Stat card: ensure icon is always vertically aligned with body ─────────── */
.mw-stat-card {
    align-items: center;        /* requirement 4: vertically align icon + body */
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE: HEADER WRAPPING ON NARROW SCREENS
   (requirement 5, 6, 7)
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet (≤767px): wrap actions below title, keep centered */
@media (max-width: 767px) {
    .mw-page-header {
        gap: 10px;
        padding-bottom: 12px;
    }

    .mw-page-header__title {
        font-size: 1.125rem;
        white-space: normal;        /* allow wrap instead of ellipsis */
    }

    .mw-page-header__subtitle {
        white-space: normal;
        font-size: 0.75rem;
    }

    .mw-page-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* requirement 3: tighter gap on tablet */
    .mw-page { gap: 12px; }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
    .mw-page-header__icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .mw-page-header__title { font-size: 1rem; }

    .mw-table-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
    }

    /* requirement 6: consistent 16px max spacing on mobile */
    .mw-page { gap: 10px; }
}

/* ── Settings layout: stack on tablet ─────────────────────────────────────── */
@media (max-width: 768px) {
    .mw-settings-layout {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   10. ANALYTICS / DASHBOARD UTILITY PATTERNS
   ════════════════════════════════════════════════════════════════════════════ */

/* Two-column grid for side-by-side cards (analytics detail rows) */
.mw-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 767px) {
    .mw-two-col { grid-template-columns: 1fr; }
}

/* Key-value row inside detail cards (label + value on same line) */
.mw-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    color: #334155;
    min-width: 0;
}

.mw-kv-row:last-child { border-bottom: none; }

.mw-kv-row > span {
    flex: 1 1 0;
    min-width: 0;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-kv-row > strong,
.mw-kv-row > div {
    flex-shrink: 0;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
}

/* Branch statistics 3-up row */
.mw-branch-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 4px 0;
}

.mw-branch-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    text-align: center;
    border-right: 1px solid #f1f5f9;
}

.mw-branch-stat:last-child { border-right: none; }

.mw-branch-stat__value {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.mw-branch-stat__label {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 4px;
    font-weight: 400;
}

@media (max-width: 575px) {
    .mw-branch-stats { grid-template-columns: 1fr; }
    .mw-branch-stat { border-right: none; border-bottom: 1px solid #f1f5f9; padding: 14px 16px; }
    .mw-branch-stat:last-child { border-bottom: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   11. CLASSIC DASHBOARD PAGE PATTERNS
   ════════════════════════════════════════════════════════════════════════════ */
.mw-dashboard {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mw-dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mw-dashboard-section__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mw-dashboard-section__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ════════════════════════════════════════════════════════════════════════════
   11. SETTINGS PAGE PATTERNS
   ════════════════════════════════════════════════════════════════════════════ */
.mw-settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
    /* responsive handled in global responsive block above */
}

.mw-settings-nav {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.mw-settings-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
}

.mw-settings-nav__item:last-child {
    border-bottom: none;
}

.mw-settings-nav__item:hover {
    background: #f8fafc;
    color: #6d28d9;
}

.mw-settings-nav__item--active {
    background: #f5f3ff;
    color: #6d28d9;
    border-left-color: #7c3aed;
    font-weight: 600;
}

.mw-settings-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ════════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .mw-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mw-filter-bar__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .mw-settings-layout {
        grid-template-columns: 180px 1fr;
    }
}

@media (max-width: 991px) {
    .mw-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .mw-filter-bar__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mw-section {
        padding: 16px 20px;
    }

    .mw-actions {
        padding: 14px 20px;
    }

    .mw-settings-layout {
        grid-template-columns: 1fr;
    }

    .mw-settings-nav {
        display: flex;
        flex-wrap: wrap;
        border-radius: 8px;
    }

    .mw-settings-nav__item {
        border-bottom: none;
        border-left: none;
        border-bottom: 3px solid transparent;
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: 0.8125rem;
    }

    .mw-settings-nav__item--active {
        border-bottom-color: #7c3aed;
        border-left: none;
    }
}

@media (max-width: 767px) {
    .mw-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 12px;
    }

    .mw-page-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .mw-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .mw-filter-bar__grid {
        grid-template-columns: 1fr;
    }

    .mw-section {
        padding: 14px 16px;
    }

    .mw-section__body {
        gap: 10px;
    }

    .mw-actions {
        padding: 14px 16px;
    }

    .mw-table-toolbar {
        padding: 10px 12px;
    }
}

@media (max-width: 575px) {
    .mw-page {
        gap: 12px;
    }

    .mw-page-header__icon {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }

    .mw-page-header__title {
        font-size: 1.0625rem;
    }

    .mw-page-header__subtitle {
        display: none;
    }

    /* requirement 5: single-column stats on small mobile */
    .mw-stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mw-stat-card {
        padding: 10px 12px;
    }

    .mw-stat-card__value {
        font-size: 1.25rem;
    }

    .mw-section {
        padding: 12px;
    }

    .mw-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 12px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   13. MODULE NAVIGATION GRID
   — Responsive 4-column button grid used on module dashboard/index pages.
   Usage: <div class="mw-module-grid"> … N360Button FullWidth … </div>
   ════════════════════════════════════════════════════════════════════════════ */
.mw-module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 1199px) {
    .mw-module-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .mw-module-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .mw-module-grid { grid-template-columns: 1fr; }
}

/* Compact section header used inside module cards */
.mw-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════════════════════════════
   14. STATS GRID VARIANTS
   ════════════════════════════════════════════════════════════════════════════ */

/* 6-column stats — emergency department, ICU, high-density dashboards */
.mw-stats-grid--6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

@media (max-width: 1199px) {
    .mw-stats-grid--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .mw-stats-grid--6 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

@media (max-width: 480px) {
    .mw-stats-grid--6 { grid-template-columns: 1fr; }
}

/* 3-column stats — narrow dashboards, sidebars, detail pages */
.mw-stats-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 767px) {
    .mw-stats-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 480px) {
    .mw-stats-grid--3 { grid-template-columns: 1fr; }
}

/* 2-column stats — wide cards, comparison views */
.mw-stats-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 480px) {
    .mw-stats-grid--2 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   15. TWO-COLUMN PAGE LAYOUT
   — Used for detail/edit pages with a main content area and a sidebar.
   ════════════════════════════════════════════════════════════════════════════ */

/* Main + sidebar layout (8/4 split on desktop) */
.mw-detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: start;
}

.mw-detail-layout--wide {
    grid-template-columns: 1fr 400px;
}

@media (max-width: 1199px) {
    .mw-detail-layout,
    .mw-detail-layout--wide { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   16. VERTICAL CARD STACK
   — Wraps a sequence of cards/sections with consistent spacing.
      Replaces ad-hoc mb-4 on every card.
   ════════════════════════════════════════════════════════════════════════════ */
.mw-card-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mw-card-stack--tight {
    gap: 10px;
}

.mw-card-stack--loose {
    gap: 20px;
}

/* ════════════════════════════════════════════════════════════════════════════
   17. CARD SECTION HEADER
   — Compact header inside a card for sub-sections (ward operations, etc.)
   ════════════════════════════════════════════════════════════════════════════ */
.mw-card-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
}

/* ════════════════════════════════════════════════════════════════════════════
   18. DASHBOARD CARDS GRID
   — Responsive card grid for "My Dashboards" / shared items with 3-col layout
   ════════════════════════════════════════════════════════════════════════════ */
.mw-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 1199px) {
    .mw-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .mw-cards-grid { grid-template-columns: 1fr; }
}

/* Card item inside mw-cards-grid */
.mw-cards-grid__item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mw-cards-grid__item .n360-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ════════════════════════════════════════════════════════════════════════════
   19. GLOBAL N360ROW IMPROVEMENTS
   — Override n360-row to add vertical row gap so stacked columns don't touch
   ════════════════════════════════════════════════════════════════════════════ */
.n360-row {
    row-gap: 12px;
}

/* Zero out row-gap for rows that are pure horizontal (single-row layouts) */
.n360-row--no-gap {
    row-gap: 0;
}

/* Tight vertical gap */
.n360-row--gap-sm {
    row-gap: 8px;
}

/* Larger vertical gap */
.n360-row--gap-lg {
    row-gap: 20px;
}

/* ════════════════════════════════════════════════════════════════════════════
   20. CONTENT AREA MAX-WIDTH AUTO-CENTER
   — When .mw-page is not used on a page, this ensures the article content
     still gets a reasonable reading width on very wide screens.
   ════════════════════════════════════════════════════════════════════════════ */
.content {
    max-width: 1800px;
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   MwToastContainer� global toast notifications
   ========================================================= */
.mw-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: 380px;
    pointer-events: none;
}

.mw-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    border-left: 4px solid transparent;
    pointer-events: all;
    animation: mw-toast-in .25s ease-out both;
    font-size: 13.5px;
    line-height: 1.45;
    color: #1e293b;
}

.mw-toast-removing {
    animation: mw-toast-out .3s ease-in both;
}

@keyframes mw-toast-in {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes mw-toast-out {
    from { opacity: 1; transform: translateX(0); max-height: 200px; }
    to   { opacity: 0; transform: translateX(40px); max-height: 0; padding: 0; margin: 0; }
}

.mw-toast-success { border-left-color: #22c55e; }
.mw-toast-error   { border-left-color: #ef4444; }
.mw-toast-warning { border-left-color: #f59e0b; }
.mw-toast-info    { border-left-color: #3b82f6; }

.mw-toast-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}
.mw-toast-success .mw-toast-icon { color: #22c55e; }
.mw-toast-error   .mw-toast-icon { color: #ef4444; }
.mw-toast-warning .mw-toast-icon { color: #f59e0b; }
.mw-toast-info    .mw-toast-icon { color: #3b82f6; }

.mw-toast-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mw-toast-title {
    font-weight: 600;
    font-size: 13px;
}

.mw-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    align-self: flex-start;
    transition: color .15s;
}
.mw-toast-close:hover { color: #475569; }