/* FlowStack shell canonical CSS. Keep this block identical in flowstack-ui-template.css. */
:root {
  --fs-bg: #f3f6f7;
  --fs-bg-panel: #ffffff;
  --fs-bg-panel-muted: #f7faf9;
  --fs-bg-shell: #0f2027;
  --fs-bg-success: #ecfdf7;
  --fs-bg-warning: #fff8f6;
  --fs-bg-info: #eef8f7;
  --fs-text: #172026;
  --fs-text-strong: #0b1418;
  --fs-muted: #60707a;
  --fs-border: #d7e0e3;
  --fs-border-strong: #aab9bf;
  --fs-brand: #12343b;
  --fs-brand-2: #0f766e;
  --fs-danger: #b42318;
  --fs-danger-bg: #fff5f4;
  --fs-success-text: #166534;
  --fs-success-border: #9bd7b1;
  --fs-success-soft: #eaf7ef;
  --fs-warning-text: #7a4100;
  --fs-warning-border: #f2c36b;
  --fs-warning-soft: #fff7e6;
  --fs-danger-text: #8f1d14;
  --fs-danger-border: #f8c4bd;
  --fs-danger-soft: #fff1f0;
  --fs-focus: rgba(15, 118, 110, 0.22);
  --fs-radius-sm: 6px;
  --fs-radius-md: 8px;
  --fs-shadow-sm: 0 1px 2px rgba(15, 32, 39, 0.08);
  --fs-shadow-md: 0 12px 32px rgba(15, 32, 39, 0.08);
  --fs-shadow-lg: 0 20px 52px rgba(15, 32, 39, 0.14);
  --fs-sidebar-width: 260px;
  --fs-shell-top-accent-height: 260px;
  --fs-shell-diagonal-accent-size: 1600px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--fs-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  background: var(--fs-bg);
}

body[data-flowstack-shell] {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: var(--fs-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  background:
    linear-gradient(180deg, rgba(15, 32, 39, 0.05) 0, rgba(15, 32, 39, 0) var(--fs-shell-top-accent-height)),
    linear-gradient(135deg, rgba(15, 118, 110, 0.06) 0 22%, transparent 22% 100%),
    var(--fs-bg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    100% var(--fs-shell-top-accent-height),
    var(--fs-shell-diagonal-accent-size) var(--fs-shell-diagonal-accent-size),
    auto;
  background-position: top left, top left, center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--fs-brand-2);
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--fs-focus);
  outline-offset: 3px;
}

.app-shell,
.page-shell.platform-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--fs-sidebar-width) minmax(0, 1fr);
  gap: 24px;
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 24px;
}

.sidebar,
.platform-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  min-height: calc(100vh - 48px);
  padding: 20px;
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-md);
  background: var(--fs-bg-panel);
  box-shadow: var(--fs-shadow-md);
  overflow: visible;
}

.platform-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.sidebar-brand,
.platform-brand {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--fs-border);
  color: var(--fs-text-strong);
  font-weight: 850;
  text-decoration: none;
  border-radius: var(--fs-radius-md);
}

.sidebar-brand img,
.platform-brand-mark {
  display: block;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: var(--fs-radius-md);
  box-shadow: var(--fs-shadow-sm);
}

.sidebar-brand > span,
.platform-brand p {
  margin: 0;
  color: var(--fs-text-strong);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.05;
}

.sidebar-brand span span,
.platform-brand span {
  display: block;
  margin-top: 0;
  color: var(--fs-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: uppercase;
}

.sidebar-nav {
  display: grid;
  gap: 6px;
  margin-top: 24px;
}

.sidebar-nav a {
  display: block;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--fs-radius-sm);
  color: var(--fs-brand-2);
  font-weight: 800;
  text-decoration: none;
}

.sidebar-nav a[aria-current="page"],
.sidebar-nav a:hover {
  border-color: rgba(15, 118, 110, 0.24);
  color: var(--fs-brand);
  background: var(--fs-bg-info);
}

.sidebar-footer {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--fs-border);
}

.main-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.page-header,
.content-card {
  min-width: 0;
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-md);
  background: var(--fs-bg-panel);
  box-shadow: var(--fs-shadow-sm);
}

.page-header {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--fs-brand-2);
  padding: 24px;
}

.content-card {
  padding: 20px;
}

.manage-users-shell-card {
  display: grid;
  gap: 12px;
}

.manage-users-operations-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-md);
  background: #ffffff;
}

.eyebrow,
.field-label {
  margin: 0 0 8px;
  color: var(--fs-brand-2);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-header h1,
.content-card h2,
.content-card h3 {
  margin: 0;
  color: var(--fs-text-strong);
  line-height: 1.12;
}

.page-header p,
.muted,
.field-help {
  color: var(--fs-muted);
}

@media (max-width: 980px) {
  .app-shell,
  .page-shell.platform-shell {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .platform-sidebar {
    position: static;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .app-shell,
  .page-shell.platform-shell {
    padding: 14px;
  }
}