/* Operational insight canvas and contextual inspection rail. */
main:has(.operational-workspace) { padding:18px 20px; }
.operational-workspace { --operational-insight:#1479c9; container-name:operational; container-type:inline-size; }
.operational-workspace.module-inventory { --operational-insight:#16846e; }
.operational-workspace.module-purchase { --operational-insight:#936b29; }
.operational-purpose { margin:5px 0 0; color:var(--muted); font-size:11px; }
.operational-section-kicker { margin:0 0 4px; color:var(--muted); font-size:9px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.operational-workspace .operational-headlines { grid-template-columns:repeat(3,minmax(0,1fr)); border-color:var(--border-strong); }
.operational-headlines .operational-metric { min-height:100px; padding:14px 18px; gap:9px; border-bottom:0; }
.operational-headlines .operational-metric > strong { font-size:clamp(21px,2.7cqi,32px); letter-spacing:-.7px; }
.operational-headlines .operational-metric:first-child { background:var(--primary-deep); color:#fff; }
.operational-headlines .operational-metric:first-child .operational-metric-label,.operational-headlines .operational-metric:first-child strong small,.operational-headlines .operational-metric:first-child .operational-availability-note { color:#d8e4ee; }
.operational-headlines .operational-metric:first-child .icon { color:#d8e4ee; }
.operational-headlines .operational-metric:first-child:hover,.operational-headlines .operational-metric:first-child.selected { box-shadow:inset 0 -4px #76bccc; }
.operational-headlines .operational-metric:first-child.selected > strong { color:#fff; }
.operational-headlines .operational-metric.attention { box-shadow:inset 0 -3px #bf8c39; }
.operational-headlines .operational-metric.attention > strong { color:#906016; }
.operational-headlines .operational-metric.unavailable > strong { font-size:17px; letter-spacing:0; }
.operational-process-metrics { margin-top:8px; }
.operational-process-metrics > summary { display:flex; align-items:center; gap:8px; padding:8px 1px; color:var(--muted); font-size:11px; cursor:pointer; }
.operational-process-metrics > summary strong { color:var(--text); font-weight:600; }
.operational-process-metrics > summary span { margin-left:auto; font-size:10px; }
.operational-process-metrics > summary .icon { width:15px; height:15px; }
.operational-process-metrics[open] > summary > .icon:last-child { transform:rotate(180deg); }
.operational-process-metrics .operational-metrics { border-radius:7px; }
.operational-analysis-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:17px; padding:12px 0 4px; border-top:1px solid var(--border); }
.operational-analysis-toolbar label { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--text); font-size:12px; font-weight:650; }
.operational-analysis-toolbar select { min-width:220px; max-width:100%; padding:7px 9px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); color:var(--text); font:inherit; font-weight:500; }
.operational-analysis-toolbar > span { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }
.operational-analysis-toolbar > span .icon { width:15px; height:15px; }
.operational-breakdowns.dimension-focus { grid-template-columns:minmax(0,1fr); }
.dimension-focus .operational-ranking { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.dimension-focus .operational-ranking > li { min-width:0; border-right:1px solid var(--border); }
.operational-compact-select select { max-width:130px; padding:5px 6px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:5px; font-size:10px; }
.operational-ranking-scope { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:5px; padding:7px 13px; border-top:1px solid var(--border); background:var(--raised); color:var(--muted); font-size:9px; }
.operational-rank-row.negative .operational-rank-track > span { background:#b55e43; }
.operational-rank-row.negative .operational-rank-value { color:#9b4934; }
.operational-chart-modes { display:flex; align-items:center; gap:2px; flex:none; padding:2px; background:var(--surface); border:1px solid var(--border); border-radius:6px; }
.operational-chart-modes button { display:flex; align-items:center; justify-content:center; width:27px; height:27px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; }
.operational-chart-modes button .icon { width:15px; height:15px; }
.operational-chart-modes button:hover,.operational-chart-modes button[aria-pressed="true"] { color:var(--primary-deep); background:var(--selected); }
.chart-area { fill:var(--operational-insight); opacity:.09; pointer-events:none; }
.chart-column { fill:var(--operational-insight); opacity:.68; cursor:pointer; }
.chart-column.negative { fill:#b55e43; }
.operational-trend-chart g:hover .chart-column,.operational-trend-chart g:focus .chart-column { opacity:1; }
.operational-chart-preview { display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; margin:0 14px 10px; padding:7px 9px; color:var(--muted); background:var(--raised); border-left:2px solid var(--operational-insight); font-size:10px; }
.operational-chart-preview b { margin-left:5px; color:var(--text); font-variant-numeric:tabular-nums; }
.operational-trend-table-wrap { margin-top:10px; max-height:228px; overflow:auto; }
.operational-trend-table { width:100%; border-collapse:collapse; font-size:11px; }
.operational-trend-table th,.operational-trend-table td { padding:6px 12px; border-bottom:1px solid var(--border); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.operational-trend-table th:first-child { text-align:left; }
.operational-trend-table thead th { position:sticky; top:0; background:var(--raised); color:var(--muted); font-size:9px; font-weight:650; }
.operational-trend-table tbody th { font-weight:500; }
.operational-trend-table .icon-button { width:25px; min-width:25px; height:25px; }
.operational-detail-export-scope { margin:0; padding:0 12px 8px; color:var(--muted); border-bottom:1px solid var(--border); font-size:9px; }
.operational-page-controls { padding:10px 12px; border-bottom:1px solid var(--border); background:var(--raised); }
.operational-page-controls > p { display:flex; justify-content:space-between; gap:7px; margin:0 0 7px; font-size:10px; }
.operational-page-controls > p span { color:var(--muted); font-size:9px; }
.operational-page-controls .search-field { width:100%; min-height:31px; background:var(--surface); }
.operational-page-controls .search-field input { font-size:10px; }
.operational-page-controls > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }
.operational-page-controls > div > label:first-child { grid-column:1/-1; }
.operational-page-controls label { min-width:0; color:var(--muted); font-size:9px; }
.operational-page-controls select { display:block; width:100%; margin-top:3px; padding:6px; border:1px solid var(--border); border-radius:5px; color:var(--text); background:var(--surface); font-size:10px; }
.operational-page-controls .text-button { margin-top:8px; font-size:10px; }
.operational-page-group { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0; padding:8px 12px; border-bottom:1px solid var(--border-strong); background:var(--selected); color:var(--primary-deep); font-size:11px; overflow-wrap:anywhere; }
.operational-page-group small { flex:none; color:var(--muted); font-size:9px; font-weight:400; }
.operational-workspace .financial-header { margin-bottom:10px; }
.nav-operational-modules { display:grid; gap:3px; }
.nav-operational-module { display:flex!important; align-items:center; gap:10px; min-height:44px; margin:2px 0; padding:8px 10px!important; color:var(--muted)!important; border-radius:7px; text-decoration:none; }
.nav-operational-module strong { font-size:13px; }
.nav-operational-module .nav-chevron { margin-left:auto; }
.nav-operational-module.active { color:var(--primary-deep)!important; background:var(--selected)!important; }
.nav-operational-module:hover { background:var(--raised); color:var(--primary)!important; }
.operational-search-bar { display:flex; align-items:center; gap:8px; margin:9px 0 12px; }
.operational-search-bar .search-field { width:min(480px,70%); background:var(--surface); }
.operational-search-bar .button { min-height:34px; font-size:12px; }
.operational-period { margin-left:auto; font-size:12px; color:var(--muted); font-weight:600; }
.operational-filter-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 0 12px; font-size:11px; color:var(--muted); }
.operational-filter-chips .filter-chip { display:flex; align-items:center; gap:5px; padding:6px 9px; color:var(--primary-deep); border:1px solid var(--border-strong); border-radius:7px; background:var(--selected); }
.filter-chip .icon { width:12px; height:12px; }
.operational-insight-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start; }
.operational-insight-layout.has-detail { grid-template-columns:minmax(0,1fr) 370px; }
.operational-insights { min-width:0; }
.operational-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.operational-metric { display:grid; align-content:center; gap:7px; min-width:0; min-height:82px; padding:10px 13px; border:0; border-right:1px solid var(--border); border-bottom:1px solid var(--border); text-align:left; color:var(--text); background:transparent; cursor:pointer; }
.operational-metric:last-child { border-right:0; }
.operational-metric-label { display:flex; align-items:center; justify-content:space-between; gap:7px; min-height:25px; font-size:11px; line-height:1.2; color:var(--muted); font-weight:650; }
.operational-metric-label > span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.operational-metric-label .icon { flex:none; width:12px; height:12px; color:var(--operational-insight); }
.operational-metric > strong { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; font-variant-numeric:tabular-nums; font-size:clamp(18px,2.3cqi,25px); line-height:1.15; letter-spacing:-.5px; }
.operational-metric strong small { font-size:9px; font-weight:500; letter-spacing:0; color:var(--muted); }
.operational-metric:hover,.operational-metric.selected { background:var(--raised); box-shadow:inset 0 -3px var(--operational-insight); }
.operational-metric.selected > strong { color:var(--primary-deep); }
.operational-metric.unavailable > strong { font-size:15px; letter-spacing:0; color:var(--muted); }
.operational-availability-note { display:block; margin:0; color:var(--muted); font-size:10px; font-weight:400; line-height:1.5; overflow-wrap:anywhere; }
.operational-chart-unavailable { padding:18px 14px; color:var(--muted); }
.operational-chart-unavailable > strong { display:block; font-size:14px; font-weight:650; }
.operational-chart-unavailable > p { margin:7px 0 0; font-size:11px; line-height:1.6; }
.operational-chart-unavailable .button { margin-top:12px; font-size:11px; }
.row-amount-unavailable { display:flex; align-items:flex-start; gap:6px; padding:7px 0; border-top:1px dashed var(--border); }
.row-amount-unavailable .icon { flex:none; width:13px; height:13px; margin-top:1px; }
.operational-workflow-tip { display:flex; align-items:center; gap:7px; margin:10px 0 0; color:var(--muted); font-size:11px; }
.operational-workflow-tip .icon { flex:none; width:14px; height:14px; color:var(--primary); }
.operational-scope-note { display:flex; align-items:center; gap:7px; margin:9px 0; color:var(--muted); font-size:11px; }
.operational-scope-note .icon { width:15px; height:15px; }
.operational-trends { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:12px; margin-top:12px; }
.operational-trend,.operational-breakdown { min-width:0; border:1px solid var(--border); border-radius:9px; background:var(--surface); overflow:hidden; }
.operational-trend > header,.operational-breakdown > header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); background:var(--raised); }
.operational-trend h2,.operational-breakdown h2 { margin:0; font-size:13px; font-weight:700; }
.operational-trend > header > span,.operational-breakdown > header > span { color:var(--muted); font-size:10px; text-align:right; }
.operational-trend-value { display:flex; align-items:baseline; gap:10px; padding:12px 14px 0; }
.operational-trend-value strong { font-size:21px; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.operational-trend-value span { color:var(--muted); font-size:10px; }
.operational-trend-chart { display:block; width:100%; height:168px; padding:0 8px; overflow:visible; }
.chart-axis { stroke:var(--border-strong); stroke-width:1; }
.chart-grid { stroke:var(--border); stroke-width:1; stroke-dasharray:3 5; }
.chart-line { stroke:var(--operational-insight); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.chart-secondary-line { stroke:#b79045; stroke-width:2; fill:none; stroke-dasharray:4 3; }
.chart-secondary-dot { fill:var(--surface); stroke:#b79045; stroke-width:2; cursor:pointer; }
.operational-trend-chart g:hover .chart-secondary-dot,.operational-trend-chart g:focus .chart-secondary-dot { fill:#b79045; r:5; }
.chart-dot { fill:var(--surface); stroke:var(--operational-insight); stroke-width:2; }
.chart-hit { fill:transparent; cursor:pointer; }
.operational-trend-chart g:hover .chart-dot,.operational-trend-chart g:focus .chart-dot { fill:var(--operational-insight); r:5; }
.operational-trend-chart g:focus { outline:none; }
.operational-trend-chart g:focus .chart-hit { stroke:var(--operational-insight); stroke-width:2; }
.operational-trend-dates { display:flex; justify-content:space-between; gap:5px; padding:0 14px 12px; color:var(--muted); font-size:10px; }
.operational-trend-dates small { font-size:10px; }
.operational-chart-legend { display:flex; gap:16px; padding:0 14px 12px; font-size:10px; color:var(--operational-insight); }
.operational-chart-legend .secondary { color:#8e6b29; }
.operational-breakdowns { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:12px; margin-top:12px; }
.operational-ranking { padding:0; margin:0; list-style:none; }
.operational-ranking > li { display:flex; align-items:center; border-bottom:1px solid var(--border); }
.operational-ranking > li:last-child { border-bottom:0; }
.operational-rank-row { position:relative; display:flex; justify-content:space-between; align-items:center; gap:10px; flex:1; min-width:0; padding:10px 14px 12px; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.operational-rank-row:hover { background:var(--raised); }
.operational-rank-label { min-width:0; font-size:11px; font-weight:600; overflow-wrap:anywhere; }
.operational-rank-label small { display:block; margin-top:2px; color:var(--muted); font-size:9px; font-weight:400; }
.operational-rank-value { display:flex; align-items:center; gap:5px; white-space:nowrap; color:var(--primary-deep); font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }
.operational-rank-value .icon { width:12px; height:12px; }
.operational-rank-track { position:absolute; bottom:4px; left:14px; right:14px; height:2px; border-radius:2px; background:var(--raised); }
.operational-rank-track > span { display:block; height:100%; background:var(--operational-insight); opacity:.4; }
.operational-dimension-filter { display:flex; align-items:center; justify-content:center; width:32px; height:36px; margin-right:5px; border:0; border-radius:6px; color:var(--muted); background:transparent; cursor:pointer; }
.operational-dimension-filter .icon { width:15px; height:15px; }
.operational-dimension-filter:hover { color:var(--primary); background:var(--selected); }
.operational-chart-empty { margin:0; padding:30px 14px; color:var(--muted); font-size:12px; }
.operational-source-notes { margin-top:12px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); }
.operational-source-notes summary { display:flex; align-items:center; gap:7px; padding:10px 0; cursor:pointer; font-weight:600; }
.operational-source-notes summary .icon { width:15px; height:15px; }
.operational-source-notes summary span { margin-left:auto; font-size:10px; font-weight:400; }
.operational-source-notes ul { margin:0 0 10px; padding-left:22px; line-height:1.7; }
.operational-detail-panel { position:sticky; top:76px; min-width:0; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); box-shadow:0 5px 18px rgb(16 37 58 / 7%); overflow:hidden; }
.operational-detail-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; padding:13px 14px; border-bottom:1px solid var(--border); background:var(--selected); }
.operational-detail-heading .eyebrow { margin:0 0 5px; font-size:9px; }
.operational-detail-heading h2 { margin:0; font-size:15px; overflow-wrap:anywhere; }
.operational-detail-heading small { font-size:10px; color:var(--muted); }
.operational-detail-heading .icon-button { flex:none; min-width:28px; width:28px; height:28px; }
.operational-detail-toolbar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; color:var(--muted); font-size:10px; border-bottom:1px solid var(--border); }
.operational-detail-toolbar .text-button { display:flex; align-items:center; gap:4px; font-size:10px; }
.operational-detail-export { display:flex; align-items:center; gap:8px; }
.operational-detail-toolbar .icon { width:13px; height:13px; }
.operational-detail-rows { max-height:max(160px,calc(100vh - 475px)); min-height:140px; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:#92aac2 #edf4fa; }
.operational-detail-row { padding:11px 12px; border-bottom:1px solid var(--border); }
.operational-detail-row:nth-child(even) { background:var(--raised); }
.operational-detail-row.selected { background:var(--selected); box-shadow:inset 3px 0 var(--primary); }
.operational-detail-row-top { display:flex; justify-content:space-between; gap:7px; color:var(--muted); font-size:9px; }
.operational-row-status { text-align:right; }
.operational-detail-identity { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:7px 0; }
.operational-detail-identity strong { font-size:13px; font-weight:650; }
.document-type-badge { display:inline-flex; align-items:center; padding:3px 5px; color:var(--primary-deep); background:var(--selected); border:1px solid var(--border); border-radius:4px; font-size:9px; font-weight:600; }
.operational-detail-description { margin:5px 0; font-size:11px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.operational-detail-partner { margin:4px 0 8px; font-size:10px; color:var(--muted); overflow-wrap:anywhere; }
.operational-detail-partner small { font-size:9px; }
.operational-detail-row dl { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:5px; margin:8px 0; }
.operational-detail-row dl div { min-width:0; }
.operational-detail-row dt { color:var(--muted); font-size:9px; margin-bottom:3px; }
.operational-detail-row dd { margin:0; font-size:11px; font-weight:650; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.operational-detail-row dd small { font-size:9px; color:var(--muted); font-weight:400; }
.operational-detail-row-actions { display:flex; justify-content:flex-end; margin-top:9px; }
.operational-detail-row-actions .button { width:100%; justify-content:center; min-height:29px; font-size:10px; background:var(--surface); }
.operational-detail-row-actions .icon { width:13px; height:13px; }
.operational-detail-state { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:30px 18px; color:var(--muted); font-size:12px; }
.operational-detail-state p { margin:0; line-height:1.6; }
.operational-detail-state strong { color:var(--text); }
.operational-detail-footer { padding:10px 12px; border-top:1px solid var(--border); background:var(--raised); }
.operational-detail-footer > div { display:flex; justify-content:space-between; gap:8px; }
.operational-detail-footer .button { min-height:30px; font-size:11px; }
.operational-detail-footer > small { display:flex; align-items:center; gap:5px; margin-top:9px; color:var(--muted); font-size:9px; }
.operational-detail-footer .icon { width:12px; height:12px; }
.operational-loading { border:1px solid var(--border); border-radius:10px; padding:18px; background:var(--surface); }
.operational-loading-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }
.operational-loading-metrics .skeleton { height:76px; }
.operational-loading-chart { display:block; height:260px; }
.operational-workspace button:focus-visible,.nav-operational-module:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media(max-width:1250px) {
  .operational-insight-layout.has-detail { grid-template-columns:minmax(0,1fr) 325px; }
}
@media(max-width:1000px) {
  .operational-insight-layout,.operational-insight-layout.has-detail { grid-template-columns:minmax(0,1fr); }
  .operational-detail-panel { position:relative; top:auto; grid-row:1; }
  .operational-detail-rows { max-height:420px; }
  .operational-period { font-size:10px; }
}
@media(max-width:600px) {
  main:has(.operational-workspace) { padding:12px; }
  .operational-workspace .report-title h1 { font-size:22px; }
  .operational-search-bar { flex-wrap:wrap; }
  .operational-search-bar .search-field { flex:1; width:auto; }
  .operational-period { width:100%; margin:1px 0 0; }
  .operational-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .operational-metric { padding:10px; border-bottom:1px solid var(--border); gap:6px; }
  .operational-metric > strong { font-size:18px; }
  .operational-trends,.operational-breakdowns { grid-template-columns:minmax(0,1fr); }
  .operational-rank-row { min-height:52px; }
  .operational-dimension-filter { width:40px; height:44px; }
  .operational-trend-dates small { display:none; }
  .operational-detail-row-actions .button { min-height:40px; }
  .operational-detail-footer .button { min-height:40px; }
  .operational-workspace .operational-headlines { grid-template-columns:minmax(0,1fr); }
  .operational-headlines .operational-metric { min-height:75px; border-right:0; border-bottom:1px solid var(--border); }
  .operational-headlines .operational-metric > strong { font-size:25px; }
  .operational-analysis-toolbar { align-items:flex-start; flex-direction:column; }
  .operational-analysis-toolbar label { align-items:flex-start; flex-direction:column; gap:5px; }
  .dimension-focus .operational-ranking { grid-template-columns:minmax(0,1fr); }
  .operational-chart-modes button { width:34px; height:34px; }
  .operational-process-metrics > summary { min-height:40px; }
  .operational-chart-preview { gap:7px; }
  .operational-headlines .operational-metric.unavailable > strong { font-size:17px; }
}
@container operational (min-width:1000px) { .operational-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@container operational (max-width:650px) { .operational-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media print {
  .operational-workflow-tip,.operational-detail-panel,.operational-search-bar,.operational-filter-chips { display:none; }
  .operational-insight-layout { display:block; }
  .operational-trend,.operational-breakdown,.operational-metrics { break-inside:avoid; }
}
