/* ═══════════════════════════════════════════════════════════════
   OCTO BACKOFFICE PORTAL - THEME STYLESHEET
   Brand: Octo (Octopus)
   Fonts: Sora (headings/display), DM Sans (body/UI)
   Version: 1.2 · March 2026
   ═══════════════════════════════════════════════════════════════

   TABLE OF CONTENTS
   ─────────────────
   1.  TOKENS .............. CSS custom properties (colors, type, spacing, shadows)
   2.  BASE ................ html, body, overflow
   3.  LAYOUT .............. .octo-app flex shell
   4.  SIDEBAR ............. 3-zone layout: logo (pinned), nav (scrollable), footer (pinned)
       4a. Logo ............ .octo-sidebar-logo, .octo-sidebar-collapse-btn
       4b. Nav items ....... .octo-sidebar-item, .octo-sidebar-group-toggle
       4c. Submenus ........ .octo-sidebar-submenu, .octo-sidebar-subitem
       4d. Footer .......... .octo-sidebar-env, .octo-sidebar-user, .octo-user-menu
       4e. Collapsed ....... .octo-sidebar.collapsed — all overrides for icon-only mode
       4f. Flyouts ......... .octo-flyout — JS-generated hover menus for collapsed state
   5.  MAIN ................ .octo-main margin + transitions
   6.  TOPBAR .............. .octo-topbar, search, hamburger, breadcrumb, icon buttons
   7.  NOTIFICATIONS ....... .octo-notif-panel — dropdown from bell icon
   8.  PAGE CONTENT ........ .octo-content, .octo-page-header, .octo-page-footer
   9.  STAT CARDS .......... .octo-stats-grid, .octo-stat-card  (+.compact modifier)
   10. CARDS ............... .octo-card, .octo-card-header/body/footer
   11. DATA TABLE .......... .octo-table-wrap (horizontal scroll), .octo-table
   12. BADGES .............. .octo-badge (.teal, .success, .warning, .error, .info, .gold, .neutral)
   13. BUTTONS ............. .octo-btn (.primary, .secondary, .ghost, .gold, .danger) (+.sm, .lg)
   14. FORMS ............... .octo-input, .octo-select, .octo-textarea, .octo-label, .octo-helper
   15. TABS ................ .octo-tabs, .octo-tab
   16. PAGINATION .......... .octo-pagination, .octo-pagination-btn
   17. CHART ............... .octo-chart-area, .octo-chart-bar (CSS-only bar chart placeholder)
   18. ACTIVITY FEED ....... .octo-activity-list, .octo-activity-item
   19. ALERTS .............. .octo-alert (.info, .success, .warning, .error)
   20. TAGS ................ .octo-tag, .octo-tag.teal
   21. PROGRESS ............ .octo-progress, .octo-progress-fill (.gold, .success)
   22. KPI ROW ............. .octo-kpi-row, .octo-kpi-label, .octo-kpi-value
   23. TOGGLE .............. .octo-toggle, .octo-toggle-track  (+.on modifier)
   24. FILTER SYSTEM
       24a. Filter bar ..... .octo-filter-bar — inline compact filter row (Pattern A)
       24b. Status chips ... .octo-status-chips, .octo-status-chip — tab-style status switcher
       24c. Filter toggle .. .octo-filter-toggle — button to show/hide filter panel
       24d. Filter panel ... .octo-filter-panel — collapsible panel with fields grid
       24e. Filter fields .. .octo-filter-fields — auto-fill responsive grid for filter inputs
       24f. Filter actions . .octo-filter-actions, .octo-filter-reset — Apply/Reset buttons
   25. GRID TOOLBAR ........ .octo-grid-toolbar — search + filters + actions row above table
   26. ROW ACTIONS ......... .octo-row-btn, .octo-row-more-btn — inline + overflow actions
   27. CONTEXT MENU ........ .octo-context-menu — JS-generated positioned dropdown
   28. MODALS .............. .octo-modal-overlay, .octo-modal (.sm, .lg, .xl)
   29. LOG VIEWER .......... .octo-log-list, .octo-log-item — inside modal for device/audit logs
   30. FORM PAGE ........... Full-page form components:
       30a. Page bar ....... .octo-form-page-bar — back + title + save/cancel
       30b. Sections ....... .octo-form-section — card with icon header
       30c. Form grid ...... .octo-form-grid — 2-column field layout (+.full-width)
       30d. Field types .... .octo-field, .octo-phone-input, .octo-radio-group, .octo-checkbox
       30e. File upload .... .octo-file-upload, .octo-file-item
       30f. Input group .... .octo-input-group, .octo-input-addon
       30g. Sticky footer .. .octo-form-footer — save/cancel pinned to bottom
   31. DETAIL PAGE ......... Read-only view components:
       31a. Header ......... .octo-detail-header — avatar + name + badges + actions
       31b. Metrics ........ .octo-detail-metrics — 4-column KPI cards
       31c. Sections ....... .octo-detail-section, .octo-detail-fields
       31d. Field display .. .octo-detail-field-label, .octo-detail-field-value (.mono, .muted)
       31e. Timeline ....... .octo-timeline — activity log with colored dots
   32. RESPONSIVE .......... @media breakpoints: 1200px, 900px, 600px
   33. MASTER–DETAIL ....... .octo-master-detail — parent list pane + the picked parent's child grid (end of file)
   34. SPLIT WORKSPACE ..... .octo-split-workspace — two cards sharing the height: an editor + what it drives (end of file)

   NAMING CONVENTION
   ─────────────────
   All classes prefixed with "octo-" to avoid conflicts with Bootstrap, Kendo, etc.
   Modifiers use dot notation: .octo-stat-card.gold, .octo-badge.success, .octo-btn.sm
   Layout variants: .full-width (inside grids), .compact (on parent container)

   COLOR SEMANTICS
   ───────────────
   .teal ........ default/primary brand accent
   .success ..... completed, verified, active
   .warning ..... pending, review needed
   .error ....... failed, suspended, danger action
   .info ........ processing, informational
   .gold ........ premium tier accent
   .neutral ..... inactive, disabled

   BREAKPOINTS
   ───────────
   ≤1200px ...... stat cards 2-col, build info hidden
   ≤900px ....... sidebar → off-canvas drawer, single-column layouts, form grid 1-col
   ≤600px ....... stat cards 1-col, search hidden, row buttons icon-only, modals full-width

   ═══════════════════════════════════════════════════════════════ */

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

:root {
  --octo-teal:          #008B8B;
  --octo-teal-hover:    #007A7A;
  --octo-teal-active:   #006969;
  --octo-teal-light:    #00AFAF;
  --octo-teal-dim:      #006666;
  --octo-teal-ghost:    #E6F4F4;
  --octo-teal-bg:       #F0FAFA;
  --octo-charcoal:      #2C2C2C;
  --octo-charcoal-deep: #1A1A1A;
  --octo-mid:           #4A4A4A;
  --octo-grey:          #6B7280;
  --octo-grey-light:    #9CA3AF;
  --octo-rule:          #E5E7EB;
  --octo-light:         #F3F4F6;
  --octo-off:           #F8F8F8;
  --octo-white:         #FFFFFF;
  --octo-gold:          #D4AF37;
  --octo-gold-hover:    #C9A227;
  --octo-gold-light:    #FDF8E7;
  --octo-success:       #059669;
  --octo-success-light: #ECFDF5;
  --octo-error:         #DC2626;
  --octo-error-light:   #FEF2F2;
  --octo-warning:       #D97706;
  --octo-warning-light: #FFFBEB;
  --octo-info:          #2563EB;
  --octo-info-light:    #EFF6FF;
  --octo-page-bg:       #F0F1F3;
  --octo-card-bg:       #FFFFFF;
  --octo-sidebar-bg:    #1A1A1A;
  /* Sidebar surface family — foregrounds/borders relative to --octo-sidebar-bg.
     Defaults assume the dark sidebar; a skin that lightens --octo-sidebar-bg
     must override these together (see octomono-design-system skill). */
  --octo-sidebar-fg:          rgba(255,255,255,0.5);
  --octo-sidebar-fg-strong:   rgba(255,255,255,0.85);
  --octo-sidebar-fg-hover:    rgba(255,255,255,0.75);
  --octo-sidebar-fg-dim:      rgba(255,255,255,0.35);
  --octo-sidebar-fg-faint:    rgba(255,255,255,0.2);
  --octo-sidebar-border:      rgba(255,255,255,0.06);
  --octo-sidebar-hover-bg:    rgba(255,255,255,0.05);
  --octo-sidebar-dot:         rgba(255,255,255,0.15);
  --octo-sidebar-active-bg:   rgba(0,175,175,0.12);
  --octo-sidebar-active-fg:   var(--octo-teal-light);
  --octo-sidebar-logo-fill:   var(--octo-teal-light);
  /* User-menu popover / collapsed flyout surface (sits on the sidebar) */
  --octo-menu-bg:             var(--octo-charcoal);
  --octo-topbar-bg:     #FFFFFF;
  --octo-shadow-sm:     0 1px 2px rgba(0,0,0,0.05);
  --octo-shadow-md:     0 4px 12px rgba(0,0,0,0.07);
  --octo-shadow-lg:     0 12px 32px rgba(0,0,0,0.10);
  --octo-shadow-card:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --octo-radius-sm:     4px;
  --octo-radius-md:     6px;
  --octo-radius-lg:     10px;
  --octo-radius-xl:     14px;
  --octo-radius-full:   9999px;
  /* Typography comes in two halves so right-to-left cannot be lost by a project skin.
     A skin sets the two -latin tokens; --octo-font-display/-body are COMPOSED from them, and the
     RTL rule at the end of this file composes the same Latin stack behind the Arabic face. A skin
     that sets --octo-font-display/-body directly still works, it just stops contributing its Latin
     face to Arabic pages. */
  --octo-font-arabic:        'Noto Sans Arabic';
  --octo-font-display-latin: 'Sora';
  --octo-font-body-latin:    'DM Sans';
  /* The Arabic face is the FALLBACK here (and the lead in the RTL rule at the end of this file): Arabic
     data shown inside a left-to-right page — a course title, a person's name — finds its face instead
     of a system font. CSS falls back per glyph, so Latin text never touches it. */
  --octo-font-display:  var(--octo-font-display-latin), var(--octo-font-arabic), sans-serif;
  --octo-font-body:     var(--octo-font-body-latin), var(--octo-font-arabic), sans-serif;
  --octo-text-xs:       11px;
  --octo-text-sm:       13px;
  --octo-text-base:     14px;
  --octo-text-md:       15px;
  --octo-text-lg:       18px;
  --octo-text-xl:       22px;
  --octo-text-2xl:      28px;
  --octo-text-3xl:      36px;
  --sidebar-width:     264px;
  --sidebar-collapsed: 68px;
  --topbar-height:     60px;
  --octo-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --octo-duration:      0.2s;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--octo-font-body);
  background: var(--octo-page-bg);
  color: var(--octo-charcoal);
  line-height: 1.55;
  font-size: var(--octo-text-base);
  -webkit-font-smoothing: antialiased;
  /* html already hides horizontal overflow; keep body a plain block (clip, not hidden) so
     position: sticky elements such as the top bar stick to the viewport, not to body. */
  overflow-x: hidden; /* fallback for browsers without clip */
  overflow-x: clip;
}


/* ═══════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════ */
.octo-app { display: flex; min-height: 100vh; }


/* ═══════════════════════════════════════════
   SIDEBAR — 3-zone: pinned logo, scrollable nav, pinned footer
   ═══════════════════════════════════════════ */
.octo-sidebar {
  width: var(--sidebar-width);
  background: var(--octo-sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; inset-inline-start: 0; bottom: 0;
  z-index: 40;
  transition: width 0.3s var(--octo-ease);
  overflow: hidden;
}

/* ── Zone 1: Logo (pinned top) ── */
.octo-sidebar-logo {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  border-bottom: 1px solid var(--octo-sidebar-border);
  flex-shrink: 0;
}

.octo-sidebar-logo > svg,
.octo-sidebar-logo > img {
  width: 28px; height: 28px;
  flex-shrink: 0;
  transition: width 0.3s var(--octo-ease);
}

.octo-sidebar-logo > svg { fill: var(--octo-sidebar-logo-fill); }

.octo-sidebar-logo-text {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-xs);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--octo-sidebar-fg-dim);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s var(--octo-ease), width 0.3s var(--octo-ease);
}

.octo-sidebar-collapse-btn {
  margin-inline-start: auto;
  width: 28px; height: 28px;
  border-radius: var(--octo-radius-md);
  border: 1px solid var(--octo-sidebar-border);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--octo-sidebar-fg-dim);
  flex-shrink: 0;
  transition: all var(--octo-duration) var(--octo-ease);
}

.octo-sidebar-collapse-btn:hover {
  background: var(--octo-sidebar-hover-bg);
  color: var(--octo-sidebar-fg-hover);
}

.octo-sidebar-collapse-btn svg {
  width: 16px; height: 16px;
  transition: transform 0.3s var(--octo-ease);
}


/* ── Zone 2: Nav (scrollable middle) ── */
.octo-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px;
}

.octo-sidebar-nav::-webkit-scrollbar { width: 4px; }
.octo-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.octo-sidebar-nav::-webkit-scrollbar-thumb { background: var(--octo-sidebar-border); border-radius: 4px; }
.octo-sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--octo-sidebar-dot); }

.octo-sidebar-section { padding: 16px 10px 4px; }

.octo-sidebar-section-title {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--octo-sidebar-fg-faint);
  padding: 0 8px; margin-bottom: 6px;
  white-space: nowrap; overflow: hidden;
  transition: opacity 0.2s var(--octo-ease);
}

/* Sidebar items */
.octo-sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--octo-radius-md);
  color: var(--octo-sidebar-fg);
  font-size: var(--octo-text-sm); font-weight: 500;
  cursor: pointer;
  transition: all var(--octo-duration) var(--octo-ease);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

.octo-sidebar-item:hover { background: var(--octo-sidebar-hover-bg); color: var(--octo-sidebar-fg-hover); }
.octo-sidebar-item.active { background: var(--octo-sidebar-active-bg); color: var(--octo-sidebar-active-fg); }
.octo-sidebar-item.active::before { content: ''; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; background: var(--octo-sidebar-active-fg); border-start-end-radius: 3px; border-end-end-radius: 3px; }
.octo-sidebar-item > svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; }
.octo-sidebar-item.active > svg { opacity: 1; }
.octo-sidebar-item-text { flex: 1; min-width: 0; overflow: hidden; transition: opacity 0.2s var(--octo-ease), width 0.3s var(--octo-ease); }

/* Tooltip spans are data-only for the JS flyout — always hidden in DOM */
.octo-sidebar-tooltip { display: none; }

.octo-sidebar-badge {
  background: var(--octo-teal); color: var(--octo-white);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--octo-radius-full);
  min-width: 20px; text-align: center; flex-shrink: 0;
  transition: opacity 0.2s var(--octo-ease), width 0.2s var(--octo-ease);
}

.octo-sidebar-badge.gold { background: var(--octo-gold); color: var(--octo-charcoal-deep); }


/* ── Submenu ── */
.octo-sidebar-group-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--octo-radius-md);
  color: var(--octo-sidebar-fg);
  font-size: var(--octo-text-sm); font-weight: 500;
  cursor: pointer;
  transition: all var(--octo-duration) var(--octo-ease);
  white-space: nowrap; overflow: hidden;
  width: 100%; border: none; background: transparent;
  text-align: start; font-family: var(--octo-font-body);
}

.octo-sidebar-group-toggle:hover { background: var(--octo-sidebar-hover-bg); color: var(--octo-sidebar-fg-hover); }
.octo-sidebar-group-toggle > svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; }
.octo-sidebar-group-toggle .octo-sidebar-item-text { flex: 1; overflow: hidden; }

.octo-sidebar-chevron {
  width: 16px; height: 16px; flex-shrink: 0; opacity: 0.3;
  transition: transform 0.25s var(--octo-ease), opacity 0.2s var(--octo-ease);
}

.octo-sidebar-group.open .octo-sidebar-chevron { transform: rotate(90deg); }
.octo-sidebar-group.open .octo-sidebar-group-toggle { color: var(--octo-sidebar-fg-hover); }
.octo-sidebar-group.open .octo-sidebar-group-toggle > svg { opacity: 0.8; }

.octo-sidebar-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--octo-ease);
}

.octo-sidebar-group.open .octo-sidebar-submenu { max-height: 400px; }

.octo-sidebar-subitem {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 42px;
  border-radius: var(--octo-radius-md);
  color: var(--octo-sidebar-fg-dim);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all var(--octo-duration) var(--octo-ease);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}

.octo-sidebar-subitem::before {
  content: ''; position: absolute;
  inset-inline-start: 26px; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--octo-sidebar-dot);
  transform: translateY(-50%);
  transition: background var(--octo-duration) var(--octo-ease);
}

.octo-sidebar-subitem:hover { color: var(--octo-sidebar-fg-hover); background: var(--octo-sidebar-hover-bg); }
.octo-sidebar-subitem:hover::before { background: var(--octo-sidebar-fg-dim); }
.octo-sidebar-subitem.active { color: var(--octo-sidebar-active-fg); }
.octo-sidebar-subitem.active::before { background: var(--octo-sidebar-active-fg); }


/* ── Zone 3: Footer (pinned bottom) ── */
.octo-sidebar-footer {
  border-top: 1px solid var(--octo-sidebar-border);
  flex-shrink: 0;
}

.octo-sidebar-env {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--octo-sidebar-border);
  overflow: hidden;
}

.octo-sidebar-env-tag {
  font-family: var(--octo-font-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px;
  flex-shrink: 0;
}

.octo-sidebar-env-tag.dev      { background: rgba(251,191,36,0.15); color: #FBBF24; }
.octo-sidebar-env-tag.staging  { background: rgba(167,139,250,0.15); color: #A78BFA; }
.octo-sidebar-env-tag.uat      { background: rgba(96,165,250,0.15); color: #60A5FA; }
.octo-sidebar-env-tag.prod     { background: rgba(0,175,175,0.15); color: var(--octo-teal-light); }

.octo-sidebar-env-meta {
  font-size: 10px; color: var(--octo-sidebar-fg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.octo-sidebar-env-meta span { color: var(--octo-sidebar-fg-dim); }

.octo-sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--octo-duration) var(--octo-ease);
  overflow: hidden;
}

.octo-sidebar-user:hover { background: var(--octo-sidebar-hover-bg); }

.octo-sidebar-avatar {
  width: 34px; height: 34px;
  border-radius: var(--octo-radius-full);
  background: var(--octo-teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--octo-font-display);
  font-size: 12px; font-weight: 700; color: var(--octo-white);
  flex-shrink: 0;
}

.octo-sidebar-user-info { overflow: hidden; transition: opacity 0.2s var(--octo-ease), width 0.3s var(--octo-ease); }
.octo-sidebar-user-name { font-size: var(--octo-text-sm); font-weight: 600; color: var(--octo-sidebar-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.octo-sidebar-user-role { font-size: var(--octo-text-xs); color: var(--octo-sidebar-fg-dim); white-space: nowrap; }

/* ── User menu popover ── */
.octo-sidebar-user-wrapper {
  position: relative;
}

.octo-user-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  inset-inline-start: 10px;
  inset-inline-end: 10px;
  background: var(--octo-menu-bg);
  border: 1px solid var(--octo-sidebar-border);
  border-radius: var(--octo-radius-lg);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  z-index: 60;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s var(--octo-ease);
}

.octo-user-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.octo-user-menu-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--octo-sidebar-border);
}

.octo-user-menu-name {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-sm);
  font-weight: 700;
  color: var(--octo-sidebar-fg-strong);
}

.octo-user-menu-email {
  font-size: var(--octo-text-xs);
  color: var(--octo-sidebar-fg-dim);
  margin-top: 2px;
}

.octo-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: var(--octo-text-sm);
  font-weight: 500;
  color: var(--octo-sidebar-fg);
  cursor: pointer;
  transition: all 0.15s var(--octo-ease);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: start;
  font-family: var(--octo-font-body);
}

.octo-user-menu-item:hover {
  background: var(--octo-sidebar-hover-bg);
  color: var(--octo-sidebar-fg-strong);
}

.octo-user-menu-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  flex-shrink: 0;
}

.octo-user-menu-item:hover svg { opacity: 0.8; }

.octo-user-menu-divider {
  height: 1px;
  background: var(--octo-sidebar-border);
}

.octo-user-menu-item.danger { color: rgba(220,80,80,0.8); }
.octo-user-menu-item.danger:hover { color: #EF4444; background: rgba(239,68,68,0.08); }
.octo-user-menu-item.danger svg { color: currentColor; }

/* Collapsed: position flyout to the right instead */
.octo-sidebar.collapsed .octo-user-menu {
  inset-inline-start: calc(var(--sidebar-collapsed) + 6px);
  inset-inline-end: auto;
  bottom: 0;
  min-width: 200px;
  position: fixed;
}


/* ═══════════════════════════════════════════
   SIDEBAR — COLLAPSED STATE
   ═══════════════════════════════════════════ */
.octo-sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

/* Logo: stack vertically */
.octo-sidebar.collapsed .octo-sidebar-logo {
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 0;
  height: auto;
  min-height: auto;
}

.octo-sidebar.collapsed .octo-sidebar-logo > svg,
.octo-sidebar.collapsed .octo-sidebar-logo > img {
  width: 24px; height: 24px;
  margin: 16px 0 6px 0;
}

.octo-sidebar.collapsed .octo-sidebar-logo-text {
  display: none;
}

.octo-sidebar.collapsed .octo-sidebar-collapse-btn {
  margin: 0 0 12px 0;
  position: static;
  width: 24px; height: 24px;
}

.octo-sidebar.collapsed .octo-sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

/* Nav sections — tighten spacing */
.octo-sidebar.collapsed .octo-sidebar-section {
  padding: 10px 0 2px;
}

.octo-sidebar.collapsed .octo-sidebar-section-title {
  display: none;
}

/* ── Uniform collapsed item box ──
   Both .octo-sidebar-item and .octo-sidebar-group-toggle
   become identical 44x44 centered icon buttons */
.octo-sidebar.collapsed .octo-sidebar-item,
.octo-sidebar.collapsed .octo-sidebar-group-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 2px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: var(--octo-radius-lg);
  position: relative;
  overflow: visible;
}

/* Hide all text / badges / chevrons */
.octo-sidebar.collapsed .octo-sidebar-item-text,
.octo-sidebar.collapsed .octo-sidebar-badge,
.octo-sidebar.collapsed .octo-sidebar-chevron,
.octo-sidebar.collapsed .octo-sidebar-tooltip {
  display: none;
}

/* Active bar repositioned for centered box */
.octo-sidebar.collapsed .octo-sidebar-item.active::before {
  inset-inline-start: -2px;
  top: 10px;
  bottom: 10px;
  width: 3px;
}

/* Submenus hidden */
.octo-sidebar.collapsed .octo-sidebar-submenu {
  max-height: 0 !important;
}

/* Icons get slightly larger in collapsed mode */
.octo-sidebar.collapsed .octo-sidebar-item > svg,
.octo-sidebar.collapsed .octo-sidebar-group-toggle > svg {
  width: 20px;
  height: 20px;
}

/* Footer: centered */
.octo-sidebar.collapsed .octo-sidebar-env {
  padding: 10px 0;
  justify-content: center;
}

.octo-sidebar.collapsed .octo-sidebar-env-meta {
  display: none;
}

.octo-sidebar.collapsed .octo-sidebar-user {
  padding: 12px 0;
  justify-content: center;
  gap: 0;
}

.octo-sidebar.collapsed .octo-sidebar-user-info {
  display: none;
}


/* ═══════════════════════════════════════════
   SIDEBAR — FLOATING FLYOUT (collapsed hover)
   ═══════════════════════════════════════════ */
.octo-flyout {
  position: fixed;
  inset-inline-start: calc(var(--sidebar-collapsed) + 6px);
  background: var(--octo-menu-bg);
  border-radius: var(--octo-radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px var(--octo-sidebar-border);
  z-index: 200;
  min-width: 180px;
  overflow: hidden;
  animation: octo-flyout-in 0.15s var(--octo-ease);
  pointer-events: auto;
}

@keyframes octo-flyout-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.octo-flyout-header {
  padding: 10px 16px;
  font-family: var(--octo-font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--octo-sidebar-active-fg);
  border-bottom: 1px solid var(--octo-sidebar-border);
  letter-spacing: 0.3px;
}

/* Flyout for simple items (tooltip style, no subitems) */
.octo-flyout.simple {
  min-width: auto;
  border-radius: var(--octo-radius-md);
}

.octo-flyout.simple .octo-flyout-header {
  border-bottom: none;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--octo-sidebar-fg-strong);
  font-family: var(--octo-font-body);
  font-weight: 600;
}

/* Flyout submenu links */
.octo-flyout-link {
  display: block;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--octo-sidebar-fg);
  text-decoration: none;
  transition: all 0.12s var(--octo-ease);
  cursor: pointer;
  border-inline-start: 2px solid transparent;
}

.octo-flyout-link:hover {
  background: var(--octo-sidebar-hover-bg);
  color: var(--octo-sidebar-fg-strong);
  border-inline-start-color: var(--octo-sidebar-dot);
}

.octo-flyout-link.active {
  color: var(--octo-sidebar-active-fg);
  background: var(--octo-sidebar-active-bg);
  border-inline-start-color: var(--octo-sidebar-active-fg);
}


/* ═══════════════════════════════════════════
   MAIN
   ═══════════════════════════════════════════ */
.octo-main {
  flex: 1;
  margin-inline-start: var(--sidebar-width);
  display: flex; flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  /* clip, not hidden: hidden would make .octo-main the scroll container of the sticky top bar (it then
     scrolls away with the document). clip prevents horizontal overflow without creating a scroller. */
  overflow-x: hidden; /* fallback for browsers without clip */
  overflow-x: clip;
  transition: margin-left 0.3s var(--octo-ease);
}

.octo-sidebar.collapsed ~ .octo-main,
.octo-app.sidebar-collapsed .octo-main {
  margin-inline-start: var(--sidebar-collapsed);
}


/* ── TOPBAR ── */
.octo-topbar {
  height: var(--topbar-height);
  background: var(--octo-topbar-bg);
  border-bottom: 1px solid var(--octo-rule);
  display: flex; align-items: center;
  padding: 0 28px; gap: 16px;
  position: sticky; top: 0; z-index: 30;
  box-shadow: var(--octo-shadow-sm);
}

.octo-hamburger {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--octo-radius-md);
  border: 1px solid var(--octo-rule);
  background: var(--octo-white);
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}

.octo-hamburger svg { width: 20px; height: 20px; color: var(--octo-charcoal); }

.octo-topbar-title { font-family: var(--octo-font-display); font-size: var(--octo-text-lg); font-weight: 700; color: var(--octo-charcoal); letter-spacing: -0.3px; white-space: nowrap; }

.octo-topbar-breadcrumb { font-size: var(--octo-text-sm); color: var(--octo-grey); display: flex; align-items: center; gap: 6px; }
.octo-topbar-breadcrumb a { color: var(--octo-teal); text-decoration: none; font-weight: 500; }
.octo-topbar-breadcrumb a:hover { text-decoration: underline; }

.octo-topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.octo-topbar-search {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: var(--octo-light); border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-md); padding: 7px 12px; min-width: 240px;
  transition: all var(--octo-duration) var(--octo-ease);
}

.octo-topbar-search:focus-within { border-color: var(--octo-teal); background: var(--octo-white); box-shadow: 0 0 0 3px var(--octo-teal-ghost); }
.octo-topbar-search input { border: none; background: transparent; font-family: var(--octo-font-body); font-size: var(--octo-text-sm); color: var(--octo-charcoal); outline: none; width: 100%; }
.octo-topbar-search input::placeholder { color: var(--octo-grey-light); }
.octo-topbar-search svg { width: 16px; height: 16px; color: var(--octo-grey-light); flex-shrink: 0; }

/* Quick navigation results (top-bar search) — populated by OctoQuickNav in octo-theme.js */
.octo-topbar-search-kbd {
  font-family: var(--octo-font-body); font-size: 10px; font-weight: 600; line-height: 1;
  color: var(--octo-grey-light); background: var(--octo-white);
  border: 1px solid var(--octo-rule); border-radius: 4px; padding: 3px 5px;
  white-space: nowrap; flex-shrink: 0;
}
.octo-topbar-search:focus-within .octo-topbar-search-kbd { display: none; }

.octo-topbar-search-results {
  display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0;
  background: var(--octo-white); border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-md); box-shadow: var(--octo-shadow-lg);
  padding: 6px; max-height: 360px; overflow-y: auto; z-index: 60;
}
.octo-topbar-search-results.open { display: block; }

.octo-topbar-search-result {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--octo-radius-sm);
  color: var(--octo-charcoal); text-decoration: none;
  font-size: var(--octo-text-sm); font-weight: 500;
  transition: background var(--octo-duration) var(--octo-ease);
}
.octo-topbar-search-result:hover,
.octo-topbar-search-result.active { background: var(--octo-teal-bg); color: var(--octo-teal-hover); }
.octo-topbar-search-result .material-icons { font-size: 18px; color: var(--octo-grey-light); flex-shrink: 0; }
.octo-topbar-search-result.active .material-icons { color: var(--octo-teal); }
.octo-topbar-search-result-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.octo-topbar-search-result-section { font-size: var(--octo-text-xs); color: var(--octo-grey-light); white-space: nowrap; }
.octo-topbar-search-empty { padding: 10px 12px; font-size: var(--octo-text-sm); color: var(--octo-grey); }

.octo-topbar-icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--octo-radius-md);
  border: 1px solid var(--octo-rule); background: var(--octo-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  transition: all var(--octo-duration) var(--octo-ease); flex-shrink: 0;
}

.octo-topbar-icon-btn:hover { background: var(--octo-light); border-color: var(--octo-grey-light); }
.octo-topbar-icon-btn svg { width: 18px; height: 18px; color: var(--octo-grey); }
.octo-topbar-icon-btn .octo-notif-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 7px; height: 7px; background: var(--octo-error); border-radius: 50%; border: 2px solid var(--octo-white); }


/* ── PAGE CONTENT ── */
/* overflow-x: clip (not hidden) so sticky children — the form footer, table headers — pin to the viewport;
   the fill-viewport grid block below sets overflow-y: auto, where clip computes to hidden as before. */
.octo-content { padding: 28px; flex: 1; min-width: 0; overflow-x: hidden; overflow-x: clip; }

/* ── FILL-VIEWPORT GRID PAGES ──
   A grid page marks its grid card with .octo-grid-card (shared toolbar + status chips + the Kendo
   grid inside). When one is present the shell stops scrolling the document: the main column is
   pinned to the viewport, .octo-content becomes a flex column, the card takes the remaining height
   and the Kendo grid scrolls its own rows (the grid must be .Scrollable() with no fixed height).
   If the viewport is too short for title + stats + toolbar + a usable grid (min-height below),
   .octo-content scrolls instead so nothing is cut off. See grid-page.md → Fill-Viewport Layout.
   Applies at every viewport width. On phones the content column still scrolls when title + stats +
   toolbar + a usable grid do not fit; the hidden drawer backdrop is pointer-events:none so touch reaches it. */
/* (no media query: phones get the same fill behaviour) */
  .octo-app:has(.octo-grid-card) { height: 100vh; height: 100dvh; overflow: hidden; }
  .octo-app:has(.octo-grid-card) .octo-main { height: 100vh; height: 100dvh; min-height: 0; }
  .octo-app:has(.octo-grid-card) .octo-content { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  .octo-app:has(.octo-grid-card) .octo-content > * { flex-shrink: 0; }
  /* The card grows to fill the column but never shrinks below its own content (toolbar + panel + chips +
     the grid's minimum); when that does not fit, .octo-content scrolls instead of clipping the pager. */
  .octo-app:has(.octo-grid-card) .octo-grid-card { flex: 1 0 auto; min-height: 380px; display: flex; flex-direction: column; }
  /* Toolbar, filter panel, status chips and any card footer keep their natural height; only the grid
     flexes. Without this the filter panel (overflow:hidden for its open/close animation) shrinks
     first and its fields get cut off. The grid keeps a usable minimum and the content column scrolls
     when the viewport is too short for everything. */
  .octo-app:has(.octo-grid-card) .octo-grid-card > :not(.k-grid) { flex-shrink: 0; }
  /* The grid follows the card's flex size. Kendo measures the grid once and writes an inline height
     onto .k-grid-content (and a page may still carry an inline grid height), which would freeze the
     rows area at that first measurement; !important lets the flex layout win over both. */
  .octo-grid-card .k-grid { flex: 1 1 0%; min-height: 240px; height: auto !important; contain: size; }
  /* contain:size zeroes the grid's intrinsic height, so the rows never count toward the card's own height
     and the card's minimum stays toolbar + panel + chips + 240px grid (the flexed size is unaffected). */
  .octo-grid-card .k-grid .k-grid-content { height: auto !important; flex: 1 1 auto; min-height: 0; }

/* ── PAGE FOOTER ── */
.octo-page-footer {
  padding: 20px 28px;
  border-top: 1px solid var(--octo-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--octo-text-xs);
  color: var(--octo-grey-light);
  flex-wrap: wrap;
}

.octo-page-footer a {
  color: var(--octo-grey);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--octo-duration) var(--octo-ease);
}

.octo-page-footer a:hover { color: var(--octo-teal); }
.octo-page-header { margin-bottom: 24px; }
.octo-page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.octo-page-title { font-family: var(--octo-font-display); font-size: var(--octo-text-2xl); font-weight: 800; color: var(--octo-charcoal); letter-spacing: -0.8px; }
.octo-page-subtitle { font-size: var(--octo-text-base); color: var(--octo-grey); margin-top: 4px; line-height: 1.5; }


/* ═══════════════════════════════════════════
   COMPONENT LIBRARY
   ═══════════════════════════════════════════ */

/* Stat cards */
.octo-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; min-width: 0; }
.octo-stat-card { background: var(--octo-card-bg); border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-lg); padding: 20px 22px; position: relative; overflow: hidden; transition: all var(--octo-duration) var(--octo-ease); box-shadow: var(--octo-shadow-card); }
.octo-stat-card:hover { box-shadow: var(--octo-shadow-md); transform: translateY(-1px); }

/* Compact variant — add .compact to .octo-stats-grid */
.octo-stats-grid.compact { gap: 10px; }
.octo-stats-grid.compact .octo-stat-card { padding: 12px 16px; }
.octo-stats-grid.compact .octo-stat-label { font-size: 10px; margin-bottom: 4px; }
.octo-stats-grid.compact .octo-stat-value { font-size: var(--octo-text-lg); margin-bottom: 4px; letter-spacing: -0.5px; }
.octo-stats-grid.compact .octo-stat-icon { width: 32px; height: 32px; top: 12px; inset-inline-end: 12px; }
.octo-stats-grid.compact .octo-stat-icon svg { width: 16px; height: 16px; }

.octo-stat-card::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 3px; background: var(--octo-teal); }
.octo-stat-card.gold::before { background: var(--octo-gold); }
.octo-stat-card.success::before { background: var(--octo-success); }
.octo-stat-card.warning::before { background: var(--octo-warning); }
.octo-stat-label { font-size: var(--octo-text-xs); font-weight: 600; color: var(--octo-grey); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }
.octo-stat-value { font-family: var(--octo-font-display); font-size: var(--octo-text-2xl); font-weight: 800; color: var(--octo-charcoal); letter-spacing: -1px; line-height: 1; margin-bottom: 8px; }
.octo-stat-change { font-size: var(--octo-text-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--octo-radius-full); }
.octo-stat-change.up { color: var(--octo-success); background: var(--octo-success-light); }
.octo-stat-change.down { color: var(--octo-error); background: var(--octo-error-light); }
.octo-stat-icon { position: absolute; top: 18px; inset-inline-end: 18px; width: 40px; height: 40px; border-radius: var(--octo-radius-md); display: flex; align-items: center; justify-content: center; background: var(--octo-teal-ghost); }
.octo-stat-card.gold .octo-stat-icon { background: var(--octo-gold-light); }
.octo-stat-card.success .octo-stat-icon { background: var(--octo-success-light); }
.octo-stat-card.warning .octo-stat-icon { background: var(--octo-warning-light); }
.octo-stat-icon svg { width: 20px; height: 20px; color: var(--octo-teal); }
.octo-stat-card.gold .octo-stat-icon svg { color: var(--octo-gold); }
.octo-stat-card.success .octo-stat-icon svg { color: var(--octo-success); }
.octo-stat-card.warning .octo-stat-icon svg { color: var(--octo-warning); }

/* Stat card extras — error tone, optional icon glyph (OctoPageStat.Icon), hint line (Hint), and cards that
   act as quick filters (ClientOnClick). Page JS puts .active on the card whose filter is applied. */
.octo-stat-card.error::before { background: var(--octo-error); }
/* neutral: a state that is neither good nor bad (e.g. Free students) — same grey as .octo-badge.neutral. */
.octo-stat-card.neutral::before { background: var(--octo-grey-light); }
.octo-stat-card.neutral .octo-stat-icon { background: var(--octo-light); }
.octo-stat-card.neutral .octo-stat-icon i { color: var(--octo-grey); }
.octo-stat-card.error .octo-stat-icon { background: var(--octo-error-light); }
.octo-stat-icon i { font-size: 16px; color: var(--octo-teal); }
.octo-stats-grid.compact .octo-stat-icon i { font-size: 14px; }
.octo-stat-card.gold .octo-stat-icon i { color: var(--octo-gold); }
.octo-stat-card.success .octo-stat-icon i { color: var(--octo-success); }
.octo-stat-card.warning .octo-stat-icon i { color: var(--octo-warning); }
.octo-stat-card.error .octo-stat-icon i { color: var(--octo-error); }
.octo-stat-card.has-icon .octo-stat-label { padding-inline-end: 40px; }
.octo-stat-hint { font-size: var(--octo-text-xs); color: var(--octo-grey); line-height: 1.35; min-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .octo-stat-hint { white-space: normal; } } /* two columns on phones: let the hint wrap */
.octo-stat-card.clickable { cursor: pointer; user-select: none; }
.octo-stat-card.clickable:focus-visible { outline: 2px solid var(--octo-teal); outline-offset: 2px; }
/* Selected quick-filter card: filled with the card's own tone (not an outline in the primary colour), so it
   stays in its colour family and reads as "this is the queue listed below". The top bar thickens, the icon
   chip turns white so it still stands out on the tint, and the hover lift is dropped. */
.octo-stat-card.active { background: var(--octo-teal-ghost); border-color: color-mix(in srgb, var(--octo-teal) 35%, transparent); box-shadow: none; transform: none; }
.octo-stat-card.active::before { height: 4px; }
.octo-stat-card.warning.active { background: var(--octo-warning-light); border-color: color-mix(in srgb, var(--octo-warning) 45%, transparent); }
.octo-stat-card.error.active { background: var(--octo-error-light); border-color: color-mix(in srgb, var(--octo-error) 40%, transparent); }
.octo-stat-card.success.active { background: var(--octo-success-light); border-color: color-mix(in srgb, var(--octo-success) 40%, transparent); }
.octo-stat-card.neutral.active { background: var(--octo-light); border-color: var(--octo-grey-light); }
.octo-stat-card.gold.active { background: var(--octo-gold-light); border-color: color-mix(in srgb, var(--octo-gold) 45%, transparent); }
.octo-stat-card.active .octo-stat-icon { background: var(--octo-white); }
.octo-stat-card.active .octo-stat-label { color: var(--octo-charcoal); }
/* Fewer than four cards: the partial adds cols-N so the row stays full width (also below 1200px). */
.octo-stats-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.octo-stats-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.octo-stats-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }

/* Cards */
.octo-card { background: var(--octo-card-bg); border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-lg); box-shadow: var(--octo-shadow-card); overflow: hidden; max-width: 100%; }
.octo-card-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--octo-rule); gap: 12px; flex-wrap: wrap; }
.octo-card-title { font-family: var(--octo-font-display); font-size: var(--octo-text-md); font-weight: 700; color: var(--octo-charcoal); letter-spacing: -0.2px; }
.octo-card-body { padding: 22px; }
.octo-card-footer { padding: 14px 22px; border-top: 1px solid var(--octo-rule); background: var(--octo-off); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.octo-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }

/* Table */
.octo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.octo-table.fit { min-width: 0; } /* a short table inside a pane or tab: no 700px floor, it fits its container */
/* A grouped table: a full-width row that names the group the rows under it belong to. */
.octo-table tbody tr.group td { background: var(--octo-off); font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--octo-grey); padding: 8px 16px; }
.octo-table tbody tr.group:hover td { background: var(--octo-off); }
/* A row of chips that wraps, opposite a label (e.g. inside .octo-kpi-row). */
.octo-chip-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
.octo-kpi-row > .octo-kpi-label { flex: 0 0 auto; }
/* Two readable columns inside a detail pane or tab; one column when there is no room. */
.octo-detail-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px 32px; align-items: start; }
/* A row of compact figures inside a detail pane or tab. Deliberately NOT .octo-stats-grid: that class is
   the page-level strip, which a fill-viewport grid page turns into a horizontal scroller on phones
   (.octo-app:has(.octo-grid-card) ...), and a nested row must not inherit that. */
.octo-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; } /* 140px: two fit a phone-width detail pane, four a desktop one */
.octo-detail-stats .octo-stat-card { padding: 12px 16px; }
.octo-detail-stats .octo-stat-label { font-size: 10px; margin-bottom: 4px; }
.octo-detail-stats .octo-stat-value { font-size: var(--octo-text-lg); margin-bottom: 4px; letter-spacing: -0.5px; }
.octo-detail-stats .octo-stat-hint { white-space: normal; }
/* Phone visibility helpers: a table column that gives way on a phone (.octo-hide-sm) and the sub-line that
   carries its content there instead (.octo-show-sm). */
.octo-show-sm { display: none; }
@media (max-width: 600px) { .octo-hide-sm { display: none !important; } .octo-show-sm { display: block; } }
@media (max-width: 600px) { .octo-table.fit thead th, .octo-table.fit tbody td { padding: 9px 8px; } .octo-table.fit thead th:first-child, .octo-table.fit tbody td:first-child { padding-inline-start: 4px; } }
.octo-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--octo-text-sm); min-width: 700px; }
.octo-table thead th { background: var(--octo-off); color: var(--octo-grey); font-weight: 600; font-size: var(--octo-text-xs); letter-spacing: 0.5px; text-transform: uppercase; text-align: start; padding: 11px 16px; border-bottom: 1px solid var(--octo-rule); white-space: nowrap; position: sticky; top: 0; }
.octo-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--octo-rule); color: var(--octo-mid); vertical-align: middle; }
.octo-table tbody tr { transition: background var(--octo-duration) var(--octo-ease); }
.octo-table tbody tr:hover { background: var(--octo-teal-bg); }
.octo-table tbody tr:last-child td { border-bottom: none; }
.octo-table td.primary { color: var(--octo-charcoal); font-weight: 600; }
.octo-table td.mono { font-family: 'DM Mono', 'SF Mono', monospace; font-size: 12px; letter-spacing: 0.3px; color: var(--octo-grey); }
.octo-table td .octo-user-cell { display: flex; align-items: center; gap: 10px; }
.octo-table td .octo-user-cell-avatar { width: 30px; height: 30px; border-radius: var(--octo-radius-full); background: var(--octo-teal-ghost); display: flex; align-items: center; justify-content: center; font-family: var(--octo-font-display); font-size: 11px; font-weight: 700; color: var(--octo-teal); flex-shrink: 0; }
.octo-table td .octo-user-cell-name { font-weight: 600; color: var(--octo-charcoal); line-height: 1.2; }
.octo-table td .octo-user-cell-sub { font-size: var(--octo-text-xs); color: var(--octo-grey-light); }

/* Badges */
.octo-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--octo-text-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--octo-radius-full); white-space: nowrap; }
.octo-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.octo-badge.teal { background: var(--octo-teal-ghost); color: var(--octo-teal); }
.octo-badge.teal .octo-badge-dot { background: var(--octo-teal); }
.octo-badge.success { background: var(--octo-success-light); color: var(--octo-success); }
.octo-badge.success .octo-badge-dot { background: var(--octo-success); }
.octo-badge.warning { background: var(--octo-warning-light); color: var(--octo-warning); }
.octo-badge.warning .octo-badge-dot { background: var(--octo-warning); }
.octo-badge.error { background: var(--octo-error-light); color: var(--octo-error); }
.octo-badge.error .octo-badge-dot { background: var(--octo-error); }
.octo-badge.info { background: var(--octo-info-light); color: var(--octo-info); }
.octo-badge.info .octo-badge-dot { background: var(--octo-info); }
.octo-badge.gold { background: var(--octo-gold-light); color: var(--octo-gold-hover); }
.octo-badge.gold .octo-badge-dot { background: var(--octo-gold); }
.octo-badge.neutral { background: var(--octo-light); color: var(--octo-grey); }
.octo-badge.neutral .octo-badge-dot { background: var(--octo-grey-light); }

/* Buttons */
.octo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--octo-font-body); font-size: var(--octo-text-sm); font-weight: 600; padding: 8px 18px; border-radius: var(--octo-radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--octo-duration) var(--octo-ease); white-space: nowrap; text-decoration: none; line-height: 1.4; }
.octo-btn svg { width: 16px; height: 16px; }
.octo-btn-primary { background: var(--octo-teal); color: var(--octo-white); border-color: var(--octo-teal); }
.octo-btn-primary:hover { background: var(--octo-teal-hover); border-color: var(--octo-teal-hover); box-shadow: 0 2px 8px rgba(0,139,139,0.3); }
.octo-btn-secondary { background: var(--octo-white); color: var(--octo-charcoal); border-color: var(--octo-rule); }
.octo-btn-secondary:hover { background: var(--octo-light); border-color: var(--octo-grey-light); }
.octo-btn-ghost { background: transparent; color: var(--octo-teal); border-color: transparent; }
.octo-btn-ghost:hover { background: var(--octo-teal-ghost); }
.octo-btn-gold { background: var(--octo-gold); color: var(--octo-charcoal-deep); border-color: var(--octo-gold); }
.octo-btn-gold:hover { background: var(--octo-gold-hover); box-shadow: 0 2px 8px rgba(212,175,55,0.35); }
.octo-btn-danger { background: var(--octo-error); color: var(--octo-white); border-color: var(--octo-error); }
.octo-btn-danger:hover { background: #B91C1C; }
.octo-btn-sm { font-size: var(--octo-text-xs); padding: 0 12px; height: 32px; }
.octo-btn-icon { padding: 8px; }

/* Forms */
.octo-form-group { margin-bottom: 18px; }
.octo-label { display: block; font-size: var(--octo-text-sm); font-weight: 600; color: var(--octo-charcoal); margin-bottom: 6px; }
.octo-input, .octo-select, .octo-textarea { width: 100%; font-family: var(--octo-font-body); font-size: var(--octo-text-base); color: var(--octo-charcoal); background: var(--octo-white); border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-md); padding: 9px 14px; outline: none; transition: all var(--octo-duration) var(--octo-ease); }
.octo-input:focus, .octo-select:focus, .octo-textarea:focus { border-color: var(--octo-teal); box-shadow: 0 0 0 3px var(--octo-teal-ghost); }
.octo-input::placeholder { color: var(--octo-grey-light); }
.octo-input.error { border-color: var(--octo-error); }
.octo-input.error:focus { box-shadow: 0 0 0 3px var(--octo-error-light); }
.octo-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-inline-end: 36px; }
.octo-helper { font-size: var(--octo-text-xs); color: var(--octo-grey); margin-top: 4px; }
.octo-helper.error { color: var(--octo-error); }

/* Tabs */
.octo-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--octo-rule); margin-bottom: 22px; }
.octo-tab { padding: 10px 18px; font-size: var(--octo-text-sm); font-weight: 600; color: var(--octo-grey); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--octo-duration) var(--octo-ease); white-space: nowrap; }
.octo-tab:hover { color: var(--octo-charcoal); }
.octo-tab.active { color: var(--octo-teal); border-bottom-color: var(--octo-teal); }

/* Pagination */
.octo-pagination { display: flex; align-items: center; gap: 4px; font-size: var(--octo-text-sm); }
.octo-pagination-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--octo-radius-md); border: 1px solid var(--octo-rule); background: var(--octo-white); color: var(--octo-grey); font-size: var(--octo-text-sm); font-weight: 500; cursor: pointer; transition: all var(--octo-duration) var(--octo-ease); }
.octo-pagination-btn:hover { background: var(--octo-light); color: var(--octo-charcoal); }
.octo-pagination-btn.active { background: var(--octo-teal); border-color: var(--octo-teal); color: var(--octo-white); font-weight: 700; }
.octo-pagination-info { font-size: var(--octo-text-sm); color: var(--octo-grey); }

/* Chart */
.octo-chart-area { width: 100%; height: 260px; background: repeating-linear-gradient(0deg, transparent, transparent 49px, var(--octo-rule) 49px, var(--octo-rule) 50px); position: relative; display: flex; align-items: flex-end; gap: 12px; padding: 0 8px; }
.octo-chart-bar { flex: 1; background: linear-gradient(180deg, var(--octo-teal) 0%, var(--octo-teal-dim) 100%); border-radius: var(--octo-radius-sm) var(--octo-radius-sm) 0 0; min-height: 16px; position: relative; transition: all 0.3s var(--octo-ease); opacity: 0.85; }
.octo-chart-bar:hover { opacity: 1; transform: scaleY(1.02); transform-origin: bottom; }
.octo-chart-bar.gold { background: linear-gradient(180deg, var(--octo-gold) 0%, var(--octo-gold-hover) 100%); }
.octo-chart-bar-label { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--octo-grey); font-weight: 500; white-space: nowrap; }
.octo-chart-bar-value { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--octo-font-display); font-size: 10px; font-weight: 700; color: var(--octo-charcoal); white-space: nowrap; }

/* Activity */
.octo-activity-list { list-style: none; }
.octo-activity-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--octo-rule); }
.octo-activity-item:last-child { border-bottom: none; }
.octo-activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--octo-teal); margin-top: 6px; flex-shrink: 0; }
.octo-activity-dot.gold { background: var(--octo-gold); }
.octo-activity-dot.success { background: var(--octo-success); }
.octo-activity-dot.error { background: var(--octo-error); }
.octo-activity-text { font-size: var(--octo-text-sm); color: var(--octo-mid); line-height: 1.5; }
.octo-activity-text strong { color: var(--octo-charcoal); font-weight: 600; }
.octo-activity-time { font-size: var(--octo-text-xs); color: var(--octo-grey-light); margin-top: 3px; }

/* Alert */
.octo-alert { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--octo-radius-md); border-inline-start: 3px solid; font-size: var(--octo-text-sm); margin-bottom: 16px; }
.octo-alert.success { background: var(--octo-success-light); border-color: var(--octo-success); color: var(--octo-success); }
.octo-alert.warning { background: var(--octo-warning-light); border-color: var(--octo-warning); color: var(--octo-warning); }
.octo-alert.error { background: var(--octo-error-light); border-color: var(--octo-error); color: var(--octo-error); }
.octo-alert-title { font-weight: 700; margin-bottom: 2px; }
.octo-alert-text { color: var(--octo-mid); line-height: 1.5; }
.octo-prose { color: var(--octo-mid); line-height: 1.7; }
.octo-prose h3 { margin: 0 0 10px; font-family: var(--octo-font-display); font-size: var(--octo-text-lg); color: var(--octo-charcoal); }
.octo-prose p { margin: 0 0 12px; }
.octo-prose p:last-child { margin-bottom: 0; }
.octo-special-page { min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.octo-special-card { width: 100%; max-width: 760px; background: var(--octo-card-bg); border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-xl); box-shadow: var(--octo-shadow-card); padding: 36px; text-align: center; }
.octo-special-card-error { position: relative; overflow: hidden; }
.octo-special-card-error::after { content: ""; position: absolute; inset: auto -120px -120px auto; width: 260px; height: 260px; background: radial-gradient(circle, rgba(220,38,38,0.08) 0%, transparent 70%); pointer-events: none; }
.octo-special-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--octo-error-light); color: var(--octo-error); font-size: 30px; }
.octo-special-eyebrow { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--octo-grey-light); }
.octo-special-title { margin: 0 0 10px; font-family: var(--octo-font-display); font-size: 34px; line-height: 1.1; color: var(--octo-charcoal); letter-spacing: -1px; }
.octo-special-text { margin: 0 auto 20px; max-width: 560px; color: var(--octo-grey); line-height: 1.7; }
.octo-special-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 24px; }
.octo-special-note { text-align: start; max-width: 620px; margin: 0 auto; position: relative; z-index: 1; }
.octo-code-pill { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background: var(--octo-light); border: 1px solid var(--octo-rule); border-radius: 999px; padding: 3px 10px; color: var(--octo-charcoal); }

/* Tags */
.octo-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--octo-text-xs); font-weight: 500; padding: 3px 10px; border-radius: var(--octo-radius-sm); background: var(--octo-light); color: var(--octo-grey); border: 1px solid var(--octo-rule); }
.octo-tag.teal { background: var(--octo-teal-ghost); color: var(--octo-teal); border-color: transparent; }
.octo-tag.warning { background: var(--octo-warning-light); color: var(--octo-warning); border-color: transparent; }
.octo-tag .fa-solid { font-size: 10px; }
/* A tag that acts as a link / quick filter (a <button>): same look, pointer, primary tone on hover. */
.octo-tag-link { cursor: pointer; font-family: inherit; line-height: 1.3; }
.octo-tag-link:hover, .octo-tag-link:focus-visible { background: var(--octo-teal-ghost); color: var(--octo-teal); border-color: transparent; outline: none; }

/* Progress */
.octo-progress { width: 100%; height: 6px; background: var(--octo-light); border-radius: var(--octo-radius-full); overflow: hidden; }
.octo-progress-fill { height: 100%; border-radius: var(--octo-radius-full); background: var(--octo-teal); transition: width 0.6s var(--octo-ease); }
.octo-progress-fill.gold { background: var(--octo-gold); }

/* KPI */
.octo-kpi-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--octo-rule); font-size: var(--octo-text-sm); }
.octo-kpi-row:last-child { border-bottom: none; }
.octo-kpi-label { color: var(--octo-grey); }
.octo-kpi-value { font-family: var(--octo-font-display); font-weight: 700; color: var(--octo-charcoal); }

/* Dashboard */
.octo-dashboard-section { margin-bottom: 24px; }
.octo-dashboard-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.octo-dashboard-grid { display: grid; gap: 16px; }
.octo-dashboard-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.octo-dashboard-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.octo-dashboard-grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
.octo-dashboard-stat-title { font-size: var(--octo-text-sm); color: var(--octo-grey); font-weight: 600; margin-bottom: 10px; }
.octo-dashboard-stat-pair { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.octo-dashboard-stat-main { font-family: var(--octo-font-display); font-size: var(--octo-text-2xl); font-weight: 800; color: var(--octo-charcoal); letter-spacing: -1px; line-height: 1; }
.octo-dashboard-stat-sub { font-size: var(--octo-text-sm); font-weight: 700; }
.octo-dashboard-stat-sub.success { color: var(--octo-success); }
.octo-dashboard-chart { position: relative; height: 300px; }
.octo-dashboard-links { display: flex; flex-direction: column; gap: 10px; }
.octo-dashboard-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-md); background: var(--octo-off); color: var(--octo-charcoal); text-decoration: none; transition: all var(--octo-duration) var(--octo-ease); }
.octo-dashboard-link:hover { background: var(--octo-card-bg); border-color: var(--octo-teal-soft); box-shadow: var(--octo-shadow-sm); transform: translateY(-1px); color: var(--octo-charcoal); }
.octo-dashboard-link-icon { width: 36px; height: 36px; border-radius: var(--octo-radius-md); background: var(--octo-teal-ghost); color: var(--octo-teal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.octo-dashboard-link-text { flex: 1; font-size: var(--octo-text-sm); font-weight: 600; }
.octo-dashboard-link-arrow { color: var(--octo-grey-light); font-size: var(--octo-text-xs); }
/* Attention list: the same link row carrying a count, a tone and an optional second line. .cols lays
   the rows out in a responsive grid instead of one column, for a card that holds several of them. */
.octo-dashboard-links.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: stretch; }
.octo-dashboard-link-count { font-family: var(--octo-font-display); font-weight: 700; font-size: var(--octo-text-md); margin-inline-end: 4px; }
.octo-dashboard-link-sub { display: block; font-weight: 400; font-size: var(--octo-text-xs); color: var(--octo-grey); margin-top: 2px; }
.octo-dashboard-link.warning .octo-dashboard-link-icon { background: var(--octo-warning-light); color: var(--octo-warning); }
.octo-dashboard-link.error .octo-dashboard-link-icon { background: var(--octo-error-light); color: var(--octo-error); }
.octo-dashboard-link.neutral .octo-dashboard-link-icon { background: var(--octo-light); color: var(--octo-grey); }
.octo-dashboard-link.warning .octo-dashboard-link-count { color: var(--octo-warning); }
.octo-dashboard-link.error .octo-dashboard-link-count { color: var(--octo-error); }
div.octo-dashboard-link { cursor: default; } /* a row the user cannot open: no hover lift */
div.octo-dashboard-link:hover { background: var(--octo-off); border-color: var(--octo-rule); box-shadow: none; transform: none; }

/* Toggle */
.octo-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--octo-text-sm); color: var(--octo-mid); }
.octo-toggle-track { width: 38px; height: 22px; border-radius: var(--octo-radius-full); background: var(--octo-rule); position: relative; transition: background var(--octo-duration) var(--octo-ease); }
.octo-toggle-track::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--octo-white); box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform var(--octo-duration) var(--octo-ease); }
.octo-toggle.on .octo-toggle-track { background: var(--octo-teal); }
.octo-toggle.on .octo-toggle-track::after { transform: translateX(16px); }


/* ── FILTER BAR (shared base) ── */
.octo-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--octo-rule);
  flex-wrap: wrap;
  background: var(--octo-off);
  overflow: hidden;
}

.octo-filter-bar .octo-input,
.octo-filter-bar .octo-select,
.octo-filter-panel .octo-input,
.octo-filter-panel .octo-select {
  width: auto;
  min-width: 160px;
  padding: 7px 12px;
  font-size: var(--octo-text-sm);
  background: var(--octo-white);
}

.octo-filter-bar .octo-select,
.octo-filter-panel .octo-select {
  padding-inline-end: 32px;
}

.octo-filter-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--octo-white);
  border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-md);
  padding: 7px 12px;
  min-width: 200px;
  transition: all var(--octo-duration) var(--octo-ease);
}

.octo-filter-search:focus-within {
  border-color: var(--octo-teal);
  box-shadow: 0 0 0 3px var(--octo-teal-ghost);
}

.octo-filter-search input {
  border: none;
  background: transparent;
  font-family: var(--octo-font-body);
  font-size: var(--octo-text-sm);
  color: var(--octo-charcoal);
  outline: none;
  width: 100%;
}

.octo-filter-search input::placeholder { color: var(--octo-grey-light); }
.octo-filter-search svg { width: 14px; height: 14px; color: var(--octo-grey-light); flex-shrink: 0; }

.octo-filter-spacer { flex: 1; }

.octo-filter-count {
  font-size: var(--octo-text-xs);
  color: var(--octo-grey);
  white-space: nowrap;
}

.octo-filter-count strong { color: var(--octo-charcoal); font-weight: 700; }


/* ── STATUS CHIPS (tabs above grid) ── */
.octo-status-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--octo-rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.octo-status-chips::-webkit-scrollbar { display: none; }

.octo-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--octo-radius-full);
  border: 1px solid var(--octo-rule);
  background: var(--octo-white);
  font-size: var(--octo-text-xs);
  font-weight: 600;
  color: var(--octo-grey);
  cursor: pointer;
  transition: all var(--octo-duration) var(--octo-ease);
  white-space: nowrap;
  font-family: var(--octo-font-body);
}

.octo-status-chip:hover {
  border-color: var(--octo-grey-light);
  color: var(--octo-charcoal);
  background: var(--octo-light);
}

.octo-status-chip.active {
  background: var(--octo-teal);
  border-color: var(--octo-teal);
  color: var(--octo-white);
}

.octo-status-chip .octo-chip-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--octo-radius-full);
  background: rgba(0,0,0,0.08);
  min-width: 18px;
  text-align: center;
}

.octo-status-chip.active .octo-chip-count {
  background: rgba(255,255,255,0.2);
}

/* Facet chip rows (OctoPageModel.FacetChipRows) sit right under the status chips: no gap between the rows,
   a small label in front, and a warning tone for a chip that flags a gap ("Not in a package"). */
.octo-facet-chips { padding-top: 0; margin-top: -4px; }
.octo-status-chips:not(.octo-facet-chips):has(+ .octo-facet-chips) { border-bottom: 0; padding-bottom: 8px; }
.octo-facet-chips-label { font-size: var(--octo-text-xs); font-weight: 600; color: var(--octo-grey-light); text-transform: uppercase; letter-spacing: 0.4px; margin-inline-end: 4px; white-space: nowrap; }
.octo-status-chip.warning:not(.active) { color: var(--octo-warning); border-color: var(--octo-warning-light); background: var(--octo-warning-light); }
.octo-status-chip.warning.active { background: var(--octo-warning); border-color: var(--octo-warning); }


/* ── FILTER TOGGLE BUTTON (for B.1) ── */
.octo-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 32px;
  border-radius: var(--octo-radius-md);
  border: 1px solid var(--octo-rule);
  background: var(--octo-white);
  font-family: var(--octo-font-body);
  font-size: var(--octo-text-xs);
  font-weight: 600;
  color: var(--octo-grey);
  cursor: pointer;
  transition: all var(--octo-duration) var(--octo-ease);
}

.octo-filter-toggle:hover {
  border-color: var(--octo-grey-light);
  color: var(--octo-charcoal);
}

.octo-filter-toggle.active {
  border-color: var(--octo-teal);
  color: var(--octo-teal);
  background: var(--octo-teal-ghost);
}

.octo-filter-toggle svg { width: 14px; height: 14px; }

.octo-filter-toggle-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--octo-radius-full);
  background: var(--octo-teal);
  color: var(--octo-white);
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}


/* ── FILTER PANEL (B.1 — toggle) ── */
.octo-filter-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--octo-ease);
  border-bottom: 1px solid transparent;
}

.octo-filter-panel.open {
  max-height: 720px; /* room for several rows of filter fields on narrow cards; the transition still animates */
  border-bottom-color: var(--octo-rule);
}

.octo-filter-panel-inner {
  padding: 16px 22px;
  background: var(--octo-off);
}


/* ── FILTER GRID (fields layout inside panels) ── */
.octo-filter-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.octo-filter-field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--octo-grey);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.octo-filter-field .octo-input,
.octo-filter-field .octo-select {
  width: 100%;
  min-width: 0;
}

/* Filter/Reset action row */
.octo-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
}

.octo-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--octo-font-body);
  font-size: var(--octo-text-xs);
  font-weight: 600;
  color: var(--octo-grey);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--octo-duration) var(--octo-ease);
}

.octo-filter-reset:hover { color: var(--octo-error); }
.octo-filter-reset svg { width: 13px; height: 13px; }


/* ── GRID TOOLBAR ── */
.octo-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--octo-rule);
  flex-wrap: wrap;
}

.octo-grid-toolbar-left,
.octo-grid-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.octo-grid-toolbar-title {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-md);
  font-weight: 700;
  color: var(--octo-charcoal);
  letter-spacing: -0.2px;
  margin-inline-end: 8px;
}


/* ── ROW ACTIONS ── */
.octo-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.octo-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--octo-font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 0 10px;
  height: 28px;
  border-radius: var(--octo-radius-sm);
  border: 1px solid var(--octo-rule);
  background: var(--octo-white);
  color: var(--octo-grey);
  cursor: pointer;
  transition: all var(--octo-duration) var(--octo-ease);
  white-space: nowrap;
}

.octo-row-btn:hover {
  background: var(--octo-light);
  color: var(--octo-charcoal);
  border-color: var(--octo-grey-light);
}

.octo-row-btn svg { width: 13px; height: 13px; }
.octo-row-btn.icon { padding: 0; width: 28px; } /* icon-only: the tooltip carries the name */

.octo-row-btn.primary {
  background: var(--octo-teal-ghost);
  border-color: transparent;
  color: var(--octo-teal);
}

.octo-row-btn.primary:hover {
  background: var(--octo-teal);
  color: var(--octo-white);
}

.octo-row-btn.danger {
  background: var(--octo-error-light);
  border-color: transparent;
  color: var(--octo-error);
}

.octo-row-btn.danger:hover {
  background: var(--octo-error);
  color: var(--octo-white);
}

/* An action that confirms or approves. It is NOT .primary: with a warm brand colour the primary tint sits right
   next to the destructive red, and Accept beside Reject becomes two orange-red buttons. Green reads as the
   opposite of red whatever the brand is — see grid-page.md, Row Action Standard. */
.octo-row-btn.success {
  background: var(--octo-success-light);
  border-color: transparent;
  color: var(--octo-success);
}

.octo-row-btn.success:hover {
  background: var(--octo-success);
  color: var(--octo-white);
}

/* 3-dot overflow button — same height as row-btn */
.octo-row-more {
  position: relative;
}

.octo-row-more-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--octo-radius-sm);
  border: 1px solid var(--octo-rule);
  background: var(--octo-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--octo-grey);
  transition: all var(--octo-duration) var(--octo-ease);
  letter-spacing: 1px;
  line-height: 1;
}

.octo-row-more-btn:hover {
  background: var(--octo-light);
  color: var(--octo-charcoal);
}


/* ── CONTEXT MENU ── */
.octo-context-menu {
  position: fixed;
  background: var(--octo-white);
  border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-lg);
  box-shadow: var(--octo-shadow-lg);
  z-index: 200;
  min-width: 180px;
  padding: 6px 0;
  animation: octo-ctx-in 0.12s var(--octo-ease);
}

@keyframes octo-ctx-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.octo-context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: var(--octo-text-sm);
  font-weight: 500;
  color: var(--octo-mid);
  cursor: pointer;
  transition: all 0.1s var(--octo-ease);
  border: none;
  background: none;
  width: 100%;
  text-align: start;
  font-family: var(--octo-font-body);
}

.octo-context-menu-item:hover {
  background: var(--octo-light);
  color: var(--octo-charcoal);
}

.octo-context-menu-item svg {
  width: 15px;
  height: 15px;
  color: var(--octo-grey-light);
  flex-shrink: 0;
}

.octo-context-menu-item:hover svg { color: var(--octo-grey); }

.octo-context-menu-divider {
  height: 1px;
  background: var(--octo-rule);
  margin: 4px 0;
}

.octo-context-menu-item.danger { color: var(--octo-error); }
.octo-context-menu-item.danger svg { color: var(--octo-error); }
.octo-context-menu-item.danger:hover { background: var(--octo-error-light); }


/* ═══════════════════════════════════════════
   FORM PAGE
   ═══════════════════════════════════════════ */

/* ── Page bar (back + title + actions) ── */
.octo-form-page-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.octo-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--octo-font-body);
  font-size: var(--octo-text-sm);
  font-weight: 600;
  color: var(--octo-grey);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  transition: color var(--octo-duration) var(--octo-ease);
}

.octo-back-btn:hover { color: var(--octo-teal); }
.octo-back-btn svg { width: 18px; height: 18px; }

.octo-form-page-title {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-2xl);
  font-weight: 800;
  color: var(--octo-charcoal);
  letter-spacing: -0.8px;
  flex: 1;
}

.octo-form-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}


/* ── Form container ── */
.octo-form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Sticky footers are rendered after the form container, so the page needs
     reserved bottom space to keep the last section visible while scrolling. */
  padding-bottom: var(--octo-form-footer-space, 104px);
}


/* ── Form section (fieldset) ── */
.octo-form-section {
  background: var(--octo-card-bg);
  border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-lg);
  box-shadow: var(--octo-shadow-card);
  overflow: hidden;
}

.octo-form-section-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--octo-rule);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.octo-form-section-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--octo-radius-md);
  background: var(--octo-teal-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.octo-form-section-icon svg {
  width: 18px;
  height: 18px;
  color: var(--octo-teal);
}

.octo-form-section-icon.gold { background: var(--octo-gold-light); }
.octo-form-section-icon.gold svg { color: var(--octo-gold); }

.octo-form-section-title {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-md);
  font-weight: 700;
  color: var(--octo-charcoal);
  letter-spacing: -0.2px;
}

.octo-form-section-desc {
  font-size: var(--octo-text-xs);
  color: var(--octo-grey);
  margin-top: 2px;
  line-height: 1.4;
}

.octo-form-section-body {
  padding: 24px;
}


/* ── Form grid (2-column by default) ── */
.octo-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.octo-form-grid .full-width {
  grid-column: 1 / -1;
}


/* ── Form field with label ── */
.octo-field {
  display: flex;
  flex-direction: column;
}

.octo-field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--octo-text-sm);
  font-weight: 600;
  color: var(--octo-charcoal);
  margin-bottom: 6px;
}

.octo-field-required {
  color: var(--octo-error);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.octo-field-hint {
  font-size: var(--octo-text-xs);
  color: var(--octo-grey-light);
  margin-top: 4px;
  line-height: 1.4;
}
.octo-field-hint.warning { color: var(--octo-warning); font-weight: 600; }

/* Server / unobtrusive validation. ASP.NET Core marks the message span .field-validation-error (and
   .field-validation-valid while there is nothing to say), the field .input-validation-error and the summary
   .validation-summary-errors / -valid. Keyed on THOSE classes, not on Bootstrap's .text-danger that the
   scaffolding also adds: the shell never loaded Bootstrap, so until this rule a validation message in a
   shell form rendered as plain body text and an invalid field looked like a valid one. */
.field-validation-error { display: block; margin-top: 4px; font-size: var(--octo-text-xs); font-weight: 500; line-height: 1.4; color: var(--octo-error); }
.octo-input.input-validation-error, .octo-select.input-validation-error, .octo-textarea.input-validation-error { border-color: var(--octo-error); }
.octo-input.input-validation-error:focus, .octo-select.input-validation-error:focus, .octo-textarea.input-validation-error:focus { box-shadow: 0 0 0 3px var(--octo-error-light); }
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-inline-start: 18px; }

/* Modal record context — a read-only recap (who / what / how much) of the record a modal acts on, so the
   operator confirms the target before deciding. Label/value pairs, auto-fitting columns. */
.octo-modal-context { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px; padding: 12px 14px; margin-bottom: 16px; background: var(--octo-off); border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-md); }
.octo-modal-context[hidden] { display: none; }
.octo-modal-context-label { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--octo-grey); margin-bottom: 2px; }
.octo-modal-context-value { font-size: var(--octo-text-sm); font-weight: 600; color: var(--octo-charcoal); overflow-wrap: anywhere; }
.octo-modal-context-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 500; }

/* Quick picks — one-tap canned values that fill the field under them (e.g. rejection reasons). */
.octo-quick-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.octo-quick-pick { font-family: inherit; font-size: var(--octo-text-xs); font-weight: 500; line-height: 1.3; padding: 5px 11px; border-radius: var(--octo-radius-full); border: 1px solid var(--octo-rule); background: var(--octo-white); color: var(--octo-charcoal); cursor: pointer; transition: border-color var(--octo-duration) var(--octo-ease), color var(--octo-duration) var(--octo-ease), background-color var(--octo-duration) var(--octo-ease); }
.octo-quick-pick:hover { border-color: var(--octo-teal); color: var(--octo-teal); }
.octo-quick-pick.active { background: var(--octo-teal-ghost); border-color: transparent; color: var(--octo-teal); }


/* ── Phone input with prefix ── */
.octo-phone-input {
  display: flex;
  gap: 0;
}

.octo-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--octo-light);
  border: 1px solid var(--octo-rule);
  border-inline-end: none;
  border-start-start-radius: var(--octo-radius-md); border-end-start-radius: var(--octo-radius-md);
  border-start-end-radius: 0; border-end-end-radius: 0;
  font-size: var(--octo-text-sm);
  font-weight: 600;
  color: var(--octo-grey);
  white-space: nowrap;
}

.octo-phone-input .octo-input {
  border-start-end-radius: var(--octo-radius-md); border-end-end-radius: var(--octo-radius-md);
  border-start-start-radius: 0; border-end-start-radius: 0;
}


/* ── Radio group ── */
.octo-radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.octo-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--octo-text-sm);
  color: var(--octo-mid);
  transition: color var(--octo-duration) var(--octo-ease);
}

.octo-radio:hover { color: var(--octo-charcoal); }

.octo-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--octo-teal);
  cursor: pointer;
  margin: 0;
}


/* ── Checkbox (single) ── */
.octo-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: var(--octo-text-sm);
  color: var(--octo-mid);
  line-height: 1.5;
}

.octo-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--octo-teal);
  cursor: pointer;
  margin: 0;
  margin-top: 1px;
  flex-shrink: 0;
}


/* ── File upload area ── */
.octo-file-upload {
  border: 2px dashed var(--octo-rule);
  border-radius: var(--octo-radius-lg);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--octo-duration) var(--octo-ease);
  background: var(--octo-off);
}

.octo-file-upload:hover {
  border-color: var(--octo-teal);
  background: var(--octo-teal-bg);
}

.octo-file-upload-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--octo-radius-full);
  background: var(--octo-teal-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.octo-file-upload-icon svg {
  width: 20px;
  height: 20px;
  color: var(--octo-teal);
}

.octo-file-upload-text {
  font-size: var(--octo-text-sm);
  color: var(--octo-grey);
}

.octo-file-upload-text strong {
  color: var(--octo-teal);
  font-weight: 600;
}

.octo-file-upload-hint {
  font-size: var(--octo-text-xs);
  color: var(--octo-grey-light);
  margin-top: 4px;
}

/* Uploaded file preview */
.octo-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--octo-off);
  border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-md);
  margin-top: 10px;
}

.octo-file-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--octo-radius-md);
  background: var(--octo-teal-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.octo-file-item-icon svg { width: 16px; height: 16px; color: var(--octo-teal); }

.octo-file-item-info { flex: 1; min-width: 0; }
.octo-file-item-name { font-size: var(--octo-text-sm); font-weight: 600; color: var(--octo-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.octo-file-item-size { font-size: var(--octo-text-xs); color: var(--octo-grey-light); }

.octo-file-item-remove {
  width: 24px; height: 24px;
  border-radius: var(--octo-radius-sm);
  border: none;
  background: none;
  color: var(--octo-grey-light);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--octo-duration) var(--octo-ease);
}

.octo-file-item-remove:hover { color: var(--octo-error); background: var(--octo-error-light); }
.octo-file-item-remove svg { width: 14px; height: 14px; }


/* ── Sticky form footer ── */
.octo-form-footer {
  position: sticky;
  bottom: 0;
  background: var(--octo-white);
  border-top: 1px solid var(--octo-rule);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
  z-index: 10;
  margin: 0 -28px -28px;
}

.octo-form-footer-left {
  margin-inline-end: auto;
  font-size: var(--octo-text-xs);
  color: var(--octo-grey-light);
}


/* ═══════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════ */

.octo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s var(--octo-ease);
}

.octo-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.octo-modal {
  background: var(--octo-white);
  border-radius: var(--octo-radius-xl);
  box-shadow: var(--octo-shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.25s var(--octo-ease);
}

.octo-modal-overlay.open .octo-modal {
  transform: translateY(0) scale(1);
}

.octo-modal.sm { max-width: 400px; }
.octo-modal.lg { max-width: 680px; }
.octo-modal.xl { max-width: 900px; }

.octo-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--octo-rule);
  flex-shrink: 0;
  gap: 12px;
}

.octo-modal-title {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-lg);
  font-weight: 700;
  color: var(--octo-charcoal);
  letter-spacing: -0.3px;
}

.octo-modal-subtitle {
  font-size: var(--octo-text-xs);
  color: var(--octo-grey);
  margin-top: 2px;
}

.octo-modal-close {
  width: 32px; height: 32px;
  border-radius: var(--octo-radius-md);
  border: none;
  background: var(--octo-light);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--octo-grey);
  flex-shrink: 0;
  transition: all var(--octo-duration) var(--octo-ease);
  font-size: 16px;
}

.octo-modal-close:hover { background: var(--octo-rule); color: var(--octo-charcoal); }

.octo-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.octo-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--octo-rule);
  background: var(--octo-off);
  border-radius: 0 0 var(--octo-radius-xl) var(--octo-radius-xl);
  flex-shrink: 0;
}

.octo-modal-footer-left { margin-inline-end: auto; }

/* ── Log viewer inside modal ── */
.octo-log-list { list-style: none; font-size: var(--octo-text-sm); }

.octo-log-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--octo-rule);
  align-items: flex-start;
}

.octo-log-item:last-child { border-bottom: none; }

.octo-log-time {
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-size: 11px;
  color: var(--octo-grey-light);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 110px;
  padding-top: 1px;
}

.octo-log-level {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
  flex-shrink: 0; min-width: 42px; text-align: center;
}

.octo-log-level.info    { background: var(--octo-info-light); color: var(--octo-info); }
.octo-log-level.success { background: var(--octo-success-light); color: var(--octo-success); }
.octo-log-level.warn    { background: var(--octo-warning-light); color: var(--octo-warning); }
.octo-log-level.error   { background: var(--octo-error-light); color: var(--octo-error); }
.octo-log-level.debug   { background: var(--octo-light); color: var(--octo-grey); }

.octo-log-msg { color: var(--octo-mid); line-height: 1.5; flex: 1; min-width: 0; }
.octo-log-msg strong { color: var(--octo-charcoal); font-weight: 600; }
.octo-log-msg code {
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-size: 11px;
  background: var(--octo-light);
  padding: 1px 5px; border-radius: 3px;
  color: var(--octo-teal-dim);
}

.octo-log-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--octo-rule);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .octo-modal { margin: 12px; max-height: calc(100vh - 24px); }
  .octo-modal-header { padding: 14px 16px; }
  .octo-modal-body { padding: 16px; }
  .octo-modal-footer { padding: 12px 16px; }
  .octo-log-time { min-width: auto; }
}


/* ═══════════════════════════════════════════
   DETAIL PAGE (read-only view)
   ═══════════════════════════════════════════ */

/* ── Detail header (identity + actions) ── */
.octo-detail-header {
  background: var(--octo-card-bg);
  border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-lg);
  box-shadow: var(--octo-shadow-card);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.octo-detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--octo-radius-full);
  background: var(--octo-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--octo-font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--octo-white);
  flex-shrink: 0;
}

.octo-detail-avatar.muted { background: var(--octo-grey-light); } /* an inactive / disabled record */
.octo-detail-avatar i { font-size: 26px; }
.octo-detail-avatar.gold {
  background: linear-gradient(135deg, var(--octo-gold), var(--octo-gold-hover));
}

.octo-detail-identity {
  flex: 1;
  min-width: 0;
}

.octo-detail-name {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-xl);
  font-weight: 800;
  color: var(--octo-charcoal);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.octo-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.octo-detail-id {
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-size: var(--octo-text-xs);
  color: var(--octo-grey);
  letter-spacing: 0.3px;
}

.octo-detail-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--octo-grey-light);
  flex-shrink: 0;
}

.octo-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}


/* ── Detail metrics row ── */
.octo-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.octo-detail-metric {
  background: var(--octo-card-bg);
  border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--octo-shadow-card);
  text-align: center;
}

.octo-detail-metric-value {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-xl);
  font-weight: 800;
  color: var(--octo-charcoal);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 4px;
}

.octo-detail-metric-label {
  font-size: var(--octo-text-xs);
  color: var(--octo-grey);
  font-weight: 500;
}


/* ── Detail sections (read-only cards) ── */
.octo-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.octo-detail-section {
  background: var(--octo-card-bg);
  border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-lg);
  box-shadow: var(--octo-shadow-card);
  overflow: hidden;
}

.octo-detail-section.full-width {
  grid-column: 1 / -1;
}

.octo-detail-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--octo-rule);
}

.octo-detail-section-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--octo-radius-md);
  background: var(--octo-teal-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.octo-detail-section-icon svg { width: 14px; height: 14px; color: var(--octo-teal); }
.octo-detail-section-icon i { font-size: 12px; color: var(--octo-teal); }
.octo-detail-section-icon.gold { background: var(--octo-gold-light); }
.octo-detail-section-icon.gold svg { color: var(--octo-gold); }

.octo-detail-section-title {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-sm);
  font-weight: 700;
  color: var(--octo-charcoal);
}

.octo-detail-section-body {
  padding: 18px 20px;
}


/* ── Read-only field pairs ── */
.octo-detail-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.octo-detail-fields .full-width { grid-column: 1 / -1; }

.octo-detail-field {}

.octo-detail-field-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--octo-grey-light);
  margin-bottom: 3px;
}

.octo-detail-field-value {
  font-size: var(--octo-text-sm);
  font-weight: 500;
  color: var(--octo-charcoal);
  line-height: 1.5;
}

.octo-detail-field-value.mono {
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--octo-grey);
}

.octo-detail-field-value.muted {
  color: var(--octo-grey-light);
  font-style: italic;
}

/* ── Detail page extras (support-facing detail pages, see form-page.md → Read-only detail page) ── */
/* Metric tone: colour the value by state so a stale login / expiring plan / device cap reads at a glance. */
.octo-detail-metric.success .octo-detail-metric-value { color: var(--octo-success); }
.octo-detail-metric.warning .octo-detail-metric-value { color: var(--octo-warning); }
.octo-detail-metric.error .octo-detail-metric-value { color: var(--octo-error); }
.octo-detail-metric.neutral .octo-detail-metric-value { color: var(--octo-grey); }
.octo-detail-metric-sub { font-size: var(--octo-text-xs); color: var(--octo-grey-light); margin-top: 6px; line-height: 1.4; }

/* Field value with inline quick actions (call / message / copy) — value first, icon buttons after. */
.octo-detail-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.octo-detail-inline > .octo-detail-field-value { min-width: 0; overflow-wrap: anywhere; }
.octo-detail-icon-btn {
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-sm);
  background: var(--octo-white); color: var(--octo-grey); font-size: 12px;
  text-decoration: none; cursor: pointer;
  transition: all var(--octo-duration) var(--octo-ease);
}
.octo-detail-icon-btn:hover, .octo-detail-icon-btn:focus-visible { color: var(--octo-teal); border-color: var(--octo-teal-light); background: var(--octo-teal-bg); }
.octo-detail-icon-btn.done { color: var(--octo-success); border-color: var(--octo-success-light); background: var(--octo-success-light); }
/* Destructive row action as a compact icon button (tooltip + aria-label carry the verb). */
.octo-detail-icon-btn.danger { color: var(--octo-error); border-color: var(--octo-error-light); background: var(--octo-error-light); }
.octo-detail-icon-btn.danger:hover, .octo-detail-icon-btn.danger:focus-visible { color: var(--octo-white); background: var(--octo-error); border-color: var(--octo-error); }
.octo-detail-link { color: var(--octo-charcoal); text-decoration: none; }
.octo-detail-link:hover { color: var(--octo-teal); text-decoration: underline; }
.octo-detail-link.accent { color: var(--octo-teal); font-weight: 600; font-size: var(--octo-text-xs); white-space: nowrap; } /* an action-like link next to a value ("Manage") */

/* Jump row: anchor links to the page's sections. Hidden on desktop (sections sit side by side),
   shown on phones/tablets where everything stacks and the reader needs to get to Subscriptions or
   Orders without scrolling through the profile. */
.octo-detail-jumps { display: none; }

/* Record cards: a small, bounded sub-collection (a student's two or three subscriptions, a handful of
   documents) shown as cards inside a detail section instead of a grid — title + status badge, a few
   fields, an actions row. Use a grid when the collection is unbounded or needs paging/sorting. */
.octo-detail-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.octo-detail-card {
  border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-md); background: var(--octo-off);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.octo-detail-card.muted { opacity: 0.72; }
.octo-detail-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.octo-detail-card-title { font-family: var(--octo-font-display); font-size: var(--octo-text-base); font-weight: 700; color: var(--octo-charcoal); line-height: 1.3; overflow-wrap: anywhere; }
.octo-detail-card-subtitle { font-size: var(--octo-text-xs); color: var(--octo-grey); margin-top: 2px; }
.octo-detail-card .octo-detail-fields { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.octo-detail-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.octo-detail-card-actions .octo-btn { flex: 1 1 auto; justify-content: center; }

/* Tabs on a detail page: real <button>s wearing the .octo-tab visual, an optional count pill, and
   panels toggled with the hidden attribute (a rarely used panel, e.g. Orders, loads on first open). */
.octo-tabs button.octo-tab { background: none; border: 0; border-bottom: 2px solid transparent; font-family: inherit; }
.octo-tabs button.octo-tab.active { border-bottom-color: var(--octo-teal); }
.octo-tab-count { display: inline-block; min-width: 18px; padding: 0 6px; margin-inline-start: 6px; border-radius: var(--octo-radius-full); background: var(--octo-light); color: var(--octo-grey); font-size: 10px; line-height: 18px; text-align: center; }
.octo-tab.active .octo-tab-count { background: var(--octo-teal-ghost); color: var(--octo-teal); }
.octo-detail-tabs { margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.octo-detail-tabs::-webkit-scrollbar { display: none; }

/* A metric tile that opens something (a tab, a modal). */
.octo-detail-metric.clickable { cursor: pointer; transition: box-shadow var(--octo-duration) var(--octo-ease), transform var(--octo-duration) var(--octo-ease); }
.octo-detail-metric.clickable:hover { box-shadow: var(--octo-shadow-md); transform: translateY(-1px); }

/* Flag chip (flag-icons `.fi` sprite inside a badge / meta row). */
.octo-flag { display: inline-block; width: 16px; height: 12px; border-radius: 2px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(12,19,34,0.08); vertical-align: -1px; }
/* Small leading icon inside a detail value (e.g. the language icon before a language name). */
.octo-detail-value-icon { color: var(--octo-grey-light); margin-inline-end: 6px; font-size: 12px; }
/* Compact meter under a value (e.g. AI credits left); tones extend the shared progress bar. */
.octo-detail-meter { margin-top: 6px; }
.octo-progress-fill.warning { background: var(--octo-warning); }
.octo-progress-fill.error { background: var(--octo-error); }

/* Dense field grid for a merged profile panel: as many short fields per row as fit; long values
   (phone with its action buttons, email) take .full-width. .octo-detail-group labels a sub-group. */
.octo-detail-fields.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
@media (min-width: 901px) { .octo-detail-fields.dense { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* fixed columns keep labels aligned across rows */
.octo-detail-fields.dense > .wide { grid-column: span 2; } /* a long value (phone + buttons, email) takes two slots, not the whole row */
.octo-detail-group { grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--octo-grey); border-top: 1px solid var(--octo-rule); padding-top: 12px; margin-top: 2px; }

/* Compact expandable rows for a bounded sub-collection (subscriptions, devices): one line with the
   values people act on plus the actions, a chevron reveals the rest. Preferred over record cards
   when the items are few and the page is wide — cards leave the right side empty. */
.octo-detail-rows { display: flex; flex-direction: column; gap: 8px; max-width: 1080px; } /* capped so values and actions stay close on wide screens */
.octo-detail-row { border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-md); background: var(--octo-off); min-width: 0; }
.octo-detail-row.muted .octo-detail-row-main { opacity: 0.72; }
.octo-detail-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 14px; }
.octo-detail-row-title { flex: 0 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.octo-detail-row-title .octo-badge { align-self: flex-start; }
.octo-detail-row-cell { flex: 0 1 auto; min-width: 110px; }
.octo-detail-row-cell .octo-detail-meter { width: 120px; }
.octo-detail-row-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.octo-detail-row-toggle i { transition: transform var(--octo-duration) var(--octo-ease); }
.octo-detail-row-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.octo-detail-row-details { border-top: 1px solid var(--octo-rule); padding: 12px 14px 14px; background: var(--octo-card-bg); border-radius: 0 0 var(--octo-radius-md) var(--octo-radius-md); }
/* Sub-list inside an expanded row: one entry per issued license key (value + copy, state, dates). */
.octo-detail-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 24px; }
.octo-detail-key { min-width: 0; }
.octo-detail-key.muted { opacity: 0.6; }
.octo-detail-key-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 3px; }
.octo-detail-key-meta .octo-detail-card-subtitle { margin-top: 0; }

/* Section header tools (a switch, a danger button) aligned to the right of the title. */
.octo-detail-section-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.octo-detail-section-tools label { font-size: var(--octo-text-xs); color: var(--octo-grey); display: inline-flex; align-items: center; gap: 8px; margin: 0; }

@media (max-width: 600px) {
  .octo-detail-fields.dense { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .octo-detail-row-actions { width: 100%; margin-inline-start: 0; }
  .octo-detail-row-actions .octo-btn { flex: 1 1 auto; justify-content: center; }
  .octo-detail-section-tools { width: 100%; margin-inline-start: 0; }
  .octo-detail-section-tools .octo-btn { flex: 1 1 auto; justify-content: center; }
  .octo-detail-section-header { flex-wrap: wrap; }
}

/* Detail-section titles become anchor targets; offset them under the sticky top bar. */
.octo-detail-section[id] { scroll-margin-top: calc(var(--topbar-height, 64px) + 12px); }

@media (max-width: 900px) {
  .octo-detail-jumps {
    display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-bottom: 2px solid var(--octo-rule); margin-bottom: 16px; scrollbar-width: none;
  }
  .octo-detail-jumps::-webkit-scrollbar { display: none; }
  .octo-detail-jumps .octo-tab { text-decoration: none; }
  .octo-detail-header { gap: 14px; }
  .octo-detail-actions { width: 100%; }
}

@media (max-width: 600px) {
  .octo-detail-actions .octo-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .octo-detail-metrics { grid-template-columns: 1fr 1fr; }
  .octo-detail-metric { text-align: start; padding: 12px 14px; }
}


/* ── Timeline / Activity ── */
.octo-timeline {
  list-style: none;
}

.octo-timeline-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  position: relative;
}

.octo-timeline-item:not(:last-child) { border-bottom: 1px solid var(--octo-rule); }

.octo-timeline-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}

.octo-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--octo-teal);
  background: var(--octo-white);
  flex-shrink: 0;
}

.octo-timeline-dot.filled { background: var(--octo-teal); }
.octo-timeline-dot.gold   { border-color: var(--octo-gold); }
.octo-timeline-dot.gold.filled { background: var(--octo-gold); }
.octo-timeline-dot.success { border-color: var(--octo-success); }
.octo-timeline-dot.success.filled { background: var(--octo-success); }
.octo-timeline-dot.error   { border-color: var(--octo-error); }
.octo-timeline-dot.error.filled { background: var(--octo-error); }

.octo-timeline-body { flex: 1; min-width: 0; }

.octo-timeline-text {
  font-size: var(--octo-text-sm);
  color: var(--octo-mid);
  line-height: 1.5;
}

.octo-timeline-text strong { color: var(--octo-charcoal); font-weight: 600; }

.octo-timeline-time {
  font-size: 10px;
  color: var(--octo-grey-light);
  margin-top: 2px;
}

/* Loading / nothing-recorded line for a timeline that is filled by page JS (e.g. a record history modal). */
.octo-timeline-empty { padding: 18px 4px; font-size: var(--octo-text-sm); color: var(--octo-grey); text-align: center; }


/* ── Input group (prefix/suffix) ── */
.octo-input-group {
  display: flex;
}

.octo-input-addon {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--octo-light);
  border: 1px solid var(--octo-rule);
  font-size: var(--octo-text-sm);
  font-weight: 500;
  color: var(--octo-grey);
  white-space: nowrap;
}

.octo-input-addon:first-child {
  border-inline-end: none;
  border-start-start-radius: var(--octo-radius-md); border-end-start-radius: var(--octo-radius-md);
  border-start-end-radius: 0; border-end-end-radius: 0;
}

.octo-input-addon:last-child {
  border-inline-start: none;
  border-start-end-radius: var(--octo-radius-md); border-end-end-radius: var(--octo-radius-md);
  border-start-start-radius: 0; border-end-start-radius: 0;
}

.octo-input-group .octo-input {
  border-radius: 0;
}

.octo-input-group .octo-input:first-child { border-start-start-radius: var(--octo-radius-md); border-end-start-radius: var(--octo-radius-md);
  border-start-end-radius: 0; border-end-end-radius: 0; }
.octo-input-group .octo-input:last-child { border-start-end-radius: var(--octo-radius-md); border-end-end-radius: var(--octo-radius-md);
  border-start-start-radius: 0; border-end-start-radius: 0; }


/* Mobile overlay */
.octo-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 35; opacity: 0; transition: opacity 0.3s var(--octo-ease); }
.octo-sidebar-overlay.visible { opacity: 1; }
/* Mobile drawer backdrop: on small screens it is display:block (so it can fade in), but while hidden
   it must not swallow taps and touch-scrolls meant for the page underneath. */
.octo-sidebar-overlay:not(.visible) { pointer-events: none; }


/* ── NOTIFICATIONS PANEL ── */
.octo-notif-wrapper {
  position: relative;
}

.octo-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 380px;
  max-height: 480px;
  background: var(--octo-white);
  border: 1px solid var(--octo-rule);
  border-radius: var(--octo-radius-lg);
  box-shadow: var(--octo-shadow-lg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s var(--octo-ease);
}

.octo-notif-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.octo-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--octo-rule);
  flex-shrink: 0;
}

.octo-notif-title {
  font-family: var(--octo-font-display);
  font-size: var(--octo-text-md);
  font-weight: 700;
  color: var(--octo-charcoal);
}

.octo-notif-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--octo-error);
  color: var(--octo-white);
  padding: 2px 8px;
  border-radius: var(--octo-radius-full);
}

.octo-notif-mark {
  font-size: var(--octo-text-xs);
  color: var(--octo-teal);
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--octo-font-body);
}

.octo-notif-mark:hover { text-decoration: underline; }

.octo-notif-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  max-height: 340px;
}

.octo-notif-list::-webkit-scrollbar { width: 4px; }
.octo-notif-list::-webkit-scrollbar-thumb { background: var(--octo-rule); border-radius: 4px; }

.octo-notif-entry {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--octo-rule);
  cursor: pointer;
  transition: background var(--octo-duration) var(--octo-ease);
}

.octo-notif-entry:hover { background: var(--octo-off); }
.octo-notif-entry:last-child { border-bottom: none; }

.octo-notif-entry.unread { background: var(--octo-teal-bg); }
.octo-notif-entry.unread:hover { background: var(--octo-teal-ghost); }

.octo-notif-icon {
  width: 32px; height: 32px;
  border-radius: var(--octo-radius-full);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.octo-notif-icon.teal    { background: var(--octo-teal-ghost); }
.octo-notif-icon.gold    { background: var(--octo-gold-light); }
.octo-notif-icon.success { background: var(--octo-success-light); }
.octo-notif-icon.error   { background: var(--octo-error-light); }
.octo-notif-icon.warning { background: var(--octo-warning-light); }

.octo-notif-body { flex: 1; min-width: 0; }

.octo-notif-text {
  font-size: var(--octo-text-sm);
  color: var(--octo-mid);
  line-height: 1.45;
}

.octo-notif-text strong { color: var(--octo-charcoal); font-weight: 600; }

.octo-notif-meta {
  font-size: 10px;
  color: var(--octo-grey-light);
  margin-top: 3px;
}

.octo-notif-unread-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--octo-teal);
  flex-shrink: 0;
  margin-top: 6px;
}

.octo-notif-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--octo-rule);
  text-align: center;
  flex-shrink: 0;
}

.octo-notif-footer a {
  font-size: var(--octo-text-sm);
  font-weight: 600;
  color: var(--octo-teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.octo-notif-footer a:hover { text-decoration: underline; }

.octo-notif-empty {
  padding: 40px 18px;
  text-align: center;
  color: var(--octo-grey-light);
  font-size: var(--octo-text-sm);
}

@media (max-width: 600px) {
  .octo-notif-panel { width: calc(100vw - 32px); inset-inline-end: -8px; }
}


/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1200px) {
  .octo-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .octo-dashboard-card-grid { grid-template-columns: repeat(2, 1fr); }
  .octo-dashboard-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .octo-dashboard-grid-2-1 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .octo-sidebar { transform: translateX(-100%); width: 264px !important; }
  .octo-sidebar.open { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,0.3); }
  .octo-sidebar.open.collapsed { width: 264px !important; }
  .octo-sidebar.open .octo-sidebar-logo { flex-direction: row !important; padding: 0 16px !important; height: var(--topbar-height) !important; min-height: var(--topbar-height) !important; }
  .octo-sidebar.open .octo-sidebar-logo > svg { width: 48px !important; height: 24px !important; margin: 0 !important; }
  .octo-sidebar.open .octo-sidebar-logo-text { display: inline !important; }
  .octo-sidebar.open .octo-sidebar-section { padding: 16px 10px 4px !important; }
  .octo-sidebar.open .octo-sidebar-section-title { display: block !important; margin-bottom: 6px !important; padding: 0 8px !important; }
  .octo-sidebar.open .octo-sidebar-item,
  .octo-sidebar.open .octo-sidebar-group-toggle { width: 100% !important; height: auto !important; padding: 9px 12px !important; justify-content: flex-start !important; gap: 12px !important; margin: 0 !important; }
  .octo-sidebar.open .octo-sidebar-item-text,
  .octo-sidebar.open .octo-sidebar-badge,
  .octo-sidebar.open .octo-sidebar-chevron { display: inline-flex !important; }
  .octo-sidebar.open .octo-sidebar-badge { padding: 2px 7px !important; min-width: 20px !important; }
  .octo-sidebar.open .octo-sidebar-chevron { opacity: 0.3 !important; width: 16px !important; }
  .octo-sidebar.open .octo-sidebar-env { display: flex !important; padding: 10px 16px !important; justify-content: flex-start !important; }
  .octo-sidebar.open .octo-sidebar-env-meta { display: block !important; }
  .octo-sidebar.open .octo-sidebar-user { padding: 12px 16px !important; justify-content: flex-start !important; gap: 10px !important; }
  .octo-sidebar.open .octo-sidebar-user-info { display: block !important; }
  .octo-sidebar.open .octo-sidebar-collapse-btn { display: none; }
  .octo-sidebar.open .octo-sidebar-tooltip { display: none !important; }
  .octo-sidebar-overlay { display: block; }
  .octo-main { margin-inline-start: 0 !important; }
  .octo-hamburger { display: flex; }
  .octo-topbar { padding: 0 16px; gap: 10px; }
  .octo-topbar-breadcrumb { display: none; }
  .octo-topbar-search { min-width: 0; flex: 1; }
  .octo-content { padding: 20px 16px; }
  .octo-page-footer { padding: 16px; }
  .octo-two-col { grid-template-columns: 1fr; }
  .octo-page-header-row { flex-direction: column; align-items: flex-start; }
  .octo-page-title { font-size: var(--octo-text-xl); }
  .octo-filter-bar { padding: 12px 16px; }
  .octo-filter-search { min-width: 100%; }
  .octo-grid-toolbar { padding: 12px 16px; }
  .octo-filter-panel-inner { padding: 14px 16px; }
  .octo-status-chips { padding: 10px 16px; gap: 4px; }
  .octo-form-grid { grid-template-columns: 1fr; }
  .octo-form-section-body { padding: 18px 16px; }
  .octo-form-section-header { padding: 14px 16px; }
  .octo-form-page-bar { gap: 10px; }
  .octo-form-page-title { font-size: var(--octo-text-xl); }
  .octo-detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .octo-detail-grid { grid-template-columns: 1fr; }
  .octo-detail-header { padding: 18px 16px; }
  .octo-detail-section-body { padding: 16px; }
  .octo-detail-fields { grid-template-columns: 1fr 1fr; }
  .octo-form-footer { padding: 14px 16px; margin: 0 -16px -20px; }
  .octo-form-container { padding-bottom: var(--octo-form-footer-space, 120px); }
}

@media (max-width: 600px) {
  .octo-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* two-up on phones keeps the grid area usable */
  .octo-dashboard-card-grid { grid-template-columns: 1fr; gap: 10px; }
  .octo-dashboard-grid-2,
  .octo-dashboard-grid-3,
  .octo-dashboard-grid-2-1 { grid-template-columns: 1fr; }
  .octo-stat-value { font-size: var(--octo-text-xl); }
  .octo-dashboard-stat-main { font-size: var(--octo-text-xl); }
  .octo-topbar-search { display: none; }
  .octo-topbar-title { font-size: var(--octo-text-md); }
  .octo-card-header { padding: 14px 16px; }
  .octo-card-body { padding: 16px; }
  .octo-card-footer { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .octo-pagination { flex-wrap: wrap; }
  .octo-chart-area { height: 180px; }
  .octo-dashboard-chart { height: 240px; }
  .octo-btn { padding: 7px 14px; font-size: 12px; }
  .octo-page-footer { flex-direction: column; text-align: center; gap: 4px; }
  .octo-row-btn span { display: none; }
  .octo-row-btn { padding: 5px; }
  .octo-filter-bar .octo-select { min-width: 100%; }
  .octo-filter-fields { grid-template-columns: 1fr; }
  .octo-grid-toolbar { flex-direction: column; align-items: flex-start; }
  /* Fill-viewport grid pages: on a phone everything above the rows has to be short, or the list gets less
     than half the screen. Subtitle hidden, stat cards become one compact strip (label + number; swipe
     sideways if they do not fit), and the toolbar stays on one row with icon-only buttons. */
  .octo-app:has(.octo-grid-card) .octo-content { padding-top: 12px; }
  .octo-app:has(.octo-grid-card) .octo-page-header { margin-bottom: 10px; }
  .octo-app:has(.octo-grid-card) .octo-page-subtitle { display: none; }
  .octo-app:has(.octo-grid-card) .octo-stats-grid { display: flex; gap: 8px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
  .octo-app:has(.octo-grid-card) .octo-stats-grid::-webkit-scrollbar { display: none; }
  .octo-app:has(.octo-grid-card) .octo-stats-grid .octo-stat-card { flex: 1 0 auto; min-width: 96px; padding: 8px 12px 7px; }
  .octo-app:has(.octo-grid-card) .octo-stats-grid .octo-stat-hint,
  .octo-app:has(.octo-grid-card) .octo-stats-grid .octo-stat-icon { display: none; }
  .octo-app:has(.octo-grid-card) .octo-stats-grid .octo-stat-label { padding-inline-end: 0; margin-bottom: 2px; white-space: nowrap; }
  .octo-app:has(.octo-grid-card) .octo-stats-grid .octo-stat-value { font-size: var(--octo-text-lg); margin-bottom: 0; }
  .octo-app:has(.octo-grid-card) .octo-grid-toolbar { flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 10px 12px; gap: 8px; }
  .octo-app:has(.octo-grid-card) .octo-grid-toolbar-left { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
  .octo-app:has(.octo-grid-card) .octo-grid-toolbar-right { flex: 0 0 auto; flex-wrap: nowrap; }
  .octo-app:has(.octo-grid-card) .octo-grid-toolbar .octo-filter-search { min-width: 0; flex: 1 1 auto; }
  .octo-app:has(.octo-grid-card) .octo-grid-toolbar .k-button:has(.k-button-icon) .k-button-text { display: none; }
  .octo-app:has(.octo-grid-card) .octo-status-chips { padding: 8px 12px; }
  .octo-status-chip { font-size: 10px; padding: 5px 10px; }
  .octo-form-page-bar { flex-direction: column; align-items: flex-start; }
  .octo-form-page-actions { width: 100%; }
  .octo-form-page-actions .octo-btn { flex: 1; }
  .octo-form-footer { flex-wrap: wrap; }
  .octo-form-container { padding-bottom: var(--octo-form-footer-space, 148px); }
  .octo-radio-group { flex-direction: column; gap: 10px; }
  .octo-detail-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .octo-detail-metric { padding: 14px; }
  .octo-detail-metric-value { font-size: var(--octo-text-lg); }
  .octo-detail-fields { grid-template-columns: 1fr; }
  .octo-detail-avatar { width: 48px; height: 48px; font-size: 18px; }
  .octo-detail-name { font-size: var(--octo-text-lg); }
  .octo-detail-actions { width: 100%; }
}

/* ═══════════════════════════════════════════
   SETTINGS WORKSPACE
   One long settings form split into tabs: a grouped tab rail on the left (a sticky, swipeable strip
   on phones) and one visible panel at a time. Every panel stays inside the same <form>, so a single
   Save still posts all tabs. Behaviour (switching, unsaved/error marks, search) is OctoSettings in
   octo-theme.js; the page opts in with data-octo-settings on the .octo-settings element.
   ═══════════════════════════════════════════ */
.octo-settings { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 28px; }
/* Short tabs must not pull the sticky save footer up the page: the content column becomes a flex
   column and the footer is pushed to its end. */
.octo-content:has(> .octo-settings) { display: flex; flex-direction: column; }
.octo-content:has(> .octo-settings) > .octo-form-footer { margin-top: auto; }
.octo-settings-nav {
  position: sticky; top: calc(var(--topbar-height) + 16px);
  max-height: calc(100vh - var(--topbar-height) - 120px); overflow-y: auto;
  background: var(--octo-card-bg); border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-lg);
  box-shadow: var(--octo-shadow-card); padding: 10px;
}
.octo-settings-search { position: relative; margin-bottom: 6px; }
.octo-settings-search i { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--octo-grey-light); pointer-events: none; }
.octo-settings-search .octo-input { padding: 7px 10px 7px 30px; font-size: var(--octo-text-sm); }
.octo-settings-tabs { display: flex; flex-direction: column; gap: 2px; }
.octo-settings-nav-group { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--octo-grey-light); padding: 12px 10px 4px; }
.octo-settings-nav-group:first-child { padding-top: 4px; }
.octo-settings-tab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--octo-radius-md); background: none;
  font-family: inherit; font-size: var(--octo-text-sm); font-weight: 600; color: var(--octo-mid);
  text-align: start; cursor: pointer; transition: background var(--octo-duration) var(--octo-ease), color var(--octo-duration) var(--octo-ease);
}
.octo-settings-tab > i { width: 16px; text-align: center; font-size: 13px; color: var(--octo-grey-light); flex-shrink: 0; }
.octo-settings-tab:hover { background: var(--octo-light); color: var(--octo-charcoal); }
.octo-settings-tab:focus-visible { outline: 2px solid var(--octo-teal); outline-offset: 1px; }
.octo-settings-tab.active { background: var(--octo-teal-ghost); color: var(--octo-teal); }
.octo-settings-tab.active > i { color: var(--octo-teal); }
.octo-settings-tab[hidden], .octo-settings-nav-group[hidden] { display: none; }
.octo-settings-tab-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Right-hand mark on a tab: unsaved dot, validation-error count, or search-match count. */
.octo-settings-tab-mark { flex-shrink: 0; display: none; min-width: 18px; padding: 0 6px; border-radius: var(--octo-radius-full); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.octo-settings-tab.is-dirty .octo-settings-tab-mark { display: block; min-width: 8px; width: 8px; height: 8px; padding: 0; background: var(--octo-warning); }
.octo-settings-tab.has-match .octo-settings-tab-mark { display: block; width: auto; height: auto; padding: 0 6px; min-width: 18px; background: var(--octo-teal-ghost); color: var(--octo-teal); }
.octo-settings-tab.has-error .octo-settings-tab-mark { display: block; width: auto; height: auto; padding: 0 6px; min-width: 18px; background: var(--octo-error-light); color: var(--octo-error); }
.octo-settings-tab.has-error, .octo-settings-tab.has-error > i { color: var(--octo-error); }
.octo-settings-empty { padding: 14px 10px; font-size: var(--octo-text-xs); color: var(--octo-grey); }
.octo-settings-body { min-width: 0; }
.octo-settings-panel { display: flex; flex-direction: column; gap: 20px; }
.octo-settings-panel[hidden] { display: none; }
.octo-settings-panel:focus { outline: none; }
.octo-settings-note { display: flex; align-items: center; gap: 8px; font-size: var(--octo-text-xs); color: var(--octo-grey); }
.octo-settings-note i { color: var(--octo-info); }
.octo-field.is-match .octo-field-label { width: fit-content; }
.octo-field.is-match .octo-field-label, .octo-setting-row.is-match .octo-setting-row-title { background: var(--octo-gold-light); border-radius: 3px; box-shadow: 0 0 0 3px var(--octo-gold-light); }
.octo-form-footer-left.is-dirty { color: var(--octo-warning); font-weight: 600; }

/* Titled sub-block inside one form section (one block per external service, etc.). */
.octo-form-subsection + .octo-form-subsection { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--octo-rule); }
.octo-form-subsection-title { font-weight: 700; font-size: var(--octo-text-sm); color: var(--octo-charcoal); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 12px; }
.octo-form-section-icon i { font-size: 15px; color: var(--octo-teal); }
.octo-form-section-icon.gold i { color: var(--octo-gold); }
.octo-form-section-icon.muted { background: var(--octo-light); }
.octo-form-section-icon.muted i, .octo-form-section-icon.muted svg { color: var(--octo-grey); }
.octo-form-section-header .octo-badge { margin-inline-start: auto; align-self: center; }
.octo-form-section-tools { margin-inline-start: auto; align-self: center; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.octo-form-section-tools .octo-badge { margin-inline-start: 0; }

/* On/off settings: one row per flag — title + what it does on the left, a switch on the right.
   The row is a <label>, so the whole line toggles the (real, form-posted) checkbox. */
.octo-setting-list { display: flex; flex-direction: column; }
.octo-setting-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--octo-rule); cursor: pointer; }
.octo-setting-row:first-child { padding-top: 0; }
.octo-setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.octo-setting-row-text { flex: 1; min-width: 0; }
.octo-setting-row-title { display: inline; font-size: var(--octo-text-sm); font-weight: 600; color: var(--octo-charcoal); }
.octo-setting-row-desc { display: block; font-size: var(--octo-text-xs); color: var(--octo-grey); margin-top: 2px; line-height: 1.45; }
.octo-switch { position: relative; display: inline-block; vertical-align: middle; flex-shrink: 0; width: 38px; height: 22px; cursor: pointer; }
.octo-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.octo-switch-track { position: absolute; inset: 0; border-radius: var(--octo-radius-full); background: var(--octo-rule); transition: background var(--octo-duration) var(--octo-ease); }
.octo-switch-track::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--octo-white); box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform var(--octo-duration) var(--octo-ease); }
.octo-switch input:checked + .octo-switch-track { background: var(--octo-teal); }
.octo-switch input:checked + .octo-switch-track::after { transform: translateX(16px); }
.octo-switch input:focus-visible + .octo-switch-track { box-shadow: 0 0 0 3px var(--octo-teal-ghost); }

/* Secret values (API secrets, gateway passwords): dots until the eye button is pressed. The input
   stays type="text" on purpose — a type="password" field invites the browser's password manager to
   autofill or offer to save it. Browsers without text-security simply show the value. */
.octo-secret .octo-input.is-masked { -webkit-text-security: disc; }
.octo-secret button.octo-input-addon { font-family: inherit; cursor: pointer; color: var(--octo-grey); }
.octo-secret button.octo-input-addon:hover { color: var(--octo-teal); }

/* Image setting: current image preview next to its file input. */
.octo-image-field { display: flex; align-items: center; gap: 14px; }
.octo-image-field-preview { width: 84px; height: 84px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--octo-rule); border-radius: var(--octo-radius-md); background: var(--octo-off); color: var(--octo-grey-light); font-size: 22px; overflow: hidden; }
.octo-image-field-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.octo-image-field-preview img[hidden], .octo-image-field-preview img:not([hidden]) + i { display: none; }
.octo-image-field-body { flex: 1; min-width: 0; }

/* Switch row: a (Kendo or octo) switch with its state text beside it, for a switch that is its own field
   rather than a setting-list row. The text can be swapped by script ("Left-to-right" / "Right-to-left"). */
.octo-switch-row { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.octo-switch-row-text { font-size: var(--octo-text-sm); font-weight: 500; color: var(--octo-charcoal); line-height: 1.4; }

/* Colour presets under a colour picker: one-tap swatches; .active marks the one equal to the picker's value. */
.octo-color-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.octo-color-pick { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); transition: transform var(--octo-duration) var(--octo-ease), box-shadow var(--octo-duration) var(--octo-ease); }
.octo-color-pick:hover { transform: scale(1.12); }
.octo-color-pick.active { box-shadow: 0 0 0 2px var(--octo-white), 0 0 0 4px var(--octo-charcoal); }
.octo-color-pick:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--octo-white), 0 0 0 4px var(--octo-teal); }

/* Tab mark: a small state glyph after a tab's text (one form tab per language: filled / missing). */
.octo-tab-mark { display: inline-block; margin-inline-start: 6px; font-size: 12px; line-height: 1; vertical-align: -1px; }
.octo-tab-mark:empty { display: none; }
.octo-tab-mark.filled { color: var(--octo-success); }
.octo-tab-mark.missing { color: var(--octo-warning); }

/* Check chips: a short multi-select (2–6 options) as pill labels around real checkboxes, ticked ones tinted. */
.octo-check-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.octo-check-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-full); background: var(--octo-white); font-size: var(--octo-text-sm); font-weight: 500; color: var(--octo-charcoal); cursor: pointer; user-select: none; transition: border-color var(--octo-duration) var(--octo-ease), background-color var(--octo-duration) var(--octo-ease), color var(--octo-duration) var(--octo-ease); }
.octo-check-chip input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--octo-teal); cursor: pointer; }
.octo-check-chip:hover { border-color: var(--octo-teal); }
.octo-check-chip:has(input:checked) { background: var(--octo-teal-ghost); border-color: transparent; color: var(--octo-teal); }

@media (max-width: 900px) {
  .octo-settings { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .octo-settings-nav {
    top: var(--topbar-height); z-index: 20; max-height: none; overflow: visible;
    margin: 0 -16px; padding: 8px 16px; border-width: 0 0 1px; border-radius: 0; box-shadow: var(--octo-shadow-sm);
  }
  .octo-settings-search, .octo-settings-nav-group { display: none; }
  .octo-settings-tabs { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .octo-settings-tabs::-webkit-scrollbar { display: none; }
  .octo-settings-tab { width: auto; flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-full); background: var(--octo-white); }
  .octo-settings-tab.active { border-color: var(--octo-teal); }
  .octo-settings-tab-label { overflow: visible; }
  .octo-image-field-preview { width: 64px; height: 64px; }
  .octo-form-section-header:has(.octo-form-section-tools) { flex-wrap: wrap; }
  .octo-form-section-header:has(.octo-form-section-tools) > .octo-form-section-icon + div { flex: 1 1 0; min-width: 0; }
  .octo-form-section-tools { width: 100%; margin-inline-start: 48px; }
}


/* ═══════════════════════════════════════════
   MASTER–DETAIL
   A parent list on the left (the master pane) and the selected parent's children on the right, normally a
   fill-viewport grid card with its own toolbar and CRUD. For a parent/child pair of small lookup lists that
   would otherwise be two grid pages joined by a filter (countries → regions, categories → items).
   Markup:
     .octo-master-detail[.show-detail]
       aside.octo-master-pane
         .octo-master-head   > .octo-master-title (+ .octo-tab-count) + action button
         .octo-master-search > i + input.octo-input
         ul.octo-master-list > li > button.octo-master-item[.active][.muted]
                                      > lead (flag / icon) + .octo-master-item-text(-name, -sub) + .octo-tab-count
         .octo-master-foot   (optional: a switch, a hint)
       .octo-card.octo-grid-card
         .octo-master-detail-head > button.octo-master-back + lead + .octo-master-detail-title(-name, -sub)
                                    + .octo-master-detail-actions
         shared grid toolbar, Kendo grid
   The page has an .octo-grid-card, so the fill-viewport rules apply: both panes take the remaining height,
   the list and the grid rows scroll inside their pane. At ≤ 1000px the panes become two screens: the list
   first, the detail after a pick (page JS toggles .show-detail; .octo-master-back returns to the list).
   1000px, not the shell's 900px: with the sidebar still open a 900-1000px window leaves the detail grid too
   little room. Page JS should detect the two-screen mode from .octo-master-back being displayed, not from
   a number.
   ═══════════════════════════════════════════ */
.octo-master-detail { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 16px; min-height: 0; }
.octo-app:has(.octo-grid-card) .octo-content > .octo-master-detail { flex: 1 1 0%; min-height: 420px; grid-template-rows: minmax(0, 1fr); }
.octo-master-detail > .octo-grid-card { min-width: 0; min-height: 0; margin-bottom: 0; }

.octo-master-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--octo-card-bg); border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-lg); box-shadow: var(--octo-shadow-card); }
.octo-master-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--octo-rule); flex-shrink: 0; }
.octo-master-title { font-family: var(--octo-font-display); font-size: var(--octo-text-md); font-weight: 700; color: var(--octo-charcoal); letter-spacing: -0.2px; margin-inline-end: auto; display: flex; align-items: center; min-width: 0; }
.octo-master-search { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--octo-rule); flex-shrink: 0; }
.octo-master-search > i { position: absolute; inset-inline-start: 23px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--octo-grey-light); pointer-events: none; }
.octo-master-search .octo-input { padding: 7px 10px 7px 30px; font-size: var(--octo-text-sm); }
.octo-master-list { list-style: none; margin: 0; padding: 6px; flex: 1 1 0%; min-height: 0; overflow-y: auto; }
.octo-master-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--octo-radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; transition: background var(--octo-duration) var(--octo-ease); }
.octo-master-item:hover { background: var(--octo-light); }
.octo-master-item:focus-visible { outline: 2px solid var(--octo-teal); outline-offset: -2px; }
.octo-master-item.active { background: var(--octo-teal-ghost); }
.octo-master-item.active .octo-master-item-name { color: var(--octo-teal); }
.octo-master-item.active .octo-tab-count { background: var(--octo-white); color: var(--octo-teal); }
.octo-master-item-text { flex: 1; min-width: 0; }
.octo-master-item-name { font-size: var(--octo-text-sm); font-weight: 600; color: var(--octo-charcoal); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.octo-master-item-sub { font-size: var(--octo-text-xs); color: var(--octo-grey-light); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.octo-master-item .octo-tab-count { margin-inline-start: 0; flex-shrink: 0; }
.octo-master-item.muted .octo-master-item-name { color: var(--octo-grey-light); text-decoration: line-through; }
.octo-master-item > .octo-flag { width: 20px; height: 15px; flex-shrink: 0; }
.octo-master-empty { padding: 18px 12px; font-size: var(--octo-text-sm); color: var(--octo-grey); text-align: center; }
/* Tree variant of the list pane: a Kendo TreeView in .octo-master-tree instead of ul.octo-master-list (a
   hierarchy of parents — chapters and lessons). Rows never widen the pane: each row is a flex line, the leaf
   may shrink, so a node template can ellipsize its title and keep a count visible at its end (Kendo's own
   tree is nowrap + overflow:auto). A search result list (ul.octo-master-list) may replace it while typing. */
.octo-master-tree { flex: 1 1 0%; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 6px 8px 10px; }
.octo-master-tree[hidden], .octo-master-list[hidden] { display: none; }
.octo-master-tree .k-treeview { font-size: var(--octo-text-sm); overflow: visible; white-space: normal; }
.octo-master-tree .k-treeview-item > div { display: flex; align-items: center; min-width: 0; }
.octo-master-tree .k-treeview .k-treeview-leaf { flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 5px 8px; border-radius: var(--octo-radius-md); }
.octo-master-tree .k-treeview .k-treeview-leaf.k-selected { background: var(--octo-teal-ghost); color: var(--octo-teal); box-shadow: none; }
.octo-master-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--octo-rule); font-size: var(--octo-text-xs); color: var(--octo-grey); flex-shrink: 0; }
.octo-master-foot label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.octo-master-detail-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--octo-rule); flex-wrap: wrap; }
.octo-master-detail-head > .octo-flag { width: 28px; height: 21px; border-radius: 3px; flex-shrink: 0; }
.octo-master-detail-title { flex: 1 1 200px; min-width: 0; }
.octo-master-detail-name { font-family: var(--octo-font-display); font-size: var(--octo-text-lg); font-weight: 700; color: var(--octo-charcoal); letter-spacing: -0.3px; line-height: 1.25; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.octo-master-detail-sub { font-size: var(--octo-text-xs); color: var(--octo-grey); margin-top: 2px; overflow-wrap: anywhere; }
.octo-master-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.octo-master-back { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-md); background: var(--octo-white); color: var(--octo-charcoal); cursor: pointer; font-size: 13px; }
.octo-master-back:hover { border-color: var(--octo-teal); color: var(--octo-teal); }
/* Nothing selected yet (or the list is empty): the detail card shows one centred message instead of a grid. */
.octo-master-detail-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 24px; text-align: center; color: var(--octo-grey); font-size: var(--octo-text-sm); }
.octo-master-detail-empty > i { font-size: 28px; color: var(--octo-grey-light); }
.octo-master-detail-empty[hidden], .octo-master-detail-body[hidden] { display: none; }
.octo-master-detail-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.octo-master-detail-body > :not(.k-grid) { flex-shrink: 0; }

/* Card list — for a SHORT parent list (a handful of records) whose items deserve a few facts each:
     ul.octo-master-list.cards > li > button.octo-master-item.card[.active][.inactive]
       > .octo-master-card-top (.octo-master-item-name + a badge) + .octo-master-card-line(.warning)… + .octo-master-card-foot
   The selected card is filled and gets an accent bar — no outline ring. .inactive dims a switched-off record
   (unlike .muted, which strikes a deleted one through). */
.octo-master-list.cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.octo-master-list.cards > li { list-style: none; }
.octo-master-item.card { flex-direction: column; align-items: stretch; gap: 5px; padding: 12px 14px; border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-lg); background: var(--octo-white); }
.octo-master-item.card:hover { background: var(--octo-off); border-color: var(--octo-grey-light); }
.octo-master-item.card.active { background: var(--octo-teal-ghost); border-color: transparent; box-shadow: inset 3px 0 0 var(--octo-teal); }
.octo-master-item.card.inactive:not(.active) { background: var(--octo-off); }
.octo-master-item.card.inactive .octo-master-item-name { color: var(--octo-grey); }
.octo-master-card-top { display: flex; align-items: flex-start; gap: 8px; }
.octo-master-card-top .octo-master-item-name { flex: 1; min-width: 0; white-space: normal; font-size: var(--octo-text-base); }
.octo-master-card-line { display: block; font-size: var(--octo-text-xs); color: var(--octo-grey); line-height: 1.4; overflow-wrap: anywhere; }
.octo-master-card-line.warning { color: var(--octo-warning); font-weight: 600; }
.octo-master-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* Tabbed detail pane — the picked record's facets as tabs instead of one child grid:
     .octo-master-detail-body > .octo-master-detail-head + .octo-tabs.octo-master-detail-tabs + .octo-master-detail-scroll
   The scroll area takes the remaining height and scrolls inside the pane (fill-viewport page). */
.octo-tabs.octo-master-detail-tabs { padding: 0 22px; margin-bottom: 0; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.octo-tabs.octo-master-detail-tabs::-webkit-scrollbar { display: none; }
.octo-tabs.octo-master-detail-tabs .octo-tab { white-space: nowrap; }
.octo-master-detail-body > .octo-master-detail-scroll { flex: 1 1 0%; min-height: 0; overflow-y: auto; padding: 18px 22px 22px; }
.octo-master-detail-panel[hidden] { display: none; }
.octo-master-detail-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.octo-master-detail-panel-head > .octo-field-hint { flex: 1 1 320px; margin-top: 0; max-width: 720px; }

@media (max-width: 1200px) {
  .octo-master-detail { grid-template-columns: 240px minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 1000px) {
  /* Two screens instead of two columns: the list, then the picked record's detail. */
  .octo-master-detail { grid-template-columns: minmax(0, 1fr); }
  /* The fill-viewport block sets display:flex on .octo-grid-card with a heavier selector, so match it. */
  .octo-app:has(.octo-grid-card) .octo-master-detail:not(.show-detail) > .octo-grid-card { display: none; }
  .octo-master-detail.show-detail > .octo-master-pane { display: none; }
  .octo-master-back { display: inline-flex; }
  .octo-master-detail-head { padding: 12px 14px; gap: 10px; }
  .octo-master-detail-name { font-size: var(--octo-text-md); }
  .octo-master-item { padding: 11px 10px; } /* comfortable touch target */
  .octo-tabs.octo-master-detail-tabs { padding: 0 14px; }
  .octo-master-detail-body > .octo-master-detail-scroll { padding: 14px; }
}

/* ═══════════════════════════════════════════
   SPLIT WORKSPACE
   Two cards side by side that share the remaining height — an editor and what it drives (a system prompt and
   its test chat, a template and its preview). Each card is a flex column; the part that should take the room
   (a textarea, a chat) gets .octo-split-workspace-fill. Below 1100px the cards stack, each tall enough to work
   in. Markup:
     .octo-split-workspace > .octo-card > .octo-card-header (title + .octo-card-subtitle, .octo-card-tools)
                                        + .octo-card-body > … .octo-split-workspace-fill …
                                        + .octo-card-footer (optional)
   ═══════════════════════════════════════════ */
.octo-split-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; min-height: calc(100vh - var(--topbar-height) - 270px); }
/* On a desktop a split workspace is a viewport-bound screen, like a chat: the shell takes exactly the viewport, the
   content column scrolls only if the page header needs it, and the workspace takes the room that remains — so what
   grows (a streamed answer, a long prompt) scrolls inside its card (an overflow:auto child with min-height:0), never
   the page. Below 1100px the cards stack and the page scrolls as usual. */
@media (min-width: 1101px) {
  .octo-main:has(> .octo-content > .octo-split-workspace) { height: 100vh; }
  .octo-content:has(> .octo-split-workspace) { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  .octo-content:has(> .octo-split-workspace) > .octo-split-workspace { flex: 1 1 auto; min-height: 320px; }
}
.octo-split-workspace > .octo-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin-bottom: 0; }
.octo-split-workspace > .octo-card > .octo-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.octo-split-workspace-fill { flex: 1 1 auto; min-height: 0; }
.octo-split-workspace textarea.octo-split-workspace-fill { resize: none; }
.octo-card-subtitle { font-size: var(--octo-text-xs); color: var(--octo-grey); margin-top: 2px; }
.octo-card-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; }
/* A short status next to a card's actions: "Published", "Unsaved changes". */
.octo-card-status { font-size: var(--octo-text-xs); color: var(--octo-grey); display: inline-flex; align-items: center; gap: 6px; }
.octo-card-status.warning { color: var(--octo-warning); font-weight: 600; }
.octo-card-status.success { color: var(--octo-success); font-weight: 600; }
@media (max-width: 1100px) {
  .octo-split-workspace { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .octo-split-workspace > .octo-card { min-height: 520px; }
}

/* ═══════════════════════════════════════════
   REPORT PAGES (page-types.md → Dashboard Page, report variant)
   A report = filter card + KPI cards compared with the previous period + one chart + breakdown
   tables + an exportable period grid, all rendered client-side from one read.
   .octo-report-filter        row in the filter card: presets (octo-quick-picks) left, fields right
   .octo-report-filter-fields the From / To / grouping fields and the Apply button
   .octo-report-range         "Aug 20 – Sep 18 · vs Jul 22 – Aug 19" under the presets
   .octo-share                a share bar cell in a breakdown table (octo-progress + value)
   .octo-table .num           right-aligned figures with tabular digits
   .octo-chart-toggle         metric switch in a chart card header (octo-quick-picks without margin)
   ═══════════════════════════════════════════ */
.octo-report-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.octo-report-filter .octo-quick-picks { margin-bottom: 0; }
.octo-report-presets { display: flex; flex-direction: column; gap: 8px; flex: 1 1 320px; min-width: 0; }
.octo-report-range { font-size: var(--octo-text-xs); color: var(--octo-grey); }
.octo-report-range strong { color: var(--octo-charcoal); font-weight: 600; }
.octo-report-filter-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.octo-report-filter-fields .octo-field { margin: 0; flex: 1 1 140px; min-width: 140px; }
.octo-report-filter-fields .octo-field-label { margin-bottom: 4px; }
.octo-report-filter-fields .octo-btn { height: 38px; }
.octo-report-filter-fields .k-datepicker, .octo-report-filter-fields .k-dropdownlist { width: 100%; }
.octo-chart-toggle { margin-bottom: 0; }
.octo-share { display: flex; align-items: center; gap: 10px; min-width: 120px; }
.octo-share .octo-progress { flex: 1 1 auto; }
.octo-share-value { font-size: var(--octo-text-xs); font-weight: 600; color: var(--octo-charcoal); min-width: 40px; text-align: end; font-variant-numeric: tabular-nums; }
.octo-table th.num, .octo-table td.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.octo-table td.num.muted { color: var(--octo-grey); }
.octo-table tfoot td { padding: 12px 16px; font-weight: 700; color: var(--octo-charcoal); border-top: 2px solid var(--octo-rule); font-size: var(--octo-text-sm); } /* a totals row */
.octo-table td.total, .octo-table tr.total td { font-weight: 700; color: var(--octo-charcoal); border-top: 2px solid var(--octo-rule); }
.octo-report-empty { padding: 26px 22px; text-align: center; color: var(--octo-grey); font-size: var(--octo-text-sm); }
.octo-alert.info { background: var(--octo-teal-ghost); border-color: var(--octo-teal); color: var(--octo-teal); }
.octo-dashboard-card-grid.cols-1 { grid-template-columns: minmax(0, 320px); }
.octo-dashboard-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.octo-dashboard-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.octo-dashboard-card-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.octo-dashboard-card-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
.octo-dashboard-card-grid.cols-5 .octo-dashboard-stat-main, .octo-dashboard-card-grid.cols-6 .octo-dashboard-stat-main { font-size: var(--octo-text-xl); }
@media (max-width: 1200px) { .octo-dashboard-card-grid.cols-5, .octo-dashboard-card-grid.cols-6 { grid-template-columns: repeat(3, 1fr); } .octo-dashboard-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .octo-dashboard-card-grid.cols-3, .octo-dashboard-card-grid.cols-5, .octo-dashboard-card-grid.cols-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .octo-dashboard-card-grid.cols-3, .octo-dashboard-card-grid.cols-5, .octo-dashboard-card-grid.cols-6 { grid-template-columns: 1fr; } }
.octo-chart-tall { height: 380px; }
/* A share chart (doughnut) with its table: stacked in a half-width card, side by side (.wide) in a full one. */
.octo-report-split-chart { padding: 14px 22px 4px; }
.octo-report-split-chart .octo-dashboard-chart { height: 200px; }
.octo-report-split.wide { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
.octo-report-split.wide .octo-report-split-chart { padding: 16px 8px 8px 22px; }
.octo-report-split.wide .octo-report-split-chart .octo-dashboard-chart { height: 240px; }
@media (max-width: 900px) { .octo-report-split.wide { grid-template-columns: 1fr; } .octo-report-split.wide .octo-report-split-chart { padding: 14px 22px 4px; } }
.octo-stat-card:has(.octo-stat-icon) .octo-dashboard-stat-title { padding-inline-end: 56px; } /* the title never runs under the icon on narrow cards */
.octo-table td .octo-cell-sub { font-size: var(--octo-text-xs); color: var(--octo-grey); font-weight: 400; margin-top: 2px; }
@media (max-width: 600px) {
  .octo-report-filter { gap: 12px; }
  .octo-report-filter-fields .octo-field,
  .octo-report-filter-fields .octo-btn { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .octo-share { min-width: 0; }
  .octo-share .octo-progress { display: none; } /* the percentage alone on a phone: the bar has no room */
}

/* ── Dialogs (OctoDialog, octo-theme.js) ──
   The page-level confirm / alert / prompt. Its element is built by the script into <body> and wears
   the modal chrome above; only the heading icon, the message and the prompt field are new. */
.octo-dialog-overlay { z-index: 120; }   /* a dialog can be raised from inside a modal */
.octo-dialog .octo-modal-header { align-items: flex-start; }
.octo-dialog-heading { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.octo-dialog-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--octo-radius-md); background: var(--octo-teal-ghost); color: var(--octo-teal); font-size: 14px; }
.octo-dialog-icon.danger { background: var(--octo-error-light); color: var(--octo-error); }
.octo-dialog-icon.warning { background: var(--octo-warning-light); color: var(--octo-warning); }
.octo-dialog-icon.info { background: var(--octo-light); color: var(--octo-grey); }
.octo-dialog-icon[hidden] { display: none; }
/* pre-line: a message keeps the line breaks the caller wrote (browser confirm() did the same). */
.octo-dialog-message { margin: 0; font-size: var(--octo-text-sm); color: var(--octo-mid); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.octo-dialog-message[hidden] { display: none; }
.octo-dialog .octo-dialog-field { margin-top: 16px; }
.octo-dialog .octo-dialog-field[hidden] { display: none; }
.octo-dialog .octo-dialog-field label[hidden], .octo-dialog .octo-dialog-field input[hidden], .octo-dialog .octo-dialog-field textarea[hidden] { display: none; }
.octo-dialog .octo-modal-footer [hidden] { display: none; }

/* ── Language switcher (Octo/_LanguageSwitcher, top bar) ──
   Two or three languages show as a segmented control; more fall back to a select. The control keeps its
   own text direction so a native name always reads correctly, whatever the page direction. */
.octo-lang { display: flex; align-items: center; margin: 0; }
.octo-lang-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-full); background: var(--octo-off); }
.octo-lang-option { font-family: inherit; font-size: var(--octo-text-xs); font-weight: 600; line-height: 1; padding: 6px 10px; min-width: 34px; border: 0; border-radius: var(--octo-radius-full); background: transparent; color: var(--octo-grey); cursor: pointer; transition: background-color var(--octo-duration) var(--octo-ease), color var(--octo-duration) var(--octo-ease); }
.octo-lang-option:hover { color: var(--octo-charcoal); background: var(--octo-white); }
.octo-lang-option.active { background: var(--octo-white); color: var(--octo-teal); box-shadow: var(--octo-shadow-sm); }
.octo-lang-option:focus-visible { outline: 2px solid var(--octo-teal); outline-offset: 1px; }
.octo-lang-select-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.octo-lang-icon { color: var(--octo-grey); font-size: 14px; }
.octo-lang-select { font-family: inherit; font-size: var(--octo-text-xs); font-weight: 600; padding: 6px 10px; border: 1px solid var(--octo-rule); border-radius: var(--octo-radius-full); background: var(--octo-off); color: var(--octo-charcoal); cursor: pointer; }
@media (max-width: 600px) {
  .octo-lang-option { padding: 6px 8px; min-width: 30px; }
}

/* ═══════════════════════════════════════════
   RIGHT-TO-LEFT
   The shell is written with logical properties (margin-inline-start, inset-inline-start, text-align:
   start …), so `dir="rtl"` on <html> mirrors it without a second stylesheet. What remains here is what
   direction-aware properties cannot express: transforms, shadows, the sidebar's off-canvas slide, and a
   few glyphs that must not be mirrored (Latin codes, numbers, phone numbers).
   ═══════════════════════════════════════════ */
[dir="rtl"] .octo-main { margin-inline-start: var(--sidebar-width); }
@media (max-width: 900px) {
  [dir="rtl"] .octo-sidebar { transform: translateX(100%); }
  [dir="rtl"] .octo-sidebar.open { transform: translateX(0); box-shadow: -8px 0 32px rgba(0,0,0,0.3); }
}
[dir="rtl"] .octo-sidebar-chevron { transform: scaleX(-1); }          /* the caret points into the panel */
[dir="rtl"] .octo-sidebar-group.open .octo-sidebar-chevron { transform: scaleX(-1) rotate(-90deg); }
[dir="rtl"] .octo-sidebar-collapse-btn svg { transform: scaleX(-1); }
[dir="rtl"] .octo-sidebar.collapsed .octo-sidebar-collapse-btn svg { transform: scaleX(-1) rotate(180deg); }
[dir="rtl"] .octo-dashboard-link-arrow,
[dir="rtl"] .octo-master-back i,
[dir="rtl"] .octo-breadcrumb-sep { transform: scaleX(-1); }
[dir="rtl"] .octo-toggle.on .octo-toggle-track::after,
[dir="rtl"] .octo-switch input:checked + .octo-switch-track::after { transform: translateX(-16px); }
[dir="rtl"] .octo-select { background-position: left 12px center; padding-inline-end: 14px; padding-inline-start: 32px; }
[dir="rtl"] .octo-topbar-search-kbd { direction: ltr; }
[dir="rtl"] .octo-stat-change bdi,
[dir="rtl"] .octo-badge bdi { direction: ltr; unicode-bidi: isolate; }

/* Latin-by-nature values keep their own direction inside an RTL page: identifiers, license keys,
   transaction numbers, phone numbers, amounts with a currency symbol, URLs, dates in yyyy-MM-dd.
   `direction` alone is not enough for an inline run: the bidi algorithm still reorders it against the
   Arabic around it, so "+961 3 133 133" comes out with its groups swapped. `unicode-bidi: isolate` is
   what pins it. Use .octo-ltr on any such value that has no class of its own. */
[dir="rtl"] .octo-ltr,
[dir="rtl"] .mono,
[dir="rtl"] .octo-cell-mono,
[dir="rtl"] .octo-code-pill,
[dir="rtl"] .octo-table td.mono,
[dir="rtl"] .octo-share-value,
[dir="rtl"] .octo-table th.num,
[dir="rtl"] .octo-table td.num,
[dir="rtl"] .k-grid td.num,
[dir="rtl"] .k-grid th.num { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .octo-table th.num,
[dir="rtl"] .octo-table td.num,
[dir="rtl"] .k-grid td.num,
[dir="rtl"] .k-grid th.num { text-align: left; }

/* Arabic needs its own face: the Latin display font has no Arabic glyphs, so the browser would fall back
   to a system font and lose the theme's voice. Loaded by the layout only when the language is RTL.
   Noto Sans Arabic, chosen 2026-09-20 over IBM Plex Sans Arabic: it is drawn for small sizes and dense
   data, and it is one of the few Arabic faces covering BOTH weights this theme leans on — 600 on every
   button and label, 800 on page titles and stat values. IBM Plex Sans Arabic stopped at 700, so every
   Arabic stat value was a browser-faked bold.

   The selector is :root[dir="rtl"] (0,2,0) and NOT [dir="rtl"] (0,1,0) on purpose. A project skin
   declares its tokens on :root, which is also (0,1,0), and skins load AFTER this file — so with the
   plain attribute selector the skin won the tie on source order and silently took the Arabic face back
   out. That is exactly what happened on Eversity: the top bar, page titles and sidebar items rendered
   in a system fallback, in every language, for as long as the skin existed.

   The Arabic face is listed FIRST, so it also renders the Latin inside an Arabic page (phone numbers,
   references, amounts, the brand) — one family for both scripts. Move it after the Latin token to keep
   the skin's Latin face there instead; CSS falls back per glyph, so that is the whole change. */
:root[dir="rtl"] {
  --octo-font-display: var(--octo-font-arabic), var(--octo-font-display-latin), system-ui, sans-serif;
  --octo-font-body:    var(--octo-font-arabic), var(--octo-font-body-latin), system-ui, sans-serif;
}
[dir="rtl"] .octo-page-title,
[dir="rtl"] .octo-stat-value,
[dir="rtl"] .octo-dashboard-stat-main { letter-spacing: 0; }          /* Arabic must not be letter-spaced */

/* A grid whose last read failed (octo-search.js guardStaleRows): the message takes the place of the rows. */
.k-grid .octo-grid-failed-row > td { border: 0; padding: 0; }
.octo-grid-failed-msg { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; text-align: center; color: var(--octo-charcoal); font-size: var(--octo-text-sm); }
.octo-grid-failed-msg i { font-size: 22px; color: var(--octo-warning); }
.k-grid.octo-grid-failed .k-pager-info { visibility: hidden; } /* "1-23 of 23" would be the previous answer */