/* Shared application finish. Explicit !important declarations override the
   legacy design-system rules in spotter.css; operational colors stay semantic. */
.app-shell {
  --ui-accent: #3159c6;
  --ui-accent-rgb: 49, 89, 198;
  --ui-surface: #fff;
  --ui-surface-soft: #f5f7fc;
  --ui-sidebar: #fff;
  --ui-nav-border: rgba(72, 94, 134, .09);
  --ui-ink: #23324d;
  --ui-muted: #61718b;
  --ui-border: rgba(72, 94, 134, .16);
  --ui-shadow: 0 2px 4px rgba(27, 44, 78, .025), 0 8px 26px -18px rgba(27, 44, 78, .22);
  --ui-floating-shadow: 0 18px 50px -16px rgba(25, 42, 75, .24), 0 3px 10px rgba(25, 42, 75, .04);
  background: var(--bg);
}
html.dark .app-shell {
  --ui-accent: #a0bcff;
  --ui-accent-rgb: 139, 173, 255;
  --ui-surface: #141c2b;
  --ui-surface-soft: #192336;
  --ui-sidebar: #101827;
  --ui-nav-border: rgba(158, 182, 226, .09);
  --ui-ink: #e4ebf8;
  --ui-muted: #a1aec5;
  --ui-border: rgba(158, 182, 226, .14);
  --ui-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 8px 26px -18px rgba(0, 0, 0, .45);
  --ui-floating-shadow: 0 18px 50px -16px rgba(0, 0, 0, .65), 0 3px 10px rgba(0, 0, 0, .15);
}

/* Sidebar: clean, borderless groups with a subtle selection. */
.app-shell .sidebar {
  background: var(--ui-sidebar) !important;
  border-right: 0 !important;
  box-shadow: none !important;
}
.sidebar .sb-head { padding-bottom: 14px; margin-bottom: 8px; border-bottom: 0; }
.sidebar .brand { gap: 12px; padding: 4px 9px; }
.sidebar .brand .name { color: var(--ui-ink); font-size: 18px; font-weight: 750; letter-spacing: -.055em; }
.sidebar .brand .ver { color: var(--ui-muted); font-size: 8px; letter-spacing: .09em; }
.sidebar .logo-mark { width: 34px; height: 34px; }
.sidebar .sb-nav { padding: 2px 3px 20px; scrollbar-width: thin; scrollbar-color: var(--ui-border) transparent; }
.sidebar .sb-nav::-webkit-scrollbar { display: block; width: 3px; }
.sidebar .sb-nav::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--ui-border); }
.sidebar .nav-section { color: var(--ui-muted) !important; font-size: 8px !important; font-weight: 600 !important; letter-spacing: .16em !important; margin-bottom: 10px; }
.sidebar .sb-nav .nav-item {
  position: relative;
  min-height: 32px;
  gap: 9px;
  border: 0;
  border-radius: 0 !important;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.45;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.sidebar .nav-item .grow { min-width: 0; overflow-wrap: anywhere; }
.sidebar .nav-icon { color: var(--ui-muted); flex-shrink: 0; transition: color .16s ease; }
.sidebar .nav-subgroup a.nav-item {
  background: transparent !important;
}
.sidebar .sb-nav a.nav-item:hover {
  color: var(--ui-accent) !important;
  background: rgba(var(--ui-accent-rgb), .035) !important;
}
.sidebar .sb-nav a.nav-item.active {
  background: rgba(var(--ui-accent-rgb), .065) !important;
  color: var(--ui-accent) !important;
  font-weight: 650 !important;
  box-shadow: none;
}
.sidebar .sb-nav a.nav-item:hover .nav-icon,
.sidebar .sb-nav a.nav-item.active .nav-icon,
.sidebar .nav-item.nav-parent.current .nav-icon { color: var(--ui-accent); }
.sidebar .sb-nav .nav-parent { margin-top: 11px; border-bottom: 0; color: var(--ui-ink) !important; font-weight: 650 !important; }
.sidebar .sb-nav .nav-parent:hover { background: transparent !important; }
.sidebar .nav-subgroup { margin: 3px 0 6px 18px; padding-left: 9px; gap: 3px; border-left: 0; }
.sidebar .nav-subgroup .nav-item { padding: 7px 8px !important; font-size: 10.5px !important; }
.sidebar .nav-subgroup .nav-icon { width: 15px; height: 15px; }
.sidebar .nav-subgroup-nested { margin-left: 10px; padding-left: 7px; }
.sidebar .nav-item .nav-badge {
  padding: 2px 6px !important;
  border: 0 !important;
  background: rgba(var(--ui-accent-rgb), .045) !important;
  color: var(--ui-muted) !important;
  font-size: 8px !important;
  box-shadow: none;
}
.sidebar .script-live-badge { margin-inline-start: 0; padding: 3px 5px; border: 0; font-size: 8px; letter-spacing: .025em; }
.sidebar .script-live-link.nav-item { font-size: 9px !important; }

/* Top navigation and account controls. */
.app-shell .topbar {
  min-height: 64px;
  height: auto;
  background: var(--ui-surface) !important;
  border-bottom-color: var(--ui-nav-border) !important;
  box-shadow: 0 4px 16px -15px rgba(30, 48, 79, .35) !important;
}
.app-shell .topbar .crumbs { gap: 10px; font-size: 10px; color: var(--ui-muted) !important; }
.app-shell .topbar .crumbs b { color: var(--ui-ink); font-weight: 650; }
.topbar .crumbs .sep { opacity: .5; }
.app-shell .topbar :is(.theme-pill, .user-pill, .bell-btn, .sb-toggle) {
  border: 1px solid var(--ui-nav-border) !important;
  border-radius: 0 !important;
  background: var(--ui-surface) !important;
  color: var(--ui-muted) !important;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.app-shell .topbar :is(.theme-pill, .user-pill, .bell-btn, .sb-toggle):hover {
  background: var(--ui-surface-soft) !important;
  border-color: rgba(var(--ui-accent-rgb), .3) !important;
  color: var(--ui-accent) !important;
}
.topbar .user-pill .avatar { border-radius: 8px; }
.topbar .user-pill .meta b { color: var(--ui-ink); }
.topbar .user-pill .meta em { color: var(--ui-muted); }
.app-shell .server-clock { border-color: var(--ui-border); background: var(--ui-surface-soft); color: var(--ui-muted); box-shadow: none; }
.app-shell :is(.user-menu, .bell-panel, .drop-menu) {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-nav-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--ui-floating-shadow) !important;
}
.app-shell .user-menu-item { border-radius: 0; }
.app-shell :is(.user-menu-item, .bell-item-title) { font-size: 10.5px; }
.app-shell .bell-item-body { font-size: 10px; }
.app-shell :is(.user-menu-item, .bell-item):hover { background: rgba(var(--ui-accent-rgb), .06); }

/* Shared horizontal navigation: one white panel, with tabs as its header. */
.app-shell :is(.lab-subnav, .tabs-row) {
  gap: 4px;
  padding: 0 16px !important;
  border: 1px solid var(--ui-nav-border) !important;
  border-radius: 0;
  background: var(--ui-surface);
  box-shadow: none;
  scroll-padding-inline: 12px;
}
.app-shell :is(.lab-subtab, .tab-btn, .api-tab, .portal-tab) {
  margin-bottom: 0;
  min-height: 56px;
  padding: 18px 22px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: var(--ui-surface) !important;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.app-shell :is(.lab-subtab, .tab-btn, .api-tab, .portal-tab):hover { background: var(--ui-surface) !important; border-bottom-color: rgba(var(--ui-accent-rgb), .22) !important; color: var(--ui-ink) !important; }
.app-shell :is(.lab-subtab, .tab-btn, .api-tab, .portal-tab).active {
  background: var(--ui-surface) !important;
  border-bottom-color: var(--ui-accent) !important;
  box-shadow: none !important;
  color: var(--ui-accent) !important;
  font-weight: 650 !important;
}

/* Panels, forms, actions and tables share the same visual weight. */
.app-shell :is(.glass, .glass-strong, .card, .stat-card, .api-dir-card, .portal-card, .user-card, .settings-card) {
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
}
.app-shell .page-header h1 { font-size: clamp(22px, 2vw, 28px) !important; font-weight: 700 !important; letter-spacing: -.04em; }
.app-shell .page-header .sub { margin-top: 7px; font-size: 12px; line-height: 1.65; }
.app-shell .i3-status-action { min-height: 38px; background: rgba(var(--i3-rgb), .09) !important; border-color: rgba(var(--i3-rgb), .25) !important; color: var(--i3-tone) !important; }
.app-shell .i3-status-action:hover { background: rgba(var(--i3-rgb), .16) !important; }
.app-shell :is(.btn, .btn-primary, .btn-success, .btn-info, .btn-danger, .btn-ghost) { border-radius: 0 !important; letter-spacing: .005em; }
.app-shell :is(.btn-primary, .btn-success):not(:disabled):not(.is-disabled) {
  background: linear-gradient(135deg, #3865d9, #2e4fa8) !important;
  border: 1px solid rgba(35, 67, 147, .25) !important;
  color: #fff !important;
  box-shadow: 0 3px 7px rgba(38, 74, 166, .18) !important;
}
.app-shell :is(.btn, .btn-info, .btn-ghost):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.i3-status-action) { border-color: var(--ui-border) !important; }
.app-shell :is(.btn, .btn-primary, .btn-success, .btn-info, .btn-danger, .btn-ghost):is(:disabled, [aria-disabled="true"], .is-disabled) { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none !important; }
.app-shell :is(.input, .input-sm, .dt-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], select, textarea) { border-color: var(--ui-border) !important; transition: border-color .16s ease, box-shadow .16s ease; }
.app-shell :is(.input, .input-sm, .dt-select, input, select, textarea):focus { border-color: rgba(var(--ui-accent-rgb), .55) !important; box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .1) !important; }
.app-shell :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--bad) !important; }
.app-shell :is(.tbl, .table, .data-table, .dt-table) th { color: var(--ui-muted) !important; font-size: 10.5px !important; letter-spacing: .035em !important; }
.app-shell :is(.tbl, .table, .data-table, .dt-table) td { border-bottom-color: var(--ui-border) !important; }
.app-shell :is(.tbl, .table, .data-table, .dt-table) tbody tr:hover td { background: rgba(var(--ui-accent-rgb), .035) !important; }
.app-shell :is(.pager, .dash-pager) { border-top-color: var(--ui-border) !important; }
.app-shell :is(.pager-num, .pb).active,
.app-shell .pager-num.is-current { background: var(--ui-accent) !important; color: var(--ui-surface) !important; }

/* Clear keyboard navigation and reduced-motion support across shared controls. */
.app-shell :is(a, button, [role="button"], summary):focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 3px; }
@media (max-width: 768px) {
  .app-shell .sidebar { padding-top: 16px; }
  .sidebar .sb-nav .nav-item { min-height: 40px; }
  .app-shell .topbar { min-height: 60px; }
  .app-shell .topbar .crumbs { font-size: 10.5px; }
  .app-shell :is(.lab-subnav, .tabs-row) { padding: 0 8px !important; gap: 4px; }
  .app-shell :is(.lab-subtab, .tab-btn, .api-tab, .portal-tab) { min-height: 44px; padding: 12px 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell :is(.nav-item, .nav-icon, .btn, .btn-primary, .btn-success, .btn-info, .btn-danger, .btn-ghost, .lab-subtab, .tab-btn, .api-tab, .portal-tab, .theme-pill, .user-pill, .input, select, textarea) { transition: none !important; }
}

/* Application-wide square component language. The root ID deliberately wins
   over legacy workspace rules; circular indicators and native radio/switch
   controls are excluded. Content geometry and semantic state colors stay local. */
#atlas-app.app-shell {
  --radius: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --line: var(--ui-border);
  --border: var(--ui-border);
  --bg-elev: var(--ui-surface);
  --glass-bg: var(--ui-surface);
  --glass-bg-2: var(--ui-surface);
  --shadow-1: 0 1px 3px rgba(27, 44, 78, .025);
  font-weight: 400;
}
#atlas-app.app-shell :is(
  div, button, select, textarea, fieldset, details, dialog, pre, table, section, article, nav, aside,
  input:not([type="radio"]):not([type="range"]):not([type="checkbox"]),
  .glass, .glass-strong, .card, .panel, .btn, .badge, .pill, .menu, .terminal,
  .box, .notice, .alert, .input, .input-sm, .stat-card, .nav-item, .nav-badge,
  .chip, .tag, .toast, .pager-num, .pb, .server-clock, .overview-date,
  .lab-subnav, .tabs-row, .code-tabs, .code-tab, .api-mode-seg, .api-mode-seg-opt,
  .i3-status-hero, .i3-status-state, .i3-status-environment, .i3-status-metric,
  .i3-status-error-message, .i3-status-monitor-note, .i3-status-error-label code,
  .i3screen-cmd-status, .i3screen-pre, .i3screen-group, .i3pool-activity,
  .webmvr-metrics > div, .webmvr-code, .fmcsa-db-stat, .fmcsa-db-page-label,
  .server-metric, .bulk-owner, .bulk-empty, .bulk-api-pool, .bulk-policy-grid > div,
  [class*="-card"], [class*="-panel"], [class*="-badge"], [class*="-pill"],
  [class*="-notice"], [class*="-alert"], [class*="-terminal"], [class*="-menu"],
  [class*="-btn"], [class*="btn-"], [class*="-tab"], [class*="-box"],
  [class*="-table-wrap"], [class*="-empty"], [class*="-error"],
  [class*="-stats"], [class*="-summary"], [class*="-label"], [class*="-tag"],
  [class*="-note"], [class*="-hint"], [class*="-result"], [class*="-code"],
  [class*="-filter"], [class*="-toolbar"], [class*="-metric"],
  .docs-tree a, .docs-open-link, .docs-table-wrap, .docs-callout
):not(:where(
  [class*="-dot"], [class*="-spinner"], [class*="-avatar"], .avatar, .logo-mark,
  [class*="-icon"], [class*="-ico"], [role="switch"], .switch, .switch *,
  .toggle-switch, .toggle-switch *
)) {
  border-radius: 0 !important;
}
/* Highly scoped overview badges have their own legacy ID selectors. */
#atlas-app #overview :is(.chip, .overview-date, .dash-panel-arrow) { border-radius: 0 !important; }
#atlas-app.app-shell :is(.card, .glass, .glass-strong, .stat-card, .settings-card, .api-dir-card, .portal-card, .user-card) {
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}
#atlas-app.app-shell :is(.user-menu, .bell-panel, .drop-menu, dialog, .modal) {
  box-shadow: 0 10px 28px -12px rgba(25, 42, 75, .2) !important;
}

/* Lighter hierarchy: headings remain distinct through size and separation. */
#atlas-app.app-shell h1 { font-weight: 500 !important; }
#atlas-app.app-shell :is(h2, h3, h4, legend, summary, .section-title, .api-title, .portal-title, .dash-panel-title) { font-weight: 500 !important; }
#atlas-app.app-shell :is(
  button, .btn, [class*="btn-"], .nav-item, .lab-subtab, .tab-btn, .code-tab,
  .api-tab, .portal-tab, .i3screen-settings-tab, .field-label, .lbl, label,
  .user-menu-item, .api-mode-panel-hint, .i3-status-environment, .i3-status-action
) { font-weight: 400 !important; }
#atlas-app.app-shell :is(.nav-item, .lab-subtab, .tab-btn, .code-tab).active,
#atlas-app.app-shell .nav-parent,
#atlas-app.app-shell [role="tab"][aria-selected="true"] { font-weight: 500 !important; }
#atlas-app.app-shell :is(.chip, .nav-badge, .script-live-badge, .api-mode-panel-tag, .webmvr-badge, .i3-status-state) { font-weight: 500 !important; }
#atlas-app.app-shell :is(.stat-num, .dash-panel-value, .i3-status-metric dd) { font-weight: 500 !important; }
#atlas-app.app-shell .i3-status-steps strong { font-weight: 500; }
#atlas-app.app-shell :is(.btn, .btn-primary, .btn-success, .btn-info, .btn-danger, .btn-ghost) { box-shadow: none !important; }
#atlas-app.app-shell :is(.btn, .btn-primary, .btn-success, .btn-info, .btn-danger, .btn-ghost):hover { transform: none; }

/* Defined header/body/footer boundaries for forms, status and settings panels. */
#atlas-app.app-shell :is(.card-head, .webmvr-section-head, .api-mode-panel-head) {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ui-border);
}
#atlas-app.app-shell :is(.card-head, .webmvr-section-head, .api-mode-panel-head) :is(h2, h3) { margin-bottom: 0; }
#atlas-app.app-shell :is(.api-mode-panel-foot, .i3-status-panel-head, .i3-status-hero-foot) { border-color: var(--ui-border); }
#atlas-app.app-shell :is(.i3screen-notice, .webmvr-alert, .lab-status-explainer) { font-weight: 400; line-height: 1.7; }
#atlas-app.app-shell :is(.i3screen-notice, .webmvr-alert, .lab-status-explainer) :is(p, pre) { margin-top: 10px; }
#atlas-app.app-shell :is(.i3screen-notice, .webmvr-alert, .lab-status-explainer) :is(h2, h3, h4) { margin-bottom: 10px; }
#atlas-app.app-shell .i3-status-hero { background: var(--ui-surface); box-shadow: none; }
#atlas-app.app-shell .i3-status-hero::before { height: 1px; background: rgba(var(--i3-rgb), .2); }
#atlas-app.app-shell .i3-status-symbol { width: 48px; height: 48px; border-radius: 50%; border: 0; box-shadow: none; }
#atlas-app.app-shell .i3-status-symbol svg { width: 25px; height: 25px; }
#atlas-app.app-shell .i3-status-error-message { border-left-width: 1px; background: var(--ui-surface); font-weight: 400; }
#atlas-app.app-shell .i3-status-steps li::before { border-radius: 0; font-weight: 400; }

/* Consistent panel finish across scrapers, reports, portals and administration.
   Layout dimensions remain owned by each workspace; wide tables scroll locally. */
#atlas-app.app-shell :is(.card, .glass, .glass-strong, .panel, .stat-card, .settings-card, .api-dir-card, .portal-card, .user-card) {
  min-width: 0;
  border-style: solid;
  border-width: 1px;
}
#atlas-app.app-shell :is(.docs-home-hero, .docs-section-card, .docs-article-card, .fmcsa-workspace-hero, .mdf-job-overview) {
  background: var(--ui-surface) !important;
}
#atlas-app.app-shell :is(.card-head, .ssc-head, .fmcsa-card-head, .rts-section-head, .settings-section-head) {
  gap: 12px;
  align-items: center;
}
#atlas-app.app-shell .page-header { gap: 16px; }
#atlas-app.app-shell .page-header > div { min-width: 0; }
#atlas-app.app-shell .page-header :is(h1, .sub) { overflow-wrap: anywhere; }
#atlas-app.app-shell :is(.field-label, .lbl) {
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .025em;
}
#atlas-app.app-shell :is(.input, .input-sm, .dt-select):not([type="checkbox"]):not([type="radio"]) {
  min-height: 36px;
  color: var(--ui-ink);
  background-color: var(--ui-surface);
}
#atlas-app.app-shell :is(.btn, .btn-primary, .btn-success, .btn-info, .btn-danger, .btn-ghost) {
  min-height: 32px;
  line-height: 1.5;
}
#atlas-app.app-shell .btn-primary:not(:disabled):not(.is-disabled) {
  background: linear-gradient(110deg, #3159c6, #087f87) !important;
}
#atlas-app.app-shell .btn-success:not(:disabled):not(.is-disabled) {
  background: #087f6e !important;
  border-color: #087f6e !important;
}
#atlas-app.app-shell :is(.tbl, .table, .data-table, .dt-table, .rts-db-table) thead th {
  background: var(--ui-surface-soft);
  padding-block: 12px;
  font-weight: 500;
  line-height: 1.5;
}
#atlas-app.app-shell :is(.tbl, .table, .data-table, .dt-table, .rts-db-table) tbody td {
  padding-block: 11px;
  line-height: 1.65;
}
#atlas-app.app-shell :is(.table-wrap, .dt-scroll, .docs-table-wrap, .rts-db-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border) transparent;
}
#atlas-app.app-shell :is(.user-menu, .bell-panel, .drop-menu) { border-color: var(--ui-border) !important; }
@media (max-width: 768px) {
  #atlas-app.app-shell :is(.page-header, .card-head, .ssc-head, .fmcsa-card-head) { flex-wrap: wrap; }
  #atlas-app.app-shell :is(.btn, .btn-primary, .btn-success, .btn-info, .btn-danger, .btn-ghost) { min-height: 36px; }
  #atlas-app.app-shell :is(.table-wrap, .dt-scroll, .docs-table-wrap, .rts-db-table-wrap) { overscroll-behavior-x: contain; }
}