:root {
    --ubl-navy: #0f1b2d;
    --ubl-navy-soft: #17263c;
    --ubl-amber: #f0a92b;
    --ubl-amber-dark: #c9861a;
    --ubl-teal: #22a6a0;
    --ubl-red: #d9534f;
    --ubl-ink: #1d2733;
    --ubl-muted: #6b7a8d;
    --ubl-line: #e3e8ef;
    --ubl-bg: #f5f7fa;
    --ubl-card-shadow: 0 1px 2px rgba(16, 27, 45, .06), 0 8px 24px rgba(16, 27, 45, .06);
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--ubl-bg);
    color: var(--ubl-ink);
}

h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -.01em;
}

h1 {
    font-size: 1.6rem;
}

a, .btn-link {
    color: #0b6bcb;
}

.btn-primary {
    color: #10192a;
    background-color: var(--ubl-amber);
    border-color: var(--ubl-amber-dark);
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus {
    color: #10192a;
    background-color: var(--ubl-amber-dark);
    border-color: var(--ubl-amber-dark);
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(240, 169, 43, .35);
}

.content {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
    max-width: 1320px;
}

/* Page header */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.page-head .eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem;
    font-weight: 700;
    color: var(--ubl-muted);
}

.page-head p {
    margin: .35rem 0 0;
    color: var(--ubl-muted);
    max-width: 62ch;
}

/* Cards */
.card-ubl {
    background: #fff;
    border: 1px solid var(--ubl-line);
    border-radius: 14px;
    box-shadow: var(--ubl-card-shadow);
    padding: 1.1rem 1.25rem;
    height: 100%;
}

.card-ubl h2, .card-ubl h3 {
    font-size: 1rem;
    margin-bottom: .85rem;
}

.card-ubl .card-hint {
    color: var(--ubl-muted);
    font-size: .8rem;
}

/* KPI */
.kpi {
    position: relative;
    overflow: hidden;
}

.kpi .kpi-label {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .68rem;
    font-weight: 700;
    color: var(--ubl-muted);
}

.kpi .kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: .3rem;
}

.kpi .kpi-sub {
    font-size: .8rem;
    color: var(--ubl-muted);
    margin-top: .2rem;
}

.kpi-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: var(--ubl-amber);
}

.kpi-accent.teal  { background: var(--ubl-teal); }
.kpi-accent.navy  { background: var(--ubl-navy); }
.kpi-accent.red   { background: var(--ubl-red); }
.kpi-accent.amber { background: var(--ubl-amber); }

.delta-up { color: #17805a; font-weight: 600; }
.delta-down { color: var(--ubl-red); font-weight: 600; }

/* Bar list */
.bar-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--ubl-line);
}

.bar-row:last-child { border-bottom: 0; }

.bar-row .bar-label {
    font-size: .88rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-row .bar-value {
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    color: var(--ubl-muted);
}

.bar-track {
    grid-column: 1 / -1;
    height: 6px;
    background: #eef1f6;
    border-radius: 99px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--ubl-amber), var(--ubl-amber-dark));
}

.bar-fill.teal { background: linear-gradient(90deg, #37c2bc, var(--ubl-teal)); }

/* Tables */
.table-ubl {
    font-size: .88rem;
}

.table-ubl thead th {
    background: #f7f9fc;
    border-bottom: 1px solid var(--ubl-line) !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .68rem;
    color: var(--ubl-muted);
    white-space: nowrap;
}

.table-ubl td {
    vertical-align: middle;
}

.table-ubl .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Chips / suggestions */
.chip {
    border: 1px solid var(--ubl-line);
    background: #fff;
    border-radius: 999px;
    padding: .32rem .8rem;
    font-size: .82rem;
    color: var(--ubl-ink);
    cursor: pointer;
    transition: all .15s ease;
}

.chip:hover {
    border-color: var(--ubl-amber);
    background: #fffaf0;
}

.chip.active {
    border-color: var(--ubl-amber-dark);
    background: var(--ubl-amber);
    font-weight: 600;
}

/* Ask bar */
.ask-bar {
    display: flex;
    gap: .6rem;
    background: #fff;
    border: 1px solid var(--ubl-line);
    border-radius: 14px;
    padding: .6rem;
    box-shadow: var(--ubl-card-shadow);
}

.ask-bar input {
    border: 0;
    box-shadow: none !important;
    font-size: .95rem;
}

/* Chat scroll container */
.chat-scroll {
    min-height: 340px;
    max-height: 560px;
    overflow-y: auto;
    background: #f9fbfd;
}

/* Chat bubbles */
.bubble {
    border-radius: 14px;
    padding: .7rem .95rem;
    max-width: 82%;
    font-size: .9rem;
    line-height: 1.55;
}

.bubble-user {
    background: var(--ubl-navy);
    color: #fff;
}

.bubble-bot {
    background: #fff;
    border: 1px solid var(--ubl-line);
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.chat-ts {
    font-size: .68rem;
    opacity: .45;
    margin-top: .35rem;
    text-align: right;
}

/* Inline chat table */
.table-ubl {
    font-size: .82rem;
}
.table-ubl thead th {
    font-weight: 600;
    color: var(--ubl-muted);
    border-bottom: 1px solid var(--ubl-line);
    padding: .25rem .4rem;
}
.table-ubl tbody td {
    padding: .2rem .4rem;
    border-bottom: 1px solid #f2f4f8;
}

/* Misc */
.badge-soft {
    background: #eef4ff;
    color: #1c4fa1;
    font-weight: 600;
}

.badge-soft-amber {
    background: #fff3dd;
    color: #8a5b06;
    font-weight: 600;
}

.badge-soft-green {
    background: #e7f7ef;
    color: #17805a;
    font-weight: 600;
}

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ubl-muted);
}

.mono-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    white-space: pre-wrap;
    background: #0f1b2d;
    color: #dbe6f5;
    border-radius: 10px;
    padding: 1rem;
    overflow-x: auto;
}

.spinner-inline {
    width: 1rem;
    height: 1rem;
    border-width: .15em;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 10px;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
}

.btn-ubl {
    background: #fff;
    border: 1px solid var(--ubl-line);
    color: var(--ubl-navy);
    font-weight: 600;
}

.btn-ubl:hover:not(:disabled) {
    background: var(--ubl-navy);
    border-color: var(--ubl-navy);
    color: #fff;
}

.btn-ubl:disabled {
    opacity: .6;
}

/* Status pills */
.pill {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.pill-green { background: #e7f7ef; color: #17805a; }
.pill-amber { background: #fff3dd; color: #8a5b06; }
.pill-red   { background: #fdeaea; color: #a52a26; }
.pill-navy  { background: #eaeef6; color: #2c3f5c; }

/* Status dots */
.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    vertical-align: middle;
}

.dot-green { background: #21a86f; }
.dot-amber { background: var(--ubl-amber); }
.dot-red   { background: var(--ubl-red); }

/* Auto briefing */
.briefing {
    border-left: 3px solid var(--ubl-amber);
}

.briefing-list {
    list-style: none;
    padding-left: 0;
    margin-top: .35rem;
}

.briefing-list li {
    position: relative;
    padding: .4rem 0 .4rem 1.35rem;
    font-size: .9rem;
    line-height: 1.55;
    border-bottom: 1px dashed var(--ubl-line);
}

.briefing-list li:last-child {
    border-bottom: none;
}

.briefing-list li::before {
    content: "";
    position: absolute;
    left: .25rem;
    top: .95rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ubl-teal);
}

/* Compact stat tiles */
.mini-stat {
    border: 1px solid var(--ubl-line);
    border-radius: 10px;
    padding: .6rem .4rem;
    background: #fbfcfe;
}

.mini-stat-key {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ubl-muted);
}

.mini-stat-val {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.mini-stat-sub {
    font-size: .72rem;
    color: var(--ubl-muted);
}

.lineage {
    font-size: .88rem;
    line-height: 1.85;
    padding-left: 1.1rem;
    color: var(--ubl-ink);
}

/* Printing a report should not carry the app shell */
@media print {
    .no-print,
    .sidebar,
    .top-row,
    .navbar-toggler {
        display: none !important;
    }

    body, html {
        background: #fff;
    }

    .page {
        display: block;
    }

    main {
        padding: 0 !important;
    }

    .card-ubl {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
}