/* Shared S2 Admin design tokens and application shell, not a client stylesheet. */
:root {
  --s2a-font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s2a-accent: #21895d;
  --s2a-accent-contrast: #fff;
  --s2a-bg: #f4f7fb;
  --s2a-surface: #fff;
  --s2a-surface-alt: #f8fafc;
  --s2a-border: #e3e9f1;
  --s2a-text: #18263b;
  --s2a-muted: #64748b;
  --s2a-sidebar-width: 272px;
  --s2a-radius: 12px;
}
html[data-theme="dark"] {
  --s2a-bg: #0b1220;
  --s2a-surface: #111d30;
  --s2a-surface-alt: #172338;
  --s2a-border: #293750;
  --s2a-text: #edf3fc;
  --s2a-muted: #9baac0;
}
body.s2-admin {
  font-family: var(--s2a-font);
  background: var(--s2a-bg);
  color: var(--s2a-text);
}
body.s2-admin .workspace { background: var(--s2a-bg); }
body.s2-admin .sidebar {
  width: var(--s2a-sidebar-width);
  min-width: var(--s2a-sidebar-width);
  background: var(--s2a-surface);
  border-right: 1px solid var(--s2a-border);
  box-shadow: 3px 0 16px rgba(10,20,40,.025);
}
body.s2-admin .topbar {
  background: var(--s2a-surface);
  border-bottom: 1px solid var(--s2a-border);
}
body.s2-admin .sidebar-top,
body.s2-admin .sidebar-bottom { border-color: var(--s2a-border); background: var(--s2a-surface); }
body.s2-admin .nav-kicker { color: var(--s2a-muted); font-size: 10px; letter-spacing: .12em; }
body.s2-admin .nav-link {
  color: var(--s2a-muted);
  border-radius: var(--s2a-radius);
  transition: background .15s ease, color .15s ease;
}
body.s2-admin .nav-link:hover,
body.s2-admin .nav-link:focus-visible {
  background: var(--s2a-surface-alt);
  color: var(--s2a-text);
}
body.s2-admin .nav-link.selected,
body.s2-admin .nav-link[aria-current="page"] {
  color: var(--s2a-accent);
  background: color-mix(in srgb, var(--s2a-accent) 10%, transparent);
}
body.s2-admin .nav-link.selected::before { background: var(--s2a-accent); }
body.s2-admin .nav-count { background: var(--s2a-surface-alt); color: var(--s2a-muted); }
body.s2-admin .side-brand-copy strong,
body.s2-admin .breadcrumb strong { color: var(--s2a-text); }
body.s2-admin .side-brand-copy small { color: var(--s2a-accent); }
body.s2-admin .account-toggle,
body.s2-admin .account-menu { background: var(--s2a-surface-alt); border-color: var(--s2a-border); }
body.s2-admin .account-data strong { color: var(--s2a-text); }
body.s2-admin .icon-button { border-color: var(--s2a-border); color: var(--s2a-muted); }
body.s2-admin .icon-button:hover { background: var(--s2a-surface-alt); color: var(--s2a-text); }
body.s2-admin .avatar, body.s2-admin .top-avatar {
  background: var(--s2a-accent);
  color: var(--s2a-accent-contrast);
}
body.s2-admin :is(a,button,input,select,textarea):focus-visible {
  outline: 2px solid var(--s2a-accent);
  outline-offset: 3px;
}
body.s2-admin .workspace.compact .sidebar {
  width: 80px; min-width: 80px;
}
.s2a-card {
  padding: 20px;
  border: 1px solid var(--s2a-border);
  border-radius: var(--s2a-radius);
  background: var(--s2a-surface);
}
.s2a-card-title { margin: 0 0 8px; font-size: 1rem; color: var(--s2a-text); }
.s2a-card-body { margin: 0; font-size: .875rem; color: var(--s2a-muted); }
.s2a-button { border: 1px solid var(--s2a-border); border-radius: 9px; padding: 10px 16px; font: inherit; }
.s2a-button-primary { background: var(--s2a-accent); color: var(--s2a-accent-contrast); }
.s2a-button-secondary { background: var(--s2a-surface-alt); color: var(--s2a-text); }
.s2a-empty { padding: 28px; text-align: center; background: var(--s2a-surface); border: 1px dashed var(--s2a-border); border-radius: var(--s2a-radius); }
.s2a-empty p { color: var(--s2a-muted); }
@media (max-width: 767px) {
  body.s2-admin .sidebar { width: min(310px, 86vw); min-width: min(310px, 86vw); }
  body.s2-admin .topbar { min-height: 62px; }
  body.s2-admin .environment { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.s2-admin .nav-link, body.s2-admin .sidebar { transition: none; }
}

/* The shell is fully self-contained for applications without the old dashboard stylesheet. */
body.s2-admin .workspace { display: flex; min-height: 100vh; width: 100%; }
body.s2-admin .sidebar {
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; flex-shrink: 0; z-index: 60;
  transition: width .18s ease, min-width .18s ease;
}
body.s2-admin .sidebar-top {
  min-height: 80px; display: flex; align-items: center;
  justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--s2a-border);
}
body.s2-admin .side-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
body.s2-admin .logo-shell { display: grid; place-items: center; min-width: 42px; width: 42px; height: 42px; border-radius: 12px; }
body.s2-admin .logo-shell img { max-height: 38px; max-width: 38px; object-fit: contain; }
body.s2-admin .side-brand-copy { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
body.s2-admin .side-brand-copy strong { font-size: 13px; letter-spacing: .07em; }
body.s2-admin .side-brand-copy small { font-size: 10px; letter-spacing: .07em; }
body.s2-admin .sidebar-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 18px 13px; }
body.s2-admin .nav-kicker { margin: 18px 10px 10px; font-weight: 750; text-transform: uppercase; }
body.s2-admin .nav-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px; min-height: 43px; text-decoration: none; font-size: 13px; }
body.s2-admin .nav-icon { display: grid; place-items: center; width: 24px; min-width: 24px; font-size: 18px; }
body.s2-admin .nav-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.s2-admin .sidebar-bottom { padding: 12px; border-top: 1px solid var(--s2a-border); }
body.s2-admin .account { position: relative; margin-top: 8px; }
body.s2-admin .account-toggle { display: flex; align-items: center; width: 100%; gap: 10px; padding: 10px; text-align: left; border: 1px solid var(--s2a-border); border-radius: var(--s2a-radius); color: var(--s2a-text); }
body.s2-admin .avatar, body.s2-admin .top-avatar { width: 36px; min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; font-weight: 700; }
body.s2-admin .account-data { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
body.s2-admin .account-data strong { font-size: 12px; }
body.s2-admin .account-data small { font-size: 10px; color: var(--s2a-muted); overflow: hidden; text-overflow: ellipsis; }
body.s2-admin .caret { margin-left: auto; }
body.s2-admin .account-menu { position: absolute; z-index: 70; bottom: 66px; left: 0; right: 0; padding: 12px; border: 1px solid var(--s2a-border); border-radius: var(--s2a-radius); box-shadow: 0 12px 32px #0003; }
body.s2-admin .account-menu[hidden] { display: none !important; }
body.s2-admin .account-menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px; background: transparent; color: var(--s2a-text); border: 0; border-radius: 8px; text-align: left; }
body.s2-admin .account-menu button:hover { background: var(--s2a-surface); }
body.s2-admin .menu-eyebrow { font-size: 10px; color: var(--s2a-muted); }
body.s2-admin .account-menu > strong { display: block; margin: 8px 0; overflow-wrap: anywhere; font-size: 12px; }
body.s2-admin .page-area { min-width: 0; flex: 1; display: flex; flex-direction: column; }
body.s2-admin .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 10px 24px; }
body.s2-admin .topbar-left, body.s2-admin .topbar-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
body.s2-admin .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--s2a-muted); }
body.s2-admin .breadcrumb strong { font-size: 13px; font-weight: 700; }
body.s2-admin .environment { white-space: nowrap; font-size: 11px; color: var(--s2a-muted); }
body.s2-admin .pulse { display: inline-block; background: var(--s2a-accent); border-radius: 50%; width: 7px; height: 7px; margin-right: 5px; }
body.s2-admin .icon-button { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--s2a-border); border-radius: 10px; background: transparent; color: var(--s2a-text); cursor: pointer; }
body.s2-admin .mobile-menu { display: none; }
body.s2-admin .workspace.compact .side-brand-copy,
body.s2-admin .workspace.compact .sidebar .nav-kicker,
body.s2-admin .workspace.compact .sidebar .nav-copy,
body.s2-admin .workspace.compact .sidebar .nav-count,
body.s2-admin .workspace.compact .sidebar .account-data,
body.s2-admin .workspace.compact .sidebar .caret { display: none; }
body.s2-admin .workspace.compact .sidebar-top { padding: 8px 10px; }
body.s2-admin .workspace.compact .sidebar-scroll { padding: 12px 8px; }
body.s2-admin .workspace.compact .sidebar-bottom { padding: 8px; }
body.s2-admin .workspace.compact .nav-link { justify-content: center; }
body.s2-admin .workspace.compact .collapse { display: none; }
body.s2-admin #mobile-backdrop[hidden] { display: none !important; }
@media(max-width: 1023px) {
  body.s2-admin .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-105%); transition: transform .2s ease; }
  body.s2-admin .workspace.mobile-open .sidebar { transform: translateX(0); }
  body.s2-admin .mobile-menu { display: grid; }
  body.s2-admin .workspace.compact .sidebar { width: var(--s2a-sidebar-width); min-width: var(--s2a-sidebar-width); }
  body.s2-admin .workspace.compact .sidebar .nav-copy,
  body.s2-admin .workspace.compact .sidebar .side-brand-copy { display: block; }
  body.s2-admin .workspace.mobile-open #mobile-backdrop {
    display: block !important; position: fixed; inset: 0; z-index: 50;
    border: 0; background: rgba(0,0,0,.55); cursor: pointer;
  }
  body.s2-admin .workspace:not(.mobile-open) #mobile-backdrop { display: none !important; }
  body.s2-admin .topbar { padding: 10px 16px; }
}
.s2a-immersive-dock {
  position: fixed; top: 12px; left: 12px; z-index: 999999; display: flex;
  align-items: flex-start; gap: 6px; background: var(--s2a-surface);
  padding: 7px; border: 1px solid var(--s2a-border); border-radius: var(--s2a-radius);
  box-shadow: 0 8px 24px #0005; color: var(--s2a-text);
  font: 13px var(--s2a-font);
}
.s2a-immersive-dock a, .s2a-immersive-dock button {
  color: var(--s2a-text); font: inherit; text-decoration: none;
  border: none; background: transparent; padding: 7px 11px; border-radius: 7px; cursor: pointer;
}
.s2a-immersive-dock a:hover, .s2a-immersive-dock button:hover { background: var(--s2a-surface-alt); }
.s2a-dock-links { position: absolute; top: 52px; left: 0; min-width: 220px; max-height: 70vh; overflow: auto; background: var(--s2a-surface); border: 1px solid var(--s2a-border); border-radius: var(--s2a-radius); box-shadow: 0 12px 28px #0005; padding: 8px; }
.s2a-dock-links a { display: block; }
.s2a-dock-links[hidden] { display: none !important; }