@import "../foundations/tokens.css";

:root {
  /* Data Table */
  --ds-data-table-bg: var(--ds-bg-surface);
  --ds-data-table-header-bg: var(--ds-bg-alt);
  --ds-data-table-border: var(--ds-border-default);
  --ds-data-table-text: var(--ds-text-body);
  --ds-data-table-heading-text: var(--ds-text-label);
  --ds-data-table-row-hover-bg: color-mix(in srgb, var(--ds-color-info) 10%, var(--ds-color-white));
  --ds-data-table-row-stripe-bg: color-mix(in srgb, var(--ds-color-platinum) 18%, var(--ds-color-white));
  --ds-data-table-row-selected-bg: color-mix(in srgb, var(--ds-color-action) 12%, var(--ds-color-white));

  /* Status roles */
  --ds-color-bg-success: color-mix(in srgb, var(--ds-color-success) 16%, var(--ds-color-white));
  --ds-color-text-success: color-mix(in srgb, var(--ds-color-success) 72%, var(--ds-color-navy));
  --ds-color-border-success: color-mix(in srgb, var(--ds-color-success) 42%, var(--ds-color-white));
  --ds-color-bg-warning: color-mix(in srgb, var(--ds-color-warning) 20%, var(--ds-color-white));
  --ds-color-text-warning: color-mix(in srgb, var(--ds-color-warning) 76%, var(--ds-color-navy));
  --ds-color-border-warning: color-mix(in srgb, var(--ds-color-warning) 48%, var(--ds-color-white));
  --ds-color-bg-danger: color-mix(in srgb, var(--ds-color-danger) 12%, var(--ds-color-white));
  --ds-color-text-danger: color-mix(in srgb, var(--ds-color-danger) 72%, var(--ds-color-navy));
  --ds-color-border-danger: color-mix(in srgb, var(--ds-color-danger) 42%, var(--ds-color-white));
  --ds-color-bg-info: color-mix(in srgb, var(--ds-color-info) 14%, var(--ds-color-white));
  --ds-color-text-info: color-mix(in srgb, var(--ds-color-info) 76%, var(--ds-color-navy));
  --ds-color-border-info: color-mix(in srgb, var(--ds-color-info) 42%, var(--ds-color-white));
  --ds-color-bg-neutral: var(--ds-bg-alt);
  --ds-color-text-neutral: var(--ds-text-body);
  --ds-color-border-neutral: var(--ds-border-default);

  /* Data Table link column */
  --ds-data-table-link-truncate-ch: 22;

  /* Shared controls */
  --ds-row-action-size: var(--ds-space-8);
  --ds-row-action-hover-bg: var(--ds-bg-alt);
  --ds-row-action-active-bg: color-mix(in srgb, var(--ds-color-action) 14%, var(--ds-color-white));
  --ds-row-action-disabled-fg: var(--ds-text-muted);
  --ds-filter-overlay-bg: var(--ds-bg-overlay);
  --ds-filter-dialog-width: calc(var(--ds-space-20) * 4);

  /* Dropdown (shared with small-form, data-table) */
  --ds-dropdown-panel-min-width: calc(var(--ds-space-12) * 4);
  --ds-dropdown-panel-max-height: calc(var(--ds-space-12) * 5);

  /* Small Form */
  --ds-small-form-max-width: calc(var(--ds-space-12) * 12);
  --ds-small-form-gap: var(--ds-space-4);
  --ds-small-form-actions-gap: var(--ds-space-3);

  /* Embed (iframes / snippets) */
  --ds-embed-shell-padding: var(--ds-space-6);

  /* Button Library */
  --ds-button-lib-radius: var(--ds-radius-button);
  --ds-button-lib-font-weight: var(--ds-font-weight-bold);
  --ds-button-lib-border-width: var(--ds-border-width-1);
  --ds-button-lib-option-border-width: var(--ds-border-width-2);

  --ds-button-lib-size-sm-height: var(--ds-size-control-sm-height);
  --ds-button-lib-size-sm-min-width: calc(var(--ds-space-12) * 2);
  --ds-button-lib-size-sm-padding-x: var(--ds-size-control-sm-padding-x);
  --ds-button-lib-size-md-height: var(--ds-size-control-md-height);
  --ds-button-lib-size-md-min-width: calc(var(--ds-space-4) * 7);
  --ds-button-lib-size-md-padding-x: var(--ds-size-control-md-padding-x);
  --ds-button-lib-size-lg-height: var(--ds-size-control-lg-height);
  --ds-button-lib-size-lg-min-width: calc(var(--ds-space-16) * 2);
  --ds-button-lib-size-lg-padding-x: var(--ds-size-control-lg-padding-x);
  --ds-button-lib-size-xl-height: var(--ds-size-control-xl-height);
  --ds-button-lib-size-xl-min-width: calc(var(--ds-space-16) * 2);
  --ds-button-lib-size-xl-padding-x: var(--ds-size-control-xl-padding-x);

  --ds-button-lib-primary-bg: var(--ds-color-action);
  --ds-button-lib-primary-fg: var(--ds-color-white);
  --ds-button-lib-strong-bg: var(--ds-color-navy);
  --ds-button-lib-strong-fg: var(--ds-color-white);
  --ds-button-lib-return-bg: var(--ds-color-pink-light);
  --ds-button-lib-return-fg: var(--ds-color-pink);
  --ds-button-lib-return-border: var(--ds-color-pink);
  --ds-button-lib-optional-bg: var(--ds-color-white);
  --ds-button-lib-optional-fg: var(--ds-color-black);
  --ds-button-lib-optional-border: var(--ds-color-black);
  --ds-button-lib-optional-hover-bg: var(--ds-color-black);
  --ds-button-lib-optional-hover-fg: var(--ds-color-white);

  /* Tags */
  --ds-tag-pill-radius: var(--ds-radius-pill);
  --ds-tag-pill-font-weight: var(--ds-font-weight-semibold);
  --ds-tag-pill-line-height: 1;
  --ds-tag-pill-border-width: var(--ds-border-width-1);
  --ds-tag-pill-gap: var(--ds-space-2);
  --ds-tag-pill-icon-size: var(--ds-typography-scale-14);
  --ds-tag-pill-dot-size: var(--ds-space-2);

  --ds-tag-pill-size-xs-font-size: var(--ds-size-pill-xs-font-size);
  --ds-tag-pill-size-xs-padding-y: var(--ds-size-pill-xs-padding-y);
  --ds-tag-pill-size-xs-padding-x: var(--ds-size-pill-xs-padding-x);
  --ds-tag-pill-size-sm-font-size: var(--ds-size-pill-sm-font-size);
  --ds-tag-pill-size-sm-padding-y: var(--ds-size-pill-sm-padding-y);
  --ds-tag-pill-size-sm-padding-x: var(--ds-size-pill-sm-padding-x);
  --ds-tag-pill-size-md-font-size: var(--ds-size-pill-md-font-size);
  --ds-tag-pill-size-md-padding-y: var(--ds-size-pill-md-padding-y);
  --ds-tag-pill-size-md-padding-x: var(--ds-size-pill-md-padding-x);
  --ds-tag-pill-size-lg-font-size: var(--ds-size-pill-lg-font-size);
  --ds-tag-pill-size-lg-padding-y: var(--ds-size-pill-lg-padding-y);
  --ds-tag-pill-size-lg-padding-x: var(--ds-size-pill-lg-padding-x);

  --ds-tag-pill-tone-green-solid-bg: var(--ds-color-green);
  --ds-tag-pill-tone-green-solid-fg: var(--ds-color-white);
  --ds-tag-pill-tone-green-light-bg: var(--ds-color-green-light);
  --ds-tag-pill-tone-green-light-fg: var(--ds-color-green);
  --ds-tag-pill-tone-signal-blue-solid-bg: var(--ds-color-signal-blue);
  --ds-tag-pill-tone-signal-blue-solid-fg: var(--ds-color-white);
  --ds-tag-pill-tone-signal-blue-light-bg: var(--ds-color-signal-blue-light);
  --ds-tag-pill-tone-signal-blue-light-fg: var(--ds-color-signal-blue);
  --ds-tag-pill-tone-red-solid-bg: var(--ds-color-red);
  --ds-tag-pill-tone-red-solid-fg: var(--ds-color-white);
  --ds-tag-pill-tone-red-light-bg: var(--ds-color-red-light);
  --ds-tag-pill-tone-red-light-fg: var(--ds-color-red);
  --ds-tag-pill-tone-yellow-solid-bg: var(--ds-color-yellow);
  --ds-tag-pill-tone-yellow-solid-fg: var(--ds-color-navy);
  --ds-tag-pill-tone-yellow-light-bg: var(--ds-color-yellow-light);
  --ds-tag-pill-tone-yellow-light-fg: var(--ds-text-warning-strong);
  --ds-tag-pill-tone-light-blue-solid-bg: var(--ds-color-light-blue);
  --ds-tag-pill-tone-light-blue-solid-fg: var(--ds-color-white);
  --ds-tag-pill-tone-light-blue-light-bg: var(--ds-color-light-blue-light);
  --ds-tag-pill-tone-light-blue-light-fg: var(--ds-color-light-blue);
  --ds-tag-pill-tone-platinum-solid-bg: var(--ds-color-platinum);
  --ds-tag-pill-tone-platinum-solid-fg: var(--ds-color-navy);
  --ds-tag-pill-tone-platinum-light-bg: var(--ds-color-platinum-light);
  --ds-tag-pill-tone-platinum-light-fg: var(--ds-color-navy);
  --ds-tag-pill-tone-pink-solid-bg: var(--ds-color-pink);
  --ds-tag-pill-tone-pink-solid-fg: var(--ds-color-white);
  --ds-tag-pill-tone-pink-light-bg: var(--ds-color-pink-light);
  --ds-tag-pill-tone-pink-light-fg: var(--ds-color-pink);
  --ds-tag-pill-tone-teal-solid-bg: var(--ds-color-teal);
  --ds-tag-pill-tone-teal-solid-fg: var(--ds-color-white);
  --ds-tag-pill-tone-teal-light-bg: var(--ds-color-teal-light);
  --ds-tag-pill-tone-teal-light-fg: var(--ds-color-teal);
  --ds-tag-pill-tone-chip-solid-bg: var(--ds-color-chip);
  --ds-tag-pill-tone-chip-solid-fg: var(--ds-color-navy);

  --ds-tag-pill-status-dot-on-dark: color-mix(in srgb, var(--ds-color-white) 85%, transparent);
  --ds-tag-pill-status-dot-on-warning: color-mix(in srgb, var(--ds-color-navy) 70%, transparent);
  --ds-tag-pill-status-active-light-border: var(--ds-color-status-active-light-border);
  --ds-tag-pill-status-pending-light-border: var(--ds-color-status-pending-light-border);
  --ds-tag-pill-status-inactive-light-border: var(--ds-color-status-inactive-light-border);

  /* Icon Library */
  --ds-icon-library-grid-columns: repeat(2, minmax(0, 1fr));
  --ds-icon-library-grid-gap: var(--ds-space-3);
  --ds-icon-library-grid-all-min-col: calc(var(--ds-space-16) * 2);
  --ds-icon-library-grid-all-max-height: calc(var(--ds-space-16) * 8);
  --ds-icon-library-grid-all-padding-right: var(--ds-space-1);

  --ds-icon-library-card-border: var(--ds-border-subtle);
  --ds-icon-library-card-radius: var(--ds-radius-md);
  --ds-icon-library-card-bg: var(--ds-color-white);
  --ds-icon-library-card-min-height: calc(var(--ds-space-6) * 3);
  --ds-icon-library-card-min-height-all: calc(var(--ds-space-20) * 1);
  --ds-icon-library-card-padding: var(--ds-space-2);
  --ds-icon-library-card-gap: var(--ds-space-2);

  --ds-icon-library-label-size: var(--ds-size-pill-sm-font-size);
  --ds-icon-library-label-size-all: var(--ds-size-pill-xs-font-size);
  --ds-icon-library-label-color: var(--ds-text-secondary);
  --ds-icon-library-label-weight: var(--ds-font-weight-semibold);

  --ds-icon-library-head-gap: var(--ds-space-3);
  --ds-icon-library-panel-bg: var(--ds-color-white);
  --ds-icon-library-panel-border: var(--ds-border-subtle);
  --ds-icon-library-panel-radius: var(--ds-radius-lg);
  --ds-icon-library-panel-padding: var(--ds-space-6);
  --ds-icon-library-panel-gap: var(--ds-size-control-lg-padding-x);
  --ds-icon-library-search-columns: calc(var(--ds-space-12) * 4) minmax(0, 1fr);
  --ds-icon-library-search-gap: var(--ds-space-3);

  --ds-icon-library-control-height: var(--ds-size-control-sm-height);
  --ds-icon-library-control-radius: var(--ds-radius-control);
  --ds-icon-library-control-border: var(--ds-border-control);
  --ds-icon-library-control-padding-x: var(--ds-space-3);
  --ds-icon-library-select-padding-x: var(--ds-size-pill-sm-padding-x);
  --ds-icon-library-control-size: var(--ds-size-pill-md-font-size);
  --ds-icon-library-control-text: var(--ds-text-strong);
  --ds-icon-library-control-focus-border: var(--ds-border-control-hover);

  --ds-icon-library-meta-size: var(--ds-size-pill-sm-font-size);
  --ds-icon-library-meta-color: var(--ds-text-tertiary);
  --ds-icon-library-meta-weight: var(--ds-font-weight-semibold);

  --ds-icon-library-icon-size: var(--ds-space-6);
  --ds-icon-library-icon-stroke-width: 2;
  --ds-icon-library-icon-color: var(--ds-color-navy);

  --ds-icon-library-popover-bg: var(--ds-color-white);
  --ds-icon-library-popover-border: var(--ds-border-subtle);
  --ds-icon-library-popover-radius: var(--ds-radius-control);
  --ds-icon-library-popover-shadow: var(--ds-shadow-sm);
  --ds-icon-library-popover-padding: var(--ds-space-2);
  --ds-icon-library-popover-gap: var(--ds-space-2);
  --ds-icon-library-popover-min-width: calc(var(--ds-space-12) * 4);
  --ds-icon-library-popover-offset-y: var(--ds-space-1);
  --ds-icon-library-popover-z: 20;

  --ds-icon-library-action-btn-height: var(--ds-space-8);
  --ds-icon-library-action-btn-radius: var(--ds-radius-sm);
  --ds-icon-library-action-btn-padding-x: var(--ds-space-3);
  --ds-icon-library-action-btn-size: var(--ds-size-pill-sm-font-size);
  --ds-icon-library-action-btn-border: var(--ds-border-control);
  --ds-icon-library-action-btn-bg: var(--ds-color-white);
  --ds-icon-library-action-btn-fg: var(--ds-text-quaternary);
  --ds-icon-library-action-btn-hover-border: var(--ds-border-control-hover);
  --ds-icon-library-action-btn-hover-bg: var(--ds-surface-subtle);
  --ds-icon-library-action-btn-hover-fg: var(--ds-color-navy);

  --ds-icon-library-reference-size: var(--ds-size-pill-xs-font-size);
  --ds-icon-library-reference-bg: var(--ds-surface-code);
  --ds-icon-library-reference-border: var(--ds-border-subtle);
  --ds-icon-library-reference-color: var(--ds-text-quaternary);
  --ds-icon-library-reference-radius: var(--ds-radius-sm);
  --ds-icon-library-reference-padding: var(--ds-space-2);
  --ds-icon-library-reference-line-height: 1.35;
  --ds-icon-library-trigger-transition: var(--ds-transition-fast);

  /* Cards */
  --ds-cards-surface-border: var(--ds-border-subtle);
  --ds-cards-label-tracking: var(--ds-letter-spacing-label);
  --ds-cards-subsurface-border: var(--ds-border-subtle);
  --ds-cards-subsurface-radius: var(--ds-radius-control);
  --ds-cards-subsurface-min-code-width: var(--ds-space-12);
  --ds-cards-subsurface-divider: var(--ds-surface-neutral);
  --ds-cards-field-border: var(--ds-border-control);
  --ds-cards-field-min-width: calc(var(--ds-space-8) * 7);
  --ds-cards-open-btn-hover-bg: color-mix(in srgb, var(--ds-color-action) 10%, var(--ds-color-white));
  --ds-cards-badge-size: var(--ds-typography-scale-36);
  --ds-cards-badge-font-size: var(--ds-font-size-btn);
  --ds-cards-badge-bg: var(--ds-color-navy);
  --ds-cards-badge-fg: var(--ds-color-white);

  /* File Upload */
  --ds-file-upload-gap: var(--ds-space-4);
  --ds-file-upload-offset-top: var(--ds-space-3);
  --ds-file-upload-dropzone-border-width: var(--ds-border-width-1);
  --ds-file-upload-dropzone-border-style: dashed;
  --ds-file-upload-dropzone-border-color: var(--ds-border-dashed);
  --ds-file-upload-dropzone-radius: var(--ds-radius-button);
  --ds-file-upload-dropzone-min-height: calc(var(--ds-space-12) * 4);
  --ds-file-upload-dropzone-padding: var(--ds-space-6);
  --ds-file-upload-dropzone-bg: var(--ds-bg-surface);
  --ds-file-upload-dropzone-gap: var(--ds-space-3);
  --ds-file-upload-dropzone-dragover-border: var(--ds-color-action);
  --ds-file-upload-dropzone-dragover-bg: var(--ds-bg-success-subtle);

  --ds-file-upload-icon-size: var(--ds-size-control-lg-height);
  --ds-file-upload-icon-glyph-size: var(--ds-space-6);
  --ds-file-upload-icon-glyph-stroke-width: 1.8;
  --ds-file-upload-icon-radius: var(--ds-radius-pill);
  --ds-file-upload-icon-bg: var(--ds-surface-neutral);
  --ds-file-upload-icon-color: var(--ds-text-label);

  --ds-file-upload-title-size: var(--ds-font-size-body);
  --ds-file-upload-title-weight: var(--ds-font-weight-medium);
  --ds-file-upload-title-color: var(--ds-text-label);

  --ds-file-upload-list-gap: var(--ds-space-2);
  --ds-file-upload-item-padding-y: var(--ds-space-3);
  --ds-file-upload-item-padding-x: var(--ds-space-4);
  --ds-file-upload-item-gap: var(--ds-space-3);
  --ds-file-upload-item-border: var(--ds-border-subtle);
  --ds-file-upload-item-radius: var(--ds-radius-control);
  --ds-file-upload-item-bg: var(--ds-bg-surface);

  --ds-file-upload-name-size: var(--ds-font-size-btn);
  --ds-file-upload-name-weight: var(--ds-font-weight-semibold);
  --ds-file-upload-name-color: var(--ds-text-title);
  --ds-file-upload-meta-size: var(--ds-size-pill-xs-font-size);
  --ds-file-upload-meta-weight: var(--ds-font-weight-bold);
  --ds-file-upload-meta-letter-spacing: var(--ds-letter-spacing-label);
  --ds-file-upload-meta-color: var(--ds-text-tertiary);

  /* Evidence Files */
  --ds-evidence-files-shell-max-width: calc(var(--ds-space-16) * 16);
  --ds-evidence-files-head-gap: var(--ds-space-3);
  --ds-evidence-files-head-margin-bottom: var(--ds-space-4);
  --ds-evidence-files-title-size: var(--ds-typography-scale-18);
  --ds-evidence-files-title-weight: var(--ds-font-weight-bold);
  --ds-evidence-files-title-color: var(--ds-text-strong);

  --ds-evidence-files-count-bg: var(--ds-surface-neutral);
  --ds-evidence-files-count-fg: var(--ds-text-tertiary);
  --ds-evidence-files-count-size: var(--ds-size-pill-sm-font-size);
  --ds-evidence-files-count-weight: var(--ds-font-weight-medium);
  --ds-evidence-files-count-radius: var(--ds-space-1);
  --ds-evidence-files-count-padding-y: var(--ds-space-1);
  --ds-evidence-files-count-padding-x: var(--ds-space-2);

  --ds-evidence-files-sort-gap: var(--ds-space-2);
  --ds-evidence-files-sort-size: var(--ds-size-pill-sm-font-size);
  --ds-evidence-files-sort-color: var(--ds-text-tertiary);
  --ds-evidence-files-sort-hover-color: var(--ds-text-strong);
  --ds-evidence-files-sort-icon-size: var(--ds-typography-scale-18);

  --ds-evidence-files-list-bg: var(--ds-bg-surface);
  --ds-evidence-files-list-border: var(--ds-border-subtle);
  --ds-evidence-files-list-radius: var(--ds-radius-lg);
  --ds-evidence-files-list-shadow: var(--ds-shadow-sm);
  --ds-evidence-files-list-divider: var(--ds-border-subtle);

  --ds-evidence-files-row-padding-y: var(--ds-space-4);
  --ds-evidence-files-row-padding-x: var(--ds-space-4);
  --ds-evidence-files-row-gap: var(--ds-space-4);
  --ds-evidence-files-row-hover-bg: var(--ds-surface-subtle);
  --ds-evidence-files-row-drag-opacity: 0.62;
  --ds-evidence-files-row-drag-bg: var(--ds-bg-success-subtle);

  --ds-evidence-files-handle-color: var(--ds-border-strong);
  --ds-evidence-files-handle-cursor: move;
  --ds-evidence-files-handle-size: var(--ds-typography-scale-20);

  --ds-evidence-files-type-size: var(--ds-size-control-sm-height);
  --ds-evidence-files-type-radius: var(--ds-radius-sm);
  --ds-evidence-files-type-icon-size: var(--ds-typography-scale-20);
  --ds-evidence-files-type-doc-bg: var(--ds-color-light-blue-light);
  --ds-evidence-files-type-doc-fg: var(--ds-color-light-blue);
  --ds-evidence-files-type-code-bg: var(--ds-surface-neutral);
  --ds-evidence-files-type-code-fg: var(--ds-text-secondary);
  --ds-evidence-files-type-img-bg: var(--ds-color-yellow-light);
  --ds-evidence-files-type-img-fg: var(--ds-color-yellow);

  --ds-evidence-files-title-row-size: var(--ds-font-size-btn);
  --ds-evidence-files-title-row-weight: var(--ds-font-weight-medium);
  --ds-evidence-files-title-row-color: var(--ds-text-strong);
  --ds-evidence-files-meta-size: var(--ds-size-pill-sm-font-size);
  --ds-evidence-files-meta-color: var(--ds-text-tertiary);
  --ds-evidence-files-meta-margin-top: var(--ds-space-1);

  --ds-evidence-files-actions-gap: var(--ds-space-6);
  --ds-evidence-files-icon-actions-gap: var(--ds-space-3);
  --ds-evidence-files-action-icon-size: var(--ds-typography-scale-18);
  --ds-evidence-files-action-icon-color: var(--ds-text-tertiary);
  --ds-evidence-files-action-view-hover: var(--ds-color-info);
  --ds-evidence-files-action-delete-hover: var(--ds-color-danger);

  --ds-evidence-files-menu-toggle-color: var(--ds-text-tertiary);
  --ds-evidence-files-menu-toggle-hover-color: var(--ds-text-strong);
  --ds-evidence-files-menu-offset-y: var(--ds-space-2);
  --ds-evidence-files-menu-min-width: calc(var(--ds-space-20) * 2);
  --ds-evidence-files-menu-border: var(--ds-border-strong);
  --ds-evidence-files-menu-radius: var(--ds-radius-control);
  --ds-evidence-files-menu-bg: var(--ds-bg-surface);
  --ds-evidence-files-menu-shadow: var(--ds-shadow-menu);
  --ds-evidence-files-menu-padding: var(--ds-space-2);
  --ds-evidence-files-menu-z: 10;

  --ds-evidence-files-menu-item-size: var(--ds-size-pill-sm-font-size);
  --ds-evidence-files-menu-item-weight: var(--ds-font-weight-semibold);
  --ds-evidence-files-menu-item-color: var(--ds-text-strong);
  --ds-evidence-files-menu-item-radius: var(--ds-radius-sm);
  --ds-evidence-files-menu-item-padding-y: var(--ds-space-2);
  --ds-evidence-files-menu-item-padding-x: var(--ds-space-2);
  --ds-evidence-files-menu-item-hover-bg: var(--ds-surface-neutral);

  --ds-evidence-files-help-margin-top: var(--ds-space-3);
  --ds-evidence-files-help-size: var(--ds-size-pill-sm-font-size);
  --ds-evidence-files-help-color: var(--ds-text-tertiary);

  /* Navbar */
  --ds-navbar-bg: var(--ds-bg-dark);
  --ds-navbar-width: calc(var(--ds-space-16) * 4);
  --ds-navbar-radius-bottom: var(--ds-radius-lg);
  --ds-navbar-embed-min-height: calc(var(--ds-space-16) * 5);
  --ds-navbar-brand-padding-y: var(--ds-space-6);
  --ds-navbar-brand-padding-x: var(--ds-space-4);
  --ds-navbar-brand-gap: var(--ds-space-2);
  --ds-navbar-logo-height: var(--ds-space-12);
  --ds-navbar-logo-color: var(--ds-color-action);
  --ds-navbar-nav-padding-y: var(--ds-space-4);
  --ds-navbar-nav-padding-x: var(--ds-space-6);
  --ds-navbar-nav-gap: var(--ds-space-1);
  --ds-navbar-item-padding-y: var(--ds-space-2);
  --ds-navbar-item-padding-x: var(--ds-space-4);
  --ds-navbar-item-gap: var(--ds-space-3);
  --ds-navbar-item-color: var(--ds-text-on-dark);
  --ds-navbar-item-font-size: var(--ds-font-size-btn);
  --ds-navbar-item-font-weight: var(--ds-font-weight-semibold);
  --ds-navbar-item-radius: var(--ds-radius-control);
  --ds-navbar-item-selected-bg: var(--ds-color-action);
  --ds-navbar-item-selected-color: var(--ds-color-white);
}

* {
  box-sizing: border-box;
}

.ds-root {
  margin: 0;
  min-height: 100vh;
  background: var(--ds-bg-app);
  color: var(--ds-text-body);
  font: var(--ds-font-weight-light) var(--ds-font-size-body) / var(--ds-line-height-body) var(--ds-font-family);
}

.ds-root.ds-embed {
  min-height: auto;
  background: transparent;
}

.ds-embed-shell {
  padding: var(--ds-embed-shell-padding);
}

/* Navbar in embed: min-height so it reads as a bar, no 100vh to avoid iframe loop */
.ds-embed-shell .ds-navbar {
  min-height: var(--ds-navbar-embed-min-height);
}

/* Navbar */
.ds-navbar {
  width: var(--ds-navbar-width);
  min-height: 100vh;
  background: var(--ds-navbar-bg);
  border-radius: 0 0 var(--ds-navbar-radius-bottom) var(--ds-navbar-radius-bottom);
  display: flex;
  flex-direction: column;
  z-index: var(--ds-z-navbar);
}

.ds-navbar-brand {
  padding: var(--ds-navbar-brand-padding-y) var(--ds-navbar-brand-padding-x);
  display: flex;
  align-items: center;
  gap: var(--ds-navbar-brand-gap);
}

.ds-navbar-brand-logo {
  color: var(--ds-navbar-logo-color);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-bold);
  text-decoration: none;
  letter-spacing: var(--ds-letter-spacing-tight);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-navbar-brand-gap);
}

.ds-navbar-brand-logo img.ds-navbar-brand-logo-img {
  height: var(--ds-navbar-logo-height);
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.ds-navbar-brand-logo:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

.ds-navbar-nav {
  padding: var(--ds-navbar-nav-padding-y) var(--ds-navbar-nav-padding-x);
  display: flex;
  flex-direction: column;
  gap: var(--ds-navbar-nav-gap);
}

.ds-navbar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-navbar-item-gap);
  padding: var(--ds-navbar-item-padding-y) var(--ds-navbar-item-padding-x);
  border: 0;
  border-radius: var(--ds-navbar-item-radius);
  background: transparent;
  color: var(--ds-navbar-item-color);
  font: inherit;
  font-size: var(--ds-navbar-item-font-size);
  font-weight: var(--ds-navbar-item-font-weight);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ds-transition-fast), color var(--ds-transition-fast);
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}

.ds-navbar-item:hover {
  background: color-mix(in srgb, var(--ds-color-white) 8%, transparent);
}

.ds-navbar-item:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

.ds-navbar-item--selected,
.ds-navbar-item[aria-current="page"] {
  background: var(--ds-navbar-item-selected-bg);
  color: var(--ds-navbar-item-selected-color);
}

.ds-navbar-item-icon {
  flex-shrink: 0;
  width: var(--ds-space-6);
  height: var(--ds-space-6);
}

.ds-focus:focus-visible,
.ds-root :focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

.ds-page-main {
  padding-top: clamp(var(--ds-size-control-sm-height), 6vw, var(--ds-space-16));
  padding-bottom: var(--ds-section-padding-y);
  padding-left: var(--ds-section-padding-x);
  padding-right: var(--ds-section-padding-x);
}

.ds-shell {
  width: 100%;
  max-width: var(--ds-container-max-width);
  margin: 0 auto;
}

.ds-label {
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-font-size-label);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-text-label);
  text-transform: uppercase;
  letter-spacing: var(--ds-letter-spacing-label);
}

.ds-section-title {
  margin: 0 0 var(--ds-space-4);
  color: var(--ds-text-title);
  font-size: var(--ds-font-size-title);
  font-weight: var(--ds-font-weight-bold);
  letter-spacing: var(--ds-letter-spacing-tight);
  line-height: 1;
}

.ds-section-subtitle {
  margin: 0;
  max-width: calc(var(--ds-space-16) * 10);
  color: var(--ds-text-soft);
  font-weight: var(--ds-font-weight-regular);
}

.ds-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-12);
}

.ds-icon,
.ds-btn-icon {
  width: var(--ds-space-4);
  height: var(--ds-space-4);
}

.ds-btn {
  border: var(--ds-border-width-1) solid transparent;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-surface);
  color: var(--ds-color-navy);
  height: var(--ds-size-control-sm-height);
  padding: 0 var(--ds-space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  font: inherit;
  font-size: var(--ds-font-size-btn);
  font-weight: var(--ds-font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--ds-transition-base), color var(--ds-transition-base), border-color var(--ds-transition-base), background var(--ds-transition-base);
}

.ds-btn:hover {
  transform: translateY(calc(-1 * var(--ds-space-1)));
}

.ds-btn:disabled {
  color: var(--ds-text-muted);
  background: color-mix(in srgb, var(--ds-color-platinum) 18%, white);
  border-color: color-mix(in srgb, var(--ds-color-platinum) 74%, white);
  cursor: not-allowed;
  transform: none;
}

.ds-btn-primary {
  background: var(--ds-color-action);
  border-color: var(--ds-color-action);
  color: var(--ds-color-white);
}

.ds-btn-primary:hover {
  background: var(--ds-color-action-hover);
  border-color: var(--ds-color-action-hover);
}

.ds-btn-primary:active {
  background: var(--ds-color-action-active);
  border-color: var(--ds-color-action-active);
}

.ds-btn-secondary {
  background: var(--ds-color-white);
  border-color: var(--ds-color-platinum);
}

.ds-btn-info {
  background: color-mix(in srgb, var(--ds-color-info) 16%, white);
  border-color: color-mix(in srgb, var(--ds-color-info) 45%, white);
  color: color-mix(in srgb, var(--ds-color-info) 82%, var(--ds-color-navy));
}

.ds-btn-strong {
  background: var(--ds-color-navy);
  border-color: var(--ds-color-navy);
  color: var(--ds-color-white);
}

.ds-btn-danger {
  color: var(--ds-color-pink);
  border-color: color-mix(in srgb, var(--ds-color-pink) 42%, white);
  background: color-mix(in srgb, var(--ds-color-pink) 5%, white);
}

.ds-btn-optional {
  background: var(--ds-color-white);
  border: var(--ds-border-width-2) solid var(--ds-color-black);
  color: var(--ds-color-black);
  border-radius: var(--ds-radius-md);
}

.ds-btn-optional:hover {
  background: var(--ds-color-black);
  border-color: var(--ds-color-black);
  color: var(--ds-color-white);
}

.ds-icon-btn {
  width: var(--ds-space-8);
  height: var(--ds-space-8);
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--ds-transition-fast), background var(--ds-transition-fast);
}

.ds-icon-btn:hover {
  color: var(--ds-color-navy);
  background: color-mix(in srgb, var(--ds-color-platinum) 32%, var(--ds-color-white));
}

.ds-input {
  border: var(--ds-border-width-1) solid var(--ds-color-platinum);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-2) var(--ds-space-3);
  font: inherit;
  color: var(--ds-color-text);
  background: var(--ds-color-white);
}

.ds-input-grow {
  flex: 1;
  min-width: calc(var(--ds-space-8) * 7);
}

.ds-input-with-icons {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  height: var(--ds-size-control-sm-height);
  padding-inline: var(--ds-space-3);
  border: var(--ds-border-width-1) solid var(--ds-color-platinum);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-white);
}

.ds-input-with-icons .ds-input,
.ds-input-with-icons input {
  border: 0;
  padding: 0;
  background: transparent;
  height: auto;
}

.ds-input-with-icons .ds-input-icon {
  flex-shrink: 0;
  width: var(--ds-space-4);
  height: var(--ds-space-4);
  color: var(--ds-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-textarea {
  border: var(--ds-border-width-1) solid var(--ds-color-platinum);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-2) var(--ds-space-3);
  font: inherit;
  color: var(--ds-color-text);
  background: var(--ds-color-white);
  min-height: calc(var(--ds-space-12) * 2);
  resize: vertical;
  display: block;
  width: 100%;
}

.ds-field {
  margin: 0;
  display: grid;
  gap: var(--ds-space-1);
}

.ds-field-label {
  color: var(--ds-color-subtle);
  font-size: var(--ds-typography-scale-11);
  font-weight: var(--ds-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-letter-spacing-label);
}

.ds-checkbox-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
}

.ds-checkbox-wrap input[type="checkbox"] {
  appearance: none;
  margin: 0;
  width: var(--ds-space-6);
  height: var(--ds-space-6);
  min-width: var(--ds-space-6);
  border: var(--ds-border-width-2) solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-surface);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color var(--ds-transition-fast), background var(--ds-transition-fast);
  flex-shrink: 0;
}

.ds-checkbox-wrap input[type="checkbox"]::before {
  content: "";
  width: calc(var(--ds-space-4) - var(--ds-space-1));
  height: calc(var(--ds-space-4) - var(--ds-space-1));
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--ds-color-white);
  transform: scale(0);
  transition: transform var(--ds-transition-fast);
}

.ds-checkbox-wrap input[type="checkbox"]:checked {
  background: var(--ds-color-action);
  border-color: var(--ds-color-action);
}

.ds-checkbox-wrap input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.ds-checkbox-wrap input[type="checkbox"]:focus-visible {
  outline: var(--ds-border-width-2) solid var(--ds-color-action);
  outline-offset: var(--ds-space-1);
}

.ds-checkbox-wrap label {
  cursor: pointer;
  font-size: var(--ds-font-size-btn);
  color: var(--ds-text-body);
  line-height: var(--ds-line-height-body);
}

.ds-modal {
  width: min(calc(var(--ds-space-12) * 18), calc(100vw - var(--ds-space-12)));
  border: var(--ds-border-width-1) solid var(--ds-color-platinum);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-6);
  background: var(--ds-color-white);
  box-shadow: var(--ds-shadow-md);
}

.ds-modal::backdrop {
  background: var(--ds-bg-overlay);
}

/* Button Library */
.ds-button-lib-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ds-button-lib-size-md-min-width);
  height: var(--ds-button-lib-size-md-height);
  padding-inline: var(--ds-button-lib-size-md-padding-x);
  border: 0;
  border-radius: var(--ds-button-lib-radius);
  font: inherit;
  font-weight: var(--ds-button-lib-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ds-button-lib-btn--sm {
  min-width: var(--ds-button-lib-size-sm-min-width);
  height: var(--ds-button-lib-size-sm-height);
  padding-inline: var(--ds-button-lib-size-sm-padding-x);
}

.ds-button-lib-btn--md {
  min-width: var(--ds-button-lib-size-md-min-width);
  height: var(--ds-button-lib-size-md-height);
  padding-inline: var(--ds-button-lib-size-md-padding-x);
}

.ds-button-lib-btn--lg {
  min-width: var(--ds-button-lib-size-lg-min-width);
  height: var(--ds-button-lib-size-lg-height);
  padding-inline: var(--ds-button-lib-size-lg-padding-x);
}

.ds-button-lib-btn--xl {
  min-width: var(--ds-button-lib-size-xl-min-width);
  height: var(--ds-button-lib-size-xl-height);
  padding-inline: var(--ds-button-lib-size-xl-padding-x);
}

.ds-button-lib-btn--primary {
  background: var(--ds-button-lib-primary-bg);
  color: var(--ds-button-lib-primary-fg);
}

.ds-button-lib-btn--strong {
  background: var(--ds-button-lib-strong-bg);
  color: var(--ds-button-lib-strong-fg);
}

.ds-button-lib-btn--return {
  border: var(--ds-button-lib-border-width) solid var(--ds-button-lib-return-border);
  background: var(--ds-button-lib-return-bg);
  color: var(--ds-button-lib-return-fg);
}

.ds-button-lib-btn--optional {
  border: var(--ds-button-lib-option-border-width) solid var(--ds-button-lib-optional-border);
  background: var(--ds-button-lib-optional-bg);
  color: var(--ds-button-lib-optional-fg);
}

.ds-button-lib-btn--optional:hover {
  background: var(--ds-button-lib-optional-hover-bg);
  color: var(--ds-button-lib-optional-hover-fg);
}

/* Data Table */
.ds-data-table-shell {
  border: var(--ds-border-width-1) solid var(--ds-data-table-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-data-table-bg);
  overflow: hidden;
}

.ds-data-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  border-bottom: var(--ds-border-width-1) solid var(--ds-data-table-border);
  background: var(--ds-data-table-bg);
}

.ds-data-table-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
}

.ds-data-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ds-data-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ds-data-table-text);
}

.ds-data-table caption {
  padding: var(--ds-space-3) var(--ds-space-4);
  text-align: left;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-label);
  letter-spacing: var(--ds-letter-spacing-label);
  text-transform: uppercase;
}

.ds-data-table th,
.ds-data-table td {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: var(--ds-border-width-1) solid var(--ds-data-table-border);
  text-align: left;
  vertical-align: middle;
}

.ds-data-table th {
  background: var(--ds-data-table-header-bg);
  color: var(--ds-data-table-heading-text);
  font-size: var(--ds-font-size-label);
  font-weight: var(--ds-font-weight-semibold);
  letter-spacing: var(--ds-letter-spacing-label);
  text-transform: uppercase;
}

.ds-data-table td {
  font-size: var(--ds-font-size-btn);
}

.ds-data-table--compact th,
.ds-data-table--compact td {
  padding: var(--ds-space-2) var(--ds-space-3);
}

.ds-data-table--striped tbody tr:nth-child(even) td {
  background: var(--ds-data-table-row-stripe-bg);
}

.ds-data-table--interactive tbody tr:hover td {
  background: var(--ds-data-table-row-hover-bg);
}

.ds-data-table--selectable tbody tr[aria-selected="true"] td {
  background: var(--ds-data-table-row-selected-bg);
}

.ds-data-table--sortable .ds-data-table-sort {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
}

.ds-data-table--sortable .ds-data-table-sort:hover {
  color: var(--ds-text-title);
}

.ds-data-table-sort-icon {
  width: var(--ds-space-4);
  height: var(--ds-space-4);
}

.ds-data-table-filter-wrap {
  position: relative;
  display: inline-block;
}

.ds-data-table-filter-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: var(--ds-space-1);
  min-width: calc(var(--ds-space-12) * 4);
  padding: var(--ds-space-2);
  background: var(--ds-bg-surface);
  border: var(--ds-border-width-1) solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-sm);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

.ds-data-table-filter-dropdown[hidden] {
  display: none;
}

.ds-data-table-filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  max-height: calc(var(--ds-space-12) * 5);
  overflow-y: auto;
  min-height: 0;
}

.ds-data-table-filter-options--text {
  max-height: none;
  overflow: visible;
}

.ds-data-table-filter-options--text .ds-field {
  margin: 0;
}

.ds-data-table-filter-dropdown .ds-data-table-filter-input {
  min-height: var(--ds-size-control-sm-height);
  height: var(--ds-size-control-sm-height);
  font-size: var(--ds-font-size-btn);
  font-weight: var(--ds-font-weight-semibold);
  line-height: 1;
  padding: 0 var(--ds-space-3);
  box-sizing: border-box;
}

.ds-data-table-filter-dropdown .ds-data-table-filter-apply .ds-btn {
  min-height: var(--ds-size-control-sm-height);
  height: var(--ds-size-control-sm-height);
  font-size: var(--ds-font-size-btn);
  font-weight: var(--ds-font-weight-semibold);
  line-height: 1;
}

.ds-data-table-filter-options--chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  max-height: none;
  overflow: visible;
}

.ds-data-table-filter-chip {
  cursor: pointer;
  border: var(--ds-border-width-1) solid transparent;
  transition: border-color var(--ds-transition-fast), background var(--ds-transition-fast);
}

.ds-data-table-filter-chip:hover {
  opacity: 0.9;
}

.ds-data-table-filter-chip[aria-pressed="true"] {
  border-color: var(--ds-color-action);
  box-shadow: 0 0 0 1px var(--ds-color-action);
}

.ds-data-table-filter-options .ds-btn {
  width: 100%;
  justify-content: flex-start;
  font-size: var(--ds-typography-scale-12);
  font-weight: var(--ds-font-weight-regular);
}

.ds-data-table-filter-options .ds-btn[aria-pressed="true"] {
  background: var(--ds-row-action-active-bg);
  border-color: var(--ds-color-action);
  color: var(--ds-text-title);
}

.ds-data-table-filter-apply {
  margin-top: 0;
  padding-top: var(--ds-space-2);
  border-top: var(--ds-border-width-1) solid var(--ds-border-default);
  flex-shrink: 0;
  justify-content: center;
}

/* Dropdown (generic) */
.ds-dropdown-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.ds-dropdown-trigger {
  width: 100%;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
}

.ds-dropdown-trigger-value {
  flex: 1;
  min-width: 0;
  color: var(--ds-text-body);
}

.ds-dropdown-trigger-value:empty::before {
  content: attr(data-placeholder);
  color: var(--ds-text-muted);
}

.ds-dropdown-panel {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: var(--ds-space-1);
  min-width: var(--ds-dropdown-panel-min-width);
  max-height: var(--ds-dropdown-panel-max-height);
  padding: var(--ds-space-2);
  background: var(--ds-bg-surface);
  border: var(--ds-border-width-1) solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-sm);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  overflow-y: auto;
}

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

.ds-dropdown-panel--search .ds-dropdown-search {
  flex-shrink: 0;
}

.ds-dropdown-panel--search .ds-dropdown-options {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  overflow-y: auto;
  min-height: 0;
}

.ds-dropdown-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-1);
  width: 100%;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: var(--ds-border-width-1) solid transparent;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-text-body);
  font: inherit;
  font-size: var(--ds-font-size-btn);
  text-align: left;
  cursor: pointer;
  transition: background var(--ds-transition-fast), border-color var(--ds-transition-fast);
}

.ds-dropdown-option.ds-tag-pill {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.ds-dropdown-option:hover {
  background: var(--ds-row-action-hover-bg);
}

.ds-dropdown-option[aria-selected="true"] {
  background: var(--ds-row-action-active-bg);
  border-color: var(--ds-color-action);
  color: var(--ds-text-title);
}

.ds-dropdown-option__primary {
  font-weight: var(--ds-font-weight-semibold);
}

.ds-dropdown-option__secondary {
  font-size: var(--ds-typography-scale-12);
  color: var(--ds-text-muted);
}

/* Small Form (composite) */
.ds-small-form {
  max-width: var(--ds-small-form-max-width);
  border: var(--ds-border-width-1) solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-6);
  background: var(--ds-bg-surface);
  box-shadow: var(--ds-shadow-md);
}

.ds-small-form__title {
  margin: 0 0 var(--ds-small-form-gap);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-text-title);
}

.ds-small-form__fields {
  display: grid;
  gap: var(--ds-small-form-gap);
}

.ds-small-form__fields--two-col {
  grid-template-columns: 1fr 1fr;
}

.ds-small-form__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-small-form-actions-gap);
  margin-top: var(--ds-space-6);
  padding-top: var(--ds-space-4);
  border-top: var(--ds-border-width-1) solid var(--ds-border-default);
}

.ds-data-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-data-table-bg);
}

.ds-data-table-foot p {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-label);
  letter-spacing: var(--ds-letter-spacing-label);
  text-transform: uppercase;
}

/* Row Action Icons */
.ds-row-action {
  width: var(--ds-row-action-size);
  height: var(--ds-row-action-size);
  border: var(--ds-border-width-1) solid transparent;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-text-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  cursor: pointer;
  transition: color var(--ds-transition-fast), background var(--ds-transition-fast), border-color var(--ds-transition-fast);
}

.ds-row-action:hover {
  background: var(--ds-row-action-hover-bg);
  color: var(--ds-text-title);
}

.ds-row-action:active {
  background: var(--ds-row-action-active-bg);
}

.ds-row-action:disabled,
.ds-row-action[aria-disabled="true"] {
  color: var(--ds-row-action-disabled-fg);
  cursor: not-allowed;
}

.ds-row-action-group {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
}

.ds-row-action--danger {
  color: var(--ds-color-danger);
}

.ds-row-action--danger:hover {
  background: var(--ds-color-bg-danger);
  color: var(--ds-color-text-danger);
}

.ds-row-action--success {
  color: var(--ds-color-success);
}

.ds-row-action--success:hover {
  background: var(--ds-color-bg-success);
  color: var(--ds-color-text-success);
}

/* Pagination */
.ds-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
}

.ds-pagination-page {
  min-width: var(--ds-space-8);
  height: var(--ds-space-8);
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-text-body);
  font: inherit;
  font-size: var(--ds-font-size-btn);
  font-weight: var(--ds-font-weight-semibold);
  cursor: pointer;
  transition: background var(--ds-transition-fast), color var(--ds-transition-fast);
}

.ds-pagination-page:hover {
  background: var(--ds-bg-alt);
  color: var(--ds-text-title);
}

.ds-pagination-page[aria-current="page"] {
  background: var(--ds-color-navy);
  color: var(--ds-color-white);
}

.ds-pagination-ellipsis {
  min-width: var(--ds-space-8);
  text-align: center;
  color: var(--ds-text-muted);
}

/* Table Link with Actions */
.ds-table-link {
  position: relative;
  display: inline-block;
  max-width: calc(var(--ds-data-table-link-truncate-ch) * 1ch);
  min-width: 0;
}

.ds-table-link a {
  display: block;
  color: var(--ds-color-light-blue);
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.ds-table-link a:hover {
  color: var(--ds-color-info);
}

/* Link actions: overlay on hover, no layout space */
.ds-table-link .ds-row-action {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-transition-fast);
}

.ds-table-link .ds-row-action:last-of-type {
  right: 0;
}

.ds-table-link .ds-row-action:first-of-type {
  right: calc(var(--ds-row-action-size) + var(--ds-space-1));
}

.ds-table-link:hover .ds-row-action,
.ds-table-link .ds-row-action:focus,
.ds-table-link:focus-within .ds-row-action {
  opacity: 1;
  pointer-events: auto;
}

.ds-data-table-cell-link {
  min-width: calc(var(--ds-data-table-link-truncate-ch) * 1ch);
  max-width: calc(var(--ds-data-table-link-truncate-ch) * 1ch);
}

/* Status Tag Selection */
.ds-status-tag {
  border: var(--ds-border-width-1) solid;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-bg-neutral);
  color: var(--ds-color-text-neutral);
  border-color: var(--ds-color-border-neutral);
  padding: var(--ds-space-1) var(--ds-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-font-size-btn);
  font-weight: var(--ds-font-weight-bold);
  line-height: 1;
  cursor: pointer;
  transition: background var(--ds-transition-fast), border-color var(--ds-transition-fast), color var(--ds-transition-fast);
}

.ds-status-tag:hover {
  border-color: var(--ds-color-border-neutral);
}

.ds-status-tag[aria-pressed="true"] {
  border-color: var(--ds-color-action);
  box-shadow: none;
}

.ds-status-tag--success {
  background: var(--ds-color-bg-success);
  color: var(--ds-color-text-success);
  border-color: var(--ds-color-border-success);
}

.ds-status-tag--warning {
  background: var(--ds-color-bg-warning);
  color: var(--ds-color-text-warning);
  border-color: var(--ds-color-border-warning);
}

.ds-status-tag--danger {
  background: var(--ds-color-bg-danger);
  color: var(--ds-color-text-danger);
  border-color: var(--ds-color-border-danger);
}

.ds-status-tag--info {
  background: var(--ds-color-bg-info);
  color: var(--ds-color-text-info);
  border-color: var(--ds-color-border-info);
}

.ds-status-tag--neutral {
  background: var(--ds-color-bg-neutral);
  color: var(--ds-color-text-neutral);
  border-color: var(--ds-color-border-neutral);
}

/* Tags */
.ds-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-tag-pill-gap);
  border: var(--ds-tag-pill-border-width) solid transparent;
  border-radius: var(--ds-tag-pill-radius);
  font-weight: var(--ds-tag-pill-font-weight);
  line-height: var(--ds-tag-pill-line-height);
  white-space: nowrap;
}

.ds-tag-pill--xs {
  font-size: var(--ds-tag-pill-size-xs-font-size);
  padding: var(--ds-tag-pill-size-xs-padding-y) var(--ds-tag-pill-size-xs-padding-x);
}

.ds-tag-pill--sm {
  font-size: var(--ds-tag-pill-size-sm-font-size);
  padding: var(--ds-tag-pill-size-sm-padding-y) var(--ds-tag-pill-size-sm-padding-x);
}

.ds-tag-pill--md {
  font-size: var(--ds-tag-pill-size-md-font-size);
  padding: var(--ds-tag-pill-size-md-padding-y) var(--ds-tag-pill-size-md-padding-x);
}

.ds-tag-pill--lg {
  font-size: var(--ds-tag-pill-size-lg-font-size);
  padding: var(--ds-tag-pill-size-lg-padding-y) var(--ds-tag-pill-size-lg-padding-x);
}

.ds-tag-pill--uppercase {
  text-transform: uppercase;
}

.ds-tag-pill__icon {
  width: var(--ds-tag-pill-icon-size);
  height: var(--ds-tag-pill-icon-size);
}

.ds-tag-pill__dot {
  width: var(--ds-tag-pill-dot-size);
  height: var(--ds-tag-pill-dot-size);
  border-radius: var(--ds-tag-pill-radius);
}

.ds-tag-pill--solid.ds-tag-pill--green {
  background: var(--ds-tag-pill-tone-green-solid-bg);
  color: var(--ds-tag-pill-tone-green-solid-fg);
}

.ds-tag-pill--light.ds-tag-pill--green {
  background: var(--ds-tag-pill-tone-green-light-bg);
  color: var(--ds-tag-pill-tone-green-light-fg);
}

.ds-tag-pill--solid.ds-tag-pill--signal-blue {
  background: var(--ds-tag-pill-tone-signal-blue-solid-bg);
  color: var(--ds-tag-pill-tone-signal-blue-solid-fg);
}

.ds-tag-pill--light.ds-tag-pill--signal-blue {
  background: var(--ds-tag-pill-tone-signal-blue-light-bg);
  color: var(--ds-tag-pill-tone-signal-blue-light-fg);
}

.ds-tag-pill--solid.ds-tag-pill--red {
  background: var(--ds-tag-pill-tone-red-solid-bg);
  color: var(--ds-tag-pill-tone-red-solid-fg);
}

.ds-tag-pill--light.ds-tag-pill--red {
  background: var(--ds-tag-pill-tone-red-light-bg);
  color: var(--ds-tag-pill-tone-red-light-fg);
}

.ds-tag-pill--solid.ds-tag-pill--yellow {
  background: var(--ds-tag-pill-tone-yellow-solid-bg);
  color: var(--ds-tag-pill-tone-yellow-solid-fg);
}

.ds-tag-pill--light.ds-tag-pill--yellow {
  background: var(--ds-tag-pill-tone-yellow-light-bg);
  color: var(--ds-tag-pill-tone-yellow-light-fg);
}

.ds-tag-pill--solid.ds-tag-pill--light-blue {
  background: var(--ds-tag-pill-tone-light-blue-solid-bg);
  color: var(--ds-tag-pill-tone-light-blue-solid-fg);
}

.ds-tag-pill--light.ds-tag-pill--light-blue {
  background: var(--ds-tag-pill-tone-light-blue-light-bg);
  color: var(--ds-tag-pill-tone-light-blue-light-fg);
}

.ds-tag-pill--solid.ds-tag-pill--platinum {
  background: var(--ds-tag-pill-tone-platinum-solid-bg);
  color: var(--ds-tag-pill-tone-platinum-solid-fg);
}

.ds-tag-pill--light.ds-tag-pill--platinum {
  background: var(--ds-tag-pill-tone-platinum-light-bg);
  color: var(--ds-tag-pill-tone-platinum-light-fg);
}

.ds-tag-pill--solid.ds-tag-pill--pink {
  background: var(--ds-tag-pill-tone-pink-solid-bg);
  color: var(--ds-tag-pill-tone-pink-solid-fg);
}

.ds-tag-pill--light.ds-tag-pill--pink {
  background: var(--ds-tag-pill-tone-pink-light-bg);
  color: var(--ds-tag-pill-tone-pink-light-fg);
}

.ds-tag-pill--solid.ds-tag-pill--teal {
  background: var(--ds-tag-pill-tone-teal-solid-bg);
  color: var(--ds-tag-pill-tone-teal-solid-fg);
}

.ds-tag-pill--light.ds-tag-pill--teal {
  background: var(--ds-tag-pill-tone-teal-light-bg);
  color: var(--ds-tag-pill-tone-teal-light-fg);
}

.ds-tag-pill--solid.ds-tag-pill--chip {
  background: var(--ds-tag-pill-tone-chip-solid-bg);
  color: var(--ds-tag-pill-tone-chip-solid-fg);
}

.ds-tag-pill--status-active.ds-tag-pill--light {
  border-color: var(--ds-tag-pill-status-active-light-border);
}

.ds-tag-pill--status-pending.ds-tag-pill--light {
  border-color: var(--ds-tag-pill-status-pending-light-border);
}

.ds-tag-pill--status-inactive.ds-tag-pill--light {
  border-color: var(--ds-tag-pill-status-inactive-light-border);
}

.ds-tag-pill__dot--on-dark {
  background: var(--ds-tag-pill-status-dot-on-dark);
}

.ds-tag-pill__dot--on-warning {
  background: var(--ds-tag-pill-status-dot-on-warning);
}

.ds-tag-pill__dot--green {
  background: var(--ds-tag-pill-tone-green-solid-bg);
}

.ds-tag-pill__dot--yellow {
  background: var(--ds-tag-pill-tone-yellow-solid-bg);
}

.ds-tag-pill__dot--red {
  background: var(--ds-tag-pill-tone-red-solid-bg);
}

/* Icon Library */
.ds-icon-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-icon-library-head-gap);
}

.ds-icon-library-panel {
  border: var(--ds-border-width-1) solid var(--ds-icon-library-panel-border);
  border-radius: var(--ds-icon-library-panel-radius);
  background: var(--ds-icon-library-panel-bg);
  padding: var(--ds-icon-library-panel-padding);
  display: grid;
  gap: var(--ds-icon-library-panel-gap);
}

.ds-icon-library-meta {
  font-size: var(--ds-icon-library-meta-size);
  color: var(--ds-icon-library-meta-color);
  font-weight: var(--ds-icon-library-meta-weight);
}

.ds-icon-library-search-row {
  display: grid;
  grid-template-columns: var(--ds-icon-library-search-columns);
  gap: var(--ds-icon-library-search-gap);
  align-items: center;
}

.ds-icon-library-search,
.ds-icon-library-select {
  width: 100%;
  height: var(--ds-icon-library-control-height);
  border: var(--ds-border-width-1) solid var(--ds-icon-library-control-border);
  border-radius: var(--ds-icon-library-control-radius);
  font-size: var(--ds-icon-library-control-size);
  color: var(--ds-icon-library-control-text);
  background: var(--ds-color-white);
}

.ds-icon-library-search {
  padding: 0 var(--ds-icon-library-control-padding-x);
}

.ds-icon-library-select {
  padding: 0 var(--ds-icon-library-select-padding-x);
}

.ds-icon-library-search:focus,
.ds-icon-library-select:focus {
  outline: none;
  border-color: var(--ds-icon-library-control-focus-border);
}

.ds-icon-library-grid {
  display: grid;
  grid-template-columns: var(--ds-icon-library-grid-columns);
  gap: var(--ds-icon-library-grid-gap);
}

.ds-icon-library-grid--all {
  grid-template-columns: repeat(auto-fill, minmax(var(--ds-icon-library-grid-all-min-col), 1fr));
  max-height: var(--ds-icon-library-grid-all-max-height);
  overflow: auto;
  padding-right: var(--ds-icon-library-grid-all-padding-right);
}

.ds-icon-library-card {
  position: relative;
  border: var(--ds-border-width-1) solid var(--ds-icon-library-card-border);
  border-radius: var(--ds-icon-library-card-radius);
  background: var(--ds-icon-library-card-bg);
  min-height: var(--ds-icon-library-card-min-height);
  padding: var(--ds-icon-library-card-padding);
}

.ds-icon-library-card--all {
  min-height: var(--ds-icon-library-card-min-height-all);
}

.ds-icon-library-card-trigger {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-icon-library-card-gap);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--ds-icon-library-icon-color);
  transition: color var(--ds-icon-library-trigger-transition);
}

.ds-icon-library-card .ds-icon-library-card-trigger {
  min-height: calc(var(--ds-icon-library-card-min-height) - (2 * var(--ds-icon-library-card-padding)));
}

.ds-icon-library-card--all .ds-icon-library-card-trigger {
  min-height: calc(var(--ds-icon-library-card-min-height-all) - (2 * var(--ds-icon-library-card-padding)));
}

.ds-icon-library-card-trigger svg {
  width: var(--ds-icon-library-icon-size);
  height: var(--ds-icon-library-icon-size);
  stroke-width: var(--ds-icon-library-icon-stroke-width);
}

.ds-icon-library-card-trigger:hover {
  color: var(--ds-color-action-hover);
}

.ds-icon-library-card-label {
  font-size: var(--ds-icon-library-label-size);
  color: var(--ds-icon-library-label-color);
  font-weight: var(--ds-icon-library-label-weight);
}

.ds-icon-library-card--all .ds-icon-library-card-label {
  font-size: var(--ds-icon-library-label-size-all);
  text-align: center;
  word-break: break-word;
}

.ds-icon-library-popover {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--ds-icon-library-popover-offset-y));
  transform: translateX(-50%);
  z-index: var(--ds-icon-library-popover-z);
  min-width: var(--ds-icon-library-popover-min-width);
  border: var(--ds-border-width-1) solid var(--ds-icon-library-popover-border);
  border-radius: var(--ds-icon-library-popover-radius);
  background: var(--ds-icon-library-popover-bg);
  box-shadow: var(--ds-icon-library-popover-shadow);
  padding: var(--ds-icon-library-popover-padding);
  display: grid;
  gap: var(--ds-icon-library-popover-gap);
}

.ds-icon-library-popover--portal {
  position: fixed;
  left: 0;
  top: 0;
  transform: none;
}

.ds-icon-library-popover[hidden] {
  display: none;
}

.ds-icon-library-export-actions {
  display: grid;
  gap: var(--ds-space-1);
}

.ds-icon-library-export-action-btn {
  height: var(--ds-icon-library-action-btn-height);
  border: var(--ds-border-width-1) solid var(--ds-icon-library-action-btn-border);
  border-radius: var(--ds-icon-library-action-btn-radius);
  padding: 0 var(--ds-icon-library-action-btn-padding-x);
  font-size: var(--ds-icon-library-action-btn-size);
  font-weight: var(--ds-font-weight-semibold);
  background: var(--ds-icon-library-action-btn-bg);
  color: var(--ds-icon-library-action-btn-fg);
  cursor: pointer;
  text-align: left;
}

.ds-icon-library-export-action-btn:hover {
  border-color: var(--ds-icon-library-action-btn-hover-border);
  background: var(--ds-icon-library-action-btn-hover-bg);
  color: var(--ds-icon-library-action-btn-hover-fg);
}

.ds-icon-library-export-reference {
  margin: 0;
  border: var(--ds-border-width-1) solid var(--ds-icon-library-reference-border);
  border-radius: var(--ds-icon-library-reference-radius);
  background: var(--ds-icon-library-reference-bg);
  color: var(--ds-icon-library-reference-color);
  padding: var(--ds-icon-library-reference-padding);
  font-size: var(--ds-icon-library-reference-size);
  line-height: var(--ds-icon-library-reference-line-height);
  white-space: pre-wrap;
}

/* Cards */
.ds-cards-stack {
  display: grid;
  gap: var(--ds-space-6);
}

.ds-cards-surface {
  border: var(--ds-border-width-1) solid var(--ds-cards-surface-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-white);
  padding: var(--ds-space-6);
  display: grid;
  gap: var(--ds-space-4);
}

.ds-cards-surface--soft-shadow {
  box-shadow: var(--ds-shadow-sm);
}

.ds-cards-surface--raised {
  box-shadow: var(--ds-shadow-md);
}

.ds-cards-surface-head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
}

.ds-cards-badge {
  width: var(--ds-cards-badge-size);
  height: var(--ds-cards-badge-size);
  border-radius: var(--ds-radius-pill);
  display: inline-grid;
  place-items: center;
  font-size: var(--ds-cards-badge-font-size);
  font-weight: var(--ds-font-weight-bold);
  line-height: 1;
  color: var(--ds-cards-badge-fg);
  background: var(--ds-cards-badge-bg);
}

.ds-cards-surface-title {
  margin: 0;
  color: var(--ds-color-navy);
  font-size: var(--ds-font-size-body);
  font-weight: var(--ds-font-weight-bold);
  line-height: 1.35;
}

.ds-cards-label {
  margin: var(--ds-space-1) 0 0;
  font-size: var(--ds-size-pill-sm-font-size);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-text-label);
  text-transform: uppercase;
  letter-spacing: var(--ds-cards-label-tracking);
}

.ds-cards-subsurface-wrap {
  padding-top: var(--ds-space-4);
  border-top: var(--ds-border-width-1) solid var(--ds-cards-subsurface-divider);
}

.ds-cards-subsurface {
  border: var(--ds-border-width-1) solid var(--ds-cards-subsurface-border);
  border-radius: var(--ds-cards-subsurface-radius);
  padding: var(--ds-space-3);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
}

.ds-cards-subsurface-code {
  min-width: var(--ds-cards-subsurface-min-code-width);
  color: var(--ds-color-navy);
  font-size: var(--ds-font-size-btn);
  font-weight: var(--ds-font-weight-bold);
}

.ds-cards-field {
  flex: 1;
  min-width: var(--ds-cards-field-min-width);
  height: var(--ds-size-control-sm-height);
  border: var(--ds-border-width-1) solid var(--ds-cards-field-border);
  border-radius: var(--ds-radius-sm);
  padding: 0 var(--ds-space-3);
  font-size: var(--ds-font-size-btn);
  color: var(--ds-color-text);
  background: var(--ds-color-white);
}

.ds-cards-field:focus {
  outline: none;
  border-color: var(--ds-color-action);
}

.ds-cards-open-btn {
  border: 0;
  background: transparent;
  color: var(--ds-color-action);
  height: var(--ds-size-control-sm-height);
  padding: 0 var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-font-size-btn);
  font-weight: var(--ds-font-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.ds-cards-open-btn:hover {
  color: var(--ds-color-action-hover);
  background: var(--ds-cards-open-btn-hover-bg);
}

.ds-cards-open-btn:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

/* File Upload */
.ds-file-upload {
  display: grid;
  gap: var(--ds-file-upload-gap);
}

.ds-file-upload--offset {
  margin-top: var(--ds-file-upload-offset-top);
}

.ds-file-upload-input {
  display: none;
}

.ds-file-upload-dropzone {
  border: var(--ds-file-upload-dropzone-border-width) var(--ds-file-upload-dropzone-border-style) var(--ds-file-upload-dropzone-border-color);
  border-radius: var(--ds-file-upload-dropzone-radius);
  min-height: var(--ds-file-upload-dropzone-min-height);
  padding: var(--ds-file-upload-dropzone-padding);
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: var(--ds-file-upload-dropzone-gap);
  cursor: pointer;
  background: var(--ds-file-upload-dropzone-bg);
}

.ds-file-upload-dropzone.is-dragover {
  border-color: var(--ds-file-upload-dropzone-dragover-border);
  background: var(--ds-file-upload-dropzone-dragover-bg);
}

.ds-file-upload-icon {
  width: var(--ds-file-upload-icon-size);
  height: var(--ds-file-upload-icon-size);
  border-radius: var(--ds-file-upload-icon-radius);
  background: var(--ds-file-upload-icon-bg);
  color: var(--ds-file-upload-icon-color);
  display: grid;
  place-items: center;
}

.ds-file-upload-icon-svg {
  width: var(--ds-file-upload-icon-glyph-size);
  height: var(--ds-file-upload-icon-glyph-size);
  stroke-width: var(--ds-file-upload-icon-glyph-stroke-width);
}

.ds-file-upload-title {
  margin: 0;
  color: var(--ds-file-upload-title-color);
  font-size: var(--ds-file-upload-title-size);
  font-weight: var(--ds-file-upload-title-weight);
}

.ds-file-upload-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--ds-file-upload-list-gap);
}

.ds-file-upload-item {
  border: var(--ds-border-width-1) solid var(--ds-file-upload-item-border);
  border-radius: var(--ds-file-upload-item-radius);
  background: var(--ds-file-upload-item-bg);
  padding: var(--ds-file-upload-item-padding-y) var(--ds-file-upload-item-padding-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-file-upload-item-gap);
}

.ds-file-upload-name {
  min-width: 0;
  color: var(--ds-file-upload-name-color);
  font-size: var(--ds-file-upload-name-size);
  font-weight: var(--ds-file-upload-name-weight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-file-upload-meta {
  color: var(--ds-file-upload-meta-color);
  font-size: var(--ds-file-upload-meta-size);
  font-weight: var(--ds-file-upload-meta-weight);
  letter-spacing: var(--ds-file-upload-meta-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Evidence Files */
.ds-evidence-files {
  max-width: var(--ds-evidence-files-shell-max-width);
  margin: 0 auto;
}

.ds-evidence-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-evidence-files-head-gap);
  margin-bottom: var(--ds-evidence-files-head-margin-bottom);
}

.ds-evidence-files-head-left {
  display: flex;
  align-items: center;
  gap: var(--ds-evidence-files-head-gap);
}

.ds-evidence-files-title {
  margin: 0;
  font-size: var(--ds-evidence-files-title-size);
  font-weight: var(--ds-evidence-files-title-weight);
  color: var(--ds-evidence-files-title-color);
}

.ds-evidence-files-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-evidence-files-count-radius);
  background: var(--ds-evidence-files-count-bg);
  color: var(--ds-evidence-files-count-fg);
  font-size: var(--ds-evidence-files-count-size);
  font-weight: var(--ds-evidence-files-count-weight);
  padding: var(--ds-evidence-files-count-padding-y) var(--ds-evidence-files-count-padding-x);
}

.ds-evidence-files-sort {
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-evidence-files-sort-gap);
  font-size: var(--ds-evidence-files-sort-size);
  color: var(--ds-evidence-files-sort-color);
  cursor: pointer;
}

.ds-evidence-files-sort:hover {
  color: var(--ds-evidence-files-sort-hover-color);
}

.ds-evidence-files-sort-icon {
  width: var(--ds-evidence-files-sort-icon-size);
  height: var(--ds-evidence-files-sort-icon-size);
  flex-shrink: 0;
}

.ds-evidence-files-list {
  background: var(--ds-evidence-files-list-bg);
  border: var(--ds-border-width-1) solid var(--ds-evidence-files-list-border);
  border-radius: var(--ds-evidence-files-list-radius);
  box-shadow: var(--ds-evidence-files-list-shadow);
  overflow: hidden;
}

.ds-evidence-files-row {
  padding: var(--ds-evidence-files-row-padding-y) var(--ds-evidence-files-row-padding-x);
  display: flex;
  align-items: center;
  gap: var(--ds-evidence-files-row-gap);
}

.ds-evidence-files-row + .ds-evidence-files-row {
  border-top: var(--ds-border-width-1) solid var(--ds-evidence-files-list-divider);
}

.ds-evidence-files-row:hover {
  background: var(--ds-evidence-files-row-hover-bg);
}

.ds-evidence-files-row.is-dragging {
  opacity: var(--ds-evidence-files-row-drag-opacity);
  background: var(--ds-evidence-files-row-drag-bg);
}

.ds-evidence-files-handle {
  color: var(--ds-evidence-files-handle-color);
  cursor: var(--ds-evidence-files-handle-cursor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-evidence-files-handle-icon {
  width: var(--ds-evidence-files-handle-size);
  height: var(--ds-evidence-files-handle-size);
}

.ds-evidence-files-type {
  width: var(--ds-evidence-files-type-size);
  height: var(--ds-evidence-files-type-size);
  border-radius: var(--ds-evidence-files-type-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-evidence-files-type-icon {
  width: var(--ds-evidence-files-type-icon-size);
  height: var(--ds-evidence-files-type-icon-size);
}

.ds-evidence-files-type--doc {
  background: var(--ds-evidence-files-type-doc-bg);
  color: var(--ds-evidence-files-type-doc-fg);
}

.ds-evidence-files-type--code {
  background: var(--ds-evidence-files-type-code-bg);
  color: var(--ds-evidence-files-type-code-fg);
}

.ds-evidence-files-type--image {
  background: var(--ds-evidence-files-type-img-bg);
  color: var(--ds-evidence-files-type-img-fg);
}

.ds-evidence-files-main {
  min-width: 0;
  flex: 1;
}

.ds-evidence-files-row-title {
  margin: 0;
  font-size: var(--ds-evidence-files-title-row-size);
  font-weight: var(--ds-evidence-files-title-row-weight);
  color: var(--ds-evidence-files-title-row-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-evidence-files-row-meta {
  margin: var(--ds-evidence-files-meta-margin-top) 0 0;
  font-size: var(--ds-evidence-files-meta-size);
  color: var(--ds-evidence-files-meta-color);
}

.ds-evidence-files-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-evidence-files-actions-gap);
  flex-shrink: 0;
}

.ds-evidence-files-actions-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-evidence-files-icon-actions-gap);
  color: var(--ds-evidence-files-action-icon-color);
}

.ds-evidence-files-icon-btn {
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ds-evidence-files-action-icon {
  width: var(--ds-evidence-files-action-icon-size);
  height: var(--ds-evidence-files-action-icon-size);
}

.ds-evidence-files-icon-btn--view:hover {
  color: var(--ds-evidence-files-action-view-hover);
}

.ds-evidence-files-icon-btn--delete:hover {
  color: var(--ds-evidence-files-action-delete-hover);
}

.ds-evidence-files-menu {
  position: relative;
}

.ds-evidence-files-menu-toggle {
  border: 0;
  background: transparent;
  color: var(--ds-evidence-files-menu-toggle-color);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ds-evidence-files-menu-toggle:hover {
  color: var(--ds-evidence-files-menu-toggle-hover-color);
}

.ds-evidence-files-menu-toggle .ds-evidence-files-action-icon {
  width: var(--ds-evidence-files-action-icon-size);
  height: var(--ds-evidence-files-action-icon-size);
}

.ds-evidence-files-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + var(--ds-evidence-files-menu-offset-y));
  min-width: var(--ds-evidence-files-menu-min-width);
  border: var(--ds-border-width-1) solid var(--ds-evidence-files-menu-border);
  border-radius: var(--ds-evidence-files-menu-radius);
  background: var(--ds-evidence-files-menu-bg);
  box-shadow: var(--ds-evidence-files-menu-shadow);
  padding: var(--ds-evidence-files-menu-padding);
  z-index: var(--ds-evidence-files-menu-z);
}

.ds-evidence-files-menu-item {
  width: 100%;
  border: 0;
  border-radius: var(--ds-evidence-files-menu-item-radius);
  background: transparent;
  color: var(--ds-evidence-files-menu-item-color);
  font-size: var(--ds-evidence-files-menu-item-size);
  font-weight: var(--ds-evidence-files-menu-item-weight);
  text-align: left;
  padding: var(--ds-evidence-files-menu-item-padding-y) var(--ds-evidence-files-menu-item-padding-x);
  cursor: pointer;
}

.ds-evidence-files-menu-item:hover {
  background: var(--ds-evidence-files-menu-item-hover-bg);
}

.ds-evidence-files-help {
  margin: var(--ds-evidence-files-help-margin-top) 0 0;
  color: var(--ds-evidence-files-help-color);
  font-size: var(--ds-evidence-files-help-size);
}

/* Add filter popover wrap */
.ds-data-table-add-filter-wrap {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.ds-data-table-add-filter-popover {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: var(--ds-space-1);
  z-index: 20;
}

.ds-data-table-add-filter-popover[hidden] {
  display: none;
}

/* Filter Dialog (modal variant; popover uses same visual + .ds-data-table-add-filter-popover for position) */
.ds-data-table-filter-dialog {
  width: min(var(--ds-filter-dialog-width), calc(100% - var(--ds-space-6)));
  min-width: var(--ds-filter-dialog-width);
  padding: var(--ds-space-4);
  display: grid;
  grid-auto-rows: minmax(min-content, auto);
  gap: var(--ds-space-4);
  background: var(--ds-bg-surface);
  border: var(--ds-border-width-1) solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  box-sizing: border-box;
}

.ds-data-table-filter-dialog::backdrop {
  background: var(--ds-filter-overlay-bg);
}

.ds-data-table-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.ds-data-table-filter-title {
  margin: 0;
  color: var(--ds-text-title);
  font-size: var(--ds-font-size-title);
  font-weight: var(--ds-font-weight-bold);
  letter-spacing: var(--ds-letter-spacing-tight);
}

.ds-data-table-filter-section {
  display: grid;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3);
  border: var(--ds-border-width-1) solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg-surface);
}

.ds-data-table-filter-fields {
  display: grid;
  gap: var(--ds-space-3);
}

.ds-data-table-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-2);
}

/* Download + Undo/Redo */
.ds-data-table-download[aria-busy="true"] {
  pointer-events: none;
}

.ds-data-table-history {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-1);
  border: var(--ds-border-width-1) solid var(--ds-border-default);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-bg-surface);
}

.ds-data-table-history .ds-icon-btn:disabled {
  color: var(--ds-text-muted);
}

@media (max-width: calc(var(--ds-space-16) * 16)) {
  .ds-icon-library-grid--all {
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--ds-space-3) * 9), 1fr));
    max-height: calc(var(--ds-space-12) * 10);
  }
}

@media (max-width: calc(var(--ds-space-16) * 10)) {
  .ds-icon-library-search-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ds-icon-library-grid--all {
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--ds-space-12) * 2), 1fr));
    max-height: calc(var(--ds-space-12) * 9);
  }
}

@media (max-width: calc(var(--ds-space-12) * 18)) {
  .ds-modal {
    width: calc(100vw - var(--ds-space-6));
    padding: var(--ds-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}