/*!
 * Pagayo Design System - Admin (fresh)
 * Tenant Admin Dashboard
 * Theme: Light + Blue Accent
 * Build: @pagayo/design 2.37.0
 * (c) 2026 Pagayo
 *
 * CSS @layer order: reset → tokens → base → components → contexts → utilities → tenant
 *
 * Tenant overrides (inject in tenant layer):
 * :root {
 *   --tenant-accent: #your-brand-color;
 *   --tenant-font-main: 'Your Font', sans-serif;
 * }
 */

@layer reset, tokens, base, components, contexts, utilities, tenant;

@layer reset {
/**
 * CSS RESET
 * Modern browser reset gebaseerd op Josh Comeau's CSS Reset
 * + aangepaste Pagayo defaults
 * 
 * AI-NOTE: Dit bestand wordt ALTIJD als eerste geladen.
 * Niet aanpassen tenzij je een browser bug fixt.
 * 
 * @see https://www.joshwcomeau.com/css/custom-css-reset/
 */

/* ===== BOX SIZING ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ===== MARGIN RESET ===== */
* {
  margin: 0;
}

/* ===== RICHTING (rechts-naar-links) =====
   --dir-sign is 1 in links-naar-rechts en -1 in rechts-naar-links. Wie iets
   van de ene kant laat inschuiven (laden), vermenigvuldigt de verschuiving
   ermee: translateX(calc(-100% * var(--dir-sign, 1))). Zet de kant zelf met
   inset-inline-start/end, niet met left/right. */
:root {
  --dir-sign: 1;
}

[dir="rtl"] {
  --dir-sign: -1;
}

/* Een links-naar-rechts blok binnen een rechts-naar-links pagina begint opnieuw. */
[dir="ltr"] {
  --dir-sign: 1;
}

/* ===== HTML DEFAULTS ===== */
html {
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 100%;
  scroll-behavior: smooth;
}

/* ===== BODY DEFAULTS ===== */
body {
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-normal, 1.5);
  color: var(--text-primary);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ===== MEDIA DEFAULTS ===== */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* ===== FORM RESET ===== */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* ===== BUTTON RESET ===== */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ===== TEXT OVERFLOW ===== */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ===== HEADING RESET ===== */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* ===== LIST RESET ===== */
ul, ol {
  list-style: none;
  padding: 0;
}

/* ===== LINK RESET ===== */
a {
  color: inherit;
  text-decoration: none;
}

/* ===== TABLE RESET ===== */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ===== ROOT STACKING CONTEXT ===== */
#root, #__next, #app {
  isolation: isolate;
}

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

/* ===== FOCUS VISIBLE ===== */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent, var(--admin-v2-color-brand-gold));
  outline-offset: 2px;
}

/* ===== SELECTION ===== */
::selection {
  background: var(--accent, var(--admin-v2-color-brand-gold));
  color: var(--bg-deep, var(--admin-v2-color-brand-ink));
}

}

@layer tokens {
/**
 * Self-hosted webfont @font-face declarations (paths match @pagayo/config/fonts preset catalog).
 * Files are copied to dist/assets/fonts/ by scripts/compose-fonts.js.
 */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/geist-latin-wght-normal.19f9c92546aa300c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/inter-latin-wght-normal.3100e775e8616cd2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/dm-sans-latin-wght-normal.9fea608a947e6702.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/plus-jakarta-sans-latin-wght-normal.153fc85b70298bee.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/source-sans-3-latin-wght-normal.7a19a7027e125257.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/poppins-latin-wght-normal.7d93459d86585bfc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/playfair-display-latin-wght-normal.e0c764a8e9e1cce9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * BASE TOKENS
 * Gedeelde design tokens die NIET per theme variëren
 * 
 * AI-NOTE: Deze tokens zijn theme-onafhankelijk en worden
 * altijd geladen vóór de theme-specifieke tokens.
 * 
 * Bevat:
 * - Spacing scale
 * - Border radius
 * - Shadows
 * - Typography scale
 * - Transitions
 * - Z-index scale
 */

:root {
  /* Foreground on the dark contrast layer over photography, in every theme. */
  --media-overlay-foreground: #ffffff;
  /* ===== SPACING SCALE (4px base) ===== */
  --space-0: 0;
  --space-0-5: 0.125rem;  /* 2px - micro borders, fine-tuning */
  --space-1: 0.25rem;   /* 4px */
  --space-1-5: 0.375rem;  /* 6px - pill padding, tight gaps */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ===== BORDER RADIUS ===== */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px - subtle rounding */
  --radius-md: 0.5rem;    /* 8px - buttons, inputs */
  --radius-lg: 0.75rem;   /* 12px - cards */
  --radius-xl: 1rem;      /* 16px - modals */
  --radius-2xl: 1.5rem;   /* 24px - large containers */
  --radius-full: 9999px;  /* Pills, avatars */

  /* ===== SHADOWS (dark-mode optimized) ===== */
  /* Shadows zijn subtiel in dark mode, meer prominent in light mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 
               0 2px 4px -2px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 
               0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 
               0 8px 10px -6px rgba(0, 0, 0, 0.25);
  
  /* Glow shadows (voor accent elementen) */
  --shadow-glow-sm: 0 0 10px var(--accent-glow, rgba(245, 166, 35, 0.15));
  --shadow-glow-md: 0 0 20px var(--accent-glow, rgba(245, 166, 35, 0.2));
  --shadow-glow-lg: 0 0 30px var(--accent-glow, rgba(245, 166, 35, 0.25));

  /* ===== TYPOGRAPHY SCALE ===== */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  
  /* Font sizes met line-height */
  --text-micro: 0.5625rem;  /* 9px - ultra-compact labels */
  --text-2xs: 0.625rem;   /* 10px - badges, timestamps */
  --text-2xs-plus: 0.6875rem; /* 11px - compact UI, meta text */
  --text-xs: 0.75rem;     /* 12px */
  --text-xs-plus: 0.8125rem; /* 13px - compact table data */
  --text-sm: 0.8125rem;   /* 13px */
  --text-sm-plus: 0.9375rem; /* 15px - slightly larger body */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-2xl-plus: 1.75rem; /* 28px - stat display values */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 4.5rem;     /* 72px - hero/display numbers */
  
  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ===== TRANSITIONS ===== */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Shorthand transitions */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ===== Z-INDEX SCALE ===== */
  --z-below: -1;
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 250;
  --z-modal: 260;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-toast: 80;
  --z-max: 9999;

  /* ===== BREAKPOINTS (for reference) ===== */
  /* Use in media queries, not as CSS variables */
  /* --bp-sm: 640px;   */
  /* --bp-md: 768px;   */
  /* --bp-lg: 1024px;  */
  /* --bp-xl: 1280px;  */
  /* --bp-2xl: 1536px; */

  /* ===== CONTROL SIZING ===== */
  /* Universeel sizing systeem voor ALLE interactieve elementen.
     Buttons, inputs, selects, en andere controls gebruiken DEZELFDE
     hoogte zodat ze altijd netjes op één lijn staan. */
  
  /* Heights */
  --control-height-sm: 2rem;      /* 32px — compact/inline */
  --control-height-md: 2.5rem;    /* 40px — standaard */
  --control-height-lg: 3rem;      /* 48px — prominent/hero */
  
  /* Padding horizontal (per size) */
  --control-padding-sm: var(--space-2);    /* 8px */
  --control-padding-md: var(--space-3);    /* 12px */
  --control-padding-lg: var(--space-4);    /* 16px */
  
  /* Font sizes (per control size) */
  --control-font-sm: var(--text-xs);       /* 12px */
  --control-font-md: var(--text-sm);       /* 14px in admin via remap */
  --control-font-lg: var(--text-base);     /* 16px */

  /* Admin list page control fonts (reference pattern) */
  --admin-font-size-base: 14px;
  --admin-font-size-body: var(--admin-font-size-base);
  /* Field subtitles (labels) sit 2px above readout/body text. */
  --admin-font-size-label: calc(var(--admin-font-size-base) + 2px);
  --admin-font-size-heading: var(--admin-font-size-base);
  --admin-list-toolbar-control-font: var(--admin-font-size-base);
  --admin-list-detail-control-font: var(--admin-font-size-base);
  --admin-products-list-font: var(--admin-font-size-base);
  --admin-workspace-detail-font: var(--admin-font-size-base);
  --admin-workspace-section-title-height: 34px;
  --admin-workspace-section-content-gap: 12px;
  /** Afstand label → control (TailAdmin: dichter op het veld dan op het veld erboven). */
  --products-editor-label-gap: var(--admin-v2-label-gap, 6px);

  /* Admin sidebar + POS merkstrook-footer (zelfde hoogte/ritme) */
  --brand-strip-height: 52px;
  
  /* Icon sizes (per control size) */
  --control-icon-sm: 16px;
  --control-icon-md: 20px;
  --control-icon-lg: 24px;

  /* ===== FORM CHECKBOX (cross-surface SSoT) ===== */
  --form-control-checkbox-size: 20px;
  --form-control-checkbox-radius: var(--radius-sm);
  --form-control-checkbox-border-width: 1.5px;
  --form-control-checkbox-check-size: 12px;
  --form-control-checkbox-gap: var(--space-3);
  --form-control-checkbox-label-font-size: var(--text-sm);
  --form-control-checkbox-label-font-weight: var(--font-medium);
  --form-control-checkbox-label-line-height: var(--form-control-checkbox-size);
  --form-control-checkbox-disabled-check: #98a2b3;
  --form-control-checkbox-border: var(--border-strong, #e4e7ec);
  --form-control-checkbox-bg: var(--bg-surface, #ffffff);
  --form-control-checkbox-checked-bg: var(
    --color-primary,
    var(--tenant-accent, var(--accent, #465fff))
  );

  /* ===== PAGE TITLE SIZING ===== */
  /* Universele titels voor admin pagina's */
  --page-title-size: var(--text-2xl);         /* 24px — h1 op elke pagina */
  --page-title-weight: var(--font-semibold);  /* 600 */
  --section-title-size: var(--text-lg);       /* 18px — sectie headers */
  --section-title-weight: var(--font-semibold);
  --card-title-size: var(--text-base);        /* 16px — card/form section headers */
  --card-title-weight: var(--font-medium);    /* 500 */

  /* ===== CONTENT WIDTHS ===== */
  --content-xs: 20rem;    /* 320px */
  --content-sm: 24rem;    /* 384px */
  --content-md: 28rem;    /* 448px */
  --content-lg: 32rem;    /* 512px */
  --content-xl: 36rem;    /* 576px */
  --content-2xl: 42rem;   /* 672px */
  --content-3xl: 48rem;   /* 768px */
  --content-4xl: 56rem;   /* 896px */
  --content-5xl: 64rem;   /* 1024px */
  --content-6xl: 72rem;   /* 1152px */
  --content-7xl: 80rem;   /* 1280px */
  --content-full: 100%;

  /* ===== BRAND COLORS (third-party) ===== */
  /* Officiële merkenkleuren — theme-onafhankelijk */
  --brand-whatsapp: #25D366;
  --brand-facebook: #1877F2;
  --brand-tiktok: #000000;      /* of #EE1D52 voor de rode accent */
  --brand-instagram: #E4405F;
}

/* @pagayo-standard begin: root */
/**
 * PAGAYO UI FOUNDATION — shared visual contract (structure)
 *
 * Canonical name: `--pg-ui-*`. Admin keeps `--admin-v2-*` as aliases.
 *
 * Wave E+: this file is STRUCTURE only (names, geometry, typography scale, var() graph).
 * Theme PAINT lives in `tokens/profiles/admin-*.css` (admin-light / admin-dark / admin-revolutionary).
 *
 * Theme contract:
 *   consumer → semantic token (--pg-ui-* / --admin-v2-* alias) → theme profile
 *
 * Manifest: src/tokens/semantic-contract.manifest.json
 * Docs: THEME-SEMANTIC-CONTRACT.md
 */

:root {
  --pg-ui-color-app-bg: var(--pg-ui-color-bg);
  --pg-ui-color-surface-selected: var(--pg-ui-color-primary-soft);
  --pg-ui-color-surface-disabled: var(--pg-ui-color-surface-muted);
  --pg-ui-color-text-link: var(--pg-ui-color-primary);
  --pg-ui-color-accent: var(--pg-ui-color-primary);
  --pg-ui-color-success-text: var(--pg-ui-state-success-text);
  --pg-ui-color-danger-text: var(--pg-ui-state-danger-text);
  --pg-ui-border-active: var(--pg-ui-color-primary);
  /* ===== RADIUS ===== */
  --pg-ui-radius-xs: 4px;
  --pg-ui-radius-sm: 6px;
  --pg-ui-radius-md: 8px;
  --pg-ui-radius-lg: 12px;
  --pg-ui-radius-xl: 16px;
  --pg-ui-radius-pill: 999px;
  --pg-ui-radius-control: var(--pg-ui-radius-md);
  --pg-ui-radius-card: var(--pg-ui-radius-lg);
  --pg-ui-radius-panel: var(--pg-ui-radius-xl);
  --pg-ui-radius-sheet: var(--pg-ui-radius-xl);
  --pg-ui-radius-badge: var(--pg-ui-radius-pill);
  --pg-ui-radius-interactive: var(--pg-ui-radius-control);
  --pg-ui-radius-label: var(--pg-ui-radius-pill);
  /* ===== SPACING ===== */
  --pg-ui-space-0: 0;
  --pg-ui-space-1: 4px;
  --pg-ui-space-2: 8px;
  --pg-ui-space-3: 12px;
  --pg-ui-space-4: 16px;
  --pg-ui-space-5: 20px;
  --pg-ui-space-6: 24px;
  --pg-ui-space-8: 32px;
  --pg-ui-section-gap: var(--pg-ui-space-6);
  --pg-ui-panel-gap: var(--pg-ui-space-5);
  --pg-ui-card-padding-x: var(--pg-ui-space-5);
  --pg-ui-card-padding-y: var(--pg-ui-space-5);
  --pg-ui-toolbar-gap: var(--pg-ui-space-4);
  /* ===== TYPOGRAPHY ===== */
  --pg-ui-font-family: Geist, var(--font-sans);
  --pg-ui-font-size-page-title: 20px;
  --pg-ui-line-height-page-title: 28px;
  --pg-ui-font-size-section-title: 16px;
  --pg-ui-line-height-section-title: 24px;
  --pg-ui-font-size-heading-sm: 16px;
  --pg-ui-line-height-heading-sm: 24px;
  --pg-ui-font-size-card-title: 16px;
  --pg-ui-line-height-card-title: 24px;
  --pg-ui-font-size-list-item-title: 14px;
  --pg-ui-line-height-list-item-title: 20px;
  --pg-ui-font-size-body: 14px;
  /* Leestekst op een beheerpagina (smaak.md §1: body 16). Kassa en start houden font-size-body. */
  --pg-ui-font-size-reading: 16px;
  --pg-ui-line-height-body: 20px;
  --pg-ui-font-size-meta: 12px;
  --pg-ui-line-height-meta: 18px;
  --pg-ui-font-size-control: 14px;
  --pg-ui-line-height-control: 20px;
  --pg-ui-font-size-badge: 12px;
  --pg-ui-line-height-badge: 18px;
  --pg-ui-font-weight-normal: var(--font-normal);
  --pg-ui-font-weight-medium: var(--font-medium);
  --pg-ui-font-weight-semibold: var(--font-semibold);
  --pg-ui-font-weight-bold: var(--font-bold);
  --pg-ui-letter-spacing: 0;
  /* ===== CONTROLS (geometry) ===== */
  --pg-ui-control-height-sm: 32px;
  --pg-ui-control-height-md: 40px;
  --pg-ui-control-height-lg: 44px;
  --pg-ui-control-padding-x-sm: var(--pg-ui-space-3);
  --pg-ui-control-padding-x-md: var(--pg-ui-space-4);
  --pg-ui-control-padding-x-lg: var(--pg-ui-space-4);
  --pg-ui-icon-size-sm: 16px;
  --pg-ui-icon-size-md: 20px;
  --pg-ui-icon-size-lg: 20px;
  --pg-ui-icon-size-xl: 24px;
  --pg-ui-icon-stroke-strong: 2;
  --pg-ui-icon-button-size-sm: 32px;
  --pg-ui-icon-button-size-md: 40px;
  --pg-ui-icon-button-size-lg: 44px;
  /* ===== BUTTONS ===== */
  --pg-ui-button-primary-bg: var(--pg-ui-color-primary);
  --pg-ui-button-primary-bg-hover: var(--pg-ui-color-primary-hover);
  --pg-ui-button-primary-text: var(--pg-ui-color-primary-contrast);
  --pg-ui-button-height-md: var(--pg-ui-control-height-md);
  --pg-ui-button-height-lg: var(--pg-ui-control-height-lg);
  --pg-ui-button-gap: var(--pg-ui-space-2);
  --pg-ui-button-secondary-bg: var(--pg-ui-color-surface);
  --pg-ui-button-secondary-bg-hover: var(--pg-ui-color-surface-muted);
  --pg-ui-button-secondary-border: var(--pg-ui-border-strong);
  /* ===== LABELS / BADGES / COUNTERS ===== */
  --pg-ui-badge-height: 24px;
  --pg-ui-badge-padding-x: 10px;
  --pg-ui-badge-padding-y: 2px;
  --pg-ui-counter-size: 24px;
  --pg-ui-counter-text: var(--pg-ui-color-primary);
  /* ===== FORMS / INPUT CONTROLS ===== */
  --pg-ui-input-height: var(--pg-ui-control-height-lg);
  --pg-ui-input-padding-x: var(--pg-ui-space-4);
  --pg-ui-input-padding-x-with-icon: 36px;
  --pg-ui-input-radius: var(--pg-ui-radius-control);
  --pg-ui-input-bg: var(--pg-ui-color-surface);
  --pg-ui-input-text: var(--pg-ui-color-text);
  --pg-ui-input-placeholder: var(--pg-ui-color-text-soft);
  --pg-ui-input-border: var(--pg-ui-border-strong);
  --pg-ui-input-border-focus: var(--pg-ui-color-primary);
  --pg-ui-input-disabled-bg: var(--pg-ui-color-surface-muted);
  --pg-ui-input-disabled-text: var(--pg-ui-color-text-disabled);
  --pg-ui-input-bg-disabled: var(--pg-ui-input-disabled-bg);
  --pg-ui-helper-text-color: var(--pg-ui-color-text-muted);
  --pg-ui-label-gap: 6px;
  --pg-ui-field-gap: var(--pg-ui-space-6);
  --pg-ui-state-loading-text: var(--pg-ui-color-text-muted);
  --pg-ui-state-unavailable-text: var(--pg-ui-color-text-muted);
  /* Compatibility aliases (do not delete — consumers still reference error/info) */
  --pg-ui-state-error-bg: var(--pg-ui-state-danger-bg);
  --pg-ui-state-error-text: var(--pg-ui-state-danger-text);
  --pg-ui-state-info-bg: var(--pg-ui-state-information-bg);
  --pg-ui-state-info-text: var(--pg-ui-state-information-text);
  --pg-ui-shadow-floating: var(--pg-ui-shadow-lg);
  /* Rustende elementen hebben geen schaduw (smaak.md §1). */
  --pg-ui-shadow-none: none;
  /* ===== NAVIGATION ===== */
  --pg-ui-nav-text: var(--pg-ui-color-text-muted);
  --pg-ui-nav-text-active: var(--pg-ui-color-text);
  --pg-ui-nav-surface-hover: var(--pg-ui-color-surface-hover);
  --pg-ui-nav-surface-active: var(--pg-ui-color-primary-soft);
  /* ===== DATA / CHART (semantic series — not blue-1 / green-4) ===== */
  --pg-ui-chart-compare-current: var(--pg-ui-color-primary);
  --pg-ui-chart-series-1: var(--pg-ui-color-primary);
  --pg-ui-chart-series-2: var(--pg-ui-state-information-text);
  --pg-ui-chart-series-3: var(--pg-ui-state-warning-text);
  --pg-ui-chart-series-4: color-mix(in srgb, var(--pg-ui-state-information-text) 80%, var(--pg-ui-color-primary));
  --pg-ui-chart-series-5: var(--pg-ui-state-success-text);
  --pg-ui-chart-series-6: var(--pg-ui-color-text-muted);
  /* ===== ICONS (theme owns encoded stroke; components reference the token) ===== */
  --pg-ui-icon-color: var(--pg-ui-color-text-soft);
  /* ===== MEDIA FRAME (paint overrides in profiles) ===== */
  --pg-ui-media-frame-bg: var(--pg-ui-color-surface-muted);
  --pg-ui-media-frame-border: var(--pg-ui-border-default);
}

/**
 * PAGAYO ADMIN THEME PROFILE — admin-light (Wave E)
 *
 * Visual values for the canonical Admin Light appearance.
 * Structure / names / var() graph live in `tokens/pg-ui.css`.
 * Do not redesign — values calibrate 1:1 to the pre-Wave-E Light look.
 *
 * Activation: :root (default) and [data-admin-theme-profile="admin-light"].
 */

:root,
[data-admin-theme-profile="admin-light"] {
  /* ===== SURFACE ===== */
  --pg-ui-color-bg: #f9fafb;
  --pg-ui-color-surface: #ffffff;
  --pg-ui-color-surface-muted: #f3f4f6;
  --pg-ui-color-surface-raised: #ffffff;
  --pg-ui-color-surface-overlay: rgb(255 255 255 / 90%);
  --pg-ui-color-surface-hover: #f8fafc;
  /* ===== TEXT ===== */
  --pg-ui-color-text: #101828;
  --pg-ui-color-text-muted: #667085;
  --pg-ui-color-text-soft: #98a2b3;
  --pg-ui-color-text-inverse: #ffffff;
  --pg-ui-color-text-disabled: #98a2b3;
  /* ===== BRAND / INTERACTION (product brand — not semantic state) ===== */
  --pg-ui-color-primary: #465fff;
  --pg-ui-color-primary-hover: #3641f5;
  --pg-ui-color-primary-active: #2a31e0;
  --pg-ui-color-primary-soft: #eef4ff;
  --pg-ui-color-primary-contrast: #ffffff;
  --pg-ui-color-success-border: #abefc6;
  /* ===== BORDER / FOCUS ===== */
  --pg-ui-border-subtle: #eef2f6;
  --pg-ui-border-default: #e4e7ec;
  --pg-ui-border-strong: #d0d5dd;
  --pg-ui-focus-ring: 0 0 0 3px rgba(70, 95, 255, 0.16);
  --pg-ui-button-secondary-text: #344054;
  --pg-ui-counter-bg: #f1f5ff;
  --pg-ui-label-bg-neutral: #f3f4f6;
  --pg-ui-label-text-neutral: #475467;
  --pg-ui-label-bg-success: #ecfdf3;
  --pg-ui-label-text-success: #027a48;
  --pg-ui-label-bg-warning: #fffaeb;
  --pg-ui-label-text-warning: #b54708;
  --pg-ui-label-bg-info: #eff8ff;
  --pg-ui-label-text-info: #175cd3;
  --pg-ui-label-bg-danger: #fef3f2;
  --pg-ui-label-text-danger: #b42318;
  --pg-ui-label-color: #344054;
  /* ===== STATE (semantic — independent of product brand) ===== */
  --pg-ui-state-loading-bg: #f8fafc;
  --pg-ui-state-saving-bg: #eff8ff;
  --pg-ui-state-dirty-bg: #fffaeb;
  --pg-ui-state-saved-bg: #ecfdf3;
  --pg-ui-state-setup-bg: #f5f8ff;
  --pg-ui-state-unavailable-bg: #f3f4f6;
  --pg-ui-state-warning-bg: #fffaeb;
  --pg-ui-state-success-bg: #ecfdf3;
  --pg-ui-state-danger-bg: #fff6f5;
  --pg-ui-state-information-bg: #f0f9ff;
  --pg-ui-state-saving-text: #175cd3;
  --pg-ui-state-dirty-text: #b54708;
  --pg-ui-state-saved-text: #027a48;
  --pg-ui-state-setup-text: #3538cd;
  --pg-ui-state-warning-text: #b54708;
  --pg-ui-state-success-text: #027a48;
  --pg-ui-state-danger-text: #b42318;
  --pg-ui-state-information-text: #0ba5ec;
  /* ===== ELEVATION ===== */
  --pg-ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --pg-ui-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --pg-ui-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --pg-ui-shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.12);
  --pg-ui-backdrop: rgba(16, 24, 40, 0.18);
  /*
   * Admin nav category accent roles (Wave C).
   * Light values calibrate 1:1 to the previous storefront hex accents.
   * Theme profiles own these values — consumers pass a role, never a hex.
   */
  --pg-ui-nav-role-daily: #f5a623;
  --pg-ui-nav-role-order: #ef4444;
  --pg-ui-nav-role-return: #f97316;
  --pg-ui-nav-role-commerce: #60a5fa;
  --pg-ui-nav-role-subscription: #f59e0b;
  --pg-ui-nav-role-content: #a78bfa;
  --pg-ui-nav-role-insight: #94a3b8;
  --pg-ui-chart-compare-previous: #e4e7ec;
  --pg-ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-select-chevron-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-icon-check-on-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Chrome elevation (Admin shell + entity-sheet shared hangpoints) */
  --pg-ui-chrome-header-shadow: 0 4px 12px rgb(15 23 42 / 0.08);
  --pg-ui-chrome-footer-shadow: 0 -4px 12px rgb(15 23 42 / 0.08);
  --pg-ui-avatar-bg: linear-gradient(135deg, var(--pg-ui-color-primary-soft), var(--pg-ui-color-surface-hover));

  /* ===== MEDIA FRAME (neutral image/logo cradle) ===== */
  --pg-ui-media-frame-bg: #f3f4f6;
  --pg-ui-media-frame-border: #e4e7ec;

  /* ===== ADMIN CHROME (Light appearance — migrated from admin _base) ===== */
  --admin-border-subtle: rgba(15, 23, 42, 0.06);
  --admin-border-light: rgba(15, 23, 42, 0.08);
  --admin-border-medium: rgba(15, 23, 42, 0.1);
  --admin-border-strong: rgba(15, 23, 42, 0.14);
  --admin-border-hover: rgba(15, 23, 42, 0.12);
  --admin-border-accent: rgba(15, 23, 42, 0.15);
  --admin-bg-wash: rgba(15, 23, 42, 0.02);
  --admin-v2-color-brand-gold: #f5a623;
  --admin-v2-color-brand-gold-strong: #d98e00;
  --admin-v2-color-brand-gold-deep: #db930f;
  --admin-v2-color-brand-ink: #0a0a0f;
  --admin-v2-shell-footer-partner-bg: #112857;

  /* Closure — bridge legacy skin paint tokens → semantic Admin surfaces */
  --bg-deep: var(--pg-ui-color-bg);
  --bg-surface: var(--pg-ui-color-surface);
  --bg-elevated: var(--pg-ui-color-surface-raised);
  --bg-hover: var(--pg-ui-color-surface-hover);
  --bg-active: var(--pg-ui-color-surface-hover);
  --bg-muted: var(--pg-ui-color-surface-muted);
  --bg-soft: var(--pg-ui-color-surface-muted);
}

/**
 * PAGAYO ADMIN THEME PROFILE — admin-dark (Wave F)
 *
 * Professional night-mode paint for Admin. Same token names as admin-light;
 * structure / var() graph stay in `tokens/pg-ui.css`.
 *
 * Activation: [data-admin-theme-profile="admin-dark"] only (never bare :root).
 * No neon / glow — practical working night mode.
 */

[data-admin-theme-profile="admin-dark"] {
  /* ===== SURFACE ===== */
  --pg-ui-color-bg: #0b0d12;
  --pg-ui-color-surface: #141820;
  --pg-ui-color-surface-muted: #10141b;
  --pg-ui-color-surface-raised: #1b2130;
  --pg-ui-color-surface-overlay: rgb(20 24 32 / 92%);
  --pg-ui-color-surface-hover: #222938;
  /* ===== TEXT ===== */
  --pg-ui-color-text: #f0f2f5;
  --pg-ui-color-text-muted: #9aa3b5;
  --pg-ui-color-text-soft: #7b8496;
  --pg-ui-color-text-inverse: #ffffff;
  --pg-ui-color-text-disabled: #6b7385;
  /* ===== BRAND / INTERACTION (Pagayo blue — contrast-adjusted) ===== */
  --pg-ui-color-primary: #465fff;
  --pg-ui-color-primary-hover: #5568f0;
  --pg-ui-color-primary-active: #3641f5;
  --pg-ui-color-primary-soft: #1a2240;
  --pg-ui-color-primary-contrast: #ffffff;
  --pg-ui-color-success-border: #2f6f4e;
  /* ===== BORDER / FOCUS ===== */
  --pg-ui-border-subtle: rgba(240, 242, 245, 0.06);
  --pg-ui-border-default: rgba(240, 242, 245, 0.10);
  --pg-ui-border-strong: rgba(240, 242, 245, 0.16);
  --pg-ui-focus-ring: 0 0 0 3px rgba(70, 95, 255, 0.40);
  --pg-ui-button-secondary-text: #d0d5dd;
  --pg-ui-counter-bg: #1a2240;
  --pg-ui-label-bg-neutral: #1f2533;
  --pg-ui-label-text-neutral: #c5cbd6;
  --pg-ui-label-bg-success: #143226;
  --pg-ui-label-text-success: #6ee7a8;
  --pg-ui-label-bg-warning: #33260f;
  --pg-ui-label-text-warning: #f5c15a;
  --pg-ui-label-bg-info: #13253a;
  --pg-ui-label-text-info: #7db7ff;
  --pg-ui-label-bg-danger: #3a1614;
  --pg-ui-label-text-danger: #f5a09a;
  --pg-ui-label-color: #d0d5dd;
  /* ===== STATE (semantic — independent of product brand) ===== */
  --pg-ui-state-loading-bg: #1a1f2a;
  --pg-ui-state-saving-bg: #13253a;
  --pg-ui-state-dirty-bg: #33260f;
  --pg-ui-state-saved-bg: #143226;
  --pg-ui-state-setup-bg: #1a2240;
  --pg-ui-state-unavailable-bg: #1a1f2a;
  --pg-ui-state-warning-bg: #33260f;
  --pg-ui-state-success-bg: #143226;
  --pg-ui-state-danger-bg: #3a1614;
  --pg-ui-state-information-bg: #13253a;
  --pg-ui-state-saving-text: #7db7ff;
  --pg-ui-state-dirty-text: #f5c15a;
  --pg-ui-state-saved-text: #6ee7a8;
  --pg-ui-state-setup-text: #a5b4fc;
  --pg-ui-state-warning-text: #f5c15a;
  --pg-ui-state-success-text: #6ee7a8;
  --pg-ui-state-danger-text: #f5a09a;
  --pg-ui-state-information-text: #7dd3fc;
  /* ===== ELEVATION ===== */
  --pg-ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --pg-ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --pg-ui-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --pg-ui-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55);
  --pg-ui-backdrop: rgba(0, 0, 0, 0.55);
  /* Nav role accents — slightly lifted for dark surfaces */
  --pg-ui-nav-role-daily: #f5b84a;
  --pg-ui-nav-role-order: #f87171;
  --pg-ui-nav-role-return: #fb923c;
  --pg-ui-nav-role-commerce: #7db7ff;
  --pg-ui-nav-role-subscription: #fbbf24;
  --pg-ui-nav-role-content: #c4b5fd;
  --pg-ui-nav-role-insight: #94a3b8;
  --pg-ui-chart-compare-previous: #3a4150;
  --pg-ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-select-chevron-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8496' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-icon-check-on-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pg-ui-chrome-header-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
  --pg-ui-chrome-footer-shadow: 0 -4px 12px rgb(0 0 0 / 0.35);
  --pg-ui-avatar-bg: linear-gradient(135deg, var(--pg-ui-color-primary-soft), var(--pg-ui-color-surface-hover));

  /* ===== MEDIA FRAME (neutral image/logo cradle) ===== */
  --pg-ui-media-frame-bg: #1b2130;
  --pg-ui-media-frame-border: rgba(240, 242, 245, 0.10);

  /* ===== ADMIN CHROME ===== */
  --admin-border-subtle: rgba(240, 242, 245, 0.06);
  --admin-border-light: rgba(240, 242, 245, 0.08);
  --admin-border-medium: rgba(240, 242, 245, 0.10);
  --admin-border-strong: rgba(240, 242, 245, 0.14);
  --admin-border-hover: rgba(240, 242, 245, 0.12);
  --admin-border-accent: rgba(240, 242, 245, 0.16);
  --admin-bg-wash: rgba(240, 242, 245, 0.03);
  --admin-v2-color-brand-gold: #f5a623;
  --admin-v2-color-brand-gold-strong: #d98e00;
  --admin-v2-color-brand-gold-deep: #db930f;
  --admin-v2-color-brand-ink: #f0f2f5;
  --admin-v2-shell-footer-partner-bg: #0a1020;

  /* Closure — bridge legacy skin paint tokens → semantic Admin surfaces */
  --bg-deep: var(--pg-ui-color-bg);
  --bg-surface: var(--pg-ui-color-surface);
  --bg-elevated: var(--pg-ui-color-surface-raised);
  --bg-hover: var(--pg-ui-color-surface-hover);
  --bg-active: var(--pg-ui-color-surface-hover);
  --bg-muted: var(--pg-ui-color-surface-muted);
  --bg-soft: var(--pg-ui-color-surface-muted);
}

/**
 * PAGAYO ADMIN THEME PROFILE — admin-revolutionary (Wave F)
 *
 * Premium black/gold Admin paint. Colour inspiration from historical
 * Revolutionary — NOT a restore of legacy component CSS.
 * Same token names / same Admin components as Light and Dark.
 *
 * Gold is product primary only — never replaces danger/success/warning.
 *
 * Activation: [data-admin-theme-profile="admin-revolutionary"] only.
 */

[data-admin-theme-profile="admin-revolutionary"] {
  /* ===== SURFACE ===== */
  --pg-ui-color-bg: #0a0a0f;
  --pg-ui-color-surface: #12121a;
  --pg-ui-color-surface-muted: #0e0e14;
  --pg-ui-color-surface-raised: #1a1a24;
  --pg-ui-color-surface-overlay: rgb(18 18 26 / 92%);
  --pg-ui-color-surface-hover: #1e1e2a;
  /* ===== TEXT ===== */
  --pg-ui-color-text: #f0f0f5;
  --pg-ui-color-text-muted: #9b9baf;
  --pg-ui-color-text-soft: #7a7a8c;
  /* On gold primary, inverse must be dark ink for contrast */
  --pg-ui-color-text-inverse: #0a0a0f;
  --pg-ui-color-text-disabled: #6a6a7a;
  /* ===== BRAND / INTERACTION (Pagayo gold primary) ===== */
  --pg-ui-color-primary: #f5a623;
  --pg-ui-color-primary-hover: #ffb84a;
  --pg-ui-color-primary-active: #d98e00;
  --pg-ui-color-primary-soft: #2a2110;
  --pg-ui-color-primary-contrast: #0a0a0f;
  --pg-ui-color-success-border: #2f6f4e;
  /* ===== BORDER / FOCUS ===== */
  --pg-ui-border-subtle: rgba(240, 240, 245, 0.06);
  --pg-ui-border-default: rgba(240, 240, 245, 0.10);
  --pg-ui-border-strong: rgba(240, 240, 245, 0.16);
  --pg-ui-focus-ring: 0 0 0 3px rgba(245, 166, 35, 0.35);
  --pg-ui-button-secondary-text: #d4d4de;
  --pg-ui-counter-bg: #2a2110;
  --pg-ui-label-bg-neutral: #1e1e2a;
  --pg-ui-label-text-neutral: #c8c8d4;
  --pg-ui-label-bg-success: #143226;
  --pg-ui-label-text-success: #6ee7a8;
  --pg-ui-label-bg-warning: #33260f;
  --pg-ui-label-text-warning: #f5c15a;
  --pg-ui-label-bg-info: #13253a;
  --pg-ui-label-text-info: #7db7ff;
  --pg-ui-label-bg-danger: #3a1614;
  --pg-ui-label-text-danger: #f5a09a;
  --pg-ui-label-color: #d4d4de;
  /* ===== STATE (semantic — gold must NOT replace these) ===== */
  --pg-ui-state-loading-bg: #1a1a24;
  --pg-ui-state-saving-bg: #13253a;
  --pg-ui-state-dirty-bg: #33260f;
  --pg-ui-state-saved-bg: #143226;
  --pg-ui-state-setup-bg: #2a2110;
  --pg-ui-state-unavailable-bg: #1a1a24;
  --pg-ui-state-warning-bg: #33260f;
  --pg-ui-state-success-bg: #143226;
  --pg-ui-state-danger-bg: #3a1614;
  --pg-ui-state-information-bg: #13253a;
  --pg-ui-state-saving-text: #7db7ff;
  --pg-ui-state-dirty-text: #f5c15a;
  --pg-ui-state-saved-text: #6ee7a8;
  --pg-ui-state-setup-text: #f5c15a;
  --pg-ui-state-warning-text: #f5c15a;
  --pg-ui-state-success-text: #6ee7a8;
  --pg-ui-state-danger-text: #f5a09a;
  --pg-ui-state-information-text: #7dd3fc;
  /* ===== ELEVATION ===== */
  --pg-ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --pg-ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.35);
  --pg-ui-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
  --pg-ui-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.60);
  --pg-ui-backdrop: rgba(0, 0, 0, 0.60);
  /* Nav roles — gold daily stays brand-adjacent; others stay semantic hues */
  --pg-ui-nav-role-daily: #f5a623;
  --pg-ui-nav-role-order: #f87171;
  --pg-ui-nav-role-return: #fb923c;
  --pg-ui-nav-role-commerce: #7db7ff;
  --pg-ui-nav-role-subscription: #fbbf24;
  --pg-ui-nav-role-content: #c4b5fd;
  --pg-ui-nav-role-insight: #94a3b8;
  --pg-ui-chart-compare-previous: #2e2e3a;
  --pg-ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239b9baf' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-select-chevron-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7a8c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-icon-check-on-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%230a0a0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pg-ui-chrome-header-shadow: 0 4px 12px rgb(0 0 0 / 0.40);
  --pg-ui-chrome-footer-shadow: 0 -4px 12px rgb(0 0 0 / 0.40);
  --pg-ui-avatar-bg: linear-gradient(135deg, var(--pg-ui-color-primary-soft), var(--pg-ui-color-surface-hover));

  /* ===== MEDIA FRAME ===== */
  --pg-ui-media-frame-bg: #1a1a24;
  --pg-ui-media-frame-border: rgba(240, 240, 245, 0.10);

  /* ===== ADMIN CHROME ===== */
  --admin-border-subtle: rgba(240, 240, 245, 0.06);
  --admin-border-light: rgba(240, 240, 245, 0.08);
  --admin-border-medium: rgba(240, 240, 245, 0.10);
  --admin-border-strong: rgba(240, 240, 245, 0.14);
  --admin-border-hover: rgba(240, 240, 245, 0.12);
  --admin-border-accent: rgba(245, 166, 35, 0.35);
  --admin-bg-wash: rgba(245, 166, 35, 0.04);
  --admin-v2-color-brand-gold: #f5a623;
  --admin-v2-color-brand-gold-strong: #d98e00;
  --admin-v2-color-brand-gold-deep: #db930f;
  --admin-v2-color-brand-ink: #f0f0f5;
  --admin-v2-shell-footer-partner-bg: #0a0a0f;

  /* Closure — bridge legacy skin paint tokens → semantic Admin surfaces */
  --bg-deep: var(--pg-ui-color-bg);
  --bg-surface: var(--pg-ui-color-surface);
  --bg-elevated: var(--pg-ui-color-surface-raised);
  --bg-hover: var(--pg-ui-color-surface-hover);
  --bg-active: var(--pg-ui-color-surface-hover);
  --bg-muted: var(--pg-ui-color-surface-muted);
  --bg-soft: var(--pg-ui-color-surface-muted);
}

/* @pagayo-standard end */
/**
 * THEME: fresh
 * Light-first design met blue accent - modern en helder Pagayo theme
 * 
 * Mode: light
 * Build: @pagayo/design 2.37.0
 * 
 * AI-NOTE: Dit bestand is GEGENEREERD. Wijzig niet handmatig.
 * Wijzig src/themes/fresh.json en run `npm run build`.
 */

:root {
  /* ===== BACKGROUND LAYERS ===== */
  --bg-deep: #ffffff;
  --bg-surface: #f6f8fa;
  --bg-elevated: #edf1f5;
  --bg-hover: #e8ecf2;
  --bg-active: #e8eaf1;
  --bg-muted: #e8eaf1;
  --background: #ffffff;

  /* ===== ACCENT ===== */
  --accent: #2563eb;
  --accent-light: #4f79ff;
  --accent-dim: #004ed1;
  --accent-glow: rgb(37 99 235 / 0.12);

  /* ===== TEXT ===== */
  --text-primary: #0f172a;
  --text-secondary: rgb(15 23 42 / 0.75);
  --text-muted: rgb(15 23 42 / 0.5);
  --text-disabled: rgb(15 23 42 / 0.35);

  /* ===== SEMANTIC - SUCCESS ===== */
  --success: #22c55e;
  --success-light: #3bd46c;
  --success-dim: rgb(34 197 94 / 0.1);

  /* ===== SEMANTIC - WARNING ===== */
  --warning: #f59e0b;
  --warning-light: #ffac24;
  --warning-dim: rgb(245 158 11 / 0.1);

  /* ===== SEMANTIC - ERROR ===== */
  --error: #ef4444;
  --error-light: #ff5451;
  --error-dim: rgb(239 68 68 / 0.1);

  /* ===== SEMANTIC - INFO ===== */
  --info: #3b82f6;
  --info-light: #5190ff;
  --info-dim: rgb(59 130 246 / 0.1);

  /* ===== SEMANTIC - MEMBER ===== */
  --member: #6366f1;
  --member-light: #7473ff;
  --member-dark: #2f44c8;
  --member-dim: rgb(99 102 241 / 0.1);

  /* ===== BORDERS ===== */
  --border: rgb(15 23 42 / 0.15);
  --border-light: rgb(15 23 42 / 0.22499999999999998);
  --border-strong: rgb(15 23 42 / 0.375);

  /* ===== SEMANTIC ALIASES ===== */
  --surface-primary: #ffffff;
  --surface-secondary: #f6f8fa;
  --surface-tertiary: #edf1f5;
  --surface-hover: #e8ecf2;
  --surface-inset: #f6f8fa;
  --border-subtle: rgb(15 23 42 / 0.15);
  --text-tertiary: rgb(15 23 42 / 0.5);
  --accent-subtle: rgb(37 99 235 / 0.06);

  /* ===== STOREFRONT SEMANTIC COLORS ===== */
  --storefront-canvas: #ffffff;
  --storefront-surface: #f6f8fa;
  --storefront-surface-elevated: #ffffff;
  --storefront-surface-muted: #e8eaf1;
  --storefront-surface-subtle: #e8eaf1;
  --storefront-surface-hover: #e8ecf2;
  --storefront-surface-active: #e8eaf1;
  --storefront-text-primary: #0f172a;
  --storefront-text-secondary: rgb(15 23 42 / 0.75);
  --storefront-text-muted: rgb(15 23 42 / 0.5);
  --storefront-text-disabled: rgb(15 23 42 / 0.35);
  --storefront-text-inverse: #ffffff;
  --storefront-accent: #2563eb;
  --storefront-accent-hover: #004ed1;
  --storefront-accent-active: #004ed1;
  --storefront-accent-subtle: rgb(37 99 235 / 0.06);
  --storefront-accent-contrast: #ffffff;
  --storefront-border: rgb(15 23 42 / 0.15);
  --storefront-border-strong: rgb(15 23 42 / 0.375);
  --storefront-focus-ring: #2563eb;
  --storefront-shadow-color: #0f172a;
  --storefront-overlay: #0f172a;
  --storefront-shadow-sm: 0 1px 2px color-mix(in srgb, #0f172a 18%, transparent);
  --storefront-shadow-md: 0 4px 12px color-mix(in srgb, #0f172a 22%, transparent);
  --storefront-success: #22c55e;
  --storefront-success-subtle: rgb(34 197 94 / 0.1);
  --storefront-warning: #f59e0b;
  --storefront-warning-subtle: rgb(245 158 11 / 0.1);
  --storefront-error: #ef4444;
  --storefront-error-subtle: rgb(239 68 68 / 0.1);
  --storefront-info: #3b82f6;
  --storefront-info-subtle: rgb(59 130 246 / 0.1);

}

/**
 * Admin Appearance UX — cascade-winning legacy paint re-bridge.
 *
 * Skin `tokens/generated/{theme}.css` loads after profiles and resets
 * `:root { --bg-deep / --text-primary / … }`. This file must be the LAST
 * token input so `html[data-admin-theme-profile=…]` (higher specificity
 * than `:root`) restores legacy consumers (Today cards, dashboard, reports)
 * to Admin semantic paint — surfaces AND text/borders.
 */

html[data-admin-theme-profile="admin-light"],
html[data-admin-theme-profile="admin-dark"],
html[data-admin-theme-profile="admin-revolutionary"] {
  --bg-deep: var(--pg-ui-color-bg);
  --bg-surface: var(--pg-ui-color-surface);
  --bg-elevated: var(--pg-ui-color-surface-raised);
  --bg-hover: var(--pg-ui-color-surface-hover);
  --bg-active: var(--pg-ui-color-surface-hover);
  --bg-muted: var(--pg-ui-color-surface-muted);
  --bg-soft: var(--pg-ui-color-surface-muted);
  --background: var(--pg-ui-color-bg);

  --text-primary: var(--pg-ui-color-text);
  --text-secondary: var(--pg-ui-color-text-muted);
  --text-muted: var(--pg-ui-color-text-soft);
  --text-disabled: var(--pg-ui-color-text-disabled);
  --text-tertiary: var(--pg-ui-color-text-soft);

  --border: var(--pg-ui-border-default);
  --border-light: var(--pg-ui-border-subtle);
  --border-strong: var(--pg-ui-border-strong);
  --border-subtle: var(--pg-ui-border-subtle);

  --surface-primary: var(--pg-ui-color-surface);
  --surface-secondary: var(--pg-ui-color-surface-muted);
  --surface-tertiary: var(--pg-ui-color-surface-raised);
  --surface-hover: var(--pg-ui-color-surface-hover);
  --surface-inset: var(--pg-ui-color-surface-muted);

  --accent: var(--pg-ui-color-primary);
  --accent-light: var(--pg-ui-color-primary-hover);
  --accent-dim: var(--pg-ui-color-primary-active);
  --accent-subtle: var(--pg-ui-color-primary-soft);
}


}

@layer components {
/* ===== Component: buttons ===== */
/* buttons/_base.css */
/**
 * COMPONENT: Buttons - Base
 * Gedeelde button styling voor alle varianten
 * 
 * AI-NOTE: Buttons zijn het meest gebruikte interactieve element.
 * Alle variants erven van deze base. Gebruik semantic tokens.
 * 
 * VARIANTS: primary, secondary, ghost, destructive, success, purchase
 * SIZES: sm, md (default), lg
 * STATES: default, hover, active, disabled, loading
 *
 * AI-NOTE: Storefront primaire koopacties → `btn--purchase` (zie purchase.css).
 * Success blijft voor statusacties, niet voor koop-CTA's.
 */

/* ===== BASE BUTTON ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  
  /* Sizing */
  height: 40px;
  padding: 0 var(--space-4);
  min-width: 80px;
  
  /* Typography */
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;
  
  /* Shape */
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  
  /* Interaction */
  cursor: pointer;
  user-select: none;
  
  /* Performance */
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* ===== SIZE VARIANTS ===== */
.btn--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  min-width: 64px;
}

.btn--lg {
  height: 48px;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
  min-width: 100px;
}

/* ===== ICON BUTTONS ===== */
.btn--icon {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.btn--icon.btn--sm {
  width: 32px;
  min-width: 32px;
}

.btn--icon.btn--lg {
  width: 48px;
  min-width: 48px;
}

/* ===== FULL WIDTH ===== */
.btn--full {
  width: 100%;
}

/* ===== DISABLED STATE ===== */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== LOADING STATE ===== */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ===== FOCUS VISIBLE ===== */
.btn:focus-visible {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

/* ===== BUTTON GROUP ===== */
.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.btn-group .btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.btn-group .btn:not(:last-child) {
  border-right-width: 0;
}

/* ===== BUTTON WITH ICON ===== */
.btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--sm .btn__icon {
  width: 14px;
  height: 14px;
}

.btn--lg .btn__icon {
  width: 20px;
  height: 20px;
}

/* buttons/destructive.css */
/**
 * COMPONENT: Button - Destructive
 * Button voor destructieve acties (delete, remove, etc.)
 * 
 * AI-NOTE: Destructive buttons zijn voor acties die niet ongedaan kunnen worden.
 * Gebruik rood/error kleur. Vaak met confirm dialog.
 */

/* .btn--danger: alias voor storefront Button variant="danger" (zelfde als destructive). */
.btn--danger,
.btn--destructive {
  background: var(--error);
  color: var(--admin-v2-color-text-inverse);
  border-color: var(--error);
}

.btn--danger:hover:not(:disabled),
.btn--destructive:hover:not(:disabled) {
  background: var(--error-light);
  border-color: var(--error-light);
  box-shadow: 0 0 10px color-mix(in srgb, var(--admin-v2-state-danger-text) 25%, transparent);
}

.btn--danger:active:not(:disabled),
.btn--destructive:active:not(:disabled) {
  background: var(--admin-v2-state-danger-text);
  border-color: var(--admin-v2-state-danger-text);
  transform: scale(0.98);
}

/* Outline variant */
.btn--destructive-outline {
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}

.btn--destructive-outline:hover:not(:disabled) {
  background: var(--error-dim);
}

.btn--destructive-outline:active:not(:disabled) {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 20%, transparent);
  transform: scale(0.98);
}

/* buttons/ghost.css */
/**
 * COMPONENT: Button - Ghost
 * Subtiele button zonder border of achtergrond
 * 
 * AI-NOTE: Ghost buttons zijn voor tertiaire acties of icon-only buttons.
 * Minimale visuele impact, maar wel interactief.
 */

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn--ghost:active:not(:disabled) {
  background: var(--bg-active);
  transform: scale(0.98);
}

/* buttons/primary.css */
/**
 * COMPONENT: Button - Primary
 * De hoofd call-to-action button
 * 
 * AI-NOTE: Primary buttons zijn voor de belangrijkste actie op een pagina.
 * Gebruik spaarzaam - max 1-2 per view. Heeft glow effect op hover.
 */

.btn--primary {
  background: var(--tenant-accent, var(--accent));
  color: var(--bg-deep);
  border-color: var(--tenant-accent, var(--accent));
}

.btn--primary:hover:not(:disabled) {
  background: var(--tenant-accent-light, var(--accent-light));
  border-color: var(--tenant-accent-light, var(--accent-light));
  box-shadow: var(--shadow-glow-sm);
}

.btn--primary:active:not(:disabled) {
  background: var(--tenant-accent-dim, var(--accent-dim));
  border-color: var(--tenant-accent-dim, var(--accent-dim));
  transform: scale(0.98);
}

/* buttons/purchase.css */
/**
 * COMPONENT: Button - Purchase
 * Gedeelde storefront-koop-CTA (card, PDP, cart, checkout)
 *
 * AI-NOTE: Storefront primaire koopacties gebruiken uitsluitend `btn--purchase`.
 * Kleur volgt tenant-accent (thema), niet success-groen en niet page/bundle overrides.
 * Success blijft voor echte statusacties (bevestigd, toegepast), niet voor koop-CTA's.
 * Min-hoogte 46px is het gedeelde koopcontract; layout-CSS mag breedte zetten, niet paint.
 */

.btn--purchase {
  height: auto;
  min-block-size: 46px;
  min-inline-size: 0;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  background: var(--tenant-accent, var(--accent));
  border-color: var(--tenant-accent, var(--accent));
  color: var(--btn-primary-fg, var(--bg-deep));
  box-shadow: none;
  transform: none;
  filter: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn--purchase:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--tenant-accent-hover,
      var(--accent-hover, var(--tenant-accent-light, var(--accent-light))));
    border-color: var(--tenant-accent-hover,
      var(--accent-hover, var(--tenant-accent-light, var(--accent-light))));
    box-shadow: var(--shadow-glow-sm);
  }
}

.btn--purchase:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tenant-accent-dim, var(--accent-dim));
  border-color: var(--tenant-accent-dim, var(--accent-dim));
  transform: scale(0.98);
}

.btn--purchase:focus-visible {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn--purchase {
    transition: none;
  }

  .btn--purchase:active:not(:disabled) {
    transform: none;
  }
}

/* buttons/secondary.css */
/**
 * COMPONENT: Button - Secondary
 * Secundaire actie button met outline stijl
 * 
 * AI-NOTE: Secondary buttons zijn voor minder belangrijke acties.
 * Vaak naast een primary button gebruikt (Cancel, Back, etc.)
 */

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-light);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.btn--secondary:active:not(:disabled) {
  background: var(--bg-active);
  transform: scale(0.98);
}

/* buttons/success.css */
/**
 * COMPONENT: Button - Success
 * Groene status/bevestigingsbutton
 *
 * AI-NOTE: Success is voor echte statusacties (bevestigd, toegepast, geslaagd).
 * Storefront-koop-CTA's (card, PDP, cart, checkout) gebruiken `btn--purchase`, niet success.
 * Gebruikt --success tokens uit het actieve theme.
 */

.btn--success {
  background: var(--success);
  color: var(--bg-deep);
  border-color: var(--success);
}

.btn--success:hover:not(:disabled) {
  background: var(--success-hover, var(--success-light, var(--success)));
  border-color: var(--success-hover, var(--success-light, var(--success)));
  box-shadow: 0 0 16px color-mix(in srgb, var(--admin-v2-state-success-text, var(--success)) 25%, transparent);
}

.btn--success:active:not(:disabled) {
  background: var(--success);
  border-color: var(--success);
  filter: brightness(0.9);
  transform: scale(0.98);
}

/* buttons/warning.css */
/**
 * COMPONENT: Button - Warning
 * Button voor waarschuwingsacties (refund, archive, etc.)
 * 
 * AI-NOTE: Warning buttons zijn voor acties die aandacht vereisen
 * maar niet destructief zijn. Gebruik warning/amber kleur.
 */

.btn--warning {
  background: var(--warning);
  color: var(--admin-v2-color-text);
  border-color: var(--warning);
}

.btn--warning:hover:not(:disabled) {
  background: var(--admin-v2-state-warning-text);
  border-color: var(--admin-v2-state-warning-text);
  box-shadow: 0 0 10px color-mix(in srgb, var(--admin-v2-state-warning-text) 25%, transparent);
}

.btn--warning:active:not(:disabled) {
  background: var(--admin-v2-state-warning-text);
  border-color: var(--admin-v2-state-warning-text);
  transform: scale(0.98);
}

/* Disabled state */
.btn--warning:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ===== Component: cards ===== */
/* cards/_base.css */
/**
 * COMPONENT: Cards - Base
 * Gedeelde card styling voor alle varianten
 * 
 * AI-NOTE: Cards zijn containers voor gerelateerde content.
 * Ze groeperen informatie visueel. Gebruik semantic tokens.
 * 
 * VARIANTS: elevated, bordered, glass
 * STATES: default, hover (interactive), selected
 */

/* ===== BASE CARD ===== */
.card {
  background: var(--admin-v2-color-surface, var(--pg-ui-color-surface));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  
  /* Default border (subtle) */
  border: 1px solid var(--border);
  
  /* Transition voor interactieve cards */
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

/* ===== CARD SECTIONS ===== */
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.card__body {
  color: var(--text-secondary);
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* ===== CARD PADDING VARIANTS ===== */
.card--compact {
  padding: var(--space-3);
}

.card--spacious {
  padding: var(--space-6);
}

.card--flush {
  padding: 0;
}

/* ===== INTERACTIVE CARD ===== */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  border-color: var(--border-light);
}

.card--interactive:active {
  transform: scale(0.995);
}

/* ===== SELECTED STATE ===== */
.card--selected {
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 1px var(--tenant-accent, var(--accent));
}

/* ===== CARD LIST ===== */
.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ===== CARD GRID ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* cards/bordered.css */
/**
 * COMPONENT: Card - Bordered
 * Card met duidelijke border (geen shadow)
 * 
 * AI-NOTE: Bordered cards zijn subtiel maar afgebakend.
 * Gebruik in lijsten of als je veel cards hebt.
 */

.card--bordered {
  background: var(--admin-v2-color-surface, var(--pg-ui-color-surface));
  border: 1px solid var(--border-light);
  box-shadow: none;
}

.card--bordered.card--interactive:hover {
  border-color: var(--border-strong);
  background: var(--admin-v2-color-surface-hover, var(--pg-ui-color-surface-hover));
}

/* cards/elevated.css */
/**
 * COMPONENT: Card - Elevated
 * Card met shadow (zweeft boven de pagina)
 * 
 * AI-NOTE: Elevated cards zijn prominent en trekken aandacht.
 * Gebruik voor belangrijke content of feature highlights.
 */

.card--elevated {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

.card--elevated.card--interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card--elevated.card--selected {
  box-shadow: 
    var(--shadow-lg),
    0 0 0 1px var(--tenant-accent, var(--accent));
}

/* cards/glass.css */
/* theme-literal-exception: glass-effect-recipe — Wave B allowed identity/preview/effect literals */
/**
 * COMPONENT: Card - Glass
 * Glassmorphism card met blur effect
 * 
 * AI-NOTE: Glass cards zijn modern en premium.
 * Werkt best op dark themes met subtiele achtergrond.
 * Let op: backdrop-filter kan performance kosten.
 */

.card--glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card--glass.card--interactive:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.card--glass.card--selected {
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 20px var(--accent-glow);
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
  .card--glass {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
  }
  
  .card--glass.card--interactive:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.12);
  }
}


/* ===== Component: badges ===== */
/* badges/_base.css */
/**
 * COMPONENT: Badges - Base
 * Status indicators en labels
 * 
 * AI-NOTE: Badges tonen status of categorieën.
 * Compact, kleurgecodeerd, vaak in tabellen of kaarten.
 * 
 * COLORS: default, success, warning, error, info, accent
 */

/* ===== BASE BADGE ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  
  padding: var(--space-1) var(--space-2);
  
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;
  
  border-radius: var(--radius-full);
  
  /* Default: neutral */
  background: var(--bg-hover);
  color: var(--text-secondary);
}

/* ===== COLOR VARIANTS ===== */
.badge--success {
  background: var(--success-dim);
  color: var(--success);
}

.badge--warning {
  background: var(--warning-dim);
  color: var(--warning);
}

.badge--error {
  background: var(--error-dim);
  color: var(--error);
}

.badge--info {
  background: var(--info-dim);
  color: var(--info);
}

.badge--accent {
  background: var(--accent-glow);
  color: var(--tenant-accent, var(--accent));
}

/* ===== SOLID VARIANTS ===== */
.badge--solid {
  color: var(--bg-deep);
}

.badge--solid.badge--success {
  background: var(--success);
}

.badge--solid.badge--warning {
  background: var(--warning);
}

.badge--solid.badge--error {
  background: var(--error);
}

.badge--solid.badge--info {
  background: var(--info);
}

.badge--solid.badge--accent {
  background: var(--tenant-accent, var(--accent));
}

/* ===== OUTLINE VARIANTS ===== */
.badge--outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* ===== SIZE VARIANTS ===== */
.badge--sm {
  padding: 2px var(--space-1);
  font-size: 10px;
}

.badge--lg {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* ===== DOT BADGE ===== */
.badge--dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
}

.badge--dot.badge--success { background: var(--success); }
.badge--dot.badge--warning { background: var(--warning); }
.badge--dot.badge--error { background: var(--error); }
.badge--dot.badge--info { background: var(--info); }
.badge--dot.badge--accent { background: var(--tenant-accent, var(--accent)); }

/* ===== WITH ICON ===== */
.badge__icon {
  width: 12px;
  height: 12px;
}

/* ===== ORDER STATUS BADGES (semantic) ===== */
.badge--pending {
  background: var(--warning-dim);
  color: var(--warning);
}

.badge--processing {
  background: var(--info-dim);
  color: var(--info);
}

.badge--completed {
  background: var(--success-dim);
  color: var(--success);
}

.badge--cancelled {
  background: var(--error-dim);
  color: var(--error);
}

.badge--refunded {
  background: var(--bg-hover);
  color: var(--text-muted);
}


/* ===== Component: alerts ===== */
/* alerts/_base.css */
/**
 * COMPONENT: Alerts - Base
 * Notification messages en feedback
 * 
 * AI-NOTE: Alerts communiceren status, fouten, of bevestigingen.
 * Kan inline, banner, of toast zijn.
 * 
 * VARIANTS: inline, banner, toast
 * TYPES: success, warning, error, info
 */

/* ===== BASE ALERT ===== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  
  padding: var(--space-3) var(--space-4);
  
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.alert__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert__content {
  flex: 1;
  min-width: 0;
}

.alert__title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.alert__message {
  color: inherit;
  opacity: 0.9;
}

.alert__dismiss {
  flex-shrink: 0;
  padding: var(--space-1);
  margin: calc(-1 * var(--space-1));
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.alert__dismiss:hover {
  opacity: 1;
}

/* ===== TYPE VARIANTS ===== */
.alert--success {
  background: var(--success-dim);
  border-color: var(--success);
  color: var(--success);
}

.alert--warning {
  background: var(--warning-dim);
  border-color: var(--warning);
  color: var(--warning);
}

.alert--error {
  background: var(--error-dim);
  border-color: var(--error);
  color: var(--error);
}

.alert--info {
  background: var(--info-dim);
  border-color: var(--info);
  color: var(--info);
}

/* ===== BANNER VARIANT ===== */
.alert--banner {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom-width: 2px;
}

/* ===== TOAST VARIANT ===== */
.alert--toast {
  box-shadow: var(--shadow-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  min-width: 300px;
  max-width: 400px;
}

.alert--toast.alert--success {
  border-left: 3px solid var(--success);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.alert--toast.alert--error {
  border-left: 3px solid var(--error);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.alert--toast.alert--warning {
  border-left: 3px solid var(--warning);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.alert--toast.alert--info {
  border-left: 3px solid var(--info);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* ===== TOAST CONTAINER ===== */
.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast-container--top-right {
  top: var(--space-4);
  right: var(--space-4);
}

.toast-container--bottom-right {
  bottom: var(--space-4);
  right: var(--space-4);
}

.toast-container--top-center {
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
}

.toast-container .alert--toast {
  pointer-events: auto;
  animation: slide-in-up var(--duration-normal) var(--ease-out);
}

/* ===== INLINE (in forms) ===== */
.alert--inline {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

/* alerts/banner.css */
/**
 * ALERTS: Banner
 * 
 * Full-width banners voor belangrijke aankondigingen.
 * Gebruik bovenaan de pagina voor site-wide berichten.
 * 
 * AI-NOTE: Banners zijn persistent en vereisen expliciete interactie
 * om te sluiten. Gebruik voor belangrijke mededelingen, onderhoud, etc.
 * 
 * STRUCTURE:
 * <div class="banner banner--info">
 *   <div class="banner__content">
 *     <span class="banner__icon">ℹ</span>
 *     <p class="banner__message">Scheduled maintenance tonight at 22:00</p>
 *     <a href="#" class="banner__link">Learn more</a>
 *   </div>
 *   <button class="banner__close">×</button>
 * </div>
 */

/* =================================================================
   BANNER BASE
   ================================================================= */

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--info-subtle);
  color: var(--info);
  width: 100%;
}

/* =================================================================
   BANNER VARIANTS
   ================================================================= */

.banner--info {
  background: var(--info-subtle);
  color: var(--info);
}

.banner--success {
  background: var(--success-subtle);
  color: var(--success);
}

.banner--warning {
  background: var(--warning-subtle);
  color: var(--warning);
}

.banner--error {
  background: var(--error-subtle);
  color: var(--error);
}

.banner--promo {
  background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-secondary) 100%);
  color: var(--text-primary);
}

/* =================================================================
   BANNER CONTENT
   ================================================================= */

.banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}

.banner__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.banner__message {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.banner__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.banner__link:hover {
  opacity: 0.8;
}

/* =================================================================
   BANNER CLOSE
   ================================================================= */

.banner__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: currentColor;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.banner__close:hover {
  opacity: 1;
}

/* =================================================================
   BANNER ACTIONS
   ================================================================= */

.banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.banner__action {
  padding: var(--space-1) var(--space-3);
  background: currentColor;
  border: none;
  border-radius: var(--radius-full);
  color: var(--admin-v2-color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.banner__action:hover {
  transform: scale(1.02);
}

/* =================================================================
   BANNER POSITIONED (fixed)
   ================================================================= */

.banner--fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-banner);
}

.banner--fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-banner);
}

/* =================================================================
   BANNER COMPACT
   ================================================================= */

.banner--compact {
  padding: var(--space-2) var(--space-4);
}

.banner--compact .banner__message {
  font-size: var(--font-size-xs);
}

/* =================================================================
   BANNER DISMISSING ANIMATION
   ================================================================= */

.banner--dismissing {
  animation: banner-dismiss 0.3s ease-out forwards;
}

@keyframes banner-dismiss {
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* alerts/inline.css */
/**
 * ALERTS: Inline
 * 
 * Context-specifieke alerts die inline in content verschijnen.
 * Gebruik voor form validation, sectie-specifieke berichten, etc.
 * 
 * AI-NOTE: Inline alerts zijn deel van de content flow.
 * Gebruik voor berichten die direct gerelateerd zijn aan nabije content.
 * 
 * STRUCTURE:
 * <div class="alert-inline alert-inline--warning">
 *   <span class="alert-inline__icon">⚠</span>
 *   <div class="alert-inline__content">
 *     <p class="alert-inline__title">Low stock warning</p>
 *     <p class="alert-inline__message">Only 3 items left in inventory</p>
 *   </div>
 *   <button class="alert-inline__action">Restock</button>
 * </div>
 */

/* =================================================================
   INLINE ALERT BASE
   ================================================================= */

.alert-inline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

/* =================================================================
   INLINE ALERT VARIANTS
   ================================================================= */

.alert-inline--info {
  background: var(--info-subtle);
  border-color: var(--info);
}

.alert-inline--info .alert-inline__icon,
.alert-inline--info .alert-inline__title {
  color: var(--info);
}

.alert-inline--success {
  background: var(--success-subtle);
  border-color: var(--success);
}

.alert-inline--success .alert-inline__icon,
.alert-inline--success .alert-inline__title {
  color: var(--success);
}

.alert-inline--warning {
  background: var(--warning-subtle);
  border-color: var(--warning);
}

.alert-inline--warning .alert-inline__icon,
.alert-inline--warning .alert-inline__title {
  color: var(--warning);
}

.alert-inline--error {
  background: var(--error-subtle);
  border-color: var(--error);
}

.alert-inline--error .alert-inline__icon,
.alert-inline--error .alert-inline__title {
  color: var(--error);
}

/* =================================================================
   INLINE ALERT ELEMENTS
   ================================================================= */

.alert-inline__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--space-1);
}

.alert-inline__content {
  flex: 1;
  min-width: 0;
}

.alert-inline__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.alert-inline__message {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.alert-inline__action {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.alert-inline__action:hover {
  background: var(--surface-hover);
}

.alert-inline__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.alert-inline__close:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

/* =================================================================
   INLINE ALERT SIZES
   ================================================================= */

.alert-inline--sm {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

.alert-inline--sm .alert-inline__icon {
  width: 1rem;
  height: 1rem;
}

.alert-inline--sm .alert-inline__title,
.alert-inline--sm .alert-inline__message {
  font-size: var(--font-size-xs);
}

.alert-inline--lg {
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
}

.alert-inline--lg .alert-inline__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.alert-inline--lg .alert-inline__title {
  font-size: var(--font-size-base);
}

.alert-inline--lg .alert-inline__message {
  font-size: var(--font-size-sm);
}

/* =================================================================
   INLINE ALERT WITH LIST
   ================================================================= */

.alert-inline__list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.alert-inline__list li {
  margin-bottom: var(--space-1);
}

.alert-inline__list li:last-child {
  margin-bottom: 0;
}

/* =================================================================
   INLINE ALERT BORDERED (left border only)
   ================================================================= */

.alert-inline--bordered {
  border: none;
  border-left: 3px solid var(--border-default);
  border-radius: 0;
  background: var(--surface-primary);
}

.alert-inline--bordered.alert-inline--info {
  border-left-color: var(--info);
}

.alert-inline--bordered.alert-inline--success {
  border-left-color: var(--success);
}

.alert-inline--bordered.alert-inline--warning {
  border-left-color: var(--warning);
}

.alert-inline--bordered.alert-inline--error {
  border-left-color: var(--error);
}

/* alerts/toast.css */
/**
 * ALERTS: Toast
 * 
 * Notifications die tijdelijk verschijnen en automatisch verdwijnen.
 * Gebruikt voor succesmeldingen, errors, of informatieve berichten.
 * 
 * AI-NOTE: Toasts worden gepositioneerd in een toast container.
 * Gebruik voor korte, niet-kritieke berichten die geen interactie vereisen.
 * 
 * STRUCTURE:
 * <div class="toast-container">
 *   <div class="toast toast--success">
 *     <span class="toast__icon">✓</span>
 *     <div class="toast__content">
 *       <p class="toast__message">Order saved successfully</p>
 *     </div>
 *     <button class="toast__close">×</button>
 *   </div>
 * </div>
 */

/* =================================================================
   TOAST CONTAINER
   ================================================================= */

.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: min(400px, calc(100vw - var(--space-4)));
}

/* Position variants */
.toast-container--top-right {
  top: var(--space-4);
  right: var(--space-4);
}

.toast-container--top-left {
  top: var(--space-4);
  left: var(--space-4);
}

.toast-container--top-center {
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
}

.toast-container--bottom-right {
  bottom: var(--space-4);
  right: var(--space-4);
}

.toast-container--bottom-left {
  bottom: var(--space-4);
  left: var(--space-4);
}

.toast-container--bottom-center {
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
}

/* =================================================================
   TOAST
   ================================================================= */

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-slide-in 0.3s ease-out;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast--exiting {
  animation: toast-slide-out 0.2s ease-in forwards;
}

@keyframes toast-slide-out {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* =================================================================
   TOAST VARIANTS
   ================================================================= */

.toast--success {
  border-left: 3px solid var(--success);
}

.toast--success .toast__icon {
  color: var(--success);
}

.toast--error {
  border-left: 3px solid var(--error);
}

.toast--error .toast__icon {
  color: var(--error);
}

.toast--warning {
  border-left: 3px solid var(--warning);
}

.toast--warning .toast__icon {
  color: var(--warning);
}

.toast--info {
  border-left: 3px solid var(--info);
}

.toast--info .toast__icon {
  color: var(--info);
}

/* =================================================================
   TOAST ELEMENTS
   ================================================================= */

.toast__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--space-1);
}

.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.toast__message {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toast__close:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

/* =================================================================
   TOAST WITH ACTIONS
   ================================================================= */

.toast__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.toast__action {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toast__action:hover {
  background: var(--accent-subtle);
}

/* =================================================================
   TOAST WITH PROGRESS
   ================================================================= */

.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--surface-tertiary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}

.toast__progress-bar {
  height: 100%;
  background: var(--accent);
  animation: toast-progress 5s linear forwards;
}

@keyframes toast-progress {
  from { width: 100%; }
  to { width: 0%; }
}


/* ===== Component: forms ===== */
/* forms/_base.css */
/**
 * COMPONENT: Forms - Base
 * Gedeelde form styling voor alle form elementen
 * 
 * AI-NOTE: Forms zijn kritiek voor data input.
 * Consistente styling, duidelijke states, goede accessibility.
 * 
 * ELEMENTS: input, textarea, select, checkbox, radio, switch
 * STATES: default, focus, error, disabled, readonly
 */

/* ===== FORM LAYOUT ===== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ===== FORM GROUP ===== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group--horizontal {
  flex-direction: row;
  align-items: center;
}

/* ===== LABEL ===== */
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: 0.625rem;
}

.form-label--required::after {
  content: " *";
  color: var(--error);
}

/* ===== INPUT BASE (SSoT — alle form inputs) ===== */
.form-input {
  width: 100%;
  height: auto;
  padding: 0.75rem 1.25rem;
  
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-sm-plus);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  outline: none;
  box-sizing: border-box;
  
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-input::placeholder {
  color: var(--text-disabled);
}

.form-input:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}

.form-input:focus {
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Autofill override — voorkom browser-default witte achtergrond */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===== INPUT SIZES ===== */
.form-input--sm {
  padding: 0.5rem var(--space-3);
  font-size: var(--control-font-sm);
  border-radius: var(--radius-md);
}

.form-input--lg {
  padding: 1.1rem var(--space-5);
  font-size: var(--control-font-lg);
}

/* ===== TEXTAREA ===== */
.form-textarea {
  min-height: 100px;
  padding: var(--space-3);
  resize: vertical;
}

/* ===== SELECT ===== */
.form-select {
  appearance: none;
  background-image: var(--admin-v2-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-left: var(--control-padding-md);
  padding-right: var(--space-10);
  cursor: pointer;
}

/* Select fill stays white; golden border marks dropdown affordance (no tinted fill). */
.form-select {
  background-color: var(--admin-v2-color-text-inverse);
  border-color: color-mix(in srgb, var(--admin-v2-color-brand-gold) 35%, transparent);
}

.form-select:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--admin-v2-color-brand-gold) 55%, transparent);
}

.form-select:focus {
  background-color: var(--admin-v2-color-text-inverse);
}

/* ===== STATES ===== */
.form-input:disabled,
.form-input[readonly],
.form-select:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: var(
    --admin-v2-input-bg-disabled,
    var(--admin-v2-color-surface-muted)
  );
  color: var(--admin-v2-color-text, var(--text-primary));
}

.form-input--error {
  border-color: var(--error);
}

.form-input--error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-dim);
}

.form-input--success {
  border-color: var(--success);
}

/* ===== HELPER TEXT ===== */
.form-helper {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.form-helper--error {
  color: var(--error);
}

.form-helper--success {
  color: var(--success);
}

/* ===== INPUT GROUP (with addon) ===== */
.input-group {
  display: flex;
}

.input-group .form-input {
  border-radius: 0;
}

.input-group .form-input:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .form-input:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.input-addon:first-child {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-addon:last-child {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ===== SMART IDENTIFIER INPUT (Email/Phone detection) ===== */
.smart-identifier-wrapper {
  position: relative;
  width: 100%;
}

.form-control-with-icon {
  padding-right: var(--space-10);
}

.form-control-icon {
  position: absolute;
  right: var(--control-padding-md);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.form-control:focus + .form-control-icon {
  color: var(--tenant-accent, var(--accent));
}

.form-error {
  font-size: var(--text-xs);
  color: var(--error);
  margin-top: var(--space-1);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.form-label-required {
  color: var(--error);
}

.form-control {
  width: 100%;
  height: var(--control-height-md);
  padding: 0 var(--control-padding-md);
  
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--control-font-md);
  color: var(--text-primary);
  
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}

.form-control:focus {
  outline: none;
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-surface);
}

.form-control-error {
  border-color: var(--error);
}

.form-control-error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-dim);
}

/* forms/_workspace-field.css */
/**
 * Workspace-style form controls (admin Products editor SSoT).
 *
 * Bundled in all contexts (admin + webshop). Admin markup may still use
 * `.products-workspace-field`; storefront facet filters use `.form-field-workspace`.
 *
 * Theme-pure: fills/chevrons via --admin-v2-* / --pg-ui-* only (Wave B).
 */

.form-field-workspace.form-input,
.form-field-workspace.form-select,
.form-input.products-workspace-field:not(.products-workspace-field--color):not(.products-workspace-search-field__input),
.form-select.products-workspace-field {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--admin-control-field, 36px) !important;
  height: var(--admin-control-field, 36px);
  max-height: var(--admin-control-field, 36px);
  padding: 0 var(--admin-control-inline-padding, 12px) !important;
  border: 1.5px solid var(--admin-v2-border-strong, var(--admin-border-strong)) !important;
  border-radius: var(--admin-radius-control, var(--radius-md)) !important;
  background-color: var(--admin-v2-input-bg) !important;
  font-size: var(--admin-v2-field-control-font-size, var(--admin-workspace-detail-font, var(--text-sm))) !important;
  line-height: var(--admin-control-field, 36px);
  font-weight: var(--font-medium);
  box-shadow: none;
  color: var(--admin-v2-input-text, var(--admin-v2-color-text));
}

/* Dense workspace cells: hide native number steppers (square chrome clashes with control radius). */
.form-field-workspace.form-input[type='number'],
.form-input.products-workspace-field[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.form-field-workspace.form-input[type='number']::-webkit-outer-spin-button,
.form-field-workspace.form-input[type='number']::-webkit-inner-spin-button,
.form-input.products-workspace-field[type='number']::-webkit-outer-spin-button,
.form-input.products-workspace-field[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-field-workspace.form-select,
.form-select.products-workspace-field {
  appearance: none;
  background-color: var(--admin-v2-input-bg) !important;
  padding-right: calc(var(--control-padding-md) + var(--space-6)) !important;
  background-image: var(--admin-v2-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--control-padding-md) center;
  cursor: pointer;
}

.form-field-workspace.form-select:hover:not(:disabled):not(:focus),
.form-field-workspace.form-select:focus,
.form-select.products-workspace-field:hover:not(:disabled):not(:focus),
.form-select.products-workspace-field:focus {
  border-color: var(--admin-v2-input-border-focus, var(--admin-v2-color-primary)) !important;
  background-color: var(--admin-v2-input-bg) !important;
  background-image: var(--admin-v2-select-chevron);
  box-shadow: var(--admin-v2-focus-ring);
}

/*
 * Role: admin disabled / read-only text controls — muted surface (SSoT).
 * Must beat the input fill above so unusable fields read as unusable.
 */
.form-field-workspace.form-input:disabled,
.form-field-workspace.form-input[readonly],
.form-field-workspace.form-select:disabled,
.form-input.products-workspace-field:disabled,
.form-input.products-workspace-field[readonly],
.form-select.products-workspace-field:disabled {
  background-color: var(--admin-v2-input-disabled-bg) !important;
  color: var(--admin-v2-input-disabled-text, var(--admin-v2-color-text-disabled));
  opacity: 1;
  cursor: not-allowed;
}

.form-field-workspace.form-select:disabled {
  background-image: var(--admin-v2-select-chevron-muted);
}

.form-field-workspace-label,
.products-editor-label {
  display: block;
  font-size: var(--admin-field-label-font-size, var(--admin-font-size-label, var(--text-sm)));
  font-weight: var(--admin-field-label-font-weight, var(--font-medium));
  color: var(--admin-v2-color-text);
  letter-spacing: 0;
  margin: 0 0 0.625rem;
}

/* forms/checkboxes.css */
/**
 * COMPONENT: Forms - Checkboxes & Radio
 * Custom checkbox en radio button styling
 *
 * AI-NOTE: Custom checkboxes en radios voor consistente look.
 * Native inputs zijn hidden maar blijven accessible.
 * Checked chrome = solid primary + white check.
 * Disabled checked = light border + muted gray check (not faded blue).
 */

/* ===== CHECKBOX ===== */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--form-control-checkbox-gap);
  cursor: pointer;
}

.form-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-checkbox__box {
  width: var(--form-control-checkbox-size);
  min-width: var(--form-control-checkbox-size);
  height: var(--form-control-checkbox-size);
  border: var(--form-control-checkbox-border-width) solid var(--form-control-checkbox-border);
  border-radius: var(--form-control-checkbox-radius);
  background: var(--form-control-checkbox-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.form-checkbox__box::after {
  content: "";
  width: var(--form-control-checkbox-check-size);
  height: var(--form-control-checkbox-check-size);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

/* Checked state — solid primary + white check */
.form-checkbox__input:checked + .form-checkbox__box {
  background: var(--form-control-checkbox-checked-bg);
  border-color: var(--form-control-checkbox-checked-bg);
}

.form-checkbox__input:checked + .form-checkbox__box::after {
  opacity: 1;
  transform: scale(1);
}

/* Focus state */
.form-checkbox__input:focus-visible + .form-checkbox__box {
  outline: 2px solid var(--form-control-checkbox-checked-bg);
  outline-offset: 2px;
}

/* Disabled — muted chrome, not opacity-fade of primary */
.form-checkbox__input:disabled + .form-checkbox__box {
  cursor: not-allowed;
  background: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
}

.form-checkbox__input:disabled:checked + .form-checkbox__box {
  background: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
}

.form-checkbox__input:disabled:checked + .form-checkbox__box::after {
  opacity: 1;
  transform: scale(1);
  background-image: var(--admin-v2-select-chevron);
}

.form-checkbox__input:disabled ~ .form-checkbox__label,
.form-checkbox:has(.form-checkbox__input:disabled) .form-checkbox__label {
  color: var(--admin-v2-color-text-muted, var(--admin-v2-color-text-muted));
  cursor: not-allowed;
}

.form-checkbox__label {
  font-size: var(--form-control-checkbox-label-font-size);
  font-weight: var(--form-control-checkbox-label-font-weight);
  line-height: var(--form-control-checkbox-label-line-height);
  color: var(--text-primary);
  user-select: none;
}

/* ===== RADIO ===== */
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.form-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-radio__circle {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--transition-fast);
}

.form-radio__circle::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--tenant-accent, var(--accent));
  border-radius: var(--radius-full);
  opacity: 0;
  transform: scale(0);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

/* Checked state */
.form-radio__input:checked + .form-radio__circle {
  border-color: var(--tenant-accent, var(--accent));
}

.form-radio__input:checked + .form-radio__circle::after {
  opacity: 1;
  transform: scale(1);
}

/* Focus state */
.form-radio__input:focus-visible + .form-radio__circle {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

/* Disabled */
.form-radio__input:disabled + .form-radio__circle {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-radio__label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  user-select: none;
}

/* Inline radio row (Website Editor / settings) — same rhythm as horizontal group */
.form-radio--inline {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
}

/* ===== RADIO GROUP ===== */
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-radio-group--horizontal {
  flex-direction: row;
  gap: var(--space-4);
}

/*
 * Native checkbox used as <input type="checkbox" class="form-checkbox">
 * (workspace chips / category rows). Distinct from label.form-checkbox custom pattern.
 */
input[type="checkbox"].form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--form-control-checkbox-size);
  min-width: var(--form-control-checkbox-size);
  height: var(--form-control-checkbox-size);
  margin: 0;
  padding: 0;
  border: var(--form-control-checkbox-border-width) solid var(--form-control-checkbox-border);
  border-radius: var(--form-control-checkbox-radius);
  background-color: var(--form-control-checkbox-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--form-control-checkbox-check-size) var(--form-control-checkbox-check-size);
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

input[type="checkbox"].form-checkbox:checked {
  background-color: var(--form-control-checkbox-checked-bg);
  border-color: var(--form-control-checkbox-checked-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

input[type="checkbox"].form-checkbox:focus-visible {
  outline: 2px solid var(--form-control-checkbox-checked-bg);
  outline-offset: 2px;
}

input[type="checkbox"].form-checkbox:disabled {
  cursor: not-allowed;
  background-color: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
  opacity: 1;
}

input[type="checkbox"].form-checkbox:disabled:checked {
  background-color: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
  background-image: var(--admin-v2-select-chevron);
}

/* forms/switch.css */
/**
 * COMPONENT: Forms - Toggle Switch
 * iOS-style toggle switch
 * 
 * AI-NOTE: Toggle switches voor on/off states.
 * Beter dan checkbox voor settings die direct effect hebben.
 */

/* ===== SWITCH ===== */
.form-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.form-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-switch__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--bg-muted, var(--bg-active));
  border-radius: var(--radius-full);
  transition: background-color var(--transition-normal);
}

.form-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--bg-deep, var(--admin-v2-color-surface));
  border-radius: var(--radius-full);
  box-shadow: var(--admin-v2-shadow-sm);
  transition: 
    transform var(--transition-normal),
    background-color var(--transition-normal);
}

/* Checked state */
.form-switch__input:checked + .form-switch__track {
  background: var(--tenant-accent, var(--accent));
}

.form-switch__input:checked + .form-switch__track .form-switch__thumb {
  transform: translateX(20px);
  background: var(--bg-deep, var(--admin-v2-color-surface));
}

/* Focus state */
.form-switch__input:focus-visible + .form-switch__track {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

/* Disabled */
.form-switch__input:disabled + .form-switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-switch__label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  user-select: none;
}

/* ===== SMALL SWITCH ===== */
.form-switch--sm .form-switch__track {
  width: 36px;
  height: 20px;
}

.form-switch--sm .form-switch__thumb {
  width: 16px;
  height: 16px;
}

.form-switch--sm .form-switch__input:checked + .form-switch__track .form-switch__thumb {
  transform: translateX(16px);
}


/* ===== Component: spinners ===== */
/* spinners/spinner.css */
/* theme-literal-exception: spinner-animation — Wave B allowed identity/preview/effect literals */
/**
 * COMPONENT: Spinner
 * Loading spinner voor alle contexten (webshop, admin, pos, etc.)
 *
 * AI-NOTE: De Preact Spinner component rendert:
 *   <div class="spinner spinner-{size}" role="status" />
 * Sizes: sm, md, lg, xl
 *
 * STRUCTURE:
 * <div class="spinner spinner-md"></div>
 * <div class="loading-container"><div class="spinner spinner-lg"></div></div>
 */

/* ===== BASE SPINNER ===== */
.spinner {
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

/* ===== SIZES ===== */
.spinner-sm {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border, rgba(255 255 255 / 0.1));
  border-top-color: var(--accent, #f5a623);
}

.spinner-md {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border, rgba(255 255 255 / 0.1));
  border-top-color: var(--accent, #f5a623);
}

.spinner-lg {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border, rgba(255 255 255 / 0.1));
  border-top-color: var(--accent, #f5a623);
}

.spinner-xl {
  width: 64px;
  height: 64px;
  border: 4px solid var(--border, rgba(255 255 255 / 0.1));
  border-top-color: var(--accent, #f5a623);
}

/* ===== LOADING CONTAINER (centered wrapper) ===== */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8, 2rem) var(--space-4, 1rem);
  min-height: 120px;
}


/* ===== Component: headers ===== */
/* headers/_base.css */
/**
 * HEADERS - Base Styles
 * 
 * Composable header component voor tenants.
 * Tenants kiezen een header-variant in hun config.
 * 
 * VARIANTEN:
 * - minimal: Logo + hamburger
 * - full: Logo + nav + search + user
 * - centered: Centered logo met nav links/rechts
 * - split: Logo links, nav rechts, strikte scheiding
 * 
 * DATA ATTRIBUTES:
 * - data-header-variant="minimal|full|centered|split"
 * - data-header-sticky="true|false"
 * - data-header-transparent="true|false"
 */

/* =================================================================
   BASE HEADER
   ================================================================= */

.header {
  --header-height: var(--space-16);
  --header-padding-x: var(--space-6);
  --header-padding-y: var(--space-4);
  --header-bg: var(--surface-primary);
  --header-border: var(--border-subtle);
  --header-shadow: var(--shadow-sm);
  
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--header-height);
  padding: var(--header-padding-y) var(--header-padding-x);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
  z-index: var(--z-sticky);
}

/* Sticky variant */
.header[data-header-sticky="true"] {
  position: sticky;
  top: 0;
}

/* Transparent variant (for hero sections) */
.header[data-header-transparent="true"] {
  --header-bg: transparent;
  --header-border: transparent;
  --header-shadow: none;
}

/* =================================================================
   HEADER LOGO
   ================================================================= */

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.header__logo-image {
  height: 2rem;
  width: auto;
  object-fit: contain;
}

.header__logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

/* =================================================================
   HEADER NAVIGATION
   ================================================================= */

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.header__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.header__nav-link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.header__nav-link[aria-current="page"],
.header__nav-link.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

/* =================================================================
   HEADER SEARCH
   ================================================================= */

.header__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  min-width: 200px;
}

.header__search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.header__search-input::placeholder {
  color: var(--text-tertiary);
}

.header__search-icon {
  color: var(--text-tertiary);
  width: 1rem;
  height: 1rem;
}

/* =================================================================
   HEADER ACTIONS
   ================================================================= */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.header__action-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* User avatar */
.header__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--border-subtle);
}

/* =================================================================
   HEADER MOBILE TOGGLE
   ================================================================= */

.header__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
}

@media (max-width: 768px) {
  .header__mobile-toggle {
    display: flex;
  }
  
  .header__nav,
  .header__search {
    display: none;
  }
}

/* =================================================================
   HEADER SPACER (pushes items apart)
   ================================================================= */

.header__spacer {
  flex: 1;
}

/* headers/centered.css */
/**
 * HEADER VARIANT: Centered
 * 
 * Logo gecentreerd met navigatie links en rechts.
 * Ideaal voor: fashion brands, luxury shops, portfolios.
 * 
 * STRUCTURE:
 * <header class="header header--centered" data-header-variant="centered">
 *   <nav class="header__nav header__nav--left">
 *     <a class="header__nav-link">Shop</a>
 *     <a class="header__nav-link">Collecties</a>
 *   </nav>
 *   <a class="header__logo">BRAND</a>
 *   <nav class="header__nav header__nav--right">
 *     <a class="header__nav-link">Account</a>
 *     <a class="header__nav-link">Winkelwagen</a>
 *   </nav>
 *   <button class="header__mobile-toggle">☰</button>
 * </header>
 */

.header--centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

/* Logo in het midden */
.header--centered .header__logo {
  justify-self: center;
  text-align: center;
}

.header--centered .header__logo-text {
  font-size: var(--font-size-2xl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Nav links uitlijnen */
.header--centered .header__nav--left {
  justify-self: start;
}

.header--centered .header__nav--right {
  justify-self: end;
}

/* Mobile: 2-koloms layout */
@media (max-width: 768px) {
  .header--centered {
    grid-template-columns: auto 1fr auto;
  }
  
  .header--centered .header__nav--left,
  .header--centered .header__nav--right {
    display: none;
  }
  
  .header--centered .header__logo {
    grid-column: 2;
  }
  
  .header--centered .header__mobile-toggle {
    display: flex;
    grid-column: 1;
    grid-row: 1;
  }
  
  /* Actions aan de rechterkant */
  .header--centered .header__actions {
    grid-column: 3;
  }
}

/* Desktop: alles zichtbaar */
@media (min-width: 769px) {
  .header--centered .header__mobile-toggle {
    display: none;
  }
}

/* headers/full.css */
/**
 * HEADER VARIANT: Full
 * 
 * Complete header met alle elementen.
 * Ideaal voor: webshops, dashboards, content-rijke sites.
 * 
 * STRUCTURE:
 * <header class="header header--full" data-header-variant="full">
 *   <a class="header__logo">Logo</a>
 *   <nav class="header__nav">
 *     <a class="header__nav-link">Link</a>
 *   </nav>
 *   <div class="header__spacer"></div>
 *   <div class="header__search">
 *     <input class="header__search-input">
 *   </div>
 *   <div class="header__actions">
 *     <button class="header__action-btn">🔔</button>
 *     <button class="header__action-btn">🛒</button>
 *     <img class="header__avatar">
 *   </div>
 *   <button class="header__mobile-toggle">☰</button>
 * </header>
 */

.header--full {
  gap: var(--space-4);
}

/* Logo krijgt vaste breedte */
.header--full .header__logo {
  flex: 0 0 auto;
  min-width: 120px;
}

/* Nav neemt beschikbare ruimte */
.header--full .header__nav {
  flex: 0 0 auto;
}

/* Search neemt flexibele ruimte */
.header--full .header__search {
  flex: 1;
  max-width: 400px;
}

/* Actions rechts */
.header--full .header__actions {
  flex: 0 0 auto;
}

/* Desktop: alles zichtbaar */
@media (min-width: 1024px) {
  .header--full .header__mobile-toggle {
    display: none;
  }
  
  .header--full .header__nav,
  .header--full .header__search {
    display: flex;
  }
}

/* Tablet: search verborgen */
@media (min-width: 768px) and (max-width: 1023px) {
  .header--full .header__search {
    display: none;
  }
  
  .header--full .header__nav {
    display: flex;
  }
}

/* Mobile: alleen logo, actions en toggle */
@media (max-width: 767px) {
  .header--full .header__nav,
  .header--full .header__search {
    display: none;
  }
  
  .header--full .header__mobile-toggle {
    display: flex;
  }
}

/* headers/minimal.css */
/**
 * HEADER VARIANT: Minimal
 * 
 * Eenvoudige header met alleen logo en hamburger menu.
 * Ideaal voor: landing pages, checkout flows, mobile-first.
 * 
 * STRUCTURE:
 * <header class="header header--minimal" data-header-variant="minimal">
 *   <a class="header__logo">Logo</a>
 *   <div class="header__spacer"></div>
 *   <button class="header__mobile-toggle">☰</button>
 * </header>
 */

.header--minimal {
  --header-height: var(--space-14);
  justify-content: space-between;
}

.header--minimal .header__logo {
  flex: 0 0 auto;
}

/* Mobile toggle altijd zichtbaar in minimal */
.header--minimal .header__mobile-toggle {
  display: flex;
}

/* Optionele CTA button rechts */
.header--minimal .header__cta {
  display: none;
}

@media (min-width: 768px) {
  .header--minimal .header__cta {
    display: flex;
    margin-left: var(--space-4);
  }
  
  /* Op desktop kan toggle verborgen als er geen nav is */
  .header--minimal[data-has-nav="false"] .header__mobile-toggle {
    display: none;
  }
}

/* headers/split.css */
/**
 * HEADER VARIANT: Split
 * 
 * Strikte scheiding tussen logo/nav links en actions rechts.
 * Ideaal voor: SaaS apps, admin panels, professional services.
 * 
 * STRUCTURE:
 * <header class="header header--split" data-header-variant="split">
 *   <div class="header__left">
 *     <a class="header__logo">Logo</a>
 *     <nav class="header__nav">
 *       <a class="header__nav-link">Dashboard</a>
 *       <a class="header__nav-link">Orders</a>
 *     </nav>
 *   </div>
 *   <div class="header__right">
 *     <div class="header__search">...</div>
 *     <div class="header__actions">...</div>
 *   </div>
 *   <button class="header__mobile-toggle">☰</button>
 * </header>
 */

.header--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left section: logo + nav */
.header--split .header__left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Right section: search + actions */
.header--split .header__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Divider tussen links en rechts */
.header--split .header__divider {
  width: 1px;
  height: 1.5rem;
  background: var(--border-subtle);
  margin: 0 var(--space-2);
}

/* Nav styling voor split */
.header--split .header__nav {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-4);
  margin-left: var(--space-2);
}

/* Compact search in split header */
.header--split .header__search {
  min-width: 180px;
  max-width: 280px;
}

/* Desktop */
@media (min-width: 1024px) {
  .header--split .header__mobile-toggle {
    display: none;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .header--split .header__search {
    display: none;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .header--split .header__left,
  .header--split .header__right {
    display: none;
  }
  
  /* Simplified mobile layout */
  .header--split {
    justify-content: space-between;
  }
  
  .header--split .header__logo {
    display: flex;
  }
  
  .header--split .header__mobile-toggle {
    display: flex;
  }
  
  .header--split .header__actions {
    display: flex;
  }
}


/* ===== Component: footers ===== */
/* footers/_base.css */
/**
 * FOOTERS - Base Styles
 * 
 * Composable footer component voor tenants.
 * Tenants kiezen een footer-variant in hun config.
 * 
 * VARIANTEN:
 * - simple: Copyright + basic links
 * - detailed: Multi-kolom met links, social, newsletter
 * - links: Focus op linklijsten
 * - minimal: Alleen copyright regel
 * 
 * DATA ATTRIBUTES:
 * - data-footer-variant="simple|detailed|links|minimal"
 * - data-footer-dark="true|false"
 */

/* =================================================================
   BASE FOOTER
   ================================================================= */

.footer {
  --footer-padding-x: var(--space-6);
  --footer-padding-y: var(--space-12);
  --footer-bg: var(--surface-secondary);
  --footer-border: var(--border-subtle);
  
  width: 100%;
  padding: var(--footer-padding-y) var(--footer-padding-x);
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

/* Dark footer variant */
.footer[data-footer-dark="true"] {
  --footer-bg: var(--background);
  color: var(--text-secondary);
}

/* =================================================================
   FOOTER CONTAINER
   ================================================================= */

.footer__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* =================================================================
   FOOTER LOGO
   ================================================================= */

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

.footer__logo-image {
  height: 2rem;
  width: auto;
}

.footer__logo-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

/* =================================================================
   FOOTER DESCRIPTION
   ================================================================= */

.footer__description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  max-width: 300px;
  margin-bottom: var(--space-6);
}

/* =================================================================
   FOOTER COLUMNS
   ================================================================= */

.footer__columns {
  display: grid;
  gap: var(--space-8);
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__column-title {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* =================================================================
   FOOTER LINKS
   ================================================================= */

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--text-primary);
}

/* =================================================================
   FOOTER SOCIAL
   ================================================================= */

.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--surface-tertiary);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.footer__social-link:hover {
  background: var(--accent);
  color: var(--text-on-accent);
}

.footer__social-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* =================================================================
   FOOTER NEWSLETTER
   ================================================================= */

.footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__newsletter-title {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.footer__newsletter-text {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.footer__newsletter-form {
  display: flex;
  gap: var(--space-2);
}

.footer__newsletter-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.footer__newsletter-input::placeholder {
  color: var(--text-tertiary);
}

.footer__newsletter-button {
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-on-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.footer__newsletter-button:hover {
  background: var(--accent-hover);
}

/* =================================================================
   FOOTER BOTTOM
   ================================================================= */

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

.footer__copyright {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.footer__legal-links {
  display: flex;
  gap: var(--space-4);
}

.footer__legal-link {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer__legal-link:hover {
  color: var(--text-secondary);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .footer {
    --footer-padding-y: var(--space-8);
  }
  
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .footer__newsletter-form {
    flex-direction: column;
  }
}

/* footers/detailed.css */
/**
 * FOOTER VARIANT: Detailed
 * 
 * Uitgebreide footer met meerdere kolommen, newsletter en social.
 * Ideaal voor: grote webshops, enterprise sites, marketplaces.
 * 
 * STRUCTURE:
 * <footer class="footer footer--detailed" data-footer-variant="detailed">
 *   <div class="footer__container">
 *     <div class="footer__top">
 *       <div class="footer__brand">...</div>
 *       <div class="footer__columns">
 *         <div class="footer__column">
 *           <h4 class="footer__column-title">Products</h4>
 *           <div class="footer__links">...</div>
 *         </div>
 *         <!-- More columns -->
 *       </div>
 *       <div class="footer__newsletter">...</div>
 *     </div>
 *     <div class="footer__bottom">...</div>
 *   </div>
 * </footer>
 */

.footer--detailed {
  --footer-padding-y: var(--space-16);
}

.footer--detailed .footer__top {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-12);
}

.footer--detailed .footer__brand {
  grid-column: 1;
}

.footer--detailed .footer__columns {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.footer--detailed .footer__newsletter {
  grid-column: 3;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer--detailed .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer--detailed .footer__brand {
    grid-column: 1;
  }
  
  .footer--detailed .footer__newsletter {
    grid-column: 2;
  }
  
  .footer--detailed .footer__columns {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .footer--detailed .footer__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  
  .footer--detailed .footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer--detailed .footer__brand {
    text-align: center;
  }
  
  .footer--detailed .footer__description {
    max-width: 100%;
  }
  
  .footer--detailed .footer__social {
    justify-content: center;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .footer--detailed .footer__columns {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer--detailed .footer__links {
    align-items: center;
  }
}

/* footers/links.css */
/**
 * FOOTER VARIANT: Links
 * 
 * Focus op linklijsten in meerdere kolommen.
 * Ideaal voor: content sites, documentatie, corporate sites.
 * 
 * STRUCTURE:
 * <footer class="footer footer--links" data-footer-variant="links">
 *   <div class="footer__container">
 *     <div class="footer__columns">
 *       <div class="footer__column">
 *         <h4 class="footer__column-title">Category</h4>
 *         <div class="footer__links">...</div>
 *       </div>
 *       <!-- 4-6 columns -->
 *     </div>
 *     <div class="footer__bottom">...</div>
 *   </div>
 * </footer>
 */

.footer--links {
  --footer-padding-y: var(--space-12);
}

.footer--links .footer__columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}

.footer--links .footer__column-title {
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

.footer--links .footer__link {
  padding: var(--space-1) 0;
}

/* Large desktop: 5 columns */
@media (min-width: 1200px) {
  .footer--links .footer__columns {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Desktop: 4 columns */
@media (min-width: 1025px) and (max-width: 1199px) {
  .footer--links .footer__columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet: 3 columns */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer--links .footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 columns */
@media (min-width: 481px) and (max-width: 768px) {
  .footer--links .footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small mobile: 1 column */
@media (max-width: 480px) {
  .footer--links .footer__columns {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer--links .footer__links {
    align-items: center;
  }
}

/* footers/minimal.css */
/**
 * FOOTER VARIANT: Minimal
 * 
 * Alleen copyright en essentiële legal links.
 * Ideaal voor: checkout flows, apps, landing pages.
 * 
 * STRUCTURE:
 * <footer class="footer footer--minimal" data-footer-variant="minimal">
 *   <div class="footer__container footer__bottom">
 *     <p class="footer__copyright">© 2026 Bedrijfsnaam</p>
 *     <div class="footer__legal-links">
 *       <a class="footer__legal-link">Privacy</a>
 *       <a class="footer__legal-link">Voorwaarden</a>
 *     </div>
 *   </div>
 * </footer>
 */

.footer--minimal {
  --footer-padding-y: var(--space-6);
  --footer-bg: transparent;
  border-top: 1px solid var(--border-subtle);
}

.footer--minimal .footer__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}

.footer--minimal .footer__bottom {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.footer--minimal .footer__copyright {
  font-size: var(--font-size-xs);
}

.footer--minimal .footer__legal-links {
  display: flex;
  gap: var(--space-4);
}

.footer--minimal .footer__legal-link {
  font-size: var(--font-size-xs);
}

/* Separator dot between links */
.footer--minimal .footer__legal-links .footer__legal-link:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-4);
  color: var(--text-tertiary);
}

/* Mobile: stack vertical */
@media (max-width: 480px) {
  .footer--minimal .footer__container {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .footer--minimal .footer__legal-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* footers/simple.css */
/**
 * FOOTER VARIANT: Simple
 * 
 * Eenvoudige footer met logo, korte beschrijving en links.
 * Ideaal voor: kleine webshops, startups, service pages.
 * 
 * STRUCTURE:
 * <footer class="footer footer--simple" data-footer-variant="simple">
 *   <div class="footer__container">
 *     <div class="footer__main">
 *       <div class="footer__brand">
 *         <a class="footer__logo">Logo</a>
 *         <p class="footer__description">...</p>
 *         <div class="footer__social">...</div>
 *       </div>
 *       <nav class="footer__nav">
 *         <a class="footer__link">Link</a>
 *       </nav>
 *     </div>
 *     <div class="footer__bottom">
 *       <p class="footer__copyright">© 2026</p>
 *     </div>
 *   </div>
 * </footer>
 */

.footer--simple {
  --footer-padding-y: var(--space-10);
}

.footer--simple .footer__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8);
}

.footer--simple .footer__brand {
  flex: 0 0 auto;
  max-width: 300px;
}

.footer--simple .footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer--simple .footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
}

/* Mobile */
@media (max-width: 768px) {
  .footer--simple .footer__main {
    flex-direction: column;
    text-align: center;
  }
  
  .footer--simple .footer__brand {
    max-width: 100%;
  }
  
  .footer--simple .footer__description {
    max-width: 100%;
  }
  
  .footer--simple .footer__social {
    justify-content: center;
  }
  
  .footer--simple .footer__nav {
    justify-content: center;
  }
}


/* ===== Component: navigation ===== */
/* navigation/_base.css */
/**
 * COMPONENT: Navigation - Base
 * Navigation patterns voor alle contexten
 * 
 * AI-NOTE: Navigation is cruciaal voor UX.
 * Admin: sidebar. Webshop: topbar. POS: minimal. QR: none.
 * 
 * VARIANTS: sidebar, topbar, mobile-menu
 */

/* ===== SIDEBAR (Admin) ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--admin-sidebar-width, 260px);
  
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  
  display: flex;
  flex-direction: column;
  
  z-index: var(--z-fixed);
  
  transition: width var(--duration-normal) var(--ease-out);
}

.sidebar--collapsed {
  width: var(--admin-sidebar-collapsed, 64px);
}

/* Sidebar Header (logo) */
.sidebar__header {
  display: flex;
  align-items: center;
  height: var(--admin-header-height, 64px);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}

.sidebar__logo {
  height: 32px;
  width: auto;
}

.sidebar--collapsed .sidebar__logo-text {
  display: none;
}

/* Sidebar Navigation */
.sidebar__nav {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.sidebar__section {
  margin-bottom: var(--space-4);
}

.sidebar__section-title {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar--collapsed .sidebar__section-title {
  display: none;
}

/* Nav Items */
.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  
  transition: 
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.sidebar__link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar__link.is-active {
  background: var(--accent-glow);
  color: var(--tenant-accent, var(--accent));
}

.sidebar__link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar__link-text {
  white-space: nowrap;
}

.sidebar--collapsed .sidebar__link-text {
  display: none;
}

/* Sidebar Footer */
.sidebar__footer {
  padding: var(--space-3);
  border-top: 1px solid var(--border);
}

/* ===== TOPBAR (Webshop) ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  height: var(--webshop-header-height, 72px);
  padding: 0 var(--space-4);
  
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.topbar__logo {
  height: 36px;
  width: auto;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.topbar__link {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  transition: color var(--transition-fast);
}

.topbar__link:hover {
  color: var(--text-primary);
}

.topbar__link.is-active {
  color: var(--tenant-accent, var(--accent));
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ===== MOBILE MENU ===== */
.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  .topbar__nav {
    display: none;
  }
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  
  background: var(--bg-surface);
  padding: var(--space-4);
  
  transform: translateX(calc(-100% * var(--dir-sign, 1)));
  transition: transform var(--duration-normal) var(--ease-out);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-menu__link {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
}

.mobile-menu__link:hover,
.mobile-menu__link.is-active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ===== BREADCRUMBS ===== */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs__link {
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
  color: var(--text-primary);
}

.breadcrumbs__separator {
  color: var(--border-strong);
}

.breadcrumbs__current {
  color: var(--text-primary);
}

/* navigation/main-nav.css */
/**
 * COMPONENT: Main Navigation Bar (SSoT)
 * Vaste navigatiebalk bovenaan elke pagina.
 * Dit is de ENIGE bron voor .main-nav base styling.
 *
 * Gebruikt door: admin, start, marketing (alle contexten).
 * Context-specifieke uitbreidingen (admin back button, autosave, dropdown)
 * staan in contexts/admin/navbar.css.
 *
 * STRUCTURE (markup SSoT in storefront):
 *   PagayoAdminWordmark — pagayo-storefront/src/client/components/common/PagayoAdminWordmark.tsx
 *   Zie ook DESIGN.md + ADMIN-UI-SOURCE-OF-TRUTH.md (brand wordmark).
 *
 * <nav class="main-nav">
 *   <a class="main-nav__logo"> … logo-p / logo-dot … </a>
 * </nav>
 */

/* =================================================================
   NAVBAR CONTAINER
   ================================================================= */

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  --main-nav-height: 56px;
  height: var(--main-nav-height);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  overflow: visible;
  max-width: 100vw;
}

/* =================================================================
   LOGO
   ================================================================= */

.main-nav__logo {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: var(--font-bold, 700);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.main-nav__logo .logo-p,
.main-nav__logo .logo-dot {
  color: var(--accent);
  font-weight: 800;
}

/* =================================================================
   COUNTRY INDICATOR
   ================================================================= */

.logo-country {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: var(--space-2);
  letter-spacing: 0;
}

/* =================================================================
   MENU BUTTON (hamburger)
   ================================================================= */

.main-nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: color 0.15s ease, background 0.15s ease;
}

.main-nav__menu:hover {
  color: var(--accent);
  background: var(--bg-hover);
}

/* navigation/mobile-menu.css */
/**
 * NAVIGATION: Mobile Menu
 * 
 * Full-screen mobile navigatiemenu.
 * Slide-in van links of overlay.
 * 
 * AI-NOTE: Gebruik voor mobile header navigatie.
 * Trigger via hamburger button in header.
 * 
 * STRUCTURE:
 * <div class="mobile-menu" data-open="false">
 *   <div class="mobile-menu__overlay"></div>
 *   <div class="mobile-menu__panel">
 *     <div class="mobile-menu__header">
 *       <a class="mobile-menu__logo">Logo</a>
 *       <button class="mobile-menu__close">×</button>
 *     </div>
 *     <nav class="mobile-menu__nav">
 *       <a class="mobile-menu__link">Home</a>
 *       <a class="mobile-menu__link active">Products</a>
 *       <div class="mobile-menu__accordion">
 *         <button class="mobile-menu__accordion-trigger">Categories</button>
 *         <div class="mobile-menu__accordion-content">
 *           <a class="mobile-menu__sublink">Category 1</a>
 *         </div>
 *       </div>
 *     </nav>
 *     <div class="mobile-menu__footer">
 *       <button class="btn btn--primary btn--full">Login</button>
 *     </div>
 *   </div>
 * </div>
 */

/* =================================================================
   MOBILE MENU CONTAINER
   ================================================================= */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
   OVERLAY
   ================================================================= */

.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--admin-v2-backdrop);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.mobile-menu[data-open="true"] .mobile-menu__overlay {
  opacity: 1;
}

/* =================================================================
   PANEL
   ================================================================= */

.mobile-menu__panel {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  bottom: 0;
  width: min(320px, 85vw);
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  transform: translateX(calc(-100% * var(--dir-sign, 1)));
  transition: transform var(--transition-normal);
  overflow: hidden;
}

.mobile-menu[data-open="true"] .mobile-menu__panel {
  transform: translateX(0);
}

/* Right slide variant */
.mobile-menu--right .mobile-menu__panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

.mobile-menu--right[data-open="true"] .mobile-menu__panel {
  transform: translateX(0);
}

/* =================================================================
   HEADER
   ================================================================= */

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-menu__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-menu__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* =================================================================
   NAVIGATION
   ================================================================= */

.mobile-menu__nav {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.mobile-menu__link:hover {
  background: var(--surface-hover);
}

.mobile-menu__link.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.mobile-menu__link-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-secondary);
}

/* =================================================================
   ACCORDION (Nested menu)
   ================================================================= */

.mobile-menu__accordion {
  margin: var(--space-1) 0;
}

.mobile-menu__accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-2);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.mobile-menu__accordion-trigger:hover {
  background: var(--surface-hover);
}

.mobile-menu__accordion-trigger::after {
  content: "›";
  font-size: 1.25rem;
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
}

.mobile-menu__accordion[data-open="true"] .mobile-menu__accordion-trigger::after {
  transform: rotate(90deg);
}

.mobile-menu__accordion-content {
  display: none;
  padding-left: var(--space-4);
}

.mobile-menu__accordion[data-open="true"] .mobile-menu__accordion-content {
  display: block;
}

.mobile-menu__sublink {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.mobile-menu__sublink:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* =================================================================
   FOOTER
   ================================================================= */

.mobile-menu__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.mobile-menu__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.mobile-menu__footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.mobile-menu__footer-link:hover {
  color: var(--text-primary);
}

/* navigation/sidebar.css */
/**
 * NAVIGATION: Sidebar
 * 
 * Admin/dashboard sidebar navigatie.
 * Collapsible op tablet/mobile.
 * 
 * AI-NOTE: Gebruik voor admin panels en dashboards.
 * Combineert met admin-layout voor volledige layout.
 * 
 * STRUCTURE:
 * <aside class="sidebar">
 *   <div class="sidebar__header">
 *     <a class="sidebar__logo">Logo</a>
 *     <button class="sidebar__collapse">←</button>
 *   </div>
 *   <nav class="sidebar__nav">
 *     <a class="sidebar__link">Dashboard</a>
 *     <a class="sidebar__link sidebar__link--active">Orders</a>
 *     <div class="sidebar__group">
 *       <span class="sidebar__group-title">Settings</span>
 *       <a class="sidebar__link">General</a>
 *     </div>
 *   </nav>
 *   <div class="sidebar__footer">
 *     <a class="sidebar__link">Logout</a>
 *   </div>
 * </aside>
 */

/* =================================================================
   SIDEBAR CONTAINER
   ================================================================= */

.sidebar {
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --sidebar-bg: var(--surface-primary);
  --sidebar-border: var(--border-subtle);
  
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-inline-end: 1px solid var(--sidebar-border);
  transition: width var(--transition-normal);
  overflow: hidden;
}

.sidebar--collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar--collapsed .sidebar__text,
.sidebar--collapsed .sidebar__group-title {
  opacity: 0;
  visibility: hidden;
}

/* =================================================================
   SIDEBAR HEADER
   ================================================================= */

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
  min-height: var(--space-16);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.sidebar__logo-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.sidebar__collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar__collapse:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.sidebar--collapsed .sidebar__collapse {
  transform: rotate(180deg);
}

/* =================================================================
   SIDEBAR NAVIGATION
   ================================================================= */

.sidebar__nav {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.sidebar__link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.sidebar__link--active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.sidebar__link--active:hover {
  background: var(--accent-subtle);
}

.sidebar__link-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.sidebar__link-badge {
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

/* =================================================================
   SIDEBAR GROUPS
   ================================================================= */

.sidebar__group {
  margin-top: var(--space-4);
}

.sidebar__group-title {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity var(--transition-fast);
}

/* =================================================================
   SIDEBAR FOOTER
   ================================================================= */

.sidebar__footer {
  padding: var(--space-3);
  border-top: 1px solid var(--sidebar-border);
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.sidebar__user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar__user-info {
  flex: 1;
  min-width: 0;
}

.sidebar__user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-role {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* =================================================================
   MOBILE OVERLAY
   ================================================================= */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--admin-v2-backdrop);
  z-index: var(--z-overlay);
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    z-index: var(--z-modal);
    transform: translateX(calc(-100% * var(--dir-sign, 1)));
  }
  
  .sidebar--open {
    transform: translateX(0);
  }
  
  .sidebar--open + .sidebar-overlay {
    display: block;
  }
}

/* navigation/topbar.css */
/**
 * NAVIGATION: Topbar
 * 
 * Horizontale navigatiebalk, vaak onder de header.
 * Voor secundaire navigatie of tabs.
 * 
 * AI-NOTE: Gebruik voor category filters, tab navigatie,
 * of secundaire menu's binnen een pagina.
 * 
 * STRUCTURE:
 * <nav class="topbar">
 *   <div class="topbar__nav">
 *     <a class="topbar__link active">All</a>
 *     <a class="topbar__link">Pending</a>
 *     <a class="topbar__link">Completed</a>
 *   </div>
 *   <div class="topbar__actions">
 *     <button class="btn btn--sm">Filter</button>
 *   </div>
 * </nav>
 */

/* =================================================================
   TOPBAR CONTAINER
   ================================================================= */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.topbar--sticky {
  position: sticky;
  top: var(--space-16); /* Below header */
  z-index: var(--z-sticky);
}

/* =================================================================
   TOPBAR NAVIGATION
   ================================================================= */

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.topbar__nav::-webkit-scrollbar {
  display: none;
}

.topbar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.topbar__link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.topbar__link.active,
.topbar__link[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-subtle);
}

.topbar__link-count {
  padding: var(--space-1) var(--space-2);
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.topbar__link.active .topbar__link-count {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* =================================================================
   TOPBAR ACTIONS
   ================================================================= */

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* =================================================================
   TOPBAR VARIANTS
   ================================================================= */

/* Pills style */
.topbar--pills .topbar__link {
  border-radius: var(--radius-full);
}

/* Underline style */
.topbar--underline {
  border-bottom: none;
}

.topbar--underline .topbar__link {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding-bottom: var(--space-3);
  margin-bottom: -2px;
}

.topbar--underline .topbar__link.active {
  background: transparent;
  border-bottom-color: var(--accent);
}

/* Compact */
.topbar--compact {
  padding: var(--space-1) var(--space-2);
}

.topbar--compact .topbar__link {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 767px) {
  .topbar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  
  .topbar__nav {
    order: 2;
    width: 100%;
  }
  
  .topbar__actions {
    order: 1;
    width: 100%;
    justify-content: flex-end;
  }
}


/* ===== Component: tables ===== */
/* tables/_base.css */
/**
 * COMPONENT: Tables - Base
 * Data table styling voor admin interfaces
 * 
 * AI-NOTE: Tables zijn voor data-heavy admin views.
 * Sorteerbaar, filterbaar, responsive.
 * 
 * VARIANTS: data-table, simple-table
 */

/* ===== BASE TABLE ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

/* ===== TABLE HEADER ===== */
.table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Sortable header */
.table th.sortable {
  cursor: pointer;
  user-select: none;
}

.table th.sortable:hover {
  color: var(--text-primary);
}

.table th.sorted {
  color: var(--tenant-accent, var(--accent));
}

/* ===== TABLE BODY ===== */
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

/* ===== ROW STATES ===== */
.table tbody tr {
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

.table tbody tr.selected {
  background: var(--accent-glow);
}

/* Clickable row */
.table tbody tr.clickable {
  cursor: pointer;
}

/* ===== TABLE WRAPPER ===== */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.table-wrapper .table th:first-child,
.table-wrapper .table td:first-child {
  padding-left: var(--space-5);
}

.table-wrapper .table th:last-child,
.table-wrapper .table td:last-child {
  padding-right: var(--space-5);
}

/* ===== DATA TABLE (with actions) ===== */
.data-table {
  background: var(--bg-surface);
}

.data-table .table-actions {
  display: flex;
  gap: var(--space-2);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.data-table tr:hover .table-actions {
  opacity: 1;
}

/* ===== SIMPLE TABLE (minimal) ===== */
.simple-table {
  border: none;
}

.simple-table th {
  background: transparent;
  border-bottom: 2px solid var(--border);
}

.simple-table tr:last-child td {
  border-bottom: none;
}

/* ===== TABLE PAGINATION ===== */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.table-pagination__info {
  /* "Showing 1-10 of 100" */
}

.table-pagination__controls {
  display: flex;
  gap: var(--space-2);
}

/* ===== EMPTY STATE ===== */
.table-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
}

.table-empty__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  opacity: 0.5;
}


/* ===== Component: modals ===== */
/* modals/_base.css */
/**
 * COMPONENT: Modals - Base
 * Overlay dialogs voor acties en content
 * 
 * AI-NOTE: Modals onderbreken de workflow voor belangrijke acties.
 * Gebruik spaarzaam. Zorg voor goede focus trap en escape handling.
 * 
 * VARIANTS: dialog, drawer, confirm
 */

/* ===== MODAL BACKDROP ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background-color: var(--admin-v2-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.modal-backdrop.is-open {
  opacity: 1;
}

/* ===== BASE MODAL ===== */
.modal {
  position: fixed;
  z-index: var(--z-modal);
  
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  
  max-height: calc(100vh - var(--space-8));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  /* Animation */
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: 
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.modal.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ===== MODAL POSITIONING ===== */
.modal--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
}

.modal--center.is-open {
  transform: translate(-50%, -50%) scale(1);
}

/* ===== SIZE VARIANTS ===== */
.modal--sm {
  width: 90%;
  max-width: 400px;
}

.modal--md {
  width: 90%;
  max-width: 560px;
}

.modal--lg {
  width: 90%;
  max-width: 800px;
}

.modal--xl {
  width: 92%;
  max-width: 1600px;
}

.modal--full {
  width: calc(100% - var(--space-8));
  height: calc(100% - var(--space-8));
  max-width: 1200px;
}

/* ===== MODAL SECTIONS ===== */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.modal__close {
  width: 40px;
  height: 40px;
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--admin-v2-color-surface-muted);
  cursor: pointer;
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.modal__close:hover {
  background: var(--admin-v2-color-surface-hover);
  border-color: color-mix(in srgb, var(--text-secondary) 28%, var(--border));
  color: var(--text-primary);
}

.modal__close:focus-visible {
  outline: 2px solid var(--admin-v2-color-primary);
  outline-offset: 2px;
}

.modal__body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.modal__footer-secondary,
.modal__footer-primary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ===== DRAWER VARIANT ===== */
.modal--drawer {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  top: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  max-width: 480px;
  max-height: none;
  
  transform: translateX(100%);
}

.modal--drawer.is-open {
  transform: translateX(0);
}

.modal--drawer-left {
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  left: 0;
  right: auto;
  
  transform: translateX(-100%);
}

.modal--drawer-left.is-open {
  transform: translateX(0);
}

/* ===== CONFIRM DIALOG ===== */
.modal--confirm {
  text-align: center;
}

.modal--confirm .modal__body {
  padding: var(--space-6);
}

.modal--confirm .modal__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--warning);
}

.modal--confirm .modal__message {
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.modal--confirm .modal__footer {
  justify-content: center;
}

/* ===== MODAL WITH FORM ===== */
.modal--form .modal__body {
  padding: 0;
}

.modal--form .form {
  padding: var(--space-5);
}

/* modals/confirm.css */
/**
 * MODAL: Confirm
 * 
 * Simpele bevestigingsdialoog.
 * Voor delete, logout, destructieve acties.
 * 
 * AI-NOTE: Gebruik voor simpele ja/nee beslissingen.
 * Niet voor complexe formulieren (gebruik dialog).
 * 
 * VARIANTS:
 * - default: Neutraal bevestigen
 * - danger: Destructieve actie (rood)
 * - warning: Waarschuwing (oranje)
 * 
 * STRUCTURE:
 * <div class="confirm confirm--danger" data-open="false">
 *   <div class="confirm__overlay"></div>
 *   <div class="confirm__panel">
 *     <div class="confirm__icon">⚠️</div>
 *     <h2 class="confirm__title">Delete Order?</h2>
 *     <p class="confirm__message">This action cannot be undone.</p>
 *     <div class="confirm__actions">
 *       <button class="btn">Cancel</button>
 *       <button class="btn btn--destructive">Delete</button>
 *     </div>
 *   </div>
 * </div>
 */

/* =================================================================
   CONFIRM CONTAINER
   ================================================================= */

.confirm {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  visibility: hidden;
  pointer-events: none;
}

.confirm[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
   OVERLAY
   ================================================================= */

.confirm__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--admin-v2-backdrop);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.confirm[data-open="true"] .confirm__overlay {
  opacity: 1;
}

/* =================================================================
   PANEL
   ================================================================= */

.confirm__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: var(--space-6);
  background: var(--surface-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  text-align: center;
  transform: scale(0.95);
  opacity: 0;
  transition: all var(--transition-normal);
}

.confirm[data-open="true"] .confirm__panel {
  transform: scale(1);
  opacity: 1;
}

/* =================================================================
   ICON
   ================================================================= */

.confirm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  font-size: 1.5rem;
}

/* Danger variant */
.confirm--danger .confirm__icon {
  background: var(--error-subtle);
  color: var(--error);
}

/* Warning variant */
.confirm--warning .confirm__icon {
  background: var(--warning-subtle);
  color: var(--warning);
}

/* Success variant */
.confirm--success .confirm__icon {
  background: var(--success-subtle);
  color: var(--success);
}

/* Info variant */
.confirm--info .confirm__icon {
  background: var(--info-subtle);
  color: var(--info);
}

/* =================================================================
   CONTENT
   ================================================================= */

.confirm__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.confirm__message {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* =================================================================
   ACTIONS
   ================================================================= */

.confirm__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.confirm__actions .btn {
  flex: 1;
  max-width: 140px;
}

/* Stacked actions */
.confirm--stacked .confirm__actions {
  flex-direction: column;
}

.confirm--stacked .confirm__actions .btn {
  max-width: none;
}

/* =================================================================
   LOADING STATE
   ================================================================= */

.confirm--loading .confirm__panel {
  pointer-events: none;
}

.confirm--loading .confirm__actions .btn {
  opacity: 0.6;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 479px) {
  .confirm__panel {
    padding: var(--space-5);
  }
  
  .confirm__actions {
    flex-direction: column;
  }
  
  .confirm__actions .btn {
    max-width: none;
  }
}

/* modals/dialog.css */
/**
 * MODAL: Dialog
 * 
 * Centered modal dialoog voor formulieren, content, etc.
 * Met overlay backdrop.
 * 
 * AI-NOTE: Gebruik voor formulieren, confirmaties met veel content,
 * of complexe interacties die focus vereisen.
 * 
 * STRUCTURE:
 * <div class="dialog" data-open="false">
 *   <div class="dialog__overlay"></div>
 *   <div class="dialog__container">
 *     <div class="dialog__panel">
 *       <div class="dialog__header">
 *         <h2 class="dialog__title">Title</h2>
 *         <button class="dialog__close">×</button>
 *       </div>
 *       <div class="dialog__body">Content</div>
 *       <div class="dialog__footer">
 *         <button class="btn">Cancel</button>
 *         <button class="btn btn--primary">Save</button>
 *       </div>
 *     </div>
 *   </div>
 * </div>
 */

/* =================================================================
   DIALOG CONTAINER
   ================================================================= */

.dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.dialog[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
   OVERLAY
   ================================================================= */

.dialog__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--admin-v2-backdrop);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.dialog[data-open="true"] .dialog__overlay {
  opacity: 1;
}

/* =================================================================
   CONTAINER (Scrollable wrapper)
   ================================================================= */

.dialog__container {
  position: relative;
  max-height: 100vh;
  max-width: 100vw;
  padding: var(--space-4);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =================================================================
   PANEL
   ================================================================= */

.dialog__panel {
  width: 100%;
  max-width: 500px;
  background: var(--surface-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transform: scale(0.95);
  opacity: 0;
  transition: all var(--transition-normal);
}

.dialog[data-open="true"] .dialog__panel {
  transform: scale(1);
  opacity: 1;
}

/* Size variants */
.dialog--sm .dialog__panel {
  max-width: 400px;
}

.dialog--lg .dialog__panel {
  max-width: 700px;
}

.dialog--xl .dialog__panel {
  max-width: 900px;
}

.dialog--full .dialog__panel {
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100vh - var(--space-8));
}

/* =================================================================
   HEADER
   ================================================================= */

.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.dialog__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.dialog__subtitle {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.dialog__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* =================================================================
   BODY
   ================================================================= */

.dialog__body {
  padding: var(--space-5);
  color: var(--text-primary);
}

.dialog__body--scroll {
  max-height: 60vh;
  overflow-y: auto;
}

/* =================================================================
   FOOTER
   ================================================================= */

.dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dialog__footer--split {
  justify-content: space-between;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 639px) {
  .dialog__container {
    padding: var(--space-2);
    align-items: flex-end;
  }
  
  .dialog__panel {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  
  .dialog__body {
    padding: var(--space-4);
  }
  
  .dialog__footer {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .dialog__footer .btn {
    width: 100%;
  }
}

/* modals/drawer.css */
/**
 * MODAL: Drawer
 * 
 * Slide-in panel van de zijkant.
 * Voor settings, filters, cart, etc.
 * 
 * AI-NOTE: Gebruik voor secundaire content die niet
 * de volle focus nodig heeft. Cart drawer, filter panel, etc.
 * 
 * STRUCTURE:
 * <div class="drawer" data-open="false" data-position="right">
 *   <div class="drawer__overlay"></div>
 *   <div class="drawer__panel">
 *     <div class="drawer__header">
 *       <h2 class="drawer__title">Shopping Cart</h2>
 *       <button class="drawer__close">×</button>
 *     </div>
 *     <div class="drawer__body">Content</div>
 *     <div class="drawer__footer">
 *       <button class="btn btn--primary btn--full">Checkout</button>
 *     </div>
 *   </div>
 * </div>
 */

/* =================================================================
   DRAWER CONTAINER
   ================================================================= */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  pointer-events: none;
}

.drawer[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
   OVERLAY
   ================================================================= */

.drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--admin-v2-backdrop);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.drawer[data-open="true"] .drawer__overlay {
  opacity: 1;
}

/* =================================================================
   PANEL
   ================================================================= */

.drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(400px, 90vw);
  background: var(--surface-primary);
  box-shadow: var(--shadow-xl);
  transition: transform var(--transition-normal);
}

/* Right position (default) */
.drawer[data-position="right"] .drawer__panel,
.drawer:not([data-position]) .drawer__panel {
  right: 0;
  transform: translateX(100%);
}

.drawer[data-position="right"][data-open="true"] .drawer__panel,
.drawer:not([data-position])[data-open="true"] .drawer__panel {
  transform: translateX(0);
}

/* Left position */
.drawer[data-position="left"] .drawer__panel {
  left: 0;
  transform: translateX(-100%);
}

.drawer[data-position="left"][data-open="true"] .drawer__panel {
  transform: translateX(0);
}

/* Bottom position (mobile-friendly) */
.drawer[data-position="bottom"] .drawer__panel {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%);
}

.drawer[data-position="bottom"][data-open="true"] .drawer__panel {
  transform: translateY(0);
}

/* Size variants */
.drawer--sm .drawer__panel {
  width: min(320px, 90vw);
}

.drawer--lg .drawer__panel {
  width: min(600px, 90vw);
}

.drawer--xl .drawer__panel {
  width: min(800px, 90vw);
}

/* =================================================================
   HEADER
   ================================================================= */

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.drawer__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.drawer__subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.drawer__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* =================================================================
   BODY
   ================================================================= */

.drawer__body {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.drawer__body--no-padding {
  padding: 0;
}

/* =================================================================
   FOOTER
   ================================================================= */

.drawer__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  flex-shrink: 0;
}

.drawer__footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.drawer__footer-row:last-child {
  margin-bottom: 0;
}

.drawer__footer-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.drawer__footer-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.drawer__footer-total {
  font-size: var(--font-size-lg);
}

/* =================================================================
   DRAG HANDLE (for bottom drawer)
   ================================================================= */

.drawer__drag-handle {
  display: none;
  width: 36px;
  height: 4px;
  margin: var(--space-2) auto;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
}

.drawer[data-position="bottom"] .drawer__drag-handle {
  display: block;
}


/* ===== Component: social-auth ===== */
/* social-auth/social-auth.css */
/* theme-literal-exception: external-oauth-brand — Wave B allowed identity/preview/effect literals */
/**
 * Social Auth Components (SSoT)
 * Gedeelde styling voor social login buttons en dividers.
 * Gebruikt in: start context (login/register), admin context (admin login)
 */

/* ===== AUTH DIVIDER ("of" separator) ===== */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--text-disabled);
  font-size: var(--text-xs-plus);
  text-transform: lowercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* ===== SOCIAL AUTH BUTTONS ===== */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm-plus);
  font-weight: var(--font-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.social-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Google: wit met subtle border (Google HIG) */
.social-btn--google {
  background: white;
  color: #1f1f1f;
  border: 1px solid var(--border-light);
}

.social-btn--google:hover {
  background: #f8f8f8;
  border-color: var(--text-disabled);
}

.social-btn--google:active {
  background: #f0f0f0;
  transform: scale(0.98);
}


/* ===== Component: guided-choice ===== */
/* guided-choice/_base.css */
/**
 * COMPONENT: Guided Choice - Base
 * Wizard-style choice helper for storefront and admin surfaces.
 *
 * AI-NOTE: Keuzehulpen — step-by-step option selection with ranked results.
 * Uses semantic tokens only; no tenant/branch-specific styling.
 *
 * ELEMENTS: progress, step, options, result cards, matrix, warning
 * STATES: default, selected, best-match, alternate, no-match
 */

/* ===== ROOT ===== */
.pg-guided-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.pg-guided-choice--experience,
.pg-guided-choice--index {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.pg-guided-choice__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 42rem;
}

.pg-guided-choice__eyebrow {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pg-guided-choice__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.pg-guided-choice__lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.pg-guided-choice__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pg-guided-choice__index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}

.pg-guided-choice__index-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5rem;
  padding: var(--space-5);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  text-decoration: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.pg-guided-choice__index-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ===== PROGRESS ===== */
.pg-guided-choice__progress {
  --pg-guided-choice-progress: 0%;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.pg-guided-choice__progress:not(:has(.pg-guided-choice__steps))::before {
  content: "";
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border);
}

.pg-guided-choice__progress-bar {
  position: absolute;
  left: 0;
  height: 4px;
  width: var(--pg-guided-choice-progress);
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width var(--transition-normal);
}

.pg-guided-choice__steps {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-guided-choice__steps::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.875rem;
  left: 0.875rem;
  z-index: 0;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
}

.pg-guided-choice__step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  background: var(--bg-surface);
}

.pg-guided-choice__step-dot--current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent, var(--admin-v2-color-surface));
}

.pg-guided-choice__step-dot--done {
  border-color: var(--accent);
  color: var(--accent);
}

.pg-guided-choice__progress-label {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== STEP ===== */
.pg-guided-choice__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.pg-guided-choice__step-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.pg-guided-choice__step-title:focus {
  outline: none;
}

.pg-guided-choice__step-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pg-guided-choice__step-image {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.pg-guided-choice__step-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-normal);
}

/* ===== OPTIONS ===== */
.pg-guided-choice__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pg-guided-choice__option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.pg-guided-choice__option-thumb {
  display: block;
  flex-shrink: 0;
  width: 4.5rem;
  height: 3.5rem;
  overflow: hidden;
  background: var(--bg-hover);
  border-radius: var(--radius-md);
}

.pg-guided-choice__option-thumb--empty {
  background:
    linear-gradient(135deg, var(--bg-hover) 0%, var(--border) 100%);
}

.pg-guided-choice__option-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-guided-choice__option-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pg-guided-choice__option-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  color: var(--admin-v2-color-text-inverse);
  background: var(--accent);
  border-radius: var(--radius-full);
}

.pg-guided-choice__option:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.pg-guided-choice__option:disabled {
  cursor: wait;
  opacity: 0.72;
}

.pg-guided-choice__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pg-guided-choice__option:active {
  transform: scale(0.995);
}

.pg-guided-choice__option--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--accent-glow);
}

.pg-guided-choice__option-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.pg-guided-choice__option-description {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ===== RESULT GRID ===== */
.pg-guided-choice__result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.pg-guided-choice--results .pg-guided-choice__result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pg-guided-choice__results-stage {
  min-width: 0;
}

.pg-guided-choice--immersive.pg-guided-choice--results .pg-guided-choice__results-stage {
  position: relative;
  z-index: 1;
  grid-column: 2;
  align-self: start;
  padding-top: calc(var(--space-4) + 2.25rem + var(--space-4));
  padding-inline: var(--space-2);
}

.pg-guided-choice--immersive.pg-guided-choice--results.pg-guided-choice--panel-right
  .pg-guided-choice__results-stage {
  grid-column: 1;
}

.pg-guided-choice--results .pg-guided-choice__result-card {
  min-width: 0;
  box-shadow: var(--shadow-md, var(--shadow-sm));
}

/* ===== RESULT CARD ===== */
.pg-guided-choice__result-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.pg-guided-choice__result-card--best {
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success);
}

.pg-guided-choice__result-card--alt {
  border-color: var(--border-strong);
  opacity: 0.95;
}

.pg-guided-choice__result-card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.pg-guided-choice__result-card-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ===== REASONS ===== */
.pg-guided-choice__reasons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-guided-choice__reasons li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.pg-guided-choice__reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--success);
}

.pg-guided-choice__result-card--alt .pg-guided-choice__reasons li::before {
  background: var(--text-muted);
}

/* ===== TRADEOFF ===== */
.pg-guided-choice__tradeoff {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  line-height: var(--leading-normal);
}

.pg-guided-choice__tradeoff-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

/* ===== NO MATCH ===== */
.pg-guided-choice__no-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.pg-guided-choice__no-match-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.pg-guided-choice__no-match-message {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 36ch;
  margin: 0;
  line-height: var(--leading-normal);
}

/* ===== MATRIX (admin decision matrix) ===== */
.pg-guided-choice__matrix {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.pg-guided-choice__matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.pg-guided-choice__matrix th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.pg-guided-choice__matrix td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.pg-guided-choice__matrix tbody tr:last-child td {
  border-bottom: none;
}

.pg-guided-choice__matrix tbody tr:hover {
  background: var(--bg-hover);
}

.pg-guided-choice__matrix-cell--match {
  color: var(--success);
  font-weight: var(--font-medium);
}

.pg-guided-choice__matrix-cell--miss {
  color: var(--text-muted);
}

/* ===== WARNING ===== */
.pg-guided-choice__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--warning);
  background: var(--warning-dim);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
}

.pg-guided-choice__warning-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.pg-guided-choice__warning-content {
  flex: 1;
  min-width: 0;
}

.pg-guided-choice__warning-title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

/* ===== IMMERSIVE SHELL ===== */
body[data-page-type="guided-choice"] #header-mount,
body[data-page-type="guided-choice"] #footer-mount,
body[data-page-type="guided-choice"] #cart-drawer-mount {
  display: none !important;
}

.pg-guided-choice--immersive {
  position: relative;
  display: grid;
  grid-template-columns: minmax(20rem, 32rem) 1fr;
  align-items: start;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: var(--space-6);
  isolation: isolate;
  background: var(--bg);
}

.pg-guided-choice--panel-right {
  grid-template-columns: 1fr minmax(20rem, 32rem);
}

.pg-guided-choice--panel-right .pg-guided-choice__panel {
  grid-column: 2;
}

.pg-guided-choice__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-guided-choice--crop-top .pg-guided-choice__atmosphere {
  object-position: center top;
}

.pg-guided-choice--crop-center .pg-guided-choice__atmosphere {
  object-position: center;
}

.pg-guided-choice__chrome {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(20rem, 32rem) 1fr;
  align-items: start;
  padding: var(--space-4);
  pointer-events: none;
}

.pg-guided-choice--panel-right .pg-guided-choice__chrome {
  grid-template-columns: 1fr minmax(20rem, 32rem);
}

.pg-guided-choice__atmosphere-chrome {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.pg-guided-choice--panel-right .pg-guided-choice__atmosphere-chrome {
  grid-column: 1;
}

.pg-guided-choice__brand {
  display: inline-flex;
  align-items: center;
  max-width: 12rem;
  color: var(--text-on-accent, var(--admin-v2-color-surface));
  font-weight: var(--font-semibold);
  text-decoration: none;
  pointer-events: auto;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--admin-v2-color-text) 45%, transparent);
}

.pg-guided-choice__brand img {
  display: block;
  max-width: 8rem;
  max-height: 2rem;
  object-fit: contain;
}

.pg-guided-choice__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  color: var(--text-primary);
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  text-decoration: none;
  pointer-events: auto;
}

.pg-guided-choice__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: calc(100dvh - (var(--space-6) * 2));
  max-width: 32rem;
  padding: var(--space-8);
  background: var(--bg-surface);
  border-radius: var(--radius-xl, var(--radius-lg));
  box-shadow: var(--shadow-lg, var(--shadow-md));
}

.pg-guided-choice--immersive .pg-guided-choice__hero {
  max-width: none;
}

.pg-guided-choice--immersive .pg-guided-choice__title {
  font-size: var(--text-4xl, var(--text-3xl));
}

.pg-guided-choice--immersive .pg-guided-choice__step {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.pg-guided-choice__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: var(--font-medium);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}

.pg-guided-choice__back:disabled {
  cursor: wait;
  opacity: 0.6;
}

.pg-guided-choice__next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.pg-guided-choice__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.pg-guided-choice__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pg-guided-choice__result-card--best {
  padding: var(--space-5);
}

.pg-guided-choice__why-title {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .pg-guided-choice__option,
  .pg-guided-choice__result-card,
  .pg-guided-choice__progress-bar {
    transition: none;
  }

  .pg-guided-choice__option:active {
    transform: none;
  }
}

@media (max-width: 47.99rem) {
  .pg-guided-choice--experience,
  .pg-guided-choice--index {
    padding: var(--space-5) var(--space-3);
  }

  .pg-guided-choice--immersive {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .pg-guided-choice--immersive .pg-guided-choice__atmosphere {
    position: relative;
    height: 10rem;
    flex-shrink: 0;
  }

  .pg-guided-choice--immersive .pg-guided-choice__chrome {
    display: flex;
    inset: 0 0 auto 0;
    height: 10rem;
    padding: var(--space-3) var(--space-4);
  }

  .pg-guided-choice--immersive .pg-guided-choice__atmosphere-chrome {
    display: flex;
    flex: 1 1 auto;
    grid-column: auto;
    width: 100%;
  }

  .pg-guided-choice--immersive .pg-guided-choice__panel {
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: -1.25rem;
  }

  .pg-guided-choice--immersive.pg-guided-choice--results .pg-guided-choice__panel {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .pg-guided-choice--immersive.pg-guided-choice--results .pg-guided-choice__results-stage {
    grid-column: auto;
    padding: 0 var(--space-3) var(--space-5);
    margin-top: 0;
    background: var(--bg-surface);
  }

  .pg-guided-choice__title {
    font-size: var(--text-2xl);
  }

  .pg-guided-choice__options,
  .pg-guided-choice__result-grid,
  .pg-guided-choice--results .pg-guided-choice__result-grid,
  .pg-guided-choice__index-grid {
    grid-template-columns: 1fr;
  }

  .pg-guided-choice__result-card .btn--primary {
    position: sticky;
    bottom: var(--space-3);
    width: 100%;
  }
}



}

@layer contexts {
/**
 * CONTEXT: Admin
 * Base styling voor het admin/beheer panel
 * 
 * AI-NOTE: Admin context is voor tenant beheerders.
 * Kenmerken:
 * - Sidebar navigatie
 * - Data-heavy layouts (tabellen, forms)
 * - Dark theme optimized
 * - AI assistant panel
 * 
 * LAYOUTS:
 * - Dashboard (metrics, charts, quick actions)
 * - Sidebar layout (nav + content)
 * - Full-width (tables, detail views)
 */

/* ===== ADMIN-SPECIFIC TOKENS ===== */
:root {
  /* Sidebar dimensions */
  --admin-sidebar-width: 260px;
  --admin-sidebar-collapsed: 64px;
  
  /* Header height */
  --admin-header-height: 64px;
  
  /* Content padding */
  --admin-content-padding: var(--space-6);
  
  /* Table row height — afgeleid van control sizing */
  --admin-table-row-height: var(--control-height-lg);

  /* ===== ADMIN CONTROL HEIGHTS ===== */
  --admin-control-compact: 36px;           /* toolbar actions, pills, compact buttons */
  /* Lucide (stroke icons) in icon-only workspace toolbar pills — align with toolbar label scale */
  --admin-toolbar-inline-icon-size: 16px;
  /* One rhythm: search + single-line fields match button height (multi-line textareas stay taller). */
  --admin-control-search: var(--admin-control-compact);
  --admin-control-filter: 38px;            /* filter dropdown buttons */
  --admin-control-field: var(--admin-control-compact); /* form inputs + selects */
  --admin-control-lg: 44px;               /* sidebar nav items, large actions */
  /* Horizontal padding inside inline workspace controls (inputs, tabs, chips) */
  --admin-control-inline-padding: 12px;

  /* ===== ADMIN SPACING ===== */
  --admin-card-padding-x: var(--space-5);  /* 20px — horizontal card padding */
  --admin-card-padding-y: var(--space-4);  /* 16px — vertical card padding */
  --admin-section-gap: var(--space-4);     /* 16px — gap between sections */
  /* Between stacked fields (input → next label). TailAdmin: clearly larger than label→control. */
  --admin-form-field-gap: var(--admin-v2-space-6);  /* 24px */
  --admin-toolbar-gap: 14px;              /* gap between toolbar items */
  --admin-list-row-padding-y: 12px;       /* vertical padding in list rows */
  --admin-list-row-padding-x: 14px;       /* horizontal padding in list rows */

  /* Workspace master-detail: linker lijstkolom (alle admin list/workspace-pagina's) */
  --admin-workspace-list-col-width: 300px;

  /*
   * Admin workspace modal shell (SSoT) — Assistent (#69), BlockEditModal, Pagayo ideas.
   * Class: .modal--admin-workspace in account-navigation.css.
   */
  --admin-workspace-modal-width: min(96vw, 1280px);
  --admin-workspace-modal-max-width: 1280px;
  --admin-workspace-modal-height: min(720px, calc(100vh - var(--space-8)));

  /*
   * ADMIN BORDERS & WASH (Wave E) — Light paint lives in
   * `tokens/profiles/admin-light.css` (--admin-border-* / --admin-bg-wash).
   * Do not reintroduce appearance literals here.
   */

  /* ===== ADMIN BORDER RADIUS ===== */
  --admin-radius-control: 10px;           /* buttons, inputs, toolbar actions */
  --admin-radius-card: 14px;              /* cards, panels, modals */
  --admin-radius-pill: 999px;             /* pill-shaped elements */
  --admin-radius-sm: 6px;                /* compact elements, badges, small controls */
  --admin-radius-md: 12px;               /* medium panels, dropdowns, modals */

  /* ===== ADMIN V2 LIGHT-SKIN TOKENS =====
   * Shared UI language lives in `src/tokens/pg-ui.css` as `--pg-ui-*` (SSoT).
   * The `--admin-v2-*` names below are aliases so existing admin CSS keeps working.
   * Contract direction: consumer → semantic token → theme profile (Admin Light).
   * Brand (primary / brand-gold) is separate from semantic state (danger ≠ gold).
   *
   * Admin-shell chrome geometry further down (zone menu widths, topbar heights)
   * is admin-only; shared colors must alias `--pg-ui-*`, not literals.
   */

  /* Surfaces */
  --admin-v2-color-bg: var(--pg-ui-color-bg);
  --admin-v2-color-app-bg: var(--pg-ui-color-app-bg);
  --admin-v2-color-surface: var(--pg-ui-color-surface);
  --admin-v2-color-surface-muted: var(--pg-ui-color-surface-muted);
  --admin-v2-color-surface-raised: var(--pg-ui-color-surface-raised);
  --admin-v2-color-surface-overlay: var(--pg-ui-color-surface-overlay);
  --admin-v2-color-surface-hover: var(--pg-ui-color-surface-hover);
  --admin-v2-color-surface-selected: var(--pg-ui-color-surface-selected);
  --admin-v2-color-surface-disabled: var(--pg-ui-color-surface-disabled);
  --admin-v2-color-text: var(--pg-ui-color-text);
  --admin-v2-color-text-muted: var(--pg-ui-color-text-muted);
  --admin-v2-color-text-soft: var(--pg-ui-color-text-soft);
  --admin-v2-color-text-inverse: var(--pg-ui-color-text-inverse);
  --admin-v2-color-text-disabled: var(--pg-ui-color-text-disabled);
  --admin-v2-color-text-link: var(--pg-ui-color-text-link);
  --admin-v2-color-primary: var(--pg-ui-color-primary);
  --admin-v2-color-primary-contrast: var(--pg-ui-color-primary-contrast);
  --admin-v2-color-primary-hover: var(--pg-ui-color-primary-hover);
  --admin-v2-color-primary-active: var(--pg-ui-color-primary-active);
  --admin-v2-color-primary-soft: var(--pg-ui-color-primary-soft);
  --admin-v2-color-accent: var(--pg-ui-color-accent);
  --admin-v2-color-success-border: var(--pg-ui-color-success-border);
  --admin-v2-color-success-text: var(--pg-ui-color-success-text);

  --admin-v2-color-danger: var(--admin-v2-state-danger-text);
  --admin-v2-color-focus: var(--admin-v2-color-primary);
  --admin-v2-primary: var(--admin-v2-color-primary);
  --admin-v2-color-danger-text: var(--pg-ui-color-danger-text);

  /* Borders and focus */
  --admin-v2-border-subtle: var(--pg-ui-border-subtle);
  --admin-v2-border-default: var(--pg-ui-border-default);
  --admin-v2-border-strong: var(--pg-ui-border-strong);
  --admin-v2-border-active: var(--pg-ui-border-active);
  --admin-v2-focus-ring: var(--pg-ui-focus-ring);

  /* Radius */
  --admin-v2-radius-xs: var(--pg-ui-radius-xs);
  --admin-v2-radius-sm: var(--pg-ui-radius-sm);
  --admin-v2-radius-md: var(--pg-ui-radius-md);
  --admin-v2-radius-lg: var(--pg-ui-radius-lg);
  --admin-v2-radius-xl: var(--pg-ui-radius-xl);
  --admin-v2-radius-pill: var(--pg-ui-radius-pill);
  --admin-v2-radius-control: var(--pg-ui-radius-control);
  --admin-v2-radius-card: var(--pg-ui-radius-card);
  --admin-v2-radius-panel: var(--pg-ui-radius-panel);
  --admin-v2-radius-sheet: var(--pg-ui-radius-sheet);
  --admin-v2-radius-badge: var(--pg-ui-radius-badge);
  --admin-v2-radius-interactive: var(--pg-ui-radius-interactive);
  --admin-v2-radius-label: var(--pg-ui-radius-label);

  /* Shell chrome — topbar/contextbar heights set after interactive-control tokens */
  --admin-v2-zone-menu-width: 240px;
  --admin-v2-zone-trigger-min-width: 186px;
  --admin-v2-command-button-min-width: 92px;
  --admin-v2-context-more-menu-width: 270px;
  --admin-v2-context-menu-width: 280px;
  --admin-v2-context-menu-flyout-width: 240px;
  --admin-v2-sheet-backdrop: var(--pg-ui-backdrop);
  --admin-v2-brand-mark-size: 34px;
  --admin-v2-avatar-bg: var(--pg-ui-avatar-bg);
  /*
   * Brand gold / partner footer bg (Wave E) — paint in profiles/admin-light.css.
   * Consumers keep the same --admin-v2-* names; values resolve from the profile.
   */
  --admin-v2-shell-footer-partner-fg: var(--admin-v2-color-text-inverse);
  --admin-v2-shell-footer-min-height: 4.5rem;
  --admin-v2-shell-menu-max-height: calc(
    100dvh
    - var(--admin-v2-topbar-height)
    - var(--admin-v2-shell-footer-min-height)
    - var(--admin-v2-space-4)
  );

  /* Entity sheet — offset derived after contextbar-height (below) */
  /*
   * Interactive control rhythm (buttons, tabs, icon buttons).
   * Hierarchy = color + placement, not size.
   * Same SSoT as --admin-control-compact (header, footer, sheet, fields).
   */
  --admin-v2-interactive-control-height: var(--admin-control-compact);
  --admin-v2-interactive-control-padding-x: var(--admin-v2-space-3);
  --admin-v2-interactive-control-font-size: var(--admin-v2-font-size-control);
  --admin-v2-interactive-control-line-height: var(--admin-v2-line-height-control);
  --admin-v2-interactive-control-icon-size: 14px;
  --admin-v2-relationship-strip-height: var(--admin-v2-interactive-control-height);
  /*
   * Chrome bars (admin topbar, contextbar, entity sheet head/foot):
   * same vertical padding as the entity-sheet footer (space-4).
   */
  --admin-v2-chrome-bar-padding-y: var(--admin-v2-space-4);
  --admin-v2-topbar-height: calc(
    var(--admin-v2-interactive-control-height) + 2 * var(--admin-v2-chrome-bar-padding-y)
  );
  --admin-v2-contextbar-height: calc(
    var(--admin-v2-interactive-control-height) + 2 * var(--admin-v2-chrome-bar-padding-y)
  );
  /* Sticky topbar + compact context bar (+ small breathing room). */
  /* Kept for legacy references; full-page entity sheet uses inset: 0. */
  --admin-v2-entity-sheet-offset-top: 0px;
  /*
   * Form field rhythm (inputs, selects, search) — same height as interactive buttons.
   * Multi-line textareas are excluded from the fixed height rules in entity-sheet.css.
   */
  --admin-v2-field-control-height: var(--admin-v2-interactive-control-height);
  --admin-v2-field-control-padding-x: var(--admin-v2-interactive-control-padding-x);
  --admin-v2-field-control-font-size: var(--admin-v2-interactive-control-font-size);
  --admin-v2-field-control-line-height: var(--admin-v2-interactive-control-line-height);
  --admin-v2-field-control-radius: var(--admin-v2-radius-control);
  /* Checkbox chrome — admin semantic colors on cross-surface tokens */
  --form-control-checkbox-border: var(--admin-v2-border-default);
  --form-control-checkbox-bg: var(--admin-v2-color-surface);
  --form-control-checkbox-checked-bg: var(--admin-v2-color-primary);
  --admin-v2-checkbox-size: var(--form-control-checkbox-size);
  --admin-v2-checkbox-radius: var(--form-control-checkbox-radius);
  --admin-v2-checkbox-border: var(--form-control-checkbox-border);
  --admin-v2-checkbox-bg: var(--form-control-checkbox-bg);
  --admin-v2-checkbox-checked-bg: var(--form-control-checkbox-checked-bg);
  --admin-v2-checkbox-disabled-check: var(--form-control-checkbox-disabled-check);
  /* Search field (icon inside, left) — same compact rhythm as fields/buttons */
  --admin-v2-search-height: var(--admin-v2-field-control-height);
  --admin-v2-search-radius: var(--admin-v2-field-control-radius);
  --admin-v2-search-icon-size: 16px;
  --admin-v2-search-padding-x: var(--admin-v2-field-control-padding-x);

  /* Spacing */
  --admin-v2-space-0: var(--pg-ui-space-0);
  --admin-v2-space-1: var(--pg-ui-space-1);
  --admin-v2-space-2: var(--pg-ui-space-2);
  --admin-v2-space-3: var(--pg-ui-space-3);
  --admin-v2-space-4: var(--pg-ui-space-4);
  --admin-v2-space-5: var(--pg-ui-space-5);
  --admin-v2-space-6: var(--pg-ui-space-6);
  --admin-v2-space-8: var(--pg-ui-space-8);
  /*
   * Shell chrome inline inset (topbar, footer, Tools strip).
   * Must match collection checkbox column: `.admin-v2-collection-table__select`
   * padding-left = space-4 — otherwise Catalog / AI sit inset relative to the list.
   */
  --admin-v2-app-gutter: var(--admin-v2-space-4);
  --admin-v2-section-gap: var(--pg-ui-section-gap);
  --admin-v2-panel-gap: var(--pg-ui-panel-gap);
  --admin-v2-card-padding-x: var(--pg-ui-card-padding-x);
  --admin-v2-card-padding-y: var(--pg-ui-card-padding-y);
  --admin-v2-toolbar-gap: var(--pg-ui-toolbar-gap);
  --admin-v2-table-row-padding-x: var(--admin-v2-space-4);
  --admin-v2-table-row-padding-y: var(--admin-v2-space-4);

  /* Typography */
  --admin-v2-font-family: var(--pg-ui-font-family);
  --admin-v2-font-size-page-title: var(--pg-ui-font-size-page-title);
  --admin-v2-line-height-page-title: var(--pg-ui-line-height-page-title);
  --admin-v2-font-size-section-title: var(--pg-ui-font-size-section-title);
  --admin-v2-line-height-section-title: var(--pg-ui-line-height-section-title);
  --admin-v2-font-size-heading-sm: var(--pg-ui-font-size-heading-sm);
  --admin-v2-line-height-heading-sm: var(--pg-ui-line-height-heading-sm);
  --admin-v2-font-size-card-title: var(--pg-ui-font-size-card-title);
  --admin-v2-line-height-card-title: var(--pg-ui-line-height-card-title);
  --admin-v2-font-size-list-item-title: var(--pg-ui-font-size-list-item-title);
  --admin-v2-line-height-list-item-title: var(--pg-ui-line-height-list-item-title);
  --admin-v2-font-size-body: var(--pg-ui-font-size-body);
  --admin-v2-line-height-body: var(--pg-ui-line-height-body);
  --admin-v2-font-size-meta: var(--pg-ui-font-size-meta);
  --admin-v2-line-height-meta: var(--pg-ui-line-height-meta);
  --admin-v2-font-size-control: var(--pg-ui-font-size-control);
  --admin-v2-line-height-control: var(--pg-ui-line-height-control);
  --admin-v2-font-size-badge: var(--pg-ui-font-size-badge);
  --admin-v2-line-height-badge: var(--pg-ui-line-height-badge);
  --admin-v2-font-weight-normal: var(--pg-ui-font-weight-normal);
  --admin-v2-font-weight-medium: var(--pg-ui-font-weight-medium);
  --admin-v2-font-weight-semibold: var(--pg-ui-font-weight-semibold);
  --admin-v2-font-weight-bold: var(--pg-ui-font-weight-bold);
  --admin-v2-letter-spacing: var(--pg-ui-letter-spacing);

  /* Controls */
  --admin-v2-control-height-sm: var(--pg-ui-control-height-sm);
  --admin-v2-control-height-md: var(--pg-ui-control-height-md);
  --admin-v2-control-height-lg: var(--pg-ui-control-height-lg);
  --admin-v2-control-padding-x-sm: var(--pg-ui-control-padding-x-sm);
  --admin-v2-control-padding-x-md: var(--pg-ui-control-padding-x-md);
  --admin-v2-control-padding-x-lg: var(--pg-ui-control-padding-x-lg);
  --admin-v2-icon-size-sm: var(--pg-ui-icon-size-sm);
  --admin-v2-icon-size-md: var(--pg-ui-icon-size-md);
  --admin-v2-icon-size-lg: var(--pg-ui-icon-size-lg);
  --admin-v2-icon-size-xl: var(--pg-ui-icon-size-xl);
  --admin-v2-icon-stroke-strong: var(--pg-ui-icon-stroke-strong);
  --admin-v2-icon-button-size-sm: var(--pg-ui-icon-button-size-sm);
  --admin-v2-icon-button-size-md: var(--pg-ui-icon-button-size-md);
  --admin-v2-icon-button-size-lg: var(--pg-ui-icon-button-size-lg);

  /* Buttons */
  --admin-v2-button-primary-bg: var(--pg-ui-button-primary-bg);
  --admin-v2-button-primary-bg-hover: var(--pg-ui-button-primary-bg-hover);
  --admin-v2-button-primary-text: var(--pg-ui-button-primary-text);
  --admin-v2-button-height-md: var(--pg-ui-button-height-md);
  --admin-v2-button-height-lg: var(--pg-ui-button-height-lg);
  --admin-v2-button-gap: var(--pg-ui-button-gap);
  --admin-v2-button-secondary-bg: var(--pg-ui-button-secondary-bg);
  --admin-v2-button-secondary-bg-hover: var(--pg-ui-button-secondary-bg-hover);
  --admin-v2-button-secondary-text: var(--pg-ui-button-secondary-text);
  --admin-v2-button-secondary-border: var(--pg-ui-button-secondary-border);

  /* Labels, badges and counters */
  --admin-v2-badge-height: var(--pg-ui-badge-height);
  --admin-v2-badge-padding-x: var(--pg-ui-badge-padding-x);
  --admin-v2-badge-padding-y: var(--pg-ui-badge-padding-y);
  --admin-v2-counter-size: var(--pg-ui-counter-size);
  --admin-v2-counter-bg: var(--pg-ui-counter-bg);
  --admin-v2-counter-text: var(--pg-ui-counter-text);
  --admin-v2-label-bg-neutral: var(--pg-ui-label-bg-neutral);
  --admin-v2-label-text-neutral: var(--pg-ui-label-text-neutral);
  --admin-v2-label-bg-success: var(--pg-ui-label-bg-success);
  --admin-v2-label-text-success: var(--pg-ui-label-text-success);
  --admin-v2-label-bg-warning: var(--pg-ui-label-bg-warning);
  --admin-v2-label-text-warning: var(--pg-ui-label-text-warning);
  --admin-v2-label-bg-info: var(--pg-ui-label-bg-info);
  --admin-v2-label-text-info: var(--pg-ui-label-text-info);
  --admin-v2-label-bg-danger: var(--pg-ui-label-bg-danger);
  --admin-v2-label-text-danger: var(--pg-ui-label-text-danger);

  /* Collections */
  --admin-v2-collection-toolbar-height: 64px;
  --admin-v2-collection-row-min-height: 64px;
  --admin-v2-collection-card-min-height: 104px;
  --admin-v2-collection-cell-gap: var(--admin-v2-space-5);
  --admin-v2-collection-header-bg: var(--admin-v2-color-surface);
  --admin-v2-collection-item-bg: var(--admin-v2-color-surface);
  --admin-v2-collection-item-bg-hover: var(--pg-ui-color-surface-hover);
  --admin-v2-collection-item-bg-selected: var(--pg-ui-color-surface-selected);
  --admin-v2-table-heading-bg: var(--pg-ui-color-surface-hover);

  /* Forms — single-line inputs match interactive/button height */
  --admin-v2-input-height: var(--admin-v2-field-control-height);
  --admin-v2-input-padding-x: var(--admin-v2-field-control-padding-x);
  --admin-v2-input-padding-x-with-icon: var(--pg-ui-input-padding-x-with-icon);
  --admin-v2-input-bg: var(--pg-ui-input-bg);
  --admin-v2-input-text: var(--pg-ui-input-text);
  --admin-v2-input-placeholder: var(--pg-ui-input-placeholder);
  --admin-v2-input-bg-disabled: var(--pg-ui-input-bg-disabled);
  --admin-v2-input-disabled-bg: var(--pg-ui-input-disabled-bg);
  --admin-v2-input-disabled-text: var(--pg-ui-input-disabled-text);
  --admin-v2-input-border: var(--pg-ui-input-border);
  --admin-v2-input-border-focus: var(--pg-ui-input-border-focus);
  --admin-v2-helper-text-color: var(--pg-ui-helper-text-color);
  --admin-v2-label-color: var(--pg-ui-label-color);
  /* Label → control only (tight). Must stay much smaller than --admin-form-field-gap. */
  --admin-v2-label-gap: var(--pg-ui-label-gap);

  /* States */
  --admin-v2-state-loading-bg: var(--pg-ui-state-loading-bg);
  --admin-v2-state-saving-bg: var(--pg-ui-state-saving-bg);
  --admin-v2-state-dirty-bg: var(--pg-ui-state-dirty-bg);
  --admin-v2-state-saved-bg: var(--pg-ui-state-saved-bg);
  --admin-v2-state-setup-bg: var(--pg-ui-state-setup-bg);
  --admin-v2-state-unavailable-bg: var(--pg-ui-state-unavailable-bg);
  --admin-v2-state-warning-bg: var(--pg-ui-state-warning-bg);
  --admin-v2-state-danger-bg: var(--pg-ui-state-danger-bg);
  --admin-v2-state-success-bg: var(--pg-ui-state-success-bg);
  --admin-v2-state-information-bg: var(--pg-ui-state-information-bg);
  --admin-v2-state-error-bg: var(--pg-ui-state-error-bg);
  --admin-v2-state-info-bg: var(--pg-ui-state-info-bg);
  --admin-v2-state-loading-text: var(--pg-ui-state-loading-text);
  --admin-v2-state-saving-text: var(--pg-ui-state-saving-text);
  --admin-v2-state-dirty-text: var(--pg-ui-state-dirty-text);
  --admin-v2-state-saved-text: var(--pg-ui-state-saved-text);
  --admin-v2-state-setup-text: var(--pg-ui-state-setup-text);
  --admin-v2-state-unavailable-text: var(--pg-ui-state-unavailable-text);
  --admin-v2-state-warning-text: var(--pg-ui-state-warning-text);
  --admin-v2-state-danger-text: var(--pg-ui-state-danger-text);
  --admin-v2-state-success-text: var(--pg-ui-state-success-text);
  --admin-v2-state-information-text: var(--pg-ui-state-information-text);
  --admin-v2-state-error-text: var(--pg-ui-state-error-text);
  --admin-v2-state-info-text: var(--pg-ui-state-info-text);

  /* Shadows / elevation */
  --admin-v2-shadow-xs: var(--pg-ui-shadow-xs);
  --admin-v2-shadow-sm: var(--pg-ui-shadow-sm);
  --admin-v2-shadow-md: var(--pg-ui-shadow-md);
  --admin-v2-shadow-lg: var(--pg-ui-shadow-lg);
  --admin-v2-shadow-floating: var(--pg-ui-shadow-floating);
  --admin-v2-backdrop: var(--pg-ui-backdrop);
  /*
   * Admin shell chrome edge shadows (topbar / Tools toolbar / shell footer).
   * One pair to tune size/color for white-on-white separation across admin + website editor.
   * Hang point shared with entity-sheet head/foot (Role Contract).
   */
  --admin-v2-chrome-header-shadow: var(--pg-ui-chrome-header-shadow);
  --admin-v2-chrome-footer-shadow: var(--pg-ui-chrome-footer-shadow);

  /* Navigation */
  --admin-v2-nav-text: var(--pg-ui-nav-text);
  --admin-v2-nav-text-active: var(--pg-ui-nav-text-active);
  --admin-v2-nav-surface-hover: var(--pg-ui-nav-surface-hover);
  --admin-v2-nav-surface-active: var(--pg-ui-nav-surface-active);
  --admin-v2-nav-role-daily: var(--pg-ui-nav-role-daily);
  --admin-v2-nav-role-order: var(--pg-ui-nav-role-order);
  --admin-v2-nav-role-return: var(--pg-ui-nav-role-return);
  --admin-v2-nav-role-commerce: var(--pg-ui-nav-role-commerce);
  --admin-v2-nav-role-subscription: var(--pg-ui-nav-role-subscription);
  --admin-v2-nav-role-content: var(--pg-ui-nav-role-content);
  --admin-v2-nav-role-insight: var(--pg-ui-nav-role-insight);

  /* Chart / data */
  --admin-v2-chart-compare-current: var(--pg-ui-chart-compare-current);
  --admin-v2-chart-compare-previous: var(--pg-ui-chart-compare-previous);
  --admin-v2-chart-series-1: var(--pg-ui-chart-series-1);
  --admin-v2-chart-series-2: var(--pg-ui-chart-series-2);
  --admin-v2-chart-series-3: var(--pg-ui-chart-series-3);
  --admin-v2-chart-series-4: var(--pg-ui-chart-series-4);
  --admin-v2-chart-series-5: var(--pg-ui-chart-series-5);
  --admin-v2-chart-series-6: var(--pg-ui-chart-series-6);


  /* Select / icon glyphs — theme-owned data-URIs */
  --admin-v2-icon-color: var(--pg-ui-icon-color);
  --admin-v2-select-chevron: var(--pg-ui-select-chevron);
  --admin-v2-select-chevron-muted: var(--pg-ui-select-chevron-muted);
  --admin-v2-icon-check-on-primary: var(--pg-ui-icon-check-on-primary);

  /* Bridge aliases for existing V2 editor tokens — not a second color SSoT. */
  --pg-editor-color-bg: var(--admin-v2-color-bg);
  --pg-editor-color-surface: var(--admin-v2-color-surface);
  --pg-editor-color-surface-muted: var(--admin-v2-color-surface-muted);
  --pg-editor-color-surface-overlay: var(--admin-v2-color-surface-overlay);
  --pg-editor-color-border: var(--admin-v2-border-default);
  --pg-editor-color-border-strong: var(--admin-v2-border-strong);
  --pg-editor-color-text: var(--admin-v2-color-text);
  --pg-editor-color-text-muted: var(--admin-v2-color-text-muted);
  --pg-editor-color-text-inverse: var(--admin-v2-color-text-inverse);
  --pg-editor-color-brand-500: var(--admin-v2-color-primary);
  --pg-editor-color-brand-600: var(--admin-v2-color-primary-hover);
  --pg-editor-backdrop: var(--admin-v2-backdrop);
}

html:has(body[data-page-type="admin"]),
html:has(body[data-page-type^="admin-"]),
html:has(body[data-page-type="members-desk"]),
html:has(body[data-page-type="members-balie"]),
body[data-page-type="admin"],
body[data-page-type^="admin-"],
body[data-page-type="members-desk"],
body[data-page-type="members-balie"],

/* Closure: document canvas follows Admin theme profile (pre-shell + shell) */
html[data-admin-theme-profile] {
  background: var(--admin-v2-color-app-bg, var(--pg-ui-color-bg));
  color: var(--admin-v2-color-text, var(--pg-ui-color-text));
}

html[data-admin-theme-profile] body {
  background: var(--admin-v2-color-app-bg, var(--pg-ui-color-bg));
  color: var(--admin-v2-color-text, var(--pg-ui-color-text));
}

.admin-layout,
.admin-shell,
.admin-main {
  --admin-products-list-font: var(--admin-font-size-base);
  --admin-workspace-detail-font: var(--admin-font-size-base);
  --admin-list-toolbar-control-font: var(--admin-v2-interactive-control-font-size);
  --admin-list-detail-control-font: var(--admin-v2-interactive-control-font-size);
  --page-title-size: var(--admin-font-size-base);
  --section-title-size: var(--admin-font-size-base);
  --card-title-size: var(--admin-font-size-base);
  --text-2xs-plus: var(--admin-font-size-base);
  --text-xs: var(--admin-font-size-base);
  --text-xs-plus: var(--admin-font-size-base);
  --text-sm: var(--admin-font-size-base);
  --text-sm-plus: var(--admin-font-size-base);
  --text-base: var(--admin-font-size-base);
  --text-lg: var(--admin-font-size-base);
  --text-xl: var(--admin-font-size-base);
  --text-2xl: var(--admin-font-size-base);
  --text-3xl: var(--admin-font-size-base);
  --font-size-xs: var(--admin-font-size-base);
  --font-size-sm: var(--admin-font-size-base);
  --font-size-base: var(--admin-font-size-base);
  --font-size-lg: var(--admin-font-size-base);
  --font-size-xl: var(--admin-font-size-base);
  --font-size-2xl: var(--admin-font-size-base);
  --font-size-3xl: var(--admin-font-size-base);
  --control-font-sm: var(--admin-v2-interactive-control-font-size);
  --control-font-md: var(--admin-v2-interactive-control-font-size);
  --control-font-lg: var(--admin-v2-interactive-control-font-size);
  font-size: var(--admin-font-size-base);
}

body[data-page-type="members-desk"] :not(svg, path, circle, rect, line, polyline, polygon, g),
body[data-page-type="members-balie"] :not(svg, path, circle, rect, line, polyline, polygon, g),
.admin-layout :not(svg, path, circle, rect, line, polyline, polygon, g) {
  font-size: var(--admin-font-size-base) !important;
}

/* ===== DE MAAT VOOR HET BEHEER (opdracht 175, stuk 1) =====
 * uiux/smaak.md §1 (TailAdmin, 22 sep 2026): geen schaduw op rustende elementen,
 * knoppen en velden 44px, radius 8, titel 20/600, sectiekop 16/600, label 14/500,
 * body 16, bijtekst 12/400, kaart 24 padding en 24 tussenruimte, één blauw.
 *
 * Alleen voor admin-pagina's. De kassa (`pos`), de balie (`members-desk`,
 * `members-balie`) en de website-editor (`body.website-editor-active`) lezen
 * dezelfde admin-tokens, maar vallen hier bewust buiten: de kassa-maatvoering
 * loopt in opdracht 167, en de webshop mag niet meebewegen.
 *
 * Eén hangpunt per waarde: elke regel hieronder wijst naar de standaard
 * (`--pg-ui-*`, src/tokens/pg-ui.css) of zet één getal dat daar nog ontbreekt.
 */
html:has(body[data-page-type="admin"]),
html:has(body[data-page-type^="admin-"]),
body[data-page-type="admin"],
body[data-page-type^="admin-"] {
  /* Knoppen en velden: 44px, radius 8 */
  --admin-control-compact: var(--pg-ui-control-height-lg);
  --admin-control-filter: var(--pg-ui-control-height-lg);
  --admin-radius-control: var(--pg-ui-radius-control);

  /* Geen schaduw op rustende elementen; zwevende lagen (menu's, dialogen) houden hun schaduw */
  --admin-v2-shadow-xs: var(--pg-ui-shadow-none);
  --admin-v2-shadow-sm: var(--pg-ui-shadow-none);
  --admin-v2-chrome-header-shadow: var(--pg-ui-shadow-none);
  --admin-v2-chrome-footer-shadow: var(--pg-ui-shadow-none);

  /* Binnen een kaart geen tweede grijs vlak: de tabelkop scheidt met een lijn */
  --admin-v2-table-heading-bg: var(--pg-ui-color-surface);

  /* Kaart: 24 padding, 24 tussen kaarten */
  --admin-card-padding-x: var(--pg-ui-space-6);
  --admin-card-padding-y: var(--pg-ui-space-6);
  --admin-v2-card-padding-x: var(--pg-ui-space-6);
  --admin-v2-card-padding-y: var(--pg-ui-space-6);
  --admin-section-gap: var(--pg-ui-space-6);

  /* Tekst: titel 20, sectiekop 16, label en controls 14, body 16, bijtekst 12 */
  --admin-font-size-base: var(--pg-ui-font-size-reading);
  --admin-products-list-font: var(--pg-ui-font-size-reading);
  /* Velden en de tekst ernaast in werkbladen: 14, zoals de controls */
  --admin-workspace-detail-font: var(--pg-ui-font-size-control);
  /* Veldlabel 14/500 (stuk 6): een eigen rol, los van --admin-font-size-label, dat ook
   * sectiekoppen draagt en met body 16 op 18 kwam. */
  --admin-field-label-font-size: var(--pg-ui-font-size-control);
  --admin-field-label-font-weight: var(--pg-ui-font-weight-medium);
  --admin-v2-font-size-body: var(--pg-ui-font-size-reading);
  --admin-v2-font-size-list-item-title: var(--pg-ui-font-size-reading);
  --page-title-size: var(--pg-ui-font-size-page-title);
  --section-title-size: var(--pg-ui-font-size-section-title);
  --card-title-size: var(--pg-ui-font-size-card-title);
  --text-2xs-plus: var(--pg-ui-font-size-meta);
  --text-xs: var(--pg-ui-font-size-meta);
  --text-xs-plus: var(--pg-ui-font-size-meta);
  --text-sm: var(--pg-ui-font-size-control);
  --text-sm-plus: var(--pg-ui-font-size-control);
  --text-base: var(--pg-ui-font-size-reading);
  --text-lg: var(--pg-ui-font-size-section-title);
  --text-xl: var(--pg-ui-font-size-page-title);
  --text-2xl: var(--pg-ui-font-size-page-title);
  --text-3xl: var(--pg-ui-font-size-page-title);
  --font-size-xs: var(--pg-ui-font-size-meta);
  --font-size-sm: var(--pg-ui-font-size-control);
  --font-size-base: var(--pg-ui-font-size-reading);
  --font-size-lg: var(--pg-ui-font-size-section-title);
  --font-size-xl: var(--pg-ui-font-size-page-title);
  --font-size-2xl: var(--pg-ui-font-size-page-title);
  --font-size-3xl: var(--pg-ui-font-size-page-title);
  font-size: var(--pg-ui-font-size-reading);
}

/* Wat geen eigen lettergrootte heeft, krijgt de body (zonder !important:
 * een component met een eigen maat wint). */
:where(body[data-page-type="admin"], body[data-page-type^="admin-"])
  :where(:not(svg, path, circle, rect, line, polyline, polygon, g)) {
  font-size: var(--admin-font-size-base);
}

/* Label 14, bijtekst 12: de rol, niet de pagina (specificiteit nul). */
:where(body[data-page-type="admin"], body[data-page-type^="admin-"]) :where(.form-label) {
  font-size: var(--pg-ui-font-size-control);
}
:where(body[data-page-type="admin"], body[data-page-type^="admin-"]) :where(.form-hint, .form-help, .form-label-hint) {
  font-size: var(--pg-ui-font-size-meta);
}
/* Opdracht 175: ook de kleine knopvarianten (.btn--sm 32px, .btn-sm, 40px-knoppen) halen de
 * knophoogte van de maat. Zonder specificiteit: een expliciete min-height (tekstlink) wint.
 * Icoonknoppen houden hun vierkant. */
:where(body[data-page-type="admin"], body[data-page-type^="admin-"])
  :where(.btn, .btn-sm, .btn--sm):where(:not(.btn--icon, .btn-icon)) {
  min-height: var(--admin-control-compact);
}

/* ===== ADMIN BODY — VIEWPORT LOCK ===== */
/* Voorkomt horizontaal scrollen en iOS rubber-band bounce.
 * overflow-x: clip voorkomt horizontale scroll ZONDER een scroll container
 * te creëren (zoals overflow-x: hidden dat wel doet). Dit lost het Chrome-bug
 * op waarbij overflow-x: hidden op html+body dubbele scroll containers maakt
 * en verticaal scrollen blokkeert.
 * position:relative creëert een containing block die overflow respecteert. */
html:has(body[data-page-type="admin"]),
html:has(body[data-page-type^="admin-"]) {
  overflow-x: clip;
  overscroll-behavior-x: none;
  /* Reserveer altijd ruimte voor scrollbar — voorkomt layout shift
     in fixed navbar wanneer content van spinner → tabel wisselt */
  scrollbar-gutter: stable;
}

body[data-page-type="admin"],
body[data-page-type^="admin-"] {
  overflow-x: clip;
  overscroll-behavior: none;
  width: 100%;
  max-width: 100vw;
  position: relative;
  /* iOS Safari: blokkeer horizontale touch-scroll fysiek op browser-niveau */
  touch-action: pan-y pinch-zoom;
}

/* ===== ADMIN BODY DEFAULTS ===== */
.admin-layout {
  font-family: var(--tenant-font-main, var(--font-sans));
  background: var(--admin-v2-color-app-bg, var(--pg-ui-color-bg));
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
}

/* ===== ADMIN SHELL — Flexbox wrapper (sidebar + main) ===== */
/* Dit is de runtime layout die AdminLayout.tsx gebruikt.
 * De sidebar is een vast element, main vult de rest. */
.admin-shell {
  --admin-shell-sidebar-width: 272px;
  display: flex;
  align-items: flex-start;
  margin-top: 0;
  min-height: 100dvh;
  background:
    linear-gradient(
      to right,
      var(--admin-v2-color-surface, var(--pg-ui-color-surface)) 0,
      var(--admin-v2-color-surface, var(--pg-ui-color-surface)) var(--admin-shell-sidebar-width),
      var(--admin-v2-border-subtle, var(--border)) var(--admin-shell-sidebar-width),
      var(--admin-v2-border-subtle, var(--border)) calc(var(--admin-shell-sidebar-width) + 1px),
      transparent calc(var(--admin-shell-sidebar-width) + 1px)
    );
}

@media (max-width: 959px) {
  .admin-shell {
    background: none;
  }
}

/* Binnen admin-shell wordt admin-main niet absoluut gepositioneerd
 * maar als flex-child dat de resterende breedte pakt. */
.admin-shell .admin-main {
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* ===== ADMIN CONTENT AREA ===== */
.admin-content {
  padding: var(--admin-content-padding);
  max-width: var(--content-7xl);
  margin: 0 auto;
}

/* ===== ADMIN METRIC CARDS ===== */
.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

/* account-navigation.css */
/* =================================================================
   ADMIN ACCOUNT NAVIGATION
   Cloudflare-geinspireerde accountnavigatie voor storefront admin.
   ================================================================= */

.admin-account-nav {
  --admin-account-nav-width: 272px;
  --admin-account-nav-section-gap: 8px;
  --admin-account-nav-row-gap: 4px;
  --admin-account-nav-child-gap: 4px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: var(--admin-account-nav-width);
  min-width: var(--admin-account-nav-width);
  flex: 0 0 var(--admin-account-nav-width);
  min-height: 100dvh;
  height: 100dvh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.admin-account-nav__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.admin-account-nav__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--brand-strip-height, 52px);
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

.admin-account-nav__logo.main-nav__logo {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  line-height: 1;
}

.admin-account-nav__brand-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Icon-tegel in brand-strook: zelfde maat/ritme als .org-avatar (LogoutButton admin-sidebar). */
.admin-account-nav__brand-logout {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--admin-control-field);
  height: var(--admin-control-field);
  padding: 0;
  margin: 0;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--error) 10%, var(--bg-surface));
  color: var(--error);
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-account-nav__brand-logout:hover:not(:disabled) {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 16%, var(--bg-surface));
  color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent);
}

.admin-account-nav__brand-logout:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

.admin-account-nav__brand-logout:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-account-nav__brand-logout svg {
  width: 16px;
  height: 16px;
  color: inherit;
}

.admin-account-nav__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-surface);
}

.admin-account-nav__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 0;
}

.admin-account-nav__account {
  display: flex;
  align-items: center;
  gap: var(--admin-form-field-gap);
  width: 100%;
  min-width: 0;
  padding: 0 16px 16px;
  box-sizing: border-box;
  color: var(--text-primary);
}

.admin-account-nav__account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: var(--admin-control-field);
  border-radius: 8px;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-account-nav__account-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.admin-account-nav__account-title,
.admin-account-nav__account-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-account-nav__account-title {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
}

.admin-account-nav__account-meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.admin-account-nav__account-caret {
  color: var(--text-muted);
  flex-shrink: 0;
}

.admin-search-container {
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  position: relative;
}

.admin-account-nav__search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--admin-v2-space-2, var(--space-2));
  width: 100%;
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem);
  box-sizing: border-box;
  border: 1.5px solid var(--admin-v2-border-default, var(--border));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, var(--radius-md)));
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted, var(--text-muted));
  font-size: var(--admin-v2-field-control-font-size, 14px);
  font-family: inherit;
  cursor: text;
  transition: border-color 0.15s;
}

.admin-account-nav__search > svg,
.admin-account-nav__search .lucide {
  flex-shrink: 0;
  width: var(--admin-v2-search-icon-size, 18px);
  height: var(--admin-v2-search-icon-size, 18px);
  color: var(--admin-v2-color-text-muted, var(--text-muted));
}

.admin-account-nav__search:hover {
  border-color: var(--admin-v2-border-strong, var(--border-strong, var(--border)));
}

.admin-account-nav__search:focus-within {
  border-color: var(--admin-v2-color-primary, var(--accent));
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, var(--accent-glow));
}

.admin-account-nav__search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--admin-v2-color-text, var(--text-primary));
  font: inherit;
  font-weight: var(--admin-v2-font-weight-medium, var(--font-medium));
  outline: none;
}

.admin-account-nav__search input::placeholder {
  color: var(--admin-v2-color-text-muted, var(--text-muted));
}

.admin-account-nav__search-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}

.admin-account-nav__content {
  display: flex;
  flex-direction: column;
  gap: var(--admin-account-nav-section-gap);
  padding: 0 8px;
  padding-bottom: var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
}

.admin-account-nav__panel--org-settings .admin-account-nav__content {
  padding-top: var(--admin-account-nav-section-gap);
}

.admin-account-nav__section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.admin-account-nav__section-items {
  display: flex;
  flex-direction: column;
  gap: var(--admin-account-nav-row-gap);
}

.admin-account-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--admin-account-nav-row-gap);
}

.admin-account-nav__item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--admin-control-lg);
  padding: 0 12px;
  border-radius: var(--admin-radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-account-nav__item-row:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.admin-account-nav__item-row--active {
  background: var(--accent-glow);
  color: var(--accent);
}

.admin-account-nav__item-row--section-active {
  background: color-mix(in srgb, var(--accent-glow) 55%, transparent);
}

.admin-account-nav__item-link,
.admin-account-nav__item-button,
.admin-account-nav__child-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.admin-account-nav__item-row > .admin-account-nav__item-link,
.admin-account-nav__item-row > .admin-account-nav__item-button {
  height: 100%;
}

.admin-account-nav__item-link--mockup .admin-account-nav__item-label {
  color: var(--error);
}

.admin-account-nav__item-link,
.admin-account-nav__item-button {
  width: 100%;
}

.admin-account-nav__item-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.admin-account-nav__item-link svg,
.admin-account-nav__item-button svg,
.admin-account-nav__child-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.admin-account-nav__item-icon {
  color: var(--admin-v2-color-text-muted);
}

.admin-account-nav__item-icon--active,
.admin-account-nav__item-row--active .admin-account-nav__item-icon {
  color: var(--accent);
}

.admin-account-nav__item-icon--modules {
  color: var(--accent);
}

.admin-account-nav__item-icon--danger,
.admin-account-nav__item-icon--mockup {
  color: var(--error);
}

/* Wave C — nav category accent roles (theme-owned paint) */
.admin-account-nav__item-link[data-nav-role="daily"] > svg:first-child,
.admin-account-nav__item-button[data-nav-role="daily"] > svg:first-child,
.admin-account-nav__child-link[data-nav-role="daily"] > svg:first-child,
.admin-v2-nav-icon--daily {
  color: var(--admin-v2-nav-role-daily);
}

.admin-account-nav__item-link[data-nav-role="order"] > svg:first-child,
.admin-account-nav__item-button[data-nav-role="order"] > svg:first-child,
.admin-account-nav__child-link[data-nav-role="order"] > svg:first-child,
.admin-v2-nav-icon--order {
  color: var(--admin-v2-nav-role-order);
}

.admin-account-nav__item-link[data-nav-role="return"] > svg:first-child,
.admin-account-nav__item-button[data-nav-role="return"] > svg:first-child,
.admin-account-nav__child-link[data-nav-role="return"] > svg:first-child,
.admin-v2-nav-icon--return {
  color: var(--admin-v2-nav-role-return);
}

.admin-account-nav__item-link[data-nav-role="commerce"] > svg:first-child,
.admin-account-nav__item-button[data-nav-role="commerce"] > svg:first-child,
.admin-account-nav__child-link[data-nav-role="commerce"] > svg:first-child,
.admin-v2-nav-icon--commerce {
  color: var(--admin-v2-nav-role-commerce);
}

.admin-account-nav__item-link[data-nav-role="subscription"] > svg:first-child,
.admin-account-nav__item-button[data-nav-role="subscription"] > svg:first-child,
.admin-account-nav__child-link[data-nav-role="subscription"] > svg:first-child,
.admin-v2-nav-icon--subscription {
  color: var(--admin-v2-nav-role-subscription);
}

.admin-account-nav__item-link[data-nav-role="content"] > svg:first-child,
.admin-account-nav__item-button[data-nav-role="content"] > svg:first-child,
.admin-account-nav__child-link[data-nav-role="content"] > svg:first-child,
.admin-v2-nav-icon--content {
  color: var(--admin-v2-nav-role-content);
}

.admin-account-nav__item-link[data-nav-role="insight"] > svg:first-child,
.admin-account-nav__item-button[data-nav-role="insight"] > svg:first-child,
.admin-account-nav__child-link[data-nav-role="insight"] > svg:first-child,
.admin-v2-nav-icon--insight {
  color: var(--admin-v2-nav-role-insight);
}

.admin-account-nav__item-link--active[data-nav-role] > svg:first-child,
.admin-account-nav__item-row--active [data-nav-role] > svg:first-child,
.admin-account-nav__child-link--active[data-nav-role] > svg:first-child {
  color: var(--accent);
}

.admin-account-nav__item-link svg:last-child,
.admin-account-nav__item-button svg:last-child,
.admin-account-nav__child-link svg:last-child {
  margin-left: auto;
}

.admin-account-nav__item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
}

.admin-account-nav__item-link--modules .admin-account-nav__item-label {
  color: var(--accent);
}

.admin-account-nav__item-link--danger .admin-account-nav__item-label,
.admin-account-nav__item-link--mockup .admin-account-nav__item-label {
  color: var(--error);
}

.admin-account-nav__panel--sidebar .admin-account-nav__item-row {
  color: var(--text-primary);
  height: var(--admin-control-compact);
}

.admin-account-nav__item-lock,
.admin-account-nav__item-caret {
  color: var(--text-muted);
  flex-shrink: 0;
}

.admin-account-nav__item-button svg:last-child {
  transition: transform 0.15s ease;
}

.admin-account-nav__item-button--expanded svg:last-child {
  transform: rotate(90deg);
}

.admin-account-nav__children {
  display: flex;
  flex-direction: column;
  gap: var(--admin-account-nav-child-gap);
}

.admin-account-nav__child-link {
  justify-content: flex-start;
  height: var(--admin-control-compact);
  padding: 0 12px 0 46px;
  border-radius: 8px;
  margin: 0 8px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.admin-account-nav__child-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.admin-account-nav__child-link--active {
  background: var(--accent-glow);
  color: var(--accent);
}

.admin-account-nav__child-link span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 450;
}

.admin-account-nav__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.admin-account-drawer {
  z-index: 220;
}

.admin-account-drawer .drawer__panel {
  background: var(--bg-surface);
}

@media (max-width: 959px) {
  .admin-account-nav {
    display: none;
  }

  .admin-account-nav__panel--drawer {
    min-height: 100dvh;
  }
}

/* Assistent trigger + modal (#69) */
/* Pagayo gold: revolutionary theme accent (var(--admin-v2-color-brand-gold)) */
.admin-account-nav__assistant-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 24px);
  margin: 8px 12px 12px;
  min-height: var(--admin-control-lg, 44px);
  padding: 0 12px;
  border: 1px solid var(--admin-v2-color-brand-gold-strong);
  border-radius: var(--radius-md);
  background: var(--admin-v2-color-brand-gold);
  color: var(--admin-v2-color-brand-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--admin-v2-color-brand-gold) 35%, transparent);
}

.admin-account-nav__assistant-trigger:hover {
  background: var(--admin-v2-color-brand-gold);
  border-color: var(--admin-v2-color-brand-gold);
}

.admin-account-nav__assistant-trigger:focus-visible {
  outline: 2px solid var(--admin-v2-color-brand-gold);
  outline-offset: 2px;
}

.admin-account-nav__assistant-trigger-shortcut {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in srgb, var(--admin-v2-color-brand-ink) 65%, transparent);
}

.admin-assistant-modal {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

/*
 * Admin workspace modal shell (SSoT).
 * Tokens: --admin-workspace-modal-* in contexts/admin/_base.css.
 * Consumers: AdminAssistantModal, BlockEditModal, AdminPagayoIdeasModal.
 */
.modal.modal--admin-workspace {
  width: var(--admin-workspace-modal-width);
  max-width: var(--admin-workspace-modal-max-width);
  height: var(--admin-workspace-modal-height);
}

/* Assistent modal — gold header: 2 main tabs + settings/close utilities */
.modal.modal--assistant {
  border-color: var(--admin-v2-color-brand-ink);
  height: min(512px, calc(100vh - var(--space-8)));
}

.modal.modal--assistant.modal--admin-workspace {
  height: var(--admin-workspace-modal-height);
}

.modal--assistant .modal__header {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 52px;
  min-height: 52px;
  padding: 0;
  background: var(--admin-v2-color-brand-gold);
  border-bottom: 1px solid var(--admin-v2-color-brand-gold-strong);
}

.modal--assistant .modal__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-top: var(--space-5);
  overflow: hidden;
}

.admin-assistant-modal__menu {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.admin-assistant-modal__menu-main {
  display: flex;
  flex: 1;
  min-width: 0;
}

.admin-assistant-modal__menu-utilities {
  display: flex;
  flex-shrink: 0;
}

.admin-assistant-modal__menu-tab,
.admin-assistant-modal__menu-settings,
.admin-assistant-modal__menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--admin-v2-color-brand-gold-strong);
  background: transparent;
  color: var(--admin-v2-color-brand-ink);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.admin-assistant-modal__menu-main > .admin-assistant-modal__menu-tab {
  flex: 1;
}

.admin-assistant-modal__menu-tab--brand {
  flex: 1.15;
  padding: 0 var(--space-3);
  font-size: 23px;
  line-height: 1;
  font-weight: var(--font-semibold);
}

.admin-assistant-modal__menu-tab-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}

.admin-assistant-modal__menu-tab-icon--brand svg {
  width: 25px;
  height: 25px;
}

.admin-assistant-modal__menu-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-assistant-modal__menu-tab:not(.admin-assistant-modal__menu-tab--brand) {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.admin-assistant-modal__menu-settings,
.admin-assistant-modal__menu-close {
  flex: 0 0 52px;
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  padding: 0;
}

.admin-assistant-modal__menu-settings svg,
.admin-assistant-modal__menu-close svg {
  width: 20px;
  height: 20px;
}

.admin-assistant-modal__menu-tab:hover,
.admin-assistant-modal__menu-settings:hover,
.admin-assistant-modal__menu-close:hover {
  background: color-mix(in srgb, var(--admin-v2-color-brand-ink) 8%, transparent);
}

.admin-assistant-modal__menu-tab--active,
.admin-assistant-modal__menu-settings--active {
  background: color-mix(in srgb, var(--admin-v2-color-brand-ink) 12%, transparent);
  box-shadow: inset 0 -2px 0 var(--admin-v2-color-brand-ink);
}

.admin-assistant-modal__menu-close {
  border-right: 0;
}

.admin-assistant-modal__panels {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.admin-assistant-modal__panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-assistant-modal__panel--search {
  position: relative;
}

.admin-assistant-modal__search .admin-search-dropdown {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  max-height: 280px;
  margin-top: 8px;
}

.admin-assistant-modal__empty {
  margin: 0;
  padding: var(--space-4) 0;
}

.admin-assistant-modal__pagayo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-assistant-modal__pagayo-intro {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.admin-assistant-modal__settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-assistant-modal__settings-intro {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.admin-assistant-modal__settings-meta {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.admin-assistant-modal__settings-row {
  display: grid;
  gap: var(--space-1);
}

.admin-assistant-modal__settings-row dt {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.admin-assistant-modal__settings-row dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
}

.admin-assistant-modal__settings-byok {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.admin-assistant-modal__settings-byok a {
  color: var(--accent);
  text-decoration: underline;
}

.admin-assistant-modal__coming-soon {
  align-self: flex-start;
}

.admin-assistant-modal__pagayo-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-assistant-modal__pagayo-error {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--admin-v2-state-danger-text);
}

.admin-assistant-modal__pagayo-success {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--admin-v2-state-success-text);
}

.admin-assistant-modal__pagayo-muted {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.admin-assistant-modal__pagayo-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--admin-v2-border-default);
}

.admin-assistant-modal__pagayo-history-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.admin-assistant-modal__pagayo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-assistant-modal__pagayo-list-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--radius-md, 8px);
  background: var(--admin-v2-color-surface);
  padding: var(--space-3);
  cursor: pointer;
}

.admin-assistant-modal__pagayo-list-item--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.admin-assistant-modal__pagayo-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.admin-assistant-modal__pagayo-list-preview {
  display: block;
  font-size: var(--text-sm);
  color: var(--text);
}

.admin-assistant-modal__pagayo-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-assistant-modal__pagayo-thread-message {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3);
}

.admin-assistant-modal__pagayo-thread-message header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.admin-assistant-modal__pagayo-thread-message p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
}

.admin-assistant-modal__pagayo-thread-message--platform {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.admin-assistant-modal__pagayo-message {
  min-height: 120px;
}

.admin-assistant-modal__pagayo-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-assistant-modal__pagayo-attachments-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-assistant-modal__pagayo-attachments-dropzone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-muted, var(--gray-50));
}

.admin-assistant-modal__pagayo-attachments-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-assistant-modal__pagayo-attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-assistant-modal__pagayo-attachments-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 88px;
}

.admin-assistant-modal__pagayo-attachments-thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--admin-v2-color-bg);
}

.admin-assistant-modal__pagayo-attachments-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--admin-v2-backdrop);
  color: var(--admin-v2-color-text-inverse);
  cursor: pointer;
}

.admin-assistant-modal__pagayo-attachments-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-assistant-modal__pagayo-attachments-thread {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.admin-assistant-modal__pagayo-attachments-thread-link {
  display: block;
  width: 120px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-layout {
  display: grid;
  grid-template-columns: minmax(240px, 34%) 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-input {
  flex: 1 1 auto;
  min-height: 180px;
  resize: none;
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-actions {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-submit {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: var(--admin-control-field, 36px);
  padding: 0 var(--space-4);
  border: 1px solid var(--admin-v2-color-brand-gold-strong);
  border-radius: var(--radius-md);
  background: var(--admin-v2-color-brand-gold);
  color: var(--admin-v2-color-brand-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-submit:hover:not(:disabled) {
  background: var(--admin-v2-color-brand-gold);
  border-color: var(--admin-v2-color-brand-gold-strong);
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-mic {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--admin-control-field, 36px);
  min-width: var(--admin-control-field, 36px);
  min-height: var(--admin-control-field, 36px);
  padding: 0;
  border: 1px solid var(--color-border, var(--admin-v2-border-default));
  border-radius: var(--radius-md);
  background: var(--admin-v2-color-surface);
  color: var(--color-text-muted, var(--admin-v2-color-text-muted));
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-mic:hover:not(:disabled) {
  border-color: var(--admin-v2-color-brand-gold-strong);
  color: var(--admin-v2-color-brand-ink);
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-mic--active {
  border-color: var(--admin-v2-color-brand-gold-strong);
  background: var(--admin-v2-color-brand-gold);
  color: var(--admin-v2-color-brand-ink);
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-mic:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-mic svg {
  flex-shrink: 0;
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-messages {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}

.admin-account-nav__assistant {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-account-nav__assistant-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-account-nav__assistant-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.admin-account-nav__assistant-message-sender {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1;
}

.admin-account-nav__assistant-message--user {
  align-self: flex-end;
  max-width: 82%;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-bottom-right-radius: var(--radius-sm);
}

.admin-account-nav__assistant-message--user .admin-account-nav__assistant-message-sender {
  text-align: right;
}

.admin-account-nav__assistant-message__text {
  margin: 0;
  word-break: break-word;
}

.admin-account-nav__assistant-message--assistant {
  align-self: flex-start;
  max-width: 92%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-sm);
}

.admin-account-nav__assistant-message__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-account-nav__assistant-message__content :is(h1, h2, h3) {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text, inherit);
}

.admin-account-nav__assistant-message__content :is(h1, h2, h3):not(:first-child) {
  margin-top: var(--space-2);
}

.admin-account-nav__assistant-message__content p {
  margin: 0;
}

.admin-account-nav__assistant-message__content p + p {
  margin-top: var(--space-2);
}

.admin-account-nav__assistant-message__content ul {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-account-nav__assistant-message__content li {
  margin: 0;
}

.admin-account-nav__assistant-message__content code {
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  font-size: 0.92em;
}

.admin-account-nav__assistant-message__content strong {
  font-weight: 600;
}

.admin-account-nav__assistant-message__content a.admin-assistant-link {
  --admin-assistant-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  color: var(--admin-v2-color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--admin-v2-color-primary) 40%, transparent);
  text-underline-offset: 2px;
}

.admin-account-nav__assistant-message__content a.admin-assistant-link:hover {
  text-decoration-color: currentColor;
}

.admin-account-nav__assistant-message__content a.admin-assistant-link::after {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-inline-start: 0.2rem;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: var(--admin-assistant-link-icon) no-repeat center / contain;
  mask: var(--admin-assistant-link-icon) no-repeat center / contain;
}

.admin-account-nav__assistant-sources {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 12px;
}

.admin-account-nav__assistant-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-account-nav__assistant-input {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font: inherit;
  background: var(--bg-surface);
}

.admin-account-nav__assistant-empty,
.admin-account-nav__assistant-status {
  margin: 0;
  font-size: var(--text-sm);
}

/* Content assistant modal (#86) — demo-aligned workspace shell */
.modal.modal--content-assistant {
  overflow: hidden;
  border: 1px solid var(--admin-v2-color-text);
  border-radius: 22px;
  background: var(--admin-v2-color-surface-muted);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--admin-v2-color-text) 8%, transparent);
  height: min(860px, calc(100vh - var(--space-8)));
}

.modal--content-assistant .modal__header {
  display: flex;
  align-items: center;
  min-height: 56px;
  height: 56px;
  padding: 0 16px 0 24px;
  background: linear-gradient(90deg, var(--admin-v2-color-brand-gold-deep), var(--admin-v2-color-brand-gold));
  border-bottom: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-ink) 32%, transparent);
}

.modal--content-assistant .modal__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--admin-v2-color-surface-muted);
}

.admin-content-assistant-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 100%;
}

.admin-content-assistant-modal__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--admin-v2-color-brand-ink);
  font-size: 16px;
  font-weight: 780;
  letter-spacing: -0.01em;
}

.admin-content-assistant-modal__spark {
  display: grid;
  width: var(--admin-control-compact);
  height: var(--admin-control-compact);
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--admin-v2-color-brand-ink);
  background-color: var(--admin-v2-color-surface-overlay);
}

.admin-content-assistant-modal__close {
  display: grid;
  width: 36px;
  height: var(--admin-control-compact);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--admin-v2-color-brand-ink);
  background-color: var(--admin-v2-color-surface-overlay);
  cursor: pointer;
}

.admin-content-assistant-modal__close:hover {
  background-color: var(--admin-v2-color-surface-overlay);
}

.modal--content-assistant .admin-assistant-modal,
.modal--content-assistant .admin-assistant-modal__panels,
.modal--content-assistant .admin-assistant-modal__panel--ai {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__workspace {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__left,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__right {
  min-height: 0;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: 18px;
  background: var(--admin-v2-color-surface);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--admin-v2-color-text) 8%, transparent);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__left {
  display: grid;
  align-content: start;
  gap: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__right-scroll {
  display: grid;
  align-content: start;
  gap: 18px;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__left::-webkit-scrollbar,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__right-scroll::-webkit-scrollbar {
  display: none;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__intro-card,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__detail-intro {
  position: relative;
  display: grid;
  gap: var(--admin-toolbar-gap);
  padding: 18px;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: 18px;
  background: var(--admin-v2-color-surface-hover);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__intro-copy,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__detail-intro-top {
  padding-inline-end: 58px;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__detail-intro-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__collapse-button {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-control-search);
  min-width: var(--admin-control-search);
  height: var(--admin-control-search);
  padding: 0;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: var(--radius-full);
  color: var(--admin-v2-color-text-muted);
  background: var(--admin-v2-color-surface);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--admin-v2-color-text) 8%, transparent);
  cursor: pointer;
  font-weight: 800;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__collapse-button:hover {
  color: var(--admin-v2-color-text);
  background: var(--admin-v2-color-surface-muted);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__eyebrow {
  margin: 0 0 8px;
  color: var(--admin-v2-color-brand-gold-strong);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__intro-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--admin-v2-color-text);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__intro-body {
  margin: 12px 0 0;
  color: var(--admin-v2-color-text-muted);
  font-size: 17px;
  line-height: 1.55;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__model-pill {
  width: fit-content;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-gold) 55%, var(--admin-v2-color-surface));
  border-radius: var(--radius-full);
  color: var(--admin-v2-color-brand-ink);
  background: var(--admin-v2-state-warning-bg);
  font-size: 13px;
  font-weight: 700;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__steps {
  display: grid;
  gap: var(--admin-form-field-gap);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__step {
  display: grid;
  grid-template-columns: var(--admin-control-search) 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: 16px;
  background: var(--admin-v2-color-surface-hover);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__step strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  color: var(--admin-v2-color-text);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__step span {
  color: var(--admin-v2-color-text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__step-number {
  display: grid;
  width: var(--admin-control-search);
  height: var(--admin-control-search);
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--admin-v2-color-brand-ink);
  background: var(--admin-v2-state-warning-bg);
  font-weight: 800;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__actions-section,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__input-section,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__proposal-section,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__current-field-section {
  display: grid;
  gap: var(--admin-toolbar-gap);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__current-field-top,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__input-top {
  display: grid;
  gap: var(--space-2);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__current-field-top .admin-content-assistant-panel__eyebrow,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__input-top .admin-content-assistant-panel__eyebrow {
  margin: 0;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__section-title {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--admin-v2-color-text);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__helper {
  margin: 0;
  color: var(--admin-v2-color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__input-section .admin-content-assistant-panel__helper,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__actions-section .admin-content-assistant-panel__helper {
  margin-top: 8px;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__choice-grid {
  display: grid;
  gap: var(--admin-form-field-gap);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__choice-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 104px;
  padding: 18px;
  border: 2px solid var(--admin-v2-border-strong);
  border-radius: 18px;
  color: var(--admin-v2-color-text);
  text-align: left;
  background: var(--admin-v2-color-surface);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__choice-card:hover:not(:disabled),
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__choice-card[aria-pressed="true"] {
  border-color: var(--admin-v2-color-brand-gold-deep);
  background: var(--admin-v2-state-warning-bg);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--admin-v2-color-brand-gold-deep) 16%, transparent);
  transform: translateY(-1px);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__choice-card small {
  color: var(--admin-v2-color-text-muted);
  font-size: 14px;
  line-height: 1.35;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__choice-card:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__choice-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__workflow-step-badge {
  display: grid;
  width: var(--admin-control-search);
  height: var(--admin-control-search);
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--admin-v2-state-success-text);
  background: var(--admin-v2-state-success-bg);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__workflow-step-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__workflow-step-label {
  margin: 0;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__choice-icon {
  display: grid;
  width: var(--admin-control-search);
  height: var(--admin-control-search);
  place-items: center;
  border-radius: var(--admin-radius-md);
  color: var(--admin-v2-color-brand-ink);
  background: var(--admin-v2-state-warning-bg);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__footer-step-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__footer-step-cluster .admin-content-assistant-panel__footer-actions {
  margin-inline-start: 0;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__form-card,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__detail-section {
  display: grid;
  gap: var(--admin-toolbar-gap);
  padding: 18px;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: 18px;
  background: var(--admin-v2-color-surface-hover);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__field-label-block {
  display: grid;
  gap: 8px;
  color: var(--admin-v2-color-text);
  font-size: 15px;
  font-weight: 760;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__textarea {
  width: 100%;
  min-height: 118px;
  padding: 14px 16px;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: var(--admin-radius-card);
  color: var(--admin-v2-color-text);
  background: var(--admin-v2-color-surface);
  resize: vertical;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--admin-v2-color-text) 8%, transparent);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--admin-v2-color-brand-gold) 52%, transparent);
  border-color: var(--admin-v2-color-brand-gold-deep);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__textarea:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background: var(--admin-v2-color-surface-hover);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__suggestion-chip {
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-gold) 55%, var(--admin-v2-color-surface));
  border-radius: var(--radius-full);
  color: var(--admin-v2-color-brand-ink);
  background: var(--admin-v2-state-warning-bg);
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__suggestion-chip:hover:not(:disabled),
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__suggestion-chip[aria-pressed="true"] {
  border-color: var(--admin-v2-color-brand-gold-deep);
  background: var(--admin-v2-state-warning-bg);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--admin-v2-color-brand-gold-deep) 16%, transparent);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__suggestion-chip:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__dictation-row {
  display: flex;
  justify-content: flex-end;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__input-section--active {
  scroll-margin-top: var(--space-3);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__input-section--active .admin-content-assistant-panel__form-card {
  border-color: var(--admin-v2-color-brand-gold-deep);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--admin-v2-color-brand-gold-deep) 16%, transparent);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__selected-action {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-gold) 55%, var(--admin-v2-color-surface));
  border-radius: var(--radius-full);
  color: var(--admin-v2-color-brand-ink);
  background: var(--admin-v2-state-warning-bg);
  font-size: 13px;
  font-weight: 700;
  width: fit-content;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__proposal-top {
  display: grid;
  gap: 8px;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__proposal-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-form-field-gap);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__preview-badge {
  padding: 8px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--admin-v2-border-strong);
  color: var(--admin-v2-color-text-muted);
  background: var(--admin-v2-color-surface-muted);
  font-size: 13px;
  font-weight: 780;
  white-space: nowrap;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__preview-badge--ready {
  border-color: transparent;
  color: var(--admin-v2-state-success-text);
  background: var(--admin-v2-state-success-bg);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__proposal-card {
  display: grid;
  gap: var(--admin-toolbar-gap);
  padding: 18px;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: 18px;
  background: var(--admin-v2-color-surface);
  min-height: 120px;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__proposal-card--empty {
  border-style: dashed;
  border-color: var(--admin-v2-border-strong);
  background: var(--admin-v2-color-surface-hover);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__proposal-card--ready {
  border-color: color-mix(in srgb, var(--admin-v2-color-brand-gold) 55%, var(--admin-v2-color-surface));
  background: linear-gradient(180deg, var(--admin-v2-state-warning-bg), var(--admin-v2-color-surface));
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__field-preview,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__proposal-preview {
  border: 0;
  border-radius: var(--admin-radius-card);
  background: transparent;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__field-preview .rich-editor--readonly .rich-editor-content,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__proposal-preview.rich-editor-content,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__proposal-card--ready .rich-editor--readonly .rich-editor-content {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__empty-state {
  margin: 0;
  color: var(--admin-v2-color-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__suggested-tags {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--admin-v2-color-text-muted);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__review-section {
  gap: 8px;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__review-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--admin-v2-color-text);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__review-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--admin-v2-color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__review-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  color: var(--admin-v2-color-text-muted);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__review-list li::before {
  content: "✓";
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--admin-v2-state-success-text);
  background: var(--admin-v2-state-success-bg);
  font-size: 12px;
  font-weight: 900;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-toolbar-gap);
  flex-shrink: 0;
  padding: 20px 22px;
  border-top: 1px solid var(--admin-v2-border-strong);
  background: var(--admin-v2-color-surface);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-inline-start: auto;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__cancel-action {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--admin-radius-card);
  color: var(--admin-v2-color-text-muted);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 760;
  cursor: pointer;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__cancel-action:hover {
  background: var(--admin-v2-color-surface-muted);
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__primary-action,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__apply-action {
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--admin-radius-card);
  color: var(--admin-v2-color-brand-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--admin-v2-color-brand-gold) 70%, var(--admin-v2-color-surface)), color-mix(in srgb, var(--admin-v2-color-brand-gold) 85%, var(--admin-v2-color-surface)));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--admin-v2-color-brand-gold-deep) 22%, transparent);
  font-size: var(--text-sm);
  font-weight: 840;
  cursor: pointer;
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__primary-action:hover:not(:disabled),
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__apply-action:hover:not(:disabled) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--admin-v2-color-brand-gold) 65%, var(--admin-v2-color-surface)), var(--admin-v2-color-brand-gold));
}

.admin-assistant-modal__panel--ai .admin-content-assistant-panel__primary-action:disabled,
.admin-assistant-modal__panel--ai .admin-content-assistant-panel__apply-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.admin-assistant-modal__panel--ai .admin-account-nav__assistant-status {
  margin: 0;
  padding: 0 22px;
  color: var(--admin-v2-color-text-muted);
  font-size: var(--text-sm);
}

.admin-assistant-modal__panel--ai .form-error {
  margin: 0 22px;
}

@media (max-width: 920px) {
  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__workspace {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__left,
  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__right {
    height: auto;
    overflow: visible;
  }

  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__right-scroll {
    height: auto;
    overflow: visible;
  }

  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__footer-step-cluster {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-inline-start: 0;
  }

  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__footer-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-inline-start: 0;
  }

  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__primary-action,
  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__apply-action,
  .admin-assistant-modal__panel--ai .admin-content-assistant-panel__cancel-action {
    width: 100%;
  }
}

/* Admin assistant workspace — four-column modal (#69, 2026-06); shell via .modal--admin-workspace */

.modal--assistant-workspace .modal__body {
  padding-top: 0;
}

.admin-assistant-workspace__header-title {
  cursor: default;
  pointer-events: none;
}

.admin-assistant-workspace {
  display: grid;
  grid-template-columns: 200px minmax(220px, 1fr) minmax(260px, 1.2fr) minmax(240px, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.admin-assistant-workspace__modules {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-ink) 8%, transparent);
  overflow-y: auto;
}

.admin-assistant-workspace__module-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-assistant-workspace__module-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-ink) 8%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-brand-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.admin-assistant-workspace__module-button--brand {
  background: color-mix(in srgb, var(--admin-v2-color-brand-gold) 12%, transparent);
  border-color: color-mix(in srgb, var(--admin-v2-color-brand-gold-strong) 35%, transparent);
}

.admin-assistant-workspace__module-button--active {
  background: color-mix(in srgb, var(--admin-v2-color-brand-gold) 22%, transparent);
  border-color: var(--admin-v2-color-brand-gold-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-v2-color-brand-gold-strong) 35%, transparent);
}

.admin-assistant-workspace__module-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--admin-v2-color-brand-gold-strong);
}

.admin-assistant-workspace__admin-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--admin-v2-color-primary);
  text-decoration: none;
}

.admin-assistant-workspace__admin-link:hover {
  text-decoration: underline;
}

.admin-assistant-workspace__module-context {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-ink) 8%, transparent);
}

.admin-assistant-workspace__context-title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.admin-assistant-workspace__context-muted,
.admin-assistant-workspace__context-error {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
}

.admin-assistant-workspace__context-error {
  color: var(--admin-v2-state-danger-text);
}

.admin-assistant-workspace__context-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-assistant-workspace__context-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--admin-v2-color-brand-ink) 3%, transparent);
}

.admin-assistant-workspace__context-item-title {
  font-size: var(--text-xs);
  font-weight: 600;
}

.admin-assistant-workspace__context-item-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.admin-assistant-workspace__compose,
.admin-assistant-workspace__thread,
.admin-assistant-workspace__preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-ink) 8%, transparent);
}

.admin-assistant-workspace__preview {
  border-right: 0;
}

.admin-assistant-workspace__column-header {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-ink) 8%, transparent);
}

.admin-assistant-workspace__column-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.admin-assistant-workspace__column-subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.admin-assistant-workspace__composer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
}

.admin-assistant-workspace__input {
  min-height: 160px;
}

.admin-assistant-workspace__thread-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

.admin-assistant-workspace__preview-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

.admin-assistant-workspace__preview-empty {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.admin-assistant-workspace__proposal-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-gold-strong) 35%, transparent);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--admin-v2-color-brand-gold) 8%, transparent);
}

.admin-assistant-workspace__proposal-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.admin-assistant-workspace__proposal-summary {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.admin-assistant-workspace__proposal-lines {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.admin-assistant-workspace__proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.admin-assistant-workspace__settings-back {
  padding: var(--space-4);
}

/* Pagayo ideas modal (sidebar wordmark); shell via .modal--admin-workspace */
.modal--pagayo-ideas .modal__header {
  background: var(--admin-v2-color-brand-gold);
  border-bottom: 1px solid var(--admin-v2-color-brand-gold-strong);
  padding: 0 var(--space-4);
  min-height: 52px;
}

.admin-pagayo-ideas-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-3);
}

.admin-pagayo-ideas-modal__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--admin-v2-color-brand-ink);
}

.admin-pagayo-ideas-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: var(--admin-control-compact);
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  cursor: pointer;
}

.admin-pagayo-ideas-modal__close:hover {
  background: color-mix(in srgb, var(--admin-v2-color-brand-ink) 8%, transparent);
}

/* Dashboard assistant shortcuts */
.dashboard-assistant-shortcuts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dashboard-assistant-shortcuts__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dashboard-assistant-shortcuts__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-gold-strong) 45%, transparent);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--admin-v2-color-brand-gold) 14%, transparent);
  color: var(--admin-v2-color-brand-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.dashboard-assistant-shortcuts__button:hover {
  background: color-mix(in srgb, var(--admin-v2-color-brand-gold) 24%, transparent);
}

.dashboard-assistant-shortcuts__summary {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

/* admin-search.css */
/* =================================================================
   ADMIN SEARCH DROPDOWN — Omni-search results overlay
   ================================================================= */

.admin-search-container {
  position: relative;
}

.admin-search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-1);
}

.admin-search-dropdown__section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.admin-search-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: background-color 0.15s;
}

.admin-search-dropdown__item:hover,
.admin-search-dropdown__item--selected {
  background: var(--bg-hover);
}

.admin-search-dropdown__item-info {
  flex: 1;
  min-width: 0;
}

.admin-search-dropdown__item-title {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-search-dropdown__item-subtitle {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.admin-search-dropdown__empty {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.admin-search-dropdown__loading {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
}

.admin-search-dropdown__loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: admin-search-pulse 1.2s infinite;
}

.admin-search-dropdown__loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.admin-search-dropdown__loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes admin-search-pulse {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ai-panel.css */
/**
 * ADMIN CONTEXT: AI Panel
 * 
 * AI assistant sidebar/panel voor admin interface.
 * Chat interface, suggestions, quick actions.
 * 
 * DATA ATTRIBUTES:
 * - data-ai-panel-position="right|bottom|floating"
 * - data-ai-panel-expanded="true|false"
 */

/* =================================================================
   AI PANEL CONTAINER
   ================================================================= */

.ai-panel {
  --ai-panel-width: 380px;
  --ai-panel-bg: var(--surface-primary);
  --ai-accent: var(--accent);
  
  display: flex;
  flex-direction: column;
  width: var(--ai-panel-width);
  background: var(--ai-panel-bg);
  border-left: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* Right position (default) */
.ai-panel[data-ai-panel-position="right"] {
  position: fixed;
  right: 0;
  top: var(--admin-header-height, 64px);
  bottom: 0;
  z-index: var(--z-sticky);
}

/* Floating position */
.ai-panel[data-ai-panel-position="floating"] {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 360px;
  height: 500px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
}

/* Collapsed state */
.ai-panel[data-ai-panel-expanded="false"] {
  width: auto;
}

/* =================================================================
   AI PANEL HEADER
   ================================================================= */

.ai-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.ai-panel__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--ai-accent), var(--accent-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.ai-panel__info {
  flex: 1;
  min-width: 0;
}

.ai-panel__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.ai-panel__status {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.ai-panel__status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--success);
}

.ai-panel__actions {
  display: flex;
  gap: var(--space-1);
}

.ai-panel__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-panel__action-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* =================================================================
   AI CHAT AREA
   ================================================================= */

.ai-panel__chat {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Chat message */
.ai-message {
  display: flex;
  gap: var(--space-3);
  max-width: 90%;
}

.ai-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message--assistant {
  align-self: flex-start;
}

.ai-message__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.ai-message--assistant .ai-message__avatar {
  background: linear-gradient(135deg, var(--ai-accent), var(--accent-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent);
  font-size: var(--font-size-xs);
}

.ai-message__bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.ai-message--user .ai-message__bubble {
  background: var(--accent);
  color: var(--text-on-accent);
  border-bottom-right-radius: var(--radius-sm);
}

.ai-message--assistant .ai-message__bubble {
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-bottom-left-radius: var(--radius-sm);
}

/* Typing indicator */
.ai-typing {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
}

.ai-typing__dot {
  width: 6px;
  height: 6px;
  background: var(--text-tertiary);
  border-radius: var(--radius-full);
  animation: ai-typing 1.4s infinite both;
}

.ai-typing__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-typing__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ai-typing {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =================================================================
   AI SUGGESTIONS
   ================================================================= */

.ai-suggestions {
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.ai-suggestions__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.ai-suggestions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ai-suggestion {
  padding: var(--space-1-5) var(--space-3);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-suggestion:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* =================================================================
   AI INPUT
   ================================================================= */

.ai-panel__input {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-primary);
}

.ai-panel__textarea {
  flex: 1;
  min-height: 2.5rem;
  max-height: 120px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  resize: none;
  outline: none;
  transition: border-color var(--transition-fast);
}

.ai-panel__textarea:focus {
  border-color: var(--accent);
}

.ai-panel__textarea::placeholder {
  color: var(--text-tertiary);
}

.ai-panel__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--text-on-accent);
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.ai-panel__send:hover {
  background: var(--accent-hover);
}

.ai-panel__send:disabled {
  background: var(--surface-tertiary);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* =================================================================
   FLOATING TRIGGER BUTTON
   ================================================================= */

.ai-trigger {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, var(--ai-accent), var(--accent-hover));
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-on-accent);
  font-size: var(--font-size-xl);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-fast);
  z-index: var(--z-sticky);
}

.ai-trigger:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .ai-panel[data-ai-panel-position="right"] {
    width: 100%;
    left: 0;
  }
  
  .ai-panel[data-ai-panel-position="floating"] {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

/* block-edit-typography.css */
/**
 * Block edit modal — apply presentation.typography presets to TipTap (ProseMirror).
 * Vars are set inline on `.block-edit-modal__main.block-typography-scope`.
 */

@layer admin {
  .block-edit-modal__typography-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .block-edit-modal__typography-intro {
    margin: 0;
  }

  .block-edit-modal__typography-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
  }

  .block-edit-modal__typography-preview {
    margin-bottom: 0;
    min-height: 100%;
    padding: var(--admin-v2-card-padding-y, var(--space-5))
      var(--admin-v2-card-padding-x, var(--space-5));
    border: 1px solid var(--admin-v2-border-default, var(--border));
    border-radius: var(--admin-v2-radius-card, var(--radius-lg));
    background: var(--admin-v2-color-surface);
    box-shadow: var(--admin-v2-shadow-xs, none);
  }

  .block-edit-modal__typography-preview .design-typography-preview__heading {
    margin: 0 0 var(--space-4);
    font-size: var(--block-heading-size, var(--text-2xl));
    line-height: 1.2;
  }

  .block-edit-modal__typography-preview .design-typography-preview__body {
    font-size: var(--block-body-size, var(--text-lg));
    line-height: 1.65;
  }

  .block-edit-modal__typography-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    max-width: 48rem;
  }

  .block-edit-modal__typography-groups--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    width: 100%;
  }

  .block-edit-modal__typography-groups--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
    width: 100%;
  }

  /* Layout 1/3 + Design 2/3 when the wide tile uses inner sub-columns (fieldsColumns={2}). */
  .block-edit-modal__typography-groups--cols-2-one-third-two-thirds {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    max-width: none;
    width: 100%;
  }

  @media (max-width: 960px) {
    .block-edit-modal__typography-groups--cols-3,
    .block-edit-modal__typography-groups--cols-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 720px) {
    .block-edit-modal__typography-groups,
    .block-edit-modal__typography-groups--cols-2-one-third-two-thirds,
    .block-edit-modal__typography-groups--cols-3,
    .block-edit-modal__typography-groups--cols-4 {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .block-edit-modal__typography-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--admin-v2-color-surface);
    overflow: hidden;
  }

  .block-edit-modal__typography-group-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  /* Sub-columns inside one panel tile when outer grid is 2 columns (Design tab balance). */
  .block-edit-modal__typography-group-fields--cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .block-edit-modal__typography-group-fields-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
  }

  @media (max-width: 720px) {
    .block-edit-modal__typography-group-fields--cols-2 {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .block-edit-modal__main.block-typography-scope .rich-editor-content h1,
  .block-edit-modal__main.block-typography-scope .rich-editor-content h2,
  .block-edit-modal__main.block-typography-scope .rich-editor-content h3 {
    font-family: var(
      --block-heading-font,
      var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)))
    );
    font-size: var(--block-heading-size);
    font-weight: var(--block-heading-weight);
    color: var(--block-heading-color);
  }

  .block-edit-modal__main.block-typography-scope .rich-editor-content p,
  .block-edit-modal__main.block-typography-scope .rich-editor-content li,
  .block-edit-modal__main.block-typography-scope .rich-editor-content blockquote {
    font-family: var(--block-body-font, var(--tenant-font-main, var(--font-sans)));
    font-size: var(--block-body-size);
    font-weight: var(--block-body-weight);
    color: var(--block-body-color);
  }
}

/**
 * Preview — unlayered + !important to beat admin global `font-size: … !important`
 * on `body[data-page-type="admin"] *`.
 */
body[data-page-type="admin"] .block-edit-modal__typography-preview .design-typography-preview__heading,
body[data-page-type^="admin-"] .block-edit-modal__typography-preview .design-typography-preview__heading {
  font-family: var(
    --block-heading-font,
    var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)))
  );
  font-size: var(--block-heading-size, var(--text-2xl)) !important;
  font-weight: var(--block-heading-weight, var(--font-semibold)) !important;
  color: var(--block-heading-color) !important;
}

body[data-page-type="admin"] .block-edit-modal__typography-preview .design-typography-preview__body,
body[data-page-type^="admin-"] .block-edit-modal__typography-preview .design-typography-preview__body {
  font-family: var(--block-body-font, var(--tenant-font-main, var(--font-sans)));
  font-size: var(--block-body-size, var(--text-lg)) !important;
  font-weight: var(--block-body-weight, var(--font-normal, 400)) !important;
  color: var(--block-body-color) !important;
}

/* components-legacy.css */
/**
 * ADMIN CONTEXT: Legacy Component Names
 * 
 * Bridge CSS die de storefront's bestaande class names
 * (.btn-primary, .alert-success, .status-badge, .modal-overlay)
 * beschikbaar maakt via design tokens.
 *
 * Deze klassen zijn compatibel met de bestaande storefront TSX code.
 * Op termijn migreert de codebase naar BEM namen
 * (.btn--primary, .alert--success, .badge--success, .modal-backdrop).
 */

/* =================================================================
   BUTTON LEGACY NAMES
   ================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height-md);
  padding: 0 var(--control-padding-md);
  font-size: var(--control-font-md);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  line-height: 1;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--accent);
  color: var(--bg-deep);
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light, var(--border));
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-hover);
  border-color: var(--text-muted);
}

.btn-danger {
  background-color: var(--error);
  color: var(--bg-deep);
}

.btn-danger:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm {
  height: var(--control-height-sm);
  padding: 0 var(--control-padding-sm);
  font-size: var(--control-font-sm);
}

.btn-lg {
  height: var(--control-height-lg);
  padding: 0 var(--control-padding-lg);
  font-size: var(--control-font-lg);
}

.btn-icon {
  padding: var(--space-2);
  min-width: auto;
}

.btn-back {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.btn-add {
  margin-top: var(--space-3);
  border: 1px dashed var(--border);
  background-color: transparent;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.btn-add:hover {
  background-color: var(--bg-surface);
  border-color: var(--accent);
}

.btn-empty-action {
  margin-top: var(--space-4);
}

.btn-group {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.action-buttons {
  display: flex;
  gap: var(--space-2);
}

/* ActionButton disabled state — replaces inline cursor/opacity styles */
.action-button {
  width: var(--admin-control-compact);
  height: var(--admin-control-compact);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  cursor: pointer;
}

.action-button:hover:not(.action-button--disabled):not(:disabled) {
  color: var(--accent);
}

.action-button__loading {
  font-size: var(--text-lg);
  line-height: 1;
}

.action-button-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.action-button--disabled,
.action-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.btn-full-width {
  width: 100%;
}

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-icon-only {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  display: flex;
  align-items: center;
}

/* Icon button (square, bordered) */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: var(--admin-control-compact);
  padding: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.icon-button--danger {
  color: var(--error);
}

.icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* =================================================================
   STATUS BADGE LEGACY NAMES
   ================================================================= */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
}

.status-badge--success {
  background-color: var(--success-dim);
  color: var(--success);
}

.status-badge--warning {
  background-color: var(--warning-dim);
  color: var(--warning);
}

.status-badge--error {
  background-color: var(--error-dim);
  color: var(--error);
}

.status-badge--info {
  background-color: var(--info-dim);
  color: var(--info);
}

.status-badge--purple {
  background-color: var(--accent-glow);
  color: var(--accent);
}

.status-badge--secondary {
  background-color: var(--bg-hover);
  color: var(--text-muted);
}

.status-badge-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Dashboard status badges */
.status-pending {
  background: var(--warning-dim);
  color: var(--warning);
}

.status-paid {
  background: var(--info-dim);
  color: var(--info);
}

.status-processing {
  background: var(--info-dim);
  color: var(--info);
}

.status-shipped {
  background: var(--success-dim);
  color: var(--success);
}

.status-delivered {
  background: var(--success-dim);
  color: var(--success);
}

.status-cancelled {
  background: var(--error-dim);
  color: var(--error);
}

.status-refunded {
  background: var(--bg-hover);
  color: var(--text-muted);
}

.status-default {
  background: var(--bg-surface);
  color: var(--text-secondary);
}

/* =================================================================
   ALERT LEGACY NAMES
   ================================================================= */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  position: relative;
}

.alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.alert svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.alert-message {
  font-size: var(--text-sm);
}

.alert p {
  margin: var(--space-1) 0 0 0;
  font-size: var(--text-sm);
}

.alert-success {
  background-color: var(--success-dim);
  color: var(--success);
  border: 1px solid var(--success);
}

.alert-danger {
  background-color: var(--error-dim);
  color: var(--error);
  border: 1px solid var(--error);
}

.alert-error {
  background-color: var(--error-dim);
  color: var(--error);
  border: 1px solid var(--error);
}

.alert-warning {
  background-color: var(--warning-dim);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.alert-info {
  background-color: var(--info-dim);
  color: var(--info);
  border: 1px solid var(--info);
}

.alert-dismiss {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.alert-dismiss:hover {
  opacity: 1;
}

/* Alert message variant (inline) */
.alert-message {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.alert-message--success {
  background: var(--success-dim);
  color: var(--success);
}

.alert-message--error {
  background: var(--error-dim);
  color: var(--error);
}

.alert-message--warning {
  background: var(--warning-dim);
  color: var(--warning);
  padding: var(--space-4);
}

/* Spacing helpers */
.alert-mt {
  margin-top: var(--space-4);
}

.alert-mb {
  margin-bottom: var(--space-4);
}

/* =================================================================
   MODAL LEGACY NAMES
   ================================================================= */

.modal-overlay,
.modal-backdrop {
  /* Same hang point as entity-sheet: keep the white admin surface readable. */
  background: var(--admin-v2-sheet-backdrop);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  animation: fadeIn var(--duration-fast) var(--ease-out);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal {
  /* Admin V2 surfaces stay white; do not inherit shop-skin --bg-surface. */
  background: var(--admin-v2-color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  margin: var(--space-4);
  animation: slideIn var(--duration-normal) var(--ease-out);
}

/* Centered modals use the shared opacity/scale transition. The legacy
   slideIn keyframes overwrite translate(-50%, -50%) and cause a final jump. */
.modal.modal--center {
  animation: none;
}

/* Legacy dialogs zonder modal--* size class */
.modal:not(.modal--sm):not(.modal--md):not(.modal--lg):not(.modal--xl):not(.modal--full) {
  max-width: 480px;
}

/* Modal.tsx size variants (contexts layer wint van components/modals/_base.css) */
.modal.modal--sm {
  width: 90%;
  max-width: 400px;
}

.modal.modal--md {
  width: 90%;
  max-width: 560px;
}

.modal.modal--lg {
  width: 90%;
  max-width: 800px;
}

.modal.modal--xl {
  width: 92%;
  max-width: 1600px;
}

.modal.modal--full {
  width: calc(100% - var(--space-8));
  max-width: 1200px;
}

.modal-content {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-xl);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.modal-header h2,
.modal-header h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: var(--space-6);
  color: var(--text-secondary);
}

.modal-body p {
  margin: 0;
  line-height: var(--leading-relaxed);
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.modal-title {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-title--error {
  color: var(--error);
}

.modal-section {
  margin-bottom: var(--space-4);
}

.modal-section p {
  margin: 0 0 var(--space-2) 0;
  color: var(--text-secondary);
}

.modal-form-group {
  margin-bottom: var(--space-6);
}

.modal-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.modal-textarea {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  resize: vertical;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

.modal-btn {
  padding: 0.625rem var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-btn--secondary {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.modal-btn--danger {
  border: none;
  background: var(--error);
  color: var(--bg-deep);
}

.modal-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.modal-warning-text {
  margin-top: var(--space-2);
  color: var(--error);
}

/* =================================================================
   ICON COLORS (semantic)
   ================================================================= */

.icon-success {
  color: var(--success);
}

.icon-warning {
  color: var(--warning);
}

/* =================================================================
   BADGE WARNING (dashboard)
   ================================================================= */

.badge.badge-warning {
  background: var(--warning-dim);
  color: var(--warning);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

/* customers.css */
/**
 * Customer Management CSS
 * Styling voor klantbeheer modals en formulieren
 * 
 * AI-NOTE: Deze file bevat styling voor:
 * - MergeCustomersModal: Klanten samenvoegen (E5)
 * - DeleteCustomerModal: GDPR klantverwijdering
 */

/* ============================================
   MERGE CUSTOMERS MODAL
   ============================================ */

/* Container voor de twee klantkaarten naast elkaar */
.merge-customer-cards {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

/* Individuele klantkaart in merge modal */
.merge-customer-card {
  flex: 1;
  min-width: 200px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  background: var(--bg-secondary);
  transition: border-color 0.15s ease;
}

/* Geselecteerde target klant */
.merge-customer-card--selected {
  border: 2px solid var(--accent);
}

/* Label wrapper in klantkaart */
.merge-customer-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

/* Radio button in merge kaart */
.merge-customer-radio {
  margin-top: var(--space-1);
  flex-shrink: 0;
}

/* Klantinfo binnen de kaart */
.merge-customer-info {
  flex: 1;
}

/* Klantnaam */
.merge-customer-name {
  font-weight: 600;
  color: var(--text-primary);
}

/* Email adres */
.merge-customer-email {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Order count badge container */
.merge-customer-orders {
  margin-top: var(--space-2);
  font-size: 0.85rem;
}

/* Target indicator tekst */
.merge-customer-target-text {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--success);
}

/* Helptekst onder de kaarten */
.merge-help-text {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ============================================
   DELETE CUSTOMER MODAL
   ============================================ */

/* Waarschuwingstekst in delete modal */
.delete-customer-warning {
  color: var(--error);
  font-size: 0.875rem;
  margin-top: var(--space-2);
}

/* Reden textarea wrapper */
.delete-reason-wrapper {
  margin-top: var(--space-4);
}

/* Label voor reden veld */
.delete-reason-label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 500;
  color: var(--text-primary);
}

/* Textarea styling voor GDPR reden */
.delete-reason-textarea {
  width: 100%;
  resize: vertical;
}

/* Error message onder textarea */
.delete-reason-error {
  color: var(--error);
  font-size: 0.8rem;
  margin-top: var(--space-1);
}

/* ============================================
   CUSTOMER IMPORT
   ============================================ */

.customer-import__description {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.customer-import__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.customer-import__file-input {
  display: block;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.customer-import__file-input::file-selector-button {
  margin-right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--admin-radius-pill);
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  background-color: var(--accent-glow);
  color: var(--accent);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.customer-import__file-input::file-selector-button:hover {
  background-color: var(--bg-surface);
}

.customers-detail-hero-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-2);
}

/* dashboard-ext.css */
/**
 * ADMIN CONTEXT: Dashboard Extensions
 * 
 * Dashboard-specifieke styles die de bestaande dashboard.css
 * aanvullen: stats grid, recent orders, low stock widget,
 * skeleton loading, en dashboard-specifieke layouts.
 */

/* =================================================================
   DASHBOARD PAGE
   ================================================================= */

.dashboard-page {
  padding: var(--space-4) var(--space-6) var(--space-6);
}

/* Workspace-toolbar (tandwiel) op dashboard: zelfde rij als products, boven stats/panels */
.admin-page.dashboard-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-page.dashboard-page > .products-workspace-toolbar {
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

.dashboard-header {
  margin-bottom: var(--space-5);
}

.dashboard-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.dashboard-header h1 {
  margin: 0;
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  color: var(--text-primary);
}

.dashboard-error {
  background: var(--error-dim);
  border: 1px solid var(--error);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  color: var(--error);
}

/* =================================================================
   SEO NOINDEX DASHBOARD BANNER
   Eigen BEM-component — geen generieke .alert override, geen
   negative margins. Zit binnen de normale page-padding, net als
   alle andere dashboard-kaarten.
   ================================================================= */

.dashboard-seo-noindex-banner {
  margin-bottom: var(--space-4);
}

.dashboard-seo-noindex-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--error);
  color: var(--admin-v2-color-text-inverse);
  border-radius: var(--radius-lg);
}

.dashboard-seo-noindex-banner__icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.dashboard-seo-noindex-banner__body {
  flex: 1;
  min-width: 0;
}

.dashboard-seo-noindex-banner__text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium, 500);
  line-height: 1.5;
  margin: 0;
}

.dashboard-seo-noindex-banner__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--control-font-sm, 0.75rem);
  font-weight: var(--font-semibold, 600);
  color: var(--error);
  background: var(--admin-v2-color-surface);
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 120ms ease;
}

.dashboard-seo-noindex-banner__action:hover {
  opacity: 0.9;
  color: var(--error);
}

.dashboard-seo-noindex-banner__dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-control-compact);
  height: var(--admin-control-compact);
  margin-left: var(--space-2);
  padding: 0;
  border: none;
  background-color: var(--admin-v2-color-surface-overlay);
  border-radius: var(--radius-md);
  color: var(--admin-v2-color-text-inverse);
  cursor: pointer;
  transition: background 120ms ease;
}

.dashboard-seo-noindex-banner__dismiss:hover {
  background-color: var(--admin-v2-color-surface-overlay);
}

@media (max-width: 640px) {
  .dashboard-seo-noindex-banner__inner {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .dashboard-seo-noindex-banner__dismiss {
    margin-left: auto;
  }
}

/* =================================================================
   STATS STRIP
   ================================================================= */

.dashboard-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: var(--space-4);
}

@media (max-width: 1024px) {
  .dashboard-stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dashboard-stat-strip {
    grid-template-columns: 1fr;
  }
}

.dashboard-stat-card {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: var(--admin-control-compact);
  padding: 0 var(--admin-list-row-padding-x);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.15s ease;
}

.dashboard-stat-card:hover {
  border-color: var(--border-strong, var(--border));
}

.dashboard-stat-card__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.dashboard-stat-card__value--loading {
  color: var(--text-muted);
}

.dashboard-stat-card__divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}

.dashboard-stat-card__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}

/* =================================================================
   DASHBOARD CONTENT LAYOUT
   ================================================================= */

.dashboard-panels {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.dashboard-panels--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-panels--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-panels--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  .dashboard-panels--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .dashboard-panels,
  .dashboard-panels--cols-2,
  .dashboard-panels--cols-3,
  .dashboard-panels--cols-4 {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   DASHBOARD PANEL SHELL
   ================================================================= */

.dashboard-panel {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dashboard-panel__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-panel__header h2 {
  margin: 0;
  font-size: var(--card-title-size);
  font-weight: 600;
  color: var(--text-primary);
}

.dashboard-panel__body {
  padding: 20px;
}

.dashboard-panel__link {
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.dashboard-panel__link:hover {
  text-decoration: underline;
}

.dashboard-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--admin-radius-sm);
  font-size: 11px;
  font-weight: 600;
}

.dashboard-pill--info {
  background: color-mix(in srgb, var(--info) 10%, transparent);
  color: var(--info);
}

.dashboard-pill--warning {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}

.dashboard-pill--urgent {
  background: color-mix(in srgb, var(--error) 10%, transparent);
  color: var(--error);
}

/* Subsectietitel binnen dashboard-panel (geen products-workspace full-bleed strip) */
.dashboard-panel__subsection-title {
  margin: 0 0 var(--space-3);
  font-size: var(--admin-font-size-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.dashboard-panel__base-hint {
  margin: 0 0 var(--space-4);
}

/* Quick-create / sectie onder dashboard-lijst */
.dashboard-panel__body .products-workspace-section--in-panel {
  margin-top: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* Neutraliseer products titelstrip wanneer toch in dashboard-panel gebruikt */
.dashboard-panel__body .products-workspace-section--in-panel .products-workspace-section__title {
  width: auto;
  min-height: 0;
  margin: 0 0 var(--space-3);
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.dashboard-exception-form__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-form-field-gap);
}

.dashboard-exception-form__times .products-editor-field {
  margin: 0;
}

button.dashboard-order-row {
  width: 100%;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
}

/* Lijstrij met primaire link + secundaire actie (bijv. verwijderen) rechts */
.dashboard-order-row--with-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.dashboard-order-row--with-actions:last-child {
  border-bottom: none;
}

.dashboard-order-row--with-actions:hover {
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
}

.dashboard-order-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--admin-form-field-gap);
  padding: 0;
  margin: 0;
  border: none;
  border-bottom: none;
  text-decoration: none;
  color: inherit;
  background: transparent;
}

.dashboard-order-row__main:hover {
  background: transparent;
}

.dashboard-order-row__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: var(--space-2);
}

.dashboard-order-row--with-actions .products-workspace-toolbar__action {
  flex-shrink: 0;
}

.dashboard-order-list {
  display: flex;
  flex-direction: column;
}

.dashboard-order-row {
  display: flex;
  align-items: center;
  gap: var(--admin-form-field-gap);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.dashboard-order-row:last-child {
  border-bottom: none;
}

.dashboard-order-row--link {
  text-decoration: none;
  color: inherit;
}

.dashboard-order-row--stacked {
  flex-direction: column;
  align-items: stretch;
}

.dashboard-order-row--link:hover {
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
}

.dashboard-order-row--skeleton {
  height: 64px;
  border-radius: var(--radius-md);
  border-bottom: none;
  background: linear-gradient(
    90deg,
    var(--bg-surface) 25%,
    var(--bg-hover) 50%,
    var(--bg-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: var(--space-2);
}

.dashboard-order-avatar {
  width: 36px;
  height: var(--admin-control-compact);
  border-radius: var(--admin-radius-pill);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.dashboard-order-avatar--success {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.dashboard-order-avatar--warning {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}

.dashboard-order-avatar--error {
  background: color-mix(in srgb, var(--error) 10%, transparent);
  color: var(--error);
}

.dashboard-order-avatar--info {
  background: color-mix(in srgb, var(--info) 10%, transparent);
  color: var(--info);
}

.dashboard-order-info {
  min-width: 0;
  flex: 1;
}

.dashboard-order-customer {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-order-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-profile-change__meta {
  margin-top: var(--space-1);
  color: var(--text-muted);
}

.dashboard-profile-change__photos,
.dashboard-profile-change__name-diff {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.dashboard-profile-change__photo,
.dashboard-profile-change__placeholder {
  width: calc(var(--admin-control-compact) + var(--space-3));
  height: calc(var(--admin-control-compact) + var(--space-3));
  border-radius: var(--admin-radius-sm);
  flex-shrink: 0;
}

.dashboard-profile-change__photo {
  object-fit: cover;
}

.dashboard-profile-change__placeholder {
  display: inline-block;
  background: var(--bg-elevated);
}

.dashboard-order-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.dashboard-order-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.dashboard-order-time {
  font-size: 12px;
  color: var(--text-muted);
}

/* =================================================================
   ACTION FILTERS
   ================================================================= */

.dashboard-action-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dashboard-action-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--admin-control-compact);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--admin-radius-pill);
  background: var(--bg-deep);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dashboard-action-filter:hover {
  border-color: var(--border-strong, var(--border));
  background: var(--bg-hover);
}

.dashboard-action-filter--active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 600;
}

.dashboard-action-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--admin-radius-pill);
  background: var(--bg-surface);
  color: currentColor;
  font-size: 11px;
  line-height: 1;
}

.dashboard-panel__empty {
  padding: var(--space-4) 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* =================================================================
   REPORTS PLACEHOLDER
   ================================================================= */

.reports-placeholder {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 240px;
  border: 1px dashed var(--border);
}

.reports-placeholder-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle, var(--bg-hover));
  border-radius: var(--radius-lg);
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.reports-placeholder h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.reports-placeholder p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 280px;
  line-height: var(--line-height-relaxed, 1.6);
}

/* =================================================================
   SKELETON LOADING
   ================================================================= */

.order-row.skeleton {
  height: 52px;
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-hover) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =================================================================
   DASHBOARD RESPONSIVE
   ================================================================= */

@media (max-width: 640px) {
  .dashboard-page {
    padding: var(--space-4);
  }

  .dashboard-header-content {
    align-items: flex-start;
  }

  .dashboard-panel__header,
  .dashboard-panel__body {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .dashboard-action-filters {
    gap: 6px;
  }
}

/* dashboard.css */
/**
 * ADMIN CONTEXT: Dashboard Components
 * 
 * Dashboard-specifieke styling voor admin panels.
 * Stat cards, charts, quick actions, activity feeds.
 * 
 * DATA ATTRIBUTES:
 * - data-dashboard-layout="overview|analytics|detailed"
 */

/* =================================================================
   DASHBOARD LAYOUT
   ================================================================= */

.dashboard {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
}

.dashboard--overview {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "stat1 stat2 stat3 stat4"
    "chart chart chart activity"
    "chart chart chart activity";
}

.dashboard--analytics {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  grid-template-areas:
    "stats stats"
    "main sidebar"
    "main sidebar";
}

/* =================================================================
   STAT CARDS
   ================================================================= */

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.stat-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card__label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.stat-card__icon {
  width: 2rem;
  height: 2rem;
  padding: var(--space-2);
  background: var(--accent-subtle);
  border-radius: var(--radius-md);
  color: var(--accent);
}

.stat-card__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: 1;
}

.stat-card__trend {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}

.stat-card__trend--up {
  color: var(--success);
}

.stat-card__trend--down {
  color: var(--error);
}

.stat-card__trend-icon {
  width: 1rem;
  height: 1rem;
}

/* =================================================================
   CHART CONTAINER
   ================================================================= */

.chart-container {
  grid-area: chart;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.chart-container__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.chart-container__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.chart-container__actions {
  display: flex;
  gap: var(--space-2);
}

.chart-container__body {
  height: 300px;
  position: relative;
}

/* =================================================================
   ACTIVITY FEED
   ================================================================= */

.activity-feed {
  grid-area: activity;
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

.activity-feed__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.activity-feed__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.activity-feed__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.activity-feed__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.activity-feed__item:hover {
  background: var(--surface-hover);
}

.activity-feed__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.activity-feed__content {
  flex: 1;
  min-width: 0;
}

.activity-feed__text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: var(--line-height-snug);
}

.activity-feed__time {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* =================================================================
   QUICK ACTIONS
   ================================================================= */

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.quick-action:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.quick-action__icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-2);
  background: var(--accent-subtle);
  border-radius: var(--radius-md);
  color: var(--accent);
}

.quick-action__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1200px) {
  .dashboard--overview {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "stat1 stat2"
      "stat3 stat4"
      "chart chart"
      "activity activity";
  }
}

@media (max-width: 768px) {
  .dashboard--overview {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stat1"
      "stat2"
      "stat3"
      "stat4"
      "chart"
      "activity";
  }
  
  .stat-card__value {
    font-size: var(--font-size-2xl);
  }
}

/* design-hub.css */
/* Design hub — Theme / Skin / Typografie shared page rhythm */

@layer admin {
  /*
   * Match domain workspace settings (members-workspace-settings-page):
   * toolbar row (tabs + actions) then content with --space-6 breathing room.
   */
  .products-page.design-theme-page,
  .products-page.design-typography-page,
  .products-page.theme-settings-page {
    gap: var(--space-6);
  }
}

/* design-typography.css */
/* Design — Typografie admin workspace */

@layer admin {
  .design-typography-workspace {
    padding: 0 var(--space-6) var(--space-6);
  }

  .design-typography-card__intro {
    margin: 0 0 var(--space-4);
    font-size: var(--admin-workspace-detail-font);
    line-height: 1.5;
    color: var(--text-secondary);
  }

  .design-typography-preview {
    margin-bottom: var(--space-5);
    padding: var(--admin-v2-card-padding-y, var(--space-5))
      var(--admin-v2-card-padding-x, var(--space-5));
    border: 1px solid var(--admin-v2-border-default, var(--border));
    border-radius: var(--admin-v2-radius-card, var(--radius-lg));
    background: var(--admin-v2-color-surface);
    box-shadow: var(--admin-v2-shadow-xs, none);
  }

  .design-typography-preview__heading {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: 1.25;
    color: var(--text-primary);
  }

  .design-typography-preview__body {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text-secondary);
  }

  .design-typography-fields {
    max-width: 36rem;
  }
}

/* editors.css */
/**
 * ADMIN CONTEXT: Editors
 * 
 * Markdown editor, variant editor, en gerelateerde UI patterns.
 */

/* =================================================================
   MARKDOWN EDITOR
   ================================================================= */

.markdown-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.markdown-editor-toolbar {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  padding: var(--space-2);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.markdown-editor-button {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background-color var(--transition-fast);
  color: var(--text-primary);
}

.markdown-editor-button:hover {
  background-color: var(--bg-surface);
}

.markdown-editor-button--bold {
  font-weight: var(--font-bold);
}

.markdown-editor-button--italic {
  font-style: italic;
}

.markdown-editor-button--heading {
  font-weight: var(--font-semibold);
}

.markdown-editor-label {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  align-self: center;
}

.markdown-editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.markdown-editor-input-wrapper {
  border-right: 1px solid var(--border);
}

.markdown-editor-textarea {
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  border: none;
  resize: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  outline: none;
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

.markdown-editor-preview {
  padding: var(--space-4);
  background-color: var(--bg-surface);
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.markdown-editor-preview-placeholder {
  color: var(--text-secondary);
  font-style: italic;
}

/* Prose typography inside markdown preview */
.markdown-editor-preview h1 { font-size: 1.75rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.markdown-editor-preview h2 { font-size: 1.5rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.markdown-editor-preview h3 { font-size: 1.25rem; font-weight: 600; margin: 0.75rem 0 0.375rem; }
.markdown-editor-preview p { margin: 0.5rem 0; }
.markdown-editor-preview ul { padding-left: 1.5rem; margin: 0.5rem 0; }
.markdown-editor-preview li { margin: 0.25rem 0; }
.markdown-editor-preview blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 0.5rem 0;
  color: var(--text-secondary);
}
.markdown-editor-preview pre {
  background: var(--text-primary);
  color: var(--bg-elevated);
  padding: 1rem;
  border-radius: var(--admin-radius-sm);
  overflow-x: auto;
  margin: 0.5rem 0;
}
.markdown-editor-preview code {
  background: var(--border);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 0.875em;
}
.markdown-editor-preview pre code {
  background: none;
  padding: 0;
}
.markdown-editor-preview a { color: var(--accent); text-decoration: underline; }
.markdown-editor-preview hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

@media (max-width: 768px) {
  .markdown-editor-split {
    grid-template-columns: 1fr;
  }
  
  .markdown-editor-input-wrapper {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* =================================================================
   VARIANT EDITOR
   ================================================================= */

.variant-editor {
  margin-top: var(--space-4);
}

.variant-options-editor {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.variant-options-editor h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.variant-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}

@media (max-width: 900px) {
  .variant-options-grid {
    grid-template-columns: 1fr;
  }
}

.variant-option-card {
  background: var(--admin-v2-color-surface);
  border: 1px solid var(--admin-v2-border-default, var(--border));
  border-radius: var(--admin-v2-radius-card, var(--radius-md));
  box-shadow: var(--admin-v2-shadow-sm, var(--shadow-sm));
  padding: var(--admin-v2-space-4, var(--space-4));
  margin-bottom: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-3, var(--space-3));
}

.variant-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
}

.variant-option-header__name {
  font-size: var(--admin-v2-font-size-body, var(--text-sm));
  font-weight: var(--font-semibold);
  color: var(--admin-v2-color-text, var(--text-primary));
  letter-spacing: -0.01em;
}

.variant-option-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
}

.variant-value-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.75rem;
  padding: 0.25rem 0.625rem;
  background: var(--admin-v2-color-primary-soft, var(--accent-glow));
  color: var(--admin-v2-color-primary, var(--accent));
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-pill, 999px);
  font-size: var(--admin-v2-font-size-meta, var(--text-sm));
  font-weight: var(--font-medium);
  line-height: 1.2;
}

.variant-value-remove {
  background: none;
  border: none;
  color: currentColor;
  cursor: pointer;
  padding: 0;
  margin-left: var(--space-1);
  font-size: var(--text-base);
  line-height: 1;
  opacity: 0.65;
}

.variant-value-remove:hover {
  opacity: 1;
}

.variant-option-add-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin-top: auto;
  padding-top: var(--admin-v2-space-3, var(--space-3));
  border-top: 1px solid var(--admin-v2-border-subtle, var(--border));
  background: transparent;
}

.variant-option-add-value .form-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}

.variant-option-add {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--admin-v2-space-3, var(--space-3)) var(--admin-v2-space-4, var(--space-4));
  background: var(--admin-v2-color-surface);
  border: 1px dashed var(--admin-v2-border-strong, var(--border));
  border-radius: var(--admin-v2-radius-card, var(--radius-md));
  box-shadow: none;
}

.variant-option-add .form-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Bulk Generate Section */
.variant-bulk-generate {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--admin-v2-color-surface);
  border-radius: var(--admin-v2-radius-card, var(--radius-md));
  border: 1px solid var(--admin-v2-border-default, var(--border));
  box-shadow: var(--admin-v2-shadow-sm, var(--shadow-sm));
}

.variant-bulk-generate h4 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.variant-bulk-generate__intro {
  margin-bottom: var(--space-3);
}

.variant-bulk-generate__intro .form-hint,
.variant-bulk-generate__intro .products-editor-hint {
  margin: 0;
}

.variant-bulk-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-top: 0;
}

.variant-bulk-controls .form-group,
.variant-bulk-controls__price {
  margin-bottom: 0;
  flex: 0 1 auto;
  max-width: none;
}

.variant-bulk-controls__status {
  margin: 0;
  align-self: center;
}

/* Variant List */
.variant-list {
  margin-top: var(--space-6);
}

.variant-list-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.variant-list-header h4 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.variant-empty-state {
  padding: var(--space-8);
  text-align: center;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

.variant-table-wrapper {
  overflow-x: auto;
}

.variant-table {
  min-width: 480px;
}

/* Dense row actions — zelfde 16px glyph als toolbar icon-only pills */
.variant-table .action-button {
  width: var(--admin-control-compact, 36px);
  height: var(--admin-control-compact, 36px);
  padding: 6px;
}

.variant-table .action-button svg {
  width: var(--admin-toolbar-inline-icon-size, 16px) !important;
  height: var(--admin-toolbar-inline-icon-size, 16px) !important;
}

.products-workspace-module-body .variant-table th,
.products-workspace-module-body .variant-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--control-font-md);
}

.products-workspace-module-body .variant-table th:last-child,
.products-workspace-module-body .variant-table td:last-child {
  width: 1%;
  white-space: nowrap;
}

.variant-summary {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
}

/* Variant Badge in Products List */
.variant-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  background: var(--accent-glow);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin-left: var(--space-2);
}

/* Stock Variant Indicator */
.stock-variant-indicator {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-left: var(--space-1);
}

/* Rich text editor ownership moved to v2/editor-workspace/workspace-shell.css. */

/* filters.css */
/**
 * ADMIN CONTEXT: Filters, Toolbar & Search
 * 
 * Filter bars, search inputs, en toolbar patronen 
 * voor admin lijstpagina's.
 */

/* =================================================================
   ADMIN FILTERS
   ================================================================= */

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.admin-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 150px;
}

.admin-filter-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.admin-filter-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.admin-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.admin-filter {
  min-width: 150px;
}

.admin-filter .form-select {
  padding: 0.625rem 2.5rem 0.625rem var(--space-3);
}

/* =================================================================
   ADMIN TOOLBAR
   ================================================================= */

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.admin-toolbar-filters {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.admin-toolbar-count {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* =================================================================
   ADMIN SEARCH
   ================================================================= */

.admin-search {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  position: relative;
}

.admin-search-input {
  width: 100%;
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem) 0 calc(var(--admin-v2-search-padding-x, 1.25rem) + var(--admin-v2-search-icon-size, 18px) + var(--space-2));
  font-size: var(--admin-v2-field-control-font-size, var(--text-sm));
  font-weight: var(--admin-v2-font-weight-medium, var(--font-medium));
  border: 1.5px solid var(--admin-v2-border-default, var(--border));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, var(--radius-md)));
  background-color: var(--admin-v2-color-text-inverse);
  color: var(--admin-v2-color-text, var(--text-primary));
  box-sizing: border-box;
}

.admin-search-input:focus {
  outline: none;
  border-color: var(--admin-v2-color-primary, var(--accent));
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, var(--accent-glow));
}

.admin-search-input::placeholder {
  color: var(--admin-v2-color-text-muted, var(--text-muted));
}

.admin-search-icon {
  position: absolute;
  left: var(--admin-v2-search-padding-x, var(--space-3));
  top: 50%;
  transform: translateY(-50%);
  width: var(--admin-v2-search-icon-size, 18px);
  height: var(--admin-v2-search-icon-size, 18px);
  color: var(--admin-v2-color-text-muted, var(--text-secondary));
  pointer-events: none;
}

/* =================================================================
   PERIOD SELECTOR (dashboard)
   ================================================================= */

.period-selector {
  display: flex;
  gap: var(--space-1);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-1);
}

.period-btn {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.period-btn:hover {
  color: var(--text-primary);
}

.period-btn.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* footer.css */
/**
 * CONTEXT: Admin — Footer
 * Grid-navigatie footer voor het admin panel.
 *
 * AI-NOTE: De admin footer vervangt de sidebar navigatie.
 * Toont alle admin secties als kaarten met iconen in een 5-kolom grid.
 *
 * STRUCTURE:
 * <footer class="admin-footer">
 *   <div class="admin-footer__label">Browse</div>
 *   <div class="admin-footer__grid">
 *     <a class="admin-footer__card">
 *       <Icon class="admin-footer__icon" />
 *       <span class="admin-footer__card-label">Products</span>
 *     </a>
 *   </div>
 * </footer>
 */

/* =================================================================
   FOOTER CONTAINER
   ================================================================= */

.admin-footer {
  width: 100%;
  background: var(--bg-canvas);
  border-top: 1px solid var(--border);
  box-sizing: border-box;
  margin-top: var(--space-6);
  padding: var(--space-8) var(--space-6) var(--space-12);
  position: relative;
  z-index: 20;
}

.admin-footer__inner {
  max-width: var(--content-7xl, 1280px);
  margin: 0 auto;
}

.admin-footer__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* =================================================================
   GRID
   ================================================================= */

.admin-footer__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

/* =================================================================
   CARD ITEMS
   ================================================================= */

.admin-footer__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-secondary);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
}

.admin-footer__card:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.admin-footer__icon {
  transition: transform 0.15s;
}

.admin-footer__card:hover .admin-footer__icon {
  transform: scale(1.1);
}

/* Active state — consistent met sidebar en hamburger menu */
.admin-footer__card--active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

.admin-footer__card--active:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.admin-footer__card-label {
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

/* =================================================================
   GROUP WITH CHILDREN — verticale card die in het grid past
   Parent boven (visueel dominant), children als compacte lijst eronder.
   ================================================================= */

.admin-footer__group {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s;
}

.admin-footer__group:hover {
  border-color: var(--border-strong);
}

/* Parent card binnen group: geen eigen border/bg (group geeft die) */
.admin-footer__group > .admin-footer__card {
  background: transparent;
  border: none;
  border-radius: 0;
}

.admin-footer__group > .admin-footer__card:hover {
  background: var(--bg-hover);
}

/* Children container: compacte verticale lijst */
.admin-footer__children {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

/* Child items: horizontaal (icon + label naast elkaar) */
.admin-footer__card--child {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

.admin-footer__card--child:last-child {
  border-bottom: none;
}

.admin-footer__card--child:hover {
  background: var(--bg-hover);
}

.admin-footer__card--child .admin-footer__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.admin-footer__card--child .admin-footer__card-label {
  font-size: 0.75rem;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .admin-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .admin-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* forms-admin.css */
/**
 * ADMIN CONTEXT: Form Extensions
 * 
 * Admin-specifieke form patronen die bovenop de generieke 
 * form components komen: file uploads, hint boxes, form sections,
 * form actions, en input varianten.
 *
 * NOTE: Basisform styling (.form-group, .form-label, .form-input)
 * staat in components/forms/_base.css
 */

/* =================================================================
   ADMIN: INPUT & SELECT HEIGHT — same rhythm as buttons (28px)
   Tokens: --admin-control-field / --admin-v2-field-control-height
   Textareas stay multi-line (excluded below).
   ================================================================= */

input.form-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select.form-select,
.form-control:not(textarea) {
  box-sizing: border-box;
  height: var(--admin-control-field, 36px);
  min-height: var(--admin-control-field, 36px);
  max-height: var(--admin-control-field, 36px);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--admin-control-inline-padding, 12px);
  padding-right: var(--admin-control-inline-padding, 12px);
  font-size: var(--admin-v2-field-control-font-size, var(--text-sm)) !important;
  line-height: var(--admin-v2-field-control-line-height, 1.25);
  border-radius: var(--admin-radius-control, var(--radius-md));
}

select.form-select {
  padding-right: calc(var(--admin-control-inline-padding, 12px) + 1.5rem);
}

/* =================================================================
   DYNAMIC FIELDS — vertical spacing between form groups
   ================================================================= */

.dynamic-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* =================================================================
   FORM GROUP & LABEL EXTENSIONS
   ================================================================= */

.form-label-required::after {
  content: " *";
  color: var(--error);
}

.required {
  color: var(--error);
}

/* =================================================================
   FORM LAYOUT PATTERNS
   ================================================================= */

.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--admin-v2-shadow-xs);
  padding: var(--space-5);
}

.form-section-title {
  margin-bottom: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  color: var(--text-primary);
}

.form-actions {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Address form row: street (2fr) + house number (1fr) */
.form-row--address-street {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}

/* Address form row: postcode (1fr) + city (2fr) */
.form-row--address-zip {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-4);
}

.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-row-flex {
  display: flex;
  gap: var(--space-4);
}

.form-group-flex {
  flex: 1;
}

.form-row-span-full {
  grid-column: 1 / -1;
}

.form-group-narrow {
  max-width: 250px;
}

@media (max-width: 640px) {
  .form-row,
  .form-row-3 {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   FORM HINTS & ERRORS
   ================================================================= */

.form-hint {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--admin-font-size-base);
  color: var(--error);
  margin-top: var(--space-1);
}

.form-text {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
  margin-top: 0.375rem;
}

.form-label-hint {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
}

/* =================================================================
   FORM HINT BOX
   ================================================================= */

.form-hint-box {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
}

.form-hint-box p {
  margin: 0;
  line-height: var(--leading-normal);
}

.form-hint-box--warning {
  border: 1px solid var(--warning);
  background-color: var(--warning-dim);
}

.form-hint-box--info {
  border: 1px solid var(--border);
  background-color: var(--bg-surface);
}

.form-hint-box-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: var(--leading-normal);
}

.form-hint-box-header svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--text-muted);
}

.form-hint-box code {
  background-color: var(--bg-hover);
  padding: 0.125rem var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--admin-font-size-base);
}

.form-hint-list {
  margin: var(--space-2) 0 0 var(--space-4);
  padding-left: var(--space-2);
}

.form-hint-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--admin-font-size-base);
  color: var(--accent);
  text-decoration: none;
}

.form-hint-link:hover {
  text-decoration: underline;
}

.form-hint-text {
  margin: var(--space-2) 0 0 0;
  font-size: var(--text-sm);
}

.form-hint-mb {
  margin-bottom: var(--space-4);
}

.form-link {
  color: var(--accent);
  text-decoration: none;
}

.form-link:hover {
  text-decoration: underline;
}

/* =================================================================
   CHECKBOX EXTENSIONS — wrapper + admin-wide native checkbox chrome
   ================================================================= */

.form-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: var(--form-control-checkbox-gap);
}

.form-checkbox-wrapper:has(input[type="checkbox"]:disabled),
.form-checkbox-wrapper:has(input[type="checkbox"]:disabled) .form-checkbox-label {
  color: var(--admin-v2-color-text-muted, var(--text-secondary));
  cursor: not-allowed;
}

/*
 * Admin SSoT: every native checkbox uses form-control-checkbox tokens.
 * (Custom .form-checkbox__box pattern stays in components/forms/checkboxes.css.)
 */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--form-control-checkbox-size);
  min-width: var(--form-control-checkbox-size);
  height: var(--form-control-checkbox-size);
  margin: 0;
  padding: 0;
  border: var(--form-control-checkbox-border-width) solid var(--form-control-checkbox-border);
  border-radius: var(--form-control-checkbox-radius);
  background-color: var(--form-control-checkbox-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--form-control-checkbox-check-size) var(--form-control-checkbox-check-size);
  cursor: pointer;
  vertical-align: middle;
  accent-color: var(--form-control-checkbox-checked-bg);
  transition:
    background-color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease);
}

input[type="checkbox"]:checked {
  background-color: var(--form-control-checkbox-checked-bg);
  border-color: var(--form-control-checkbox-checked-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--form-control-checkbox-checked-bg);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 1;
  background-color: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
  background-image: none;
}

input[type="checkbox"]:disabled:checked {
  background-color: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
  background-image: var(--admin-v2-select-chevron);
}

label:has(> input[type="checkbox"]:disabled),
label:has(> input[type="checkbox"]:disabled) .form-checkbox-label {
  color: var(--admin-v2-color-text-muted);
  cursor: not-allowed;
}

/* =================================================================
   PASSWORD INPUT GROUP
   ================================================================= */

.form-input-group {
  display: flex;
  position: relative;
  align-items: stretch;
}

.form-input-group .form-input {
  flex: 1;
  padding-right: 4.5rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form-input-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  min-width: 3.75rem;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  font-size: var(--admin-font-size-base);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.form-input-toggle:hover {
  background: var(--bg-hover);
}

/* =================================================================
   INPUT VARIANTS
   ================================================================= */

.form-input-sm {
  padding: 0.375rem var(--space-2);
  font-size: 0.8125rem;
}

.form-input-rate {
  width: 70px;
  text-align: right;
}

.form-input-fee {
  width: 80px;
}

.form-input-flex {
  flex: 1;
  font-weight: var(--font-medium);
}

.form-input-standard {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* =================================================================
   INPUT GROUP (prefix/suffix)
   ================================================================= */

.input-group {
  display: flex;
  align-items: center;
}

.input-group-text {
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.input-group .form-input {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .form-control {
  flex: 1;
}

.input-group .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.input-group-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.input-suffix {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* =================================================================
   FILE UPLOAD
   ================================================================= */

.form-file-wrapper {
  position: relative;
}

.form-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.form-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.form-file-label:hover {
  border-color: var(--accent);
  background-color: var(--accent-glow);
}

.form-file-label svg {
  width: 48px;
  height: 48px;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.form-file-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.form-file-text strong {
  color: var(--accent);
}

/* =================================================================
   IMAGE PREVIEW
   ================================================================= */

.image-preview {
  margin-top: var(--space-4);
  position: relative;
  display: inline-block;
}

.image-preview--current {
  margin-top: 0;
  margin-bottom: var(--admin-form-field-gap);
}

.image-preview img {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.image-preview-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--error);
  color: var(--bg-deep);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

/* =================================================================
   TEXTAREA EXTENSIONS
   ================================================================= */

.form-textarea-code {
  min-height: 150px;
  font-family: var(--font-mono);
  resize: vertical;
}

.form-textarea-full {
  width: 100%;
  resize: vertical;
}

/* =================================================================
   FORM CONTROL (alternative input class)
   ================================================================= */

.form-control {
  width: 100%;
  padding: 0.625rem var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:disabled {
  background-color: var(--admin-v2-input-bg-disabled, var(--admin-v2-color-surface-muted));
  color: var(--admin-v2-color-text);
  cursor: not-allowed;
  opacity: 1;
}

/*
 * Read-only + disabled display fields (e.g. inventory levels): keep value readable,
 * keep muted surface so they do not look editable.
 */
.form-input.readonly,
.form-input[readonly]:disabled {
  background-color: var(--admin-v2-input-bg-disabled, var(--admin-v2-color-surface-muted));
  color: var(--admin-v2-color-text);
  opacity: 1;
  cursor: not-allowed;
}

/*
 * Admin status alert — message + action stack with clear gap (entity-sheet inventory status).
 * Role: admin-alert; siblings in sheet/settings get spacing for free.
 */
.admin-alert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--admin-v2-space-3);
  box-sizing: border-box;
  padding: var(--admin-v2-space-3) var(--admin-v2-space-4);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-md, var(--admin-radius-md));
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-field-control-font-size, var(--text-sm));
  line-height: var(--admin-v2-field-control-line-height, 1.35);
}

.admin-alert > p {
  margin: 0;
}

.admin-alert .products-workspace-inline-actions {
  margin: 0;
}

.admin-alert--success {
  background: var(--admin-v2-state-success-bg);
  border-color: var(--admin-v2-color-success-border);
  color: var(--admin-v2-state-success-text);
}

.admin-alert--warning {
  background: var(--admin-v2-state-warning-bg);
  border-color: var(--admin-v2-border-default);
  color: var(--admin-v2-state-warning-text);
}

.admin-alert--error {
  background: var(--admin-v2-state-error-bg);
  border-color: var(--admin-v2-border-default);
  color: var(--admin-v2-state-error-text);
}

select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  padding-right: 2.5rem;
}

/* =================================================================
   FORM FOOTER
   ================================================================= */

.form-footer {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* =================================================================
   ERROR LIST (in alerts)
   ================================================================= */

.error-list {
  margin-top: var(--space-2);
  margin-left: var(--space-6);
}

/* =================================================================
   INPUT WITH ICON/ADDON
   ================================================================= */

.input-wrapper {
  position: relative;
}

.input-addon {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-1);
  min-width: auto;
}

/* =================================================================
   TOGGLE BOX (voor test mode, feature switches, etc.)
   ================================================================= */

.toggle-box {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.toggle-box--warning {
  background: var(--warning-dim);
  border-color: var(--warning);
}

.toggle-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.toggle-checkbox {
  margin-top: var(--space-1);
  flex-shrink: 0;
}

.toggle-content-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
}

/* =================================================================
   HELP BOX (voor provider help, etc.)
   ================================================================= */

.help-box {
  padding: var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.help-box-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
}

.help-box-links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* =================================================================
   NOTIFICATION LIST (checkbox + title + description)
   ================================================================= */

.notification-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.notification-item:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}

.notification-item__checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.notification-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.notification-item__title {
  font-size: var(--control-font-md);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.notification-item__description {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

/* =================================================================
   TIER NUDGE (upgrade prompt)
   ================================================================= */

.settings-tier-nudge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.settings-tier-nudge svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

/* =================================================================
   SELECT SIZE VARIANTS
   ================================================================= */

.form-select--sm {
  height: var(--control-height-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--control-font-sm);
}

/* =================================================================
   CHECKBOX LABEL (standalone)
   ================================================================= */

.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--form-control-checkbox-gap);
  font-size: var(--form-control-checkbox-label-font-size);
  font-weight: var(--form-control-checkbox-label-font-weight);
  line-height: var(--form-control-checkbox-label-line-height);
  color: var(--text-primary);
  cursor: pointer;
}

/* guided-choice-composer.css */
/* Guided Choice admin composer — Admin V2 process sheet context.
 * Sheet body grid participation comes from `.products-detail-form` (`display: contents`). */

.guided-choice-option-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.guided-choice-option-row__main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.guided-choice-option-row__main .form-input {
  flex: 1 1 auto;
  min-width: 0;
}

.guided-choice-inline-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.guided-choice-question-image {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 15rem;
  min-width: 0;
}

.guided-choice-question-image .products-workspace-media-panel--compact .products-workspace-gallery-empty,
.guided-choice-question-image .products-workspace-media-panel--compact .products-workspace-gallery-item__image {
  min-height: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.guided-choice-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--admin-toolbar-gap, var(--space-2));
}

.guided-choice-row-actions .homepage-layout-card__position-field {
  min-width: 4.5rem;
  margin: 0;
}

.guided-choice-row-actions .homepage-layout-card__position-select {
  width: 4.5rem;
  min-width: 4.5rem;
}

.guided-choice-row-actions .products-workspace-toolbar__action[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 12%, var(--bg-surface, var(--admin-v2-color-surface)));
}

.guided-choice-composer__advanced {
  min-width: 0;
}

.guided-choice-composer__advanced summary {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  cursor: pointer;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.guided-choice-composer__advanced .products-editor-category-row {
  align-items: flex-start;
}

.guided-choice-composer__advanced .form-checkbox-label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.guided-choice-composer__alert {
  margin: 0;
  padding: var(--space-3);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--border));
  border-radius: var(--admin-radius-card);
}

.guided-choice-composer__scenario-output {
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  color: var(--text-primary);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--admin-radius-card);
  font-size: var(--text-sm);
}

.guided-choice-workspace-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}

.guided-choice-workspace-footer .btn-danger {
  flex: 0 0 auto;
}

.admin-v2-sheet-progression button.admin-v2-sheet-progression__step {
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.guided-choice-template-picker {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-4);
}

.guided-choice-template-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-space-4);
  align-items: stretch;
}

.guided-choice-template-picker__card {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-3);
  min-width: 0;
  height: 100%;
}

.guided-choice-template-picker__card .products-editor-hint {
  flex: 1 1 auto;
  margin: 0;
}

.guided-choice-template-picker__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

.guided-choice-intro-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.guided-choice-intro-preview__eyebrow,
.guided-choice-intro-preview__lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.guided-choice-intro-preview__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

.guided-choice-fit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.guided-choice-fit-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.guided-choice-fit-row__product {
  flex: 1 1 100%;
  padding: 0;
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.guided-choice-preview-frame {
  max-width: 100%;
  margin-inline: auto;
  overflow: auto;
}

.guided-choice-preview-frame--desktop {
  width: 100%;
}

.guided-choice-preview-frame--mobile {
  width: min(24rem, 100%);
}

.guided-choice-preview-frame .pg-guided-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.guided-choice-preview-frame .pg-guided-choice__title,
.guided-choice-preview-frame .pg-guided-choice__step-title {
  margin: 0;
  color: var(--text-primary);
}

.guided-choice-preview-frame .pg-guided-choice__lead,
.guided-choice-preview-frame .pg-guided-choice__eyebrow {
  margin: 0;
  color: var(--text-secondary);
}

.guided-choice-preview-frame .pg-guided-choice__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.guided-choice-preview-frame .pg-guided-choice__reasons {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}

@media (max-width: 47.99rem) {
  .guided-choice-template-picker__grid {
    grid-template-columns: 1fr;
  }

  .guided-choice-workspace-footer {
    flex-wrap: wrap;
  }
}

/* icon-sidebar.css */
/**
 * CONTEXT: Admin — Icon Sidebar
 * Compacte icon-only navigatie sidebar links van de content.
 * Altijd zichtbaar op desktop, verborgen op mobiel.
 * Bij hover klapt de sidebar uit en toont labels naast de icons.
 *
 * STRUCTURE:
 * <aside class="icon-sidebar">
 *   <nav class="icon-sidebar__nav">
 *     <a class="icon-sidebar__item">
 *       <svg>...</svg>  (Lucide icon)
 *       <span class="icon-sidebar__tooltip">Label</span>
 *     </a>
 *   </nav>
 * </aside>
 *
 * INTEGRATION:
 * - Navbar: fixed top, z-index 100
 * - Sidebar: fixed left, onder de navbar (top: 56px)
 * - Main content: margin-left: 56px (via .admin-main aanpassing)
 * - Bij hover overlapt de sidebar de content (geen layout shift)
 */

/* =================================================================
   ICON SIDEBAR — VARIABLES
   ================================================================= */

:root {
  --icon-sidebar-width: 56px;
  --icon-sidebar-expanded-width: 200px;
}

/* =================================================================
   ICON SIDEBAR — CONTAINER
   ================================================================= */

.icon-sidebar {
  position: fixed;
  top: 56px; /* Onder de navbar */
  left: 0;
  bottom: 0;
  width: var(--icon-sidebar-width);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  z-index: 90;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  transition: width 0.2s ease;
}

.icon-sidebar:hover {
  width: var(--icon-sidebar-expanded-width);
}

.icon-sidebar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* =================================================================
   ICON SIDEBAR — NAV LIST
   ================================================================= */

.icon-sidebar__nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
  gap: var(--space-1);
}

/* =================================================================
   ICON SIDEBAR — NAV ITEM
   ================================================================= */

.icon-sidebar__item {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0 8px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
  cursor: pointer;
  position: relative;
  gap: var(--admin-form-field-gap);
  white-space: nowrap;
  overflow: hidden;
}

/* Icon flex-shrink voorkomen */
.icon-sidebar__item svg {
  flex-shrink: 0;
}

.icon-sidebar__item:hover {
  background: var(--bg-hover);
}

/* Label naast icon — verborgen in collapsed, zichtbaar bij hover */
.icon-sidebar__tooltip {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  white-space: nowrap;
}

.icon-sidebar:hover .icon-sidebar__tooltip {
  opacity: 1;
  pointer-events: auto;
}

.icon-sidebar__item--active {
  background: var(--accent-glow);
  color: var(--accent);
}

/* Active indicator — accent bar links */
.icon-sidebar__item--active::before {
  content: '';
  position: absolute;
  left: -8px; /* Raakt de linkerrand van de sidebar */
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* Child items — ingesprongen sub-navigatie, alleen zichtbaar bij hover op parent group */
.icon-sidebar__item--child {
  height: 0;
  padding: 0 8px;
  padding-left: 16px;
  margin: 0 8px;
  margin-left: 8px;
  overflow: hidden;
  opacity: 0;
  transition: height 0.15s ease, opacity 0.15s ease, padding 0.15s ease;
  transition-delay: 0s; /* Direct sluiten */
}

.icon-sidebar:hover .icon-sidebar__group:hover > .icon-sidebar__item--child {
  height: var(--admin-control-search);
  padding-top: 0;
  padding-bottom: 0;
  opacity: 1;
  transition-delay: 0.5s; /* Vertraagd openen */
}

.icon-sidebar__item--child svg {
  width: 16px;
  height: 16px;
}

.icon-sidebar__item--child .icon-sidebar__tooltip {
  font-size: 12px;
}

/* =================================================================
   LAYOUT OFFSETS — body:has() voor hogere specificiteit
   Voorkomt dat navbar.css/sidebar-layout.css (later in alfabet)
   de offsets overschrijven.
   ================================================================= */

body:has(.icon-sidebar) .admin-main {
  margin-left: var(--icon-sidebar-width);
}

body:has(.icon-sidebar) .main-nav {
  padding-left: calc(var(--icon-sidebar-width) + var(--space-6));
}

/* =================================================================
   RESPONSIVE — VERBERG SIDEBAR OP MOBIEL
   ================================================================= */

@media (max-width: 768px) {
  .icon-sidebar {
    display: none;
  }

  body:has(.icon-sidebar) .admin-main {
    margin-left: 0;
  }

  body:has(.icon-sidebar) .main-nav {
    padding-left: var(--space-6);
  }
}

/* install-banner.css */
/**
 * InstallAppBanner — PWA install prompt styling
 *
 * Cross-platform install banner voor admin panel.
 * Drie varianten: default (Chrome/Edge), --ios (Safari), --inapp (WebView).
 */

/* ─── Base Banner ─────────────────────────────────────────── */

.install-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-size: var(--control-font-sm);
  color: var(--text-primary);
  position: relative;
  z-index: 10;
}

.install-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.install-banner__icon {
  color: var(--accent);
  flex-shrink: 0;
}

.install-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.install-banner__title {
  font-weight: var(--font-medium, 500);
  color: var(--text-primary);
  white-space: nowrap;
}

.install-banner__description {
  color: var(--text-secondary);
  font-size: var(--control-font-sm);
  line-height: 1.4;
}

.install-banner__inline-icon {
  display: inline;
  vertical-align: middle;
  color: var(--accent);
}

/* ─── Action Button ───────────────────────────────────────── */

.install-banner__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  height: var(--control-height-sm);
  font-size: var(--control-font-sm);
  font-weight: var(--font-medium, 500);
  color: var(--admin-v2-color-text-inverse);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.install-banner__action:hover {
  opacity: 0.9;
}

/* ─── Dismiss Button ──────────────────────────────────────── */

.install-banner__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: var(--admin-control-compact);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.install-banner__dismiss:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

/* ─── Mobile Responsive ───────────────────────────────────── */

@media (max-width: 640px) {
  .install-banner {
    padding: var(--space-2) var(--space-3);
  }

  .install-banner__content {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .install-banner__text {
    flex-basis: calc(100% - 40px);
  }

  .install-banner__action {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Variant: In-app Browser ─────────────────────────────── */

.install-banner--inapp {
  background: color-mix(in srgb, var(--warning) 8%, var(--bg-elevated));
  border-bottom-color: color-mix(in srgb, var(--warning) 24%, var(--border));
}

/* ─── Variant: iOS Safari ─────────────────────────────────── */

.install-banner--ios {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
  border-bottom-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

/* list-actions.css */
/**
 * CONTEXT: Admin — List Actions
 * Actie-kaarten grid onderaan lijstpagina's (tussen tabel en footer).
 * Zelfde visuele stijl als admin-footer kaarten.
 *
 * AI-NOTE: Geeft snelle toegang tot pagina-specifieke acties
 * (toevoegen, importeren, exporteren) in dezelfde card-stijl als de footer.
 *
 * STRUCTURE:
 * <div class="list-actions">
 *   <div class="list-actions__label">ACTIES</div>
 *   <div class="list-actions__grid">
 *     <button class="list-actions__card">
 *       <Icon class="list-actions__icon" />
 *       <span class="list-actions__card-label">Toevoegen</span>
 *     </button>
 *   </div>
 * </div>
 */

/* =================================================================
   CONTAINER
   ================================================================= */

.list-actions {
  padding: var(--space-8) 0 0;
  margin-top: var(--space-8);
}

.list-actions__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* =================================================================
   GRID
   ================================================================= */

.list-actions__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

/* =================================================================
   CARD ITEMS (zelfde stijl als admin-footer__card)
   ================================================================= */

.list-actions__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  font-size: inherit;
}

.list-actions__card:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.list-actions__icon {
  transition: transform 0.15s;
  color: var(--admin-v2-color-text-muted);
}

.list-actions__card:hover .list-actions__icon {
  transform: scale(1.1);
}

/* Wave C — semantic icon tones (theme-owned; no hex from consumers) */
.list-actions__card--tone-primary .list-actions__icon {
  color: var(--admin-v2-color-primary);
}

.list-actions__card--tone-success .list-actions__icon {
  color: var(--admin-v2-state-success-text);
}

.list-actions__card--tone-information .list-actions__icon {
  color: var(--admin-v2-state-information-text);
}

.list-actions__card--tone-warning .list-actions__icon {
  color: var(--admin-v2-state-warning-text);
}

.list-actions__card--tone-danger .list-actions__icon {
  color: var(--admin-v2-state-danger-text);
}

.list-actions__card--tone-muted .list-actions__icon {
  color: var(--admin-v2-color-text-muted);
}

.list-actions__card--disabled .list-actions__icon,
.list-actions__card--disabled:hover .list-actions__icon {
  color: var(--admin-v2-color-text-disabled, var(--text-tertiary));
}

/* =================================================================
   DISABLED STATE
   ================================================================= */

.list-actions__card--disabled,
.list-actions__card--disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-tertiary);
}

.list-actions__card--disabled:hover .list-actions__icon {
  transform: none;
}

.list-actions__card-label {
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .list-actions__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .list-actions__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* media.css */
/* Media library and reusable picker — Admin V2 entity collection. */
.media-library {
  display: grid;
  gap: var(--admin-v2-space-6);
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
}

.media-library__toolbar,
.media-library__controls,
.media-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
}

.media-library__toolbar h1,
.media-picker__header h2 {
  margin: 0;
  color: var(--admin-v2-color-text);
}

.media-library__toolbar p,
.media-picker__header p {
  margin: var(--admin-v2-space-1) 0 0;
  color: var(--admin-v2-color-text-muted);
}

.media-library__upload {
  position: relative;
  overflow: hidden;
}

.media-library__upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.media-library__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

.media-picker__search {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: var(--admin-v2-control-height-lg);
  padding-inline: var(--admin-v2-control-padding-x-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-control);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
}

.media-picker__search input {
  width: min(28rem, 60vw);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--admin-v2-color-text);
}

.media-library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--admin-v2-space-4);
}

.media-library__tile {
  display: grid;
  gap: var(--admin-v2-space-2);
  min-width: 0;
  padding: var(--admin-v2-space-2);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-collection-item-bg);
  color: var(--admin-v2-color-text);
  text-align: left;
  cursor: pointer;
}

.media-library__tile:hover,
.media-library__tile:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-collection-item-bg-hover);
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.media-library__tile img,
.media-library__video {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--admin-v2-radius-md);
  background: var(--admin-v2-color-surface-muted);
  object-fit: cover;
}

.media-library__video {
  display: grid;
  place-items: center;
}

.media-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  align-items: start;
  gap: var(--admin-v2-space-6);
  inline-size: 100%;
  max-inline-size: 90rem;
  min-inline-size: 0;
  margin-inline: auto;
  color: var(--admin-v2-color-text);
}

.media-detail__preview,
.media-detail__sidebar {
  min-inline-size: 0;
}

.media-detail__preview {
  display: grid;
  gap: var(--admin-v2-space-4);
}

.media-detail__stage {
  display: grid;
  place-items: center;
  min-inline-size: 0;
  block-size: clamp(18rem, 62dvh, 42rem);
  padding: var(--admin-v2-space-6);
  overflow: hidden;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background-color: var(--admin-v2-color-surface-muted);
}

.media-detail__stage[data-background="checker"] {
  background-image: conic-gradient(
    var(--admin-v2-color-surface) 25%,
    var(--admin-v2-color-surface-muted) 0 50%,
    var(--admin-v2-color-surface) 0 75%,
    var(--admin-v2-color-surface-muted) 0
  );
  background-size: var(--admin-v2-space-6) var(--admin-v2-space-6);
}

.media-detail__image,
.media-detail__video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
  aspect-ratio: auto;
}

.media-detail__player {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.media-detail__preview-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-2);
}

.media-detail__sidebar {
  display: grid;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
}

.media-detail__section {
  min-inline-size: 0;
  padding: var(--admin-v2-space-5);
}

.media-detail__section + .media-detail__section {
  border-block-start: 1px solid var(--admin-v2-border-default);
}

.media-detail__heading {
  margin: 0 0 var(--admin-v2-space-4);
  font-size: inherit;
  font-weight: var(--admin-v2-font-weight-medium);
}

.media-detail__facts {
  display: grid;
  gap: var(--admin-v2-space-4);
  margin: 0;
}

.media-detail__fact {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: baseline;
  gap: var(--admin-v2-space-4);
}

.media-detail__fact dt,
.media-detail__hint {
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
}

.media-detail__fact dd {
  min-inline-size: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.media-detail__hint {
  margin: var(--admin-v2-space-2) 0 0;
}

.media-detail__usage-list {
  display: grid;
  gap: var(--admin-v2-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.media-detail__usage-link {
  display: block;
  padding: var(--admin-v2-space-2);
  border-radius: var(--admin-v2-radius-control);
  color: var(--admin-v2-color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.media-detail__usage-link:hover {
  background: var(--admin-v2-collection-item-bg-hover);
}

.media-detail__management {
  align-self: end;
}

.media-detail__state {
  display: grid;
  justify-items: center;
  gap: var(--admin-v2-space-4);
  max-inline-size: 28rem;
  padding: var(--admin-v2-space-5);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  text-align: center;
  overflow-wrap: anywhere;
}

.media-detail :is(button, a, input):focus-visible {
  outline: 2px solid var(--admin-v2-border-active);
  outline-offset: 2px;
  box-shadow: var(--admin-v2-focus-ring);
}

.media-library__tile span {
  overflow: hidden;
  font-weight: var(--admin-v2-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library__tile small,
.media-library__empty {
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
}

.media-library__empty {
  display: grid;
  place-items: center;
  gap: var(--admin-v2-space-2);
  min-height: 14rem;
  text-align: center;
}

.media-picker {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
}

.media-picker__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--admin-v2-backdrop);
}

.media-picker__panel {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: var(--admin-v2-space-5);
  width: min(62rem, calc(100vw - (2 * var(--admin-v2-space-6))));
  max-height: calc(100vh - (2 * var(--admin-v2-space-6)));
  overflow: auto;
  padding: var(--admin-v2-space-6);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface-overlay);
  box-shadow: var(--admin-v2-shadow-floating);
}

@media (max-width: 48rem) {
  .media-library__toolbar,
  .media-library__controls,
  .media-picker__header {
    align-items: stretch;
    flex-direction: column;
  }

  .media-picker__search input {
    width: 100%;
  }

  .media-detail {
    gap: var(--admin-v2-space-4);
  }

  .media-detail__stage {
    block-size: clamp(16rem, 48dvh, 28rem);
    padding: var(--admin-v2-space-4);
  }

  .media-detail__section {
    padding: var(--admin-v2-space-4);
  }

  .media-detail__preview-tools {
    justify-content: flex-start;
  }
}

@media (max-width: 64rem) {
  .media-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .media-detail__stage[data-background="checker"] {
    background-image: none;
  }

  .media-detail :is(button, a, input):focus-visible {
    outline: 2px solid Highlight;
    box-shadow: none;
  }
}

/* members-balie-terminal.css */
/**
 * Standalone Members Desk terminal (/members-desk, legacy /balie).
 * Scrollport: `.members-balie-terminal-shell__main` (collection-card lists).
 * Legacy: `.products-page` master-detail flex child when that markup still exists.
 */

/*
 * Members Desk: volledig wit canvas (geen admin-shell grijs --bg-surface var(--admin-v2-color-surface-muted)).
 * Alleen /admin-sidebar blijft grijs via .admin-account-nav — niet hier.
 */
body[data-page-type="members-desk"],
body[data-page-type="members-balie"] {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--admin-v2-color-surface);
  font-family: var(--tenant-font-main, var(--font-sans));
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

body[data-page-type="members-desk"] #members-desk-mount,
body[data-page-type="members-balie"] #members-balie-mount,
body[data-page-type="members-desk"] #members-balie-app,
body[data-page-type="members-balie"] #members-balie-app {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--admin-v2-color-surface);
}

.members-balie-terminal-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  --bg-surface: var(--admin-v2-color-surface);
  --bg-deep: var(--admin-v2-color-surface);
  --bg-soft: var(--admin-v2-color-surface);
  background: var(--admin-v2-color-surface);
  color: var(--text-primary);
}

.members-balie-terminal-shell__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/*
 * Collection Workspace lists (Members): no nested list viewport and no
 * `.products-page` master-detail scroll. `__main` is the only scrollport —
 * same role as `.admin-main` in the admin shell. Without this, long lists
 * (e.g. 1400 members / 25 rows per page) are clipped by `overflow: hidden`.
 */
.members-balie-terminal-shell__main:has(.admin-v2-collection-card) {
  overflow-x: hidden;
  overflow-y: auto;
}

.members-balie-terminal-shell__main:has(.admin-v2-collection-card) > .admin-page,
.members-balie-terminal-shell__main:has(.admin-v2-collection-card) > .members-balie-page {
  flex: none;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.members-balie-terminal-shell__main > .products-page {
  flex: 1;
  min-height: 0;
}

.members-balie-terminal-shell__footer {
  flex-shrink: 0;
}

.members-balie-terminal-shell__brand {
  width: 100%;
}

/* Zelfde maat als sidebar-footer (20px); niet de navbar-override (24px). */
.members-balie-terminal-shell__brand .admin-account-nav__logo.main-nav__logo {
  font-size: 20px;
  line-height: 1;
}

.members-balie-terminal-shell__brand,
.members-balie-terminal-shell__brand.admin-account-nav__brand {
  background: var(--admin-v2-color-surface);
}

/* Workspace chrome: toolbar, lijst-/detailkolommen, zoekveld (anders --bg-surface grijs). */
body[data-page-type="members-desk"] .members-balie-page .products-workspace-toolbar,
body[data-page-type="members-balie"] .members-balie-page .products-workspace-toolbar,
body[data-page-type="members-desk"] .members-balie-page .products-card,
body[data-page-type="members-balie"] .members-balie-page .products-card,
body[data-page-type="members-desk"] .members-balie-page .products-list-card,
body[data-page-type="members-balie"] .members-balie-page .products-list-card,
body[data-page-type="members-desk"] .members-balie-page .products-detail-card,
body[data-page-type="members-balie"] .members-balie-page .products-detail-card,
body[data-page-type="members-desk"] .members-balie-page .products-card-header,
body[data-page-type="members-balie"] .members-balie-page .products-card-header,
body[data-page-type="members-desk"] .members-balie-page .products-workspace-hero,
body[data-page-type="members-balie"] .members-balie-page .products-workspace-hero,
body[data-page-type="members-desk"] .members-balie-page .products-search-input-wrapper,
body[data-page-type="members-balie"] .members-balie-page .products-search-input-wrapper,
body[data-page-type="members-desk"]
  .members-balie-page
  .products-search-input-wrapper:focus-within,
body[data-page-type="members-balie"]
  .members-balie-page
  .products-search-input-wrapper:focus-within,
body[data-page-type="members-desk"] .members-balie-page .products-workspace-section,
body[data-page-type="members-balie"] .members-balie-page .products-workspace-section,
body[data-page-type="members-desk"] .members-balie-page .products-workspace-section__title,
body[data-page-type="members-balie"] .members-balie-page .products-workspace-section__title,
body[data-page-type="members-desk"] .members-balie-page .products-workspace-collapsible-header,
body[data-page-type="members-balie"] .members-balie-page .products-workspace-collapsible-header,
body[data-page-type="members-desk"] .members-balie-page .products-pane-state,
body[data-page-type="members-balie"] .members-balie-page .products-pane-state {
  background-color: var(--admin-v2-color-text-inverse);
}

body[data-page-type="members-desk"] .members-balie-page .products-workspace-section__title,
body[data-page-type="members-balie"] .members-balie-page .products-workspace-section__title,
body[data-page-type="members-desk"] .members-balie-page .products-workspace-collapsible-header,
body[data-page-type="members-balie"] .members-balie-page .products-workspace-collapsible-header {
  color: var(--text-primary);
}

/* menu-settings.css */
/**
 * ADMIN CONTEXT: Menu Settings Page
 *
 * Styling voor de admin menu settings pagina:
 * toggles per feature, protected/blocked states.
 */

/* =================================================================
   MENU SETTINGS PAGE
   ================================================================= */

.menu-settings {
  width: 100%;
}

.menu-settings__loading,
.menu-settings__error {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.menu-settings__error p {
  color: var(--text-danger);
}

/* =================================================================
   HEADER
   ================================================================= */

.menu-settings__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.menu-settings__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.menu-settings__back:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.menu-settings__title {
  font-size: var(--page-title-size);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
}

.menu-settings__description {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* =================================================================
   FEATURE LIST
   ================================================================= */

.menu-settings__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.menu-settings__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  transition: background 0.15s;
}

.menu-settings__item:hover {
  background: var(--bg-hover);
}

.menu-settings__item--protected {
  opacity: 0.7;
}

.menu-settings__item--policy-blocked {
  opacity: 0.5;
}

/* =================================================================
   ITEM INFO
   ================================================================= */

.menu-settings__item-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.menu-settings__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.menu-settings__item-info > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.menu-settings__item-label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.menu-settings__item-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.menu-settings__item-badge--policy {
  background: color-mix(in srgb, var(--text-warning) 15%, transparent);
  color: var(--text-warning);
}

/* =================================================================
   TOGGLE SWITCH
   ================================================================= */

.menu-settings__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.menu-settings__toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.menu-settings__toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--bg-muted, var(--bg-active));
  border-radius: var(--admin-radius-pill);
  transition: background 0.2s;
}

.menu-settings__toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--bg-deep, var(--admin-v2-color-surface));
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: var(--admin-v2-shadow-sm);
}

/* Checked state */
.menu-settings__toggle input:checked + .menu-settings__toggle-track {
  background: var(--accent);
}

.menu-settings__toggle input:checked + .menu-settings__toggle-track::after {
  transform: translateX(18px);
}

/* Disabled state */
.menu-settings__toggle input:disabled + .menu-settings__toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}

.menu-settings__toggle:has(input:disabled) {
  cursor: not-allowed;
}

/* =================================================================
   ACTIONS
   ================================================================= */

.menu-settings__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

.menu-settings__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-6);
  font-size: var(--control-font-md);
  font-weight: 500;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.15s;
}

.menu-settings__save:hover {
  opacity: 0.9;
}

.menu-settings__save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .menu-settings__item {
    padding: var(--space-3) var(--space-4);
  }
}

/* navbar.css */
/**
 * CONTEXT: Admin — Navbar Extensions
 * Admin-specifieke uitbreidingen op de shared .main-nav
 * (base in components/navigation/main-nav.css).
 *
 * Bevat: __right section, __back button, __autosave,
 * dropdown menu, notifications, responsive overrides.
 *
 * STRUCTURE:
 * <nav class="main-nav">
 *   <a class="main-nav__logo">Pagayo.</a>
 *   <div class="main-nav__autosave">Dashboard</div>
 *   <div class="main-nav__right">
 *     <button class="main-nav__back">← Terug</button>
 *     <button class="main-nav__menu">☰</button>
 *   </div>
 * </nav>
 */

/* =================================================================
   ADMIN: Logo size override (alleen legacy top-navbar, niet sidebar/balie)
   ================================================================= */

.main-nav > .main-nav__logo {
  font-size: var(--text-2xl);
}

/* =================================================================
   ADMIN: RIGHT SECTION
   ================================================================= */

.main-nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.main-nav__org-trigger {
  display: inline-flex;
  align-items: center;
}

/* =================================================================
   BACK BUTTON (naast logo, alleen op edit/detail pagina's)
   ================================================================= */

.main-nav__back {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--control-font-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.main-nav__back:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* =================================================================
   ADMIN: Menu button override (text-primary in admin context)
   ================================================================= */

.main-nav__menu {
  color: var(--text-primary);
}

@media (min-width: 960px) {
  .main-nav__org-trigger {
    display: none;
  }

  .main-nav__menu {
    display: none;
  }
}

@media (max-width: 959px) {
  .main-nav__autosave {
    max-width: calc(100vw - 176px);
    padding-inline: var(--space-2);
  }
}

/* =================================================================
   AUTOSAVE INDICATOR & NAVBAR NOTIFICATIONS
   ================================================================= */

.main-nav__autosave {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  max-width: calc(100vw - 280px);
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.main-nav__title {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  transition: color 0.45s ease;
}

.main-nav__title--saving {
  color: var(--success);
  animation: autosave-pulse 1.8s ease-in-out infinite;
}

.main-nav__title--saved {
  color: var(--success);
  animation: autosave-title-return 3.4s ease-out forwards;
}

.main-nav__title--error {
  color: var(--error);
}

/* --- Navbar notification (success/error/warning/info) --- */

.nav-notification {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--text-sm);
  animation: nav-notification-enter 0.25s ease-out;
  white-space: nowrap;
}

.nav-notification--success {
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 15%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--admin-v2-state-success-text) 25%, transparent);
}

.nav-notification--error {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 15%, transparent);
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--admin-v2-state-danger-text) 25%, transparent);
}

.nav-notification--warning {
  background: color-mix(in srgb, var(--admin-v2-color-brand-gold) 15%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-gold) 25%, transparent);
}

.nav-notification--info {
  background: color-mix(in srgb, var(--admin-v2-state-information-text) 15%, transparent);
  color: var(--admin-v2-state-information-text);
  border: 1px solid color-mix(in srgb, var(--admin-v2-state-information-text) 25%, transparent);
}

@keyframes nav-notification-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes autosave-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@keyframes autosave-title-return {
  0% { opacity: 1; }
  78% { opacity: 1; }
  100% {
    opacity: 1;
    color: var(--text-primary);
  }
}

/* =================================================================
   MAIN CONTENT OFFSET
   ================================================================= */

.admin-main {
  margin-top: 0;
  max-width: 100%;
  overflow-x: clip;
}

/* =================================================================
   DROPDOWN MENU
   ================================================================= */

.main-nav__menu--active {
  color: var(--accent);
  background: var(--bg-hover);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 240px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--admin-v2-shadow-lg);
  z-index: 200;
  overflow: hidden;
  animation: nav-dropdown-enter 0.15s ease-out;
}

@keyframes nav-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-dropdown__items {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.12s ease;
  cursor: pointer;
}

.nav-dropdown__item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-dropdown__item--active {
  background: var(--accent-glow);
  color: var(--accent);
}

.nav-dropdown__item--active:hover {
  background: var(--bg-active);
}

/* Child items — indented sub-menu */
.nav-dropdown__item--child {
  padding-left: var(--space-8);
  font-size: var(--text-xs);
}

/* Right column needs position: relative for dropdown positioning */
.main-nav__right {
  position: relative;
}

/* onboarding.css */
/**
 * ADMIN CONTEXT: Onboarding & Login
 * 
 * Styling voor de onboarding wizard (OrganizationForm)
 * en de admin login pagina. 
 */

/* =================================================================
   ONBOARDING FORM CONTAINER
   ================================================================= */

.onboarding-form-container {
  background: var(--bg-elevated);
  border: 2px solid var(--accent);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
}

.onboarding-form-container.collapsed {
  padding: var(--space-6) var(--space-8);
}

.onboarding-form-container.collapsed .onboarding-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* =================================================================
   ONBOARDING HEADER
   ================================================================= */

.onboarding-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.onboarding-header:hover {
  opacity: 0.9;
}

.onboarding-icon {
  font-size: var(--text-4xl);
  line-height: 1;
}

.onboarding-header-content {
  flex: 1;
}

.onboarding-header-content h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.onboarding-header-content p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.9375rem;
}

.onboarding-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-control-field);
  height: var(--admin-control-field);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  transition: all var(--transition-fast);
}

.onboarding-header:hover .onboarding-toggle {
  background: var(--bg-hover);
  color: var(--accent);
}

/* =================================================================
   TYPE SELECTOR
   ================================================================= */

.type-selector {
  margin-bottom: var(--space-6);
}

.type-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.type-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-4);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.type-option:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.type-option.selected {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.type-option-label {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.type-option-description {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* =================================================================
   ONBOARDING RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .onboarding-form-container {
    padding: var(--space-5);
  }

  .type-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .onboarding-header {
    flex-direction: column;
    text-align: center;
  }

  .onboarding-header-content h2 {
    font-size: var(--text-xl);
  }
}

/* =================================================================
   ADMIN LOGIN PAGE
   Visueel gematcht met start login (portal-card + card-badge pattern).
   ================================================================= */

.admin-login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  /* Closure: login is a pre-shell Admin surface — follow theme profile */
  background: var(--admin-v2-color-app-bg, var(--pg-ui-color-bg));
  color: var(--admin-v2-color-text, var(--pg-ui-color-text));
}

.admin-login-card {
  position: relative;
  background: var(--admin-v2-color-surface, var(--pg-ui-color-surface));
  border: 1px solid var(--admin-v2-border-subtle, var(--border-light));
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-6) var(--space-6);
  width: 100%;
  max-width: 420px;
}

.admin-login-badge {
  position: absolute;
  top: -0.85em;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 0.4em 1.2em;
  background: var(--admin-v2-color-primary, var(--accent));
  color: var(--admin-v2-color-primary-contrast, var(--pg-ui-color-primary-contrast));
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  border-radius: var(--radius-full);
  z-index: 1;
}

.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Inputs in login form: styling via SSoT in components/forms/_base.css */

.admin-login-button {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

.admin-login-links {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-xs-plus);
  color: var(--text-secondary);
}

.admin-login-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--font-semibold);
}

.admin-login-links a:hover {
  text-decoration: underline;
}

.admin-login-card .alert {
  margin-bottom: var(--space-4);
}

/* Login sub-page layout (Forgot/Reset Password) */
.admin-login-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.admin-login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--accent);
}

.admin-login-title {
  font-size: 1.375rem;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.admin-login-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.admin-login-subtitle-email {
  display: block;
  margin-top: var(--space-2);
  font-weight: var(--font-medium);
}

.admin-login-footer {
  text-align: center;
  margin-top: var(--space-5);
}

.admin-login-link {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.admin-login-link:hover {
  text-decoration: underline;
}

/* order-management.css */
/**
 * ADMIN CONTEXT: Order Management
 * 
 * Order detail, edit, create pagina's. Product search, shipping
 * methods, order totals, en gerelateerde UI patterns.
 */

/* =================================================================
   ORDER DETAIL GRID
   ================================================================= */

.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

/* =================================================================
   ORDER TOTALS
   ================================================================= */

.order-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

.order-totals-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-2) 0;
}

.order-totals-total {
  display: flex;
  justify-content: space-between;
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}

.order-totals--right {
  max-width: 300px;
  margin-left: auto;
}

.order-totals-row {
  display: flex;
  justify-content: space-between;
}

.order-totals-row--total {
  font-weight: var(--font-semibold);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* Tracking code */
code.tracking-code {
  font-family: var(--font-mono);
  background: var(--bg-surface);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* =================================================================
   ORDER EDIT TABS
   ================================================================= */

.order-edit-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-6);
  background: var(--bg-surface);
}

.order-edit-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: var(--font-normal);
  margin-bottom: -1px;
  transition: all var(--transition-fast);
}

.order-edit-tab:hover:not(:disabled) {
  color: var(--text-primary);
}

.order-edit-tab--active {
  background: var(--bg-elevated);
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: var(--font-semibold);
}

.order-edit-tab:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.order-edit-tab-badge {
  font-size: var(--text-xs);
  background: var(--warning-dim);
  color: var(--warning);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.order-edit-content {
  padding: var(--space-6);
}

/* =================================================================
   PRODUCT SEARCH
   ================================================================= */

.product-search-section {
  margin-bottom: var(--space-4);
  position: relative;
}

.product-search-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
}

.product-search-wrapper {
  position: relative;
}

.product-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.product-search-input {
  width: 100%;
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem);
  font-size: var(--admin-v2-field-control-font-size, var(--text-base));
  font-weight: var(--admin-v2-font-weight-medium, var(--font-medium));
  border: 1.5px solid var(--admin-v2-border-default, var(--border));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, var(--radius-md)));
  outline: none;
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text, var(--text-primary));
  box-sizing: border-box;
}

.product-search-input:focus {
  border-color: var(--admin-v2-color-primary, var(--accent));
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, var(--accent-glow));
}

.product-search-input--with-icon {
  width: 100%;
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem) 0 calc(var(--admin-v2-search-padding-x, 1.25rem) + var(--admin-v2-search-icon-size, 18px) + var(--space-2));
  border: 1.5px solid var(--admin-v2-border-default, var(--border));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, var(--radius-md)));
  font-size: var(--admin-v2-field-control-font-size, var(--text-base));
  font-weight: var(--admin-v2-font-weight-medium, var(--font-medium));
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text, var(--text-primary));
  box-sizing: border-box;
}

/* Product search results */
.product-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-height: 200px;
  overflow-y: auto;
}

.product-search-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
}

.product-search-result:last-child {
  border-bottom: none;
}

.product-search-result:hover {
  background: var(--bg-hover);
}

.product-search-result-info {
  flex: 1;
}

.product-search-result-title {
  font-weight: var(--font-medium);
}

.product-search-result-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.product-out-of-stock {
  color: var(--error);
  margin-left: var(--space-2);
}

/* Product search dropdown (alternative) */
.product-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
}

.product-search-item {
  display: flex;
  align-items: center;
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.product-search-item:hover {
  background: var(--bg-hover);
}

.product-search-item-info {
  flex: 1;
}

.product-search-item-title {
  font-weight: var(--font-medium);
}

.product-search-item-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.product-search-item-stock-warning {
  color: var(--error);
  margin-left: var(--space-2);
}

/* Search form group */
.search-form-group {
  margin-bottom: var(--space-4);
  position: relative;
}

/* =================================================================
   ORDER ITEMS
   ================================================================= */

.order-items-section {
  margin-top: var(--space-6);
}

.order-items-heading {
  margin-bottom: var(--space-3);
  font-weight: var(--font-medium);
}

.order-items-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

/* Customer tab — compact order history list */
.orders-workspace-customer-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.orders-workspace-customer-history__row {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.orders-workspace-customer-history__row:hover:not(:disabled) {
  border-color: var(--border-strong, var(--border));
  background: var(--bg-muted, var(--bg-surface));
}

.orders-workspace-customer-history__row--current,
.orders-workspace-customer-history__row:disabled {
  cursor: default;
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, transparent);
  background: var(--admin-v2-color-primary-soft);
}

.orders-workspace-customer-history__top,
.orders-workspace-customer-history__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.orders-workspace-customer-history__id {
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-workspace-customer-history__total {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.orders-workspace-customer-history__meta {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
}

/*
 * Order Overview summary SoftPanels — phone-call glance hierarchy:
 * card title = section title; key facts = semibold primary; support = body/meta.
 */
.orders-workspace-summary-card__stack {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-1, 4px);
  min-width: 0;
}

.orders-workspace-summary-card__fact {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-list-item-title);
  line-height: var(--admin-v2-line-height-list-item-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.orders-workspace-summary-card__text {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  font-weight: var(--admin-v2-font-weight-normal);
  color: var(--admin-v2-color-text);
}

.orders-workspace-summary-card__meta {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-normal);
  color: var(--admin-v2-color-text-muted);
}

.orders-workspace-summary-card--next .orders-workspace-summary-card__fact {
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
}

/* Order workspace Items tab — full-width SoftPanel (same outer frame as other tabs).
 * Variants lesson: no extra top margin; gap only between stacked blocks. */
.orders-workspace-items-editor {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-4, 16px);
}

.orders-workspace-items-editor > .admin-v2-soft-panel {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

.orders-workspace-items-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.orders-workspace-items-list__row {
  display: grid;
  grid-template-columns:
    minmax(8.5rem, 1.1fr)
    minmax(5.5rem, 0.9fr)
    minmax(10rem, 2.2fr)
    minmax(7rem, auto)
    minmax(6.5rem, 0.85fr)
    auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.orders-workspace-items-list__row--add {
  grid-template-columns: minmax(8.5rem, 1.1fr) minmax(0, 1fr);
}

.orders-workspace-items-list__cell {
  min-width: 0;
}

.orders-workspace-items-list__cell--sku {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.orders-workspace-items-list__cell--name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--admin-v2-space-2, 8px);
  min-width: 0;
}

.orders-workspace-items-list__product-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.orders-workspace-items-list__product-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--admin-v2-font-family);
  font-size: calc(var(--admin-v2-font-size-section-title) + 4px) !important;
  line-height: calc(var(--admin-v2-line-height-section-title) + 4px);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.orders-workspace-items-list__product-link svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.orders-workspace-items-list__product-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
  min-width: 0;
  max-width: 100%;
}

.orders-workspace-items-list__product-price {
  flex-shrink: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--admin-v2-color-text);
}

/* Selected product choices on an order line (catch-all / Woo Any axes). */
.orders-workspace-item-choices {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-1, 4px);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orders-workspace-item-choices__row {
  display: grid;
  grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);
  column-gap: var(--admin-v2-space-2, 8px);
  align-items: baseline;
  margin: 0;
  min-width: 0;
}

.orders-workspace-item-choices__label {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text-muted);
  white-space: nowrap;
}

.orders-workspace-item-choices__value {
  margin: 0;
  min-width: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-normal);
  color: var(--admin-v2-color-text);
  overflow-wrap: anywhere;
}

/*
 * Description-list variant for long purchase-question prompts.
 * Hangpoint stays `.orders-workspace-item-choices` (sibling: variant choices).
 */
.orders-workspace-item-choices--description {
  gap: var(--admin-v2-space-2);
  margin-top: var(--admin-v2-space-1);
}

.orders-workspace-item-choices--description .orders-workspace-item-choices__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--admin-v2-space-1);
  padding: 0;
  grid-template-columns: none;
}

.orders-workspace-item-choices--description .orders-workspace-item-choices__label {
  white-space: normal;
  font-weight: var(--admin-v2-font-weight-medium);
}

.orders-workspace-item-choices--description .orders-workspace-item-choices__value {
  font-weight: var(--admin-v2-font-weight-semibold);
}

/*
 * Fulfillment audit trail — stacked event facts in SoftPanel.
 * Role: commerce activity list. Orders Flow uses boxed `.timeline-content`;
 * this hangpoint stays unboxed so SoftPanel is the only surface.
 */
.fulfillment-workspace-audit {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fulfillment-workspace-audit__item {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-1);
  margin: 0;
  padding: var(--admin-v2-space-3) 0;
  border-bottom: 1px solid var(--admin-v2-border-subtle);
}

.fulfillment-workspace-audit__item:first-child {
  padding-top: 0;
}

.fulfillment-workspace-audit__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.fulfillment-workspace-audit__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.fulfillment-workspace-audit__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--admin-v2-space-2);
  row-gap: var(--admin-v2-space-1);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-normal);
  color: var(--admin-v2-color-text-muted);
}

.fulfillment-workspace-audit__empty {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

/* Qty as one control: [ − | 1 | + ] matching field height. */
.orders-workspace-qty-field {
  display: inline-flex;
  align-items: stretch;
  height: var(--admin-v2-field-control-height, var(--admin-control-compact));
  min-height: var(--admin-v2-field-control-height, var(--admin-control-compact));
  border: 1.5px solid var(--admin-v2-border-default, var(--border));
  border-radius: var(--admin-v2-field-control-radius, var(--radius-md));
  background: var(--admin-v2-color-surface);
  overflow: hidden;
}

.orders-workspace-qty-field__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-control-compact);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--admin-v2-color-text, var(--text-primary));
  cursor: pointer;
}

.orders-workspace-qty-field__btn:hover:not(:disabled) {
  background: var(--admin-v2-color-surface-muted);
}

.orders-workspace-qty-field__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.orders-workspace-qty-field__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0 var(--space-1);
  border-inline: 1px solid var(--admin-v2-border-default, var(--border));
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body) !important;
  font-weight: var(--admin-v2-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--admin-v2-color-text);
}

.orders-workspace-items-list__cell--action .btn {
  width: 100%;
  justify-content: center;
}

.orders-workspace-items-list__cell--qty {
  justify-self: start;
}

.orders-workspace-items-list__cell--price {
  justify-self: stretch;
}

.orders-workspace-items-list__cell--price .form-input {
  width: 100%;
  max-width: 9.5rem;
}

.orders-workspace-items-list__cell--delete {
  justify-self: end;
}

.orders-workspace-items-list__search {
  min-width: 0;
}

@media (max-width: 960px) {
  .orders-workspace-items-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  .orders-workspace-items-list__cell--action,
  .orders-workspace-items-list__cell--sku,
  .orders-workspace-items-list__cell--name,
  .orders-workspace-items-list__cell--qty,
  .orders-workspace-items-list__cell--price {
    grid-column: 1;
  }

  .orders-workspace-items-list__cell--delete {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
  }
}

/* Order overview Items card: name + link, qty, sale amount (no SKU / amend column). */
.orders-workspace-items-list--overview .orders-workspace-items-list__row:not(.orders-workspace-items-list__row--add) {
  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;
}

.orders-workspace-items-list--overview .orders-workspace-items-list__row--add {
  grid-template-columns: auto minmax(0, 1fr);
}

@media (max-width: 960px) {
  .orders-workspace-items-list--overview .orders-workspace-items-list__row:not(.orders-workspace-items-list__row--add) {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      auto;
  }

  .orders-workspace-items-list--overview .orders-workspace-items-list__cell--name,
  .orders-workspace-items-list--overview .orders-workspace-items-list__cell--qty,
  .orders-workspace-items-list--overview .orders-workspace-items-list__cell--delete {
    grid-column: auto;
  }

  .orders-workspace-items-list--overview .orders-workspace-items-list__cell--delete {
    grid-row: auto;
    align-self: center;
  }
}

.order-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.order-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

.order-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

.order-item-info {
  flex: 1;
}

.order-item-title {
  font-weight: var(--font-medium);
}

.order-item-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.order-item-total {
  min-width: 80px;
  text-align: right;
  font-weight: var(--font-medium);
}

/* =================================================================
   QUANTITY CONTROLS
   ================================================================= */

.quantity-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-control-compact);
  height: var(--admin-control-compact);
  padding: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.qty-btn:hover:not(:disabled) {
  background: var(--bg-hover);
}

.qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.quantity-value {
  min-width: 32px;
  text-align: center;
  font-weight: var(--font-medium);
}

.quantity-input {
  width: 50px;
  text-align: center;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* ProductPicker — regelprijs (tot € 99.999,00 / 99999.00 in invoer) */
.col-line-price {
  width: 9.5rem;
  min-width: 9.5rem;
}

.order-line-price-input {
  width: 100%;
  min-width: 7.5rem;
  box-sizing: border-box;
  text-align: right;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* =================================================================
   SHIPPING METHODS
   ================================================================= */

.shipping-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shipping-method-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* =================================================================
   ORDERS WORKSPACE
   ================================================================= */

html.orders-route-lock,
body.orders-route-lock {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.orders-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* V2 collection list: shell flex chrome + .admin-main scrollport. */
.admin-shell--v2 .admin-main:has(.orders-page .orders-collection-card),
.admin-shell--v2 .admin-main:has(.orders-page .admin-v2-collection-card) {
  overflow-x: hidden;
  overflow-y: auto;
}

.admin-shell--v2 .admin-main:has(.orders-page):not(:has(.orders-collection-card)):not(:has(.admin-v2-collection-card)) {
  overflow: auto;
}

.admin-shell--v2 .orders-page,
.admin-shell--v2 .products-page:has(.products-collection-card),
.admin-shell--v2 .products-page:has(.admin-v2-collection-card) {
  height: auto;
  min-height: 0;
  overflow: visible;
  /* Collection surface chrome lives in collection-shell.css (.admin-v2-collection-card);
   * the page gutter is the 24 around the card (opdracht 188, stuk 5). */
  padding: var(--admin-section-gap);
  background: transparent;
}

@media (max-width: 720px) {
  .admin-shell--v2 .orders-page,
  .admin-shell--v2 .products-page:has(.products-collection-card),
  .admin-shell--v2 .products-page:has(.admin-v2-collection-card) {
    padding: var(--admin-v2-space-4);
  }
}

.admin-shell.orders-shell-lock {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.admin-main.orders-main-lock {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.admin-main:has(.orders-page) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.admin-main:has(.orders-page) > .orders-page {
  flex: 1;
  min-height: 0;
}

/* Toolbar: count badge + POS/Webshop channel filters op één rij (zelfde gap als products-workspace-toolbar__left). */
.orders-workspace-toolbar .products-workspace-toolbar__left {
  flex-wrap: nowrap;
}

.orders-channel-toolbar-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.orders-channel-toolbar-filter {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.orders-channel-dropdown-panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 8;
  min-width: 12rem;
  background: var(--admin-v2-color-surface);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-md);
  box-shadow: var(--admin-v2-chrome-header-shadow);
}

.orders-workspace-grid {
  display: grid;
  grid-template-columns: var(--admin-workspace-list-col-width) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.orders-workspace-left-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
}

/* Master-detail detail pane only — nested scroll. Collection lists use
 * .admin-main as the sole scrollport (collection-shell.css / shell-chrome.css). */
.orders-workspace-detail-card {
  height: 100%;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Legacy list-card hooks outside V2 collection surfaces (if any remain). */
.orders-workspace-list-card:not(.admin-v2-collection-shell),
.products-workspace-list-card:not(.admin-v2-collection-shell) {
  height: 100%;
  min-height: 0;
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* V2 collection lists grow with content; never nest a scrollport here. */
.admin-shell--v2 .admin-v2-collection-card .orders-workspace-list-card,
.admin-shell--v2 .admin-v2-collection-card .products-workspace-list-card,
.admin-shell--v2 .admin-v2-collection-card .admin-v2-collection-shell {
  height: auto;
  min-height: 0;
  flex: none;
  overflow: visible !important;
  overscroll-behavior: auto;
}

.orders-workspace-search-bar {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--admin-border-light);
}

.orders-workspace-search-container {
  padding: 0;
}

.orders-workspace-search-field {
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
}

.orders-workspace-search-field:focus-within {
  background: var(--admin-v2-color-surface);
}

.orders-workspace-search-icon {
  color: var(--admin-v2-color-text-muted, var(--text-muted));
  flex-shrink: 0;
  width: var(--admin-v2-search-icon-size, 18px);
  height: var(--admin-v2-search-icon-size, 18px);
}

.orders-workspace-search-shortcut {
  flex-shrink: 0;
}

.orders-workspace-filter-shell {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--admin-border-light);
}

.orders-workspace-filter-shell.is-open {
  padding-bottom: var(--space-3);
}

.orders-workspace-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--admin-control-compact);
  padding: 0 var(--space-3);
  border: 1px solid var(--admin-border-hover);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
}

.orders-workspace-filter-toggle.is-open {
  border-color: var(--accent);
  background: var(--admin-v2-color-primary-soft);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.orders-workspace-filter-toggle-copy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.orders-workspace-filter-toggle-copy strong {
  font-size: var(--text-xs-plus);
  font-weight: var(--font-semibold);
}

.orders-workspace-filter-count {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--admin-radius-pill);
  background: var(--accent-glow);
  color: var(--accent);
  font-size: var(--text-2xs-plus);
  font-weight: var(--font-semibold);
}

.orders-workspace-filter-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 0;
  padding: var(--space-3);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-md);
  background: var(--admin-bg-wash);
}

.orders-workspace-filter-panel.is-open {
  display: flex;
  margin-top: var(--space-2);
}

.orders-workspace-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.orders-workspace-filter-group-label {
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.orders-workspace-filter-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.orders-workspace-filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs-plus);
  color: var(--text-primary);
  cursor: pointer;
}

.orders-workspace-filter-option input {
  margin: 0;
}

.orders-workspace-filter-clear {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: var(--text-xs-plus);
  font-weight: var(--font-semibold);
  cursor: pointer;
}

.orders-workspace-list-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.order-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px var(--admin-list-row-padding-x);
  border: 0;
  border-bottom: 1px solid var(--admin-border-subtle);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.order-list-row:hover {
  background: var(--bg-elevated);
}

.order-list-row.active {
  background: var(--admin-v2-color-primary-soft);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}

.order-list-row.active .order-list-number {
  color: var(--accent);
}

.order-list-avatar {
  width: var(--admin-control-search);
  height: var(--admin-control-search);
  border-radius: var(--admin-radius-pill);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: var(--font-bold);
}

.order-list-info {
  flex: 1;
  min-width: 0;
}

.order-list-number {
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.order-list-customer {
  margin-top: 1px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-list-right {
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
}

.order-list-amount {
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.order-list-time {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.order-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--admin-border-light);
}

.order-detail-hero-left {
  display: flex;
  align-items: center;
  gap: var(--admin-toolbar-gap);
  min-width: 0;
}

.order-detail-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--admin-radius-pill);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.order-detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.order-detail-number {
  font-size: 17px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

.order-detail-meta {
  margin-top: 3px;
  font-size: var(--text-xs-plus);
  color: var(--text-secondary);
}

.orders-workspace-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--admin-radius-pill);
  font-size: var(--text-2xs-plus);
  font-weight: var(--font-semibold);
}

.orders-workspace-status--new {
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 12%, transparent);
  color: var(--admin-v2-state-success-text);
}

.orders-workspace-status--processing {
  background: color-mix(in srgb, var(--admin-v2-color-primary) 10%, transparent);
  color: var(--accent);
}

.orders-workspace-status--done {
  background: var(--admin-border-light);
  color: var(--text-primary);
}

.orders-workspace-status--cancelled {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 10%, transparent);
  color: var(--admin-v2-state-danger-text);
}

.orders-workspace-hero-actions {
  display: flex;
  margin-left: auto;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.orders-workspace-hero-btn {
  min-height: var(--admin-control-search);
  padding: 0 14px;
  font-size: 13px;
}

/* Inline text actions in orders workspace hero meta (DESIGN.md detail scale) */
.orders-workspace-hero-name-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--tenant-accent, var(--accent));
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.orders-workspace-hero-name-link:hover {
  color: var(--text-primary);
}

.orders-workspace-hero-name-link:focus-visible {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.order-product-subscription-link {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  font-weight: var(--font-medium);
  font-family: inherit;
  color: var(--tenant-accent, var(--accent));
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.order-product-subscription-link:hover {
  color: var(--text-primary);
}

.order-product-subscription-link:focus-visible {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.order-detail-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--admin-border-light);
}

.order-detail-section:last-child {
  border-bottom: 0;
}

.order-detail-section-title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.order-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Vertical = input → next label; horizontal = column gutter. */
  row-gap: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
  column-gap: var(--space-6, 24px);
}

.order-detail-info-grid--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Flat address form: fields as direct grid children (First|Last, Street|Nr, …). */
.orders-workspace-address-grid {
  align-items: start;
}

.orders-workspace-address-grid > .products-editor-field {
  min-width: 0;
}

.order-detail-info-grid--single-col {
  grid-template-columns: minmax(0, 1fr);
}

.order-detail-info-col {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
}

.order-info-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-info-field span {
  font-size: var(--admin-font-size-label, calc(var(--admin-font-size-base, 14px) + 2px));
  font-weight: var(--admin-v2-font-weight-semibold, var(--font-semibold));
  color: var(--text-primary);
  letter-spacing: 0;
}

.order-info-field strong {
  font-size: var(--admin-font-size-base, 14px);
  line-height: 1.35;
  font-weight: var(--admin-v2-font-weight-normal, var(--font-normal, 400));
  color: var(--text-primary);
}

.order-lines-table {
  width: 100%;
  border-collapse: collapse;
}

.order-lines-table thead th {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--admin-border-hover);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-align: left;
}

.order-lines-table thead th:last-child,
.order-lines-table tbody td:last-child,
.order-lines-table thead th:nth-child(3),
.order-lines-table tbody td:nth-child(3),
.order-lines-table thead th:nth-child(2),
.order-lines-table tbody td:nth-child(2) {
  text-align: right;
}

.order-lines-table tbody td {
  padding: 14px 0;
  border-bottom: 1px solid var(--admin-border-subtle);
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  color: var(--text-primary);
}

.order-lines-table tbody tr:last-child td {
  border-bottom: 0;
}

.order-product-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.order-product-img {
  width: 36px;
  height: var(--admin-control-compact);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-product-name {
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.order-product-sku {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.order-detail-section--totals {
  display: flex;
  justify-content: flex-end;
}

.order-detail-section--totals .order-totals {
  width: min(100%, 340px);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  gap: 0;
}

.order-totals-heading {
  margin-bottom: var(--space-2);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.order-detail-section--totals .order-totals-row {
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--admin-border-subtle);
}

.order-detail-section--totals .order-totals-row span {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.order-detail-section--totals .order-totals-row strong {
  font-size: var(--text-sm-plus);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.orders-workspace-totals-body .order-totals {
  width: 100%;
  max-width: none;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 0;
}

.orders-workspace-totals-body .order-totals-heading {
  display: none;
}

.orders-workspace-totals-body .order-totals-row {
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--admin-border-subtle);
}

.orders-workspace-totals-body .order-totals-row span {
  font-size: var(--admin-products-list-font);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.orders-workspace-totals-body .order-totals-row strong {
  font-size: var(--admin-products-list-font);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.orders-workspace-totals-body .order-totals-row--total {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--admin-border-medium);
  border-bottom: 0;
}

.orders-workspace-totals-body .order-totals-row--total span {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.orders-workspace-totals-body .order-totals-row--total strong {
  font-size: var(--text-sm-plus);
  font-weight: var(--font-bold);
}

.order-detail-section--totals .order-totals-row--total {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--admin-border-medium);
  border-bottom: 0;
}

.order-detail-section--totals .order-totals-row--total span {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.order-detail-section--totals .order-totals-row--total strong {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.orders-workspace-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.orders-workspace-module {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.orders-workspace-module + .orders-workspace-module {
  border-top: 1px solid var(--admin-border-light);
  padding-top: var(--space-3);
}

.orders-workspace-module-label {
  margin: 0;
}

.orders-workspace-timeline-card {
  padding: 0;
}

.orders-workspace-timeline-card .order-timeline {
  gap: var(--space-3);
}

.orders-workspace-timeline-card .note-form {
  background: var(--bg-surface);
  border: 1px solid var(--admin-border-hover);
  border-radius: var(--admin-radius-md);
  padding: var(--space-3);
}

.orders-workspace-timeline-card .note-form-textarea {
  min-height: 72px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--admin-products-list-font);
}

.orders-workspace-timeline-card .note-form-checkbox,
.orders-workspace-timeline-card .note-form-submit {
  font-size: var(--admin-products-list-font);
}

.orders-workspace-timeline-card .timeline-list {
  padding-left: 1.375rem;
}

.orders-workspace-timeline-card .timeline-list::before {
  left: 0.3125rem;
}

.orders-workspace-timeline-card .timeline-list:has(.timeline-empty)::before {
  display: none;
}

.orders-workspace-timeline-card .timeline-empty {
  margin-left: -1.375rem;
  padding: var(--space-4);
  border: 1px solid var(--admin-border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.orders-workspace-timeline-card .timeline-empty p {
  font-size: var(--admin-products-list-font);
}

@media (max-width: 1180px) {
  .orders-workspace-grid {
    grid-template-columns: 1fr;
  }

  .orders-workspace-list-card,
  .orders-workspace-detail-card {
    min-height: 0;
  }

  .orders-workspace-bottom {
    gap: var(--space-3);
  }
}

@media (max-width: 768px) {
  .order-detail-hero {
    flex-direction: column;
  }

  .order-detail-info-grid {
    grid-template-columns: 1fr;
  }

  .order-lines-table {
    display: block;
    overflow-x: auto;
  }
}

.shipping-method-option--selected {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.shipping-method-name {
  flex: 1;
  font-weight: var(--font-medium);
}

.shipping-method-price {
  color: var(--text-secondary);
}

/* =================================================================
   ORDER TOTALS PREVIEW
   ================================================================= */

.order-totals-preview {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

.order-totals-preview-heading {
  margin-bottom: var(--space-3);
  font-weight: var(--font-medium);
}

/* =================================================================
   ORDER WORKSPACE DETAIL COLUMNS (create + existing detail)
   ================================================================= */

.orders-workspace-detail-card:has(.order-create-columns),
.orders-workspace-detail-card--create {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 0;
}

.orders-workspace-detail-card:has(.order-create-columns) > .admin-alert,
.orders-workspace-detail-card--create > .admin-alert {
  flex-shrink: 0;
  margin-bottom: var(--space-4);
}

.products-workspace-hero--in-section {
  padding: 0;
  border-bottom: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--space-3);
}

.products-workspace-hero--in-section .orders-workspace-hero-actions {
  margin-left: 0;
  justify-content: flex-start;
}

.order-create-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
}

.order-create-column.products-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.order-create-column.products-card::-webkit-scrollbar {
  display: none;
}

.order-create-column .products-workspace-section--collapsible:last-child {
  border-bottom: 0;
}

.order-create-coupon-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: stretch;
}

.order-create-coupon-row .form-input.products-workspace-field {
  flex: 1 1 auto;
  min-width: 0;
}

.order-create-coupon-row .btn {
  flex-shrink: 0;
}

.orders-admin-coupon-stack {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
  margin-top: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
}

.orders-admin-coupon-stack .coupon-input-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: flex-start;
}

.orders-admin-coupon-stack .coupon-input-row .form-group {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.orders-admin-coupon-stack .coupon-input-row .btn {
  flex-shrink: 0;
  height: var(--admin-control-field);
}

.order-create-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--admin-control-field);
  padding: 0 var(--space-3);
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--radius-lg);
  background: var(--success-dim);
}

.order-create-coupon-applied__code {
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-semibold);
  color: var(--success);
  letter-spacing: 0.04em;
}

/* Create order — section headers use success green instead of warning yellow */
.orders-workspace-detail-card--create .products-workspace-collapsible-header {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-surface));
}

.orders-workspace-detail-card--create .products-workspace-collapsible-header .products-workspace-section__title {
  color: var(--success);
}

.orders-workspace-detail-card--create .products-workspace-section__title {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-surface));
  color: var(--success);
}

.orders-workspace-module.orders-workspace-module--status {
  margin-top: var(--space-4);
}

@media (max-width: 1024px) {
  .orders-workspace-detail-card--create,
  .orders-workspace-detail-card:has(.order-create-columns) {
    overflow-y: auto;
  }

  .order-create-columns {
    grid-template-columns: 1fr;
    flex: none;
  }

  .order-create-column.products-card {
    height: auto;
    max-height: none;
  }
}

/* Legacy alias */
.order-create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .order-create-grid {
    grid-template-columns: 1fr;
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
}

.section-title-icon {
  color: var(--accent);
}

.section-heading {
  margin-bottom: var(--space-3);
  font-weight: var(--font-medium);
}

/* Page subtitle */
.page-subtitle {
  color: var(--text-secondary);
  margin: var(--space-1) 0 0;
}

/* Error message inline */
.error-message-inline {
  margin: 0 0 var(--space-5);
}

.error-message-inline p {
  margin: 0;
}

/* =================================================================
   ADDRESS FORMS
   ================================================================= */

.address-section {
  margin-bottom: var(--space-6);
}

.address-section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
}

.address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.address-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.address-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.address-form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.address-form-grid-street {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}

.address-form-grid-zip {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-4);
}

.address-form-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  align-self: flex-start;
}

.shipping-address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.shipping-address-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0;
}

.btn-copy-address {
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.same-as-billing-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  cursor: pointer;
}

.form-select-full {
  width: 100%;
}

/* =================================================================
   ORDER SUMMARY CARD
   ================================================================= */

.order-summary-card {
  background: var(--bg-surface);
  border: 2px solid var(--border);
}

.summary-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
}

.summary-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.summary-row {
  display: flex;
  justify-content: space-between;
}

.summary-row--total {
  border-top: 2px solid var(--border-strong);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}

.price-strikethrough {
  text-decoration: line-through;
  color: var(--text-secondary);
  margin-right: var(--space-2);
}

.price-free {
  color: var(--success);
}

.free-shipping-badge {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--success-dim);
  border-radius: var(--radius-md);
  color: var(--success);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.payment-status-hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.btn-submit-order {
  width: 100%;
  margin-top: var(--space-5);
  padding: var(--space-3);
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* =================================================================
   PRODUCT TABLE CELLS
   ================================================================= */

.product-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.product-thumbnail {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.product-thumbnail-placeholder {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.product-featured-star {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--warning);
}

.product-compare-price {
  margin-left: var(--space-2);
  text-decoration: line-through;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.stock-warning {
  color: var(--warning);
}

.stock-danger {
  color: var(--error);
}

/* =================================================================
   PREVIEW HEADER
   ================================================================= */

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.preview-header .section-heading {
  margin: 0;
}

/* =================================================================
   CUSTOMER PICKER
   ================================================================= */

/* CustomerPicker embed — Admin V2 surface tokens (not tenant --accent chrome). */
.customer-selected-card,
.customer-new-form-card {
  background: var(--admin-v2-color-surface);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-md, 8px);
  padding: var(--admin-v2-space-4, var(--space-4));
  color: var(--admin-v2-color-text);
}

.customer-picker-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-2, var(--space-2));
  margin-bottom: var(--admin-v2-space-4, var(--space-4));
}

.customer-picker-panel__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2, var(--space-2));
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-card-title, 16px);
  font-weight: var(--admin-v2-font-weight-bold, var(--font-bold, 700));
  line-height: 1.4;
}

.customer-picker-panel__title-icon,
.customer-selected-card__icon {
  flex-shrink: 0;
  color: var(--admin-v2-color-primary);
}

.customer-selected-card__name {
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-card-title, 16px);
  font-weight: var(--admin-v2-font-weight-bold, var(--font-bold, 700));
}

.customer-selected-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-1, var(--space-1));
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta, 12px);
}

.customer-selected-card__meta-row {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-1, var(--space-1));
}

.customer-selected-card__meta-row svg {
  color: var(--admin-v2-color-text-soft);
}

.customer-new-form-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--admin-v2-space-3, var(--space-3));
}

.admin-v2-soft-panel .customer-selected-card,
.admin-v2-soft-panel .customer-new-form-card {
  /* SoftPanel is already the card; keep inner chrome flush with Admin V2 field stack. */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* =================================================================
   STATUS FLOW CARD (Order Status & Shipping)
   ================================================================= */

.status-flow-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.status-flow-heading {
  display: none;
}

.status-timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: 0;
}

.status-timeline-step {
  min-height: var(--admin-control-field);
  padding: 0 var(--space-2);
  text-align: center;
  border-radius: var(--admin-radius-md);
  font-size: var(--admin-products-list-font);
  font-weight: var(--font-medium);
  line-height: 1;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.status-timeline-step--completed {
  background: var(--success-dim);
  color: var(--success);
  border-color: color-mix(in srgb, var(--admin-v2-state-success-text) 25%, transparent);
}

.status-timeline-step--active {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 28%, transparent);
  font-weight: var(--font-semibold);
}

.status-timeline-step--pending {
  background: var(--bg-surface);
  color: var(--text-muted);
  border-color: var(--admin-border-hover);
}

.status-cancelled-banner {
  padding: var(--space-3);
  background: var(--error-dim);
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--admin-v2-state-danger-text) 24%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: 0;
  text-align: center;
  font-weight: var(--font-semibold);
  font-size: var(--admin-products-list-font);
}

.status-tracking-section {
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
  display: grid;
  gap: var(--space-3);
}

.status-tracking-field {
  margin-bottom: 0;
}

.status-tracking-field:last-child {
  margin-bottom: 0;
}

.status-tracking-section .form-group {
  margin: 0;
  gap: var(--space-2);
}

.status-tracking-section .form-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--admin-v2-color-text-soft);
}

.status-tracking-section .form-input {
  width: 100%;
  font-size: var(--admin-products-list-font);
}

.status-tracking-section .status-tracking-input {
  min-height: var(--admin-control-field);
  height: var(--admin-control-field);
}

.status-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--admin-border-light);
}

.status-info-text {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
  color: var(--text-muted);
  font-style: normal;
}

@media (max-width: 640px) {
  .status-timeline {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   ORDER EDIT MODAL
   ================================================================= */

/* Large order edit modal */
.order-edit-modal {
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* Modal form takes full height */
.order-edit-modal-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Scrollable modal body */
.order-edit-modal-body {
  padding: var(--space-6);
  flex: 1;
  overflow-y: auto;
  min-height: 300px;
}

/* Modal heading without margin */
.modal-heading--flush {
  margin: 0;
}

/* Badge size variant for tabs */
.badge--xs {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
}

/* Error alert styling in modals */
.order-edit-error {
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--error-dim, color-mix(in srgb, var(--error) 15%, transparent));
  color: var(--error);
  border-radius: var(--radius-md);
}

/* Warning alert for disabled items tab */
.order-edit-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--warning-dim, color-mix(in srgb, var(--warning) 15%, transparent));
  color: var(--warning);
  border-radius: var(--radius-md);
}

/* ─── Address Fields ──────────────────────────────────────── */

.address-fields {
  margin-top: var(--space-2);
}

.address-copy-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* order-timeline.css */
/**
 * ADMIN CONTEXT: Order Timeline
 * 
 * Timeline component voor order activiteit: statuswijzigingen,
 * betalingen, notities, en systeemgebeurtenissen.
 */

/* =================================================================
   LOADING & ERROR STATES
   ================================================================= */

.timeline-loading,
.timeline-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  gap: var(--space-3);
  color: var(--text-secondary);
}

.timeline-error {
  color: var(--error);
}

.timeline-retry-btn {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-primary);
}

.timeline-retry-btn:hover {
  background: var(--bg-hover);
}

/* =================================================================
   TIMELINE CONTAINER
   ================================================================= */

.order-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.timeline-list {
  position: relative;
  padding-left: var(--space-8);
}

/* Vertical line */
.timeline-list::before {
  content: '';
  position: absolute;
  left: 0.6875rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

/* =================================================================
   TIMELINE ITEM
   ================================================================= */

.timeline-item {
  position: relative;
  padding-bottom: var(--space-5);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* Timeline dot */
.timeline-dot {
  position: absolute;
  left: -1.6875rem;
  top: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  z-index: 1;
}

.timeline-dot--success {
  color: var(--success);
}

.timeline-dot--info {
  color: var(--info);
}

.timeline-dot--warning {
  color: var(--warning);
}

.timeline-dot--note {
  color: var(--text-muted);
}

/* =================================================================
   TIMELINE CONTENT
   ================================================================= */

.timeline-content {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.timeline-content--note {
  background: var(--warning-dim);
  border: 1px solid var(--warning);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-1);
}

.timeline-title {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.timeline-time {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.timeline-details {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.timeline-status-change {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg-hover);
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.timeline-amount {
  font-weight: var(--font-semibold);
  color: var(--success);
}

.timeline-email {
  font-style: italic;
}

.timeline-actor {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* =================================================================
   NOTE SPECIFIC STYLES
   ================================================================= */

.note-private-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.025em;
  background: var(--warning);
  color: var(--bg-deep);
  border-radius: var(--radius-sm);
}

.note-content {
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: pre-wrap;
  line-height: var(--leading-normal);
}

.note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
}

.note-delete-btn {
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.note-delete-btn:hover:not(:disabled) {
  color: var(--error);
  background: var(--error-dim);
}

.note-delete-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* =================================================================
   NOTE FORM
   ================================================================= */

.note-form {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.note-form-textarea {
  width: 100%;
  padding: var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-elevated);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.note-form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.note-form-textarea::placeholder {
  color: var(--text-muted);
}

.note-form-textarea:disabled {
  background: var(--bg-surface);
  cursor: not-allowed;
}

.note-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
}

.note-form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.note-form-checkbox input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.note-form-checkbox input:disabled {
  cursor: not-allowed;
}

.note-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: none;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.note-form-submit:hover:not(:disabled) {
  color: var(--accent);
  background: var(--accent-glow);
}

.note-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.note-form-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--error);
}

/* =================================================================
   EMPTY STATE
   ================================================================= */

.timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--text-secondary);
  text-align: center;
}

.timeline-empty p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

/* =================================================================
   ANIMATIONS
   ================================================================= */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 640px) {
  .timeline-header {
    flex-direction: column;
    gap: var(--space-1);
  }
  
  .note-form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  
  .note-form-submit {
    justify-content: center;
  }
}

/* org-dropdown.css */
/* ─── Org Avatar (trigger button in navbar) ─── */

.org-avatar {
  width: var(--admin-control-field);
  height: var(--admin-control-field);
  border-radius: var(--radius-md);
  background: var(--admin-v2-color-primary);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1.5px solid transparent;
  position: relative;
  padding: 0;
}

.org-avatar:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary);
}

.org-avatar.org-mode {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-surface));
  color: color-mix(in srgb, var(--admin-v2-state-success-text) 72%, var(--admin-v2-color-text));
}

.org-avatar.org-mode:hover {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 16%, var(--bg-surface));
  color: color-mix(in srgb, var(--admin-v2-state-success-text) 72%, var(--admin-v2-color-text));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 15%, transparent);
}

.org-avatar svg {
  width: 16px;
  height: 16px;
}

/* ─── Org Dropdown Panel ─── */

.org-dropdown {
  position: fixed;
  top: calc(var(--main-nav-height, 56px) + 6px);
  right: 16px;
  width: 320px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--admin-v2-shadow-lg);
  z-index: 950;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-4px - var(--org-dropdown-scroll-offset, 0px)));
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.org-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(calc(0px - var(--org-dropdown-scroll-offset, 0px)));
}

.org-dropdown.org-swapped {
  transform: translateY(calc(0px - var(--org-dropdown-scroll-offset, 0px)));
}

.org-dropdown.org-dropdown--sidebar {
  top: auto;
  right: auto;
  left: calc(var(--admin-account-nav-width, 272px) + 8px);
  bottom: 10px;
  transform: translateY(4px);
}

.org-dropdown.org-dropdown--sidebar.open,
.org-dropdown.org-dropdown--sidebar.org-swapped {
  transform: translateY(0);
}

/* ─── Dropdown Header ─── */

.org-dropdown-header {
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.org-dropdown-header .org-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.org-dropdown-header .org-url {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ─── Sections ─── */

.org-dropdown-section {
  padding: 4px 0;
}

.org-dropdown-section-title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 8px 12px 4px;
}

/* ─── Items ─── */

.org-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.org-dropdown-item:hover {
  background: var(--bg-hover);
}

.org-dropdown-item.active {
  background: var(--admin-v2-color-primary);
  color: var(--accent);
  font-weight: 600;
}

.org-dropdown-item svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.org-dropdown-item-icon {
  color: var(--text-muted);
}

.org-dropdown-item.active svg {
  color: var(--accent);
}

.org-dropdown-item.sub {
  padding-left: 34px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.org-dropdown-chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.org-dropdown-chevron.expanded {
  transform: rotate(90deg);
}

/* Mockup items: rode tekst zodat duidelijk is dat het nog geen echte pagina is */
.org-dropdown-item.mockup {
  color: var(--error);
}

.org-dropdown-item.mockup svg {
  color: var(--error);
}

/* Module item in accent kleur */
.org-dropdown-item.modules {
  color: var(--accent);
}

.org-dropdown-item.modules svg {
  color: var(--accent);
}

/* Danger item (uitloggen) */
.org-dropdown-item.danger {
  color: var(--error);
}

.org-dropdown-item.danger svg {
  color: var(--error);
}

/* ─── Divider ─── */

.org-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* ─── Overlay ─── */

.org-dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: none;
}

.org-dropdown-overlay.active {
  display: block;
}

/* ─── Swapped mode: sidebar items in dropdown ─── */

.org-dropdown.org-swapped .admin-account-nav__child-link {
  margin: 0;
}

.org-dropdown.org-swapped .admin-account-nav__item-row {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

.org-dropdown.org-swapped .admin-account-nav__item-row:hover {
  background: var(--bg-hover);
}

.org-dropdown.org-swapped .admin-account-nav__item-row--active {
  background: var(--admin-v2-color-primary);
}

/* pages.css */
/**
 * ADMIN CONTEXT: Page Structure
 * 
 * Basisstructuur voor admin pagina's: page wrapper, content cards,
 * loading states, empty states, tabs, en page info.
 *
 * USAGE:
 * <div class="admin-page">
 *   <div class="admin-page-content"> ... </div>
 * </div>
 */

/* =================================================================
   PAGE WRAPPER
   ================================================================= */

.admin-page {
  padding: var(--space-3);
}

.admin-page-content {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  /* Rustend vlak: in admin geen schaduw (opdracht 175, één hangpunt met de kaarten van stuk 1). */
  box-shadow: var(--admin-v2-shadow-xs, var(--shadow-sm));
}

/* =================================================================
   HEADER PATTERNS (used within page content)
   ================================================================= */

.admin-header-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.admin-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.admin-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin-header-title h1 {
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  color: var(--text-primary);
  margin: 0;
}

/* =================================================================
   LOADING STATES
   ================================================================= */

.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: var(--space-4);
  /* Closure: pre-shell canvas follows active Admin theme profile (no light orphan) */
  background: var(--admin-v2-color-app-bg, var(--pg-ui-color-bg));
  color: var(--admin-v2-color-text-muted, var(--pg-ui-color-text-muted, var(--text-secondary)));
}

.admin-loading.admin-i18n-bootstrap,
.admin-loading.admin-bootstrap-placeholder {
  background: var(--admin-v2-color-app-bg, var(--pg-ui-color-bg));
  color: var(--admin-v2-color-text-muted, var(--pg-ui-color-text-muted, var(--text-secondary)));
}

.admin-boot-failure,
.admin-page[data-admin-error-boundary] {
  background: var(--admin-v2-color-app-bg, var(--pg-ui-color-bg));
  color: var(--admin-v2-color-text, var(--pg-ui-color-text, var(--text-primary)));
}

.admin-page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  gap: var(--space-4);
  color: var(--text-secondary);
}

.loading-center {
  text-align: center;
  padding: var(--space-8);
}

/* =================================================================
   EMPTY STATES
   ================================================================= */

.admin-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-secondary);
}

.admin-empty-state svg {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.admin-empty-state h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.admin-empty-state-action {
  margin-top: var(--space-4);
}

/* Generic empty state */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.empty-state-icon {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-4);
  display: block;
}

.empty-state-title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.empty-state-desc {
  margin: 0 0 var(--space-6) 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.empty-state-action {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--bg-deep);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.empty-state-action:hover {
  opacity: 0.9;
}

/* =================================================================
   CARDS
   ================================================================= */

.admin-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  /* Rustend vlak: in admin geen schaduw (opdracht 175, één hangpunt met de kaarten van stuk 1). */
  box-shadow: var(--admin-v2-shadow-xs, var(--shadow-sm));
}

.admin-card--narrow {
  max-width: 540px;
}

.admin-card-compact {
  padding: 0;
  overflow: hidden;
}

.admin-card-header-gradient {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: var(--bg-deep);
  padding: var(--space-6);
}

.admin-card-body {
  padding: var(--space-6);
}

/* =================================================================
   TABS
   ================================================================= */

.admin-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
}

.admin-tab {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: all var(--transition-fast);
}

.admin-tab:hover {
  color: var(--text-primary);
  background-color: var(--bg-surface);
}

.admin-tab.active {
  color: var(--accent);
  background-color: var(--accent-glow);
  font-weight: var(--font-medium);
}

/* =================================================================
   SAVE ACTIONS & SECTIONS
   ================================================================= */

.admin-save-actions {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.admin-section-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

/* =================================================================
   INFO GRID & META
   ================================================================= */

.admin-info-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-info-row {
  display: flex;
  justify-content: space-between;
}

.admin-meta-box {
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

.admin-meta-box p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* =================================================================
   PAGE INFO BANNER
   ================================================================= */

.admin-page-info {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--info-dim);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border: 1px solid var(--info);
}

.admin-page-info-icon {
  flex-shrink: 0;
  color: var(--info);
}

.admin-page-info-content h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.admin-page-info-content p {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.admin-page-info-content ul {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.admin-page-info-content li {
  margin-bottom: var(--space-1);
}

.admin-page-info-content li:last-child {
  margin-bottom: 0;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .admin-page {
    padding: var(--space-4);
  }
}

.admin-page-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* partners.css */
/**
 * ADMIN CONTEXT: Partners
 *
 * Partners management list, empty state and form helpers.
 */

.partners-admin-banner,
.partners-admin-inline-note {
  margin-bottom: var(--space-4);
}

.partners-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.partners-admin-toolbar__filters {
  min-width: 180px;
}

.partners-admin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10);
  text-align: center;
  background: linear-gradient(135deg, var(--admin-v2-color-surface), color-mix(in srgb, var(--admin-v2-color-brand-gold) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-brand-gold) 20%, transparent);
  border-radius: 20px;
}

.partners-admin-empty svg {
  color: var(--accent);
}

.partners-admin-empty h2,
.partners-admin-empty p {
  margin: 0;
}

.partners-admin-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}

.partners-admin-table__partner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.partners-admin-table__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--admin-radius-card);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: var(--font-semibold);
}

.partners-admin-table__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-surface);
}

.partners-admin-table__partner-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.partners-admin-table__partner-copy strong,
.partners-admin-table__partner-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partners-admin-table__partner-copy span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.partners-admin-table__external-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  text-decoration: none;
}

.partners-admin-table__external-link span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partners-admin-table__schedule {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.partners-admin-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

@media (max-width: 900px) {
  .partners-admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .partners-admin-toolbar__filters {
    width: 100%;
    min-width: 0;
  }

  .partners-admin-table__external-link span {
    max-width: 140px;
  }
}

@media (max-width: 768px) {
  .partners-admin-empty {
    padding: var(--space-7);
  }

  .partners-admin-table th,
  .partners-admin-table td {
    padding: var(--space-3);
  }

  .partners-admin-table__actions {
    flex-wrap: wrap;
  }
}
/* platform.css */
/**
 * CONTEXT: Admin → Platform
 * Styling specifiek voor de platform admin UI (/platform/*)
 *
 * AI-NOTE: Platform UI is voor Sjoerd (platform eigenaar) alleen.
 * Draait ZONDER tenant context, beveiligd via CF Access.
 *
 * Hergebruikt admin context classes (.admin-page, .admin-table, etc.)
 * en voegt platform-specifieke aanvullingen toe.
 */

/* ===== PLATFORM NAV ===== */
.platform-nav {
  display: flex;
  align-items: center;
  height: var(--admin-header-height, 64px);
  padding: 0 var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  gap: var(--space-8);
}

.platform-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.platform-nav-logo {
  font-size: var(--section-title-size, 18px);
  font-weight: var(--section-title-weight, 600);
  color: var(--accent);
  letter-spacing: -0.01em;
}

.platform-nav-badge {
  font-size: var(--text-xs, 11px);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
}

.platform-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.platform-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--control-font-md, 14px);
  border-radius: var(--radius-md, 8px);
  transition: background 0.15s, color 0.15s;
}

.platform-nav-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.platform-nav-link.active {
  color: var(--accent);
  font-weight: 600;
}

/* ===== PLATFORM STATS GRID ===== */
.platform-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.platform-stat-clickable {
  cursor: pointer;
  transition: border-color 0.15s;
}

.platform-stat-clickable:hover {
  border-color: var(--accent);
}

.platform-stat-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.platform-stat-label {
  font-size: var(--control-font-md, 14px);
}

.platform-stat-value {
  font-size: var(--page-title-size, 24px);
  font-weight: var(--page-title-weight, 600);
  color: var(--text-primary);
}

/* ===== PLATFORM DETAIL ROWS ===== */
.platform-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.platform-detail-row:last-child {
  border-bottom: none;
}

.platform-detail-label {
  color: var(--text-secondary);
  font-size: var(--control-font-md, 14px);
  font-weight: 500;
}

.platform-detail-row code {
  font-size: var(--text-sm, 13px);
  padding: 2px 6px;
  background: var(--bg-deep);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-primary);
}

/* ===== PLATFORM DB ID (truncated) ===== */
.platform-db-id {
  font-size: var(--text-sm, 13px);
  padding: 2px 6px;
  background: var(--bg-deep);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary);
}

/* ===== PLATFORM ROW CLICKABLE ===== */
.platform-row-clickable {
  cursor: pointer;
  transition: background 0.15s;
}

.platform-row-clickable:hover {
  background: var(--bg-hover);
}

/* ===== PLATFORM EMPTY STATE ===== */
.platform-empty {
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  font-size: var(--control-font-md, 14px);
}

/* ===== PLATFORM RESULT BANNERS ===== */
.platform-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-4);
  font-size: var(--control-font-md, 14px);
}

.platform-result-success {
  background: var(--success-dim);
  color: var(--success);
  border: 1px solid var(--success);
}

.platform-result-error {
  background: var(--error-dim);
  color: var(--error);
  border: 1px solid var(--error);
}

/* ===== PLATFORM FORM ACTIONS ===== */
.platform-form-actions {
  margin-top: var(--space-6);
  display: flex;
  justify-content: flex-end;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .platform-nav {
    flex-direction: column;
    height: auto;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }

  .platform-nav-links {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .platform-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

/* policy.css */
/**
 * Policy UI — CSS voor policy engine client-side componenten
 *
 * Bevat styling voor:
 * - Nav dropdown preview badge (VIEW_ONLY lock icon)
 * - Footer card preview state
 * - PolicyBanner upgrade link
 * - Limit indicators (progress bar)
 * - Announcement banner list spacing
 */

/* ─── Nav Dropdown: Preview Badge ──────────────────────────── */

.nav-dropdown__item--preview {
  opacity: 0.7;
}

.nav-dropdown__lock {
  margin-left: auto;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ─── Footer Card: Preview State ──────────────────────────── */

.admin-footer__card--preview {
  opacity: 0.7;
  position: relative;
}

.admin-footer__lock {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  color: var(--text-muted);
}

/* ─── PolicyBanner: Upgrade Link ──────────────────────────── */

.policy-banner-upgrade {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-size: var(--control-font-sm);
  font-weight: var(--font-medium, 500);
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.policy-banner-upgrade:hover {
  background: var(--accent);
  color: var(--admin-v2-color-text-inverse);
}

/* ─── Announcement Banner List ────────────────────────────── */

.announcement-banner-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.announcement-banner-list .alert {
  margin: 0;
}

.announcement-banner-list .alert-title {
  font-weight: var(--font-medium, 500);
  margin-right: var(--space-2);
}

.announcement-banner-list .alert-message {
  color: var(--text-secondary);
}

/* ─── Limit Indicator: Progress Bar ──────────────────────── */

.limit-indicator {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.limit-indicator__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.limit-indicator__label {
  font-weight: var(--font-medium, 500);
  color: var(--text-primary);
}

.limit-indicator__count {
  font-variant-numeric: tabular-nums;
}

.limit-indicator__bar {
  height: 6px;
  background: var(--bg-hover);
  border-radius: 3px;
  overflow: hidden;
}

.limit-indicator__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  background: var(--accent);
}

.limit-indicator__fill--warning {
  background: var(--warning);
}

.limit-indicator__fill--exceeded {
  background: var(--error);
}

.limit-indicator__nudge {
  font-size: var(--text-xs, 12px);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.limit-indicator__nudge a {
  color: var(--accent);
  text-decoration: none;
}

.limit-indicator__nudge a:hover {
  text-decoration: underline;
}

/* ─── Upgrade Page: Tier Cards ──────────────────────────── */

.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  max-width: 1100px;
  margin-bottom: var(--space-6);
}

.upgrade-intro-card,
.upgrade-section-card {
  margin-bottom: var(--space-6);
}

.upgrade-intro-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.9fr);
  gap: var(--space-5);
  align-items: start;
}

.upgrade-intro-card__lead,
.upgrade-section-card__description {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.upgrade-bullet-list,
.upgrade-check-list {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.upgrade-check-list {
  padding-left: 0;
  list-style: none;
}

.upgrade-check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.upgrade-promise-box {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-hover);
}

.upgrade-promise-box strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}

.upgrade-promise-box p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.upgrade-promise-box--success {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-surface));
  border-color: var(--success);
}

.upgrade-promise-box--info {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
  border-color: var(--accent);
}

.upgrade-promise-box--warning {
  margin-top: var(--space-4);
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-surface));
  border-color: var(--warning);
}

.upgrade-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.upgrade-card:hover {
  box-shadow: var(--shadow-md);
}

.upgrade-card--current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.upgrade-card--available {
  border-color: var(--border-hover);
}

.upgrade-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.upgrade-card__name {
  font-size: var(--section-title-size);
  font-weight: var(--font-semibold, 600);
  color: var(--text-primary);
  margin: 0;
}

.upgrade-card__price {
  font-size: var(--text-lg, 18px);
  font-weight: var(--font-medium, 500);
  color: var(--text-secondary);
}

.upgrade-card__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.upgrade-card__summary {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.upgrade-card__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs, 12px);
  font-weight: var(--font-medium, 500);
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
}

.upgrade-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.upgrade-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.4;
}

.upgrade-card__feature--disabled {
  color: var(--text-muted);
}

.upgrade-card__check {
  color: var(--success);
  flex-shrink: 0;
  margin-top: 1px;
}

.upgrade-card__x {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 1px;
}

.upgrade-card__action {
  margin-top: auto;
  padding-top: var(--space-4);
}

.upgrade-card__action .btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.upgrade-feature-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.upgrade-feature-category {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

.upgrade-feature-category__title {
  margin: 0 0 var(--space-3);
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  color: var(--text-primary);
}

.upgrade-feature-category__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.upgrade-feature-category__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.upgrade-tier-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--admin-radius-pill);
  font-size: 11px;
  font-weight: var(--font-medium, 500);
  white-space: nowrap;
}

.upgrade-tier-pill--free,
.upgrade-tier-pill--gratis,
.upgrade-tier-pill--kostenlos {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.upgrade-tier-pill--supporter {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}

.upgrade-tier-pill--professional {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.upgrade-tier-pill--advanced {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
}

.upgrade-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.upgrade-table-wrap {
  overflow-x: auto;
}

.upgrade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.upgrade-table th,
.upgrade-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.upgrade-table th {
  color: var(--text-secondary);
  font-weight: var(--font-medium, 500);
  background: var(--bg-hover);
}

.upgrade-table td {
  color: var(--text-primary);
}

@media (max-width: 1024px) {
  .upgrade-intro-card,
  .upgrade-info-grid {
    grid-template-columns: 1fr;
  }
}

/* Scope badge naast section title */
.policy-scope-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* Matrix Editor: number input width */
.policy-number-input {
  width: 120px;
}

/* Extra small badge variant */
.admin-badge--xs {
  font-size: 11px;
  padding: 1px 6px;
}

/* products.css */
/**
 * Products admin workspace
 * Master-detail productbeheer in dezelfde ritmiek als holders/orders.
 */

/* Viewport lock: products workspace. V2 shell owns chrome; .admin-main scrolls.
 * Nested .products-page overflow:hidden is unlocked for collection cards in
 * collection-shell.css — do not reintroduce height:100% traps there. */
html:has(.products-page),
body:has(.products-page) {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.products-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Shell lock: automatic via :has() — no JS class toggle needed */
.admin-shell:has(.products-page) {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.admin-main:has(.products-page) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.admin-main:has(.products-page) > .products-page {
  flex: 1;
  min-height: 0;
}

.products-workspace-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-toolbar-gap);
  min-height: var(--admin-control-compact);
  margin: 0 0 var(--space-3);
  padding: 0;
  background: var(--admin-v2-color-surface);
}

.products-workspace-toolbar__left,
.products-workspace-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.products-workspace-toolbar__actions-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--admin-toolbar-gap);
}

.products-workspace-toolbar__action {
  appearance: none;
  border: 1px solid var(--admin-v2-border-strong);
  background-color: var(--admin-v2-color-text-inverse);
  border-radius: var(--admin-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-list-toolbar-control-font);
  font-weight: 500;
  height: var(--admin-control-compact);
  line-height: 1;
  padding: 0 var(--admin-list-row-padding-x);
  cursor: pointer;
  text-decoration: none;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* Icon-only toolbar actions (`WorkspaceToolbarActionGroup` + `iconOnly`): Lucide defaults to 24px — too heavy vs 13px labels in 28px pills. */
.products-workspace-toolbar__action:has(> svg:only-child) {
  box-sizing: border-box;
  width: var(--admin-control-compact);
  min-width: var(--admin-control-compact);
  padding: 0;
}

.products-workspace-toolbar__action:has(> svg:only-child) svg {
  display: block;
  width: var(--admin-toolbar-inline-icon-size);
  height: var(--admin-toolbar-inline-icon-size);
}

.integration-workspace-embedded {
  display: grid;
  gap: var(--space-3);
  font-size: var(--admin-font-size-base);
}

.integration-workspace-embedded .settings-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.integration-workspace-embedded .settings-section + .settings-section {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.integration-workspace-embedded .settings-section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
}

.integration-workspace-embedded .settings-section-description {
  margin: 0 0 var(--space-3);
  font-size: var(--admin-font-size-base);
}

.integration-workspace-embedded .form-section {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.integration-workspace-embedded .form-section + .form-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.integration-workspace-embedded .settings-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.integration-workspace-embedded .settings-col {
  display: grid;
  gap: var(--space-3);
}

.integration-workspace-embedded .form-input,
.integration-workspace-embedded .form-select {
  min-height: var(--admin-control-field);
  height: var(--admin-control-field);
  font-size: var(--admin-font-size-base);
  border-radius: var(--admin-radius-control);
}

.integration-workspace-embedded .form-input-group .form-input {
  min-height: var(--admin-control-field);
  height: var(--admin-control-field);
}

.integration-workspace-embedded .form-checkbox-label,
.integration-workspace-embedded .settings-checkbox-label,
.integration-workspace-embedded .form-hint,
.integration-workspace-embedded .connect-detail-row,
.integration-workspace-embedded .settings-section-description,
.integration-workspace-embedded .form-label {
  font-size: var(--admin-font-size-base);
}

.integration-workspace-embedded .btn {
  min-height: var(--admin-control-compact);
  height: var(--admin-control-compact);
  padding: 0 12px;
  border-radius: var(--admin-radius-pill);
  font-size: var(--admin-list-toolbar-control-font);
}

.integration-workspace-embedded .form-hint-box,
.integration-workspace-embedded .connect-status-card,
.integration-workspace-embedded .status-message {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

/* Stripe-style readable help articles inside integration detail panels */
.integration-help-article {
  max-width: 65ch;
  color: var(--text-primary);
  font-size: var(--admin-font-size-base);
}

.integration-help-article__lead {
  margin: 0 0 var(--space-5) 0;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.integration-help-article__heading {
  margin: var(--space-6) 0 var(--space-3) 0;
  font-size: 1.0625rem;
  font-weight: var(--font-semibold);
  line-height: 1.45;
  color: var(--text-primary);
}

.integration-help-article__heading:first-child {
  margin-top: 0;
}

.integration-help-article__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.integration-help-article__step {
  margin: 0;
  padding: 0;
}

.integration-help-article__step-title {
  margin: 0 0 var(--space-1) 0;
  font-size: 1rem;
  font-weight: var(--font-semibold);
  line-height: 1.45;
  color: var(--text-primary);
}

.integration-help-article__step-body {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.integration-help-article__list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.integration-help-article__list li + li {
  margin-top: var(--space-2);
}

.integration-help-article__columns {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

@media (min-width: 640px) {
  .integration-help-article__columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.integration-help-article__footer {
  margin: var(--space-6) 0 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.integration-help-article__footer a {
  color: var(--accent);
  text-decoration: none;
}

.integration-help-article__footer a:hover {
  text-decoration: underline;
}

.integration-workspace-embedded .integration-help-article .form-hint-box {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.integration-workspace-embedded .form-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.integration-workspace-embedded--stripe .settings-two-col {
  gap: var(--space-3);
}

.integration-workspace-embedded--stripe .form-actions {
  margin-top: var(--space-2);
}

.products-workspace-toolbar__action:hover:not(:disabled) {
  background-color: var(--admin-v2-color-text-inverse);
  border-color: var(--admin-v2-border-strong);
  color: var(--admin-v2-color-text);
}

.products-workspace-toolbar__action:disabled {
  color: var(--admin-v2-color-text-soft);
  background: var(--admin-v2-border-subtle);
  border-color: var(--admin-v2-border-strong);
  cursor: not-allowed;
}

.products-workspace-toolbar__action--danger {
  color: var(--admin-v2-color-danger-text);
}

/* :not(:disabled) — beat generic `.products-workspace-toolbar__action:hover` (dark text). */
.products-workspace-toolbar__action--danger:hover:not(:disabled) {
  color: var(--admin-v2-state-danger-text);
  background: var(--admin-v2-state-danger-bg);
  border-color: var(--admin-v2-state-danger-bg);
}

.products-workspace-toolbar__action--danger:disabled {
  color: var(--admin-v2-color-danger-text);
  background: var(--admin-v2-color-surface);
  border-color: var(--admin-v2-state-danger-bg);
}

.products-workspace-toolbar__action[data-workspace-action-intent='delete'] {
  color: var(--admin-v2-color-danger-text);
}

.products-workspace-toolbar__action[data-workspace-action-intent='delete']:hover:not(:disabled) {
  color: var(--admin-v2-state-danger-text);
  background: var(--admin-v2-state-danger-bg);
  border-color: var(--admin-v2-state-danger-bg);
}

.products-workspace-toolbar__action[data-workspace-action-intent='delete']:disabled {
  color: var(--admin-v2-color-danger-text);
  background: var(--admin-v2-color-surface);
  border-color: var(--admin-v2-state-danger-bg);
}

.products-workspace-toolbar__action--primary {
  /* Opdracht 175: in rust het ene accent; de hoverkleur alleen bij hover. Radius 8 zoals elke knop. */
  border: 1px solid var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary);
  border-radius: var(--admin-radius-control);
  color: var(--admin-v2-color-text-inverse);
  height: var(--admin-control-compact);
  line-height: 1;
  padding: 0 var(--admin-list-row-padding-x);
}

.products-workspace-toolbar__action--primary:hover {
  background: var(--admin-v2-color-primary-hover);
  border-color: var(--admin-v2-color-primary-hover);
  color: var(--admin-v2-color-text-inverse);
}

.products-workspace-toolbar__action--primary:disabled {
  color: var(--admin-v2-color-text-soft);
  background: var(--admin-v2-border-subtle);
  border-color: var(--admin-v2-border-strong);
}

.products-workspace-toolbar__action--primary.products-workspace-toolbar__action--autosaving {
  border-color: var(--success);
  background: var(--success);
  color: var(--admin-v2-color-text-inverse);
}

.products-workspace-toolbar__action--primary.products-workspace-toolbar__action--autosaving:hover {
  border-color: var(--success);
  background: var(--success);
  color: var(--admin-v2-color-text-inverse);
}

.products-workspace-toolbar__action--primary.products-workspace-toolbar__action--autosaved {
  border-color: var(--success);
  background: var(--success);
  color: var(--admin-v2-color-text-inverse);
  animation: products-toolbar-save-return 3.4s ease-out forwards;
}

.products-workspace-toolbar__action--primary.products-workspace-toolbar__action--autosaved:hover {
  color: var(--admin-v2-color-text-inverse);
  animation: products-toolbar-save-return 3.4s ease-out forwards;
}

.products-workspace-toolbar__action--success {
  border: 1px solid var(--success);
  background: var(--success);
  border-radius: var(--admin-radius-pill);
  color: var(--admin-v2-color-text-inverse);
  height: var(--admin-control-compact);
  line-height: 1;
  padding: 0 var(--admin-list-row-padding-x);
}

.products-workspace-toolbar__action--success:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--success) 90%, var(--admin-v2-color-surface));
  border-color: var(--success);
  color: var(--admin-v2-color-text-inverse);
  filter: none;
}

.products-workspace-toolbar__action--success:disabled {
  color: var(--admin-v2-color-text-soft);
  background: var(--admin-v2-border-subtle);
  border-color: var(--admin-v2-border-strong);
  filter: none;
}

/* Klantfilter actief: groene pill blijft groen (niet grijs als standaard disabled). */
.products-workspace-toolbar__action--success.products-workspace-toolbar__action--related-pinned:disabled {
  color: var(--admin-v2-color-text-inverse);
  background-color: var(--success);
  border-color: var(--success);
  opacity: 1;
}

.products-workspace-toolbar__related-cluster {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.products-workspace-toolbar__related-clear {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--admin-control-compact);
  min-width: var(--admin-control-compact);
  height: var(--admin-control-compact);
  margin: 0;
  padding: 0;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: var(--admin-radius-pill);
  background-color: var(--admin-v2-color-text-inverse);
  color: var(--admin-v2-color-text-muted);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.products-workspace-toolbar__related-clear:hover {
  background-color: var(--admin-v2-color-text-inverse);
  border-color: var(--admin-v2-border-strong);
  color: var(--admin-v2-color-text);
}

@keyframes products-toolbar-save-return {
  0% {
    border-color: var(--success);
    background: var(--success);
    color: var(--admin-v2-color-text-inverse);
  }

  78% {
    border-color: var(--success);
    background: var(--success);
    color: var(--admin-v2-color-text-inverse);
  }

  100% {
    border-color: var(--admin-v2-color-primary-hover);
    background: var(--admin-v2-color-primary-hover);
    color: var(--admin-v2-color-text-inverse);
  }
}

.products-workspace-toolbar__select {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-width: 128px;
  height: var(--admin-control-compact);
  padding: 0 32px 0 12px;
  background-color: var(--admin-v2-color-text-inverse);
  background-image: var(--admin-v2-select-chevron-muted);
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: var(--admin-radius-control);
  color: var(--admin-v2-color-text);
  font-size: var(--admin-list-toolbar-control-font);
  font-weight: 500;
  line-height: 1;
}

.products-workspace-toolbar__date {
  display: inline-flex;
  align-items: center;
  min-width: 200px;
  height: var(--admin-control-compact);
  padding: 0 12px;
  border: 1px solid var(--admin-v2-border-strong);
  background-color: var(--admin-v2-color-text-inverse);
  color: var(--admin-v2-color-text);
  border-radius: var(--admin-radius-control);
  line-height: 1;
}

/*
 * Master-detail linker kolom: vaste breedte via --admin-workspace-list-col-width in _base.css.
 */

.products-master-detail {
  display: grid;
  grid-template-columns: var(--admin-workspace-list-col-width) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  flex: 1;
  min-height: 0;
}

.products-card {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.products-list-card,
.products-detail-card {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.products-list-card::-webkit-scrollbar,
.products-detail-card::-webkit-scrollbar {
  display: none;
}

.products-detail-card--state {
  display: flex;
}

.products-workspace-detail-card:has(.order-create-columns) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Create product — section headers use success green instead of warning yellow */
.products-workspace-detail-card--create .products-workspace-collapsible-header {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-surface));
}

.products-workspace-detail-card--create .products-workspace-collapsible-header .products-workspace-section__title {
  color: var(--success);
}

.products-workspace-detail-card--create .products-workspace-section__title {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-surface));
  color: var(--success);
}

.products-card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.products-card-header h2 {
  margin: 0;
  font-size: var(--card-title-size);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.products-count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  background: var(--accent-glow);
  color: var(--accent);
  font-size: var(--text-2xs-plus);
  font-weight: var(--font-semibold);
}

.products-workspace-toolbar .products-count-badge {
  min-height: var(--admin-control-compact);
  padding: 0 var(--space-3);
}

.products-card-header--controls {
  padding: var(--space-3) var(--space-4);
}

.products-card-header--controls.admin-v2-workspace-toolbar {
  /* Same SSoT gutter as topbar/footer (`--admin-v2-app-gutter`). */
  padding: var(--admin-v2-space-2, var(--space-2)) var(--admin-v2-app-gutter, var(--space-4));
  border-bottom-color: color-mix(in srgb, var(--border) 55%, transparent);
}

.products-list-controls-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Standaard verticale ruimte na een workspace-form-grid (o.a. treasurer save). */
.products-list-controls-row--after-form-grid {
  margin-top: var(--space-4);
}

.products-card-header--controls .products-list-controls-row--with-inline-search {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}

.admin-v2-workspace-toolbar .products-filter-chips[data-workspace-pinned-filters="true"] {
  flex: 0 0 auto;
}

.admin-v2-workspace-toolbar .admin-v2-workspace-toolbar__select {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 10rem;
  max-width: 16rem;
}

.admin-v2-workspace-toolbar .admin-v2-workspace-toolbar__select .form-select {
  width: 100%;
  min-height: var(--admin-control-filter, 2.25rem);
}

/* Bulk/trailing chrome stays on the right when present. */
.admin-v2-workspace-toolbar .admin-v2-collection-context-trailing {
  margin-left: auto;
  flex: 0 0 auto;
}

.products-control-dropdown-btn {
  appearance: none;
  border: 1px solid var(--admin-border-strong);
  background: var(--admin-v2-color-surface);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  min-height: var(--admin-control-filter);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--control-font-md);
  font-weight: var(--font-medium);
  line-height: 1.35;
  cursor: pointer;
}

.products-control-dropdown-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.products-control-dropdown-btn.active {
  background: color-mix(in srgb, var(--admin-v2-color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 35%, transparent);
  color: var(--accent);
}

.products-control-dropdown-panel {
  border-bottom: 1px solid var(--admin-border-light);
  padding: var(--space-2) var(--space-4) var(--space-3);
}

.products-search-panel {
  padding-top: 0;
  width: 100%;
  min-width: 0;
}

/*
 * Admin search SSoT (TailAdmin Form Elements):
 * icon left inside the field, same height as buttons/inputs, soft border, white surface.
 */
.products-search-input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--admin-v2-space-2, var(--space-2));
  width: 100%;
  min-width: 0;
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem);
  border: 1.5px solid var(--admin-v2-border-default, var(--admin-border-medium, var(--border)));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, 8px));
  /* TailAdmin search = pure white (not --bg-surface var(--admin-v2-color-surface-muted)). */
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted, var(--text-secondary));
  box-sizing: border-box;
  box-shadow: none;
}

.products-search-input-wrapper:focus-within {
  border-color: var(--admin-v2-color-primary, var(--tenant-accent, var(--accent)));
  background: var(--admin-v2-color-surface);
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, var(--accent-glow));
}

.products-search-input-wrapper > svg,
.products-search-input-wrapper .lucide {
  flex-shrink: 0;
  width: var(--admin-v2-search-icon-size, 18px);
  height: var(--admin-v2-search-icon-size, 18px);
  color: var(--admin-v2-color-text-muted, var(--text-muted));
}

.products-search-input-wrapper input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  background-color: transparent;
  color: var(--admin-v2-color-text, var(--text-primary));
  font-size: var(--admin-v2-field-control-font-size, var(--admin-workspace-detail-font, var(--text-sm)));
  line-height: var(--admin-v2-field-control-line-height, 1.4);
  font-family: var(--admin-v2-font-family, var(--font-main, var(--font-sans)));
  font-weight: var(--admin-v2-font-weight-medium, var(--font-medium));
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.products-search-input-wrapper input::-webkit-search-decoration,
.products-search-input-wrapper input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.products-search-input-wrapper input::placeholder {
  /* Match topbar zone label (“Catalog” = <strong>): bold + primary text, not muted. */
  color: var(--admin-v2-color-text, var(--text-primary));
  font-weight: var(--admin-v2-font-weight-bold, var(--font-bold, 700));
  opacity: 1;
  -webkit-text-fill-color: var(--admin-v2-color-text, var(--text-primary));
}

/*
 * Collection Tools-strip search — MUST come after base .products-search-panel /
 * .products-search-input-wrapper (those set width:100% / flex:1).
 * Shrink-wrap to i18n placeholder; never grow into free toolbar space.
 */
.admin-v2-workspace-toolbar .products-search-panel--inline-header,
.products-list-controls-row--with-inline-search > .products-search-panel--inline-header {
  flex: 0 0 auto;
  flex-grow: 0;
  flex-shrink: 0;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  padding-top: 0;
}

.admin-v2-workspace-toolbar .products-search-panel--inline-header .products-search-input-wrapper,
.products-list-controls-row--with-inline-search
  > .products-search-panel--inline-header
  .products-search-input-wrapper {
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
}

.admin-v2-workspace-toolbar .products-search-panel--inline-header .products-search-input-wrapper input,
.products-list-controls-row--with-inline-search
  > .products-search-panel--inline-header
  .products-search-input-wrapper
  input {
  flex: 0 0 auto;
  flex-grow: 0;
  width: auto;
  min-width: 0;
  field-sizing: fixed;
}

.products-filter-body {
  padding: var(--space-1) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.products-filter-group-label {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  padding: var(--space-2) 0 var(--space-1);
}

.products-filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--control-font-md);
  color: var(--text-primary);
  cursor: pointer;
}

.products-filter-option input[type="checkbox"] {
  width: var(--admin-v2-checkbox-size, 20px);
  height: var(--admin-v2-checkbox-size, 20px);
  flex-shrink: 0;
  cursor: pointer;
}

.products-list-body,
.products-detail-form {
  min-height: 0;
}

.products-list-body {
  display: flex;
  flex-direction: column;
}

/* Bulk edit — inline paneel onder workspace-toolbar (volle breedte master-detail) */
.products-bulk-edit-panel {
  flex-shrink: 0;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.products-bulk-edit-panel__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .products-bulk-edit-panel__body {
    grid-template-columns: 1fr;
  }
}

.products-bulk-edit-panel__column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.products-bulk-edit-panel__column .products-workspace-form-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.products-bulk-edit-panel__column .products-editor-label {
  color: var(--admin-v2-color-text-soft);
}

.products-bulk-edit-panel__column .products-editor-hint {
  margin: 0;
  font-size: var(--admin-font-size-base);
  line-height: 1.4;
  color: var(--admin-v2-color-text-muted);
}

/* Zelfde form-chrome als products-detail-form (paneel staat buiten .products-detail-form) */
.products-bulk-edit-panel .form-input.products-workspace-field,
.products-bulk-edit-panel .form-select.products-workspace-field {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  box-shadow: none;
  min-height: var(--admin-control-field);
  padding: 0 18px !important;
}

.products-bulk-edit-panel .form-select.products-workspace-field {
  background-color: var(--admin-v2-color-text-inverse) !important;
  padding-right: calc(var(--control-padding-md) + var(--space-6)) !important;
  background-position: right var(--control-padding-md) center;
}

.products-bulk-edit-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.products-bulk-edit-panel__selection-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.products-bulk-edit-panel__selected-count {
  margin: 0;
  font-size: var(--admin-font-size-base);
  line-height: 1.4;
  color: var(--admin-v2-color-text-muted);
}

.products-bulk-edit-panel__select-all-matching {
  padding: 0;
  min-height: auto;
  font-size: var(--admin-font-size-base);
  line-height: 1.4;
}

.products-bulk-edit-panel__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
}

/*
 * Paginering onderaan de workspace-lijstkolom (lijstkolom 300px via --admin-workspace-list-col-width),
 * dus geen uitgestreken "space-between"-rij; stapel + horizontaal scrollen op knoppen.
 */
.products-list-card .pagination__inner {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.products-list-card .pagination__info {
  text-align: center;
  line-height: 1.35;
}

.products-list-card .pagination__controls {
  flex: none;
  justify-content: center;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-block: 2px;
  -webkit-overflow-scrolling: touch;
}

.products-list-card .pagination__btn,
.products-list-card .pagination__ellipsis {
  flex-shrink: 0;
}

.products-pane-state {
  min-height: 280px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  color: var(--text-secondary);
}

.products-pane-state h3,
.products-pane-state p {
  margin: 0;
}

.products-pane-state--error {
  color: var(--error);
}

.product-workspace-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--admin-list-row-padding-y) var(--admin-list-row-padding-x);
  border: 0;
  border-bottom: 1px solid var(--admin-border-subtle);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.homepage-sections-list .product-workspace-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* Homepage layout — block list title as first list row */
.homepage-layout-page .homepage-layout-block-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.homepage-layout-page .homepage-layout-block-list__title-item {
  list-style: none;
}

.homepage-layout-page .homepage-layout-block-list__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--admin-list-row-padding-y) var(--admin-list-row-padding-x);
  border-bottom: 1px solid var(--admin-border-subtle);
  font-size: var(--admin-products-list-font, var(--admin-font-size-base));
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

.homepage-layout-page .homepage-layout-block-list__empty .products-pane-state {
  padding: var(--space-6) var(--space-4);
}

/* Homepage layout — placement-only single-column block stack */
.homepage-layout-page .homepage-layout-stack-card {
  min-height: 0;
  overflow: auto;
}

.homepage-layout-page .homepage-layout-stack-card__body {
  padding: var(--space-4);
}

.homepage-layout-page .homepage-layout-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.homepage-layout-page .homepage-layout-stack__item {
  list-style: none;
}

.homepage-layout-page .homepage-layout-stack__add {
  margin-bottom: var(--space-4);
}

/* Product/category embedded block stack — compact placement cards */
.embedded-block-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.embedded-block-stack .homepage-layout-stack__item {
  list-style: none;
}

.embedded-block-stack .homepage-layout-card--compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: start;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--bg-deep);
  padding: var(--space-3);
}

.embedded-block-stack .homepage-layout-card__title--leading {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--admin-font-size-base);
  font-weight: 700;
  line-height: 1.3;
}

.embedded-block-stack .homepage-layout-card__art--compact {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  width: 7rem;
  aspect-ratio: 160 / 100;
  height: auto;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--bg-deep);
  color: var(--accent);
  overflow: hidden;
}

.homepage-layout-page .homepage-layout-card {
  display: grid;
  grid-template-columns: minmax(12rem, 17.5rem) auto auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--bg-deep);
  overflow: hidden;
}

.homepage-layout-page .homepage-layout-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 160 / 100;
  background: var(--bg-deep);
  color: var(--accent);
  overflow: hidden;
  border-radius: var(--admin-radius-sm);
}

.homepage-layout-page .homepage-layout-card__position-field,
.homepage-layout-page .homepage-layout-card__primary-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--admin-toolbar-gap);
  margin: 0;
}

.homepage-layout-page .homepage-layout-card__position-field {
  min-width: 4.5rem;
}

.homepage-layout-page .homepage-layout-card__position-select {
  width: 100%;
  min-width: 4.5rem;
}

.homepage-layout-page .homepage-layout-card__primary-actions .products-workspace-toolbar__action {
  width: 100%;
  white-space: nowrap;
}

.homepage-layout-page .homepage-layout-card__copy {
  min-width: 0;
  padding-right: var(--space-1);
}

.homepage-layout-page .homepage-layout-card__art .block-content-preview--library-card,
.embedded-block-stack .homepage-layout-card__art--compact .block-content-preview--library-card {
  border-radius: 0;
}

.embedded-block-stack .homepage-layout-card__actions {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  justify-self: end;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
}

.homepage-layout-page .homepage-layout-card__eyebrow {
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-medium);
}

.homepage-layout-page .homepage-layout-card__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--admin-font-size-base);
  font-weight: 700;
  line-height: 1.3;
}

.homepage-layout-page .homepage-layout-card__meta,
.homepage-layout-page .homepage-layout-card__hint {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.homepage-layout-page .homepage-layout-card__hint {
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .homepage-layout-page .homepage-layout-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .homepage-layout-page .homepage-layout-card__art {
    max-width: 17.5rem;
  }

  .homepage-layout-page .homepage-layout-card__art .block-content-preview--library-card {
    border-radius: var(--radius-sm);
  }

  .homepage-layout-page .homepage-layout-card__position-field,
  .homepage-layout-page .homepage-layout-card__primary-actions {
    flex-flow: row wrap;
    justify-content: flex-start;
  }

  .homepage-layout-page .homepage-layout-card__primary-actions .products-workspace-toolbar__action {
    width: auto;
  }
}

/* Content blocks — single-column library (modal edit; no master-detail) */
.content-blocks-page > .products-card.products-list-card {
  flex: 1;
  min-height: 0;
}

/* Content blocks — library grid browse (Fase 5.2) */
.content-blocks-page .block-library-shell {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.block-library-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.block-library-category-header__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
}

.block-library-category-header__title .block-illustration--category {
  flex-shrink: 0;
}

.block-library-category-header__view-all {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  padding: 0;
}

.block-library-category-header__view-all:hover {
  text-decoration: underline;
}

.block-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.block-library-grid__group {
  display: grid;
  grid-template-columns: repeat(var(--block-library-group-span, 1), minmax(0, 1fr));
  gap: var(--space-4);
  grid-column: span var(--block-library-group-span, 1);
  min-width: 0;
}

.block-library-shell > section:last-child .block-library-grid {
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .block-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .block-library-grid {
    grid-template-columns: 1fr;
  }

  .block-library-grid__group {
    grid-template-columns: 1fr;
    grid-column: span 1;
  }
}

.block-library-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-xl);
  background: var(--bg-deep);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: visible;
}

.block-library-card:hover {
  border-color: var(--admin-accent);
  box-shadow: var(--shadow-sm);
}

/* Block illustrations — inline SVG wireframes (Shopblokken) */
.block-illustration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  line-height: 0;
  flex-shrink: 0;
}

.block-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.block-illustration--category {
  width: 1.5rem;
  height: 1.5rem;
}

.block-illustration--category svg {
  width: 100%;
  height: 100%;
}

.block-illustration--loading {
  width: 4rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
}

.block-illustration--fallback {
  color: var(--text-muted);
}

.block-library-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 160 / 100;
  padding: 0;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--admin-border-light);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: var(--accent);
  overflow: hidden;
}

.block-library-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
}

.block-library-card__art-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--admin-v2-color-surface);
  overflow: hidden;
  /* Wireframe PAGE outline: hide top/bottom accent strokes after bleed scale */
  clip-path: inset(3px 0 3px 0);
}

/* Grid card art: wireframe fills edge-to-edge like preview photos (crop PAGE inset). */
.block-library-card__art .block-illustration--card,
.block-content-preview--library-card .block-illustration--card,
.homepage-layout-card__art .block-illustration--card {
  display: block;
  width: 100%;
  height: 100%;
}

.block-library-card__art .block-illustration--card svg,
.block-content-preview--library-card .block-illustration--card svg,
.homepage-layout-card__art .block-illustration--card svg {
  width: 100%;
  height: 100%;
  max-width: none;
  /* PAGE frame inset 4px in viewBox 160×100 — uniform bleed scales outer stroke off-canvas */
  transform: scale(1.087);
  transform-origin: center center;
}

.block-library-card__art .block-illustration--loading.block-illustration--card,
.homepage-layout-card__art .block-illustration--loading.block-illustration--card {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.block-library-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.block-library-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.block-library-card__title {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
  line-height: 1.3;
  min-width: 0;
}

.block-library-card__info {
  flex-shrink: 0;
  margin-top: 1px;
}

.block-library-card__footer {
  margin-top: var(--space-2);
  min-width: 0;
}

.block-library-card__actions {
  width: 100%;
}

.block-library-card__footer--default .block-library-card__actions {
  justify-content: flex-start;
}

.block-library-card__footer--copy .block-library-card__actions {
  justify-content: flex-end;
}

.block-library-instance-picker {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 4;
  padding: var(--space-2);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.block-library-instance-picker__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.block-library-instance-picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.block-library-instance-picker__option {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.block-library-instance-picker__option:hover {
  background: var(--bg-hover);
}

.block-library-instance-picker__option-meta {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-muted);
  margin-top: 0.125rem;
}

/* Content blocks — BlockEditModal (merchant-first editor) */
.modal.modal--block-edit,
.modal--block-edit .modal__header,
.modal--block-edit .modal__body,
.modal--block-edit .modal__footer {
  background: var(--admin-v2-color-surface);
}

/* Block edit shell dimensions: .modal--admin-workspace (SSoT in account-navigation.css) */

.modal--block-edit .modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal--block-edit .modal__header {
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.modal--block-edit .block-edit-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
  width: 100%;
}

.modal--block-edit .block-edit-modal__header-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

.modal--block-edit .block-edit-modal__header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}

.modal--block-edit .block-edit-modal__header-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.modal--block-edit .block-edit-modal__header-status--saved,
.modal--block-edit .block-edit-modal__header-status--idle {
  color: var(--admin-v2-state-success-text);
}

.modal--block-edit .block-edit-modal__header-status--saving {
  color: var(--text-secondary);
}

.modal--block-edit .block-edit-modal__header-status--error {
  color: var(--admin-v2-state-danger-text);
}

.modal--block-edit .block-edit-modal__preview-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.modal--block-edit .block-edit-modal__merchant-title {
  margin: 0;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
  line-height: 1.2;
}

.modal--block-edit .block-edit-modal__layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

@media (max-width: 900px) {
  .modal--block-edit .block-edit-modal__layout {
    grid-template-columns: 1fr;
  }
}

.modal--block-edit .block-edit-modal__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.modal--block-edit .block-edit-modal__sidebar-card {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-lg);
  background: var(--admin-v2-color-surface);
  padding: var(--space-4);
}

.modal--block-edit .block-edit-modal__sidebar-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
}

/* Block content preview — modal sidebar + library grid cards (SSoT). */
.block-content-preview {
  position: relative;
  overflow: hidden;
  background: var(--admin-v2-color-surface);
}

.block-content-preview--modal {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 10;
}

.block-content-preview--library-card {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.block-content-preview--library-card .block-content-preview__fallback {
  background: var(--admin-v2-color-surface);
  overflow: hidden;
  clip-path: inset(3px 0 3px 0);
}

.block-content-preview__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.block-content-preview__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--accent);
}

.block-content-preview__overlay {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-3);
  background: linear-gradient(transparent, color-mix(in srgb, var(--admin-v2-color-text) 72%, transparent));
  color: var(--admin-v2-color-text-inverse);
}

.block-content-preview__overlay-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold, 600);
}

.block-content-preview__overlay-subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs, 0.75rem);
  opacity: 0.9;
}

.block-content-preview__overlay-cta {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-medium);
}

.modal--block-edit .block-edit-modal__usage-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.modal--block-edit .block-edit-modal__usage-item {
  list-style: none;
}

.modal--block-edit .block-edit-modal__usage-item .block-edit-modal__usage-meta {
  margin: var(--space-1) 0 0;
}

.modal--block-edit .block-edit-modal__usage-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.modal--block-edit .block-edit-modal__usage-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.modal--block-edit .block-edit-modal__usage-meta {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-muted);
  line-height: 1.4;
}

.modal--block-edit .block-edit-modal__manage-placements {
  margin-top: var(--space-3);
}

.modal--block-edit .block-edit-modal__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.modal--block-edit .block-edit-modal__tabs {
  margin: 0;
  flex-shrink: 0;
}

.modal--block-edit .block-edit-modal__tab-panel {
  min-width: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.modal--block-edit .block-edit-modal__name-block {
  margin-bottom: var(--space-4);
}

.modal--block-edit .block-type-editor-dispatcher--panel-content [data-block-editor-panel="design"] {
  display: none;
}

.modal--block-edit .block-type-editor-dispatcher--panel-design [data-block-editor-panel="content"],
.modal--block-edit .block-type-editor-dispatcher--panel-design .block-edit-content-editor {
  display: none;
}

.modal--block-edit .block-edit-modal__illustration {
  flex-shrink: 0;
  width: 3.5rem;
  height: 2.25rem;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-md);
  background: var(--admin-v2-color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal--block-edit .block-edit-modal__illustration .block-illustration {
  width: 100%;
  height: 100%;
}

.modal--block-edit .block-edit-modal__header-copy {
  flex: 1;
  min-width: 0;
}

.modal--block-edit .block-edit-modal__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.modal--block-edit .block-edit-modal__name-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
}

.modal--block-edit .block-edit-modal__name-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  max-width: 100%;
}

.modal--block-edit .block-edit-modal__name-trigger:hover,
.modal--block-edit .block-edit-modal__name-trigger:focus-visible {
  color: var(--accent, var(--text-primary));
}

.modal--block-edit .block-edit-modal__name-edit {
  flex-shrink: 0;
  color: var(--text-muted);
}

.modal--block-edit .block-edit-modal__name-edit:hover,
.modal--block-edit .block-edit-modal__name-edit:focus-visible {
  color: var(--text-primary);
}

.modal--block-edit .block-edit-modal__description {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}

.modal--block-edit .block-edit-modal__section {
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.modal--block-edit .products-workspace-collapsible-header {
  background: var(--admin-v2-color-surface);
  color: var(--text-primary);
  border-bottom: 1px solid var(--admin-border-light);
}

.modal--block-edit .products-workspace-collapsible-header .products-workspace-section__title {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
}

.modal--block-edit .block-edit-modal__section > :not(.products-workspace-collapsible-header) {
  padding: var(--space-4);
}

.modal--block-edit .block-edit-modal__section .products-workspace-section {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.modal--block-edit .block-edit-modal__section .products-workspace-section:last-child {
  margin-bottom: 0;
}

.modal--block-edit .block-edit-modal__section .products-workspace-section__body {
  padding: 0;
}

.modal--block-edit .block-edit-modal__content .products-workspace-section {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.modal--block-edit .block-edit-modal__content .products-workspace-section:last-child {
  margin-bottom: 0;
}

.modal--block-edit .block-edit-modal__content .products-workspace-section__title {
  width: auto;
  min-height: 0;
  margin: 0 0 var(--space-3);
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
}

.modal--block-edit .block-edit-modal__content .products-workspace-section__body > .products-workspace-section .products-workspace-section__title {
  margin-left: 0;
  margin-right: 0;
}

/* Panel tile titles — same orange strip as orders/products workspace (not neutralized content headings). */
.modal--block-edit .block-edit-modal__typography-groups .block-edit-modal__typography-group > .products-workspace-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--admin-workspace-section-title-height);
  margin: 0;
  padding: 0 16px;
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-surface));
  font-size: var(--admin-font-size-label);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--warning);
}

/* Block edit Design tab — tile groups (same shell as Typography tab). */
.modal--block-edit .block-general-design-fields--products-grammar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.modal--block-edit .block-general-design-fields--products-grammar .products-workspace-typography-color-row {
  width: 100%;
  max-width: 100%;
}

.modal--block-edit .block-general-design-fields--products-grammar .products-workspace-typography-color-row .form-select.products-workspace-field {
  flex: 1 1 12rem;
  min-width: 0;
}

.modal--block-edit .block-general-design-fields--products-grammar .products-workspace-typography-color-row .products-workspace-field--color {
  flex: 0 0 auto;
  width: min(100%, 6rem);
  min-width: 5rem;
}

.modal--block-edit .block-general-design-fields--products-grammar .products-editor-field > select.form-select.products-workspace-field:not(.products-workspace-field--fill) {
  align-self: flex-start;
}

/* Spacing lives on Design; hide legacy spacing blocks only when still rendered on Content. */
.modal--block-edit .block-type-editor-dispatcher--panel-content .products-editor-field--full:has(.products-workspace-form-grid--spacing) {
  display: none;
}

.modal--block-edit .block-type-editor-dispatcher--panel-content .products-workspace-section:has(.products-workspace-form-grid--spacing):not(:has(.products-workspace-form-grid:not(.products-workspace-form-grid--spacing))) {
  display: none;
}

/* Block-edit Content tab — same gap as item nav buttons (--space-2) between nav, tiles, footer */
.modal--block-edit .block-edit-content-editor,
.modal--block-edit .category-banners-block-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.modal--block-edit .block-edit-content-editor__footer,
.modal--block-edit .category-banners-block-editor__footer {
  margin: 0;
  padding: 0;
  border: 0;
}

.modal--block-edit .block-edit-place__hint {
  margin: 0 0 var(--space-3);
}

.modal--block-edit .block-edit-place__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.modal--block-edit .block-edit-place__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.modal--block-edit .block-edit-place__button {
  flex-shrink: 0;
}

.modal--block-edit .block-edit-place__zone {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.modal--block-edit .block-edit-place__reason {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-muted);
  line-height: 1.4;
}

.modal--block-edit .block-edit-place__item--disabled .block-edit-place__zone,
.modal--block-edit .block-edit-place__item--disabled .block-edit-place__button {
  opacity: 0.55;
}

.modal--block-edit .block-edit-modal__footer {
  justify-content: space-between;
  flex-shrink: 0;
}

.modal--block-edit .block-edit-modal__footer-toolbar {
  width: 100%;
  justify-content: space-between;
}

/* Compact media upload inside block edit modal — must not resize modal shell */
.modal--block-edit .products-workspace-gallery-hero {
  min-height: 0;
  height: 9rem;
  max-height: 9rem;
}

.modal--block-edit .products-workspace-gallery-hero__image {
  width: 100%;
  height: 100%;
  max-height: 9rem;
  object-fit: cover;
}

.modal--block-edit .products-workspace-media-panel--gallery {
  gap: var(--space-2);
}

.modal--block-edit .products-workspace-media-panel--compact .products-workspace-gallery-item__image,
.modal--block-edit .products-workspace-media-panel--compact .products-workspace-gallery-empty {
  min-height: 9rem;
}

.modal--block-edit .products-workspace-gallery-empty {
  min-height: 6rem;
}

.modal--block-edit .products-workspace-section__title,
.modal--block-edit .products-workspace-collapsible-header {
  background: var(--admin-v2-color-surface);
}

.modal--block-edit .block-edit-modal__typography-groups .block-edit-modal__typography-group > .products-workspace-section__title {
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-surface));
  color: var(--warning);
}

.modal--block-edit .products-workspace-media-panel,
.modal--block-edit .products-workspace-media-panel__figure,
.modal--block-edit .products-workspace-media-panel__image-wrap,
.modal--block-edit .products-workspace-gallery-hero,
.modal--block-edit .products-workspace-gallery-item,
.modal--block-edit .products-detail-media-placeholder {
  background: var(--admin-v2-color-surface);
}

.modal--block-edit .products-workspace-field,
.modal--block-edit textarea.form-textarea.products-workspace-field,
.modal--block-edit .form-input.products-workspace-field,
.modal--block-edit .form-select.products-workspace-field,
.modal--block-edit .form-input,
.modal--block-edit .form-select,
.modal--block-edit .form-textarea {
  background-color: var(--admin-v2-color-text-inverse) !important;
}

.modal--block-edit .modal__close:hover {
  background: var(--admin-v2-color-surface);
}

/* Content blocks — group duplicate block types (member-notes thread pattern) */
.content-blocks-page .content-block-type-thread {
  display: flex;
  flex-direction: column;
}

.content-blocks-page .content-block-type-thread--grouped {
  border: 1px solid var(--info);
  border-radius: var(--admin-radius-sm);
  padding: var(--space-2);
  gap: 0;
  margin-bottom: var(--space-2);
}

.content-blocks-page .content-block-type-thread--grouped .product-workspace-row:last-child {
  border-bottom: 0;
}

.product-workspace-row:hover {
  background: var(--bg-elevated);
}

.product-workspace-row.selected {
  background: var(--admin-v2-color-primary-soft);
}

.product-workspace-row.active {
  background: var(--admin-v2-color-primary-soft);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}

.product-workspace-row__reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
  justify-content: center;
  flex-shrink: 0;
}

.products-detail-hero__visual,
.products-detail-hero__placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--admin-radius-card);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.products-detail-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-workspace-row__copy,
.products-detail-hero__copy {
  min-width: 0;
}

.product-workspace-row__title {
  font-size: var(--admin-products-list-font);
  font-weight: var(--font-semibold);
  line-height: 1.35;
  color: var(--text-primary);
}

.product-workspace-row__meta,
.product-workspace-row__submeta,
.products-detail-subtitle,
.products-detail-inline-note {
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  color: var(--text-secondary);
}

.product-workspace-row__submeta {
  color: var(--text-muted);
}

.product-workspace-row__right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  flex-shrink: 0;
}

.product-workspace-row__price {
  font-size: var(--admin-products-list-font);
  font-weight: var(--font-semibold);
  line-height: 1.35;
  color: var(--text-primary);
  white-space: nowrap;
}

.product-workspace-row__stock {
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  color: var(--text-muted);
  white-space: nowrap;
}

.product-workspace-row .products-status-pill {
  min-height: 22px;
  font-size: var(--admin-products-list-font);
  line-height: 1;
}

.products-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--admin-radius-pill);
  font-size: var(--text-2xs-plus);
  font-weight: var(--font-semibold);
}

.products-status-pill--active {
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 10%, transparent);
  color: var(--admin-v2-state-success-text);
}

.products-status-pill--draft {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 12%, transparent);
  color: var(--admin-v2-state-warning-text);
}

.products-status-pill--low-stock {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 12%, transparent);
  color: var(--admin-v2-state-warning-text);
}

.products-status-pill--archived {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 10%, transparent);
  color: var(--admin-v2-state-danger-text);
}

.products-status-pill--warning {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 12%, transparent);
  color: var(--admin-v2-state-warning-text);
}

.products-workspace-status--active {
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 12%, transparent);
  color: var(--admin-v2-state-success-text);
}

.products-workspace-status--draft,
.products-workspace-status--low-stock {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 12%, transparent);
  color: var(--admin-v2-state-warning-text);
}

.products-workspace-status--archived {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 10%, transparent);
  color: var(--admin-v2-state-danger-text);
}

.products-workspace-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--admin-border-light);
}

.products-import-hero {
  justify-content: space-between;
}

.products-workspace-hero__left {
  display: flex;
  align-items: center;
  gap: var(--admin-toolbar-gap);
  min-width: 0;
}

.products-workspace-hero__copy {
  min-width: 0;
}

.products-workspace-hero__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.products-workspace-hero__title {
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.35;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.products-workspace-hero__meta {
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.35;
  color: var(--text-secondary);
}

.products-workspace-section {
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--admin-border-light);
}

.products-workspace-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: calc(100% + 32px);
  min-height: var(--admin-workspace-section-title-height);
  margin: -14px -16px var(--admin-workspace-section-content-gap);
  padding: 0 16px;
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-surface));
  font-size: var(--admin-font-size-label);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--warning);
}

.products-workspace-section__title .products-workspace-section__settings-link {
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-1);
  color: inherit;
}

.products-workspace-section__title .products-workspace-section__settings-link:hover,
.products-workspace-section__title .products-workspace-section__settings-link:focus-visible {
  color: var(--text-primary);
}

.products-workspace-section--collapsible .products-workspace-section__title {
  margin-bottom: 0;
}

.products-workspace-section--collapsible {
  padding: 0;
}

.products-workspace-collapsible-header {
  width: 100%;
  border: 0;
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-surface));
  min-height: var(--admin-workspace-section-title-height);
  padding: 0 16px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  cursor: default;
  box-sizing: border-box;
}

.products-workspace-collapsible-header__summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--admin-font-size-label);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--warning);
}

/*
 * Sommige pagina's gebruiken .products-workspace-section__title binnen een
 * collapsible header. Die titelklasse is full-bleed met negatieve margins.
 * In een button-header veroorzaakt dat optische "footer" balken en een
 * onzuivere hit/selection area. Daarom hier expliciet normaliseren.
 */
.products-workspace-collapsible-header .products-workspace-section__title {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  line-height: 1;
}

.products-workspace-collapsible-header svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.products-workspace-section--collapsible > :not(.products-workspace-collapsible-header) {
  padding: var(--admin-workspace-section-content-gap) 16px 16px;
}

.products-workspace-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-toolbar-gap) 18px;
}

.products-workspace-summary-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.products-workspace-summary-field span {
  font-size: var(--admin-font-size-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--admin-v2-color-text-soft);
}

.products-workspace-summary-field strong {
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.45;
  font-weight: 600;
  color: var(--text-primary);
}

.products-import-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.products-import-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 12px;
}

.products-import-section-header .products-workspace-section__title {
  margin-bottom: 0;
}

.products-import-upload-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}

.products-import-file-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.products-import-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.products-import-upload-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.products-import-upload-title {
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.4;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.products-import-preview-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.products-import-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--admin-list-row-padding-y) var(--admin-list-row-padding-x);
  border-bottom: 1px solid var(--admin-border-subtle);
  background: var(--bg-elevated);
}

.products-import-preview-row:last-child {
  border-bottom: 0;
}

.products-import-preview-row__copy,
.products-import-preview-row__values {
  min-width: 0;
}

.products-import-preview-row__values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.products-import-preview-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.products-import-preview-row__remove-button {
  width: var(--admin-control-compact);
  min-width: var(--admin-control-compact);
  padding: 0;
}

.products-import-preview-row__remove-button svg {
  width: 14px;
  height: 14px;
}

.products-import-preview-row__title,
.products-import-preview-row__price {
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.products-import-preview-row__meta,
.products-import-preview-row__stock {
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  color: var(--text-secondary);
}

.products-import-feedback {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--admin-border-light);
  background: var(--bg-elevated);
}

.products-import-feedback--success {
  border-color: color-mix(in srgb, var(--admin-v2-state-success-text) 20%, transparent);
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 8%, transparent);
}

.products-import-feedback--warning {
  margin-top: 12px;
  border-color: color-mix(in srgb, var(--admin-v2-state-warning-text) 20%, transparent);
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 8%, transparent);
}

.products-import-feedback--error {
  border-color: color-mix(in srgb, var(--admin-v2-state-danger-text) 20%, transparent);
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 8%, transparent);
}

.products-import-feedback__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.4;
  color: var(--text-primary);
}

.products-import-feedback__header svg {
  flex-shrink: 0;
}

.products-import-error-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.45;
  color: var(--text-primary);
}

.products-import-empty-state-card {
  margin: 0 16px 16px;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Import empty state: compact vertical rhythm (≈50% less space above/below copy). */
.products-import-empty-state-card .products-pane-state {
  min-height: 140px;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
}

.products-workspace-form-block {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap);
}

/*
 * SSoT: gestapelde velden onder een workspace-sectietitel (Roles, Staff, …).
 * Zelfde verticale ritme als .products-workspace-form-block — voorkomt dat
 * het label van het volgende veld visueel tegen het control erboven plakt.
 */
.products-workspace-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap);
  min-width: 0;
}

.products-workspace-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-toolbar-gap);
}

.products-workspace-stock-tracking-status {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-3);
}

.products-workspace-stock-tracking-status > p {
  margin: 0;
}

.products-workspace-section__body > a.products-workspace-toolbar__action,
.products-workspace-section__body > button.products-workspace-toolbar__action {
  align-self: flex-start;
}

/*
 * Nested workspace subsections (e.g. homepage hero CTAs inside Details).
 * Top-level section titles use margin-top: -14px to sit flush with section
 * padding; inside a flex __body that negative margin bleeds upward and
 * overlaps the previous control (e.g. Secondary CTA over Primary checkbox).
 */
.products-workspace-section__body > .products-workspace-section {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  padding: 0 16px;
  border-bottom: 0;
}

.products-workspace-section__body > .products-workspace-section .products-workspace-section__title {
  margin-top: 0;
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: var(--admin-workspace-section-content-gap);
}

.products-workspace-field--range {
  height: auto;
  min-height: var(--admin-control-field);
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/*
 * Workspace inline controls — content-sized (SSoT)
 * Visueel: forms/_workspace-field.css (.products-workspace-field).
 * Hier alleen layout-gedrag: breedte volgt inhoud tenzij --fill.
 * Excludes: textarea, rich editor, list search, color/range, explicit --fill rows.
 */
input.form-input.products-workspace-field:not(.products-workspace-field--fill):not(.products-workspace-field--range):not(.products-workspace-field--color):not(.products-workspace-search-field__input),
select.form-select.products-workspace-field:not(.products-workspace-field--fill) {
  field-sizing: content;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.products-editor-field > input.form-input.products-workspace-field:not(.products-workspace-field--fill):not(.products-workspace-field--range):not(.products-workspace-field--color):not(.products-workspace-search-field__input),
.products-editor-field > select.form-select.products-workspace-field:not(.products-workspace-field--fill),
.products-editor-field > .date-time-input:not(.date-time-input--fill),
.block-edit-modal__name-group > input.form-input.products-workspace-field,
.products-workspace-form-block > input.form-input.products-workspace-field:not(.products-workspace-field--fill):not(.products-workspace-search-field__input),
.products-workspace-form-block > select.form-select.products-workspace-field:not(.products-workspace-field--fill),
.products-workspace-form-block > .date-time-input:not(.date-time-input--fill) {
  align-self: flex-start;
}

.products-workspace-field--fill,
.products-workspace-chip-field-rows > input.form-input.products-workspace-field,
.products-bulk-edit-panel input.form-input.products-workspace-field,
.products-bulk-edit-panel select.form-select.products-workspace-field {
  field-sizing: fixed;
  width: 100%;
}

textarea.form-textarea.products-workspace-field,
.products-workspace-description {
  field-sizing: fixed;
  width: 100%;
}

/* Date + time row — intrinsic pair; each segment content-sized via field-sizing above */
.date-time-input:not(.products-workspace-toolbar__datetime):not(.date-time-input--fill) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: 100%;
}

.date-time-input:not(.products-workspace-toolbar__datetime):not(.date-time-input--fill) .form-input.products-workspace-field {
  border: 1px solid var(--admin-border-strong, var(--border));
}

/* Optional: stretch date+time row to parent width (explicit opt-in only) */
.date-time-input.date-time-input--fill {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(5.75rem, 7rem);
  gap: var(--admin-v2-space-3, var(--space-3));
  align-items: stretch;
}

.date-time-input.date-time-input--fill .form-input.products-workspace-field {
  width: 100%;
  min-width: 0;
  field-sizing: fixed;
}

.admin-v2-soft-panel .date-time-input.date-time-input--fill .form-input.products-workspace-field {
  background: var(--admin-v2-color-surface);
  border: 1px solid var(--admin-v2-border-default, var(--admin-border-light));
  border-radius: var(--admin-v2-field-control-radius, var(--admin-radius-md, 8px));
}

.admin-v2-soft-panel .products-workspace-form-block {
  display: grid;
  gap: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
  min-width: 0;
}

/*
 * Compatibility aliases ONLY — do not extend swatch sizing here.
 * Semantic ownership: v2/editor-workspace/workspace-shell.css (+ entity-sheet.css).
 */
.editor-color-field__input,
input[type='color'].products-workspace-field--color {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--admin-control-field);
  padding: 0 !important;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent !important;
  border: 1px solid var(--admin-border-light) !important;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.editor-color-field__input::-webkit-color-swatch-wrapper,
input[type='color'].products-workspace-field--color::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
  border: none;
  width: 100%;
  height: 100%;
}

.editor-color-field__input::-webkit-color-swatch,
input[type='color'].products-workspace-field--color::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--admin-radius-md) - 1px);
  width: 100%;
  height: 100%;
}

.editor-color-field__input::-moz-color-swatch,
input[type='color'].products-workspace-field--color::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--admin-radius-md) - 1px);
  width: 100%;
  height: 100%;
}

/*
 * Textarea + .products-workspace-field: base .form-textarea heeft geen border
 * (alleen min-height/padding/resize); inputs gebruiken .form-input. Zonder
 * deze regel valt de browser-default (dikke rand) op naast compacte inputs.
 * Border/focus volgen dezelfde tokens als .form-input in _base.css.
 */
textarea.form-textarea.products-workspace-field {
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--admin-control-field) * 3.25) !important;
  height: auto !important;
  resize: vertical;
  padding: 8px 12px !important;
  border: 1px solid var(--border-light);
  border-radius: var(--admin-radius-md) !important;
  background-color: var(--bg-surface) !important;
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--admin-workspace-detail-font) !important;
  line-height: 1.45;
  color: var(--text-primary);
  box-shadow: none;
  outline: none;
}

textarea.form-textarea.products-workspace-field:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}

textarea.form-textarea.products-workspace-field:focus {
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-glow);
}

textarea.form-textarea.products-workspace-field:disabled {
  background-color: var(
    --admin-v2-input-bg-disabled,
    var(--admin-v2-color-surface-muted)
  );
  color: var(--admin-v2-color-text, var(--text-primary));
  opacity: 1;
  cursor: not-allowed;
  resize: none;
}

textarea.form-textarea.products-workspace-field.form-input--error {
  border-color: var(--error);
}

textarea.form-textarea.products-workspace-field.form-input--error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-dim);
}

.products-workspace-slug-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.products-workspace-slug-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--admin-control-field);
  height: var(--admin-control-field);
  padding: 0 8px 0 12px;
  border: 1px solid var(--admin-border-strong);
  border-right: 0;
  border-radius: var(--admin-radius-md) 0 0 var(--admin-radius-md);
  background: var(--bg-muted);
  font-size: var(--admin-workspace-detail-font);
  color: var(--text-secondary);
  -webkit-user-select: none;
  user-select: none;
}

.products-workspace-slug-group .form-input.products-workspace-field {
  border-radius: 0 var(--admin-radius-md) var(--admin-radius-md) 0 !important;
}

.products-editor-char-count {
  font-size: var(--admin-font-size-base);
  color: var(--text-muted);
  text-align: right;
  margin-top: calc(var(--space-1) * -1);
}

.products-workspace-form-block .products-editor-label {
  color: var(--text-primary);
}

.products-workspace-form-block .products-editor-hint {
  font-size: var(--admin-font-size-base);
  color: var(--admin-v2-color-text-muted);
}

/* TipTap compact skin: see v2/editor-workspace/rich-text.css (SSoT). Deprecated alias .products-description-editor remains there. */

.products-detail-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--admin-border-light);
}

.products-detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.products-detail-title-row h2 {
  margin: 0;
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.35;
}

.products-detail-actions {
  margin-left: auto;
}

.products-detail-form {
  display: flex;
  flex-direction: column;
}

.products-detail-form .form-input:not(.products-workspace-search-field__input),
.products-detail-form .form-select,
.products-detail-form .form-textarea {
  width: 100%;
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  box-shadow: none;
}

.products-detail-form .form-input.products-workspace-field:not(.products-workspace-field--fill):not(.products-workspace-search-field__input),
.products-detail-form .form-select.products-workspace-field:not(.products-workspace-field--fill) {
  width: auto;
  field-sizing: content;
}

.products-detail-form .form-select,
.products-detail-form .form-select.products-workspace-field {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--admin-v2-color-text-inverse) !important;
  background-image: var(--admin-v2-select-chevron-muted) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--control-padding-md, 12px) center !important;
  background-size: 16px 16px !important;
  border-color: color-mix(in srgb, var(--admin-v2-color-brand-gold) 35%, transparent) !important;
  cursor: pointer;
}

.products-detail-form .form-input:not(.products-workspace-search-field__input),
.products-detail-form .form-select {
  min-height: 56px;
  padding: 0 18px;
}

.products-detail-form .form-select.products-workspace-field,
.products-detail-form .form-select {
  padding-right: calc(var(--control-padding-md) + var(--space-6)) !important;
  background-position: right var(--control-padding-md) center !important;
}

.products-detail-form .form-textarea {
  padding: 16px 18px;
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.5;
}

/*
 * Workspace detail search — same TailAdmin chrome as .products-search-input-wrapper.
 */
.products-workspace-search-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--admin-v2-space-2, var(--space-2));
  width: 100%;
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem);
  border: 1.5px solid var(--admin-v2-border-default, var(--admin-border-medium, var(--border)));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, 8px));
  /* TailAdmin search = pure white (not --bg-surface var(--admin-v2-color-surface-muted)). */
  background-color: var(--admin-v2-color-text-inverse);
  box-sizing: border-box;
  box-shadow: none;
}

.products-workspace-search-field:focus-within {
  border-color: var(--admin-v2-color-primary, var(--tenant-accent, var(--accent)));
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, var(--accent-glow));
  outline: none;
}

.products-workspace-search-field__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--admin-v2-color-text-muted, var(--text-muted));
}

.products-workspace-search-field__icon svg,
.products-workspace-search-field__icon .lucide {
  width: var(--admin-v2-search-icon-size, 18px);
  height: var(--admin-v2-search-icon-size, 18px);
}

.products-workspace-search-field__input.form-input.products-workspace-field {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  font-size: var(--admin-v2-field-control-font-size, var(--admin-workspace-detail-font, var(--text-sm))) !important;
  -webkit-appearance: none;
  appearance: none;
}

.products-workspace-search-field__input.form-input.products-workspace-field::-webkit-search-decoration,
.products-workspace-search-field__input.form-input.products-workspace-field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/*
 * Staff workspace (o.a.): opeenvolgende POS / check-in blokken onder één sectie-body.
 */
.products-workspace-access-subsection + .products-workspace-access-subsection {
  margin-top: var(--space-6);
}

.products-workspace-access-subsection > .products-workspace-section__title {
  margin: 0 0 var(--space-4);
}

/*
 * Direct child of collapsible body uses horizontal padding (see
 * .products-workspace-section--collapsible > :not(.products-workspace-collapsible-header)).
 * Bleed subsection title bar edge-to-edge like .products-workspace-collapsible-header;
 * keep text inset 16px to match that header.
 */
.products-workspace-section--collapsible > .products-workspace-access-subsection > .products-workspace-section__title {
  width: calc(100% + 32px);
  max-width: none;
  margin-left: -16px;
  margin-right: -16px;
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.products-workspace-checkbox-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: stretch;
  width: 100%;
}

.products-detail-card .coupons-workspace-hero__title,
.products-detail-card .coupons-workspace-code,
.products-detail-card .coupons-workspace-description {
  font-size: var(--admin-workspace-detail-font) !important;
}

.products-detail-card .coupons-workspace-description {
  line-height: 1.5;
}

.products-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.products-editor-grid--pricing {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.products-editor-grid--inventory {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Inventory panel: subsections inside pricing/stock — no duplicate yellow section bars */
.products-workspace-inventory-panel {
  display: grid;
  gap: var(--space-4);
}

.products-workspace-inventory-settings {
  margin-top: var(--space-2);
}

.products-workspace-inventory-subsection {
  display: grid;
  gap: var(--space-3);
}

.products-workspace-inventory-movement-date {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-1, 4px);
  white-space: nowrap;
}

.products-workspace-inventory-movements-table-wrap {
  overflow-x: hidden;
  max-width: 100%;
}

/* Beat .variant-table { min-width: 480px } — SoftPanel is narrower than that. */
.variant-table.products-workspace-inventory-movements-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.products-workspace-inventory-movements-table th,
.products-workspace-inventory-movements-table td {
  padding-inline: var(--admin-v2-space-2, 8px);
  vertical-align: middle;
  white-space: nowrap;
}

.products-workspace-inventory-movements-table th:nth-child(1),
.products-workspace-inventory-movements-table td:nth-child(1) {
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-workspace-inventory-movements-table__qty {
  width: 3.5rem;
}

.products-workspace-inventory-movements-table__reason {
  width: 5.5rem;
  text-align: center;
}

.products-workspace-inventory-movements-table th:nth-child(4),
.products-workspace-inventory-movements-table td:nth-child(4) {
  width: 7.75rem;
}

.products-workspace-inventory-movements-table .editor-label-info,
.products-workspace-inventory-movements-table .products-editor-label-info {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.products-workspace-inventory-movements-table .editor-label-info svg,
.products-workspace-inventory-movements-table .products-editor-label-info svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.products-workspace-inventory-subsection + .products-workspace-inventory-subsection {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--admin-border-light);
}

.products-workspace-inventory-subsection__title {
  margin: 0;
  font-size: var(--admin-font-size-label);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.products-workspace-inventory-collapsible__trigger {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--admin-font-size-label);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-transform: uppercase;
  text-align: left;
}

.products-workspace-inventory-collapsible__trigger:hover,
.products-workspace-inventory-collapsible__trigger:focus-visible {
  color: var(--text-primary);
}

.products-workspace-inventory-collapsible__body {
  padding-top: var(--space-2);
}

.products-editor-label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.products-editor-label-row .products-editor-label {
  margin: 0;
}

/* Compatibility aliases for the shared Editor V2 tooltip/info-label primitive.
 * Semantic ownership now lives in v2/editor-workspace/workspace-shell.css.
 */
.products-editor-label.products-editor-label--with-info,
.editor-form-label.editor-form-label--with-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
}

.products-editor-label--with-info .products-editor-label__text,
.editor-form-label--with-info .editor-form-label__text {
  min-width: 0;
}

.products-editor-label-info,
.editor-label-info {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--pg-editor-color-text-muted, var(--admin-v2-color-text-muted, var(--admin-v2-color-text-muted)));
  cursor: help;
  line-height: 0;
}

/* Legacy CSS pseudo-tooltip (non-portaled hints only). Prefer EditorHintIcon (--portaled). */
.products-editor-label-info:not(.products-editor-label-info--portaled)::before,
.editor-label-info:not(.editor-label-info--portaled)::before {
  content: attr(data-hint);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  transform: none;
  width: max-content;
  max-width: min(240px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: var(--admin-radius-md, 8px);
  background: var(--admin-v2-color-text);
  color: var(--admin-v2-color-text-inverse);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 8px 20px var(--admin-v2-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: var(--z-tooltip, 70);
}

.products-editor-label-info:not(.products-editor-label-info--portaled):hover::before,
.products-editor-label-info:not(.products-editor-label-info--portaled):focus-visible::before,
.editor-label-info:not(.editor-label-info--portaled):hover::before,
.editor-label-info:not(.editor-label-info--portaled):focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.products-editor-label-info--portaled::before,
.editor-label-info--portaled::before {
  content: none;
  display: none;
}

.editor-hint-tooltip,
.editor-tooltip {
  position: fixed;
  /* Same stacking as editor-select__menu / workspace-shell editor-tooltip. */
  z-index: var(--website-editor-z-menu, calc(var(--z-modal, 260) + 1));
  width: max-content;
  max-width: min(240px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: var(--admin-radius-md, 8px);
  background: var(--pg-editor-color-text, var(--admin-v2-color-text));
  color: var(--pg-editor-color-surface);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 8px 20px var(--admin-v2-backdrop);
  pointer-events: none;
}

.editor-hint-tooltip--measuring,
.editor-tooltip--measuring {
  visibility: hidden;
}

.products-editor-label-info:hover,
.products-editor-label-info:focus-visible,
.editor-label-info:hover,
.editor-label-info:focus-visible {
  color: var(--text-secondary, var(--pg-editor-color-text-muted));
  outline: none;
}

.products-editor-label-info--information,
.editor-label-info--information {
  color: var(--warning);
}

.products-editor-label-info--information:hover,
.products-editor-label-info--information:focus-visible,
.editor-label-info--information:hover,
.editor-label-info--information:focus-visible {
  color: var(--warning-light, var(--warning));
  outline: none;
}

/**
 * Product specificaties: lijst onder workspace-specifications-paneel;
 * sectiekop + witte kaart + pill-knoppen zijn gedeeld met Media (SSoT).
 */
.products-spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.products-spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
  column-gap: var(--space-3);
  row-gap: var(--space-3);
  align-items: end;
}

.products-spec-row__remove.products-workspace-toolbar__action {
  min-width: var(--admin-control-compact);
  padding-left: 10px;
  padding-right: 10px;
}

@media (max-width: 720px) {
  .products-spec-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    row-gap: var(--space-5);
    column-gap: 0;
  }

  .products-spec-row__remove.products-workspace-toolbar__action {
    justify-self: start;
    margin-top: var(--space-1);
  }
}

/*
 * TailAdmin form rhythm (SSoT):
 * - label sits tight on its control (--admin-v2-label-gap)
 * - space above the next label is larger (--admin-form-field-gap on the stack)
 * Do not put the stack gap on .products-editor-field itself — that makes
 * label→control and input→next-label grow together and look equidistant.
 */
.products-editor-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  row-gap: 0;
  min-width: 0;
}

.products-editor-field > .products-editor-label,
.products-editor-field > label.products-editor-label,
.products-editor-field > .products-editor-label--with-info {
  margin: 0;
  margin-bottom: var(--admin-v2-label-gap, 6px);
}

.products-editor-field--full {
  grid-column: 1 / -1;
}

.products-editor-categories {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-1);
}

.products-workspace-category-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.products-workspace-category-panel__intro {
  margin-bottom: 0;
}

.products-workspace-category-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.products-workspace-category-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.products-workspace-category-scroll {
  max-height: 12.5rem;
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.products-workspace-category-scroll .products-editor-categories {
  margin-top: 0;
}

.products-workspace-primary-category-single {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--admin-workspace-detail-font);
}

.products-workspace-primary-category-single strong {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.products-editor-category-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--admin-control-field, 36px) / 2);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.products-editor-category-row .form-checkbox-label {
  flex: 1;
  min-width: 0;
  font-size: var(--admin-workspace-detail-font, var(--text-sm));
  line-height: 1.4;
}

.products-editor-label {
  font-size: var(--admin-field-label-font-size, var(--admin-font-size-label, calc(var(--admin-font-size-base, 14px) + 2px)));
  font-weight: var(--admin-field-label-font-weight, var(--admin-v2-font-weight-semibold, var(--font-semibold)));
  color: var(--text-primary);
  letter-spacing: 0;
}

/*
 * Readout values under a field subtitle: lighter + smaller than the label.
 * Markup often uses <strong>; neutralize browser bold so hierarchy is label-first.
 */
.products-editor-field > strong {
  font-size: var(--admin-font-size-base, 14px);
  font-weight: var(--admin-v2-font-weight-normal, var(--font-normal, 400));
  color: var(--text-primary);
  line-height: 1.35;
}

.products-editor-label--required {
  color: var(--error);
}

.products-editor-hint {
  margin: 0;
  font-size: var(--admin-font-size-base);
  line-height: 1.45;
  color: var(--text-secondary);
}

/*
 * SSOT: sectie-intro's in workspace detailpanelen.
 * Als een info-zin direct onder een sectietitel staat, krijgt die overal
 * dezelfde afstand naar de eerstvolgende controls/content.
 */
.products-workspace-section__title + .products-editor-hint {
  margin-bottom: var(--space-4);
}

/* PDP Koopzone — compact block order (products workspace settings) */
.products-purchase-order-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-card);
  overflow: hidden;
  background: var(--bg-surface);
}

.products-purchase-order-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--admin-control-field);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--admin-border-light);
  background: var(--bg-surface);
  transition: background-color var(--transition-fast);
}

.products-purchase-order-row:last-child {
  border-bottom: none;
}

.products-purchase-order-row:hover {
  background: color-mix(in srgb, var(--bg-hover) 65%, var(--bg-surface));
}

.products-purchase-order-row__index {
  flex-shrink: 0;
  width: 1.25rem;
  font-size: var(--admin-font-size-label);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-muted);
  text-align: center;
}

.products-purchase-order-row__icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.products-purchase-order-row__label {
  flex: 1;
  min-width: 0;
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-medium);
  line-height: 1.35;
  color: var(--text-primary);
}

.products-purchase-order-row__actions {
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-control);
  background: var(--bg-elevated);
}

.products-purchase-order-row__actions .btn {
  min-width: var(--control-height-sm);
  height: var(--control-height-sm);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-secondary);
}

.products-purchase-order-row__actions .btn + .btn {
  border-left: 1px solid var(--admin-border-light);
}

.products-purchase-order-row__actions .btn:not(:disabled):hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.products-purchase-order-row__actions .btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.products-workspace-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
  column-gap: var(--space-4);
}

/*
 * Padding inset (top/right/bottom/left) — compact 2×2 cluster (box-model).
 * Generic form-grid uses equal 1fr columns; spacing fields must hug content.
 */
.products-workspace-form-grid--spacing {
  grid-template-columns: repeat(2, max-content);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  width: max-content;
  max-width: 100%;
}

.products-workspace-form-grid--spacing > .products-editor-field {
  gap: var(--space-1);
}

.products-workspace-form-grid--spacing .form-input.products-workspace-field {
  width: 5rem;
  min-width: 4.5rem;
  field-sizing: fixed;
}

.products-workspace-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

.products-workspace-controls-row > .products-editor-field {
  align-self: flex-end;
}

.products-workspace-controls-row .form-switch {
  min-height: var(--admin-control-field);
}

/* Label/hint left, toggle hard-right (Staff Admin access, similar rows). */
.products-workspace-controls-row:has(.menu-settings__toggle) {
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.products-workspace-controls-row:has(.menu-settings__toggle) > .products-workspace-summary-field {
  flex: 1 1 auto;
  min-width: 0;
}

.products-workspace-controls-row:has(.menu-settings__toggle) > .menu-settings__toggle {
  margin-left: auto;
}

/*
 * Workspace form: fields left (content-sized), explanatory hint right.
 * Used in block-edit scheduling and similar compact field + copy layouts.
 */
.products-workspace-fields-hint-columns {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.products-workspace-fields-hint-columns__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.products-workspace-fields-hint-columns__copy {
  display: flex;
  flex-direction: column;
  gap: var(--products-editor-label-gap, max(0px, calc(var(--space-2) - 5px)));
  min-width: 0;
}

.products-workspace-fields-hint-columns__copy .products-workspace-section__title {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
  letter-spacing: normal;
}

.products-workspace-fields-hint-columns__hint {
  margin: 0;
  line-height: var(--leading-relaxed, 1.5);
}

@media (max-width: 720px) {
  .products-workspace-fields-hint-columns {
    grid-template-columns: 1fr;
  }
}

/* Header/footer typography subcards (HeaderFooterPage — buiten .products-detail-form) */
.products-workspace-subsection-card {
  min-width: 0;
  border: 1px solid var(--admin-border-light, var(--border));
  border-radius: var(--admin-radius-md);
  background: var(--admin-v2-color-surface);
  overflow: hidden;
}

.products-workspace-subsection-card__title {
  padding: var(--space-2) var(--space-3);
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  background: var(--admin-v2-color-surface);
  border-bottom: 1px solid var(--admin-border-light, var(--border));
}

.products-workspace-subsection-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--admin-v2-color-surface);
}

.products-workspace-typography-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.products-workspace-typography-field .products-editor-label {
  margin: 0;
}

.products-workspace-subsection-card .form-select.products-workspace-field,
.products-workspace-subsection-card .form-input.products-workspace-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--admin-border-strong, var(--border));
  border-radius: var(--admin-radius-md);
  background-color: var(--bg-surface) !important;
  box-shadow: none;
}

.products-workspace-subsection-card .form-select.products-workspace-field--font-family {
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--control-padding-md, 12px) + var(--space-6, 1.5rem)) !important;
  background-repeat: no-repeat;
  background-position: right var(--control-padding-md, 12px) center;
  cursor: pointer;
}

.products-workspace-subsection-card .form-input.products-workspace-field--font-size {
  width: 5.5rem;
  max-width: 100%;
}

.editor-color-row,
.products-workspace-typography-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.editor-color-row .editor-color-field,
.products-workspace-typography-color-row .editor-color-field,
.products-workspace-typography-color-row .products-workspace-field--color {
  flex: 0 1 auto;
  width: min(100%, 10rem);
  min-width: 6rem;
}

.products-workspace-typography-field-hint {
  margin: 0;
}

.products-workspace-form-grid--menu-typography {
  gap: var(--space-3);
}

@media (max-width: 960px) {
  .products-workspace-form-grid--menu-typography {
    grid-template-columns: 1fr;
  }
}

.products-workspace-config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.products-workspace-config-grid .form-select.products-workspace-field {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.products-subscription-panel {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.products-subscription-panel__title {
  font-size: var(--admin-workspace-detail-font);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--admin-v2-color-primary);
}

.products-workspace-controls-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.products-workspace-controls-grid--publish-meta {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.products-category-visibility-controls {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap);
  margin-bottom: var(--space-4);
}

.products-category-visibility-mode-control {
  max-inline-size: calc(var(--admin-control-field) * 10);
}

.products-category-visibility-mode-select {
  width: 100%;
}

.products-category-visibility-search-control {
  margin-bottom: 0;
}

.products-category-visibility-list {
  max-height: calc(var(--admin-control-field) * 9);
  overflow-y: auto;
  border: 1px solid var(--admin-border-medium);
  border-radius: var(--admin-radius-card);
  background: var(--bg-surface);
  padding: var(--admin-card-padding-y) var(--admin-card-padding-x);
  margin-bottom: var(--space-4);
}

.products-category-visibility-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--admin-control-field) * 5), max-content));
  gap: var(--space-3);
  justify-content: start;
}

.products-category-visibility-empty {
  margin-top: 0;
}

.products-workspace-form-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.products-workspace-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--space-4);
}

.products-workspace-checkbox-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--admin-control-field, 36px) / 2);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.products-workspace-checkbox-chip .form-checkbox-label {
  flex: 1;
  min-width: 0;
  font-size: var(--admin-workspace-detail-font, var(--form-control-checkbox-label-font-size));
  font-weight: var(--form-control-checkbox-label-font-weight);
  line-height: var(--form-control-checkbox-label-line-height);
  color: var(--admin-v2-color-text, var(--text-primary));
}

.products-workspace-checkbox-chip .form-checkbox-label.products-editor-label--with-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/*
 * Checkbox chip + workspace field on one row (SSoT).
 * Grid children alternate: chip, input, chip, input — column 2 inputs share equal width.
 */
.products-workspace-chip-field-rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--admin-form-field-gap);
  align-items: center;
}

.products-workspace-chip-field-rows > .products-workspace-checkbox-chip {
  width: auto;
  min-width: max-content;
  min-height: var(--admin-control-field);
  height: var(--admin-control-field);
  box-sizing: border-box;
}

.products-workspace-chip-field-rows > .form-input.products-workspace-field {
  width: 100%;
  min-width: 0;
}

.products-workspace-description {
  min-height: 180px;
  resize: vertical;
}

.products-detail-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--admin-border-light);
}

.products-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.products-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--space-4);
}

.products-checkbox-grid--channels {
  grid-template-columns: repeat(3, minmax(0, max-content));
}

.products-detail-section--media {
  padding-bottom: var(--space-5);
}

.products-workspace-media-panel,
.products-workspace-specifications-panel {
  border: 1px solid var(--admin-border-medium);
  border-radius: var(--radius-lg);
  background: var(--admin-v2-color-surface);
  padding: 14px;
}

/* Geen extra rand onder SoftPanel / sectietitel in product workspace detail */
.products-workspace-detail-card .products-workspace-module-body .products-workspace-media-panel,
.products-workspace-detail-card .products-workspace-module-body .products-workspace-specifications-panel,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-media-panel,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-specifications-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.products-workspace-media-panel,
.products-workspace-specifications-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.products-workspace-media-panel__figure,
.products-workspace-media-panel__image-wrap {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  border-radius: var(--admin-radius-control);
  border: 1px solid var(--admin-border-hover);
  background: var(--admin-v2-color-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.products-workspace-media-panel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.products-workspace-media-panel__placeholder {
  font-size: 12px;
  color: var(--text-muted);
}

.products-workspace-media-panel--gallery {
  width: 100%;
}

.products-workspace-gallery-hero {
  position: relative;
  width: 100%;
  min-height: 200px;
  max-height: min(360px, 42vh);
  border: 1px solid var(--admin-border-hover);
  border-radius: var(--admin-radius-control);
  background: var(--admin-v2-color-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.products-workspace-gallery-hero__image {
  width: 100%;
  height: 100%;
  max-height: min(360px, 42vh);
  object-fit: contain;
}

/* SSoT: primary role pill on media/thumbnail surfaces (MAIN, default, copy). */
.products-workspace-role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--admin-radius-pill);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
  white-space: nowrap;
  line-height: 1.4;
}

.products-workspace-gallery-hero__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.products-workspace-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}

.products-workspace-gallery-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border: 1px solid var(--admin-border-hover);
  border-radius: var(--admin-radius-control);
  padding: var(--space-1);
  background: var(--admin-v2-color-surface-hover);
  min-width: 0;
}

.products-workspace-gallery-item--selected {
  border-color: var(--admin-v2-color-primary);
  box-shadow: 0 0 0 1px var(--admin-v2-color-primary);
}

.products-workspace-gallery-item__select {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.products-workspace-gallery-item__select:focus-visible {
  outline: 2px solid var(--admin-v2-color-primary);
  outline-offset: 2px;
  border-radius: var(--admin-radius-control);
}

.products-workspace-gallery-item__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--admin-radius-control);
}

.products-workspace-gallery-item__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px 6px;
}

.products-workspace-gallery-item__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.products-workspace-gallery-item__btn {
  appearance: none;
  border: 1px solid var(--admin-v2-border-strong);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  border-radius: var(--admin-radius-pill);
  padding: 0 4px;
  min-height: 22px;
  font-size: 10px;
  font-weight: var(--font-medium);
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-workspace-gallery-empty {
  grid-column: 1 / -1;
  min-height: 160px;
}

.products-workspace-media-panel__label {
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.products-workspace-media-panel__hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.products-workspace-media-panel__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.products-workspace-media-panel__actions--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.products-workspace-media-panel__actions--stack .products-workspace-toolbar__action,
.products-workspace-media-panel__actions--stack .btn {
  width: 100%;
}

.products-workspace-media-panel--compact {
  width: 100%;
  align-items: stretch;
}

.products-workspace-media-panel--compact .products-workspace-gallery-grid {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.products-workspace-media-panel--compact .products-workspace-gallery-item {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border: none;
  background: transparent;
  gap: 0;
}

.products-workspace-media-panel--compact .products-workspace-gallery-item__select {
  width: 100%;
  border: 1px solid var(--admin-border-hover);
  border-radius: var(--admin-radius-control);
  background: var(--admin-v2-color-surface-hover);
  overflow: hidden;
}

.products-workspace-media-panel--compact .products-workspace-gallery-item__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 8rem;
  object-fit: cover;
  border-radius: 0;
}

.products-workspace-media-panel--compact .products-workspace-gallery-empty {
  min-height: 8rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--admin-border-hover);
  border-radius: var(--admin-radius-control);
  background: var(--admin-v2-color-surface-hover);
}

.products-workspace-media-panel__input {
  display: none;
}

.products-detail-media-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.products-detail-media-image,
.products-detail-media-placeholder {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  overflow: hidden;
}

.products-detail-media-image {
  object-fit: cover;
}

.products-detail-media-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.products-detail-media-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 420px;
}

.products-detail-media-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.products-detail-summary-card {
  min-width: min(100%, 340px);
}

.products-edit-modules {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.products-edit-module-card {
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: var(--radius-lg);
  background: var(--admin-v2-color-surface);
  overflow: hidden;
}

.products-edit-module-card__header {
  width: 100%;
  border: 0;
  background: transparent;
  min-height: var(--admin-control-compact);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  color: var(--admin-v2-color-text);
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-semibold);
  line-height: 1;
  cursor: pointer;
}

.products-edit-module-card__header:hover {
  background: var(--admin-v2-color-surface);
}

.products-edit-module-card__header svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.products-edit-module-card__body {
  border-top: 1px solid var(--border);
  padding: 0 var(--admin-list-row-padding-x) var(--admin-list-row-padding-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.products-edit-module-card__description {
  margin: 0;
  font-size: var(--control-font-md);
  line-height: 1.5;
  color: var(--text-secondary);
}

.products-edit-module-card__hint {
  margin: 0;
  font-size: var(--control-font-md);
  color: var(--text-muted);
}

.products-edit-module-card__action {
  align-self: flex-start;
  appearance: none;
  border: 1px solid var(--admin-v2-border-strong);
  background-color: var(--admin-v2-color-text-inverse);
  border-radius: var(--admin-radius-pill);
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-list-toolbar-control-font);
  font-weight: var(--font-medium);
  min-height: var(--admin-control-compact);
  padding: 0 12px;
  line-height: 1;
  cursor: pointer;
}

.products-edit-module-card__action:hover {
  background-color: var(--admin-v2-color-text-inverse);
  border-color: var(--admin-v2-border-strong);
  color: var(--admin-v2-color-text);
}

.products-workspace-module-body {
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.products-workspace-section--variant-matrix-open {
  border-bottom: 0;
}

.products-workspace-section--variant-matrix-open .products-workspace-collapsible-header {
  border-bottom: 0 !important;
}

.products-workspace-section--variant-matrix-open .products-workspace-module-body {
  border-top: 0 !important;
  padding-top: 0;
}

/* Variants tab — full-width SoftPanel + TailAdmin table list */
.products-workspace-variants-editor {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* EntitySheetColumns is display:contents here — column stacks need explicit gap. */
  gap: var(--admin-v2-space-4, 16px);
}

/* Beat .variant-editor { margin-top } so content aligns with other tabs. */
.products-workspace-variants-editor .variant-editor {
  margin: 0;
}

.products-workspace-variants-editor .variant-editor__surface {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-4, 16px);
}

.products-workspace-variants-editor .admin-v2-soft-panel {
  width: 100%;
  min-width: 0;
}

/*
 * Nested white TailAdmin cards in Variants options column.
 * Depth via border + shadow — no muted/gray outer SoftPanel canvas.
 */
.products-workspace-variants-editor .variant-options-editor,
.products-workspace-variants-editor .variant-summary,
.products-workspace-variants-editor .variant-empty-state {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.products-workspace-variants-editor .variant-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-v2-space-4, 16px);
  margin-top: 0;
}

@media (max-width: 900px) {
  .products-workspace-variants-editor .variant-options-grid {
    grid-template-columns: 1fr;
  }
}

.products-workspace-variants-editor .variant-option-card {
  margin: 0;
  padding: var(--admin-v2-space-4, 16px);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card, 12px);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-sm);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-3, 12px);
}

/*
 * Variant setup fifths — equal-height setup cards across all five columns.
 * Row height follows the tallest column; each card stretches to match.
 */
.products-workspace-variants-editor
  .admin-v2-entity-sheet-columns--fifths
  > .admin-v2-entity-sheet-column {
  align-content: stretch;
}

.products-workspace-variants-editor
  .admin-v2-entity-sheet-columns--fifths
  > .admin-v2-entity-sheet-column
  > .variant-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

.products-workspace-variants-editor
  .admin-v2-entity-sheet-columns--fifths
  .variant-editor__surface,
.products-workspace-variants-editor
  .admin-v2-entity-sheet-columns--fifths
  .variant-options-editor--embedded {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.products-workspace-variants-editor
  .admin-v2-entity-sheet-columns--fifths
  .variant-options-editor--embedded
  > .variant-option-card,
.products-workspace-variants-editor
  .admin-v2-entity-sheet-columns--fifths
  .variant-editor__surface
  > .variant-bulk-generate {
  flex: 1 1 auto;
  min-height: 100%;
}

@media (max-width: 960px) {
  .products-workspace-variants-editor
    .admin-v2-entity-sheet-columns--fifths
    > .admin-v2-entity-sheet-column
    > .variant-editor,
  .products-workspace-variants-editor
    .admin-v2-entity-sheet-columns--fifths
    .variant-options-editor--embedded
    > .variant-option-card,
  .products-workspace-variants-editor
    .admin-v2-entity-sheet-columns--fifths
    .variant-editor__surface
    > .variant-bulk-generate {
    min-height: 0;
    height: auto;
  }
}

.products-workspace-variants-editor .variant-option-header {
  margin-bottom: 0;
}

.products-workspace-variants-editor .variant-option-header__name {
  font-size: var(--admin-v2-font-size-body, 0.875rem);
  font-weight: 600;
  color: var(--admin-v2-color-text);
}

.products-workspace-variants-editor .variant-option-header__option-name {
  color: var(--admin-v2-color-primary);
}

.products-workspace-variants-editor .variant-option-list {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-2, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.products-workspace-variants-editor .variant-option-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
  min-width: 0;
}

.products-workspace-variants-editor .variant-option-list__select {
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

.products-workspace-variants-editor .variant-option-list__select[aria-pressed="false"] {
  background: var(--admin-v2-color-primary-soft);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, var(--admin-v2-color-surface));
  color: var(--admin-v2-color-primary);
}

.products-workspace-variants-editor .variant-option-list__select[aria-pressed="false"]:hover:not(:disabled) {
  background: var(--admin-v2-color-primary-soft);
  border-color: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-primary-hover);
}

.products-workspace-variants-editor .variant-option-list__rename {
  width: 100%;
  min-width: 0;
}

.products-workspace-variants-editor .variant-option-list__edit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  cursor: pointer;
  line-height: 1;
}

.products-workspace-variants-editor .variant-option-list__edit:hover:not(:disabled) {
  color: var(--admin-v2-color-primary);
}

.products-workspace-variants-editor .variant-option-list__edit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.products-workspace-variants-editor .variant-option-list__edit svg {
  display: block;
  width: var(--admin-toolbar-inline-icon-size, 16px);
  height: var(--admin-toolbar-inline-icon-size, 16px);
}

.products-workspace-variants-editor .variant-option-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2, 8px);
  flex: 1 1 auto;
}

.products-workspace-variants-editor .variant-value-tag {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-primary) 25%, var(--admin-v2-color-surface));
  font-weight: 500;
}

.products-workspace-variants-editor .variant-option-add-value {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
  width: 100%;
  max-width: 100%;
  margin-top: auto;
  padding-top: var(--admin-v2-space-3, 12px);
  border: 0;
  border-top: 1px solid var(--admin-v2-border-subtle);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.products-workspace-variants-editor .variant-option-card--create .variant-option-add-value {
  flex-direction: column;
  align-items: stretch;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.products-workspace-variants-editor .variant-option-card--create .variant-option-add-value .form-input,
.products-workspace-variants-editor .variant-option-card--create .variant-option-add-value .products-workspace-toolbar__action {
  width: 100%;
}

.products-workspace-variants-editor .variant-option-add-value .form-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  background: var(--admin-v2-input-bg);
  border-color: var(--admin-v2-input-border);
  border-radius: var(--admin-v2-radius-control, 8px);
}

.products-workspace-variants-editor .variant-option-add-value .form-input:focus {
  border-color: var(--admin-v2-input-border-focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-v2-color-primary) 12%, transparent);
}

.products-workspace-variants-editor .variant-option-add {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
  /* No top margin when this is the first (empty-state) control. */
  margin-top: 0;
  padding: var(--admin-v2-space-4, 16px);
  border: 1px dashed var(--admin-v2-border-strong);
  border-radius: var(--admin-v2-radius-card, 12px);
  background: var(--admin-v2-color-surface);
  box-shadow: none;
}

.products-workspace-variants-editor .variant-options-grid:not(:empty) + .variant-option-add {
  margin-top: var(--admin-v2-space-4, 16px);
}

.products-workspace-variants-editor .variant-option-add .form-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  background: var(--admin-v2-color-surface);
  border-color: var(--admin-v2-input-border);
  border-radius: var(--admin-v2-radius-control, 8px);
}

.products-workspace-variants-editor .variant-option-add .form-input:focus {
  border-color: var(--admin-v2-input-border-focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-v2-color-primary) 12%, transparent);
}

.products-workspace-variants-editor .variant-option-add .products-workspace-toolbar__action,
.products-workspace-variants-editor .variant-option-add-value .products-workspace-toolbar__action,
.products-workspace-variants-editor .variant-bulk-controls .products-workspace-toolbar__action {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  max-width: none;
  white-space: nowrap;
  height: var(--admin-control-compact);
  min-height: var(--admin-control-compact);
}

.products-workspace-variants-editor .variant-bulk-generate {
  margin: var(--admin-v2-space-4, 16px) 0 0;
  padding: var(--admin-v2-space-4, 16px);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card, 12px);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-sm);
}

.products-workspace-variants-editor
  .variant-editor[data-section="generator"]
  .variant-bulk-generate {
  margin-top: 0;
}

.products-workspace-variants-editor
  .variant-editor[data-section="generator"]
  .variant-bulk-controls {
  flex-direction: column;
  align-items: stretch;
}

.products-workspace-variants-editor
  .variant-editor[data-section="generator"]
  .variant-bulk-controls__price,
.products-workspace-variants-editor
  .variant-editor[data-section="generator"]
  .variant-bulk-controls__price .form-input {
  flex: none;
  max-width: none;
  width: 100%;
}

.products-workspace-variants-editor
  .variant-editor[data-section="generator"]
  .products-workspace-toolbar__action {
  white-space: normal;
  width: 100%;
  height: auto;
  min-height: var(--admin-control-compact);
}

.products-workspace-variants-editor .variant-bulk-generate__intro {
  margin-bottom: var(--admin-v2-space-3, 12px);
}

.products-workspace-variants-editor .variant-bulk-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--admin-v2-space-3, 12px);
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.products-workspace-variants-editor .variant-bulk-controls__price {
  margin: 0;
  flex: 0 1 10rem;
}

.products-workspace-variants-editor .variant-bulk-controls__price .form-input {
  width: 100%;
  max-width: 10rem;
  border-radius: var(--admin-v2-radius-control, 8px);
}

.products-workspace-variants-editor .variant-list-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--admin-v2-space-3, 12px);
  margin: 0 0 var(--admin-v2-space-3, 12px);
}

.products-workspace-variants-editor .variant-summary {
  margin-top: var(--admin-v2-space-3, 12px);
  padding-top: var(--admin-v2-space-3, 12px);
  border-top: 1px solid var(--admin-v2-border-default, var(--border));
  font-size: var(--text-sm, 0.875rem);
  color: var(--admin-v2-color-text-muted, var(--text-secondary));
}

.products-workspace-variants-list {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--admin-v2-border-default, var(--border));
  border-radius: var(--admin-v2-radius-card, var(--radius-lg));
  background: var(--admin-v2-color-surface);
}

.products-workspace-variants-table {
  width: 100%;
  min-width: 44rem;
  table-layout: fixed;
  border-collapse: collapse;
}

.products-workspace-variants-table__col--select { width: 3rem; }
.products-workspace-variants-table__col--variant { width: 20%; }
.products-workspace-variants-table__col--image { width: 12%; }
.products-workspace-variants-table__col--price { width: 14%; }
.products-workspace-variants-table__col--available { width: 14%; }
.products-workspace-variants-table__col--status { width: 12%; }
.products-workspace-variants-table__col--default { width: 14%; }
.products-workspace-variants-table__col--actions { width: 12%; }

.products-workspace-variants-table .admin-v2-collection-table__heading,
.products-workspace-variants-table .admin-v2-collection-table__cell {
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
}

.products-workspace-variants-table .admin-v2-collection-table__primary {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.products-workspace-variants-table .admin-v2-collection-table__row:focus-visible {
  outline: 2px solid var(--admin-v2-color-focus, var(--focus-ring));
  outline-offset: -2px;
}

.products-workspace-variants-table__row--new {
  background: var(--admin-v2-color-bg);
}

/* Opdracht 175: prijs en voorraad direct in de rij; details klappen uit onder de rij, geen pop-up. */
.products-workspace-variants-table .products-workspace-variants-table__input {
  width: 100%;
  min-width: 0;
  field-sizing: fixed;
}

.products-workspace-variants-table .admin-v2-collection-table__cell:has(> .products-workspace-variants-table__input) {
  overflow: visible;
}

.products-workspace-variants-table__row--open > .admin-v2-collection-table__cell,
.products-workspace-variants-table__row--open > .admin-v2-collection-table__select {
  border-bottom-color: transparent;
}

.products-workspace-variants-table__detail-row > .admin-v2-collection-table__cell {
  overflow: visible;
  padding: 0 var(--admin-card-padding-x, var(--admin-v2-space-4)) var(--admin-section-gap, var(--admin-v2-space-4));
}

.products-workspace-variants-table__detail-row .products-workspace-variant-detail__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--admin-form-field-gap);
}

.products-workspace-variant-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--admin-toolbar-gap);
  margin-top: var(--admin-form-field-gap);
}

.products-workspace-variant-detail__actions .btn--ghost.btn--danger {
  margin-right: auto;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
}

.products-workspace-archived-variant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--admin-v2-border-default, var(--border));
}

.products-workspace-archived-variant:last-child {
  border-bottom: 0;
}

.products-workspace-variants-list__row {
  display: grid;
  grid-template-columns: var(--variants-list-cols);
  align-items: center;
  min-width: 44rem;
  padding: 0;
  border-bottom: 1px solid var(--admin-v2-border-default, var(--border));
  background: var(--admin-v2-collection-item-bg);
}

.products-workspace-variants-list__row:last-child {
  border-bottom: 0;
}

.products-workspace-variants-list__row--interactive {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.products-workspace-variants-list__row--interactive:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--admin-v2-color-focus, var(--focus-ring));
  outline-offset: -2px;
}

.products-workspace-variants-list__row:not(.products-workspace-variants-list__row--header):not(.products-workspace-variants-list__row--add):hover {
  background: var(--admin-v2-color-bg);
}

.products-workspace-variants-list__row--header {
  background: var(--admin-v2-table-heading-bg, var(--admin-v2-color-bg));
  min-height: 48px;
}

.products-workspace-variants-list__row--new {
  background: var(--admin-v2-color-bg);
}

.products-workspace-variants-list__row--add {
  grid-template-columns: minmax(0, 1fr);
  background: var(--admin-v2-color-surface);
}

.products-workspace-variants-list__row--empty {
  grid-template-columns: minmax(0, 1fr);
}

.products-workspace-variants-list__cell {
  min-width: 0;
}

.products-workspace-variants-list__row > .products-workspace-variants-list__cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--admin-v2-table-row-padding-y, 16px) var(--admin-v2-table-row-padding-x, 16px);
  text-align: left;
  font-size: var(--admin-v2-font-size-body, 0.875rem);
  line-height: var(--admin-v2-line-height-body, 1.4);
  color: var(--admin-v2-color-text, var(--text-primary));
}

.products-workspace-variants-list__row--header > .products-workspace-variants-list__cell {
  padding-top: var(--admin-v2-space-3, 12px);
  padding-bottom: var(--admin-v2-space-3, 12px);
  font-size: var(--admin-v2-font-size-meta, 12px);
  line-height: var(--admin-v2-line-height-meta, 1.35);
  font-weight: var(--admin-v2-font-weight-medium, var(--font-medium));
  letter-spacing: var(--admin-v2-letter-spacing, 0.01em);
  color: var(--admin-v2-color-text-muted, var(--text-secondary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-workspace-variants-list__cell--options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2, 8px);
  align-items: center;
  min-width: 0;
}

.products-workspace-variants-list__row > .products-workspace-variants-list__cell--thumb {
  justify-content: flex-start;
}

.products-workspace-variants-list__row > .products-workspace-variants-list__cell--price,
.products-workspace-variants-list__row > .products-workspace-variants-list__cell--available {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.products-workspace-variants-list__row > .products-workspace-variants-list__cell--status {
  white-space: nowrap;
}

.products-workspace-variants-list__row > .products-workspace-variants-list__cell--default {
  min-width: 0;
}

.products-workspace-variants-list__cell--default .admin-v2-badge {
  white-space: nowrap;
}

.products-workspace-variants-list__row--header .products-workspace-variants-list__cell--options {
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
}

.products-workspace-variants-list__variant-label {
  display: inline-block;
  max-width: 100%;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-medium);
  color: var(--admin-v2-color-text, var(--text-primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-workspace-variants-list__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 5.5rem;
}

.products-workspace-variants-list__option-name {
  font-size: 11px;
  font-weight: var(--font-medium);
  line-height: 1.2;
  color: var(--admin-v2-color-text-muted, var(--text-secondary));
  white-space: nowrap;
}

.products-workspace-variants-list__option-name--header {
  flex: 1 1 5.5rem;
  font-size: 12px;
}

.products-workspace-variants-list__option .form-select,
.products-workspace-variants-list__cell--price .form-input,
.products-workspace-variants-list__cell--compare .form-input,
.products-workspace-variants-list__cell--stock .form-input,
.products-workspace-variants-list__cell--weight .form-input,
.products-workspace-variants-list__cell--sku .form-input,
.products-workspace-variants-list__cell--barcode .form-input,
.products-workspace-variants-list__cell--status .form-select {
  width: 100%;
  max-width: 100%;
  min-height: var(--admin-control-field, 36px);
  /* Use background-color — `background` shorthand would wipe the select chevron. */
  background-color: var(--admin-v2-color-text-inverse);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-control, 8px);
}

.products-workspace-variants-list__cell--status .form-select {
  appearance: none;
  background-image: var(--admin-v2-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--control-padding-md, 12px) center;
  padding-right: calc(var(--control-padding-md, 12px) + var(--space-6, 1.5rem));
  cursor: pointer;
}

.products-workspace-variants-list__cell--price .form-input,
.products-workspace-variants-list__cell--compare .form-input,
.products-workspace-variants-list__cell--stock .form-input,
.products-workspace-variants-list__cell--weight .form-input {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.products-workspace-variants-list__image {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
  min-width: 0;
}

.products-workspace-variants-list__image-thumb,
.products-workspace-variants-list__image-placeholder {
  width: var(--admin-v2-interactive-control-height, 36px);
  height: var(--admin-v2-interactive-control-height, 36px);
  flex: 0 0 auto;
  border-radius: var(--admin-v2-radius-control, 8px);
  object-fit: cover;
  border: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-bg);
}

.products-workspace-variants-list__readonly {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm, 0.875rem);
  color: var(--admin-v2-color-text-muted, var(--text-secondary));
}

.products-workspace-variants-list__cell--delete,
.products-workspace-variants-list__cell--open {
  justify-self: stretch;
}

.products-workspace-variants-list__row > .products-workspace-variants-list__cell--open {
  justify-content: flex-start;
  white-space: nowrap;
  color: var(--admin-v2-color-text-muted, var(--text-secondary));
}

.products-workspace-variant-detail {
  margin: var(--admin-v2-space-4, 16px);
  padding: var(--admin-v2-space-4, 16px);
  border: 1px solid var(--admin-v2-border-default, var(--border));
  border-radius: var(--admin-v2-radius-card, var(--radius-lg));
  background: var(--admin-v2-color-bg);
}

.products-workspace-variant-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-3, 12px);
  margin-bottom: var(--admin-v2-space-4, 16px);
}

.products-workspace-variant-detail__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-v2-space-4, 16px);
}

.modal.products-workspace-variant-modal {
  width: calc(100% - var(--admin-v2-space-8, 32px));
  max-width: 1280px;
  max-height: min(88vh, 760px);
}

.products-workspace-variant-modal .modal__header,
.products-workspace-variant-modal .modal__footer {
  padding: var(--admin-v2-space-5, 20px) var(--admin-v2-space-6, 24px);
}

.products-workspace-variant-modal .modal__body {
  padding: var(--admin-v2-space-6, 24px);
}

.products-workspace-variant-modal .products-workspace-variant-detail {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.products-workspace-variant-modal .products-workspace-variant-detail__fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--admin-v2-space-5, 20px) var(--admin-v2-space-6, 24px);
}

.products-workspace-variant-modal .products-workspace-variant-detail__fields > .products-workspace-variants-list__cell,
.products-workspace-variant-modal .products-workspace-variant-detail__fields > .products-editor-field,
.products-workspace-variant-modal .products-workspace-variant-detail__footer-fields > .products-workspace-variants-list__cell,
.products-workspace-variant-modal .products-workspace-variants-list__option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--admin-v2-space-2, 8px);
  min-width: 0;
}

.products-workspace-variant-modal .products-workspace-variant-detail__footer-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--admin-v2-space-5, 20px) var(--admin-v2-space-6, 24px);
  margin-top: var(--admin-v2-space-2, 8px);
  padding-top: var(--admin-v2-space-5, 20px);
  border-top: 1px solid var(--admin-v2-border-default, var(--border));
}

@media (max-width: 1100px) {
  .products-workspace-variant-modal .products-workspace-variant-detail__footer-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .products-workspace-variant-modal .products-workspace-variant-detail__footer-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.products-workspace-variant-modal .products-workspace-variants-list__cell--status {
  gap: var(--admin-v2-space-2, 8px);
}

.products-workspace-variant-modal .products-workspace-variants-list__cell--default {
  gap: var(--admin-v2-space-2, 8px);
}

.products-workspace-variant-default-toggle {
  margin-top: 0;
  min-height: var(--admin-v2-interactive-control-height, 42px);
  align-items: center;
}

.products-workspace-variant-modal .products-workspace-variants-list__cell--price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, auto);
  gap: var(--admin-v2-space-2, 8px);
}

.products-workspace-variant-modal .products-workspace-variants-list__cell--price > .products-editor-label {
  grid-column: 1 / -1;
}

.products-workspace-variant-modal .products-workspace-variants-list__readonly {
  display: flex;
  align-items: center;
  min-height: var(--admin-v2-interactive-control-height, 42px);
  padding: 0 var(--admin-v2-space-3, 12px);
  border: 1px solid var(--admin-v2-border-default, var(--border));
  border-radius: var(--admin-v2-radius-control, 8px);
  background: var(--admin-v2-color-bg);
}

.products-workspace-variant-modal .products-workspace-variants-list__cell--image {
  grid-column: span 3;
  min-height: var(--admin-v2-interactive-control-height, 42px);
}

@media (max-width: 1100px) {
  .products-workspace-variant-modal .products-workspace-variants-list__cell--image {
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  .products-workspace-variant-modal .products-workspace-variants-list__cell--image {
    grid-column: span 1;
  }
}

.products-workspace-variant-modal .products-workspace-variants-list__image {
  min-height: var(--admin-v2-interactive-control-height, 42px);
}

@media (max-width: 1100px) {
  .products-workspace-variant-modal .products-workspace-variant-detail__fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .products-workspace-variant-modal .products-workspace-variant-detail__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .products-workspace-variant-modal .products-workspace-variant-detail__fields {
    grid-template-columns: minmax(0, 1fr);
  }

}

.products-workspace-variants-list__row--add .btn {
  width: auto;
  justify-self: start;
}

@media (max-width: 1100px) {
  .products-workspace-variants-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  .products-workspace-variants-list__row--header {
    display: none;
  }

  .products-workspace-variants-list__cell--options,
  .products-workspace-variants-list__cell--thumb,
  .products-workspace-variants-list__cell--price,
  .products-workspace-variants-list__cell--compare,
  .products-workspace-variants-list__cell--stock,
  .products-workspace-variants-list__cell--weight,
  .products-workspace-variants-list__cell--image,
  .products-workspace-variants-list__cell--reserved,
  .products-workspace-variants-list__cell--available,
  .products-workspace-variants-list__cell--sku,
  .products-workspace-variants-list__cell--barcode,
  .products-workspace-variants-list__cell--status,
  .products-workspace-variants-list__cell--default {
    grid-column: 1;
  }

  .products-workspace-variants-list__cell--delete,
  .products-workspace-variants-list__cell--open {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .products-workspace-variant-detail__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.products-workspace-module-body .variant-editor--embedded {
  margin: 0;
}

.products-workspace-module-body .variant-editor__surface {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.products-workspace-module-body .variant-options-editor,
.products-workspace-module-body .variant-empty-state,
.products-workspace-module-body .variant-summary {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.products-workspace-module-body .variant-bulk-generate {
  margin-top: 0;
}

.products-workspace-module-body .variant-options-editor > .products-editor-label,
.products-workspace-module-body .variant-bulk-generate__intro > .products-editor-label,
.products-workspace-module-body .variant-bulk-generate > .products-editor-label,
.products-workspace-module-body .variant-list-header > .products-editor-label {
  margin: 0;
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.products-workspace-module-body .variant-summary .products-editor-hint,
.products-workspace-module-body .variant-options-editor > .products-editor-hint,
.products-workspace-module-body .variant-bulk-generate__intro > .products-editor-hint {
  margin: 0;
}

.products-workspace-module-body .variant-options-editor h4,
.products-workspace-module-body .variant-bulk-generate h4,
.products-workspace-module-body .variant-list-header h4 {
  font-size: var(--control-font-md);
  font-weight: var(--font-semibold);
  line-height: 1.35;
  color: var(--text-primary);
}

.products-workspace-module-body .variant-options-editor .variant-option-header strong,
.products-workspace-module-body .variant-options-editor .variant-option-header__name {
  font-size: var(--control-font-md);
  font-weight: var(--font-semibold);
  line-height: 1.35;
  color: var(--text-primary);
}

.products-workspace-module-body .variant-list {
  margin-top: 0;
}

.products-workspace-module-body .variant-list-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.products-workspace-module-body .variant-options-editor .form-hint,
.products-workspace-module-body .variant-bulk-generate .form-hint,
.products-workspace-module-body .variant-empty-state p,
.products-workspace-module-body .variant-summary {
  font-size: var(--control-font-md);
  line-height: 1.5;
  color: var(--text-secondary);
}

.products-workspace-module-body .variant-empty-state p {
  margin: 0;
}

.products-workspace-module-body .variant-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.products-workspace-module-body .variant-value-tag {
  font-size: var(--control-font-sm);
  border-radius: var(--admin-radius-pill);
}

.products-workspace-module-body .variant-option-add {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}

.products-workspace-module-body .variant-option-add-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.products-workspace-module-body .variant-bulk-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.products-workspace-module-body .variant-option-add .form-input,
.products-workspace-module-body .variant-option-add-value .form-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: var(--admin-control-field);
  height: var(--admin-control-field);
  padding: 0 12px;
  border-radius: var(--admin-v2-radius-control, 8px);
  font-size: var(--admin-products-list-font) !important;
}

.products-workspace-module-body .variant-bulk-controls .form-input {
  min-height: var(--admin-control-field);
  height: var(--admin-control-field);
  padding: 0 12px;
  border-radius: var(--admin-v2-radius-control, 8px);
  font-size: var(--admin-products-list-font) !important;
}

.products-workspace-module-body .variant-bulk-controls__price .form-input {
  width: 10rem;
  max-width: 100%;
}

.products-workspace-module-body .variant-option-add .form-input::placeholder,
.products-workspace-module-body .variant-option-add-value .form-input::placeholder,
.products-workspace-module-body .variant-bulk-controls .form-input::placeholder {
  font-size: var(--admin-products-list-font);
}

.products-workspace-module-body .variant-bulk-controls .form-group,
.products-workspace-module-body .variant-bulk-controls__price {
  margin-bottom: 0;
  max-width: none;
}

.products-workspace-module-body .variant-option-add .products-workspace-toolbar__action,
.products-workspace-module-body .variant-option-add-value .products-workspace-toolbar__action,
.products-workspace-module-body .variant-bulk-controls .products-workspace-toolbar__action,
.products-workspace-module-body .variant-list-header .products-workspace-toolbar__action,
.products-workspace-module-body .variant-option-add .btn,
.products-workspace-module-body .variant-option-add-value .btn,
.products-workspace-module-body .variant-bulk-controls .btn,
.products-workspace-module-body .variant-list-header .btn {
  flex: 0 0 auto;
  min-height: var(--admin-control-compact);
  height: var(--admin-control-compact);
  padding: 0 12px;
  line-height: 1;
  border-radius: var(--admin-radius-pill);
  font-size: var(--admin-products-list-font) !important;
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.products-workspace-module-body .variant-table {
  min-width: 0;
}

.products-workspace-module-card__description {
  margin: 0;
  font-size: var(--control-font-md);
  line-height: 1.5;
  color: var(--text-secondary);
}

.products-workspace-module-card__hint {
  margin: 0;
  font-size: var(--control-font-md);
  color: var(--text-muted);
}

.products-workspace-module-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.products-workspace-module-card__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.products-workspace-module-card__field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--admin-v2-color-text-soft);
}

.products-workspace-module-card__field-value {
  margin: 0;
  font-size: var(--admin-workspace-detail-font);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.products-workspace-module-card__media-preview {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  border-radius: var(--admin-radius-control);
  border: 1px solid var(--admin-border-hover);
  background: var(--admin-v2-color-surface-hover);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.products-workspace-module-card__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.products-workspace-module-card__media-placeholder {
  color: var(--text-muted);
}

.products-workspace-module-card__action {
  align-self: flex-start;
  appearance: none;
  border: 1px solid var(--admin-v2-border-strong);
  background-color: var(--admin-v2-color-text-inverse);
  border-radius: var(--admin-radius-pill);
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-list-toolbar-control-font);
  font-weight: var(--font-medium);
  min-height: var(--admin-control-compact);
  padding: 0 12px;
  line-height: 1;
  cursor: pointer;
}

.products-workspace-module-card__action:hover {
  background-color: var(--admin-v2-color-text-inverse);
  border-color: var(--admin-v2-border-strong);
  color: var(--admin-v2-color-text);
}

.products-detail-footer {
  display: flex;
  justify-content: flex-start;
  padding: 16px 20px 20px;
}

.products-detail-footer-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.products-detail-danger-btn {
  color: var(--error);
}

.products-order-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.products-order-autosave-note {
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-align: right;
}

@media (max-width: 1100px) {
  .products-master-detail {
    grid-template-columns: 1fr;
  }

  .products-list-card,
  .products-detail-card {
    height: auto;
    overflow: visible;
    min-height: 0;
  }

  .products-import-summary-grid {
    grid-template-columns: 1fr;
  }

  .products-import-section-header {
    align-items: flex-start;
  }

  .products-import-preview-row__values {
    align-items: flex-start;
    text-align: left;
  }

  .products-import-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .product-workspace-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .product-workspace-row__right {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 56px;
    text-align: left;
  }

  .products-detail-hero {
    flex-wrap: wrap;
  }

  .products-order-hero-actions {
    width: 100%;
    align-items: flex-start;
  }

  .products-order-autosave-note {
    text-align: left;
  }

  .products-detail-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .products-editor-grid,
  .products-editor-grid--pricing,
  .products-editor-grid--inventory,
  .products-workspace-form-grid,
  .products-workspace-config-grid,
  .products-workspace-controls-grid,
  .products-workspace-form-grid--triple,
  .products-workspace-checkbox-grid,
  .products-detail-grid,
  .products-checkbox-grid,
  .products-checkbox-grid--channels {
    grid-template-columns: 1fr;
  }

  .products-detail-media-layout {
    flex-direction: column;
  }
}

/* Staff access scope paths — compact picker (dropdown + chips; replaces multiselect) */
.staff-access-scope-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.staff-access-scope-field__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: var(--admin-control-compact);
}

.staff-access-scope-field__empty {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
  font-style: italic;
}

.staff-access-scope-field__add .form-select {
  width: 100%;
}

.staff-access-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 2px 2px 10px;
  border-radius: var(--admin-radius-pill);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  border: 1px solid var(--admin-border-subtle);
  background: transparent;
  color: var(--text-primary);
}

.staff-access-scope-chip__path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(100vw - 120px, 360px);
}

.staff-access-scope-chip__remove {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.staff-access-scope-chip__remove:hover:not(:disabled) {
  color: var(--text-primary);
}

/* =================================================================
   TOP BAR STOREFRONT PREVIEW (Header/Footer admin)
   Mirrors webshop layout.css + product-detail.css share buttons.
   ================================================================= */

.products-workspace-topbar-preview {
  margin-top: var(--space-2);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-md);
  overflow: hidden;
  background: var(--admin-bg-surface);
}

.products-workspace-topbar-preview .storefront-top-bar {
  border-bottom: 1px solid var(--admin-border-light);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.products-workspace-topbar-preview .storefront-top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--admin-control-compact);
  padding: var(--space-1) var(--space-4);
  max-width: 100%;
  box-sizing: border-box;
}

.products-workspace-topbar-preview .storefront-top-bar__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.products-workspace-topbar-preview .storefront-top-bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.products-workspace-topbar-preview .storefront-top-bar__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.products-workspace-topbar-preview .product-share--inline .product-share-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.products-workspace-topbar-preview .product-share--inline .product-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-control-field);
  height: var(--admin-control-field);
  border: none;
  border-radius: var(--admin-radius-md);
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
}

.products-workspace-topbar-preview .product-share--inline .product-share-link:hover {
  color: var(--text-primary);
  background: var(--admin-bg-elevated, var(--bg-elevated));
}

.products-workspace-topbar-preview .product-share-link svg {
  display: block;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .products-workspace-topbar-preview .storefront-top-bar__inner {
    align-items: center;
    gap: var(--space-3);
  }

  .products-workspace-topbar-preview .storefront-top-bar__contact {
    flex: 1 1 auto;
    gap: var(--space-3);
  }

  .products-workspace-topbar-preview .product-share--inline {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
  }

  .products-workspace-topbar-preview .product-share--inline .product-share-actions {
    justify-content: flex-end;
  }
}

/* Header menu storefront preview moved to v2/editor-workspace/menu-preview.css
   (.editor-menu-preview) — shared by admin and Website Editor bundles. */

.products-workspace-header-elements-preview {
  margin-top: var(--space-2);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-md);
  overflow: hidden;
  background: var(--admin-bg-surface);
}

.products-workspace-header-elements-preview__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--storefront-header-chrome-bg, var(--admin-bg-surface));
}

.products-workspace-header-elements-preview__search {
  flex: 1;
  max-width: 280px;
  min-height: var(--admin-control-filter);
  padding: 0 var(--space-3);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-md);
  background: var(--admin-bg-elevated);
  font-size: var(--admin-products-list-font);
  color: var(--text-secondary);
  line-height: var(--admin-control-filter);
}

.products-workspace-header-elements-preview__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.products-workspace-header-elements-preview__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--admin-control-filter);
  padding: 0 var(--space-3);
  border-radius: var(--admin-radius-md);
  background: transparent;
  font-size: var(--admin-products-list-font);
  color: var(--text-primary);
}

.products-workspace-header-elements-preview__action:hover {
  background: var(--storefront-header-chrome-hover-bg, var(--bg-hover));
}

.products-workspace-header-elements-preview__panel {
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-md);
  background: var(--storefront-search-panel-bg, var(--bg-elevated));
}

.products-workspace-header-elements-preview__panel-item {
  display: flex;
  align-items: center;
  min-height: var(--admin-control-filter);
  padding: 0 var(--space-3);
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-products-list-font);
  color: var(--text-secondary);
}

.products-workspace-header-elements-preview__panel-item:hover {
  background: var(--storefront-search-panel-hover-bg, var(--bg-hover));
  color: var(--text-primary);
}

/* Embedded block list — product/category item editors */
.embedded-block-list__add-panel {
  padding: var(--space-3);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
}

/* Add-block wizard — choose mode buttons (existing vs new) */
.add-block-choose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .add-block-choose {
    grid-template-columns: 1fr;
  }
}

.add-block-choose__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.add-block-choose__option:hover:not(:disabled) {
  border-color: var(--admin-accent);
  background: var(--bg-hover);
}

.add-block-choose__option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.add-block-choose__title {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary);
}

.add-block-choose__hint {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.embedded-block-item__toolbar {
  position: static;
  width: 100%;
  margin: 0;
}

.embedded-block-item__toolbar .products-workspace-toolbar__right {
  margin-left: auto;
}

.embedded-block-item__toggle {
  margin: 0;
}

/* Product workspace compact relation/search lists */
.products-workspace-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.products-workspace-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--admin-control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--admin-products-list-font);
}

.products-workspace-list-row > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Live € amounts in product price/compare labels — body size inside bold panel titles */
.products-price-field-label__amount {
  font-weight: var(--font-weight-normal, 400);
  font-size: var(--admin-font-size-base, var(--text-base)) !important;
  line-height: var(--line-height-normal, 1.5);
}

body[data-page-type="admin"] .admin-v2-soft-panel__title .products-price-field-label__amount,
body[data-page-type^="admin-"] .admin-v2-soft-panel__title .products-price-field-label__amount,
.admin-layout .admin-v2-soft-panel__title .products-price-field-label__amount {
  font-weight: var(--admin-v2-font-weight-normal, 400);
  font-size: var(--admin-v2-font-size-body) !important;
  line-height: var(--admin-v2-line-height-body);
}

.products-price-field-label__amount.price-strikethrough {
  text-decoration: line-through;
  color: var(--text-secondary);
  margin-right: 0;
}

.products-compare-price-field,
.products-workspace-variants-list__cell--compare .products-compare-price-field {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.products-compare-price-field::placeholder,
.products-workspace-variants-list__cell--compare .products-compare-price-field::placeholder {
  text-decoration: line-through;
  color: var(--text-secondary);
  opacity: 1;
}

.products-workspace-gift-card-amounts {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
}

.products-workspace-gift-card-amount-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.products-workspace-gift-card-amount-row__prefix {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.products-workspace-gift-card-amount-row .form-input {
  flex: 1 1 8rem;
  min-inline-size: 0;
}

.products-workspace-gift-card-presets {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
}

.products-workspace-gift-card-preset {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  padding: var(--space-3);
  text-align: start;
  color: var(--text-primary);
  background: var(--surface-elevated, var(--color-surface));
  border: 1px solid var(--border, var(--color-border));
  border-radius: var(--admin-radius-control);
  cursor: pointer;
}

.products-workspace-gift-card-preset:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.products-workspace-gift-card-preset.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.products-workspace-gift-card-preset__swatch {
  grid-row: 1 / span 2;
  align-self: stretch;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--border, var(--color-border));
}

.products-workspace-gift-card-preset__swatch[data-preset="RUSTIG"] {
  background: color-mix(in srgb, var(--color-surface) 88%, var(--text-primary) 12%);
}

.products-workspace-gift-card-preset__swatch[data-preset="MERKACCENT"] {
  background: color-mix(in srgb, var(--color-primary) 28%, var(--color-surface));
}

.products-workspace-gift-card-preset__swatch[data-preset="FOTO"] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)), var(--color-surface));
}

.products-workspace-gift-card-preset__label {
  font-weight: 600;
}

.products-workspace-gift-card-preset__hint {
  color: var(--text-secondary);
}

.products-workspace-gift-card-media {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
}

.products-workspace-gift-card-media__preview {
  display: block;
  inline-size: 10rem;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--border, var(--color-border));
  object-fit: cover;
}

.products-workspace-gift-card-media__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Opdracht 413 — Maten of kleuren: stappenbalk en begin-kaart (borden 1–2). */
.p-steps {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--admin-v2-font-size-control);
  font-weight: 500;
}

.p-steps li {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
  color: var(--admin-v2-color-text-muted, #667085);
  white-space: nowrap;
}

.p-steps li + li::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--admin-v2-border-default, #e4e7ec);
  flex: none;
}

.p-steps i {
  width: 24px;
  height: 24px;
  border-radius: var(--admin-radius-pill);
  border: 1px solid var(--admin-v2-border-default, #e4e7ec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12px;
  flex: none;
  background: var(--admin-v2-color-surface);
}

.p-step--done {
  color: var(--admin-v2-color-text, #1d2939);
}

.p-step--done i {
  background: var(--admin-v2-color-primary);
  border-color: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-primary-contrast);
}

.p-step--now {
  color: var(--admin-v2-color-text, #1d2939);
  font-weight: 600;
}

.p-step--now i {
  border: 2px solid var(--admin-v2-color-primary);
  color: var(--admin-v2-color-primary);
}

.p-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--admin-control-compact);
  padding: 0 12px;
  border-radius: var(--admin-radius-pill);
  border: 1px solid var(--admin-v2-border-default, #e4e7ec);
  background: var(--admin-v2-color-surface);
  font-size: var(--admin-v2-font-size-control);
  font-weight: 500;
  color: var(--admin-v2-color-text, #344054);
}

.p-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--admin-radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--admin-v2-color-surface-muted, #f2f4f7);
  color: var(--admin-v2-color-text, #344054);
}

.p-pill--info {
  background: var(--admin-v2-state-information-bg);
  color: var(--admin-v2-state-information-text);
}

.p-meta {
  color: var(--admin-v2-color-text-muted, #667085);
  font-size: var(--admin-v2-font-size-control);
}

.p-small {
  font-size: 12px;
  color: var(--admin-v2-color-text-muted, #667085);
  white-space: nowrap;
}

.p-row {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-4, 16px);
  justify-content: space-between;
}

.products-workspace-maten-begin {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-4, 16px);
}

.products-workspace-maten-begin__copy {
  min-width: 0;
}

.products-workspace-maten-begin__question {
  font-weight: 600;
}

.products-workspace-maten-begin__steps,
.products-workspace-maten-begin__example {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-4, 16px);
  flex-wrap: wrap;
  padding-top: var(--admin-v2-space-4, 16px);
  border-top: 1px solid var(--admin-v2-border-subtle, #f2f4f7);
}

.products-workspace-maten-begin__example-label {
  font-weight: 500;
  font-size: var(--admin-v2-font-size-control);
}

.products-workspace-maten-begin__times {
  font-size: 18px;
  color: var(--admin-v2-color-text-muted, #667085);
}

/* Opdracht 413 — setup stappen 1–2 + live tabel (borden 2–4). */
.p-line {
  border-top: 1px solid var(--admin-v2-border-subtle, #f2f4f7);
  margin: 0;
}

.p-pill--warn {
  background: var(--admin-v2-state-warning-bg);
  color: var(--admin-v2-state-warning-text);
}

.p-chip__remove {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--admin-radius-pill);
  background: transparent;
  color: inherit;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.p-chip__remove:hover {
  opacity: 1;
}

.p-seg {
  display: flex;
  border: 1px solid var(--admin-v2-border-default, #e4e7ec);
  border-radius: var(--admin-v2-radius-md, 8px);
  overflow: hidden;
  flex: none;
  max-width: 360px;
}

.p-seg button {
  flex: 1;
  height: var(--admin-control-lg);
  border: 0;
  border-left: 1px solid var(--admin-v2-border-default, #e4e7ec);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted, #475467);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 var(--admin-v2-space-3, 12px);
  white-space: nowrap;
}

.p-seg button:first-child {
  border-left: 0;
}

.p-seg button[aria-pressed="true"] {
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-primary-contrast);
}

.p-toggle {
  width: 44px;
  height: 24px;
  border-radius: var(--admin-radius-pill);
  background: var(--admin-v2-color-primary);
  position: relative;
  border: 0;
  cursor: pointer;
  flex: none;
  padding: 0;
}

.p-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 23px;
  width: 18px;
  height: 18px;
  border-radius: var(--admin-radius-pill);
  background: var(--admin-v2-color-surface);
}

.p-toggle--off {
  background: var(--admin-v2-border-strong, #d0d5dd);
}

.p-toggle--off::after {
  left: 3px;
}

.p-th,
.p-tr {
  display: grid;
  align-items: center;
  gap: var(--admin-v2-space-4, 16px);
}

.p-th {
  font-size: 12px;
  color: var(--admin-v2-color-text-muted, #667085);
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 1px solid var(--admin-v2-border-default, #e4e7ec);
}

.p-tr {
  padding: 12px 0;
  border-bottom: 1px solid var(--admin-v2-border-subtle, #f2f4f7);
  min-height: 72px;
}

.products-workspace-maten-setup {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-4, 16px);
}

.products-workspace-maten-setup__header {
  justify-content: flex-end;
}

.products-workspace-maten-setup__heading {
  font-size: var(--admin-v2-font-size-body);
  font-weight: 600;
  margin: 0;
}

.products-workspace-maten-setup__presets,
.products-workspace-maten-quickfill {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2, 8px);
  align-items: center;
}

.products-workspace-maten-setup__custom,
.products-workspace-maten-setup__step,
.products-workspace-maten-option {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-3, 12px);
}

.products-workspace-maten-vangnet {
  display: flex;
  gap: var(--admin-v2-space-4, 16px);
  align-items: flex-start;
  padding: var(--admin-v2-space-4, 16px);
  border: 1px solid var(--admin-v2-border-default, #e4e7ec);
  border-radius: var(--admin-v2-radius-md, 8px);
  background: var(--admin-v2-state-warning-bg);
}

.products-workspace-maten-vangnet__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.products-workspace-maten-vangnet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2, 8px);
  margin-top: var(--admin-v2-space-3, 12px);
}

.products-workspace-maten-option__confirm {
  padding: 8px 0;
  border-top: 1px solid var(--admin-v2-border-subtle, #f2f4f7);
}

.products-workspace-maten-option__confirm-copy {
  display: flex;
  align-items: center;
  gap: var(--admin-form-field-gap);
  min-width: 0;
}

.products-workspace-maten-option__check {
  width: 24px;
  height: 24px;
  border-radius: var(--admin-radius-pill);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-primary-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 12px;
}

.products-workspace-maten-option__label-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.products-workspace-maten-chips {
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--admin-v2-radius-md, 8px);
  border: 1px solid var(--admin-v2-border-default, #e4e7ec);
  background: var(--admin-v2-color-surface);
  cursor: text;
}

.products-workspace-maten-chips__input {
  flex: 1;
  min-width: 160px;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--admin-v2-color-text, #1d2939);
}

.products-workspace-maten-chips__input::placeholder {
  color: var(--admin-v2-color-text-muted, #667085);
}

.products-workspace-maten-add-choice {
  align-self: flex-start;
  padding-left: 8px;
  padding-right: 8px;
}

.products-workspace-maten-live {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-3, 12px);
}

.products-workspace-maten-live__head {
  align-items: flex-start;
}

.products-workspace-maten-table__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 500;
}

.products-workspace-maten-table__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.products-workspace-maten-table__price {
  position: relative;
  width: 100%;
}

.products-workspace-maten-table__currency {
  position: absolute;
  left: 14px;
  top: 0;
  height: var(--admin-control-lg);
  display: flex;
  align-items: center;
  color: var(--admin-v2-color-text-muted, #667085);
  pointer-events: none;
}

.products-workspace-maten-table__price .form-input {
  text-align: right;
  padding-left: 32px;
}

/* Opdracht 413 — beheer tabel + open rij (borden 5–6). */
.products-workspace-maten-beheer {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-4, 16px);
}

.products-workspace-maten-beheer__option {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
  flex-wrap: wrap;
}

.products-workspace-maten-beheer__bulk-bar {
  align-items: center;
}

.products-workspace-maten-bulk {
  display: flex;
  gap: var(--admin-v2-space-4, 16px);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--admin-v2-space-4, 16px);
  border: 1px solid var(--admin-v2-color-primary-soft);
  border-radius: var(--admin-v2-radius-md, 8px);
  background: var(--admin-v2-color-surface);
}

.products-workspace-maten-bulk__copy {
  flex: 1;
  min-width: 200px;
}

.products-workspace-maten-bulk__fields {
  display: flex;
  gap: var(--admin-v2-space-4, 16px);
  align-items: flex-end;
  flex-wrap: wrap;
}

.p-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--admin-v2-radius-sm, 6px);
  background: var(--admin-v2-color-surface-muted, #f2f4f7);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-pill--ok {
  background: var(--admin-v2-state-success-bg);
  color: var(--admin-v2-state-success-text);
}

.products-workspace-maten-row-detail {
  padding: var(--admin-v2-space-4, 16px) 0 var(--admin-v2-space-6, 24px);
  border-bottom: 1px solid var(--admin-v2-border-subtle, #f2f4f7);
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-4, 16px);
  background: var(--admin-v2-color-surface);
}

.products-workspace-maten-row-detail__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--admin-v2-space-4, 16px);
}

.products-workspace-maten-row-detail__default {
  grid-column: span 2;
  display: flex;
  align-items: flex-end;
  min-height: var(--admin-control-lg);
}

.products-workspace-maten-row-detail__danger {
  display: flex;
  justify-content: flex-start;
}

/* Opdracht 415: kleurcode per chip + productfoto-schakelaar */
.products-workspace-maten-chip--color {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
  flex-wrap: wrap;
}

.products-workspace-maten-chip__swatch {
  width: 1rem;
  height: 1rem;
  border-radius: var(--admin-radius-pill);
  border: 1px solid var(--admin-v2-border-subtle, #e4e7ec);
  flex-shrink: 0;
}

.products-workspace-maten-chip__color-input {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.products-workspace-maten-chip__hex,
.products-workspace-maten-chip__label {
  min-width: 5.5rem;
  max-width: 8rem;
}

.products-workspace-media-panel__variant-switch {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2, 8px);
  margin-top: var(--admin-v2-space-3, 12px);
}

/* public-verify-display.css */
/**
 * Admin: publieke verify-card (zelfde markup als webshop /check-in/verify).
 * Sync met webshop `contexts/webshop/photo-upload.css` verify-sectie bij wijzigingen.
 */

.public-verify-preview-toggle-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.public-verify-preview-toggle-label {
  margin: 0;
}

.public-verify-preview-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.public-verify-preview-simulate-hint {
  margin: 0;
}

/* Embed: meegroeien met inhoud — geen eigen scroll; de parent `.products-detail-card` scrollt (products-page viewport-lock). */
.public-verify-admin-embed {
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  overflow: visible;
}

.public-verify-admin-embed .photo-upload.public-check-in-verify {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  /* Geen min-height: 100vh — anders dubbele/haperende scroll in admin-kaart */
}

.public-verify-admin-embed .photo-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  background: var(--admin-v2-color-bg);
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}

.public-verify-admin-embed .public-check-in-verify__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.public-verify-admin-embed .photo-upload__powered-by {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-6, 1.5rem);
  padding-top: var(--space-6, 1.5rem);
  padding-bottom: var(--space-4, 1rem);
  border-top: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-bg);
}

.public-verify-admin-embed .photo-upload__powered-by-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--admin-v2-color-text-muted);
  letter-spacing: 0.04em;
}

.public-verify-admin-embed .photo-upload__logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-v2-color-text);
  letter-spacing: -0.02em;
}

.public-verify-admin-embed .photo-upload__logo--footer {
  margin-top: 0;
  margin-bottom: 0;
}

.public-verify-admin-embed .photo-upload__logo-p {
  color: var(--admin-v2-color-primary);
}

.public-verify-admin-embed .photo-upload__logo-dot {
  color: var(--admin-v2-color-primary);
}

.public-verify-admin-embed .photo-upload__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4, 1rem);
  max-width: 420px;
  padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
}

.public-verify-admin-embed .photo-upload__status p {
  color: var(--admin-v2-color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}

.public-verify-admin-embed .photo-upload__status--error {
  color: var(--admin-v2-state-danger-text);
}

.public-verify-admin-embed .photo-upload__status--error p {
  color: var(--admin-v2-color-text);
}

.public-verify-admin-embed .photo-upload__status--success {
  color: var(--admin-v2-state-success-text);
}

.public-verify-admin-embed .photo-upload__status--success h2 {
  color: var(--admin-v2-color-text);
  font-size: 1.25rem;
  margin: 0;
}

.public-verify-admin-embed .photo-upload__status--success p {
  color: var(--admin-v2-color-text-muted);
}

.public-verify-admin-embed .photo-upload .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--admin-v2-border-default);
  border-top-color: var(--admin-v2-color-primary);
  border-radius: 50%;
  animation: public-verify-admin-spin 0.6s linear infinite;
}

@keyframes public-verify-admin-spin {
  to {
    transform: rotate(360deg);
  }
}

.public-verify-admin-embed .public-check-in-verify__page-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--admin-v2-color-text);
  margin: 0 0 var(--space-2, 0.5rem) 0;
  text-align: center;
}

.public-verify-admin-embed .public-check-in-verify__page-subtitle {
  font-size: 0.9375rem;
  color: var(--admin-v2-color-text-muted);
  margin: 0 0 var(--space-2, 0.5rem) 0;
  text-align: center;
}

.public-verify-admin-embed .public-check-in-verify__items {
  list-style: none;
  padding: 0;
  margin: var(--space-4, 1rem) 0 0;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.public-verify-admin-embed .public-check-in-verify__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  margin-bottom: var(--space-3, 0.75rem);
  font-size: 0.9375rem;
}

.public-verify-admin-embed .public-check-in-verify__item-label {
  font-weight: 600;
  color: var(--admin-v2-color-text);
}

.public-verify-admin-embed .public-check-in-verify__item-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: var(--admin-v2-color-text-muted);
  word-break: break-word;
}

.public-verify-admin-embed .public-check-in-verify__photo-wrap {
  display: block;
  margin-top: var(--space-2, 0.5rem);
  margin-left: auto;
  margin-right: auto;
}

.public-verify-admin-embed .public-check-in-verify__photo {
  display: block;
  border-radius: var(--radius-md, 8px);
  max-width: 100%;
  height: auto;
}

.public-verify-admin-embed .photo-upload__status--error .public-check-in-verify__item-label {
  color: var(--admin-v2-color-text);
}

.public-verify-admin-embed .photo-upload__status--error .public-check-in-verify__item-value {
  color: var(--admin-v2-color-text-muted);
}

/* reports.css */
/*
 * Admin Reports
 * Card-first rapportage layout voor overview, revenue, tax, products, payments en subscriptions.
 */

.reports-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: var(--admin-font-size-base);
}

.reports-page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.reports-page > .admin-page-content.reports-page-content {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/*
 * Finance specification — payment status chips: 4-column grid; chips hug content
 * (justify-items: start + width: fit-content) so short labels are not stretched full column.
 */
.reports-page .reports-payment-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
  align-items: start;
  justify-items: start;
}

.reports-page .reports-payment-status-grid > .form-checkbox-wrapper.products-workspace-checkbox-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.reports-page .reports-payment-status-grid > .form-checkbox-wrapper.products-workspace-checkbox-chip .form-checkbox-label {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .reports-page .reports-payment-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.reports-page-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.reports-page-header__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.reports-page-header__nav + .products-workspace-toolbar,
.reports-page-header__nav + .admin-toolbar {
  margin-top: var(--admin-toolbar-gap);
}

/* Workspace-variant reports (tabs-only header): toolbar is sibling of header, not child — same gap as period toolbar under nav */
.reports-page-header + .products-workspace-toolbar {
  margin-top: var(--admin-toolbar-gap);
}

/*
 * Domain workspace settings (products/categories): same vertical stack as Reports Overview —
 * section tabs, then toolbar inside reports-page-header, then main content with reports-page gap.
 * Reference: ReportsShared analytics header (nav + WorkspaceToolbar child of header).
 */
.members-workspace-settings-page {
  gap: var(--space-6);
}

/* Products/categories workspace settings: Storefront|Beheer + Save on one toolbar row */
.reports-page-header--domain-settings .reports-domain-settings-toolbar {
  margin-bottom: 0;
}

.reports-workspace-toolbar + .products-control-dropdown-panel {
  margin-top: var(--admin-toolbar-gap);
}

.reports-section-nav__button {
  height: var(--admin-control-filter);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.reports-section-nav__button:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-surface);
}

.reports-section-nav__button--active {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--accent-glow);
  font-weight: var(--font-semibold);
}

.reports-workspace-toolbar {
  width: 100%;
  margin: 0;
  background: transparent;
}

.reports-period-toggle {
  min-width: 124px;
}

.reports-export-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.reports-period-dropdown-panel {
  width: 100%;
}

.reports-period-dropdown-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.reports-period-dropdown-section {
  min-width: 0;
}

.reports-period-dropdown-actions {
  margin-top: var(--space-2);
}

.reports-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.reports-period-selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
}

.reports-period-selector__button {
  height: var(--control-height-md);
  border: 0;
  border-radius: var(--admin-radius-sm);
  background: transparent;
  color: var(--text-secondary);
  padding: 0 var(--space-3);
  font-size: var(--control-font-md);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.reports-period-selector__button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.reports-period-selector__button--active {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-sm);
}

.reports-export-button {
  height: var(--control-height-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text-secondary);
  font-size: var(--control-font-md);
  font-weight: var(--font-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.reports-export-button:hover {
  border-color: color-mix(in srgb, var(--border) 45%, var(--text-primary));
  color: var(--text-primary);
  background: var(--bg-surface);
}

.reports-kpi-grid {
  display: grid;
  gap: var(--space-3);
}

.reports-kpi-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reports-kpi-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reports-kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 124px;
}

.reports-kpi-card__label {
  margin: 0;
  font-size: var(--admin-font-size-base);
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: var(--font-semibold);
}

.reports-kpi-card__value {
  margin: 0;
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  line-height: 1.15;
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.reports-kpi-card__trend {
  margin: 0;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: transparent;
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
}

.reports-kpi-card__trend--up {
  color: var(--success);
}

.reports-kpi-card__trend--down {
  color: var(--error);
}

.reports-kpi-card__trend--neutral {
  color: var(--text-secondary);
}

.reports-kpi-card__sub {
  margin: 0;
  font-size: var(--admin-font-size-base);
  color: var(--text-muted);
}

.reports-kpi-card--success .reports-kpi-card__value {
  color: var(--success);
}

.reports-kpi-card--warning .reports-kpi-card__value {
  color: var(--warning);
}

.reports-kpi-card--error .reports-kpi-card__value {
  color: var(--error);
}

.reports-card {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
}

.reports-card__header {
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.reports-card__header h2 {
  margin: 0;
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  color: var(--text-primary);
}

.reports-card__badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
}

.reports-card__body {
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  max-width: 100%;
  font-size: var(--admin-font-size-base);
}

.reports-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.reports-two-column > * {
  min-width: 0;
  width: 100%;
}

.reports-chart-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.reports-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.reports-chart-legend span {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.reports-chart-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--admin-radius-pill);
  margin-right: 6px;
}

.reports-chart-legend__dot--current {
  background: var(--admin-v2-chart-compare-current);
}

.reports-chart-legend__dot--previous {
  background: var(--admin-v2-chart-compare-previous);
}

.reports-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  min-width: 680px;
}

.reports-bar-chart__column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.reports-bar-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 172px;
  width: 100%;
  justify-content: center;
}

.reports-bar {
  flex: 1;
  max-width: 18px;
  min-height: 3px;
  border-radius: var(--admin-radius-sm) var(--admin-radius-sm) 0 0;
}

.reports-bar--current {
  background: var(--admin-v2-chart-compare-current);
  opacity: 0.9;
}

.reports-bar--previous {
  background: var(--admin-v2-chart-compare-previous);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.reports-bar-chart__label {
  font-size: var(--text-2xs-plus);
  color: var(--text-muted);
  text-transform: lowercase;
}

.reports-bar[data-size="27"] { height: 27%; }
.reports-bar[data-size="29"] { height: 29%; }
.reports-bar[data-size="30"] { height: 30%; }
.reports-bar[data-size="31"] { height: 31%; }
.reports-bar[data-size="33"] { height: 33%; }
.reports-bar[data-size="35"] { height: 35%; }
.reports-bar[data-size="36"] { height: 36%; }
.reports-bar[data-size="37"] { height: 37%; }
.reports-bar[data-size="39"] { height: 39%; }
.reports-bar[data-size="40"] { height: 40%; }
.reports-bar[data-size="41"] { height: 41%; }
.reports-bar[data-size="43"] { height: 43%; }
.reports-bar[data-size="44"] { height: 44%; }
.reports-bar[data-size="45"] { height: 45%; }
.reports-bar[data-size="47"] { height: 47%; }
.reports-bar[data-size="48"] { height: 48%; }
.reports-bar[data-size="50"] { height: 50%; }
.reports-bar[data-size="52"] { height: 52%; }
.reports-bar[data-size="53"] { height: 53%; }
.reports-bar[data-size="55"] { height: 55%; }
.reports-bar[data-size="58"] { height: 58%; }

.reports-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

.reports-table thead th {
  text-align: left;
  font-size: var(--text-2xs-plus);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  padding: 10px var(--space-3);
}

.reports-table tbody td,
.reports-table tfoot td {
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.reports-table :is(thead th, tbody td, tfoot td) {
  overflow-wrap: anywhere;
}

.reports-table :is(thead th, tbody td, tfoot td):first-child {
  padding-left: var(--space-2);
}

.reports-table :is(thead th, tbody td, tfoot td):last-child {
  padding-right: var(--space-2);
}

.reports-table tbody tr:hover td {
  background: var(--bg-hover);
}

.reports-table tfoot td {
  border-top: 2px solid color-mix(in srgb, var(--border) 55%, var(--text-primary));
  font-weight: var(--font-semibold);
  background: var(--bg-deep);
}

.reports-table__numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.reports-table thead th.reports-table__numeric {
  text-align: right;
}

.reports-table:has(tbody td:nth-child(1).reports-table__numeric) thead th:nth-child(1),
.reports-table:has(tbody td:nth-child(2).reports-table__numeric) thead th:nth-child(2),
.reports-table:has(tbody td:nth-child(3).reports-table__numeric) thead th:nth-child(3),
.reports-table:has(tbody td:nth-child(4).reports-table__numeric) thead th:nth-child(4),
.reports-table:has(tbody td:nth-child(5).reports-table__numeric) thead th:nth-child(5),
.reports-table:has(tbody td:nth-child(6).reports-table__numeric) thead th:nth-child(6),
.reports-table:has(tbody td:nth-child(7).reports-table__numeric) thead th:nth-child(7),
.reports-table:has(tbody td:nth-child(8).reports-table__numeric) thead th:nth-child(8) {
  text-align: right;
}

.reports-table__mono {
  font-family: var(--font-mono);
}

.reports-table__strong {
  font-weight: var(--font-semibold);
}

.reports-table__muted {
  color: var(--text-secondary);
  font-size: var(--admin-font-size-base);
}

.reports-table__numeric--success {
  color: var(--success);
}

.reports-table__numeric--warning {
  color: var(--warning);
}

.reports-table__numeric--error {
  color: var(--error);
}

.reports-table--summary {
  min-width: 100%;
}

.reports-table--summary td:first-child {
  font-weight: var(--font-medium);
}

.reports-hbar-list {
  display: flex;
  flex-direction: column;
}

.reports-hbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.reports-hbar-row:last-child {
  border-bottom: 0;
}

.reports-hbar-row__label {
  min-width: 150px;
  font-size: var(--admin-font-size-base);
  color: var(--text-primary);
}

.reports-hbar-row__track {
  flex: 1;
  height: 24px;
  border-radius: var(--admin-radius-sm);
  background: var(--bg-surface);
  overflow: hidden;
}

.reports-hbar-row__fill {
  height: 100%;
  border-radius: var(--admin-radius-sm);
}

.reports-hbar-row__fill--accent { background: var(--accent); }
.reports-hbar-row__fill--info { background: var(--info); }
.reports-hbar-row__fill--warning { background: var(--warning); }
.reports-hbar-row__fill--success { background: var(--success); }
.reports-hbar-row__fill--neutral { background: color-mix(in srgb, var(--text-muted) 80%, var(--bg-surface)); }

.reports-hbar-row__fill[data-size="6"] { width: 6%; }
.reports-hbar-row__fill[data-size="11"] { width: 11%; }
.reports-hbar-row__fill[data-size="12"] { width: 12%; }
.reports-hbar-row__fill[data-size="15"] { width: 15%; }
.reports-hbar-row__fill[data-size="18"] { width: 18%; }
.reports-hbar-row__fill[data-size="22"] { width: 22%; }
.reports-hbar-row__fill[data-size="26"] { width: 26%; }
.reports-hbar-row__fill[data-size="31"] { width: 31%; }
.reports-hbar-row__fill[data-size="34"] { width: 34%; }
.reports-hbar-row__fill[data-size="48"] { width: 48%; }

.reports-hbar-row__value {
  min-width: 95px;
  text-align: right;
  font-size: var(--admin-font-size-base);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.reports-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: transparent;
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
}

.reports-badge--accent { color: var(--accent); }
.reports-badge--success { color: var(--success); }
.reports-badge--warning { color: var(--warning); }
.reports-badge--error { color: var(--error); }
.reports-badge--neutral { color: var(--text-secondary); }

.reports-donut-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-width: min(540px, 100%);
}

.reports-donut {
  width: 188px;
  height: 188px;
  border-radius: var(--admin-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reports-donut--payments {
  --reports-donut-ideal: var(--accent);
  --reports-donut-card: var(--info);
  --reports-donut-bancontact: var(--warning);
  --reports-donut-paypal: color-mix(in srgb, var(--info) 80%, var(--accent));
  --reports-donut-cash: var(--success);
  --reports-donut-other: var(--text-muted);
  background: conic-gradient(
    var(--reports-donut-ideal) 0% 62%,
    var(--reports-donut-card) 62% 79%,
    var(--reports-donut-bancontact) 79% 86%,
    var(--reports-donut-paypal) 86% 91%,
    var(--reports-donut-cash) 91% 96%,
    var(--reports-donut-other) 96% 100%
  );
}

.reports-donut__inner {
  width: 104px;
  height: 104px;
  border-radius: var(--admin-radius-pill);
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.reports-donut__value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1;
}

.reports-donut__label {
  margin-top: 4px;
  font-size: var(--admin-font-size-base);
  color: var(--text-muted);
}

.reports-donut-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  min-width: 200px;
}

.reports-donut-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reports-donut-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--admin-radius-pill);
  flex-shrink: 0;
}

.reports-donut-legend__dot--ideal { background: var(--reports-donut-ideal, var(--admin-v2-chart-series-1)); }
.reports-donut-legend__dot--card { background: var(--reports-donut-card, var(--admin-v2-chart-series-2)); }
.reports-donut-legend__dot--bancontact { background: var(--reports-donut-bancontact, var(--admin-v2-chart-series-3)); }
.reports-donut-legend__dot--paypal { background: var(--reports-donut-paypal, var(--admin-v2-chart-series-4)); }
.reports-donut-legend__dot--cash { background: var(--reports-donut-cash, var(--admin-v2-chart-series-5)); }
.reports-donut-legend__dot--other { background: var(--reports-donut-other, var(--admin-v2-chart-series-6)); }

.reports-donut-legend__label {
  color: var(--text-primary);
  font-size: var(--admin-font-size-base);
}

.reports-donut-legend__value {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
}

.reports-alert-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reports-alert-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.reports-alert-row:hover {
  background: var(--bg-surface);
}

.reports-alert-row__icon {
  width: var(--admin-control-compact);
  height: var(--admin-control-compact);
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.reports-alert-row__icon--danger {
  color: var(--error);
}

.reports-alert-row__icon--warning {
  color: var(--warning);
}

.reports-alert-row__copy {
  min-width: 0;
  flex: 1;
}

.reports-alert-row__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
}

.reports-alert-row__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--admin-font-size-base);
}

.reports-alert-row__value {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
}

.reports-alert-row__value--danger { color: var(--error); }
.reports-alert-row__value--warning { color: var(--warning); }

.reports-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.reports-status-grid__item {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  padding: var(--space-3) var(--space-2);
  text-align: center;
}

.reports-status-grid__item--success .reports-status-grid__value { color: var(--success); }
.reports-status-grid__item--warning .reports-status-grid__value { color: var(--warning); }
.reports-status-grid__item--info .reports-status-grid__value { color: var(--info); }
.reports-status-grid__item--error .reports-status-grid__value { color: var(--error); }

.reports-status-grid__value {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1;
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.reports-status-grid__label {
  margin: 4px 0 0;
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
}

.reports-page-footnote {
  font-size: var(--admin-font-size-base);
  color: var(--text-muted);
  padding: 0 var(--space-1);
}

.reports-page-footnote p {
  margin: 0;
}

@media (max-width: 1280px) {
  .reports-kpi-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-kpi-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .reports-page-header__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .reports-workspace-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .reports-workspace-toolbar .products-workspace-toolbar__left,
  .reports-workspace-toolbar .products-workspace-toolbar__right {
    width: 100%;
    justify-content: flex-start;
  }

  .reports-section-nav__button {
    flex: 0 0 auto;
  }

  .reports-period-selector {
    max-width: 100%;
    overflow-x: auto;
  }

  .reports-donut-layout {
    min-width: 100%;
    flex-direction: column;
    gap: var(--space-4);
  }

  .reports-donut-legend {
    width: 100%;
  }

  .reports-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-table {
    min-width: 620px;
  }
}

@media (max-width: 640px) {
  .reports-kpi-grid--4,
  .reports-kpi-grid--3 {
    grid-template-columns: 1fr;
  }

  .reports-card__header,
  .reports-card__body {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .reports-status-grid {
    grid-template-columns: 1fr;
  }

  .reports-hbar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .reports-hbar-row__label,
  .reports-hbar-row__value {
    min-width: 0;
  }

  .reports-hbar-row__track {
    width: 100%;
  }
}

/* revenue.css */
/*
 * Revenue Today — investor demo surface (admin)
 * Outcome Trinity: hero + Wacht op jou + Beschermd sinds middernacht
 */

.revenue-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--admin-font-size-base);
}

.revenue-page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.revenue-page > .admin-page-content.revenue-page-content {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* P1 — Hero */
.revenue-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-2);
}

.revenue-hero__greeting {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.revenue-hero__label {
  margin: 0;
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
}

.revenue-hero__value {
  margin: 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.revenue-hero__split {
  margin: 0;
  font-size: var(--admin-font-size-base);
  color: var(--text-muted);
}

/* P2 / P3 — section cards (compose reports-card) */
.revenue-section {
  min-width: 0;
}

.revenue-section .reports-card__header h2 {
  font-size: var(--card-title-size);
}

.revenue-section__aggregate {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}

.revenue-decision-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.revenue-decision-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-control);
  background: var(--bg-surface);
}

.revenue-decision-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.revenue-decision-row__label {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.revenue-decision-row__amount {
  color: var(--text-secondary);
  font-weight: var(--font-semibold);
}

.revenue-decision-row--link {
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

.revenue-decision-row--link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.revenue-decision-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* P3 — overnight feed */
.revenue-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.revenue-feed__row {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--admin-border-subtle);
  font-size: var(--admin-font-size-base);
  color: var(--text-primary);
}

.revenue-feed__row:last-child {
  border-bottom: none;
}

.revenue-feed__time {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.revenue-feed__label {
  min-width: 0;
}

.revenue-feed__amount {
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}

.revenue-feed__row--wow {
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-radius: var(--admin-radius-control);
  padding: var(--space-2) var(--space-3);
  border-bottom: none;
}

/* Demo mode — moat beat */
.revenue-page--demo-moat .revenue-hero,
.revenue-page--demo-moat .revenue-section--decisions {
  opacity: 0.4;
  pointer-events: none;
}

.revenue-page--demo-moat .revenue-section--overnight {
  opacity: 1;
}

/* Sections 4–5 stubs (below fold) */
.revenue-stub-section {
  opacity: 0.85;
}

.revenue-opportunity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.revenue-opportunity-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-control);
  background: var(--bg-surface);
}

.revenue-recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.revenue-recent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--admin-border-subtle);
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
}

.revenue-recent-row:last-child {
  border-bottom: none;
}

.revenue-month-total {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Compound customer (Layer 2) */
.revenue-customer-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.revenue-customer-back {
  align-self: flex-start;
}

.revenue-customer-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.revenue-customer-header__name {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.revenue-customer-header__summary {
  margin: 0;
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.revenue-customer-domains {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.revenue-customer-domain-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-control);
  background: var(--bg-surface);
}

.revenue-customer-domain-row__domain {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.revenue-customer-domain-row__signal {
  color: var(--text-secondary);
}

.revenue-customer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.revenue-customer-header__recommendation {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--admin-font-size-base);
}

/* Subnav */
.revenue-subnav {
  margin-bottom: var(--space-2);
}

/* KPI strip (secondary hero metrics) */
.revenue-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.revenue-kpi-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 8rem;
}

.revenue-kpi-strip__label {
  font-size: var(--admin-font-size-sm, 0.875rem);
  color: var(--text-muted);
}

.revenue-kpi-strip__value {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.revenue-proof-line {
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.revenue-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Settings */
.revenue-toggle-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--admin-radius-control);
  font-size: var(--admin-font-size-sm, 0.875rem);
  font-weight: var(--font-medium);
  background: var(--bg-muted);
  color: var(--text-muted);
}

.revenue-toggle-pill--on {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.revenue-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.revenue-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.revenue-checklist__box {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--admin-border-light);
  border-radius: var(--radius-sm, 4px);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.revenue-checklist__box--checked {
  background: var(--primary);
  border-color: var(--primary);
}

.revenue-threshold-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.revenue-threshold-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-control);
  background: var(--bg-surface);
}

.revenue-threshold-row__label {
  color: var(--text-secondary);
}

.revenue-threshold-row__value {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Intelligence */
.revenue-forecast-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.revenue-forecast-pair__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-control);
  background: var(--bg-surface);
}

.revenue-forecast-pair__column--positive {
  border-color: color-mix(in srgb, var(--success) 30%, var(--admin-border-light));
}

.revenue-forecast-pair__label {
  font-size: var(--admin-font-size-sm, 0.875rem);
  color: var(--text-muted);
}

.revenue-forecast-pair__value {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.revenue-forecast-pair__period {
  font-size: var(--admin-font-size-sm, 0.875rem);
  color: var(--text-secondary);
}

.revenue-forecast-pair__diff {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.revenue-disclaimer {
  margin: 0;
  font-size: var(--admin-font-size-sm, 0.875rem);
  color: var(--text-muted);
  font-style: italic;
}

.revenue-radar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
}

.revenue-radar__zone {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-control);
  background: var(--bg-surface);
}

.revenue-radar__label {
  font-size: var(--admin-font-size-sm, 0.875rem);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.revenue-radar__value {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.revenue-radar__highlights {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.revenue-opportunity-card--positive {
  border-color: color-mix(in srgb, var(--success) 25%, var(--admin-border-light));
}

.revenue-opportunity-card__detail {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

/* Customers */
.revenue-health-bar {
  display: flex;
  height: 0.75rem;
  border-radius: var(--admin-radius-control);
  overflow: hidden;
  background: var(--bg-muted);
  margin-bottom: var(--space-3);
}

.revenue-health-bar__segment {
  min-width: 2px;
}

.revenue-health-bar__segment--growth {
  background: var(--admin-v2-state-information-text);
}

.revenue-health-bar__segment--healthy {
  background: var(--success);
}

.revenue-health-bar__segment--risk {
  background: var(--warning);
}

.revenue-health-bar__segment--lost {
  background: var(--danger);
}

.revenue-health-bar__segment--recovered {
  background: color-mix(in srgb, var(--success) 60%, var(--admin-v2-state-information-text));
}

.revenue-health-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--admin-font-size-sm, 0.875rem);
  color: var(--text-secondary);
}

.revenue-health-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.revenue-health-legend__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.revenue-health-legend__dot--growth {
  background: var(--admin-v2-state-information-text);
}

.revenue-health-legend__dot--healthy {
  background: var(--success);
}

.revenue-health-legend__dot--risk {
  background: var(--warning);
}

.revenue-health-legend__dot--lost {
  background: var(--danger);
}

.revenue-health-legend__dot--recovered {
  background: color-mix(in srgb, var(--success) 60%, var(--admin-v2-state-information-text));
}

.revenue-featured-card {
  border-color: color-mix(in srgb, var(--danger) 25%, var(--admin-border-light));
}

.revenue-featured-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.revenue-featured-card__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.revenue-featured-card__score {
  color: var(--text-secondary);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.revenue-featured-card__meta {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
}

.revenue-featured-card__signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.revenue-featured-card__signal {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.revenue-featured-card__signal-label {
  font-weight: var(--font-semibold);
  color: var(--text-muted);
}

.revenue-featured-card__diagnosis {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.revenue-featured-card__automatic,
.revenue-featured-card__recommendation {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.revenue-featured-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.revenue-health-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--admin-radius-control);
  font-size: var(--admin-font-size-sm, 0.875rem);
  font-weight: var(--font-semibold);
}

.revenue-health-badge--critical {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.revenue-health-badge--warning {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}

.revenue-health-badge--healthy {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.revenue-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.revenue-filter-chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--admin-radius-pill, 999px);
  border: 1px solid var(--admin-border-light);
  font-size: var(--admin-font-size-sm, 0.875rem);
  color: var(--text-secondary);
}

.revenue-filter-chip--active {
  background: var(--bg-muted);
  border-color: var(--primary);
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* Results */
.revenue-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  min-height: 10rem;
  padding-top: var(--space-4);
}

.revenue-bar-chart__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 3rem;
}

.revenue-bar-chart__bar {
  width: 100%;
  max-width: 3rem;
  min-height: 0.5rem;
  background: var(--primary);
  border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
  transition: height 0.2s ease;
}

.revenue-bar-chart__bar--projection {
  background: color-mix(in srgb, var(--primary) 40%, transparent);
  border: 1px dashed var(--primary);
}

.revenue-bar-chart__label {
  font-size: var(--admin-font-size-sm, 0.875rem);
  color: var(--text-muted);
}

.revenue-bar-chart__value {
  font-size: var(--admin-font-size-sm, 0.875rem);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.revenue-retention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
}

.revenue-retention-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-control);
  background: var(--bg-surface);
}

.revenue-retention-card__value {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.revenue-retention-card__label {
  font-size: var(--admin-font-size-sm, 0.875rem);
  color: var(--text-secondary);
}


/* seo.css */
/**
 * Admin SEO Page Styles
 *
 * Yoast-style SEO management suite with tabbed navigation.
 * Follows Reports page pattern for tab nav and admin design system for content.
 *
 * @module contexts/admin/seo
 */

/* ===========================================
   PAGE LAYOUT
   =========================================== */

.seo-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: var(--admin-font-size-base);
}

.seo-page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.seo-page > .admin-page-content.seo-page-content {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ===========================================
   TAB NAVIGATION (mirrors reports pattern)
   =========================================== */

.seo-page-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.seo-page-header__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.seo-nav__button {
  height: var(--admin-control-filter);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.seo-nav__button:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-surface);
}

.seo-nav__button--active {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--accent-glow);
  font-weight: var(--font-semibold);
}

.seo-workspace-toolbar {
  width: 100%;
  margin: 0;
  background: transparent;
}

/* ===========================================
   TAB CONTENT
   =========================================== */

.seo-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.seo-tab-intro {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

/* ===========================================
   KPI GRID
   =========================================== */

.seo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.seo-kpi-grid--compact {
  gap: var(--space-3);
}

.seo-kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
}

.seo-kpi-card__label {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
  margin: 0;
  font-weight: var(--font-medium);
  letter-spacing: 0.03em;
}

.seo-kpi-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.seo-kpi-card__trend {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  margin: 0;
}

.seo-kpi-card__trend--up {
  color: var(--success);
}

.seo-kpi-card__trend--down {
  color: var(--danger);
}

/* ===========================================
   SEO SCORE RING
   =========================================== */

.seo-score-ring {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(
    var(--success) 0%,
    var(--success) 78%,
    var(--border) 78%,
    var(--border) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.seo-score-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--bg-surface);
}

.seo-score-ring__value {
  position: relative;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ===========================================
   CARDS
   =========================================== */

.seo-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.seo-card__title {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.03em;
}

/* ===========================================
   SECTIONS (settings card pattern)
   =========================================== */

.seo-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.seo-section__title {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.seo-section__title svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.seo-section__badge {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-normal);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}

.seo-section__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.seo-section__header-row .seo-section__title {
  margin: 0;
}

.seo-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ===========================================
   FORM FIELDS
   =========================================== */

.seo-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.seo-field__label {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.seo-field__label svg {
  color: var(--text-secondary);
}

.seo-field__counter {
  font-size: var(--admin-font-size-base);
  color: var(--text-muted);
  text-align: right;
}

.seo-field__help {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.seo-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* ===========================================
   SERP PREVIEW
   =========================================== */

.seo-serp-preview {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.seo-serp-preview__title {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  /* theme-literal-exception: google-serp-link-color */ color: #1a0dab;
  margin: 0;
  cursor: pointer;
}

.seo-serp-preview__url {
  font-size: var(--admin-font-size-base);
  /* theme-literal-exception: google-serp-url-color */ color: #006621;
  margin: 2px 0;
}

.seo-serp-preview__desc {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ===========================================
   SEPARATOR OPTIONS
   =========================================== */

.seo-separator-options {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.seo-separator-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: var(--admin-control-field);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.seo-separator-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seo-separator-option:hover {
  border-color: var(--border-hover);
}

.seo-separator-option--active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: var(--font-semibold);
}

/* ===========================================
   TOGGLE ROWS
   =========================================== */

.seo-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--admin-font-size-base);
  color: var(--text-primary);
  cursor: pointer;
}

.seo-toggle-row input[type="checkbox"] {
  cursor: pointer;
}

.seo-toggle-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ===========================================
   TABLES
   =========================================== */

.seo-table {
  width: 100%;
  border-collapse: collapse;
}

.seo-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}

.seo-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--admin-font-size-base);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.seo-table tbody tr:last-child td {
  border-bottom: none;
}

.seo-table tbody tr:hover {
  background: var(--bg-hover);
}

.seo-table__numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.seo-table code {
  font-family: var(--font-mono);
  font-size: var(--admin-font-size-base);
  color: var(--text-primary);
}

/* ===========================================
   STATUS BADGES
   =========================================== */

.seo-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
}

.seo-status-badge--success {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.seo-status-badge--info {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
}

/* ===========================================
   ISSUES LIST (Dashboard)
   =========================================== */

.seo-issues-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.seo-issue-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.seo-issue-row:last-child {
  border-bottom: none;
}

.seo-issue-priority {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  letter-spacing: 0.03em;
  min-width: 56px;
  justify-content: center;
}

.seo-issue-priority--high {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.seo-issue-priority--medium {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}

.seo-issue-priority--low {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
}

.seo-issue-label {
  flex: 1;
  font-size: var(--admin-font-size-base);
  color: var(--text-primary);
}

.seo-issue-count {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ===========================================
   TWO COLUMN LAYOUT
   =========================================== */

.seo-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* ===========================================
   REDIRECT ARROW
   =========================================== */

.seo-redirect-arrow {
  text-align: center;
  color: var(--text-muted);
  width: 40px;
}

/* ===========================================
   ADD BUTTON
   =========================================== */

.seo-add-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--admin-control-compact);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.seo-add-button:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--bg-surface);
}

/* ===========================================
   SITEMAP META
   =========================================== */

.seo-sitemap-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.seo-sitemap-meta__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seo-sitemap-meta__label {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  font-weight: var(--font-medium);
}

.seo-sitemap-meta__value {
  font-size: var(--admin-font-size-base);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.seo-sitemap-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent);
  font-size: var(--admin-font-size-base);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.seo-sitemap-link:hover {
  text-decoration: underline;
}

/* ===========================================
   EXCLUDED URLS LIST
   =========================================== */

.seo-excluded-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.seo-excluded-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.seo-excluded-item code {
  font-family: var(--font-mono);
  font-size: var(--admin-font-size-base);
  color: var(--text-primary);
}

.seo-excluded-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.seo-excluded-remove:hover {
  color: var(--danger);
}

/* ===========================================
   CONNECTION STATUS
   =========================================== */

.seo-connection-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
}

.seo-connection-status--connected {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.seo-connection-status--disconnected {
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-muted);
}

/* ===========================================
   CODE EDITOR
   =========================================== */

.seo-code-editor {
  font-family: var(--font-mono) !important;
  font-size: var(--admin-font-size-base) !important;
  line-height: 1.6;
  background: var(--bg-deep);
  white-space: pre;
  tab-size: 2;
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 1024px) {
  .seo-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .seo-two-column {
    grid-template-columns: 1fr;
  }

  .seo-field-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .seo-page-header__nav {
    gap: var(--space-1);
  }

  .seo-nav__button {
    height: var(--admin-control-compact);
    padding: 0 var(--space-2);
    font-size: 12px;
  }

  .seo-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .seo-kpi-card__value {
    font-size: 1.25rem;
  }
}

/* settings-sidebar.css */
/**
 * ADMIN CONTEXT: Settings Tab Bar
 * 
 * Horizontale tab navigatie voor settings pagina's.
 * Alleen actief op /admin/settings/* routes.
 *
 * LAYOUT:
 * ┌─────────────────────────────────────────────┐
 * │ [Algemeen] [Verzend.] [Betaling] [...]      │
 * ├─────────────────────────────────────────────┤
 * │  Settings content                            │
 * │                                              │
 * └─────────────────────────────────────────────┘
 */

/* =================================================================
   SETTINGS LAYOUT — tabs + content (vertical stack)
   ================================================================= */

.settings-layout {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

/* =================================================================
   SETTINGS TABS (horizontal tab bar)
   ================================================================= */

.settings-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--control-font-md);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  white-space: nowrap;
  transition: color var(--transition-fast), box-shadow var(--transition-fast);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  line-height: 1.4;
}

.settings-tabs__tab:hover {
  color: var(--text-primary);
}

.settings-tabs__tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--font-medium);
}

.settings-tabs__icon {
  flex-shrink: 0;
  opacity: 0.6;
}

.settings-tabs__tab.active .settings-tabs__icon {
  opacity: 1;
}

/* =================================================================
   SETTINGS CONTENT (main area)
   ================================================================= */

.settings-content {
  flex: 1;
  min-width: 0;
}

.settings-master-detail {
  grid-template-columns: var(--admin-workspace-list-col-width) minmax(0, 1fr);
}

.settings-master-detail--detail-only {
  grid-template-columns: minmax(0, 1fr);
}

.settings-master-detail--detail-only .settings-layout__detail-card {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settings-layout__list-card,
.settings-layout__detail-card {
  min-height: 0;
}

.settings-master-detail > .settings-layout__detail-card {
  display: flex;
  flex-direction: column;
}

.settings-layout__detail-sections {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-layout__list-card .product-workspace-row__meta {
  color: var(--text-muted);
  white-space: normal;
}

/* =================================================================
   RESPONSIVE: Tabs scroll horizontaal op klein scherm
   ================================================================= */

@media (max-width: 768px) {
  .settings-tabs__tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--control-font-sm);
  }
}

/* settings.css */
/**
 * ADMIN CONTEXT: Settings Page
 * 
 * Styling voor de admin settings pagina's: secties, toggle cards,
 * subsecties, badges, checkbox lists, en cards.
 */

/* =================================================================
   SETTINGS TWO-COLUMN LAYOUT
   ================================================================= */

.settings-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.settings-two-col > .settings-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.settings-two-col > .settings-col > .settings-section:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .settings-two-col {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   SETTINGS SECTIONS — Card-style grouped content
   ================================================================= */

.settings-section {
  margin-bottom: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--admin-v2-shadow-xs);
  padding: var(--space-5) var(--space-5);
}

/* Vertical spacing between consecutive form-groups inside sections */
.settings-section > .form-group + .form-group {
  margin-top: var(--space-4);
}

.settings-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.settings-section-header--split {
  justify-content: space-between;
}

.settings-section-title {
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  margin-bottom: 0;
  color: var(--text-primary);
}

.settings-section-description {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.settings-section-description--compact {
  margin-bottom: 0;
}

.settings-confirm-actions {
  margin-top: var(--space-2);
}

.settings-disabled-panel--inactive {
  opacity: 0.4;
  pointer-events: none;
}

.settings-detail-page,
.settings-general-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.settings-detail-page__column,
.settings-general-page__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.settings-detail-page__actions {
  grid-column: 1 / -1;
}

.settings-detail-page .settings-section,
.settings-general-page .settings-section {
  margin-bottom: 0;
  background: transparent;
}

.settings-detail-page--single-column,
.settings-detail-page--profile-mode,
.settings-general-page--profile-mode {
  grid-template-columns: minmax(0, 1fr);
}

.settings-detail-page .settings-section-description,
.settings-detail-page .admin-v2-settings-stack__section-description,
.settings-detail-page .form-hint,
.settings-detail-page .form-error,
.settings-detail-page .type-option-description,
.settings-detail-page .form-radio__label,
.settings-detail-page .input-suffix,
.settings-general-page .settings-section-description,
.settings-general-page .admin-v2-settings-stack__section-description,
.settings-general-page .form-hint,
.settings-general-page .form-error,
.settings-general-page .type-option-description,
.settings-general-page .form-radio__label,
.settings-general-page .input-suffix {
  font-size: var(--admin-workspace-detail-font);
}

.settings-detail-page .form-input,
.settings-detail-page .form-select,
.settings-general-page .form-input,
.settings-general-page .form-select {
  min-height: var(--admin-control-field);
  height: var(--admin-control-field);
  padding: 0 12px;
  border-radius: var(--admin-radius-md);
  background: var(--bg-surface);
  font-size: var(--admin-workspace-detail-font);
  box-shadow: none;
}

.settings-detail-page .form-select,
.settings-general-page .form-select {
  background-color: var(--admin-v2-color-text-inverse);
}

.settings-general-page .type-selector {
  margin-bottom: 0;
}

.settings-general-page .type-options {
  margin-top: var(--space-3);
}

.settings-general-page .type-option {
  min-height: 92px;
  padding: var(--space-3);
  border-width: 1px;
  border-radius: var(--radius-lg);
  background: transparent;
  gap: var(--space-1);
}

.settings-general-page .type-option:hover {
  background: transparent;
}

.settings-general-page .type-option.selected {
  background: transparent;
  box-shadow: none;
  border-color: var(--accent);
}

.settings-general-page .type-option-label {
  font-size: var(--admin-workspace-detail-font);
}

.settings-general-form-row {
  align-items: start;
}

.settings-general-choice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.settings-general-choice + .settings-general-choice {
  border-top: 1px solid var(--border);
}

.settings-general-choice__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.settings-general-choice .form-label {
  margin-bottom: 0;
}

.settings-general-vat-rates {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.settings-general-vat-rate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
}

.settings-general-page .products-workspace-checkbox-chip,
.settings-detail-page .products-workspace-checkbox-chip {
  background: transparent;
}

.settings-domains-dns-records {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-shipping-method__header {
  margin-bottom: var(--space-4);
}

.settings-shipping-method__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.settings-shipping-method__toggle {
  background: transparent;
}

.settings-shipping-workspace-grid {
  min-height: 0;
}

.settings-shipping-list-card,
.settings-shipping-detail-card {
  min-height: 0;
}

.settings-shipping-list-card__actions {
  padding: var(--space-4);
  border-top: 1px solid var(--border);
}

.settings-shipping-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text-secondary);
}

.settings-shipping-avatar--hero {
  width: 3rem;
  height: 3rem;
}

.settings-payment-workspace-grid {
  min-height: 0;
}

.settings-payment-list-card,
.settings-payment-detail-card {
  min-height: 0;
}

.settings-payment-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text-secondary);
}

.settings-payment-avatar--hero {
  width: 3rem;
  height: 3rem;
}

.settings-general-rate-input {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-general-default-radio {
  white-space: nowrap;
}

.settings-general-add-button {
  margin-top: var(--space-3);
}

.contact-settings-social-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.contact-settings-social-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.contact-settings-social-remove {
  display: inline-flex;
  align-items: center;
  min-height: var(--admin-control-field);
}

.contact-settings-social-add {
  width: fit-content;
}

@media (max-width: 900px) {
  .settings-detail-page,
  .settings-general-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-general-vat-rate-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-general-choice {
    flex-direction: column;
  }

  .contact-settings-social-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =================================================================
   SETTINGS BADGES
   ================================================================= */

.settings-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--space-2);
  font-size: 0.625rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
}

.settings-badge--beta {
  background-color: var(--warning-dim);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.settings-badge--new {
  background-color: var(--info-dim);
  color: var(--info);
  border: 1px solid var(--info);
}

/* =================================================================
   SETTINGS SUBSECTIONS
   ================================================================= */

.settings-subsection {
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.settings-subsection:first-child {
  padding-top: 0;
  border-top: none;
}

.settings-subsection-title {
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  margin-bottom: var(--space-3);
  margin-top: var(--space-2);
  color: var(--text-primary);
}

.settings-section-header .settings-subsection-title[title] {
  cursor: pointer;
}

.settings-subsection-title:first-child {
  margin-top: 0;
}

/* =================================================================
   SETTINGS TOGGLE CARD
   ================================================================= */

.settings-toggle-card {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background-color: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.settings-toggle-card > div:first-child {
  flex: 1;
  min-width: 0;
}

.settings-toggle-card .form-label {
  margin-bottom: var(--space-1);
}

.settings-toggle-card .form-hint {
  display: block;
  line-height: 1.4;
}

.settings-toggle-card .form-checkbox-wrapper {
  flex-shrink: 0;
  white-space: nowrap;
  padding-top: var(--space-1);
}

/* =================================================================
   SETTINGS LIST ITEMS
   ================================================================= */

.settings-list-item {
  display: grid;
  grid-template-columns: 1fr 100px auto auto;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.settings-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.settings-list-row:last-child {
  border-bottom: none;
}

.settings-list-row-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.settings-icon {
  font-size: var(--text-xl);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* =================================================================
   SETTINGS CARDS
   ================================================================= */

.settings-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background-color: var(--bg-elevated);
}

.settings-card-disabled {
  background-color: var(--bg-surface);
  opacity: 0.7;
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* =================================================================
   SETTINGS CHECKBOX LIST
   ================================================================= */

.settings-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.settings-checkbox-item .form-checkbox {
  margin-top: 0.125rem;
}

.settings-checkbox-label {
  display: block;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.email-provider-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.email-template-manager__header,
.email-template-preview-panel__header,
.email-template-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.email-provider-card__toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--admin-border-light);
}

.email-provider-card__toolbar .email-settings-primary-button {
  min-height: var(--admin-control-compact);
  height: var(--admin-control-compact);
  padding: 0 var(--space-3);
  border-radius: var(--admin-radius-pill);
  font-size: var(--admin-workspace-detail-font);
}

.email-provider-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: 0;
}

.email-provider-card .form-label,
.email-provider-card .form-hint {
  font-size: var(--admin-workspace-detail-font);
}

.email-provider-card__port {
  max-width: 220px;
}

.email-provider-card__runtime-note,
.email-settings-inline-status,
.email-settings-inline-error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 16px 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--admin-workspace-detail-font);
}

.email-provider-card__runtime-note {
  color: var(--text-secondary);
  background: var(--bg-deep);
  border: 1px solid var(--border);
}

.email-provider-card__password-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--admin-workspace-detail-font);
}

.email-provider-card__password-note {
  color: var(--text-secondary);
  background: var(--bg-deep);
  border: 1px solid var(--border);
}

.email-settings-inline-status {
  color: var(--success);
  background: var(--success-dim);
  border: 1px solid var(--success);
}

.email-settings-inline-error {
  color: var(--error);
  background: var(--error-dim);
  border: 1px solid var(--error);
}

.settings-email-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text-secondary);
}

.settings-email-avatar--hero {
  width: 3rem;
  height: 3rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
  color: var(--accent);
}

.settings-email-list-card,
.settings-email-detail-card {
  min-height: 0;
}

.settings-layout,
.admin-v2-settings-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.settings-master-detail {
  flex: 1;
  min-height: 0;
}

.settings-master-detail--detail-only {
  grid-template-columns: minmax(0, 1fr);
}

.settings-master-detail > .settings-layout__detail-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.settings-master-detail--detail-only > .settings-layout__detail-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.settings-layout__detail-sections,
.admin-v2-settings-stack__sections {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-layout__detail-sections > .products-workspace-toolbar,
.admin-v2-settings-stack__sections > .products-workspace-toolbar {
  flex-shrink: 0;
}

.settings-layout__detail-sections > .settings-email-workspace-grid,
.admin-v2-settings-stack__sections > .settings-email-workspace-grid,
.admin-v2-settings-stack__sections > .admin-v2-settings-hybrid {
  flex: 1;
  align-items: stretch;
  min-height: 0;
}

.printer-settings-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-deep);
  color: var(--text-secondary);
}

.printer-settings-profile-avatar--documents {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
  color: var(--accent);
}

.printer-settings-profile-avatar--membership {
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-surface));
  color: var(--warning);
}

.printer-settings-profile-avatar--hero {
  width: 3rem;
  height: 3rem;
}

.printer-settings-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.printer-settings-route-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.printer-settings-route-card:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.printer-settings-route-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

.printer-settings-route-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
}

.printer-settings-route-card__label {
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-semibold);
}

.printer-settings-route-card__copy {
  color: var(--text-secondary);
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.5;
  text-align: left;
}

.printer-settings-bullet-list {
  margin: 0;
  padding-left: 1.125rem;
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--admin-workspace-detail-font);
}

.printer-settings-callout {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-deep);
}

.printer-settings-callout strong {
  display: block;
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-semibold);
}

.printer-settings-callout p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.55;
}

.printer-settings-callout--muted {
  background: var(--bg-subtle);
}

.printer-settings-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.printer-settings-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;
  padding: 0 var(--space-3);
  border-radius: var(--admin-radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.printer-settings-form-block {
  display: grid;
  gap: var(--space-4);
}

.printer-settings-section-hint {
  max-width: 70ch;
}

@media (max-width: 900px) {
  .printer-settings-route-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.printer-settings-health-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--space-3);
}

.printer-settings-health-result {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-deep);
}

.printer-settings-health-result__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.printer-settings-health-result p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.printer-settings-health-result--success {
  color: var(--success);
  background: var(--success-dim);
  border-color: var(--success);
}

.printer-settings-health-result--info {
  color: var(--warning);
  background: var(--warning-dim);
  border-color: var(--warning);
}

.printer-settings-health-result--error {
  color: var(--error);
  background: var(--error-dim);
  border-color: var(--error);
}

.email-settings-primary-button,
.email-settings-secondary-button,
.email-template-variable-chip,
.email-template-locale-tab,
.email-template-list__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.email-settings-primary-button,
.email-settings-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: 0 var(--space-4);
  font-size: var(--control-font-md);
  font-weight: var(--font-medium);
  cursor: pointer;
}

.email-settings-primary-button {
  color: var(--bg-surface);
  background: var(--accent);
  border-color: var(--accent);
}

.email-settings-primary-button:hover:not(:disabled) {
  background: var(--accent-light);
  border-color: var(--accent-light);
}

.email-settings-secondary-button,
.email-template-locale-tab,
.email-template-variable-chip,
.email-template-list__item {
  color: var(--text-primary);
  background: var(--bg-surface);
}

.email-settings-secondary-button:hover:not(:disabled),
.email-template-variable-chip:hover,
.email-template-locale-tab:hover,
.email-template-list__item:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.email-settings-primary-button:disabled,
.email-settings-secondary-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.email-template-manager__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.email-template-manager--workspace {
  margin-bottom: 0;
}

.email-template-manager--workspace .email-template-editor--workspace {
  gap: 0;
}

.email-template-editor-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.email-template-subscription-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.email-template-manager--workspace .form-label,
.email-template-manager--workspace .form-hint,
.email-template-manager--workspace .email-template-empty-state,
.email-template-manager--workspace .email-template-variable-panel__hint,
.email-template-manager--workspace .email-template-preview-card__subject {
  font-size: var(--admin-workspace-detail-font);
}

.email-template-manager--workspace .email-template-variable-chip {
  min-height: var(--admin-control-field);
  font-size: var(--admin-workspace-detail-font);
}

.email-template-manager--workspace .email-template-preview-panel--workspace {
  gap: var(--space-3);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.email-settings-inline-feedback--workspace {
  margin: 0 16px 16px;
}

.email-template-manager__layout {
  display: grid;
  grid-template-columns: var(--admin-workspace-list-col-width) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.email-template-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.email-template-catalog__title {
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  color: var(--text-primary);
}

.email-template-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.email-template-list__item {
  width: 100%;
  text-align: left;
  padding: var(--space-4);
  cursor: pointer;
  box-shadow: none;
}

.email-template-list__item.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
  box-shadow: var(--shadow-sm);
}

.email-template-list__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.email-template-list__label {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.email-template-list__description {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.email-template-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.email-template-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.email-template-locale-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.email-template-locale-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 88px;
  padding: var(--space-3);
  cursor: pointer;
}

.email-template-locale-tab.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-surface));
}

.email-template-locale-tab__meta {
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.email-template-variable-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.email-template-variable-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.email-template-variable-panel__hint {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.email-template-variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.email-template-variable-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--admin-control-search);
  padding: 0 var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
}

.email-template-preview-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--bg-surface)), var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.email-template-preview-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.email-template-preview-card__subject {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.email-template-preview-card__body {
  padding: var(--space-5);
  color: var(--text-primary);
}

.email-template-preview-card__frame {
  width: 100%;
  min-height: 320px;
  border: 0;
  background: var(--bg-elevated);
}

.email-template-preview-card__body p,
.email-template-preview-card__body ul,
.email-template-preview-card__body ol {
  margin: 0 0 var(--space-3);
}

.email-template-empty-state {
  padding: var(--space-5);
  color: var(--text-secondary);
  background: var(--bg-deep);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.email-template-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
}

.email-template-status.is-custom {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.email-template-status.is-default {
  color: var(--info);
  background: var(--info-dim);
}

.email-template-status.is-muted {
  color: var(--warning);
  background: var(--warning-dim);
}

@media (max-width: 1024px) {
  .email-template-manager__layout,
  .email-provider-card__grid {
    grid-template-columns: 1fr;
  }

  .email-template-manager__header,
  .email-template-preview-panel__header,
  .email-template-meta {
    flex-direction: column;
  }

  .email-provider-card__toolbar {
    justify-content: flex-start;
  }
}

.settings-checkbox-item .form-hint {
  display: block;
  margin-top: var(--space-1);
}

.pass-config-page-header {
  margin-bottom: var(--space-4);
}

/* =================================================================
   SCAN WORKSPACE (products-page SSoT)
   Content inside products-card panels — no own border/bg/shadow.
   ================================================================= */

.scan-fields-panel,
.scan-preview-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.45;
}

.scan-panel-hint {
  color: var(--text-secondary);
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.5;
}

/* ─── Field rows ─── */

.settings-pass-field-row .settings-checkbox-label,
.settings-pass-field-row .form-hint {
  font-size: var(--admin-workspace-detail-font);
}

.settings-pass-field-row .settings-checkbox-label {
  line-height: 1.35;
  font-weight: var(--font-semibold);
}

.settings-pass-field-row .form-hint {
  line-height: 1.45;
  color: var(--text-secondary);
}

.settings-pass-field-list {
  gap: var(--space-2);
}

.settings-pass-qr-mode-row {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.settings-pass-qr-mode-row .settings-pass-field-alignment-row {
  justify-content: space-between;
  margin: 0;
}

.settings-pass-qr-mode-hint {
  margin-top: var(--space-2);
}

.settings-pass-field-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.settings-pass-field-row:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.settings-pass-field-row .settings-checkbox-item {
  flex: 1;
  min-width: 0;
}

.settings-pass-field-row--required {
  background: var(--bg-deep);
}

.settings-pass-field-meta {
  min-width: 0;
}

.settings-pass-field-input {
  margin-top: var(--admin-form-field-gap);
  height: var(--admin-control-field);
  font-size: var(--admin-font-size-base);
  border-radius: var(--admin-radius-control);
  border: 1px solid var(--admin-border-light);
  padding-inline: var(--space-3);
  width: 100%;
  max-width: 280px;
}

.settings-pass-field-input:focus {
  border-color: var(--admin-border-hover);
  outline: none;
}

.settings-pass-field-tenant-controls {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap);
  margin-top: var(--admin-form-field-gap);
}

.settings-pass-field-alignment-row {
  display: flex;
  align-items: center;
  gap: var(--admin-toolbar-gap);
}

.settings-pass-field-alignment-label {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
}

.settings-pass-field-alignment-select {
  height: var(--admin-control-field);
  border-radius: var(--admin-radius-control);
  border: 1px solid var(--admin-border-light);
  max-width: 180px;
}

.settings-pass-field-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.settings-pass-order-button {
  min-width: var(--control-height-sm);
  padding-inline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-pass-preview-card {
  display: flex;
  justify-content: center;
  padding: var(--space-5);
}

.settings-pass-preview-pass {
  max-width: 100%;
}

.settings-pass-active-fields {
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--space-5);
}

.settings-pass-active-fields-title {
  margin: 0 0 var(--space-3);
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.35;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.settings-pass-active-fields-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.25rem;
}

.settings-pass-active-fields-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.45;
  color: var(--text-primary);
}

.settings-pass-active-fields-value {
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: right;
}

.settings-pass-active-fields-photo {
  display: block;
  border-radius: var(--radius-lg);
  max-width: 120px;
  height: auto;
}

@media (max-width: 960px) {
  .pass-config-section__intro {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .settings-pass-field-row {
    flex-direction: column;
  }

  .settings-pass-field-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .settings-pass-active-fields-item {
    flex-direction: column;
    gap: var(--space-1);
  }

  .settings-pass-active-fields-value {
    text-align: left;
  }
}

/* =================================================================
   INTEGRATION ITEMS
   ================================================================= */

.integration-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.integration-item-title {
  font-weight: var(--font-medium);
}

/* =================================================================
   CONNECT STATUS (Stripe Connect)
   ================================================================= */

.connect-status-card {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.connect-status-card--success {
  background-color: var(--success-dim);
  border: 1px solid var(--success);
}

.connect-status-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.connect-details {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.connect-detail-row {
  margin: var(--space-1) 0;
}

.connect-status-badges {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.connect-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* =================================================================
   STATUS MESSAGE (inline)
   ================================================================= */

.status-message {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.status-message--error {
  color: var(--error);
}

.status-message--success {
  color: var(--success);
}

/* =================================================================
   PSP PROVIDER CARDS
   ================================================================= */

.psp-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--border);
}

.psp-empty-state-icon {
  opacity: 0.5;
  margin-bottom: var(--space-4);
}

.psp-provider-tags {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.psp-provider-tag {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  background: var(--psp-provider-bg, var(--bg-hover));
  color: var(--psp-provider-text, var(--text-primary));
}

.psp-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.psp-card--unconfigured {
  border-style: dashed;
  opacity: 0.8;
}

.psp-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.psp-provider-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--psp-provider-icon-size, calc(var(--admin-control-compact) + var(--space-3)));
  height: var(--psp-provider-icon-size, calc(var(--admin-control-compact) + var(--space-3)));
  border-radius: var(--radius-md);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  background: var(--psp-provider-bg, var(--bg-hover));
  border: 2px solid var(--psp-provider-border, var(--border));
  color: var(--psp-provider-text, var(--text-primary));
}

.psp-provider-icon--dashed {
  border-style: dashed;
}

.psp-card-actions {
  display: flex;
  gap: var(--space-2);
}

.psp-section-title {
  margin-bottom: var(--space-4);
}

.psp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}

.psp-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.psp-credentials {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.psp-credential-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.psp-credential-row:last-child {
  margin-bottom: 0;
}

.psp-webhook-url {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

.psp-webhook-url-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.psp-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

/* =================================================================
   FOOTER LINKS EDITOR
   ================================================================= */

.footer-editor-columns {
  display: grid;
  grid-template-columns: repeat(var(--footer-editor-columns, 1), 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.footer-editor-column {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--bg-surface);
}

.footer-editor-column-header {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.footer-editor-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-editor-link-item {
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: grab;
}

.footer-editor-link-item--drop-target {
  background: var(--bg-hover);
}

.footer-editor-link-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.footer-editor-link-fields {
  display: flex;
  gap: var(--space-2);
  padding-left: var(--space-4);
}

.footer-editor-add-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 150px;
}

.footer-editor-add-column-icon {
  font-size: var(--text-2xl);
}

.footer-editor-add-column-text {
  font-size: var(--text-sm);
}

.footer-editor-copyright {
  margin-top: var(--space-6);
}

.footer-editor-help {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.footer-editor-help code {
  background: var(--bg-elevated);
  padding: 0.125rem var(--space-1);
  border-radius: var(--radius-sm);
}

/* =================================================================
   FAQ EDITOR
   ================================================================= */

.faq-editor-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-editor-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}

.faq-editor-item--dragging {
  opacity: 0.5;
}

.faq-editor-item--drop-target {
  background: var(--bg-hover);
}

.faq-editor-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  cursor: grab;
}

.faq-editor-drag-handle {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.faq-editor-item-number {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.faq-editor-item-title {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faq-editor-item-body {
  padding: var(--space-4);
}

.faq-editor-empty {
  padding: var(--space-8);
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.faq-editor-add-btn {
  margin-top: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.faq-editor-add-btn:hover {
  background: var(--bg-hover);
}

/* =================================================================
   ROLE PERMISSIONS EDITOR
   ================================================================= */

.permissions-section {
  margin-bottom: var(--space-6);
}

.permissions-section:last-child {
  margin-bottom: 0;
}

.permissions-section-heading {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.permissions-section-desc {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin-bottom: var(--space-4);
}

.permissions-module-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.permissions-module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.permissions-module-label {
  flex: 1;
  font-size: var(--text-sm);
}

.permissions-module-select {
  width: 140px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

.permissions-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.permissions-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  cursor: pointer;
}

.permissions-menu-item:disabled,
.permissions-menu-item--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* (autosave indicator has moved to navbar.css) */

/* =================================================================
   OPENING HOURS SETTINGS
   ================================================================= */

.opening-hours-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.opening-hours-slots__row {
  display: grid;
  grid-template-columns: minmax(120px, 164px) auto minmax(120px, 164px) minmax(180px, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.opening-hours-slots__sep {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}

.opening-hours-slots__note {
  min-width: 0;
}

.opening-hours-slots__add {
  align-self: flex-start;
}

@media (max-width: 768px) {
  .opening-hours-slots__row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  }

  .opening-hours-slots__note {
    grid-column: 1 / -1;
  }
}

/* =================================================================
   FAQ WORKSPACE: viewport-lock
   ================================================================= */

.admin-main:has(.faq-page) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.faq-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* =================================================================
   PARTNERS WORKSPACE: viewport-lock
   ================================================================= */

.admin-main:has(.partners-page) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.partners-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* shared.css */
/**
 * ADMIN CONTEXT: Shared Components
 * 
 * Gedeelde admin componenten: breadcrumbs, info sidebar,
 * form actions, list actions, en admin form actions.
 */

/* =================================================================
   ADMIN FORM ACTIONS
   ================================================================= */

.admin-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--border);
  gap: var(--space-4);
}

.admin-form-actions .btn-primary {
  margin-left: auto;
}

/* =================================================================
   BREADCRUMBS
   ================================================================= */

.admin-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.admin-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.admin-breadcrumb a:hover {
  text-decoration: underline;
}

.admin-breadcrumb-separator {
  color: var(--text-muted);
}

/* =================================================================
   ADMIN LIST ACTIONS
   ================================================================= */

.admin-list-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.admin-list-actions .btn-icon {
  padding: 0.375rem;
  min-width: auto;
}

.admin-list-actions .btn-icon svg {
  display: block;
}

/* =================================================================
   INFO SIDEBAR (right panel)
   ================================================================= */

.admin-info-sidebar {
  width: 320px;
  min-width: 320px;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: width var(--duration-normal) var(--ease-out),
              min-width var(--duration-normal) var(--ease-out);
}

.admin-info-sidebar.collapsed {
  width: 56px;
  min-width: 56px;
  overflow: hidden;
}

.admin-info-sidebar-toggle {
  position: absolute;
  left: -12px;
  top: 20px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-dropdown);
  transition: background-color var(--transition-fast);
  padding: 0;
}

.admin-info-sidebar-toggle:hover {
  background-color: var(--bg-hover);
}

.admin-info-sidebar-toggle-collapsed {
  margin: var(--space-2) auto;
  width: 36px;
  height: var(--admin-control-compact);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.admin-info-sidebar-content {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

.admin-info-sidebar-header {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.admin-info-sidebar-header h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  margin: 0;
}

/* =================================================================
   INFO SECTIONS (collapsible)
   ================================================================= */

.admin-info-section {
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-info-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  text-align: left;
}

.admin-info-section-header:hover {
  background: var(--bg-hover);
}

.admin-info-section-header svg {
  color: var(--text-secondary);
  transition: transform var(--duration-normal) var(--ease-out);
}

.admin-info-section-header svg.rotated {
  transform: rotate(-90deg);
}

.admin-info-section-content {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.admin-info-section-content ul {
  margin: 0;
  padding-left: var(--space-5);
}

.admin-info-section-content li {
  margin-bottom: var(--space-1);
}

.admin-info-custom {
  margin-top: var(--space-4);
}

/* Responsive: hide sidebar on small screens */
@media (max-width: 1200px) {
  .admin-info-sidebar {
    display: none;
  }
}

/* Inline action link (e.g. reset usage in coupon detail) */
.admin-inline-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: color 0.15s ease;
}

.admin-inline-action:hover {
  color: var(--accent-hover);
}

/* sidebar-layout.css */
/**
 * ADMIN CONTEXT: Sidebar Layout
 * 
 * Sidebar-based layout voor admin panels.
 * Collapsible sidebar, main content area, header integration.
 * 
 * DATA ATTRIBUTES:
 * - data-sidebar-collapsed="true|false"
 * - data-sidebar-position="left|right"
 */

/* =================================================================
   ADMIN LAYOUT WRAPPER
   ================================================================= */

.admin-layout {
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --admin-header-height: 64px;
  
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--admin-header-height) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
  background: var(--background);
}

.admin-layout[data-sidebar-collapsed="true"] {
  grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

/* =================================================================
   ADMIN SIDEBAR
   ================================================================= */

.admin-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  border-inline-end: 1px solid var(--border-subtle);
  overflow: hidden;
  transition: width var(--transition-normal);
}

/* Sidebar Header (Logo area) */
.admin-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  height: var(--admin-header-height);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  overflow: hidden;
}

.admin-sidebar__logo-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.admin-sidebar__logo-text {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  white-space: nowrap;
}

[data-sidebar-collapsed="true"] .admin-sidebar__logo-text {
  display: none;
}

/* Sidebar Navigation */
.admin-sidebar__nav {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.admin-sidebar__section {
  margin-bottom: var(--space-4);
}

.admin-sidebar__section-title {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
}

[data-sidebar-collapsed="true"] .admin-sidebar__section-title {
  display: none;
}

.admin-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.admin-sidebar__link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.admin-sidebar__link.active,
.admin-sidebar__link[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-subtle);
}

.admin-sidebar__link-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.admin-sidebar__link-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

[data-sidebar-collapsed="true"] .admin-sidebar__link-text {
  display: none;
}

/* Badge on nav item */
.admin-sidebar__badge {
  margin-left: auto;
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-full);
}

[data-sidebar-collapsed="true"] .admin-sidebar__badge {
  display: none;
}

/* Sidebar Footer */
.admin-sidebar__footer {
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.admin-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.admin-sidebar__user:hover {
  background: var(--surface-hover);
}

.admin-sidebar__user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.admin-sidebar__user-info {
  flex: 1;
  min-width: 0;
}

[data-sidebar-collapsed="true"] .admin-sidebar__user-info {
  display: none;
}

.admin-sidebar__user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-sidebar__user-role {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* Collapse Toggle */
.admin-sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-2);
  margin-top: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-sidebar__toggle:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* =================================================================
   ADMIN HEADER
   ================================================================= */

.admin-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.admin-header__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.admin-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.admin-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* =================================================================
   ADMIN MAIN CONTENT
   ================================================================= */

.admin-layout .admin-main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--space-6);
}

.admin-main__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.admin-main__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.admin-main__actions {
  display: flex;
  gap: var(--space-3);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1024px) {
  .admin-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }
  
  .admin-sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    z-index: var(--z-modal);
    transform: translateX(calc(-100% * var(--dir-sign, 1)));
    transition: transform var(--transition-normal);
  }
  
  .admin-sidebar[data-mobile-open="true"] {
    transform: translateX(0);
  }
  
  /* Mobile overlay */
  .admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--admin-v2-backdrop);
    z-index: calc(var(--z-modal) - 1);
  }
  
  .admin-sidebar-overlay[data-visible="true"] {
    display: block;
  }
}

/* subscription-holders.css */
/**
 * Subscription Holders Styling
 * Master-detail layout gebaseerd op de fresh HTML referentie.
 */

.holders-page {
  /* viewport-lock via .products-page — geen aparte overflow */
}

.holders-master-detail {
  display: grid;
  grid-template-columns: var(--admin-workspace-list-col-width) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  flex: 1;
  min-height: 0;
}

.holders-card {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.holders-list-card,
.holders-detail-card {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.holders-list-card::-webkit-scrollbar,
.holders-detail-card::-webkit-scrollbar {
  display: none;
}

.holders-detail-card--state {
  display: flex;
}

.holders-card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.holders-card-header h2 {
  font-size: var(--card-title-size);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.holders-count-badge,
.holders-members-count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  background: var(--accent-glow);
  color: var(--accent);
  font-size: var(--text-2xs-plus);
  font-weight: var(--font-semibold);
}

.holders-search-bar {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--admin-border-light);
}

.holders-search-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--admin-v2-space-2, var(--space-2));
  width: 100%;
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem);
  border: 1.5px solid var(--admin-v2-border-default, var(--admin-border-accent));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, var(--radius-md)));
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted, var(--text-secondary));
  box-sizing: border-box;
}

.holders-search-field:focus-within {
  border-color: var(--admin-v2-color-primary, var(--accent));
  background: var(--admin-v2-color-surface);
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, var(--accent-glow));
}

.holders-search-field__icon {
  color: var(--admin-v2-color-text-muted, var(--text-muted));
  flex-shrink: 0;
  width: var(--admin-v2-search-icon-size, 18px);
  height: var(--admin-v2-search-icon-size, 18px);
}

.holders-search-bar > input,
.holders-search-field__input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--admin-v2-color-text, var(--text-primary));
  font-size: var(--admin-v2-field-control-font-size, var(--control-font-md));
  font-weight: var(--admin-v2-font-weight-medium, var(--font-medium));
  font-family: var(--admin-v2-font-family, var(--font-main, var(--font-sans)));
  outline: none;
}

.holders-search-bar > input {
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem);
  border: 1.5px solid var(--admin-v2-border-default, var(--admin-border-accent));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, var(--radius-md)));
  background: var(--admin-v2-color-surface);
  box-sizing: border-box;
}

.holders-search-bar > input:focus {
  border-color: var(--admin-v2-color-primary, var(--accent));
  background: var(--admin-v2-color-surface);
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, var(--accent-glow));
}

.holders-search-field__input::placeholder,
.holders-search-bar > input::placeholder {
  color: var(--text-muted);
}

.holders-list-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.holder-search-group {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--admin-border-light);
}

.holder-search-group:last-child {
  border-bottom: 0;
}

.holder-search-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--admin-list-row-padding-y) var(--admin-list-row-padding-x);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--admin-border-subtle);
}

.holder-search-group-title {
  font-size: var(--admin-products-list-font);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.holder-search-group-badge,
.holders-match-count-badge,
.holder-match-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--admin-radius-pill);
  font-size: var(--text-2xs-plus);
  font-weight: var(--font-semibold);
}

.holder-search-group-badge,
.holders-match-count-badge {
  background: var(--success-dim);
  color: var(--success);
}

.holder-search-group-items {
  display: flex;
  flex-direction: column;
}

.holder-list-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: 10px var(--admin-list-row-padding-x);
  border: 0;
  border-bottom: 1px solid var(--admin-border-subtle);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.holder-list-row:hover {
  background: var(--bg-elevated);
}

.holder-list-row.active {
  background: var(--admin-v2-color-primary-soft);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}

.holder-list-row.active .holder-list-name {
  color: var(--accent);
}

.holders-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--admin-radius-control);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: var(--admin-products-list-font);
  font-weight: var(--font-semibold);
}

.holders-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.holders-avatar--placeholder {
  border: 1px solid var(--border);
  letter-spacing: 0;
}

.holders-detail-avatar {
  width: 56px;
  height: 56px;
  font-size: var(--admin-workspace-detail-font);
}

.holders-detail-card .products-detail-hero__visual {
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.holder-member-avatar {
  width: 42px;
  height: 42px;
}

.holder-list-copy,
.holder-member-copy,
.holders-detail-copy {
  min-width: 0;
  flex: 1;
}

.holder-list-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.holder-list-name,
.holder-member-name {
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.holder-list-meta {
  margin-top: 1px;
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  color: var(--text-secondary);
}

.holder-list-product {
  font-size: var(--admin-products-list-font);
  color: var(--text-secondary);
  line-height: 1.35;
}

.holder-list-passcode,
.holders-detail-passcode {
  font-family: var(--font-mono);
  font-size: var(--admin-products-list-font);
  color: var(--text-muted);
  line-height: 1.3;
}

.holder-list-right {
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
  padding-top: 2px;
}

.holder-list-match-label {
  margin-bottom: 4px;
  font-size: var(--admin-products-list-font);
  font-weight: var(--font-medium);
  color: var(--success);
}

.holder-list-members {
  margin-top: 2px;
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  color: var(--text-muted);
}

.holder-print-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--admin-radius-pill);
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  font-weight: var(--font-semibold);
}

.holder-print-chip--printed {
  background: var(--success-dim);
  color: var(--success);
}

.holder-print-chip--pending {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.holders-print-feedback {
  margin-bottom: var(--space-4);
  padding: 10px var(--admin-list-row-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-medium);
}

.holders-print-feedback--success {
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 8%, transparent);
  border-color: color-mix(in srgb, var(--admin-v2-state-success-text) 16%, transparent);
  color: var(--admin-v2-state-success-text);
}

.holders-print-feedback--error {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 8%, transparent);
  border-color: color-mix(in srgb, var(--admin-v2-state-danger-text) 16%, transparent);
  color: var(--admin-v2-state-danger-text);
}

.holders-print-feedback--info {
  background: color-mix(in srgb, var(--admin-v2-color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 16%, transparent);
  color: var(--admin-v2-color-primary-hover);
}

.holders-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--admin-radius-pill);
  font-size: var(--text-2xs-plus);
  font-weight: var(--font-semibold);
}

.holders-status-pill--active {
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 10%, transparent);
  color: var(--admin-v2-state-success-text);
}

.holders-status-pill--paused {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 12%, transparent);
  color: var(--admin-v2-state-warning-text);
}

.holders-status-pill--expired {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 10%, transparent);
  color: var(--admin-v2-state-danger-text);
}

.holders-detail-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--admin-border-light);
}

.holders-detail-hero-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-2);
}

.holders-detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.holders-detail-title-row h2 {
  font-size: 17px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

.holders-detail-subtitle {
  margin-top: 3px;
  font-size: var(--text-xs-plus);
  color: var(--text-secondary);
}

.holders-detail-passcode {
  margin-top: 2px;
}

.holders-detail-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--admin-border-light);
}

.holders-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
}

.holders-detail-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.holders-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.holders-detail-field span,
.holder-member-birthdate span,
.holders-members-header span:first-child {
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.holders-detail-field strong,
.holder-member-birthdate strong {
  font-size: var(--text-xs-plus);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.holders-members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px;
  border-bottom: 1px solid var(--admin-border-light);
}

.holders-members-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.holders-members-list {
  display: flex;
  flex-direction: column;
}

.holder-member-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--admin-border-subtle);
}

.holder-member-row--match {
  background: var(--success-dim);
}

.holder-member-row--match .holder-member-name {
  color: var(--success);
}

.holder-member-row:last-child {
  border-bottom: 0;
}

.holder-member-code {
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  color: var(--text-muted);
}

.holder-member-birthdate {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.holder-member-print {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.holder-member-print span {
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.holder-member-print strong {
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.holder-role-chip {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--admin-radius-pill);
  font-size: var(--admin-products-list-font);
  line-height: 1.35;
  font-weight: var(--font-semibold);
}

.holder-role-chip--primary {
  background: var(--accent-glow);
  color: var(--accent);
}

.holder-role-chip--member {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.holder-match-chip {
  justify-self: end;
  background: var(--success-dim);
  color: var(--success);
}

.holders-panel-state {
  flex: 1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--text-secondary);
  text-align: center;
}

@media (max-width: 1080px) {
  .holders-master-detail {
    grid-template-columns: 1fr;
  }

  .holders-list-card,
  .holders-detail-card {
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .holders-detail-grid {
    grid-template-columns: 1fr;
  }

  .holder-member-row {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: flex-start;
  }

  .holder-member-birthdate {
    padding-left: 54px;
    grid-column: 1 / -1;
  }

  .holder-member-print {
    padding-left: 54px;
    grid-column: 1 / -1;
  }

  .holder-role-chip {
    justify-self: start;
    margin-left: 54px;
    grid-column: 1 / -1;
  }

  .holder-match-chip {
    justify-self: start;
    margin-left: 54px;
    grid-column: 1 / -1;
  }

  .holder-search-group-header,
  .holders-members-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .holders-members-badges {
    flex-wrap: wrap;
  }
}

/* subscriptions.css */
/**
 * Subscription Management CSS
 * Styling voor abonnementsbeheer, member cards, scan pagina, en event logs.
 *
 * AI-NOTE: Deze file bevat styling voor:
 * - SubscriptionsPage: Overzicht met stats, filters, tabel
 * - SubscriptionDetailPage: Detail met members, events, actions
 * - SubscriptionScanPage: Barcode scanner + lookup result
 */

html.subscriptions-route-lock,
body.subscriptions-route-lock {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.admin-shell.subscriptions-shell-lock {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.admin-main.subscriptions-main-lock {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.admin-main:has(.subscriptions-page) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.admin-main:has(.subscriptions-page) > .subscriptions-page {
  flex: 1;
  min-height: 0;
}

.subscriptions-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.subscriptions-workspace-toolbar {
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.subscriptions-master-detail {
  align-items: start;
}

.subscriptions-master-detail .product-workspace-row__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subscriptions-master-detail .product-workspace-row__right {
  padding-top: 2px;
}

.subscriptions-master-detail .product-workspace-row__submeta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.subscriptions-master-detail .product-workspace-row__price {
  font-size: var(--admin-products-list-font);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.subscription-photo-badge,
.subscription-photo-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--admin-radius-pill);
  font-size: var(--text-2xs-plus);
  font-weight: var(--font-semibold);
}

.subscription-photo-badge {
  background: var(--warning-dim);
  color: var(--warning);
}

.subscription-photo-badge--complete {
  background: var(--success-dim);
  color: var(--success);
}

.subscription-photo-chip {
  justify-self: end;
  background: var(--warning-dim);
  color: var(--warning);
}

@media (max-width: 768px) {
  .subscription-photo-chip {
    justify-self: start;
    margin-left: 48px;
    grid-column: 1 / -1;
  }
}

/* ============================================
   STATS GRID
   ============================================ */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.admin-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.admin-stat-label {
  font-size: var(--control-font-sm);
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MEMBER CARDS
   ============================================ */

.subscription-members-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.subscription-member-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.subscription-member-card:hover {
  border-color: var(--accent);
}

/* Inactive member: dimmed appearance */
.subscription-member-card--inactive {
  opacity: 0.6;
  background: var(--bg-tertiary);
}

.subscription-member-card--inactive:hover {
  opacity: 0.8;
}

/* Badges row within member info */
.subscription-member-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Stats row above member list (adult count, extra slots) */
.subscription-member-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.subscription-member-photo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.subscription-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subscription-member-placeholder {
  color: var(--text-tertiary);
}

.subscription-member-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-v2-backdrop);
  color: var(--admin-v2-color-text-inverse);
  opacity: 0;
  transition: opacity 0.15s ease;
  border-radius: var(--radius-full);
}

.subscription-member-photo:hover .subscription-member-photo-overlay {
  opacity: 1;
}

.subscription-member-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.subscription-member-info strong {
  font-size: var(--control-font-md);
  color: var(--text-primary);
}

.subscription-member-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/*
 * DOB inline edit: zelfde ritme als products-workspace detailvelden
 * (ADMIN-UI-SOURCE-OF-TRUTH — products-editor-field / products-workspace-field).
 */
.subscription-member-dob {
  margin-top: var(--space-2);
  min-width: 0;
}

.subscription-member-dob__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.subscription-member-dob__controls .form-input[type="date"] {
  /* .form-input (@layer components) heeft width:100%. Zonder width hier blijft die
   * property actief; in een flex-row gedraagt WebKit/Chromium het datumveld dan als
   * “volle restbreedte” i.p.v. strak onder max-width. Explicit width in deze laag wint.
   */
  width: auto;
  max-width: 11.5rem;
  min-width: 0;
  flex: 0 1 auto;
}

/* ============================================
   ADD MEMBER FORM
   ============================================ */

.subscription-add-member-form {
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* ============================================
   EVENT LOG
   ============================================ */

.subscription-events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.subscription-event-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.subscription-event-item:last-child {
  border-bottom: none;
}

.subscription-event-type {
  font-size: var(--control-font-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.subscription-event-date {
  font-size: var(--control-font-sm);
}

/* ============================================
   SCAN PAGE
   ============================================ */

.scan-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.scan-camera-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-tertiary);
}

.scan-camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-camera-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.scan-camera-frame {
  width: 60%;
  height: 40%;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 9999px var(--admin-v2-backdrop);
}

.scan-camera-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--text-tertiary);
  text-align: center;
}

.scan-manual-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.scan-manual-label {
  font-size: var(--control-font-md);
  font-weight: 500;
  color: var(--text-secondary);
}

.scan-manual-input-row {
  display: flex;
  gap: var(--space-2);
}

.scan-manual-input-row .form-input {
  flex: 1;
}

/* ============================================
   SCAN RESULT
   ============================================ */

.scan-result-card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: var(--bg-surface);
}

.scan-result--valid {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 5%, var(--bg-surface));
}

.scan-result--invalid {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 5%, var(--bg-surface));
}

.scan-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.scan-result-header h3 {
  font-size: var(--section-title-size);
  margin: 0 0 var(--space-2) 0;
}

.scan-result-code {
  font-family: monospace;
  font-size: var(--control-font-md);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.scan-result-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.scan-result-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.scan-result-label {
  font-size: var(--control-font-sm);
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

.scan-result-members {
  margin-bottom: var(--space-4);
}

.scan-result-members h4 {
  font-size: var(--control-font-md);
  margin: 0 0 var(--space-3) 0;
  color: var(--text-secondary);
}

.scan-members-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.scan-member-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.scan-member-photo {
  width: 32px;
  height: var(--admin-control-field);
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.scan-member-placeholder {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.scan-member-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ============================================
   DETAIL PAGE SPECIFIEK
   ============================================ */

.admin-detail-monospace {
  font-family: monospace;
  font-size: var(--control-font-md);
  background: var(--bg-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  display: inline-block;
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.admin-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================
   REUSABLE COMPONENTS
   ============================================ */

/* --- BarcodeDisplay --- */

.barcode-display {
  display: inline-flex;
  justify-content: center;
  padding: var(--space-2, 8px);
  background: var(--bg-base, var(--admin-v2-color-surface));
  border-radius: var(--radius-md, 8px);
}

.barcode-display svg {
  max-width: 100%;
  height: auto;
}

/* --- BarcodeScanner --- */

.barcode-scanner__preview {
  position: relative;
  min-height: 200px;
  background: var(--bg-muted, var(--admin-v2-color-surface-muted));
  border-radius: var(--radius-md, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--space-3, 12px);
}

.barcode-scanner__video {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--radius-md, 8px);
}

.barcode-scanner__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 8px);
  color: var(--text-tertiary, var(--admin-v2-color-text-soft));
  padding: var(--space-6, 24px);
}

.barcode-scanner__error {
  color: var(--admin-v2-state-danger-text);
  padding: var(--space-3, 12px);
  text-align: center;
  font-size: 14px;
}

.barcode-scanner__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-surface, var(--admin-v2-color-surface));
  cursor: pointer;
  font-size: 14px;
  color: var(--admin-v2-color-text);
  transition: background 0.15s;
}

.barcode-scanner__toggle:hover {
  background: var(--bg-hover, var(--admin-v2-color-surface-muted));
}

/* --- PhotoUpload --- */

.photo-upload {
  position: relative;
  display: inline-block;
}

.photo-upload__input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.photo-upload--sm { width: 64px; height: 64px; }
.photo-upload--md { width: 96px; height: 96px; }
.photo-upload--lg { width: 128px; height: 128px; }

.photo-upload__preview {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.photo-upload__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-upload__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--admin-v2-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  opacity: 0;
  transition: opacity 0.15s;
}

.photo-upload__preview:hover .photo-upload__overlay {
  opacity: 1;
}

.photo-upload__change {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: transparent;
  border: none;
  color: var(--admin-v2-color-text-inverse);
  cursor: pointer;
  font-size: 12px;
}

.photo-upload__clear {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: var(--admin-v2-backdrop);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-v2-color-text-inverse);
  cursor: pointer;
}

.photo-upload__loading {
  position: absolute;
  inset: 0;
  background: var(--admin-v2-color-surface-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-upload__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--admin-v2-border-default);
  border-top-color: var(--admin-v2-color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.photo-upload__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  width: 100%;
  height: 100%;
  border: 2px dashed var(--admin-v2-border-default);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-muted, var(--admin-v2-color-surface-muted));
  cursor: pointer;
  color: var(--text-tertiary, var(--admin-v2-color-text-soft));
  font-size: 11px;
  transition: border-color 0.15s;
}

.photo-upload__empty:hover,
.photo-upload--dragging .photo-upload__empty {
  border-color: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-primary);
}

.photo-upload__error {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  margin-top: var(--space-1, 4px);
  font-size: 12px;
  color: var(--admin-v2-state-danger-text);
}

/* --- SubscriptionCard --- */

.subscription-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-4, 16px);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface, var(--admin-v2-color-surface));
  text-align: left;
  width: 100%;
}

.subscription-card--clickable {
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.subscription-card--clickable:hover {
  border-color: var(--admin-v2-color-primary);
  box-shadow: var(--admin-v2-shadow-sm);
}

.subscription-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}

.subscription-card__status {
  font-weight: 600;
  font-size: 15px;
  color: var(--admin-v2-color-text);
}

.subscription-card__badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-muted, var(--admin-v2-color-surface-muted));
  color: var(--admin-v2-color-text-muted);
}

.subscription-card__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  font-size: 13px;
  color: var(--admin-v2-color-text-muted);
}

.subscription-card__detail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

.subscription-card__cancel-notice {
  color: var(--admin-v2-state-danger-text);
  font-size: 12px;
}

.subscription-card__chevron {
  align-self: center;
  color: var(--text-tertiary, var(--admin-v2-color-text-soft));
}

/* --- MemberList / MemberRow --- */

.member-list__header {
  margin-bottom: var(--space-3, 12px);
}

.member-list__title {
  font-size: var(--section-title-size, 18px);
  font-weight: 600;
  color: var(--admin-v2-color-text);
}

.member-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.member-list__add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  margin-top: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border: 1px dashed var(--admin-v2-border-default);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--admin-v2-color-primary);
  cursor: pointer;
  font-size: 14px;
}

.member-list__add:hover {
  border-color: var(--admin-v2-color-primary);
  background: var(--bg-muted, var(--admin-v2-color-surface-muted));
}

.member-list__max-reached {
  margin-top: var(--space-2, 8px);
  font-size: 13px;
  color: var(--text-tertiary, var(--admin-v2-color-text-soft));
  font-style: italic;
}

.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-surface, var(--admin-v2-color-surface));
}

.member-row__photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.member-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-row__no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted, var(--admin-v2-color-surface-muted));
  color: var(--text-tertiary, var(--admin-v2-color-text-soft));
}

.member-row__info {
  flex: 1;
  min-width: 0;
}

.member-row__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--admin-v2-color-text);
}

.member-row__role {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-tertiary, var(--admin-v2-color-text-soft));
  margin-left: var(--space-1, 4px);
}

.member-row__code {
  font-size: 12px;
  color: var(--admin-v2-color-text-muted);
  font-family: monospace;
}

.member-row__email {
  font-size: 12px;
  color: var(--text-tertiary, var(--admin-v2-color-text-soft));
}

.member-row__status {
  flex-shrink: 0;
}

.member-row__warning {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: 12px;
  color: var(--admin-v2-state-warning-text);
}

.member-row__actions {
  display: flex;
  gap: var(--space-1, 4px);
  flex-shrink: 0;
}

.member-row__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: var(--admin-control-compact);
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  cursor: pointer;
  transition: background 0.15s;
}

.member-row__action:hover {
  background: var(--bg-hover, var(--admin-v2-color-surface-muted));
}

.member-row__action--danger:hover {
  color: var(--admin-v2-state-danger-text);
}

.member-row__action--upload {
  position: relative;
  cursor: pointer;
}

.member-row__file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* --- PassCard --- */

.pass-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--admin-v2-border-default);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface, var(--admin-v2-color-surface));
  overflow: hidden;
  max-width: 360px;
}

.pass-card--sm { max-width: 280px; }
.pass-card--lg { max-width: 420px; }

/* --- PassCard Print Preview (matches CR80 credit card PDF layout) --- */

.pass-card--print {
  max-width: none;
  width: 100%;
  aspect-ratio: 85.6 / 54;
  border-width: 1px;
}

.pass-card--print .pass-card__body {
  padding: var(--space-3, 12px);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* QR-mode: QR verticaal gecentreerd links, tekst top-aligned rechts (= PDF) */
.pass-card--print .pass-card__qr-layout {
  grid-template-columns: auto 1fr;
  gap: var(--space-3, 12px);
  align-items: center;
  height: 100%;
}

.pass-card--print .pass-card__qr-pane {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  border: none;
  background: transparent;
}

.pass-card--print .pass-card__qr-image {
  border-radius: 0;
}

.pass-card--print .pass-card__qr-details {
  align-self: start;
  padding-top: var(--space-2, 8px);
}

.pass-card--print .pass-card__text-fields {
  gap: 3px;
}

.pass-card--print .pass-card__text-field--firstName,
.pass-card--print .pass-card__text-field--lastName {
  font-size: 14px;
  font-weight: 700;
  color: var(--admin-v2-color-text);
}

.pass-card--print .pass-card__text-field--productTitle {
  font-size: 10px;
  font-weight: 700;
  color: var(--admin-v2-color-text-muted);
}

.pass-card--print .pass-card__text-field--tenantName,
.pass-card--print .pass-card__text-field--dateOfBirth,
.pass-card--print .pass-card__text-field--street,
.pass-card--print .pass-card__text-field--postalCode,
.pass-card--print .pass-card__text-field--city,
.pass-card--print .pass-card__text-field--validUntil {
  font-size: 9px;
  color: var(--admin-v2-color-text-muted);
}

.pass-card--print .pass-card__tenant-banner {
  margin-bottom: 6px;
  font-size: 9px;
  color: var(--admin-v2-color-text-muted);
}

/* Barcode-mode identity */
.pass-card--print .pass-card__identity {
  align-items: flex-start;
}

.pass-card--print .pass-card__photo {
  width: 60px;
  height: 75px;
}

.pass-card--print .pass-card__barcode {
  padding: 2px var(--space-2, 8px);
  border-top: none;
}

.pass-card--print .pass-card__barcode svg {
  max-width: 100%;
}

.pass-card--print .pass-card__pass-number {
  font-size: 8px;
  padding: 0 var(--space-2, 8px) var(--space-1, 4px);
  color: var(--admin-v2-color-text-muted);
}

.pass-card__logo {
  padding: var(--space-3, 12px);
  text-align: center;
  border-bottom: 1px solid var(--admin-v2-border-default);
}

.pass-card__logo-img {
  max-height: var(--admin-control-field);
  width: auto;
}

.pass-card__body {
  padding: var(--space-4, 16px);
}

.pass-card__tenant-banner {
  width: 100%;
  margin-bottom: var(--space-2, 8px);
  font-size: 13px;
  color: var(--admin-v2-color-text-muted);
  line-height: 1.2;
}

.pass-card__tenant-banner--left {
  text-align: left;
}

.pass-card__tenant-banner--center {
  text-align: center;
}

.pass-card--qr {
  max-width: 420px;
}

.pass-card__qr-layout {
  display: grid;
  grid-template-columns: minmax(160px, 50%) minmax(0, 1fr);
  gap: var(--space-4, 16px);
  align-items: center;
}

.pass-card__qr-pane {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--admin-v2-border-default);
  background: var(--bg-base, var(--admin-v2-color-surface));
  overflow: hidden;
}

.pass-card--sm .pass-card__qr-pane {
  width: 140px;
  height: 140px;
}

.pass-card--lg .pass-card__qr-pane {
  width: 200px;
  height: 200px;
}

.pass-card__qr-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pass-card__qr-fallback {
  width: 100%;
  padding: var(--space-2, 8px);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--admin-v2-color-text-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

.pass-card__qr-details {
  min-width: 0;
}

.pass-card__identity {
  display: flex;
  gap: var(--space-3, 12px);
  align-items: flex-start;
}

.pass-card__identity--no-photo {
  align-items: stretch;
}

.pass-card__photo {
  flex-shrink: 0;
  width: 80px;
  height: 100px;
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
}

.pass-card--sm .pass-card__photo { width: 60px; height: 75px; }

.pass-card__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pass-card__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted, var(--admin-v2-color-surface-muted));
  color: var(--text-tertiary, var(--admin-v2-color-text-soft));
}

.pass-card__text-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 0;
  flex: 1;
}

.pass-card__text-field {
  overflow-wrap: break-word;
  word-break: normal;
}

.pass-card__text-field--memberName,
.pass-card__text-field--firstName,
.pass-card__text-field--lastName {
  font-size: 16px;
  font-weight: 700;
  color: var(--admin-v2-color-text);
}

.pass-card__text-field--productTitle {
  font-size: 13px;
  color: var(--admin-v2-color-text-muted);
}

.pass-card__text-field--tenantName,
.pass-card__text-field--address,
.pass-card__text-field--dateOfBirth,
.pass-card__text-field--street,
.pass-card__text-field--postalCode,
.pass-card__text-field--city,
.pass-card__text-field--validUntil {
  font-size: 13px;
  color: var(--admin-v2-color-text-muted);
}

.pass-card--sm .pass-card__text-field--memberName,
.pass-card--sm .pass-card__text-field--firstName,
.pass-card--sm .pass-card__text-field--lastName {
  font-size: 14px;
}

.pass-card__pass-number {
  font-size: 11px;
  color: var(--text-tertiary, var(--admin-v2-color-text-soft));
  text-align: center;
  padding: var(--space-1, 4px) var(--space-2, 8px);
}

.pass-card__pass-number--right {
  text-align: right;
}

.pass-card__barcode {
  display: flex;
  justify-content: center;
  padding: var(--space-3, 12px);
  border-top: 1px solid var(--admin-v2-border-default);
  background: var(--bg-base, var(--admin-v2-color-surface));
}

.pass-card__barcode svg {
  max-width: 100%;
  height: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .subscriptions-workspace-toolbar {
    align-items: flex-start;
  }

  .subscriptions-workspace-toolbar .products-workspace-toolbar__left,
  .subscriptions-workspace-toolbar .products-workspace-toolbar__right {
    width: 100%;
  }

  .subscription-member-card {
    flex-wrap: wrap;
  }

  .scan-result-details {
    grid-template-columns: 1fr;
  }

  .scan-manual-input-row {
    flex-direction: column;
  }

  .member-row {
    flex-wrap: wrap;
  }

  .member-row__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .pass-card__body {
    text-align: center;
  }

  .pass-card__identity {
    flex-direction: column;
    align-items: center;
  }

  .pass-card__qr-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pass-card__qr-details {
    width: 100%;
  }

  .subscription-card__details {
    flex-direction: column;
    gap: var(--space-1, 4px);
  }
}

/* tables.css */
/**
 * ADMIN CONTEXT: Tables
 * 
 * Admin-specifieke tabel styling, bulk actions toolbar,
 * en tabel-gerelateerde UI patterns.
 *
 * NOTE: Dit zijn de admin-specifieke .admin-table classes.
 * De generieke .table component staat in components/tables/_base.css
 */

/* =================================================================
   ADMIN TABLE CONTAINER
   ================================================================= */

.admin-table-container {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* =================================================================
   ADMIN TABLE
   ================================================================= */

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.admin-table th {
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  letter-spacing: 0.025em;
}

.admin-table .col-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table tbody tr:hover {
  background-color: var(--bg-hover);
}

/* Column utilities */
.col-checkbox {
  width: 40px;
  padding-left: var(--space-3);
}

/* Checkbox cel: het hele klikgebied is de td, niet alleen het vinkje */
.admin-table td.col-checkbox-cell {
  cursor: pointer;
  text-align: center;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

.admin-table td.col-checkbox-cell > label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: var(--admin-table-row-height, 48px);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  margin: 0;
}

/* Checkbox sizing: form-control-checkbox tokens (SSoT in checkboxes.css / forms-admin.css) */
.admin-table input[type="checkbox"] {
  width: var(--admin-v2-checkbox-size, 20px);
  height: var(--admin-v2-checkbox-size, 20px);
  cursor: pointer;
}

.col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.col-narrow {
  width: 40px;
}

.col-small {
  width: 100px;
}

.col-medium {
  width: 140px;
}

.actions-column {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

/* Row states */
.row-clickable {
  cursor: pointer;
}

.admin-table tbody tr.row-selected {
  background-color: var(--accent-glow);
}

.admin-table tbody tr.row-selected:hover {
  background-color: var(--accent-glow);
}

/* Table overflow wrapper */
.table-overflow {
  overflow-x: auto;
}

/* Scrollable table wrapper — vaste hoogte, sticky header */
.admin-table-scroll {
  max-height: calc(10 * var(--admin-table-row-height) + var(--admin-table-row-height));
  overflow-y: scroll;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/*
 * Custom webkit scrollbar — forceert "classic" modus op macOS.
 * Zonder scrollbar-width/scrollbar-color (standaard CSS) valt Chrome/Safari
 * terug op ::-webkit-scrollbar pseudo-elementen die ALTIJD zichtbaar zijn,
 * ongeacht macOS "Show scroll bars" instelling.
 *
 * Firefox krijgt geen custom styling (ondersteunt ::-webkit-scrollbar niet)
 * maar behoudt functionele scrollbar.
 */
.admin-table-scroll::-webkit-scrollbar {
  width: 12px;
}

.admin-table-scroll::-webkit-scrollbar-track {
  background: var(--bg-deep, var(--admin-v2-color-brand-ink));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.admin-table-scroll::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: var(--admin-radius-sm);
  border: 2px solid var(--bg-deep, var(--admin-v2-color-brand-ink));
}

.admin-table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent-light);
}

.admin-table-scroll .admin-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-surface);
}

.admin-table-scroll .admin-table thead th {
  border-bottom: 2px solid var(--border);
}

/* Empty state in table */
.empty-state-cell {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
}

/* Table footer */
.admin-table-footer {
  background: var(--bg-surface);
  border-top: 2px solid var(--border);
}

.admin-table tfoot td {
  padding: var(--space-3) var(--space-4);
}

/* =================================================================
   BULK ACTIONS TOOLBAR
   ================================================================= */

.bulk-toolbar {
  background: var(--bg-surface);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--border);
}

.bulk-toolbar-count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
  color: var(--accent);
  font-size: var(--text-sm);
}

.bulk-toolbar-actions {
  display: flex;
  gap: var(--space-2);
  flex: 1;
}

.bulk-toolbar-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Admin bulk actions bar (primary variant) */
.admin-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--accent);
  color: var(--bg-deep);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* Select en knoppen binnen bulk actions bar */
.admin-bulk-actions .form-select {
  background-color: var(--bg-deep);
  color: var(--text-primary);
  border-color: transparent;
  height: var(--control-height-sm);
  font-size: var(--control-font-sm);
}

.admin-bulk-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

/* =================================================================
   CHECKBOX BUTTON (for table rows)
   ================================================================= */

.btn-checkbox {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.btn-checkbox:hover {
  color: var(--accent);
}

.btn-checkbox:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =================================================================
   PAGINATION
   Compact, ghost-style pagination for workspace sidebar columns.
   ================================================================= */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  gap: var(--space-2);
}

.pagination__info {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.pagination__controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--admin-control-compact);
  height: var(--admin-control-compact);
  padding: 0 var(--space-1);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.pagination__btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.pagination__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination__page--active {
  background: var(--accent);
  color: var(--admin-v2-color-text-inverse);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.pagination__page--active:hover:not(:disabled) {
  background: var(--accent);
  color: var(--admin-v2-color-text-inverse);
}

.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: var(--admin-control-compact);
  color: var(--text-tertiary);
  font-size: 12px;
}

/* Responsive: hide page numbers on mobile, keep prev/next */
@media (max-width: 640px) {
  .pagination {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .pagination__ellipsis {
    display: none;
  }
}

/* =================================================================
   KOLOM-HELPERS (standalone, niet gebonden aan .admin-table scope)
   ================================================================= */

/* Standalone truncate — .admin-table .col-truncate bestaat ook (scoped) */
.col-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Standalone checkbox-cel — .admin-table td.col-checkbox-cell bestaat ook (scoped, met label) */
.col-checkbox-cell {
  width: 40px;
  padding-left: var(--space-3);
}

.col-status {
  width: 120px;
}

.col-title {
  min-width: 150px;
}

.col-slug {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-type {
  width: 100px;
}

/* terminal-lock-screen.css */
/**
 * Terminal lock screen on admin/balie bundle (no pos-numpad in admin.css).
 * Keep keypad layout aligned with pos/components.css numpad grid.
 */

.terminal-lock-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-4);
  background: var(--surface-primary);
}

.terminal-lock-screen .admin-login-container {
  width: min(100%, 24rem);
  margin: 0 auto;
}

.terminal-lock-screen__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.terminal-lock-screen__pin-display {
  min-height: 2.5rem;
  text-align: center;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.terminal-lock-screen__error {
  margin: 0;
  text-align: center;
}

.terminal-lock-screen .pos-numpad {
  width: 100%;
}

.terminal-lock-screen .pos-numpad__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.terminal-lock-screen .pos-numpad__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.terminal-lock-screen .pos-numpad__button:hover {
  background: var(--surface-hover);
}

.terminal-lock-screen .pos-numpad__button:active {
  background: var(--surface-tertiary);
  transform: scale(0.98);
}

.terminal-lock-screen .pos-numpad__button--action {
  border-color: var(--border-subtle);
  background: var(--surface-secondary);
}

.terminal-lock-screen__staff-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.terminal-lock-screen__button-unlock {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-4);
  width: min(100%, 24rem);
  margin: 0 auto;
}

.terminal-lock-screen__button-unlock-loading {
  display: flex;
  justify-content: center;
  padding: var(--space-6) 0;
}

.terminal-lock-screen__login-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.terminal-lock-screen__login-button {
  width: 100%;
  margin-top: 0;
  min-height: 3rem;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

.terminal-lock-screen__staff {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.terminal-lock-screen__submitting {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
}

/* Onder het cijferpaneel: wie nog geen code heeft, vraagt die aan de beheerder (opdracht 189). */
.terminal-lock-screen__hint {
  margin: 0;
  text-align: center;
  font-size: var(--pg-ui-font-size-meta);
  line-height: var(--pg-ui-line-height-meta);
  color: var(--pg-ui-color-text-muted);
}

/* theme-settings.css */
/* theme-literal-exception: theme-preview-swatches — Wave B allowed identity/preview/effect literals */
/* Theme Settings — Admin workspace-aligned theme picker */

@layer admin {
  .theme-settings-page .product-workspace-row__avatar,
  .theme-settings-page .products-detail-hero__placeholder {
    padding: 0;
    overflow: hidden;
  }

  .theme-status-pill--available {
    background: var(--accent-glow);
    color: var(--accent);
  }

  .theme-workspace-preview {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: inherit;
    overflow: hidden;
  }

  .theme-workspace-preview__segment {
    flex: 1;
  }

  .theme-workspace-preview--detail {
    min-height: 160px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    overflow: hidden;
  }

  .theme-workspace-preview[data-theme="fresh"] .theme-workspace-preview__segment--1 { background-color: #2563eb; }
  .theme-workspace-preview[data-theme="fresh"] .theme-workspace-preview__segment--2 { background-color: #ffffff; }
  .theme-workspace-preview[data-theme="fresh"] .theme-workspace-preview__segment--3 { background-color: #e8edf3; }

  .theme-workspace-preview[data-theme="classic"] .theme-workspace-preview__segment--1 { background-color: #2563eb; }
  .theme-workspace-preview[data-theme="classic"] .theme-workspace-preview__segment--2 { background-color: #ffffff; }
  .theme-workspace-preview[data-theme="classic"] .theme-workspace-preview__segment--3 { background-color: #f9fafb; }

  .theme-workspace-preview[data-theme="revolutionary"] .theme-workspace-preview__segment--1 { background-color: #f5a623; }
  .theme-workspace-preview[data-theme="revolutionary"] .theme-workspace-preview__segment--2 { background-color: #0a0a0f; }
  .theme-workspace-preview[data-theme="revolutionary"] .theme-workspace-preview__segment--3 { background-color: #12121a; }

  .theme-workspace-preview[data-theme="aqua"] .theme-workspace-preview__segment--1 { background-color: #10b981; }
  .theme-workspace-preview[data-theme="aqua"] .theme-workspace-preview__segment--2 { background-color: #e0f2fe; }
  .theme-workspace-preview[data-theme="aqua"] .theme-workspace-preview__segment--3 { background-color: #f0f9ff; }

  .theme-workspace-preview-hint {
    margin: var(--space-3) 0 0;
    font-size: var(--admin-workspace-detail-font);
    line-height: 1.45;
    color: var(--text-secondary);
  }

  .theme-settings-page .products-workspace-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 1024px) {
    .theme-settings-page .products-workspace-summary-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 768px) {
    .theme-settings-page .products-workspace-summary-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* today.css */
/**
 * ADMIN CONTEXT: Today operational dashboard.
 * Metrics provide context; actions remain the primary work surface.
 */

.today-page {
  padding: var(--space-4) var(--space-6) var(--space-6);
  color: var(--text-primary);
}

.today-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.today-dashboard-header h1 {
  margin: 0;
  font-size: var(--admin-font-size-xl, 1.5rem);
  font-weight: var(--font-semibold);
}

.today-dashboard-header p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.today-dashboard-refresh,
.today-dashboard-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--admin-control-compact, 2.25rem);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--admin-radius-sm, 0.375rem);
  background: transparent;
  color: var(--admin-v2-primary, var(--accent));
  font: inherit;
  font-weight: var(--font-medium);
  cursor: pointer;
}

.today-dashboard-refresh {
  color: var(--text-primary);
}

.today-dashboard-refresh:hover,
.today-dashboard-link:hover {
  background: var(--bg-hover);
}

.today-dashboard-refresh:focus-visible,
.today-dashboard-link:focus-visible,
.today-dashboard-action button:focus-visible {
  outline: 2px solid var(--admin-v2-primary, var(--accent));
  outline-offset: 2px;
}

.today-dashboard-refresh:disabled {
  cursor: wait;
  opacity: 0.65;
}

.today-dashboard-refresh .is-spinning {
  animation: today-dashboard-spin 800ms linear infinite;
}

@keyframes today-dashboard-spin {
  to { transform: rotate(360deg); }
}

.today-dashboard-notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 8%, var(--bg-deep));
  color: var(--text-secondary);
}

.today-dashboard-performance,
.today-dashboard-card,
.today-dashboard-week {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
}

.today-dashboard-performance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.28fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) var(--space-6);
}

.today-dashboard-performance--unavailable {
  display: block;
  color: var(--text-secondary);
}

.today-dashboard-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--admin-font-size-xs, 0.75rem);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.today-dashboard-performance h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: var(--font-semibold);
  line-height: 1.18;
}

.today-dashboard-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--admin-font-size-base, 1rem);
}

.today-dashboard-trend svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.today-dashboard-trend--up { color: var(--success); }
.today-dashboard-trend--down { color: var(--error); }
.today-dashboard-trend--neutral { color: var(--text-secondary); }

.today-dashboard-inline-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.today-dashboard-inline-metrics__divider {
  width: 1px;
  height: 1rem;
  background: var(--border);
}

.today-dashboard-performance__comparison {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-secondary);
}

.today-dashboard-performance__comparison strong {
  color: var(--text-primary);
  font-size: 1.35rem;
}

/* Domain cards: the grid follows the number of enabled domains, so a disabled
   module leaves no empty track and a single module does not stretch. */
.today-dashboard-domains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-panel-gap);
  margin-bottom: var(--admin-v2-section-gap);
}

.today-dashboard-domains[data-card-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.today-dashboard-domains[data-card-count="1"] {
  grid-template-columns: minmax(0, 28rem);
}

.today-dashboard-card.today-dashboard-domain-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--admin-v2-space-3);
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
}

.today-dashboard-domain-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-v2-space-3);
}

.today-dashboard-domain-card__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--admin-v2-icon-button-size-md);
  height: var(--admin-v2-icon-button-size-md);
  border-radius: var(--admin-v2-radius-md);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.today-dashboard-domain-card__icon svg {
  width: var(--admin-v2-icon-size-md);
  height: var(--admin-v2-icon-size-md);
}

.today-dashboard-domain-card__icon--commerce {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.today-dashboard-domain-card__icon--booking {
  background: var(--admin-v2-state-success-bg);
  color: var(--admin-v2-state-success-text);
}

.today-dashboard-domain-card__icon--subscriptions {
  background: var(--admin-v2-state-info-bg);
  color: var(--admin-v2-state-info-text);
}

.today-dashboard-domain-card__heading {
  min-width: 0;
}

.today-dashboard-domain-card__heading h2 {
  margin: 0;
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-card-title);
  line-height: var(--admin-v2-line-height-card-title);
  font-weight: var(--font-semibold);
}

.today-dashboard-domain-card__description {
  margin: var(--admin-v2-space-1) 0 0;
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
}

.today-dashboard-domain-card__metric {
  margin: 0;
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  font-weight: var(--font-medium);
}

.today-dashboard-domain-card__links {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-1);
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.today-dashboard-domain-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-2);
  width: 100%;
  min-height: var(--admin-v2-interactive-control-height);
  padding: 0 var(--admin-v2-space-2);
  border: 0;
  border-radius: var(--admin-v2-radius-control);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  font: inherit;
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  text-align: left;
  cursor: pointer;
}

.today-dashboard-domain-card__link--primary {
  color: var(--admin-v2-color-primary);
  font-weight: var(--font-medium);
}

.today-dashboard-domain-card__link:hover {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
}

.today-dashboard-domain-card__link:focus-visible {
  outline: 2px solid var(--admin-v2-color-primary);
  outline-offset: 2px;
}

.today-dashboard-focus {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.95fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.today-dashboard-focus--single {
  grid-template-columns: 1fr;
}

.today-dashboard-card {
  min-width: 0;
  padding: var(--space-5);
}

.today-dashboard-card > h2,
.today-dashboard-card__header h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--card-title-size, 1rem);
  font-weight: var(--font-semibold);
}

.today-dashboard-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.today-dashboard-card__header h2 {
  margin-bottom: 0;
}

.today-dashboard-card__settings {
  flex-shrink: 0;
  min-width: var(--admin-control-compact, 2.25rem);
  padding-inline: var(--space-2);
}

.today-dashboard-visitor-periods {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.today-dashboard-visitor-period {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.today-dashboard-visitor-period strong {
  font-size: 1.1rem;
}

.today-dashboard-visitor-period span,
.today-dashboard-visitor-hint,
.today-dashboard-visitor-breakdown {
  color: var(--text-secondary);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.today-dashboard-visitor-hint {
  display: block;
  margin-top: var(--space-3);
}

.today-dashboard-actions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-dashboard-action + .today-dashboard-action {
  border-top: 1px solid var(--border);
}

.today-dashboard-action button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: 4.4rem;
  padding: var(--space-3) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.today-dashboard-action__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  color: var(--admin-v2-primary, var(--accent));
}

.today-dashboard-action__icon--blocked,
.today-dashboard-action__icon--urgent { color: var(--error); }
.today-dashboard-action__icon--attention { color: var(--warning); }

.today-dashboard-action__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.today-dashboard-action__copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-dashboard-action__copy span {
  color: var(--text-secondary);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.today-dashboard-action__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--admin-v2-primary, var(--accent));
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.today-dashboard-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) 0;
  color: var(--text-secondary);
}

.today-dashboard-empty strong { color: var(--text-primary); }

.today-dashboard-insight {
  border-color: color-mix(in srgb, var(--admin-v2-primary, var(--accent)) 25%, var(--border));
  background: color-mix(in srgb, var(--admin-v2-primary, var(--accent)) 5%, var(--bg-deep));
}

.today-dashboard-insight__icon {
  margin-bottom: var(--space-3);
  color: var(--admin-v2-primary, var(--accent));
}

.today-dashboard-insight__icon svg {
  width: 2rem;
  height: 2rem;
}

.today-dashboard-insight h2 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.3;
}

.today-dashboard-insight > p:not(.today-dashboard-eyebrow) {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.today-dashboard-insight__revenue {
  display: block;
  margin-top: var(--space-4);
  font-size: 1.3rem;
}

.today-dashboard-link {
  margin-top: var(--space-2);
  margin-left: calc(var(--space-3) * -1);
}

.today-dashboard-week {
  display: grid;
  grid-template-columns: minmax(20rem, 1.2fr) minmax(24rem, 1fr);
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.today-dashboard-week h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.today-dashboard-week__summary > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.today-dashboard-week__summary > div > strong {
  font-size: 1.55rem;
}

.today-dashboard-week__summary .today-dashboard-trend {
  margin: 0;
  font-size: var(--admin-font-size-sm, 0.875rem);
}

.today-dashboard-week__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.today-dashboard-week__metrics > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  text-align: center;
}

.today-dashboard-week__metrics > div + div {
  border-left: 1px solid var(--border);
}

.today-dashboard-week__metrics strong { font-size: 1.1rem; }
.today-dashboard-week__metrics span {
  color: var(--text-secondary);
  font-size: var(--admin-font-size-xs, 0.75rem);
}

@media (max-width: 900px) {
  .today-dashboard-domains,
  .today-dashboard-domains[data-card-count="1"],
  .today-dashboard-domains[data-card-count="2"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-dashboard-performance,
  .today-dashboard-focus,
  .today-dashboard-week {
    grid-template-columns: 1fr;
  }

  .today-dashboard-performance__comparison {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .today-page { padding: var(--space-4); }
  .today-dashboard-header { align-items: center; }
  .today-dashboard-performance,
  .today-dashboard-card,
  .today-dashboard-week { padding: var(--space-4); }
  .today-dashboard-card.today-dashboard-domain-card { padding: var(--admin-v2-space-4); }
  .today-dashboard-action button { grid-template-columns: auto minmax(0, 1fr); }
  .today-dashboard-action__cta { grid-column: 2; }
  .today-dashboard-week__metrics > div { padding: 0 var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .today-dashboard-refresh .is-spinning { animation: none; }
}

@media (prefers-contrast: more) {
  .today-dashboard-performance,
  .today-dashboard-card,
  .today-dashboard-week { border-width: 2px; }
  .today-dashboard-domain-card { border-width: 2px; }
}

/* utilities.css */
/**
 * ADMIN CONTEXT: Utility Classes
 * 
 * Herbruikbare utility classes voor de admin context.
 * Gebaseerd op design tokens — geen hardcoded values.
 * 
 * BELANGRIJK: Dit zijn admin-specifieke utilities.
 * Gebruik design tokens voor consistentie.
 */

/* =================================================================
   DISPLAY
   ================================================================= */

.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.flex-row   { display: flex; flex-direction: row; }
.flex-wrap  { flex-wrap: wrap; }
.flex-1     { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.inline     { display: inline; }
.block      { display: block; }
.hidden     { display: none; }

/* =================================================================
   ALIGNMENT
   ================================================================= */

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }

/* =================================================================
   GAP
   ================================================================= */

.gap-025 { gap: var(--space-1); }
.gap-05  { gap: var(--space-2); }
.gap-075 { gap: var(--space-3); }
.gap-1   { gap: var(--space-4); }
.gap-15  { gap: var(--space-6); }
.gap-2   { gap: var(--space-8); }

/* =================================================================
   TEXT
   ================================================================= */

.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text Color */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-error     { color: var(--error); }
.text-danger    { color: var(--error); } /* alias for text-error */
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-accent    { color: var(--accent); }

/* Text Size */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

/* Font Weight */
.font-normal   { font-weight: var(--font-normal); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

/* =================================================================
   SPACING — Margin
   ================================================================= */

.mt-025 { margin-top: var(--space-1); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-0-5 { margin-bottom: var(--space-0-5); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* =================================================================
   SPACING — Padding
   ================================================================= */

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* =================================================================
   WIDTH & OVERFLOW
   ================================================================= */

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-40   { width: 40%; }
.max-w-prose { max-width: 65ch; }
.overflow-x-auto { overflow-x: auto; }
.overflow-hidden { overflow: hidden; }

/* =================================================================
   PADDING LEFT
   ================================================================= */

.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }

/* =================================================================
   BORDERS
   ================================================================= */

.border     { border: 1px solid var(--border); }
.border-t   { border-top: 1px solid var(--border); }
.border-b   { border-bottom: 1px solid var(--border); }
.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

/* =================================================================
   BACKGROUNDS
   ================================================================= */

.bg-primary    { background: var(--bg-elevated); }
.bg-secondary  { background: var(--bg-surface); }
.bg-surface    { background: var(--bg-surface); }
.bg-hover      { background: var(--bg-hover); }

/* =================================================================
   CURSOR & INTERACTION
   ================================================================= */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }

/* =================================================================
   OPACITY
   ================================================================= */

.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* =================================================================
   MARGIN RESET
   ================================================================= */

.m-0  { margin: 0; }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }

/* =================================================================
   VISIBILITY (responsive)
   ================================================================= */

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .show-mobile-only { display: none !important; }
}

/* =================================================================
   GRID UTILITIES
   ================================================================= */

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-full { grid-column: 1 / -1; }

/* =================================================================
   MAX WIDTH UTILITIES
   ================================================================= */

.max-w-xs { max-width: 20rem; } /* 320px */
.max-w-sm { max-width: 24rem; } /* 384px */
.max-w-md { max-width: 28rem; } /* 448px */
.max-w-lg { max-width: 32rem; } /* 512px */

/* =================================================================
   TEXT SIZE UTILITIES
   ================================================================= */

.text-lg-emoji { font-size: 1.25rem; }

/* =================================================================
   FLEX UTILITIES
   ================================================================= */

.inline-flex-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =================================================================
   BUTTON UTILITIES
   ================================================================= */

/* Fully unstyled button for custom interactive elements */
.btn-unstyled {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

/* Inline icon alignment */
.icon-inline {
  display: inline;
  vertical-align: middle;
}

/* =================================================================
   CROSS-NAVIGATION LINKS
   ================================================================= */

/* Clickable text element for admin cross-page navigation */
.admin-cross-link {
  cursor: pointer;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: opacity 0.15s ease;
}

.admin-cross-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.admin-cross-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* wizard.css */
/**
 * ADMIN CONTEXT: Wizard
 *
 * Styling voor wizard/onboarding formulier-elementen.
 * Gebaseerd op .form-input en .form-select patronen uit components/forms/_base.css.
 *
 * USAGE:
 * <input class="wizard-question__input" />
 * <select class="wizard-question__select"> ... </select>
 */

/* =================================================================
   WIZARD FORM INPUTS
   ================================================================= */

.wizard-question__input {
  width: 100%;
  height: var(--control-height-md);
  padding: 0 var(--control-padding-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--control-font-md);
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.wizard-question__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.wizard-question__input::placeholder {
  color: var(--text-secondary);
}

/* =================================================================
   WIZARD FORM SELECTS
   ================================================================= */

.wizard-question__select {
  width: 100%;
  height: var(--control-height-md);
  padding: 0 var(--space-10) 0 var(--control-padding-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  background-image: var(--admin-v2-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  color: var(--text-primary);
  font-size: var(--control-font-md);
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.wizard-question__select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* workspace-detail.css */
/**
 * CONTEXT: Admin — Workspace Detail
 * Detail-paneel componenten voor admin workspace pagina's:
 * validity bar, summary grid, balie-specifieke componenten.
 *
 * AI-NOTE: Deze classes zijn herbruikbaar op alle admin workspace detail views.
 * Tokens komen uit _base.css (admin-specifiek) en tokens/_base.css (globaal).
 */

/* -- WORKSPACE VALIDITY BAR -- */

.workspace-validity-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--admin-list-row-padding-y) var(--admin-card-padding-x);
  border-radius: var(--admin-radius-control);
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  margin: var(--admin-card-padding-y) var(--admin-card-padding-x) var(--admin-section-gap);
}

.workspace-validity-bar--active {
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 10%, transparent);
  color: var(--admin-v2-state-success-text);
}

.workspace-validity-bar--expiring {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 10%, transparent);
  color: var(--admin-v2-state-warning-text);
}

.workspace-validity-bar--expired {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 10%, transparent);
  color: var(--admin-v2-state-danger-text);
}

.workspace-validity-bar--paused {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 10%, transparent);
  color: var(--admin-v2-state-warning-text);
}

.workspace-validity-bar span {
  font-weight: var(--font-normal);
  font-size: var(--admin-font-size-base);
  opacity: 0.8;
}

/* -- SHARED DETAIL SECTION / TIMELINE -- */

.products-card-section {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap);
  padding: 0 var(--admin-card-padding-x) var(--admin-card-padding-y);
}

.products-card-section h3 {
  margin: 0;
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* -- WORKSPACE SECTION HEADER ACTIONS (e.g. SubscriptionDetailCard) -- */
.workspace-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.workspace-section-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.workspace-inline-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.workspace-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap);
}

.workspace-timeline li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--admin-list-row-padding-y) var(--admin-list-row-padding-x);
  border: 1px solid var(--admin-border-subtle);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg-wash);
}

.workspace-timeline-date {
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-normal);
  color: var(--text-secondary);
}

.workspace-timeline-type {
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.workspace-timeline-desc {
  font-size: var(--admin-workspace-detail-font);
  font-weight: var(--font-normal);
  color: var(--text-secondary);
}

.workspace-timeline li.workspace-member-note-card--reply {
  background: var(--success-dim);
  border-color: var(--success);
}

.workspace-member-note-thread:has(.workspace-member-note-card--reply) {
  border: 1px solid var(--info);
  border-radius: var(--admin-radius-sm);
  padding: var(--space-2);
  gap: var(--space-2);
  display: flex;
  flex-direction: column;
}

/* -- WORKSPACE SUMMARY GRID -- */

.workspace-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--admin-section-gap);
  padding: var(--admin-card-padding-y) var(--admin-card-padding-x);
}

.workspace-summary-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.workspace-summary-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-summary-field-label {
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

.workspace-summary-field-value {
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* -- WORKSPACE BALIE COMPONENTEN -- */

.workspace-balie-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--admin-card-padding-y) var(--admin-card-padding-x);
  gap: var(--admin-form-field-gap);
}

.workspace-balie-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--admin-border-subtle);
}

.workspace-balie-hero h2 {
  font-size: 18px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.workspace-balie-hero .balie-meta {
  font-size: var(--admin-font-size-base);
  color: var(--text-secondary);
}

.workspace-balie-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--admin-section-gap) var(--admin-card-padding-x);
  margin: 0 var(--admin-card-padding-x) var(--admin-section-gap);
  border-radius: var(--admin-radius-control);
  font-size: 16px;
  font-weight: var(--font-bold);
  letter-spacing: 0.02em;
}

.workspace-balie-status--valid {
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 12%, transparent);
  color: var(--admin-v2-state-success-text);
}

.workspace-balie-status--invalid {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 12%, transparent);
  color: var(--admin-v2-state-danger-text);
}

.workspace-balie-status--paused {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 12%, transparent);
  color: var(--admin-v2-state-warning-text);
}

/* workspace-shared.css */
/**
 * CONTEXT: Admin — Workspace Shared
 * Gedeelde workspace componenten voor admin list/detail pagina's:
 * status badges, type chips, filter chips, sort, selectie-indicator.
 *
 * AI-NOTE: Deze classes zijn herbruikbaar op alle admin workspace pagina's.
 * Tokens komen uit _base.css (admin-specifiek) en tokens/_base.css (globaal).
 */

/* -- WORKSPACE STATUS BADGES -- */

.workspace-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--admin-radius-pill);
  font-size: 11px;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.workspace-badge--active {
  background: color-mix(in srgb, var(--admin-v2-state-success-text) 12%, transparent);
  color: var(--admin-v2-state-success-text);
}

.workspace-badge--expired {
  background: color-mix(in srgb, var(--admin-v2-state-danger-text) 12%, transparent);
  color: var(--admin-v2-state-danger-text);
}

.workspace-badge--paused {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 12%, transparent);
  color: var(--admin-v2-state-warning-text);
}

.workspace-badge--expiring {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 12%, transparent);
  color: var(--admin-v2-state-warning-text);
}

/* -- WORKSPACE TYPE CHIPS -- */

.workspace-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--admin-radius-sm);
  font-size: 11px;
  font-weight: var(--font-medium);
  line-height: 1.4;
  white-space: nowrap;
  background: var(--admin-bg-wash);
  color: var(--text-secondary);
}

.workspace-type-chip--individual {
  /* standaard stijl, geen override nodig */
}

.workspace-type-chip--family {
  background: color-mix(in srgb, var(--admin-v2-state-information-text) 10%, transparent);
  color: var(--admin-v2-state-information-text);
}

/* -- WORKSPACE FILTER CHIPS -- */

.products-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.products-filter-chips-label {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.products-filter-chips--panel {
  margin-top: var(--space-3);
  padding: 0;
  border-bottom: none;
}

.products-filter-chips--panel:first-child {
  margin-top: 0;
}

.products-filter-chips--panel + .products-filter-chips--panel {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--admin-border-light);
}

.products-filter-chips--panel .products-filter-chips-label {
  margin-bottom: 2px;
}

.workspace-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--admin-card-padding-y) var(--admin-card-padding-x);
  border-bottom: 1px solid var(--admin-border-subtle);
}

.workspace-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--admin-form-field-gap);
  border-radius: var(--admin-radius-pill);
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  line-height: 1.35;
  cursor: pointer;
  border: 1px solid var(--admin-border-subtle);
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.workspace-filter-chip:hover {
  border-color: var(--admin-border-medium);
  color: var(--text-primary);
}

.workspace-filter-chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--admin-v2-color-text-inverse);
}

/* -- WORKSPACE SORT ROW -- */

.workspace-sort-row {
  display: flex;
  align-items: center;
  gap: var(--admin-toolbar-gap);
  padding: 6px var(--admin-card-padding-x);
  border-bottom: 1px solid var(--admin-border-subtle);
}

.workspace-sort-select {
  appearance: none;
  background: transparent;
  border: none;
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 0;
}

.workspace-sort-select:focus {
  outline: none;
  color: var(--text-primary);
}

/* -- WORKSPACE SELECTION INDICATOR -- */

.workspace-selection-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--admin-font-size-base);
  font-weight: var(--font-medium);
  color: var(--accent);
  white-space: nowrap;
}

.workspace-selection-count button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--admin-radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

.workspace-selection-count button:hover {
  background: var(--admin-bg-wash);
  color: var(--text-primary);
}

/* v2/foundations/editor-rhythm.css */
/**
 * Pagayo Design V2 — Editor Workspace foundation tokens (RC-1-B).
 *
 * Pagayo-owned scale inspired by admin/editor rhythm (Tailwind-like spacing).
 * Scoped to editor surfaces only — legacy admin CSS is unchanged.
 */
:root {
  /* Spacing */
  --pg-editor-space-0: 0;
  --pg-editor-space-0-5: 2px;
  --pg-editor-space-1: 4px;
  --pg-editor-space-1-5: 6px;
  --pg-editor-space-2: 8px;
  --pg-editor-space-2-5: 10px;
  --pg-editor-space-3: 12px;
  --pg-editor-space-3-5: 14px;
  --pg-editor-space-4: 16px;
  --pg-editor-space-5: 20px;
  --pg-editor-space-6: 24px;
  --pg-editor-space-7: 28px;
  --pg-editor-space-8: 32px;
  --pg-editor-space-10: 40px;
  --pg-editor-space-12: 48px;
  --pg-editor-space-16: 64px;

  /* Radius */
  --pg-editor-radius-sm: var(--admin-v2-radius-xs, 4px);
  --pg-editor-radius-md: var(--admin-v2-radius-sm, 6px);
  --pg-editor-radius-lg: var(--admin-v2-radius-md, 8px);
  --pg-editor-radius-xl: var(--admin-v2-radius-lg, 12px);
  --pg-editor-radius-2xl: var(--admin-v2-radius-xl, 16px);

  /* Typography — admin Products / admin-v2 SSoT (no parallel 18px scale) */
  --pg-editor-font-size-xs: var(--admin-v2-font-size-meta, 12px);
  --pg-editor-font-size-sm: var(--admin-v2-font-size-body, var(--admin-font-size-base, 14px));
  --pg-editor-font-size-md: var(--admin-v2-font-size-section-title, var(--admin-font-size-label, 16px));
  --pg-editor-font-size-lg: var(--admin-v2-font-size-section-title, var(--admin-font-size-label, 16px));
  --pg-editor-font-size-xl: var(--admin-v2-font-size-page-title, 20px);
  /* Field labels: same as .products-editor-label */
  --pg-editor-font-size-label: var(--admin-font-size-label, calc(var(--admin-font-size-base, 14px) + 2px));

  --pg-editor-line-height-xs: var(--admin-v2-line-height-meta, 18px);
  --pg-editor-line-height-sm: var(--admin-v2-line-height-body, 20px);
  --pg-editor-line-height-md: var(--admin-v2-line-height-section-title, 24px);
  --pg-editor-line-height-lg: var(--admin-v2-line-height-section-title, 24px);
  --pg-editor-line-height-xl: var(--admin-v2-line-height-page-title, 28px);

  --pg-editor-font-weight-normal: var(--admin-v2-font-weight-normal, 400);
  --pg-editor-font-weight-medium: var(--admin-v2-font-weight-medium, 500);
  --pg-editor-font-weight-semibold: var(--admin-v2-font-weight-semibold, 600);
  --pg-editor-font-weight-bold: var(--admin-v2-font-weight-bold, 700);

  /* Colors */
  --pg-editor-color-bg: var(--admin-v2-color-bg);
  --pg-editor-color-surface: var(--admin-v2-color-surface);
  --pg-editor-color-surface-muted: var(--admin-v2-color-surface-muted);
  --pg-editor-color-border: var(--admin-v2-border-default);
  --pg-editor-color-border-strong: var(--admin-v2-border-strong);
  --pg-editor-color-text: var(--admin-v2-color-text);
  --pg-editor-color-text-muted: var(--admin-v2-color-text-muted);
  --pg-editor-color-text-soft: var(--admin-v2-color-text-soft);

  /* Brand */
  --pg-editor-color-brand-50: #ecf3ff;
  --pg-editor-color-brand-100: #dde9ff;
  --pg-editor-color-brand-500: var(--admin-v2-color-primary);
  --pg-editor-color-brand-600: var(--admin-v2-color-primary-hover);
  --pg-editor-color-brand-800: #252dae;

  /* States */
  --pg-editor-color-danger: #d92d20;
  --pg-editor-color-danger-soft: #fef3f2;
  --pg-editor-color-success: #12b76a;
  --pg-editor-color-success-soft: #ecfdf3;

  /* Controls & layout — field/interactive SSoT = admin compact 36px (Products lane) */
  --pg-editor-control-height-sm: var(--admin-v2-field-control-height, var(--admin-control-field, 36px));
  --pg-editor-control-height-md: var(--admin-v2-field-control-height, var(--admin-control-field, 36px));
  --pg-editor-control-height-lg: var(--admin-v2-field-control-height, var(--admin-control-field, 36px));
  --pg-editor-icon-button-size: var(--admin-v2-interactive-control-height, var(--admin-control-compact, 36px));
  --pg-editor-left-rail-width: 202px;

  --pg-editor-field-gap: var(--pg-editor-space-4);
  --pg-editor-field-group-gap: var(--pg-editor-space-5);
  --pg-editor-pane-padding-block-start: var(--pg-editor-space-5);
  --pg-editor-pane-padding-inline: var(--pg-editor-space-6);
  --pg-editor-pane-padding-block-end: var(--pg-editor-space-6);

  /* Shadows */
  --pg-editor-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --pg-editor-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);

  /* Motion */
  --pg-editor-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy V2 aliases (bridge for existing rules) */
  --pg-v2-space-0: var(--pg-editor-space-0);
  --pg-v2-space-1: var(--pg-editor-space-1);
  --pg-v2-space-2: var(--pg-editor-space-2);
  --pg-v2-space-3: var(--pg-editor-space-3);
  --pg-v2-space-4: var(--pg-editor-space-4);
  --pg-v2-space-5: var(--pg-editor-space-5);
  --pg-v2-space-6: var(--pg-editor-space-6);
  --pg-v2-space-8: var(--pg-editor-space-8);
  --pg-v2-space-10: var(--pg-editor-space-10);
  --pg-v2-space-12: var(--pg-editor-space-12);
  --pg-v2-space-16: var(--pg-editor-space-16);
  --pg-v2-control-height: var(--pg-editor-control-height-lg);
  --pg-v2-action-size: var(--pg-editor-icon-button-size);
  --pg-v2-radius-sm: var(--pg-editor-radius-lg);
  --pg-v2-radius-md: var(--pg-editor-radius-xl);
  --pg-v2-radius-lg: var(--pg-editor-radius-2xl);
  --pg-v2-radius-sheet: var(--pg-editor-radius-2xl);
  --pg-v2-workspace-nav-width: var(--pg-editor-left-rail-width);
  --pg-v2-panel-padding: var(--pg-editor-pane-padding-inline);
  --pg-v2-field-gap: var(--pg-editor-field-gap);
  --pg-v2-section-gap: var(--pg-editor-space-6);
  --pg-v2-motion-fast: var(--pg-editor-transition-fast);
}

/* v2/interaction/editor-interaction-language.css */
/**
 * Pagayo Design V2 — interaction language.
 *
 * Generic editor behavior tokens. User-facing copy remains in i18n.
 */
:root {
  --pg-v2-notification-duration: 2000ms;
  --pg-v2-dialog-width: 440px;
  --pg-v2-backdrop: rgb(16 24 40 / 42%);

  --pg-editor-dialog-width: var(--pg-v2-dialog-width);
  --pg-editor-backdrop: var(--pg-v2-backdrop);
  --pg-editor-context-menu-width: 240px;
}

/* v2/editor-workspace/rich-text.css */
/**
 * Pagayo Design V2 — Rich text (TipTap) skins SSoT.
 *
 * Workspace Chrome Contract / Role Contract:
 * - One TipTap engine in storefront (`RichTextEditor.tsx`).
 * - Compact skin (`.editor-rich-text--compact` + `.products-description-editor`)
 *   is the workspace default (Products, website editor sections).
 * - Full skin (`.editor-rich-text` / `.rich-editor` without compact) is for
 *   long-form content only (Pages, Blog, FAQ, e-mail templates).
 * - Dual class names stay as deprecated aliases until callers emit a single family.
 *
 * All TipTap surface / toolbar / content rules live HERE. Do not reintroduce
 * parallel families in products.css or workspace-shell.css.
 */

/* Compact workspace-default surface (entity sheets + SoftPanels). */
.editor-rich-text--compact,
.products-description-editor {
  width: 100%;
  min-height: 66px;
  border: 1px solid var(--admin-v2-border-strong, var(--admin-border-strong));
  border-radius: var(--admin-v2-radius-card, var(--admin-radius-card));
  background: var(--admin-v2-color-surface);
  overflow: hidden;
  transition:
    border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.editor-rich-text--compact:focus-within,
.products-description-editor:focus-within {
  border-color: var(--admin-v2-color-primary, var(--tenant-accent, var(--accent)));
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--admin-v2-color-primary, var(--tenant-accent, var(--accent))) 18%,
    transparent
  );
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .editor-rich-text,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .rich-editor {
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-xl);
  overflow: hidden;
  background-color: var(--pg-editor-color-surface);
  container-type: inline-size;
  container-name: rich-editor;
  transition:
    border-color var(--pg-editor-transition-fast),
    box-shadow var(--pg-editor-transition-fast);
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .editor-rich-text:focus-within,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .rich-editor:focus-within {
  border-color: var(--pg-editor-color-brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-editor-color-brand-500) 18%, transparent);
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .editor-rich-text--compact,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .products-description-editor {
  width: 100%;
  min-height: 132px;
  border-radius: var(--admin-radius-card);
  background: var(--admin-v2-color-surface);
}

/* Toolbar layout must apply in every surface (entity sheet, create columns, website editor). */
.editor-rich-text__toolbar,
.rich-editor-toolbar {
  display: flex;
  gap: var(--pg-editor-space-1);
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: var(--pg-editor-space-2);
  background-color: var(--pg-editor-color-surface-muted);
  border-bottom: 1px solid var(--pg-editor-color-border);
  --rich-editor-toolbar-btn-size: var(--pg-editor-control-height-lg);
  --rich-editor-toolbar-icon-size: 18px;
}

/* Compact product/admin description editors: single dense toolbar row. */
.editor-rich-text--compact .editor-rich-text__toolbar,
.editor-rich-text--compact .rich-editor-toolbar,
.products-description-editor .editor-rich-text__toolbar,
.products-description-editor .rich-editor-toolbar,
.admin-v2-entity-sheet .editor-rich-text__toolbar,
.admin-v2-entity-sheet .rich-editor-toolbar {
  --rich-editor-toolbar-btn-size: 21px;
  --rich-editor-toolbar-icon-size: 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  gap: 0;
  padding: 2px 4px;
}

.editor-rich-text--compact .editor-rich-text__toolbar-separator,
.editor-rich-text--compact .rich-editor-toolbar-separator,
.products-description-editor .editor-rich-text__toolbar-separator,
.products-description-editor .rich-editor-toolbar-separator,
.admin-v2-entity-sheet .editor-rich-text__toolbar-separator,
.admin-v2-entity-sheet .rich-editor-toolbar-separator {
  margin: 0 2px;
  flex-shrink: 0;
}

.editor-rich-text--compact .editor-rich-text__toolbar-group,
.editor-rich-text--compact .rich-editor-toolbar-group,
.products-description-editor .editor-rich-text__toolbar-group,
.products-description-editor .rich-editor-toolbar-group,
.admin-v2-entity-sheet .editor-rich-text__toolbar-group,
.admin-v2-entity-sheet .rich-editor-toolbar-group {
  gap: 0;
}

.editor-rich-text--compact .editor-rich-text__toolbar-trailing,
.editor-rich-text--compact .rich-editor-toolbar-trailing,
.products-description-editor .editor-rich-text__toolbar-trailing,
.products-description-editor .rich-editor-toolbar-trailing,
.admin-v2-entity-sheet .editor-rich-text__toolbar-trailing,
.admin-v2-entity-sheet .rich-editor-toolbar-trailing {
  margin-left: 2px;
}

.editor-rich-text__toolbar-spacer,
.rich-editor-toolbar-spacer {
  flex: 1;
  min-width: var(--pg-editor-space-2);
}

.editor-rich-text__toolbar-trailing,
.rich-editor-toolbar-trailing {
  display: flex;
  align-items: center;
  gap: var(--pg-editor-space-1);
  margin-left: auto;
  flex-shrink: 0;
}

.editor-rich-text__body,
.rich-editor-content-wrap {
  position: relative;
}

.editor-rich-text__body--assistant .editor-rich-text__editor,
.editor-rich-text__body--assistant .editor-rich-text__preview,
.editor-rich-text__body--assistant .rich-editor-content,
.rich-editor-content-wrap--assistant .rich-editor-content,
.rich-editor-content-wrap--assistant .products-description-editor__content {
  padding-bottom: calc(var(--pg-editor-space-4) + 36px);
  padding-right: calc(var(--pg-editor-space-4) + 36px);
}

.editor-rich-text__body--assistant .editor-rich-text__editor--compact,
.editor-rich-text__body--assistant .products-description-editor__content,
.rich-editor-content-wrap--assistant .products-description-editor__content,
.rich-editor-content-wrap--assistant .products-description-editor .ProseMirror {
  padding-bottom: calc(12px + 36px);
  padding-right: calc(12px + 36px);
}

.editor-rich-text__assistant-button,
.rich-editor-content-assistant-btn {
  --admin-assistant-gold: var(--admin-v2-color-brand-gold);
  --admin-assistant-gold-hover: var(--admin-v2-color-brand-gold);
  position: absolute;
  right: var(--pg-editor-space-2);
  bottom: var(--pg-editor-space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: var(--pg-editor-control-height-lg);
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--admin-assistant-gold);
  cursor: pointer;
  box-shadow: none;
  transition: color var(--pg-editor-transition-fast);
}

.editor-rich-text__assistant-button:hover:not(:disabled),
.rich-editor-content-assistant-btn:hover:not(:disabled) {
  color: var(--admin-assistant-gold-hover);
  box-shadow: none;
}

.editor-rich-text__assistant-button:focus-visible,
.rich-editor-content-assistant-btn:focus-visible {
  outline: 2px solid var(--admin-assistant-gold);
  outline-offset: 2px;
}

.editor-rich-text__toolbar-group,
.rich-editor-toolbar-group {
  display: flex;
  gap: 2px;
}

.editor-rich-text__toolbar-separator,
.rich-editor-toolbar-separator {
  width: 1px;
  margin: 0 var(--pg-editor-space-2);
  background-color: var(--pg-editor-color-border);
}

.editor-rich-text__button,
.rich-editor-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rich-editor-toolbar-btn-size);
  height: var(--rich-editor-toolbar-btn-size);
  padding: 0;
  border: none;
  border-radius: var(--pg-editor-radius-md);
  background-color: transparent;
  color: var(--pg-editor-color-text-muted);
  cursor: pointer;
  transition:
    background-color var(--pg-editor-transition-fast),
    color var(--pg-editor-transition-fast);
  flex-shrink: 0;
}

.editor-rich-text__button svg,
.rich-editor-toolbar-btn svg {
  width: var(--rich-editor-toolbar-icon-size);
  height: var(--rich-editor-toolbar-icon-size);
  flex-shrink: 0;
}

@container rich-editor (max-width: 42rem) {
  .editor-rich-text__toolbar,
  .rich-editor-toolbar {
    --rich-editor-toolbar-btn-size: 26px;
    --rich-editor-toolbar-icon-size: 15px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    gap: 1px;
    padding: 6px 8px;
  }

  .editor-rich-text__toolbar-separator,
  .rich-editor-toolbar-separator {
    margin: 0 3px;
    flex-shrink: 0;
  }

  .editor-rich-text__toolbar-trailing,
  .rich-editor-toolbar-trailing {
    margin-left: auto;
  }
}

@container rich-editor (max-width: 28rem) {
  .editor-rich-text__toolbar,
  .rich-editor-toolbar {
    --rich-editor-toolbar-btn-size: 24px;
    --rich-editor-toolbar-icon-size: 14px;
    padding: 4px 6px;
  }

  .editor-rich-text__toolbar-separator,
  .rich-editor-toolbar-separator {
    margin: 0 2px;
  }
}

.order-create-column .editor-rich-text__toolbar,
.order-create-column .products-description-editor .rich-editor-toolbar,
.order-create-column .rich-editor-toolbar {
  --rich-editor-toolbar-btn-size: 26px;
  --rich-editor-toolbar-icon-size: 15px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  gap: 1px;
  padding: 6px 8px;
}

.order-create-column .editor-rich-text__toolbar-separator,
.order-create-column .products-description-editor .rich-editor-toolbar-separator,
.order-create-column .rich-editor-toolbar-separator {
  margin: 0 3px;
  flex-shrink: 0;
}

.order-create-column .editor-rich-text__toolbar-trailing,
.order-create-column .products-description-editor .rich-editor-toolbar-trailing,
.order-create-column .rich-editor-toolbar-trailing {
  margin-left: auto;
  flex-shrink: 0;
}

.editor-rich-text__button:hover:not(:disabled),
.rich-editor-toolbar-btn:hover:not(:disabled) {
  background-color: var(--pg-editor-color-bg);
  color: var(--pg-editor-color-text);
}

.editor-rich-text__button--active,
.rich-editor-toolbar-btn--active {
  background-color: var(--pg-editor-color-brand-100);
  color: var(--pg-editor-color-brand-600);
}

.editor-rich-text__button:disabled,
.rich-editor-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.editor-rich-text__toolbar-assistant-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--rich-editor-toolbar-btn-size);
  height: var(--rich-editor-toolbar-btn-size);
  padding: 0;
  border: 0;
  border-radius: var(--pg-editor-radius-md);
  background: transparent;
  color: var(--admin-v2-color-brand-gold);
  cursor: pointer;
}

.editor-rich-text__toolbar-assistant-button:hover,
.editor-rich-text__toolbar-assistant-button:focus-visible {
  color: var(--admin-v2-color-brand-gold);
  background: color-mix(in srgb, var(--admin-v2-color-brand-gold) 12%, transparent);
}

.editor-rich-text__toolbar-assistant-button:focus-visible {
  outline: 2px solid var(--admin-v2-color-brand-gold);
  outline-offset: 2px;
}

.editor-rich-text__editor,
.editor-rich-text__preview,
.rich-editor-content {
  padding: var(--pg-editor-space-4);
  font-size: var(--pg-editor-font-size-md);
  line-height: var(--pg-editor-line-height-md);
  color: var(--pg-editor-color-text);
}

.editor-rich-text__editor--compact,
.products-description-editor__content,
.products-description-editor .ProseMirror {
  min-height: 132px;
  padding: 12px;
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.55;
}

.editor-rich-text__editor.ProseMirror,
.editor-rich-text__preview.ProseMirror,
.rich-editor-content.ProseMirror {
  outline: none;
  min-height: inherit;
}

.editor-rich-text__editor .ProseMirror-selectednode,
.editor-rich-text__editor.ProseMirror .ProseMirror-selectednode,
.editor-rich-text__preview .ProseMirror-selectednode,
.editor-rich-text__preview.ProseMirror .ProseMirror-selectednode,
.products-description-editor .ProseMirror-selectednode,
.products-description-editor__content .ProseMirror-selectednode,
.rich-editor-content .ProseMirror-selectednode,
.rich-editor-content.ProseMirror .ProseMirror-selectednode {
  outline: none;
}

.editor-rich-text__editor p,
.editor-rich-text__preview p,
.rich-editor-content p {
  margin: 0 0 1em 0;
}

.editor-rich-text__editor p:last-child,
.editor-rich-text__preview p:last-child,
.rich-editor-content p:last-child {
  margin-bottom: 0;
}

.editor-rich-text__editor--compact p,
.products-description-editor__content p,
.products-description-editor .ProseMirror p {
  margin: 0;
}

.editor-rich-text__editor--compact p + p,
.products-description-editor__content p + p,
.products-description-editor .ProseMirror p + p {
  margin-top: 0.75em;
}

.editor-rich-text__editor h1,
.editor-rich-text__editor h2,
.editor-rich-text__editor h3,
.editor-rich-text__preview h1,
.editor-rich-text__preview h2,
.editor-rich-text__preview h3,
.rich-editor-content h1,
.rich-editor-content h2,
.rich-editor-content h3 {
  margin: 1em 0 0.35em 0;
  line-height: 1.25;
  color: var(--pg-editor-color-text);
}

.editor-rich-text__editor--compact h1,
.editor-rich-text__editor--compact h2,
.editor-rich-text__editor--compact h3,
.products-description-editor__content h1,
.products-description-editor__content h2,
.products-description-editor__content h3,
.products-description-editor .ProseMirror h1,
.products-description-editor .ProseMirror h2,
.products-description-editor .ProseMirror h3 {
  margin-top: 0.75em;
  margin-bottom: 0.35em;
}

.editor-rich-text__editor h1:first-child,
.editor-rich-text__editor h2:first-child,
.editor-rich-text__editor h3:first-child,
.editor-rich-text__preview h1:first-child,
.editor-rich-text__preview h2:first-child,
.editor-rich-text__preview h3:first-child,
.rich-editor-content h1:first-child,
.rich-editor-content h2:first-child,
.rich-editor-content h3:first-child,
.editor-rich-text__editor--compact h1:first-child,
.editor-rich-text__editor--compact h2:first-child,
.editor-rich-text__editor--compact h3:first-child,
.products-description-editor__content h1:first-child,
.products-description-editor__content h2:first-child,
.products-description-editor__content h3:first-child,
.products-description-editor .ProseMirror h1:first-child,
.products-description-editor .ProseMirror h2:first-child,
.products-description-editor .ProseMirror h3:first-child {
  margin-top: 0;
}

.editor-rich-text__editor h1,
.editor-rich-text__preview h1,
.rich-editor-content h1 {
  font-size: 1.625em;
  font-weight: var(--pg-editor-font-weight-bold);
  letter-spacing: -0.02em;
}

.editor-rich-text__editor h2,
.editor-rich-text__preview h2,
.rich-editor-content h2 {
  font-size: 1.375em;
  font-weight: var(--pg-editor-font-weight-bold);
  letter-spacing: -0.015em;
}

.editor-rich-text__editor h3,
.editor-rich-text__preview h3,
.rich-editor-content h3 {
  font-size: 1.125em;
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-rich-text__editor ul,
.editor-rich-text__editor ol,
.editor-rich-text__preview ul,
.editor-rich-text__preview ol,
.rich-editor-content ul,
.rich-editor-content ol {
  margin: 0 0 1em 0;
  padding-left: 1.5em;
}

.editor-rich-text__editor ul,
.editor-rich-text__preview ul,
.rich-editor-content ul {
  list-style: disc;
}

.editor-rich-text__editor ol,
.editor-rich-text__preview ol,
.rich-editor-content ol {
  list-style: decimal;
}

.editor-rich-text__editor li,
.editor-rich-text__preview li,
.rich-editor-content li {
  margin-bottom: 0.25em;
}

.editor-rich-text__editor blockquote,
.editor-rich-text__preview blockquote,
.rich-editor-content blockquote {
  margin: 0 0 1em 0;
  padding: 0.4em 0.9em;
  border-left: 3px solid var(--pg-editor-color-brand-500);
  color: var(--pg-editor-color-text-muted);
  background-color: color-mix(in srgb, var(--pg-editor-color-brand-500) 6%, transparent);
}

.editor-rich-text__editor a,
.editor-rich-text__preview a,
.rich-editor-content a {
  color: var(--pg-editor-color-brand-600);
  text-decoration: underline;
}

.editor-rich-text__editor strong,
.editor-rich-text__preview strong,
.rich-editor-content strong {
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-rich-text__editor em,
.editor-rich-text__preview em,
.rich-editor-content em {
  font-style: italic;
}

.editor-rich-text__editor code,
.editor-rich-text__preview code,
.rich-editor-content code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  padding: 0.1em 0.35em;
  border-radius: var(--pg-editor-radius-sm);
  background-color: color-mix(in srgb, var(--pg-editor-color-text) 8%, transparent);
}

.editor-rich-text__editor pre,
.editor-rich-text__preview pre,
.rich-editor-content pre {
  margin: 0 0 1em 0;
  padding: 0.8em 1em;
  border-radius: var(--pg-editor-radius-md);
  overflow-x: auto;
  background-color: color-mix(in srgb, var(--pg-editor-color-text) 9%, transparent);
}

.editor-rich-text__editor pre code,
.editor-rich-text__preview pre code,
.rich-editor-content pre code {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.editor-rich-text__editor hr,
.editor-rich-text__preview hr,
.rich-editor-content hr {
  border: 0;
  border-top: 1px solid var(--pg-editor-color-border);
  margin: 1.1em 0;
}

.editor-rich-text__editor p.is-editor-empty:first-child::before,
.editor-rich-text__preview p.is-editor-empty:first-child::before,
.rich-editor-content p.is-editor-empty:first-child::before,
.editor-rich-text__editor--compact.ProseMirror p.is-editor-empty:first-child::before,
.products-description-editor__content.ProseMirror p.is-editor-empty:first-child::before,
.products-description-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--pg-editor-color-text-muted);
  pointer-events: none;
  height: 0;
}

.editor-rich-text__status,
.rich-editor-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pg-editor-space-8);
  color: var(--pg-editor-color-text-muted);
}

.editor-rich-text--readonly .editor-rich-text__editor,
.editor-rich-text--readonly .editor-rich-text__preview,
.rich-editor--readonly .rich-editor-content {
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-xl);
  background: var(--pg-editor-color-surface-muted);
}

.editor-rich-text--readonly .ProseMirror,
.rich-editor--readonly .ProseMirror {
  cursor: default;
  outline: none;
}


/* v2/editor-workspace/workspace-shell.css */
/**
 * Pagayo Design V2 — Editor Workspace shell normalization (RC-1-B).
 *
 * Applies RC-1-B tokens to Website Editor / Editor Workspace surfaces only.
 */

body.website-editor-active,
body.editor-workspace-active {
  /* Geometry only — color tokens hang on :root bridge in website-editor.css → --pg-editor-* → --admin-v2-*. */
  --editor-workspace-nav-width: var(--pg-editor-left-rail-width);
  --editor-workspace-sheet-height: calc(100dvh - var(--website-editor-chrome-height, 68px));
  --website-editor-workspace-nav-width: var(--editor-workspace-nav-width);
  --website-editor-sheet-height: var(--editor-workspace-sheet-height);
}

/* Full-page sheet / pane surfaces (admin entity-sheet parity on website editor) */
.editor-workspace-sheet,
.website-editor-sheet {
  background: var(--pg-editor-color-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.editor-workspace-sheet__handle,
.website-editor-sheet__handle {
  display: none;
}

/* Left rail */
.editor-workspace__navigation {
  gap: var(--pg-editor-space-2);
  padding: var(--pg-editor-space-4) var(--pg-editor-space-2)
    calc(var(--pg-editor-icon-button-size) + var(--pg-editor-space-8));
  background: var(--pg-editor-color-surface-muted);
  border-inline-end-color: var(--pg-editor-color-border);
}

.editor-workspace__navigation-footer {
  gap: var(--pg-editor-space-2);
  padding-top: var(--pg-editor-space-3);
  background: var(--pg-editor-color-surface-muted);
}

.editor-workspace__navigation-list {
  gap: var(--pg-editor-space-2);
}

.editor-workspace__navigation-link {
  min-height: var(--pg-editor-control-height-lg);
  padding: var(--pg-editor-space-3) var(--pg-editor-space-4);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  color: var(--pg-editor-color-text-muted);
  transition: background-color var(--pg-editor-transition-fast),
    border-color var(--pg-editor-transition-fast),
    color var(--pg-editor-transition-fast);
}

.editor-workspace__navigation-link:hover:not(:disabled) {
  background: var(--pg-editor-color-bg);
  color: var(--pg-editor-color-text);
}

.editor-workspace__navigation-link--active,
.editor-workspace__navigation-link[aria-current="page"] {
  background: var(--pg-editor-color-surface);
  border-color: var(--pg-editor-color-border-strong);
  color: var(--pg-editor-color-text);
  box-shadow: var(--pg-editor-shadow-xs);
}

.editor-workspace__navigation-link:focus-visible,
.editor-workspace-sheet__tab:focus-visible,
.website-editor-sheet__tab:focus-visible,
.website-editor-content-tabs__tab:focus-visible,
.website-editor-content-tabs__add:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

/* Icon action buttons — Editor Form Language + workspace navigation */
.editor-workspace__navigation-action,
.editor-action-button,
.website-editor-action-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pg-editor-icon-button-size);
  height: var(--pg-editor-icon-button-size);
  min-height: var(--pg-editor-icon-button-size);
  padding: 0;
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text);
  cursor: pointer;
  transition: background-color var(--pg-editor-transition-fast),
    border-color var(--pg-editor-transition-fast),
    color var(--pg-editor-transition-fast);
}

.editor-workspace__navigation-action:hover:not(:disabled),
.editor-action-button:hover:not(:disabled),
.website-editor-action-button:hover:not(:disabled) {
  background: var(--pg-editor-color-bg);
}

.editor-workspace__navigation-action:focus-visible,
.editor-action-button:focus-visible,
.website-editor-action-button:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

.editor-action-button--secondary,
.website-editor-action-button--secondary {
  background: var(--pg-editor-color-surface);
  border-color: var(--pg-editor-color-border-strong);
  color: var(--pg-editor-color-text);
}

.editor-action-button--primary,
.website-editor-action-button--primary {
  background: var(--pg-editor-color-text);
  border-color: var(--pg-editor-color-text);
  color: var(--pg-editor-color-surface);
}

.editor-action-button--primary:hover:not(:disabled),
.website-editor-action-button--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pg-editor-color-text) 92%, var(--pg-editor-color-surface));
}

.editor-action-button--danger,
.website-editor-action-button--danger {
  color: var(--pg-editor-color-danger);
  border-color: color-mix(in srgb, var(--pg-editor-color-danger) 35%, var(--pg-editor-color-border-strong));
}

.editor-action-button--danger:hover:not(:disabled),
.website-editor-action-button--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pg-editor-color-danger) 8%, var(--pg-editor-color-surface));
}

.editor-workspace__navigation-action:disabled,
.editor-action-button:disabled,
.website-editor-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Content pane */
.editor-workspace-pane__header,
.website-editor-pane__header {
  padding: var(--pg-editor-space-4) var(--pg-editor-pane-padding-inline)
    var(--pg-editor-space-3);
  border-bottom-color: var(--pg-editor-color-border);
}

.editor-workspace-pane__body,
.website-editor-pane__body,
.website-editor-sheet__body {
  gap: var(--pg-editor-field-gap);
  padding: var(--pg-editor-pane-padding-block-start) var(--pg-editor-pane-padding-inline)
    var(--pg-editor-pane-padding-block-end);
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.editor-workspace__content-region {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.editor-workspace-pane__title,
.website-editor-pane__title,
.website-editor-sheet__title {
  font-size: var(--pg-editor-font-size-xl);
  line-height: var(--pg-editor-line-height-xl, var(--pg-editor-line-height-lg));
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-workspace-pane__subtitle,
.website-editor-pane__subtitle,
.website-editor-sheet__subtitle {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text-muted);
}

.editor-workspace-pane__footer,
.website-editor-pane__footer {
  padding: var(--pg-editor-space-3) var(--pg-editor-space-2);
  border-top-color: var(--pg-editor-color-border);
  border-inline-end-color: var(--pg-editor-color-border);
  background: var(--pg-editor-color-surface-muted);
}

.editor-workspace-pane__save-state {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--pg-editor-font-size-xs, var(--pg-editor-font-size-sm));
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text-muted);
}

/* Tabs */
.editor-workspace-sheet__tabs,
.website-editor-sheet__tabs {
  gap: var(--pg-editor-space-2);
  padding: 0 var(--pg-editor-pane-padding-inline) var(--pg-editor-space-3);
  border-bottom-color: var(--pg-editor-color-border);
}

.editor-workspace-sheet__tab,
.website-editor-sheet__tab {
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  color: var(--pg-editor-color-text-muted);
  transition: background-color var(--pg-editor-transition-fast),
    border-color var(--pg-editor-transition-fast);
}

.editor-workspace-sheet__tab--active,
.website-editor-sheet__tab--active {
  background: var(--pg-editor-color-surface-muted);
  border-color: var(--pg-editor-color-border-strong);
  color: var(--pg-editor-color-text);
}

.editor-workspace-sheet__tab-panel,
.website-editor-sheet__tab-panel {
  gap: var(--pg-editor-field-gap);
}

/* Fields */
.editor-form-field,
.website-editor-field {
  gap: var(--pg-editor-space-2);
}

/* Field / subgroup visibility toggle (replaces Advanced-tab show/hide). */
.editor-form-field__header,
.editor-form-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pg-editor-space-3);
  min-width: 0;
}

.editor-form-field__header-main {
  min-width: 0;
  flex: 1 1 auto;
}

.editor-form-visibility {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2);
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.editor-form-visibility__label {
  font-size: var(--pg-editor-font-size-xs, 12px);
  line-height: var(--pg-editor-line-height-sm, 1.3);
  font-weight: var(--pg-editor-font-weight-medium, 500);
  color: var(--pg-editor-color-text-muted);
  white-space: nowrap;
}

.editor-form-visibility--off .editor-form-visibility__label {
  color: var(--pg-editor-color-text-muted);
}

.editor-form-field--hidden > :not(.editor-form-field__header),
.editor-form-section--hidden > .editor-form-section__body {
  opacity: 0.45;
  pointer-events: none;
}

/*
 * Bounded sub-card variant — stacked repeatable sub-sections inside an editor
 * card (e.g. footer column blocks). Gives each unit its own visual container
 * so header actions read as belonging to that unit.
 */
.editor-form-section--card {
  padding: var(--pg-editor-space-3) var(--pg-editor-space-4);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface-muted);
}

.editor-form-section--card > .editor-form-section__header {
  padding-block-end: var(--pg-editor-space-2);
  border-block-end: 1px solid var(--pg-editor-color-border);
}

.editor-form-field__label,
.website-editor-field__label {
  font-size: var(--pg-editor-font-size-label, var(--admin-font-size-label, 16px));
  line-height: var(--pg-editor-line-height-md);
  font-weight: var(--pg-editor-font-weight-semibold);
  color: var(--pg-editor-color-text);
  letter-spacing: var(--admin-v2-letter-spacing, 0);
}

.editor-form-field__input:not([type='color']),
.editor-form-field__textarea,
.editor-form-field select,
.website-editor-field__input:not([type='color']),
.website-editor-field__textarea,
.website-editor-field select {
  box-sizing: border-box;
  min-height: var(--pg-editor-control-height-lg);
  padding: 0 var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-control-height-lg);
  transition: border-color var(--pg-editor-transition-fast),
    box-shadow var(--pg-editor-transition-fast);
}

.editor-form-field__input:not([type='color']):not(textarea),
.editor-form-field select,
.website-editor-field__input:not([type='color']):not(textarea),
.website-editor-field select {
  height: var(--pg-editor-control-height-lg);
  max-height: var(--pg-editor-control-height-lg);
}

.editor-form-field__input:focus-visible,
.editor-form-field__textarea:focus-visible,
.editor-form-field select:focus-visible,
.website-editor-field__input:focus-visible,
.website-editor-field__textarea:focus-visible,
.website-editor-field select:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-100);
  outline-offset: 0;
  border-color: var(--pg-editor-color-brand-500);
}

.editor-form-field__textarea,
.website-editor-field__textarea {
  height: auto;
  max-height: none;
  min-height: calc(var(--pg-editor-control-height-lg) * 2);
  padding-block: var(--pg-editor-space-2);
  line-height: var(--pg-editor-line-height-sm);
}

/* TipTap / rich-text rules moved to v2/editor-workspace/rich-text.css (SSoT). */

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .form-hint,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .editor-form-field__hint,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .website-editor-field__hint {
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-normal);
  color: var(--pg-editor-color-text-muted);
}

/*
 * OWNERSHIP (website editor + Admin V2 entity sheets):
 * Color swatch chrome and editor field labels live HERE (and entity-sheet.css
 * for sheet-scoped overrides). contexts/admin/products.css may keep
 * compatibility aliases only — do not add competing swatch sizing there.
 */
.editor-color-field {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-2);
  min-width: 0;
}

/*
 * Visible swatch surface — always a square control.
 * Role: EditorColorPicker / EditorColorField trigger (settings, entity sheet, website editor).
 * Do not gate square geometry on website-editor panes only — siblings (e.g. Stock settings)
 * must get the same affordance without surface-specific overrides.
 */
.editor-color-swatch {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--pg-editor-control-height-lg);
  max-width: var(--pg-editor-control-height-lg);
  height: var(--pg-editor-control-height-lg);
  min-height: var(--pg-editor-control-height-lg);
  aspect-ratio: 1;
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  overflow: hidden;
  flex: 0 0 auto;
  align-self: flex-start;
}

.editor-color-swatch[data-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.editor-color-swatch__input,
.editor-color-swatch .editor-color-field__input,
.editor-color-swatch input[type='color'].products-workspace-field--color {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.editor-color-swatch[data-disabled='true'] .editor-color-swatch__input,
.editor-color-swatch[data-disabled='true'] .editor-color-field__input,
.editor-color-swatch[data-disabled='true'] input[type='color'].products-workspace-field--color {
  cursor: not-allowed;
  pointer-events: none;
}

.editor-color-field__label {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  color: var(--pg-editor-color-text);
}

.editor-color-field__theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-editor-space-2);
  margin-bottom: var(--pg-editor-space-2);
}

.editor-color-field__theme-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--pg-editor-radius-md, 6px);
  border: 1px solid var(--pg-editor-color-border-strong);
  padding: 0;
  cursor: pointer;
  background-clip: padding-box;
}

.editor-color-field__theme-swatch--active {
  outline: 2px solid var(--pg-editor-color-accent, var(--accent));
  outline-offset: 2px;
}

.editor-color-field__theme-swatch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.editor-color-row,
.products-workspace-typography-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-editor-space-2);
}

.editor-color-field__input,
input[type='color'].products-workspace-field--color {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--pg-editor-control-height-lg);
  padding: 0 !important;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent !important;
  border: 1px solid var(--pg-editor-color-border-strong) !important;
  border-radius: var(--pg-editor-radius-lg);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

/* Editor workspace — compact square swatch (matches lg control height). */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-color-field__input,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  input[type='color'].products-workspace-field--color {
  width: var(--pg-editor-control-height-lg);
  max-width: var(--pg-editor-control-height-lg);
  height: var(--pg-editor-control-height-lg);
  min-height: var(--pg-editor-control-height-lg);
  flex: 0 0 auto;
  align-self: flex-start;
  aspect-ratio: 1;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__input[type='color'] {
  width: var(--pg-editor-control-height-lg);
  max-width: var(--pg-editor-control-height-lg);
  height: var(--pg-editor-control-height-lg);
  min-height: var(--pg-editor-control-height-lg);
  padding: 0 !important;
  flex: 0 0 auto;
  align-self: flex-start;
  aspect-ratio: 1;
}

.editor-color-field__input:focus-visible,
input[type='color'].products-workspace-field--color:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-100);
  outline-offset: 0;
  border-color: var(--pg-editor-color-brand-500) !important;
}

.editor-color-field__input::-webkit-color-swatch-wrapper,
input[type='color'].products-workspace-field--color::-webkit-color-swatch-wrapper,
.editor-form-field__input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
  border: none;
  width: 100%;
  height: 100%;
}

.editor-color-field__input::-webkit-color-swatch,
input[type='color'].products-workspace-field--color::-webkit-color-swatch,
.editor-form-field__input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--pg-editor-radius-lg) - 1px);
  width: 100%;
  height: 100%;
}

.editor-color-field__input::-moz-color-swatch,
input[type='color'].products-workspace-field--color::-moz-color-swatch,
.editor-form-field__input[type='color']::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--pg-editor-radius-lg) - 1px);
  width: 100%;
  height: 100%;
}

.editor-color-row .editor-color-field,
.products-workspace-typography-color-row .editor-color-field {
  flex: 0 1 auto;
  width: min(100%, 10rem);
  min-width: 6rem;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-color-row
  .editor-color-field,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-workspace-typography-color-row
  .editor-color-field {
  width: auto;
  min-width: 0;
}

.editor-form-label.editor-form-label--with-info {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-1-5, 6px);
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
}

.editor-form-label--with-info .editor-form-label__text {
  min-width: 0;
}

.editor-label-info,
.products-editor-label-info {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--pg-editor-color-text-muted, var(--admin-v2-color-text-muted, var(--admin-v2-color-text-muted)));
  cursor: help;
  line-height: 0;
}

/* Legacy CSS pseudo-tooltip (non-portaled hints only). Prefer the portaled EditorHintIcon path. */
.editor-label-info:not(.editor-label-info--portaled)::before,
.products-editor-label-info:not(.products-editor-label-info--portaled)::before {
  content: attr(data-hint);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  transform: none;
  width: max-content;
  max-width: min(240px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-text, var(--admin-v2-color-text));
  color: var(--pg-editor-color-surface);
  font-size: var(--pg-editor-font-size-xs);
  font-weight: var(--pg-editor-font-weight-regular);
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 8px 20px var(--admin-v2-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pg-editor-transition-fast), visibility var(--pg-editor-transition-fast);
  pointer-events: none;
  z-index: var(--z-tooltip, 70);
}

.editor-label-info:not(.editor-label-info--portaled):hover::before,
.editor-label-info:not(.editor-label-info--portaled):focus-visible::before,
.products-editor-label-info:not(.products-editor-label-info--portaled):hover::before,
.products-editor-label-info:not(.products-editor-label-info--portaled):focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.editor-label-info--portaled::before,
.products-editor-label-info--portaled::before {
  content: none;
  display: none;
}

.editor-tooltip,
.editor-hint-tooltip {
  position: fixed;
  /*
   * Same stacking as editor-select__menu: above website-editor sheet (1250–1400).
   * Admin fallback: just above --z-modal when --website-editor-z-menu is unset.
   */
  z-index: var(--website-editor-z-menu, calc(var(--z-modal, 260) + 1));
  width: max-content;
  max-width: min(240px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-text, var(--admin-v2-color-text));
  color: var(--pg-editor-color-surface);
  font-size: var(--pg-editor-font-size-xs);
  font-weight: var(--pg-editor-font-weight-regular);
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 8px 20px var(--admin-v2-backdrop);
  pointer-events: none;
}

.editor-tooltip--measuring,
.editor-hint-tooltip--measuring {
  visibility: hidden;
}

.editor-label-info:hover,
.editor-label-info:focus-visible,
.products-editor-label-info:hover,
.products-editor-label-info:focus-visible {
  color: var(--text-secondary, var(--pg-editor-color-text-muted));
  outline: none;
}

.editor-label-info--information,
.products-editor-label-info--information {
  color: var(--warning);
}

.editor-label-info--information:hover,
.editor-label-info--information:focus-visible,
.products-editor-label-info--information:hover,
.products-editor-label-info--information:focus-visible {
  color: var(--warning-light, var(--warning));
  outline: none;
}

/*
 * Checkbox chips — Products/admin SSoT for editor surfaces.
 * Webshop does not load forms-admin.css / products.css; without these rules
 * native .form-checkbox sits flush against the label (no flex gap).
 */
:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .form-checkbox-wrapper,
:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .products-workspace-checkbox-chip {
  display: flex;
  align-items: center;
  gap: var(--pg-editor-space-3, var(--space-3, 0.75rem));
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--pg-editor-control-height, var(--admin-control-field, 36px)) / 2);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .form-checkbox-wrapper:has(input[type='checkbox']:disabled),
:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .form-checkbox-wrapper:has(input[type='checkbox']:disabled)
  .form-checkbox-label {
  color: var(--pg-editor-color-text-muted, var(--admin-v2-color-text-muted, var(--text-secondary)));
  cursor: not-allowed;
}

:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .products-workspace-checkbox-chip
  .form-checkbox-label,
:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .form-checkbox-wrapper
  .form-checkbox-label {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2, var(--space-2, 0.5rem));
  font-size: var(--pg-editor-font-size-sm, var(--text-sm));
  line-height: var(--form-control-checkbox-label-line-height, var(--pg-editor-line-height-sm, 1.4));
  font-weight: var(--form-control-checkbox-label-font-weight, var(--pg-editor-font-weight-normal, 400));
  color: var(--pg-editor-color-text, var(--admin-v2-color-text, var(--text-primary)));
  cursor: pointer;
  user-select: none;
}

:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .products-workspace-checkbox-column {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-3, var(--space-3, 0.75rem));
  min-width: 0;
}

/* Dropdowns */
.editor-select {
  position: relative;
  display: block;
  min-width: 0;
}

.editor-select--full {
  width: 100%;
}

.editor-select--auto {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
}

.editor-select__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pg-editor-space-2);
  width: 100%;
  min-width: 0;
  height: var(--pg-editor-control-height-lg);
  min-height: var(--pg-editor-control-height-lg);
  max-height: var(--pg-editor-control-height-lg);
  margin: 0;
  padding: 0 var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  font-family: inherit;
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-control-height-lg);
  font-weight: var(--pg-editor-font-weight-normal);
  text-align: start;
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text);
  cursor: pointer;
  transition: border-color var(--pg-editor-transition-fast),
    box-shadow var(--pg-editor-transition-fast);
}

.editor-select__trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.editor-select__trigger:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-100);
  outline-offset: 0;
  border-color: var(--pg-editor-color-brand-500);
}

.editor-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  line-height: inherit;
}

.editor-select__chevron {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  opacity: 0.55;
  clip-path: polygon(20% 35%, 50% 65%, 80% 35%, 72% 27%, 50% 49%, 28% 27%);
  transform: translateY(1px);
}

.editor-select__menu {
  position: fixed;
  /* Above website-editor entity sheet (1400); fallback when token unset (admin). */
  z-index: var(--website-editor-z-menu, 1500);
  box-sizing: border-box;
  margin: 0;
  padding: var(--pg-editor-space-1);
  list-style: none;
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  box-shadow: var(--pg-editor-shadow-sm);
  max-height: min(16rem, 50vh);
  overflow-y: auto;
}

.editor-select__option {
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border-radius: calc(var(--pg-editor-radius-lg) - 2px);
  font-size: var(--pg-editor-font-size-sm);
  color: var(--pg-editor-color-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-select__option:hover:not(.is-disabled),
.editor-select__option.is-selected,
.editor-select__option.is-active {
  background: color-mix(in srgb, var(--pg-editor-color-brand-600) 10%, var(--pg-editor-color-surface));
}

.editor-select__option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* In-DOM color picker (portaled popover — mirrors editor-select__menu stacking). */
.editor-color-picker {
  display: block;
  min-width: 0;
}

/*
 * Trigger shares the .editor-color-swatch element — keep swatch border/size;
 * only reset button chrome that would fight the color fill.
 */
.editor-color-picker__trigger {
  margin: 0;
  padding: 0;
  cursor: pointer;
  background-clip: padding-box;
}

.editor-color-picker__trigger:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500, var(--admin-v2-color-primary));
  outline-offset: 2px;
}

.editor-color-picker__panel {
  position: fixed;
  /* Above website-editor entity sheet (1400); fallback when token unset (admin). */
  z-index: var(--website-editor-z-menu, 1500);
  box-sizing: border-box;
  margin: 0;
  padding: var(--pg-editor-space-3, 0.75rem);
  border: 1px solid var(--pg-editor-color-border-strong, var(--admin-v2-border-default));
  border-radius: var(--pg-editor-radius-lg, 8px);
  background: var(--pg-editor-color-surface);
  box-shadow: var(--pg-editor-shadow-sm, var(--admin-v2-shadow-lg));
  max-height: min(24rem, 70vh);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--pg-editor-color-text, var(--admin-v2-color-text));
}

.editor-color-picker__section {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-2, 0.5rem);
}

.editor-color-picker__section + .editor-color-picker__section {
  margin-top: var(--pg-editor-space-3, 0.75rem);
  padding-top: var(--pg-editor-space-3, 0.75rem);
  border-top: 1px solid var(--pg-editor-color-border, var(--admin-v2-border-default));
}

.editor-color-picker__section-label {
  font-size: var(--pg-editor-font-size-xs, 12px);
  line-height: var(--pg-editor-line-height-sm, 1.35);
  font-weight: var(--pg-editor-font-weight-semibold, 600);
  color: var(--pg-editor-color-text-muted, var(--admin-v2-color-text-muted));
}

.editor-color-picker__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-editor-space-2, 0.5rem);
}

.editor-color-picker__swatch {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--pg-editor-color-border-strong, var(--admin-v2-border-default));
  border-radius: var(--pg-editor-radius-md, 6px);
  cursor: pointer;
  background-clip: padding-box;
}

.editor-color-picker__swatch--active {
  outline: 2px solid var(--pg-editor-color-accent, var(--pg-editor-color-brand-500));
  outline-offset: 2px;
}

.editor-color-picker__swatch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.editor-color-picker__theme-default {
  width: 100%;
  justify-content: center;
}

.editor-color-picker__disclosure {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--pg-editor-space-2, 0.5rem);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pg-editor-color-text, var(--admin-v2-color-text));
  font-size: var(--pg-editor-font-size-sm, 14px);
  font-weight: var(--pg-editor-font-weight-medium, 500);
  line-height: var(--pg-editor-line-height-sm, 1.35);
  text-align: start;
  cursor: pointer;
}

.editor-color-picker__disclosure-chevron {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  background: currentColor;
  opacity: 0.55;
  clip-path: polygon(20% 35%, 50% 65%, 80% 35%, 72% 27%, 50% 49%, 28% 27%);
  transition: transform var(--pg-editor-transition-fast, 120ms ease);
}

.editor-color-picker__disclosure-chevron--open {
  transform: rotate(180deg);
}

.editor-color-picker__custom {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-2, 0.5rem);
  margin-top: var(--pg-editor-space-2, 0.5rem);
}

.editor-color-picker__field-label {
  font-size: var(--pg-editor-font-size-xs, 12px);
  line-height: var(--pg-editor-line-height-sm, 1.35);
  font-weight: var(--pg-editor-font-weight-medium, 500);
  color: var(--pg-editor-color-text-muted, var(--admin-v2-color-text-muted));
}

.editor-color-picker__hex {
  width: 100%;
  min-width: 0;
}

.editor-color-picker__slider {
  width: 100%;
  margin: 0;
  accent-color: var(--pg-editor-color-brand-600, var(--admin-v2-color-primary));
}

.editor-color-picker__slider--hue {
  background: linear-gradient(
    to right,
    /* theme-literal-exception: color-picker-spectrum */ #ff0000,
    /* theme-literal-exception: color-picker-spectrum — HSV content, not Admin chrome */
  /* theme-literal-exception: color-picker-spectrum */ #ffff00,
    /* theme-literal-exception: color-picker-spectrum */ #00ff00,
    /* theme-literal-exception: color-picker-spectrum */ #00ffff,
    /* theme-literal-exception: color-picker-spectrum */ #0000ff,
    /* theme-literal-exception: color-picker-spectrum */ #ff00ff,
    /* theme-literal-exception: color-picker-spectrum */ #ff0000
  );
  border-radius: 999px;
  height: 0.5rem;
}

/* Context menu */
.website-editor-context-menu {
  width: min(var(--pg-editor-context-menu-width), calc(100vw - var(--pg-editor-space-6)));
  padding: var(--pg-editor-space-2);
  background: var(--pg-editor-color-surface);
  border-color: var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-xl);
  box-shadow: var(--pg-editor-shadow-sm);
}

.website-editor-context-menu__heading {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-semibold);
  color: var(--pg-editor-color-text);
}

.website-editor-context-menu__item {
  appearance: none;
  display: block;
  width: 100%;
  text-align: start;
  border: none;
  background: transparent;
  cursor: pointer;
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text);
}

.website-editor-context-menu__item:hover {
  background: var(--pg-editor-color-surface-muted);
}

.website-editor-context-menu__item:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

.website-editor-context-menu__item--danger {
  color: var(--pg-editor-color-danger);
}

/* Structure panel — Website Editor page structure (V2 SSoT) */
.editor-workspace-section-list,
.website-editor-section-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  color: var(--pg-editor-color-text);
}

.editor-workspace-section-list__columns, .website-editor-section-list__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 1fr);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.editor-workspace-section-list__columns--order, .website-editor-section-list__columns--order,
.editor-workspace-section-list__columns--add, .website-editor-section-list__columns--add {
  grid-template-columns: minmax(0, 1fr);
}

.editor-workspace-section-list__columns--add, .website-editor-section-list__columns--add > .editor-workspace-section-list__add, .website-editor-section-list__add {
  border-left: none;
}


:is(.editor-workspace-section-list__columns, .website-editor-section-list__columns)
  > :is(
    .editor-workspace-section-list__body,
    .website-editor-section-list__body,
    .editor-workspace-section-list__add,
    .website-editor-section-list__add
  ) {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.editor-workspace-section-list__header, .website-editor-section-list__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pg-editor-space-4);
  padding: var(--pg-editor-space-4) var(--pg-editor-pane-padding-inline)
    var(--pg-editor-space-3);
  border-bottom: 1px solid var(--pg-editor-color-border);
}

.editor-workspace-section-list__title, .website-editor-section-list__title,
.editor-workspace-section-list__subtitle, .website-editor-section-list__subtitle {
  margin: 0;
  color: var(--pg-editor-color-text);
}

.editor-workspace-section-list__title, .website-editor-section-list__title {
  font-size: var(--pg-editor-font-size-lg);
  line-height: var(--pg-editor-line-height-lg);
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-workspace-section-list__subtitle, .website-editor-section-list__subtitle {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
}

.editor-workspace-section-list__body, .website-editor-section-list__body {
  padding: var(--pg-editor-space-3) var(--pg-editor-pane-padding-inline);
  border-right: 1px solid var(--pg-editor-color-border);
}

.editor-workspace-section-list__items, .website-editor-section-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.editor-workspace-section-list__row, .website-editor-section-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pg-editor-space-2);
  align-items: center;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--pg-editor-color-border);
  border-radius: 0;
  background: transparent;
}

:is(.editor-workspace-section-list__row, .website-editor-section-list__row):last-child {
  border-bottom: none;
}

.editor-workspace-section-list__item, .website-editor-section-list__item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2);
  min-width: 0;
  width: 100%;
  min-height: var(--pg-editor-control-height-lg);
  padding: var(--pg-editor-space-2);
  border: 1px solid transparent;
  border-radius: var(--pg-editor-radius-lg);
  background: transparent;
  color: var(--pg-editor-color-text);
  font: inherit;
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  text-align: start;
  cursor: pointer;
}

:is(.editor-workspace-section-list__item, .website-editor-section-list__item):hover,
:is(.editor-workspace-section-list__item--active, .website-editor-section-list__item--active),
:is(.editor-workspace-section-list__item, .website-editor-section-list__item)[aria-current="true"] {
  background: var(--pg-editor-color-surface-muted);
  border-color: var(--pg-editor-color-border);
}

:is(.editor-workspace-section-list__item, .website-editor-section-list__item):focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

.editor-workspace-section-list__actions, .website-editor-section-list__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pg-editor-space-1);
  max-width: 100%;
}

.editor-workspace-section-list__add, .website-editor-section-list__add {
  padding: var(--pg-editor-space-4) var(--pg-editor-pane-padding-inline);
  background: var(--pg-editor-color-surface-muted);
  border-left: 1px solid var(--pg-editor-color-border);
}

.editor-workspace-section-list__item-label, .website-editor-section-list__item-label {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2);
  min-width: 0;
}

.editor-workspace-section-list__item--disabled, .website-editor-section-list__item--disabled {
  opacity: 0.72;
}

.editor-workspace-section-list__status-badge, .website-editor-section-list__status-badge {
  flex-shrink: 0;
  padding: 0 var(--pg-editor-space-2);
  border-radius: var(--pg-editor-radius-md);
  background: var(--pg-editor-color-surface-muted);
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-medium);
}

/*
 * Panel-embedded variant of the orderable list role.
 * Used when the list lives inside an admin-v2 SoftPanel instead of a full-bleed
 * editor pane: no pane inset, header/footer align with the card padding.
 */
.editor-workspace-section-list--panel {
  container: editor-section-list / inline-size;
  display: grid;
  gap: var(--pg-editor-space-3);
  min-width: 0;
}

.editor-workspace-section-list__header--panel {
  padding: 0 0 var(--pg-editor-space-2);
  gap: var(--pg-editor-space-2);
  align-items: center;
}

.editor-workspace-section-list--panel .editor-workspace-section-list__row {
  padding-block: var(--pg-editor-space-1);
}

.editor-workspace-section-list--panel .editor-workspace-section-list__actions {
  --pg-editor-icon-button-size: 32px;
}

/* Narrow panel column: actions move under the item instead of squeezing the label. */
@container editor-section-list (max-width: 24rem) {
  .editor-workspace-section-list__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--pg-editor-space-1);
    padding-block: var(--pg-editor-space-2);
  }

  .editor-workspace-section-list__actions {
    justify-content: flex-start;
    padding-inline-start: var(--pg-editor-space-2);
  }
}

.editor-workspace-section-list__heading {
  display: inline-flex;
  align-items: baseline;
  gap: var(--pg-editor-space-2);
  min-width: 0;
  margin: 0;
  color: var(--pg-editor-color-text);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-workspace-section-list__count {
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-normal);
}

.editor-workspace-section-list__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-editor-space-2);
  padding-top: var(--pg-editor-space-2);
  border-top: 1px solid var(--pg-editor-color-border);
}

/* Stacked label: title line plus a muted meta line under it. */
.editor-workspace-section-list__item-label--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;
}

.editor-workspace-section-list__item-title {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-1);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.editor-workspace-section-list__meta {
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-normal);
  overflow-wrap: anywhere;
}

/* Nested (submenu) entries stay readable without a second list level. */
.editor-workspace-section-list__item--child {
  margin-inline-start: var(--pg-editor-space-4);
  border-inline-start: 2px solid var(--pg-editor-color-border);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* Broken reference: visible, not silent. */
.editor-workspace-section-list__item--warning,
.editor-workspace-section-list__item--warning:hover {
  border-color: var(--pg-editor-color-danger);
  background: var(--pg-editor-color-danger-soft);
}

.editor-workspace-section-list__warning-icon {
  display: inline-flex;
  align-items: center;
  color: var(--pg-editor-color-danger);
}

.editor-workspace-section-list__error, .website-editor-section-list__error {
  margin: 0;
  padding: 0 var(--pg-editor-pane-padding-inline) var(--pg-editor-space-3);
  color: var(--pg-editor-color-danger);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
}

.editor-workspace-section-list__add-grid, .website-editor-section-list__add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--pg-editor-space-2);
  margin-top: var(--pg-editor-space-2);
}

.editor-workspace-section-list__add-button, .website-editor-section-list__add-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--pg-editor-space-2);
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface-muted);
  color: var(--pg-editor-color-text);
  font: inherit;
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  text-align: start;
  cursor: pointer;
}

.editor-workspace-section-list__add-button, .website-editor-section-list__add-button:hover {
  background: var(--pg-editor-color-bg);
  border-color: var(--pg-editor-color-border-strong);
}

.editor-workspace-section-list__add-button, .website-editor-section-list__add-button:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

/* Dialogs */
.editor-workspace-dialog {
  width: min(var(--pg-editor-dialog-width), calc(100vw - var(--pg-editor-space-8)));
  gap: var(--pg-editor-space-4);
  padding: var(--pg-editor-space-5);
  border-color: var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-xl);
  background: var(--pg-editor-color-surface);
  box-shadow: var(--pg-editor-shadow-sm);
}

.editor-workspace-dialog__title {
  font-size: var(--pg-editor-font-size-lg);
  line-height: var(--pg-editor-line-height-lg);
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-workspace-dialog__text {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text-muted);
}

.editor-workspace-dialog__button {
  appearance: none;
  border: 1px solid var(--pg-editor-color-border-strong);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text);
  cursor: pointer;
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-4);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
}

.editor-workspace-dialog__button:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

.editor-workspace-dialog__button--primary {
  background: var(--pg-editor-color-brand-500);
  border-color: var(--pg-editor-color-brand-500);
  color: var(--pg-editor-color-surface);
}

.editor-workspace-dialog__button--primary:hover:not(:disabled) {
  background: var(--pg-editor-color-brand-600);
  border-color: var(--pg-editor-color-brand-600);
}

.editor-workspace-dialog__button--danger {
  background: var(--pg-editor-color-danger);
  border-color: var(--pg-editor-color-danger);
  color: var(--pg-editor-color-surface);
}

.editor-workspace-dialog-layer__backdrop {
  background: var(--pg-editor-backdrop);
}

/* Primary sheet buttons inside editor workspace */
.editor-workspace-sheet .website-editor-sheet__btn--primary,
:is(.editor-workspace-pane, .website-editor-pane) .website-editor-sheet__btn--primary {
  min-height: var(--pg-editor-control-height-md);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  font-weight: var(--pg-editor-font-weight-medium);
}

/* Opening hours & grouped fields — consistent rhythm, lighter containers */
.website-editor-opening-hours,
.website-editor-opening-hours__days {
  gap: var(--pg-editor-field-gap);
}

.website-editor-announcements {
  gap: var(--pg-editor-field-group-gap);
}

.website-editor-announcement {
  gap: var(--pg-editor-field-gap);
  padding: var(--pg-editor-space-4);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
}

.website-editor-product-selection {
  gap: var(--pg-editor-field-gap);
}

.website-editor-content-tabs {
  margin-block-end: var(--pg-editor-space-4);
}

.website-editor-content-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--pg-editor-space-2);
  overflow-x: auto;
  max-width: 100%;
}

.website-editor-content-tabs__tab {
  flex: 0 0 auto;
  min-height: var(--pg-editor-control-height-md);
  max-width: 12rem;
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-md);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  line-height: var(--pg-editor-line-height-sm);
  cursor: pointer;
  transition: background-color var(--pg-editor-transition-fast),
    border-color var(--pg-editor-transition-fast),
    color var(--pg-editor-transition-fast);
}

.website-editor-content-tabs__tab-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2);
  min-width: 0;
  max-width: 100%;
}

.website-editor-content-tabs__thumb {
  flex: 0 0 auto;
  display: inline-flex;
  width: var(--pg-editor-space-5);
  height: var(--pg-editor-space-5);
  overflow: hidden;
  border-radius: var(--pg-editor-radius-sm, 4px);
  background: var(--pg-editor-color-bg);
}

.website-editor-content-tabs__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.website-editor-content-tabs__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-editor-content-tabs__status {
  flex: 0 0 auto;
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-xs, 0.75rem);
}

.website-editor-content-tabs__tab:hover:not(:disabled) {
  background: var(--pg-editor-color-bg);
  color: var(--pg-editor-color-text);
}

.website-editor-content-tabs__tab--active,
.website-editor-content-tabs__tab[aria-selected="true"] {
  border-color: var(--pg-editor-color-border-strong);
  background: var(--pg-editor-color-surface-muted);
  color: var(--pg-editor-color-text);
}

.website-editor-content-tabs__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pg-editor-control-height-md);
  min-height: var(--pg-editor-control-height-md);
  padding: 0;
  border: 1px dashed var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-md);
  background: transparent;
  color: var(--pg-editor-color-text-muted);
  cursor: pointer;
}

.website-editor-content-tabs__add:hover:not(:disabled) {
  border-color: var(--pg-editor-color-brand-600);
  color: var(--pg-editor-color-brand-600);
  background: var(--pg-editor-color-bg);
}

/* Content groups — natural height (opt-in; Style tiles keep stretch). */
.editor-form-grid--content-natural {
  align-items: start;
}

.editor-form-grid--content-natural > .editor-form-group {
  height: auto;
}

.editor-form-grid--content-natural > .editor-form-group > .editor-form-group__body {
  flex: initial;
}

/* Visual focus-point primitive */
.editor-image-focus {
  display: grid;
  gap: var(--pg-editor-field-gap);
}

.editor-image-focus__panel {
  display: grid;
  gap: var(--pg-editor-space-3);
}

.editor-image-focus__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-md);
  background: var(--pg-editor-color-bg);
  cursor: crosshair;
  outline: none;
}

.editor-image-focus__stage:focus-visible {
  box-shadow: 0 0 0 2px var(--pg-editor-color-brand-600);
}

.editor-image-focus__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.editor-image-focus__marker {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--pg-editor-color-surface);
  border-radius: 999px;
  background: var(--pg-editor-color-brand-600);
  box-shadow: 0 0 0 1px var(--pg-editor-color-border-strong);
  pointer-events: none;
}

.editor-image-focus__sliders {
  display: grid;
  gap: var(--pg-editor-space-2);
}

.editor-image-focus__slider {
  display: grid;
  gap: var(--pg-editor-space-1);
  font-size: var(--pg-editor-font-size-sm);
  color: var(--pg-editor-color-text);
}

.editor-image-focus__slider input[type='range'] {
  width: 100%;
}

/*
 * Legacy class names (pre–EditorContentTabs). Kept as aliases so any leftover
 * markup still gets the same V100 tab chrome — do not use for new UI.
 * Canonical: .website-editor-content-tabs*
 */
.editor-form-item-nav {
  margin-block-end: var(--pg-editor-space-4);
}

.editor-form-item-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-editor-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.editor-form-item-nav__item {
  display: inline-flex;
}

.editor-form-item-nav__button {
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  line-height: var(--pg-editor-line-height-sm);
  cursor: pointer;
}

.editor-form-item-nav__button:hover:not(:disabled) {
  background: var(--pg-editor-color-bg);
  color: var(--pg-editor-color-text);
}

.editor-form-item-nav__button--active,
.editor-form-item-nav__button[aria-selected="true"],
.editor-form-item-nav__button[aria-current="true"] {
  border-color: var(--pg-editor-color-border-strong);
  background: var(--pg-editor-color-surface-muted);
  color: var(--pg-editor-color-text);
}

.editor-form-item-nav__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pg-editor-control-height-md);
  min-height: var(--pg-editor-control-height-md);
  padding: 0;
  border: 1px dashed var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  background: transparent;
  color: var(--pg-editor-color-text-muted);
  cursor: pointer;
}

.website-editor-opening-hours__day-panel {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-field-gap);
}

/*
 * Editor Form Language — groups (EditorGroup).
 * Role: editor card title/chrome — same SoftPanel hangpoint as admin entity sheets
 * (.admin-v2-soft-panel / .admin-v2-soft-panel__title). No grey title strip.
 */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-group {
  display: grid;
  gap: var(--admin-v2-space-4, var(--pg-editor-space-4));
  padding: var(--admin-v2-card-padding-y, var(--pg-editor-space-4))
    var(--admin-v2-card-padding-x, var(--pg-editor-space-4));
  border: 1px solid var(--admin-v2-border-default, var(--pg-editor-color-border));
  border-radius: var(--admin-v2-radius-card, var(--pg-editor-radius-lg));
  background: var(--admin-v2-color-surface, var(--pg-editor-color-surface));
  box-shadow: var(--admin-v2-shadow-xs, none);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

/*
 * Group titles — SoftPanel title SSoT (sheet-progression.css).
 * Kill legacy grey-bar / orange-strip chrome on these selectors.
 */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .editor-form-group
  > .admin-v2-soft-panel__title,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .editor-form-heading__title,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .products-workspace-section__title.editor-form-heading__title,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-group
  > .products-workspace-section__title {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2, var(--pg-editor-space-2));
  box-sizing: border-box;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-family: var(--admin-v2-font-family, inherit);
  font-size: calc(var(--admin-v2-font-size-section-title, 16px) + 4px);
  font-weight: var(--admin-v2-font-weight-semibold, 600);
  line-height: calc(var(--admin-v2-line-height-section-title, 24px) + 4px);
  letter-spacing: var(--admin-v2-letter-spacing, 0);
  text-transform: none;
  color: var(--admin-v2-color-text, var(--pg-editor-color-text));
  background: transparent;
  border-bottom: none;
}

/* Panel tile grids — SoftPanel chrome. Style uses equal 2-col CSS grid
 * (EditorGrid panel-tiles); Typography keeps 1/3–2/3 weighted grid.
 * Other equal groups (no --2/--3/--4) stay stacked column. */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups:not(.editor-form-grid--weights-one-third-two-thirds):not(.editor-form-grid--2):not(.editor-form-grid--3):not(.editor-form-grid--4) {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-5, var(--pg-editor-space-5));
  max-width: none;
  width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--2,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--3,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--4 {
  display: grid;
  gap: var(--admin-v2-space-5, var(--pg-editor-space-5));
  max-width: none;
  width: 100%;
  align-items: stretch;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--weights-one-third-two-thirds {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--admin-v2-space-5, var(--pg-editor-space-5));
  max-width: none;
  width: 100%;
  align-items: stretch;
}

/* Typography tab — settings column + larger sample preview (webshop + admin panes) */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .block-edit-modal__typography-settings {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-5, var(--pg-editor-space-5));
  min-width: 0;
}

/*
 * SoftPanel form SSoT inside editor panes (Role Contract):
 * labels / field stack / controls / hints / typography preview
 * hang on the same admin-v2 tokens as entity-sheet SoftPanel.
 */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-editor-field,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-workspace-typography-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  row-gap: 0;
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-label,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__label,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-editor-label {
  display: block;
  margin: 0 0 var(--admin-v2-label-gap, 6px);
  font-family: var(--admin-v2-font-family, inherit);
  font-size: var(--admin-field-label-font-size, var(--admin-font-size-label, calc(var(--admin-font-size-base, 14px) + 2px)));
  font-weight: var(--admin-field-label-font-weight, var(--admin-v2-font-weight-semibold, 600));
  line-height: var(--admin-v2-line-height-section-title, 24px);
  letter-spacing: var(--admin-v2-letter-spacing, 0);
  color: var(--admin-v2-color-text, var(--pg-editor-color-text));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__hint,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-editor-hint {
  margin: 0;
  margin-top: var(--admin-v2-label-gap, 6px);
  font-size: var(--admin-v2-font-size-meta, 12px);
  font-weight: var(--admin-v2-font-weight-normal, 400);
  line-height: var(--admin-v2-line-height-meta, 18px);
  color: var(--admin-v2-color-text-muted, var(--pg-editor-color-text-muted));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-select__trigger,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__input:not([type='color']):not(textarea),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  input.form-input.products-workspace-field:not(.products-workspace-field--range):not(.products-workspace-field--color):not(.products-workspace-search-field__input),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .form-select.products-workspace-field {
  box-sizing: border-box;
  width: 100%;
  height: var(--admin-v2-field-control-height, 36px);
  min-height: var(--admin-v2-field-control-height, 36px);
  max-height: var(--admin-v2-field-control-height, 36px);
  padding: 0 var(--admin-v2-field-control-padding-x, 12px);
  border: 1.5px solid var(--admin-v2-border-default, var(--pg-editor-color-border));
  border-radius: var(--admin-v2-field-control-radius, 8px);
  background: var(--admin-v2-color-surface, var(--pg-editor-color-surface));
  color: var(--admin-v2-color-text, var(--pg-editor-color-text));
  font-family: var(--admin-v2-font-family, inherit);
  font-size: var(--admin-v2-field-control-font-size, 14px);
  line-height: var(--admin-v2-field-control-line-height, 20px);
  font-weight: var(--admin-v2-font-weight-medium, 500);
  box-shadow: none;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .form-select.products-workspace-field {
  padding-right: calc(var(--admin-v2-field-control-padding-x, 12px) + var(--admin-v2-space-6, 24px));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-select__trigger:hover:not(:disabled),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__input:hover:not(:disabled):not(:focus-visible):not([type='color']),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  input.form-input.products-workspace-field:hover:not(:disabled):not(:focus):not(.products-workspace-field--color),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .form-select.products-workspace-field:hover:not(:disabled):not(:focus) {
  border-color: var(--admin-v2-border-strong, var(--pg-editor-color-border-strong));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-select__trigger:focus-visible,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__input:focus-visible:not([type='color']),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  input.form-input.products-workspace-field:focus:not(.products-workspace-field--color),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .form-select.products-workspace-field:focus {
  outline: none;
  border-color: var(--admin-v2-color-primary, var(--pg-editor-color-brand-500));
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, var(--pg-editor-color-brand-100));
}

/* Preview — SoftPanel card surface (white), not muted grey.
 * Include .admin-v2-entity-sheet — same hangpoint as typography SoftPanel groups. */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-preview {
  margin: 0;
  min-height: 100%;
  padding: var(--admin-v2-card-padding-y, var(--admin-v2-space-5, 20px))
    var(--admin-v2-card-padding-x, var(--admin-v2-space-5, 20px));
  border: 1px solid var(--admin-v2-border-default, var(--pg-editor-color-border));
  border-radius: var(--admin-v2-radius-card, var(--pg-editor-radius-lg));
  background: var(--admin-v2-color-surface, var(--pg-editor-color-surface));
  box-shadow: var(--admin-v2-shadow-xs, none);
  box-sizing: border-box;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-preview
  .design-typography-preview__heading {
  margin: 0 0 var(--admin-v2-space-4, var(--pg-editor-space-4));
  font-family: var(
    --block-heading-font,
    var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)))
  );
  font-size: var(--block-heading-size, var(--text-2xl, 1.5rem));
  font-weight: var(--block-heading-weight, var(--admin-v2-font-weight-semibold, 600));
  line-height: 1.2;
  color: var(--block-heading-color, var(--admin-v2-color-text, var(--pg-editor-color-text)));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-preview
  .design-typography-preview__body {
  margin: 0;
  font-family: var(--block-body-font, var(--tenant-font-main, var(--font-sans)));
  font-size: var(--block-body-size, var(--text-lg, 1.125rem));
  font-weight: var(--block-body-weight, var(--admin-v2-font-weight-normal, 400));
  line-height: 1.65;
  color: var(--block-body-color, var(--admin-v2-color-text, var(--pg-editor-color-text)));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-group {
  display: grid;
  gap: var(--admin-v2-space-4, var(--pg-editor-space-4));
  padding: var(--admin-v2-card-padding-y, var(--pg-editor-space-4))
    var(--admin-v2-card-padding-x, var(--pg-editor-space-4));
  border: 1px solid var(--admin-v2-border-default, var(--pg-editor-color-border));
  border-radius: var(--admin-v2-radius-card, var(--pg-editor-radius-lg));
  background: var(--admin-v2-color-surface, var(--pg-editor-color-surface));
  box-shadow: var(--admin-v2-shadow-xs, none);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-group-fields,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-group__body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
  padding: 0;
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-group__description {
  margin: 0;
  padding: 0 var(--pg-editor-space-4) var(--pg-editor-space-2);
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-normal);
  color: var(--pg-editor-color-text-muted);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-3);
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-section__title {
  margin: 0;
  font-size: var(--pg-editor-font-size-label, var(--admin-font-size-label, 16px));
  font-weight: var(--pg-editor-font-weight-semibold);
  line-height: var(--pg-editor-line-height-md);
  color: var(--pg-editor-color-text);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-field-gap);
  min-width: 0;
}

/* Editor Form Language — grids (EditorGrid / EditorField layout) */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid {
  display: grid;
  gap: var(--pg-editor-space-5);
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--panel-tiles {
  align-items: stretch;
  max-width: none;
  width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-grid--panel-tiles:not(.editor-form-grid--3):not(.editor-form-grid--4) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  max-width: none;
  width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  max-width: none;
  width: 100%;
}

/*
 * Style panel tiles — equal card height per row (Website Editor + admin modal).
 * Empty tile bodies stay top-aligned; filled bodies grow with the card.
 */
:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  :is(.editor-form-grid--2, .editor-form-grid--3, .editor-form-grid--4)
  > .editor-form-group {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}

:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  :is(.editor-form-grid--2, .editor-form-grid--3, .editor-form-grid--4)
  > .editor-form-group
  > .editor-form-group__body {
  flex: 1 1 auto;
  min-height: 0;
}

:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  .editor-form-group__body.block-style-tile__body--empty {
  justify-content: flex-start;
}

/* Opt-in content layout — natural card height (hero / golden-lane content groups). */
:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  .editor-form-grid--content-natural {
  align-items: start;
}

:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  .editor-form-grid--content-natural
  > .editor-form-group {
  height: auto;
}

:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  .editor-form-grid--content-natural
  > .editor-form-group
  > .editor-form-group__body {
  flex: initial;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--weights-one-third-two-thirds {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  max-width: none;
  width: 100%;
}

@media (max-width: 960px) {
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--3,
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
    .editor-form-grid--panel-tiles:not(.editor-form-grid--3):not(.editor-form-grid--4),
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--weights-one-third-two-thirds,
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--3,
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-field-gap);
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--spacing {
  grid-template-columns: repeat(2, max-content);
  column-gap: var(--pg-editor-space-3);
  row-gap: var(--pg-editor-space-2);
  width: max-content;
  max-width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--spacing > .editor-form-field {
  gap: var(--pg-editor-space-1);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--spacing .form-input.products-workspace-field {
  width: 5rem;
  min-width: 4.5rem;
  field-sizing: fixed;
}

@media (max-width: 720px) {
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-group__body.block-edit-modal__typography-group-fields--cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-group__body.block-edit-modal__typography-group-fields--cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pg-editor-space-4);
  align-items: start;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced {
  border-top: 1px solid var(--pg-editor-color-border);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__summary {
  display: flex;
  min-height: var(--pg-editor-control-height-lg);
  align-items: center;
  justify-content: flex-start;
  gap: var(--pg-editor-space-2);
  padding: var(--pg-editor-space-3) 0;
  cursor: pointer;
  font-size: var(--pg-editor-font-size-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text);
  list-style: none;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__chevron {
  flex-shrink: 0;
  color: var(--pg-editor-color-text-muted);
  transition: transform var(--pg-editor-transition-fast), color var(--pg-editor-transition-fast);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__summary:hover .editor-advanced__chevron {
  color: var(--pg-editor-color-text);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced[open] .editor-advanced__chevron {
  transform: rotate(90deg);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__summary:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
  border-radius: var(--pg-editor-radius-md);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__title {
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__summary::-webkit-details-marker {
  display: none;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__body {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-field-gap);
  padding-bottom: var(--pg-editor-space-4);
}

:is(.editor-workspace-pane__body, .website-editor-pane__body) > :first-child {
  margin-block-start: 0;
}

@media (max-width: 640px) {
  body.website-editor-active {
    --editor-workspace-nav-width: 156px;
  }

  .editor-workspace-section-list__columns, .website-editor-section-list__columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow-y: auto;
  }

  .editor-workspace-section-list__body, .website-editor-section-list__body {
    border-right: none;
    border-bottom: 1px solid var(--pg-editor-color-border);
  }

  .editor-workspace-section-list__row, .website-editor-section-list__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--pg-editor-space-2);
  }

  .editor-workspace-section-list__actions, .website-editor-section-list__actions {
    justify-content: flex-start;
    width: 100%;
  }
}

/* Page authoring — sidebar + canvas (Pages V100) */
.page-authoring {
  display: grid;
  grid-template-columns: var(--editor-workspace-nav-width) minmax(0, 1fr);
  min-block-size: 0;
  overflow: hidden;
  background: var(--pg-editor-color-surface);
}
.page-authoring__panel {
  min-inline-size: 0;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--pg-editor-pane-padding-block-start)
           var(--pg-editor-pane-padding-inline);
  border-inline-end: 1px solid var(--pg-editor-color-border);
}
.page-authoring__canvas {
  min-inline-size: 0;
  min-block-size: 0;
  overflow: auto;
}
.page-authoring__section-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pg-editor-space-2);
}
.page-authoring__section-row--drop-target {
  box-shadow: inset 0 2px 0 0 var(--pg-editor-color-border-strong,
                                var(--pg-editor-color-border));
}
.page-authoring__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pg-editor-color-text-muted);
  cursor: grab;
}
.page-authoring__grip:active {
  cursor: grabbing;
}

/* Page authoring sidebar as fixed overlay on the live storefront canvas */
.page-authoring__panel {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--editor-workspace-nav-width);
  z-index: var(--pg-editor-z-pane, 40);
  background: var(--pg-editor-color-surface);
  box-shadow: var(--pg-editor-shadow-pane, 0 0 0 1px var(--pg-editor-color-border));
}
body.website-editor-active[data-website-editor-surface="page"] {
  padding-inline-start: var(--editor-workspace-nav-width);
}

/* v2/editor-workspace/menu-preview.css */
/* =================================================================
   EDITOR MENU PREVIEW — storefront navigation preview role
   Used by the navigation menu editor in both the tenant admin
   (Header/Footer page) and the Website Editor chrome sheet, so the
   rules live in the shared editor-workspace layer instead of the
   admin-only context bundle.

   Inline custom properties set by the editor:
   --storefront-menu-bg, --storefront-menu-hover-bg,
   --storefront-submenu-bg, --storefront-submenu-hover-bg
   ================================================================= */

.editor-menu-preview {
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  overflow: visible;
}

.editor-menu-preview__nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-editor-space-1);
  padding: var(--pg-editor-space-3) var(--pg-editor-space-4);
  border-radius: inherit;
}

/*
 * Reserve room for the hovered dropdown so the panel does not jump.
 * Row count comes from the editor as a data attribute.
 */
.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='1'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 58px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='2'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 96px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='3'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 134px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='4'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 172px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='5'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 210px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='6'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 248px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='7'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 286px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='8'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 324px);
}

.editor-menu-preview__item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.editor-menu-preview__link {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-1);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border-radius: var(--pg-editor-radius-md);
  background: transparent;
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
}

.editor-menu-preview__link--parent {
  color: var(--pg-editor-color-text);
}

.editor-menu-preview__link:hover,
.editor-menu-preview__link--open {
  background: var(--storefront-menu-hover-bg, var(--pg-editor-color-surface-muted));
  color: var(--pg-editor-color-text);
}

.editor-menu-preview__caret {
  font-size: var(--pg-editor-font-size-xs);
  line-height: 1;
  color: var(--pg-editor-color-text-soft);
}

.editor-menu-preview__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--pg-editor-space-2));
  left: 0;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  min-width: 220px;
  padding: var(--pg-editor-space-2);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-xl);
  background: var(--storefront-submenu-bg, var(--pg-editor-color-surface));
  box-shadow: var(--pg-editor-shadow-sm);
}

.editor-menu-preview__dropdown-link {
  display: flex;
  align-items: center;
  min-height: var(--pg-editor-control-height-sm);
  padding: 0 var(--pg-editor-space-3);
  border-radius: var(--pg-editor-radius-md);
  background: transparent;
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  white-space: nowrap;
}

.editor-menu-preview__dropdown-link:hover {
  background: var(--storefront-submenu-hover-bg, var(--pg-editor-color-surface-muted));
  color: var(--pg-editor-color-text);
}

.editor-menu-preview__empty {
  margin: 0;
  padding: var(--pg-editor-space-4);
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
}

@media (max-width: 640px) {
  .editor-menu-preview__nav {
    padding: var(--pg-editor-space-3);
  }
}

/* v2/admin-v2/chrome-edge.css */
/**
 * Pagayo Design V2 — Admin chrome edge shadows (SSoT).
 *
 * One place to tune content-edge shadows for shell chrome AND entity-sheet
 * editor chrome. Tokens live in contexts/admin/_base.css.
 *
 * Role Contract Test: shell topbar/footer AND entity-sheet head/foot share
 * this hangpoint. Entity-sheet chrome stacks above the scrolling body so the
 * shadow overlays content — never a gray spacer band between chrome and body.
 */

.admin-v2-topbar,
.admin-v2-entity-sheet__head {
  box-shadow: var(--admin-v2-chrome-header-shadow);
}

.admin-v2-shell-footer,
.admin-v2-entity-sheet__foot,
.admin-v2-entity-sheet__actions,
.admin-v2-settings-stack__foot {
  box-shadow: var(--admin-v2-chrome-footer-shadow);
}

/* Paint chrome above the sheet body scrollport (sibling stacking). */
.admin-v2-entity-sheet__head,
.admin-v2-entity-sheet__foot,
.admin-v2-entity-sheet__actions {
  position: relative;
  z-index: 1;
}

.admin-v2-entity-sheet__body {
  position: relative;
  z-index: 0;
}

/* v2/admin-v2/shell-chrome.css */
/**
 * Pagayo Design V2 — Admin shell chrome (topbar, contextbar, zone switcher).
 *
 * Sticky global navigation above workspace content. Interactive controls use
 * --admin-v2-radius-interactive; passive status labels use --admin-v2-radius-label.
 */

.admin-v2-topbar {
  min-height: var(--admin-v2-topbar-height);
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css (shared with entity-sheet head). */
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-4);
  padding: 0 var(--admin-v2-app-gutter);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* When Tools toolbar is open, content-edge shadow moves to the sticky toolbar. */
.admin-shell--v2:has(.admin-v2-workspace-toolbar[data-toolbar-open="true"]) .admin-v2-topbar,
body:has(.admin-v2-workspace-toolbar[data-toolbar-open="true"]) .admin-v2-topbar {
  box-shadow: none;
}

.admin-v2-contextbar {
  min-height: var(--admin-v2-contextbar-height);
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-app-gutter);
  position: sticky;
  top: var(--admin-v2-topbar-height);
  z-index: 9;
}

/* Shell zone nav lives in the topbar trailing slot (not a second sticky row). */
.admin-v2-contextbar--topbar {
  min-height: 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  position: static;
  top: auto;
  z-index: 20;
  flex: 0 1 auto;
  justify-content: flex-end;
  max-width: min(100%, 46rem);
  /* Must stay visible — overflow-x:auto clips the More dropdown below the bar. */
  overflow: visible;
}

.admin-capability-action-bar__slot--trailing {
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-end;
  overflow: visible;
}

.admin-v2-topbar.admin-capability-action-bar {
  overflow: visible;
}

.admin-v2-topbar-leading {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-4);
  min-width: 0;
}

.admin-v2-zone-switcher {
  position: relative;
}

/* Hover-bridge: gap tussen trigger en menu blijft binnen switcher-hitarea. */
.admin-v2-zone-switcher::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--admin-v2-space-2);
  display: none;
  pointer-events: auto;
}

.admin-v2-zone-switcher[data-open="true"]::after {
  display: block;
}

.admin-v2-zone-trigger {
  min-width: var(--admin-v2-zone-trigger-min-width);
  min-height: var(--admin-v2-button-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-control-padding-x-lg);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-zone-trigger__label {
  color: var(--admin-v2-color-text);
}

.admin-v2-zone-trigger__chevron {
  color: var(--admin-v2-color-text-muted);
  flex-shrink: 0;
}

.admin-v2-zone-trigger:hover,
.admin-v2-zone-trigger[aria-expanded="true"] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-zone-trigger:hover .admin-v2-zone-trigger__label,
.admin-v2-zone-trigger[aria-expanded="true"] .admin-v2-zone-trigger__label,
.admin-v2-zone-trigger:hover .admin-v2-zone-trigger__chevron,
.admin-v2-zone-trigger[aria-expanded="true"] .admin-v2-zone-trigger__chevron {
  color: var(--admin-v2-color-primary);
}

.admin-v2-zone-menu {
  position: absolute;
  top: calc(100% + var(--admin-v2-space-2));
  left: 0;
  z-index: 40;
  width: var(--admin-v2-zone-menu-width);
  max-height: var(--admin-v2-shell-menu-max-height, calc(100dvh - var(--admin-v2-topbar-height) - var(--admin-v2-space-4)));
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: var(--admin-v2-space-2);
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-v2-zone-switcher[data-open="true"] .admin-v2-zone-menu {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-v2-zone-option {
  min-height: var(--admin-v2-control-height-lg);
  border-radius: var(--admin-v2-radius-interactive);
  display: grid;
  grid-template-columns: var(--admin-v2-icon-size-md) minmax(0, 1fr);
  gap: var(--admin-v2-space-3);
  align-items: center;
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  color: var(--admin-v2-color-text-muted);
  cursor: pointer;
}

.admin-v2-zone-option__icon {
  width: var(--admin-v2-icon-size-md);
  height: var(--admin-v2-icon-size-md);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.admin-v2-zone-option__copy {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-zone-option strong {
  display: block;
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
}

.admin-v2-zone-option__copy > span {
  display: block;
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-zone-option:hover .admin-v2-zone-option__copy > span,
.admin-v2-zone-option[aria-current="true"] .admin-v2-zone-option__copy > span,
.admin-v2-zone-option.active .admin-v2-zone-option__copy > span {
  color: var(--admin-v2-color-primary);
}

.admin-v2-zone-option:hover,
.admin-v2-zone-option[aria-current="true"],
.admin-v2-zone-option.active {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-zone-option:hover .admin-v2-zone-option__icon,
.admin-v2-zone-option[aria-current="true"] .admin-v2-zone-option__icon,
.admin-v2-zone-option.active .admin-v2-zone-option__icon {
  background: var(--admin-v2-color-surface-overlay);
  color: var(--admin-v2-color-primary);
}

.admin-v2-brand-mark {
  width: var(--admin-v2-brand-mark-size);
  height: var(--admin-v2-brand-mark-size);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
  display: grid;
  place-items: center;
  box-shadow: var(--admin-v2-shadow-xs);
  flex-shrink: 0;
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-bold);
}

.admin-v2-context-link {
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.admin-v2-context-link:hover,
.admin-v2-context-link[aria-current="page"],
.admin-v2-context-link.active {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-context-link:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-context-more {
  position: relative;
  z-index: 30;
}

.admin-v2-context-more-menu {
  position: absolute;
  top: calc(100% + var(--admin-v2-space-2));
  right: 0;
  z-index: 40;
  width: var(--admin-v2-context-more-menu-width);
  max-height: var(--admin-v2-shell-menu-max-height, calc(100dvh - var(--admin-v2-topbar-height) - var(--admin-v2-space-4)));
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: var(--admin-v2-space-2);
  display: none;
  gap: var(--admin-v2-space-1);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Hover/focus open stays for row placement; topbar uses data-open (click) only. */
.admin-v2-context-more:focus-within .admin-v2-context-more-menu,
.admin-v2-contextbar:not(.admin-v2-contextbar--topbar) .admin-v2-context-more:hover .admin-v2-context-more-menu,
.admin-v2-context-more[data-open="true"] .admin-v2-context-more-menu {
  display: grid;
}

.admin-v2-context-more-menu[hidden] {
  display: none !important;
}

.admin-v2-context-more-menu a,
.admin-v2-context-more-menu button {
  min-height: var(--admin-v2-control-height-md);
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  color: var(--admin-v2-color-text-muted);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
  text-decoration: none;
}

.admin-v2-context-more-button {
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
}

.admin-v2-contextbar__trailing {
  margin-left: auto;
}

.admin-v2-context-more-link {
  min-height: var(--admin-v2-control-height-md);
  border-radius: var(--admin-v2-radius-interactive);
  display: flex;
  align-items: center;
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  color: var(--admin-v2-color-text-muted);
  text-decoration: none;
}

.admin-v2-context-more-link:hover {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
}

.admin-v2-topbar-brand-block {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.admin-v2-topbar-brand-text {
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-body);
  font-weight: var(--admin-v2-font-weight-bold);
  line-height: var(--admin-v2-line-height-control);
}

.admin-v2-topbar-spacer {
  flex: 1 1 auto;
}

.admin-v2-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
}

.admin-v2-topbar-util {
  width: var(--admin-v2-icon-button-size-lg);
  min-height: var(--admin-v2-button-height-lg);
  min-width: var(--admin-v2-icon-button-size-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-grid;
  place-items: center;
  padding: 0;
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-topbar-util:hover:not(:disabled),
.admin-v2-topbar-util:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-util:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.admin-v2-topbar-ai {
  min-height: var(--admin-v2-button-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-control-padding-x-lg);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-topbar-ai__label {
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-topbar-ai:hover,
.admin-v2-topbar-ai:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-ai:hover .admin-v2-topbar-ai__label,
.admin-v2-topbar-ai:focus-visible .admin-v2-topbar-ai__label {
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-search {
  min-width: var(--admin-v2-command-button-min-width);
  min-height: var(--admin-v2-button-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-control-padding-x-lg);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-topbar-search__label {
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-topbar-search__shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.375rem;
  padding: 0 var(--admin-v2-space-2);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-label);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  font-family: inherit;
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-topbar-search:hover:not(:disabled),
.admin-v2-topbar-search:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-search:hover:not(:disabled) .admin-v2-topbar-search__label,
.admin-v2-topbar-search:focus-visible .admin-v2-topbar-search__label {
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-search:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.admin-v2-topbar-avatar {
  width: var(--admin-v2-icon-button-size-md);
  height: var(--admin-v2-icon-button-size-md);
  min-width: var(--admin-v2-icon-button-size-md);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: 999px;
  background: var(--admin-v2-avatar-bg);
  color: var(--admin-v2-color-primary);
  display: inline-grid;
  place-items: center;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  line-height: 1;
  cursor: pointer;
}

.admin-v2-topbar-avatar:hover,
.admin-v2-topbar-avatar:focus-visible {
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-zone-trigger:focus-visible,
.admin-v2-zone-option:focus-visible,
.admin-v2-context-more-button:focus-visible,
.admin-v2-topbar-brand-block:focus-visible,
.admin-v2-topbar-util:focus-visible,
.admin-v2-topbar-ai:focus-visible,
.admin-v2-topbar-search:focus-visible,
.admin-v2-topbar-avatar:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-zone-option {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
}

/*
 * Sidebarless Admin V2 shell — always-visible chrome + one scrollport.
 * DOM: topbar → main → footer (siblings). Flex column + 100dvh keeps chrome
 * pinned; ONLY .admin-main scrolls. Nested page locks (products/orders) must
 * not set overflow:hidden on main/page or the scrollbar becomes a dead trap.
 */
.admin-shell--v2 {
  --admin-shell-sidebar-width: 0px;
  /* Reserve footer chrome so topbar dropdowns scroll above AI/Tools, not under it. */
  --admin-v2-shell-footer-min-height: 4.5rem;
  --admin-v2-shell-menu-max-height: calc(
    100dvh
    - var(--admin-v2-topbar-height)
    - var(--admin-v2-shell-footer-min-height)
    - var(--admin-v2-space-4)
  );
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--admin-v2-color-app-bg);
}

.admin-shell--v2 .admin-account-nav {
  display: none;
}

.admin-shell--v2 .admin-main {
  flex: 1 1 auto;
  min-height: 0;
  margin-left: 0;
  width: 100%;
  max-width: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.admin-shell--v2 .admin-v2-topbar,
.admin-shell--v2 .admin-v2-shell-footer {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  position: relative;
  top: auto;
  bottom: auto;
}

/* Topbar must stack above footer — equal z-index lets footer (later sibling) cover menus. */
.admin-shell--v2 .admin-v2-topbar {
  z-index: 30;
}

.admin-shell--v2 .admin-v2-shell-footer {
  z-index: 20;
}

.admin-v2-zone-landing {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--admin-v2-space-8) var(--admin-v2-app-gutter);
}

.admin-v2-zone-landing__header {
  margin-bottom: var(--admin-v2-section-gap);
}

.admin-v2-zone-landing__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-zone-landing__subtitle {
  margin: var(--admin-v2-space-2) 0 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-zone-landing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--admin-v2-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-v2-zone-landing__grid > li {
  min-width: 0;
  display: grid;
}

.admin-v2-zone-landing__card {
  display: grid;
  grid-template-columns: var(--admin-v2-brand-mark-size) minmax(0, 1fr);
  gap: var(--admin-v2-space-4);
  align-items: start;
  width: 100%;
  min-width: 0;
  min-height: var(--admin-v2-collection-card-min-height);
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  text-align: left;
  cursor: pointer;
}

.admin-v2-zone-landing__card-icon {
  width: var(--admin-v2-brand-mark-size);
  height: var(--admin-v2-brand-mark-size);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  display: grid;
  place-items: center;
}

.admin-v2-zone-landing__card:hover,
.admin-v2-zone-landing__card:focus-visible {
  border-color: var(--admin-v2-border-active);
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-zone-landing__card-copy {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-v2-zone-landing__card-copy strong {
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  color: var(--admin-v2-color-text);
}

.admin-v2-zone-landing__card-copy span {
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}


/* Admin Shell V3 — radical four-control command header. */
.admin-shell-v3-topbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
  padding: 0 var(--admin-v2-app-gutter);
  background: var(--admin-v2-color-surface-overlay);
  border-bottom: 1px solid var(--admin-v2-border-default);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--admin-v2-color-text) 3%, transparent);
}

.admin-shell-v3-topbar .admin-v2-topbar-leading,
.admin-shell-v3-topbar .admin-v2-topbar-brand-block,
.admin-shell-v3-topbar .admin-v2-topbar-actions,
.admin-shell-v3-topbar .admin-v2-topbar-spacer {
  display: none;
}

.admin-shell-v3-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.admin-shell-v3-spacer {
  flex: 1 1 auto;
}

.admin-shell-v3-trigger,
.admin-shell-v3-primary {
  min-height: 38px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-4);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.admin-shell-v3-trigger {
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-shell-v3-trigger:hover,
.admin-shell-v3-trigger[aria-expanded='true'] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-shell-v3-trigger:focus-visible,
.admin-shell-v3-primary:focus-visible,
.admin-shell-v3-menu button:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-shell-v3-trigger--module {
  min-width: 154px;
  justify-content: flex-start;
}

.admin-shell-v3-trigger--ai {
  min-width: 76px;
}

.admin-shell-v3-trigger--tools {
  min-width: 102px;
}

.admin-shell-v3-primary {
  border-color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
  box-shadow: var(--admin-v2-shadow-sm);
}

.admin-shell-v3-primary:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.admin-shell-v3-menu {
  position: absolute;
  top: calc(100% + var(--admin-v2-space-2));
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: var(--admin-v2-space-3);
  z-index: 40;
}

.admin-shell-v3-menu--modules {
  left: 0;
  width: min(360px, calc(100vw - 32px));
}

.admin-shell-v3-menu--tools {
  right: 0;
  width: min(720px, calc(100vw - 32px));
}

.admin-shell-v3-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  padding: 0 var(--admin-v2-space-1) var(--admin-v2-space-2);
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-shell-v3-menu__header button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.admin-shell-v3-menu__header button:hover {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
}

.admin-shell-v3-menu__items {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-shell-v3-menu__item {
  min-height: 38px;
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  padding: 0 var(--admin-v2-space-3);
  font: inherit;
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  text-align: left;
  cursor: pointer;
}

.admin-shell-v3-menu__item:hover,
.admin-shell-v3-menu__item[aria-current='page'] {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-shell-v3-menu__item:disabled {
  cursor: default;
  opacity: 0.54;
}

.admin-shell-v3-menu__item:disabled:hover {
  background: transparent;
  color: var(--admin-v2-color-text);
}

.admin-shell-v3-menu__zones {
  border-top: 1px solid var(--admin-v2-border-default);
  margin-top: var(--admin-v2-space-3);
  padding-top: var(--admin-v2-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

.admin-shell-v3-zone-pill {
  min-height: 30px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: 999px;
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  padding: 0 var(--admin-v2-space-3);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  cursor: pointer;
}

.admin-shell-v3-zone-pill:hover,
.admin-shell-v3-zone-pill[aria-current='true'] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-shell-v3-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-shell-v3-tools-group {
  min-width: 0;
  border: 1px solid var(--admin-v2-border-subtle, var(--admin-v2-border-default));
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-2);
}

.admin-shell-v3-tools-group h2 {
  margin: 0 0 var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-1);
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
}

@media (max-width: 760px) {
  .admin-shell-v3-topbar {
    gap: var(--admin-v2-space-2);
    padding-inline: var(--admin-v2-space-3);
    overflow-x: auto;
  }

  .admin-shell-v3-trigger,
  .admin-shell-v3-primary {
    min-height: var(--admin-control-compact);
    padding-inline: var(--admin-v2-space-3);
  }

  .admin-shell-v3-trigger--module,
  .admin-shell-v3-trigger--tools,
  .admin-shell-v3-trigger--ai {
    min-width: auto;
  }

  .admin-shell-v3-menu--tools {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .admin-shell-v3-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin Shell V4 — Capability Action Bar */
.admin-capability-action-bar {
  min-height: var(--admin-v2-topbar-height);
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-app-gutter);
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin-capability-action-bar__slot {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.admin-capability-action-bar__spacer {
  flex: 1 1 auto;
}

.admin-capability-action-bar__trigger,
.admin-capability-action-bar__primary {
  box-sizing: border-box;
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  max-height: var(--admin-v2-interactive-control-height);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-capability-action-bar__trigger svg,
.admin-capability-action-bar__trigger .lucide,
.admin-capability-action-bar__primary svg,
.admin-capability-action-bar__primary .lucide {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex-shrink: 0;
}

.admin-capability-action-bar__trigger:hover,
.admin-capability-action-bar__trigger[aria-expanded="true"] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-capability-action-bar__trigger:focus-visible,
.admin-capability-action-bar__primary:focus-visible,
.admin-capability-action-bar__item:focus-visible,
.admin-capability-action-bar__capability:focus-visible,
.admin-capability-action-bar__menu-header button:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-capability-action-bar__trigger--context {
  min-width: 188px;
  justify-content: flex-start;
}

.admin-capability-action-bar__context-copy {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--admin-v2-space-1);
  text-align: left;
}

.admin-capability-action-bar__context-copy strong,
.admin-capability-action-bar__context-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
}

.admin-capability-action-bar__context-copy strong {
  color: inherit;
}

.admin-capability-action-bar__context-copy small {
  color: var(--admin-v2-color-text-muted);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-capability-action-bar__trigger--ai {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, var(--admin-v2-border-default));
}

.admin-capability-action-bar__primary {
  border-color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

.admin-capability-action-bar__primary:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.admin-capability-action-bar__primary--publish {
  min-width: 112px;
}

.admin-capability-action-bar__menu {
  position: absolute;
  top: calc(100% + var(--admin-v2-space-2));
  max-height: var(--admin-v2-shell-menu-max-height, calc(100dvh - var(--admin-v2-topbar-height) - var(--admin-v2-space-4)));
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: var(--admin-v2-space-3);
  z-index: 40;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-capability-action-bar__menu--context {
  left: 0;
  width: min(var(--admin-v2-context-menu-width), calc(100vw - (var(--admin-v2-app-gutter) * 2)));
  padding: var(--admin-v2-space-2);
  /* Flyouts render outside the panel — must not clip */
  overflow: visible;
}

/* Keep hover alive while moving from trigger into the panel */
.admin-capability-action-bar__menu--context::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--admin-v2-space-2);
}

.admin-capability-action-bar__menu--mode {
  right: 0;
  width: min(560px, calc(100vw - (var(--admin-v2-app-gutter) * 2)));
}

/* Work-place rows with hover flyout to the right */
.admin-v2-context-menu__places {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-v2-context-menu__place {
  position: relative;
  border-radius: var(--admin-v2-radius-interactive);
}

.admin-v2-context-menu__place-toggle,
.admin-v2-context-menu__place-link {
  width: 100%;
  min-height: var(--admin-v2-control-height-lg);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  font-weight: var(--admin-v2-font-weight-medium);
  text-align: left;
  cursor: pointer;
}

.admin-v2-context-menu__place-toggle:hover,
.admin-v2-context-menu__place-link:hover,
.admin-v2-context-menu__place:hover > .admin-v2-context-menu__place-toggle,
.admin-v2-context-menu__place:focus-within > .admin-v2-context-menu__place-toggle,
.admin-v2-context-menu__place--open > .admin-v2-context-menu__place-toggle,
.admin-v2-context-menu__place-link[aria-current="page"],
.admin-v2-context-menu__destination:hover,
.admin-v2-context-menu__destination[aria-current="page"] {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-context-menu__place-toggle:focus-visible,
.admin-v2-context-menu__place-link:focus-visible,
.admin-v2-context-menu__destination:focus-visible,
.admin-capability-action-bar__item--manage:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-context-menu__place-icon {
  width: var(--admin-v2-icon-size-md);
  height: var(--admin-v2-icon-size-md);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.admin-v2-context-menu__place-icon svg,
.admin-v2-context-menu__place-icon .lucide {
  width: var(--admin-v2-icon-size-sm);
  height: var(--admin-v2-icon-size-sm);
}

.admin-v2-context-menu__place-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-v2-context-menu__place-chevron {
  flex-shrink: 0;
  color: var(--admin-v2-color-text-muted);
}

.admin-capability-action-bar__slot--trailing {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-width: 0;
}

/*
 * CONTEXT menu footer icon rail — Manage (optional) + Appearance (3) + Logout.
 * Equal grid slots. Appearance uses display:contents so radios are peer cells.
 * Role: admin chrome context-menu footer only (not entity-sheet footer).
 */
.admin-capability-action-bar__menu-footer-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: var(--admin-v2-space-1);
  width: 100%;
  margin: 0;
  padding: var(--admin-v2-space-1);
  box-sizing: border-box;
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
}

.admin-capability-action-bar__menu-footer-icons[data-footer-icons="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-v2-context-menu__appearance {
  display: contents;
}

.admin-v2-context-menu__appearance-btn,
.admin-v2-context-menu__footer-icon-btn {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: var(--admin-v2-interactive-control-height);
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  cursor: pointer;
}

.admin-v2-context-menu__appearance-btn:hover,
.admin-v2-context-menu__footer-icon-btn:hover {
  color: var(--admin-v2-color-text);
  background: var(--admin-v2-color-surface);
}

.admin-v2-context-menu__appearance-btn:focus-visible,
.admin-v2-context-menu__footer-icon-btn:focus-visible {
  outline: 2px solid var(--admin-v2-color-primary);
  outline-offset: 2px;
}

.admin-v2-context-menu__footer-icon-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-v2-context-menu__appearance-btn--selected {
  color: var(--admin-v2-color-text);
  border-color: var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface);
}

.admin-v2-context-menu__appearance-btn--selected[data-appearance="revolutionary"] {
  color: var(--pg-ui-color-primary);
  border-color: color-mix(in srgb, var(--pg-ui-color-primary) 45%, transparent);
}

.admin-v2-context-menu__appearance-btn svg,
.admin-v2-context-menu__appearance-btn .lucide,
.admin-v2-context-menu__footer-icon-btn svg,
.admin-v2-context-menu__footer-icon-btn .lucide {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.admin-v2-context-menu__place:hover > .admin-v2-context-menu__place-toggle .admin-v2-context-menu__place-chevron,
.admin-v2-context-menu__place:focus-within > .admin-v2-context-menu__place-toggle .admin-v2-context-menu__place-chevron,
.admin-v2-context-menu__place--open > .admin-v2-context-menu__place-toggle .admin-v2-context-menu__place-chevron {
  color: var(--admin-v2-color-primary);
}

.admin-v2-context-menu__destinations {
  position: absolute;
  /* Default: align with the zone row and grow downward (CapabilityActionBar
     may shift `top` up when a long list would cross the shell footer).
     Flush to the place edge so pointer transit cannot fall through a gap. */
  top: 0;
  bottom: auto;
  left: 100%;
  z-index: 50;
  display: grid;
  gap: var(--admin-v2-space-1);
  width: min(var(--admin-v2-context-menu-flyout-width), calc(100vw - (var(--admin-v2-app-gutter) * 2)));
  margin: 0;
  padding: var(--admin-v2-space-1);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  border: 1px solid var(--admin-v2-border-default);
  box-shadow: var(--admin-v2-shadow-floating);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Hover bridge: covers diagonal transit + any sub-pixel gap into the flyout */
.admin-v2-context-menu__destinations::before {
  content: "";
  position: absolute;
  top: calc(var(--admin-v2-space-3) * -1);
  bottom: calc(var(--admin-v2-space-3) * -1);
  right: 100%;
  width: var(--admin-v2-space-3);
  height: auto;
}

.admin-v2-context-menu__place:hover > .admin-v2-context-menu__destinations,
.admin-v2-context-menu__place:focus-within > .admin-v2-context-menu__destinations,
.admin-v2-context-menu__place--open > .admin-v2-context-menu__destinations {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.admin-v2-context-menu__destination {
  width: 100%;
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  text-align: left;
  cursor: pointer;
}

.admin-capability-action-bar__menu-footer {
  display: grid;
  gap: var(--admin-v2-space-1);
  margin-top: var(--admin-v2-space-2);
  padding-top: var(--admin-v2-space-2);
  border-top: 1px solid var(--admin-v2-border-default);
}


.admin-capability-action-bar__menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  padding: var(--admin-v2-space-1) var(--admin-v2-space-1) var(--admin-v2-space-3);
}

.admin-capability-action-bar__menu-header div {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-capability-action-bar__menu-header span,
.admin-capability-action-bar__section-label {
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-capability-action-bar__menu-header strong {
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-heading-sm);
  line-height: var(--admin-v2-line-height-heading-sm);
}

.admin-capability-action-bar__menu-header button {
  width: var(--admin-v2-control-height-sm);
  height: var(--admin-v2-control-height-sm);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.admin-capability-action-bar__menu-header button:hover {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
}

.admin-capability-action-bar__capability-list,
.admin-capability-action-bar__module-list {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-capability-action-bar__capability-list {
  margin-bottom: var(--admin-v2-space-4);
}

.admin-capability-action-bar__capability,
.admin-capability-action-bar__item {
  width: 100%;
  min-height: var(--admin-v2-control-height-lg);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  text-align: left;
  cursor: pointer;
}

/* Context footer rows: icon + label flush left (same rhythm as place rows) */
.admin-capability-action-bar__menu-footer .admin-capability-action-bar__item,
.admin-capability-action-bar__item--manage {
  justify-content: flex-start;
  text-align: left;
  color: var(--admin-v2-color-text-muted);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-capability-action-bar__menu-footer .admin-capability-action-bar__item:hover,
.admin-capability-action-bar__item--manage:hover {
  color: var(--admin-v2-color-primary);
}

.admin-capability-action-bar__menu-footer .admin-capability-action-bar__item svg,
.admin-capability-action-bar__menu-footer .admin-capability-action-bar__item .lucide {
  width: var(--admin-v2-icon-size-sm);
  height: var(--admin-v2-icon-size-sm);
  flex-shrink: 0;
}

.admin-capability-action-bar__capability {
  display: grid;
  align-items: start;
  justify-content: stretch;
}

.admin-capability-action-bar__capability strong {
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
}

.admin-capability-action-bar__capability span,
.admin-capability-action-bar__item small {
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
}

.admin-capability-action-bar__capability:hover,
.admin-capability-action-bar__capability[aria-current="true"],
.admin-capability-action-bar__item:hover,
.admin-capability-action-bar__item[aria-current="page"] {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-capability-action-bar__item:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.admin-capability-action-bar__item:disabled:hover {
  background: transparent;
  color: var(--admin-v2-color-text);
}

.admin-capability-action-bar__menu-section {
  display: grid;
  gap: var(--admin-v2-space-2);
  padding-top: var(--admin-v2-space-3);
  border-top: 1px solid var(--admin-v2-border-default);
}

.admin-capability-action-bar__launcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-capability-action-bar__launcher-group {
  min-width: 0;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-2);
}

.admin-capability-action-bar__launcher-group h2 {
  margin: 0 0 var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-1);
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 860px) {
  .admin-capability-action-bar {
    gap: var(--admin-v2-space-2);
  }

  .admin-capability-action-bar__trigger--context {
    min-width: 0;
  }

  .admin-capability-action-bar__context-copy small {
    display: none;
  }

  .admin-capability-action-bar__launcher {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-capability-action-bar__trigger--ai span,
  .admin-capability-action-bar__trigger--mode span,
  .admin-capability-action-bar__primary span {
    display: none;
  }

  .admin-capability-action-bar__trigger,
  .admin-capability-action-bar__primary {
    padding: 0 var(--admin-v2-space-3);
  }
}
/* Pagayo UI Framework additions: launcher engine + capability grammar */
.admin-capability-action-bar__menu--mode {
  width: min(840px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 92px));
  overflow: hidden;
}

.pagayo-launcher {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(300px, 1fr);
  gap: 14px;
  min-height: 440px;
  padding: 12px;
  background: color-mix(in srgb, var(--admin-v2-color-surface) 88%, var(--admin-v2-color-surface-hover));
}

.pagayo-launcher__index {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding-right: 4px;
}

.pagayo-launcher__section {
  display: grid;
  gap: 8px;
}

.pagayo-launcher__section-heading {
  display: grid;
  gap: 2px;
  padding: 0 4px;
}

.pagayo-launcher__section-heading h2 {
  margin: 0;
  color: var(--admin-v2-color-text-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pagayo-launcher__section-heading p {
  margin: 0;
  color: var(--admin-v2-color-text-soft);
  font-size: 12px;
  line-height: 1.35;
}

.pagayo-launcher__items,
.pagayo-launcher__options {
  display: grid;
  gap: 6px;
}

.pagayo-launcher__item,
.pagayo-launcher__option {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--admin-v2-color-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pagayo-launcher__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 11px;
}

.pagayo-launcher__item > span,
.pagayo-launcher__option > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pagayo-launcher__item strong,
.pagayo-launcher__option span {
  font-size: 13px;
  font-weight: 680;
  line-height: 1.25;
}

.pagayo-launcher__item small,
.pagayo-launcher__option small {
  color: var(--admin-v2-color-text-muted);
  font-size: 11.5px;
  line-height: 1.25;
}

.pagayo-launcher__item:hover,
.pagayo-launcher__item[aria-current="true"],
.pagayo-launcher__option:hover,
.pagayo-launcher__option[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 22%, transparent);
  background: color-mix(in srgb, var(--admin-v2-color-primary) 8%, var(--admin-v2-color-surface));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--admin-v2-color-text) 4%, transparent);
}

.pagayo-launcher__item:focus-visible,
.pagayo-launcher__option:focus-visible,
.pagayo-launcher__search input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--admin-v2-color-primary) 55%, transparent);
  outline-offset: 2px;
}

.pagayo-launcher__item:disabled,
.pagayo-launcher__option:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.pagayo-launcher__panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: 20px;
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-lg);
}

.pagayo-launcher__panel--empty {
  place-content: center;
  text-align: center;
  color: var(--admin-v2-color-text-muted);
}

.pagayo-launcher__panel-heading {
  display: grid;
  gap: 4px;
}

.pagayo-launcher__panel-heading strong {
  color: var(--admin-v2-color-text);
  font-size: 15px;
  font-weight: 760;
}

.pagayo-launcher__panel-heading span {
  color: var(--admin-v2-color-text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.pagayo-launcher__search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--admin-v2-space-2, 10px);
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem);
  border: 1.5px solid var(--admin-v2-border-default, var(--admin-v2-border-default));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, 8px));
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted, var(--admin-v2-color-text-muted));
  box-sizing: border-box;
}

.pagayo-launcher__search > svg,
.pagayo-launcher__search .lucide {
  flex-shrink: 0;
  width: var(--admin-v2-search-icon-size, 18px);
  height: var(--admin-v2-search-icon-size, 18px);
}

.pagayo-launcher__search:focus-within {
  border-color: var(--admin-v2-color-primary, var(--admin-v2-color-primary));
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, color-mix(in srgb, var(--admin-v2-color-primary) 16%, transparent));
}

.pagayo-launcher__search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--admin-v2-color-text, var(--admin-v2-color-text));
  font: inherit;
  font-size: var(--admin-v2-field-control-font-size, 14px);
  font-weight: var(--admin-v2-font-weight-medium, 500);
}

.pagayo-launcher__search input::placeholder {
  color: var(--admin-v2-color-text-muted, var(--admin-v2-color-text-muted));
}

.pagayo-launcher__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 11px;
}

@media (max-width: 820px) {
  .admin-capability-action-bar__menu--mode {
    width: calc(100vw - 20px);
  }

  .pagayo-launcher {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 120px);
    overflow: auto;
  }

  .pagayo-launcher__panel {
    min-height: auto;
  }
}

/* Launcher Runtime -------------------------------------------------------- */
.pagayo-launcher__panel-actions {
  align-items: center;
  border-top: 1px solid var(--admin-v2-border-subtle);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 0.75rem;
}

.pagayo-launcher__clear,
.pagayo-launcher__apply {
  align-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-text) 10%, transparent);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 650;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0 0.75rem;
}

.pagayo-launcher__clear {
  background: var(--admin-v2-color-surface-overlay);
  color: var(--admin-v2-color-text-muted);
}

.pagayo-launcher__apply {
  background: var(--admin-v2-color-text);
  color: var(--admin-v2-color-text-inverse);
}

.pagayo-launcher__option[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--admin-v2-color-primary) 12%, transparent), var(--admin-v2-shadow-lg);
}

/* v2/admin-v2/shell-footer.css */
/**
 * Admin shell footer — collection / list chrome.
 * Fixed zones: AI (left) · list tools (center) · New/primary (right).
 * Hidden while an entity sheet is open (sheet owns its own foot).
 */

.admin-v2-shell-footer {
  box-sizing: border-box;
  min-height: var(--admin-v2-shell-footer-min-height);
  border-top: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css (shared with entity-sheet foot). */
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-app-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-3);
  position: sticky;
  bottom: 0;
  z-index: 19;
}

body.admin-v2-sheet-open .admin-v2-shell-footer {
  display: none;
}

.admin-v2-shell-footer__zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-width: 0;
}

.admin-v2-shell-footer__zone--ai {
  flex: 0 0 auto;
}

.admin-v2-shell-footer__zone--tools {
  flex: 1 1 12rem;
  justify-content: center;
}

.admin-v2-shell-footer__zone--primary {
  flex: 0 0 auto;
  margin-left: auto;
}

.admin-v2-shell-footer__action {
  box-sizing: border-box;
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  max-height: var(--admin-v2-interactive-control-height);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-shell-footer__action:hover:not(:disabled) {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
}

.admin-v2-shell-footer__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-v2-shell-footer__action--danger {
  color: var(--admin-v2-color-danger);
}

.admin-v2-shell-footer__action--ai {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, var(--admin-v2-border-default));
}

/* Tools off = inviting success cue to open the toolbar; on = quiet neutral. */
.admin-v2-shell-footer__action--tools {
  border-color: color-mix(
    in srgb,
    var(--admin-v2-label-text-success) 28%,
    var(--admin-v2-border-default)
  );
  background: var(--admin-v2-label-bg-success);
  color: var(--admin-v2-label-text-success);
}

.admin-v2-shell-footer__action--tools-active {
  border-color: var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
}

.admin-v2-shell-footer__action--primary {
  border-color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

.admin-v2-shell-footer__action--primary:hover:not(:disabled) {
  filter: brightness(0.98);
  transform: translateY(-1px);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

/**
 * Partner / shipping-provider CTA (e.g. Sendcloud connect on shipping hub).
 * Brand fill is intentional partner chrome — not Pagayo primary.
 * Specificity beats the default footer action hover soft-fill.
 */
.admin-v2-shell-footer__action.admin-v2-shell-footer__action--partner {
  border-color: var(--admin-v2-shell-footer-partner-bg);
  background-color: var(--admin-v2-shell-footer-partner-bg);
  background-image: none;
  color: var(--admin-v2-shell-footer-partner-fg);
}

.admin-v2-shell-footer__action.admin-v2-shell-footer__action--partner:hover:not(:disabled) {
  filter: brightness(1.08);
  border-color: var(--admin-v2-shell-footer-partner-bg);
  background-color: var(--admin-v2-shell-footer-partner-bg);
  background-image: none;
  color: var(--admin-v2-shell-footer-partner-fg);
  transform: none;
}

.admin-v2-shell-footer__action--primary.admin-v2-shell-footer__action--publish {
  min-width: 112px;
}

.admin-v2-shell-footer__action svg,
.admin-v2-shell-footer__action .lucide {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex-shrink: 0;
}

.admin-v2-shell-footer__lang-switch {
  position: relative;
  flex: 0 0 auto;
}

.admin-v2-shell-footer__lang-switch-trigger {
  max-width: min(20rem, 42vw);
  justify-content: flex-start;
}

.admin-v2-shell-footer__lang-switch-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-v2-shell-footer__lang-switch-flag {
  width: 1.25rem;
  height: 0.875rem;
  flex: 0 0 auto;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-xs);
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-shell-footer__lang-menu {
  box-sizing: border-box;
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(100% + var(--admin-v2-space-2));
  z-index: 30;
  width: max-content;
  min-width: 17rem;
  max-width: min(
    24rem,
    calc(100vw - var(--admin-v2-app-gutter) - var(--admin-v2-app-gutter))
  );
  max-height: min(24rem, calc(100vh - 8rem));
  overflow-y: auto;
  padding: var(--admin-v2-space-2);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
}

.admin-v2-shell-footer__lang-menu-list {
  display: grid;
  gap: var(--admin-v2-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-v2-shell-footer__lang-menu-item {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.admin-v2-shell-footer__lang-menu-item:hover,
.admin-v2-shell-footer__lang-menu-item:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  outline: none;
}

.admin-v2-shell-footer__lang-menu-item[aria-current="true"] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
}

.admin-v2-shell-footer__lang-menu-copy {
  min-width: 0;
}

.admin-v2-shell-footer__lang-menu-name,
.admin-v2-shell-footer__lang-menu-locale {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-v2-shell-footer__lang-menu-name {
  font-weight: var(--admin-v2-font-weight-semibold);
}

.admin-v2-shell-footer__lang-menu-locale {
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
}

.admin-v2-shell-footer__lang-menu-badge {
  border-radius: var(--admin-v2-radius-label);
  background: var(--admin-v2-label-bg-info);
  color: var(--admin-v2-label-text-info);
  padding: var(--admin-v2-space-1) var(--admin-v2-space-2);
  font-size: var(--admin-v2-font-size-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
}

.admin-v2-shell-footer__lang-menu-check {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  color: var(--admin-v2-color-primary);
}

/* Splitsknop (opdracht 188, stuk 2): de hoofdactie plus een pijltje met de andere keuzes.
 * Het menu gebruikt dezelfde vorm als het taalmenu. */
.admin-v2-shell-footer__split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.admin-v2-shell-footer__split > .admin-v2-shell-footer__action:first-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Beide helften bewegen samen, zodat de naad niet verspringt. */
.admin-v2-shell-footer__split > .admin-v2-shell-footer__action:hover:not(:disabled) {
  transform: none;
}

.admin-v2-shell-footer__split-toggle {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--admin-v2-color-surface) 35%, transparent);
  padding: 0 var(--admin-v2-space-2);
}

.admin-v2-shell-footer__split-menu {
  box-sizing: border-box;
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: calc(100% + var(--admin-v2-space-2));
  z-index: 30;
  display: grid;
  gap: var(--admin-v2-space-1);
  width: max-content;
  min-width: 14rem;
  max-width: min(
    24rem,
    calc(100vw - var(--admin-v2-app-gutter) - var(--admin-v2-app-gutter))
  );
  padding: var(--admin-v2-space-2);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
}

.admin-v2-shell-footer__split-menu-item {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.admin-v2-shell-footer__split-menu-item:hover,
.admin-v2-shell-footer__split-menu-item:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  outline: none;
}

@media (max-width: 720px) {
  .admin-v2-shell-footer__action--ai span,
  .admin-v2-shell-footer__action--tools span,
  .admin-v2-shell-footer__action--primary span,
  .admin-v2-shell-footer__action--partner span {
    display: none;
  }

  .admin-v2-shell-footer__action--ai,
  .admin-v2-shell-footer__action--tools,
  .admin-v2-shell-footer__action--primary,
  .admin-v2-shell-footer__action.admin-v2-shell-footer__action--partner {
    padding: 0 var(--admin-v2-space-3);
  }

  .admin-v2-shell-footer__lang-switch-trigger {
    max-width: min(14rem, 60vw);
  }

  .admin-v2-shell-footer__lang-menu {
    min-width: min(
      18rem,
      calc(100vw - var(--admin-v2-app-gutter) - var(--admin-v2-app-gutter))
    );
  }

  .admin-v2-shell-footer__action--primary.admin-v2-shell-footer__split-toggle {
    padding: 0 var(--admin-v2-space-2);
  }
}

/* v2/admin-v2/collection-shell.css */
/**
 * Pagayo Design V2 — Collection shell (list/grid workspace).
 *
 * Toolbar, filters, body surface and row selection for entity List Pages.
 */

.admin-v2-collection-shell {
  min-height: 610px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.admin-v2-collection-toolbar {
  min-height: var(--admin-v2-collection-toolbar-height);
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-collection-header-bg);
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(280px, 1fr) auto;
  align-items: center;
  gap: var(--admin-v2-toolbar-gap);
  padding: var(--admin-v2-space-4);
}

/* Compact search/filter strip (footer Tools toggle) — no double underline. */
.admin-v2-workspace-toolbar {
  padding: var(--admin-v2-space-2) var(--admin-v2-app-gutter, var(--admin-v2-space-4));
  border-bottom: 1px solid color-mix(in srgb, var(--admin-v2-border-default) 62%, transparent);
  background: transparent;
}

/*
 * Tools open: sticky at the top of .admin-main (the only scrollport).
 * Admin V2 pins topbar/footer as flex siblings outside main — so sticky
 * `top` is relative to main, not the viewport. Using topbar-height here
 * incorrectly reserved a blank band equal to the topbar.
 */
.admin-v2-workspace-toolbar[data-toolbar-open="true"] {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  box-shadow: var(--admin-v2-chrome-header-shadow);
}

.admin-v2-workspace-toolbar .admin-v2-collection-toolbar,
.admin-v2-workspace-toolbar__row {
  min-height: 0;
  border-bottom: 0;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  grid-template-columns: none;
  gap: var(--admin-v2-space-2);
  padding: 0;
  width: 100%;
}

.admin-v2-collection-page-toolbar__inner {
  border-bottom: 0;
  min-height: auto;
  grid-template-columns: minmax(168px, 220px) minmax(0, 1fr);
}

.admin-v2-collection-page-toolbar {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  margin-bottom: var(--admin-v2-space-4);
}

.admin-v2-collection-toolbar__controls {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-width: 0;
}

.admin-v2-collection-toolbar__intro {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-collection-toolbar__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-toolbar__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-collection-toolbar__filter {
  flex: 1 1 0;
  min-width: 8rem;
  height: var(--admin-v2-control-height-lg);
  min-height: var(--admin-v2-control-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-4);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-collection-toolbar__filter:hover,
.admin-v2-collection-toolbar__filter[aria-pressed="true"] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-collection-toolbar__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--admin-v2-space-2);
}

.admin-v2-collection-toolbar__action {
  flex-shrink: 0;
  height: var(--admin-v2-control-height-lg);
  min-height: var(--admin-v2-control-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-collection-toolbar__action:hover:not(:disabled),
.admin-v2-collection-toolbar__action--active {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-collection-toolbar__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-v2-collection-toolbar__create {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  white-space: nowrap;
  height: var(--admin-v2-control-height-lg);
  min-height: var(--admin-v2-control-height-lg);
  max-height: var(--admin-v2-control-height-lg);
  padding: 0 var(--admin-v2-space-4);
  border-radius: var(--admin-v2-radius-interactive);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  line-height: 1;
  box-sizing: border-box;
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-collection-toolbar__view-toggle {
  flex-shrink: 0;
}

.admin-v2-collection-toolbar__filter:focus-visible,
.admin-v2-collection-toolbar__action:focus-visible,
.admin-v2-collection-toolbar__create:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-collection-shell--embedded-toolbar .products-card-header--controls {
  display: none;
}

.admin-v2-collection-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  border-bottom: 1px solid var(--admin-v2-border-default);
  padding: 0 var(--admin-v2-space-4);
  min-height: 52px;
  background: var(--admin-v2-color-surface);
}

.admin-v2-collection-context-bar__tabs {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-1);
  flex-wrap: wrap;
  min-width: 0;
}

.admin-v2-collection-tab {
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: var(--admin-control-compact);
  border-radius: var(--admin-v2-radius-interactive);
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.admin-v2-collection-tab:hover {
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-tab[aria-selected="true"] {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  font-weight: var(--admin-v2-font-weight-semibold);
}

.admin-v2-collection-tab__count {
  min-width: 22px;
  height: 22px;
  border-radius: var(--admin-v2-radius-label);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  font-size: var(--admin-v2-font-size-badge);
  line-height: 1;
  font-weight: var(--admin-v2-font-weight-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--admin-v2-space-2);
}

.admin-v2-collection-context-bar__hint {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
  text-align: right;
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-v2-collection-table-wrap {
  overflow: auto;
}

.admin-v2-collection-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--admin-v2-font-family);
}

.admin-v2-collection-table thead {
  background: var(--admin-v2-table-heading-bg);
}

/* Golden lane (Orders): fixed heading band + calm meta titles — every CollectionTable. */
.admin-v2-collection-table__heading {
  padding: var(--admin-v2-space-3) var(--admin-v2-table-row-padding-x);
  text-align: left;
  height: 48px;
  box-sizing: border-box;
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  letter-spacing: var(--admin-v2-letter-spacing);
  color: var(--admin-v2-color-text-muted);
  border-bottom: 1px solid var(--admin-v2-border-default);
  white-space: nowrap;
  background: var(--admin-v2-table-heading-bg);
}

.admin-v2-collection-table__heading--end,
.admin-v2-collection-table__cell--end {
  text-align: right;
}

.admin-v2-collection-table__row {
  background: var(--admin-v2-collection-item-bg);
  cursor: pointer;
}

.admin-v2-collection-table__row:hover {
  background: var(--admin-v2-collection-item-bg-hover);
}

.admin-v2-collection-table__row--active {
  background: var(--admin-v2-color-primary-soft);
}

/* Attention row — e.g. multi-scan visit highlights (Role Contract: collection table). */
.admin-v2-collection-table__row--attention {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 8%, transparent);
}

.admin-v2-collection-table__row--attention:hover {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 14%, transparent);
}

.admin-v2-collection-table__cell {
  padding: var(--admin-v2-table-row-padding-y) var(--admin-v2-table-row-padding-x);
  height: var(--admin-v2-collection-row-min-height);
  box-sizing: border-box;
  border-bottom: 1px solid var(--admin-v2-border-default);
  vertical-align: middle;
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-table__select {
  width: 44px;
  padding-left: var(--admin-v2-space-4);
  padding-right: var(--admin-v2-space-2);
  border-bottom: 1px solid var(--admin-v2-border-default);
  vertical-align: middle;
  box-sizing: border-box;
}

.admin-v2-collection-table thead .admin-v2-collection-table__select {
  height: 48px;
  background: var(--admin-v2-table-heading-bg);
}

.admin-v2-collection-table tbody .admin-v2-collection-table__select {
  height: var(--admin-v2-collection-row-min-height);
}

.admin-v2-collection-table__checkbox {
  /* Size/chrome: admin TailAdmin SSoT in forms-admin.css */
  cursor: pointer;
}

.admin-v2-collection-table__primary {
  font-size: var(--admin-v2-font-size-list-item-title);
  line-height: var(--admin-v2-line-height-list-item-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-table__secondary {
  margin-top: var(--admin-v2-space-1);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-collection-table__total {
  font-variant-numeric: tabular-nums;
  font-weight: var(--admin-v2-font-weight-semibold);
  white-space: nowrap;
}

.admin-v2-collection-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  background: transparent;
  padding: var(--admin-v2-space-3) var(--admin-v2-space-4);
  margin-bottom: var(--admin-v2-space-4);
}

.admin-v2-collection-selection-bar__count {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-selection-bar__select {
  height: var(--admin-v2-control-height-lg);
  min-width: 180px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-body {
  min-height: 0;
  overflow: auto;
}

.admin-v2-filter-chip {
  height: 38px;
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.admin-v2-filter-chip:hover,
.admin-v2-filter-chip[aria-pressed="true"],
.admin-v2-filter-chip.active {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-filter-chip:focus-visible,
.admin-v2-view-toggle button:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-view-toggle {
  height: var(--admin-v2-control-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-1);
  display: flex;
  gap: var(--admin-v2-space-1);
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-view-toggle button {
  min-height: 34px;
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  white-space: nowrap;
}

.admin-v2-view-toggle button:hover {
  color: var(--admin-v2-color-text);
}

.admin-v2-view-toggle button[aria-pressed="true"],
.admin-v2-view-toggle button.active {
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-collection-row--selected {
  background: var(--admin-v2-collection-item-bg-selected);
}

.admin-v2-collection-row--selected td:first-child,
.admin-v2-collection-row--selected::before {
  box-shadow: inset 3px 0 0 var(--admin-v2-color-primary);
}

/* Passive status badges — pill radius only */
.admin-v2-badge {
  min-height: var(--admin-v2-badge-height);
  border-radius: var(--admin-v2-radius-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-1);
  padding: var(--admin-v2-badge-padding-y) var(--admin-v2-badge-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-badge);
  line-height: var(--admin-v2-line-height-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  width: fit-content;
}

.admin-v2-badge--success {
  background: var(--admin-v2-label-bg-success);
  color: var(--admin-v2-label-text-success);
}

.admin-v2-badge--warning {
  background: var(--admin-v2-label-bg-warning);
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-badge--info {
  background: var(--admin-v2-label-bg-info);
  color: var(--admin-v2-label-text-info);
}

.admin-v2-badge--danger {
  background: var(--admin-v2-label-bg-danger);
  color: var(--admin-v2-label-text-danger);
}

.admin-v2-badge--neutral {
  background: var(--admin-v2-label-bg-neutral);
  color: var(--admin-v2-label-text-neutral);
}

.admin-v2-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-v2-collection-grid .products-list-row {
  height: 100%;
}

/**
 * Collection page surface — Orders is the golden lane. Since @pagayo/design 2.14.0 (opdracht 188) the
 * list sits in a white card with 24 around it (opdracht 188, stuk 5; see below).
 * Use `.admin-v2-collection-card` on every Collection Workspace list page.
 * Legacy aliases `.orders-collection-card` / `.products-collection-card` are
 * theming-only; scroll ownership is SSoT on `.admin-v2-collection-card`.
 */
.admin-v2-collection-card,
.orders-collection-card,
.products-collection-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Must stay visible: overflow:hidden would become the sticky containing
   * block and prevent .admin-v2-workspace-toolbar from sticking to .admin-main. */
  overflow: visible;
}

/* Lijstpagina's in de maat (opdracht 188, stuk 5; pagayo-ai-development/uiux/smaak.md):
 * het canvas blijft bijna-wit grijs, de lijst staat in een witte kaart met 1px rand,
 * 24 binnen en 24 tussenruimte, met de paginatitel (20/600) erboven. De ruimte rondom
 * hangt aan de rol "beheerpagina" (.admin-page): elke lijstpagina staat daarin. */
.admin-shell--v2 .admin-page:has(.admin-v2-collection-card) {
  padding: var(--admin-section-gap);
  background: transparent;
}

.admin-v2-page-title {
  margin: 0 0 var(--admin-section-gap);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-card > .admin-v2-collection-page-toolbar {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--admin-v2-color-surface);
}

.admin-v2-collection-card > .admin-v2-collection-page-toolbar .admin-v2-collection-page-toolbar__inner {
  min-height: 78px;
  gap: var(--admin-v2-space-4);
  border-bottom: 1px solid var(--admin-v2-border-default);
  padding: var(--admin-v2-space-4);
  background: var(--admin-v2-color-surface);
}

.admin-v2-collection-card .admin-v2-workspace-shell {
  flex: 0 0 auto;
  min-height: 0;
  background: transparent;
}

/* Outer CollectionWorkspace shell + inner WorkspaceListPanel shell — both flat. */
.admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell,
.admin-v2-collection-card .admin-v2-collection-shell.products-card,
.admin-v2-collection-card .products-card.products-list-card,
.admin-v2-collection-card .admin-v2-collection-shell {
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--admin-v2-color-surface);
  overflow: visible;
}

/* De kaart (opdracht 188, stuk 5): de buitenste CollectionWorkspace-shell. Hij wint van
 * de platte regel hierboven op specificiteit (4 klassen tegen 3); de binnenste blijft plat. */
.admin-shell--v2 .admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-md);
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
}

/* Instellingen (SettingsLayout, ADR 0003) zijn geen lijstpagina: die houden hun randloze,
 * volle breedte. Leden en Houders in het beheer zijn wél lijstpagina's en krijgen de kaart.
 * De balie-terminal (/balie, ADR 0004) heeft geen admin-shell en blijft vanzelf randloos. */
.admin-shell--v2 .admin-page.settings-page .admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell {
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Smal scherm: 16 in plaats van 24, zodat een lijst niet wordt afgesneden. */
@media (max-width: 720px) {
  .admin-shell--v2 .admin-page:has(.admin-v2-collection-card) {
    padding: var(--admin-v2-space-4);
  }

  .admin-shell--v2 .admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell {
    padding: var(--admin-v2-space-4);
  }

  .admin-v2-page-title {
    margin-bottom: var(--admin-v2-space-4);
  }
}

.admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell > .admin-v2-collection-body,
.admin-v2-collection-card .products-list-body {
  overflow: visible;
  background: var(--admin-v2-color-surface);
}

.admin-v2-collection-card .admin-v2-collection-context-bar {
  background: var(--admin-v2-color-surface);
}

/*
 * V2 collection lists: .admin-main is the only scrollport (shell flex column).
 * Page content grows naturally inside main — no nested list viewport.
 *
 * Critical: do NOT set `height: auto` here. With `flex-basis: auto` that lets
 * main grow to content height while `.admin-shell--v2` clips (`overflow: hidden`),
 * so long lists (Members with many pages of rows) lose their scrollport.
 * `flex: 1 1 0` keeps main sized to the remaining shell column.
 */
.admin-shell--v2 .admin-main:has(.admin-v2-collection-card) {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.admin-shell--v2 .admin-main:has(.admin-v2-collection-card) > .admin-page,
.admin-shell--v2 .orders-page:has(.admin-v2-collection-card),
.admin-shell--v2 .products-page:has(.admin-v2-collection-card) {
  flex: none;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.admin-shell--v2 .admin-v2-collection-card .admin-v2-workspace-shell {
  flex: none;
  min-height: 0;
  overflow: visible;
}

.admin-shell--v2 .admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell,
.admin-shell--v2 .admin-v2-collection-card .admin-v2-collection-shell,
.admin-shell--v2 .admin-v2-collection-card .admin-v2-collection-body,
.admin-shell--v2 .admin-v2-collection-card .products-list-body,
.admin-shell--v2 .admin-v2-collection-card .admin-v2-collection-table-wrap {
  min-height: 0;
  height: auto;
  overflow: visible;
}

/* v2/admin-v2/entity-sheet.css */
/**
 * Pagayo Design V2 — Entity sheet (full-page editor overlay).
 *
 * Full-viewport work layer above admin shell chrome. Same slide-up entrance
 * as before; open state: body.admin-v2-sheet-open reveals backdrop and sheet.
 */

.admin-v2-entity-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 260);
  pointer-events: none;
}

.admin-v2-entity-sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--admin-v2-sheet-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.admin-v2-entity-sheet {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  border-radius: 0;
  background: var(--admin-v2-color-surface);
  box-shadow: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  pointer-events: auto;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.admin-v2-sheet-open .admin-v2-entity-sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.admin-v2-sheet-open .admin-v2-entity-sheet {
  transform: translateY(0);
}

/* Website Editor — docked end presentation (preview stays visible beside sheet).
   Role Contract: opt-in only; Products/orders keep full-bleed default. */
.admin-v2-entity-sheet-layer--docked-end {
  pointer-events: none;
}

.admin-v2-entity-sheet-layer--docked-end .admin-v2-entity-sheet-backdrop {
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

body.admin-v2-sheet-open .admin-v2-entity-sheet-layer--docked-end .admin-v2-entity-sheet-backdrop {
  opacity: 0;
  pointer-events: none;
}

.admin-v2-entity-sheet--docked-end {
  inset-block: 0;
  inset-inline: auto 0;
  width: min(26.25rem, 100%);
  max-width: 100%;
  border-inline-start: 1px solid var(--admin-v2-color-border, rgba(15, 23, 42, 0.12));
  box-shadow: var(--admin-v2-shadow-floating);
  transform: translateX(calc(100% * var(--dir-sign, 1)));
}

body.admin-v2-sheet-open .admin-v2-entity-sheet--docked-end {
  transform: translateX(0);
}

@media (max-width: 900px) {
  .admin-v2-entity-sheet--docked-end {
    inset: 0;
    width: 100%;
    border-inline-start: 0;
    box-shadow: none;
    transform: translateY(100%);
  }

  body.admin-v2-sheet-open .admin-v2-entity-sheet--docked-end {
    transform: translateY(0);
  }

  .admin-v2-entity-sheet-layer--docked-end .admin-v2-entity-sheet-backdrop {
    background: var(--admin-v2-sheet-backdrop);
  }

  body.admin-v2-sheet-open .admin-v2-entity-sheet-layer--docked-end .admin-v2-entity-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Workspace confirmations are portaled to <body>. They must sit above the
   full-page entity sheet layer. Prefer website-editor dialog token when present
   (entity sheet is raised to 1400 there); otherwise admin z-modal + 1. */
.editor-workspace-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: var(--website-editor-z-dialog, calc(var(--z-modal, 260) + 1));
  display: grid;
  place-items: center;
  padding: var(--admin-v2-space-4);
}

.editor-workspace-dialog-layer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--admin-v2-backdrop);
  cursor: pointer;
}

.editor-workspace-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.editor-workspace-dialog__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-v2-space-2);
}

.editor-workspace-dialog__actions .editor-workspace-dialog__button {
  width: 100%;
  min-height: var(--admin-v2-button-height-md);
}

.admin-v2-entity-sheet__head {
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css (shared with .admin-v2-topbar). */
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-space-5);
}

/* Shell chrome: identity + relationship nav + close — same height as footer. */
.admin-v2-entity-sheet__head--with-tabs {
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-space-5);
}

.admin-v2-entity-sheet__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  width: 100%;
  min-width: 0;
}

.admin-v2-entity-sheet__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

/* Product/entity name stays a real title even when relationship tabs share the head. */
.admin-v2-entity-sheet__head--with-tabs .admin-v2-entity-sheet__title {
  flex: 0 1 auto;
  max-width: min(42%, 22rem);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trailing chrome cluster (e.g. view-on-storefront) immediately before close. */
.admin-v2-entity-sheet__head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  flex: 0 0 auto;
  min-width: 0;
}

.admin-v2-entity-sheet__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-1);
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-semibold);
  white-space: nowrap;
  text-decoration: none;
}

.admin-v2-entity-sheet__close svg {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex-shrink: 0;
}

.admin-v2-entity-sheet__close-label {
  display: inline-block;
}

.admin-v2-entity-sheet__close:hover {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
  border-color: var(--admin-v2-color-text-muted);
}

.admin-v2-entity-sheet__close:focus-visible,
.admin-v2-relationship:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-entity-sheet__head-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.admin-v2-entity-sheet__head-tabs .admin-v2-relationship-strip {
  padding-bottom: 0;
  justify-content: center;
  max-width: 100%;
}

/* Legacy class kept for any leftover markup; tabs now live in the head row. */
.admin-v2-entity-sheet__relationship-tabs {
  padding: 0 var(--admin-v2-space-5) var(--admin-v2-space-3);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

.admin-v2-entity-sheet__body {
  overflow: auto;
  padding: var(--admin-v2-space-5);
  background: var(--admin-v2-color-bg);
  display: grid;
  /* Default three-column sheet: 1/5 · 2/5 · 2/5 */
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 2fr);
  align-content: start;
  /* The light canvas and white column wells establish the three regions
     without introducing card borders or shadows. */
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
}

/* Legacy workspace wrappers must not break the sheet body grid. */
.admin-v2-entity-sheet__body .products-workspace-detail-card,
.admin-v2-entity-sheet__body .products-detail-form,
.admin-v2-entity-sheet__body .orders-workspace-detail-card.products-card {
  display: contents;
}

.admin-v2-entity-sheet__body > .admin-v2-relationship-strip,
.admin-v2-entity-sheet__body > .admin-alert {
  grid-column: 1 / -1;
}

/*
 * Full-bleed under display:contents wrappers.
 * `body > .soft-panel` does not match SoftPanels nested in products-detail-form /
 * products-workspace-detail-card — those still participate in the body grid as items
 * and otherwise land in the first (1/5) track.
 */
.admin-v2-entity-sheet__body .products-workspace-detail-card > .admin-muted,
.admin-v2-entity-sheet__body .products-workspace-detail-card > .admin-alert,
.admin-v2-entity-sheet__body .products-workspace-detail-card > .admin-v2-soft-panel,
.admin-v2-entity-sheet__body .products-detail-form > .admin-muted,
.admin-v2-entity-sheet__body .products-detail-form > .admin-alert,
.admin-v2-entity-sheet__body .products-detail-form > .admin-v2-soft-panel {
  grid-column: 1 / -1;
}

.admin-v2-entity-sheet__body > .admin-v2-relationship-strip {
  margin: calc(-1 * var(--admin-v2-space-2)) 0 0;
  padding-bottom: var(--admin-v2-space-3);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

/* Exactly two columns: keep left narrow (1/5) and give the rest to center (4/5). */
.admin-v2-entity-sheet__body:has(> .admin-v2-entity-sheet-column:nth-child(2):last-child) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
}

/* Single column fills the sheet. */
.admin-v2-entity-sheet__body:has(> .admin-v2-entity-sheet-column:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.admin-v2-soft-panel .products-card.order-create-column,
.admin-v2-soft-panel .products-card.orders-workspace-detail-card {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

.admin-v2-entity-sheet__body--items {
  grid-template-columns: minmax(0, 1fr);
}

.admin-v2-entity-sheet__foot,
.admin-v2-entity-sheet__actions {
  border-top: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css (shared with .admin-v2-shell-footer). */
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-3);
}

.admin-v2-entity-sheet__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin-left: auto;
}

.admin-v2-entity-sheet__footer-hint {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

/*
 * One interactive control rhythm in the sheet:
 * same height, padding, type, radius — hierarchy via color/placement only.
 * Selects/dropdowns keep their own input sizing.
 */
.admin-v2-entity-sheet .btn,
.admin-v2-entity-sheet .btn-primary,
.admin-v2-entity-sheet .btn-secondary,
.admin-v2-entity-sheet .btn--primary,
.admin-v2-entity-sheet .btn--secondary,
.admin-v2-entity-sheet .btn--ghost,
.admin-v2-entity-sheet .products-workspace-toolbar__action,
.admin-v2-entity-sheet .admin-v2-relationship {
  box-sizing: border-box;
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  max-height: var(--admin-v2-interactive-control-height);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  border-radius: var(--admin-v2-radius-interactive);
  font-family: var(--admin-v2-font-family);
  /* !important: beat admin global `font-size: … !important` (admin-font-size-base). */
  font-size: var(--admin-v2-interactive-control-font-size) !important;
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/*
 * Universal borderless icon action (trash / clear) — Orders, Products variants, etc.
 * No chrome: no border, no pill, no height box. Stays danger-red on hover.
 */
.admin-v2-icon-action,
.products-workspace-variants-list__icon-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--admin-v2-color-danger-text);
  cursor: pointer;
  line-height: 1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
}

.admin-v2-entity-sheet .admin-v2-icon-action,
.admin-v2-entity-sheet .products-workspace-variants-list__icon-action {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  font-size: inherit !important;
}

.admin-v2-icon-action:hover:not(:disabled),
.products-workspace-variants-list__icon-action:hover:not(:disabled),
.admin-v2-entity-sheet .admin-v2-icon-action:hover:not(:disabled),
.admin-v2-entity-sheet .products-workspace-variants-list__icon-action:hover:not(:disabled) {
  color: var(--admin-v2-state-danger-text);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.admin-v2-icon-action:disabled,
.products-workspace-variants-list__icon-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-v2-icon-action svg,
.products-workspace-variants-list__icon-action svg {
  display: block;
  width: var(--admin-toolbar-inline-icon-size, 16px);
  height: var(--admin-toolbar-inline-icon-size, 16px);
}

/* Save / create primary actions: floppy icon before label (all entity sheets). */
.admin-v2-entity-sheet [data-workspace-action-intent="save"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-1);
}

.admin-v2-entity-sheet [data-workspace-action-intent="save"]::before {
  content: "";
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Inputs share field control height. Textareas stay multi-line.
 * Search fields keep their own wrapper chrome (icon inside).
 * Color inputs use EditorColorField / square swatch chrome — never text-field padding.
 * Native selects are NOT in this block — see select affordance block below (Role Contract). */
.admin-v2-entity-sheet input.form-input:not(.products-workspace-search-field__input):not(.products-workspace-field--color):not([type='color']),
.admin-v2-entity-sheet input.form-input.products-workspace-field:not(.products-workspace-field--color):not(.products-workspace-field--range):not(.products-workspace-search-field__input) {
  box-sizing: border-box;
  width: 100%;
  height: var(--admin-v2-field-control-height) !important;
  min-height: var(--admin-v2-field-control-height) !important;
  max-height: var(--admin-v2-field-control-height) !important;
  padding: 0 var(--admin-v2-field-control-padding-x) !important;
  border: 1.5px solid var(--admin-v2-border-default) !important;
  border-radius: var(--admin-v2-field-control-radius);
  background-color: var(--admin-v2-input-bg) !important;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-field-control-font-size) !important;
  line-height: var(--admin-v2-field-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  box-shadow: none;
}

/*
 * Native select affordance (SSoT) — must read as dropdown, not text input.
 * Chevron via background-image only (never `background` shorthand).
 * Golden border tint matches forms/_base.css + DESIGN.md select rule.
 */
.admin-v2-entity-sheet .form-select,
.admin-v2-entity-sheet .form-select.products-workspace-field {
  box-sizing: border-box;
  width: 100%;
  height: var(--admin-v2-field-control-height) !important;
  min-height: var(--admin-v2-field-control-height) !important;
  max-height: var(--admin-v2-field-control-height) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 calc(var(--admin-v2-field-control-padding-x) + var(--admin-v2-space-6)) 0 var(--admin-v2-field-control-padding-x) !important;
  border: 1.5px solid color-mix(in srgb, var(--admin-v2-color-brand-gold) 35%, transparent) !important;
  border-radius: var(--admin-v2-field-control-radius);
  background-color: var(--admin-v2-input-bg) !important;
  background-image: var(--admin-v2-select-chevron-muted) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--admin-v2-field-control-padding-x) center !important;
  background-size: 16px 16px !important;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-field-control-font-size) !important;
  line-height: var(--admin-v2-field-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  box-shadow: none;
  cursor: pointer;
}

.admin-v2-entity-sheet .form-select:hover:not(:disabled):not(:focus),
.admin-v2-entity-sheet .form-select.products-workspace-field:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--admin-v2-color-brand-gold) 55%, transparent) !important;
  background-color: var(--admin-v2-input-bg) !important;
}

.admin-v2-entity-sheet .form-select:focus,
.admin-v2-entity-sheet .form-select.products-workspace-field:focus {
  border-color: var(--admin-v2-color-primary) !important;
  background-color: var(--admin-v2-input-bg) !important;
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft);
}

.admin-v2-entity-sheet .form-select:disabled,
.admin-v2-entity-sheet .form-select.products-workspace-field:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Square color swatch — Admin V2 entity sheet (matches EditorColorField gold path). */
.admin-v2-entity-sheet .editor-color-swatch {
  width: var(--admin-v2-field-control-height, var(--pg-editor-control-height-lg, 36px));
  max-width: var(--admin-v2-field-control-height, var(--pg-editor-control-height-lg, 36px));
  height: var(--admin-v2-field-control-height, var(--pg-editor-control-height-lg, 36px));
  min-height: var(--admin-v2-field-control-height, var(--pg-editor-control-height-lg, 36px));
  aspect-ratio: 1;
  border: 1.5px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-field-control-radius, var(--pg-editor-radius-lg));
  overflow: hidden;
}

.admin-v2-entity-sheet .editor-color-swatch__input,
.admin-v2-entity-sheet .editor-color-swatch input[type='color'],
.admin-v2-entity-sheet input.form-input[type='color'],
.admin-v2-entity-sheet input.form-input.products-workspace-field--color {
  box-sizing: border-box;
  width: var(--admin-v2-field-control-height, 36px) !important;
  max-width: var(--admin-v2-field-control-height, 36px) !important;
  height: var(--admin-v2-field-control-height, 36px) !important;
  min-height: var(--admin-v2-field-control-height, 36px) !important;
  max-height: var(--admin-v2-field-control-height, 36px) !important;
  padding: 0 !important;
  border: 1.5px solid var(--admin-v2-border-default) !important;
  border-radius: var(--admin-v2-field-control-radius, var(--pg-editor-radius-lg));
  background-color: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}

.admin-v2-entity-sheet .editor-color-swatch__input,
.admin-v2-entity-sheet .editor-color-swatch input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-v2-entity-sheet input.form-input[type='color']::-webkit-color-swatch-wrapper,
.admin-v2-entity-sheet input.form-input.products-workspace-field--color::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
  border: none;
  width: 100%;
  height: 100%;
}

.admin-v2-entity-sheet input.form-input[type='color']::-webkit-color-swatch,
.admin-v2-entity-sheet input.form-input.products-workspace-field--color::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--admin-v2-field-control-radius, 8px) - 1px);
  width: 100%;
  height: 100%;
}

.admin-v2-entity-sheet input.form-input[type='color']::-moz-color-swatch,
.admin-v2-entity-sheet input.form-input.products-workspace-field--color::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--admin-v2-field-control-radius, 8px) - 1px);
  width: 100%;
  height: 100%;
}

/*
 * SoftPanel fields: override workspace content-sizing (width:auto / field-sizing:content)
 * so inputs/selects fill the card like Admin V2 form elements.
 */
.admin-v2-entity-sheet .admin-v2-soft-panel input.form-input.products-workspace-field:not(.products-workspace-field--range):not(.products-workspace-field--color):not(.products-workspace-search-field__input),
.admin-v2-entity-sheet .admin-v2-soft-panel select.form-select.products-workspace-field,
.admin-v2-entity-sheet .admin-v2-soft-panel input.form-input:not(.products-workspace-field--range):not(.products-workspace-field--color):not(.products-workspace-search-field__input),
.admin-v2-entity-sheet .admin-v2-soft-panel .form-select {
  field-sizing: fixed;
  width: 100% !important;
  max-width: 100%;
  align-self: stretch;
}

.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-search-field,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-search-panel,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-search-input-wrapper {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet .form-input:hover:not(:disabled):not(:focus):not(.products-workspace-search-field__input):not(.products-workspace-field--color):not([type='color']),
.admin-v2-entity-sheet .form-input.products-workspace-field:hover:not(:disabled):not(:focus):not(.products-workspace-search-field__input):not(.products-workspace-field--color) {
  border-color: var(--admin-v2-border-strong) !important;
}

.admin-v2-entity-sheet .form-input:focus:not(.products-workspace-search-field__input):not(.products-workspace-field--color):not([type='color']),
.admin-v2-entity-sheet .form-input.products-workspace-field:focus:not(.products-workspace-search-field__input):not(.products-workspace-field--color) {
  border-color: var(--admin-v2-color-primary) !important;
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft);
}

.admin-v2-entity-sheet .editor-color-swatch:focus-within {
  border-color: var(--admin-v2-color-primary);
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft);
}

.admin-v2-entity-sheet .products-editor-label,
.admin-v2-entity-sheet .editor-form-label,
.admin-v2-entity-sheet .editor-form-field__label,
.admin-v2-entity-sheet .website-editor-field__label {
  color: var(--admin-v2-color-text);
  letter-spacing: 0;
  font-size: var(--admin-field-label-font-size, var(--admin-font-size-label, calc(var(--admin-font-size-base, 14px) + 2px)));
  font-weight: var(--admin-field-label-font-weight, var(--admin-v2-font-weight-semibold, var(--font-semibold)));
  margin-bottom: var(--admin-v2-label-gap, 6px);
}

.admin-v2-entity-sheet .products-editor-field > strong {
  font-size: var(--admin-font-size-base, 14px);
  font-weight: var(--admin-v2-font-weight-normal, var(--font-normal, 400));
  color: var(--admin-v2-color-text);
}

/* SoftPanel fields fill the card; only action chrome stays auto-width. */
.admin-v2-entity-sheet .admin-v2-soft-panel .btn,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-toolbar__action,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-inline-actions {
  justify-self: start;
  width: auto;
  max-width: 100%;
}

.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-form-block,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-form-grid,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-config-grid,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-detail-form,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-editor-field,
.admin-v2-entity-sheet .admin-v2-soft-panel .editor-rich-text,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-description-editor,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-checkbox-column,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-checkbox-chip {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-self: stretch;
}

/* Description SoftPanel: card is the TipTap surface; toolbar bleeds to card edges. */
.admin-v2-entity-sheet-column:has(.products-description-editor) {
  min-width: 0;
}

.admin-v2-entity-sheet .admin-v2-soft-panel:has(.products-description-editor) {
  overflow: visible;
  padding-bottom: 0;
  height: auto;
}

.admin-v2-entity-sheet .admin-v2-soft-panel:has(.products-description-editor) > .products-editor-field {
  margin-top: 0;
  gap: 0;
}

.admin-v2-entity-sheet .products-description-editor {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  height: auto;
}

.admin-v2-entity-sheet .products-description-editor:focus-within {
  border-color: transparent;
  box-shadow: none;
}

/* Full-bleed toolbar under SoftPanel title (negative margin = card padding).
 * Wrap instead of clipping — undo/redo + AI sparkles must stay visible. */
.admin-v2-entity-sheet .products-description-editor .editor-rich-text__toolbar,
.admin-v2-entity-sheet .products-description-editor .rich-editor-toolbar {
  --rich-editor-toolbar-btn-size: 21px;
  --rich-editor-toolbar-icon-size: 14px;
  box-sizing: border-box;
  width: calc(100% + (2 * var(--admin-v2-card-padding-x)));
  max-width: none;
  min-width: 0;
  margin-block-start: var(--admin-v2-space-3);
  margin-inline: calc(-1 * var(--admin-v2-card-padding-x));
  padding-inline: var(--admin-v2-card-padding-x);
  padding-block: 4px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  overflow: visible;
  gap: 2px;
  border-top: 0;
}

.admin-v2-entity-sheet .products-description-editor .editor-rich-text__toolbar-trailing,
.admin-v2-entity-sheet .products-description-editor .rich-editor-toolbar-trailing {
  margin-left: auto;
  flex-shrink: 0;
}

.admin-v2-entity-sheet .products-description-editor .editor-rich-text__toolbar-separator,
.admin-v2-entity-sheet .products-description-editor .rich-editor-toolbar-separator {
  margin: 0 1px;
}

.admin-v2-entity-sheet .admin-v2-soft-panel:has(.products-description-editor),
.admin-v2-entity-sheet .admin-v2-soft-panel:has(.products-description-editor) .products-editor-field,
.admin-v2-entity-sheet .products-description-editor,
.admin-v2-entity-sheet .products-description-editor .editor-rich-text__body,
.admin-v2-entity-sheet .products-description-editor .rich-editor-content-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet .products-description-editor .products-description-editor__content,
.admin-v2-entity-sheet .products-description-editor .ProseMirror {
  padding-inline: 0;
  padding-block: 12px;
  min-height: 66px;
}

/* Primary / Save — Products golden lane (admin-v2 tokens).
 * Webshop only ships `.btn--primary`; admin also uses legacy `.btn-primary`.
 * Without this, Save gets sheet control sizing but no filled primary chrome.
 */
.admin-v2-entity-sheet .btn-primary,
.admin-v2-entity-sheet .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-button-gap, var(--admin-v2-space-2));
  background: var(--admin-v2-button-primary-bg, var(--admin-v2-color-primary));
  color: var(--admin-v2-button-primary-text);
  border: 1px solid var(--admin-v2-button-primary-bg, var(--admin-v2-color-primary));
  box-shadow: none;
}

.admin-v2-entity-sheet .btn-primary:hover:not(:disabled),
.admin-v2-entity-sheet .btn--primary:hover:not(:disabled) {
  background: var(--admin-v2-button-primary-bg-hover, var(--admin-v2-color-primary-hover));
  border-color: var(--admin-v2-button-primary-bg-hover, var(--admin-v2-color-primary-hover));
  color: var(--admin-v2-button-primary-text);
  box-shadow: none;
  transform: none;
}

.admin-v2-entity-sheet .btn-primary:active:not(:disabled),
.admin-v2-entity-sheet .btn--primary:active:not(:disabled) {
  background: var(--admin-v2-button-primary-bg-hover, var(--admin-v2-color-primary-hover));
  border-color: var(--admin-v2-button-primary-bg-hover, var(--admin-v2-color-primary-hover));
  transform: none;
}

.admin-v2-entity-sheet .btn-primary:disabled,
.admin-v2-entity-sheet .btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary / View actions = same chrome as inactive relationship tabs. */
.admin-v2-entity-sheet .btn-secondary,
.admin-v2-entity-sheet .btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-button-gap, var(--admin-v2-space-2));
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  border: 1px solid var(--admin-v2-border-default);
}

.admin-v2-entity-sheet .btn-secondary:hover:not(:disabled),
.admin-v2-entity-sheet .btn--secondary:hover:not(:disabled) {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, transparent);
}

.admin-v2-entity-sheet .admin-v2-relationship svg,
.admin-v2-entity-sheet .btn svg,
.admin-v2-entity-sheet .products-workspace-toolbar__action svg {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex: 0 0 auto;
}

/* Secondary destructive: same control chrome as Duplicate/Delete, danger color. */
.admin-v2-entity-sheet .btn-secondary.btn--danger,
.admin-v2-entity-sheet .btn--secondary.btn--danger {
  color: var(--admin-v2-color-danger-text);
  border-color: color-mix(in srgb, var(--admin-v2-color-danger-text) 28%, var(--admin-v2-border-default));
  background: var(--admin-v2-color-surface);
}

.admin-v2-entity-sheet .btn-secondary.btn--danger:hover:not(:disabled),
.admin-v2-entity-sheet .btn--secondary.btn--danger:hover:not(:disabled) {
  color: var(--admin-v2-color-danger-text);
  background: color-mix(in srgb, var(--admin-v2-color-danger-text) 8%, var(--admin-v2-color-surface));
  border-color: color-mix(in srgb, var(--admin-v2-color-danger-text) 40%, var(--admin-v2-border-default));
}

/* Ghost destructive footer: red text link — not sized control chrome. */
.admin-v2-entity-sheet__footer-actions .btn--ghost.btn--danger {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  box-shadow: none;
  min-width: 0;
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
}

.admin-v2-entity-sheet__footer-actions .btn--ghost.btn--danger:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  box-shadow: none;
  transform: none;
  text-decoration: underline;
}

.admin-v2-entity-sheet__footer-actions .btn--ghost.btn--danger:active:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  transform: none;
}

.admin-v2-workspace-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.admin-v2-relationship-strip {
  display: flex;
  gap: var(--admin-v2-space-2);
  overflow-x: auto;
  padding-bottom: var(--admin-v2-space-1);
}

.admin-v2-relationship {
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  white-space: nowrap;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
}

.admin-v2-relationship:hover,
.admin-v2-relationship[aria-current="true"],
.admin-v2-relationship.active {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, transparent);
}

/* SoftPanel section card: white surface, stroke, soft shadow, card padding. */
.admin-v2-soft-panel {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  display: grid;
  gap: var(--admin-v2-space-4);
  min-width: 0;
  max-width: 100%;
}

.admin-v2-soft-panel--disabled {
  background: var(--admin-v2-color-surface-muted);
  border-color: var(--admin-v2-border-subtle);
  box-shadow: none;
}

.admin-v2-soft-panel--disabled .admin-v2-soft-panel__title,
.admin-v2-soft-panel--disabled .admin-v2-soft-panel__title-text {
  color: var(--admin-v2-color-text-muted);
}

/*
 * SoftPanel form stacks: next label farther from the control above than from
 * its own control. SoftPanel gap alone is only 16px between direct children —
 * bump consecutive fields to the form-field gap (24px).
 */
.admin-v2-soft-panel > .order-detail-info-grid,
.admin-v2-soft-panel > .order-detail-info-col,
.admin-v2-soft-panel > .products-workspace-form-block,
.admin-v2-soft-panel > .products-workspace-form-grid,
.admin-v2-soft-panel > .products-workspace-section__body {
  row-gap: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
}

.admin-v2-soft-panel > .products-editor-field + .products-editor-field {
  margin-top: calc(
    var(--admin-form-field-gap, var(--admin-v2-space-6, 24px)) - var(--admin-v2-space-4, 16px)
  );
}

/* Secondary actions under SoftPanel form content (hint + destructive/secondary). */
.admin-v2-soft-panel__actions {
  display: grid;
  gap: var(--admin-v2-space-2);
  align-content: start;
  justify-items: start;
  margin-top: var(--admin-v2-space-1);
  padding-top: var(--admin-v2-space-4);
  border-top: 1px solid var(--admin-v2-border-default);
}

.admin-v2-soft-panel__actions > .products-editor-hint {
  margin: 0;
}

.admin-v2-soft-panel .order-info-field + .order-info-field {
  padding-top: var(--admin-v2-space-1);
}

.admin-v2-soft-panel .order-info-field .admin-v2-badge {
  justify-self: start;
}

@media (max-width: 960px) {
  .admin-v2-entity-sheet__body {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
 * Editor-schil (opdracht 175): kop met soortregel en statuspil, voet in drie
 * zones, de pagina zonder tabs in twee kolommen, kaarten, gewijzigde velden en
 * de dokplek. Eén hangpunt voor Producten, Boekingen en Abonnementen.
 * ========================================================================== */

.admin-v2-entity-sheet__identity {
  display: grid;
  gap: var(--admin-v2-space-1, 4px);
  min-width: 0;
  flex: 1 1 auto;
}

.admin-v2-entity-sheet__title-row {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
  min-width: 0;
}

.admin-v2-entity-sheet__identity .admin-v2-entity-sheet__title {
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.admin-v2-entity-sheet__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-v2-entity-sheet__status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px var(--admin-v2-space-2);
  border-radius: var(--admin-v2-radius-pill);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text-muted);
  background: var(--admin-v2-color-surface-muted);
}

.admin-v2-entity-sheet__status--live {
  color: var(--admin-v2-color-success-text);
  background: color-mix(in srgb, var(--admin-v2-color-success-text) 12%, var(--admin-v2-color-surface));
}

.admin-v2-entity-sheet__status--scheduled {
  color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary-soft);
}

/* Voet in drie zones: taal links, verwijderen en dupliceren midden, annuleren en opslaan rechts. */
.admin-v2-entity-sheet__foot--zones {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.admin-v2-entity-sheet__foot--zones > :first-child {
  justify-self: start;
}

.admin-v2-entity-sheet__foot--zones > .admin-v2-entity-sheet__footer-hint {
  display: none;
}

.admin-v2-entity-sheet__footer-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-3);
}

.admin-v2-entity-sheet__foot--zones > .admin-v2-entity-sheet__footer-actions {
  justify-self: end;
  margin-left: 0;
}

/* Stil rood: verwijderen is een tekstlink, geen knop met chrome. */
.admin-v2-entity-sheet__footer-center .btn--ghost.btn--danger {
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  box-shadow: none;
  min-width: 0;
}

.admin-v2-entity-sheet__footer-center .btn--ghost.btn--danger:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  text-decoration: underline;
}

@media (max-width: 960px) {
  .admin-v2-entity-sheet__foot--zones {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-v2-entity-sheet__footer-center,
  .admin-v2-entity-sheet__foot--zones > .admin-v2-entity-sheet__footer-actions {
    justify-self: stretch;
    justify-content: flex-end;
  }
}

/* De pagina: twee kolommen, links breed (ruggengraat en soortblok), rechts smal. */
.admin-v2-editor-page {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--admin-v2-space-6);
  min-width: 0;
}

.admin-v2-editor-page__main,
.admin-v2-editor-page__aside {
  display: grid;
  gap: var(--admin-v2-space-6);
  min-width: 0;
}

@media (max-width: 1100px) {
  .admin-v2-editor-page {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dokplek: dokt er een paneel, dan schuift de rechterkolom onder de linker. */
.admin-v2-entity-sheet__body[data-docked] {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
}

.admin-v2-entity-sheet__body[data-docked] .admin-v2-editor-page {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr);
}

.admin-v2-entity-sheet__dock {
  grid-column: 2;
  grid-row: 1 / span 20;
  position: sticky;
  top: 0;
  min-width: 0;
}

/* Kaart: wit, dunne lijn, 24 binnenruimte; scheiden met ruimte, geen grijs vlak. */
.admin-v2-editor-card {
  display: grid;
  gap: var(--admin-v2-space-4);
  min-width: 0;
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  scroll-margin-top: var(--admin-v2-space-6);
}

.admin-v2-editor-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  min-width: 0;
}

.admin-v2-editor-card__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-editor-card__description {
  margin: calc(-1 * var(--admin-v2-space-2)) 0 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-editor-card__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--admin-v2-space-4);
  min-width: 0;
}

/* De schakelaar in de kop draagt zijn naam voor de schermlezer; zichtbaar is de kaarttitel. */
.admin-v2-editor-card__switch .products-editor-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Velden in een kaart: geen kaart in een kaart. Het paneel wordt een veldgroep, zijn titel het label. */
.admin-v2-editor-card .admin-v2-soft-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: var(--admin-v2-space-2);
}

.admin-v2-editor-card .admin-v2-soft-panel__title {
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text);
}

/* In een kaart is de paneeltitel een veldlabel (14/500), onder de kaarttitel (16/600).
 * Moet de !important-regel van sheet-progression.css verslaan (zelfde vorm, één niveau dieper). */
body[data-page-type="admin"] .admin-v2-editor-card .admin-v2-soft-panel__title,
body[data-page-type="admin"] .admin-v2-editor-card .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text,
body[data-page-type^="admin-"] .admin-v2-editor-card .admin-v2-soft-panel__title,
body[data-page-type^="admin-"] .admin-v2-editor-card .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text,
.admin-layout .admin-v2-editor-card .admin-v2-soft-panel__title,
.admin-layout .admin-v2-editor-card .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text {
  font-size: var(--admin-v2-font-size-control) !important;
  line-height: var(--admin-v2-line-height-control, 20px);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-editor-card .admin-v2-soft-panel--divided {
  padding-top: var(--admin-v2-space-4);
  border-top: 1px solid var(--admin-v2-border-default);
}

/* Een geneste kolomindeling (voorraad, varianten) volgt de kaartbreedte. */
.admin-v2-editor-card .admin-v2-entity-sheet-columns {
  grid-column: auto;
}

/* Openstaande wijziging: het veld is gemarkeerd tot Opslaan of Annuleren. */
.admin-v2-editor-page [data-changed="true"] > .admin-v2-soft-panel__title::after,
.admin-v2-editor-page .admin-v2-soft-panel[data-changed="true"] > .admin-v2-soft-panel__title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: var(--admin-v2-space-2);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-primary);
  vertical-align: middle;
}

.admin-v2-editor-page input[data-changed="true"],
.admin-v2-editor-page select[data-changed="true"],
.admin-v2-editor-page textarea[data-changed="true"],
.admin-v2-editor-page .admin-v2-soft-panel[data-changed="true"] :is(.form-input, .form-select, .form-textarea) {
  border-color: var(--admin-v2-color-primary);
}

/* Een voorstel van de assistent is anders gemarkeerd dan wat de winkelier typte. */
.admin-v2-editor-page .admin-v2-soft-panel[data-change-origin="assistent"] > .admin-v2-soft-panel__title::after {
  background: transparent;
  border: 1px solid var(--admin-v2-color-primary);
}

.admin-v2-editor-page .admin-v2-soft-panel[data-change-origin="assistent"] :is(.form-input, .form-select, .form-textarea),
.admin-v2-editor-page :is(input, select, textarea)[data-change-origin="assistent"] {
  border-style: dashed;
}

/* v2/admin-v2/shipping-projection.css */
/**
 * Shipping is a read-only projection of a shipment fulfillment.
 *
 * Its job is recognition and orientation: current state, order, recipient and
 * tracking. Operational changes remain in the related Fulfillment workspace.
 */

.shipping-workspace-summary {
  width: min(100%, 56rem);
  margin-inline: auto;
}

.shipping-workspace-summary__identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  padding-bottom: var(--admin-v2-space-4);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

.shipping-workspace-summary__eyebrow,
.shipping-workspace-summary__reference,
.shipping-workspace-summary__fact dt,
.shipping-workspace-summary__fact dd {
  margin: 0;
  font-family: var(--admin-v2-font-family);
}

.shipping-workspace-summary__eyebrow,
.shipping-workspace-summary__fact dt {
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text-muted);
}

.shipping-workspace-summary__reference {
  margin-top: var(--admin-v2-space-1);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  overflow-wrap: anywhere;
}

.shipping-workspace-summary__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-space-4);
  margin: 0;
}

.shipping-workspace-summary__fact {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.shipping-workspace-summary__fact dd {
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  overflow-wrap: anywhere;
}

.shipping-workspace-summary__value--muted {
  font-weight: var(--admin-v2-font-weight-normal);
  color: var(--admin-v2-color-text-muted);
}

@media (max-width: 720px) {
  .shipping-workspace-summary__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* v2/admin-v2/state-language.css */
/**
 * Pagayo Design V2 — State language (save lifecycle, empty, validation).
 *
 * Positive progression surfaces for entity editors and collection states.
 * Passive labels inside states use --admin-v2-radius-label (pill).
 */

.admin-v2-state {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: var(--admin-v2-badge-height);
  padding: var(--admin-v2-space-1) var(--admin-v2-space-3);
  border-radius: var(--admin-v2-radius-interactive);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-state--loading {
  background: var(--admin-v2-state-loading-bg);
  color: var(--admin-v2-state-loading-text);
}

.admin-v2-state--saving {
  background: var(--admin-v2-state-saving-bg);
  color: var(--admin-v2-state-saving-text);
}

.admin-v2-state--dirty {
  background: var(--admin-v2-state-dirty-bg);
  color: var(--admin-v2-state-dirty-text);
}

.admin-v2-state--saved {
  background: var(--admin-v2-state-saved-bg);
  color: var(--admin-v2-state-saved-text);
}

.admin-v2-state--error {
  background: var(--admin-v2-state-error-bg);
  color: var(--admin-v2-state-error-text);
}

.admin-v2-state--setup {
  background: var(--admin-v2-state-setup-bg);
  color: var(--admin-v2-state-setup-text);
}

.admin-v2-state--empty {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-state--unavailable {
  background: var(--admin-v2-state-unavailable-bg);
  color: var(--admin-v2-state-unavailable-text);
}

.admin-v2-state--validation {
  background: var(--admin-v2-state-warning-bg);
  color: var(--admin-v2-state-warning-text);
}

/* Block-level empty / unavailable panels */
.admin-v2-state--empty.admin-v2-state--block,
.admin-v2-state--unavailable.admin-v2-state--block,
.admin-v2-state--setup.admin-v2-state--block {
  display: grid;
  place-items: center;
  min-height: 120px;
  width: 100%;
  padding: var(--admin-v2-space-6);
  border-radius: var(--admin-v2-radius-card);
  text-align: center;
}

/* v2/admin-v2/sheet-progression.css */
/**
 * Pagayo Design V2 — Sheet progression header (entity lifecycle steps).
 *
 * Status chip uses pill radius (passive). Step controls use interactive radius (8px).
 */

.admin-v2-sheet-progression {
  display: grid;
  gap: var(--admin-v2-space-3);
}

.admin-v2-sheet-progression__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
}

.admin-v2-sheet-progression__title-group {
  display: grid;
  gap: var(--admin-v2-space-2);
  min-width: 0;
}

.admin-v2-sheet-progression__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-sheet-progression__status {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: var(--admin-v2-badge-height);
  padding: var(--admin-v2-badge-padding-y) var(--admin-v2-badge-padding-x);
  border-radius: var(--admin-v2-radius-label);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-badge);
  line-height: var(--admin-v2-line-height-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  width: fit-content;
}

.admin-v2-sheet-progression__status--success {
  background: var(--admin-v2-label-bg-success);
  color: var(--admin-v2-label-text-success);
}

.admin-v2-sheet-progression__status--warning {
  background: var(--admin-v2-label-bg-warning);
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-sheet-progression__status--info {
  background: var(--admin-v2-label-bg-info);
  color: var(--admin-v2-label-text-info);
}

.admin-v2-sheet-progression__status--danger {
  background: var(--admin-v2-label-bg-danger);
  color: var(--admin-v2-label-text-danger);
}

.admin-v2-sheet-progression__status--neutral {
  background: var(--admin-v2-label-bg-neutral);
  color: var(--admin-v2-label-text-neutral);
}

.admin-v2-sheet-progression__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-v2-sheet-progression__step {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: 34px;
  padding: 0 var(--admin-v2-space-3);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-sheet-progression__step--complete {
  background: var(--admin-v2-color-primary-soft);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, transparent);
  color: var(--admin-v2-color-primary);
}

.admin-v2-sheet-progression__step--current {
  background: var(--admin-v2-color-surface);
  border-color: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text);
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-sheet-progression__step--needs-attention {
  background: var(--admin-v2-label-bg-warning);
  border-color: transparent;
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-sheet-progression__step-separator {
  color: var(--admin-v2-color-text-soft);
  font-size: var(--admin-v2-font-size-meta);
  user-select: none;
}

.admin-v2-entity-sheet__head--progression {
  display: grid;
  gap: var(--admin-v2-space-3);
  align-items: stretch;
}

.admin-v2-entity-sheet__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  width: 100%;
  min-width: 0;
}

/* SoftPanel section title: sentence case, dark (no divider).
 * +4px over section-title token so titles stay clear above bold body facts.
 * Selectors must beat admin global
 * `body[data-page-type="admin"] :not(...) { font-size: … !important }` —
 * a lone `.admin-v2-soft-panel__title` loses on specificity even with !important. */
.admin-v2-soft-panel__title {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin: 0;
  padding: 0;
  font-family: var(--admin-v2-font-family);
  font-size: calc(var(--admin-v2-font-size-section-title) + 4px);
  line-height: calc(var(--admin-v2-line-height-section-title) + 4px);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  text-transform: none;
  letter-spacing: var(--admin-v2-letter-spacing);
}

.admin-v2-soft-panel__title-text {
  min-width: 0;
  font-weight: inherit;
}

body[data-page-type="admin"] .admin-v2-soft-panel__title,
body[data-page-type="admin"] .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text,
body[data-page-type^="admin-"] .admin-v2-soft-panel__title,
body[data-page-type^="admin-"] .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text,
.admin-layout .admin-v2-soft-panel__title,
.admin-layout .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text {
  font-size: calc(var(--admin-v2-font-size-section-title) + 4px) !important;
  line-height: calc(var(--admin-v2-line-height-section-title) + 4px);
}

.admin-v2-soft-panel__title .editor-label-info,
.admin-v2-soft-panel__title .products-editor-label-info {
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
}

.admin-v2-entity-sheet-columns {
  display: contents;
}

/* Column = layout only; SoftPanel supplies the Admin V2 card chrome. */
.admin-v2-entity-sheet-column {
  display: grid;
  gap: var(--admin-v2-space-4);
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* 1/5 actions + 4/5 list — own grid so body 2-column collapse rules do not apply.
 * Must beat `.admin-v2-entity-sheet-columns { display: contents }` (same specificity). */
.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list > .admin-v2-entity-sheet-column {
  gap: var(--admin-v2-space-3);
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list > .admin-v2-entity-sheet-column:first-child {
  align-content: start;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list > .admin-v2-entity-sheet-column:empty {
  display: none;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list > .admin-v2-entity-sheet-column:first-child .btn {
  width: 100%;
  justify-content: center;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

.admin-v2-entity-sheet-columns--actions-list .orders-workspace-items-actions {
  display: grid;
  gap: var(--admin-v2-space-3);
  align-content: start;
}

.admin-v2-entity-sheet-columns--actions-list .orders-workspace-items-actions .product-search-section {
  margin: 0;
}

/* Full-width single column — own grid (booking setup rules) */
.admin-v2-entity-sheet-columns--full {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--full > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

/* 1/2 left + 1/2 center — own grid (booking setup offers · places) */
.admin-v2-entity-sheet-columns--half-half {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--half-half > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns--half-half
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

/* Three equal columns — own grid (for example inventory operation columns). */
.admin-v2-entity-sheet-columns--thirds {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--thirds > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

/* 1/3 left + 2/3 center — own grid (members dossier · booking setup schedule) */
.admin-v2-entity-sheet-columns--one-third-two-thirds {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--one-third-two-thirds > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

/* 1/4 left + 3/4 center — own grid */
.admin-v2-entity-sheet-columns--one-quarter-three-quarters {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--one-quarter-three-quarters > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

/* Both wells read as one row: a column with a single panel fills its height. */
.admin-v2-entity-sheet-columns--one-quarter-three-quarters
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

.admin-v2-entity-sheet-columns--full > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--half-half > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--thirds > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--one-third-two-thirds > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--one-quarter-three-quarters > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths > .admin-v2-entity-sheet-column:empty {
  display: none;
}

/* 1/5 left + 2/5 center + 2/5 right — booking detail (Order · Operations · Customer) */
.admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

/* 1/5 + 1/5 + 1/5 + 2/5 — product Overview; keep empty mid track so ratios stay stable */
.admin-v2-entity-sheet-columns--one-fifth-one-fifth-one-fifth-two-fifths {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--one-fifth-one-fifth-one-fifth-two-fifths > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns--one-fifth-one-fifth-one-fifth-two-fifths
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

/* Five equal setup steps — product variant creation (create · list · create · list · generate) */
.admin-v2-entity-sheet-columns--fifths {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--admin-v2-space-4);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--fifths > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns--fifths
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

@media (max-width: 960px) {
  .admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list,
  .admin-v2-entity-sheet-columns--full,
  .admin-v2-entity-sheet-columns--half-half,
  .admin-v2-entity-sheet-columns--thirds,
  .admin-v2-entity-sheet-columns--one-third-two-thirds,
  .admin-v2-entity-sheet-columns--one-quarter-three-quarters,
  .admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths,
  .admin-v2-entity-sheet-columns--one-fifth-one-fifth-one-fifth-two-fifths,
  .admin-v2-entity-sheet-columns--fifths {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-v2-advanced-section {
  border: 1px dashed var(--admin-v2-border-strong);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface-muted);
  overflow: hidden;
}

.admin-v2-advanced-section__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  min-height: 44px;
  padding: var(--admin-v2-space-3) var(--admin-v2-space-4);
  border: 0;
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
}

.admin-v2-advanced-section__toggle:hover {
  color: var(--admin-v2-color-text);
}

.admin-v2-advanced-section__body {
  padding: 0 var(--admin-v2-space-4) var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-3);
}

/* v2/admin-v2/step-editor.css */
/**
 * Pagayo Design V2 — Rollen voor een stap-editor (bestelling, klaarzetten, versturen, factuur).
 *
 * Opdracht 196. Eén hangpunt per rol; elke editor in de entity-sheet krijgt ze gratis mee:
 * - admin-v2-next-step   — de kaart "volgende stap" bovenaan, met één hoofdknop (info) of een keuze (warning).
 * - admin-v2-choice-card — een keuze als kaart met radio (hoe gaat het weg, welke optie).
 * - admin-v2-line-items  — artikelregels: afvinken, "in het pakket", artikelen van een bestelling.
 * - admin-v2-document    — een document zoals de klant het ziet (factuur, creditnota).
 * - admin-v2-sheet-progression--inline — de stappen in de kop, genummerd, naast "Sluiten".
 *
 * Maat: uiux/smaak.md §1. Wit, dunne lijn, geen schaduw, één accent; binnen een kaart geen tweede grijs vlak.
 */

/* ---------- Volgende stap ---------- */

.admin-v2-next-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  min-width: 0;
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-primary) 24%, transparent);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-primary-soft);
}

.admin-v2-next-step--warning {
  border-color: color-mix(in srgb, var(--admin-v2-state-warning-text) 32%, transparent);
  background: var(--admin-v2-state-warning-bg);
}

.admin-v2-next-step--done {
  border-color: var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface);
}

.admin-v2-next-step__text {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
  flex: 1 1 20rem;
}

.admin-v2-next-step__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-next-step__description {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-next-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

/* Meerdere gelijkwaardige manieren (betaallink, QR, contant): een rij over de volle breedte. */
.admin-v2-next-step__actions--choices {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.admin-v2-next-step__body {
  flex: 1 1 100%;
  display: grid;
  gap: var(--admin-v2-space-3);
  min-width: 0;
}

/* ---------- Keuzekaart ---------- */

.admin-v2-choice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--admin-v2-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-v2-choice-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--admin-v2-space-3);
  row-gap: var(--admin-v2-space-1);
  min-width: 0;
  padding: var(--admin-v2-space-4);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  cursor: pointer;
}

.admin-v2-choice-card:hover {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 40%, var(--admin-v2-border-default));
}

.admin-v2-choice-card:has(input:checked) {
  border-color: var(--admin-v2-color-primary);
  box-shadow: inset 0 0 0 1px var(--admin-v2-color-primary);
}

.admin-v2-choice-card:has(input:focus-visible) {
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-choice-card:has(input:disabled) {
  cursor: not-allowed;
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-choice-card__input {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--admin-v2-color-primary);
}

.admin-v2-choice-card__title {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: 1.4;
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text);
}

.admin-v2-choice-card__description {
  grid-column: 2;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

/* ---------- Artikelregels ---------- */

.admin-v2-line-items {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.admin-v2-line-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--admin-v2-space-4);
  min-width: 0;
  padding: var(--admin-v2-space-3) 0;
}

.admin-v2-line-item + .admin-v2-line-item {
  border-top: 1px solid var(--admin-v2-border-subtle);
}

.admin-v2-line-item--check {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.admin-v2-line-item__check {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--admin-v2-color-primary);
}

.admin-v2-line-item__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--admin-v2-border-subtle);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  text-transform: uppercase;
}

.admin-v2-line-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-v2-line-item__main {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-line-item__title {
  overflow-wrap: anywhere;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: 1.4;
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text);
}

.admin-v2-line-item__meta {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-line-item__end {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-6);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  font-variant-numeric: tabular-nums;
  color: var(--admin-v2-color-text);
  white-space: nowrap;
}

.admin-v2-line-item__end-muted {
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-line-item--done .admin-v2-line-item__title {
  color: var(--admin-v2-color-text-muted);
  text-decoration: line-through;
}

/* Bedragen onder de regels: rechts, smal, totaal vet. Vervangt order-totals-* in stap-editors. */
.admin-v2-amounts {
  display: grid;
  gap: var(--admin-v2-space-2);
  width: min(100%, 20rem);
  margin: var(--admin-v2-space-2) 0 0 auto;
  padding-top: var(--admin-v2-space-4);
  border-top: 1px solid var(--admin-v2-border-subtle);
  font-family: var(--admin-v2-font-family);
  font-variant-numeric: tabular-nums;
}

.admin-v2-amounts__row {
  display: flex;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-amounts__row > :last-child {
  font-size: var(--admin-v2-font-size-body);
  color: var(--admin-v2-color-text);
}

.admin-v2-amounts__row--total {
  padding-top: var(--admin-v2-space-2);
  font-size: var(--admin-v2-font-size-body);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-amounts__row--total > :last-child {
  font-size: var(--admin-v2-font-size-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
}

/* ---------- Feitenlijst (rechterkolom): label links, waarde rechts ---------- */

.admin-v2-facts {
  display: grid;
  gap: var(--admin-v2-space-3);
  margin: 0;
  min-width: 0;
}

.admin-v2-facts__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--admin-v2-space-4);
  min-width: 0;
}

.admin-v2-facts__row dt {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-facts__row dd {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: end;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  color: var(--admin-v2-color-text);
}

.admin-v2-facts--divided {
  padding-top: var(--admin-v2-space-4);
  border-top: 1px solid var(--admin-v2-border-subtle);
}

/* Een blok tekst in de rechterkolom: naam, adres. */
.admin-v2-address {
  margin: 0;
  font-style: normal;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: 1.5;
  color: var(--admin-v2-color-text);
}

.admin-v2-address__muted {
  display: block;
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-text-muted);
}

/* ---------- Document ---------- */

.admin-v2-document {
  display: grid;
  align-content: start;
  gap: var(--admin-v2-space-8);
  min-width: 0;
  padding: calc(var(--admin-v2-card-padding-y) * 2) calc(var(--admin-v2-card-padding-x) * 2.25);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  font-family: var(--admin-v2-font-family);
  color: var(--admin-v2-color-text);
}

.admin-v2-document__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--admin-v2-space-4);
}

.admin-v2-document__seller,
.admin-v2-document__meta {
  display: grid;
  gap: var(--admin-v2-space-1);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-document__meta {
  text-align: end;
}

.admin-v2-document__name,
.admin-v2-document__kind {
  margin: 0;
  font-size: var(--admin-v2-font-size-page-title);
  line-height: 1.3;
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-document__to {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-v2-document__label {
  font-size: var(--admin-v2-font-size-badge);
  line-height: var(--admin-v2-line-height-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-document__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-v2-font-size-body);
  font-variant-numeric: tabular-nums;
}

.admin-v2-document__table th {
  padding: 0 0 var(--admin-v2-space-3);
  border-bottom: 1px solid var(--admin-v2-border-default);
  font-size: var(--admin-v2-font-size-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  letter-spacing: 0.04em;
  text-align: start;
  text-transform: uppercase;
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-document__table td {
  padding: var(--admin-v2-space-4) 0;
  border-bottom: 1px solid var(--admin-v2-border-subtle);
  vertical-align: top;
}

.admin-v2-document__table :is(th, td).admin-v2-document__num {
  padding-inline-start: var(--admin-v2-space-4);
  text-align: end;
  white-space: nowrap;
}

.admin-v2-document .admin-v2-amounts {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 720px) {
  .admin-v2-document {
    padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  }

  .admin-v2-document__meta {
    text-align: start;
  }
}

/* ---------- Stappen in de kop ---------- */

.admin-v2-sheet-progression--inline {
  display: flex;
  align-items: center;
  min-width: 0;
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__steps {
  flex-wrap: nowrap;
  gap: var(--admin-v2-space-3);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step-item {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-control);
  white-space: nowrap;
}

.admin-v2-sheet-progression__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface);
  font-size: var(--admin-v2-font-size-badge);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--complete {
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--complete .admin-v2-sheet-progression__marker {
  border-color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--current {
  color: var(--admin-v2-color-text);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--current .admin-v2-sheet-progression__marker {
  border: 2px solid var(--admin-v2-color-primary);
  color: var(--admin-v2-color-primary);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--needs-attention {
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--needs-attention .admin-v2-sheet-progression__marker {
  border-color: var(--admin-v2-label-text-warning);
  background: var(--admin-v2-label-bg-warning);
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step-separator {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--admin-v2-border-default);
  font-size: 0;
}

/* Smal scherm: alleen de huidige stap met naam; de andere als nummer. */
@media (max-width: 1100px) {
  .admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step:not(.admin-v2-sheet-progression__step--current) .admin-v2-sheet-progression__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step-separator {
    width: 12px;
  }
}

/* ---------- Meer ⋯ (in de voet van een editor) ---------- */

/* Wat je zelden nodig hebt (status met de hand, export, documenten, verwijderen) staat achter
 * één knop. Het menu opent naar boven, want de knop staat in de voet. Vlak: rand, geen schaduw. */
.admin-v2-more {
  position: relative;
  display: inline-flex;
}

.admin-v2-more__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--admin-v2-space-2));
  z-index: 40;
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 16rem;
  margin: 0;
  padding: var(--admin-v2-space-2);
  list-style: none;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
}

.admin-v2-more__menu[hidden] {
  display: none;
}

.admin-v2-more__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--admin-v2-control-height-md);
  padding: 0 var(--admin-v2-space-3);
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  text-align: start;
  color: var(--admin-v2-color-text);
  cursor: pointer;
}

.admin-v2-more__item:hover:not(:disabled),
.admin-v2-more__item:focus-visible {
  background: var(--admin-v2-color-surface-hover);
  outline: none;
}

.admin-v2-more__item:focus-visible {
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-more__item:disabled {
  cursor: not-allowed;
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-more__item--danger {
  color: var(--admin-v2-state-danger-text);
}

/* v2/admin-v2/editor-settings.css */
/**
 * Pagayo Design V2 — Rollen voor een instel-editor (klant, btw, kassa instellen).
 *
 * Opdracht 197. Eén hangpunt per rol; elke editor in de entity-sheet krijgt ze gratis mee:
 * - admin-v2-line-item--plain  — een regel zonder plaatje of vinkje (bestellingen, apparaten, tarieven).
 * - admin-v2-editor-card__link — een tekstlink in de kop van een editorkaart ("Alle", "Openen").
 * - admin-v2-segmented         — twee of drie gelijkwaardige keuzes naast elkaar (ja/nee, incl./excl.).
 * - admin-v2-chips             — gekozen dingen als pil met "weghalen" (categorieën, medewerkers).
 *   Grijs, want blauw is in het beheer alleen een actie (smaak.md §1).
 *
 * Maat: uiux/smaak.md §1. Wit, dunne lijn, geen schaduw, één accent; de keuze is nooit alleen kleur.
 */

/* ---------- Regel zonder plaatje ---------- */

.admin-v2-line-item--plain {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ---------- Link in de kop van een editorkaart ---------- */

.admin-v2-editor-card__link {
  flex: 0 0 auto;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-v2-editor-card__link:hover {
  color: var(--admin-v2-color-primary-hover);
}

.admin-v2-editor-card__link:focus-visible {
  outline: none;
  border-radius: var(--admin-v2-radius-interactive);
  box-shadow: var(--admin-v2-focus-ring);
}

/* ---------- Gesegmenteerde keuze (radiogroep) ---------- */

.admin-v2-segmented {
  display: inline-flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  overflow: hidden;
}

.admin-v2-segmented--full {
  display: flex;
  width: 100%;
}

.admin-v2-segmented__option {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: var(--admin-v2-control-height-lg);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-4);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text);
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.admin-v2-segmented__option + .admin-v2-segmented__option {
  border-left: 1px solid var(--admin-v2-border-default);
}

/* Het rondje blijft in de boom (toetsenbord, schermlezer), maar valt weg in beeld. */
.admin-v2-segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Alleen een vak dat je nog kunt kiezen, reageert op de muis; het gekozen vak blijft blauw. */
.admin-v2-segmented__option:not(:has(input:checked, input:disabled)):hover {
  background: var(--admin-v2-color-surface-hover);
}

/* Uitgeschakeld maar niet gekozen: gedempt. De gekozen keuze blijft leesbaar (regel hieronder wint). */
.admin-v2-segmented__option:has(input:disabled) {
  color: var(--admin-v2-color-text-muted);
  cursor: not-allowed;
}

.admin-v2-segmented__option:has(input:checked) {
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
  font-weight: var(--admin-v2-font-weight-semibold);
}

/* De focusring zit aan de binnenkant: de rand van de groep knipt hem niet weg. Op het gekozen
 * (blauwe) vak een tweede, lichte ring, zodat de focus ook daar te zien is. */
.admin-v2-segmented__option:has(input:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--admin-v2-color-primary);
  z-index: 1;
}

.admin-v2-segmented__option:has(input:checked):has(input:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--admin-v2-color-primary), inset 0 0 0 4px var(--admin-v2-color-text-inverse);
}

/* Hoog contrast (Windows): vullingen vallen weg; de keuze krijgt een rand van het systeem. */
@media (forced-colors: active) {
  .admin-v2-segmented__option:has(input:checked) {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }

  /* Focus met een streep onder de tekst, zodat de rand van de keuze blijft staan. */
  .admin-v2-segmented__option:has(input:focus-visible) {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }
}

/* ---------- Pillen met weghalen ---------- */

.admin-v2-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.admin-v2-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-1);
  min-height: var(--admin-v2-control-height-sm);
  padding: 0 var(--admin-v2-space-2) 0 var(--admin-v2-space-3);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-v2-icon-button-size-sm);
  height: var(--admin-v2-icon-button-size-sm);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--admin-v2-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.admin-v2-chip__remove:hover {
  background: var(--admin-v2-color-surface);
}

.admin-v2-chip__remove:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

/* v2/admin-v2/surface-columns.css */
/**
 * Pagayo Design V2 — Surface grammar columns (Marketing / Results / Steering).
 */

.admin-v2-surface-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-space-4);
  align-items: start;
}

.admin-v2-surface-column {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  display: grid;
  gap: var(--admin-v2-space-3);
  min-height: 280px;
  padding: var(--admin-v2-space-4);
}

.admin-v2-surface-column__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-surface-column__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-surface-signal-card {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-3);
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-surface-signal-card__label {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-surface-signal-card__value {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

@media (max-width: 1100px) {
  .admin-v2-surface-columns {
    grid-template-columns: 1fr;
  }
}

/* v2/admin-v2/settings-rail.css */
/**
 * Pagayo Design V2 — Settings stack (org settings chrome) + settings right rail.
 *
 * SettingsStack = SettingsLayout grammar (ADR 0003) — not WorkspaceShell / SoftPanel editor lane.
 *
 * Workspace Chrome Contract: one scrollport flush to the viewport edge — no outer
 * `.admin-page` gutter around the stack. (Collection-card list pages have a 24 gutter and a
 * card since @pagayo/design 2.14.0 (opdracht 188); settings keep this full-bleed reset.)
 */

/* ── Org SettingsStack (SettingsLayout) ─────────────────────────────────── */

/* Full-bleed inside admin-main (settings are not collection-card list pages). */
.admin-shell--v2 .admin-page.settings-page {
  padding: 0;
  background: transparent;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.admin-shell--v2 .admin-page.settings-page > .admin-v2-settings-stack {
  flex: 1 1 auto;
  min-height: 0;
}

.admin-v2-settings-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  gap: var(--admin-v2-space-4);
}

.admin-v2-settings-stack__body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--admin-v2-space-4);
  min-height: 0;
  align-items: stretch;
}

.admin-v2-settings-stack__body--detail-only {
  grid-template-columns: minmax(0, 1fr);
}

.admin-v2-settings-stack__nav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  overflow: hidden;
}

.admin-v2-settings-stack__nav-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--admin-v2-space-2);
  gap: var(--admin-v2-space-1);
}

.admin-v2-settings-stack__detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  overflow: hidden;
}

/*
 * Detail-only (Company zone owns discovery): SoftPanels / hybrid list are the
 * only card planes — flatten the outer stack detail surface (GS-07 golden).
 */
.admin-v2-settings-stack__body--detail-only .admin-v2-settings-stack__detail {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-v2-settings-stack__body--detail-only .admin-v2-settings-stack__sections-content {
  padding-left: 0;
  padding-right: 0;
}

.admin-v2-settings-stack__body--detail-only .admin-v2-settings-stack__foot {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  backdrop-filter: none;
}

.admin-v2-settings-stack__header {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-v2-space-3);
  flex-shrink: 0;
  padding: var(--admin-v2-space-4) var(--admin-v2-card-padding-x);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

.admin-v2-settings-stack__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-settings-stack__header-copy {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-settings-stack__header-title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title, 1.35);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-settings-stack__header-meta {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

/* Scrollport — no padding (Workspace Chrome Contract §3). */
.admin-v2-settings-stack__sections {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* Content inset lives on the inner wrapper, not the scrollport. */
.admin-v2-settings-stack__sections-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: var(--admin-v2-space-4) var(--admin-v2-card-padding-x);
  gap: var(--admin-v2-space-4);
}

/* Explicit Save footer — chrome-edge.css supplies footer shadow (Chrome Contract). */
.admin-v2-settings-stack__foot {
  flex-shrink: 0;
  border-top: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css */
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-card-padding-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-3);
}

.admin-v2-settings-stack__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin-left: auto;
}

.admin-v2-settings-stack__sections-content > .products-workspace-toolbar {
  flex-shrink: 0;
}

.admin-v2-settings-stack__sections-content > .settings-email-workspace-grid,
.admin-v2-settings-stack__sections-content > .admin-v2-settings-hybrid {
  flex: 1;
  align-items: stretch;
  min-height: 0;
}

/* ── Nested Settings hybrid list/detail (Email / Payments / Shipping) ───── */

.admin-v2-settings-hybrid {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: var(--admin-v2-space-4);
  min-height: 0;
  align-items: stretch;
}

/* Hybrid-list CollectionTable peers (Payments golden + Shipping) — wider plane, not list-slot. */
.admin-v2-settings-hybrid.settings-payment-workspace-grid,
.admin-v2-settings-hybrid.settings-shipping-workspace-grid {
  grid-template-columns: minmax(360px, 1.25fr) minmax(0, 1fr);
}

/* Layout-only column — WorkspaceListPanel / collection-shell owns the list card. */
.admin-v2-settings-hybrid__list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.admin-v2-settings-hybrid__list > .products-list-card,
.admin-v2-settings-hybrid__list > .admin-v2-collection-shell,
.admin-v2-settings-hybrid__list > .workspace-list-panel,
.admin-v2-settings-hybrid__list > [class*="list-card"] {
  flex: 1;
  min-height: 0;
}

/* Layout-only column — SoftPanels own detail card chrome (Products look). */
.admin-v2-settings-hybrid__detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.admin-v2-settings-hybrid__detail-scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--admin-v2-space-4);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Detail Save — entity sheet foot rhythm; not a second full-width stack footer. */
.admin-v2-settings-hybrid__foot {
  flex-shrink: 0;
  border-top: 1px solid var(--admin-v2-border-default);
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-3);
  margin-top: var(--admin-v2-space-4);
}

.admin-v2-settings-hybrid__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin-left: auto;
}

.admin-v2-settings-hybrid__header {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-v2-space-3);
  flex-shrink: 0;
  padding-bottom: var(--admin-v2-space-4);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

.admin-v2-settings-hybrid__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--admin-v2-radius-interactive);
  border: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-settings-hybrid__header-copy {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-settings-hybrid__header-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
}

.admin-v2-settings-hybrid__header-title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title, 1.35);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-settings-hybrid__header-meta {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-settings-hybrid__empty {
  display: grid;
  place-items: center;
  gap: var(--admin-v2-space-3);
  flex: 1;
  min-height: 12rem;
  color: var(--admin-v2-color-text-muted);
  text-align: center;
}

.admin-v2-settings-hybrid__empty p {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
}

.admin-v2-settings-hybrid .products-workspace-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-v2-settings-hybrid .products-workspace-summary-field {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-settings-hybrid .products-workspace-summary-field span {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-settings-hybrid .products-workspace-summary-field strong {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  overflow-wrap: anywhere;
}

@media (max-width: 960px) {
  .admin-v2-settings-hybrid {
    grid-template-columns: 1fr;
  }

  .admin-v2-settings-hybrid__list {
    max-height: 280px;
  }
}

.admin-v2-settings-stack__section-description {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

@media (max-width: 960px) {
  .admin-v2-settings-stack__body:not(.admin-v2-settings-stack__body--detail-only) {
    grid-template-columns: 1fr;
  }

  .admin-v2-settings-stack__nav {
    max-height: 240px;
  }
}

/* ── Entity settings right rail (setup checklist + useful links) ─────────── */

.admin-v2-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: var(--admin-v2-space-4);
  align-items: start;
}

.admin-v2-settings-rail {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  display: grid;
  gap: var(--admin-v2-space-4);
  padding: var(--admin-v2-space-4);
  position: sticky;
  top: var(--admin-v2-space-4);
}

.admin-v2-settings-rail__section-title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-settings-rail__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-settings-rail__check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-v2-space-2);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-settings-rail__check-item--done {
  color: var(--admin-v2-color-text);
}

.admin-v2-settings-rail__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-settings-rail__link {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: 34px;
  padding: 0 var(--admin-v2-space-2);
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-primary);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.admin-v2-settings-rail__link:hover {
  background: var(--admin-v2-color-primary-soft);
}

@media (max-width: 1100px) {
  .admin-v2-settings-layout {
    grid-template-columns: 1fr;
  }

  .admin-v2-settings-rail {
    position: static;
  }
}

/* v2/admin-v2/create-workspace.css */
/**
 * Pagayo Design V2 — Capability-driven create (chooser + 3-column create grid).
 */

.admin-v2-create-chooser {
  display: grid;
  gap: var(--admin-v2-space-4);
  padding: var(--admin-v2-space-2) 0;
}

.admin-v2-create-chooser__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-create-chooser__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-create-chooser__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-v2-create-chooser-card {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  padding: var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-2);
  text-align: left;
  cursor: pointer;
  min-height: 140px;
}

.admin-v2-create-chooser-card:hover,
.admin-v2-create-chooser-card[aria-pressed="true"],
.admin-v2-create-chooser-card.active {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 32%, transparent);
  background: var(--admin-v2-color-primary-soft);
}

.admin-v2-create-chooser-card__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-create-chooser-card__description {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-create-columns {
  display: grid;
  grid-template-columns:
    minmax(280px, 0.95fr)
    minmax(360px, 1.2fr)
    minmax(280px, 0.95fr);
  gap: var(--admin-v2-space-4);
  align-items: start;
}

.admin-v2-create-column__title {
  margin: 0 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

@media (max-width: 960px) {
  .admin-v2-create-columns {
    grid-template-columns: 1fr;
  }
}

/* v2/admin-v2/surface-workspace.css */
/**
 * Pagayo Design V2 — Surface grammar workspace scaffold.
 * Lifecycle: aggregate → prioritize → drill-in → refresh.
 */

.admin-v2-surface-workspace {
  display: grid;
  gap: var(--admin-v2-space-4);
  min-height: 0;
}

.admin-v2-surface-workspace__header {
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-surface-workspace__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-surface-workspace__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-surface-workspace__toolbar {
  margin-bottom: 0;
}

.admin-v2-surface-workspace__body {
  display: grid;
  gap: var(--admin-v2-space-4);
  min-height: 0;
}

.admin-v2-surface-workspace__drill-link {
  align-self: start;
}

/* v2/admin-v2/process-workspace.css */
/**
 * Pagayo Design V2 — Process grammar pipeline (start → steps → preview → commit → result).
 */

.admin-v2-process-workspace {
  display: grid;
  gap: var(--admin-v2-space-4);
}

.admin-v2-process-workspace__header {
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-process-workspace__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-process-workspace__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-process-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.admin-v2-process-pipeline__step {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-pill);
  padding: var(--admin-v2-space-1) var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
  background: var(--admin-v2-color-surface);
}

.admin-v2-process-pipeline__step--current {
  border-color: var(--admin-v2-color-accent);
  color: var(--admin-v2-color-text);
  background: var(--admin-v2-color-surface-muted);
  font-weight: var(--admin-v2-font-weight-semibold);
}

.admin-v2-process-pipeline__step--complete {
  border-color: var(--admin-v2-color-success-border, var(--admin-v2-border-default));
  color: var(--admin-v2-color-text);
}

.admin-v2-process-pipeline__step--upcoming {
  opacity: 0.72;
}

.admin-v2-process-preview {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-3);
}

.admin-v2-process-preview__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-process-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

.admin-v2-process-result {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  padding: var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-process-result__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-process-workspace__body {
  display: grid;
  gap: var(--admin-v2-space-4);
}

/* v2/admin-v2/transact-panel.css */
/**
 * Pagayo Design V2 — Transact cross-cut (initiate → compose → preview → commit → audit).
 */

.admin-v2-transact-panel {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-3) var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-3);
}

.admin-v2-transact-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-2);
}

.admin-v2-transact-panel__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-transact-panel__summary {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-transact-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

.admin-v2-transact-panel__progress {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-transact-panel__result {
  display: grid;
  gap: var(--admin-v2-space-2);
  border-top: 1px solid var(--admin-v2-border-default);
  padding-top: var(--admin-v2-space-3);
}

.admin-v2-transact-panel__result-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-text);
}

.admin-v2-transact-panel__result-row--success {
  color: var(--admin-v2-color-success-text, var(--admin-v2-color-text));
}

.admin-v2-transact-panel__result-row--danger {
  color: var(--admin-v2-color-danger-text, var(--admin-v2-color-text));
}

.admin-v2-transact-panel__errors {
  margin: 0;
  padding-left: var(--admin-v2-space-4);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-danger-text, var(--admin-v2-color-text));
}

.admin-v2-transact-panel--preview {
  border-color: var(--admin-v2-color-accent);
}

.admin-v2-transact-panel--result {
  border-color: var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface);
}

/* v2/admin-v2/command-center.css */
/**
 * Admin V2 — Workspace Command Center recipe (Wave C)
 *
 * Visual SSoT for the collapsible collection tools hub.
 * Consumers (storefront) own composition/state; this file owns appearance.
 * Class names keep the storefront BEM contract (`workspace-command-center*`)
 * so markup does not fork during consolidation.
 */

.workspace-command-center {
  position: relative;
  overflow: visible;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-xl);
  background: linear-gradient(
    180deg,
    var(--admin-v2-color-surface) 0%,
    var(--admin-v2-color-surface-hover) 100%
  );
  box-shadow: var(--admin-v2-shadow-lg);
  margin-bottom: var(--admin-v2-space-4, 1rem);
}

.workspace-command-center__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-6, 1.5rem);
  min-height: 7rem;
  padding: 1.375rem 1.5rem;
}

.workspace-command-center__title-block {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.workspace-command-center__title {
  margin: 0;
  color: var(--admin-v2-color-text);
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.workspace-command-center__subtitle {
  margin: 0;
  max-width: 32rem;
  color: var(--admin-v2-color-text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.workspace-command-center__count {
  width: fit-content;
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
}

.workspace-command-center__header-actions,
.workspace-command-center__footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.workspace-command-center__toggle,
.workspace-command-center__button {
  min-height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-primary) 18%, transparent);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1rem;
  font-weight: 720;
  font-size: 0.9rem;
  box-shadow: var(--admin-v2-shadow-sm);
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.workspace-command-center__toggle:hover,
.workspace-command-center__button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 35%, transparent);
  box-shadow: var(--admin-v2-shadow-md);
  transform: translateY(-1px);
}

.workspace-command-center__toggle:focus-visible,
.workspace-command-center__button:focus-visible,
.workspace-command-option:focus-visible,
.workspace-command-field:focus-visible,
.workspace-command-center__close:focus-visible,
.workspace-command-center__chip:focus-visible,
.workspace-command-center__clear:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--admin-v2-color-primary) 28%, transparent);
  outline-offset: 2px;
}

.workspace-command-center__button:disabled,
.workspace-command-option:disabled,
.workspace-command-field:disabled,
.workspace-command-segmented__item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.workspace-command-center__button--primary {
  background: var(--admin-v2-color-primary);
  border-color: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

.workspace-command-center__button--danger {
  color: var(--admin-v2-state-danger-text);
  border-color: color-mix(in srgb, var(--admin-v2-state-danger-text) 24%, transparent);
}

.workspace-command-center__button--muted {
  color: var(--admin-v2-color-text-muted);
}

.workspace-command-center__surface {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.625rem);
  left: 0.75rem;
  right: 0.75rem;
  max-height: min(32.5rem, calc(100vh - 14.375rem));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-text) 10%, transparent);
  border-radius: var(--admin-v2-radius-xl);
  background: color-mix(in srgb, var(--admin-v2-color-surface-hover) 98%, transparent);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: 0.875rem;
}

.workspace-command-center__surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.625rem;
}

.workspace-command-center__eyebrow {
  color: var(--admin-v2-color-primary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-command-center__surface-title {
  margin: 0.0625rem 0 0;
  color: var(--admin-v2-color-text-muted);
  font-size: 0.82rem;
}

.workspace-command-center__close {
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.workspace-command-center__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr;
  gap: 0.625rem;
}

.workspace-command-center__section {
  min-width: 0;
  grid-column: span 1;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-lg);
  background: var(--admin-v2-color-surface);
  padding: 0.75rem;
  box-shadow: var(--admin-v2-shadow-sm);
}

.workspace-command-center__section--lg {
  grid-column: span 1;
}

.workspace-command-center__section-header {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.workspace-command-center__section-header h2 {
  margin: 0;
  color: var(--admin-v2-color-text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.workspace-command-center__section-header p {
  display: none;
}

.workspace-command-center__section-body {
  min-width: 0;
}

.workspace-command-stack,
.workspace-command-form-grid {
  display: grid;
  gap: 0.375rem;
}

.workspace-command-check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.375rem;
}

.workspace-command-check {
  min-height: 1.875rem;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-md);
  background: var(--admin-v2-color-surface-hover);
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 650;
}

.workspace-command-check input {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--admin-v2-color-primary);
}

.workspace-command-option {
  width: 100%;
  min-height: 2rem;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-md);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.375rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.workspace-command-option:hover:not(:disabled),
.workspace-command-option--active {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 28%, transparent);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary-hover);
}

.workspace-command-option small {
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0.125rem 0.375rem;
}

.workspace-command-field {
  width: 100%;
  min-height: 2.125rem;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: var(--admin-v2-radius-md);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  padding: 0 0.625rem;
  font-size: 0.8rem;
}

.workspace-command-field::placeholder {
  color: var(--admin-v2-color-text-soft);
}

.workspace-command-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  border-radius: var(--admin-v2-radius-lg);
  background: var(--admin-v2-color-surface-muted);
  padding: 0.2rem;
}

.workspace-command-segmented__item {
  min-height: 1.875rem;
  border: 0;
  border-radius: var(--admin-v2-radius-sm);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.workspace-command-segmented__item--active {
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-primary);
  box-shadow: var(--admin-v2-shadow-sm);
}

.workspace-command-center__footer {
  position: sticky;
  bottom: -0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.75rem -0.875rem -0.875rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--admin-v2-border-default);
  border-radius: 0 0 var(--admin-v2-radius-xl) var(--admin-v2-radius-xl);
  background: color-mix(in srgb, var(--admin-v2-color-surface) 96%, transparent);
  backdrop-filter: blur(12px);
}

.workspace-command-center__active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.workspace-command-center__chip {
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-primary) 18%, transparent);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary-hover);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.workspace-command-center__no-filters {
  color: var(--admin-v2-color-text-soft);
  font-size: 0.84rem;
  font-weight: 650;
}

.workspace-command-center__clear {
  border: 0;
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.workspace-command-center .orders-channel-toolbar-filters,
.workspace-command-center .orders-channel-toolbar-filter {
  display: grid;
  gap: 0.5rem;
}

.workspace-command-center .products-list-controls-row {
  display: grid;
  gap: 0.5rem;
}

.workspace-command-center .products-control-dropdown-panel {
  position: static;
  box-shadow: none;
  border-radius: var(--admin-v2-radius-lg);
  margin-top: 0.375rem;
}

@media (max-width: 1180px) {
  .workspace-command-center__surface {
    max-height: min(35rem, calc(100vh - 11.875rem));
  }

  .workspace-command-center__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-command-center__section--lg {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .workspace-command-center__header,
  .workspace-command-center__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-command-center__header-actions,
  .workspace-command-center__footer-actions {
    justify-content: stretch;
  }

  .workspace-command-center__toggle,
  .workspace-command-center__button {
    width: 100%;
  }

  .workspace-command-center__surface {
    position: fixed;
    inset: auto 0.625rem 0.625rem 0.625rem;
    top: 5.5rem;
    max-height: none;
  }

  .workspace-command-center__grid,
  .workspace-command-check-grid {
    grid-template-columns: 1fr;
  }
}

/* v2/admin-v2/domains-shops.css */
/**
 * Pagayo Design V2 — Rollen voor Winkels, Domein en de taalknop.
 *
 * Opdracht 294-C. Eén hangpunt per rol; de schermen gebruiken ze zonder eigen CSS:
 * - admin-v2-next-step--error   — de kaart "volgende stap" bij een fout.
 * - admin-v2-progress           — voortgangsbalk met label (kleine schermen: alleen smal).
 * - admin-v2-dns-record         — één DNS-rij met type, naam, waarde en kopieerknop.
 * - admin-v2-address-field      — invoerveld met vaste voorkant (adres).
 * - admin-v2-collection-aside   — collectie met zijkolom.
 * - editor-workspace-dialog__*  — stappen en badge in het dialoog.
 * - admin-v2-shell-footer__lang-* — titel, noot en icoon van het taalmenu.
 *
 * Alleen logische eigenschappen (rtl) en tokens; geen kleurwaarden.
 */

/* ---------- Volgende stap: fout ---------- */

.admin-v2-next-step--error {
  border-color: color-mix(in srgb, var(--admin-v2-state-error-text) 32%, transparent);
  background: var(--admin-v2-state-error-bg);
}

/* ---------- Voortgang ---------- */

.admin-v2-progress {
  display: grid;
  gap: var(--admin-v2-space-1);
}

/* In de kaart "volgende stap" (een flex-rij) krijgt de voortgang een eigen rij. */
.admin-v2-next-step > .admin-v2-progress {
  flex: 1 1 100%;
}

.admin-v2-progress__label {
  margin: 0;
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-progress__bar {
  appearance: none;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface-muted);
  overflow: hidden;
}

.admin-v2-progress__bar::-webkit-progress-bar {
  background: var(--admin-v2-color-surface-muted);
  border-radius: var(--admin-v2-radius-pill);
}

.admin-v2-progress__bar::-webkit-progress-value {
  background: var(--admin-v2-color-primary);
  border-radius: var(--admin-v2-radius-pill);
}

.admin-v2-progress__bar::-moz-progress-bar {
  background: var(--admin-v2-color-primary);
  border-radius: var(--admin-v2-radius-pill);
}

.admin-v2-progress--narrow-only {
  display: none;
}

@media (max-width: 720px) {
  .admin-v2-progress--narrow-only {
    display: grid;
  }

  .admin-v2-sheet-progression--hide-narrow {
    display: none;
  }
}

/* ---------- DNS-rijen ---------- */

.admin-v2-dns-records {
  display: grid;
  gap: var(--admin-v2-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-v2-dns-record {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: var(--admin-v2-space-4);
  min-width: 0;
  padding: var(--admin-v2-space-3) var(--admin-v2-space-4);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
}

@media (max-width: 720px) {
  .admin-v2-dns-record {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--admin-v2-space-2);
  }
}

.admin-v2-dns-record__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--admin-v2-badge-height);
  border-radius: var(--admin-v2-radius-label);
  padding: var(--admin-v2-badge-padding-y) var(--admin-v2-badge-padding-x);
  background: var(--admin-v2-label-bg-neutral);
  color: var(--admin-v2-label-text-neutral);
  font-size: var(--admin-v2-font-size-badge);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-dns-record__field {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-dns-record__label {
  margin: 0;
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-dns-record__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-text);
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
  text-align: start;
}

.admin-v2-dns-record__copy {
  justify-self: end;
}

@media (max-width: 720px) {
  .admin-v2-dns-record__copy {
    justify-self: stretch;
  }
}

/* ---------- Adresveld ---------- */

/* Een webadres staat altijd links-naar-rechts, ook in een rtl-taal. */
.admin-v2-address-field {
  display: flex;
  align-items: stretch;
  min-width: 0;
  direction: ltr;
}

.admin-v2-address-field__prefix {
  display: flex;
  align-items: center;
  padding-inline: var(--admin-v2-space-3);
  border: 1px solid var(--admin-v2-input-border);
  border-inline-end: 0;
  border-start-start-radius: var(--admin-v2-radius-control);
  border-end-start-radius: var(--admin-v2-radius-control);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  direction: ltr;
}

.admin-v2-address-field__input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Zelfde :not-keten als forms-admin.css (input.form-input), anders wint die regel de ronding. */
.admin-v2-address-field__prefix + input.admin-v2-address-field__input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* ---------- Kaart-acties ---------- */

.admin-v2-editor-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

/* ---------- Collectie met zijkolom ---------- */

.admin-v2-collection-aside {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--admin-v2-space-6);
  min-width: 0;
}

@media (max-width: 1100px) {
  .admin-v2-collection-aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-v2-collection-aside__main,
.admin-v2-collection-aside__aside {
  display: grid;
  gap: var(--admin-v2-space-6);
  min-width: 0;
}

.admin-v2-domain-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-v2-collection-note {
  margin: 0;
  padding: var(--admin-v2-space-4) var(--admin-v2-table-row-padding-x);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

/* ---------- Dialoog: stappen ---------- */

.editor-workspace-dialog__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-state-warning-bg);
  color: var(--admin-v2-state-warning-text);
  font-weight: var(--pg-editor-font-weight-semibold);
  margin-inline-end: var(--pg-editor-space-3);
  vertical-align: middle;
}

.editor-workspace-dialog__steps {
  margin-block-start: var(--pg-editor-space-4);
  display: grid;
  gap: var(--pg-editor-space-3);
  padding: var(--pg-editor-space-4);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface-muted);
}

.editor-workspace-dialog__step {
  display: grid;
  gap: var(--pg-editor-space-1);
}

.editor-workspace-dialog__step-title {
  font-size: var(--pg-editor-font-size-sm);
  font-weight: var(--pg-editor-font-weight-semibold);
  color: var(--pg-editor-color-text);
}

.editor-workspace-dialog__step-text {
  font-size: var(--pg-editor-font-size-sm);
  color: var(--pg-editor-color-text-muted);
  margin: 0;
}

@media (max-width: 600px) {
  .editor-workspace-dialog__actions--stack {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* ---------- Taalmenu ---------- */

.admin-v2-shell-footer__lang-menu-title {
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-shell-footer__lang-menu-note {
  margin: var(--admin-v2-space-1) 0 0;
  padding: var(--admin-v2-space-3);
  border-block-start: 1px solid var(--admin-v2-border-subtle);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-shell-footer__lang-switch-icon {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex: none;
  color: var(--admin-v2-icon-color);
}

/* Zonder vlag en badge valt het vinkje in de brede kolom; het hoort aan het eind van de regel. */
.admin-v2-shell-footer__lang-menu-check {
  justify-self: end;
}


}

@layer utilities {
/**
 * UTILITY CLASSES
 * Veelgebruikte utility classes voor snelle styling
 * 
 * AI-NOTE: Gebruik utilities voor one-off styling.
 * Voor herhalende patterns, maak een component.
 * 
 * CONVENTIES:
 * - Prefix: geen (direct bruikbaar)
 * - Naming: beschrijvend (sr-only, truncate, etc.)
 */

/* ===== SCREEN READER ONLY ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===== TEXT UTILITIES ===== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ===== DISPLAY UTILITIES ===== */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* ===== FLEX UTILITIES ===== */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ===== SPACING UTILITIES ===== */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* ===== SIZING UTILITIES ===== */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-full { max-width: 100%; }

/* ===== POSITION UTILITIES ===== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ===== OVERFLOW UTILITIES ===== */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ===== CURSOR UTILITIES ===== */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-wait { cursor: wait; }

/* ===== OPACITY UTILITIES ===== */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ===== POINTER EVENTS ===== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ===== USER SELECT ===== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ===== TRANSITION UTILITIES ===== */
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-normal);
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-normal);
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-normal);
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-normal);
}

/* ===== ANIMATION UTILITIES ===== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-up {
  from { 
    opacity: 0;
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-fade-in {
  animation: fade-in var(--duration-normal) var(--ease-out);
}

.animate-slide-in-up {
  animation: slide-in-up var(--duration-normal) var(--ease-out);
}

}

@layer utilities {
/* GEGENEREERD door scripts/generate-rtl-truncate.mjs — niet met de hand wijzigen.
 * Opdracht 226 (S6): afkappen met een beletselteken volgt in rechts-naar-links de
 * richting van de tekst, niet van het blok. 67 selectors. */
[dir="rtl"] :is(
  .admin-account-nav__account-meta,
  .admin-account-nav__account-title,
  .admin-account-nav__child-link span,
  .admin-account-nav__item-label,
  .admin-assistant-modal__menu-tab-label,
  .admin-capability-action-bar__context-copy small,
  .admin-capability-action-bar__context-copy strong,
  .admin-search-dropdown__item-title,
  .admin-sidebar__user-name,
  .admin-table .col-truncate,
  .admin-v2-context-menu__place-label,
  .admin-v2-entity-sheet__head--with-tabs .admin-v2-entity-sheet__title,
  .admin-v2-entity-sheet__identity .admin-v2-entity-sheet__title,
  .admin-v2-entity-sheet__subtitle,
  .admin-v2-shell-footer__lang-menu-locale,
  .admin-v2-shell-footer__lang-menu-name,
  .admin-v2-shell-footer__lang-switch-copy,
  .cart-item-name,
  .col-slug,
  .col-truncate,
  .coupon-applied-code,
  .dashboard-order-customer,
  .dashboard-order-meta,
  .editor-select__option,
  .editor-select__value,
  .faq-editor-item-title,
  .ideal-bank-name,
  .link-row-url,
  .main-nav__title,
  .media-library__tile span,
  .navbar-brand-label,
  .order-items-table__product-name,
  .order-list-customer,
  .orders-workspace-customer-history__id,
  .orders-workspace-items-list__product-title,
  .partners-admin-table__external-link span,
  .partners-admin-table__partner-copy span,
  .partners-admin-table__partner-copy strong,
  .pos-cart__items--grid .pos-cart-item__name,
  .pos-custom-amount-modal--inline .pos-payment__cash-summary-label,
  .pos-customer-item__email,
  .pos-daily-close__header-meta,
  .pos-payment--inline .pos-payment__cash-summary-label,
  .pos-product-card__cat,
  .pos-product-card__name,
  .pos-products-search-row__toggle,
  .pos-receipt__item-name,
  .pos-terminal .pos-cart-item__name,
  .product-booking-selector__step-label,
  .products-workspace-gallery-item__btn,
  .products-workspace-inventory-movements-table td:nth-child(1),
  .products-workspace-inventory-movements-table th:nth-child(1),
  .products-workspace-maten-table__label,
  .products-workspace-module-card__field-value,
  .products-workspace-variants-list__row--header > .products-workspace-variants-list__cell,
  .products-workspace-variants-list__variant-label,
  .products-workspace-variants-table .admin-v2-collection-table__primary,
  .psp-webhook-url-text,
  .pw-cat-intro > span,
  .sidebar__user-name,
  .staff-access-scope-chip__path,
  .text-truncate,
  .today-dashboard-action__copy strong,
  .truncate,
  .universal-search__item-name,
  .website-editor-content-tabs__label,
  body.website-editor-active #website-editor-root .admin-capability-action-bar__context-copy strong
) {
  unicode-bidi: plaintext;
}

}

@layer tenant {
/**
 * TENANT OVERRIDE VARIABLES
 * Placeholder voor runtime tenant customization
 * 
 * AI-NOTE: Deze variabelen worden overschreven door:
 * 1. Tenant configuratie in database
 * 2. Runtime CSS injection via injectTenantStyles()
 * 
 * USAGE:
 * Components refereren naar --tenant-* variabelen.
 * Defaults fallback naar theme tokens.
 * Tenant kan alleen deze variabelen overschrijven, niet de theme tokens.
 */

:root {
  /* ===== BRAND COLORS (tenant customizable) ===== */
  --tenant-accent: var(--accent);
  --tenant-accent-light: var(--accent-light);
  --tenant-accent-dim: var(--accent-dim);
  --tenant-accent-glow: var(--accent-glow);
  
  /* ===== TYPOGRAPHY (tenant customizable) ===== */
  --tenant-font-main: var(--font-sans);
  --tenant-font-heading: var(--font-sans);
  
  /* ===== HEADER VARIANT (set by admin choice) ===== */
  /* Options: minimal | full | centered | split */
  /* This is used for conditional styling if needed */
  
  /* ===== FOOTER VARIANT (set by admin choice) ===== */
  /* Options: simple | detailed | links | minimal */
  
  /* ===== CUSTOM LOGO ===== */
  /* Set via CSS custom property from tenant config */
  --tenant-logo-url: none;
  --tenant-logo-width: auto;
  --tenant-logo-height: 40px;
}

/* 
 * RUNTIME INJECTION EXAMPLE:
 * 
 * <style id="tenant-overrides">
 *   :root {
 *     --tenant-accent: #e91e63;
 *     --tenant-accent-light: #f48fb1;
 *     --tenant-font-main: 'Poppins', sans-serif;
 *   }
 * <\/style>
 */

}