:root {
    /* Layout */
    --sidebar: 270px;
    --sidebar-collapsed: 78px;

    /* Surfaces */
    --bg: #f5f7f9;
    --surface: #fff;
    --soft: #f8fafb;

    /* Text */
    --text: #172033;
    --muted: #667085;
    --dark: #20262d;

    /* Borders */
    --border: #e1e6ec;

    /* Hospital Theme */
    --hospital-green: #079455;
    --hospital-green-dark: #067647;
    --hospital-green-soft: #ecfdf3;
    --hospital-green-border: #abefc6;
}


/* ================================================================
   BASE
================================================================ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ================================================================
   APPLICATION LAYOUT
================================================================ */

.app-main {
    min-height: 100vh;
    margin-left: var(--sidebar);
    transition: margin-left .24s ease;
}

body.sidebar-collapsed .app-main {
    margin-left: var(--sidebar-collapsed);
}

.page-content {
    width: 100%;
    max-width: 1500px;
    padding: 24px;
}


/* ================================================================
   SHARED CARDS
================================================================ */

.card {
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}


/* ================================================================
   PAGE HEADER
================================================================ */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 17px;
}

.page-head h2 {
    margin: 0 0 4px;
    font-size: 1.45rem;
}

.page-head p {
    max-width: 850px;
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
}


/* ================================================================
   TYPOGRAPHY / LABELS
================================================================ */

.section-title {
    font-size: .91rem;
    font-weight: 760;
}

.mini-label {
    color: var(--muted);
    font-size: .66rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.help-text,
.stat-note {
    color: var(--muted);
    font-size: .72rem;
}

.code-label {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    font-size: .72rem;
}


/* ================================================================
   SUMMARY / STAT CARDS
================================================================ */

.stat-card {
    min-height: 116px;
}

.stat-label {
    color: var(--muted);
    font-size: .74rem;
}

.stat-value {
    margin-top: 5px;
    font-size: 1.5rem;
    font-weight: 780;
}


/* ================================================================
   TABLES
================================================================ */

.table th {
    color: var(--muted);
    font-size: .67rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td {
    font-size: .79rem;
    vertical-align: middle;
}


/* ================================================================
   BADGES / STATUS
================================================================ */

.badge-soft {
    background: #eef1f4;
    color: #475467;
}

.severity-high {
    background: #fee4e2;
    color: #b42318;
}

.severity-medium {
    background: #fef3c7;
    color: #92400e;
}

.severity-low {
    background: #e0f2fe;
    color: #075985;
}


/* ================================================================
   INFORMATION BOXES
================================================================ */

.info-box,
.rule-box,
.warning-box,
.success-box,
.danger-box {
    padding: 12px;
    border-radius: 9px;
}

.info-box,
.rule-box {
    background: var(--soft);
    border: 1px solid var(--border);
}

.warning-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: .78rem;
}

.success-box {
    background: var(--hospital-green-soft);
    border: 1px solid var(--hospital-green-border);
    font-size: .78rem;
}

.danger-box {
    background: #fff1f3;
    border: 1px solid #fecdd3;
    font-size: .78rem;
}


/* ================================================================
   WORKFLOW
================================================================ */

.workflow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.workflow-step {
    padding: 6px 9px;
    background: var(--soft);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: .7rem;
    font-weight: 650;
}

.workflow-step.done {
    background: var(--hospital-green-soft);
    border-color: var(--hospital-green-border);
    color: var(--hospital-green-dark);
}

.workflow-step.current {
    background: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

.workflow-arrow {
    color: #98a2b3;
    font-size: .72rem;
}


/* ================================================================
   FINANCIAL BREAKDOWN
================================================================ */

.breakdown-row,
.metric-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #eef1f4;
}

.breakdown-row {
    padding: 8px 0;
    font-size: .8rem;
}

.metric-line {
    padding: 9px 0;
    border-bottom-color: var(--border);
    font-size: .79rem;
}

.metric-line:last-child {
    border-bottom: 0;
}

.net-panel {
    margin-top: 12px;
    padding: 17px;
    background: var(--dark);
    border-radius: 10px;
    color: #fff;
}

.net-amount {
    font-size: 1.75rem;
    font-weight: 800;
}


/* ================================================================
   SIMPLE BAR CHART
================================================================ */

.bar-chart {
    height: 190px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-top: 12px;
}

.bar-wrap {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.bar {
    width: 100%;
    max-width: 50px;
    background: #343a40;
    border-radius: 5px 5px 0 0;
}

.bar-label {
    margin-top: 5px;
    color: var(--muted);
    font-size: .64rem;
}


/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 991.98px) {
    .app-main,
    body.sidebar-collapsed .app-main {
        margin-left: 0;
    }

    .page-content {
        padding: 15px;
    }

    .page-head {
        flex-direction: column;
    }
}