body {
    background: #f2f5f8;
}

.app-gradient {
    background:
        radial-gradient(circle at top left, rgba(13, 110, 253, 0.10), transparent 30%),
        radial-gradient(circle at bottom right, rgba(220, 53, 69, 0.08), transparent 28%),
        linear-gradient(135deg, #f7f9fb, #eef3f7);
}

.hero-pane {
    background: linear-gradient(160deg, #14324a, #24536d 60%, #0d6efd);
}

.sidebar-shell {
    background: linear-gradient(180deg, #11293d, #173750 55%, #204865);
}

.btn-nav {
    color: #f8f9fa;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
}

.btn-nav:hover,
.btn-nav.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.16);
}

.metric-panel {
    background: linear-gradient(135deg, #ffffff, #f4f8fc);
}

.toast-stack {
    z-index: 1090;
    width: min(92vw, 540px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    pointer-events: none;
}

.toast-stack .toast {
    width: 100%;
    pointer-events: auto;
    box-shadow: 0 1rem 2.5rem rgba(17, 41, 61, 0.22);
}

.empty-state {
    color: #6c757d;
    font-style: italic;
}

.bp-grid {
    display: grid;
    grid-template-columns: 38px minmax(104px, 1.15fr) repeat(3, minmax(62px, 0.78fr));
    gap: 0.5rem;
    align-items: center;
}

.bp-grid__header {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bp-grid__index {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    border-radius: 0.5rem;
    background: #eef3f7;
    color: #173750;
    font-size: 0.9rem;
    font-weight: 700;
}

.bp-grid__input {
    min-width: 0;
}

#bpReadingsList .bp-grid__input[type="number"] {
    max-width: 6.25rem;
    justify-self: start;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

#bpReadingsList .bp-grid__input[type="number"]::-webkit-outer-spin-button,
#bpReadingsList .bp-grid__input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#bpReadingsList .bp-grid__input[data-reading-field="systolic"] {
    font-size: 0.9rem;
}

#sessionForm > div > .form-select,
#sessionForm > div > .form-control,
#sessionForm > div > textarea.form-control,
#sessionForm .row.g-3 > [class*="col-"] > .form-control {
    width: 100%;
    max-width: 100%;
}

#sessionForm > div > .form-text,
#sessionForm .row.g-3 > [class*="col-"] > .form-text {
    max-width: 100%;
}

#sessionForm .session-form-wide > .form-control,
#sessionForm .session-form-wide > .form-select,
#sessionForm .session-form-wide > textarea.form-control,
#sessionForm .session-form-wide > .form-text,
#sessionForm .session-form-wide #bpReadingsList {
    width: 100%;
    max-width: 100%;
}

#sessionForm #bpReadingsList .bp-grid__input {
    width: 100%;
}

.trend-chart-card,
.trend-insights-card {
    height: 100%;
    border: 1px solid #e3ebf3;
    border-radius: 1rem;
    background: linear-gradient(180deg, #fbfdff, #f3f7fb);
    padding: 1rem;
}

.trend-chart-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.trend-chart-card__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f7a92;
}

.trend-chart-card__title {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    color: #173750;
}

.trend-chart-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.2rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: #e7eef7;
    color: #173750;
    font-size: 0.78rem;
    font-weight: 700;
}

.trend-chart-host {
    min-height: 220px;
}

.trend-chart-host--page {
    min-height: auto;
}

.trend-chart-shell {
    display: grid;
    gap: 1rem;
    position: relative;
}

.trend-chart-shell--compact {
    gap: 0.65rem;
}

.trend-chart-frame {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
}

.trend-chart-host--page .trend-chart-frame,
.trend-chart-host--page .trend-chart-axis,
.trend-chart-host--page .trend-chart-scroll {
    min-height: 525px;
}

.trend-chart-axis {
    flex: 0 0 auto;
    background: linear-gradient(180deg, rgba(252, 253, 255, 0.95), rgba(241, 246, 251, 0.92));
    border-right: 1px solid rgba(204, 218, 232, 0.85);
}

.trend-chart-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(23, 55, 80, 0.08);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.9)),
        radial-gradient(circle at top right, rgba(22, 116, 143, 0.08), transparent 28%);
}

.trend-chart-summary__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f7a92;
}

.trend-chart-summary__value {
    margin-top: 0.15rem;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    font-weight: 700;
    color: #173750;
}

.trend-chart-summary__delta {
    margin-top: 0.35rem;
    font-size: 0.88rem;
    color: #667d90;
}

.trend-chart-summary__delta--up {
    color: #b54234;
}

.trend-chart-summary__delta--down {
    color: #18644a;
}

.trend-chart-summary__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.trend-chart-summary__stat {
    min-width: 8rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.9rem;
    background: rgba(232, 239, 246, 0.76);
}

.trend-chart-summary__stat-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #60778b;
}

.trend-chart-summary__stat-value {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: #173750;
    line-height: 1.2;
}

.trend-chart-summary__stat-value--latest {
    font-size: 0.92rem;
}

.trend-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    color: #5f6f7d;
    font-size: 0.88rem;
    font-weight: 600;
}

.trend-chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.trend-chart-legend__item--checkbox {
    cursor: pointer;
    user-select: none;
}

.trend-chart-legend__swatch {
    width: 1.1rem;
    height: 0.42rem;
    border-radius: 999px;
    display: inline-block;
}

.trend-chart-legend__checkbox {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #60778b;
}

.trend-chart-legend__swatch--sys {
    background: #c43d2f;
}

.trend-chart-legend__swatch--dia {
    background: #2668b2;
}

.trend-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(95, 122, 146, 0.45) rgba(231, 238, 247, 0.65);
    touch-action: pan-x;
}

.trend-chart-scroll::-webkit-scrollbar {
    height: 10px;
}

.trend-chart-scroll::-webkit-scrollbar-track {
    background: rgba(231, 238, 247, 0.65);
    border-radius: 999px;
}

.trend-chart-scroll::-webkit-scrollbar-thumb {
    background: rgba(95, 122, 146, 0.45);
    border-radius: 999px;
}

.trend-chart-scroll--draggable {
    cursor: grab;
}

.trend-chart-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.trend-chart-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 12rem;
    max-width: 16rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(23, 55, 80, 0.12);
    background: rgba(12, 25, 39, 0.94);
    color: #f7fbff;
    box-shadow: 0 16px 40px rgba(11, 25, 38, 0.28);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 5;
}

.trend-chart-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.trend-chart-tooltip__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(220, 235, 246, 0.82);
}

.trend-chart-tooltip__value {
    margin-top: 0.18rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.15;
}

.trend-chart-tooltip__meta {
    margin-top: 0.22rem;
    font-size: 0.82rem;
    color: rgba(235, 244, 250, 0.88);
}

.trend-chart-page {
    border: 1px solid #d9e5f0;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, #fcfdff, #f1f6fb);
    padding: 1.25rem;
}

.trend-chart-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.chart-header-actions,
.chart-zoom-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: flex-end;
}

.trend-chart-page__title {
    margin: 0.15rem 0 0;
    font-size: 1.3rem;
    color: #173750;
}

.trend-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.trend-tabbar__btn {
    border: 1px solid #cfdceb;
    background: #f4f8fc;
    color: #173750;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.trend-tabbar__btn.active {
    background: #173750;
    border-color: #173750;
    color: #fff;
}

.trend-chart {
    width: 100%;
    height: 220px;
}

.trend-chart--axis {
    width: 62px;
    min-width: 62px;
    display: block;
}

.trend-chart--wide {
    width: auto;
    min-width: 100%;
    display: block;
}

.trend-chart-host--page .trend-chart,
.trend-chart-host--page .trend-chart__empty {
    height: 525px;
    min-height: 525px;
}

.trend-chart__axis {
    stroke: #ccdae8;
    stroke-width: 1;
}

.trend-chart__grid {
    stroke: #e8eff6;
    stroke-width: 1;
}

.trend-chart__threshold {
    stroke: #b8c4d0;
    stroke-width: 1.4;
    stroke-dasharray: 4 4;
}

.trend-chart__threshold-label {
    fill: #7c8e9c;
    font-size: 12px;
    font-weight: 700;
}

.trend-chart__day-separator {
    stroke: rgba(108, 127, 145, 0.32);
    stroke-width: 1;
    stroke-dasharray: 3 6;
}

.trend-chart__day-label {
    fill: #60778b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.trend-chart__day-cluster-band {
    fill: rgba(222, 234, 244, 0.42);
    stroke: rgba(187, 202, 217, 0.72);
    stroke-width: 1;
}

.trend-chart__day-cluster-guide {
    stroke: rgba(124, 145, 164, 0.38);
    stroke-width: 1.2;
    stroke-dasharray: 3 5;
}

.trend-chart__band {
    opacity: 0.7;
}

.trend-chart__band--calm {
    fill: rgba(38, 104, 178, 0.05);
}

.trend-chart__band--watch {
    fill: rgba(31, 133, 82, 0.05);
}

.trend-chart__band--high {
    fill: rgba(196, 61, 47, 0.05);
}

.trend-chart__area {
    stroke: none;
}

.trend-chart__area--sys {
    fill: url(#sys-fill);
}

.trend-chart__area--dia {
    fill: url(#dia-fill);
}

.trend-chart__hover-zone {
    fill: transparent;
    cursor: pointer;
}

.trend-chart__series--sys {
    fill: none;
    stroke: #c43d2f;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trend-chart__series--dia {
    fill: none;
    stroke: #2668b2;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trend-chart__series--pulse {
    fill: none;
    stroke: #b7721f;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 5 4;
}

.trend-chart__series--weight-pre {
    fill: none;
    stroke: #2f8a57;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trend-chart__series--weight-post {
    fill: none;
    stroke: #3aa3a0;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 7 4;
}

.trend-chart__dot--sys {
    fill: #c43d2f;
    cursor: pointer;
}

.trend-chart__dot--dia {
    fill: #2668b2;
    cursor: pointer;
}

.trend-chart__dot--pulse {
    fill: #b7721f;
    cursor: pointer;
}

.trend-chart__dot--weight-pre {
    fill: #2f8a57;
    cursor: pointer;
}

.trend-chart__dot--weight-post {
    fill: #3aa3a0;
    cursor: pointer;
}

.trend-chart__dot--same-day-outline {
    fill: #f7fbff;
    stroke-width: 2.2;
}

.trend-chart__dot--sys.trend-chart__dot--same-day-outline {
    stroke: #c43d2f;
}

.trend-chart__dot--dia.trend-chart__dot--same-day-outline {
    stroke: #2668b2;
}

.trend-chart__dot--start {
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 1.6;
}

.trend-chart__dot--end {
    stroke: rgba(23, 48, 66, 0.16);
    stroke-width: 1.2;
}

.trend-chart__label {
    fill: #6c7f91;
    font-size: 13px;
}

.trend-chart__label--x {
    font-size: 12px;
}

.trend-chart__point-badge {
    pointer-events: none;
}

.trend-chart__point-badge-box {
    stroke-width: 1.2;
}

.trend-chart__point-badge-box--sys {
    fill: rgba(255, 250, 249, 0.96);
    stroke: rgba(196, 61, 47, 0.28);
}

.trend-chart__point-badge-box--dia {
    fill: rgba(248, 251, 255, 0.96);
    stroke: rgba(38, 104, 178, 0.3);
}

.trend-chart__point-badge-text {
    font-size: 11px;
    font-weight: 700;
    dominant-baseline: middle;
}

.trend-chart__point-badge-text--compact {
    font-size: 9px;
}

.trend-chart__point-badge-text--sys {
    fill: #9e352a;
}

.trend-chart__point-badge-text--dia {
    fill: #1f5a99;
}

.trend-chart__empty {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d6e2ee;
    border-radius: 0.9rem;
    color: #6c7f91;
    background: rgba(255, 255, 255, 0.55);
}

.feature-card {
    border: 1px solid #dce7f1;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.9rem 1rem;
}

.feature-card__title {
    font-weight: 700;
    color: #173750;
}

.feature-card__text {
    color: #5f6f7d;
    margin-top: 0.2rem;
    font-size: 0.92rem;
}

@media (max-width: 767.98px) {
    #sessionForm > div > .form-select,
    #sessionForm > div > .form-control,
    #sessionForm > div > textarea.form-control,
    #sessionForm .row.g-3 > [class*="col-"] > .form-control,
    #sessionForm > div > .form-text,
    #sessionForm .row.g-3 > [class*="col-"] > .form-text {
        width: 100%;
        max-width: 100%;
    }

    .bp-grid {
        grid-template-columns: 32px minmax(84px, 1fr) repeat(3, minmax(52px, 0.72fr));
        gap: 0.4rem;
    }

    .bp-grid__header {
        font-size: 0.7rem;
        letter-spacing: 0.02em;
    }

    .bp-grid__index {
        min-height: 29px;
        font-size: 0.8rem;
    }

    .trend-chart-host {
        min-height: auto;
    }

    .trend-chart,
    .trend-chart__empty {
        min-height: 200px;
        height: 200px;
    }

    .trend-chart-host--page {
        min-height: auto;
    }

    .trend-chart-host--page .trend-chart-frame,
    .trend-chart-host--page .trend-chart-axis,
    .trend-chart-host--page .trend-chart-scroll,
    .trend-chart-host--page .trend-chart,
    .trend-chart-host--page .trend-chart__empty {
        min-height: 340px;
        height: 340px;
    }

    .trend-chart--axis {
        width: 42px;
        min-width: 42px;
    }

    .trend-chart-summary {
        flex-direction: column;
        gap: 0.7rem;
        padding: 0.7rem 0.8rem;
    }

    .trend-chart-summary__eyebrow {
        font-size: 0.64rem;
    }

    .trend-chart-summary__value {
        font-size: clamp(1.35rem, 6vw, 2rem);
    }

    .trend-chart-summary__delta {
        font-size: 0.76rem;
    }

    .trend-chart-summary__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 0.45rem;
    }

    .trend-chart-summary__stat {
        min-width: 0;
        padding: 0.5rem 0.55rem;
    }

    .trend-chart-summary__stat-label {
        font-size: 0.6rem;
        letter-spacing: 0.04em;
    }

    .trend-chart-summary__stat-value {
        font-size: 0.78rem;
        margin-top: 0.16rem;
        word-break: break-word;
    }

    .trend-chart-summary__stat--latest .trend-chart-summary__stat-label {
        font-size: 0.56rem;
    }

    .trend-chart-summary__stat-value--latest {
        font-size: 0.72rem;
    }

    .trend-chart-legend {
        gap: 0.55rem;
        font-size: 0.76rem;
    }

    .trend-chart-legend__swatch {
        width: 0.9rem;
        height: 0.34rem;
    }

    .trend-chart-legend__checkbox {
        width: 0.9rem;
        height: 0.9rem;
    }

    .trend-chart-page {
        padding: 0.8rem;
    }

    .trend-chart-page__title {
        font-size: 1.05rem;
    }

    .trend-tabbar {
        gap: 0.45rem;
    }

    .trend-tabbar__btn {
        padding: 0.32rem 0.72rem;
        font-size: 0.8rem;
    }

    .trend-chart__label {
        font-size: 11px;
    }

    .trend-chart__label--x,
    .trend-chart__threshold-label,
    .trend-chart__day-label {
        font-size: 10px;
    }

    .chart-header-actions,
    .chart-zoom-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .chart-zoom-controls .btn,
    .chart-header-actions .trend-chart-card__badge {
        font-size: 0.78rem;
    }

    .chart-quick-stat {
        padding: 0.65rem 0.75rem;
    }

    .chart-quick-stat__label {
        font-size: 0.66rem;
    }

    .chart-quick-stat__value {
        font-size: 0.92rem;
    }
}

:root {
    --app-bg: #edf3f7;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-strong: #ffffff;
    --surface-soft: #f4f8fb;
    --ink-strong: #173042;
    --ink-muted: #637687;
    --line-soft: #d7e2ea;
    --line-strong: #c6d4df;
    --accent: #16748f;
    --accent-strong: #0f556e;
    --accent-soft: #dff1f6;
    --warning-soft: #fff0cd;
    --warning-ink: #8d5a00;
    --success-soft: #deefe5;
    --shadow-lg: 0 22px 55px rgba(20, 49, 68, 0.14);
    --shadow-md: 0 12px 28px rgba(20, 49, 68, 0.09);
    --radius-xl: 1.5rem;
    --radius-lg: 1.1rem;
}

body {
    background:
        radial-gradient(circle at top, rgba(34, 116, 143, 0.12), transparent 26%),
        linear-gradient(180deg, #f7fafc 0%, var(--app-bg) 100%);
    color: var(--ink-strong);
    font-family: "Segoe UI Variable Text", "Segoe UI", "Candara", "Trebuchet MS", sans-serif;
}

h1,
h2,
h3,
h4,
.page-title,
.login-hero-title,
.login-form-title {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    letter-spacing: -0.02em;
}

.app-gradient {
    background:
        radial-gradient(circle at top left, rgba(22, 116, 143, 0.14), transparent 24%),
        radial-gradient(circle at bottom right, rgba(230, 125, 63, 0.10), transparent 24%),
        linear-gradient(180deg, #f8fbfd 0%, #eef4f7 55%, #e8f0f4 100%);
}

.login-shell {
    position: relative;
}

.mobile-webview-body,
.mobile-webview-body body {
    background: #ffffff;
}

.mobile-webview-app {
    background: #ffffff;
}

.login-shell--mobile-webview {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.login-card--mobile-webview {
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
}

.login-card--mobile-webview .col-lg-6:last-child {
    width: 100%;
}

.login-card--mobile-webview .login-form-title {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
}

.login-card {
    border-radius: 1.8rem;
    box-shadow: var(--shadow-lg);
}

.hero-pane {
    background:
        linear-gradient(160deg, rgba(9, 45, 66, 0.96), rgba(19, 87, 113, 0.94) 62%, rgba(45, 116, 135, 0.9)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 24%);
}

.login-hero-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.04;
}

.login-hero-text {
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.02rem;
}

.icon-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 31rem;
}

.icon-showcase__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.icon-showcase__art {
    width: 3.75rem;
    height: 3.75rem;
    flex: 0 0 auto;
    display: block;
}

.icon-showcase__label {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.login-form-title {
    font-size: 2rem;
}

.section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.section-eyebrow--light {
    color: rgba(255, 255, 255, 0.76);
}

.app-shell {
    max-width: 1920px;
}

.app-shell > .row {
    --bs-gutter-x: 15px;
}

.app-sidebar {
    position: sticky;
    top: 1.25rem;
    min-height: calc(100vh - 2.5rem);
    border-radius: 1.75rem;
    box-shadow: var(--shadow-lg);
    overflow: visible;
}

.sidebar-shell {
    background:
        linear-gradient(180deg, rgba(10, 42, 60, 0.98), rgba(19, 63, 88, 0.97) 54%, rgba(29, 88, 111, 0.96)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 28%);
    overflow: visible;
}

.sidebar-control .form-label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.user-summary-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
}

.user-summary-card--topbar {
    min-width: min(100%, 18rem);
    background: linear-gradient(180deg, rgba(20, 50, 74, 0.96), rgba(31, 78, 108, 0.94));
    border-color: rgba(20, 50, 74, 0.1);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.user-summary-card__label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.56);
    margin-bottom: 0.35rem;
}

.user-summary-card__name {
    font-size: 1.05rem;
    font-weight: 700;
}

.user-summary-card__meta {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
}

.btn-nav {
    border-radius: 0.95rem;
    padding: 0.8rem 0.95rem;
    color: rgba(248, 249, 250, 0.88);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    font-weight: 600;
}

.btn-nav:hover,
.btn-nav.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.app-main {
    padding-bottom: 2rem;
}

@media (min-width: 1200px) {
    .app-main {
        padding-left: 0.25rem !important;
    }
}

.content-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md);
}

.page-title {
    font-size: clamp(2rem, 3.6vw, 3rem);
    color: var(--ink-strong);
}

.page-subtitle {
    color: var(--ink-muted);
    max-width: 48rem;
}

.topbar-context,
.session-summary-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: flex-end;
}

.topbar-context {
    align-items: flex-start;
}

.context-pill,
.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(22, 116, 143, 0.12);
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink-strong);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

.context-pill--soft {
    background: var(--surface-soft);
    color: var(--ink-muted);
}

.context-pill--warning,
.status-chip--warning {
    background: var(--warning-soft);
    color: var(--warning-ink);
    border-color: rgba(141, 90, 0, 0.12);
}

.metric-panel,
.panel-card,
.session-summary-card,
.trend-chart-page,
.trend-chart-card,
.trend-insights-card {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow-md);
}

.panel-card,
.session-form-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 252, 0.94));
}

.metric-panel {
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 252, 0.95)),
        radial-gradient(circle at top right, rgba(22, 116, 143, 0.12), transparent 30%);
}

.metric-panel__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.5rem;
}

.metric-panel__value {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ink-strong);
    margin-bottom: 0.55rem;
}

.metric-panel__hint,
.table-toolbar__text,
.section-header__text,
.session-summary-card__text,
.context-note {
    color: var(--ink-muted);
    font-size: 0.94rem;
}

.metric-panel .text-uppercase {
    color: var(--ink-muted) !important;
    letter-spacing: 0.1em;
    font-size: 0.74rem !important;
}

.metric-panel .display-6 {
    color: var(--ink-strong);
    font-weight: 700 !important;
}

.metric-panel--risk {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 246, 239, 0.96)),
        radial-gradient(circle at top right, rgba(226, 116, 57, 0.13), transparent 28%);
}

.metric-panel--bp {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 251, 0.96)),
        radial-gradient(circle at top right, rgba(22, 116, 143, 0.14), transparent 30%);
}

.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.table-toolbar--stacked {
    align-items: center;
}

.table-toolbar__meta,
.table-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: flex-end;
}

.range-note {
    font-size: 0.84rem;
    color: var(--ink-muted);
}

.sidebar-control--stacked {
    margin-bottom: 10px;
}

.searchable-select {
    position: relative;
    z-index: 20;
}

.searchable-select__menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0.16s ease;
}

.searchable-select--open .searchable-select__menu {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.searchable-select--open {
    z-index: 40;
}

.searchable-select__input {
    padding-right: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position: calc(100% - 1rem) calc(50% - 0.15rem), calc(100% - 0.7rem) calc(50% - 0.15rem);
    background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
    background-repeat: no-repeat;
}

.searchable-select--open .searchable-select__input {
    border-color: rgba(18, 92, 120, 0.45);
    box-shadow: 0 0 0 0.18rem rgba(18, 92, 120, 0.12);
}

.searchable-select__menu.searchable-select--open {
    height: auto;
    min-height: 7.5rem;
    max-height: 16rem;
    overflow-y: auto;
    box-shadow: 0 0 0 0.18rem rgba(18, 92, 120, 0.12);
}

.searchable-select__list {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 35;
    max-height: 13.5rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid #cfe0ee;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(10, 33, 53, 0.16);
}

.searchable-select__list--open {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.searchable-select__option {
    width: 100%;
    border: 0;
    border-radius: 0.75rem;
    background: #f5f8fc;
    color: #173750;
    text-align: left;
    padding: 0.58rem 0.75rem;
    font-size: 0.92rem;
    line-height: 1.2;
}

.searchable-select__option--active {
    background: rgba(18, 92, 120, 0.12);
    color: #125c78;
    font-weight: 700;
}

.searchable-select__empty {
    padding: 0.58rem 0.75rem;
    color: #627891;
    font-size: 0.9rem;
}

.mobile-webview-body .searchable-select__menu {
    display: none !important;
}

.table-modern {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(244, 248, 251, 0.9);
    --bs-table-hover-bg: rgba(232, 240, 245, 0.9);
    margin-bottom: 0;
}

.table-modern thead th {
    border-bottom-width: 1px;
    border-color: var(--line-soft);
    color: var(--ink-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.table-modern tbody td {
    border-color: rgba(215, 226, 234, 0.7);
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
    vertical-align: middle;
}

.card .table:not(.table-modern) thead th {
    border-bottom-width: 1px;
    border-color: var(--line-soft);
    color: var(--ink-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.card .table:not(.table-modern) tbody td {
    border-color: rgba(215, 226, 234, 0.7);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.trend-compact-table thead th {
    padding-top: 0.38rem !important;
    padding-bottom: 0.38rem !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.05em !important;
}

.trend-compact-table tbody td {
    padding-top: 0.42rem !important;
    padding-bottom: 0.42rem !important;
    line-height: 1.15;
    font-size: 0.88rem;
}

.trend-compact-table .status-chip {
    min-height: 1.28rem;
    padding: 0.14rem 0.46rem;
    font-size: 0.74rem;
}

.btn-xxs {
    padding: 0.1rem 0.35rem;
    font-size: 0.72rem;
    line-height: 1.1;
    border-radius: 0.42rem;
}

.sticky-panel,
.session-form-card {
    position: sticky;
    top: 1.25rem;
}

#branchFormWrap .card,
#view-users .col-xl-5 .card {
    position: sticky;
    top: 1.25rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.session-summary-card {
    padding: 1.35rem 1.5rem;
    background:
        linear-gradient(135deg, rgba(13, 67, 93, 0.96), rgba(28, 111, 129, 0.94)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 24%);
    color: #fff;
}

.session-summary-card__content {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.session-subview {
    animation: fade-slide-in 180ms ease-out;
}

.patient-subview {
    animation: fade-slide-in 180ms ease-out;
}

.session-editor-shell {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 251, 0.96));
}

.patient-editor-shell {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 251, 0.96));
}

.patient-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.15rem;
}

.patient-form-grid__span-2 {
    grid-column: 1 / -1;
}

.session-editor-topbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.session-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.session-editor-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.session-context-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.session-context-toolbar__patient {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-strong);
}

.session-patient-picker {
    border-top: 1px solid rgba(215, 226, 234, 0.72);
    padding-top: 1rem;
}

.session-patient-results {
    display: grid;
    gap: 0.75rem;
}

.session-patient-result {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink-strong);
    text-align: left;
    box-shadow: var(--shadow-md);
}

.session-patient-result:hover {
    border-color: rgba(18, 92, 120, 0.22);
    background: rgba(245, 250, 253, 0.98);
}

.session-patient-result__number {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.session-patient-result__name {
    font-size: 1rem;
    font-weight: 700;
}

.patient-lookup-toolbar {
    width: min(100%, 30rem);
}

.patient-search-input {
    min-width: min(100%, 16rem);
}

.patient-cards {
    display: none;
    gap: 0.9rem;
}

.patient-card {
    border: 1px solid var(--line-soft);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    padding: 1rem;
    box-shadow: var(--shadow-md);
}

.patient-card__top,
.patient-card__meta,
.session-helper-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.patient-card__top {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

.patient-card__name {
    font-weight: 700;
    color: var(--ink-strong);
}

.patient-card__number,
.patient-card__meta-label {
    font-size: 0.8rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.patient-card__meta {
    margin-top: 0.65rem;
}

.patient-card__meta-item {
    flex: 1 1 8rem;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    border-radius: 0.85rem;
    background: var(--surface-soft);
}

.patient-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.session-helper-actions {
    margin-top: 0.55rem;
}

.session-ocr-status {
    min-height: 1.25rem;
    margin: -0.15rem 0 0.45rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.session-ocr-modal {
    border: 0;
    border-radius: 1.4rem;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 248, 251, 0.97)),
        radial-gradient(circle at top right, rgba(22, 116, 143, 0.1), transparent 32%);
    box-shadow: 0 30px 70px rgba(11, 40, 57, 0.22);
}

.session-ocr-modal__header,
.session-ocr-modal__footer {
    border: 0;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
}

.session-ocr-modal__header {
    padding-top: 1.2rem;
    padding-bottom: 0.8rem;
}

.session-ocr-modal__body {
    padding: 0.6rem 1.3rem 1.1rem;
}

.session-ocr-modal__eyebrow {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.3rem;
}

.session-ocr-modal__hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.95rem;
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(13, 67, 93, 0.96), rgba(28, 111, 129, 0.94)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 26%);
    color: #fff;
}

.session-ocr-modal__summary {
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.35;
}

.session-ocr-modal__hint {
    margin-top: 0.35rem;
    color: rgba(235, 246, 250, 0.88);
    font-size: 0.92rem;
}

.session-ocr-modal__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.session-ocr-modal__badge {
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.78rem;
    font-weight: 600;
}

.session-ocr-modal__list {
    display: grid;
    gap: 0.4rem;
}

.session-ocr-modal__row {
    display: grid;
    grid-template-columns: 56px minmax(72px, auto) repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: center;
    padding: 0.55rem 0.6rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(212, 225, 233, 0.88);
    box-shadow: 0 10px 22px rgba(20, 49, 68, 0.05);
}

.session-ocr-modal__index {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(22, 116, 143, 0.12);
    color: var(--ink-strong);
    font-weight: 700;
    font-size: 0.75rem;
}

.session-ocr-modal__time {
    font-weight: 700;
    color: var(--ink-strong);
    font-size: 0.85rem;
}

.session-ocr-modal__metric {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.session-ocr-modal__metric span {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.session-ocr-modal__metric strong {
    color: var(--ink-strong);
    font-size: 0.8rem;
}

.session-ocr-modal__empty {
    padding: 1rem;
    border-radius: 0.95rem;
    border: 1px dashed rgba(166, 184, 194, 0.82);
    background: rgba(245, 249, 252, 0.94);
    color: var(--ink-muted);
}

.session-ocr-modal__raw-wrap {
    margin-top: 1rem;
}

.session-ocr-modal__raw-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.45rem;
}

.session-ocr-modal__raw-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.45rem;
}

.session-ocr-modal__raw {
    margin: 0;
    padding: 0.85rem 0.95rem;
    border-radius: 0.95rem;
    background: rgba(13, 30, 38, 0.95);
    color: rgba(240, 247, 250, 0.95);
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.session-ocr-modal__raw-toggle {
    white-space: nowrap;
}

.session-form-actions {
    position: sticky;
    bottom: 0.75rem;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.85rem;
    border-radius: 1rem;
    background: rgba(247, 250, 252, 0.92);
    border: 1px solid rgba(215, 226, 234, 0.9);
    box-shadow: 0 12px 28px rgba(20, 49, 68, 0.08);
}

.session-complete-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0.15rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink-strong);
}

.session-complete-check .form-check-input {
    margin: 0;
}

.session-complete-check .form-check-label {
    font-weight: 600;
    cursor: pointer;
}

.mobile-session-cards {
    display: none;
    gap: 0.9rem;
}

.mobile-session-card {
    border: 1px solid var(--line-soft);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.94);
    padding: 1rem;
    box-shadow: var(--shadow-md);
}

.mobile-session-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mobile-session-card__top--stacked {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}

.mobile-session-card__top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mobile-session-card__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.mobile-session-card__metric-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.08rem;
    padding: 0.1rem 0;
}

.mobile-session-card__metric-inline--soft {
    color: var(--ink-muted);
}

.mobile-session-card__metric-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink-strong);
}

.mobile-session-card__metric-inline--soft .mobile-session-card__metric-value {
    color: var(--ink-strong);
}

.mobile-session-card__metric-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mobile-session-card__title {
    font-weight: 700;
    color: var(--ink-strong);
}

.mobile-session-card__title--full {
    width: 100%;
    line-height: 1.15;
}

.mobile-session-card__subtitle {
    margin-top: 0.2rem;
    color: var(--ink-muted);
    font-size: 0.92rem;
}

.mobile-session-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.85rem;
}

.mobile-session-card__item {
    padding: 0.7rem 0.8rem;
    border-radius: 0.85rem;
    background: var(--surface-soft);
}

.mobile-session-card__item--wide {
    grid-column: 1 / -1;
}

.mobile-session-card__label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mobile-session-card__value {
    margin-top: 0.2rem;
    color: var(--ink-strong);
}

.mobile-session-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.chart-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.chart-quick-stat {
    border: 1px solid var(--line-soft);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.72rem 0.8rem;
    min-width: 0;
}

.chart-quick-stat__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.15;
}

.chart-quick-stat__value {
    margin-top: 0.18rem;
    color: var(--ink-strong);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.editor-panel {
    height: 100%;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: rgba(245, 249, 252, 0.9);
    border: 1px solid var(--line-soft);
}

.session-details-panel {
    padding: 1.15rem;
}

.session-bp-panel {
    min-height: 100%;
    padding: 1.15rem;
}

.session-fields-grid {
    align-items: start;
}

.session-number-field .form-control {
    width: min(100%, 14ch);
    min-width: 10ch;
}

.calculated-field {
    font-weight: 700;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.calculated-field.calc-empty {
    color: var(--ink-muted);
    background: rgba(244, 248, 251, 0.92);
    border-color: var(--line-soft);
}

.calculated-field.calc-positive {
    color: #0d6832;
    background: rgba(222, 239, 229, 0.92);
    border-color: rgba(13, 104, 50, 0.18);
}

.calculated-field.calc-negative {
    color: #9b2c2c;
    background: rgba(250, 230, 230, 0.95);
    border-color: rgba(155, 44, 44, 0.18);
}

.calculated-field.calc-zero {
    color: #8d5a00;
    background: rgba(255, 240, 205, 0.95);
    border-color: rgba(141, 90, 0, 0.18);
}

.calculated-field.calc-warning {
    color: var(--warning-ink);
    background: var(--warning-soft);
    border-color: rgba(141, 90, 0, 0.12);
}

.session-number-field .form-text {
    max-width: 30ch;
}

.session-number-field--compact .form-label {
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
}

.session-number-field--compact .form-control {
    font-size: 0.85rem;
    min-height: calc(1.5em + 0.35rem + 2px);
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
}

.session-number-field--compact .form-text {
    font-size: 0.64rem;
    line-height: 1.1;
    margin-top: 0.12rem;
    max-width: none;
}

.form-text--alert {
    color: #b54234 !important;
    font-weight: 700;
    animation: hint-blink 1.2s ease-in-out infinite;
}

@keyframes hint-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.session-editor-shell #sessionForm .form-control,
.session-editor-shell #sessionForm .form-select {
    width: 100%;
}

.session-details-panel #sessionPatient,
.session-details-panel #sessionPatientDisplay,
.session-details-panel #sessionNotes {
    width: 100%;
}

.session-details-panel #sessionPatientDisplay {
    font-weight: 700;
    color: var(--ink-strong);
    background: rgba(245, 250, 253, 0.98);
    border-color: rgba(18, 92, 120, 0.18);
}

.session-details-panel #sessionNotes {
    min-height: 10.5rem;
}

@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.session-summary-card__title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.05;
}

.session-summary-card__text {
    color: rgba(255, 255, 255, 0.8);
    max-width: 44rem;
}

.bp-readings-card {
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: rgba(242, 247, 250, 0.86);
    border: 1px solid var(--line-soft);
}

.bp-grid {
    border-radius: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line-soft);
}

.bp-grid__header {
    color: var(--ink-muted);
    font-size: 0.72rem;
}

.bp-grid__index {
    background: #e8f0f4;
    color: var(--accent-strong);
}

.pager-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
}

.pager-inline__label {
    min-width: 6.75rem;
    text-align: center;
    font-size: 0.84rem;
    color: var(--ink-muted);
}

.btn {
    border-radius: 0.9rem;
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-strong);
    --bs-btn-hover-border-color: var(--accent-strong);
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
    box-shadow: 0 10px 20px rgba(22, 116, 143, 0.18);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-strong);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: #eef4f7;
    --bs-btn-hover-color: var(--ink-strong);
    --bs-btn-hover-border-color: var(--line-strong);
}

.form-control,
.form-select {
    min-height: 2.9rem;
    border-radius: 0.95rem;
    border-color: var(--line-strong);
    background-color: rgba(255, 255, 255, 0.96);
    color: var(--ink-strong);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(22, 116, 143, 0.42);
    box-shadow: 0 0 0 0.2rem rgba(22, 116, 143, 0.12);
}

.form-label {
    color: var(--ink-strong);
    font-size: 0.92rem;
    font-weight: 600;
}

.form-text {
    color: var(--ink-muted);
}

.empty-state {
    color: var(--ink-muted);
    font-style: normal;
    padding: 1.1rem 0.6rem;
}

.trend-chart-page,
.trend-chart-card,
.trend-insights-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 247, 251, 0.95));
    border-color: rgba(210, 224, 233, 0.92);
}

.trend-tabbar__btn {
    background: #eef4f7;
    border-color: #d4e0e9;
}

.trend-tabbar__btn.active {
    background: var(--ink-strong);
    border-color: var(--ink-strong);
}

.feature-card {
    border-color: var(--line-soft);
    background: rgba(255, 255, 255, 0.82);
}

.feature-card__title {
    color: var(--ink-strong);
}

.feature-card__text {
    color: var(--ink-muted);
}

@media (max-width: 1399.98px) {
    .sticky-panel,
    .session-form-card,
    .app-sidebar {
        position: static;
    }

    #branchFormWrap .card,
    #patientFormWrap,
    #view-users .col-xl-5 .card {
        position: static;
    }
}

@media (max-width: 991.98px) {
    .content-topbar,
    .session-summary-card__content,
    .table-toolbar,
    .table-toolbar--stacked,
    .session-editor-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar-context {
        align-items: stretch;
    }

    .user-summary-card--topbar {
        min-width: 100%;
    }

    .topbar-context,
    .table-toolbar__meta,
    .table-toolbar__actions,
    .session-summary-card__chips,
    .session-editor-actions {
        justify-content: flex-start;
    }

    .sidebar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .app-shell {
        padding-left: 0;
        padding-right: 0;
    }

    .app-shell > .row {
        --bs-gutter-x: 0;
    }

    .login-shell--mobile-webview .row {
        min-height: 100vh !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .login-shell--mobile-webview .col-lg-6:last-child {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .icon-showcase {
        grid-template-columns: 1fr;
    }

    .app-main {
        padding-left: 5px;
        padding-right: 5px;
    }

    .content-topbar,
    .panel-card,
    .session-summary-card,
    .metric-panel {
        border-radius: 1.2rem;
    }

    .content-topbar {
        margin-left: -5px;
        margin-right: -5px;
    }

    #view-dashboard > .card,
    #view-charts > .card,
    #view-alerts > .card,
    #view-patients .card,
    #view-sessions .card,
    #view-users .card {
        margin-left: -5px;
        margin-right: -5px;
    }

    .sidebar-nav {
        grid-template-columns: 1fr;
    }

    .pager-inline {
        width: 100%;
        justify-content: space-between;
    }

    .pager-inline__label {
        min-width: 0;
        flex: 1;
    }

    .session-number-field .form-control {
        width: 100%;
        min-width: 0;
    }

    #bpReadingsList .bp-grid__input[type="number"] {
        max-width: none;
    }

    .patient-lookup-toolbar,
    .patient-search-input,
    .session-form-actions > .btn {
        width: 100%;
    }

    .session-form-actions {
        align-items: stretch;
    }

    .session-complete-check {
        width: 100%;
        justify-content: center;
        margin: 0;
    }

    .session-editor-shell > .card-body {
        padding: 0.85rem;
    }

    .session-editor-topbar {
        gap: 0.75rem;
        margin-bottom: 0.9rem !important;
    }

    .session-editor-topbar .section-eyebrow {
        margin-bottom: 0.2rem !important;
    }

    .session-editor-topbar .h4 {
        font-size: 1.3rem;
        margin-bottom: 0.2rem !important;
    }

    .session-editor-topbar .page-subtitle {
        font-size: 0.9rem;
        line-height: 1.35;
    }

    .session-editor-summary {
        gap: 0.45rem;
        margin-bottom: 0.85rem !important;
    }

    .session-editor-shell #sessionForm {
        gap: 0.85rem !important;
    }

    .session-editor-grid {
        --bs-gutter-x: 0.6rem;
        --bs-gutter-y: 0.6rem;
    }

    .session-details-panel,
    .session-bp-panel,
    .bp-readings-card {
        padding: 0.7rem;
    }

    .session-fields-grid {
        --bs-gutter-x: 0.6rem;
        --bs-gutter-y: 0.55rem;
    }

    .session-editor-shell .form-label {
        font-size: 0.82rem;
        margin-bottom: 0.28rem;
    }

    .session-editor-shell .form-control,
    .session-editor-shell .form-select,
    .session-editor-shell .btn {
        min-height: 2.55rem;
        font-size: 0.95rem;
    }

    .session-editor-shell .form-text {
        font-size: 0.78rem;
        margin-top: 0.25rem;
    }

    .session-helper-actions {
        margin-top: 0.35rem;
    }

    .session-helper-actions .btn {
        min-height: 2.3rem;
    }

    .session-details-panel #sessionPatientDisplay,
    .session-details-panel #sessionNotes {
        width: 100%;
    }

    .session-details-panel #sessionNotes {
        min-height: 6.5rem;
    }

    .patient-cards {
        display: grid;
    }

    .patient-table-wrap {
        display: none;
    }

    .mobile-session-cards {
        display: grid;
    }

    .mobile-table-wrap {
        display: none;
    }

    .bp-grid {
        grid-template-columns: 2rem minmax(5.4rem, 1.15fr) repeat(3, minmax(0, 0.9fr));
        gap: 0.35rem;
        padding: 0.5rem;
    }

    .bp-grid__header {
        font-size: 0.66rem;
        text-align: center;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .bp-grid__input {
        min-width: 0;
        width: 100%;
    }

    #bpReadingsList .bp-grid__input {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.95rem;
    }

    #bpReadingsList .bp-grid__input[data-reading-field="systolic"] {
        font-size: 0.86rem;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .bp-readings-card,
    .session-bp-panel {
        padding: 0.75rem;
    }

    .session-bp-panel .form-text {
        font-size: 0.86rem;
    }

    .session-helper-actions .btn,
    .session-editor-actions .btn,
    .mobile-session-card__actions .btn {
        width: 100%;
    }

    .session-ocr-modal__hero,
    .session-ocr-modal__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .session-ocr-modal__row {
        grid-template-columns: 1fr;
    }

    .patient-form-grid {
        grid-template-columns: 1fr;
    }

    .session-ocr-modal__raw-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .mobile-session-card {
        padding: 0.8rem;
    }

    .mobile-session-card__top {
        gap: 0.55rem;
    }

    .mobile-session-card__top-row {
        gap: 0.55rem;
    }

    .mobile-session-card__badges {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-left: auto;
    }

    .mobile-session-card__metric-inline {
        align-items: flex-end;
    }

    .mobile-session-card__title {
        font-size: 0.98rem;
    }

    .mobile-session-card__title--full {
        font-size: 0.98rem;
    }

    .mobile-session-card__subtitle {
        font-size: 0.84rem;
        margin-top: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .mobile-session-card__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 0.7rem;
    }

    .mobile-session-card__item {
        padding: 0.55rem 0.65rem;
    }

    .mobile-session-card__label {
        font-size: 0.68rem;
    }

    .mobile-session-card__value {
        font-size: 0.88rem;
    }

    .chart-quick-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .chart-quick-stat {
        padding: 0.58rem 0.62rem;
        border-radius: 0.9rem;
    }

    .chart-quick-stat__label {
        font-size: 0.64rem;
        letter-spacing: 0.05em;
    }

    .chart-quick-stat__value {
        font-size: 0.82rem;
        margin-top: 0.12rem;
    }

    .app-sidebar {
        min-height: auto;
        padding: 1rem !important;
    }

    .sidebar-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.65rem;
        padding-bottom: 0.2rem;
        scrollbar-width: thin;
    }

    .sidebar-nav .btn-nav {
        white-space: nowrap;
        min-width: max-content;
    }

    .sidebar-control,
    .user-summary-card {
        margin-bottom: 1rem !important;
    }

    .session-form-actions {
        bottom: 0;
        margin: 0 -0.25rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}