/*
 * Nimble 0.1.5 - Shared surfaces and visual hierarchy.
 * Loaded after the historical theme layers. Keep those layers and the original
 * templates available for provenance; change the tokens below for future themes.
 * Do not give table/card ancestors overflow:hidden: menus and focus rings must
 * remain visible, and DataTables owns the height of its hidden sizing header.
 */
:root {
    --portal-bg: #eaf2fc;
    --portal-surface: #ffffff;
    --portal-text: #122c4b;
    --portal-muted: #526a86;
    --portal-border: #c6d8ed;
    --portal-shadow: 0 6px 18px rgba(25, 62, 106, 0.10), 0 1px 3px rgba(25, 62, 106, 0.06);
    --nimble-surface-raised: #ffffff;
    --nimble-surface-inset: #f2f7ff;
    --nimble-surface-header: #edf4ff;
    --nimble-surface-radius: 15px;
    --nimble-border-strong: #aec8e7;
    --nimble-focus: #0064cf;
    --nimble-blue: #0878e8;
    --nimble-green: #078653;
    --nimble-orange: #bf5700;
    --nimble-purple: #7942d1;
}

/* All page routes share the same light-blue canvas, including authentication. */
body,
.portal-shell,
.portal-main {
    background-color: var(--portal-bg);
}
.portal-content {
    background: var(--portal-bg);
    min-width: 0;
    padding: 24px 26px 36px;
}
.portal-topbar {
    box-shadow: 0 3px 12px rgba(26, 68, 118, 0.07);
    border-bottom: 1px solid var(--portal-border);
}
.portal-auth {
    background: linear-gradient(135deg, #e2eefc 0%, #f0f6ff 52%, #e5effb 100%);
}

/* One elevated surface system for list pages, editors, workflows and workspaces. */
.portal-panel,
.portal-table-card,
.step-card,
.form-section-card,
.card-stat,
.quick-action-card,
.metric-card,
.recent-card,
.dashboard-admin,
.workspace-tabs,
.auth-card {
    background: var(--nimble-surface-raised);
    border: 1px solid var(--portal-border);
    border-radius: var(--nimble-surface-radius);
    box-shadow: var(--portal-shadow);
    min-width: 0;
}
.portal-panel,
.portal-table-card,
.step-card {
    padding: 22px;
}
.portal-panel + .portal-panel,
.portal-table-card + .portal-panel {
    margin-top: 22px;
}
/* Nested surfaces are inset, not a second heavy floating card. */
.portal-panel .portal-panel,
.step-card .form-section-card,
.portal-table-card .form-section-card {
    background: var(--nimble-surface-inset);
    box-shadow: none;
}
.auth-card {
    border-radius: 26px;
    box-shadow: 0 16px 40px rgba(18, 54, 97, 0.14);
}
.auth-brand {
    background: linear-gradient(125deg, #082445, #123865 65%, #0b55a4);
}
.auth-form-wrap {
    background: #fff;
}
/* Keep the 0.1.4 equal-width login utilities and full-width outer-edge alignment. */
.auth-utility-actions {
    gap: 12px;
}

/* Section headings have a visible bottom rule without another dark navigation bar. */
#content .panel-title,
#content .step-title,
#content .form-section-card > h2 {
    background: transparent;
    color: var(--portal-text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    border-bottom: 1px solid var(--portal-border);
    border-radius: 0;
    margin-bottom: 18px;
    padding: 0 0 13px;
}
#content .page-heading {
    border-left: 4px solid var(--nimble-blue);
    padding: 2px 0 2px 14px;
    margin-bottom: 22px;
}
#content .page-heading h1 {
    font-size: 1.45rem;
}
.step-card,
.form-section-card {
    margin-bottom: 22px;
}
.context-grid {
    background: #f8fbff;
    border-left: 4px solid var(--nimble-blue);
}

/* A generic grid may be standalone or live inside an existing workflow card. */
#content .portal-panel .standalone-grid-card,
#content .step-card .standalone-grid-card,
#content .portal-table-card .standalone-grid-card {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* In-page navigation is a distinct card; active tabs use shape and weight too. */
.workspace-tabs {
    border-top: 3px solid var(--nimble-blue);
    padding: 17px 20px 15px;
    margin-bottom: 24px;
}
.workspace-label {
    color: var(--portal-text);
    font-size: 1.03rem;
    font-weight: 700;
}
.workspace-links,
.dashboard-admin-links {
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.workspace-tab,
.dashboard-admin-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #cbdcf0;
    border-radius: 9px;
    background: #f4f8ff;
    color: #365b85;
    font-size: 0.86rem;
    line-height: 1.3;
}
.workspace-tab.active,
.workspace-tab[aria-current="page"] {
    background: #e2efff;
    border-color: #82afe2;
    box-shadow: inset 0 -3px 0 #086aca;
    color: #064e9b;
    font-weight: 700;
}
.workspace-tab:hover,
.dashboard-admin-links a:hover {
    background: #e3efff;
    color: #054e9c;
    border: 1px solid #87afe0;
}

/* Tables retain their existing DOM and server paging/selection behavior. */
#content .table-responsive,
#content .recent-scroll,
#content .nimble-grid-host .dt-scroll {
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: #fff;
}
#content table.table {
    --bs-table-bg: #fff;
    --bs-table-border-color: #d9e5f4;
    --bs-table-hover-bg: #e9f2ff;
    --bs-table-hover-color: #112e50;
}
#content table.table > thead > tr > th,
#content .nimble-grid-host .dt-scroll-head,
#content .nimble-grid-host .dt-scroll-head th {
    background: var(--nimble-surface-header);
    color: #284d78;
    --bs-table-bg: var(--nimble-surface-header);
    --bs-table-color: #284d78;
    font-weight: 700;
    border-color: #cbdcf1;
}
/* Never apply header padding/height to DataTables' invisible sizing header. */
#content .nimble-grid-host .dt-scroll-body .dt-scroll-sizing {
    height: 0;
    overflow: hidden;
}
#content .grid-tools {
    padding: 0 0 12px;
    border-bottom: 1px solid #e0eaf7;
}
#content .grid-notice {
    color: var(--portal-muted);
}
#content .dt-container .page-item.active .page-link {
    background: #1268c7;
    border-color: #1268c7;
}
#content .dt-container .page-link {
    border-color: var(--portal-border);
}
#content .order-date-filters {
    background: var(--nimble-surface-inset);
    border-color: var(--portal-border);
}

/* Deliberate dashboard grouping: headings, spacing, elevated cards and color keys. */
.dashboard-hero {
    background: radial-gradient(ellipse at 72% 0%, #0c64ca 0%, transparent 58%),
        linear-gradient(112deg, #07223f 0%, #0e376d 60%, #073267 100%);
    border: 1px solid #347abc;
    box-shadow: 0 7px 20px rgba(10, 50, 100, 0.16);
    padding: 28px 32px;
    margin-bottom: 24px;
}
.hero-watermark {
    opacity: 0.28;
}
.dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 2px 12px;
}
.dashboard-section-heading h2 {
    margin: 0;
    color: #102e53;
    font-size: 1.14rem;
    font-weight: 750;
}
.dashboard-section-heading p {
    margin: 0;
    color: #46638a;
    font-size: 0.79rem;
}
.dashboard-actions {
    gap: 18px;
    margin-bottom: 26px;
}
.dashboard-metrics {
    gap: 18px;
}
.quick-action-card {
    padding: 21px 18px;
    border-color: #c5d8ee;
}
.quick-action-card:focus-within {
    border-color: #6eaae8;
    box-shadow: 0 7px 22px rgba(22, 93, 162, 0.17);
}
.quick-action-card .quick-card-heading {
    font-size: 0.97rem;
}
.quick-action-card .btn {
    background: #e5f0ff;
    border: 1px solid #d2e5ff;
}
.metric-card {
    --metric-accent: var(--nimble-blue);
    --metric-soft: #e8f2ff;
    border-left: 4px solid var(--metric-accent);
    padding: 18px 17px 16px;
}
.metric-patients {
    --metric-accent: var(--nimble-green);
    --metric-soft: #e4f6ee;
}
.metric-ivrs {
    --metric-accent: var(--nimble-orange);
    --metric-soft: #fff0de;
}
.metric-onboardings {
    --metric-accent: var(--nimble-purple);
    --metric-soft: #f0eaff;
}
.metric-card .dashboard-icon {
    color: var(--metric-accent);
    background: var(--metric-soft);
}
.metric-card .metric-sparkline {
    color: var(--metric-accent);
}
.metric-top h3 {
    font-size: 0.82rem;
    color: #39577c;
}
.metric-value {
    font-size: 2rem;
    font-weight: 750;
    color: #0b2c51;
}
.metric-activity,
.metric-change {
    font-size: 0.77rem;
    line-height: 1.5;
}
.metrics-caption {
    color: #4c6686;
    font-size: 0.76rem;
    padding: 0 2px;
    margin: 14px 0 23px;
}
.metrics-summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.metrics-summary > .bi {
    color: #526f95;
    flex-shrink: 0;
}
.dashboard-recent {
    gap: 20px;
}
.recent-card {
    padding: 20px;
}
.recent-card header {
    padding-bottom: 13px;
    border-bottom: 1px solid #dce7f6;
    margin-bottom: 15px;
}
.recent-card h2,
.dashboard-admin h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    color: #102e53;
}
.recent-card h2 > .bi {
    color: var(--nimble-blue);
    font-size: 1.35rem;
}
.dashboard-admin {
    border-top: 3px solid var(--nimble-blue);
    margin-top: 23px;
    padding: 21px;
}
.dashboard-admin-links {
    border-top: 1px solid #dce7f6;
    padding-top: 15px;
}
.admin-overview p {
    color: #526a86;
    line-height: 1.5;
}
.agreement-body,
.signature-preview {
    border-color: var(--nimble-border-strong);
    background: #f5f9ff;
}
.ad-card {
    border-color: var(--portal-border);
    background: #eff6ff;
}
.api-reference {
    max-width: 1200px;
    margin: 0 auto;
}
.api-reference pre {
    max-width: 100%;
    overflow-x: auto;
    background: var(--nimble-surface-inset);
    padding: 14px;
}
.api-reference details {
    margin-bottom: 16px;
}

/* Keyboard access remains visible independent of hover/color distinctions. */
.workspace-tab:focus-visible,
.dashboard-admin-links a:focus-visible,
.quick-action-card a:focus-visible {
    outline: 3px solid var(--nimble-focus);
    outline-offset: 3px;
}
@media (max-width: 767.98px) {
    .portal-panel,
    .portal-table-card,
    .step-card,
    .recent-card,
    .dashboard-admin {
        padding: 17px;
    }
    .portal-content {
        padding: 18px 16px 28px;
    }
    .dashboard-hero {
        padding: 24px;
    }
    .workspace-tabs {
        padding: 16px;
    }
    .dashboard-section-heading p {
        width: 100%;
    }
    .workspace-tab,
    .dashboard-admin-links a {
        padding: 10px 11px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .quick-action-card {
        transition: none;
    }
}