/* ==========================================================================
   Spectra App Shell — sidebar / header / breadcrumb / skip link (P0)
   Spec: spectra-new-design.md §1. Loaded AFTER styles.css.
   Auth screens run in `body.shell-auth` mode: shell chrome hidden,
   legacy centered layout preserved.
   ========================================================================== */

/* ---- Skip to content ------------------------------------------------------ */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus-visible {
  top: var(--space-2);
}

/* ---- Global focus ring ----------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
#main-content:focus,
#main-content:focus-visible,
main:focus,
main:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ---- Shell safeguards: ensure zero top gap and unbroken full-height chain -- */
html, body {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
}

/* ---- Shell layout ----------------------------------------------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  background: var(--color-bg);
  align-items: stretch;
}
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
}
#main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--color-bg);
}
#main-content > .container,
.app-main > .container,
.container {
  width: 100%;
  max-width: 1440px;
  min-width: 0;
  margin: 0 auto;
  padding: 20px 24px 64px;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
#app-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}
#admin-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}
body.shell-auth .app-sidebar,
body.shell-auth .app-topbar,
body.shell-auth .breadcrumb {
  display: none !important;
}
body.shell-auth {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  background: #f1f5f9;
}

/* ---- Sidebar ----------------------------------------------------------------- */
.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: hidden;
  overflow-x: hidden;
  transition: width var(--duration-normal) var(--ease-standard);
  z-index: 100;
}
.app-sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
  overflow-x: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
}
.sidebar-brand .brand-name {
  font-size: 17px;
  line-height: 0.92;
}
.sidebar-brand .brand-line-top {
  margin-bottom: 0;
}
.sidebar-collapsed .sidebar-brand-text { display: none; }

.sidebar-nav {
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.nav-group-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: var(--space-3) var(--space-3) var(--space-1);
}
.sidebar-collapsed .nav-group-label {
  opacity: 0;
  height: var(--space-5);
  overflow: hidden;
  padding-block: var(--space-1);
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  text-align: left;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.nav-item:hover { background: var(--color-row-hover); color: var(--color-text); }
.nav-item[aria-current="page"] {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
}
/* Active indicator — brand teal accent */
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent-teal);
}
.nav-item svg { flex-shrink: 0; }
.sidebar-collapsed .nav-item-label { display: none; }
.sidebar-collapsed .nav-item { justify-content: center; }

.nav-chip-soon {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
  line-height: 18px;
}
.sidebar-collapsed .nav-chip-soon { display: none; }

.sidebar-footer {
  margin-top: auto;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.sidebar-footer:empty {
  display: none !important;
}
.sidebar-footer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.05) 0%, rgba(8, 145, 178, 0.02) 100%);
}
.sidebar-footer-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-footer-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.sidebar-footer-build {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.sidebar-footer-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.sidebar-footer-meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.sidebar-collapsed .sidebar-footer {
  padding-inline: 8px;
}
.sidebar-collapsed .sidebar-footer-card {
  position: relative;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-inline: auto;
  padding: 0;
  border-radius: 999px;
}
.sidebar-collapsed .sidebar-footer-title,
.sidebar-collapsed .sidebar-footer-meta,
.sidebar-collapsed .sidebar-footer-build {
  display: none;
}
.sidebar-collapsed .sidebar-footer-topline {
  justify-content: center;
}
.sidebar-collapsed .sidebar-footer-badge {
  width: 18px;
  height: 18px;
  padding: 0;
  min-width: 18px;
  justify-content: center;
  border-radius: 999px;
  font-size: 0;
  line-height: 1;
 }
.sidebar-collapsed .sidebar-footer-badge::before {
  content: "?";
  font-size: 12px;
  font-weight: 800;
}
.sidebar-footer-card:hover::after,
.sidebar-footer-card:focus-visible::after {
  display: none !important;
}

/* Sidebar-only fallback tooltip when collapsed */
.app-sidebar [data-tip]:hover::after,
.app-sidebar [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  white-space: nowrap;
  z-index: 150;
  pointer-events: none;
}
.app-sidebar:not(.collapsed) [data-tip]:hover::after,
.app-sidebar:not(.collapsed) [data-tip]:focus-visible::after {
  display: none;
}

/* ---- Top bar ------------------------------------------------------------------ */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.topbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.topbar-toggle:hover { background: var(--color-row-hover); color: var(--color-text); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--color-border-strong);
  margin-left: var(--space-2);
}
.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}
.topbar-spacer { flex: 1; }
/* Legacy auth-bar (user menu) lives at the end of the topbar */
.app-topbar .auth-bar {
  display: flex;
  align-items: center;
  border-bottom: none;
  padding: 0;
}

/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .app-sidebar { width: var(--sidebar-width-collapsed); }
}
@media (max-width: 768px) {
  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 180;
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-standard);
    box-shadow: var(--shadow-4);
  }
  body.sidebar-open-mobile .app-sidebar {
    transform: translateX(0);
    width: var(--sidebar-width);
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 170;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }
  body.sidebar-open-mobile .sidebar-backdrop { opacity: 1; pointer-events: auto; }
}

/* ==========================================================================
   Auth screens (P0 restyle) — tokenized, centered, calm
   ========================================================================== */
body.shell-auth,
.auth-view {
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --card: #ffffff;
  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  color: #0f172a;
}
.auth-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  padding: 24px 16px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at top left, rgba(80, 230, 255, 0.15), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #eef5fb 58%, #e6eef5 100%);
}
/* Inner wrapper keeps content at a readable fixed width */
.auth-view > * {
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #0f172a !important;
}
.auth-brand .brand-name,
.auth-brand .brand-line-top {
  color: #0f172a !important;
}
.auth-brand .brand-line-bottom {
  color: #475569 !important;
}
.auth-view .card,
.login-card,
.signup-card {
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  background: #ffffff !important;
  color: #0f172a !important;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
  border: 1px solid #e2e8f0 !important;
  /* Symmetric horizontal padding — single definition shared by heading,
     labels, inputs, button and links. Reduced at narrow widths. */
  padding: 32px;
  padding-inline: 32px;
}
/* Auth primary button — compact inline width, left-aligned across all auth states */
.login-form .btn,
.login-form .btn-primary,
.login-form button[type="submit"],
.auth-view .btn-primary,
.auth-view button[type="submit"],
.auth-primary-action {
  align-self: flex-start !important;
  width: auto !important;
  padding: 10px 20px !important;
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-medium, 500);
  border-radius: var(--radius-md, 6px);
  margin-top: 4px;
}
.login-card .card-title {
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
}
.auth-title-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-title-with-icon svg {
  color: #1a56db;
  flex: 0 0 auto;
}
.auth-card-intro {
  margin: -4px 0 16px;
  font-size: 13px;
  color: var(--text-secondary);
}
/* Central Auth Alert Component */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.auth-alert.hidden {
  display: none !important;
}
.auth-alert-danger {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
[data-theme="dark"] .auth-alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.auth-alert-info {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
[data-theme="dark"] .auth-alert-info {
  background-color: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}
.auth-alert-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
}
.auth-alert-danger .auth-alert-icon {
  color: #dc2626;
}
[data-theme="dark"] .auth-alert-danger .auth-alert-icon {
  color: #f87171;
}
.auth-alert-info .auth-alert-icon {
  color: #2563eb;
}
[data-theme="dark"] .auth-alert-info .auth-alert-icon {
  color: #60a5fa;
}
.auth-alert-text {
  flex: 1 1 auto;
  word-break: break-word;
}
.auth-alert-dismiss {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  margin: -2px 0 0 0;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  flex: 0 0 auto;
}
.auth-alert-dismiss:hover {
  opacity: 1;
}
.auth-secondary-link-row {
  margin-top: 12px;
  text-align: center;
}
.auth-secondary-link-row a {
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}
.auth-secondary-link-row a:hover {
  text-decoration: underline;
}
.auth-inline-check {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 8px 0 12px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  color: var(--color-text, var(--text-primary)) !important;
  user-select: none !important;
}
.auth-inline-check input,
.login-form .auth-inline-check input,
.login-card .auth-inline-check input {
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--color-border-strong, #cbd5e1) !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  accent-color: var(--accent-primary, #0078d4) !important;
}
.auth-inline-check span,
.auth-inline-check label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  color: var(--color-text, var(--text-primary)) !important;
  white-space: nowrap !important;
  text-align: left !important;
  line-height: 1.4 !important;
}
.auth-code-input,
#mfa-code {
  letter-spacing: 4px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-align: center !important;
  height: 40px !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.mfa-challenge-links {
  margin-top: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  font-size: 13px !important;
}
.mfa-challenge-links a {
  color: var(--color-primary, #0078d4) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  text-align: center !important;
  transition: color 0.15s ease !important;
}
.mfa-challenge-links a:hover {
  text-decoration: underline !important;
}
.mfa-challenge-links #mfa-back-login {
  color: var(--color-text-muted, #64748b) !important;
  font-size: 12px !important;
}
.pw-warning-mandatory {
  border-left: 4px solid #f2994a;
  background: rgba(242, 153, 74, 0.12);
  color: #b45309;
}
/* Shared auth input rule — all auth states (login, signup, forced password
   change, MFA challenge, backup-code, enrollment). Input right edge aligns
   with the card content box. box-sizing keeps padding/border inside. */
.login-form input:not([type="checkbox"]):not([type="radio"]),
.login-form select,
.auth-view input[type="text"],
.auth-view input[type="password"],
.auth-view input[type="email"],
.auth-view input[type="tel"],
.auth-view .auth-code-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.login-form input:hover,
.auth-view input:hover { border-color: var(--neutral-80); }
.login-form input:focus-visible,
.auth-view input:focus-visible,
.login-form select:focus-visible,
.login-form .btn:focus-visible,
.login-form button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
  border-color: var(--color-primary);
}

/* Auth card horizontal padding — reduced at narrow widths, still symmetric */
@media (max-width: 480px) {
  .auth-view .card,
  .login-card,
  .signup-card {
    padding: 28px 24px;
    padding-inline: 24px;
  }
}


/* ==========================================================================
   Exemplar page: Connections (P0)
   Proves the token migration patterns; deeper table-v2 (bulk bar) lands P1.
   ========================================================================== */
.connections-empty {
  text-align: center;
  padding: var(--space-7) var(--space-5);
}
.connections-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}
.connections-empty-title {
  font-size: var(--font-size-md);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}
.connections-empty-desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  max-width: 46ch;
  margin: 0 auto;
}
.table-wrap tbody tr {
  transition: background var(--duration-fast) var(--ease-standard);
}
.table-wrap tbody tr:hover { background: var(--color-row-hover); }

/* ==========================================================================
   P1 — Data table v2 · bulk command bar
   ========================================================================== */
.jobs-table .col-select {
  width: 40px;
  text-align: center;
}
.jobs-table input[type="checkbox"][data-bulk-check],
.jobs-table input[type="checkbox"][data-bulk-select-all] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.bulk-bar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-2));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.bulk-count { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* ==========================================================================
   P1 — Toasts (top-right, variants, action button, 5s auto-dismiss)
   ========================================================================== */
#toast.toast-v2 {
  top: calc(var(--header-height) + var(--space-3));
  right: var(--space-4);
  left: auto;
  bottom: auto;
  transform: translateY(-8px);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 260px;
  max-width: 380px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  font-size: var(--font-size-sm);
}
#toast.toast-v2.toast-success { border-left-color: var(--color-success); }
#toast.toast-v2.toast-error   { border-left-color: var(--color-error); }
#toast.toast-v2 .toast-action {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   P1 — Skeleton shimmer (page/section loads; never flash empty)
   ========================================================================== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--neutral-20);
  border-radius: var(--radius-md);
  min-height: 14px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: skeleton-shimmer 1.4s infinite var(--ease-standard);
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
.skeleton-text   { width: 70%; }
.skeleton-title  { width: 45%; height: 18px; }
.skeleton-block  { width: 100%; height: 88px; }

/* ==========================================================================
   P1 — Context panel (#detail): the standard detail surface.
   Spans the full content width so the Selected-job card aligns with the
   JOBS table edges (fixes right-gutter bug); topology re-layouts via its
   own ResizeObserver (attack-graph.js).
   ========================================================================== */
#detail:not(:empty) {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
}
#detail:not(:empty) > * { max-width: 100%; }
@media (max-width: 640px) {
  #detail:not(:empty) { padding: var(--space-3); }
}

/* ==========================================================================
   P1 — Metric card trends (utility)
   ========================================================================== */
.trend { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.trend-up   { color: var(--color-success); }
.trend-down { color: var(--color-error); }

/* ==========================================================================
   P2 — Search palette · notifications · dark-mode hardening
   ========================================================================== */
.search-palette {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.search-panel {
  width: min(640px, calc(100vw - 32px));
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
}
.search-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--color-text);
  background: transparent;
}
.search-input-wrap kbd, .search-footer kbd {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-text-secondary);
}
.search-results { max-height: 46vh; overflow-y: auto; }
.search-group-label, .search-empty {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.search-empty .hint { opacity: 0.8; }
.search-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.search-row:hover, .search-row[aria-selected="true"] {
  background: var(--color-row-hover);
}
.search-row[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.search-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-sub {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-group-tag {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
}
.search-footer {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

/* Notifications */
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-error);
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  font-weight: 700;
}
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  z-index: 150;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.notif-mark-read-btn,
#notif-mark-read {
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.notif-mark-read-btn:hover:not(:disabled),
#notif-mark-read:hover:not(:disabled) {
  color: var(--color-primary-hover);
  text-decoration: underline;
  background: var(--color-primary-subtle);
}
.notif-mark-read-btn:disabled,
#notif-mark-read:disabled {
  color: var(--color-text-tertiary);
  cursor: default;
  text-decoration: none;
  opacity: 0.5;
  pointer-events: none;
}
.notif-mark-read-btn:focus-visible,
#notif-mark-read:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.notif-list {
  overflow-y: auto;
  max-height: 400px;
}
.notif-item {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.notif-item:hover {
  background: var(--color-hover);
}
.notif-item:first-child { border-top: none; }
.notif-item.unread {
  background: var(--color-primary-subtle);
}
.notif-item.unread:hover {
  background: #e5f0ff;
}
.notif-dot {
  width: 8px;
  height: 8px;
  margin-top: 2px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-primary);
}
.notif-error .notif-dot { background: var(--color-error); }
.notif-warning .notif-dot { background: var(--color-warning); }
.notif-success .notif-dot { background: var(--color-success); }
.notif-item.read .notif-dot {
  background: var(--color-border-strong);
  opacity: 0.3;
}
.notif-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.notif-title {
  color: var(--color-text);
  font-weight: 500;
}
.notif-item.read .notif-title {
  color: var(--color-text-secondary);
  font-weight: 400;
}
.notif-time {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  margin-top: 2px;
}
.notif-view-btn,
.notif-item .toast-action,
.notif-item .notif-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: all var(--duration-fast) var(--ease-standard);
  text-decoration: none;
}
.notif-view-btn:hover,
.notif-item .toast-action:hover,
.notif-item .notif-view:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.notif-view-btn:active,
.notif-item .toast-action:active,
.notif-item .notif-view:active {
  background: #E1EEFF;
}
.notif-view-btn:focus-visible,
.notif-item .toast-action:focus-visible,
.notif-item .notif-view:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.notif-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-tertiary);
  text-align: center;
}
.notif-empty-icon {
  width: 32px;
  height: 32px;
  stroke: var(--color-text-tertiary);
}
.notif-empty-text {
  font-size: var(--font-size-sm);
  margin: 0;
  color: var(--color-text-tertiary);
}

/* User-menu styling and last-login line (§8 security perception) */
.user-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}
.user-menu-item svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}
.user-menu-lastlogin {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: var(--font-size-xs) !important;
  color: var(--color-text-tertiary) !important;
  white-space: normal !important;
  padding: 6px 16px !important;
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
}
.user-menu-lastlogin::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Dark-mode spot-hardening for legacy hardcoded surfaces */
[data-theme="dark"] body,
[data-theme="dark"] .toast { color-scheme: dark; }
[data-theme="dark"] #toast.toast-v2 {
  background: #182238;
  border-color: #26334d;
}
[data-theme="dark"] .app-header,
[data-theme="dark"] .app-sidebar { border-color: var(--color-border); }
[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
[data-theme="dark"] .search-palette { background: rgba(0, 0, 0, 0.6); }

/* ==========================================================================
   Brand — logo is STATIC for now (animation disabled by product decision).
   The .wave classes remain on the SVG paths for easy re-enable later.
   ========================================================================== */
.brand-logo .wave { animation: none; }

/* Beta pill — compact badge */
.brand-beta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  line-height: 14px;
}

/* ==========================================================================
   Unified lateral navigation (spectra-design.md)
   ========================================================================== */
/* In-page admin tab bar is replaced by the sidebar entries */
body[data-shell-nav] .admin-tabs { display: none !important; }

/* Collapsible group accordions */
.nav-group-items { overflow: hidden; }
.nav-group.group-collapsed .nav-group-items { display: none; }
.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-group-toggle .nav-chev { transition: transform var(--duration-fast) var(--ease-standard); }
.nav-group.group-collapsed .nav-chev { transform: rotate(-90deg); }
.sidebar-collapsed .nav-group-toggle .nav-chev { display: none; }

/* Solid active variant (spec option): primary bg + white text */
.app-sidebar .nav-item[aria-current="page"] {
  background: var(--color-primary);
  color: #fff;
}
.app-sidebar .nav-item[aria-current="page"]::before { background: #fff; }

/* ==========================================================================
   Platform dashboard (superadmin Overview)
   ========================================================================== */
.platform-dashboard { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); position: relative; z-index: 0; }
.pd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); }
.pd-card { min-width: 0; position: relative; z-index: 0; }
.pd-card canvas { max-height: 240px; display: block; }
.pd-card .card-subtitle { margin: 0 0 var(--space-3); }
.pd-wide { grid-column: span 2; }
.pd-wide2 { grid-column: span 2; }
@media (max-width: 1100px) { .pd-wide, .pd-wide2 { grid-column: auto; } }
.pd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pd-list li { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border, #e2e8f0); font-size: var(--font-size-sm, 14px); }
.pd-list li:last-child { border-bottom: none; }
.pd-table th, .pd-table td { font-size: 13px; }

/* Job History destination: table-only (upload surface hidden) */
body.nav-jobs-only #upload-card,
body.nav-jobs-only #connections-header-actions,
body.nav-jobs-only #panel-src-connections { display: none !important; }