/* SERVICE_NAV_20261005: this rail belongs to the shared frame, not to the
   selected application. Its width stays fixed when the context pane resizes.
   The default 12.5% is half the original context pane's 25% width. */
.workspace-with-navigation {
  --service-color: #526b7b;
  --service-tint: #edf3f6;
  grid-template-columns: clamp(9rem, 12.5%, 16rem) minmax(0, var(--left-pane-width)) .38rem minmax(0, 1fr);
}
[data-service="wiki"], [data-active-service="wiki"] { --service-color:#26766f; --service-tint:#e5f3ef; }
[data-service="library"], [data-active-service="library"] { --service-color:#326fac; --service-tint:#e8f1fb; }
[data-service="brainstorm"], [data-active-service="brainstorm"] { --service-color:#885b14; --service-tint:#fff3d2; }
[data-service="story"], [data-active-service="story"] { --service-color:#53765c; --service-tint:#edf3df; }
[data-service="facts"], [data-active-service="facts"] { --service-color:#6653a0; --service-tint:#f0ebfa; }
[data-service="explorer"], [data-active-service="explorer"] { --service-color:#8b4e76; --service-tint:#f8eaf2; }
[data-service="applications"], [data-active-service="applications"] { --service-color:#397543; --service-tint:#eaf4e9; }
[data-service="overview"], [data-active-service="overview"] { --service-color:#536982; --service-tint:#edf1f7; }
[data-service="testing"], [data-active-service="testing"] { --service-color:#765946; --service-tint:#f4ece5; }
.service-navigation {
  min-width:0; min-height:0; display:flex; flex-direction:column;
  overflow:auto; overscroll-behavior:contain; padding:.65rem .5rem;
  background:#f1f5f8; border:1px solid #8ba2b3;
}
.service-navigation section { flex:none; }
.service-navigation section + section { margin-top:auto; padding-top:1rem; }
.service-navigation h2 { margin:.2rem .35rem .65rem; font-size:.8rem; color:#334f61; line-height:1.4; }
.service-link {
  display:flex; align-items:center; gap:.65rem; min-height:3.5rem;
  margin:.3rem 0; padding:.5rem; border:2px solid transparent; border-radius:5px;
  color:#283f50; text-decoration:none; font-size:.8rem; line-height:1.25;
  overflow-wrap:anywhere;
}
.service-icon { display:grid; place-items:center; flex:none; width:2.3rem; height:2.3rem; color:var(--service-color); background:var(--service-tint); border-radius:5px; }
.service-icon svg { width:1.65rem; height:1.65rem; }
.service-link:hover { background:#fff; border-color:var(--service-color); }
.service-link[aria-current="page"] { background:var(--service-tint); border-color:var(--service-color); font-weight:bold; box-shadow:inset 3px 0 var(--service-color); }
.service-link:focus-visible { outline:3px solid #173f65; outline-offset:1px; }
/* Color is reinforced by the selected border, bold label and aria-current;
   it is never the only indicator. Application content keeps its own palette. */
.workspace-with-navigation > .workspace-pane { border-color:var(--service-color); }
.workspace-with-navigation > .workspace-pane > .pane-title-bar { border-color:var(--service-color); background:var(--service-tint); }
@media(max-width:85rem) {
  .service-link { flex-direction:column; gap:.25rem; text-align:center; }
}
@media(max-width:50rem) {
  .workspace-with-navigation { grid-template-columns:7rem minmax(0,var(--left-pane-width)) .38rem minmax(0,1fr); }
  .service-link { flex-direction:column; gap:.25rem; text-align:center; }
}
/* Even on narrow screens the service rail stays beside the two working panes,
   which stack in the remaining column. Scroll is inside the panes/rail. */
@media(max-width:34rem) {
  body:has(.workspace-with-navigation) { overflow:hidden; }
  body:has(.workspace-with-navigation) .fitsm-application-frame { height:100dvh; min-height:0; }
  .workspace.workspace-with-navigation { grid-template-columns:7rem minmax(0,1fr); grid-template-rows:minmax(7rem,30%) minmax(0,1fr); overflow:hidden; }
  .service-navigation { grid-column:1; grid-row:1 / 3; padding:.4rem .2rem; }
  .workspace-with-navigation > .primary-pane { grid-column:2; grid-row:1; }
  .workspace-with-navigation > .options-pane { grid-column:2; grid-row:2; }
}

/* ADMIN_METRICS_20261005: metrics take at most the bottom third. Navigation and
   report have separate scroll regions; no chart can push service links away. */
.service-navigation { overflow:hidden; padding:0; }
.service-navigation-links { min-height:0; flex:1; overflow:auto; padding:.65rem .5rem; display:flex; flex-direction:column; }
.service-navigation-links section + section { margin-top:auto; padding-top:1rem; }
.service-navigation > .admin-metrics { margin:0; padding:.4rem; flex:0 0 33%; min-height:0; overflow:auto; border-top:2px solid #789db9; background:#fff; font-size:.7rem; }
.admin-metrics[hidden] { display:none; }
.admin-metrics h2 { margin:0 0 .25rem; }
.metrics-controls { display:flex; gap:.2rem; }
.metrics-controls select { min-width:0; width:100%; font-size:.7rem; }
.metrics-controls button { padding:.1rem .35rem; }
.metrics-status,.metrics-help { margin:.25rem 0; font-size:.65rem; }
.metric-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 .2rem; border-top:1px solid #dbe4ea; padding:.12rem 0; }
.metric-label { grid-column:1; grid-row:1; font-size:.65rem; }
.metric-row svg { grid-column:1; grid-row:2; width:100%; height:21px; color:#246354; }
.metric-numbers { grid-column:2; grid-row:2; display:flex; flex-direction:column; text-align:right; line-height:1.05; }
.metric-numbers strong { font-size:.8rem; color:#245647; }
.metric-total { grid-column:2; grid-row:1; text-align:right; color:#526676; font-size:.6rem; }
.metric-user { padding:.3rem 0; border-top:1px solid #dbe4ea; overflow-wrap:anywhere; }
.metric-user > * { display:block; }
.metric-user svg { width:100%; height:22px; color:#246354; }
.admin-metrics details { margin-top:.3rem; }

/* Growth & Controls uses the existing shared rail, with current-page indication. */
.service-administration{display:block;padding:.75rem;text-decoration:none;color:#274654}.service-administration[hidden]{display:none}.service-administration[aria-current=page]{background:#ded6ed;border:2px solid #67547c;font-weight:bold}

.metric-brain-growth{border-top:1px solid #dbe4ea;padding:.3rem 0}.metric-brain-growth svg{width:100%;height:auto}.metric-brain-growth p{margin:.2rem 0;font-size:.65rem}

/* RECORDING_ICON_20261022: the shared rail supplies icon size, spacing and focus. */
[data-service="recording"], [data-active-service="recording"] { --service-color:#67547c; --service-tint:#f0ebf7; }

/* SERVICE_TOOLTIPS_20261022: operator link shares icon rail without bypassing its gate. */
[data-service="administration"],[data-active-service="administration"]{--service-color:#4a7362;--service-tint:#e7f2ea}.service-link[hidden]{display:none}