/* ============================================================
   Uniqueue — office-dashboard.css
   Office Admin · Queue Dashboard
   Palette : Brand maroon (matches staff-dashboard.css)
   Fonts   : Inter via theme.css / system stack (no Google Fonts
             CDN — avoids CSP style-src violations)
   ============================================================ */

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ────────────────────────────────────────────── */
/* Design tokens (colors, fonts, radius, shadows) now live in theme.css — loaded once via includes/header.php. */

/* ── Base ─────────────────────────────────────────────────── */
html {
  scrollbar-gutter: auto;
}
html, body {
  height: 100%;
  /* font-family: 'Inter', sans-serif; */
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  background: var(--off-white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* Column layout so the footer always sits at the bottom of the
   viewport and the sidebar + main content can sit side by side
   between the header and footer. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: 'Inter', sans-serif; cursor: pointer; }

/* ── Shared header / footer ───────────────────────────────── */
/* NOTE: .site-header itself (position: sticky, background, border, etc.)
   is fully owned by header.css now. A duplicate rule used to live here
   with `transform: translateZ(0)` + `will-change: transform` stacked on
   top of position: sticky — that combination is what caused the header
   to flicker/disappear mid-scroll whenever something below it reflowed
   (e.g. the Service Items chart resizing). Removed; do not re-add a
   transform/will-change hack to a position:sticky element. */

/* height owned by header.css (.site-header = 64px) — do not force 60px here */
.site-header__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.8rem;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  text-decoration: none;
}

.site-header__logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
}

.site-header__name {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.site-nav__link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-mid);
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.site-nav__link:hover {
  background: var(--mist);
  color: var(--ink);
}

.site-nav__link.active {
  background: var(--red-soft);
  color: var(--red);
}

.site-header__user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

.site-header__user-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-mid);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Notification bell */
.notif-bell {
  position: relative;
  background: none;
  border: none;
  color: var(--ink-mid);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

.notif-bell:hover {
  background: var(--mist);
  color: var(--ink);
}

.notif-badge {
  position: absolute;
  top: 5px; right: 5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--white);
}

/* Notification dropdown */
.notif-dropdown {
  position: absolute;
  top: 62px; right: 1.8rem;
  width: 320px;
  background: var(--white);
  border: 1.5px solid var(--smoke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
}

.notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--smoke);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.notif-dropdown__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--ink-light);
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: color var(--transition);
}
.notif-dropdown__close:hover { color: var(--ink); }

.notif-list {
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
}

.notif-list__empty {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.83rem;
  color: var(--dim);
  font-style: italic;
}

/* Footer — owned ONLY by shared footer.css (position:fixed).
   Do NOT add .site-footer rules here. */

/* ── App shell (sidebar + main content) ──────────────────────
   Sits between the sticky header and the footer. .od-sidebar is
   the persistent nav rail; .od-wrap is the scrollable main
   column next to it. ──────────────────────────────────────── */
.app-shell {
  display: flex;
  align-items: flex-start;
  flex: 1;
  width: 100%;
}

/* Sidebar LAYOUT owned by /assets/css/office-sidebar.css — do not redeclare width/height/sticky/overflow here. */

.od-sidebar__label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
  opacity: 1;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.15s ease, max-width 0.15s ease,
              margin 0.15s ease, padding 0.15s ease;
}

/* Shared layout for the collapse button and every nav link — locked
   to flex-start so alignment never changes between expanded and
   collapsed states (this is what keeps the icons from re-centering
   mid-animation). */
.od-sidebar__link,
.od-sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* huwag center */
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  overflow: hidden;
}

/* Desktop collapse trigger — sits at the top of the rail like a header row */
.od-sidebar-collapse-btn {
  width: 100%;
  margin-bottom: 0.6rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255,255,255,0.9);
  font-size: 0.87rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}

.od-sidebar-collapse-btn:hover { background: rgba(255,255,255,0.08); }
.od-sidebar-collapse-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.od-sidebar-collapse-btn__label {
  white-space: nowrap;
  opacity: 1;
  max-width: 180px;
  overflow: hidden;
  transition: opacity 0.15s ease, max-width 0.15s ease;
}

/* Arrow points right when collapsed (tap to expand), left when expanded (tap to collapse) */
.od-sidebar.is-collapsed .od-sidebar-collapse-btn svg { transform: rotate(180deg); }

.od-sidebar__link {
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.od-sidebar__link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

.od-sidebar__text {
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  max-width: 180px;
  transition: opacity 0.15s ease, max-width 0.15s ease;
}

.od-sidebar__link:hover {
  background: rgba(255,255,255,0.10);
  color: var(--white);
}

.od-sidebar__link.active {
  background: var(--white);
  color: var(--brand-primary);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(102,8,16,0.05); /* frozen: sidebar kept as-is */
}

.od-sidebar__link.active svg { opacity: 1; }

.od-sidebar__divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 0.6rem 0.5rem;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1), margin 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── Collapsed state (desktop) — icon rail only ──────────────────
   Icons are pinned by the link's own left padding, which never
   changes between states — only the sidebar's overall width and
   the text's opacity/max-width transition. That's what keeps the
   icons perfectly still (no snap from justify-content flipping or
   padding jumping) while the rail slides smoothly to its narrow
   width and the labels dissolve away. */
.od-sidebar.is-collapsed {
  width: var(--sb-w-collapsed);
}

/* Explicit re-assertion: alignment/padding never change on collapse */
.od-sidebar.is-collapsed .od-sidebar__link,
.od-sidebar.is-collapsed .od-sidebar-collapse-btn {
  justify-content: flex-start;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Text hiding is intentionally NOT tied to .is-collapsed. If it were,
   the text's own max-width/opacity change would kick off at the same
   instant as the sidebar's width shrink, and the two competing
   reflows are what caused the icon to visibly "jump" mid-animation.
   Instead: .is-collapsed only ever changes the sidebar's width. Text
   stays fully visible (just increasingly clipped by the link/button's
   own overflow:hidden as the rail narrows around it — a clip, not a
   reflow) until the width transition finishes. Only then does the JS
   add .is-text-hidden, which fades the (by-then off-screen) text away
   inside an already-static-width container, so nothing else reflows. */
.od-sidebar.is-text-hidden .od-sidebar__text,
.od-sidebar.is-text-hidden .od-sidebar-collapse-btn__label,
.od-sidebar.is-text-hidden .od-sidebar__label {
  opacity: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.od-sidebar.is-collapsed .od-sidebar__divider {
  width: calc(100% - 0.4rem);
  margin: 0.6rem auto;
}

/* ── Page wrapper (main content column, sibling of .od-sidebar) ── */
.od-wrap {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* no fadeUp — causes footer blink on page nav */
}

/* ── Section label ────────────────────────────────────────── */
.sec-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: -0.3rem;
}
.sec-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2.5px;
  background: var(--red);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Top bar ──────────────────────────────────────────────── */
.od-topbar {
  background: var(--white);
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 1rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  box-shadow: 0 1px 3px rgba(102, 8, 16, 0.04);
  position: relative;
  box-sizing: border-box;
}

.od-topbar__eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 0.2rem;
}

.od-topbar__left h1 {
  font-family: 'Inter', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: normal;
  line-height: 1.25;
}

.od-topbar__left p {
  font-size: 0.85rem;
  color: var(--ink-mid, #666);
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.od-topbar__left p::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  animation: livePulse 2s ease-in-out infinite;
}

.od-actions,
.od-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

/* ── Today stats row ──────────────────────────────────────────
   Column layout is handled by Bootstrap's .row/.col-* grid in the
   markup now (row g-3 / col-6 col-md-3), so no CSS grid needed here. */
.stats-row {
  --bs-gutter-x: 0.7rem;
  --bs-gutter-y: 0.7rem;
}

.stat-box {
  background: var(--white);
  border: 1px solid var(--smoke);
  border-radius: 10px;
  padding: 1.15rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 1px 4px rgba(102,8,16,0.05); /* frozen: sidebar kept as-is */
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
  cursor: default;
}

/* slim accent bar along the top edge, replaces the old bubble */
.stat-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--_accent, var(--red));
  opacity: 0.45;
  pointer-events: none;
}

.stat-box:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--_accent, var(--smoke-dark));
}

.stat-box__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--_accent, var(--red)) 12%, white);
  color: var(--_accent, var(--red));
  position: relative;
  z-index: 1;
}
.stat-box__icon svg { width: 22px; height: 22px; }

.stat-box__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.stat-box__lbl {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-light);
  white-space: nowrap;
}

.stat-box__val {
  font-family: 'Inter', sans-serif;
  font-size: 1.95rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.s-blue   { --_accent: var(--slate, #5b6b8c); }
.s-amber  { --_accent: #d97706; }
.s-teal   { --_accent: #0d9488; }
.s-green  { --_accent: #1a8c4e; }
.s-red    { --_accent: var(--red); }
.s-violet { --_accent: var(--rust, #c1793f); }
.s-slate  { --_accent: #5b6b8c; }

.stat-box__val small {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-light);
  margin-left: 0.1rem;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0   rgba(26,140,78,0.42); }
  70%  { box-shadow: 0 0 0 6px rgba(26,140,78,0);    }
  100% { box-shadow: 0 0 0 0   rgba(26,140,78,0);    }
}

/* ── Queue column ─────────────────────────────────────────── */
.queue-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* ── Queue section ────────────────────────────────────────── */
.queue-section {
  background: var(--white);
  border: 1.5px solid var(--smoke);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.queue-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.3rem;
  background: var(--mist);
  border-bottom: 1.5px solid var(--smoke);
}

.queue-section__head h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Count badges ─────────────────────────────────────────── */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  justify-content: center;  
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 22px;
  height: 20px;
  padding: 0 0.45rem;
  border-radius: 100px;
  transition: transform 0.2s ease;
}

.count-badge.teal  { background: rgba(13,148,136,0.09); color: #0d9488; border: 1px solid rgba(13,148,136,0.22); }
.count-badge.amber { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }

/* count badge pop animation */
.count-badge.pop {
  animation: badgePop 0.3s cubic-bezier(0.4,0,0.2,1);
}

@keyframes badgePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ── Queue list containers ────────────────────────────────── */
#in-progress-queue-list,
#waiting-queue-list {
  padding: 0.3rem 0;
  min-height: 5rem;
}

/* ── Queue row (JS-rendered) ──────────────────────────────── */
.queue-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.78rem 1.3rem;
  border-bottom: 1px solid var(--smoke);
  transition: background var(--transition);
  animation: rowIn 0.28s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes rowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.queue-row:last-child { border-bottom: none; }
.queue-row:hover      { background: var(--off-white); }

.queue-row--serving { background: rgba(13,148,136,0.03); }
.queue-row--serving:hover { background: rgba(13,148,136,0.07); }

.queue-row__num {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-mid);
  min-width: 4.5rem;
  line-height: 1;
}

.queue-row__num.serving { color: #0d9488; }

.queue-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.queue-row__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-row__sub {
  font-size: 0.76rem;
  color: var(--ink-light);
}

.queue-row__badges {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.queue-row__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* ── Inline badges ────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.67rem;
  font-weight: 600;
  padding: 0.2rem 0.52rem;
  border-radius: 100px;
  white-space: nowrap;
  text-transform: capitalize;
}

.badge-type     { background: var(--info-bg);      color: var(--info-text);  border: 1px solid var(--info-border); }
.badge-priority { background: var(--warning-bg);   color: var(--warning);    border: 1px solid var(--warning-border); }
.badge-Window   { background: var(--smoke);        color: var(--ink-mid);    border: 1px solid var(--ink-faint); }
.badge-open     { background: var(--success-bg);   color: var(--success);    border: 1px solid var(--success-border); }
.badge-closed   { background: var(--light-gray);   color: var(--ink-light);  border: 1px solid var(--smoke-dark); }

/* ── Window monitor grid ──────────────────────────────────── */
.Windows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
  padding: 1.1rem 1.3rem 1.3rem;
}

.Window-card {
  background: var(--off-white);
  border: 1.5px solid var(--smoke);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.Window-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.Window-card.is-open   { border-color: rgba(46,125,50,0.3); background: var(--white); }
.Window-card.is-closed { opacity: 0.72; }

.Window-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.Window-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.Window-card__current {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.Window-card__ticket {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0d9488;
  flex-shrink: 0;
}

.Window-card__student {
  font-size: 0.8rem;
  color: var(--ink-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Window-card__idle {
  font-size: 0.78rem;
  color: var(--ink-light);
  font-style: italic;
}

.Window-card__staff {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--ink-light);
  padding-top: 0.35rem;
  border-top: 1px dashed var(--smoke);
}

@media (max-width: 600px) {
  .Windows-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0.9rem; gap: 0.6rem; }
}

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--ink-light);
  font-style: italic;
}

.empty-state svg {
  opacity: 0.3;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.87rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 1.1rem;
  height: 38px;
  position: relative;
  overflow: hidden;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: translateY(0) scale(0.98) !important; }

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}

.btn-add::before { display: none; }

.btn-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  box-shadow: var(--shadow-red);
}
.btn-primary:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  box-shadow: none;
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--white);
  color: var(--ink-mid);
  border-color: var(--smoke-dark);
}
.btn-ghost:hover {
  background: var(--mist);
  border-color: var(--ink-faint);
  color: var(--ink);
  transform: translateY(-1px);
}

.btn-add {
  background: var(--white);
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
  box-shadow: none;
}
.btn-add:hover {
  background: var(--primary-soft);
  color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}

.btn-success {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}
.btn-success:hover {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red-border);
}
.btn-danger:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  transform: translateY(-1px);
}

.btn-sm {
  font-size: 0.8rem;
  padding: 0.38rem 0.85rem;
  height: 32px;
}

.btn-xs {
  font-size: 0.71rem;
  font-weight: 600;
  padding: 0.25rem 0.62rem;
  height: 26px;
  border-radius: var(--radius-xs);
}

/* toggle open/close */
.btn-toggle-Window[data-status="open"] {
  color: var(--red);
  border-color: var(--red-border);
  background: var(--red-soft);
}
.btn-toggle-Window[data-status="open"]:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  transform: translateY(-1px);
}

.btn-toggle-Window[data-status="closed"] {
  color: var(--green);
  border-color: var(--green-border);
  background: var(--green-soft);
}
.btn-toggle-Window[data-status="closed"]:hover {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  transform: translateY(-1px);
}

/* smart assign */
#smart-assign-btn {
  background: #7c3aed;
  color: var(--white);
  border-color: #7c3aed;
  box-shadow: none;
  font-size: 0.78rem;
  padding: 0.4rem 0.85rem;
}
#smart-assign-btn:hover {
  background: #6d28d9;
  border-color: #6d28d9;
  box-shadow: none;
  transform: translateY(-1px);
}
#smart-assign-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* refresh spin */
#refresh-btn svg {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
#refresh-btn:hover svg {
  transform: rotate(200deg);
}

/* ── Countdown ring  (auto-refresh indicator) ─────────────── */
.refresh-ring {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  z-index: 500;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--transition);
}
.refresh-ring:hover { opacity: 1; }

.refresh-ring svg {
  transform: rotate(-90deg);
}

.refresh-ring__track {
  fill: none;
  stroke: var(--smoke);
  stroke-width: 3;
}

.refresh-ring__fill {
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 113; /* 2π × 18 */
  stroke-dashoffset: 113;
  transition: stroke-dashoffset 1s linear;
}

/* ── Toast notifications ──────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ink);
  color: var(--white);
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toastIn 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

.toast.toast-success { background: var(--green); }
.toast.toast-error   { background: var(--red); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.95); }
}

/* ── Skeleton loader ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--smoke) 25%, var(--mist) 50%, var(--smoke) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-xs);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Accessible focus states ──────────────────────────────── */
.btn:focus-visible,
.od-sidebar__link:focus-visible,
.dashboard-slicer__select:focus-visible,
.dashboard-slicer__apply:focus-visible,
.dashboard-slicer__custom input:focus-visible,
.Window-card:focus-visible,
.notif-bell:focus-visible {
  outline: 2px solid var(--brand-primary-light);
  outline-offset: 2px;
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Sidebar becomes an off-canvas drawer on mobile: hidden by
     default, slid in/out with .is-open via the floating hamburger
     button + backdrop overlay below. Desktop-only collapse/expand
     (icon rail vs full) does not apply at this width. */
  .app-shell { flex-direction: row; }

  /* Sidebar LAYOUT owned by /assets/css/office-sidebar.css — do not redeclare width/height/sticky/overflow here. */

  .od-sidebar.is-open { transform: translateX(0); }

  /* The desktop collapse button/logic doesn't apply on mobile —
     the drawer is either fully open or fully hidden, never a rail. */
  .od-sidebar-collapse-btn { display: none; }

  .od-sidebar.is-collapsed {
    width: 220px;
    align-items: stretch;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .od-sidebar.is-collapsed .od-sidebar__link {
    width: auto;
    justify-content: flex-start;
    padding: 0.65rem 0.75rem;
    gap: 0.75rem;
  }
  .od-sidebar.is-collapsed .od-sidebar__text {
    opacity: 1;
    max-width: 200px;
    pointer-events: auto;
  }
  .od-sidebar.is-collapsed .od-sidebar__label {
    opacity: 1;
    max-width: 200px;
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
    pointer-events: auto;
  }

  /* Edge "pull tab" trigger — docked to the left edge, vertically
     centered, like a handle you pull to slide the drawer out.
     Moves with the drawer so it stays attached to its right edge,
     and the arrow flips direction to show "pull to close" once open. */
  .od-sidebar-toggle {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1001;
    width: 26px;
    height: 64px;
    border: none;
    border-radius: 0 10px 10px 0;
    background: var(--brand-primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md, 2px 0 10px rgba(0,0,0,0.25));
    cursor: pointer;
    transition: left 0.25s cubic-bezier(0.4,0,0.2,1);
  }
  .od-sidebar-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
  }
  /* Arrow points right (pull open) by default; flips left (push closed) once open */
  .od-sidebar-toggle.is-open svg { transform: rotate(180deg); }
  /* Tab rides along the drawer's edge instead of staying pinned at x=0 */
  .od-sidebar-toggle.is-open { left: 220px; }
  @media (max-width: 320px) {
    .od-sidebar-toggle.is-open { left: 78vw; }
  }

  /* Backdrop behind the open drawer; tapping it closes the drawer */
  .od-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 60px 0 0 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
  }
  .od-sidebar-overlay.is-visible { display: block; }
}

@media (min-width: 901px) {
  .od-sidebar-toggle,
  .od-sidebar-overlay { display: none; }
}

@media (max-width: 860px) {
  .od-wrap   { padding: 1.5rem 1rem calc(1rem + 45px); gap: 1.2rem; }
  .site-header__inner { padding: 0 1rem; }
}

@media (max-width: 640px) {
  .site-nav { display: none; }
}

@media (max-width: 600px) {
  .od-wrap        { padding: 1rem 0.75rem calc(0.75rem + 45px); }
  .od-topbar      { flex-direction: column; align-items: flex-start; }
  .od-actions     { width: 100%; }
  .stat-box       { padding: 1rem; gap: 0.75rem; }
  .stat-box__icon { width: 40px; height: 40px; }
  .stat-box__val  { font-size: 1.6rem; }
  .queue-row__actions { flex-direction: column; }
  .notif-dropdown { right: 0.5rem; width: calc(100vw - 1rem); }
}

@media (max-width: 420px) {
  .stat-box__val { font-size: 1.4rem; }
  .od-topbar__left h1 { font-size: 1.25rem; }
}

/* =====================================================
   DATE-RANGE SLICER
===================================================== */
.dashboard-slicer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.dashboard-slicer__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dashboard-slicer__select {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--smoke);
  border-radius: var(--radius-full);
  padding: 0.55rem 2.2rem 0.55rem 1.1rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(102,8,16,0.05); /* frozen: sidebar kept as-is */
  transition: border-color var(--transition), box-shadow var(--transition);
}

.dashboard-slicer__select:hover,
.dashboard-slicer__select:focus {
  border-color: var(--red-border);
  outline: none;
  box-shadow: var(--shadow-sm);
}

.dashboard-slicer__chevron {
  position: absolute;
  right: 0.75rem;
  width: 14px;
  height: 14px;
  color: var(--ink-light);
  pointer-events: none;
}

.dashboard-slicer__custom {
  display: none;
  align-items: center;
  gap: 0.45rem;
  background: var(--white);
  border: 1.5px solid var(--smoke);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  box-shadow: 0 1px 4px rgba(102,8,16,0.05); /* frozen: sidebar kept as-is */
}

.dashboard-slicer__custom.is-visible { display: inline-flex; }

.dashboard-slicer__custom input[type="date"] {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--light-gray);
  border: 1px solid var(--smoke);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
}

.dashboard-slicer__sep {
  font-size: 0.78rem;
  color: var(--ink-light);
}

.dashboard-slicer__apply {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  background: var(--red);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.4rem 0.95rem;
  transition: background var(--transition), transform var(--transition);
}

.dashboard-slicer__apply:hover {
  background: var(--red-deep);
  transform: translateY(-1px);
}

.dashboard-slicer__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--success);
  background: var(--success-light);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.85rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.dashboard-slicer__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(46,125,50,0.55);
  animation: livePulse 1.8s ease-out infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,125,50,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(46,125,50,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); }
}

@media (max-width: 640px) {
  .dashboard-slicer { width: 100%; }
  .dashboard-slicer__select-wrap,
  .dashboard-slicer__select { width: 100%; }
  .dashboard-slicer__custom { width: 100%; flex-wrap: wrap; justify-content: center; }
}

/* =====================================================
   DASHBOARD CHARTS
===================================================== */

/* Column layout is handled by Bootstrap's .row/.col-* grid in the markup
   (row g-3 / col-12 col-md-6 col-lg-3, etc). This class now only carries
   spacing/gutter tuning. */
.dashboard-charts {
  --bs-gutter-x: 1.1rem;
  --bs-gutter-y: 1.1rem;
}

/* Equal-height chart cards in a row */
.dashboard-charts.row {
  align-items: stretch;
}
.dashboard-charts .col-12,
.dashboard-charts [class*="col-"] {
  display: flex;
}
.dashboard-charts .chart-card {
  flex: 1 1 auto;
  width: 100%;
}

.chart-card {
  background: var(--white);
  border: 1px solid var(--smoke);
  border-radius: 10px;
  padding: 1.3rem 1.35rem 1.35rem;
  box-shadow: 0 1px 4px rgba(102,8,16,0.05); /* frozen: sidebar kept as-is */
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s ease;
  min-height: 0;
  height: 100%; /* stretch to fill its Bootstrap column height */
  width: 100%;
}

.chart-card:hover {
  box-shadow: var(--shadow-sm);
}

.grid-stack-item > .ui-resizable-se::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  border-radius: 0 0 3px 0;
}

.grid-stack-item:hover > .ui-resizable-se,
.grid-stack-item > .ui-resizable-se:hover {
  opacity: 1;
}

.chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.chart-card__head-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.chart-card__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-gray);
  color: var(--ink-mid);
}
.chart-card__icon svg { width: 17px; height: 17px; }

.chart-card__head h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-card__head span {
  display: block;
  font-size: 0.73rem;
  color: var(--ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 0.05rem;
  font-weight: 500;
}

.chart-card canvas,
.chart-card > div[id$="Chart"],
/* The first two Tab 1 charts use a Tab1 suffix; keep their ECharts
   containers sized just like the other chart containers. */
.chart-card > div[id$="ChartTab1"],
.chart-card > .dashboard-chart-container {
  flex: 1;
  width: 100%;
  min-height: 260px;
  max-height: 300px;
}

/* ApexCharts renders its own SVG sizing; let it fill the available card
   height rather than fighting it with !important rules meant for canvas. */
.chart-card .apexcharts-canvas { margin: 0 auto; }

.chart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--dim);
  font-style: italic;
}

/* ── Chart header segmented toggle (e.g. Status / Type switch) ──────── */
.chart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--light-gray);
  border: 1px solid var(--smoke);
  border-radius: var(--radius-full);
  padding: 3px;
  flex-shrink: 0;
}

.chart-toggle__btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-light);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.32rem 0.85rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.chart-toggle__btn:hover { color: var(--ink); }

.chart-toggle__btn.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(102,8,16,0.05); /* frozen: sidebar kept as-is */
}

/* ── Compact dropdown variant (replaces segmented buttons when space
   is tight, e.g. narrow chart-card columns) — never overlaps the
   card title since it stays a fixed, small width. ──────────────── */
.chart-toggle--select {
  background: transparent;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.chart-toggle__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 12px;
  border: 1px solid var(--smoke);
  border-radius: var(--radius-full);
  padding: 0.32rem 1.75rem 0.32rem 0.85rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(102,8,16,0.05); /* frozen: sidebar kept as-is */
  max-width: 108px;
}

.chart-toggle__select:hover { border-color: var(--smoke-dark); }
.chart-toggle__select:focus-visible { outline: 2px solid var(--ink-light); outline-offset: 1px; }

@media (max-width: 400px) {
  .chart-card__head { flex-wrap: wrap; }
  .chart-toggle { width: 100%; justify-content: center; }
}

/* =====================================================
   RESPONSIVE — dashboard charts
===================================================== */

@media (max-width: 768px) {
  .chart-card, .chart-card-top {
    padding: 1.05rem;
    min-height: 300px;
  }
}

@media (max-width: 576px) {
  .chart-card, .chart-card-top {
    padding: 0.9rem;
    min-height: 260px;
  }
  .chart-card canvas,
  .chart-card > div[id$="Chart"] {
    min-height: 220px;
  }
  .chart-card__head { margin-bottom: 0.65rem; }
  .chart-card__head h3 { font-size: 0.9rem; }
}

@media (max-width: 400px) {
  .chart-card, .chart-card-top {
    min-height: 230px;
  }
  .chart-card canvas,
  .chart-card > div[id$="Chart"] {
    min-height: 190px;
  }
}
/* ── Live Monitor button ──────────────────────────────────────── */
.btn-live-monitor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 36px;
    background: #0f172a;
    color: #58a6ff;
    border: 1px solid #30363d;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn-live-monitor:hover {
    background: #1e2d45;
    border-color: #58a6ff;
    color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(88,166,255,.15);
}
.btn-live-monitor svg {
    flex-shrink: 0;
}
.btn-live-monitor__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3fb950;
    display: inline-block;
    animation: lm-btn-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes lm-btn-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

@media (max-width: 480px) {
    .btn-live-monitor span:not(.btn-live-monitor__dot) { display: none; }
    .btn-live-monitor { padding: 0 10px; gap: 0; }
}
/* ════════════════════════════════════════════════════════════════════════
   Analytics Suite — Descriptive / Diagnostic / Predictive / Prescriptive
   KPI + short-text cards, no tables.
   ════════════════════════════════════════════════════════════════════════ */
.analytics-suite {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.4rem;
}

.analytics-group {
  background: var(--white);
  border: 1px solid var(--smoke);
  border-radius: 10px;
  padding: 1.2rem 1.3rem 1.35rem;
  box-shadow: 0 1px 4px rgba(102,8,16,0.05); /* frozen: sidebar kept as-is */
}

.analytics-group__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--smoke);
}

.analytics-group__head h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #1f1f1f);
  margin: 0;
}

.analytics-group__head span {
  font-size: 0.75rem;
  color: var(--ink-light, #7a7a7a);
  font-weight: 500;
}

.analytics-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.analytics-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 100px;
}

.analytics-kpi__val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink, #1f1f1f);
  line-height: 1.1;
}

.analytics-kpi__val--trend-up   { color: var(--success, #2e7d32); }
.analytics-kpi__val--trend-down { color: var(--danger, #c62828); }
.analytics-kpi__val--trend-flat { color: var(--ink-light, #7a7a7a); }

.analytics-kpi__lbl {
  font-size: 0.72rem;
  color: var(--ink-light, #7a7a7a);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.analytics-text-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.analytics-text-item {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink, #1f1f1f);
  margin: 0;
}

.analytics-text-item strong { font-weight: 700; }

.analytics-text-item--muted {
  margin-top: 0.8rem;
  color: var(--ink-light, #7a7a7a);
  font-size: 0.76rem;
}

.analytics-reco-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.analytics-reco {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink, #1f1f1f);
}

.analytics-reco__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.45rem;
}

.analytics-reco--warn .analytics-reco__dot { background: var(--warning, #b3791a); }
.analytics-reco--info .analytics-reco__dot { background: var(--info, #1976d2); }
.analytics-reco--good .analytics-reco__dot { background: var(--success, #2e7d32); }

@media (max-width: 900px) {
  .analytics-suite { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .analytics-kpi-row { gap: 1rem; }
  .analytics-kpi__val { font-size: 1.25rem; }
}
/* ── Dashboard Tabs ─────────────────────────────────────────────────────── */
.od-tabs {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0.15rem;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.od-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: #5a5a5a;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.od-tab:hover {
  color: #660810;
  background: rgba(102, 8, 16, 0.06);
}
.od-tab.is-active {
  background: #fff;
  color: #660810;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.od-tab-panel {
  display: none;
}
.od-tab-panel.is-active {
  display: block;
}

/* Ensure hidden tab panels stay fully collapsed */
.od-tab-panel[hidden] {
  display: none !important;
}
.od-tab-panel.is-active {
  display: block !important;
}

/* ── Service-item category filter bar ───────────────────────────────────── */
.svc-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--white, #fff);
  border: 1px solid var(--smoke, #e8e8e8);
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  box-shadow: 0 1px 3px rgba(102,8,16,0.04);
}
.svc-filter-bar__left,
.svc-filter-bar__right {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.svc-filter-bar__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-light, #7a7a7a);
}
.svc-filter-bar__select {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink, #1f1f1f);
  background: var(--white, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.55rem center / 12px;
  border: 1px solid var(--smoke, #e8e8e8);
  border-radius: 999px;
  padding: 0.35rem 1.7rem 0.35rem 0.85rem;
  cursor: pointer;
  max-width: 220px;
}
.svc-filter-bar__select--sm { max-width: 90px; }
.svc-filter-bar__select:hover { border-color: var(--smoke-dark, #d0d0d0); }
.svc-filter-bar__select:focus-visible { outline: 2px solid rgba(102,8,16,0.35); outline-offset: 1px; }

/* Chart cards — size aligned with admin dashboard */
.dashboard-charts {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.75rem;
}
.chart-card {
  min-height: 0;
  padding: 1rem 1.1rem 0.85rem;
}
.chart-card__head { margin-bottom: 0.45rem; }
.chart-card canvas,
.chart-card > div[id$="Chart"] {
  min-height: 260px;
  max-height: 300px;
}
@media (max-width: 768px) {
  .chart-card, .chart-card-top { min-height: 0; padding: 0.85rem; }
  .chart-card canvas,
  .chart-card > div[id$="Chart"] { min-height: 220px; max-height: 260px; }
}

/* Layout gaps — KPI / filter / charts */
.stats-row {
  margin-bottom: 0.35rem !important;
}
.svc-filter-bar {
  margin-top: 0.15rem !important;
  margin-bottom: 0.35rem !important;
}
.dashboard-charts {
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.35rem !important;
}
.chart-card {
  margin-bottom: 0.15rem !important;
}
.od-tab-panel.is-active {
  padding-bottom: 0.75rem !important;
}
/* ============================================================
   Office dashboard layout overrides (moved from inline PHP)
   KPI cards, tabs + category filter, dual charts, range bar
   ============================================================ */

html, body, *, *::before, *::after {
  font-family: 'Inter', sans-serif !important;
}

.od-wrap {
  padding: 0.85rem 1.15rem 2rem !important;
  gap: 0.75rem !important;
  background: #f5f5f5;
}

.od-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1.15rem !important;
  margin: 0 !important;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 3px rgba(102, 8, 16, 0.04);
}
.od-topbar__eyebrow { display: none !important; }
.od-topbar h1 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  color: #1f1f1f;
}
.od-topbar__left { display: flex; flex-direction: column; gap: 0.15rem; }
.od-topbar__sub { font-size: 0.8rem; color: #7a7a7a; margin: 0; }
.od-topbar__left p::before { display: none !important; }

/* Date range bar */
.od-range-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
}
.od-range-bar__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a7a7a;
}
.od-range-bar__dates {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
}
.od-range-bar__dates input[type="date"] {
  border: none;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
  color: #1f1f1f;
  padding: 0.2rem 0.15rem;
  width: 8rem;
}
.od-range-bar__dates input[type="date"]:focus { outline: none; }
.od-range-bar__arrow { color: #9a9a9a; font-size: 0.85rem; user-select: none; }
.od-range-bar__apply {
  background: #660810;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.od-range-bar__apply:hover { background: #4e060c; }
.od-range-bar__pills { display: inline-flex; gap: 0.3rem; }
.od-range-bar__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a5a5a;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}
.od-range-bar__pill:hover { background: #f3f3f3; color: #1f1f1f; }
.od-range-bar__pill.is-active {
  background: #660810;
  border-color: #660810;
  color: #fff;
}
.od-range-bar__live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #660810;
  padding: 0.25rem 0.55rem;
  background: rgba(102, 8, 16, 0.07);
  border-radius: 999px;
}
.od-range-bar__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #660810;
  animation: od-pulse 1.4s ease-in-out infinite;
}
@keyframes od-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Tabs row + category filter (same pill style as tabs) */
.od-tabs-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 0 0 0.35rem 0 !important;
}
.od-tabs {
  display: inline-flex !important;
  gap: 0.2rem !important;
  padding: 0.2rem !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  width: fit-content;
}
.od-tabs-row .svc-category-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.2rem 0.35rem 0.2rem 0.65rem !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.od-tabs-row .svc-filter-bar__label {
  font-size: 0.72rem !important;
  font-weight: 700;
  color: #7a7a7a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 !important;
  white-space: nowrap;
}
.od-tabs-row .svc-filter-bar__select {
  padding: 0.4rem 1.6rem 0.4rem 0.55rem !important;
  font-size: 0.82rem !important;
  font-weight: 600;
  border: none !important;
  border-radius: 8px;
  background: transparent;
  color: #660810;
  min-height: 0 !important;
  min-width: 130px;
  cursor: pointer;
}
.od-tabs-row .svc-filter-bar__select:focus {
  outline: none;
  background: rgba(102, 8, 16, 0.05);
}
.od-tab {
  border: none !important;
  background: transparent !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #5a5a5a !important;
  border-radius: 8px !important;
  cursor: pointer;
}
.od-tab:hover {
  color: #660810 !important;
  background: rgba(102, 8, 16, 0.05) !important;
}
.od-tab.is-active {
  background: #fff !important;
  color: #660810 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e8e8e8 !important;
}

/* KPI cards — academic, compact, no clipped bottom */
.stats-row {
  margin: 0 0 0.15rem 0 !important;
  --bs-gutter-x: 0.7rem !important;
  --bs-gutter-y: 0.7rem !important;
}
.stats-row > [class*="col-"] {
  display: flex;
}
.stat-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.15rem !important;
  padding: 0.95rem 1.1rem 1.15rem !important; /* extra bottom padding so hint never clips */
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  border-top: 2.5px solid #660810 !important;
  box-shadow: 0 1px 2px rgba(102, 8, 16, 0.035) !important;
  min-height: 108px !important;
  height: 100%;
  width: 100%;
  overflow: visible !important; /* avoid cutting bottom text */
}
.stat-box::before { display: none !important; }
.stat-box__icon { display: none !important; }
.stat-box__body {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  width: 100%;
  overflow: visible;
}
.stat-box__lbl {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b6b6b !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.stat-box__val {
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #660810 !important;
  margin: 0.05rem 0 !important;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.stat-box__hint {
  font-size: 0.72rem;
  color: #8a8a8a;
  line-height: 1.35;
  margin: 0.1rem 0 0;
  padding-bottom: 0.05rem;
}
.stat-box.s-blue,
.stat-box.s-teal,
.stat-box.s-violet,
.stat-box.s-red,
.stat-box.s-gold,
.stat-box.s-purple,
.stat-box.s-amber,
.stat-box.s-green,
.stat-box.s-slate {
  border-top-color: #660810 !important;
  --_accent: #660810 !important;
}
.stat-box.s-blue .stat-box__val,
.stat-box.s-teal .stat-box__val,
.stat-box.s-violet .stat-box__val,
.stat-box.s-red .stat-box__val,
.stat-box.s-gold .stat-box__val,
.stat-box.s-purple .stat-box__val {
  color: #660810 !important;
}

/* Legacy filter bar (kept for any residual markup) */
.svc-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.9rem !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-shadow: none;
}
.svc-filter-bar__left,
.svc-filter-bar__right {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.svc-filter-bar__label {
  font-size: 0.7rem !important;
  font-weight: 700;
  color: #7a7a7a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 !important;
}
.svc-filter-bar__select {
  padding: 0.3rem 1.7rem 0.3rem 0.65rem !important;
  font-size: 0.82rem !important;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #f7f7f7;
  color: #1f1f1f;
  min-height: 0 !important;
}

/* Charts — maroon / white academic look */
.dashboard-charts {
  --bs-gutter-x: 0.7rem !important;
  --bs-gutter-y: 0.7rem !important;
  margin: 0 0 0.35rem 0 !important;
  padding-bottom: 0.2rem !important;
}
.dashboard-charts > [class*="col-"] {
  display: flex;
}
.chart-card {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  padding: 0.95rem 1.05rem 1rem !important;
  box-shadow: 0 1px 2px rgba(102, 8, 16, 0.035) !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chart-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem !important;
  padding-bottom: 0.35rem !important;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.chart-card__head-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chart-card__icon { display: none !important; }
.chart-card__head h3 {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  color: #1f1f1f;
}
.chart-card__head span {
  font-size: 0.72rem !important;
  color: #8a8a8a;
  line-height: 1.25 !important;
}
.chart-card > div[id$="Chart"],
.chart-card-top > div[id$="Chart"],
.chart-card > .dashboard-chart-container,
.chart-card-top > .dashboard-chart-container,
.chart-card canvas {
  min-height: 240px !important;
  height: 260px !important;
  max-height: 280px !important;
  flex: 1 1 auto;
  width: 100%;
}
/* Horizontal bar charts (staff / window) — tighter so bottom isn’t empty/cut */
#staffPerfChart,
#WindowChart {
  min-height: 220px !important;
  height: 240px !important;
  max-height: 260px !important;
}
.chart-toggle__select {
  font-size: 0.75rem !important;
  padding: 0.28rem 1.5rem 0.28rem 0.55rem !important;
  border-radius: 8px;
  border: 1px solid #e2e2e2;
  background: #f7f7f7;
  max-width: 130px;
}

.od-tab-panel { padding: 0 !important; margin: 0 !important; }
.od-tab-panel.is-active {
  display: flex !important;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 1.5rem !important;
}
#tab-staff-demand.is-active {
  padding-bottom: 1.75rem !important;
}

/* Dual bar charts (Completed vs Cancelled / Walk-in vs Appointment) */
.queue-dual-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  min-height: 260px;
}
.queue-dual-charts__pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.queue-dual-charts__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #7a7a7a;
  margin-bottom: 0.25rem;
  text-align: center;
}
#queueStatusBarChart,
#queueTypeBarChart {
  flex: 1;
  min-height: 240px !important;
  height: 260px !important;
}
@media (max-width: 576px) {
  .queue-dual-charts { grid-template-columns: 1fr; }
}

.dashboard-slicer__select-wrap,
.dashboard-slicer__chevron { display: none !important; }

/* ============================================================
   OFFICE DASHBOARD — match Admin System Overview chart/graph style
   (format, sizes, colors, font, gaps, filters only — no content change)
   ============================================================ */

/* Force same font stack feel as admin (Helvetica / system via theme; Inter already forced higher up is ok if site uses it) */
.od-wrap,
.od-wrap * {
  /* keep existing Poppins if already set; admin uses theme font */
}

/* ── Date range / filter bar (match admin uq-slicer look) ── */
.od-range-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  justify-content: flex-end;
}
.od-range-bar__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.od-range-bar__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  min-height: 2.15rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  color: var(--ink-mid, #5a5a5a);
  background: #f8f4f4;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.od-range-bar__pill:hover {
  border-color: #660810;
  color: #660810;
  background: #fff;
}
.od-range-bar__pill.is-active {
  background: #660810;
  color: #fff;
  border-color: #660810;
}
.od-range-bar__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  background: var(--off-white, #f1ebeb);
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
  border: 1px solid #e2e2e2;
}
.od-range-bar__dates input[type="date"] {
  border: none;
  background: transparent;
  font-size: 0.8rem;
  color: var(--ink, #1f1f1f);
  font-family: 'Inter', sans-serif;
  padding: 0.2rem 0.15rem;
  min-width: 8rem;
}
.od-range-bar__apply {
  border: none;
  background: #660810;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  min-height: 2.15rem;
}
.od-range-bar__apply:hover {
  background: #4e060c;
}

/* ── Tabs row (same pill language as admin slicer) ── */
.od-tabs {
  display: inline-flex !important;
  gap: 0.2rem !important;
  padding: 0.2rem !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.od-tab {
  border: none !important;
  background: transparent !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #5a5a5a !important;
  border-radius: 8px !important;
  cursor: pointer;
}
.od-tab:hover {
  color: #660810 !important;
  background: rgba(102, 8, 16, 0.05) !important;
}
.od-tab.is-active {
  background: #fff !important;
  color: #660810 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e8e8e8 !important;
}

/* Category filter next to tabs */
.od-tabs-row .svc-category-filter,
.svc-filter-bar {
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.svc-filter-bar__select,
.od-tabs-row .svc-filter-bar__select {
  font-size: 0.82rem !important;
  font-weight: 600;
  color: #660810;
  border-radius: 8px;
  border: 1px solid #e2e2e2;
  background: #f7f7f7;
  padding: 0.35rem 1.7rem 0.35rem 0.65rem !important;
}

/* ── KPI / stat cards (exact admin so-kpi proportions) ── */
.stats-row {
  --bs-gutter-x: 0.75rem !important;
  --bs-gutter-y: 0.75rem !important;
  margin-bottom: 0.35rem !important;
}
.stat-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.15rem !important;
  padding: 0.85rem 1rem 0.7rem !important;
  min-height: 96px !important;
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-top: 2.5px solid #660810 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(102, 8, 16, 0.035) !important;
  overflow: visible !important;
}
.stat-box::before { display: none !important; }
.stat-box__icon { display: none !important; }
.stat-box__lbl {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--ink-light, #7a7a7a) !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3 !important;
}
.stat-box__val {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #660810 !important;
  letter-spacing: -0.02em;
}
.stat-box__hint {
  font-size: 0.75rem;
  color: #8a8a8a;
  line-height: 1.35;
}

/* ── Chart cards (size + chrome match admin) ── */
.dashboard-charts {
  --bs-gutter-x: 0.75rem !important;
  --bs-gutter-y: 0.75rem !important;
  margin: 0 0 0.5rem 0 !important;
  gap: 0; /* bootstrap gutter handles it */
}
.chart-card {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  padding: 1rem 1.15rem 1.1rem !important;
  box-shadow: 0 1px 2px rgba(102, 8, 16, 0.035) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.chart-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.35rem !important;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.chart-card__head h3 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #1f1f1f;
  line-height: 1.25 !important;
}
.chart-card__head span,
.chart-card__sub {
  font-size: 0.78rem !important;
  color: #8a8a8a;
}
.chart-card canvas,
.chart-card > div[id$="Chart"],
.chart-card > .dashboard-chart-container {
  min-height: 260px !important;
  height: 280px !important;
  max-height: 300px !important;
  width: 100%;
  flex: 1 1 auto;
}
/* Horizontal bars slightly tighter like admin tables */
#staffPerfChart,
#WindowChart {
  min-height: 220px !important;
  height: 240px !important;
  max-height: 260px !important;
}

/* Dual charts gap */
.queue-dual-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  min-height: 260px;
}
@media (max-width: 576px) {
  .queue-dual-charts { grid-template-columns: 1fr; }
}

/* ── Heatmap cells (same levels as admin so-heatmap) ── */
.oo-heatmap,
.so-heatmap {
  display: grid;
  grid-template-columns: 48px repeat(10, 1fr);
  gap: 3px;
  font-size: 0.68rem;
}
.oo-heatmap__cell,
.so-heatmap__cell {
  aspect-ratio: 1.25;
  border-radius: 3px;
  background: #f1ebeb;
}
.oo-heatmap__cell.l1, .so-heatmap__cell.l1 { background: #f0d6d8; }
.oo-heatmap__cell.l2, .so-heatmap__cell.l2 { background: #e0a0a6; }
.oo-heatmap__cell.l3, .so-heatmap__cell.l3 { background: #c45a64; }
.oo-heatmap__cell.l4, .so-heatmap__cell.l4 { background: #8a1220; }

/* ── Card gaps overall ── */
.od-wrap {
  gap: 0.75rem !important;
  padding: 0.85rem 1.15rem 2rem !important;
}
.od-tab-panel.is-active {
  display: flex !important;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 1.5rem !important;
}

/* Status pills / bars already close; keep maroon bars */
.so-bar,
.oo-svc-bar,
.progress-bar-fill {
  background: #660810 !important;
}

/* ============================================================
   Office Overview header + date slicer — match admin-dashboard
   (layout & CSS only; range keys aligned with admin pills)
   ============================================================ */

.so-page-header,
.app-shell .dash-header.dash-header--overview.so-page-header,
.dash-header.so-page-header,
.od-wrap .dash-header.dash-header--overview.so-page-header {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  padding: 1rem 1.35rem !important;
  margin-bottom: 1.1rem !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0.75rem 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Title block stays compact on the left (like admin System Overview) */
.od-wrap .so-page-header .dash-header__left,
.so-page-header .dash-header__left {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 38% !important;
}
.od-wrap .so-page-header .dash-header__right,
.so-page-header .dash-header__right {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
/* Keep slicer on one line; allow mild wrap of pills only if needed */
.od-wrap .uq-slicer,
.uq-slicer {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.45rem 0.65rem !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.od-wrap .uq-slicer__pills,
.uq-slicer__pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.35rem !important;
  align-items: center !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}
.od-wrap .uq-slicer__pill,
.uq-slicer__pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.45rem 0.85rem !important;
  min-height: 2.05rem !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  color: #5a5a5a !important;
  background: #f8f4f4 !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.od-wrap .uq-slicer__pill:hover,
.uq-slicer__pill:hover {
  border-color: #660810 !important;
  color: #660810 !important;
  background: #fff !important;
}
.od-wrap .uq-slicer__pill.is-active,
.uq-slicer__pill.is-active {
  background: #660810 !important;
  color: #fff !important;
  border-color: #660810 !important;
}
.od-wrap .uq-slicer__custom,
.uq-slicer__custom {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.3rem !important;
  background: #f1ebeb !important;
  border-radius: 8px !important;
  padding: 0.3rem 0.5rem !important;
  flex-shrink: 0 !important;
}
.od-wrap .uq-slicer__custom input[type="date"],
.uq-slicer__custom input[type="date"] {
  border: none !important;
  background: transparent !important;
  font-size: 0.78rem !important;
  color: #1f1f1f !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0.15rem 0.1rem !important;
  min-width: 7.25rem !important;
  max-width: 9rem !important;
  box-shadow: none !important;
}
.od-wrap .uq-slicer__apply,
.uq-slicer__apply {
  border: none !important;
  background: #660810 !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  min-height: 2.05rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
/* No live-pulse dot on overview subtitle (admin System Overview has none) */
.od-wrap .so-page-header .dash-header__left p::before,
.so-page-header .dash-header__left p::before {
  display: none !important;
  content: none !important;
}
.so-page-header .dash-header__left h1,
.od-wrap .so-page-header .dash-header__left h1 {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: var(--ink, #1a1a1a) !important;
  margin: 0 0 0.15rem !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
}
.so-page-header .dash-header__left p,
.od-wrap .so-page-header .dash-header__left p {
  font-size: 0.85rem !important;
  color: var(--ink-mid, #666) !important;
  margin: 0 !important;
}
.so-page-header .dash-header__left p::before {
  display: none !important;
}
.od-wrap .dash-header__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* uq-slicer — identical to admin-dashboard.css */
.od-wrap .uq-slicer,
.uq-slicer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  justify-content: flex-end;
}
.od-wrap .uq-slicer__pills,
.uq-slicer__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.od-wrap .uq-slicer__pill,
.uq-slicer__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  min-height: 2.15rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  color: var(--ink-mid, #5a5a5a);
  background: #f8f4f4;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.od-wrap .uq-slicer__pill:hover,
.uq-slicer__pill:hover {
  border-color: #660810;
  color: #660810;
  background: #fff;
}
.od-wrap .uq-slicer__pill.is-active,
.uq-slicer__pill.is-active {
  background: #660810;
  color: #fff;
  border-color: #660810;
}
.od-wrap .uq-slicer__custom,
.uq-slicer__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  background: var(--off-white, #f1ebeb);
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
}
.od-wrap .uq-slicer__lbl,
.uq-slicer__lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-light, #97898a);
}
.od-wrap .uq-slicer__custom input[type=date],
.uq-slicer__custom input[type=date] {
  border: none;
  background: transparent;
  font-size: 0.8rem;
  color: var(--ink, #1f1f1f);
  font-family: 'Inter', sans-serif;
  padding: 0.2rem 0.15rem;
  min-width: 8rem;
}
.od-wrap .uq-slicer__custom input[type=date]:focus,
.uq-slicer__custom input[type=date]:focus {
  outline: none;
}
.od-wrap .uq-slicer__apply,
.uq-slicer__apply {
  border: none;
  background: #660810;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  min-height: 2.15rem;
}
.od-wrap .uq-slicer__apply:hover,
.uq-slicer__apply:hover {
  background: #4a0a10;
}

/* ============================================================
   Health + Heatmap side-by-side (match admin so-grid--health-heatmap)
   ============================================================ */
.oo-grid--health-heatmap,
.so-grid--health-heatmap,
.od-wrap .oo-grid--health-heatmap,
.od-wrap .so-grid--health-heatmap {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important; /* ~40% / ~60% like admin */
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  align-items: stretch !important;
  width: 100% !important;
}
@media (max-width: 1100px) {
  .oo-grid--health-heatmap,
  .so-grid--health-heatmap,
  .od-wrap .oo-grid--health-heatmap,
  .od-wrap .so-grid--health-heatmap {
    grid-template-columns: 1fr !important;
  }
}
.oo-grid--health-heatmap > .oo-card,
.oo-grid--health-heatmap > .so-card,
.so-grid--health-heatmap > .oo-card,
.so-grid--health-heatmap > .so-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.oo-health-card,
.so-health-card {
  padding: 0.85rem 1rem 0.9rem !important;
}
.oo-heatmap-card,
.so-heatmap-card {
  padding: 1.2rem 1.35rem 1.25rem !important;
}

/* Health row 2x2 inside left card */
.oo-health-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  flex: 1 1 auto;
}
.oo-health-item {
  text-align: center;
  background: var(--off-white, #f8f4f4);
  border: 1px solid rgba(39, 7, 7, 0.06);
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
}
.oo-grid--health-heatmap,
.so-grid--health-heatmap,
.od-wrap .oo-grid--health-heatmap,
.od-wrap .so-grid--health-heatmap,
.od-wrap .oo-grid.oo-grid--health-heatmap {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important; /* Health 40% | Heatmap 60% */
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  align-items: stretch !important;
  width: 100% !important;
}
@media (max-width: 1100px) {
  .oo-grid--health-heatmap,
  .so-grid--health-heatmap,
  .od-wrap .oo-grid--health-heatmap,
  .od-wrap .so-grid--health-heatmap,
  .od-wrap .oo-grid.oo-grid--health-heatmap {
    grid-template-columns: 1fr !important;
  }
}
.oo-grid--health-heatmap > .oo-card,
.oo-grid--health-heatmap > .so-card,
.so-grid--health-heatmap > .oo-card,
.so-grid--health-heatmap > .so-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.oo-health-card,
.so-health-card,
.od-wrap .oo-health-card {
  padding: 0.85rem 1rem 0.9rem !important;
  height: 100% !important;
}
.oo-heatmap-card,
.so-heatmap-card,
.od-wrap .oo-heatmap-card {
  padding: 1.2rem 1.35rem 1.25rem !important;
  height: 100% !important;
}

/* Health row 2×2 (same as admin so-health-row) */
.od-wrap .oo-health-row,
.oo-health-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  gap: 0.65rem !important;
  margin-bottom: 0.75rem !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}
.od-wrap .oo-health-item,
.oo-health-item {
  text-align: center !important;
  background: var(--off-white, #f8f4f4) !important;
  border: 1px solid rgba(39, 7, 7, 0.06) !important;
  border-radius: 10px !important;
  padding: 0.75rem 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 3.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.od-wrap .oo-health-item__val,
.oo-health-item__val {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.od-wrap .oo-health-item__lbl,
.oo-health-item__lbl {
  font-size: 0.72rem !important;
  margin-top: 0.25rem !important;
  font-weight: 500 !important;
}
.oo-health-meta,
.so-health-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--ink-mid, #5c4747);
  margin-top: auto;
  padding-top: 0.15rem;
}
.oo-health-meta strong,
.so-health-meta strong {
  color: var(--ink, #270707);
  font-weight: 700;
}

/* Service Demand + Window/Staff — equal 50/50 */
.oo-grid--svc-window,
.od-wrap .oo-grid.oo-grid--svc-window,
.so-grid.oo-grid--svc-window {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  align-items: stretch !important;
  width: 100% !important;
}
@media (max-width: 1100px) {
  .oo-grid--svc-window,
  .od-wrap .oo-grid.oo-grid--svc-window {
    grid-template-columns: 1fr !important;
  }
}
.oo-grid--svc-window > .oo-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* ── Analytics Suite — match admin Campus Analytics Suite ── */
.od-wrap .so-ddpp,
.oo-ddpp.so-ddpp,
.so-ddpp {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  margin-top: 0.65rem !important;
}
@media (max-width: 1100px) {
  .od-wrap .so-ddpp,
  .oo-ddpp.so-ddpp,
  .so-ddpp { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 700px) {
  .od-wrap .so-ddpp,
  .oo-ddpp.so-ddpp,
  .so-ddpp { grid-template-columns: 1fr !important; }
}
.od-wrap .so-ddpp > div,
.oo-ddpp.so-ddpp > div,
.so-ddpp > div {
  background: #faf8f7 !important;
  border: 1px solid rgba(39,7,7,0.08) !important;
  border-radius: 10px !important;
  padding: 0.85rem 0.9rem !important;
  min-height: 0 !important;
}
.od-wrap .so-ddpp-tag,
.so-ddpp-tag {
  display: inline-block !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 999px !important;
  margin-bottom: 0.35rem !important;
}
.so-ddpp-tag.desc { background: #e3f2fd !important; color: #1565c0 !important; }
.so-ddpp-tag.diag { background: #fff3e0 !important; color: #e65100 !important; }
.so-ddpp-tag.pred { background: #f3e5f5 !important; color: #6a1b9a !important; }
.so-ddpp-tag.pres { background: #e8f5e9 !important; color: #2e7d32 !important; }
.od-wrap .so-ddpp-metric,
.so-ddpp-metric {
  display: flex !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  align-items: baseline !important;
  font-size: 0.8rem !important;
  padding: 0.35rem 0 !important;
  border-bottom: 1px solid rgba(39,7,7,0.06) !important;
  color: var(--ink-mid, #5c4747) !important;
}
.od-wrap .so-ddpp-metric:last-child,
.so-ddpp-metric:last-child { border-bottom: none !important; }
.od-wrap .so-ddpp-metric strong,
.so-ddpp-metric strong {
  color: var(--ink, #270707) !important;
  text-align: right !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
}
.od-wrap .so-ddpp-item,
.so-ddpp-item {
  font-size: 0.8rem !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid rgba(39,7,7,0.06) !important;
}
.od-wrap .so-ddpp-item:last-child,
.so-ddpp-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.od-wrap .so-ddpp-item:first-of-type,
.so-ddpp-item:first-of-type { padding-top: 0 !important; }
.od-wrap .so-ddpp-item__title,
.so-ddpp-item__title {
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  color: var(--ink, #270707) !important;
  line-height: 1.3 !important;
}
.od-wrap .so-ddpp-item__detail,
.so-ddpp-item__detail {
  color: var(--ink-mid, #5c4747) !important;
  font-size: 0.76rem !important;
  margin-top: 0.2rem !important;
  line-height: 1.4 !important;
}

/* Hide old question lines if any remain */
.od-wrap .oo-ddpp-question,
.od-wrap .so-ddpp-question { display: none !important; }

/* ============================================================
   Chart / card section gaps — match admin-dashboard exactly
   Admin: so-kpi-row gap 0.75rem + margin-bottom 1.1rem
          so-grid / so-bottom gap 1rem
          dash-wrap section rhythm ~1rem–1.1rem
   ============================================================ */
.od-wrap {
  gap: 0 !important; /* section spacing via margins like admin dash-wrap */
  padding: 1.25rem 1.5rem 2.5rem !important;
}
.od-wrap > .so-page-header,
.od-wrap > .dash-header,
.od-wrap > .oo-card,
.od-wrap > .so-card,
.od-wrap > .oo-grid,
.od-wrap > .so-grid,
.od-wrap > .oo-bottom,
.od-wrap > .so-bottom,
.od-wrap > .stats-row,
.od-wrap > .dashboard-charts,
.od-wrap > .oo-kpi-row,
.od-wrap > [class*="grid"] {
  margin-bottom: 1.1rem !important;
}
.od-wrap > .oo-card:last-child,
.od-wrap > .so-card:last-child {
  margin-bottom: 0.5rem !important;
}

/* KPI / sparkline row — same as admin .so-kpi-row */
.od-wrap .stats-row,
.od-wrap .oo-kpi-row,
.stats-row,
.oo-kpi-row {
  display: grid !important;
  gap: 0.75rem !important;
  margin-bottom: 1.1rem !important;
  --bs-gutter-x: 0.75rem !important;
  --bs-gutter-y: 0.75rem !important;
}

/* Main paired grids + bottom row */
.od-wrap .oo-grid,
.od-wrap .so-grid,
.od-wrap .oo-grid--pair,
.od-wrap .so-grid--pair,
.od-wrap .oo-grid--health-heatmap,
.od-wrap .so-grid--health-heatmap,
.od-wrap .oo-grid--svc-window,
.od-wrap .oo-bottom,
.od-wrap .so-bottom,
.od-wrap .dashboard-charts {
  gap: 1rem !important;
  margin-bottom: 1rem !important;
}
.od-wrap .dashboard-charts {
  --bs-gutter-x: 1rem !important;
  --bs-gutter-y: 1rem !important;
}
.od-wrap .chart-card {
  margin-bottom: 0 !important;
}

/* Chart canvas height parity with admin (office demand uses .oo-demand-chart-wrap) */
.od-wrap .chart-card canvas,
.od-wrap .chart-card > div[id$="Chart"] {
  min-height: 260px !important;
  height: 280px !important;
  max-height: 300px !important;
}

/* ── Office KPIs = admin so-kpi (border + size) ── */
.od-wrap .oo-kpi-row,
.oo-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  margin-bottom: 1.1rem !important;
}
@media (max-width: 1200px) {
  .od-wrap .oo-kpi-row, .oo-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .od-wrap .oo-kpi-row, .oo-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.od-wrap .oo-kpi,
.oo-kpi {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-top: 2.5px solid #660810 !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem 0.7rem !important;
  box-shadow: 0 1px 2px rgba(102, 8, 16, 0.035) !important;
  min-height: 96px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  box-sizing: border-box !important;
}
.od-wrap .oo-kpi__label, .oo-kpi__label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
.od-wrap .oo-kpi__value, .oo-kpi__value {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}
.od-wrap .oo-kpi__spark, .oo-kpi__spark {
  height: 28px !important;
  margin-top: 0.45rem !important;
  width: 100% !important;
}

/* Demand 60% | Insights 40% — match admin */
.od-wrap .oo-grid--demand-insights,
.od-wrap .so-grid--demand-insights,
.oo-grid--demand-insights,
.so-grid--demand-insights {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  align-items: stretch !important;
  width: 100% !important;
}
@media (max-width: 1100px) {
  .od-wrap .oo-grid--demand-insights,
  .oo-grid--demand-insights,
  .so-grid--demand-insights { grid-template-columns: 1fr !important; }
}
.od-wrap .oo-grid--demand-insights > .oo-card,
.oo-grid--demand-insights > .oo-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* ============================================================
   Header → KPI gap — exact admin (1.1rem below header only)
   Admin: .so-page-header { margin-bottom: 1.1rem }
          .so-kpi-row { margin-bottom: 1.1rem; margin-top: 0 }
   ============================================================ */
.od-wrap > header.so-page-header,
.od-wrap > .dash-header.so-page-header,
.od-wrap > .so-page-header,
.app-shell .od-wrap > header.dash-header {
  margin-top: 0 !important;
  margin-bottom: 1.1rem !important;
}
.od-wrap > .oo-kpi-row,
.od-wrap > .stats-row {
  margin-top: 0 !important;
  margin-bottom: 1.1rem !important;
}
/* Kill any flex gap between direct children that would inflate spacing */
.od-wrap {
  gap: 0 !important;
}

/* ═══ FINAL: header→KPI gap = admin 1.1rem (wins all conflicts) ═══ */
.app-shell .od-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.app-shell .od-wrap > header.dash-header.dash-header--overview.so-page-header,
.app-shell .od-wrap > header.so-page-header,
.app-shell .od-wrap > .so-page-header {
  margin-top: 0 !important;
  margin-bottom: 1.1rem !important;
  padding: 1rem 1.35rem !important;
}
.app-shell .od-wrap > .oo-kpi-row {
  margin-top: 0 !important;
  margin-bottom: 1.1rem !important;
}


/* Desktop header: title left, filters right (NOT centered) */
@media (min-width: 901px) {
  .od-wrap > header.so-page-header,
  .od-wrap .so-page-header,
  .app-shell .od-wrap > header.so-page-header {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    justify-content: space-between !important;
  }
  .od-wrap .so-page-header .dash-header__left,
  .od-wrap .so-page-header .dash-header__left h1,
  .od-wrap .so-page-header .dash-header__left p {
    text-align: left !important;
    width: auto !important;
  }
  .od-wrap .dash-header__right,
  .od-wrap .uq-slicer {
    width: auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-direction: row !important;
  }
  .od-wrap .uq-slicer__pills {
    width: auto !important;
    justify-content: flex-end !important;
  }
  .od-wrap .uq-slicer__custom {
    width: auto !important;
    justify-content: flex-start !important;
  }
  .od-wrap .uq-slicer__apply {
    width: auto !important;
  }
}

/* ============================================================
   HEADER responsive (mobile) — match admin dash-header stacking
   Title on top, slicer full-width below, pills + dates wrap
   ============================================================ */
@media (max-width: 900px) {
  .od-wrap > header.so-page-header,
  .od-wrap > .dash-header.so-page-header,
  .od-wrap .so-page-header,
  .app-shell .od-wrap > header.dash-header.dash-header--overview.so-page-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 0.85rem !important;
    padding: 0.9rem 1rem !important;
  }
  .od-wrap .so-page-header .dash-header__left,
  .od-wrap .dash-header__left {
    width: 100% !important;
    text-align: center !important;
  }
  .od-wrap .so-page-header .dash-header__left h1 {
    font-size: 1.25rem !important;
    text-align: center !important;
  }
  .od-wrap .so-page-header .dash-header__left p {
    text-align: center !important;
  }
  .od-wrap .so-page-header .dash-header__right,
  .od-wrap .dash-header__right {
    width: 100% !important;
    justify-content: center !important;
  }
  .od-wrap .uq-slicer,
  .uq-slicer {
    width: 100% !important;
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.65rem !important;
  }
  .od-wrap .uq-slicer__pills,
  .uq-slicer__pills {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.4rem !important;
  }
  .od-wrap .uq-slicer__pill,
  .uq-slicer__pill {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.75rem !important;
    min-height: 2rem !important;
  }
  .od-wrap .uq-slicer__custom,
  .uq-slicer__custom {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    padding: 0.45rem 0.55rem !important;
  }
  .od-wrap .uq-slicer__custom input[type=date],
  .uq-slicer__custom input[type=date] {
    min-width: 0 !important;
    flex: 1 1 7rem !important;
    max-width: 100% !important;
  }
  .od-wrap .uq-slicer__apply,
  .uq-slicer__apply {
    width: 100% !important;
    min-height: 2.25rem !important;
  }
}

@media (max-width: 600px) {
  .od-wrap > header.so-page-header,
  .od-wrap .so-page-header {
    padding: 0.85rem 0.9rem !important;
  }
  .od-wrap .so-page-header .dash-header__left h1 {
    font-size: 1.15rem !important;
  }
  .od-wrap .uq-slicer__pill {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.72rem !important;
  }
}

/* Chart section vertical gaps = admin (1rem only, no double margin) */
.od-wrap > .oo-grid.oo-grid--health-heatmap,
.od-wrap > .so-grid.so-grid--health-heatmap,
.od-wrap .oo-grid--health-heatmap,
.od-wrap .so-grid--health-heatmap {
  margin-bottom: 1rem !important;
  margin-top: 0 !important;
  gap: 1rem !important;
}
.od-wrap > .oo-bottom,
.od-wrap .oo-bottom,
.oo-bottom {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  align-items: stretch !important;
}
@media (max-width: 1000px) {
  .od-wrap > .oo-bottom,
  .od-wrap .oo-bottom,
  .oo-bottom {
    grid-template-columns: 1fr !important;
  }
}
/* Kill the broader 1.1rem on these so they stay 1rem like admin */
.od-wrap > .oo-grid.oo-grid--health-heatmap,
.od-wrap > .oo-bottom {
  margin-bottom: 1rem !important;
}

/* ═══ FINAL: Office Overview header = admin System Overview (1 row) ═══ */
@media (min-width: 901px) {
  .od-wrap > header.so-page-header,
  .od-wrap .so-page-header,
  .app-shell .od-wrap > header.so-page-header,
  .app-shell .od-wrap > header.dash-header.dash-header--overview.so-page-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
  }
  .od-wrap .so-page-header .dash-header__left {
    max-width: 36% !important;
    flex: 0 1 auto !important;
    text-align: left !important;
  }
  .od-wrap .so-page-header .dash-header__left h1,
  .od-wrap .so-page-header .dash-header__left p {
    text-align: left !important;
    width: auto !important;
  }
  .od-wrap .so-page-header .dash-header__right {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }
  .od-wrap .uq-slicer {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
  .od-wrap .uq-slicer__pills {
    flex-wrap: nowrap !important;
  }
}
@media (max-width: 1100px) and (min-width: 901px) {
  /* Slightly tighter pills when sidebar eats width */
  .od-wrap .uq-slicer__pill { padding: 0.4rem 0.65rem !important; font-size: 0.74rem !important; }
  .od-wrap .uq-slicer__custom input[type="date"] { min-width: 6.5rem !important; max-width: 8rem !important; }
  .od-wrap .so-page-header .dash-header__left { max-width: 32% !important; }
}

/* ============================================================
   MOVED FROM office-dashboard.php inline <style> blocks
   (Office Overview redesign + HEADER_KPI_GAP_FORCE)
   Keep at end so cascade matches previous inline order.
   ============================================================ */

/* ── Office Overview redesign ───────────────────────────────────────── */
.od-wrap { padding: 1.25rem 1.5rem 2.5rem; max-width: 100%; }
.od-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.od-topbar h1 { font-size: 1.4rem; font-weight: 700; color: var(--ink, #270707); margin: 0 0 0.2rem; }
.od-topbar__sub { font-size: 0.85rem; color: var(--ink-mid, #5c4747); margin: 0; }

/* KPI row — exact match admin .so-kpi-row / .so-kpi */
.oo-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
@media (max-width: 1200px) { .oo-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .oo-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.oo-kpi {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-top: 2.5px solid #660810;
  border-radius: 10px;
  padding: 0.85rem 1rem 0.7rem;
  box-shadow: 0 1px 2px rgba(102, 8, 16, 0.035);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  box-sizing: border-box;
}
.oo-kpi__label { font-size: 0.72rem; font-weight: 600; color: var(--ink-light, #97898a); text-transform: uppercase; letter-spacing: 0.03em; }
.oo-kpi__value { font-size: 1.45rem; font-weight: 700; color: var(--ink, #270707); line-height: 1.15; }
.oo-kpi__trend { font-size: 0.75rem; font-weight: 600; color: var(--ink-mid, #5c4747); display: flex; align-items: center; gap: 0.25rem; }
.oo-kpi__trend.up { color: #2e7d32; }
.oo-kpi__trend.down { color: #c62828; }
.oo-kpi__trend.warn { color: #f9a825; }
.oo-kpi__spark { height: 28px; margin-top: 0.45rem; width: 100%; }
.oo-kpi__spark .uq-spark { width: 100%; height: 28px; display: block; }

/* Demand (60%) | Insights (40%) — match admin so-grid--demand-insights */
.oo-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: stretch;
}
/* Health (40%) | Heatmap (60%) — match admin so-grid--health-heatmap */
.oo-grid.oo-grid--health-heatmap,
.oo-grid.so-grid--health-heatmap,
.so-grid.so-grid--health-heatmap {
  grid-template-columns: 1fr 1.5fr !important;
  align-items: center !important;
}
.oo-grid.oo-grid--health-heatmap > .oo-card,
.so-grid--health-heatmap > .oo-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}
@media (max-width: 1100px) {
  .oo-grid { grid-template-columns: 1fr; }
  .oo-grid.oo-grid--health-heatmap,
  .so-grid--health-heatmap { grid-template-columns: 1fr !important; }
}
.oo-grid.oo-grid--svc-window {
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
}
.oo-grid.oo-grid--svc-window > .oo-card {
  height: 100% !important;
  margin: 0 !important;
}

.oo-card {
  background: #fff;
  border: 1px solid var(--border, rgba(39,7,7,0.12));
  border-radius: 12px;
  padding: 1rem 1.1rem 1.05rem;
  box-shadow: 0 1px 2px rgba(20,10,10,0.05);
}
.oo-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}
.oo-card__head h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #270707);
  margin: 0;
}
.oo-card__sub { font-size: 0.76rem; color: var(--ink-mid, #5c4747); }

.oo-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.oo-chip {
  background: var(--off-white, #f1ebeb);
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.76rem;
  color: var(--ink, #270707);
}
.oo-chip strong { font-weight: 700; }

.oo-insight {
  display: flex;
  gap: 0.55rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border, rgba(39,7,7,0.12));
  font-size: 0.84rem;
  color: var(--ink, #270707);
  align-items: flex-start;
}
.oo-insight:last-child { border-bottom: none; }
.oo-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 0.35rem; flex-shrink: 0; }
.oo-dot.amber { background: #f9a825; }
.oo-dot.red { background: #c62828; }
.oo-dot.green { background: #2e7d32; }

/* Service Demand preview card (Overview tab) */
.so-svc-demand-list { display: flex; flex-direction: column; }
.so-svc-demand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border, rgba(39,7,7,0.12));
  font-size: 0.84rem;
}
.so-svc-demand-row:last-child { border-bottom: none; }
.so-svc-demand-row__name { color: var(--ink, #270707); font-weight: 600; }
.so-svc-demand-row__count {
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #8a3030;
  background: #fff6f6;
  border: 1px solid #d8b9b9;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.so-svc-demand-card__foot { margin-top: 0.75rem; text-align: right; }

.oo-health-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  flex: 1 1 auto;
  width: 100%;
}
.oo-health-item {
  text-align: center;
  background: var(--off-white, #f1ebeb);
  border: 1px solid rgba(39, 7, 7, 0.06);
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  box-sizing: border-box;
}
.oo-health-item__val { font-size: 1.25rem; font-weight: 700; color: var(--ink, #270707); line-height: 1.2; }
.oo-health-item__lbl { font-size: 0.72rem; color: var(--ink-mid, #5c4747); margin-top: 0.25rem; font-weight: 500; }
.oo-health-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--ink-mid, #5c4747);
  margin-top: auto;
  padding-top: 0.15rem;
}
.oo-health-meta strong { color: var(--ink, #270707); font-weight: 700; }

.oo-win-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.oo-win-table th { text-align: left; font-weight: 600; color: var(--ink-light, #97898a); padding: 0.3rem 0.35rem; border-bottom: 1px solid var(--border, rgba(39,7,7,0.12)); }
.oo-win-table td { padding: 0.4rem 0.35rem; border-bottom: 1px solid var(--border, rgba(39,7,7,0.12)); }
.oo-status-pill {
  display: inline-block; font-size: 0.68rem; font-weight: 600;
  padding: 0.12rem 0.4rem; border-radius: 999px;
}
.oo-status-pill.good { background: #e8f5e9; color: #2e7d32; }
.oo-status-pill.warn { background: #fff8e1; color: #f9a825; }
.oo-status-pill.bad  { background: #ffebee; color: #c62828; }

.oo-heatmap {
  display: grid;
  grid-template-columns: 42px repeat(10, 1fr);
  gap: 3px;
  font-size: 0.65rem;
}
.oo-heatmap__cell { aspect-ratio: 1.35; border-radius: 3px; background: #f1ebeb; }
.oo-heatmap__cell.l1 { background: #f0d6d8; }
.oo-heatmap__cell.l2 { background: #e0a0a6; }
.oo-heatmap__cell.l3 { background: #c45a64; }
.oo-heatmap__cell.l4 { background: #8a1220; }
.oo-heatmap__label { display: flex; align-items: center; color: var(--ink-mid, #5c4747); font-weight: 600; }
.oo-heatmap-legend {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin-top: 0.65rem; font-size: 0.7rem; color: var(--ink-mid, #5c4747);
}
.oo-heatmap-legend__swatch {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  background: #f1ebeb;
}
.oo-heatmap-legend__swatch.l1 { background: #f0d6d8; }
.oo-heatmap-legend__swatch.l2 { background: #e0a0a6; }
.oo-heatmap-legend__swatch.l3 { background: #c45a64; }
.oo-heatmap-legend__swatch.l4 { background: #8a1220; }
.oo-heatmap-legend__item { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.35rem; }

.oo-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  align-items: stretch;
}
@media (max-width: 1000px) { .oo-bottom { grid-template-columns: 1fr; } }

.oo-list { list-style: none; padding: 0; margin: 0; }
.oo-list li {
  display: flex; gap: 0.5rem; padding: 0.42rem 0;
  border-bottom: 1px solid var(--border, rgba(39,7,7,0.12));
  font-size: 0.82rem; color: var(--ink, #270707); align-items: flex-start;
}
.oo-list li:last-child { border-bottom: none; }
.oo-prio {
  font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 4px; flex-shrink: 0;
}
.oo-prio.high { background: #ffebee; color: #c62828; }
.oo-prio.medium { background: #fff8e1; color: #f57f17; }
.oo-prio.low, .oo-prio.info, .oo-prio.good { background: #e8f5e9; color: #2e7d32; }

.oo-wa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.oo-wa-box { background: var(--off-white, #f1ebeb); border-radius: 10px; padding: 0.65rem 0.8rem; }
.oo-wa-box h4 { font-size: 0.78rem; margin: 0 0 0.35rem; color: var(--ink, #270707); }
.oo-wa-metric { font-size: 0.76rem; color: var(--ink-mid, #5c4747); display: flex; justify-content: space-between; margin: 0.18rem 0; }
.oo-wa-metric strong { color: var(--ink, #270707); }
.oo-conclusion {
  margin-top: 0.55rem; font-size: 0.78rem; font-weight: 600; color: #2e7d32;
  background: #e8f5e9; padding: 0.35rem 0.6rem; border-radius: 8px;
}
/* Analytics Suite — same as admin Campus Analytics Suite (so-ddpp + oo-ddpp) */
.oo-ddpp,
.so-ddpp,
.oo-ddpp.so-ddpp {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  margin: 0.65rem 0 0 !important;
}
@media (max-width: 1100px) {
  .oo-ddpp, .so-ddpp, .oo-ddpp.so-ddpp { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 700px) {
  .oo-ddpp, .so-ddpp, .oo-ddpp.so-ddpp { grid-template-columns: 1fr !important; }
}
.oo-ddpp > div,
.so-ddpp > div {
  background: #faf8f7 !important;
  border: 1px solid rgba(39,7,7,0.08) !important;
  border-radius: 10px !important;
  padding: 0.85rem 0.9rem !important;
  min-height: 0 !important;
}
.oo-ddpp-card__tag,
.so-ddpp-tag {
  display: inline-block !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 999px !important;
  margin-bottom: 0.45rem !important;
}
.oo-ddpp-card__tag.desc, .so-ddpp-tag.desc { background: #e3f2fd !important; color: #1565c0 !important; }
.oo-ddpp-card__tag.diag, .so-ddpp-tag.diag { background: #fff3e0 !important; color: #e65100 !important; }
.oo-ddpp-card__tag.pred, .so-ddpp-tag.pred { background: #f3e5f5 !important; color: #6a1b9a !important; }
.oo-ddpp-card__tag.pres, .so-ddpp-tag.pres { background: #e8f5e9 !important; color: #2e7d32 !important; }
.oo-ddpp-question, .so-ddpp-question { display: none !important; }
.oo-ddpp-metric,
.so-ddpp-metric {
  display: flex !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  align-items: baseline !important;
  font-size: 0.8rem !important;
  padding: 0.35rem 0 !important;
  border-bottom: 1px solid rgba(39,7,7,0.06) !important;
  color: var(--ink-mid, #5c4747) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.oo-ddpp-metric:last-child,
.so-ddpp-metric:last-child { border-bottom: none !important; }
.oo-ddpp-metric > span,
.so-ddpp-metric > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.oo-ddpp-metric strong,
.so-ddpp-metric strong {
  color: var(--ink, #270707) !important;
  font-weight: 700 !important;
  text-align: right !important;
  font-size: 0.88rem !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin-left: 0.5rem !important;
}
.oo-ddpp-item,
.so-ddpp-item {
  font-size: 0.8rem !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid rgba(39,7,7,0.06) !important;
  color: var(--ink, #270707) !important;
}
.oo-ddpp-item:last-child,
.so-ddpp-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.oo-ddpp-item:first-of-type,
.so-ddpp-item:first-of-type { padding-top: 0 !important; }
.oo-ddpp-item__title,
.so-ddpp-item__title {
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  color: var(--ink, #270707) !important;
}
.oo-ddpp-item__detail,
.so-ddpp-item__detail {
  color: var(--ink-mid, #5c4747) !important;
  font-size: 0.76rem !important;
  margin-top: 0.2rem !important;
  line-height: 1.4 !important;
}

.oo-svc-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(60px, 1fr) 36px;
  align-items: center;
  gap: 0.5rem;
  margin: 0.45rem 0;
  font-size: 0.8rem;
}
.oo-svc-bar-wrap { background: #f5f0ef; border-radius: 4px; height: 8px; overflow: hidden; min-width: 40px; }
.oo-svc-bar { height: 100%; background: #660810; border-radius: 4px; }
.oo-svc-filter {
  display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; margin: 0;
}
.oo-svc-filter label {
  font-size: 0.72rem; color: var(--ink-mid, #5c4747); font-weight: 600;
  white-space: nowrap;
}
.oo-svc-filter select {
  font-size: 0.75rem; padding: 0.22rem 0.45rem; border-radius: 6px;
  border: 1px solid rgba(39,7,7,0.15); background: #fff; color: var(--ink, #270707);
  max-width: 160px;
}
.oo-svc-name {
  min-width: 0;
  line-height: 1.25;
  color: var(--ink, #270707);
  word-break: break-word;
  white-space: normal;
}
.oo-svc-count {
  width: 36px; text-align: right; font-weight: 600; flex-shrink: 0;
}
.oo-svc-empty { font-size: 0.85rem; color: var(--ink-mid); margin: 0.4rem 0 0; }

/* --- second inline block (HEADER_KPI_GAP_FORCE / slicer / responsive) --- */

/* HEADER_KPI_GAP_FORCE — exact admin 1.1rem, no extra gap */
.od-wrap { gap: 0 !important; }
.od-wrap > header.so-page-header,
.od-wrap > .dash-header.so-page-header,
.od-wrap > header.dash-header {
  margin-top: 0 !important;
  margin-bottom: 1.1rem !important;
}
.od-wrap > .oo-kpi-row {
  margin-top: 0 !important;
  margin-bottom: 1.1rem !important;
}
        /* HEADER responsive — mobile ONLY (center + stack). Desktop stays left/right. */
        @media (max-width: 900px) {
            .od-wrap > header.so-page-header,
            .od-wrap > .dash-header.so-page-header,
            .dash-header.so-page-header {
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                gap: 0.85rem !important;
            }
            .od-wrap .dash-header__left,
            .od-wrap .dash-header__left h1,
            .od-wrap .dash-header__left p {
                text-align: center !important;
                width: 100% !important;
            }
            .od-wrap .dash-header__right,
            .od-wrap .uq-slicer {
                width: 100% !important;
                justify-content: center !important;
                align-items: center !important;
            }
            .od-wrap .uq-slicer {
                flex-direction: column !important;
                align-items: center !important;
                gap: 0.65rem !important;
            }
            .od-wrap .uq-slicer__pills {
                width: 100% !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                gap: 0.4rem !important;
            }
            .od-wrap .uq-slicer__custom {
                width: 100% !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
            }
            .od-wrap .uq-slicer__apply {
                width: 100% !important;
            }
        }

        /* Header → KPI gap = admin (so-page-header margin-bottom 1.1rem only) */
        .od-wrap > .so-page-header,
        .od-wrap > header.so-page-header,
        .od-wrap > .dash-header.so-page-header {
            margin-bottom: 1.1rem !important;
            margin-top: 0 !important;
        }
        .od-wrap > .oo-kpi-row {
            margin-top: 0 !important;
            margin-bottom: 1.1rem !important;
        }
        /* Match admin System Overview header — title left, filters right, one row */
        .so-page-header,
        .dash-header.so-page-header,
        .dash-header.dash-header--overview.so-page-header {
            background: #fff !important;
            border: 1px solid #e5e5e5 !important;
            border-radius: 12px !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
            padding: 1rem 1.35rem !important;
            margin-bottom: 1.1rem !important;
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            justify-content: space-between !important;
            align-items: center !important;
            gap: 0.75rem 1rem !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        .so-page-header .dash-header__left {
            flex: 0 1 auto !important;
            max-width: 38% !important;
            min-width: 0 !important;
        }
        .so-page-header .dash-header__left h1 {
            font-size: 1.45rem !important;
            font-weight: 700 !important;
            color: var(--ink, #1a1a1a) !important;
            margin: 0 0 0.15rem !important;
            text-align: left !important;
        }
        .so-page-header .dash-header__left p {
            font-size: 0.85rem !important;
            color: var(--ink-mid, #666) !important;
            margin: 0 !important;
            text-align: left !important;
        }
        .so-page-header .dash-header__left p::before {
            display: none !important;
            content: none !important;
        }
        .dash-header__right {
            display: flex !important;
            flex: 1 1 auto !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 0.5rem !important;
            min-width: 0 !important;
        }
        .uq-slicer {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            gap: 0.45rem 0.65rem !important;
            justify-content: flex-end !important;
            margin: 0 !important;
            min-width: 0 !important;
        }
        .uq-slicer__pills {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 0.35rem !important;
            align-items: center !important;
        }
        .uq-slicer__pill {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0.45rem 0.85rem !important;
            min-height: 2.05rem !important;
            border-radius: 8px !important;
            font-size: 0.78rem !important;
            font-weight: 600 !important;
            text-decoration: none !important;
            line-height: 1.2 !important;
            color: var(--ink-mid, #5a5a5a) !important;
            background: #f8f4f4 !important;
            border: 1px solid transparent !important;
            white-space: nowrap !important;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
        }
        .uq-slicer__pill:hover {
            border-color: #660810 !important;
            color: #660810 !important;
            background: #fff !important;
        }
        .uq-slicer__pill.is-active {
            background: #660810 !important;
            color: #fff !important;
            border-color: #660810 !important;
        }
        .uq-slicer__custom {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            gap: 0.3rem !important;
            background: var(--off-white, #f1ebeb) !important;
            border-radius: 8px !important;
            padding: 0.3rem 0.5rem !important;
            flex-shrink: 0 !important;
        }
        .uq-slicer__lbl {
            font-size: 0.7rem !important;
            font-weight: 600 !important;
            color: var(--ink-light, #97898a) !important;
            margin: 0 !important;
        }
        .uq-slicer__custom input[type=date] {
            border: none !important;
            background: transparent !important;
            font-size: 0.78rem !important;
            color: var(--ink, #1f1f1f) !important;
            font-family: 'Inter', sans-serif !important;
            padding: 0.15rem 0.1rem !important;
            min-width: 7.25rem !important;
            max-width: 9rem !important;
        }
        .uq-slicer__custom input[type=date]:focus { outline: none !important; }
        .uq-slicer__apply {
            border: none !important;
            background: #660810 !important;
            color: #fff !important;
            font-size: 0.78rem !important;
            font-weight: 600 !important;
            padding: 0.45rem 0.85rem !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            min-height: 2.05rem !important;
            white-space: nowrap !important;
        }
        .uq-slicer__apply:hover { background: #4a0a10 !important; }
        @media (min-width: 901px) {
            .so-page-header,
            .dash-header.so-page-header {
                flex-direction: row !important;
                flex-wrap: nowrap !important;
            }
            .dash-header__left { max-width: 36% !important; }
        }
        @media (max-width: 1100px) and (min-width: 901px) {
            .uq-slicer__pill { padding: 0.4rem 0.65rem !important; font-size: 0.74rem !important; }
            .uq-slicer__custom input[type=date] { min-width: 6.5rem !important; max-width: 8rem !important; }
            .dash-header__left { max-width: 32% !important; }
        }

/* ============================================================
   Office Demand chart — room for line + bottom legend inside card
   ============================================================ */
.oo-demand-chart-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  min-height: 280px;
  max-height: 300px;
  flex: 1 1 auto;
  margin-top: 0.35rem;
  overflow: hidden;
}
.oo-demand-chart-wrap canvas,
.od-wrap #chartOfficeDemand,
#chartOfficeDemand {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block;
}
.oo-grid--demand-insights > .oo-card:first-child,
.od-wrap .oo-grid--demand-insights > .oo-card:first-child {
  overflow: hidden;
}

/* ============================================================
   Bottom row + Analytics Suite — same 1rem gap as other charts
   ============================================================ */
.od-wrap > .oo-bottom,
.od-wrap .oo-bottom,
.oo-bottom {
  gap: 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}
.od-wrap > .oo-analytics-suite,
.od-wrap .oo-analytics-suite,
.oo-analytics-suite {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

/* ==========================================================================
   Unavailable Service Demand (Overview card)
   Plain 3-column table: Service / Choice / Demand. No chart and no date
   filter -- this card always shows all-time demand so nothing is hidden by
   the active range pill. Choice values are whatever each office configured
   for the item; services without choices show a dash.
   ========================================================================== */
.oo-usd-card { margin-top: 1.25rem; }

.oo-usd-table-wrap { overflow-x: auto; }

.oo-usd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.oo-usd-table th,
.oo-usd-table td {
  padding: 0.5rem 0.65rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #f0ebea;
}
.oo-usd-table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b6864;
  background: #faf7f7;
  border-bottom: 1px solid #ece7e6;
  white-space: nowrap;
}
.oo-usd-table td.num,
.oo-usd-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.oo-usd-table td.num { font-weight: 600; }
.oo-usd-table td.muted { color: #9b9793; }

/* Service cell spans its choice rows, so the name is not repeated. */
.oo-usd-table td.svc {
  font-weight: 600;
  border-right: 1px solid #f0ebea;
  white-space: normal;
}
.oo-usd-table td.svc .svc-total {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 500;
  color: #9b9793;
  font-variant-numeric: tabular-nums;
}
.oo-usd-table tr.is-group-start td { border-top: 1px solid #ece7e6; }
.oo-usd-table tbody tr:hover td { background: #fdfbfb; }

.oo-usd-table tfoot th {
  padding: 0.55rem 0.65rem;
  font-size: 0.75rem;
  background: #faf7f7;
  border-top: 1px solid #ece7e6;
  border-bottom: none;
}

.oo-usd-tag {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
}
.oo-usd-tag.restored { background: #e8f1ec; color: #2f7d53; }

.oo-usd-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #660810;
  text-decoration: none;
}
.oo-usd-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Unavailable Service Demand — category filter
   Mirrors .oo-svc-filter on the Service Item Demand card so both cards read
   the same, but the select sits on its own line under the card subtitle.
   --------------------------------------------------------------------------- */
.oo-usd-card .oo-card__head { flex-wrap: wrap; row-gap: 0.4rem; }

.oo-usd-filter {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.oo-usd-filter label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-mid, #666);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.oo-usd-filter select {
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(20, 20, 20, 0.16);
  border-radius: 8px;
  background: #fff;
  font-size: 0.78rem;
  color: var(--ink, #1f2328);
  cursor: pointer;
}

.oo-usd-filter select:focus {
  outline: none;
  border-color: var(--red, #7b2b2b);
  box-shadow: 0 0 0 3px rgba(122, 43, 43, 0.12);
}

@media (max-width: 640px) {
  .oo-usd-filter { margin-left: 0; flex-basis: 100%; }
  .oo-usd-filter select { flex: 1 1 auto; }
}

/* Hide the Choice column when no visible unavailable service has choices. */
.oo-usd-table.no-choice .usd-choice { display: none; }

/* ==========================================================================
   Bottom rows — two equal 50% columns
   Row 1: Service Item Demand + Unavailable Service Demand
   Row 2: Walk-in vs Appointment + Recommended Actions
   ========================================================================== */
.od-wrap > .oo-bottom.oo-bottom--pair,
.od-wrap .oo-bottom.oo-bottom--pair,
.oo-bottom.oo-bottom--pair {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 1rem !important;
  align-items: stretch !important;
}
.oo-bottom.oo-bottom--pair > .oo-card { min-width: 0; }
.oo-bottom.oo-bottom--pair > .oo-usd-card { margin-top: 0 !important; }
@media (max-width: 1000px) {
  .od-wrap > .oo-bottom.oo-bottom--pair,
  .od-wrap .oo-bottom.oo-bottom--pair,
  .oo-bottom.oo-bottom--pair {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Unavailable Service Demand — progress-bar list
   Mirrors the Service Item Demand card: one bar per unavailable service,
   with indented, lighter bars for each unavailable choice underneath.
   ========================================================================== */
.oo-usd-bar-row .oo-svc-name { font-weight: 600; }
.oo-usd-choice-row { margin: 0.25rem 0 0.25rem 0; }
.oo-usd-choice-name {
  padding-left: 0.85rem;
  position: relative;
  color: var(--ink-mid, #5c4747);
  font-size: 0.76rem;
}
.oo-usd-choice-name::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.4rem;
  height: 1px;
  background: #d8cfcd;
}
.oo-svc-bar.is-choice { background: #b57279; }
.oo-usd-choice-row .oo-svc-bar-wrap { height: 6px; }
.oo-usd-choice-row .oo-svc-count { font-weight: 500; color: var(--ink-mid, #5c4747); }

/* ── Overview cards: Measure / Metric / KPI (compact, full-width) ── */
.od-wrap > .oo-kpi-row.oo-kpi-row--5,
.oo-kpi-row.oo-kpi-row--5 {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  width: 100% !important;
  margin-bottom: 1.1rem !important;
}
@media (max-width: 1200px) {
  .oo-kpi-row.oo-kpi-row--5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .oo-kpi-row.oo-kpi-row--5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.oo-kpi-row--5 .oo-kpi {
  padding: 0.75rem 0.9rem !important;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}

.oo-kpi__type {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
  opacity: 0.9;
}
.oo-kpi--measure .oo-kpi__type { color: #5c6bc0; }
.oo-kpi--metric  .oo-kpi__type { color: #e65100; }
.oo-kpi--kpi     .oo-kpi__type { color: #660810; }

.oo-kpi-row--5 .oo-kpi__label {
  font-size: 0.68rem !important;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oo-kpi-row--5 .oo-kpi__value {
  font-size: 1.35rem !important;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.1rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oo-kpi-row--5 .oo-kpi__trend {
  font-size: 0.68rem !important;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.15rem;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.15rem;
  white-space: normal;
  word-break: break-word;
}

.oo-kpi__arrow {
  font-weight: 700;
  margin-right: 0.1rem;
  flex-shrink: 0;
}
.oo-kpi__trend.up .oo-kpi__arrow { color: #2e7d32; }
.oo-kpi__trend.down .oo-kpi__arrow { color: #c62828; }

/* Hide sparklines */
.oo-kpi__spark { display: none !important; height: 0 !important; margin: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   KPI cards — Completion Rate: no progress bar
   Colored arrows + % (good / bad / no CSM). Open → office-reports (no modal).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide any leftover quality progress bar if still rendered elsewhere in KPIs */
.oo-kpi .uq-quality-compact--kpi,
.oo-kpi .uq-quality-compact--kpi .uq-quality-bar,
.oo-kpi--kpi .uq-quality-compact,
.oo-kpi--kpi .uq-quality-bar,
.oo-kpi .uq-quality-view {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Value + small open arrow (links to office-reports) */
.oo-kpi__value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}
.oo-kpi__value-row .oo-kpi__value {
  margin: 0.1rem 0 0;
  min-width: 0;
}
.oo-kpi__open {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  color: #660810;
  text-decoration: none;
  background: rgba(102, 8, 16, 0.06);
  transition: background 0.15s ease, color 0.15s ease;
}
.oo-kpi__open:hover {
  background: rgba(102, 8, 16, 0.12);
  color: #3d0508;
}

/* CSM quality shares: green ↑ / red ↓ / black → + percentage */
.oo-kpi__csm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.oo-kpi__csm-item {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  white-space: nowrap;
}
.oo-kpi__csm-arrow {
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}
.oo-kpi__csm-item.is-good {
  color: #2e7d32;
}
.oo-kpi__csm-item.is-bad {
  color: #c62828;
}
.oo-kpi__csm-item.is-none {
  color: #212121;
}

/* Stronger, clearer trend arrows (green / red / neutral black) */
.oo-kpi-row--5 .oo-kpi__trend {
  font-size: 0.7rem !important;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 0.2rem;
  gap: 0.2rem;
}
.oo-kpi__arrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  margin-right: 0.15rem;
  vertical-align: -0.05em;
}
.oo-kpi__trend.up {
  color: #1b5e20 !important;
}
.oo-kpi__trend.up .oo-kpi__arrow {
  color: #2e7d32 !important;
}
.oo-kpi__trend.down {
  color: #b71c1c !important;
}
.oo-kpi__trend.down .oo-kpi__arrow {
  color: #c62828 !important;
}
.oo-kpi__trend:not(.up):not(.down) {
  color: #3d3d3d !important;
}
.oo-kpi__trend:not(.up):not(.down) .oo-kpi__arrow {
  color: #212121 !important;
}

/* Active Windows — "% open" as status text (no bar) */
.oo-kpi--measure .oo-kpi__trend {
  color: #5c4747;
  font-weight: 600;
}

/* Tighter Completion KPI rhythm */
.oo-kpi-row--5 .oo-kpi--kpi {
  gap: 0.12rem;
}
.oo-kpi-row--5 .oo-kpi--completion .oo-kpi__trend {
  margin-top: 0.2rem;
}

/* Base quality bar styles (modal / reports use these; KPI bar is hidden above) */
.uq-quality-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #ece6e6;
  margin: 0.45rem 0 0.35rem;
}
.uq-quality-segment {
  display: block;
  height: 100%;
  min-width: 0;
  transition: width 0.2s ease;
}
.uq-quality-segment.is-good {
  background: #2e7d32;
}
.uq-quality-segment.is-bad {
  background: #c62828;
}
.uq-quality-segment.is-unrated {
  background: repeating-linear-gradient(
    -45deg,
    #b0a8a8,
    #b0a8a8 3px,
    #d4cdcd 3px,
    #d4cdcd 6px
  );
}
.uq-quality-segment.is-remaining {
  background: #e8e2e2;
}

.uq-quality-compact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.uq-quality-compact__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  font-size: 0.75rem;
  color: #5c4747;
}
.uq-quality-key {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.uq-quality-key i {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.uq-quality-key.is-good i { background: #2e7d32; }
.uq-quality-key.is-bad i { background: #c62828; }
.uq-quality-key.is-unrated i {
  background: repeating-linear-gradient(
    -45deg,
    #b0a8a8,
    #b0a8a8 2px,
    #d4cdcd 2px,
    #d4cdcd 4px
  );
}

/* Quality dialog / modal (opened from View details) */
.uq-quality-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: min(560px, 94vw);
  width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.uq-quality-dialog::backdrop {
  background: rgba(30, 10, 12, 0.45);
}
.uq-quality-dialog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  background: #660810;
  color: #fff;
  border-radius: 12px 12px 0 0;
}
.uq-quality-dialog__toolbar h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.uq-quality-dialog__close {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
}
.uq-quality-dialog__close:hover {
  background: rgba(255, 255, 255, 0.15);
}
.uq-quality-dialog .uq-performance,
.uq-quality-dialog .uq-quality {
  padding: 1rem 1.15rem 1.25rem;
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

/* ── Demand vs Capacity card (right column, ~40%) ───────────────────────── */
.od-wrap .oo-grid--demand-insights,
.od-wrap .so-grid--demand-insights,
.oo-grid--demand-insights,
.so-grid--demand-insights {
  grid-template-columns: 1.5fr 1fr !important; /* ~60% demand | ~40% capacity */
}
.oo-health-item__val--sm {
  font-size: 0.95rem !important;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}
.oo-health-card--demand .oo-health-item__lbl {
  font-size: 0.65rem;
}
.oo-health-card--demand .oo-health-meta {
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
}

/* ── Peak Load & Outlook tiles: compact value + tickets sub ─────────────── */
.oo-health-card--demand .oo-health-item {
  padding: 0.65rem 0.45rem !important;
  min-height: 4.25rem !important;
  gap: 0.15rem;
}
.oo-health-card--demand .oo-health-item__val,
.oo-health-card--demand .oo-health-item__val--sm {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}
.oo-health-card--demand .oo-health-item__lbl {
  font-size: 0.62rem !important;
  line-height: 1.25 !important;
  margin-top: 0.1rem !important;
  color: var(--ink-mid, #5c4747);
}
.oo-health-item__sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: #660810;
  margin-top: 0.2rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.oo-health-card--demand .oo-health-item__sub {
  font-size: 0.7rem !important;
}
.oo-health-card--demand .oo-health-meta {
  font-size: 0.72rem;
  margin-top: 0.35rem;
}

/* ── Peak Load meta footer: centered ─────────────────────────────────────── */
.oo-health-card--demand .oo-health-meta,
.oo-health-card--demand .so-health-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.35rem 0.85rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep card size stable across filters */
.od-wrap .oo-grid--demand-insights > .oo-card,
.oo-grid--demand-insights > .oo-card {
  min-height: 320px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.oo-health-card--demand {
  min-height: 320px !important;
}
.oo-health-card--demand .oo-health-row {
  flex: 1 1 auto !important;
  grid-template-rows: 1fr 1fr !important;
}
.oo-health-card--demand .oo-health-meta {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* ── KPI cards: slightly larger text ─────────────────────────────────────── */
.oo-kpi-row--5 .oo-kpi__label {
  font-size: 0.74rem !important;
}
.oo-kpi-row--5 .oo-kpi__value {
  font-size: 1.5rem !important;
}
.oo-kpi-row--5 .oo-kpi__trend {
  font-size: 0.76rem !important;
}
.oo-kpi__csm {
  font-size: 0.74rem !important;
}
.oo-kpi__csm-arrow {
  font-size: 0.85rem !important;
}
.oo-kpi__type {
  font-size: 0.68rem !important;
}