/*
 * Soft Ledger site theme
 * Light, high-legibility 3D surface layer for the Yaha PCT PHP site.
 *
 * Activation contract:
 *   html.sl-theme.sl-layout-<entry|menu|table|form|profile|analytics|roster>
 *   html.sl-theme.sl-page-<slug>
 *   html.sl-theme.sl-app-hoshome / html.sl-theme.sl-app-posn for standalone apps
 *
 * Safety contract:
 *   - Every selector is opt-in through html.sl-theme.
 *   - The existing doctor roster redesign is excluded through sl-layout-roster.
 *   - This layer does not control visibility/state, stacking, scrolling, sticky
 *     behaviour, or chart dimensions.
 */

html.sl-theme:not(.sl-layout-roster) {
    color-scheme: light;
    --sl-bg: #f4f8fb;
    --sl-surface: #ffffff;
    --sl-surface-soft: #f9fbfd;
    --sl-surface-teal: #effaf7;
    --sl-surface-blue: #f1f6fd;
    --sl-surface-rose: #fff4f7;
    --sl-ink: #1f3440;
    --sl-ink-soft: #526772;
    --sl-muted: #647780;
    --sl-line: #dce8ec;
    --sl-line-strong: #bfd2d8;
    --sl-teal: #147d74;
    --sl-teal-dark: #0a5d56;
    --sl-teal-soft: #ddf5f0;
    --sl-blue: #3976c5;
    --sl-blue-dark: #245997;
    --sl-blue-soft: #e4effd;
    --sl-rose: #b75070;
    --sl-rose-dark: #87324f;
    --sl-rose-soft: #fbe6ed;
    --sl-gold: #9a711e;
    --sl-gold-soft: #fff3cf;
    --sl-danger: #9f1239;
    --sl-danger-soft: #fff1f4;
    --sl-success: #116149;
    --sl-success-soft: #e8f8f2;
    --sl-focus: #2563eb;
    --sl-radius-sm: 10px;
    --sl-radius-md: 16px;
    --sl-radius-lg: 24px;
    --sl-shadow-control: 0 1px 1px rgba(23, 55, 68, .07), 0 5px 11px rgba(35, 72, 86, .10), inset 0 1px 0 rgba(255, 255, 255, .96);
    --sl-shadow-1: 0 1px 2px rgba(21, 46, 57, .05), 0 8px 20px rgba(34, 72, 85, .08), inset 0 1px 0 rgba(255, 255, 255, .94);
    --sl-shadow-2: 0 2px 4px rgba(21, 46, 57, .06), 0 17px 40px rgba(34, 72, 85, .11), inset 0 1px 0 rgba(255, 255, 255, .97);
    --sl-shadow-float: 0 8px 22px rgba(25, 48, 58, .14), 0 30px 72px rgba(25, 48, 58, .17), inset 0 1px 0 rgba(255, 255, 255, .97);
    --sl-ease: cubic-bezier(.2, .72, .2, 1);
}

/* Foundation */
html.sl-theme:not(.sl-layout-roster) body {
    background-color: var(--sl-bg);
    background-image:
        radial-gradient(circle at 7% 3%, rgba(179, 238, 226, .46) 0, rgba(179, 238, 226, 0) 25rem),
        radial-gradient(circle at 93% 7%, rgba(197, 220, 252, .43) 0, rgba(197, 220, 252, 0) 28rem),
        radial-gradient(circle at 78% 94%, rgba(255, 222, 232, .34) 0, rgba(255, 222, 232, 0) 30rem),
        linear-gradient(145deg, #f6fbfd 0%, #f8fcfa 49%, #fffaf8 100%);
    color: var(--sl-ink);
    font-family: Tahoma, "Leelawadee UI", "Noto Sans Thai", Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

html.sl-theme:not(.sl-layout-roster) :where(h1, h2, h3, h4, .title, .page-title, .panel-title, .topbar-title, .app-main-title, .card-title) {
    color: var(--sl-ink);
    text-wrap: balance;
}

html.sl-theme:not(.sl-layout-roster) :where(.muted, .mut, .hxr-muted, .muted-text, .panel-subtitle, .brand-subtitle, .topbar-meta, .app-main-meta, .page-meta, .menu-card-desc) {
    color: var(--sl-muted);
}

html.sl-theme:not(.sl-layout-roster) :where(a, button, input, select, textarea) {
    font-family: inherit;
}

html.sl-theme:not(.sl-layout-roster) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(37, 99, 235, .82);
    outline-offset: 3px;
}

html.sl-theme:not(.sl-layout-roster) :where(a, button, .menu-card, .doctor-list-item, .card) {
    -webkit-tap-highlight-color: rgba(20, 125, 116, .13);
}

/* Shared raised surfaces */
html.sl-theme:not(.sl-layout-roster) :where(
    .panel,
    .card,
    .login-card,
    .dashboard-panel,
    .form-panel,
    .info-panel,
    .table-panel,
    .summary-panel,
    .summary-card,
    .chart-card,
    .menu-card,
    .table-card,
    .filter-card,
    .ranking-panel,
    .timeline-card,
    .start-summary-panel,
    .hxr-card,
    .lab-control-panel,
    .doctor-directory-card,
    .doctor-section,
    .modal-content,
    .modal-card,
    .modal-panel,
    .ipclaim-modal-dialog,
    .lab-compare-dialog,
    .pt-lab-compare-dialog
) {
    background-color: var(--sl-surface);
    border-color: rgba(255, 255, 255, .95);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-2);
}

html.sl-theme:not(.sl-layout-roster) :where(
    .metric,
    .stat,
    .infographic,
    .hxr-metric,
    .ipclaim-breakdown-metric,
    .ward-table-wrap,
    .data-table-wrap,
    .table-wrap,
    .w3-responsive
) {
    background: linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(248, 252, 253, .96));
    border-color: var(--sl-line);
    border-radius: var(--sl-radius-md);
    box-shadow: var(--sl-shadow-1);
}

html.sl-theme:not(.sl-layout-roster) :where(.panel, .card, .menu-card, .summary-card, .metric, .doctor-list-item) {
    transition: border-color .18s var(--sl-ease), box-shadow .18s var(--sl-ease), transform .18s var(--sl-ease), background-color .18s var(--sl-ease);
}

html.sl-theme:not(.sl-layout-roster) :where(.menu-card, .doctor-list-item, a.card, button.card):hover {
    border-color: #a9d3cd;
    box-shadow: 0 2px 3px rgba(21, 46, 57, .06), 0 21px 42px rgba(34, 72, 85, .15), inset 0 1px 0 rgba(255, 255, 255, .98);
    transform: translateY(-3px);
}

/* Identity headers */
html.sl-theme:not(.sl-layout-roster) :where(.app-main-header, .topbar, .brand-header, .page-header, .headline) {
    background:
        radial-gradient(circle at 88% -45%, rgba(185, 217, 255, .54) 0, rgba(185, 217, 255, 0) 20rem),
        radial-gradient(circle at 9% 135%, rgba(174, 235, 220, .48) 0, rgba(174, 235, 220, 0) 18rem),
        linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(248, 253, 253, .98) 49%, rgba(247, 250, 255, .98));
    border-color: rgba(255, 255, 255, .95);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-2);
}

html.sl-theme:not(.sl-layout-roster) :where(.app-main-header, .page-header) {
    padding: clamp(18px, 2vw, 28px);
}

html.sl-theme:not(.sl-layout-roster) :where(.app-main-title, .page-title) {
    font-size: clamp(24px, 2.15vw, 34px);
    letter-spacing: -.02em;
    line-height: 1.22;
    text-shadow: 0 1px 0 #fff;
}

html.sl-theme:not(.sl-layout-roster) :where(.app-main-kicker, .topbar-kicker, .page-kicker) {
    background: linear-gradient(180deg, #edfbf8, #dff5f0);
    border: 1px solid #bfe4dc;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 #fff;
    color: var(--sl-teal-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .035em;
    padding: 4px 10px;
}

html.sl-theme:not(.sl-layout-roster) :where(.brand-mark, .brand img) {
    filter: drop-shadow(0 7px 12px rgba(31, 78, 86, .12));
}

html.sl-theme:not(.sl-layout-roster) :where(.brand-name, .brand-title) {
    color: var(--sl-ink);
    letter-spacing: -.015em;
}

/* Buttons and navigation controls */
html.sl-theme:not(.sl-layout-roster) :where(
    .primary-button,
    .btn-primary,
    .primary,
    .create-btn,
    .update-btn,
    input[type="submit"]
) {
    background: linear-gradient(180deg, #268f85 0%, var(--sl-teal) 48%, var(--sl-teal-dark) 100%);
    border: 1px solid #0b6961;
    border-radius: 12px;
    box-shadow: 0 2px 2px rgba(13, 82, 76, .18), 0 8px 17px rgba(20, 125, 116, .22), inset 0 1px 0 rgba(255, 255, 255, .34);
    color: #ffffff;
    font-weight: 900;
    min-height: 42px;
    text-shadow: 0 1px 1px rgba(6, 63, 58, .30);
    transition: border-color .16s var(--sl-ease), box-shadow .16s var(--sl-ease), filter .16s var(--sl-ease), transform .16s var(--sl-ease);
}

html.sl-theme:not(.sl-layout-roster) :where(
    .primary-button,
    .btn-primary,
    .primary,
    .create-btn,
    .update-btn,
    input[type="submit"]
):hover {
    box-shadow: 0 2px 3px rgba(13, 82, 76, .20), 0 11px 22px rgba(20, 125, 116, .27), inset 0 1px 0 rgba(255, 255, 255, .40);
    filter: saturate(1.05) brightness(1.03);
    transform: translateY(-2px);
}

html.sl-theme:not(.sl-layout-roster) :where(
    .outline-button,
    .nav-button,
    .app-main-button,
    .page-button,
    .btn-secondary,
    .btn-soft,
    .ghost,
    .back-link,
    .linkbtn,
    .iconbtn,
    .filter-tab,
    .ranking-tab,
    .charge-breakdown-button,
    .trend-button,
    .compare-btn,
    .pt-compare-btn
) {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8f9 100%);
    border: 1px solid #d1e0e4;
    border-radius: 12px;
    box-shadow: var(--sl-shadow-control);
    color: #35515e;
    font-weight: 850;
    text-decoration: none;
    transition: background-color .16s var(--sl-ease), border-color .16s var(--sl-ease), box-shadow .16s var(--sl-ease), color .16s var(--sl-ease), transform .16s var(--sl-ease);
}

html.sl-theme:not(.sl-layout-roster) :where(
    .outline-button,
    .nav-button,
    .app-main-button,
    .page-button,
    .btn-secondary,
    .btn-soft,
    .ghost,
    .back-link,
    .linkbtn,
    .iconbtn,
    .filter-tab,
    .ranking-tab,
    .charge-breakdown-button,
    .trend-button,
    .compare-btn,
    .pt-compare-btn
):hover {
    background: linear-gradient(180deg, #ffffff, #e8f7f3);
    border-color: #94c9c1;
    box-shadow: 0 2px 3px rgba(23, 55, 68, .07), 0 9px 18px rgba(35, 92, 94, .14), inset 0 1px 0 #fff;
    color: var(--sl-teal-dark);
    transform: translateY(-2px);
}

html.sl-theme:not(.sl-layout-roster) :where(.delete-btn, .btn-back, .w3-red, .alert-error) {
    background: linear-gradient(180deg, #fffafb 0%, var(--sl-danger-soft) 100%) !important;
    border-color: #edbdcb !important;
    box-shadow: var(--sl-shadow-control) !important;
    color: var(--sl-danger) !important;
    text-shadow: none;
}

html.sl-theme:not(.sl-layout-roster) :where(.delete-btn, .btn-back, .w3-red):hover {
    background: linear-gradient(180deg, #ffffff, #f9dfe8) !important;
    border-color: #d98da4 !important;
    color: #7f1233 !important;
}

html.sl-theme:not(.sl-layout-roster) :where(.w3-blue, .w3-btn.w3-blue, .w3-button.w3-blue) {
    background: linear-gradient(180deg, #268f85, var(--sl-teal-dark)) !important;
    border-color: #0b6961 !important;
    border-radius: 12px !important;
    box-shadow: var(--sl-shadow-control) !important;
    color: #ffffff !important;
}

/* Inputs */
html.sl-theme:not(.sl-layout-roster):not(.sl-app-posn) :where(
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea,
    .text-input,
    .select-input,
    .field,
    .search-input
) {
    background-color: rgba(255, 255, 255, .96);
    border-color: #c5d8dd;
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(25, 55, 67, .055), 0 4px 10px rgba(31, 72, 85, .055);
    color: var(--sl-ink);
    transition: border-color .16s var(--sl-ease), box-shadow .16s var(--sl-ease), background-color .16s var(--sl-ease);
}

html.sl-theme:not(.sl-layout-roster):not(.sl-app-posn) :where(
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea,
    .text-input,
    .select-input,
    .field,
    .search-input
):hover {
    border-color: #8fc8bf;
}

html.sl-theme:not(.sl-layout-roster):not(.sl-app-posn) :where(
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea,
    .text-input,
    .select-input,
    .field,
    .search-input
):focus {
    background-color: #ffffff;
    border-color: var(--sl-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .19), inset 0 1px 2px rgba(25, 55, 67, .04);
}

html.sl-theme:not(.sl-layout-roster) :where(label, .label, .lbl, .form-row label, .lab-filter-label) {
    color: var(--sl-ink-soft);
    font-weight: 800;
}

/* Data tables: visual treatment only; scrolling and dimensions stay owned by each page. */
html.sl-theme:not(.sl-layout-roster) :where(table, .data-table, .ward-table, table.gridtable) {
    background-color: rgba(255, 255, 255, .98);
    color: var(--sl-ink);
}

html.sl-theme:not(.sl-layout-roster) :where(th, .data-table th, .ward-table th, table.gridtable th) {
    background: linear-gradient(180deg, #f9fdfc 0%, #e6f2f1 100%);
    border-color: var(--sl-line);
    color: #405b65;
    font-weight: 900;
    text-shadow: 0 1px 0 #ffffff;
}

html.sl-theme:not(.sl-layout-roster) :where(td, .data-table td, .ward-table td, table.gridtable td) {
    border-color: #e3ebee;
    color: #314853;
}

html.sl-theme:not(.sl-layout-roster) :where(tbody tr:nth-child(even) td) {
    background-color: rgba(248, 251, 252, .82);
}

html.sl-theme:not(.sl-layout-roster) :where(tbody tr:hover td) {
    background-color: #edf8f6;
}

/* Metrics, tags, statuses and feedback */
html.sl-theme:not(.sl-layout-roster) :where(.metric-value, .summary-value, .stat .n, .hxr-metric-value, .ipclaim-breakdown-summary) {
    color: var(--sl-ink);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 #ffffff;
}

html.sl-theme:not(.sl-layout-roster) :where(.metric-label, .summary-label, .hxr-metric-label) {
    color: var(--sl-muted);
    font-weight: 800;
}

html.sl-theme:not(.sl-layout-roster) :where(.tag, .status-pill, .pill, .chip, .info-pill, .meta-chip, .result-badge, .test-chip, .badge, .rankchip) {
    background: linear-gradient(180deg, #f5fffc, var(--sl-teal-soft));
    border: 1px solid #c8e7e1;
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(45, 92, 97, .07), inset 0 1px 0 #ffffff;
    color: var(--sl-teal-dark);
}

html.sl-theme:not(.sl-layout-roster) :where(.alert, .message, .error-message, .success-message, .flash) {
    border-radius: var(--sl-radius-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

html.sl-theme:not(.sl-layout-roster) :where(.alert.success, .success-message, .flash.good, .message) {
    background-color: var(--sl-success-soft);
    border-color: #a8ddca;
    color: var(--sl-success);
}

html.sl-theme:not(.sl-layout-roster) :where(.alert.error, .error-message, .flash.bad, .message.error) {
    background-color: var(--sl-danger-soft);
    border-color: #efc0cf;
    color: var(--sl-danger);
}

/* Menu / hub adapter */
html.sl-theme.sl-layout-menu:not(.sl-layout-roster) :where(.menu-section-title, .section-title) {
    color: #405b65;
    font-weight: 900;
    text-shadow: 0 1px 0 #ffffff;
}

html.sl-theme.sl-layout-menu:not(.sl-layout-roster) :where(.section-icon, .menu-icon) {
    background: linear-gradient(155deg, #ffffff 0%, #e7f4f1 100%);
    border-color: #cce5e0;
    box-shadow: 0 7px 16px rgba(45, 88, 81, .11), inset 0 1px 0 #ffffff;
    color: var(--sl-teal);
}

html.sl-theme.sl-layout-menu:not(.sl-layout-roster) .menu-section:nth-of-type(4n+2) :where(.section-icon, .menu-icon) {
    background: linear-gradient(155deg, #ffffff, var(--sl-blue-soft));
    border-color: #d1dff2;
    color: var(--sl-blue-dark);
}

html.sl-theme.sl-layout-menu:not(.sl-layout-roster) .menu-section:nth-of-type(4n+3) :where(.section-icon, .menu-icon) {
    background: linear-gradient(155deg, #ffffff, var(--sl-gold-soft));
    border-color: #eedca7;
    color: var(--sl-gold);
}

html.sl-theme.sl-layout-menu:not(.sl-layout-roster) .menu-section:nth-of-type(4n+4) :where(.section-icon, .menu-icon) {
    background: linear-gradient(155deg, #ffffff, var(--sl-rose-soft));
    border-color: #edc8d4;
    color: var(--sl-rose-dark);
}

html.sl-theme.sl-layout-menu:not(.sl-layout-roster) :where(.menu-card-arrow, .section-count) {
    background: linear-gradient(180deg, #ffffff, #eef7f5);
    border-color: #d2e7e3;
    box-shadow: var(--sl-shadow-control);
    color: var(--sl-teal-dark);
}

/* Entry / sign-in adapter */
html.sl-theme.sl-layout-entry:not(.sl-layout-roster) :where(.login-card, .login-container, .register-container) {
    background:
        radial-gradient(circle at 94% -20%, rgba(194, 219, 254, .55), rgba(194, 219, 254, 0) 15rem),
        linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(248, 253, 252, .98));
    border: 1px solid rgba(255, 255, 255, .96);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-float);
}

html.sl-theme.sl-layout-entry:not(.sl-layout-roster) :where(.login-card, .login-container, .register-container) h2 {
    color: var(--sl-ink);
    font-size: clamp(22px, 2vw, 29px);
    letter-spacing: -.02em;
}

html.sl-theme.sl-layout-entry:not(.sl-layout-roster) :where(.quick-link, .quick-link-icon, .register-btn) {
    background: linear-gradient(180deg, #ffffff, #eef7f5);
    border: 1px solid #cbe5e0;
    border-radius: 12px;
    box-shadow: var(--sl-shadow-control);
    color: var(--sl-teal-dark);
    transition: border-color .16s var(--sl-ease), box-shadow .16s var(--sl-ease), color .16s var(--sl-ease), transform .16s var(--sl-ease);
}

html.sl-theme.sl-layout-entry:not(.sl-layout-roster) :where(.quick-link, .quick-link-icon, .register-btn):hover {
    background: linear-gradient(180deg, #ffffff, #e0f4ef);
    border-color: #88c5bb;
    box-shadow: 0 2px 3px rgba(23, 55, 68, .07), 0 10px 20px rgba(35, 92, 94, .14), inset 0 1px 0 #ffffff;
    color: var(--sl-teal-dark);
    transform: translateY(-2px);
}

/* Analytics adapter: dashboards and report canvases; chart internals remain untouched. */
html.sl-theme.sl-layout-analytics:not(.sl-layout-roster) :where(.dashboard-panel, .chart-card, .doctor-directory-card, .ranking-panel, .filter-card) {
    background:
        radial-gradient(circle at 94% -35%, rgba(195, 218, 250, .38), rgba(195, 218, 250, 0) 16rem),
        linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(247, 252, 251, .97) 52%, rgba(250, 248, 255, .97));
}

html.sl-theme.sl-layout-analytics:not(.sl-layout-roster) :where(.summary-card, .metric) {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .99), rgba(239, 248, 247, .97));
    border-color: rgba(255, 255, 255, .95);
}

html.sl-theme.sl-layout-analytics:not(.sl-layout-roster) :where(.doctor-list-item, .ranking-tab, .filter-tab) {
    background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(238, 247, 250, .97));
    border-color: #d2e3e7;
    box-shadow: var(--sl-shadow-control);
}

html.sl-theme.sl-layout-analytics:not(.sl-layout-roster) :where(.doctor-rank, .rank-badge, .doctor-count-badge) {
    background: linear-gradient(145deg, #effaf7, #e6effd);
    border-color: #c8dce3;
    box-shadow: inset 0 1px 0 #ffffff, 0 5px 12px rgba(45, 88, 96, .10);
    color: var(--sl-blue-dark);
}

/* Modal shells: appearance only. */
html.sl-theme:not(.sl-layout-roster) :where(.modal-content, .modal-card, .modal-panel, .ipclaim-modal-dialog, .lab-compare-dialog, .pt-lab-compare-dialog) {
    background: linear-gradient(145deg, #ffffff 0%, #f7fbfc 60%, #fff7fa 100%);
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: var(--sl-shadow-float);
}

html.sl-theme:not(.sl-layout-roster) :where(.modal-title, .doctor-modal-title, .ipclaim-modal-title, .lab-compare-title, .pt-lab-compare-title) {
    color: var(--sl-ink);
    letter-spacing: -.015em;
}

html.sl-theme:not(.sl-layout-roster) :where(.close, .close-btn, .doctor-modal-close, .ipclaim-modal-close, .lab-compare-close, .pt-lab-compare-close) {
    background: linear-gradient(180deg, #ffffff, #f4f7f8);
    border-color: #d2dfe3;
    border-radius: 12px;
    box-shadow: var(--sl-shadow-control);
    color: var(--sl-muted);
}

/* Hoshome adapter */
html.sl-theme.sl-app-hoshome:not(.sl-layout-roster) body {
    background-image:
        radial-gradient(circle at 10% 6%, rgba(177, 235, 223, .52), rgba(177, 235, 223, 0) 25rem),
        radial-gradient(circle at 91% 8%, rgba(197, 220, 252, .48), rgba(197, 220, 252, 0) 27rem),
        linear-gradient(150deg, #f5fbfc, #f8fcf9 54%, #fff9f5);
}

html.sl-theme.sl-app-hoshome:not(.sl-layout-roster) :where(.login-container, .register-container, .welcome-container, .dashboard-container, body > .container) {
    background:
        radial-gradient(circle at 94% -30%, rgba(196, 219, 251, .48), rgba(196, 219, 251, 0) 16rem),
        linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(247, 252, 251, .98));
    border: 1px solid rgba(255, 255, 255, .96);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-2);
}

html.sl-theme.sl-app-hoshome:not(.sl-layout-roster) :where(.tab-container, .tabs, .tab-row) {
    background: #edf3f5;
    border: 1px solid #dce8eb;
    border-radius: 14px;
    box-shadow: inset 0 2px 5px rgba(32, 67, 79, .07), inset 0 1px 0 rgba(255, 255, 255, .78);
}

html.sl-theme.sl-app-hoshome:not(.sl-layout-roster) :where(.tab-button, .tabs a) {
    border-color: transparent;
    border-radius: 11px;
    color: var(--sl-ink-soft);
    transition: background-color .16s var(--sl-ease), border-color .16s var(--sl-ease), box-shadow .16s var(--sl-ease), color .16s var(--sl-ease), transform .16s var(--sl-ease);
}

html.sl-theme.sl-app-hoshome:not(.sl-layout-roster) :where(.tab-button.active, .tabs a.active) {
    background: linear-gradient(180deg, #ffffff, #eef9f6);
    border-color: #acd9d1;
    box-shadow: var(--sl-shadow-control);
    color: var(--sl-teal-dark);
}

html.sl-theme.sl-app-hoshome:not(.sl-layout-roster) :where(.news-ticker, .infographic) {
    background: linear-gradient(155deg, #ffffff, #eef7f5);
    border-color: #d0e4e1;
    border-radius: var(--sl-radius-md);
    box-shadow: var(--sl-shadow-1);
}

html.sl-theme.sl-app-hoshome:not(.sl-layout-roster) :where(.logout) {
    background: linear-gradient(180deg, #fffafd, var(--sl-rose-soft));
    border-color: #edc4d0;
    border-radius: 12px;
    box-shadow: var(--sl-shadow-control);
    color: var(--sl-rose-dark);
}

/* POSN adapter: preserve its screen/state model and only restyle its surfaces. */
html.sl-theme.sl-app-posn:not(.sl-layout-roster) {
    --ac: #3976c5;
    --acd: #245997;
    --acb: #58a99f;
    --ac2: #b9d8ee;
    --bg: #f4f8fb;
    --card: #ffffff;
    --ink: #253d49;
    --mut: #667983;
    --line: #dce8ec;
    --soft: #e9f4f5;
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) body {
    background-color: #e9f1f4;
    background-image:
        radial-gradient(circle at 12% 6%, rgba(173, 233, 221, .48), rgba(173, 233, 221, 0) 24rem),
        radial-gradient(circle at 90% 8%, rgba(193, 218, 252, .44), rgba(193, 218, 252, 0) 27rem),
        linear-gradient(150deg, #eef5f7, #f5f8fb);
    color: var(--ink);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.app, .wrap) {
    background-color: var(--bg);
    border-color: rgba(255, 255, 255, .96);
    box-shadow: var(--sl-shadow-float);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.card, .choice, .figbox, .topbar) {
    background: linear-gradient(150deg, rgba(255, 255, 255, .99), rgba(247, 251, 252, .98));
    border-color: #dce8ec;
    box-shadow: var(--sl-shadow-1);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.card, .choice) {
    border-radius: 18px;
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.h1, .h2) {
    color: var(--sl-ink);
    letter-spacing: -.015em;
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.inp, .sel) {
    background-color: #ffffff;
    border-color: #c5d8dd;
    border-radius: 13px;
    box-shadow: inset 0 1px 2px rgba(25, 55, 67, .05), 0 4px 10px rgba(31, 72, 85, .05);
    color: var(--sl-ink);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.inp, .sel):focus {
    border-color: var(--sl-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18), inset 0 1px 2px rgba(25, 55, 67, .04);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.primary, .btn:not(.gray)) {
    background: linear-gradient(135deg, var(--sl-teal) 0%, var(--sl-blue) 100%);
    border-color: rgba(24, 104, 115, .60);
    box-shadow: 0 2px 2px rgba(20, 83, 91, .13), 0 9px 18px rgba(50, 111, 158, .23), inset 0 1px 0 rgba(255, 255, 255, .34);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.ghost, .btn.gray, .seg) {
    background: linear-gradient(180deg, #f5f9fa, #e7eff2);
    border-color: #d4e2e6;
    box-shadow: inset 0 2px 5px rgba(32, 67, 79, .06), inset 0 1px 0 rgba(255, 255, 255, .74);
    color: #49616c;
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.chip, .pill, .av, .avpick, .fontchip) {
    background: linear-gradient(180deg, #f5fffc, var(--sl-teal-soft));
    border-color: #c9e5df;
    color: var(--sl-teal-dark);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.chip.on, .choice.sel, .seg button.on) {
    background: linear-gradient(180deg, #ffffff, #e8f5f2);
    border-color: #83c0b6;
    box-shadow: var(--sl-shadow-control);
    color: var(--sl-teal-dark);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.sgnote) {
    background: linear-gradient(145deg, #243f49, #315d68);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 10px 22px rgba(31, 61, 72, .17), inset 0 1px 0 rgba(255, 255, 255, .12);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.toast.ok, .flash.good) {
    background-color: var(--sl-success-soft);
    border-color: #9fd8c2;
    color: var(--sl-success);
}

html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.toast.bad, .flash.bad) {
    background-color: var(--sl-danger-soft);
    border-color: #efbdcc;
    color: var(--sl-danger);
}

/* Responsive refinement. Existing page CSS remains responsible for layout flow. */
@media (max-width: 1024px) {
    html.sl-theme:not(.sl-layout-roster) {
        --sl-radius-lg: 21px;
        --sl-radius-md: 15px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.app-shell, .app-page, .page-shell, .page, .wrap, .container, .dashboard-container, .welcome-container) {
        padding-left: 16px;
        padding-right: 16px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.app-main-header, .page-header, .topbar, .brand-header) {
        padding: 18px;
    }
}

@media (max-width: 768px) {
    html.sl-theme:not(.sl-layout-roster) {
        --sl-radius-lg: 18px;
        --sl-radius-md: 14px;
        --sl-shadow-2: 0 1px 3px rgba(21, 46, 57, .055), 0 12px 28px rgba(34, 72, 85, .10), inset 0 1px 0 rgba(255, 255, 255, .96);
    }

    html.sl-theme:not(.sl-layout-roster) body {
        background-image:
            radial-gradient(circle at 3% 2%, rgba(179, 238, 226, .40) 0, rgba(179, 238, 226, 0) 17rem),
            radial-gradient(circle at 98% 5%, rgba(197, 220, 252, .36) 0, rgba(197, 220, 252, 0) 19rem),
            linear-gradient(155deg, #f6fbfd 0%, #f9fcfa 57%, #fffaf8 100%);
    }

    html.sl-theme:not(.sl-layout-roster) :where(.app-shell, .app-page, .page-shell, .page, .wrap, .container, .dashboard-container, .welcome-container) {
        padding-left: 11px;
        padding-right: 11px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.app-main-header, .page-header, .topbar, .brand-header) {
        padding: 16px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.app-main-title, .page-title) {
        font-size: clamp(22px, 6vw, 28px);
    }

    /* Prevent a wide census table from defining the grid track's min-content
       width and pushing the entry page beyond the mobile viewport. */
    html.sl-theme.sl-layout-entry:not(.sl-layout-roster) .login-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        min-width: 0;
    }

    html.sl-theme.sl-layout-entry:not(.sl-layout-roster) .login-layout > * {
        min-width: 0;
    }

    html.sl-theme:not(.sl-layout-roster) :where(
        .primary-button,
        .btn-primary,
        .btn-secondary,
        .outline-button,
        .nav-button,
        .app-main-button,
        .page-button,
        .back-link,
        input[type="submit"]
    ) {
        min-height: 44px;
    }

    html.sl-theme:not(.sl-layout-roster):not(.sl-app-posn) :where(input, select, textarea, .text-input, .select-input, .field, .search-input) {
        min-height: 44px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(th, td, .data-table th, .data-table td, .ward-table th, .ward-table td) {
        padding: 10px;
    }

    html.sl-theme.sl-app-posn:not(.sl-layout-roster) :where(.app, .wrap) {
        border-color: transparent;
        box-shadow: none;
    }
}

@media (max-width: 390px) {
    html.sl-theme:not(.sl-layout-roster) {
        --sl-radius-lg: 16px;
        --sl-radius-md: 12px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.app-shell, .app-page, .page-shell, .page, .wrap, .container, .dashboard-container, .welcome-container) {
        padding-left: 9px;
        padding-right: 9px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.app-main-header, .page-header, .topbar, .brand-header) {
        padding: 14px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.app-main-title, .page-title, .brand-title) {
        font-size: 22px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.primary-button, .btn-primary, .btn-secondary, .outline-button, .app-main-button, .page-button, .back-link, input[type="submit"]) {
        min-height: 46px;
    }

    html.sl-theme.sl-app-hoshome:not(.sl-layout-roster) :where(.login-container, .register-container, .welcome-container, .dashboard-container, body > .container) {
        border-radius: 16px;
    }
}

@media (min-width: 1440px) {
    html.sl-theme:not(.sl-layout-roster) :where(.app-main-header, .page-header, .topbar, .brand-header) {
        border-radius: 26px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.menu-card, .summary-card, .metric, .doctor-list-item) {
        box-shadow: 0 1px 2px rgba(21, 46, 57, .05), 0 11px 26px rgba(34, 72, 85, .09), inset 0 1px 0 rgba(255, 255, 255, .96);
    }
}

@media (min-width: 2560px) {
    html.sl-theme:not(.sl-layout-roster) {
        --sl-shadow-2: 0 3px 6px rgba(21, 46, 57, .06), 0 22px 50px rgba(34, 72, 85, .12), inset 0 1px 0 rgba(255, 255, 255, .98);
        --sl-shadow-float: 0 10px 28px rgba(25, 48, 58, .15), 0 38px 92px rgba(25, 48, 58, .19), inset 0 1px 0 rgba(255, 255, 255, .98);
    }

    html.sl-theme:not(.sl-layout-roster) :where(.app-main-header, .page-header) {
        padding: 30px;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.menu-card, .summary-card, .metric) {
        padding: 20px;
    }
}

/* Motion and high-contrast preferences */
@media (prefers-reduced-motion: reduce) {
    html.sl-theme:not(.sl-layout-roster) {
        scroll-behavior: auto;
    }

    html.sl-theme:not(.sl-layout-roster) :where(
        a,
        button,
        input,
        select,
        textarea,
        .panel,
        .card,
        .menu-card,
        .doctor-list-item,
        .screen,
        .toast
    ) {
        transition: none !important;
    }

    html.sl-theme:not(.sl-layout-roster) :where(.menu-card, .doctor-list-item, a.card, button.card):hover,
    html.sl-theme:not(.sl-layout-roster) :where(.primary-button, .btn-primary, .primary, .create-btn, .update-btn, input[type="submit"]):hover,
    html.sl-theme:not(.sl-layout-roster) :where(.outline-button, .nav-button, .app-main-button, .page-button, .btn-secondary, .back-link):hover {
        transform: none;
    }
}

@media (forced-colors: active) {
    html.sl-theme:not(.sl-layout-roster) :where(
        .panel,
        .card,
        .app-main-header,
        .topbar,
        .brand-header,
        .page-header,
        .menu-card,
        .summary-card,
        .metric,
        .form-panel,
        .info-panel,
        .table-panel,
        .modal-content,
        .login-container,
        .register-container,
        .welcome-container,
        .dashboard-container,
        body > .container
    ) {
        background: Canvas;
        border: 1px solid CanvasText;
        box-shadow: none;
        color: CanvasText;
        forced-color-adjust: auto;
    }

    html.sl-theme:not(.sl-layout-roster) :where(a, button, input, select, textarea, .btn, .primary-button, .app-main-button, .page-button, .back-link) {
        background: ButtonFace;
        border: 1px solid ButtonText;
        box-shadow: none;
        color: ButtonText;
        forced-color-adjust: auto;
        text-shadow: none;
    }

    html.sl-theme:not(.sl-layout-roster) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid Highlight;
    }
}