/* ============================================================================
   MedWay — Hospital Onboarding Module: Shared Design System
   ----------------------------------------------------------------------------
   Global (non-scoped) CSS for all Hospital Onboarding pages.
   Provides consistent stat-card anatomy, section headers, and responsive
   layout helpers so inline styles can be removed from page markup.
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
   1. STAT CARD INNER ANATOMY
      Usage inside N360Card wrappers on all HO pages.
      <div class="ho-stat-item">
          <div class="ho-stat-icon ho-stat-icon--primary">
              <N360Icon Name="…" />
          </div>
          <div class="ho-stat-body">
              <div class="ho-stat-value ho-stat-value--primary">42</div>
              <div class="ho-stat-label">Total Hospitals</div>
          </div>
      </div>
   ════════════════════════════════════════════════════════════════════════════ */

.ho-stat-item {
    display: flex;
    align-items: center;
    gap: 0;                    /* icon provides its own right-margin */
}

/* ── Icon circle / badge ─────────────────────────────────────────────────── */
.ho-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    font-size: 1.5rem;         /* material-icon size inside */
}

.ho-stat-icon--primary { background: rgba(25,  118, 210, 0.10); color: var(--n360-color-primary,   #1976d2); }
.ho-stat-icon--success { background: rgba(46,  125,  50, 0.10); color: var(--n360-color-success,   #388e3c); }
.ho-stat-icon--warning { background: rgba(245, 124,   0, 0.10); color: var(--n360-color-warning,   #f57c00); }
.ho-stat-icon--info    { background: rgba(  2, 136, 209, 0.10); color: var(--n360-color-info,      #0288d1); }
.ho-stat-icon--error   { background: rgba(211,  47,  47, 0.10); color: var(--n360-color-error,     #d32f2f); }
.ho-stat-icon--violet  { background: rgba(123,  31, 162, 0.10); color: #7b1fa2; }
.ho-stat-icon--teal    { background: rgba( 13, 148, 136, 0.10); color: #0d9488; }

/* ── Body text ───────────────────────────────────────────────────────────── */
.ho-stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ho-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n360-color-secondary, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ho-stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.ho-stat-value--primary { color: var(--n360-color-primary, #1976d2); }
.ho-stat-value--success { color: var(--n360-color-success, #388e3c); }
.ho-stat-value--warning { color: var(--n360-color-warning, #f57c00); }
.ho-stat-value--info    { color: var(--n360-color-info,    #0288d1); }
.ho-stat-value--error   { color: var(--n360-color-error,   #d32f2f); }
.ho-stat-value--violet  { color: #7b1fa2; }
.ho-stat-value--teal    { color: #0d9488; }

/* ════════════════════════════════════════════════════════════════════════════
   2. CARD SECTION HEADERS  (.ho-card-header)
      Consistent h5/h6 + icon row inside N360Card panels.
   ════════════════════════════════════════════════════════════════════════════ */

.ho-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.ho-card-header--between {
    justify-content: space-between;
}

.ho-card-header .material-icons,
.ho-card-header .n360-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    color: var(--n360-color-primary, #1976d2);
}

/* ════════════════════════════════════════════════════════════════════════════
   3. BRANCH / ENTITY CARD  (cards in kanban-style grid layouts)
   ════════════════════════════════════════════════════════════════════════════ */

/* Entity icon avatar (branch, facility, etc.) */
.ho-entity-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(25, 118, 210, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--n360-color-primary, #1976d2);
}

.ho-entity-card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   4. EMPTY-STATE PANELS
   ════════════════════════════════════════════════════════════════════════════ */
.ho-empty-state {
    padding: 3rem 2rem;
    text-align: center;
}

.ho-empty-state .ho-empty-icon {
    font-size: 3.5rem;
    opacity: 0.55;
    margin-bottom: 0.75rem;
}

.ho-empty-state h5 {
    margin-bottom: 0.25rem;
}

.ho-empty-state p {
    color: var(--n360-color-secondary, #6c757d);
    margin-bottom: 1rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. ONBOARDING WIZARD  (step indicator enhancements)
   ════════════════════════════════════════════════════════════════════════════ */

.ho-wizard-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.ho-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    min-width: 64px;
}

.ho-wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    color: #fff;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.ho-wizard-step:hover .ho-wizard-step-circle {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.ho-wizard-step-label {
    font-size: 0.6875rem;
    color: var(--n360-color-secondary, #6c757d);
    text-align: center;
    line-height: 1.2;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ho-wizard-step-label--active {
    color: var(--n360-color-primary, #1976d2);
    font-weight: 600;
}

/* Progress track */
.ho-wizard-progress-track {
    display: flex;
    gap: 4px;
    margin-bottom: 0.75rem;
    margin-top: 4px;
}

.ho-wizard-progress-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    min-width: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   6. RESPONSIVE — Stat card grids for HO pages
      n360-col grid used throughout; these ensure proper stacking on mobile.
   ════════════════════════════════════════════════════════════════════════════ */

/* Ensure stat N360Cards stretch equally in row context */
.ho-stats-row .n360-col > * {
    height: 100%;
}

/* Push N360Card content to fill height */
.ho-stats-row .n360-card {
    height: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   7. FORM SECTION TITLES  (standardized within N360Card form blocks)
   ════════════════════════════════════════════════════════════════════════════ */

.ho-form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.ho-form-section-title .material-icons,
.ho-form-section-title .n360-icon {
    font-size: 1.1rem;
    color: var(--n360-color-primary, #1976d2);
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   8. ACTION ROWS  (consistent bottom action bar for forms and cards)
   ════════════════════════════════════════════════════════════════════════════ */

.ho-action-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

/* ════════════════════════════════════════════════════════════════════════════
   9. FILTER / TOOLBAR ROW
   ════════════════════════════════════════════════════════════════════════════ */

.ho-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ho-toolbar__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.ho-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   10. SUBSCRIPTION PLAN CARD PRICING
   ════════════════════════════════════════════════════════════════════════════ */

.ho-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 0.75rem;
}

.ho-plan-price__amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--n360-color-primary, #1976d2);
    line-height: 1;
}

.ho-plan-price__period {
    font-size: 0.8125rem;
    color: var(--n360-color-secondary, #6c757d);
}

.ho-plan-feature-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    padding: 3px 0;
}

.ho-plan-feature-row + .ho-plan-feature-row {
    border-top: 1px solid #f8fafc;
}

/* ════════════════════════════════════════════════════════════════════════════
   11. RESPONSIVE BREAKPOINTS (HO-specific overrides)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* On mobile make stat value text slightly smaller */
    .ho-stat-value {
        font-size: 1.5rem;
    }

    .ho-stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin-right: 10px;
        font-size: 1.25rem;
    }

    /* Stack toolbar on mobile */
    .ho-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .ho-toolbar__actions {
        width: 100%;
    }

    /* Wizard steps: allow wrapping and reduce label size */
    .ho-wizard-step-label {
        font-size: 0.625rem;
        max-width: 60px;
    }

    .ho-wizard-step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.8125rem;
    }

    /* Action rows stack on mobile */
    .ho-action-row {
        justify-content: stretch;
    }

    .ho-action-row > * {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 575px) {
    /* Full-width stat items on XS screens */
    .ho-stat-icon {
        width: 36px;
        height: 36px;
    }

    .ho-stat-value {
        font-size: 1.35rem;
    }

    .ho-form-section-title {
        font-size: 0.875rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   12. NAVIGATION CARD PANELS
       Modern sidebar-style nav lists replacing button grids.
       Usage: <N360Card Class="ho-nav-card"><div class="ho-nav-card-header">…
              <div class="ho-nav-list"><a class="ho-nav-item">…
   ════════════════════════════════════════════════════════════════════════════ */

/* Strip N360Card default padding so we fully own the layout */
.ho-nav-card {
    padding: 0 !important;
}

/* Section header row inside the nav card */
.ho-nav-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.01em;
    margin: 0;
}

/* Colored icon badge in the nav card header */
.ho-nav-card-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 1rem;
    flex-shrink: 0;
}

.ho-nav-card-header-icon--primary { background: rgba(25, 118, 210, 0.12); color: #1976d2; }
.ho-nav-card-header-icon--info    { background: rgba(  2, 136, 209, 0.12); color: #0288d1; }

/* Container for nav items */
.ho-nav-list {
    display: flex;
    flex-direction: column;
    padding: 6px 8px 8px;
    gap: 1px;
}

/* Single navigation row */
.ho-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none !important;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    line-height: 1.3;
}

.ho-nav-item:hover {
    background: rgba(25, 118, 210, 0.07);
    color: #1976d2;
    text-decoration: none !important;
}

.ho-nav-item:hover .ho-nav-item-arrow {
    opacity: 0.6;
}

/* Small colored icon pill inside nav item */
.ho-nav-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 0.875rem;
    flex-shrink: 0;
    line-height: 1;
}

.ho-nav-item-icon--primary { background: rgba(25, 118, 210, 0.10); color: #1976d2; }
.ho-nav-item-icon--warning { background: rgba(245, 124,   0, 0.12); color: #f57c00; }
.ho-nav-item-icon--info    { background: rgba(  2, 136, 209, 0.10); color: #0288d1; }
.ho-nav-item-icon--teal    { background: rgba( 13, 148, 136, 0.10); color: #0d9488; }

/* Text label — grows to push badge + arrow to right */
.ho-nav-item-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge for pending count etc. */
.ho-nav-item-badge {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 4px;
}

/* Chevron arrow — subtle, brightens on hover */
.ho-nav-item-arrow {
    font-size: 1rem !important;
    opacity: 0.28;
    flex-shrink: 0;
    transition: opacity 120ms ease;
}

/* ════════════════════════════════════════════════════════════════════════════
   13. REGISTERED HOSPITALS TABLE CARD
   ════════════════════════════════════════════════════════════════════════════ */

.ho-table-card {
    padding: 0 !important;
    overflow: hidden;
}

/* Sticky header bar above the table */
.ho-table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    gap: 10px;
}

.ho-table-card-title {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    gap: 0;
}

/* Horizontal scroll wrapper for responsive table */
.ho-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════════════════════════════════
   14. ENTERPRISE DASHBOARD TABLE  (.ho-dashboard-table)
       Replaces n360-table--striped; compact, modern, no-border rows.
   ════════════════════════════════════════════════════════════════════════════ */

.ho-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ho-dashboard-table thead tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.ho-dashboard-table th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;
    padding: 9px 14px;
    white-space: nowrap;
    text-align: left;
    background: #fafbfc;
}

.ho-dashboard-table td {
    color: #374151;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.045);
    vertical-align: middle;
}

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

.ho-dashboard-table tbody tr:hover td {
    background: rgba(25, 118, 210, 0.028);
}

/* Hospital name — bold, never shrinks below readable width */
.ho-table-name-cell {
    min-width: 140px;
}

.ho-table-name-cell strong {
    font-weight: 600;
    color: #1e293b;
}

/* Reg number in monospace */
.ho-table-mono {
    font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
}

/* Email — truncate if very long */
.ho-table-email {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Date — compact, no wrap */
.ho-table-date {
    white-space: nowrap;
    color: #6b7280;
    font-size: 0.8125rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   15. TABLE ACTION BUTTON GROUP
       Icon-only compact buttons; never wraps to second line.
   ════════════════════════════════════════════════════════════════════════════ */

.ho-table-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: flex-end;
}

/* Force all N360Buttons inside action cell to icon-only 32×32 size */
.ho-table-actions .n360-button,
.ho-table-actions .e-btn {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Last column (Actions header) right-aligned */
.ho-dashboard-table th:last-child,
.ho-dashboard-table td:last-child {
    text-align: right;
    width: 1%;           /* shrink to content */
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE OVERRIDES FOR NEW COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .ho-nav-card-header {
        padding: 12px 14px 10px;
    }

    .ho-nav-item {
        padding: 8px 8px;
        font-size: 0.8125rem;
    }

    .ho-nav-item-icon {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }

    .ho-table-card-header {
        padding: 10px 12px;
    }

    .ho-dashboard-table th {
        padding: 8px 10px;
    }

    .ho-dashboard-table td {
        padding: 9px 10px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   17. FORM SECTION HEADERS  (.ho-form-section-header)
       Used in HospitalRegistration and other form pages.
       Replaces inconsistent raw <h5> tags.
   ════════════════════════════════════════════════════════════════════════════ */

.ho-form-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
}

/* Sections after the first get a top border separator */
.ho-form-section-header--separator {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* Colored icon pill — matches nav card header icons */
.ho-form-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 1rem;
}

.ho-form-section-icon--primary  { background: rgba(25, 118, 210, 0.12); color: #1976d2; }
.ho-form-section-icon--teal     { background: rgba(0,  150, 136, 0.12); color: #00897b; }
.ho-form-section-icon--info     { background: rgba(2,  136, 209, 0.12); color: #0288d1; }
.ho-form-section-icon--warning  { background: rgba(237,108,   2, 0.12); color: #e65100; }

/* ════════════════════════════════════════════════════════════════════════════
   18. GLOBAL MODULE POLISH
       Enterprise-grade visual system applied across ALL HO pages.
       Typography, card consistency, DataGrid refinement, spacing.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Stat card: tighten value/label gap for compact feel ── */
.ho-stat-value {
    font-size: 1.65rem;
}

/* ── Card padding normalization: pa-4 cards get consistent inner spacing ── */
.n360-card.pa-4,
.n360-card[class*="pa-4"] {
    padding: 18px 20px !important;
}

/* ── DataGrid: consistent header typography ── */
.ho-module-grid .e-gridheader th,
.n360-data-grid .e-gridheader th {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #94a3b8 !important;
    background: #fafbfc !important;
    padding: 9px 14px !important;
    white-space: nowrap;
}

.ho-module-grid .e-rowcell,
.n360-data-grid .e-rowcell {
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(0,0,0,0.045) !important;
}

.ho-module-grid .e-row:hover .e-rowcell,
.n360-data-grid .e-row:hover .e-rowcell {
    background: rgba(25, 118, 210, 0.028) !important;
}

/* ── DataGrid action cell: keep buttons in one row ── */
.n360-data-grid .e-rowcell:last-child,
.ho-module-grid .e-rowcell:last-child {
    text-align: right;
    white-space: nowrap;
}

/* ── Compact icon-only action buttons inside grid/table ── */
.ho-table-actions .n360-button,
.ho-table-actions .e-btn,
.n360-data-grid .ho-table-actions .n360-button {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Page-level vertical rhythm: consistent spacing below PageHeader ── */
.n360-page-header + *,
.n360-breadcrumb + .n360-page-header + * {
    margin-top: 0 !important;
}

/* ── Stats row: equal height cards with no bottom gap on last row ── */
.ho-stats-row {
    margin-bottom: 16px !important;
}

.ho-stats-row .n360-col {
    margin-bottom: 0;
}

/* ── Branch / entity card grid: uniform card height ── */
[data-testid="branch-list"] .n360-card,
[data-testid="facility-list"] .n360-card,
[data-testid="doctor-list"] .n360-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Entity card footer: push to bottom ── */
.ho-entity-card-footer {
    margin-top: auto;
}

/* ── Progress card header row alignment ── */
.n360-card .d-flex.align-center.justify-between {
    align-items: center !important;
}

/* ── N360Chip size normalization inside headers ── */
.ho-table-card-title .n360-chip,
.ho-form-section-header .n360-chip {
    font-size: 0.6875rem !important;
    height: 20px !important;
    line-height: 20px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
}

/* ── Loading spinner centering ── */
.n360-card .pa-6.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    gap: 12px;
}

/* ── Reject dialog action row ── */
.n360-dialog .d-flex.align-items-center.justify-end.gap-2 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 16px !important;
}

/* ── Typography consistency: page-level h5 inside cards ── */
.n360-card h5 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.n360-card h6 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

/* ── Card body text ── */
.n360-card p.text-secondary,
.n360-card .text-body-2 {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

/* ── Responsive: single-column grid on mobile for entity cards ── */
@media (max-width: 767px) {
    [data-testid="branch-list"] .n360-col,
    [data-testid="facility-list"] .n360-col {
        margin-bottom: 12px;
    }

    .ho-form-section-header--separator {
        margin-top: 20px;
        padding-top: 16px;
    }

    .n360-card.pa-4,
    .n360-card[class*="pa-4"] {
        padding: 14px 16px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   19. CARD GRID ACTION FOOTER  (.ho-card-footer-actions)
       Standardised footer row inside entity/plan/facility cards.
   ════════════════════════════════════════════════════════════════════════════ */

.ho-card-footer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding-top: 12px;
    margin-top: 8px;
}

/* Table-card header with filter slot on the right */
.ho-table-card-header > div[data-testid],
.ho-table-card-header > .n360-select,
.ho-table-card-header .d-flex.gap-2 {
    margin-left: auto;
}

/* ── Analytics dashboard: compact h3 inside branch-stats ── */
.ho-analytics-stat {
    text-align: center;
    padding: 12px 8px;
}
.ho-analytics-stat h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 4px;
}
.ho-analytics-stat span {
    font-size: 0.8125rem;
    color: #64748b;
}