/* DS master stylesheet — PostCSS resolves @imports into dist/ds.css. */

/* Tokens */

/* Token layer — import order matters */

/* Core tokens — raw palette values. Never reference directly in components;
   always go through a semantic token. */

:root {
  /* Neutral */
  --ds-color-neutral-0: #ffffff;
  --ds-color-neutral-25: #f8fafc;
  --ds-color-neutral-50: #f2f5f9;
  --ds-color-neutral-75: #edf1f6;
  --ds-color-neutral-100: #e7ecf2;
  --ds-color-neutral-200: #dee4eb;
  --ds-color-neutral-300: #d4dbe3;
  --ds-color-neutral-400: #c9d1da;
  --ds-color-neutral-500: #aeb7c1;
  --ds-color-neutral-600: #717987;
  --ds-color-neutral-700: #515663;
  --ds-color-neutral-800: #454954;
  --ds-color-neutral-900: #383c45;
  --ds-color-neutral-950: #2a2f38;
  --ds-color-neutral-975: #21262f;
  --ds-color-neutral-980: #181c24;
  --ds-color-neutral-985: #0f1217;
  --ds-color-neutral-990: #07090c;
  --ds-color-neutral-1000: #000000;

  /* Brand — Niagara */
  --ds-color-brand-niagara-50: #ebfef7;
  --ds-color-brand-niagara-100: #d0fbea;
  --ds-color-brand-niagara-200: #a4f6da;
  --ds-color-brand-niagara-300: #6aebc8;
  --ds-color-brand-niagara-400: #2fd8af;
  --ds-color-brand-niagara-500: #0abf9a;
  --ds-color-brand-niagara-600: #00a385;
  --ds-color-brand-niagara-700: #007c69;
  --ds-color-brand-niagara-800: #036253;
  --ds-color-brand-niagara-900: #045046;
  --ds-color-brand-niagara-950: #012d29;

  /* Brand — Orange */
  --ds-color-brand-orange-50: #fff3ed;
  --ds-color-brand-orange-100: #ffe3d5;
  --ds-color-brand-orange-200: #fdc4ab;
  --ds-color-brand-orange-300: #fc9b75;
  --ds-color-brand-orange-400: #f96338;
  --ds-color-brand-orange-500: #f74018;
  --ds-color-brand-orange-600: #e8270e;
  --ds-color-brand-orange-700: #c01a0e;
  --ds-color-brand-orange-800: #991713;
  --ds-color-brand-orange-900: #7b1513;

  /* Utility — Blue */
  --ds-color-utility-blue-50: #ecf5fe;
  --ds-color-utility-blue-100: #cae5fc;
  --ds-color-utility-blue-200: #a9d4fa;
  --ds-color-utility-blue-300: #82c1f7;
  --ds-color-utility-blue-400: #5caef5;
  --ds-color-utility-blue-500: #3098f2;
  --ds-color-utility-blue-600: #0d77d3;
  --ds-color-utility-blue-700: #0b62ad;
  --ds-color-utility-blue-800: #08467d;
  --ds-color-utility-blue-900: #052e52;

  /* Utility — Cyan */
  --ds-color-utility-cyan-50: #ecfeff;
  --ds-color-utility-cyan-100: #ccf7ff;
  --ds-color-utility-cyan-200: #9eeeff;
  --ds-color-utility-cyan-300: #5ee0ff;
  --ds-color-utility-cyan-400: #3bd4f7;
  --ds-color-utility-cyan-500: #24bde2;
  --ds-color-utility-cyan-600: #1d9cb8;
  --ds-color-utility-cyan-700: #127e94;
  --ds-color-utility-cyan-800: #096070;
  --ds-color-utility-cyan-900: #04414d;

  /* Utility — Green */
  --ds-color-utility-green-50: #f1fcf3;
  --ds-color-utility-green-100: #defae4;
  --ds-color-utility-green-200: #bef4cb;
  --ds-color-utility-green-300: #8beaa2;
  --ds-color-utility-green-400: #51d773;
  --ds-color-utility-green-500: #27af4a;
  --ds-color-utility-green-600: #1d9c3e;
  --ds-color-utility-green-700: #1a7b33;
  --ds-color-utility-green-800: #1a612d;
  --ds-color-utility-green-900: #175028;

  /* Utility — Lime */
  --ds-color-utility-lime-50: #f7fee7;
  --ds-color-utility-lime-100: #ecfccb;
  --ds-color-utility-lime-200: #d9f99d;
  --ds-color-utility-lime-300: #bef264;
  --ds-color-utility-lime-400: #a3e635;
  --ds-color-utility-lime-500: #84cc16;
  --ds-color-utility-lime-600: #65a30d;
  --ds-color-utility-lime-700: #4d7c0f;
  --ds-color-utility-lime-800: #3f6212;
  --ds-color-utility-lime-900: #365314;

  /* Utility — Yellow */
  --ds-color-utility-yellow-50: #fffaeb;
  --ds-color-utility-yellow-100: #fef1c7;
  --ds-color-utility-yellow-200: #fde28a;
  --ds-color-utility-yellow-300: #fcd34d;
  --ds-color-utility-yellow-400: #fbc924;
  --ds-color-utility-yellow-500: #f5be0b;
  --ds-color-utility-yellow-600: #d9a806;
  --ds-color-utility-yellow-700: #b48c09;
  --ds-color-utility-yellow-800: #92730e;
  --ds-color-utility-yellow-900: #785f0f;

  /* Utility — Red */
  --ds-color-utility-red-50: #fff0f0;
  --ds-color-utility-red-100: #ffdddd;
  --ds-color-utility-red-200: #ffc0c0;
  --ds-color-utility-red-300: #ff9494;
  --ds-color-utility-red-400: #ff5757;
  --ds-color-utility-red-500: #ff2323;
  --ds-color-utility-red-600: #ff0000;
  --ds-color-utility-red-700: #d70000;
  --ds-color-utility-red-800: #b10303;
  --ds-color-utility-red-900: #920a0a;
  --ds-color-utility-red-950: #5f0707;

  /* Utility — Purple */
  --ds-color-utility-purple-50: #f7f8fb;
  --ds-color-utility-purple-100: #f0f0f7;
  --ds-color-utility-purple-200: #e3e2f2;
  --ds-color-utility-purple-300: #cdcbe7;
  --ds-color-utility-purple-400: #b2aed7;
  --ds-color-utility-purple-500: #948ac5;
  --ds-color-utility-purple-600: #8272b5;
  --ds-color-utility-purple-700: #705fa2;
  --ds-color-utility-purple-800: #4e4270;
  --ds-color-utility-purple-900: #4e4270;

  /* Utility — Orange Peel */
  --ds-color-utility-orange-peel-50: #fff8eb;
  --ds-color-utility-orange-peel-100: #feeac7;
  --ds-color-utility-orange-peel-200: #fdd28a;
  --ds-color-utility-orange-peel-300: #fcbb4d;
  --ds-color-utility-orange-peel-400: #fbab24;
  --ds-color-utility-orange-peel-500: #f59e0b;
  --ds-color-utility-orange-peel-600: #d98b06;
  --ds-color-utility-orange-peel-700: #b47409;
  --ds-color-utility-orange-peel-800: #92610e;
  --ds-color-utility-orange-peel-900: #92610e;
}

/* Static semantic tokens — theme-invariant: typography, spacing, radius,
   borders, opacity, icon strokes. No colour tokens here. */

:root {
  /* Typography */
  /* For font sizes at (10 + 4n) pixels, add 0.001rem to avoid Chrome-based browser misalignment on external monitors. */
  --ds-font-family-system:  "Zalando sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-family-display: "Optik DemiBold", Georgia, serif;
  --ds-font-family-base:    var(--ds-font-family-system);
  --ds-font-family-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ds-font-size-2xs:  0.75rem;    /* 12px */
  --ds-font-size-xs:   0.8125rem;  /* 13px */
  --ds-font-size-sm:   0.876rem;   /* 14px */
  --ds-font-size-base: 1rem;       /* 16px */
  --ds-font-size-lg:   1.126rem;   /* 18px */
  --ds-font-size-xl:   1.25rem;    /* 20px */
  --ds-font-size-2xl:  1.5rem;     /* 24px */
  --ds-font-size-3xl:  2rem;       /* 32px */
  --ds-font-size-4xl:  2.5rem;     /* 40px */
  --ds-font-size-5xl:  3rem;       /* 48px */

  --ds-font-weight-regular:  400;
  --ds-font-weight-medium:   500;
  --ds-font-weight-semibold: 600;

  /* Spacing (rem — scales with user font-size preference) */
  --ds-space-0:   0;
  --ds-space-2:   0.125rem;   /* 2px */
  --ds-space-3:   0.1875rem;  /* 3px */
  --ds-space-4:   0.25rem;    /* 4px */
  --ds-space-6:   0.375rem;   /* 6px */
  --ds-space-8:   0.5rem;     /* 8px */
  --ds-space-12:  0.75rem;    /* 12px */
  --ds-space-16:  1rem;       /* 16px */
  --ds-space-20:  1.25rem;    /* 20px */
  --ds-space-24:  1.5rem;     /* 24px */
  --ds-space-28:  1.75rem;    /* 28px */
  --ds-space-32:  2rem;       /* 32px */
  --ds-space-36:  2.25rem;    /* 36px */
  --ds-space-40:  2.5rem;     /* 40px */
  --ds-space-48:  3rem;       /* 48px */
  --ds-space-64:  4rem;       /* 64px */
  --ds-space-80:  5rem;       /* 80px */
  --ds-space-96:  6rem;       /* 96px */
  --ds-space-128: 8rem;       /* 128px */

  /* Border radius (px — intentionally does not scale with text) */
  --ds-radius-none: 0;
  --ds-radius-2xs:  4px;
  --ds-radius-xs:   6px;
  --ds-radius-sm:   8px;
  --ds-radius-md:   10px;
  --ds-radius-lg:   14px;
  --ds-radius-xl:   16px;
  --ds-radius-2xl:  24px;
  --ds-radius-3xl:  32px;
  --ds-radius-round: 999px;

  /* Line heights */
  --ds-line-height-tight:   1;    /* headings, labels */
  --ds-line-height-snug:    1.2;  /* subheadings, UI text */
  --ds-line-height-normal:  1.4;  /* body copy */

  /* Border widths */
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-width-thin:   var(--ds-border-width-1);
  --ds-border-width-medium: var(--ds-border-width-2);

  /* Opacity */
  --ds-opacity-15: 0.15;
  --ds-opacity-25: 0.25;
  --ds-opacity-60: 0.60;
  --ds-opacity-75: 0.75;

  /* Shadows */
  --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Icon strokes */
  --ds-icon-stroke-regular: 1;
  --ds-icon-stroke-medium:  1.25;
  --ds-icon-stroke-semibold: 1.5;
}

/* Themed semantic tokens — all colour-dependent tokens, per [data-theme].
   Toggle via document.documentElement.setAttribute('data-theme', 'dark'). */

/* Light theme */

[data-theme="light"] {
  /* Actions */
  --ds-action-accent-button:              var(--ds-color-brand-niagara-700);
  --ds-action-accent-button-hover:        var(--ds-color-brand-niagara-800);
  --ds-action-secondary-button:           var(--ds-color-neutral-75);
  --ds-action-secondary-button-hover:     var(--ds-color-neutral-100);
  --ds-action-secondary-button-strong:    var(--ds-color-neutral-300);
  --ds-action-secondary-button-strong-hover: var(--ds-color-neutral-500);
  --ds-action-destructive-button:         var(--ds-color-utility-red-700);
  --ds-action-destructive-button-hover:   var(--ds-color-brand-orange-800);
  --ds-action-sidebar-item-active-bg:     rgba(3, 98, 83, 0.15);

  /* Background */
  --ds-background-page:                   var(--ds-color-neutral-50);
  --ds-background-container:              var(--ds-color-neutral-0);
  --ds-background-controls:               var(--ds-color-neutral-25);
  --ds-background-controls-hover:         var(--ds-color-neutral-100);
  --ds-background-controls-container:     var(--ds-color-neutral-100);
  --ds-background-content-container:      var(--ds-color-neutral-100);
  --ds-background-disabled:               var(--ds-color-neutral-200);
  --ds-background-tooltip:                var(--ds-color-neutral-75);
  --ds-background-overlay:                rgba(0, 0, 0, 0.4);
  --ds-background-destructive-subtle:     var(--ds-color-utility-red-50);

  /* Border */
  --ds-border-accent-button:              var(--ds-color-brand-niagara-700);
  --ds-border-accent-button-hover:        var(--ds-color-brand-niagara-800);
  --ds-border-flat:                       var(--ds-color-neutral-200);
  --ds-border-focused:                    var(--ds-color-brand-niagara-400);
  --ds-border-error:                      var(--ds-color-utility-red-600);
  --ds-border-sidebar-item-active:        rgba(3, 98, 83, 0.15);

  /* Content (text / icon) */
  --ds-content-primary:                   var(--ds-color-neutral-990);
  --ds-content-secondary:                 var(--ds-color-neutral-700);
  --ds-content-tertiary:                  #6f7684;
  --ds-content-disabled:                  var(--ds-color-neutral-500);
  --ds-content-success:                   var(--ds-color-utility-green-500);
  --ds-content-warning:                   var(--ds-color-utility-yellow-500);
  --ds-content-error:                     var(--ds-color-utility-red-600);
  --ds-content-alert:                     var(--ds-color-utility-orange-peel-600);
  --ds-content-accent-brand:              var(--ds-color-brand-niagara-700);
  --ds-content-accent-brand-light:        var(--ds-color-brand-niagara-300);

  /* Dataviz */
  --ds-dataviz-pink:                      #ca2b90;
  --ds-dataviz-purple:                    #8145b5;
  --ds-dataviz-violet:                    #5753c6;
  --ds-dataviz-blue:                      #0d77d3;
  --ds-dataviz-turquoise:                 #3f9fa1;
  --ds-dataviz-lime:                      #99bc1a;
  --ds-dataviz-yellow:                    #d69600;
  --ds-dataviz-orange:                    #d56b01;
  --ds-dataviz-niagara:                   var(--ds-color-brand-niagara-600);

  /* Avatar */
  --ds-avatar-rose:                       #e11d48;
  --ds-avatar-fuchsia:                    #c026d3;
  --ds-avatar-purple:                     #9333ea;
  --ds-avatar-indigo:                     #4f46e4;
  --ds-avatar-blue:                       #3b82f6;
  --ds-avatar-sky:                        #0ea5e9;
  --ds-avatar-cloud:                      #0891b2;
  --ds-avatar-emerald:                    #10b981;
  --ds-avatar-lime:                       #84cc16;
  --ds-avatar-amber:                      #f59e0b;
  --ds-avatar-overlay:                    rgba(0, 0, 0, 0);

  /* Gradient */
  --ds-gradient-flat:                     var(--ds-color-neutral-100);
  --ds-gradient-border-neutral-start:     #d8dbe0;
  --ds-gradient-border-neutral-end:       rgba(216, 219, 224, 0);
  --ds-gradient-neutral-start:            var(--ds-color-neutral-75);
  --ds-gradient-neutral-end:              var(--ds-color-neutral-300);
  --ds-gradient-linear-start:             rgba(255, 255, 255, 0.5);
  --ds-gradient-linear-end:               rgba(255, 255, 255, 0);
  --ds-gradient-flat-start:               rgba(53, 57, 66, 0.5);
  --ds-gradient-flat-end:                 rgba(53, 57, 66, 0);
  --ds-gradient-accent-genoa-start:       rgba(56, 117, 109, 0);
  --ds-gradient-accent-genoa-end:         rgba(56, 117, 109, 1);
  --ds-gradient-sidebar-active-glow-start: #86b6a9;
  --ds-gradient-sidebar-active-glow-end:  rgba(222, 237, 235, 0);

  /* Checkbox */
  --ds-background-checkbox-checked-start: var(--ds-color-brand-niagara-500);
  --ds-background-checkbox-checked-end:   var(--ds-color-brand-niagara-700);

  /* Aliases (referenced by overrides & base styles) */
  --ds-action-primary:         var(--ds-action-accent-button);
  --ds-action-primary-hover:   var(--ds-action-accent-button-hover);
  --ds-action-primary-subtle:  var(--ds-color-brand-niagara-50);
  --ds-content-link:           var(--ds-content-accent-brand);
  --ds-border-default:         var(--ds-border-flat);
  --ds-border-focus:           var(--ds-border-focused);
  --ds-background-surface:     var(--ds-background-container);
  --ds-background-subtle:      var(--ds-background-controls);
  --ds-background-muted:       var(--ds-background-controls-hover);
}

/* Dark theme */

[data-theme="dark"] {
  /* Actions */
  --ds-action-accent-button:              var(--ds-color-brand-niagara-700);
  --ds-action-accent-button-hover:        var(--ds-color-brand-niagara-800);
  --ds-action-secondary-button:           var(--ds-color-neutral-950);
  --ds-action-secondary-button-hover:     var(--ds-color-neutral-975);
  --ds-action-secondary-button-strong:    var(--ds-color-neutral-950);
  --ds-action-secondary-button-strong-hover: var(--ds-color-neutral-975);
  --ds-action-destructive-button:         var(--ds-color-utility-red-900);
  --ds-action-destructive-button-hover:   var(--ds-color-utility-red-950);
  --ds-action-sidebar-item-active-bg:     rgba(3, 98, 83, 0.15);

  /* Background */
  --ds-background-page:                   var(--ds-color-neutral-985);
  --ds-background-container:              var(--ds-color-neutral-990);
  --ds-background-controls:               var(--ds-color-neutral-980);
  --ds-background-controls-hover:         var(--ds-color-neutral-975);
  --ds-background-controls-container:     var(--ds-color-neutral-980);
  --ds-background-content-container:      var(--ds-color-neutral-980);
  --ds-background-disabled:               var(--ds-color-neutral-980);
  --ds-background-tooltip:                var(--ds-color-neutral-950);
  --ds-background-overlay:                rgba(0, 0, 0, 0.6);
  --ds-background-destructive-subtle:     var(--ds-color-utility-red-950);

  /* Border */
  --ds-border-accent-button:              var(--ds-color-brand-niagara-700);
  --ds-border-accent-button-hover:        var(--ds-color-brand-niagara-800);
  --ds-border-flat:                       var(--ds-color-neutral-900);
  --ds-border-focused:                    var(--ds-color-brand-niagara-400);
  --ds-border-error:                      var(--ds-color-utility-red-400);
  --ds-border-sidebar-item-active:        rgba(3, 98, 83, 0.15);

  /* Content (text / icon) */
  --ds-content-primary:                   var(--ds-color-neutral-0);
  --ds-content-secondary:                 var(--ds-color-neutral-500);
  --ds-content-tertiary:                  var(--ds-color-neutral-600);
  --ds-content-disabled:                  var(--ds-color-neutral-600);
  --ds-content-success:                   var(--ds-color-utility-green-500);
  --ds-content-warning:                   var(--ds-color-utility-yellow-300);
  --ds-content-error:                     var(--ds-color-utility-red-400);
  --ds-content-alert:                     var(--ds-color-utility-orange-peel-500);
  --ds-content-accent-brand:              var(--ds-color-brand-niagara-400);
  --ds-content-accent-brand-light:        var(--ds-color-brand-niagara-300);

  /* Dataviz */
  --ds-dataviz-pink:                      #df68b3;
  --ds-dataviz-purple:                    #a774d2;
  --ds-dataviz-violet:                    #8585e0;
  --ds-dataviz-blue:                      #0a94ff;
  --ds-dataviz-turquoise:                 #65c0c3;
  --ds-dataviz-lime:                      #b6e01f;
  --ds-dataviz-yellow:                    #ffb300;
  --ds-dataviz-orange:                    #f47a01;
  --ds-dataviz-niagara:                   var(--ds-color-brand-niagara-600);

  /* Avatar */
  --ds-avatar-rose:                       #881337;
  --ds-avatar-fuchsia:                    #86198f;
  --ds-avatar-purple:                     #6b21a8;
  --ds-avatar-indigo:                     #3730a3;
  --ds-avatar-blue:                       #1d4ed8;
  --ds-avatar-sky:                        #0369a1;
  --ds-avatar-cloud:                      #155e75;
  --ds-avatar-emerald:                    #047857;
  --ds-avatar-lime:                       #4d7c0f;
  --ds-avatar-amber:                      #b45309;
  --ds-avatar-overlay:                    rgba(0, 0, 0, 0.2);

  /* Gradient */
  --ds-gradient-flat:                     var(--ds-color-neutral-900);
  --ds-gradient-border-neutral-start:     #353942;
  --ds-gradient-border-neutral-end:       rgba(53, 57, 66, 0);
  --ds-gradient-neutral-start:            var(--ds-color-neutral-985);
  --ds-gradient-neutral-end:              var(--ds-color-neutral-950);
  --ds-gradient-linear-start:             rgba(255, 255, 255, 0.3);
  --ds-gradient-linear-end:               rgba(255, 255, 255, 0);
  --ds-gradient-flat-start:               rgba(53, 57, 66, 0.3);
  --ds-gradient-flat-end:                 rgba(53, 57, 66, 0);
  --ds-gradient-accent-genoa-start:       rgba(56, 117, 109, 0);
  --ds-gradient-accent-genoa-end:         rgba(56, 117, 109, 1);
  --ds-gradient-sidebar-active-glow-start: var(--ds-color-brand-niagara-900);
  --ds-gradient-sidebar-active-glow-end:  rgba(3, 98, 83, 0);

  /* Checkbox */
  --ds-background-checkbox-checked-start: var(--ds-color-brand-niagara-500);
  --ds-background-checkbox-checked-end:   var(--ds-color-brand-niagara-700);

  /* Aliases (referenced by overrides & base styles) */
  --ds-action-primary:         var(--ds-action-accent-button);
  --ds-action-primary-hover:   var(--ds-action-accent-button-hover);
  --ds-action-primary-subtle:  var(--ds-color-brand-niagara-950);
  --ds-content-link:           var(--ds-content-accent-brand);
  --ds-border-default:         var(--ds-border-flat);
  --ds-border-focus:           var(--ds-border-focused);
  --ds-background-surface:     var(--ds-background-container);
  --ds-background-subtle:      var(--ds-background-controls);
  --ds-background-muted:       var(--ds-background-controls-hover);
}

/* Base */

/* Font faces — paths are relative to dist/ds.css (fonts copied into
   dist/fonts/ during build). */

/* Zalando Sans — variable */

@font-face {
  font-family: "Zalando sans";
  src: url("./fonts/zalando-sans/ZalandoSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zalando sans";
  src: url("./fonts/zalando-sans/ZalandoSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Optik — display font (trial) */

@font-face {
  font-family: "Optik";
  src: url("./fonts/optik/Optik-Regular-Trial.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optik";
  src: url("./fonts/optik/Optik-Italic-Trial.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Optik";
  src: url("./fonts/optik/Optik-Medium-Trial.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optik";
  src: url("./fonts/optik/Optik-MediumItalic-Trial.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Optik DemiBold";
  src: url("./fonts/optik/Optik-DemiBold-Trial.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optik DemiBold";
  src: url("./fonts/optik/Optik-DemiBoldItalic-Trial.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Optik";
  src: url("./fonts/optik/Optik-Bold-Trial.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optik";
  src: url("./fonts/optik/Optik-BoldItalic-Trial.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Minimal reset — only what Bootstrap's normalise doesn't already cover. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

nav ul,
nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Per-component rules override this. */

:focus-visible {
  outline: var(--ds-border-width-medium) solid var(--ds-border-focus);
  outline-offset: 2px;
}

button {
  cursor: pointer;
}

/* !important so display utilities and component rules can't override it. */

[hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Base — applies root token defaults to the document body. */

html {
  font-size: 100%;    /* preserves user browser font-size preference */
  background-color: var(--ds-background-page);
}

/* Fallback for browsers without the View Transitions API: suppress
   transitions during theme switches to prevent a colour flash. */

html.ds-no-transition,
html.ds-no-transition *,
html.ds-no-transition *::before,
html.ds-no-transition *::after {
  transition: none !important;
}

/* View Transitions API — radial reveal for theme switches. */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
  clip-path: circle(0px at 50% 50%);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

body {
  background-color: var(--ds-background-page);
  color:            var(--ds-content-primary);
  font-family:      var(--ds-font-family-base);
  font-size:        var(--ds-font-size-base);
  font-weight:      var(--ds-font-weight-regular);
  line-height:      var(--ds-line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--ds-content-link);
  text-decoration: underline;
}

/* a:hover {
  color: var(--ds-action-primary-hover);
} */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-content-primary);
}

hr {
  border: none;
  border-top: var(--ds-border-width-thin) solid var(--ds-border-default);
  margin: var(--ds-space-6) 0;
}

/* Third-party overrides */

/* Re-points --bs-* variables to --ds-* tokens so Bootstrap components align
   visually without modifying Bootstrap itself. */

:root {
  --bs-primary:        var(--ds-action-primary);
  --bs-primary-rgb:    0, 124, 105;  /* Match --ds-color-brand-niagara-700 */

  --bs-secondary:      var(--ds-content-secondary);

  --bs-body-color:     var(--ds-content-primary);
  --bs-body-bg:        var(--ds-background-page);
  --bs-body-font-family: var(--ds-font-family-base);
  --bs-body-font-size: var(--ds-font-size-base);
  --bs-body-line-height: var(--ds-line-height-normal);

  --bs-link-color:     var(--ds-content-link);
  --bs-link-hover-color: var(--ds-action-primary-hover);

  --bs-border-color:   var(--ds-border-default);
  --bs-border-radius:  var(--ds-radius-md);
  --bs-border-radius-sm: var(--ds-radius-sm);
  --bs-border-radius-lg: var(--ds-radius-lg);

  --bs-card-bg:        var(--ds-background-surface);
  --bs-card-border-color: var(--ds-border-default);
  --bs-card-border-radius: var(--ds-radius-lg);

  --bs-input-bg:       var(--ds-background-surface);
  --bs-input-border-color: var(--ds-border-default);
  --bs-input-focus-border-color: var(--ds-border-focus);

  --bs-box-shadow-sm:  var(--ds-shadow-sm);
  --bs-box-shadow:     var(--ds-shadow-md);
  --bs-box-shadow-lg:  var(--ds-shadow-lg);
}

/* Bootstrap table — DS owns the full visual (row-pill hover, padding, borders,
   header typography). .table-striped and .table-bordered are unsupported.

   Bridge tokens live on .table (not :root) because Bootstrap 5.3 redeclares
   --bs-table-* on the .table class itself, out-specificity-ing :root and
   leaking --bs-body-bg (#fff) into every cell under [data-theme="dark"]. */

.table {
  --bs-table-color:        var(--ds-content-primary);
  --bs-table-bg:           transparent;
  --bs-table-border-color: var(--ds-border-flat);
  --bs-table-accent-bg:    transparent;
  --bs-table-hover-bg:     var(--ds-background-controls-hover);
  --bs-table-hover-color:  var(--ds-content-primary);
  --bs-table-active-bg:    var(--ds-background-controls-hover);
  --bs-table-active-color: var(--ds-content-primary);

  width: 100%;
  border-collapse: collapse;
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  color: var(--ds-content-primary);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--ds-border-flat);
}

.table > thead > tr > th {
  padding: 0;
  text-align: left;
  white-space: nowrap;
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-content-secondary);
  font-size: var(--ds-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table > tbody > tr > td {
  padding: var(--ds-space-16);
  border-bottom: var(--ds-border-width-1) solid var(--ds-border-flat);
  vertical-align: middle;
}

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

/* Anchor for the DS row checkbox (ds-table--selectable). */

.table > tbody > tr {
  position: relative;
}

.table > tbody > tr:hover > td {
  background-color: var(--ds-background-controls-hover);
  border-bottom-color: transparent;
}

.table > tbody > tr:hover > td:first-child {
  border-top-left-radius: var(--ds-radius-xl);
  border-bottom-left-radius: var(--ds-radius-xl);
}

.table > tbody > tr:hover > td:last-child {
  border-top-right-radius: var(--ds-radius-xl);
  border-bottom-right-radius: var(--ds-radius-xl);
}

/* Suppress the row-above's bottom border so the hovered pill reads as lifted. */

.table > tbody > tr:has(+ tr:hover) > td {
  border-bottom-color: transparent;
}

/* Compact mode is body-only — header keeps base padding + 40px height as a
   stable anchor. `td, th` enumerated (not `> *`) to match base specificity. */

.table-sm > tbody > tr > td,
.table-sm > tbody > tr > th,
.table-sm > tfoot > tr > td,
.table-sm > tfoot > tr > th {
  padding: var(--ds-space-8) var(--ds-space-16);
}

.table-responsive {
  background-color: var(--ds-background-container);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}

/* Workaround for border-collapse + border-radius + overflow:hidden clipping
   bug: browsers fail to mask painted cells at the wrapper's rounded corners.
   :not(:hover) so the hover pill's xl radius wins on the last row. */

.table-responsive > .table > tbody > tr:last-child:not(:hover) > td:first-child,
.ds-table-wrapper     > .table > tbody > tr:last-child:not(:hover) > td:first-child {
  border-bottom-left-radius: inherit;
}

.table-responsive > .table > tbody > tr:last-child:not(:hover) > td:last-child,
.ds-table-wrapper     > .table > tbody > tr:last-child:not(:hover) > td:last-child {
  border-bottom-right-radius: inherit;
}

/* Page-header content outside a .container(-fluid) still gets the 7rem gutter. */

.ds-shell__header-wrapper > *:not(.ds-shell-header):not(.container-fluid):not(.container) {
  padding-left: 7rem;
  padding-right: 7rem;
}

.ds-shell__header-wrapper > .container-fluid,
.ds-shell__header-wrapper > .container,
.ds-content > .container-fluid,
.ds-content > .container {
  --ds-content-padding-x: 7rem;
  padding-left: var(--ds-content-padding-x);
  padding-right: var(--ds-content-padding-x);
}

.ds-content > .container-fluid,
.ds-content > .container {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  gap: var(--ds-space-24);
}

/* Override — bootstrap-table plugin re-skinned with DS tokens. */

.bootstrap-table .fixed-table-toolbar {
  background-color: var(--ds-background-surface);
  border-bottom: var(--ds-border-width-thin) solid var(--ds-border-default);
  padding: var(--ds-space-3) var(--ds-space-4);
}

.bootstrap-table .fixed-table-container {
  border: var(--ds-border-width-thin) solid var(--ds-border-default);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}

.bootstrap-table .fixed-table-body {
  background-color: var(--ds-background-surface);
}

.bootstrap-table th.sortable .th-inner::after {
  color: var(--ds-content-tertiary);
}

.bootstrap-table th.sortable.asc .th-inner::after,
.bootstrap-table th.sortable.desc .th-inner::after {
  color: var(--ds-action-primary);
}

.bootstrap-table .pagination-detail,
.bootstrap-table .page-list {
  color: var(--ds-content-secondary);
  font-size: var(--ds-font-size-sm);
}

/* Override — Select2 dropdowns themed with DS tokens. */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--ds-background-surface);
  border: var(--ds-border-width-thin) solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
  min-height: 2.25rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ds-border-focus);
  outline: none;
  box-shadow: 0 0 0 var(--ds-border-width-medium) color-mix(in srgb, var(--ds-border-focus) 20%, transparent);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ds-content-primary);
  padding-left: var(--ds-space-3);
  line-height: 2.25rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ds-content-tertiary);
}

.select2-dropdown {
  background-color: var(--ds-background-surface);
  border: var(--ds-border-width-thin) solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ds-action-primary-subtle);
  color: var(--ds-action-primary);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--ds-background-subtle);
  color: var(--ds-content-primary);
}

.select2-search--dropdown .select2-search__field {
  background-color: var(--ds-background-subtle);
  border: var(--ds-border-width-thin) solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-content-primary);
  padding: var(--ds-space-2) var(--ds-space-3);
}

/* Override — Spectrum colorpicker mapped onto DS tokens. */

.sp-container {
  background-color: var(--ds-background-surface);
  border: var(--ds-border-width-thin) solid var(--ds-border-default);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
}

.sp-input {
  background-color: var(--ds-background-subtle);
  border: var(--ds-border-width-thin) solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-content-primary);
  font-family: var(--ds-font-family-mono);
  font-size: var(--ds-font-size-sm);
}

.sp-input:focus {
  border-color: var(--ds-border-focus);
  outline: none;
}

.sp-button {
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-family-base);
  font-size: var(--ds-font-size-sm);
}

.sp-choose {
  background-color: var(--ds-action-primary);
  border-color: var(--ds-action-primary);
}

.sp-cancel {
  color: var(--ds-content-secondary);
}

/* Override — TinyMCE skin mapped onto DS tokens. */

:root {
  --color-tint:      var(--ds-background-subtle);
  --color-default:   var(--ds-content-primary);
  --color-accent:    var(--ds-action-primary);
  --color-border:    var(--ds-border-default);
  --border-radius:   var(--ds-radius-md);
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary {
  background-color: var(--ds-background-surface);
  border-bottom: var(--ds-border-width-thin) solid var(--ds-border-default);
}

.tox .tox-edit-area {
  border: var(--ds-border-width-thin) solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
}

.tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type) {
  border-right: var(--ds-border-width-thin) solid var(--ds-border-default);
}

.tox .tox-tbtn:hover {
  background-color: var(--ds-background-subtle);
  color: var(--ds-content-primary);
  border-color: transparent;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
  background-color: var(--ds-action-primary-subtle);
  color: var(--ds-action-primary);
}

/* Components */

/* Shared floating-panel surface + item base styles. Existing components
   receive these via grouped selectors; new components can use .ds-panel
   / .ds-panel__item directly. */

.ds-panel,
.ds-dropdown,
.ds-sort-btn__panel {
  position: absolute;
  top: calc(100% + var(--ds-space-8));
  right: 0;
  z-index: var(--ds-panel-z, 200);
  min-width: var(--ds-panel-min-width, 11.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding: var(--ds-space-4);
  background-color: var(--ds-background-page);
  border: var(--ds-border-width-1) solid var(--ds-border-flat);
  border-radius: var(--ds-radius-sm);
  box-shadow: 0 2px 4px rgba(4, 23, 59, 0.15);
}

.ds-panel[hidden],
.ds-dropdown[hidden],
.ds-sort-btn__panel[hidden] {
  display: none;
}

/* Item row — includes button/link resets so it works on <a>, <button>, <li>. */

.ds-panel__item,
.ds-dropdown__item,
.ds-sort-btn__item,
.ds-combobox__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  height: 1.75rem;
  padding: 0 var(--ds-space-8);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-content-primary);
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.ds-panel__item:hover,
.ds-sort-btn__item:hover,
.ds-combobox__item:hover {
  background-color: var(--ds-background-controls-hover);
}

.ds-panel__item:focus-visible,
.ds-dropdown__item:focus-visible,
.ds-sort-btn__item:focus-visible,
.ds-combobox__item:focus-visible {
  outline: var(--ds-border-width-2) solid var(--ds-border-focused);
  outline-offset: -2px;
}

.ds-panel__item-icon,
.ds-dropdown__item-icon,
.ds-combobox__item-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--ds-content-secondary);
}

.ds-panel__item-label,
.ds-dropdown__item-label,
.ds-sort-btn__item-label,
.ds-combobox__item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* DS Action Button — small icon-only button for table row actions. */

.ds-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  color: var(--ds-content-secondary);
  transition: background-color 150ms ease, color 150ms ease;
}

.ds-action-btn .ds-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ds-action-btn:hover {
  background-color: var(--ds-action-secondary-button-strong);
  color: var(--ds-content-primary);
}

.ds-action-btn:active {
  background-color: var(--ds-action-secondary-button-strong-hover);
  color: var(--ds-content-primary);
}

.ds-action-btn:focus-visible {
  outline: var(--ds-border-width-2) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ds-action-btn:disabled,
.ds-action-btn[aria-disabled="true"] {
  opacity: var(--ds-opacity-60);
  pointer-events: none;
  cursor: not-allowed;
}

.ds-action-btn--xs .ds-icon {
  width: 16px;
  height: 16px;
}

/* DS Status Badge — outlined pill for entity status. */

.ds-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-4);
  height: 24px;
  padding: 4px var(--ds-space-8);
  border: var(--ds-border-width-1) solid var(--ds-border-flat);
  border-radius: var(--ds-radius-round);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-content-primary);
  white-space: nowrap;
  vertical-align: middle;
}

.ds-status-badge__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Severity: icon colour only. */

.ds-status-badge--success .ds-status-badge__icon { color: var(--ds-content-success); }

.ds-status-badge--error   .ds-status-badge__icon { color: var(--ds-content-error); }

.ds-status-badge--warning .ds-status-badge__icon { color: var(--ds-content-warning); }

.ds-status-badge--alert   .ds-status-badge__icon { color: var(--ds-content-alert); }

/* DS Badge Number — bordered numeric counter pill. */

.ds-badge-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px; /* ⚠ HARDCODED: no --ds-space-6 token */
  border: var(--ds-border-width-1) solid var(--ds-border-flat);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-2xs);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-content-accent-brand);
  flex-shrink: 0;
}

/* DS Button */

.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-8) var(--ds-space-12);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-height-snug);
  border-radius: var(--ds-radius-xl);
  border: none;
  box-shadow: inset 0 0 0 var(--ds-border-width-1) transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease,
              box-shadow 110ms ease-out,
              color 150ms ease,
              padding-top 110ms ease-out,
              padding-bottom 110ms ease-out;
  white-space: nowrap;
  user-select: none;
}

.ds-button:focus-visible {
  outline: var(--ds-border-width-2) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ds-button .ds-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ds-button--primary {
  background-color: var(--ds-action-accent-button);
  color: var(--ds-color-neutral-0); /* TODO: promote to --ds-content-on-accent semantic token */
  box-shadow: inset 0 0 0 var(--ds-border-width-1) var(--ds-action-accent-button),
              inset 0 2px 2px 0 rgba(255, 255, 255, 0.40);
}

.ds-button--primary:hover {
  background-color: var(--ds-action-accent-button-hover);
  box-shadow: inset 0 0 0 var(--ds-border-width-1) var(--ds-action-accent-button-hover),
              inset 0 2px 2px 0 rgba(255, 255, 255, 0.40);
}

.ds-button--primary:active {
  background-color: var(--ds-action-accent-button-hover);
  /* Pressed state — the box itself doesn't move. The cavity is drawn with shadow,
     and the content is nudged 1px down via asymmetric padding so the label and icon
     "sit inside" the recessed surface. Overall button height is unchanged because
     the bottom padding gives up the pixel the top padding takes. Press and release
     share the base rule's ~110ms ease-out so both directions feel equally reactive. */
  box-shadow: inset 0 0 0 var(--ds-border-width-1) var(--ds-action-accent-button-hover),
              inset 0 2px 4px 0 rgba(0, 0, 0, 0.22),
              inset 0 -1px 1px 0 rgba(255, 255, 255, 0.12);
  padding-top: calc(var(--ds-space-8) + 1px);
  padding-bottom: calc(var(--ds-space-8) - 1px);
}

.ds-button--primary.ds-button--lg:active {
  padding-top: calc(var(--ds-space-12) + 1px);
  padding-bottom: calc(var(--ds-space-12) - 1px);
}

.ds-button--secondary {
  background-color: var(--ds-action-secondary-button);
  color: var(--ds-content-primary);
}

.ds-button--secondary:hover {
  background-color: var(--ds-action-secondary-button-hover);
}

.ds-button--secondary[aria-expanded="true"] {
  outline: var(--ds-border-width-1) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ds-button--ghost {
  background-color: transparent;
  color: var(--ds-content-accent-brand);
  box-shadow: inset 0 0 0 var(--ds-border-width-1) transparent;
}

.ds-button--ghost:hover {
  background-color: var(--ds-background-controls-hover);
}

.ds-button--destructive {
  background-color: var(--ds-action-destructive-button);
  color: var(--ds-color-neutral-0); /* TODO: promote to --ds-content-on-accent semantic token */
  box-shadow: inset 0 0 0 var(--ds-border-width-1) var(--ds-action-destructive-button);
}

.ds-button--destructive:hover {
  background-color: var(--ds-action-destructive-button-hover);
  box-shadow: inset 0 0 0 var(--ds-border-width-1) var(--ds-action-destructive-button-hover);
}

.ds-button--lg {
  padding: var(--ds-space-12) var(--ds-space-20);
  font-size: var(--ds-font-size-base);
}

.ds-button--icon {
  padding: var(--ds-space-8);
}

.ds-button--icon.ds-button--lg {
  padding: var(--ds-space-12);
}

.ds-button:disabled,
.ds-button[aria-disabled="true"] {
  opacity: var(--ds-opacity-60);
  pointer-events: none;
}

/* Dropdown Menu — action menu anchored to a trigger.
   Panel surface + item base styles come from _panel.css. */

.ds-dropdown {
  min-width: var(--ds-dropdown-min-width, 11.25rem);
}

/* Hover changes text-colour only (no background). */

.ds-dropdown__item {
  transition: color 150ms ease;
}

.ds-dropdown__item:hover,
.ds-dropdown__item:active {
  color: var(--ds-content-secondary);
  background-color: transparent;
  text-decoration: none;
}

.ds-dropdown__item:focus-visible {
  text-decoration: none;
}

img.ds-dropdown__item-icon {
  display: block;
  object-fit: cover;
}

.ds-dropdown__item--destructive {
  color: var(--ds-content-error);
}

.ds-dropdown__item--destructive .ds-dropdown__item-icon {
  color: var(--ds-content-error);
}

.ds-dropdown__item--destructive:hover,
.ds-dropdown__item--destructive:active,
.ds-dropdown__item--destructive:focus-visible {
  color: var(--ds-content-error);
}

/* DS Empty State */

.ds-empty-state {
  display: flex;
  align-items: flex-start;
  padding: var(--ds-space-32);
  border-radius: var(--ds-radius-lg);
}

.ds-empty-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-12);
  flex: 1 0 0;
  min-width: 0;
}

.ds-empty-state__icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.ds-empty-state__icon .ds-icon {
  width: 100%;
  height: 100%;
}

.ds-empty-state__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ds-empty-state__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-16);
  width: 100%;
}

.ds-empty-state__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-8);
  text-align: center;
  width: 100%;
}

.ds-empty-state__title {
  margin: 0;
  font-family: var(--ds-font-family-display);
  font-size: var(--ds-font-size-base);
  line-height: var(--ds-line-height-snug);
  color: var(--ds-content-primary);
  width: 100%;
}

.ds-empty-state__description {
  margin: 0;
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-normal);
  color: var(--ds-content-secondary);
  max-width: 328px;
  width: 100%;
}

.ds-empty-state__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-8);
}

/* Glass icon colour overrides. Each variant sets five custom properties
   (--ds-glass-start/-end/-glow/-shell/-shadow) consumed by the inlined SVG.
   Apply the class on the <svg> or any ancestor, e.g.
   <svg class="ds-icon ds-glass--green"><use href="#glass--calendar"></use></svg>. */

.ds-glass--orange {
  --ds-glass-start:  #FFB37F;
  --ds-glass-end:    #FF7B0D;
  --ds-glass-glow:   #EB6F0A;
  --ds-glass-shell:  #FFCBB9;
  --ds-glass-shadow: #FF8929;
}

.ds-glass--coral {
  --ds-glass-start:  #FFA78F;
  --ds-glass-end:    #F23E2C;
  --ds-glass-glow:   #FF624D;
  --ds-glass-shell:  #FFAC95;
  --ds-glass-shadow: #FF725E;
}

.ds-glass--pink {
  --ds-glass-start:  #FF759F;
  --ds-glass-end:    #FF196E;
  --ds-glass-glow:   #E31352;
  --ds-glass-shell:  #FF749F;
  --ds-glass-shadow: #FF528C;
}

.ds-glass--green {
  --ds-glass-start:  #9BF763;
  --ds-glass-end:    #26AB5B;
  --ds-glass-glow:   #30AD31;
  --ds-glass-shell:  #72DC60;
  --ds-glass-shadow: #74DE60;
}

.ds-glass--purple {
  --ds-glass-start:  #BC94FF;
  --ds-glass-end:    #9F66FF;
  --ds-glass-glow:   #8237FF;
  --ds-glass-shell:  #BA90FF;
  --ds-glass-shadow: #935CEF;
}

.ds-glass--blue {
  --ds-glass-start:  #39AFFD;
  --ds-glass-end:    #477FFF;
  --ds-glass-glow:   #0062FF;
  --ds-glass-shell:  #3EA0FE;
  --ds-glass-shadow: #4096FE;
}

.ds-glass--teal {
  --ds-glass-start:  #2FD8AF;
  --ds-glass-end:    #007C69;
  --ds-glass-glow:   #2FD8AF;
  --ds-glass-shell:  #007C69;
  --ds-glass-shadow: #2FD8AF;
}

/* DS Checkbox */

.ds-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-8);
  cursor: pointer;
  user-select: none;
}

.ds-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ds-checkbox__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 6.75px;    /* ⚠ HARDCODED: 6.75px from Figma */

  /* Figma uses strokeAlign:INSIDE — inset box-shadow replicates that. */
  background: var(--ds-background-controls);
  box-shadow: inset 0 0 0 1.125px rgba(160, 181, 196, 0.25);

  transition: background 150ms ease, box-shadow 150ms ease;
}

.ds-checkbox__icon {
  display: none;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  color: var(--ds-color-neutral-0);
}

.ds-checkbox__label {
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-snug);
  color: var(--ds-content-primary);
}

.ds-checkbox__input:focus-visible + .ds-checkbox__control {
  box-shadow:
    inset 0 0 0 1.125px rgba(160, 181, 196, 0.25),
    0 0 0 2.25px var(--ds-border-focused);
}

.ds-checkbox:hover .ds-checkbox__control {
  background: var(--ds-background-controls-hover);
  box-shadow: inset 0 0 0 1.125px rgba(160, 181, 196, 0.35);
}

/* Inset y-offset (not spread) so only the top edge carries the white shimmer —
   matches Figma's FFFFFF 30%→0% inside stroke without dark gaps at the sides. */

.ds-checkbox__input:checked + .ds-checkbox__control {
  background: linear-gradient(107.41deg, var(--ds-background-checkbox-checked-start) 9.41%, var(--ds-background-checkbox-checked-end) 97.95%);
  box-shadow: inset 0 1.125px 0 rgba(255, 255, 255, 0.30);
}

.ds-checkbox__input:checked + .ds-checkbox__control .ds-checkbox__icon:not(.ds-checkbox__icon--dash) {
  display: block;
}

.ds-checkbox__input:checked:focus-visible + .ds-checkbox__control,
.ds-checkbox__input:indeterminate:focus-visible + .ds-checkbox__control {
  box-shadow:
    inset 0 1.125px 0 rgba(255, 255, 255, 0.30),
    0 0 0 2.25px var(--ds-border-focused);
}

/* Override hover re-style when checked/indeterminate — keep the brand gradient. */

.ds-checkbox:hover .ds-checkbox__input:checked + .ds-checkbox__control,
.ds-checkbox:hover .ds-checkbox__input:indeterminate + .ds-checkbox__control {
  background: linear-gradient(107.41deg, var(--ds-background-checkbox-checked-start) 9.41%, var(--ds-background-checkbox-checked-end) 97.95%);
  box-shadow: inset 0 1.125px 0 rgba(255, 255, 255, 0.30);
}

.ds-checkbox__input:indeterminate + .ds-checkbox__control {
  background: linear-gradient(107.41deg, var(--ds-background-checkbox-checked-start) 9.41%, var(--ds-background-checkbox-checked-end) 97.95%);
  box-shadow: inset 0 1.125px 0 rgba(255, 255, 255, 0.30);
}

.ds-checkbox__input:indeterminate + .ds-checkbox__control .ds-checkbox__icon--dash {
  display: block;
}

.ds-checkbox:has(.ds-checkbox__input:disabled) {
  opacity: var(--ds-opacity-60);
  pointer-events: none;
  cursor: not-allowed;
}

.ds-checkbox__input:disabled + .ds-checkbox__control {
  background: var(--ds-background-disabled);
  box-shadow: inset 0 0 0 1.125px var(--ds-border-flat);
}

/* DS Combobox — multi-select panel with search filtering.
   Item base styles (flex, font, focus ring) come from _panel.css. */

.ds-combobox {
  display: flex;
  flex-direction: column;
  min-width: 180px;
  background-color: var(--ds-background-page);
  border: var(--ds-border-width-1) solid var(--ds-border-flat);
  border-radius: var(--ds-radius-sm);
  box-shadow: 0 2px 4px rgba(4, 23, 59, 0.15);
  overflow: hidden;
}

.ds-combobox > .ds-combobox-search-input {
  border-bottom: var(--ds-border-width-1) solid var(--ds-border-flat);
}

.ds-combobox__list {
  display: flex;
  flex-direction: column;
  padding: var(--ds-space-4);
  gap: var(--ds-space-4);
  margin: 0;
  list-style: none;
  overflow-y: auto;
}

.ds-combobox__item {
  height: auto;
  min-height: 1.75rem;
  line-height: var(--ds-line-height-snug);
}

.ds-combobox__item[aria-selected="true"] {
  background-color: var(--ds-background-controls-hover);
}

.ds-combobox__item[aria-selected="true"] .ds-combobox__item-label,
.ds-combobox__item[aria-selected="true"] .ds-combobox__item-icon {
  color: var(--ds-content-accent-brand);
}

.ds-combobox__item[aria-disabled="true"] {
  color: var(--ds-content-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

.ds-combobox__item[aria-disabled="true"] .ds-combobox__item-icon {
  color: var(--ds-content-disabled);
}

.ds-combobox__item-drag {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--ds-content-secondary);
  cursor: grab;
  margin-left: auto;
}

.ds-combobox__item-drag:active {
  cursor: grabbing;
}

.ds-combobox__item--dragging {
  opacity: 0.35;
}

.ds-combobox__item--drag-over-above {
  box-shadow: 0 -2px 0 0 var(--ds-border-focused);
}

.ds-combobox__item--drag-over-below {
  box-shadow: 0 2px 0 0 var(--ds-border-focused);
}

.ds-combobox__empty {
  display: none;
  padding: var(--ds-space-16) var(--ds-space-12);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-snug);
  color: var(--ds-content-secondary);
  text-align: center;
}

.ds-combobox__empty[data-state="visible"] {
  display: block;
}

.ds-combobox--dropdown {
  position: absolute;
  top: calc(100% + var(--ds-space-8));
  right: 0;
  z-index: 100;
  min-width: 260px;
}

.ds-combobox__item--destructive {
  color: var(--ds-content-error);
}

.ds-combobox__item--destructive .ds-combobox__item-icon {
  color: var(--ds-content-error);
}

/* DS ComboboxSearchInput — standalone search row (icon + field + clear button).
   Designed to sit inside a .ds-combobox panel or any backgrounded container. */

.ds-combobox-search-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  height: 32px;
  padding: 0 var(--ds-space-12);
  flex-shrink: 0;
  border-radius: var(--ds-radius-sm);
}

/* Focus ring on the container when the inner input is focused. */

.ds-combobox-search-input:focus-within::before {
  content: '';
  position: absolute;
  inset: var(--ds-space-4);
  border: var(--ds-border-width-2) solid var(--ds-border-focused);
  border-radius: var(--ds-radius-md);
  pointer-events: none;
}

.ds-combobox-search-input__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--ds-content-secondary);
}

.ds-combobox-search-input__field {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-content-primary);
}

.ds-combobox-search-input__field::placeholder {
  color: var(--ds-content-secondary);
}

.ds-combobox-search-input__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ds-content-secondary);
  transition: color 150ms ease;
}

.ds-combobox-search-input__clear:hover {
  color: var(--ds-content-primary);
}

.ds-combobox-search-input__clear[hidden] {
  display: none;
}

.ds-combobox-search-input__clear-icon {
  width: 1rem;
  height: 1rem;
}

/* DS EventImage */

.ds-event-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--ds-radius-sm);
  background-color: var(--ds-background-content-container);
  overflow: hidden;
}

.ds-event-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-event-image__placeholder {
  width: 24px;
  height: 24px;
  color: var(--ds-content-disabled);
}

/* DS ProgressBar */

.ds-progress-bar {
  width: 100px;
  height: 12px;
  flex-shrink: 0;
  border-radius: var(--ds-radius-round);
  background-color: var(--ds-action-secondary-button-strong);
  overflow: hidden;
}

.ds-progress-bar__fill {
  height: 100%;
  border-radius: var(--ds-radius-round);
  background-color: var(--ds-content-accent-brand);
  border: var(--ds-border-width-1) solid var(--ds-border-accent-button);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4);
  transition: width 300ms ease;
}

/* DS Toggle — visual state driven by :checked, no JS needed for appearance. */

.ds-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-8);
  cursor: pointer;
  user-select: none;
}

.ds-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.ds-toggle__thumb {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.5rem;
  background-color: var(--ds-border-flat);
  border-radius: var(--ds-radius-round);
  flex-shrink: 0;
  transition: background-color 150ms ease;
}

.ds-toggle__thumb::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--ds-color-neutral-0);
  border-radius: var(--ds-radius-round);
  transition: transform 150ms ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ds-toggle__input:checked + .ds-toggle__thumb {
  background-color: var(--ds-action-accent-button);
}

.ds-toggle__input:checked + .ds-toggle__thumb::after {
  transform: translateX(1rem);
}

.ds-toggle__input:focus-visible + .ds-toggle__thumb {
  outline: var(--ds-border-width-2) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ds-toggle__label {
  font-size: var(--ds-font-size-sm);
  color: var(--ds-content-primary);
}

.ds-toggle:has(.ds-toggle__input:disabled) {
  opacity: var(--ds-opacity-60);
  pointer-events: none;
}

/* DS extras that layer on .table (base visual in src/overrides/bootstrap.css):
   the rounded surface wrapper, cell-content helpers, and the selectable row
   pattern (checkbox in the left gutter). Markup: <table class="table ds-table">. */

.ds-table-wrapper {
  background-color: var(--ds-background-container);
  border-radius: var(--ds-radius-lg);
}

.ds-table__cell-content {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
}

.ds-table__cell-text {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-content-primary);
}

.ds-table__cell-text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-table__cell-text--link {
  color: var(--ds-content-accent-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ds-table__cell-text--link:hover {
  color: var(--ds-action-accent-button-hover);
}

.ds-table__cell-text--link:focus-visible {
  outline: var(--ds-border-width-2) solid var(--ds-content-accent-brand);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

/* --accent is visual emphasis only — not interactive. Use --link for links. */

.ds-table__cell-text--accent {
  color: var(--ds-content-accent-brand);
}

.ds-table__cell-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ds-content-secondary);
}

.ds-table__cell-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
}

/* Checkbox anchored 8px left of the row's first cell. Visibility is progressive:
   hidden by default, revealed on row hover, keyboard focus, or when any row is
   checked/indeterminate. Opacity (not display/visibility) keeps it Tab-reachable.
   :focus-visible (not :focus-within) so mouse-retained focus doesn't keep it
   stuck visible after unchecking. */

.ds-table__row-checkbox {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(calc(-100% - var(--ds-space-8)), -50%);
  opacity: 0;
  transition: opacity 120ms ease;
}

/* Invisible gutter bridges the 8px gap between checkbox and row so the
   mouse can travel between them without dropping hover. */

.ds-table__row-checkbox::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--ds-space-16));
}

.ds-table--selectable > tbody > tr:hover .ds-table__row-checkbox,
.ds-table--selectable .ds-table__row-checkbox:hover,
.ds-table--selectable .ds-table__row-checkbox:has(.ds-checkbox__input:focus-visible),
.ds-table--selectable:has(.ds-checkbox__input:checked) .ds-table__row-checkbox,
.ds-table--selectable:has(.ds-checkbox__input:indeterminate) .ds-table__row-checkbox {
  opacity: 1;
}

/* Checkbox sits outside the wrapper, so any clipping ancestor must allow overflow. */

.ds-content__body:has(.ds-table--selectable) {
  overflow: visible;
}

/* DS TableHeaderCell */

.ds-table-header-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-16);
  height: 40px;

  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-content-tertiary);
  text-align: left;
  white-space: nowrap;
}

.ds-table-header-cell__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ds-content-disabled);
}

/* Sidebar — fixed left nav (256px, always visible). */

/* --- Shell --- */

:root {
  --ds-sidebar-width: 256px;
}

.ds-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--ds-sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--ds-background-page);
  z-index: 200;
  overflow: hidden;
}

/* --- Logo / Brand area --- */

.ds-sidebar__header {
  padding: var(--ds-space-16);
  padding-bottom: var(--ds-space-12);
  padding-top: var(--ds-space-20);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: 4.5rem;
}

.ds-sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  text-decoration: none;
  padding: var(--ds-space-4) var(--ds-space-8);
  color: var(--ds-content-primary);
}

.ds-sidebar__logo-img {
  height: 40px;
  width: auto;
  display: block;
}

/* --- Action buttons (Create event / View site) --- */

.ds-sidebar__actions {
  padding: var(--ds-space-16);
  padding-top: var(--ds-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
  flex-shrink: 0;
}

.ds-sidebar__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-4);
  width: 100%;
  padding: var(--ds-space-8) var(--ds-space-12);
  border-radius: var(--ds-radius-xl);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  border: var(--ds-border-width-1) solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.ds-sidebar__action--secondary {
  background-color: var(--ds-action-secondary-button-strong);
  color: var(--ds-content-primary);
}

.ds-sidebar__action--secondary:hover {
  background-color: var(--ds-action-secondary-button-strong-hover);
}

.ds-sidebar__action-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

/* --- Navigation scroll area --- */

.ds-sidebar__nav {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ds-sidebar__nav-scroll {
  flex: 1 1 0%;
  overflow-y: auto;
  overflow-x: hidden;
}

.ds-sidebar__nav-scroll::-webkit-scrollbar {
  width: 4px;
}

.ds-sidebar__nav-scroll::-webkit-scrollbar-thumb {
  background-color: var(--ds-border-flat);
  border-radius: var(--ds-radius-round);
}

/* --- Sidebar group --- */

.ds-sidebar__group {
  display: flex;
  flex-direction: column;
  background-color: var(--ds-background-page);
  padding: var(--ds-space-8);
}

/* Group label row — label text left + optional settings button right */

.ds-sidebar__group-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ds-space-8);
  height: 2rem;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-content-secondary);
  font-family: var(--ds-font-family-display);
}

.ds-sidebar__group-label-text {
  flex: 1 1 0%;
  font-size: var(--ds-font-size-2xs);
  font-weight: var(--ds-font-weight-regular);
  line-height: 1rem;
}

/* Settings icon button — hidden until the group is hovered */

.ds-sidebar__group-settings-btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  padding: 3px;
  border: none;
  border-radius: var(--ds-radius-sm);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ds-sidebar__group:hover .ds-sidebar__group-settings-btn {
  display: flex;
  color: var(--ds-content-secondary);
}

.ds-sidebar__group-settings-btn:hover,
.ds-sidebar__group-settings-btn:focus-visible {
  background-color: var(--ds-action-secondary-button-strong);
  color: var(--ds-content-primary) !important;
}

.ds-sidebar__group-settings-btn-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Supporting text — visible in the Footer variant, below the group label */

.ds-sidebar__group-supporting-text {
  padding: 0 var(--ds-space-8) var(--ds-space-8);
  font-size: var(--ds-font-size-2xs);
  font-weight: var(--ds-font-weight-regular);
  line-height: 1rem;
  color: var(--ds-content-secondary);
  border-radius: var(--ds-radius-sm);
}

.ds-sidebar__menu-button {
  display: flex;
  align-items: center;
  gap: var(--ds-space-12);
  padding: var(--ds-space-8);
  border-radius: var(--ds-radius-sm);
  box-shadow: inset 0 0 0 var(--ds-border-width-1) transparent;
  font-size: var(--ds-font-size-sm);
  line-height: var(--ds-line-height-tight);
  font-weight: var(--ds-font-weight-regular);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ds-sidebar__menu-button:hover {
  text-decoration: none;
}

@keyframes ds-sidebar-nudge-in {
  from {
    transform: translateX(-0.375rem) translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
  }
}

/* Left accent bar on hover / focus (inactive items). */

.ds-sidebar__menu-button:not([aria-current="page"]):not(.ds-sidebar__menu-button--active):hover::before,
.ds-sidebar__menu-button:not([aria-current="page"]):not(.ds-sidebar__menu-button--active):focus-visible::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ds-space-8));
  top: 50%;
  transform: translateY(-50%);
  width: 0.25rem; /* 4px */
  height: 1.0625rem; /* 17px */
  border-radius: 0 var(--ds-radius-2xs) var(--ds-radius-2xs) 0;
  background-color: var(--ds-content-accent-brand);
  animation: ds-sidebar-nudge-in 0.15s ease both;
}

.ds-sidebar__menu-button[aria-current="page"],
.ds-sidebar__menu-button--active {
  background-color: var(--ds-action-sidebar-item-active-bg);
  box-shadow: inset 0 0 0 var(--ds-border-width-1) var(--ds-border-sidebar-item-active);
  color: var(--ds-content-accent-brand);
  font-weight: var(--ds-font-weight-regular);
  padding-right: 0;
}

.ds-sidebar__menu-button[aria-current="page"]:hover,
.ds-sidebar__menu-button--active:hover {
  background-color: var(--ds-action-sidebar-item-active-bg);
  color: var(--ds-content-accent-brand);
}

/* Active-item accent stripe + gradient glow (outside the left edge). */

.ds-sidebar__menu-button[aria-current="page"]::before,
.ds-sidebar__menu-button--active::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ds-space-8));
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.0625rem;
  border-radius: 0 var(--ds-radius-2xs) var(--ds-radius-2xs) 0;
  background-color: var(--ds-content-accent-brand);
}

.ds-sidebar__menu-button[aria-current="page"]::after,
.ds-sidebar__menu-button--active::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 2.5625rem;
  background: linear-gradient(
    to right,
    var(--ds-gradient-sidebar-active-glow-start),
    var(--ds-gradient-sidebar-active-glow-end)
  );
  border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm);
  opacity: 0.8;
  z-index: -1;
  pointer-events: none;
}

.ds-sidebar__menu-button-text {
  color: var(--ds-content-primary);
}

.ds-sidebar__menu-button[aria-current="page"] .ds-sidebar__menu-button-text,
.ds-sidebar__menu-button--active .ds-sidebar__menu-button-text {
  color: var(--ds-content-accent-brand);
}

.ds-sidebar__menu-button[aria-current="page"] .ds-sidebar__menu-button-icon,
.ds-sidebar__menu-button--active .ds-sidebar__menu-button-icon {
  color: var(--ds-content-accent-brand);
}

.ds-sidebar__menu-button-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--ds-content-secondary);
}

/* --- Footer: Need help? --- */

.ds-sidebar__footer {
  border-top: var(--ds-border-width-1) solid var(--ds-border-flat);
  padding: var(--ds-space-16) var(--ds-space-16) var(--ds-space-20);
  flex-shrink: 0;
}

.ds-sidebar__footer-title {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-content-primary);
  margin: 0 0 var(--ds-space-4);
}

.ds-sidebar__footer-text {
  font-size: var(--ds-font-size-2xs);
  color: var(--ds-content-tertiary);
  margin: 0 0 var(--ds-space-12);
  line-height: var(--ds-line-height-normal);
}

.ds-sidebar__footer-link, .ds-sidebar__footer-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  font-size: var(--ds-font-size-2xs);
  color: var(--ds-content-accent-brand);
  text-decoration: none;
  padding: var(--ds-space-2) 0;
}

.ds-sidebar__footer-link:hover,
.ds-sidebar__footer-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.ds-sidebar__footer-link-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.ds-sidebar__footer-link-text {
  font-size: var(--ds-font-size-sm);
}

/* Shell Header — sticky top bar inside .ds-shell__main (64px, transparent). */

/* --- Shell --- */

.ds-shell-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-16);
  padding: var(--ds-space-16) var(--ds-space-16) var(--ds-space-16) var(--ds-space-24);
  height: 4rem;
  border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
  flex-shrink: 0;
}

.ds-shell__header-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-32);
}

/* --- Left: breadcrumb --- */

.ds-shell-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--ds-font-size-sm);
  min-width: 0;
}

.ds-shell-header__breadcrumb-item {
  color: var(--ds-content-tertiary);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--ds-radius-xs);
  outline: var(--ds-border-width-2) solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease;
}

.ds-shell-header__breadcrumb-item:hover {
  color: var(--ds-content-primary);
}

.ds-shell-header__breadcrumb-item:focus-visible {
  color: var(--ds-content-primary);
  outline-color: var(--ds-border-focused);
}

.ds-shell-header__breadcrumb-item--current {
  color: var(--ds-content-primary);
  font-weight: var(--ds-font-weight-medium);
  pointer-events: none;
}

.ds-shell-header__breadcrumb-separator {
  color: var(--ds-content-tertiary);
  user-select: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

/* --- Right: actions --- */

.ds-shell-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  flex-shrink: 0;
}

.ds-shell-header__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  padding: var(--ds-space-8) var(--ds-space-12);
  height: 2rem;
  min-width: 18.5rem;
  border-radius: var(--ds-radius-round);
  background-color: var(--ds-action-secondary-button);
  color: var(--ds-content-secondary);
  font-size: var(--ds-font-size-xs);
  cursor: text;
  user-select: none;
  /* Outline with offset so the focus ring floats outside the pill with a gap. */
  outline: var(--ds-border-width-2) solid transparent;
  outline-offset: 3px;
  transition: outline-color 0.15s ease;
}

.ds-shell-header__search:focus-within {
  outline-color: var(--ds-border-focused);
}

.ds-shell-header__search-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--ds-content-secondary);
}

.ds-shell-header__search-label {
  flex: 1;
  line-height: var(--ds-line-height-tight);
}

.ds-shell-header__search-kbd {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--ds-font-size-2xs);
  font-family: inherit;
  color: var(--ds-content-secondary);
  background-color: var(--ds-background-container);
  border-radius: var(--ds-radius-xs);
  padding: var(--ds-space-2) var(--ds-space-4);
  line-height: var(--ds-line-height-tight);
}

/* Input inherits typography from the wrapper so idle label and open-state
   placeholder render identically — no visible jump on click. */

.ds-shell-header__search-input {
  flex: 1;
  display: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  color: var(--ds-content-primary);
  font: inherit;
  caret-color: var(--ds-content-primary);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.ds-shell-header__search-input::-webkit-search-cancel-button,
.ds-shell-header__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.ds-shell-header__search-input::placeholder {
  color: var(--ds-content-secondary);
  opacity: 1;
}

.ds-shell-header__search-clear {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-content-secondary);
  line-height: 1;
}

.ds-shell-header__search-clear:hover {
  color: var(--ds-content-primary);
}

.ds-shell-header__search-clear .ds-icon {
  width: 1rem;
  height: 1rem;
}

/* Open state — set via JS as [data-state="open"]. */

.ds-shell-header__search[data-state="open"] {
  cursor: default;
}

.ds-shell-header__search[data-state="open"] .ds-shell-header__search-label,
.ds-shell-header__search[data-state="open"] .ds-shell-header__search-kbd {
  display: none;
}

.ds-shell-header__search[data-state="open"] .ds-shell-header__search-input {
  display: block;
}

.ds-shell-header__search[data-state="open"].is-filled .ds-shell-header__search-clear {
  display: flex;
}

/* --- Shell header icon button — extends .ds-action-btn --- */

.ds-shell-header__icon-btn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-action-secondary-button);
  color: var(--ds-content-primary);
  flex-shrink: 0;
}

.ds-shell-header__icon-btn:hover {
  background-color: var(--ds-action-secondary-button-strong);
  color: var(--ds-content-primary);
}

.ds-shell-header__icon-btn .ds-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* --- Language dropdown: wrapper positioning --- */

.ds-shell-header__lang-wrapper {
  position: relative;
}

/* --- User avatar --- */

.ds-shell-header__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--ds-radius-xl);
  border: var(--ds-border-width-1) solid var(--ds-border-accent-button);
  background-color: var(--ds-action-accent-button);
  color: var(--ds-color-neutral-0);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-regular);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  outline: var(--ds-border-width-2) solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease;
}

.ds-shell-header__avatar:focus-visible {
  outline-color: var(--ds-border-focused);
}

.ds-shell-header__avatar-wrapper {
  position: relative;
}

.ds-shell-header__avatar-dropdown {
  position: absolute;
  top: calc(100% + var(--ds-space-8));
  right: 0;
  min-width: 15rem;
  background-color: var(--ds-background-tooltip);
  border: var(--ds-border-width-1) solid var(--ds-border-flat);
  border-radius: var(--ds-radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  z-index: 200;
  overflow: hidden;
}

.ds-shell-header__avatar-dropdown[hidden] {
  display: none;
}

.ds-shell-header__avatar-dropdown-header {
  padding: var(--ds-space-8);
  border-bottom: var(--ds-border-width-1) solid var(--ds-border-flat);
}

.ds-shell-header__avatar-dropdown-name {
  font-size: var(--ds-font-size-base);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-content-primary);
  line-height: var(--ds-line-height-snug);
  margin: 0;
}

.ds-shell-header__avatar-dropdown-email {
  font-size: var(--ds-font-size-sm);
  color: var(--ds-content-secondary);
  line-height: var(--ds-line-height-snug);
  margin: var(--ds-space-4) 0 0;
}

.ds-shell-header__avatar-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-shell-header__avatar-dropdown-footer {
  border-top: var(--ds-border-width-1) solid var(--ds-border-flat);
}

.ds-shell-header__avatar-dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  padding: var(--ds-space-8);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-regular);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ds-shell-header__avatar-dropdown-link:hover {
  background-color: var(--ds-background-controls-hover);
  color: var(--ds-content-secondary);
  text-decoration: none;
}

.ds-shell-header__avatar-dropdown-link:focus-visible {
  background-color: var(--ds-background-controls-hover);
  outline: var(--ds-border-width-2) solid var(--ds-border-focused);
  outline-offset: -2px;
}

/* TODO: accent active state */

.ds-shell-header__avatar-dropdown-link--accent {
  color: var(--ds-content-accent-brand);
}

.ds-shell-header__avatar-dropdown-link--accent:hover {
  color: var(--ds-content-accent-brand);
}

.ds-shell-header__avatar-dropdown-link-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--ds-content-secondary);
}

.ds-shell-header__avatar-dropdown-link-text {
  color: var(--ds-content-primary);
}

.ds-shell-header__avatar-dropdown-link:hover .ds-shell-header__avatar-dropdown-link-text {
  color: var(--ds-content-secondary);
}

/* Command palette — floating spotlight search. ⌘K / Ctrl+K to open. */

.ds-command-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: var(--ds-background-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.ds-command-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.ds-command {
  position: fixed;
  top: 30%;
  left: 50%;
  z-index: 1050;
  width: 90%;
  max-width: 512px;
  background: var(--ds-background-container);
  border: var(--ds-border-width-1) solid var(--ds-border-flat);
  border-radius: var(--ds-radius-xl);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.10);
  overflow: hidden;

  /* Closed state: invisible + slightly above center and scaled down. */
  opacity: 0;
  transform: translateX(-50%) translateY(-12px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.ds-command--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

.ds-command__search {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  padding: 0 var(--ds-space-16);
  width: 100%;
  height: 40px;
  flex-shrink: 0;
  border-bottom: var(--ds-border-width-1) solid var(--ds-border-flat);
}

.ds-command__search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--ds-content-secondary);
}

.ds-command__search-icon svg {
  width: 16px;
  height: 16px;
}

.ds-command__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-regular);
  color: var(--ds-content-primary);
  caret-color: var(--ds-content-primary);
  line-height: var(--ds-line-height-tight);
  -webkit-appearance: none;
  appearance: none;
}

.ds-command__input::placeholder {
  color: var(--ds-content-tertiary);
}

.ds-command__input::-webkit-search-cancel-button,
.ds-command__input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.ds-command__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-content-secondary);
  line-height: 1;
}

.ds-command__clear:hover {
  color: var(--ds-content-primary);
}

.ds-command__clear svg {
  width: 16px;
  height: 16px;
}

.ds-command__body {
  overflow-y: auto;
  max-height: 400px;
}

.ds-command__group {
  padding: var(--ds-space-4) var(--ds-space-8);
  padding-bottom: 6px;
  border-top: var(--ds-border-width-1) solid var(--ds-border-flat);
}

.ds-command__group:first-child {
  border-top: none;
}

.ds-command__group-header {
  padding: var(--ds-space-12) var(--ds-space-8) var(--ds-space-4);
  font-family: var(--ds-font-family-display);
  font-size: var(--ds-font-size-2xs);
  font-weight: var(--ds-font-weight-regular);
  color: var(--ds-content-secondary);
  line-height: var(--ds-line-height-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-command__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-command__item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  padding: 0 var(--ds-space-8);
  height: 40px;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  color: var(--ds-content-primary);
  user-select: none;
}

.ds-command__item:hover,
.ds-command__item--active {
  background: var(--ds-background-controls-hover);
}

.ds-command__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--ds-content-secondary);
}

.ds-command__item-icon svg {
  width: 16px;
  height: 16px;
}

.ds-command__item-label {
  flex: 1;
  min-width: 0;
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  line-height: var(--ds-line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-command__item-shortcut {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  flex-shrink: 0;
}

.ds-command__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--ds-space-4);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-2xs);
  line-height: 1;
  color: var(--ds-content-secondary);
  background: var(--ds-background-controls);
  border: var(--ds-border-width-1) solid var(--ds-border-flat);
  border-radius: var(--ds-radius-2xs);
}

/* Hosts a .ds-empty-state so illustrations/typography stay consistent. */

.ds-command__empty {
  display: flex;
  justify-content: center;
  padding: var(--ds-space-16) var(--ds-space-8);
}

/* DS PageHeader */

.ds-page-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--ds-space-8);
}

.ds-page-header__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--ds-space-8);
}

.ds-page-header__title {
  margin: 0;
  font-family: var(--ds-font-family-display);
  font-size: var(--ds-font-size-3xl);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-snug);
  letter-spacing: -0.02em;                  /* ⚠ HARDCODED: no letter-spacing token */
  color: var(--ds-content-primary);
}

.ds-page-header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  gap: var(--ds-space-8);
}

.ds-page-header__meta {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--ds-space-8);
}

.ds-page-header__description {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--ds-space-8);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-normal);
}

.ds-page-header__description-text {
  color: var(--ds-content-secondary);
}

.ds-page-header__description-link {
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-height-normal);
  color: var(--ds-content-primary);
  text-decoration: none;
  cursor: pointer;
}

.ds-page-header__description-link:hover {
  text-decoration: underline;
}

.ds-page-header__description-link:focus-visible {
  outline: var(--ds-border-width-2) solid var(--ds-border-focused);
  outline-offset: 2px;
  border-radius: var(--ds-radius-2xs);
}

/* DS Filter Button — pill-shaped trigger for filter/sort/column dropdowns. */

.ds-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-8);
  padding: var(--ds-space-8) var(--ds-space-12);
  background-color: var(--ds-action-secondary-button);
  border-radius: var(--ds-radius-xl);
  border: none;
  cursor: pointer;
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-height-snug);
  color: var(--ds-content-primary);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: color 150ms ease;
}

.ds-filter-btn:focus-visible {
  outline: var(--ds-border-width-2) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ds-filter-btn:hover {
  background-color: var(--ds-background-controls-hover);
}

.ds-filter-btn:active {
  background-color: var(--ds-action-secondary-button-strong);
}

.ds-filter-btn[aria-expanded="true"] {
  background-color: var(--ds-action-secondary-button-strong);
  outline: var(--ds-border-width-1) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ds-filter-btn:disabled,
.ds-filter-btn[aria-disabled="true"] {
  opacity: var(--ds-opacity-60);
  pointer-events: none;
  cursor: not-allowed;
}

.ds-filter-btn__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ds-filter-btn__label {
  color: inherit;
}

.ds-filter-btn__chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--ds-content-secondary);
}

/* Filter Menu — combobox variant with hover-activated submenus for
   multi-faceted filtering. Extends .ds-combobox; only additions here. */

.ds-combobox--filter-menu {
  left: 0;
  right: auto;
  min-width: 260px;
  position: relative;
  overflow: visible;
}

/* Dropdown mode: float absolutely below the trigger while still acting as
   the containing block for absolutely-positioned submenu flyouts. */

.ds-combobox--filter-menu.ds-combobox--dropdown {
  position: absolute;
}

.ds-combobox__item--has-submenu {
  position: relative;
  padding-right: var(--ds-space-8);
}

.ds-combobox__item--has-submenu[data-state="open"] {
  background-color: var(--ds-background-controls-hover);
}

/* Count badge uses .ds-badge-number; .js-filter-menu-count is the JS hook. */

.ds-combobox__item--has-submenu .ds-badge-number {
  margin-left: auto;
}

.ds-combobox__item-chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--ds-content-secondary);
}

.ds-combobox__submenu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: var(--ds-space-4);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background-color: var(--ds-background-page);
  border: var(--ds-border-width-1) solid var(--ds-border-flat);
  border-radius: var(--ds-radius-sm);
  box-shadow: 0 2px 4px rgba(4, 23, 59, 0.15);
  z-index: 201;
  overflow: hidden;
}

.ds-combobox__submenu[hidden] {
  display: none;
}

.ds-combobox__submenu-header {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--ds-space-12);
  flex-shrink: 0;
  border-bottom: var(--ds-border-width-1) solid var(--ds-border-flat);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-height-snug);
  color: var(--ds-content-secondary);
}

.ds-combobox__footer {
  display: flex;
  align-items: center;
  border-top: var(--ds-border-width-1) solid var(--ds-border-flat);
  padding: var(--ds-space-4);
}

.ds-combobox__footer-btn {
  display: flex;
  align-items: center;
  gap: var(--ds-space-8);
  width: 100%;
  height: 28px;
  padding: 0 var(--ds-space-8);
  background: none;
  border: none;
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-regular);
  line-height: var(--ds-line-height-snug);
  color: var(--ds-content-secondary);
  cursor: pointer;
  transition: color 150ms ease;
}

.ds-combobox__footer-btn:hover {
  color: var(--ds-content-primary);
}

.ds-combobox__footer-btn-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* DS Search Toolbar — start group (search/filters) + end group (actions). */

.ds-search-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--ds-space-8) 0;
}

.ds-search-toolbar__start,
.ds-search-toolbar__end {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ds-space-8);
}

/* DS Sort Button — single-select listbox. Panel surface + item base from _panel.css. */

.ds-sort-btn {
  position: relative;
  display: inline-block;
}

.ds-sort-btn .js-sort-btn-trigger[aria-expanded="true"] {
  outline: var(--ds-border-width-1) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ds-sort-btn__panel {
  margin: 0;
  list-style: none;
  overflow: clip;
}

.ds-sort-btn__item {
  gap: var(--ds-space-4);
  transition: background-color 150ms ease;
}

.ds-sort-btn__item:focus-visible {
  background-color: var(--ds-background-controls-hover);
}

.ds-sort-btn__item-check {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--ds-content-accent-brand);
  visibility: hidden;
}

.ds-sort-btn__item[aria-selected="true"] .ds-sort-btn__item-label {
  color: var(--ds-content-accent-brand);
}

.ds-sort-btn__item[aria-selected="true"] .ds-sort-btn__item-check {
  visibility: visible;
}

/* DS Tabs — pill-style tab bar. */

.ds-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: var(--ds-space-4);
  background-color: var(--ds-background-controls-container);
  border-radius: var(--ds-radius-2xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
}

.ds-tabs::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari */
}

.ds-tabs__item {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-8) var(--ds-space-16);
  border-radius: var(--ds-radius-xl);
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-height-snug);
  color: var(--ds-content-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.ds-tabs__item:hover {
  color: var(--ds-content-primary);
}

.ds-tabs__item--active {
  background-color: var(--ds-action-secondary-button-strong);
  color: var(--ds-content-primary);
}

.ds-tabs__item:focus-visible {
  outline: var(--ds-border-width-2) solid var(--ds-border-focused);
  outline-offset: 2px;
}

/* DS View Toggle — default (icon group) and --segmented (text items). */

.ds-view-toggle {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  border-radius: var(--ds-radius-xl);
  border: none;
  box-shadow: inset 0 0 0 var(--ds-border-width-1) var(--ds-border-flat);
}

.ds-view-toggle__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-8) var(--ds-space-12);
  gap: var(--ds-space-8);
  background-color: transparent;
  border: none;
  border-radius: var(--ds-radius-xl);
  cursor: pointer;
  font-family: var(--ds-font-family-system);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-height-snug);
  color: var(--ds-content-secondary);
  white-space: nowrap;
  user-select: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.ds-view-toggle__item:hover {
  color: var(--ds-content-primary);
  background-color: var(--ds-background-controls-hover);
  margin: var(--ds-border-width-1);
  padding: calc(var(--ds-space-8) - var(--ds-border-width-1)) calc(var(--ds-space-12) - var(--ds-border-width-1));
}

.ds-view-toggle__item--active,
.ds-view-toggle__item[aria-selected="true"] {
  background-color: var(--ds-action-secondary-button);
  color: var(--ds-content-primary);
  border-radius: var(--ds-radius-xl);
  margin: var(--ds-border-width-1);
  padding: calc(var(--ds-space-8) - var(--ds-border-width-1)) calc(var(--ds-space-12) - var(--ds-border-width-1));
}

.ds-view-toggle__item:focus-visible {
  outline: var(--ds-border-width-2) solid var(--ds-border-focused);
  outline-offset: -2px;
}

.ds-view-toggle__item .ds-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ds-view-toggle--segmented .ds-view-toggle__item {
  padding: var(--ds-space-8) var(--ds-space-16);
}

.ds-view-toggle--segmented .ds-view-toggle__item:hover,
.ds-view-toggle--segmented .ds-view-toggle__item--active,
.ds-view-toggle--segmented .ds-view-toggle__item[aria-selected="true"] {
  padding: calc(var(--ds-space-8) - var(--ds-border-width-1)) calc(var(--ds-space-16) - var(--ds-border-width-1));
}

/* Pages */

/* Shell page — two-column layout: fixed sidebar + scrollable main.
   Sidebar width is --ds-sidebar-width (defined in sidebar.css). */

.ds-shell {
  display: flex;
  min-height: 100vh;
  color: var(--ds-background-page);
}

.ds-shell__main {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--ds-sidebar-width, 256px);
  padding: var(--ds-space-8);
  padding-left: 0;
  background-color: var(--ds-background-page);
}

.ds-shell__container {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  border-radius: var(--ds-radius-xl);
  background-color: var(--ds-background-container);
  border: 1px solid var(--ds-border-flat);
}

.ds-shell__body {
  flex: 1 1 0%;
  overflow-y: auto;
}

.ds-shell__content {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}

/* Horizontal padding is owned by Bootstrap .container / .container-fluid
   inside, not by .ds-content — consumers keep their standard layout. */

.ds-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  padding-top: var(--ds-space-32);
  gap: var(--ds-space-24);
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
}

.ds-content__body {
  flex: 1 1 0%;
  width: 100%;
  overflow: hidden;
}