/* Three left-navigation systems. Business behavior is theme-independent. */

/* Settings information architecture */
#admin-view.active { display:flex; flex-direction:column; gap:18px; }
#adminOnlySettings { display:contents; }
#adminOnlySettings>.site-identity-band { order:0; }
#integrations { order:1; }
#adminOnlySettings>.admin-grid { order:2; }
#adminOnlySettings>.admin-users-band { order:3; }
#admin-view .band { margin-bottom:0; }
.site-identity-band { display:grid; grid-template-columns:minmax(320px,.72fr) minmax(560px,1.28fr); gap:20px 28px; align-items:start; }
.site-identity-band>.section-heading { grid-column:1/-1; margin-bottom:0; padding-bottom:14px; border-bottom:1px solid var(--line); }
#siteSettingsForm { max-width:none; grid-column:1; grid-template-columns:1fr; gap:14px; }
#siteSettingsForm>div { grid-column:auto; }
.theme-settings { grid-column:2; display:grid; grid-template-columns:minmax(190px,.65fr) minmax(0,1.6fr); gap:14px 16px; align-items:start; margin:0; padding:0; border:0; }
.theme-settings>button { justify-self:start; }
.theme-settings>small { align-self:center; color:var(--muted); font-size:11px; line-height:1.6; }
.theme-previews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-row:span 3; gap:9px; }
.theme-preview { min-width:0; padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.theme-preview>span { position:relative; display:block; height:46px; overflow:hidden; margin-bottom:8px; border:1px solid #00000010; border-radius:3px; }
.theme-preview>span::before,.theme-preview>span::after { content:""; position:absolute; }
.theme-preview strong { display:block; overflow-wrap:anywhere; font-size:11px; }
.theme-preview small { display:block; margin-top:3px; color:var(--muted); font-size:9px; line-height:1.45; }
.preview-default>span { background:#f3f5f6; }
.preview-default>span::before { inset:0 auto 0 0; width:25%; background:#182635; }
.preview-default>span::after { inset:7px 7px 7px 33%; background:repeating-linear-gradient(#fff 0 7px,transparent 7px 11px); }
.preview-graphite>span { background:#f4f5f5; }
.preview-graphite>span::before { inset:0 auto 0 0; width:14%; border-right:1px solid #d7dcdf; background:#fff; }
.preview-graphite>span::after { inset:6px 6px 6px 22%; background:repeating-linear-gradient(90deg,#fff 0 30%,transparent 30% 34%); border-top:2px solid #087e78; }
.preview-olive>span { background:#edf0f5; }
.preview-olive>span::before { inset:4px auto 4px 4px; width:29%; border-radius:4px; background:#30384d; }
.preview-olive>span::after { inset:7px 7px 7px 39%; border-radius:3px; background:repeating-linear-gradient(#fff 0 8px,transparent 8px 12px); }
.integrations-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start; }
.integrations-grid.member-integrations { grid-template-columns:1fr; }
#integrations>#turnstilePane { min-width:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
#integrations #cloud-view { min-width:0; margin:0; padding-left:28px; border-left:1px solid var(--line); }
#integrations.member-integrations #cloud-view { padding:0; border:0; }
#integrations #cloudSettingsDialog { padding:0; border:0; box-shadow:none; background:transparent; }
#integrations #closeCloudSettings { display:none; }
#turnstileSettingsForm { max-width:none; gap:13px; }
#turnstilePane>p { max-width:65ch; margin:0 0 16px; color:var(--muted); font-size:11px; line-height:1.7; }
#integrations #cloudSettingsForm label:not(.toggle-row) { grid-template-columns:minmax(0,1fr); }
#integrations #cloudSettingsForm label>span { grid-column:auto; }
#integrations #cloudS3Fields,#integrations #cloudDavFields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.admin-grid { grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr); gap:18px; }
.account-actions { justify-content:flex-end; }

/* Shared product behavior */
html[data-design] { accent-color:var(--brand); }
html[data-design] ::selection { color:#fff; background:var(--brand); }
html[data-design] body:not(.authenticated) .app-shell { display:none; }
html[data-design] :is(button,input,select) { transition:border-color 160ms ease,background-color 160ms ease,color 160ms ease,box-shadow 160ms ease,transform 100ms ease; }
html[data-design] button:active:not(:disabled) { transform:translateY(1px); }
html[data-design] :is(.kpi-card>strong,.metric-row>strong,.scenario-profit-grid strong,td) { font-variant-numeric:tabular-nums; }
html[data-design] .section-heading h3 { padding-left:0; border-left:0; }
html[data-design] .main-content { min-width:0; }

/* Voyage Console: dependable retail operations, navy navigation, amber actions. */
html[data-design="default"] { --canvas:#f2f4f5; --surface:#fff; --soft:#f6f7f8; --ink:#172536; --muted:#657383; --line:#dce2e6; --line-strong:#b8c3cb; --nav:#182635; --nav-secondary:#27394a; --brand:#a84a24; --brand-dark:#813518; --brand-soft:#fff0e8; --yellow:#ffb445; --yellow-hover:#efa333; --amber:#d96632; --amber-soft:#fff2e8; --green:#147554; --red:#b63f49; }
html[data-design="default"][data-theme="dark"] { --canvas:#12181d; --surface:#1c242b; --soft:#252f37; --ink:#edf2f5; --muted:#a9b4bd; --line:#384650; --line-strong:#53636f; --nav:#0d1318; --nav-secondary:#22313d; --brand:#ff9767; --brand-dark:#ffb08d; --brand-soft:#482b23; --yellow:#e8a239; --yellow-hover:#f3b04b; --amber:#ff9767; --amber-soft:#3b2921; --green:#54bd91; --red:#ef7d87; }
html[data-design="default"] body { background:var(--canvas); }
html[data-design="default"] .sidebar { background:#182635; }
html[data-design="default"] .brand { height:82px; }
html[data-design="default"] .main-nav { gap:4px; padding-top:20px; }
html[data-design="default"] .nav-item { min-height:45px; border-radius:5px; color:#bac7d1; font-weight:550; }
html[data-design="default"] .nav-item:hover { color:#fff; border-color:transparent; background:#223445; }
html[data-design="default"] .nav-item.active { color:#fff; border-color:#ffffff0d; background:#2a3d4e; box-shadow:inset 3px 0 #ffb445; }
html[data-design="default"] .topbar { height:72px; background:var(--surface); box-shadow:none; }
html[data-design="default"] :is(.band,.form-group,.scenario,.cost-plan,.warehouse-card,.login-panel,dialog) { border-radius:6px; box-shadow:none; }
html[data-design="default"] :is(input,select,.primary-button,.secondary-button,.update-button,.icon-button) { border-radius:5px; }
html[data-design="default"] .primary-button { color:#36250d; border-color:var(--yellow); background:var(--yellow); }
html[data-design="default"] .primary-button:hover { background:var(--yellow-hover); }
html[data-design="default"] .kpi-grid { gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--line); }
html[data-design="default"] .kpi-grid .kpi-card { min-height:124px; padding:17px; border:0; border-radius:0; background:var(--surface); box-shadow:none; }
html[data-design="default"] .kpi-card .kpi-icon { color:var(--brand); background:var(--brand-soft); }
html[data-design="default"] .kpi-card>strong { font-size:26px; }
html[data-design="default"] .input-rail .form-group>h3 { border-left:0; background:var(--soft); }
html[data-design="default"] :is(.scenario-section,.cost-section) { padding:0; border:0; background:transparent; box-shadow:none; }
html[data-design="default"] .scenario-grid { gap:10px; }
html[data-design="default"] .scenario-grid .scenario { border:1px solid var(--line); }
html[data-design="default"] .scenario .scenario-top { margin:-18px -18px 14px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--soft); }
html[data-design="default"] .scenario-profit-grid>div { background:var(--soft); }
html[data-design="default"] :is(th,.form-group>h3,.update-dialog-head) { background:var(--soft); }
html[data-design="default"] .login-page { grid-template-columns:minmax(0,1.1fr) minmax(390px,.72fr); background:var(--canvas); }
html[data-design="default"] .login-page::before { inset:0 46% 0 0; background:#182635; }
html[data-design="default"] .login-story h2 { max-width:9ch; font-size:48px; line-height:1.32; letter-spacing:0; }
html[data-design="default"] .login-kicker { color:#ffc66d; }
html[data-design="default"] .login-panel { box-shadow:0 20px 60px #17253612; }

/* Polar Matrix: a bright compact rail with joined, high-density work surfaces. */
html[data-design="graphite"] { --canvas:#eceff0; --surface:#fbfcfc; --soft:#f0f2f3; --ink:#152023; --muted:#667276; --line:#d3d9dc; --line-strong:#aab4b8; --nav:#fbfcfc; --nav-secondary:#e7eeed; --brand:#087e78; --brand-dark:#05635f; --brand-soft:#dcefed; --yellow:#087e78; --yellow-hover:#056a65; --amber:#087e78; --amber-soft:#e1efee; --green:#197451; --red:#b13e48; }
html[data-design="graphite"][data-theme="dark"] { --canvas:#101517; --surface:#182023; --soft:#222c2f; --ink:#eaf0f1; --muted:#a0abad; --line:#354145; --line-strong:#526064; --nav:#151c1f; --nav-secondary:#243033; --brand:#58c9c2; --brand-dark:#7ddbd5; --brand-soft:#1d3c39; --yellow:#58c9c2; --yellow-hover:#70d5cf; --amber:#58c9c2; --amber-soft:#193431; --green:#61c394; --red:#ef7e88; }
html[data-design="graphite"] body { background:var(--canvas); }
html[data-design="graphite"] .sidebar { color:var(--ink); border-right:1px solid var(--line); background:var(--nav); }
html[data-design="graphite"] .brand { justify-content:center; border-color:var(--line); }
html[data-design="graphite"] .brand>div { display:none; }
html[data-design="graphite"] .brand-mark { border-radius:4px; }
html[data-design="graphite"] .main-nav { gap:3px; padding-top:12px; }
html[data-design="graphite"] .nav-item { min-height:58px; flex-direction:column; justify-content:center; gap:4px; padding:4px 2px; border-radius:3px; color:var(--muted); text-align:center; font-size:9px; }
html[data-design="graphite"] .nav-item:hover { color:var(--ink); border-color:transparent; background:var(--soft); }
html[data-design="graphite"] .nav-item.active { color:#fff; border-color:var(--brand); background:var(--brand); box-shadow:none; }
html[data-design="graphite"] .sidebar-foot { justify-content:center; border-color:var(--line); }
html[data-design="graphite"] .sidebar-foot>div { display:none; }
html[data-design="graphite"] .topbar { height:62px; background:var(--surface); }
html[data-design="graphite"] :is(.band,.form-group,.kpi-card,.scenario-section,.cost-section,.scenario,.cost-plan,.warehouse-card,.login-panel,dialog,.table-wrap) { border-radius:2px; box-shadow:none; }
html[data-design="graphite"] :is(input,select,.primary-button,.secondary-button,.update-button,.icon-button) { border-radius:2px; }
html[data-design="graphite"] .primary-button { color:#fff; border-color:var(--brand); background:var(--brand); }
html[data-design="graphite"] .primary-button:hover { background:var(--brand-dark); }
html[data-design="graphite"] :is(th,.form-group>h3,.update-dialog-head) { color:var(--muted); background:var(--soft); text-transform:uppercase; font-size:10px; letter-spacing:.7px; }
html[data-design="graphite"] .input-rail .form-group>h3 { border-left:0; }
html[data-design="graphite"] .kpi-grid { gap:1px; padding:1px; background:var(--line); }
html[data-design="graphite"] .kpi-grid .kpi-card { min-height:108px; padding:13px; border:0; border-radius:0; background:var(--surface); }
html[data-design="graphite"] .kpi-card .kpi-icon { color:var(--brand); border-radius:2px; background:var(--brand-soft); }
html[data-design="graphite"] .kpi-card>strong { font-family:"Cascadia Mono",Consolas,monospace; font-size:23px; letter-spacing:0; }
html[data-design="graphite"] :is(.scenario-section,.cost-section) { padding:0; border:0; background:transparent; }
html[data-design="graphite"] .scenario-section>.section-heading,html[data-design="graphite"] .cost-section>.section-heading { min-height:42px; align-items:center; margin:0; padding:0 11px; border:1px solid var(--line); background:var(--soft); }
html[data-design="graphite"] .scenario-grid { gap:1px; padding:1px; background:var(--line); }
html[data-design="graphite"] .scenario-grid .scenario { border:0; border-radius:0; }
html[data-design="graphite"] .scenario-profit-grid>div { border-radius:0; background:var(--soft); }
html[data-design="graphite"] .metric-row { padding-block:8px; }
html[data-design="graphite"] .login-page { grid-template-columns:390px minmax(0,1fr); background:var(--canvas); }
html[data-design="graphite"] .login-page::before { inset:0 0 0 48%; background:#152023; }
html[data-design="graphite"] .login-panel { grid-column:1; grid-row:1; border-radius:2px; }
html[data-design="graphite"] .login-story { grid-column:2; grid-row:1; padding-left:8vw; }
html[data-design="graphite"] .login-kicker { color:#78d7d1; }
html[data-design="graphite"] .login-story h2 { max-width:10ch; font-size:45px; letter-spacing:0; }

/* Cloud Workspace: an inset dark navigation plane and calm layered content. */
html[data-design="olive"] { --canvas:#edf0f5; --surface:#fff; --soft:#f3f5f8; --ink:#1c2639; --muted:#687488; --line:#dce1e8; --line-strong:#bbc5d2; --nav:#30384d; --nav-secondary:#414b65; --brand:#365db2; --brand-dark:#27478c; --brand-soft:#e9eefb; --yellow:#365db2; --yellow-hover:#2d50a0; --amber:#d85d43; --amber-soft:#fff0ec; --green:#177456; --red:#b83e49; }
html[data-design="olive"][data-theme="dark"] { --canvas:#151924; --surface:#1d2330; --soft:#272e3d; --ink:#edf1f8; --muted:#a9b3c4; --line:#394253; --line-strong:#566176; --nav:#262d3d; --nav-secondary:#39445e; --brand:#8eaff8; --brand-dark:#aec5fa; --brand-soft:#2b3a61; --yellow:#769aeb; --yellow-hover:#8caaed; --amber:#fa9078; --amber-soft:#472d30; --green:#62c299; --red:#ee838d; }
html[data-design="olive"] body { background:var(--canvas); }
html[data-design="olive"] .sidebar { color:#fff; border:1px solid #ffffff10; border-radius:10px; background:#30384d; box-shadow:0 18px 55px #1c263918; }
html[data-design="olive"] .brand { height:86px; border-color:#ffffff18; }
html[data-design="olive"] .brand small { color:#b8c1d1; }
html[data-design="olive"] .main-nav { gap:6px; padding-top:22px; }
html[data-design="olive"] .nav-item { min-height:46px; border-radius:7px; color:#c0c8d8; }
html[data-design="olive"] .nav-item:hover { color:#fff; border-color:transparent; background:#ffffff0c; }
html[data-design="olive"] .nav-item.active { color:#fff; border-color:#ffffff10; background:#46526f; box-shadow:none; }
html[data-design="olive"] .sidebar-foot { border-color:#ffffff18; }
html[data-design="olive"] .sidebar-foot strong { color:#fff; }
html[data-design="olive"] .sidebar-foot small { color:#b8c1d1; }
html[data-design="olive"] .topbar { height:76px; border:0; background:transparent; }
html[data-design="olive"] :is(.band,.form-group,.kpi-card,.scenario,.cost-plan,.warehouse-card,.login-panel,dialog) { border-radius:10px; box-shadow:0 9px 28px #1c263909; }
html[data-design="olive"] :is(input,select,.primary-button,.secondary-button,.update-button,.icon-button) { border-radius:6px; }
html[data-design="olive"] .primary-button { color:#fff; border-color:var(--brand); background:var(--brand); }
html[data-design="olive"] .primary-button:hover { background:var(--brand-dark); }
html[data-design="olive"] .kpi-grid { gap:11px; }
html[data-design="olive"] .kpi-grid .kpi-card { min-height:140px; padding:19px; border:0; background:var(--surface); }
html[data-design="olive"] .kpi-card .kpi-icon { color:var(--brand); border-radius:6px; background:var(--brand-soft); }
html[data-design="olive"] .kpi-card>strong { font-size:29px; }
html[data-design="olive"] .input-rail { gap:17px; }
html[data-design="olive"] .input-rail .form-group { border:0; }
html[data-design="olive"] .input-rail .form-group>h3 { border:0; background:transparent; }
html[data-design="olive"] :is(.scenario-section,.cost-section) { padding:0; border:0; background:transparent; box-shadow:none; }
html[data-design="olive"] .scenario-grid { gap:13px; }
html[data-design="olive"] .scenario-grid .scenario { border:0; background:var(--surface); }
html[data-design="olive"] .scenario .scenario-top { margin:-18px -18px 14px; padding:13px 18px; border-radius:10px 10px 0 0; background:var(--soft); }
html[data-design="olive"] .scenario-profit-grid>div { background:var(--soft); }
html[data-design="olive"] th { color:var(--muted); background:var(--soft); }
html[data-design="olive"] .login-page { grid-template-columns:minmax(0,1.05fr) minmax(390px,.72fr); background:var(--canvas); }
html[data-design="olive"] .login-page::before { inset:18px 48% 18px 18px; border-radius:12px; background:#30384d; }
html[data-design="olive"] .login-story { padding-left:3vw; }
html[data-design="olive"] .login-kicker { color:#a9c1ff; }
html[data-design="olive"] .login-story h2 { max-width:9ch; font-size:47px; letter-spacing:0; }
html[data-design="olive"] .login-panel { border:0; box-shadow:0 24px 70px #1c263914; }

@media(min-width:901px) {
  html[data-design="default"] .app-shell { grid-template-columns:224px minmax(0,1fr); }
  html[data-design="default"] .sidebar { width:224px; }
  html[data-design="default"] .main-content { grid-column:2; }
  html[data-design="default"] .view { max-width:1720px; margin-inline:auto; }

  html[data-design="graphite"] .app-shell { grid-template-columns:94px minmax(0,1fr); }
  html[data-design="graphite"] .sidebar { width:94px; padding:0 8px 12px; }
  html[data-design="graphite"] .main-content { grid-column:2; }
  html[data-design="graphite"] .view { padding:16px 20px 38px; }
  html[data-design="graphite"] .profit-layout { grid-template-columns:minmax(0,1fr) 346px; gap:12px; }
  html[data-design="graphite"] .input-rail { gap:7px; }
  html[data-design="graphite"] .form-group { padding:13px; }
  html[data-design="graphite"] .form-group>h3 { min-height:37px; margin:-13px -13px 11px; }

  html[data-design="olive"] .app-shell { grid-template-columns:280px minmax(0,1fr); }
  html[data-design="olive"] .sidebar { inset:14px auto 14px 14px; width:252px; padding:0 14px 18px; }
  html[data-design="olive"] .main-content { grid-column:2; }
  html[data-design="olive"] .view { max-width:1540px; margin-inline:auto; padding:18px 30px 58px 16px; }
  html[data-design="olive"] .profit-layout { grid-template-columns:minmax(0,1fr) minmax(350px,380px); gap:26px; }
  html[data-design="olive"] .results-area { gap:21px; }
}

@media(max-width:1180px) and (min-width:901px) {
  .site-identity-band { grid-template-columns:1fr; }
  #siteSettingsForm,.theme-settings { grid-column:1; }
  .theme-settings { grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr); }
  html[data-design="olive"] .app-shell { grid-template-columns:220px minmax(0,1fr); }
  html[data-design="olive"] .sidebar { width:198px; }
}

@media(max-width:1000px) {
  .integrations-grid { grid-template-columns:1fr; }
  #integrations #cloud-view { padding:24px 0 0; border-left:0; border-top:1px solid var(--line); }
}

@media(max-width:900px) {
  html[data-design] .app-shell { display:block; padding-bottom:68px; }
  html[data-design] .sidebar { inset:auto 0 0; width:auto; height:64px; flex-direction:row; padding:6px; border:0; border-top:1px solid var(--line-strong); border-radius:0; }
  html[data-design] .brand,html[data-design] .sidebar-foot { display:none; }
  html[data-design] .main-nav { width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:0; }
  html[data-design] .main-nav.admin-enabled { grid-template-columns:repeat(6,minmax(0,1fr)); }
  html[data-design] .nav-item { width:100%; min-height:52px; flex-direction:column; justify-content:center; gap:3px; padding:3px; border-radius:3px; text-align:center; font-size:9px; }
  html[data-design] .nav-item.active { box-shadow:inset 0 2px var(--amber); }
  html[data-design] .main-content { grid-column:auto; }
  html[data-design] .topbar { top:0; }
  html[data-design] .view { max-width:none; margin:0; }
}

@media(max-width:760px) {
  .site-identity-band { grid-template-columns:1fr; }
  #siteSettingsForm,.theme-settings { grid-column:1; }
  .theme-settings { grid-template-columns:1fr; }
  .theme-previews { grid-row:auto; }
  .admin-grid { grid-template-columns:1fr; }
}

@media(max-width:640px) {
  .theme-previews { gap:5px; }
  .theme-preview { padding:6px; }
  .theme-preview small { display:none; }
  #integrations #cloudS3Fields,#integrations #cloudDavFields { grid-template-columns:1fr; }
  html[data-design] .login-page { display:flex; background:var(--canvas); }
  html[data-design] .login-page::before { display:none; }
  html[data-design] .login-brand { color:var(--ink); }
  html[data-design] .login-panel { grid-column:auto; color:var(--ink); border:1px solid var(--line); background:var(--surface); }
  html[data-design] .login-heading h1,html[data-design] .login-panel label { color:var(--ink); }
  html[data-design] .login-panel :is(input,.auth-switch) { color:var(--ink); border-color:var(--line-strong); background:var(--surface); }
}