.admin-status-form {
    min-width: 16rem;
}
/* mijnclubwebshop.nl — shared foundation + beheeromgeving (Fundora direction)
   Companion files: site.css (public / auth, Orix + FreshMart effects), store.css (club storefront). */

:root {
  --ink: #14261f;
  --ink-2: #2c4038;
  --muted: #5d6f67;
  --paper: #f4f3ec;
  --paper-2: #ebeae0;
  --card: #fdfdf9;
  --line: #e0e2d6;
  --green: #1f6b45;
  --green-deep: #134a30;
  --lime: #b9e45d;
  --lime-soft: #eef8d6;
  --coral: #e0673f;
  --sky: #dfece9;
  --radius: 1.1rem;
  --radius-lg: 1.6rem;
  --shadow-sm: 0 1px 2px rgb(20 38 31 / 6%), 0 4px 14px rgb(20 38 31 / 5%);
  --shadow-md: 0 2px 4px rgb(20 38 31 / 5%), 0 18px 40px -12px rgb(20 38 31 / 18%);
  --font-sans: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* legacy aliases used by existing views */
  --club-ink: var(--ink);
  --club-navy: var(--ink);
  --club-teal: var(--green);
  --club-mint: var(--lime-soft);
  --club-paper: var(--paper);
  --club-line: var(--line);

  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-border-color: var(--line);
  --bs-link-color: var(--green);
  --bs-link-color-rgb: 31, 107, 69;
  --bs-link-hover-color: var(--green-deep);
  --bs-link-hover-color-rgb: 19, 74, 48;
  --bs-secondary-color: var(--muted);
  --bs-border-radius: .8rem;
  --bs-border-radius-lg: 1rem;
  --bs-focus-ring-color: rgb(31 107 69 / 28%);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-5, .display-6 {
  font-family: var(--font-display);
  letter-spacing: -.025em;
}

.text-secondary { color: var(--muted) !important; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: .35rem;
}

.skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 1000;
  padding: .6rem 1rem;
  border-radius: .6rem;
  color: var(--card);
  background: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s var(--ease);
}

.skip-link:focus { top: 1rem; }

.brand-mark {
  display: inline-grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: .7rem;
  background: var(--ink);
  color: var(--lime);
  font-weight: 900;
  font-size: 1.05rem;
  box-shadow: inset 0 -3px 0 rgb(185 228 93 / 35%);
}

.eyebrow {
  color: var(--green);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- Surfaces & components ---------- */

.surface {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.surface .surface { box-shadow: none; background: #f8f8f1; }

.muted-panel {
  background: var(--lime-soft);
  border: 1px solid #d7ebb0;
  border-radius: .9rem;
}

.btn {
  --bs-btn-font-weight: 700;
  border-radius: .75rem;
  transition: transform .15s var(--ease), background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.btn:active { transform: translateY(1px); }
.btn-lg { --bs-btn-border-radius: .9rem; padding: .8rem 1.4rem; font-size: 1rem; }

.btn-club,
.btn-primary {
  --bs-btn-color: #fdfdf9;
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-color: #fdfdf9;
  --bs-btn-hover-bg: var(--green-deep);
  --bs-btn-hover-border-color: var(--green-deep);
  --bs-btn-active-bg: var(--green-deep);
  --bs-btn-active-border-color: var(--green-deep);
  --bs-btn-disabled-bg: #7f9e8b;
  --bs-btn-disabled-border-color: #7f9e8b;
  --bs-btn-focus-shadow-rgb: 31, 107, 69;
}

.btn-outline-secondary {
  --bs-btn-color: var(--ink-2);
  --bs-btn-border-color: #cfd3c4;
  --bs-btn-bg: var(--card);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--paper-2);
  --bs-btn-hover-border-color: #bfc4b2;
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--paper-2);
  --bs-btn-active-border-color: #bfc4b2;
}

.btn-outline-danger { --bs-btn-bg: var(--card); }

.btn-ink {
  --bs-btn-color: var(--paper);
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: var(--lime);
  --bs-btn-hover-bg: #0d1a15;
  --bs-btn-hover-border-color: #0d1a15;
  --bs-btn-active-bg: #0d1a15;
  --bs-btn-active-color: var(--lime);
}

.btn-lime {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--lime);
  --bs-btn-border-color: var(--lime);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: #a8d64a;
  --bs-btn-hover-border-color: #a8d64a;
  --bs-btn-active-bg: #a8d64a;
}

.btn-soft {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--card);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--paper-2);
  --bs-btn-hover-border-color: #cfd3c4;
}

.btn-ghost-light {
  --bs-btn-color: var(--paper);
  --bs-btn-border-color: rgb(244 243 236 / 40%);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--paper);
  --bs-btn-hover-border-color: var(--paper);
}

.form-label { font-weight: 650; color: var(--ink-2); font-size: .92rem; }

.form-control,
.form-select,
.input-group-text {
  border-color: #d5d8ca;
  background-color: #fefefb;
  border-radius: .7rem;
}

.input-group-text { background: var(--paper-2); color: var(--ink-2); font-weight: 700; }

.form-control:focus,
.form-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 .22rem rgb(31 107 69 / 16%);
}

.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-check-input:focus { box-shadow: 0 0 0 .22rem rgb(31 107 69 / 16%); border-color: var(--green); }
.form-text { color: var(--muted); }

.alert {
  border-radius: .9rem;
  border-width: 1px;
  border-left-width: 4px;
}

.alert-info    { --bs-alert-bg: #e7f1ef; --bs-alert-border-color: #9dc6bd; --bs-alert-color: #154539; }
.alert-success { --bs-alert-bg: var(--lime-soft); --bs-alert-border-color: #8fc046; --bs-alert-color: #24461a; }
.alert-warning { --bs-alert-bg: #fbf2dc; --bs-alert-border-color: #dfb456; --bs-alert-color: #5b4210; }
.alert-danger  { --bs-alert-bg: #fbe9e3; --bs-alert-border-color: var(--coral); --bs-alert-color: #6e2512; }
.alert-secondary { --bs-alert-bg: var(--paper-2); --bs-alert-border-color: #b8bca9; --bs-alert-color: var(--ink-2); }

.badge {
  padding: .4em .7em;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: .01em;
}

.text-bg-success { background-color: var(--lime) !important; color: #1d3a10 !important; }
.text-bg-warning { background-color: #f4dd96 !important; color: #57400b !important; }
.text-bg-secondary { background-color: #dcdfd1 !important; color: var(--ink-2) !important; }
.text-bg-danger { background-color: #f5c9b9 !important; color: #6e2512 !important; }
.text-bg-info { background-color: #cde5df !important; color: #154539 !important; }
.text-bg-primary { background-color: var(--green) !important; color: #fdfdf9 !important; }

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: #f6f6ef;
  --bs-table-hover-bg: #f1f4e8;
  --bs-table-border-color: var(--line);
  margin-bottom: 0;
}

.table > thead th {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom-width: 1px;
  background: #f6f6ef;
  white-space: nowrap;
}

.table > :not(caption) > * > * { padding: .85rem .9rem; vertical-align: middle; }
.table-responsive { border-radius: var(--radius); }

.nav-tabs, .nav-pills { --bs-nav-link-color: var(--ink-2); --bs-nav-link-hover-color: var(--green); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ink); --bs-nav-pills-border-radius: 99px; }

.footer-note { color: var(--muted); font-size: .875rem; }

.product-thumb,
.cart-thumb {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: .8rem;
  object-fit: cover;
  background: var(--lime-soft);
}

.product-thumb-placeholder {
  display: inline-grid;
  place-items: center;
  color: var(--green);
  font-weight: 800;
}

.empty-state { max-width: 34rem; margin-inline: auto; }

/* ---------- Beheeromgeving shell ---------- */

.scope-dashboard,
.scope-platform {
  background:
    radial-gradient(60rem 22rem at 100% -5%, rgb(185 228 93 / 18%), transparent 60%),
    var(--paper);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: .45rem 0;
  background: rgb(244 243 236 / 82%);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgb(224 226 214 / 70%);
}

.app-topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.app-logo { display: block; width: 200px; height: auto; max-width: min(200px, 42vw); }

.app-nav {
  display: flex;
  gap: .25rem;
  padding: .3rem;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  scrollbar-width: none;
}

.app-nav-link {
  padding: .45rem 1rem;
  border-radius: 99px;
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

.app-nav-link:hover { background: var(--paper-2); color: var(--ink); }
.app-nav-link.active { background: var(--ink); color: var(--lime); }

.app-scope-tag {
  padding: .35rem .75rem;
  border-radius: 99px;
  background: var(--lime-soft);
  color: var(--green-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scope-platform .app-scope-tag { background: var(--ink); color: var(--lime); }

.app-main { padding-top: 2.25rem; padding-bottom: 3rem; }
.app-main > section, .app-main > div { animation: rise .45s var(--ease) both; }

.app-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: 2rem;
  color: var(--muted);
  font-size: .85rem;
}

/* existing dashboard pages: give their main headings Fundora scale */
.scope-dashboard .app-main h1.h2,
.scope-platform .app-main h1.h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 800; }

/* ---------- Dashboard overview ---------- */

.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.dash-title {
  margin: 0 0 .25rem;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 1rem;
}

.stat-card {
  position: relative;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.stat-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.stat-label {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}

.stat-value {
  margin: .7rem 0 .45rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.stat-value-sm { font-size: 1.3rem; word-break: break-all; font-family: var(--font-mono); letter-spacing: -.01em; }

.stat-card-live {
  border-color: transparent;
  background:
    radial-gradient(18rem 10rem at 100% 0%, rgb(185 228 93 / 55%), transparent 70%),
    var(--card);
}

.stat-card-role .alert { margin-top: .8rem; }

.status-dot { width: .7rem; height: .7rem; border-radius: 50%; }
.status-dot.is-live { background: #6cbf2f; box-shadow: 0 0 0 4px rgb(108 191 47 / 20%); }
.status-dot.is-draft { background: #d6a83c; box-shadow: 0 0 0 4px rgb(214 168 60 / 20%); }

.dash-section-title {
  margin: 2.25rem 0 1rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-2);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .85rem;
}

.action-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-height: 7.5rem;
  justify-content: flex-end;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--card);
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}

.action-tile::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 46%, currentColor 46% 54%, transparent 54%) center / .7rem .7rem no-repeat,
    var(--paper-2);
  transform: rotate(0deg);
  transition: transform .25s var(--ease), background-color .2s;
}

.action-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfd6bd; color: var(--ink); }
.action-tile:hover::after { transform: rotate(45deg); }

.action-kicker { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.action-tile strong { font-size: 1.1rem; letter-spacing: -.015em; }

.action-tile-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.action-tile-primary .action-kicker { color: var(--lime); }
.action-tile-primary::after { background-color: var(--lime); color: var(--ink); }
.action-tile-primary:hover { color: var(--paper); border-color: var(--ink); }

/* ---------- Store settings live preview (existing JS hooks) ---------- */

.scope-public .order-success, .payment-status { max-width: 40rem; }

.settings-live-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f8f2;
  box-shadow: var(--shadow-md);
}

.settings-preview-bar {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  color: var(--ink);
  background: var(--card);
  font-weight: 750;
}

.settings-preview-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .65rem;
  color: #fdfdf9;
  background: var(--preview-primary);
  font-weight: 900;
}

.settings-preview-hero {
  margin: 0 .75rem;
  padding: 1.3rem 1.5rem;
  border-radius: 1rem;
  color: #fdfdf9;
  background:
    radial-gradient(12rem 8rem at 95% 0%, rgb(255 255 255 / 22%), transparent 70%),
    linear-gradient(125deg, color-mix(in srgb, var(--preview-accent) 35%, #10261c), color-mix(in srgb, var(--preview-primary) 35%, #10261c));
}

.settings-preview-hero .eyebrow { color: rgb(253 253 249 / 78%); }
.settings-preview-hero h2 { margin: .35rem 0; font-size: 1.55rem; font-weight: 850; }
.settings-preview-hero p { margin: 0; color: rgb(253 253 249 / 84%); }

.settings-preview-product { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; }

.settings-preview-product-image {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .7rem;
  color: #627771;
  background: #e6ecdf;
  font-size: .65rem;
}

.settings-preview-product .btn {
  margin-left: auto;
  color: #fdfdf9;
  background: var(--preview-primary);
  font-weight: 700;
}

.product-image-list { display: flex; flex-wrap: wrap; gap: .65rem; }
.product-image-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--card);
}
.product-image-thumb {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .55rem;
  object-fit: cover;
}
.product-image-placeholder { color: var(--muted); background: var(--paper-2); }

/* ---------- Motion ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .stat-card-role { grid-column: 1 / -1; }
  .app-scope-tag { display: none; }
}

@media (max-width: 767.98px) {
  .app-topbar-inner { flex-wrap: wrap; gap: .6rem; }
  .app-nav { order: 3; width: 100%; min-width: 0; flex-wrap: wrap; margin: 0; border-radius: 1rem; overflow-x: visible; }
  .app-nav-link { padding-inline: .7rem; }
  .dash-grid { grid-template-columns: 1fr; }
  .app-main { padding-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { color: #111; background: #fdfdfd; }
  .screen-only, .navbar, footer, .app-topbar, .site-nav, .skip-link { display: none !important; }
  .print-only { display: block !important; }
  main.container, .app-main { width: 100%; max-width: none; padding: 0 !important; }
  .surface { border: 1px solid #bbb !important; box-shadow: none !important; break-inside: avoid; }
}

.print-only { display: none; }

.seller-qr-card {
  flex: 0 0 190px;
  max-width: 100%;
}

.seller-qr-image {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
  margin: 0 auto .75rem;
  padding: .5rem;
  border: 1px solid #e4e8e3;
  border-radius: .75rem;
  background: #fff;
}

.seller-qr-placeholder {
  display: grid;
  place-items: center;
  width: 190px;
  max-width: 100%;
  min-height: 190px;
  margin: 0 auto;
  border: 1px dashed #cbd2cc;
  border-radius: .75rem;
  color: #68736c;
  background: #f7f8f5;
  font-weight: 700;
}