:root {
  --ui-primary: var(--teal);
  --ui-primary-hover: var(--teal-dark);
  --ui-success: #087443;
  --ui-success-surface: #e5f7ee;
  --ui-warning: #8b5700;
  --ui-warning-surface: #fff1d9;
  --ui-danger: var(--danger);
  --ui-danger-surface: #ffebe8;
  --ui-info: #2456a4;
  --ui-info-surface: #e8f0ff;
  --ui-neutral: #526578;
  --ui-neutral-surface: #edf2f6;
  --ui-focus: #21aaa5;
  --ui-radius-sm: 8px;
  --ui-sidebar-width: 238px;
  --ui-sidebar-collapsed: 76px;
  --ui-topbar-height: 78px;
  --ui-workspace-header-height: 112px;
}

html { scroll-behavior: smooth; }
body { min-width: 320px; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
button, .button, .header-link, .header-button { min-height: 38px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 48%, transparent);
  outline-offset: 2px;
}

.shell { grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr); align-items: start; transition: grid-template-columns .2s ease; }
.sidebar {
  position: sticky;
  top: var(--ui-topbar-height);
  height: calc(100vh - var(--ui-topbar-height));
  min-height: 480px;
  overflow: hidden auto;
  z-index: 12;
}
.sidebar-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 8px 10px 14px; color: #8195a8; }
.sidebar-controls-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-toggle { display: grid; place-items: center; width: 32px; min-height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.sidebar-toggle span { font-size: 24px; line-height: 1; transition: transform .2s ease; }
.sidebar nav button { display: flex; align-items: center; gap: 11px; min-height: 42px; }
.nav-icon { display: inline-grid; flex: 0 0 18px; place-items: center; width: 18px; height: 18px; }
.nav-icon svg, .workspace-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sidebar-collapsed .shell { grid-template-columns: var(--ui-sidebar-collapsed) minmax(0, 1fr); }
body.sidebar-collapsed .sidebar { padding-inline: 10px; }
body.sidebar-collapsed .sidebar-controls { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .sidebar-controls-label,
body.sidebar-collapsed .navigation-label,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .project-navigation-heading,
body.sidebar-collapsed .sidebar-note { display: none; }
body.sidebar-collapsed .sidebar nav button { justify-content: center; padding-inline: 10px; }
body.sidebar-collapsed .sidebar-toggle span { transform: rotate(180deg); }

main { position: relative; }
.workspace-title {
  position: sticky;
  top: var(--ui-topbar-height);
  z-index: 10;
  gap: 20px;
  min-height: 96px;
  margin: -8px -10px 22px;
  padding: 8px 10px 14px;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
}
.workspace-title.is-stuck { border-bottom-color: var(--line); box-shadow: 0 8px 20px rgba(12,42,72,.06); }
.workspace-heading-group { display: flex; align-items: center; gap: 14px; min-width: 0; }
.workspace-heading-copy { min-width: 0; }
.workspace-heading-copy > p:last-child { max-width: 860px; color: var(--muted); margin: 0; line-height: 1.45; }
.workspace-icon { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--teal-light); color: var(--teal-dark); }
.workspace-actions { justify-content: flex-end; }
.workspace-actions:empty { display: none; }
.workspace-filter-bar {
  position: sticky;
  top: calc(var(--ui-topbar-height) + var(--ui-workspace-header-height));
  z-index: 8;
  margin: -6px -8px 14px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(8px);
}

.button, .header-button, .header-link, .project-links button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  line-height: 1.15;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.button:hover:not(:disabled), .header-button:hover, .header-link:hover, .project-links button:hover { transform: translateY(-1px); }
.button.primary:hover:not(:disabled) { background: var(--ui-primary-hover); }
.button.success { background: var(--ui-success); color: #fff; }
.button.info { background: var(--ui-info-surface); color: var(--ui-info); }
.button.loading { position: relative; cursor: progress; opacity: .78; }
.button.loading::before { content: ''; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.card { overflow: clip; }
.card > h3:first-child, .card > h4:first-child { line-height: 1.25; }
.card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 18px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fafcfd; }
.badge { border: 1px solid transparent; letter-spacing: .02em; text-transform: uppercase; }
.badge.pending, .badge.scheduled, .badge.warning, .badge.hold, .badge.blocked, .badge.suspended { background: var(--ui-warning-surface); color: var(--ui-warning); }
.badge.rejected, .badge.error, .badge.failed, .badge.expired { background: var(--ui-danger-surface); color: var(--ui-danger); }
.badge.completed, .badge.pass, .badge.healthy, .badge.success { background: var(--ui-success-surface); color: var(--ui-success); }
.badge.info, .badge.reserved { background: var(--ui-info-surface); color: var(--ui-info); }

.form-grid label { align-content: start; line-height: 1.35; }
.form-grid label:has([required])::after { content: 'Required'; justify-self: start; color: var(--ui-danger); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
input, select, textarea { min-height: 40px; transition: border-color .15s ease, box-shadow .15s ease; }
textarea { resize: vertical; }
input:invalid:not(:placeholder-shown), select:invalid { border-color: #dc8c84; }
.field-help { color: var(--muted); font-size: 11px; font-weight: 400; }

dialog { max-height: calc(100vh - 28px); }
dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 28px); }
dialog header { flex: 0 0 auto; background: var(--surface); }
dialog .dialog-body { flex: 1 1 auto; }
dialog footer { position: sticky; bottom: 0; flex: 0 0 auto; background: var(--surface); z-index: 2; }
.notice { position: sticky; top: calc(var(--ui-topbar-height) + var(--ui-workspace-header-height)); z-index: 11; }
.empty { min-height: 88px; display: grid; place-items: center; line-height: 1.5; }
.loading[role="status"]::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 9px; vertical-align: -3px; border: 2px solid #b6c5d2; border-right-color: var(--teal); border-radius: 50%; animation: ui-spin .7s linear infinite; }
.application-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding: 18px 2px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

@media (max-width: 1180px) {
  .workspace-title { align-items: flex-start; flex-direction: column; }
  .workspace-actions { justify-content: flex-start; width: 100%; }
}
@media (max-width: 980px) {
  :root { --ui-topbar-height: 0px; }
  .topbar { position: relative; }
  .shell, body.sidebar-collapsed .shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; height: auto; min-height: 0; overflow: visible; padding: 10px; }
  .sidebar-controls { justify-content: flex-end; min-height: 0; padding: 0 2px 7px; }
  .sidebar-controls-label { display: none; }
  body.sidebar-collapsed .sidebar nav, body.sidebar-collapsed .project-back { display: none; }
  body.sidebar-collapsed .sidebar-controls { justify-content: flex-end; }
  body.sidebar-collapsed .sidebar-toggle span { transform: rotate(-90deg); }
  .sidebar-toggle span { transform: rotate(90deg); }
  .sidebar nav button, body.sidebar-collapsed .sidebar nav button { justify-content: flex-start; }
  .nav-label, body.sidebar-collapsed .nav-label { display: inline; }
  .workspace-title { top: 0; }
  .workspace-filter-bar { top: var(--ui-workspace-header-height); }
}
@media (max-width: 680px) {
  main { padding-inline: 12px; }
  .workspace-title { margin-inline: -4px; padding-inline: 4px; }
  .workspace-title h2 { font-size: 24px; }
  .workspace-icon { width: 38px; height: 38px; flex-basis: 38px; padding: 9px; }
  .workspace-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-actions .button { width: 100%; white-space: normal; }
  .toolbar input, .toolbar select { width: 100%; min-width: 0; max-width: none; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: span 1; }
  .application-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}