:root { --cp-side: #14213d; --cp-accent: #fca311; --cp-bg: #f4f6fa; }
html { font-size: 14px; }
body { background: var(--cp-bg); color: #1f2937; }
.cp-shell { display: flex; min-height: 100vh; }
.cp-side { width: 230px; flex: 0 0 230px; background: var(--cp-side); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.cp-brand { font-weight: 700; font-size: 1.25rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.cp-brand span { display: block; font-weight: 400; font-size: .8rem; color: var(--cp-accent); letter-spacing: .05em; text-transform: uppercase; }
.cp-side .nav-link { color: rgba(255,255,255,.75); padding: .55rem 1.2rem; border-left: 3px solid transparent; }
.cp-side .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.cp-side .nav-link.active { color: #fff; border-left-color: var(--cp-accent); background: rgba(255,255,255,.08); }
.cp-side-sep { font-size: .7rem; text-transform: uppercase; color: rgba(255,255,255,.4); padding: 1rem 1.2rem .3rem; letter-spacing: .08em; }
.cp-user { margin-top: auto; padding: 1rem 1.2rem; border-top: 1px solid rgba(255,255,255,.1); }
.cp-main { flex: 1; padding: 1.5rem 2rem; min-width: 0; }
.cp-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cp-card { background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.cp-card h5 { font-size: 1rem; font-weight: 600; margin-bottom: .9rem; }
.cp-kpi { background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; padding: 1rem 1.2rem; height: 100%; }
.cp-kpi .lbl { font-size: .78rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.cp-kpi .val { font-size: 1.6rem; font-weight: 700; margin-top: .2rem; }
.cp-kpi a { text-decoration: none; color: inherit; }
.table thead th { font-size: .75rem; text-transform: uppercase; color: #6b7280; letter-spacing: .03em; background: #f9fafb; white-space: nowrap; }
.table td { vertical-align: middle; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.meter { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.meter > div { height: 100%; background: #16a34a; }
.meter > div.warn { background: #f59e0b; }
.meter > div.over { background: #dc2626; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }
.text-pre { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 900px) {
    .cp-shell { flex-direction: column; }
    .cp-side { width: 100%; height: auto; position: static; flex: none; }
    .cp-side .nav { flex-direction: row !important; flex-wrap: wrap; }
    .cp-main { padding: 1rem; }
}
@media print {
    .cp-side, .no-print, .alert { display: none !important; }
    .cp-main { padding: 0; }
    body { background: #fff; }
}

/* Bootstrap 5.1 has no text-bg-* helpers (added in 5.2): same colours, so badges are visible */
.text-bg-primary   { color: #fff !important; background-color: #0d6efd !important; }
.text-bg-secondary { color: #fff !important; background-color: #6c757d !important; }
.text-bg-success   { color: #fff !important; background-color: #198754 !important; }
.text-bg-danger    { color: #fff !important; background-color: #dc3545 !important; }
.text-bg-warning   { color: #000 !important; background-color: #ffc107 !important; }
.text-bg-info      { color: #000 !important; background-color: #0dcaf0 !important; }
.text-bg-light     { color: #000 !important; background-color: #f8f9fa !important; }
.text-bg-dark      { color: #fff !important; background-color: #212529 !important; }
.cp-logo { display: block; height: 38px; width: auto; margin-bottom: .35rem; }
.cp-logo-login { display: block; height: 52px; width: auto; }

/* ---- collapsible sidebar: click the arrow to open / close; the page follows ---- */
.cp-side { transition: width .2s ease, flex-basis .2s ease; overflow: hidden; z-index: 20; }
.cp-brand { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1rem; }
.cp-brand-link { display: flex; align-items: center; }
.cp-brand .cp-brand-mini { display: none; }
.cp-logo-mini { height: 34px; width: auto; display: block; }
.cp-logo { margin-bottom: 0; }
.cp-pin { background: none; border: 0; color: rgba(255,255,255,.7); font-size: 1rem; padding: .25rem .4rem; border-radius: .3rem; display: inline-flex; }
.cp-pin:hover { color: #fff; background: rgba(255,255,255,.1); }
.cp-side .nav-link { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.cp-side .nav-link .bi { font-size: 1.1rem; width: 1.25rem; text-align: center; flex: 0 0 auto; }
.cp-pin .bi { display: inline-block; transition: transform .2s; }
.cp-unpinned .cp-pin .bi { transform: rotate(180deg); }
@media (min-width: 768px) {
    /* closed = icon strip; page uses the rest. Hover opens it on top of the page. */
    .cp-unpinned .cp-side { position: fixed; left: 0; top: 0; width: 60px; flex-basis: 60px; }
    .cp-unpinned .cp-main { margin-left: 60px; }
    .cp-unpinned .cp-side:not(:hover) .lbl,
    .cp-unpinned .cp-side:not(:hover) .cp-user-info,
    .cp-unpinned .cp-side:not(:hover) .cp-brand .cp-brand-full { display: none; }
    .cp-unpinned .cp-side:not(:hover) .cp-brand .cp-brand-mini { display: block; }
    .cp-unpinned .cp-side:not(:hover) .cp-brand { flex-direction: column; justify-content: center; padding: .7rem 0; gap: .4rem; }
    .cp-unpinned .cp-side:not(:hover) .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
    .cp-unpinned .cp-side:not(:hover) .cp-side-sep { visibility: hidden; padding: .4rem 0; }
    .cp-unpinned .cp-side:not(:hover) .cp-user { padding: .75rem .4rem; }
    .cp-unpinned .cp-side:hover { width: 230px; box-shadow: 4px 0 18px rgba(0,0,0,.25); }
}