/* ITD User Tools core design tokens.
 * Tokens only: no broad element styling.
 */
:root {
  --itd-ut-color-ink: #2f2e40;
  --itd-ut-color-text: #111827;
  --itd-ut-color-muted: #6b6b75;
  --itd-ut-color-border: #cfd6dd;
  --itd-ut-color-border-strong: #a8abb3;
  --itd-ut-color-panel: #eef3f4;
  --itd-ut-color-panel-soft: #f7f8fa;
  --itd-ut-color-error: #b42318;
  --itd-ut-color-error-border: #f0b8b8;
  --itd-ut-color-error-bg: #fff7f7;
  --itd-ut-color-success: #008357;
  --itd-ut-radius-card: 18px;
  --itd-ut-radius-field: 16px;
  --itd-ut-radius-pill: 999px;
  --itd-ut-shadow-card: 0 10px 28px rgba(0, 0, 0, 0.05);
  --itd-ut-focus-ring: 0 0 0 3px rgba(47, 46, 64, 0.08);
  --itd-ut-font-size-field: 16px;
}

/* Central OnBoard administrator navigation and shell primitives. */
.ut-admin-page-title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 46px;
  font-weight: 900;
  gap: 10px;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 12px;
}
.ut-admin-page-version {
  color: var(--itd-ut-color-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.ut-admin-tabs,
.ut-admin-subtabs {
  background: #fff;
  border: 1px solid #dcdcde;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 0 14px;
  width: 100%;
}
.ut-admin-tabs {
  border-bottom: 0;
  margin: 16px 0 0;
}
.ut-admin-subtabs {
  margin: 14px 0;
}
.ut-admin-tabs a,
.ut-admin-subtabs a {
  border-bottom: 3px solid transparent;
  color: #646970;
  font-size: 13px;
  font-weight: 700;
  margin-right: 22px;
  padding: 14px 0 11px;
  text-decoration: none;
  text-transform: uppercase;
}
.ut-admin-tabs a.is-active,
.ut-admin-subtabs a.is-active {
  border-bottom-color: var(--itd-ut-color-ink);
  color: var(--itd-ut-color-ink);
}
.ut-admin-tabs a:focus-visible,
.ut-admin-subtabs a:focus-visible {
  box-shadow: 0 0 0 2px #2271b1;
  outline: 2px solid transparent;
}
.ut-admin-shell {
  background: #f6f7f7;
  border: 1px solid #dcdcde;
  box-sizing: border-box;
  margin: 0 0 24px;
  width: 100%;
}
.ut-admin-shell-head {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #dcdcde;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding: 18px 20px;
}
.ut-admin-shell-title h2 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 4px;
}
.ut-admin-shell-title p {
  margin: 0;
  max-width: 760px;
}
.ut-admin-shell-body {
  padding: 10px;
}
.ut-admin-shell-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 782px) {
  .ut-admin-tabs,
  .ut-admin-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }
  .ut-admin-shell-actions {
    width: 100%;
  }
  .ut-admin-shell-actions .button {
    text-align: center;
    width: 100%;
  }
}

/* Shared OnBoard roles. Legacy --itd-ut-* values remain unchanged. */
:root {
  --ob-color-interaction: #1d4ed8;
  --ob-color-interaction-hover: #1e40af;
  --ob-color-interaction-soft: #eff6ff;
  --ob-color-neutral-ink: #344951;
  --ob-color-neutral-bg: #e9edf0;
  --ob-color-error-ink: #b42318;
  --ob-color-error-bg: #fef3f2;
  --ob-color-destructive-ink: var(--ob-color-error-ink);
  --ob-color-destructive-hover: #912018;
  --ob-color-ink: #182b32;
  --ob-color-muted: #52646c;
  --ob-color-line: #d8e1e3;
  --ob-color-accent: var(--ob-color-interaction);
  --ob-color-focus: var(--ob-color-interaction);
  --ob-color-surface: #fff;
  --ob-color-divider: #edf1f2;
  --ob-color-canvas: #f6f8f8;
  --ob-color-layout: #e9eeee;
  --ob-color-field-border: #82939b;
  --ob-color-preview: #e8eeef;
  --ob-color-chip-bg: var(--ob-color-neutral-bg);
  --ob-color-chip-ink: var(--ob-color-neutral-ink);
  --ob-color-positive-ink: #145548;
  --ob-color-positive-bg: #e0f0e9;
  --ob-color-attention-ink: #794309;
  --ob-color-attention-bg: #fff0d4;
  --ob-color-history-ink: var(--ob-color-neutral-ink);
  --ob-color-history-bg: var(--ob-color-neutral-bg);
  --ob-color-drawer-shadow: #172d3422;
  --ob-color-backdrop: #152c3855;
  --ob-color-tray-bg: var(--ob-color-interaction);
  --ob-color-tray-shadow: #102e3322;
  --ob-color-notice-border: #9b711b;
  --ob-color-notice-bg: #fff6e4;
  --ob-color-fallback-start: #e3eeee;
  --ob-color-fallback-end: #edf0e6;
  --ob-color-fallback-ink: #4c6867;
  --ob-color-media-bg: #edf1f1;
  --ob-color-media-muted: #647779;
  --ob-color-hover-border: var(--ob-color-interaction);
  --ob-color-hover-shadow: #173f3a0a;
  --ob-color-selection-shadow: #173f3a12;
  --ob-color-checkbox-border: var(--ob-color-field-border);
  --ob-color-button-border: var(--ob-color-interaction);
  --ob-color-button-ink: var(--ob-color-interaction);
  --ob-color-button-hover-bg: var(--ob-color-interaction-soft);
  --ob-color-button-hover-ink: var(--ob-color-interaction-hover);
  --ob-color-accent-hover: var(--ob-color-interaction-hover);
  --ob-color-disabled-bg: #edf0ef;
  --ob-color-disabled-border: #d5dedc;
  --ob-color-disabled-ink: var(--ob-color-muted);
  --ob-color-tray-button-ink: var(--ob-color-interaction);
  --ob-color-tray-button-border: var(--ob-color-surface);
  --ob-color-editor-bg: #fafcfc;
}

:root {
  --ob-radius-panel:12px; --ob-radius-card:10px; --ob-radius-control:6px; --ob-radius-detail:8px;
  --ob-shadow-drawer:-10px 0 50px var(--ob-color-drawer-shadow);
  --ob-shadow-tray:0 5px 18px var(--ob-color-tray-shadow);
}

/* Shared dimensions; legacy aliases retained for existing consumers. */
:root {
 --ob-color-error:var(--ob-color-error-ink);
 --ob-font-workspace:32px; --ob-font-section:20px; --ob-font-body:14px; --ob-font-label:12px; --ob-font-meta:12px;
 --ob-space-1:4px; --ob-space-2:8px; --ob-space-3:12px; --ob-space-4:16px; --ob-space-6:24px; --ob-space-8:32px;
 --ob-space-control:var(--ob-space-2); --ob-space-group:var(--ob-space-4); --ob-space-panel:var(--ob-space-6); --ob-space-workspace:var(--ob-space-6);
 --ob-font-card:16px; --ob-line-body:1.5; --ob-border-width:1px; --ob-control-touch-height:44px;
 --ob-card-padding:var(--ob-space-4); --ob-collection-gap:var(--ob-space-4); --ob-density-compact-gap:var(--ob-space-2);
 --ob-control-min-height:38px; --ob-width-library:1680px; --ob-width-editor:960px;
}
