/* SW Project Manager v0.7.9.8.65 — Claude Design foundation lock
   Pass A: shared shell, tokens, cards, tables, filters, forms, drawers,
   empty states, focus behavior and responsive base. Presentation only. */

:root {
  --swpm-shell-sidebar-w: 232px;
  --swpm-shell-topbar-h: 60px;
  --swpm-shell-rail-w: 64px;
}

/* ── Admin shell: match Claude's shared SWShell / SWUnifiedSidebar ───── */
.swpm-body .swpm-main,
body.swpm .swpm-main {
  margin-left: var(--swpm-shell-sidebar-w);
  min-width: 0;
  background: var(--swpm-bg);
}

.swpm-body .swpm-sidebar,
body.swpm .swpm-sidebar {
  width: var(--swpm-shell-sidebar-w);
  background: var(--swpm-navy-900);
  color: var(--swpm-shell-sidebar-ink);
  border-right: 1px solid var(--swpm-navy-800);
  box-shadow: none;
  transition: width .18s cubic-bezier(.2,.7,.3,1);
}
.swpm-body .swpm-sidebar .swpm-sidebar-brand,
body.swpm .swpm-sidebar .swpm-sidebar-brand {
  min-height: 57px;
  padding: 14px 16px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.swpm-body .swpm-sidebar .swpm-brand-mark,
body.swpm .swpm-sidebar .swpm-brand-mark {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: var(--swpm-r-md);
  font-size: 13px;
  box-shadow: none;
}
.swpm-body .swpm-sidebar .swpm-brand-name,
body.swpm .swpm-sidebar .swpm-brand-name {
  font-size: 14px;
  line-height: 18px;
  font-weight: var(--swpm-fw-semibold);
}
.swpm-body .swpm-sidebar .swpm-brand-sub,
body.swpm .swpm-sidebar .swpm-brand-sub {
  color: var(--swpm-shell-sidebar-muted);
  font-size: 11px;
  line-height: 14px;
}
.swpm-body .swpm-nav,
body.swpm .swpm-nav {
  padding: 0 0 16px;
}
.swpm-body .swpm-nav-group,
body.swpm .swpm-nav-group {
  margin: 0;
  padding: 0;
}
.swpm-body .swpm-nav-heading,
body.swpm .swpm-nav-heading {
  padding: 12px 8px 4px 12px;
  color: var(--swpm-shell-sidebar-group);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .08em;
  font-weight: var(--swpm-fw-semibold);
}
.swpm-body .swpm-sidebar a.swpm-nav-link,
.swpm-body .swpm-sidebar a.swpm-nav-link:visited,
body.swpm .swpm-sidebar a.swpm-nav-link,
body.swpm .swpm-sidebar a.swpm-nav-link:visited {
  height: 30px;
  min-height: 30px;
  margin: 0 8px;
  padding: 0 10px;
  gap: 10px;
  border: 0;
  border-radius: var(--swpm-r-md);
  color: var(--swpm-shell-sidebar-ink);
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--swpm-fw-regular);
}
.swpm-body .swpm-sidebar a.swpm-nav-link::before,
body.swpm .swpm-sidebar a.swpm-nav-link::before { display: none; }
.swpm-body .swpm-nav-rail-icon,
body.swpm .swpm-nav-rail-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--swpm-shell-sidebar-muted);
  font-size: 11px;
  font-weight: var(--swpm-fw-semibold);
}
.swpm-body .swpm-sidebar a.swpm-nav-link:hover,
.swpm-body .swpm-sidebar a.swpm-nav-link:focus-visible,
body.swpm .swpm-sidebar a.swpm-nav-link:hover,
body.swpm .swpm-sidebar a.swpm-nav-link:focus-visible {
  background: rgba(255,255,255,.05);
  color: #fff;
  border: 0;
}
.swpm-body .swpm-sidebar a.swpm-nav-link.is-active,
.swpm-body .swpm-sidebar a.swpm-nav-link.is-active:visited,
body.swpm .swpm-sidebar a.swpm-nav-link.is-active,
body.swpm .swpm-sidebar a.swpm-nav-link.is-active:visited {
  background: var(--swpm-navy-700);
  color: #fff;
  border: 0;
  box-shadow: none;
  font-weight: var(--swpm-fw-medium);
}
.swpm-body .swpm-sidebar a.swpm-nav-link.is-active .swpm-nav-rail-icon,
body.swpm .swpm-sidebar a.swpm-nav-link.is-active .swpm-nav-rail-icon { color: #fff; background: transparent; border: 0; }

/* Claude footer pattern: user identity is part of the rail, not repeated in topbar. */
.swpm-sidebar-user {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 10px 12px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
}
.swpm-sidebar-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--swpm-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--swpm-navy-700);
  color: #fff;
  font-size: 11px;
  font-weight: var(--swpm-fw-semibold);
  letter-spacing: .02em;
}
.swpm-sidebar-user-copy { min-width: 0; flex: 1; display: grid; gap: 1px; }
.swpm-sidebar-user-copy strong { color: #fff; font-size: 12px; line-height: 16px; font-weight: var(--swpm-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swpm-sidebar-user-copy small { color: var(--swpm-shell-sidebar-muted); font-size: 10px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swpm-sidebar-user-version { color: var(--swpm-shell-sidebar-muted); font-size: 10px; line-height: 13px; }
.swpm-sidebar-logout {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--swpm-r-md);
  color: var(--swpm-shell-sidebar-muted) !important;
  text-decoration: none !important;
}
.swpm-sidebar-logout:hover,
.swpm-sidebar-logout:focus-visible { background: rgba(255,255,255,.08); color: #fff !important; }

/* Topbar: one title owner, compact and neutral. */
.swpm-body .swpm-topbar,
body.swpm .swpm-topbar {
  min-height: var(--swpm-shell-topbar-h);
  height: var(--swpm-shell-topbar-h);
  padding: 0 var(--swpm-s-5);
  gap: var(--swpm-s-3);
  background: var(--swpm-surface);
  border-bottom: 1px solid var(--swpm-border);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 30;
  flex-wrap: nowrap;
}
.swpm-body .swpm-topbar::after,
body.swpm .swpm-topbar::after { display: none; }
.swpm-body .swpm-topbar-context,
body.swpm .swpm-topbar-context { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 180px; }
.swpm-body .swpm-breadcrumb,
body.swpm .swpm-breadcrumb {
  color: var(--swpm-ink-500);
  font-size: var(--swpm-fs-meta);
  line-height: var(--swpm-lh-meta);
  font-weight: var(--swpm-fw-regular);
}
.swpm-body .swpm-topbar h1,
body.swpm .swpm-topbar h1,
.swpm-body .swpm-page-title,
body.swpm .swpm-page-title {
  margin: 0;
  color: var(--swpm-ink-900);
  font-size: var(--swpm-fs-h1);
  line-height: var(--swpm-lh-h1);
  font-weight: var(--swpm-fw-semibold);
  letter-spacing: -.01em;
}
.swpm-body .swpm-topbar-actions,
body.swpm .swpm-topbar-actions { gap: var(--swpm-s-2); flex: 0 0 auto; flex-wrap: nowrap; }
.swpm-body .swpm-topbar-actions .swpm-btn,
body.swpm .swpm-topbar-actions .swpm-btn { height: 32px; border-radius: var(--swpm-r-md); }

/* Full-width content uses the design 20px rhythm and never adds a second page shell. */
.swpm-body .swpm-content,
body.swpm .swpm-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: var(--swpm-s-5);
}

/* ── Shared primitives: reset local drift back to Claude components ─── */
.swpm-card { min-width: 0; border-radius: var(--swpm-r-lg); box-shadow: var(--swpm-shadow-sm); }
.swpm-card-header { padding: var(--swpm-s-3) var(--swpm-s-4); gap: var(--swpm-s-3); }
.swpm-card-body { padding: var(--swpm-s-4); }

.swpm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--swpm-fs-table); line-height: var(--swpm-lh-table); }
.swpm-table thead th {
  background: var(--swpm-surface-2);
  color: var(--swpm-ink-500);
  font-weight: var(--swpm-fw-semibold);
  letter-spacing: .04em;
  font-size: var(--swpm-fs-meta);
  padding: 8px 12px;
  border-top: 0;
  border-bottom: 1px solid var(--swpm-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.swpm-table tbody td { padding: 0 12px; height: var(--swpm-row-h-compact); border-bottom: 1px solid var(--swpm-border-soft); vertical-align: middle; }
.swpm-table tbody tr:hover { background: var(--swpm-navy-50); }
.swpm-tablewrap,
.swpm-table-scroll,
.swpm-responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }

.swpm-filterbar { padding: 10px 16px; gap: 8px; background: var(--swpm-surface); border-bottom: 1px solid var(--swpm-border-soft); }
.swpm-filterbar--inline { padding: 10px 16px; }
.swpm-filter-card { overflow: visible; }

.swpm-input,
input.swpm-input,
select.swpm-select,
textarea.swpm-textarea,
.swpm-input2 {
  border-color: var(--swpm-border-strong);
  border-radius: var(--swpm-r-md);
  background: var(--swpm-surface);
}
input.swpm-input,
select.swpm-select,
.swpm-input2 { min-height: 34px; }
textarea.swpm-textarea { min-height: 84px; }
.swpm-input:focus-within,
input.swpm-input:focus,
select.swpm-select:focus,
textarea.swpm-textarea:focus,
.swpm-input2:focus {
  outline: none;
  border-color: var(--swpm-navy-500);
  box-shadow: 0 0 0 3px var(--swpm-navy-50);
}

.swpm-field-label { white-space: nowrap; }
.swpm-field-grid { gap: 12px 14px; }
.swpm-formsection { border-radius: var(--swpm-r-lg); }
.swpm-formsection-h { padding: 12px 16px; }
.swpm-formsection-b { padding: 16px; }

.swpm-drawer { border-left-color: var(--swpm-border); }
.swpm-drawer-h { padding: 16px 20px; }
.swpm-drawer-b { padding: 18px 20px; }
.swpm-drawer-f { padding: 12px 20px; background: var(--swpm-surface-2); }

.swpm-empty { padding: 56px 20px; }
.swpm-empty--actionable { padding: 56px 20px; }
.swpm-empty-icon,
.swpm-empty-ic { width: 48px; height: 48px; border-radius: 50%; }

/* Accessible global focus. */
.swpm a:focus-visible,
.swpm button:focus-visible,
.swpm input:focus-visible,
.swpm select:focus-visible,
.swpm textarea:focus-visible,
.swpm [tabindex]:focus-visible {
  outline: 2px solid var(--swpm-navy-500);
  outline-offset: 2px;
}

/* Compact preview banner from Claude COPY_CLEANUP: one line, no implementation prose. */
.po-preview {
  min-height: 34px;
  padding: 6px 14px;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.po-preview > span { color: inherit; }

/* Rail state mirrors the prototype: 64px, labels hidden, tooltips retained. */
.swpm-shell--rail .swpm-main,
html.swpm-rail-pref .swpm-main { margin-left: var(--swpm-shell-rail-w); }
.swpm-sidebar--rail { width: var(--swpm-shell-rail-w) !important; overflow: visible !important; }
.swpm-sidebar--rail .swpm-sidebar-brand { justify-content: center; padding: 14px 8px !important; }
.swpm-sidebar--rail .swpm-brand-copy,
.swpm-sidebar--rail .swpm-nav-heading,
.swpm-sidebar--rail .swpm-nav-label,
.swpm-sidebar--rail .swpm-sidebar-user-copy { display: none !important; }
.swpm-sidebar--rail .swpm-nav-group + .swpm-nav-group { border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; padding-top: 8px; }
.swpm-sidebar--rail a.swpm-nav-link { width: 48px !important; height: 34px !important; min-height: 34px !important; margin: 1px 8px !important; padding: 0 !important; justify-content: center !important; }
.swpm-sidebar--rail .swpm-nav-rail-icon { width: 16px; height: 16px; flex-basis: 16px; }
.swpm-sidebar--rail .swpm-sidebar-user { justify-content: center; padding: 10px 8px; }
.swpm-sidebar--rail .swpm-sidebar-avatar { display: none; }
.swpm-sidebar--rail .swpm-sidebar-logout { display: inline-flex; }


@media (min-width: 1024px) {
  .swpm-body .swpm-mobile-topbar,
  body.swpm .swpm-mobile-topbar,
  .swpm-mobile-bottom-nav { display: none; }
}

/* Tablet design breakpoint: icon rail. */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --swpm-shell-sidebar-w: var(--swpm-shell-rail-w); }
  .swpm-body .swpm-main,
  body.swpm .swpm-main { margin-left: var(--swpm-shell-rail-w); }
  .swpm-body .swpm-sidebar,
  body.swpm .swpm-sidebar { width: var(--swpm-shell-rail-w); }
}

/* Mobile: drawer shell + reachable primary actions, no desktop offset. */
@media (max-width: 767px) {
  :root { --swpm-shell-sidebar-w: 232px; }
  .swpm-body .swpm-main,
  body.swpm .swpm-main { margin-left: 0; }
  .swpm-body .swpm-sidebar,
  body.swpm .swpm-sidebar { width: min(88vw, 300px); }
  .swpm-body .swpm-topbar,
  body.swpm .swpm-topbar { display: none; }
  .swpm-body .swpm-content,
  body.swpm .swpm-content { padding: var(--swpm-s-4) var(--swpm-s-3) 82px; }
  .swpm-page-toolbar,
  .swpm-card-header { min-width: 0; }
  .swpm-page-toolbar { gap: var(--swpm-s-3); }
  .swpm-actions { flex-wrap: wrap; }
  .swpm-form-actions:not(.swpm-form-actions--inline) { position: sticky; bottom: 58px; z-index: 8; background: var(--swpm-surface); padding: 10px; border: 1px solid var(--swpm-border); border-radius: var(--swpm-r-lg); box-shadow: var(--swpm-shadow-md); }
}