/*
 * JA Group Services Ltd — Head Office Operations Interface
 *
 * This stylesheet is the governed presentation layer for the internal portal.
 * It follows the page patterns used by mature security, identity and customer
 * operations products: stable application shell, queue-first work surfaces,
 * record workspaces, restrained status summaries and form-led administration.
 *
 * Cards are deliberately not the default container. Tables are used only as
 * operational queues or histories. Page structure is created with typography,
 * spacing and separators rather than repeated rounded boxes and shadows.
 */

body.ops-tailwind {
  --ho-nav: #0b1220;
  --ho-nav-hover: #172033;
  --ho-nav-active: #1d2a40;
  --ho-canvas: #f5f6f8;
  --ho-surface: #ffffff;
  --ho-surface-subtle: #f8f9fb;
  --ho-border: #d8dde6;
  --ho-border-strong: #b8c1ce;
  --ho-text: #172033;
  --ho-muted: #5f6b7a;
  --ho-subtle: #7b8794;
  --ho-focus: #155eef;
  --ho-danger: #b42318;
  --ho-warning: #a15c00;
  --ho-success: #067647;
  --ho-radius: 3px;
  background: var(--ho-canvas) !important;
  color: var(--ho-text) !important;
  font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 13px !important;
}

html[data-ops-theme="dark"] body.ops-tailwind {
  --ho-nav: #070d17;
  --ho-nav-hover: #111c2d;
  --ho-nav-active: #18263a;
  --ho-canvas: #0c1421;
  --ho-surface: #111b2a;
  --ho-surface-subtle: #162235;
  --ho-border: #2b3a4f;
  --ho-border-strong: #46566d;
  --ho-text: #eef2f7;
  --ho-muted: #a8b3c3;
  --ho-subtle: #8491a4;
  --ho-focus: #84adff;
  --ho-danger: #fda29b;
  --ho-warning: #fec84b;
  --ho-success: #75e0a7;
}

/* Stable enterprise application shell */
body.ops-tailwind .app-shell {
  background: var(--ho-canvas) !important;
}

body.ops-tailwind .workspace-switcher,
body.ops-tailwind .workspace-contextbar,
body.ops-tailwind .primary-header-navigation {
  display: none !important;
}

body.ops-tailwind .ops-header {
  border: 0 !important;
  border-bottom: 1px solid var(--ho-border) !important;
  background: var(--ho-surface) !important;
  color: var(--ho-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ops-tailwind .ops-header-main {
  min-height: 56px !important;
  padding: 0 22px !important;
  gap: 14px !important;
}

body.ops-tailwind .ops-brand-copy strong,
body.ops-tailwind .account-summary-copy strong {
  color: var(--ho-text) !important;
}

body.ops-tailwind .ops-brand-copy span,
body.ops-tailwind .account-summary-copy span {
  color: var(--ho-muted) !important;
}

body.ops-tailwind .ops-header-actions {
  margin-left: auto !important;
  gap: 6px !important;
}

body.ops-tailwind .theme-button,
body.ops-tailwind .all-tools-button,
body.ops-tailwind .account-menu summary {
  min-height: 34px !important;
  border: 1px solid var(--ho-border) !important;
  border-radius: var(--ho-radius) !important;
  background: var(--ho-surface) !important;
  color: var(--ho-text) !important;
  box-shadow: none !important;
}

body.ops-tailwind .theme-button:hover,
body.ops-tailwind .all-tools-button:hover,
body.ops-tailwind .account-menu summary:hover {
  border-color: var(--ho-border-strong) !important;
  background: var(--ho-surface-subtle) !important;
}

body.ops-tailwind .avatar {
  border-radius: 50% !important;
  background: #dbe7ff !important;
  color: #1849a9 !important;
  box-shadow: none !important;
}

body.ops-tailwind .ops-subheader {
  min-height: 44px !important;
  padding: 5px 22px !important;
  border: 0 !important;
  border-top: 1px solid var(--ho-border) !important;
  background: var(--ho-surface) !important;
}

body.ops-tailwind .breadcrumbs {
  color: var(--ho-muted) !important;
  font-size: 11px !important;
}

body.ops-tailwind .breadcrumbs strong {
  color: var(--ho-text) !important;
  font-weight: 600 !important;
}

body.ops-tailwind .global-search {
  width: min(620px, 52vw) !important;
  min-height: 32px !important;
  height: 32px !important;
  border: 1px solid var(--ho-border) !important;
  border-radius: var(--ho-radius) !important;
  background: var(--ho-surface-subtle) !important;
  box-shadow: none !important;
}

body.ops-tailwind .global-search:focus-within {
  border-color: var(--ho-focus) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ho-focus) 18%, transparent) !important;
}

body.ops-tailwind .global-search input {
  color: var(--ho-text) !important;
}

body.ops-tailwind .global-search kbd {
  border-color: var(--ho-border) !important;
  border-radius: 2px !important;
  background: var(--ho-surface) !important;
  color: var(--ho-muted) !important;
}

@media (min-width: 1024px) {
  body.ops-tailwind .app-shell {
    display: grid !important;
    grid-template-columns: 248px minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body.ops-tailwind .ops-header {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
  }

  body.ops-tailwind .ops-brand {
    display: none !important;
  }

  body.ops-tailwind .tools-drawer {
    position: sticky !important;
    top: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 248px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid #253047 !important;
    border-radius: 0 !important;
    background: var(--ho-nav) !important;
    color: #d9e2ef !important;
    box-shadow: none !important;
  }

  body.ops-tailwind .tools-drawer-heading {
    position: relative;
    min-height: 78px;
    padding: 18px 42px 16px 62px !important;
    border-bottom: 1px solid #253047 !important;
    background: var(--ho-nav) !important;
  }

  body.ops-tailwind .tools-drawer-heading::before {
    position: absolute;
    left: 18px;
    top: 18px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #3d4b63;
    border-radius: 3px;
    background: #155eef;
    color: #fff;
    content: "JA";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  body.ops-tailwind .tools-drawer-heading strong {
    display: block;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  body.ops-tailwind .tools-drawer-heading span {
    display: block;
    margin-top: 3px;
    color: #91a0b7 !important;
    font-size: 10px !important;
    line-height: 1.35;
  }

  body.ops-tailwind .drawer-close,
  body.ops-tailwind .all-tools-button,
  body.ops-tailwind .menu-backdrop {
    display: none !important;
  }

  body.ops-tailwind #mainNavigation {
    flex: 1 !important;
    display: block !important;
    padding: 9px 8px 18px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }

  body.ops-tailwind .nav-group {
    padding: 7px 0 9px !important;
    border: 0 !important;
  }

  body.ops-tailwind .nav-label {
    margin: 10px 10px 5px !important;
    color: #718096 !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
  }

  body.ops-tailwind .tools-drawer .nav-item {
    min-height: 34px !important;
    margin: 1px 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: #aeb9ca !important;
    font-size: 11.5px !important;
    font-weight: 550 !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.ops-tailwind .tools-drawer .nav-item:hover {
    background: var(--ho-nav-hover) !important;
    color: #fff !important;
    transform: none !important;
  }

  body.ops-tailwind .tools-drawer .nav-item.active {
    background: var(--ho-nav-active) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #5b8def !important;
  }

  body.ops-tailwind .tools-drawer-footer {
    padding: 12px 17px !important;
    border-top: 1px solid #253047 !important;
    background: var(--ho-nav) !important;
    color: #8290a5 !important;
    font-size: 9.5px !important;
  }

  body.ops-tailwind .tools-drawer-footer strong {
    color: #dbe3ee !important;
  }

  body.ops-tailwind .main-shell {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: calc(100vh - 101px) !important;
  }
}

/* Page structure */
body.ops-tailwind .main-shell {
  background: var(--ho-canvas) !important;
}

body.ops-tailwind .content {
  width: 100% !important;
  max-width: 1680px !important;
  min-height: calc(100vh - 150px) !important;
  margin: 0 auto !important;
  padding: 22px 28px 44px !important;
}

body.ops-tailwind .workspace-view {
  margin: 0 !important;
}

body.ops-tailwind .page-heading {
  align-items: flex-start !important;
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--ho-border) !important;
}

body.ops-tailwind .page-heading h1 {
  margin: 0 0 4px !important;
  color: var(--ho-text) !important;
  font-size: 24px !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
}

body.ops-tailwind .page-heading p:not(.eyebrow) {
  max-width: 900px !important;
  margin: 0 !important;
  color: var(--ho-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.ops-tailwind .page-heading .eyebrow {
  margin: 0 0 4px !important;
  color: var(--ho-focus) !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  letter-spacing: .1em !important;
}

body.ops-tailwind .heading-actions {
  align-items: center !important;
  gap: 6px !important;
}

body.ops-tailwind .enterprise-command-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 8px 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ho-border) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ops-tailwind .enterprise-command-title strong {
  color: var(--ho-text) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

body.ops-tailwind .enterprise-command-title span,
body.ops-tailwind .enterprise-command-meta span {
  color: var(--ho-muted) !important;
  font-size: 10px !important;
}

body.ops-tailwind .enterprise-command-meta {
  gap: 10px !important;
}

/* Restrained overview summaries — one strip, not a card wall */
body.ops-tailwind .metrics,
body.ops-tailwind .enterprise-metrics,
body.ops-tailwind .enterprise-status-strip {
  display: grid !important;
  gap: 0 !important;
  margin: 0 0 20px !important;
  border: 0 !important;
  border-top: 1px solid var(--ho-border) !important;
  border-bottom: 1px solid var(--ho-border) !important;
  background: transparent !important;
}

body.ops-tailwind .metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.ops-tailwind .enterprise-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

body.ops-tailwind .enterprise-status-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.ops-tailwind .metric-card,
body.ops-tailwind .enterprise-metric,
body.ops-tailwind .enterprise-status-cell {
  position: relative;
  min-width: 0 !important;
  min-height: 74px !important;
  padding: 12px 15px !important;
  border: 0 !important;
  border-right: 1px solid var(--ho-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ops-tailwind .metric-card:last-child,
body.ops-tailwind .enterprise-metric:last-child,
body.ops-tailwind .enterprise-status-cell:last-child {
  border-right: 0 !important;
}

body.ops-tailwind .metric-icon {
  display: none !important;
}

body.ops-tailwind .metric-card span,
body.ops-tailwind .enterprise-metric span,
body.ops-tailwind .enterprise-status-cell span {
  display: block !important;
  color: var(--ho-muted) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body.ops-tailwind .metric-card strong,
body.ops-tailwind .enterprise-metric strong {
  display: block !important;
  margin: 4px 0 0 !important;
  color: var(--ho-text) !important;
  font-size: 24px !important;
  font-weight: 650 !important;
  letter-spacing: -.03em !important;
}

body.ops-tailwind .enterprise-status-cell strong {
  display: block !important;
  margin: 5px 0 0 !important;
  color: var(--ho-text) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

body.ops-tailwind .metric-card small,
body.ops-tailwind .enterprise-metric small,
body.ops-tailwind .enterprise-status-cell small {
  display: block !important;
  margin-top: 3px !important;
  color: var(--ho-subtle) !important;
  font-size: 9.5px !important;
  line-height: 1.35 !important;
}

body.ops-tailwind .enterprise-metric[data-tone="critical"] strong { color: var(--ho-danger) !important; }
body.ops-tailwind .enterprise-metric[data-tone="warning"] strong { color: var(--ho-warning) !important; }
body.ops-tailwind .enterprise-metric[data-tone="success"] strong { color: var(--ho-success) !important; }

/* Work surfaces: clear sections, not floating boxes */
body.ops-tailwind .panel,
body.ops-tailwind .enterprise-panel {
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid var(--ho-border-strong) !important;
  border-bottom: 1px solid var(--ho-border) !important;
  border-radius: 0 !important;
  background: var(--ho-surface) !important;
  box-shadow: none !important;
}

body.ops-tailwind .panel + .panel,
body.ops-tailwind .enterprise-panel + .enterprise-panel,
body.ops-tailwind .enterprise-grid + .enterprise-grid,
body.ops-tailwind .enterprise-grid + .enterprise-panel,
body.ops-tailwind .enterprise-panel + .enterprise-grid {
  margin-top: 24px !important;
}

body.ops-tailwind .panel-header,
body.ops-tailwind .enterprise-panel-header {
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ho-border) !important;
  background: var(--ho-surface) !important;
}

body.ops-tailwind .panel-header h2,
body.ops-tailwind .enterprise-panel-header h2 {
  margin: 0 !important;
  color: var(--ho-text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

body.ops-tailwind .panel-header p,
body.ops-tailwind .enterprise-panel-header p {
  margin: 2px 0 0 !important;
  color: var(--ho-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

body.ops-tailwind .panel-body {
  padding: 14px 12px !important;
}

body.ops-tailwind .enterprise-panel-caption {
  padding: 8px 12px !important;
  border-top: 1px solid var(--ho-border) !important;
  color: var(--ho-muted) !important;
  font-size: 9.5px !important;
}

body.ops-tailwind .enterprise-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

body.ops-tailwind .split-grid,
body.ops-tailwind .level-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 24px !important;
}

/* Operational queues */
body.ops-tailwind .table-wrap {
  position: relative;
  overflow: auto !important;
  max-width: 100%;
  border: 0 !important;
  background: var(--ho-surface) !important;
  scrollbar-width: thin;
}

body.ops-tailwind .data-table {
  width: 100% !important;
  min-width: 820px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--ho-surface) !important;
  color: var(--ho-text) !important;
  font-size: 11px !important;
}

body.ops-tailwind .data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ho-border-strong) !important;
  background: var(--ho-surface-subtle) !important;
  color: var(--ho-muted) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

body.ops-tailwind .data-table td {
  min-height: 44px !important;
  padding: 10px 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ho-border) !important;
  color: var(--ho-text) !important;
  vertical-align: middle !important;
}

body.ops-tailwind .data-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

body.ops-tailwind .data-table tbody tr:hover,
body.ops-tailwind .data-table tbody tr[data-open]:hover {
  background: color-mix(in srgb, var(--ho-focus) 5%, var(--ho-surface)) !important;
}

body.ops-tailwind .data-table tbody tr:focus-within {
  outline: 2px solid var(--ho-focus);
  outline-offset: -2px;
}

body.ops-tailwind .data-table small {
  color: var(--ho-muted) !important;
  font-size: 9.5px !important;
  line-height: 1.35 !important;
}

body.ops-tailwind .primary-cell {
  gap: 8px !important;
}

body.ops-tailwind .mini-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 2px !important;
  background: #e8eef7 !important;
  color: #344054 !important;
  font-size: 9px !important;
  box-shadow: none !important;
}

body.ops-tailwind .mono {
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace !important;
  font-size: 10px !important;
}

body.ops-tailwind .tag,
body.ops-tailwind .level-chip {
  min-width: 0 !important;
  padding: 2px 6px !important;
  border: 1px solid var(--ho-border) !important;
  border-radius: 2px !important;
  background: var(--ho-surface-subtle) !important;
  color: var(--ho-muted) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

body.ops-tailwind .inline-actions {
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

/* Summary lists and record workspaces */
body.ops-tailwind .summary-list {
  display: grid !important;
  gap: 0 !important;
  border-top: 1px solid var(--ho-border) !important;
}

body.ops-tailwind .summary-item {
  display: grid !important;
  grid-template-columns: minmax(150px, 28%) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: baseline !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ho-border) !important;
}

body.ops-tailwind .summary-item span {
  color: var(--ho-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.ops-tailwind .summary-item strong {
  margin: 0 !important;
  color: var(--ho-text) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

body.ops-tailwind .enterprise-summary-list {
  display: grid !important;
  border-top: 1px solid var(--ho-border) !important;
}

body.ops-tailwind .enterprise-summary-row {
  grid-template-columns: 92px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--ho-border) !important;
}

body.ops-tailwind .enterprise-summary-row:last-child {
  border-bottom: 0 !important;
}

body.ops-tailwind .enterprise-severity-key {
  display: grid !important;
  grid-template-columns: 1fr !important;
  border: 0 !important;
  background: transparent !important;
}

body.ops-tailwind .enterprise-severity-key div {
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ho-border) !important;
}

body.ops-tailwind .enterprise-severity-key div:last-child {
  border-bottom: 0 !important;
}

body.ops-tailwind .tabs {
  gap: 18px !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid var(--ho-border-strong) !important;
}

body.ops-tailwind .tab {
  min-height: 36px !important;
  padding: 8px 1px !important;
  border-bottom: 2px solid transparent !important;
  color: var(--ho-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body.ops-tailwind .tab:hover {
  color: var(--ho-text) !important;
}

body.ops-tailwind .tab.active {
  border-color: var(--ho-focus) !important;
  color: var(--ho-focus) !important;
}

body.ops-tailwind .detail-grid {
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) !important;
  gap: 28px !important;
}

body.ops-tailwind .timeline {
  gap: 0 !important;
  border-top: 1px solid var(--ho-border) !important;
}

body.ops-tailwind .timeline-item {
  padding: 12px 0 12px 18px !important;
  border-left: 2px solid var(--ho-border-strong) !important;
  border-bottom: 1px solid var(--ho-border) !important;
}

/* Forms and governed settings */
body.ops-tailwind .toolbar {
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.ops-tailwind .field,
body.ops-tailwind .search-field {
  gap: 5px !important;
}

body.ops-tailwind .field > span,
body.ops-tailwind .search-field > span {
  color: var(--ho-text) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

body.ops-tailwind .field input,
body.ops-tailwind .field select,
body.ops-tailwind .field textarea,
body.ops-tailwind .search-field input,
body.ops-tailwind .toolbar select {
  min-height: 34px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--ho-border-strong) !important;
  border-radius: var(--ho-radius) !important;
  background: var(--ho-surface) !important;
  color: var(--ho-text) !important;
  font-size: 11.5px !important;
  box-shadow: none !important;
}

body.ops-tailwind .field input:focus,
body.ops-tailwind .field select:focus,
body.ops-tailwind .field textarea:focus,
body.ops-tailwind .search-field input:focus,
body.ops-tailwind .toolbar select:focus {
  border-color: var(--ho-focus) !important;
  outline: 2px solid color-mix(in srgb, var(--ho-focus) 18%, transparent) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

body.ops-tailwind .form-grid {
  gap: 18px 22px !important;
}

body.ops-tailwind .form-actions {
  padding-top: 14px !important;
  border-top: 1px solid var(--ho-border) !important;
}

body.ops-tailwind[data-route="settings"] .content,
body.ops-tailwind[data-route="platforms"] .content,
body.ops-tailwind[data-route="staff"] .content {
  max-width: 1440px !important;
}

body.ops-tailwind[data-route="settings"] .panel:not(.queue-surface),
body.ops-tailwind[data-route="platforms"] .form-surface {
  max-width: 980px;
}

/* Message bars, actions and feedback */
body.ops-tailwind .notice {
  margin: 0 0 16px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-left: 3px solid var(--ho-focus) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--ho-focus) 7%, var(--ho-surface)) !important;
  color: var(--ho-text) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body.ops-tailwind .notice.danger {
  border-left-color: var(--ho-danger) !important;
  background: color-mix(in srgb, var(--ho-danger) 7%, var(--ho-surface)) !important;
}

body.ops-tailwind .button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: var(--ho-radius) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.ops-tailwind .button:hover {
  transform: none !important;
}

body.ops-tailwind .button.primary {
  background: var(--ho-focus) !important;
  color: #fff !important;
}

body.ops-tailwind .button.secondary {
  border: 1px solid var(--ho-border-strong) !important;
  background: var(--ho-surface) !important;
  color: var(--ho-text) !important;
}

body.ops-tailwind .button.secondary:hover {
  background: var(--ho-surface-subtle) !important;
}

body.ops-tailwind .button.danger {
  background: var(--ho-danger) !important;
  color: #fff !important;
}

body.ops-tailwind .button.small {
  min-height: 27px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
}

body.ops-tailwind .empty-state {
  padding: 34px 18px !important;
  color: var(--ho-muted) !important;
  text-align: left !important;
}

body.ops-tailwind .empty-state strong {
  color: var(--ho-text) !important;
}

/* Dialogs become proper operational side sheets on desktop. */
@media (min-width: 900px) {
  body.ops-tailwind dialog {
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }

  body.ops-tailwind dialog .modal-shell {
    width: min(680px, 48vw) !important;
    max-width: none !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 0 0 auto !important;
    border: 0 !important;
    border-left: 1px solid var(--ho-border-strong) !important;
    border-radius: 0 !important;
    background: var(--ho-surface) !important;
    box-shadow: -18px 0 50px rgba(16, 24, 40, .16) !important;
  }

  body.ops-tailwind dialog .modal-shell > header {
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--ho-border) !important;
    background: var(--ho-surface) !important;
    color: var(--ho-text) !important;
  }

  body.ops-tailwind dialog .modal-shell > header p {
    color: var(--ho-muted) !important;
  }

  body.ops-tailwind .modal-content {
    padding: 20px !important;
  }
}

body.ops-tailwind .system-footer {
  max-width: none !important;
  min-height: 42px !important;
  padding: 10px 28px !important;
  border-top: 1px solid var(--ho-border) !important;
  background: var(--ho-surface) !important;
  color: var(--ho-muted) !important;
  font-size: 9.5px !important;
  backdrop-filter: none !important;
}

body.ops-tailwind .system-footer strong {
  color: var(--ho-text) !important;
}

/* Responsive behaviour */
@media (max-width: 1260px) {
  body.ops-tailwind .enterprise-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.ops-tailwind .enterprise-metric:nth-child(3n) {
    border-right: 0 !important;
  }

  body.ops-tailwind .enterprise-metric:nth-child(n+4) {
    border-top: 1px solid var(--ho-border) !important;
  }

  body.ops-tailwind .enterprise-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 1023px) {
  body.ops-tailwind .ops-brand {
    display: flex !important;
  }

  body.ops-tailwind .tools-drawer {
    background: var(--ho-nav) !important;
    color: #d9e2ef !important;
  }

  body.ops-tailwind .content {
    padding: 18px 18px 36px !important;
  }
}

@media (max-width: 760px) {
  body.ops-tailwind .ops-header-main,
  body.ops-tailwind .ops-subheader {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.ops-tailwind .ops-brand-copy span,
  body.ops-tailwind .product-badge,
  body.ops-tailwind .account-summary-copy,
  body.ops-tailwind .breadcrumbs {
    display: none !important;
  }

  body.ops-tailwind .global-search {
    width: 100% !important;
  }

  body.ops-tailwind .content {
    padding: 16px 12px 30px !important;
  }

  body.ops-tailwind .page-heading {
    display: grid !important;
    gap: 12px !important;
  }

  body.ops-tailwind .metrics,
  body.ops-tailwind .enterprise-metrics,
  body.ops-tailwind .enterprise-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ops-tailwind .metric-card,
  body.ops-tailwind .enterprise-metric,
  body.ops-tailwind .enterprise-status-cell {
    border-top: 1px solid var(--ho-border) !important;
  }

  body.ops-tailwind .metric-card:nth-child(odd),
  body.ops-tailwind .enterprise-metric:nth-child(odd),
  body.ops-tailwind .enterprise-status-cell:nth-child(odd) {
    border-right: 1px solid var(--ho-border) !important;
  }

  body.ops-tailwind .metric-card:nth-child(even),
  body.ops-tailwind .enterprise-metric:nth-child(even),
  body.ops-tailwind .enterprise-status-cell:nth-child(even) {
    border-right: 0 !important;
  }

  body.ops-tailwind .summary-item {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  body.ops-tailwind .detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.ops-tailwind .inline-actions {
    flex-wrap: wrap !important;
  }
}