/* ARARBOT production system layer.
 * Loaded last so legacy page CSS can migrate incrementally without changing
 * selectors used by the current dashboard and widget behaviour. */
:root {
  --ds-font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --ds-color-primary: #114473;
  --ds-color-primary-strong: #0c3357;
  --ds-color-accent: #16625d;
  --ds-color-info: #2563a6;
  --ds-color-success: #147a5b;
  --ds-color-warning: #a86212;
  --ds-color-danger: #c2413b;
  --ds-color-bg: #f4f7fa;
  --ds-color-surface: #fff;
  --ds-color-surface-subtle: #f8fafc;
  --ds-color-surface-muted: #eef3f7;
  --ds-color-border: #dce4eb;
  --ds-color-border-soft: #e9eef3;
  --ds-color-text: #152337;
  --ds-color-muted: #627187;
  --ds-color-faint: #8b98a8;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-shadow-sm: 0 1px 2px rgba(16, 36, 58, .06), 0 3px 10px rgba(16, 36, 58, .035);
  --ds-shadow-md: 0 10px 24px rgba(16, 36, 58, .08);
  --ds-focus: 0 0 0 3px rgba(22, 98, 93, .2);
  --ds-motion: 160ms ease;
}

html { font-family: var(--ds-font-sans); background: var(--ds-color-bg); }
body { font-family: var(--ds-font-sans); color: var(--ds-color-text); background: var(--ds-color-bg); }

/* Shared keyboard focus, form and disabled states. */
:where(.app-main, .ops-page, .pg-wrap) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus);
}
:where(.app-main, .ops-page, .pg-wrap) :where(input, select, textarea) {
  border-color: var(--ds-color-border);
  color: var(--ds-color-text);
  background: var(--ds-color-surface);
}
:where(.app-main, .ops-page, .pg-wrap) :where(input, select, textarea)::placeholder { color: var(--ds-color-faint); }
:where(.app-main, .ops-page, .pg-wrap) :where(button, .btn, a.btn):disabled,
:where(.app-main, .ops-page, .pg-wrap) :where(button, .btn, a.btn)[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: .56;
}

/* Consistent operational states available to every page. */
.ui-state { display: grid; place-items: center; min-height: 160px; padding: var(--ds-space-6); color: var(--ds-color-muted); text-align: center; }
.ui-state__title { margin: 0 0 var(--ds-space-2); color: var(--ds-color-text); font-size: 14px; font-weight: 700; }
.ui-state__text { max-width: 42ch; margin: 0; font-size: 12px; line-height: 1.55; }
.ui-state--error { color: var(--ds-color-danger); }
.ui-state--error .ui-state__title { color: var(--ds-color-danger); }
.ui-skeleton { position: relative; overflow: hidden; min-height: 12px; border-radius: var(--ds-radius-sm); background: var(--ds-color-surface-muted); }
.ui-skeleton::after { position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: ui-skeleton-shimmer 1.4s infinite; content: ''; }
@keyframes ui-skeleton-shimmer { to { transform: translateX(100%); } }

/* Existing Django includes use these stable component hooks. */
.component-empty-state { display: grid; place-items: center; min-height: 160px; padding: var(--ds-space-6); color: var(--ds-color-muted); text-align: center; }
.component-empty-state__icon { margin-bottom: var(--ds-space-3); color: var(--ds-color-faint); font-size: 28px; }
.component-empty-state__title { color: var(--ds-color-text); font-size: 14px; font-weight: 700; }
.component-empty-state__description { max-width: 46ch; margin-top: var(--ds-space-2); font-size: 12px; line-height: 1.55; }
.component-empty-state__action { margin-top: var(--ds-space-4); }
.component-skeleton { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4); }
.component-skeleton__block, .component-skeleton__line, .component-skeleton__avatar { position: relative; overflow: hidden; border-radius: var(--ds-radius-sm); background: var(--ds-color-surface-muted); }
.component-skeleton__block { min-height: 72px; }.component-skeleton__line { min-height: 12px; }.component-skeleton__line--short { width: 38%; }.component-skeleton__line--medium { width: 68%; }.component-skeleton__avatar { width: 36px; height: 36px; border-radius: 50%; }
.component-skeleton__row { display: flex; align-items: center; gap: var(--ds-space-3); }.component-skeleton__body { display: grid; flex: 1; gap: var(--ds-space-2); }
.component-skeleton__block::after, .component-skeleton__line::after, .component-skeleton__avatar::after { position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: ui-skeleton-shimmer 1.4s infinite; content: ''; }
.connection-section { margin-top: var(--ds-space-5); }
.ops-table-wrap { width: 100%; overflow-x: auto; }
.ops-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ops-table th, .ops-table td { padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border-soft); text-align: left; vertical-align: middle; }
.ops-table th { color: var(--ds-color-muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.ops-table td strong, .ops-table td small { display: block; }.ops-table td small { margin-top: var(--ds-space-1); color: var(--ds-color-faint); }
.ops-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: var(--ds-color-surface-muted); color: var(--ds-color-muted); font-size: 10px; font-weight: 700; }
.ops-status--ready { background: #e8f5ef; color: var(--ds-color-success); }.ops-status--failed { background: #fceceb; color: var(--ds-color-danger); }

/* KPI toolbar: keep the page heading flat and compact. Platform legacy styles
 * otherwise turn both the toolbar and its filter into nested cards. */
.kpi-page { padding: 0; }
.kpi-page .kpi-toolbar {
  min-height: 0;
  margin-bottom: var(--ds-space-5);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kpi-page .kpi-filter {
  padding: var(--ds-space-1);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface);
  box-shadow: none;
}
.kpi-page .kpi-filter select { background-color: var(--ds-color-surface-subtle); }
.kpi-page .kpi-filter button { min-height: 38px; border-color: var(--ds-color-primary); background: var(--ds-color-primary); color: #fff; }
.kpi-page .kpi-filter button:hover { border-color: var(--ds-color-primary-strong); background: var(--ds-color-primary-strong); color: #fff; }

@media (max-width: 760px) {
  .kpi-page .kpi-toolbar { align-items: stretch; }
  .kpi-page .kpi-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .kpi-page .kpi-filter label { grid-column: 1 / -1; }
}

.realtime-status { display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:4px 8px;border:1px solid var(--ds-color-border);border-radius:999px;background:var(--ds-color-surface-subtle);color:var(--ds-color-muted);font-size:10px;font-weight:700;white-space:nowrap; }
.realtime-status__dot { width:7px;height:7px;border-radius:50%;background:var(--ds-color-faint); }
.realtime-status[data-state='connected'] { border-color:#c8e8da;background:#edf8f3;color:var(--ds-color-success); }.realtime-status[data-state='connected'] .realtime-status__dot { background:var(--ds-color-success);box-shadow:0 0 0 3px rgba(20,122,91,.12); }
.realtime-status[data-state='connecting'],.realtime-status[data-state='reconnecting'] { border-color:#ead8b3;background:#fff7e8;color:var(--ds-color-warning); }.realtime-status[data-state='connecting'] .realtime-status__dot,.realtime-status[data-state='reconnecting'] .realtime-status__dot { background:var(--ds-color-warning);animation:realtime-pulse 1.2s ease-in-out infinite; }
.realtime-status[data-state='offline'],.realtime-status[data-state='exhausted'],.realtime-status[data-state='unauthorized'],.realtime-status[data-state='not_found'] { border-color:#efcfcc;background:#fdf0ef;color:var(--ds-color-danger); }.realtime-status[data-state='offline'] .realtime-status__dot,.realtime-status[data-state='exhausted'] .realtime-status__dot,.realtime-status[data-state='unauthorized'] .realtime-status__dot,.realtime-status[data-state='not_found'] .realtime-status__dot { background:var(--ds-color-danger); }
@keyframes realtime-pulse { 50% { opacity:.35;transform:scale(.8); } }
@media(max-width:760px){.realtime-status__text{max-width:90px;overflow:hidden;text-overflow:ellipsis}.realtime-status{padding-inline:7px}}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}