/*
 * Head Office Operations Centre — Planyx Admin parity layer
 *
 * This is the final authoritative presentation layer. It deliberately sits
 * above the older portal, workspace and page-specific styles so the entire
 * application uses one coherent light/dark design system.
 */

:root {
  color-scheme: light;
  --ja-bg: #f8fafc;
  --ja-surface: #ffffff;
  --ja-surface-subtle: #f1f5f9;
  --ja-surface-muted: #e2e8f0;
  --ja-border: #e2e8f0;
  --ja-border-strong: #cbd5e1;
  --ja-text: #0f172a;
  --ja-text-soft: #334155;
  --ja-muted: #64748b;
  --ja-subtle: #94a3b8;
  --ja-blue: #2563eb;
  --ja-blue-hover: #1d4ed8;
  --ja-blue-soft: #eff6ff;
  --ja-green: #15803d;
  --ja-green-soft: #f0fdf4;
  --ja-amber: #b45309;
  --ja-amber-soft: #fffbeb;
  --ja-red: #dc2626;
  --ja-red-soft: #fef2f2;
  --ja-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.04);
  --ja-shadow: 0 8px 24px rgba(15,23,42,.08);
  --ja-shadow-xl: 0 24px 60px rgba(15,23,42,.15);
}

html[data-ops-theme="dark"] {
  color-scheme: dark;
  --ja-bg: #020617;
  --ja-surface: #0f172a;
  --ja-surface-subtle: #111827;
  --ja-surface-muted: #1e293b;
  --ja-border: #1e293b;
  --ja-border-strong: #334155;
  --ja-text: #f8fafc;
  --ja-text-soft: #cbd5e1;
  --ja-muted: #94a3b8;
  --ja-subtle: #64748b;
  --ja-blue: #3b82f6;
  --ja-blue-hover: #60a5fa;
  --ja-blue-soft: rgba(59,130,246,.13);
  --ja-green: #4ade80;
  --ja-green-soft: rgba(34,197,94,.12);
  --ja-amber: #fbbf24;
  --ja-amber-soft: rgba(245,158,11,.12);
  --ja-red: #f87171;
  --ja-red-soft: rgba(239,68,68,.12);
  --ja-shadow-sm: 0 1px 2px rgba(0,0,0,.24), 0 4px 12px rgba(0,0,0,.18);
  --ja-shadow: 0 10px 28px rgba(0,0,0,.3);
  --ja-shadow-xl: 0 28px 70px rgba(0,0,0,.52);
}

html,
body.ops-tailwind {
  background: var(--ja-bg) !important;
}

body.ops-tailwind {
  min-width: 0;
  color: var(--ja-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px;
  line-height: 1.55;
}

body.ops-tailwind h1,
body.ops-tailwind h2,
body.ops-tailwind h3,
body.ops-tailwind h4,
body.ops-tailwind h5,
body.ops-tailwind h6 {
  color: var(--ja-text) !important;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -.025em;
}

body.ops-tailwind p,
body.ops-tailwind small,
body.ops-tailwind .help-text {
  color: var(--ja-muted);
}

/* Application shell */
html[data-ops-theme] body.ops-tailwind .app-shell {
  display: flex !important;
  grid-template-columns: none !important;
  min-height: 100vh !important;
  flex-direction: column !important;
  background: var(--ja-bg) !important;
}

html[data-ops-theme] body.ops-tailwind .ops-header {
  position: sticky !important;
  inset: 0 0 auto !important;
  z-index: 60 !important;
  border-bottom: 1px solid var(--ja-border) !important;
  background: color-mix(in srgb, var(--ja-surface) 97%, transparent) !important;
  color: var(--ja-text) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.07) !important;
  backdrop-filter: blur(18px) !important;
}

html[data-ops-theme] body.ops-tailwind .ops-header-main {
  width: 100% !important;
  max-width: 1600px !important;
  min-height: 64px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

html[data-ops-theme] body.ops-tailwind .ops-brand {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  color: var(--ja-text) !important;
  text-decoration: none !important;
}

html[data-ops-theme] body.ops-tailwind .ops-brand .brand-mark {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg,#2563eb,#0ea5e9) !important;
  box-shadow: 0 8px 22px rgba(37,99,235,.24) !important;
}

html[data-ops-theme] body.ops-tailwind .ops-brand-copy strong {
  color: var(--ja-text) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

html[data-ops-theme] body.ops-tailwind .ops-brand-copy span {
  color: var(--ja-muted) !important;
  font-size: 10px !important;
}

html[data-ops-theme] body.ops-tailwind .product-badge {
  min-height: 28px !important;
  padding: 5px 10px !important;
  border: 1px solid #93c5fd !important;
  border-radius: 999px !important;
  background: var(--ja-blue-soft) !important;
  color: var(--ja-blue) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

html[data-ops-theme] body.ops-tailwind .primary-header-navigation {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin-left: auto !important;
}

html[data-ops-theme] body.ops-tailwind .header-nav-item {
  width: auto !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--ja-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

html[data-ops-theme] body.ops-tailwind .header-nav-item:hover {
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-text) !important;
}

html[data-ops-theme] body.ops-tailwind .header-nav-item.active {
  background: var(--ja-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.22) !important;
}

html[data-ops-theme] body.ops-tailwind .ops-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

html[data-ops-theme] body.ops-tailwind .all-tools-button,
html[data-ops-theme] body.ops-tailwind .theme-button,
html[data-ops-theme] body.ops-tailwind .account-menu summary {
  min-height: 40px !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 10px !important;
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-text-soft) !important;
  box-shadow: none !important;
}

html[data-ops-theme] body.ops-tailwind .all-tools-button {
  padding: 0 13px !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

html[data-ops-theme] body.ops-tailwind .all-tools-button svg,
html[data-ops-theme] body.ops-tailwind .theme-button svg {
  width: 17px !important;
  height: 17px !important;
}

html[data-ops-theme] body.ops-tailwind .theme-button {
  width: 42px !important;
  padding: 0 !important;
}

html[data-ops-theme] body.ops-tailwind .account-menu {
  margin-left: 5px !important;
  padding-left: 12px !important;
  border-left: 1px solid var(--ja-border) !important;
}

html[data-ops-theme] body.ops-tailwind .account-menu summary {
  padding: 4px 7px !important;
  background: transparent !important;
  border-color: transparent !important;
}

html[data-ops-theme] body.ops-tailwind .account-menu summary:hover {
  background: var(--ja-surface-subtle) !important;
}

html[data-ops-theme] body.ops-tailwind .avatar {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid #93c5fd !important;
  background: var(--ja-blue-soft) !important;
  color: var(--ja-blue) !important;
}

html[data-ops-theme] body.ops-tailwind .account-summary-copy strong {
  color: var(--ja-text) !important;
  font-size: 12px !important;
}

html[data-ops-theme] body.ops-tailwind .account-summary-copy span {
  color: var(--ja-muted) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

html[data-ops-theme] body.ops-tailwind .account-menu-panel {
  top: calc(100% + 10px) !important;
  width: 270px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 14px !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
  box-shadow: var(--ja-shadow-xl) !important;
}

html[data-ops-theme] body.ops-tailwind .account-menu-panel > * {
  padding-inline: 16px !important;
}

html[data-ops-theme] body.ops-tailwind .account-signout {
  width: 100% !important;
  min-height: 44px !important;
  border: 0 !important;
  border-top: 1px solid var(--ja-border) !important;
  background: transparent !important;
  color: var(--ja-red) !important;
  text-align: left !important;
}

html[data-ops-theme] body.ops-tailwind .ops-subheader {
  width: 100% !important;
  max-width: none !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--ja-border) !important;
  background: color-mix(in srgb, var(--ja-surface-subtle) 94%, transparent) !important;
}

html[data-ops-theme] body.ops-tailwind .ops-subheader > * {
  align-self: center !important;
}

html[data-ops-theme] body.ops-tailwind .breadcrumbs {
  margin-left: max(24px, calc((100vw - 1600px)/2 + 32px)) !important;
  color: var(--ja-muted) !important;
  font-size: 12px !important;
}

html[data-ops-theme] body.ops-tailwind .breadcrumbs strong {
  color: var(--ja-text) !important;
}

html[data-ops-theme] body.ops-tailwind .global-search {
  width: min(500px, 42vw) !important;
  min-height: 34px !important;
  margin-right: max(24px, calc((100vw - 1600px)/2 + 32px)) !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 9px !important;
  background: var(--ja-surface) !important;
  box-shadow: none !important;
}

html[data-ops-theme] body.ops-tailwind .global-search input {
  color: var(--ja-text) !important;
  background: transparent !important;
}

html[data-ops-theme] body.ops-tailwind .global-search kbd {
  border-color: var(--ja-border) !important;
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-muted) !important;
}

/* Remove the extra multi-row workspace chrome. Planyx uses the primary header,
   All tools menu and breadcrumb row rather than permanent secondary nav bars. */
html[data-ops-theme] body.ops-tailwind .workspace-switcher,
html[data-ops-theme] body.ops-tailwind .workspace-contextbar {
  display: none !important;
}

/* All tools — Planyx-style floating menu, never a permanent left sidebar */
html[data-ops-theme] body.ops-tailwind .tools-drawer {
  position: fixed !important;
  z-index: 80 !important;
  inset: 74px max(18px, calc((100vw - 1600px)/2 + 26px)) auto auto !important;
  width: min(680px, calc(100vw - 36px)) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(76vh, 720px) !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 18px !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
  box-shadow: var(--ja-shadow-xl) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) scale(.985) !important;
  transform-origin: top right !important;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
}

html[data-ops-theme] body.ops-tailwind .tools-drawer.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

html[data-ops-theme] body.ops-tailwind .tools-drawer-heading {
  padding: 16px 18px 13px !important;
  border-bottom: 1px solid var(--ja-border) !important;
  background: var(--ja-surface) !important;
}

html[data-ops-theme] body.ops-tailwind .tools-drawer-heading strong {
  color: var(--ja-text) !important;
  font-size: 14px !important;
}

html[data-ops-theme] body.ops-tailwind .tools-drawer-heading span {
  color: var(--ja-muted) !important;
  font-size: 11px !important;
}

html[data-ops-theme] body.ops-tailwind .drawer-close {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 9px !important;
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-muted) !important;
}

html[data-ops-theme] body.ops-tailwind #mainNavigation {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 18px !important;
  max-height: min(58vh, 560px) !important;
  padding: 16px 18px !important;
  overflow-y: auto !important;
  background: var(--ja-surface) !important;
}

html[data-ops-theme] body.ops-tailwind .nav-group {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html[data-ops-theme] body.ops-tailwind .nav-label {
  margin: 0 0 6px !important;
  padding: 0 9px !important;
  color: var(--ja-subtle) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html[data-ops-theme] body.ops-tailwind .tools-drawer .nav-item {
  width: 100% !important;
  min-height: 38px !important;
  margin: 1px 0 !important;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--ja-text-soft) !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  text-align: left !important;
}

html[data-ops-theme] body.ops-tailwind .tools-drawer .nav-item:hover {
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-text) !important;
}

html[data-ops-theme] body.ops-tailwind .tools-drawer .nav-item.active {
  background: var(--ja-blue) !important;
  color: #fff !important;
}

html[data-ops-theme] body.ops-tailwind .tools-drawer-footer {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 18px !important;
  border-top: 1px solid var(--ja-border) !important;
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-muted) !important;
}

html[data-ops-theme] body.ops-tailwind .menu-backdrop {
  display: none !important;
}

/* Main and footer */
html[data-ops-theme] body.ops-tailwind .main-shell {
  width: 100% !important;
  min-width: 0 !important;
  min-height: calc(100vh - 106px) !important;
  margin: 0 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  background: var(--ja-bg) !important;
}

html[data-ops-theme] body.ops-tailwind .content {
  width: 100% !important;
  max-width: 1600px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 36px 32px 48px !important;
  flex: 1 1 auto !important;
}

html[data-ops-theme] body.ops-tailwind .system-footer {
  width: 100% !important;
  max-width: none !important;
  min-height: 96px !important;
  margin: auto 0 0 !important;
  padding: 24px max(24px,calc((100vw - 1600px)/2 + 32px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  border-top: 1px solid var(--ja-border) !important;
  background: var(--ja-surface) !important;
  color: var(--ja-muted) !important;
}

html[data-ops-theme] body.ops-tailwind .system-footer strong {
  display: block !important;
  color: var(--ja-text) !important;
  font-size: 13px !important;
}

html[data-ops-theme] body.ops-tailwind .system-footer span {
  display: block !important;
  margin-top: 4px !important;
  color: var(--ja-muted) !important;
  font-size: 11px !important;
}

/* Page headings and hero areas */
html[data-ops-theme] body.ops-tailwind .page-heading,
html[data-ops-theme] body.ops-tailwind .soc-command-header {
  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  margin: 0 0 28px !important;
  padding: 28px 30px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb,var(--ja-blue) 16%,var(--ja-border)) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 14% 18%,rgba(37,99,235,.13),transparent 32%),
    radial-gradient(circle at 88% 10%,rgba(34,211,238,.11),transparent 29%),
    radial-gradient(circle at 76% 92%,rgba(124,58,237,.1),transparent 28%),
    var(--ja-surface) !important;
  color: var(--ja-text) !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.10) !important;
}

html[data-ops-theme="dark"] body.ops-tailwind .page-heading,
html[data-ops-theme="dark"] body.ops-tailwind .soc-command-header {
  background:
    radial-gradient(circle at 14% 18%,rgba(37,99,235,.30),transparent 32%),
    radial-gradient(circle at 88% 10%,rgba(34,211,238,.16),transparent 29%),
    radial-gradient(circle at 76% 92%,rgba(124,58,237,.18),transparent 28%),
    var(--ja-surface) !important;
}

html[data-ops-theme] body.ops-tailwind .page-heading h1,
html[data-ops-theme] body.ops-tailwind .soc-command-header h1 {
  margin: 5px 0 8px !important;
  color: var(--ja-text) !important;
  font-size: clamp(28px,3vw,40px) !important;
  line-height: 1.08 !important;
}

html[data-ops-theme] body.ops-tailwind .page-heading p:not(.eyebrow),
html[data-ops-theme] body.ops-tailwind .soc-command-header p {
  max-width: 780px !important;
  margin: 0 !important;
  color: var(--ja-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

html[data-ops-theme] body.ops-tailwind .eyebrow,
html[data-ops-theme] body.ops-tailwind .soc-command-header .eyebrow {
  color: var(--ja-blue) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
}

html[data-ops-theme] body.ops-tailwind .page-heading > div:last-child,
html[data-ops-theme] body.ops-tailwind .heading-actions,
html[data-ops-theme] body.ops-tailwind .soc-command-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html[data-ops-theme] body.ops-tailwind .soc-command-actions .button.secondary {
  border-color: var(--ja-border) !important;
  background: color-mix(in srgb,var(--ja-surface) 78%,transparent) !important;
  color: var(--ja-text-soft) !important;
}

/* Buttons and fields */
html[data-ops-theme] body.ops-tailwind .button,
html[data-ops-theme] body.ops-tailwind button.button {
  min-height: 40px !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

html[data-ops-theme] body.ops-tailwind .button:hover {
  transform: translateY(-1px) !important;
}

html[data-ops-theme] body.ops-tailwind .button.primary {
  border-color: var(--ja-blue) !important;
  background: var(--ja-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.20) !important;
}

html[data-ops-theme] body.ops-tailwind .button.primary:hover {
  background: var(--ja-blue-hover) !important;
}

html[data-ops-theme] body.ops-tailwind .button.secondary {
  border: 1px solid var(--ja-border) !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text-soft) !important;
  box-shadow: var(--ja-shadow-sm) !important;
}

html[data-ops-theme] body.ops-tailwind .button.secondary:hover {
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-text) !important;
}

html[data-ops-theme] body.ops-tailwind .button.danger {
  border-color: color-mix(in srgb,var(--ja-red) 38%,var(--ja-border)) !important;
  background: var(--ja-red-soft) !important;
  color: var(--ja-red) !important;
  box-shadow: none !important;
}

html[data-ops-theme] body.ops-tailwind .button.small {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

html[data-ops-theme] body.ops-tailwind input,
html[data-ops-theme] body.ops-tailwind select,
html[data-ops-theme] body.ops-tailwind textarea {
  min-height: 42px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--ja-border-strong) !important;
  border-radius: 10px !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
}

html[data-ops-theme] body.ops-tailwind textarea {
  min-height: 104px !important;
  resize: vertical !important;
}

html[data-ops-theme] body.ops-tailwind input:focus,
html[data-ops-theme] body.ops-tailwind select:focus,
html[data-ops-theme] body.ops-tailwind textarea:focus {
  border-color: var(--ja-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--ja-blue) 18%,transparent) !important;
}

html[data-ops-theme] body.ops-tailwind .field > span,
html[data-ops-theme] body.ops-tailwind .search-field > span {
  color: var(--ja-text-soft) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html[data-ops-theme] body.ops-tailwind .toolbar {
  gap: 10px !important;
}

/* Cards, metrics, status and panels */
html[data-ops-theme] body.ops-tailwind .panel,
html[data-ops-theme] body.ops-tailwind .platform-card,
html[data-ops-theme] body.ops-tailwind .soc-panel,
html[data-ops-theme] body.ops-tailwind .didit-panel,
html[data-ops-theme] body.ops-tailwind .didit-config-card,
html[data-ops-theme] body.ops-tailwind .stripe-panel {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 16px !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
  box-shadow: var(--ja-shadow-sm) !important;
}

html[data-ops-theme] body.ops-tailwind .panel-header,
html[data-ops-theme] body.ops-tailwind .soc-panel-header,
html[data-ops-theme] body.ops-tailwind .didit-panel > header {
  min-height: 68px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--ja-border) !important;
  background: var(--ja-surface) !important;
}

html[data-ops-theme] body.ops-tailwind .panel-header h2,
html[data-ops-theme] body.ops-tailwind .soc-panel-header h2,
html[data-ops-theme] body.ops-tailwind .didit-panel > header h2 {
  margin: 0 !important;
  color: var(--ja-text) !important;
  font-size: 16px !important;
}

html[data-ops-theme] body.ops-tailwind .panel-header p,
html[data-ops-theme] body.ops-tailwind .soc-panel-header p,
html[data-ops-theme] body.ops-tailwind .didit-panel > header p {
  margin: 4px 0 0 !important;
  color: var(--ja-muted) !important;
  font-size: 12px !important;
}

html[data-ops-theme] body.ops-tailwind .panel-body,
html[data-ops-theme] body.ops-tailwind .soc-panel-body {
  padding: 18px !important;
}

html[data-ops-theme] body.ops-tailwind .metrics,
html[data-ops-theme] body.ops-tailwind .soc-metric-grid,
html[data-ops-theme] body.ops-tailwind .didit-metrics {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 16px !important;
  margin: 0 0 26px !important;
}

html[data-ops-theme] body.ops-tailwind .metric-card,
html[data-ops-theme] body.ops-tailwind .soc-metric,
html[data-ops-theme] body.ops-tailwind .didit-metric {
  position: relative !important;
  min-width: 0 !important;
  min-height: 148px !important;
  padding: 22px !important;
  overflow: hidden !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 16px !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
  box-shadow: var(--ja-shadow-sm) !important;
}

html[data-ops-theme] body.ops-tailwind .metric-card::before,
html[data-ops-theme] body.ops-tailwind .soc-metric::before,
html[data-ops-theme] body.ops-tailwind .didit-metric::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 4px !important;
  background: var(--ja-blue) !important;
}

html[data-ops-theme] body.ops-tailwind .metric-card span,
html[data-ops-theme] body.ops-tailwind .soc-metric span,
html[data-ops-theme] body.ops-tailwind .didit-metric span {
  display: block !important;
  color: var(--ja-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

html[data-ops-theme] body.ops-tailwind .metric-card strong,
html[data-ops-theme] body.ops-tailwind .soc-metric strong,
html[data-ops-theme] body.ops-tailwind .didit-metric strong {
  display: block !important;
  margin-top: 14px !important;
  color: var(--ja-text) !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

html[data-ops-theme] body.ops-tailwind .metric-card small,
html[data-ops-theme] body.ops-tailwind .soc-metric small,
html[data-ops-theme] body.ops-tailwind .didit-metric small {
  display: block !important;
  margin-top: 10px !important;
  color: var(--ja-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

html[data-ops-theme] body.ops-tailwind .soc-status-strip {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-ops-theme] body.ops-tailwind .soc-status-item {
  min-height: 76px !important;
  padding: 14px !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 14px !important;
  background: var(--ja-surface) !important;
  box-shadow: var(--ja-shadow-sm) !important;
}

html[data-ops-theme] body.ops-tailwind .soc-status-item strong {
  color: var(--ja-text) !important;
  font-size: 12px !important;
}

html[data-ops-theme] body.ops-tailwind .soc-status-item span {
  color: var(--ja-muted) !important;
  font-size: 11px !important;
}

html[data-ops-theme] body.ops-tailwind .soc-grid,
html[data-ops-theme] body.ops-tailwind .split-grid {
  gap: 16px !important;
}

html[data-ops-theme] body.ops-tailwind .soc-page,
html[data-ops-theme] body.ops-tailwind .didit-page {
  gap: 20px !important;
}

/* Tables — familiar admin tables, no page-wide overflow and no card conversion */
html[data-ops-theme] body.ops-tailwind .table-wrap,
html[data-ops-theme] body.ops-tailwind .soc-scroll {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  border-radius: 0 0 16px 16px !important;
}

html[data-ops-theme] body.ops-tailwind .data-table,
html[data-ops-theme] body.ops-tailwind .soc-compact-table {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
  font-size: 12px !important;
}

html[data-ops-theme] body.ops-tailwind .data-table th,
html[data-ops-theme] body.ops-tailwind .soc-compact-table th {
  padding: 11px 13px !important;
  border-bottom: 1px solid var(--ja-border) !important;
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

html[data-ops-theme] body.ops-tailwind .data-table td,
html[data-ops-theme] body.ops-tailwind .soc-compact-table td {
  padding: 12px 13px !important;
  border-bottom: 1px solid var(--ja-border) !important;
  color: var(--ja-text-soft) !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html[data-ops-theme] body.ops-tailwind .data-table tbody tr:hover td,
html[data-ops-theme] body.ops-tailwind .soc-compact-table tbody tr:hover td {
  background: color-mix(in srgb,var(--ja-blue) 5%,var(--ja-surface)) !important;
}

/* Status tags */
html[data-ops-theme] body.ops-tailwind .tag {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 999px !important;
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-text-soft) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

html[data-ops-theme] body.ops-tailwind .tag.active,
html[data-ops-theme] body.ops-tailwind .tag.operational,
html[data-ops-theme] body.ops-tailwind .tag.configured,
html[data-ops-theme] body.ops-tailwind .tag.approved,
html[data-ops-theme] body.ops-tailwind .tag.completed {
  border-color: color-mix(in srgb,var(--ja-green) 24%,var(--ja-border)) !important;
  background: var(--ja-green-soft) !important;
  color: var(--ja-green) !important;
}

html[data-ops-theme] body.ops-tailwind .tag.action-required,
html[data-ops-theme] body.ops-tailwind .tag.action_required,
html[data-ops-theme] body.ops-tailwind .tag.pending,
html[data-ops-theme] body.ops-tailwind .tag.review,
html[data-ops-theme] body.ops-tailwind .tag.in-review {
  border-color: color-mix(in srgb,var(--ja-amber) 24%,var(--ja-border)) !important;
  background: var(--ja-amber-soft) !important;
  color: var(--ja-amber) !important;
}

html[data-ops-theme] body.ops-tailwind .tag.failed,
html[data-ops-theme] body.ops-tailwind .tag.declined,
html[data-ops-theme] body.ops-tailwind .tag.critical,
html[data-ops-theme] body.ops-tailwind .tag.suspended {
  border-color: color-mix(in srgb,var(--ja-red) 24%,var(--ja-border)) !important;
  background: var(--ja-red-soft) !important;
  color: var(--ja-red) !important;
}

/* Notices */
html[data-ops-theme] body.ops-tailwind .notice {
  padding: 14px 16px !important;
  border: 1px solid color-mix(in srgb,var(--ja-blue) 18%,var(--ja-border)) !important;
  border-radius: 14px !important;
  background: var(--ja-blue-soft) !important;
  color: var(--ja-text-soft) !important;
  box-shadow: none !important;
}

html[data-ops-theme] body.ops-tailwind .notice strong {
  color: var(--ja-text) !important;
}

html[data-ops-theme] body.ops-tailwind .notice.danger {
  border-color: color-mix(in srgb,var(--ja-red) 24%,var(--ja-border)) !important;
  background: var(--ja-red-soft) !important;
}

/* Modals — one theme from shell to form controls */
html[data-ops-theme] body.ops-tailwind dialog#modal {
  width: min(760px,calc(100vw - 32px)) !important;
  max-width: 760px !important;
  max-height: calc(100dvh - 32px) !important;
  color: var(--ja-text) !important;
}

html[data-ops-theme] body.ops-tailwind dialog#modal::backdrop {
  background: rgba(2,6,23,.60) !important;
  backdrop-filter: blur(4px) !important;
}

html[data-ops-theme] body.ops-tailwind #modal .modal-shell {
  max-height: calc(100dvh - 32px) !important;
  border: 1px solid var(--ja-border) !important;
  border-radius: 20px !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
  box-shadow: var(--ja-shadow-xl) !important;
}

html[data-ops-theme] body.ops-tailwind #modal .modal-shell > header {
  padding: 20px 22px !important;
  border-bottom: 1px solid var(--ja-border) !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
}

html[data-ops-theme] body.ops-tailwind #modal .modal-shell > header .eyebrow {
  color: var(--ja-blue) !important;
}

html[data-ops-theme] body.ops-tailwind #modal .modal-shell > header h2 {
  color: var(--ja-text) !important;
  font-size: 20px !important;
}

html[data-ops-theme] body.ops-tailwind #modal .modal-shell > header p:not(.eyebrow) {
  color: var(--ja-muted) !important;
}

html[data-ops-theme] body.ops-tailwind #modal .modal-shell > header .icon-button {
  border: 1px solid var(--ja-border) !important;
  background: var(--ja-surface-subtle) !important;
  color: var(--ja-muted) !important;
}

html[data-ops-theme] body.ops-tailwind #modal .modal-content {
  padding: 22px !important;
  background: var(--ja-surface) !important;
}

html[data-ops-theme] body.ops-tailwind #modal .form-actions {
  margin: 20px -22px -22px !important;
  padding: 15px 22px !important;
  border-top: 1px solid var(--ja-border) !important;
  background: var(--ja-surface-subtle) !important;
}

/* Didit request: automatic delivery, no giant generic checkbox */
html[data-ops-theme] body.ops-tailwind #modal form[data-form="didit-start"] .didit-start-auto-email {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 15px !important;
  border: 1px solid color-mix(in srgb,var(--ja-green) 24%,var(--ja-border)) !important;
  border-radius: 14px !important;
  background: var(--ja-green-soft) !important;
}

html[data-ops-theme] body.ops-tailwind #modal form[data-form="didit-start"] .didit-start-auto-email strong,
html[data-ops-theme] body.ops-tailwind #modal form[data-form="didit-start"] .didit-start-auto-email small {
  display: block !important;
}

html[data-ops-theme] body.ops-tailwind #modal form[data-form="didit-start"] .didit-start-auto-email strong {
  color: var(--ja-text) !important;
  font-size: 12px !important;
}

html[data-ops-theme] body.ops-tailwind #modal form[data-form="didit-start"] .didit-start-auto-email small {
  margin-top: 3px !important;
  color: var(--ja-muted) !important;
  font-size: 11px !important;
}

/* Login */
html[data-ops-theme] body.ops-tailwind .login-screen {
  color: var(--ja-text) !important;
  background:
    radial-gradient(circle at 78% 12%,rgba(37,99,235,.18),transparent 32%),
    radial-gradient(circle at 18% 88%,rgba(14,165,233,.10),transparent 30%),
    var(--ja-bg) !important;
}

html[data-ops-theme] body.ops-tailwind .login-brand strong,
html[data-ops-theme] body.ops-tailwind .login-card h1 {
  color: var(--ja-text) !important;
}

html[data-ops-theme] body.ops-tailwind .login-brand span,
html[data-ops-theme] body.ops-tailwind .login-footer {
  color: var(--ja-muted) !important;
}

html[data-ops-theme] body.ops-tailwind .login-card {
  border-color: var(--ja-border) !important;
  border-radius: 22px !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
  box-shadow: var(--ja-shadow-xl) !important;
}

/* Toasts */
html[data-ops-theme] body.ops-tailwind .toast {
  border: 1px solid var(--ja-border) !important;
  border-radius: 14px !important;
  background: var(--ja-surface) !important;
  color: var(--ja-text) !important;
  box-shadow: var(--ja-shadow-xl) !important;
}

/* Responsive parity */
@media (max-width: 1180px) {
  html[data-ops-theme] body.ops-tailwind .primary-header-navigation {
    display: none !important;
  }

  html[data-ops-theme] body.ops-tailwind .ops-header-actions {
    margin-left: auto !important;
  }

  html[data-ops-theme] body.ops-tailwind .metrics,
  html[data-ops-theme] body.ops-tailwind .soc-metric-grid,
  html[data-ops-theme] body.ops-tailwind .didit-metrics {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  html[data-ops-theme] body.ops-tailwind .soc-status-strip {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 820px) {
  html[data-ops-theme] body.ops-tailwind .ops-header-main {
    padding: 0 16px !important;
  }

  html[data-ops-theme] body.ops-tailwind .ops-brand-copy span,
  html[data-ops-theme] body.ops-tailwind .product-badge,
  html[data-ops-theme] body.ops-tailwind .account-summary-copy,
  html[data-ops-theme] body.ops-tailwind .global-search {
    display: none !important;
  }

  html[data-ops-theme] body.ops-tailwind .breadcrumbs {
    margin-left: 16px !important;
  }

  html[data-ops-theme] body.ops-tailwind .content {
    padding: 24px 16px 36px !important;
  }

  html[data-ops-theme] body.ops-tailwind #mainNavigation {
    grid-template-columns: 1fr !important;
  }

  html[data-ops-theme] body.ops-tailwind .page-heading,
  html[data-ops-theme] body.ops-tailwind .soc-command-header {
    grid-template-columns: 1fr !important;
    padding: 23px 20px !important;
    border-radius: 20px !important;
  }

  html[data-ops-theme] body.ops-tailwind .page-heading > div:last-child,
  html[data-ops-theme] body.ops-tailwind .soc-command-actions {
    justify-content: flex-start !important;
  }

  html[data-ops-theme] body.ops-tailwind .system-footer {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding-inline: 18px !important;
  }
}

@media (max-width: 620px) {
  html[data-ops-theme] body.ops-tailwind .ops-brand-copy {
    display: none !important;
  }

  html[data-ops-theme] body.ops-tailwind .all-tools-button span {
    display: none !important;
  }

  html[data-ops-theme] body.ops-tailwind .account-menu {
    padding-left: 6px !important;
  }

  html[data-ops-theme] body.ops-tailwind .metrics,
  html[data-ops-theme] body.ops-tailwind .soc-metric-grid,
  html[data-ops-theme] body.ops-tailwind .didit-metrics,
  html[data-ops-theme] body.ops-tailwind .soc-status-strip {
    grid-template-columns: 1fr !important;
  }

  html[data-ops-theme] body.ops-tailwind .metric-card,
  html[data-ops-theme] body.ops-tailwind .soc-metric,
  html[data-ops-theme] body.ops-tailwind .didit-metric {
    min-height: 126px !important;
  }
}