/* MRMS 2.0 - app.css - every component built from tokens.css only (Sections 9-10). */

/* =========================================================== Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.app { min-height: 100vh; }
a { color: var(--action); text-underline-offset: 2px; }
a:hover { color: var(--action-hover); }
p { margin-bottom: var(--sp-3); }
.text-ink-2 { color: var(--ink-2) !important; }
.text-ink-3 { color: var(--ink-3) !important; }
.text-danger-strong { color: var(--danger) !important; }
.text-warning-strong { color: color-mix(in srgb, var(--warning) 70%, var(--ink)) !important; }
.text-gold { color: var(--brand-gold-ink) !important; }
.fw-medium { font-weight: 500; }
.small, small { font-size: var(--fs-small); }
.req { color: var(--ink-2); font-weight: 400; font-size: var(--fs-small); }
hr { border-color: var(--line); opacity: 1; }
kbd { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  font-family: var(--font-sans); font-size: .6875rem; font-weight: 600; padding: 1px 5px; box-shadow: none; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.icon--12 { width: 12px; height: 12px; stroke-width: 2.25; }
.icon--16 { width: 16px; height: 16px; }
.icon--24 { width: 24px; height: 24px; }
.skip-link { position: absolute; left: var(--sp-4); top: -60px; z-index: 2000; background: var(--brand-navy); color: #fff; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top var(--t-fast) var(--ease); }
.skip-link:focus { top: var(--sp-3); color: #fff; }
.visually-hidden-focusable:not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }
.no-wrap { white-space: nowrap; }

.training-ribbon { position: sticky; top: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--brand-gold); color: #1b1400; font-size: var(--fs-small); padding: 6px var(--sp-4); letter-spacing: .02em; }
[data-bs-theme="dark"] .training-ribbon { color: #1b1400; }

/* =========================================================== Shell (10.1) */
.shell { display: flex; min-height: 100vh; }
.shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sidebar { width: var(--sidebar-w); flex: none; background: var(--brand-navy); color: #DCE4F0; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 1040; }
@media (min-width: 992px) {
  .sidebar.offcanvas-lg { position: sticky; visibility: visible !important; transform: none !important; background: var(--brand-navy) !important; }
}
.sidebar__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); height: var(--topbar-h); padding: 0 var(--sp-4) 0 var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
.sidebar__home { display: flex; align-items: center; gap: var(--sp-3); color: #fff; text-decoration: none; min-width: 0; }
.sidebar__home:hover { color: #fff; }
.sidebar__crest { flex: none; }
.sidebar__title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sidebar__title strong { font-family: var(--font-serif); font-size: 1.125rem; letter-spacing: .04em; }
.sidebar__title span { font-size: .75rem; color: #AFC0D8; white-space: nowrap; }
.sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-6); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.nav-role { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-1) var(--sp-1) var(--sp-3); padding: var(--sp-3);
  border-radius: var(--r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.nav-role__icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: rgba(201,162,39,.16); color: var(--brand-gold); display: grid; place-items: center; flex: none; }
.nav-role__name { font-weight: 600; color: #fff; font-size: .875rem; }
.nav-section { margin-top: var(--sp-3); }
.nav-section__label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: #8FA3C0; padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.sidebar .nav-item { position: relative; display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 40px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); color: #DCE4F0; text-decoration: none; font-size: .875rem; font-weight: 500; border: 0; background: transparent; text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.sidebar .nav-item .icon { color: #AFC0D8; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-item:hover .icon { color: #fff; }
.sidebar .nav-item.is-active { background: var(--brand-navy-700); color: #fff; }
.sidebar .nav-item.is-active .icon { color: var(--brand-gold); }
.sidebar .nav-item.is-active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-gold); }
.sidebar .nav-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .nav-item--locked { color: #8FA3C0; cursor: not-allowed; }
.sidebar .nav-item--locked .icon { color: #6F84A3; }
.sidebar .nav-item--locked:hover { background: rgba(255,255,255,.03); color: #AFC0D8; }
.nav-lock { display: inline-flex; align-items: center; gap: 4px; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: var(--r-full); background: rgba(255,255,255,.08); color: #AFC0D8; }
.nav-lock .icon { color: #AFC0D8; }
.nav-note { font-size: .75rem; color: #AFC0D8; padding: var(--sp-2) var(--sp-3); margin: 0; display: flex; gap: 6px; align-items: center; }
.sidebar__foot { border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-2) var(--sp-3); flex: none; }
.sidebar .nav-item--rail .icon { transition: transform var(--t-base) var(--ease); }

/* Rail (collapsed) */
@media (min-width: 992px) {
  html[data-sidebar="rail"] .sidebar { width: var(--sidebar-rail-w); }
  html[data-sidebar="rail"] .sidebar__title, html[data-sidebar="rail"] .sidebar .nav-item__label, html[data-sidebar="rail"] .nav-section__label,
  html[data-sidebar="rail"] .nav-lock, html[data-sidebar="rail"] .nav-note { display: none; }
  html[data-sidebar="rail"] .sidebar__brand { padding: 0; justify-content: center; }
  html[data-sidebar="rail"] .nav-role { justify-content: center; padding: var(--sp-2); }
  html[data-sidebar="rail"] .sidebar .nav-item { justify-content: center; padding: var(--sp-2); }
  html[data-sidebar="rail"] .nav-section { margin-top: var(--sp-2); border-top: 1px solid rgba(255,255,255,.06); padding-top: var(--sp-2); }
  html[data-sidebar="rail"] .sidebar .nav-item--rail .icon { transform: scaleX(-1); }
}
@media (max-width: 991.98px) {
  .sidebar.offcanvas-lg { position: fixed; height: 100%; width: min(var(--sidebar-w), 86vw); background: var(--brand-navy); }
}

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 1030; height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6);
  background: var(--surface); border-bottom: 1px solid var(--line); transition: box-shadow var(--t-base) var(--ease); }
.has-training .topbar { top: 31px; }
.topbar.is-scrolled { box-shadow: var(--e-2); }
.crumbs { min-width: 0; flex: 1 1 auto; }
.crumbs ol { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; overflow: hidden; }
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--ink-3); }
.crumbs li:last-child { color: var(--ink); font-weight: 600; overflow: hidden; }
.crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; }
.crumbs li:not(:first-child):not(:last-child) { overflow: hidden; flex: 0 1 auto; }
.crumbs li:not(:first-child):not(:last-child) a { overflow: hidden; text-overflow: ellipsis; display: block; }
@media (max-width: 575.98px) { .crumbs li:not(:first-child):not(:last-child) { display: none; } }
.crumbs a { color: var(--ink-2); text-decoration: none; display: inline-flex; }
.crumbs a:hover { color: var(--ink); }
.topbar__tools { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.search-trigger { display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-2) 0 var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-small); min-width: 220px; transition: border-color var(--t-fast); }
.search-trigger:hover { border-color: var(--ink-3); color: var(--ink-2); }
.search-trigger__text { flex: 1; text-align: left; }
@media (max-width: 767.98px) { .search-trigger { min-width: 0; } .search-trigger__text, .search-trigger__kbd { display: none; } .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); } }
.btn-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--r-md); border: 1px solid transparent;
  color: var(--ink-2); background: transparent; transition: background var(--t-fast), color var(--t-fast); }
.btn-icon:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn-icon--danger { color: var(--danger); }
.btn-icon--danger:hover { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
td .btn-icon { width: 32px; height: 32px; }

.bell { position: relative; }
.bell__btn { position: relative; }
.bell__badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--danger);
  color: #fff; font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.bell__menu { width: 380px; max-width: calc(100vw - 24px); padding: 0; border-radius: var(--r-lg); overflow: hidden; }
.bell__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.bell__list { max-height: 420px; overflow-y: auto; }
.bell__empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink-3); font-size: var(--fs-small); }
.bell__all { display: flex; align-items: center; justify-content: center; gap: 6px; padding: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.notif { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); position: relative; }
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--surface-2); color: var(--ink); }
.notif.is-unread { background: color-mix(in srgb, var(--info-soft) 55%, transparent); }
.notif.is-unread::after { content: ""; position: absolute; right: var(--sp-4); top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--info); }
.notif__icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--neutral-soft); color: var(--neutral); }
.notif__icon--high { background: var(--warning-soft); color: var(--warning); }
.notif__icon--urgent { background: var(--danger-soft); color: var(--danger); }
.notif__title { font-weight: 600; font-size: var(--fs-small); padding-right: var(--sp-4); }
.notif__msg { font-size: var(--fs-small); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif__time { font-size: .75rem; color: var(--ink-3); margin-top: 2px; }

.usermenu__btn { display: flex; align-items: center; gap: var(--sp-2); border: 0; background: transparent; padding: 4px 6px 4px 4px; border-radius: var(--r-md); color: var(--ink); }
.usermenu__btn:hover { background: var(--surface-2); }
.usermenu__who { flex-direction: column; align-items: flex-start; line-height: 1.15; }
.usermenu__name { font-size: var(--fs-small); font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu__role { font-size: .75rem; color: var(--ink-3); }
.usermenu__menu { width: 290px; border-radius: var(--r-lg); padding: var(--sp-2); }
.usermenu__card { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-2) var(--sp-1); }
.usermenu__card .role-pill { margin-top: 4px; }
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 var(--sp-2) var(--sp-1); }
.theme-switch__opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); font-size: .75rem; font-weight: 500; }
.theme-switch__opt[aria-checked="true"] { border-color: var(--action); color: var(--action); background: var(--success-soft); }
.dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--line); --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-hover-color: var(--ink); --bs-dropdown-link-active-bg: var(--surface-2); --bs-dropdown-link-active-color: var(--ink);
  --bs-dropdown-header-color: var(--ink-3); --bs-dropdown-divider-bg: var(--line); box-shadow: var(--e-2); font-size: var(--fs-small); border-radius: var(--r-md); }
.dropdown-item { display: flex; align-items: center; gap: var(--sp-2); border-radius: var(--r-sm); padding: 8px 10px; }
.dropdown-header { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* Content */
.content { flex: 1 0 auto; width: 100%; max-width: calc(var(--content-max) + 2 * var(--sp-6)); margin: 0 auto; padding: var(--sp-6); outline: 0; }
.content--wide { max-width: none; }
@media (max-width: 767.98px) { .content { padding: var(--sp-4); } }
.app-footer { padding: var(--sp-5) var(--sp-6); font-size: var(--fs-small); color: var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2);
  max-width: calc(var(--content-max) + 2 * var(--sp-6)); width: 100%; margin: 0 auto; border-top: 1px solid var(--line); }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page-header h1 { margin: 0; color: var(--ink); letter-spacing: -.005em; }
.page-header__desc { margin: var(--sp-1) 0 0; color: var(--ink-2); }
.page-header__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-7) 0 var(--sp-4); }
.section-title h2 { margin: 0; }

/* =========================================================== Buttons */
.btn { --bs-btn-font-weight: 600; --bs-btn-font-size: .875rem; --bs-btn-padding-y: 0; --bs-btn-padding-x: 14px; --bs-btn-border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 36px; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-x: 10px; --bs-btn-font-size: .8125rem; min-height: 32px; }
.btn-lg { min-height: 44px; --bs-btn-padding-x: 20px; --bs-btn-font-size: .9375rem; }
.btn-primary { --bs-btn-bg: var(--action); --bs-btn-border-color: var(--action); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--action-hover); --bs-btn-hover-border-color: var(--action-hover);
  --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--action-hover); --bs-btn-active-border-color: var(--action-hover); --bs-btn-disabled-bg: var(--action); --bs-btn-disabled-border-color: var(--action);
  --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.12); }
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #06210f; --bs-btn-hover-color: #06210f; --bs-btn-active-color: #06210f; --bs-btn-disabled-color: #06210f; }
.btn-secondary, .btn-outline-secondary { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--ink-3); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--surface-2); --bs-btn-active-border-color: var(--ink-3); --bs-btn-active-color: var(--ink);
  --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-color: var(--ink-3); --bs-btn-disabled-border-color: var(--line); }
.btn-danger-outline { --bs-btn-bg: var(--surface); --bs-btn-color: var(--danger); --bs-btn-border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  --bs-btn-hover-bg: var(--danger-soft); --bs-btn-hover-color: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-active-bg: var(--danger-soft); --bs-btn-active-color: var(--danger); }
.btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, #000); }
.btn-link { --bs-btn-color: var(--action); --bs-btn-hover-color: var(--action-hover); text-decoration: none; padding: 0 4px; min-height: 0; font-weight: 600; }
.btn-navy { --bs-btn-bg: var(--brand-navy); --bs-btn-border-color: var(--brand-navy); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--brand-navy-700); --bs-btn-hover-border-color: var(--brand-navy-700); --bs-btn-hover-color: #fff; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .icon { display: none; }
.btn .spinner { width: 16px; height: 16px; border-width: 2px; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .75s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================== Cards & KPIs */
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); --bs-card-border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-1); padding: var(--sp-5); color: var(--ink); }
.card--table { padding: 0; overflow: hidden; }
.card--flush { padding: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-head h2, .card-head h3 { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.card-head a { font-size: var(--fs-small); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.card-form { max-width: var(--form-max); }
.stack { display: grid; gap: var(--sp-6); }
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.grid-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 1199.98px) { .grid-2-1, .grid-1-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 991.98px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.mt-section { margin-top: var(--sp-6); }

.kpi { position: relative; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e-1);
  padding: var(--sp-4) var(--sp-5); color: var(--ink); text-decoration: none; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast); }
.kpi--link:hover { transform: translateY(-2px); box-shadow: var(--e-2); color: var(--ink); border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--line)); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.kpi__icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--neutral-soft); color: var(--brand-navy-700); }
[data-bs-theme="dark"] .kpi__icon { color: var(--ink-2); }
.kpi__icon--success { background: var(--success-soft); color: var(--success); }
.kpi__icon--warning { background: var(--warning-soft); color: var(--warning); }
.kpi__icon--danger { background: var(--danger-soft); color: var(--danger); }
.kpi__icon--info { background: var(--info-soft); color: var(--info); }
.kpi__icon--gold { background: color-mix(in srgb, var(--brand-gold) 16%, transparent); color: var(--brand-gold-ink); }
.kpi__value { font-size: var(--fs-kpi); line-height: var(--lh-kpi); font-weight: 600; margin-top: var(--sp-2); letter-spacing: -.01em; }
.kpi__hint { font-size: var(--fs-small); color: var(--ink-2); margin-top: 2px; }

.greeting { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--brand-navy); color: #fff; padding: var(--sp-6) var(--sp-7);
  margin-bottom: var(--sp-6); box-shadow: var(--e-1); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.greeting::before { content: ""; position: absolute; inset: 0; background-image: url("../img/guilloche.svg"); background-repeat: no-repeat; background-size: 560px; background-position: right -140px center; opacity: .08; pointer-events: none; }
.greeting::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-gold); }
.greeting > * { position: relative; }
.greeting h1 { font-family: var(--font-serif); font-size: var(--fs-display); line-height: var(--lh-display); color: #fff; margin: 0; }
.greeting__date { color: #C9D5E6; margin: var(--sp-1) 0 0; }
.greeting__role { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--brand-gold); margin-bottom: var(--sp-2); }
.greeting .btn-primary { box-shadow: none; }
.greeting .btn-secondary { --bs-btn-bg: rgba(255,255,255,.08); --bs-btn-border-color: rgba(255,255,255,.22); --bs-btn-color: #fff; --bs-btn-hover-bg: rgba(255,255,255,.14); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.4); }

.health-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); margin-bottom: var(--sp-6); font-weight: 500; font-size: var(--fs-small); }
.health-strip a { color: inherit; font-weight: 700; }

/* Action centre */
.action-list { list-style: none; margin: 0; padding: 0; }
.action-list li + li { border-top: 1px solid var(--line); }
.action-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); text-decoration: none; color: var(--ink); border-radius: var(--r-sm);
  transition: background var(--t-fast); }
.action-item:hover { background: var(--surface-2); color: var(--ink); }
.action-item__icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.action-item__icon--info { background: var(--info-soft); color: var(--info); }
.action-item__icon--warning { background: var(--warning-soft); color: var(--warning); }
.action-item__icon--danger { background: var(--danger-soft); color: var(--danger); }
.action-item__icon--success { background: var(--success-soft); color: var(--success); }
.action-item__icon--neutral { background: var(--neutral-soft); color: var(--neutral); }
.action-item__text { flex: 1 1 auto; font-weight: 500; }
.action-item__count { min-width: 28px; height: 24px; padding: 0 8px; border-radius: var(--r-full); background: var(--brand-navy); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
[data-bs-theme="dark"] .action-item__count { background: var(--brand-navy-700); }
.action-item__chev { color: var(--ink-3); }
.caught-up { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; }

/* =========================================================== Pills, chips, misc */
.pill .icon { width: 12px; height: 12px; }
.role-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-full); font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; background: var(--neutral-soft); color: var(--brand-navy-700); border: 1px solid var(--line); }
[data-bs-theme="dark"] .role-pill { color: var(--ink-2); }
.role-pill--admin { background: color-mix(in srgb, var(--brand-gold) 14%, transparent); color: var(--brand-gold-ink); border-color: color-mix(in srgb, var(--brand-gold) 35%, transparent); }
.badge-soft { display: inline-block; padding: 0 6px; border-radius: var(--r-full); background: var(--warning-soft); color: var(--warning); font-size: .6875rem; font-weight: 700; }
.grade { display: inline-block; font-weight: 600; font-size: var(--fs-small); padding: 2px 8px; border-radius: var(--r-sm); background: var(--neutral-soft); color: var(--ink); white-space: nowrap; }
.countdown { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-full); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.countdown--success { background: var(--success-soft); color: var(--success); }
.countdown--warning { background: var(--warning-soft); color: var(--warning); }
.countdown--danger { background: var(--danger-soft); color: var(--danger); }
.countdown--overdue { background: var(--danger); color: #fff; }
[data-bs-theme="dark"] .countdown--overdue { color: #2b0805; }
.countdown--done { background: var(--neutral-soft); color: var(--neutral); }
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { height: 30px; padding: 0 12px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--fs-small); font-weight: 500;
  transition: all var(--t-fast); }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.is-active { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
[data-bs-theme="dark"] .chip.is-active { background: var(--brand-navy-700); border-color: var(--brand-navy-700); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.seg__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink-2); border-radius: 7px; padding: 5px 12px; font-size: var(--fs-small); font-weight: 600; }
.seg__btn.is-active, .seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--e-1); }
.seg--sm .seg__btn { padding: 4px 8px; }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--brand-navy); color: #fff; font-weight: 600; flex: none; letter-spacing: .02em; }
.avatar--sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar--md { width: 40px; height: 40px; font-size: .8125rem; }
.avatar--lg { width: 52px; height: 52px; font-size: 1rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 45%, transparent); }
[data-bs-theme="dark"] .avatar { background: var(--brand-navy-700); }
.folder-name { color: var(--ink); overflow-wrap: anywhere; }
td .folder-name { white-space: nowrap; }
.folder-link { text-decoration: none; }
.folder-link:hover .folder-name { color: var(--action); text-decoration: underline; }

/* Notices & flash */
.notice, .flash { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid; margin-bottom: var(--sp-4); font-size: .875rem; }
.notice > .icon, .flash > .icon { margin-top: 2px; }
.notice--info, .flash--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 25%, transparent); color: var(--ink); }
.notice--info > .icon, .flash--info > .icon { color: var(--info); }
.notice--success, .flash--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 25%, transparent); color: var(--ink); }
.notice--success > .icon, .flash--success > .icon { color: var(--success); }
.notice--warning, .flash--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--ink); }
.notice--warning > .icon, .flash--warning > .icon { color: var(--warning); }
.notice--danger, .flash--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--ink); }
.notice--danger > .icon, .flash--danger > .icon { color: var(--danger); }
.flash { position: relative; padding-right: 48px; }
.flash .btn-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; padding: 6px; }
.flash__msg { flex: 1; font-weight: 500; }
.flash-stack { margin-bottom: var(--sp-2); }
.flash:focus { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Empty state */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); }
.empty-state img { margin-bottom: var(--sp-3); }
.empty-state__title { font-size: 1rem; margin-bottom: var(--sp-1); }
.empty-state__text { color: var(--ink-2); max-width: 420px; margin: 0 auto var(--sp-4); }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); }
.skeleton--text { height: 14px; margin-bottom: 10px; }
.skeleton--kpi { height: 36px; width: 60%; margin-top: 8px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Facts list */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4) var(--sp-6); margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.facts--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.facts--compact { margin-top: var(--sp-3); padding-top: var(--sp-3); gap: var(--sp-3) var(--sp-4); }
.facts dt { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.facts dd { margin: 0; font-weight: 500; }

/* =========================================================== Forms */
.form-label { font-weight: 600; font-size: var(--fs-small); color: var(--ink); margin-bottom: 6px; }
.form-control, .form-select { min-height: 40px; border-radius: var(--r-sm); border-color: var(--line); background-color: var(--surface); color: var(--ink); font-size: .875rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { border-color: #33476A; }
.form-control::placeholder { color: var(--ink-3); }
.form-control:focus, .form-select:focus { border-color: var(--brand-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 25%, transparent); background-color: var(--surface); color: var(--ink); }
.form-control-lg { min-height: 44px; font-size: .9375rem; }
.form-text { color: var(--ink-2); font-size: var(--fs-small); }
.form-control.is-invalid, .was-validated .form-control:invalid, .form-select.is-invalid { border-color: var(--danger); }
.invalid-feedback { color: var(--danger); font-size: var(--fs-small); font-weight: 500; }
.form-check-input:checked { background-color: var(--action); border-color: var(--action); }
.form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 25%, transparent); border-color: var(--brand-gold); }
.form-switch .form-check-input { width: 2.5em; height: 1.35em; }
.form-row { margin-bottom: var(--sp-4); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }
@media (max-width: 767.98px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; padding-top: var(--sp-4); border-top: 1px solid var(--line); margin-top: var(--sp-5); }
@media (max-width: 767.98px) {
  .form-actions--sticky { position: sticky; bottom: 0; background: var(--surface); padding: var(--sp-3) var(--sp-5); box-shadow: 0 -6px 16px rgba(16,24,40,.08); z-index: 5; border-radius: 0 0 var(--r-md) var(--r-md); }
  .card .form-actions--sticky { margin: var(--sp-5) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)); }
  .form-actions--sticky .btn { flex: 1; min-height: 44px; }
}
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 44px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink-3); border-radius: var(--r-sm); display: grid; place-items: center; }
.pw-toggle:hover { color: var(--ink); background: var(--surface-2); }
.caps-hint { display: none; align-items: center; gap: 6px; color: var(--warning); font-size: var(--fs-small); font-weight: 500; margin-top: 6px; }
.caps-hint.is-on { display: flex; }
.pw-meter { margin-top: var(--sp-2); }
.pw-meter__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-meter__bar span { height: 4px; border-radius: 2px; background: var(--line); transition: background var(--t-base); }
.pw-meter[data-score="1"] .pw-meter__bar span:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-score="2"] .pw-meter__bar span:nth-child(-n+2) { background: var(--warning); }
.pw-meter[data-score="3"] .pw-meter__bar span:nth-child(-n+3) { background: var(--info); }
.pw-meter[data-score="4"] .pw-meter__bar span { background: var(--success); }
.pw-meter__rules { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--sp-3); font-size: .75rem; color: var(--ink-3); }
.pw-meter__rules li { display: flex; gap: 6px; align-items: center; }
.pw-meter__rules li.is-ok { color: var(--success); }
.error-summary { display: none; }
.error-summary.is-visible { display: flex; }

/* =========================================================== Tables + DataTables (10.4, 10.11) */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--ink);
  font-size: var(--fs-table); margin: 0; }
.table > :not(caption) > * > * { padding: 12px var(--sp-4); vertical-align: middle; border-bottom-color: var(--line); }
.table thead th { background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); font-weight: 600;
  white-space: nowrap; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover > * { background: var(--surface-2); }
.table tfoot th { background: var(--surface-2); font-weight: 600; }
.table.is-compact > :not(caption) > * > * { padding-top: 7px; padding-bottom: 7px; }
.table td.text-end, .table th.text-end { text-align: right; }
.table-filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-4) var(--sp-4) 0; }
div.dt-container { padding: 0; }
div.dt-container .dt-layout-row { margin: 0 !important; padding: var(--sp-3) var(--sp-4); }
div.dt-container .dt-layout-row.dt-layout-table { padding: 0; }
div.dt-container .dt-layout-table .dt-layout-cell { padding: 0 !important; overflow-x: auto; }
div.dt-container .dt-layout-row:first-child { gap: var(--sp-3); flex-wrap: wrap; }
div.dt-container .dt-search { display: flex; align-items: center; }
div.dt-container .dt-search label { display: none; }
div.dt-container .dt-search input { min-width: 260px; height: 36px; border-radius: var(--r-md) !important; border: 1px solid var(--line); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 11px center;
  padding-left: 34px !important; margin-left: 0 !important; color: var(--ink); font-size: .875rem; }
@media (max-width: 575.98px) { div.dt-container .dt-search input { min-width: 0; width: 100%; } div.dt-container .dt-search { width: 100%; } }
div.dt-container .dt-length { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--ink-2); }
div.dt-container .dt-length select { height: 32px; border-radius: var(--r-sm); border-color: var(--line); background-color: var(--surface); color: var(--ink); }
div.dt-container .dt-info { font-size: var(--fs-small); color: var(--ink-2); padding-top: 0 !important; }
div.dt-container .dt-paging .pagination { margin: 0; gap: 4px; }
div.dt-container .dt-paging .page-link { border-radius: var(--r-sm) !important; border: 1px solid var(--line); min-width: 32px; height: 32px; display: grid; place-items: center; padding: 0 8px;
  color: var(--ink-2); background: var(--surface); font-size: var(--fs-small); font-weight: 600; margin: 0 !important; }
div.dt-container .dt-paging .page-item.active .page-link { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
div.dt-container .dt-paging .page-item.disabled .page-link { color: var(--ink-3); background: var(--surface-2); }
table.dataTable > thead > tr > th.dt-orderable-asc, table.dataTable > thead > tr > th.dt-orderable-desc { cursor: pointer; }
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order { opacity: .6; }
table.dataTable > tbody > tr.selected > * { box-shadow: inset 0 0 0 9999px var(--info-soft) !important; color: var(--ink) !important; }
table.dataTable td.dt-type-numeric, table.dataTable th.dt-type-numeric { text-align: right; }
table.dataTable.table > :not(caption) > * > * { border-bottom-width: 1px; }
table.dataTable { margin: 0 !important; border-collapse: collapse !important; width: 100% !important; }
.dt-toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.dt-empty { padding: 0 !important; }
.dt-empty .empty-state { padding: var(--sp-7) var(--sp-4); }
/* Export menu (C6): one segmented control */
.dt-export.btn-group { box-shadow: none; }
.dt-export .dt-button, .dt-export .btn { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line); --bs-btn-color: var(--ink-2); --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--line); --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--ink); min-height: 32px; font-size: .8125rem; padding: 0 10px; }
.dt-buttons.btn-group .btn { min-height: 32px; }
.dt-button-collection .dropdown-menu, div.dt-button-collection { border-radius: var(--r-md) !important; box-shadow: var(--e-2) !important; background: var(--surface) !important; border: 1px solid var(--line) !important; padding: 6px !important; min-width: 180px; }
div.dt-button-collection .dt-button, div.dt-button-collection .dropdown-item { border-radius: var(--r-sm); display: flex; gap: 8px; align-items: center; font-size: .8125rem; color: var(--ink); }
div.dt-button-collection .dropdown-item:hover { background: var(--surface-2); }
div.dt-button-background { background: transparent !important; }
.density-toggle { min-height: 32px; }
/* Responsive cards < 768px */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  border-color: var(--ink-3) !important; }
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom: 1px solid var(--line); padding: 8px 0; display: flex; justify-content: space-between; gap: var(--sp-3); }
table.dataTable > tbody > tr.child span.dtr-title { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-2); font-weight: 600; min-width: 90px; }
@media (max-width: 767.98px) {
  .table-cards thead { display: none; }
  .table-cards tbody tr { display: block; border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; }
  .table-cards tbody td { display: flex; justify-content: space-between; gap: var(--sp-3); border: 0 !important; padding: 6px var(--sp-4) !important; text-align: right; }
  .table-cards tbody td::before { content: attr(data-label); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-2); font-weight: 600; text-align: left; }
}
.file-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.file-cell__name { overflow: hidden; text-overflow: ellipsis; max-width: 320px; white-space: nowrap; font-weight: 500; }

/* File-type icon & tiles */
.ftype { position: relative; display: inline-grid; place-items: center; width: 36px; height: 40px; border-radius: 6px; flex: none; }
.ftype .icon { width: 20px; height: 20px; margin-top: -8px; }
.ftype__ext { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: .5625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-variant: small-caps; }
.ftype--danger { background: var(--danger-soft); color: var(--danger); }
.ftype--info { background: var(--info-soft); color: var(--info); }
.ftype--success { background: var(--success-soft); color: var(--success); }
.ftype--neutral { background: var(--neutral-soft); color: var(--neutral); }
.files--list { display: grid; gap: 0; }
.files--list .file-tile { border-bottom: 1px solid var(--line); border-radius: 0; padding: var(--sp-3) 0; }
.files--list .file-tile:last-child { border-bottom: 0; }
.files--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.files--grid .file-tile { flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); background: var(--surface-2); }
.files--grid .file-tile__actions { margin-left: 0; margin-top: var(--sp-2); }
.file-tile { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.file-tile__body { min-width: 0; flex: 1 1 auto; }
.file-tile__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.file-tile__meta { font-size: .75rem; color: var(--ink-3); }
.file-tile__actions { display: flex; gap: 2px; margin-left: auto; flex: none; }

/* Return head */
.return-head { margin-bottom: var(--sp-6); }
.return-head__main { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.return-head__main > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.return-head__folder { font-size: 1.0625rem; margin: 2px 0; }
.return-head__folder .folder-name { font-size: 1rem; }
.return-head__meta { color: var(--ink-2); font-size: var(--fs-small); }
.return-head__status { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.return-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline__item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-2) 0 var(--sp-4); }
.timeline__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-soft); color: var(--neutral); box-shadow: 0 0 0 4px var(--surface); }
.timeline__item--info .timeline__dot { background: var(--info-soft); color: var(--info); }
.timeline__item--success .timeline__dot { background: var(--success-soft); color: var(--success); }
.timeline__item--warning .timeline__dot { background: var(--warning-soft); color: var(--warning); }
.timeline__item--danger .timeline__dot { background: var(--danger-soft); color: var(--danger); }
.timeline__title { font-weight: 600; font-size: .875rem; padding-top: 3px; }
.timeline__meta { font-size: var(--fs-small); color: var(--ink-2); }
.timeline__note { font-size: var(--fs-small); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; margin-top: 6px; }
.timeline__time { font-size: .75rem; color: var(--ink-3); white-space: nowrap; padding-top: 5px; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .timeline__item { grid-template-columns: 28px minmax(0, 1fr); } .timeline__time { grid-column: 2; padding-top: 0; } }
.tl-head--drawer { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.tl-head__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.timebar { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.timebar__track { flex: 1; height: 8px; background: var(--neutral-soft); border-radius: 4px; overflow: hidden; min-width: 80px; }
.timebar__fill { height: 100%; border-radius: 4px; }
.timebar__fill--success { background: var(--success); }
.timebar__fill--warning { background: var(--warning); }
.timebar__fill--danger { background: var(--danger); }
.timebar__label { font-size: .75rem; color: var(--ink-2); white-space: nowrap; }
.timebar-cell .timebar { margin: 0; min-width: 150px; }
.timebar-cell .timebar__label { display: none; }

/* =========================================================== Drawers, modals, toasts, palette */
.drawer.offcanvas-end { width: 480px; max-width: 100vw; background: var(--surface); color: var(--ink); border-left: 1px solid var(--line); box-shadow: var(--e-3); }
.drawer .offcanvas-header { border-bottom: 1px solid var(--line); padding: var(--sp-4) var(--sp-5); }
.drawer .offcanvas-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-family: var(--font-sans); }
.drawer .offcanvas-body { padding: var(--sp-5); }
.offcanvas { --bs-offcanvas-transition: transform var(--t-slow) var(--ease); }
.help-tips { list-style: none; padding: 0; margin: 0 0 var(--sp-5); counter-reset: tip; }
.help-tips li { position: relative; padding: var(--sp-3) 0 var(--sp-3) 40px; border-bottom: 1px solid var(--line); counter-increment: tip; }
.help-tips li::before { content: counter(tip); position: absolute; left: 0; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--brand-gold) 18%, transparent);
  color: var(--brand-gold-ink); font-weight: 700; font-size: .75rem; display: grid; place-items: center; }
.help-guide { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.help-guide:hover { border-color: var(--ink-3); color: var(--ink); }
.modal { --bs-modal-bg: var(--surface); --bs-modal-color: var(--ink); --bs-modal-border-color: var(--line); --bs-modal-border-radius: var(--r-lg); --bs-modal-header-border-color: var(--line);
  --bs-modal-footer-border-color: var(--line); --bs-modal-box-shadow: var(--e-3); }
.modal-content { box-shadow: var(--e-3); }
.modal-title { font-family: var(--font-sans); font-weight: 600; }
.modal-backdrop { --bs-backdrop-bg: #0B1220; --bs-backdrop-opacity: .55; }
.session-ring { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--warning-soft); color: var(--warning); }
.session-ring .icon { width: 30px; height: 30px; }
.toast-stack { position: fixed; top: calc(var(--topbar-h) + 12px); right: 16px; z-index: 1090; display: flex; flex-direction: column; gap: var(--sp-2); width: 360px; max-width: calc(100vw - 32px); pointer-events: none; }
.mrms-toast { pointer-events: auto; display: flex; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: var(--r-md);
  box-shadow: var(--e-2); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); animation: toastIn var(--t-base) var(--ease); }
.mrms-toast--success { border-left-color: var(--success); }
.mrms-toast--warning, .mrms-toast--high { border-left-color: var(--warning); }
.mrms-toast--danger, .mrms-toast--urgent { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 50%, var(--surface)); }
.mrms-toast__icon { color: var(--info); padding-top: 1px; }
.mrms-toast--urgent .mrms-toast__icon, .mrms-toast--danger .mrms-toast__icon { color: var(--danger); }
.mrms-toast--high .mrms-toast__icon, .mrms-toast--warning .mrms-toast__icon { color: var(--warning); }
.mrms-toast--success .mrms-toast__icon { color: var(--success); }
.mrms-toast__body { flex: 1; min-width: 0; font-size: var(--fs-small); }
.mrms-toast__title { font-weight: 600; font-size: .875rem; }
.mrms-toast__close { border: 0; background: transparent; color: var(--ink-3); width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.mrms-toast__close:hover { background: var(--surface-2); color: var(--ink); }
.mrms-toast.is-leaving { animation: toastOut var(--t-base) var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }
.palette .modal-dialog { max-width: 620px; margin-top: 10vh; }
.palette .modal-content { overflow: hidden; }
.palette__search { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); color: var(--ink-3); }
.palette__input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; height: 40px; }
.palette__input::-webkit-search-cancel-button { display: none; }
.palette__list { list-style: none; margin: 0; padding: var(--sp-2); max-height: 50vh; overflow-y: auto; }
.palette__group { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; padding: var(--sp-2) var(--sp-3) 4px; }
.palette__item { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-3); border-radius: var(--r-sm); cursor: pointer; color: var(--ink); }
.palette__item[aria-selected="true"] { background: var(--brand-navy); color: #fff; }
.palette__item[aria-selected="true"] .palette__sub { color: #C9D5E6; }
[data-bs-theme="dark"] .palette__item[aria-selected="true"] { background: var(--brand-navy-700); }
.palette__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__sub { font-size: .75rem; color: var(--ink-3); white-space: nowrap; }
.palette__foot { display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line); font-size: .75rem; color: var(--ink-3); background: var(--surface-2); }
.palette__empty { padding: var(--sp-6); text-align: center; color: var(--ink-3); font-size: var(--fs-small); }

/* SweetAlert2 themed to tokens */
.swal2-popup { background: var(--surface) !important; color: var(--ink) !important; border-radius: var(--r-lg) !important; font-family: var(--font-sans) !important; padding: var(--sp-6) !important; box-shadow: var(--e-3) !important; }
.swal2-title { font-family: var(--font-sans) !important; font-size: 1.125rem !important; font-weight: 600 !important; color: var(--ink) !important; }
.swal2-html-container { font-size: .9375rem !important; color: var(--ink-2) !important; }
.swal2-actions { gap: var(--sp-2); width: 100%; justify-content: flex-end !important; }
.swal2-actions .btn { min-width: 110px; }
.swal2-icon { transform: scale(.8); margin-top: 0 !important; }
.swal2-icon.swal2-warning { border-color: var(--warning) !important; color: var(--warning) !important; }
.swal2-icon.swal2-info { border-color: var(--info) !important; color: var(--info) !important; }
.swal2-container.swal2-backdrop-show { background: rgba(11,18,32,.55) !important; }

/* Select2 restyled to inputs */
.select2-container--bootstrap-5 .select2-selection { min-height: 40px; border-color: var(--line); border-radius: var(--r-sm); background-color: var(--surface); color: var(--ink); font-size: .875rem; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--brand-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 25%, transparent); }
.select2-container--bootstrap-5 .select2-dropdown { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--e-2); border-radius: var(--r-md); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { font-size: .875rem; color: var(--ink); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background: var(--surface-2); color: var(--ink); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected { background: var(--brand-navy); color: #fff; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { background: var(--surface); color: var(--ink); border-color: var(--line); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--ink); }
.s2-opt { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.s2-opt__sub { font-size: .75rem; color: var(--ink-3); }
.select2-results__option--selected .s2-opt__sub, .select2-results__option--highlighted .s2-opt__sub { color: inherit; opacity: .8; }

/* =========================================================== Public pages (10.5) */
body.public { background: var(--canvas); }
.auth { display: grid; grid-template-columns: 45% 55%; min-height: 100vh; }
.auth__brand { position: relative; overflow: hidden; background: var(--brand-navy); color: #fff; padding: var(--sp-9) var(--sp-9); display: flex; flex-direction: column; justify-content: space-between; }
.auth__brand::before { content: ""; position: absolute; inset: 0; background-image: url("../img/guilloche.svg"), url("../img/guilloche.svg"); background-repeat: no-repeat; background-size: 760px, 520px; background-position: right -320px bottom -300px, left -260px top -240px; opacity: .07; pointer-events: none; }
.auth__brand::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--brand-gold), color-mix(in srgb, var(--brand-gold) 20%, transparent)); }
.auth__brand > * { position: relative; }
.auth__crest { display: flex; align-items: center; gap: var(--sp-4); }
.auth__crest-text { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-gold); font-weight: 600; line-height: 1.5; }
.auth__title { font-family: var(--font-serif); font-size: 2.5rem; line-height: 1.15; margin: var(--sp-9) 0 var(--sp-4); color: #fff; max-width: 520px; letter-spacing: -.01em; }
.auth__lead { color: #C9D5E6; font-size: 1rem; max-width: 460px; margin-bottom: var(--sp-7); }
.auth__benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); max-width: 460px; }
.auth__benefits li { display: flex; gap: var(--sp-3); align-items: flex-start; color: #E3EAF4; }
.auth__benefits .icon-wrap { width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); background: rgba(201,162,39,.14); color: var(--brand-gold); display: grid; place-items: center; }
.auth__benefits strong { display: block; color: #fff; font-weight: 600; font-size: .9375rem; }
.auth__benefits span { font-size: var(--fs-small); color: #AFC0D8; }
.auth__org { font-size: var(--fs-small); color: #AFC0D8; border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--sp-4); }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-5); }
.auth__card { width: 100%; max-width: 420px; }
.auth__card .card { padding: var(--sp-7); border-radius: var(--r-lg); box-shadow: var(--e-2); }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-6); }
.auth__tabs .seg__btn { justify-content: center; padding: 8px 12px; font-size: .875rem; }
.auth__heading { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: var(--sp-1); }
.auth__sub { color: var(--ink-2); margin-bottom: var(--sp-5); font-size: .875rem; }
.auth__fine { font-size: .75rem; line-height: 1.45; color: var(--ink-3); margin: var(--sp-4) 0 0; display: flex; gap: 8px; }
.auth__links { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--ink-3); }
.auth__theme { position: absolute; right: var(--sp-5); top: var(--sp-5); }
.role-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.role-choice input { position: absolute; opacity: 0; pointer-events: none; }
.role-choice label { display: flex; gap: var(--sp-2); align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; font-weight: 600; font-size: .875rem; background: var(--surface); transition: border-color var(--t-fast), background var(--t-fast); }
.role-choice input:checked + label { border-color: var(--action); background: var(--success-soft); color: var(--success); }
.role-choice input:focus-visible + label { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
@media (max-width: 991.98px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth__brand { min-height: 120px; padding: var(--sp-5); flex-direction: row; align-items: center; }
  .auth__title, .auth__lead, .auth__benefits, .auth__org { display: none; }
  .auth__panel { align-items: flex-start; padding: var(--sp-6) var(--sp-4); }
  .auth__card .card { padding: var(--sp-5); }
}
.center-page { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); }
.center-card { max-width: 520px; width: 100%; text-align: center; padding: var(--sp-8) var(--sp-7); border-top: 4px solid var(--brand-navy); }
.center-card h1 { font-size: 1.5rem; margin: var(--sp-4) 0 var(--sp-2); }
.center-card p { color: var(--ink-2); }
.center-card__code { font-family: var(--font-mono); color: var(--ink-3); font-size: .8125rem; letter-spacing: .1em; }

/* Stepper */
.stepper { display: flex; list-style: none; padding: 0; margin: 0 0 var(--sp-6); gap: var(--sp-2); counter-reset: step; }
.stepper li { flex: 1; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); counter-increment: step; min-width: 0; }
.stepper li::before { content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--surface); font-size: .75rem; }
.stepper li::after { content: ""; flex: 1; height: 2px; background: var(--line); margin-left: var(--sp-2); min-width: 12px; }
.stepper li:last-child::after { display: none; }
.stepper li.is-current { color: var(--ink); }
.stepper li.is-current::before { border-color: var(--action); color: var(--action); box-shadow: 0 0 0 4px var(--success-soft); }
.stepper li.is-done { color: var(--success); }
.stepper li.is-done::before { content: "✓"; background: var(--action); border-color: var(--action); color: #fff; }
.stepper li.is-done::after { background: var(--action); }
@media (max-width: 575.98px) { .stepper li span { display: none; } .stepper li.is-current span { display: inline; } }

/* Check list (installer, health) */
.checklist { list-style: none; padding: 0; margin: 0; text-align: left; }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.checklist li:last-child { border-bottom: 0; }
.checklist .ok { color: var(--success); }
.checklist .bad { color: var(--danger); }
.checklist .warn { color: var(--warning); }

/* =========================================================== Upload (10.7) */
.period-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 575.98px) { .period-cards { grid-template-columns: 1fr; } }
.period-card input { position: absolute; opacity: 0; pointer-events: none; }
.period-card label { display: block; height: 100%; padding: var(--sp-4); border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; background: var(--surface); transition: all var(--t-fast); }
.period-card label:hover { border-color: var(--ink-3); }
.period-card .icon-wrap { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--neutral-soft); color: var(--brand-navy-700); margin-bottom: var(--sp-3); }
[data-bs-theme="dark"] .period-card .icon-wrap { color: var(--ink-2); }
.period-card strong { display: block; }
.period-card span { font-size: var(--fs-small); color: var(--ink-2); }
.period-card input:checked + label { border-color: var(--action); background: var(--success-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 15%, transparent); }
.period-card input:checked + label .icon-wrap { background: var(--action); color: #fff; }
.period-card input:focus-visible + label { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.folder-preview { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--line); }
.folder-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 12px; border-radius: var(--r-sm); background: var(--brand-navy); color: #fff; font-family: var(--font-mono); font-size: .8125rem; word-break: break-all; }
.folder-chip .icon { color: var(--brand-gold); }
[data-bs-theme="dark"] .folder-chip { background: var(--brand-navy-700); }
.dropzone { position: relative; border: 2px dashed color-mix(in srgb, var(--ink-3) 55%, transparent); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-5); text-align: center; background: var(--surface-2);
  transition: border-color var(--t-fast), background var(--t-fast); cursor: pointer; }
.dropzone:hover, .dropzone.is-over { border-color: var(--action); background: var(--success-soft); }
.dropzone__icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--sp-3); display: grid; place-items: center; background: var(--surface); color: var(--action); box-shadow: var(--e-1); }
.dropzone__icon .icon { width: 26px; height: 26px; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone__hint { font-size: var(--fs-small); color: var(--ink-2); margin: var(--sp-2) 0 0; }
.upl-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-2); }
.upl-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.upl-item.is-bad { border-color: var(--danger); background: var(--danger-soft); }
.upl-item__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upl-item__meta { font-size: .75rem; color: var(--ink-3); }
.upl-item__err { font-size: .75rem; color: var(--danger); font-weight: 600; }
.progress { --bs-progress-bg: var(--neutral-soft); --bs-progress-bar-bg: var(--action); height: 6px; border-radius: 3px; margin-top: 6px; }
.progress--lg { height: 10px; border-radius: 5px; }
/* Several returns per period: add to an open return or start a new one */
.return-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.return-choice { position: relative; }
.return-choice input { position: absolute; opacity: 0; pointer-events: none; }
.return-choice label { display: flex; gap: var(--sp-3); align-items: flex-start; height: 100%; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: all var(--t-fast); }
.return-choice label > .icon { flex: none; margin-top: 2px; color: var(--brand-navy-700); }
[data-bs-theme="dark"] .return-choice label > .icon { color: var(--ink-2); }
.return-choice label > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.return-choice label > span > span { font-size: var(--fs-small); color: var(--ink-2); overflow-wrap: anywhere; }
.return-choice label:hover { border-color: var(--ink-3); }
.return-choice input:checked + label { border-color: var(--action); background: var(--success-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 15%, transparent); }
.return-choice input:focus-visible + label { outline: 2px solid var(--focus, var(--action)); outline-offset: 2px; }
.return-choice.is-locked label { cursor: not-allowed; opacity: .6; background: var(--neutral-soft); }
.return-choice--new label { border-style: dashed; }
.upl-total { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--sp-4); }
.review-table td, .review-table th { font-size: .875rem; }
.success-card { text-align: center; padding: var(--sp-8) var(--sp-6); }
.success-card__icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--sp-4); background: var(--success-soft); color: var(--success); }
.success-card__icon .icon { width: 36px; height: 36px; }
.step-pane[hidden] { display: none !important; }

/* =========================================================== Marking sheet (FR-M11 to M14) */
.marking { display: grid; grid-template-columns: minmax(0, 50fr) 8px minmax(0, 50fr); gap: 0; align-items: start; }
.marking.is-sheet-only { grid-template-columns: minmax(0, 1fr); }
.marking.is-sheet-only .docpane, .marking.is-sheet-only .splitter { display: none; }
@media (min-width: 1440px) { .marking { grid-template-columns: minmax(0, 55fr) 8px minmax(0, 45fr); } }
@media (max-width: 1199.98px) { .marking { grid-template-columns: minmax(0, 1fr); } .marking .docpane, .marking .splitter { display: none; } }
.docpane { position: sticky; top: calc(var(--topbar-h) + 16px); height: calc(100vh - var(--topbar-h) - 32px); display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--viewer-stage); box-shadow: var(--e-1); }
.docpane__tabs { display: flex; gap: 2px; background: var(--brand-navy); padding: 6px 6px 0; overflow-x: auto; flex: none; scrollbar-width: thin; }
.docpane__tab { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 8px 12px; border: 0; border-radius: 6px 6px 0 0; background: rgba(255,255,255,.06); color: #C9D5E6; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.docpane__tab span { overflow: hidden; text-overflow: ellipsis; }
.docpane__tab:hover { background: rgba(255,255,255,.12); color: #fff; }
.docpane__tab[aria-selected="true"] { background: var(--viewer-stage); color: #fff; box-shadow: inset 0 2px 0 var(--brand-gold); }
.docpane__bar { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 10px; background: var(--viewer-stage); border-bottom: 1px solid rgba(255,255,255,.08); color: #C9D5E6; font-size: .75rem; flex: none; }
.docpane__bar .spacer { flex: 1; }
.docpane__bar a, .docpane__bar button { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 3px 8px; font-size: .75rem; display: inline-flex; gap: 4px; align-items: center; text-decoration: none; }
.docpane__bar a:hover, .docpane__bar button:hover { background: rgba(255,255,255,.16); }
.docpane__stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; }
.docpane__stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.docpane__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.docpane__msg { color: #E3EAF4; text-align: center; padding: var(--sp-6); font-size: .875rem; max-width: 360px; }
.docpane__msg .btn { margin-top: var(--sp-3); }
.splitter { align-self: stretch; cursor: col-resize; position: relative; margin: 0 4px; }
.splitter::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--line); transition: background var(--t-fast); }
.splitter:hover::before, .splitter:focus-visible::before { background: var(--brand-gold); }
.doclist { display: none; }
@media (max-width: 1199.98px) { .doclist { display: block; margin-bottom: var(--sp-5); } }
.sheet-pane { min-width: 0; padding-left: var(--sp-4); }
.marking.is-sheet-only .sheet-pane { padding-left: 0; max-width: 900px; margin: 0 auto; width: 100%; }
@media (max-width: 1199.98px) { .sheet-pane { padding-left: 0; } }
.scorebar { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20; display: grid; grid-template-columns: repeat(4, auto) 1fr; gap: var(--sp-5); align-items: center;
  background: var(--brand-navy); color: #fff; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); box-shadow: var(--e-2); margin-bottom: var(--sp-4); }
[data-bs-theme="dark"] .scorebar { background: var(--brand-navy-700); }
.scorebar__item { display: flex; flex-direction: column; line-height: 1.2; }
.scorebar__label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: #AFC0D8; font-weight: 600; }
.scorebar__value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.scorebar__value--grade { color: var(--brand-gold); font-size: 1.0625rem; }
.scorebar__save { justify-self: end; display: flex; align-items: center; gap: 6px; font-size: .75rem; color: #C9D5E6; }
.scorebar__save.is-error { color: #FFB4AB; }
.scorebar__save button { color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 4px; padding: 2px 8px; font-size: .75rem; }
@media (max-width: 575.98px) { .scorebar { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-4); } .scorebar__save { grid-column: 1 / -1; justify-self: start; } }
.crit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3); box-shadow: var(--e-1); transition: border-color var(--t-fast); }
.crit.is-rated { border-left: 3px solid var(--action); }
.crit.is-missing { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.crit__head { display: flex; gap: var(--sp-3); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.crit__num { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--neutral-soft); color: var(--ink-2); font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.crit.is-rated .crit__num { background: var(--action); color: #fff; }
.crit__title { flex: 1 1 260px; min-width: 0; display: flex; gap: var(--sp-3); }
.crit__name { font-weight: 600; }
.crit__desc { font-size: var(--fs-small); color: var(--ink-2); }
.crit__marks { font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crit__marks strong { color: var(--ink); font-size: 1rem; }
.rating { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.rating__opt { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 600; cursor: pointer; transition: all var(--t-fast); }
.rating__opt:hover { border-color: var(--ink-3); }
.rating__opt .rating__marks { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 500; }
.rating__opt[aria-checked="true"] { border-color: var(--action); background: var(--action); color: #fff; }
.rating__opt[aria-checked="true"] .rating__marks { color: rgba(255,255,255,.85); }
[data-bs-theme="dark"] .rating__opt[aria-checked="true"] { color: #06210f; }
[data-bs-theme="dark"] .rating__opt[aria-checked="true"] .rating__marks { color: #06210f; }
.rating__opt:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.rating[aria-disabled="true"] .rating__opt { cursor: not-allowed; opacity: .7; }
.crit__comment-toggle { margin-top: var(--sp-3); font-size: var(--fs-small); }
.crit__comment { margin-top: var(--sp-2); }
.remarks-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--e-1); }
.sheet-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--sp-4); }
.breakdown { width: 100%; font-size: .875rem; border-collapse: collapse; text-align: left; }
.breakdown td { padding: 6px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown tfoot td { font-weight: 700; border-bottom: 0; padding-top: 10px; }

/* Score sheet */
.sheet { padding: var(--sp-7); }
.sheet__head { display: flex; justify-content: space-between; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.sheet__title { margin: 4px 0 0; }
.sheet__title .folder-name { font-size: 1.0625rem; }
.sheet__score { text-align: right; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); min-width: 180px; }
.sheet__pct { font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--brand-navy); }
[data-bs-theme="dark"] .sheet__pct { color: var(--ink); }
.sheet__pct small { font-size: 1rem; color: var(--ink-2); }
.sheet__grade { font-family: var(--font-serif); font-size: 1.125rem; color: var(--brand-gold-ink); margin-top: 4px; }
.sheet__total { font-size: var(--fs-small); color: var(--ink-2); }
.sheet__table { margin-top: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); }
.sheet__remarks { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--line); }
.sheet__remarks p { margin: var(--sp-2) 0 0; }
.sheet__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); }
.released-foot { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }

/* =========================================================== Assign, workload, band bar, calendar, health */
.assign-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-6); align-items: start; }
@media (max-width: 1199.98px) { .assign-layout { grid-template-columns: minmax(0, 1fr); } }
.assign-panel { position: sticky; top: calc(var(--topbar-h) + 16px); }
.assign-summary { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--info-soft); color: var(--ink); font-size: .875rem; font-weight: 500; margin: var(--sp-4) 0; border: 1px solid color-mix(in srgb, var(--info) 22%, transparent); }
.assign-summary.is-empty { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
.days-wait { font-variant-numeric: tabular-nums; }
.workload { display: grid; gap: var(--sp-3); }
.workload__row { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; font-size: .875rem; }
.workload__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workload__bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--neutral-soft); }
.workload__open { background: var(--info); }
.workload__done { background: var(--success); }
.workload__num { font-size: .75rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: var(--sp-4); font-size: .75rem; color: var(--ink-2); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bandbar { position: relative; height: 36px; border-radius: var(--r-sm); background: repeating-linear-gradient(45deg, var(--danger-soft), var(--danger-soft) 6px, var(--surface-2) 6px, var(--surface-2) 12px);
  border: 1px solid var(--line); overflow: hidden; margin: var(--sp-4) 0 var(--sp-2); }
.bandbar__seg { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; font-size: .6875rem; font-weight: 700; color: #fff; overflow: hidden; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.5); }
.bandbar__seg.is-overlap { background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.25), rgba(0,0,0,.25) 4px, transparent 4px, transparent 8px); }
.bandbar__scale { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bandbar__msg { font-size: var(--fs-small); margin-top: var(--sp-2); }
.nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--surface);
  --bs-nav-link-color: var(--ink-2); --bs-nav-link-hover-color: var(--ink); gap: 2px; }
.nav-tabs .nav-link { font-weight: 600; font-size: .875rem; display: inline-flex; gap: 6px; align-items: center; }
.tab-card { border-top-left-radius: 0; }
.cal-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: var(--sp-2); }
@media (max-width: 767.98px) { .cal-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cal-strip__m { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 6px 8px; background: var(--surface-2); min-height: 76px; font-size: .6875rem; }
.cal-strip__m.is-now { border-color: var(--brand-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-gold) 25%, transparent); }
.cal-strip__name { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.cal-strip__p { margin-top: 4px; padding: 2px 4px; border-radius: 3px; background: var(--info-soft); color: var(--info); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-strip__d { margin-top: 3px; padding: 2px 4px; border-radius: 3px; background: var(--warning-soft); color: var(--warning); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.hcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); box-shadow: var(--e-1); border-top: 3px solid var(--neutral); }
.hcard--pass { border-top-color: var(--success); }
.hcard--warn { border-top-color: var(--warning); }
.hcard--fail { border-top-color: var(--danger); }
.hcard__head { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; }
.hcard__title { font-weight: 600; font-size: .9375rem; display: flex; gap: var(--sp-2); align-items: center; }
.hcard__value { font-size: .875rem; margin-top: var(--sp-2); word-break: break-word; }
.hcard__fix { font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--line); }
.codebox { display: flex; gap: var(--sp-2); align-items: center; background: #0B1220; color: #E3EAF4; font-family: var(--font-mono); font-size: .8125rem; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); overflow-x: auto; }
.codebox code { color: inherit; white-space: pre; flex: 1; }
.codebox .btn { flex: none; }
.temp-pw { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4); border-radius: var(--r-md); background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); margin-bottom: var(--sp-5); }
.temp-pw__value { font-family: var(--font-mono); font-size: 1.125rem; background: var(--surface); padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); letter-spacing: .04em; }
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix .yes { color: var(--success); }
.matrix .no { color: var(--line); }
.report-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 991.98px) { .report-layout { grid-template-columns: minmax(0, 1fr); } }
.catalogue { padding: var(--sp-3); position: sticky; top: calc(var(--topbar-h) + 16px); }
.catalogue__group { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--ink-3); padding: var(--sp-3) var(--sp-2) var(--sp-1); }
.catalogue a { display: flex; gap: var(--sp-2); align-items: baseline; padding: 7px var(--sp-2); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: .875rem; }
.catalogue a:hover { background: var(--surface-2); }
.catalogue a.is-active { background: var(--brand-navy); color: #fff; }
.catalogue a.is-active .catalogue__code { color: var(--brand-gold); }
.catalogue__code { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); min-width: 26px; }
.chart-box { position: relative; height: 300px; }
.chart-box--tall { height: 380px; }
.chart-summary { font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--sp-2); display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.filters-bar { display: flex; flex-direction: row; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.filters-bar .form-row { margin: 0; min-width: 160px; }
.notif-group { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--ink-3); margin: var(--sp-5) 0 var(--sp-2); }
.notif-group:first-child { margin-top: 0; }
.notif-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: var(--e-1); }
.uikit-swatch { display: flex; flex-direction: column; gap: 6px; font-size: .75rem; }
.uikit-swatch i { height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line); display: block; }
.guide-section { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.print-letterhead, .print-footer { display: none; }
@media (max-width: 575.98px) { .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .kpi { padding: var(--sp-3) var(--sp-4); } .kpi__value { font-size: 1.5rem; } }
/* DataTables layout polish: toolbar gutters and an unclipped Export menu */
.card--table { overflow: visible; }
div.dt-container > .row:not(.dt-layout-table), div.dt-container .dt-layout-row:not(.dt-layout-table) { margin: 0 !important; padding: 12px 16px !important; }
div.dt-container > .row > [class*="col"], div.dt-container .dt-layout-row:not(.dt-layout-table) .dt-layout-cell { padding-left: 0; padding-right: 0; }
div.dt-container .dt-layout-table { margin: 0 !important; }

.center-card > img, .center-card .text-center > img { display: block; margin: 0 auto; }

/* =========================================================== Annual results and scorecard */
.rank-badge { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--r-full); background: var(--neutral-soft); color: var(--ink); font-weight: 700; font-size: var(--fs-small); }
.rank-badge--1 { background: color-mix(in srgb, var(--brand-gold) 28%, var(--surface)); color: var(--brand-gold-ink); box-shadow: inset 0 0 0 1.5px var(--brand-gold); }
.rank-badge--2 { background: color-mix(in srgb, #94A3B8 30%, var(--surface)); box-shadow: inset 0 0 0 1.5px #94A3B8; }
.rank-badge--3 { background: color-mix(in srgb, #B87333 22%, var(--surface)); box-shadow: inset 0 0 0 1.5px #B87333; }
.grade-chip { display: inline-block; padding: 2px 10px; border-radius: var(--r-full); font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-small); color: var(--brand-gold-ink); background: color-mix(in srgb, var(--brand-gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-gold) 40%, transparent); white-space: nowrap; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }
.delta--up { color: var(--success); }
.delta--down { color: var(--danger); }
.delta--flat { color: var(--ink-3); }

.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.method { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.method p { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.method .formula { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); overflow-wrap: anywhere; }
.method.is-official { border-color: color-mix(in srgb, var(--action) 45%, var(--line)); background: var(--success-soft); box-shadow: inset 3px 0 0 var(--action); }

.scorecard { padding: var(--sp-7); }
.scorecard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
.scorecard__who { display: flex; gap: var(--sp-4); align-items: center; min-width: 0; }
.scorecard__name { font-family: var(--font-serif); font-size: 1.5rem; margin: 2px 0 4px; }
.scorecard__score { text-align: right; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-700)); color: #fff; min-width: 220px; box-shadow: var(--e-2); }
.scorecard__score .overline { color: color-mix(in srgb, #fff 70%, transparent); }
.scorecard__pct { font-size: 2.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.scorecard__pct small { font-size: 1.125rem; opacity: .75; margin-left: 2px; }
.scorecard__grade { font-family: var(--font-serif); font-size: 1.1875rem; color: var(--brand-gold); margin-top: 2px; }
.scorecard__rank { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid rgba(255, 255, 255, .18); font-size: var(--fs-small); display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.scorecard__rank .icon { color: var(--brand-gold); }

.period-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-2); }
.period-strip__cell { grid-column: span 3; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.period-strip__cell strong { font-size: 1.125rem; }
.period-strip__cell--half { grid-column: span 4; }
@media (max-width: 767.98px) { .period-strip__cell { grid-column: span 6; } .period-strip__cell--half { grid-column: span 12; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-3); } }

.dist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.dist-list li { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-small); }
.dist-list__bar { height: 8px; border-radius: var(--r-full); background: var(--neutral-soft); overflow: hidden; }
.dist-list__bar > span { display: block; height: 100%; background: var(--brand-navy-700); border-radius: inherit; }
[data-bs-theme="dark"] .dist-list__bar > span { background: var(--info); }

.month-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.month-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; border-radius: var(--r-sm); border: 1px solid var(--line); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-2); }
.month-cell strong { font-size: .9375rem; letter-spacing: 0; color: var(--ink); min-height: 1.2em; }
.month-cell.is-graded { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.month-cell.is-pending { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.month-cell.is-missing { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.month-cell.is-future { background: transparent; border-style: dashed; opacity: .6; }
.month-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.month-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--line); }
.month-legend .is-graded::before { background: var(--success-soft); border-color: var(--success); }
.month-legend .is-pending::before { background: var(--info-soft); border-color: var(--info); }
.month-legend .is-missing::before { background: var(--danger-soft); border-color: var(--danger); }
.month-legend .is-future::before { border-style: dashed; }
tr.is-current-row > td { background: color-mix(in srgb, var(--brand-gold) 10%, transparent) !important; }
.card--table tfoot th { background: var(--surface-2); border-top: 2px solid var(--line); font-weight: 700; }
@media (max-width: 575.98px) {
  .scorecard { padding: var(--sp-5); }
  .scorecard__score { width: 100%; text-align: left; }
  .scorecard__rank { justify-content: flex-start; }
  .month-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Wide figure tables: scroll sideways instead of collapsing columns; rank and name stay in view */
table[data-mrms-wide="1"] { white-space: nowrap; }
div:has(> table[data-mrms-wide="1"]) { overflow-x: auto; display: block !important; max-width: 100%; }
.table--sticky2 > :is(thead, tbody, tfoot) > tr > :is(th, td):nth-child(-n+2) { position: sticky; z-index: 1; background: var(--surface); }
.table--sticky2 > :is(thead, tbody, tfoot) > tr > :is(th, td):nth-child(1) { left: 0; min-width: 64px; width: 64px; }
.table--sticky2 > :is(thead, tbody, tfoot) > tr > :is(th, td):nth-child(2) { left: 64px; box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .18); }
.table--sticky2 > tbody > tr:hover > :is(td):nth-child(-n+2) { background: var(--surface-2); }
.grid-kpi--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .grid-kpi--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .grid-kpi--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.grid-kpi--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .grid-kpi--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .grid-kpi--6, .grid-kpi--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .grid-kpi--6 .kpi, .grid-kpi--5 .kpi { padding: var(--sp-3); }
  .grid-kpi--6 .kpi__value, .grid-kpi--5 .kpi__value { font-size: 1.25rem; }
  .grid-kpi--6 .kpi__icon, .grid-kpi--5 .kpi__icon { width: 26px; height: 26px; }
  .grid-kpi--6 .kpi__hint, .grid-kpi--5 .kpi__hint { font-size: .75rem; overflow-wrap: anywhere; }
}
.rating-mix { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.rating-mix > span { white-space: nowrap; }