/* CarbonPlus CPOS Operator Console — app.css (M015 / 0.15.0). Hand-authored; no build step.
 * CarbonPlus brand refresh: green-led premium palette, deep-forest chrome (top bar + sidebar), calm light
 * canvas, sectioned & collapsible navigation, enterprise dashboard (hero + grouped cards), refined cards,
 * buttons, forms, tables and badges. Loaded AFTER Bootstrap 5 so component overrides win. No route, ACTION,
 * PAGE, id, form or behaviour is defined here — this file is presentation only. WCAG 2.1 AA: visible focus,
 * semantic headings, colour is never the only status signal (badges carry text), keyboard-navigable, responsive
 * (no horizontal overflow; usable at 1366×768 and below). */

:root {
  /* Deep-forest navigation chrome (top bar + sidebar) */
  --cpos-chrome-bg: #0C2019;
  --cpos-sidebar-bg: #0C2019;
  --cpos-surface-elevated: #0E271E;
  --cpos-nav-hover: #163A2C;
  --cpos-divider: #1E3E31;
  --cpos-on-dark: #DBEAE1;
  --cpos-on-dark-muted: #8FB4A2;
  --cpos-nav-active: #15803D;
  --cpos-nav-accent: #4ADE80;
  --cpos-on-dark-strong: #FFFFFF;
  /* Light application surface (green-tinted neutrals) */
  --cpos-app-bg: #F5F8F6;
  --cpos-card: #FFFFFF;
  --cpos-surface-2: #EEF3EF;
  --cpos-surface-3: #E6EEE9;
  --cpos-text: #12211A;
  --cpos-text-muted: #5C6F65;
  --cpos-border: #DBE5DF;
  --cpos-border-strong: #C4D3CA;
  /* CarbonPlus green brand */
  --cpos-primary: #15803D;
  --cpos-primary-hover: #12652F;
  --cpos-primary-soft: #E7F4EC;
  --cpos-primary-soft-border: #BEE3CC;
  --cpos-accent: #22C55E;
  --cpos-info: #0E7490;
  /* Status */
  --cpos-ok: #16A34A;
  --cpos-pending: #D97706;
  --cpos-error: #DC2626;
  --cpos-neutral: #64756B;
  --cpos-focus: #15803D;
  --cpos-header-h: 58px;
  --cpos-sidebar-w: 268px;
  --cpos-sidebar-collapsed-w: 68px;
}

/* ---------- base ---------- */
html, body { height: 100%; }
.cpos-body { min-height: 100vh; background: var(--cpos-app-bg); color: var(--cpos-text); -webkit-font-smoothing: antialiased; }
.cpos-skip-link { position: absolute; left: .5rem; top: .5rem; z-index: 1080; background: #fff; padding: .4rem .75rem; border-radius: 6px; }
.cpos-muted, .text-secondary { color: var(--cpos-text-muted) !important; }
a { color: var(--cpos-primary); }
a:hover { color: var(--cpos-primary-hover); }

/* Visible focus for keyboard users (WCAG 2.4.7). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.nav-link:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline: 3px solid var(--cpos-focus); outline-offset: 2px; box-shadow: none;
}
.cpos-main:focus { outline: none; }

/* ---------- deep-forest topbar ---------- */
.cpos-header {
  position: sticky; top: 0; z-index: 1040;
  background: var(--cpos-chrome-bg);
  border-bottom: 1px solid var(--cpos-divider);
  color: var(--cpos-on-dark);
  height: var(--cpos-header-h);
}
.cpos-header-inner { height: var(--cpos-header-h); padding: 0 1rem; }
.cpos-header-brand { color: var(--cpos-on-dark-strong); font-weight: 700; letter-spacing: .01em; }
.cpos-header-brand span { color: var(--cpos-nav-accent); }
.cpos-header-user { color: var(--cpos-on-dark-muted); }
.cpos-header .btn-outline-light { color: var(--cpos-on-dark); border-color: #2C5142; }
.cpos-header .btn-outline-light:hover { background: var(--cpos-nav-hover); color: var(--cpos-on-dark-strong); border-color: #3B6653; }

/* Nav toggles (mobile burger + desktop collapse) */
.cpos-nav-toggle, .cpos-nav-collapse {
  color: var(--cpos-on-dark); border: 1px solid #2C5142; background: transparent;
  width: 36px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
}
.cpos-nav-toggle:hover, .cpos-nav-collapse:hover { background: var(--cpos-nav-hover); color: #fff; border-color: #3B6653; }
.cpos-burger { position: relative; width: 16px; height: 2px; background: currentColor; display: block; }
.cpos-burger::before, .cpos-burger::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.cpos-burger::before { top: -5px; } .cpos-burger::after { top: 5px; }
.cpos-collapse-icon { position: relative; width: 14px; height: 14px; display: block; }
.cpos-collapse-icon::before { content: ""; position: absolute; top: 1px; bottom: 1px; left: 0; width: 2px; background: currentColor; border-radius: 1px; }
.cpos-collapse-icon::after { content: ""; position: absolute; top: 3px; left: 5px; width: 6px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }

/* ---------- shell layout ---------- */
.cpos-shell { width: 100%; }
.cpos-shell-row { display: flex; align-items: flex-start; min-height: calc(100vh - var(--cpos-header-h)); }

/* ---------- deep-forest sidebar ---------- */
.cpos-sidebar {
  flex: 0 0 var(--cpos-sidebar-w); width: var(--cpos-sidebar-w);
  align-self: stretch;
  position: sticky; top: var(--cpos-header-h);
  height: calc(100vh - var(--cpos-header-h)); overflow-y: auto; overflow-x: hidden;
  background: var(--cpos-sidebar-bg);
  border-right: 1px solid var(--cpos-divider);
  display: flex; flex-direction: column;
  transition: flex-basis .16s ease, width .16s ease;
}
.cpos-sidebar-brand { padding: .9rem 1rem .75rem; border-bottom: 1px solid var(--cpos-divider); }
.cpos-sidebar-logo { display: flex; align-items: center; gap: .55rem; color: var(--cpos-on-dark-strong); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.cpos-sidebar-mark { display: none; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--cpos-primary), var(--cpos-accent)); color: #fff; font-weight: 800; font-size: .82rem; align-items: center; justify-content: center; }
.cpos-sidebar-wordmark span { color: var(--cpos-nav-accent); }
.cpos-sidebar-tagline { margin: .3rem 0 0; color: var(--cpos-on-dark-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.cpos-sidebar-scroll { flex: 1 1 auto; padding: .5rem .55rem 1.5rem; }
.cpos-sidebar .nav { gap: .05rem; }

/* Section headings inside the sidebar */
.cpos-nav-section { list-style: none; padding: .85rem .7rem .3rem; }
.cpos-nav-section:first-child { padding-top: .25rem; }
.cpos-nav-section-label { color: var(--cpos-on-dark-muted); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; opacity: .85; }

.cpos-sidebar .nav-link {
  display: flex; align-items: center; gap: .6rem;
  color: var(--cpos-on-dark); border-radius: 8px; padding: .5rem .7rem;
  font-size: .9rem; font-weight: 500; white-space: nowrap;
  border-left: 3px solid transparent;
}
.cpos-sidebar .nav-link:hover { background: var(--cpos-nav-hover); color: var(--cpos-on-dark-strong); }
.cpos-sidebar .nav-link:focus-visible { outline: 3px solid var(--cpos-nav-accent); outline-offset: -1px; }
.cpos-sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(21,128,61,.30), rgba(21,128,61,.14)); color: #fff; font-weight: 600;
  border-left: 3px solid var(--cpos-nav-accent);
}
/* Consistent line icon (single system marker) so items read as a set. */
.cpos-nav-icon { flex: 0 0 18px; width: 18px; height: 18px; border: 1.7px solid currentColor; border-radius: 5px; opacity: .55; position: relative; }
.cpos-nav-icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 1.7px; background: currentColor; }
.cpos-sidebar .nav-link.active .cpos-nav-icon { opacity: 1; }
.cpos-nav-label { flex: 1 1 auto; }
.cpos-nav-children { margin: .1rem 0 .35rem 1.7rem; gap: 0; border-left: 1px solid var(--cpos-divider); padding-left: .45rem; }
.cpos-nav-child { color: var(--cpos-on-dark-muted); font-size: .82rem; font-weight: 400; padding: .3rem .6rem; border-radius: 6px; border-left: 0; white-space: nowrap; }
.cpos-nav-child:hover { background: var(--cpos-nav-hover); color: var(--cpos-on-dark); }

/* ---------- collapsed rail (desktop only) ---------- */
@media (min-width: 992px) {
  .cpos-collapsed .cpos-sidebar { flex-basis: var(--cpos-sidebar-collapsed-w); width: var(--cpos-sidebar-collapsed-w); }
  .cpos-collapsed .cpos-sidebar .nav-link { justify-content: center; padding: .55rem 0; border-left-width: 0; }
  .cpos-collapsed .cpos-sidebar .nav-link.active { background: var(--cpos-nav-hover); border-radius: 8px; }
  .cpos-collapsed .cpos-nav-label,
  .cpos-collapsed .cpos-nav-children,
  .cpos-collapsed .cpos-sidebar-tagline,
  .cpos-collapsed .cpos-sidebar-wordmark,
  .cpos-collapsed .cpos-nav-section-label { display: none; }
  .cpos-collapsed .cpos-sidebar-mark { display: inline-flex; }
  .cpos-collapsed .cpos-sidebar-logo { justify-content: center; }
  .cpos-collapsed .cpos-sidebar-brand { padding-left: .5rem; padding-right: .5rem; }
  .cpos-collapsed .cpos-nav-section { padding: .5rem 0 .1rem; text-align: center; }
  .cpos-collapsed .cpos-nav-section::after { content: ""; display: block; height: 1px; background: var(--cpos-divider); margin: 0 .9rem; }
  .cpos-collapsed .cpos-nav-icon { flex-basis: 20px; width: 20px; height: 20px; }
  .cpos-nav-collapse .cpos-collapse-icon::after { transform: rotate(45deg); }
  .cpos-collapsed .cpos-nav-collapse .cpos-collapse-icon::after { transform: rotate(-135deg); left: 3px; }
}

/* ---------- content canvas ---------- */
.cpos-content { flex: 1 1 auto; min-width: 0; padding: 1.25rem 1.75rem 2.5rem; }
.cpos-main { min-width: 0; }
.cpos-main > h1, .cpos-main > .h4 { font-size: 1.5rem; font-weight: 680; color: var(--cpos-text); margin-bottom: .35rem; letter-spacing: -.01em; }
.cpos-content .breadcrumb { margin-bottom: .4rem; }
.cpos-content .breadcrumb, .cpos-content .breadcrumb a { color: var(--cpos-text-muted); text-decoration: none; }
.cpos-content .breadcrumb a:hover { color: var(--cpos-primary); }
.cpos-content .breadcrumb-item.active { color: var(--cpos-text); }
.cpos-region h2, .cpos-region .h5 { font-size: 1.1rem; font-weight: 640; }
.cpos-region h3, .cpos-region .h6 { font-size: .95rem; font-weight: 640; color: var(--cpos-text); }
.cpos-loading { padding: 2rem 0; }
.cpos-region { min-width: 0; }
.cpos-banner { margin: .5rem 0 1rem; }

/* ---------- dashboard hero ---------- */
.cpos-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #0C2019 0%, #144C31 55%, #15803D 130%);
  color: #fff; border-radius: 16px; padding: 1.6rem 1.75rem; margin-bottom: 1.75rem;
  box-shadow: 0 10px 24px rgba(12, 32, 25, .18);
}
.cpos-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(74,222,128,.28), rgba(74,222,128,0) 70%); }
.cpos-hero-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; color: #9BE7B6; margin-bottom: .35rem; }
.cpos-hero-title { font-size: 1.55rem; font-weight: 720; margin: 0 0 .3rem; letter-spacing: -.01em; }
.cpos-hero-sub { color: #C9E6D5; margin: 0; max-width: 46rem; font-size: .95rem; }
.cpos-hero-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.15rem; }
.cpos-hero-stat { min-width: 5rem; }
.cpos-hero-stat .n { font-size: 1.5rem; font-weight: 720; line-height: 1; }
.cpos-hero-stat .l { display: block; margin-top: .2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9BE7B6; }

/* ---------- cards (white, raised) ---------- */
.card {
  background: var(--cpos-card); border: 1px solid var(--cpos-border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(12, 33, 26, .04), 0 1px 3px rgba(12, 33, 26, .06);
}
.card-header { background: var(--cpos-surface-2); border-bottom: 1px solid var(--cpos-border); font-weight: 640; }
.card-body { padding: 1rem 1.15rem; }
.cpos-tile { transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease; color: var(--cpos-text); position: relative; }
.cpos-tile::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: transparent; transition: background .14s ease; }
.cpos-tile:hover { box-shadow: 0 8px 20px rgba(12, 33, 26, .12); transform: translateY(-2px); border-color: var(--cpos-primary-soft-border); color: var(--cpos-text); }
.cpos-tile:hover::before { background: linear-gradient(180deg, var(--cpos-primary), var(--cpos-accent)); }
.cpos-tile h3 { color: var(--cpos-text); }
.cpos-tile-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--cpos-primary-soft); color: var(--cpos-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: .55rem; }
.cpos-tile-cta { color: var(--cpos-primary); font-weight: 600; font-size: .82rem; margin-top: .55rem; display: inline-flex; align-items: center; gap: .25rem; }

/* Dashboard grouping */
.cpos-dash-group { margin-bottom: 1.9rem; }
.cpos-dash-heading {
  text-transform: uppercase; letter-spacing: .07em; font-size: .74rem; font-weight: 750;
  color: var(--cpos-text-muted); margin-bottom: .7rem; padding-bottom: .35rem; border-bottom: 1px solid var(--cpos-border);
  display: flex; align-items: center; gap: .5rem;
}
.cpos-dash-heading::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cpos-primary); }

/* ---------- tables ---------- */
.table { color: var(--cpos-text); margin-bottom: .5rem; }
.table > thead > tr > th {
  background: var(--cpos-surface-2); color: var(--cpos-text-muted);
  text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; font-weight: 700;
  border-bottom: 1px solid var(--cpos-border); white-space: nowrap;
}
.table > tbody > tr > td { border-bottom: 1px solid var(--cpos-border); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--cpos-primary-soft); }
.table-responsive { border: 1px solid var(--cpos-border); border-radius: 12px; background: var(--cpos-card); overflow-x: auto; }
.table-responsive > .table { margin-bottom: 0; }
.table-responsive > .table > thead > tr > th:first-child,
.table-responsive > .table > tbody > tr > td:first-child { padding-left: 1rem; }
.cpos-region table { width: 100%; }
.cpos-empty { padding: 2.25rem 1rem; color: var(--cpos-text-muted); text-align: center; background: var(--cpos-card); border: 1px dashed var(--cpos-border-strong); border-radius: 12px; }

/* ---------- forms ---------- */
.form-label { font-weight: 620; font-size: .85rem; color: var(--cpos-text); margin-bottom: .25rem; }
.form-control, .form-select { border-color: var(--cpos-border-strong); color: var(--cpos-text); border-radius: 9px; min-height: 2.4rem; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--cpos-primary); box-shadow: 0 0 0 3px rgba(21, 128, 61, .15); }
.form-control::placeholder { color: #93A79B; }
.form-text, .cpos-help { color: var(--cpos-text-muted); font-size: .8rem; }
.cpos-field-error { color: var(--cpos-error); font-size: .82rem; margin-top: .2rem; font-weight: 500; }
.cpos-form-error { margin: .5rem 0; }
[aria-invalid="true"] { border-color: var(--cpos-error) !important; }
form .row.g-2 { align-items: start; }
form hr { border-color: var(--cpos-border); opacity: 1; margin: 1.1rem 0; }

/* ---------- buttons (clear save/review/approve hierarchy; danger separated) ---------- */
.btn { border-radius: 9px; font-weight: 560; letter-spacing: .01em; }
.btn-primary { background: var(--cpos-primary); border-color: var(--cpos-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--cpos-primary-hover); border-color: var(--cpos-primary-hover); color: #fff; }
.btn-outline-primary { color: var(--cpos-primary); border-color: var(--cpos-primary); }
.btn-outline-primary:hover { background: var(--cpos-primary); border-color: var(--cpos-primary); color: #fff; }
.btn-outline-secondary { color: var(--cpos-text); border-color: var(--cpos-border-strong); }
.btn-outline-secondary:hover { background: var(--cpos-surface-2); color: var(--cpos-text); border-color: var(--cpos-border-strong); }
.btn-success { background: var(--cpos-ok); border-color: var(--cpos-ok); }
.btn-outline-success { color: var(--cpos-ok); border-color: var(--cpos-ok); }
.btn-outline-success:hover { background: var(--cpos-ok); border-color: var(--cpos-ok); }
.btn-danger { background: var(--cpos-error); border-color: var(--cpos-error); }
.btn-outline-danger { color: var(--cpos-error); border-color: var(--cpos-error); }
.btn-outline-danger:hover { background: var(--cpos-error); border-color: var(--cpos-error); }
.btn-outline-warning { color: #B45309; border-color: var(--cpos-pending); }
.btn-outline-warning:hover { background: var(--cpos-pending); border-color: var(--cpos-pending); color: #1f2937; }
/* Sticky document actions bar */
.cpos-doc-actions {
  position: sticky; top: var(--cpos-header-h); z-index: 5;
  background: var(--cpos-app-bg); padding: .5rem 0; border-bottom: 1px solid var(--cpos-border); margin-bottom: .75rem;
}

/* ---------- status badges (colour + text; never colour alone) ---------- */
.badge { font-weight: 600; border-radius: 6px; padding: .34em .58em; letter-spacing: .01em; }
.badge.bg-secondary { background: var(--cpos-neutral) !important; }
.badge.bg-success { background: var(--cpos-ok) !important; }
.badge.bg-warning { background: var(--cpos-pending) !important; color: #1f2937 !important; }
.badge.bg-danger { background: var(--cpos-error) !important; }
.badge.bg-info { background: var(--cpos-info) !important; color: #fff !important; }
.badge.bg-dark { background: #244034 !important; }
.cpos-badge-denied { background: #FEE2E2; color: #991B1B; }

/* ---------- pills / tab navigators ---------- */
.nav-pills .nav-link { color: var(--cpos-text-muted); border-radius: 8px; padding: .32rem .7rem; font-size: .85rem; }
.nav-pills .nav-link:hover { background: var(--cpos-surface-2); color: var(--cpos-text); }
.nav-pills .nav-link.active { background: var(--cpos-primary); color: #fff; }

/* ---------- alerts ---------- */
.alert { border-radius: 11px; border: 1px solid transparent; }
.alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.alert-danger { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.alert-info { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.alert-secondary { background: var(--cpos-surface-2); border-color: var(--cpos-border); color: var(--cpos-text-muted); }

/* ---------- misc ---------- */
.cpos-preview { color: var(--cpos-text); font-size: .85rem; max-height: 60vh; overflow: auto; }
.cpos-footer { color: var(--cpos-text-muted); background: var(--cpos-card); border-top: 1px solid var(--cpos-border); }
.cpos-footer .container-fluid { padding: 0 1.75rem; }

/* ---------- auth (unauthenticated) ---------- */
.cpos-auth { background: linear-gradient(160deg, #0C2019 0%, #12402A 60%, #15803D 130%); }
.cpos-auth-card { width: 100%; max-width: 24rem; border-radius: 14px; }

/* ---------- responsive: off-canvas sidebar (mobile) ---------- */
@media (max-width: 991.98px) {
  .cpos-sidebar {
    position: fixed; top: var(--cpos-header-h); left: 0; z-index: 1035;
    height: calc(100vh - var(--cpos-header-h));
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 2px 0 12px rgba(2, 6, 23, .35);
  }
  .cpos-sidebar.cpos-open { transform: translateX(0); }
  .cpos-content { padding: 1rem; }
  .cpos-doc-actions { position: static; }
  .cpos-hero { padding: 1.25rem 1.25rem; }
}

/* M017: sidebar section accordion (single source; collapsed-by-default; +/- indicator; rail + mobile safe) */
.cpos-nav-row{display:flex;align-items:center;gap:.1rem}
.cpos-nav-row>.nav-link{flex:1 1 auto;min-width:0}
.cpos-nav-caret{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;padding:0;margin-right:.3rem;background:transparent;border:0;border-radius:6px;color:inherit;cursor:pointer;line-height:1;opacity:.75}
.cpos-nav-caret:hover{background:var(--cpos-nav-hover);color:#fff;opacity:1}
.cpos-nav-caret:focus-visible{outline:2px solid #6fd39b;outline-offset:2px;opacity:1}
.cpos-caret-icon::before{content:"+";font-weight:600;font-size:1rem;display:block;transform:translateY(-1px)}
.cpos-nav-item-open>.cpos-nav-row .cpos-caret-icon::before{content:"\2212"}
.cpos-nav-children{display:none}
.cpos-nav-item-open>.cpos-nav-children{display:flex}
.cpos-collapsed .cpos-nav-caret,.cpos-collapsed .cpos-nav-children{display:none!important}

/* ============================================================================
   0.18.1 navigation refinement (B4) — enterprise polish on the existing forest
   identity: the whole parent row reads as one target, restrained active/expanded
   emphasis, clearer hierarchy, calmer vertical rhythm. Additive rules only; the
   palette variables and prior collapse/accordion behaviour are unchanged.
   ============================================================================ */
/* The whole parent row is the interaction target (not just a tiny caret). */
.cpos-nav-has-children > .cpos-nav-row { border-radius: 8px; cursor: pointer; transition: background .12s ease; }
.cpos-nav-has-children > .cpos-nav-row:hover { background: var(--cpos-nav-hover); }
.cpos-nav-has-children > .cpos-nav-row:hover > .nav-link,
.cpos-nav-has-children > .cpos-nav-row:hover > .cpos-nav-caret { background: transparent; color: var(--cpos-on-dark-strong); opacity: 1; }
/* Softer, more even item rhythm. */
.cpos-sidebar .nav { gap: .12rem; }
.cpos-sidebar .nav-link { padding: .5rem .65rem; letter-spacing: .005em; }
/* Restrained active state: a calm forest surface + a single narrow accent rail. */
.cpos-sidebar .nav-link.active {
  background: var(--cpos-surface-elevated);
  border-left-color: var(--cpos-nav-accent);
  box-shadow: inset 0 0 0 1px var(--cpos-divider);
}
/* An open+active parent quietly groups its children beneath it. */
.cpos-nav-item-open.cpos-nav-item-open > .cpos-nav-row > .nav-link.active { box-shadow: none; }
.cpos-nav-item-open > .cpos-nav-row { background: rgba(255,255,255,.02); }
/* Section labels: add a hairline above each (except the first) for a clear SECTION → Parent → Child rhythm. */
.cpos-nav-section { padding: .95rem .7rem .3rem; margin-top: .15rem; }
.cpos-nav-section:not(:first-child) { border-top: 1px solid var(--cpos-divider); }
.cpos-nav-section:first-child { border-top: 0; }
/* Children read as belonging to their parent: a continuous rail, tighter indent, quieter type. */
.cpos-nav-children { margin: .15rem 0 .4rem 1.55rem; border-left: 1px solid var(--cpos-divider); padding-left: .5rem; }
.cpos-nav-child { padding: .32rem .6rem; border-radius: 6px; font-size: .82rem; }
.cpos-nav-child:hover { background: var(--cpos-nav-hover); color: var(--cpos-on-dark-strong); }
.cpos-nav-child.active { color: #fff; font-weight: 600; background: var(--cpos-surface-elevated); }
/* Caret: rotate a chevron for a modern expanded-state cue; keep it obviously a state indicator. */
.cpos-nav-caret { width: 24px; height: 24px; opacity: .6; transition: opacity .12s ease; }
.cpos-nav-caret:hover { opacity: 1; }
.cpos-caret-icon::before { transition: transform .15s ease; }
/* Comfortable focus targets + clear keyboard focus for accessibility. */
.cpos-sidebar .nav-link:focus-visible,
.cpos-nav-child:focus-visible { outline: 2px solid var(--cpos-nav-accent); outline-offset: -1px; border-radius: 6px; }

/* ============================================================================
   0.23.0 CPOS VISUAL NORMALISATION (M023) — align the shared operator shell with
   the CarbonPlus dMRV reference: dark forest-green top bar with the logo in a
   white rounded block; a WHITE left sidebar with small letter-spaced uppercase
   section labels and a dark-green FILLED active item; a warm pale-sage canvas;
   white rounded cards with a thin coloured top accent; elegant serif page titles
   in dark forest green; a solid-BLUE primary action with white/blue-outline
   secondaries; a pale-blue information banner. Additive, trailing rules — last in
   the cascade so they win — and token re-declarations that override the earlier
   :root. No route/PAGE/behaviour is defined here. WCAG AA preserved.
   ============================================================================ */
:root {
  /* Brand identity kept for header + serif titles + active nav (dark forest green). */
  --cp-forest: #1f3d2b;
  --cp-forest-dark: #16301f;
  --cp-sage-canvas: #eef1ea;
  --cp-card: #ffffff;
  --cp-border: #e3e7de;
  --cp-text: #1f2a24;
  --cp-muted: #667a6d;
  --cp-action: #1f6feb;          /* solid blue primary action */
  --cp-action-hover: #1a5fd0;
  --cp-info-bg: #e8f2fb;
  --cp-info-border: #bcdcf5;
  --cp-info-text: #0b4a75;
  --cp-serif: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif;

  /* Re-point shared tokens: header stays forest; sidebar becomes WHITE; canvas sage; primary becomes blue. */
  --cpos-chrome-bg: var(--cp-forest);
  --cpos-sidebar-bg: #ffffff;
  --cpos-app-bg: var(--cp-sage-canvas);
  --cpos-card: var(--cp-card);
  --cpos-border: var(--cp-border);
  --cpos-text: var(--cp-text);
  --cpos-text-muted: var(--cp-muted);
  --cpos-primary: var(--cp-action);
  --cpos-primary-hover: var(--cp-action-hover);
  --cpos-primary-soft: #e9f1fe;
  --cpos-primary-soft-border: #c6ddfb;
  --cpos-focus: #1f6feb;
}

/* ---- top bar: forest gradient, logo in a white rounded block, near-black role pill, outlined sign-out ---- */
.cpos-header { background: linear-gradient(90deg, var(--cp-forest-dark) 0%, var(--cp-forest) 60%); }
.cpos-header-brand { display: inline-flex; align-items: center; gap: .5rem; }
.cpos-header-brand .cpos-logo-block {
  display: inline-flex; align-items: center; background: #fff; color: var(--cp-forest);
  border-radius: 9px; padding: .2rem .55rem; font-weight: 800; letter-spacing: .01em; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.cpos-header-brand .cpos-logo-block span { color: #16a34a; }
.cpos-header-brand .cpos-product { color: #fff; font-weight: 600; letter-spacing: .02em; }
.cpos-header-user { color: #d6e6dc; }
.cpos-role-pill { display: inline-block; background: #12241b; color: #fff; border-radius: 999px; padding: .12rem .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }

/* ---- WHITE sidebar: dark text, letter-spaced muted section labels, dark-green FILLED active item ---- */
.cpos-sidebar { border-right: 1px solid var(--cp-border); box-shadow: 1px 0 0 rgba(31,61,43,.03); }
.cpos-sidebar-brand { border-bottom: 1px solid var(--cp-border); }
.cpos-sidebar-logo, .cpos-sidebar-wordmark { color: var(--cp-forest); }
.cpos-sidebar-wordmark span { color: #16a34a; }
.cpos-sidebar-tagline { color: var(--cp-muted); }
.cpos-nav-section-label { color: #8a8f98; opacity: 1; font-size: .68rem; letter-spacing: .1em; }
.cpos-nav-section:not(:first-child) { border-top: 1px solid var(--cp-border); }
.cpos-sidebar .nav-link { color: #33413a; border-left: 0; }
.cpos-sidebar .nav-link:hover { background: #eef3ee; color: var(--cp-forest); }
.cpos-sidebar .nav-link.active {
  background: var(--cp-forest); color: #fff; font-weight: 600;
  border-left: 0; box-shadow: none; border-radius: 9px;
}
.cpos-sidebar .nav-link.active .cpos-nav-icon { opacity: 1; border-color: #fff; }
.cpos-nav-icon { border-color: #6a7b70; }
.cpos-nav-child { color: #5c6f65; }
.cpos-nav-child:hover { background: #eef3ee; color: var(--cp-forest); }
.cpos-nav-child.active { background: var(--cp-forest); color: #fff; }
.cpos-nav-children { border-left: 1px solid var(--cp-border); }
.cpos-nav-has-children > .cpos-nav-row:hover { background: #eef3ee; }
.cpos-nav-has-children > .cpos-nav-row:hover > .nav-link,
.cpos-nav-has-children > .cpos-nav-row:hover > .cpos-nav-caret { color: var(--cp-forest); }
.cpos-nav-item-open > .cpos-nav-row { background: #f3f6f2; }
.cpos-nav-caret { color: #6a7b70; }
.cpos-nav-caret:hover { background: #eef3ee; color: var(--cp-forest); }
@media (min-width: 992px) {
  .cpos-collapsed .cpos-sidebar .nav-link.active { background: var(--cp-forest); }
  .cpos-collapsed .cpos-nav-section::after { background: var(--cp-border); }
}

/* ---- elegant serif page titles in dark forest green ---- */
.cpos-main > h1, .cpos-main > .h4, .cpos-page-title {
  font-family: var(--cp-serif); color: var(--cp-forest); font-weight: 700; letter-spacing: 0;
}
.cpos-page-title { font-size: 1.6rem; margin: 0 0 .15rem; }
.cpos-page-sub { color: var(--cp-muted); margin: 0 0 1rem; font-size: .95rem; }

/* ---- white rounded cards with a thin coloured top accent (KPI tiles) ---- */
.card { border-radius: 14px; border-color: var(--cp-border); }
.cpos-kpi { position: relative; overflow: hidden; }
.cpos-kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cp-forest); }
.cpos-kpi.k-green::before { background: #2e7d46; } .cpos-kpi.k-blue::before { background: #1f6feb; }
.cpos-kpi.k-amber::before { background: #d97706; } .cpos-kpi.k-purple::before { background: #7c3aed; }
.cpos-kpi.k-olive::before { background: #6b8e23; } .cpos-kpi.k-gold::before { background: #b8860b; }
.cpos-kpi-label { text-transform: uppercase; letter-spacing: .07em; font-size: .68rem; font-weight: 700; color: var(--cp-muted); }
.cpos-kpi-value { font-size: 1.7rem; font-weight: 800; color: var(--cp-text); line-height: 1.1; }
.cpos-kpi-caption { color: var(--cp-muted); font-size: .74rem; }
.cpos-kpi-value.k-unavailable { color: var(--cp-muted); font-size: .95rem; font-weight: 600; }

/* ---- solid blue primary; white/blue-outline secondary ---- */
.btn-primary { background: var(--cp-action); border-color: var(--cp-action); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--cp-action-hover); border-color: var(--cp-action-hover); color: #fff; }
.btn-outline-primary { color: var(--cp-action); border-color: var(--cp-action); }
.btn-outline-primary:hover { background: var(--cp-action); border-color: var(--cp-action); color: #fff; }
a { color: var(--cp-action); } a:hover { color: var(--cp-action-hover); }
.nav-pills .nav-link.active { background: var(--cp-action); }
.badge.text-bg-primary { background: var(--cp-action) !important; }

/* ---- pale-blue information banner (matches the reference "operational data unavailable" banner) ---- */
.alert-info { background: var(--cp-info-bg); border-color: var(--cp-info-border); color: var(--cp-info-text); }
.cpos-data-unavailable { background: var(--cp-info-bg); border: 1px solid var(--cp-info-border); color: var(--cp-info-text); border-radius: 11px; padding: .6rem .9rem; font-size: .9rem; }

/* ---- tabs used by the commercialisation workspace ---- */
.cpos-tabs { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--cp-border); margin-bottom: 1rem; }
.cpos-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--cp-muted); padding: .5rem .8rem; font-weight: 600; font-size: .9rem; cursor: pointer; border-radius: 8px 8px 0 0; }
.cpos-tab:hover { color: var(--cp-forest); background: #eef3ee; }
.cpos-tab.active { color: var(--cp-forest); border-bottom-color: var(--cp-forest); }

/* ===================== M029 UI1 sidebar correction (schema-neutral, additive; overrides only wrapping/alignment) =====================
   Fixes label clipping/overflow for long navigation names (e.g. "Methodology operationalisation", "Commercialisation &
   Claims"). Labels wrap to a maximum of two lines instead of being cut off; icons and the expand/collapse toggle keep a
   reserved area and align to the first line of a wrapped label while remaining centred for single-line labels; indentation,
   active state, focus and collapsed-rail behaviour are preserved. Colours are unchanged (existing CarbonPlus tokens). */
.cpos-sidebar .nav-link { white-space: normal; overflow-wrap: anywhere; word-break: break-word; align-items: flex-start; min-height: 2rem; line-height: 1.25; }
.cpos-nav-label { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.cpos-nav-icon { align-self: flex-start; margin-top: 2px; }
.cpos-nav-row { align-items: flex-start; }
.cpos-nav-caret { align-self: flex-start; margin-top: 3px; }
.cpos-nav-child { white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.2; }
.cpos-nav-section-label { white-space: normal; overflow-wrap: anywhere; }
.cpos-sidebar-wordmark { overflow-wrap: anywhere; }
/* Single-line labels stay visually centred against the icon (icon top-offset + normal line box read as centred at 2rem row). */
.cpos-sidebar .nav-link > .cpos-nav-label { padding-top: 0; }
/* Collapsed rail: never reveal partial wrapped text; icon re-centres. */
@media (min-width: 992px) {
  .cpos-collapsed .cpos-sidebar .nav-link { align-items: center; min-height: 0; }
  .cpos-collapsed .cpos-nav-icon { align-self: center; margin-top: 0; }
}
/* Guarantee no horizontal scrollbar is introduced by any nav content. */
.cpos-sidebar, .cpos-sidebar-scroll { overflow-x: hidden; }
.cpos-sidebar-scroll ul, .cpos-nav-children { max-width: 100%; }