/* SufiBlazor - Design Tokens & Base Styles */
/* Version: 0.1.0 */
@import url("persian-palette.css");
@import url("sufiblazor-editors.css");

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

:root,
.sb-theme-root {
  /* ----------------------------------------
     Colors - Light Theme (Default)
     ---------------------------------------- */
  /* Persian semantic colors: fills, readable text, and paired foregrounds. */
  --sb-color-primary: var(--persian-blue-strong);
  --sb-color-primary-hover: color-mix(in srgb, var(--sb-color-primary) 88%, black);
  --sb-color-primary-active: color-mix(in srgb, var(--sb-color-primary) 76%, black);
  --sb-color-primary-50: color-mix(in srgb, var(--sb-color-primary) 8%, transparent);
  --sb-color-primary-100: color-mix(in srgb, var(--sb-color-primary) 14%, var(--sb-color-surface));
  --sb-color-primary-light: var(--sb-color-primary-100);
  --sb-color-primary-text: var(--sb-color-primary);
  --sb-color-on-primary: #FFFFFF;
  --sb-color-secondary: var(--persian-blue-vivid-purplish);
  --sb-color-secondary-hover: color-mix(in srgb, var(--sb-color-secondary) 88%, black);
  --sb-color-secondary-active: color-mix(in srgb, var(--sb-color-secondary) 76%, black);
  --sb-color-secondary-50: color-mix(in srgb, var(--sb-color-secondary) 8%, transparent);
  --sb-color-secondary-100: color-mix(in srgb, var(--sb-color-secondary) 14%, var(--sb-color-surface));
  --sb-color-secondary-light: var(--sb-color-secondary-100);
  --sb-color-secondary-text: var(--sb-color-secondary);
  --sb-color-on-secondary: #FFFFFF;
  --sb-color-success: var(--persian-green-moderate-bluish);
  --sb-color-success-hover: color-mix(in srgb, var(--sb-color-success) 88%, black);
  --sb-color-success-active: color-mix(in srgb, var(--sb-color-success) 76%, black);
  --sb-color-success-50: color-mix(in srgb, var(--sb-color-success) 8%, transparent);
  --sb-color-success-100: color-mix(in srgb, var(--sb-color-success) 14%, var(--sb-color-surface));
  --sb-color-success-light: var(--sb-color-success-100);
  --sb-color-success-text: color-mix(in srgb, var(--sb-color-success) 88%, black);
  --sb-color-on-success: #FFFFFF;
  --sb-color-warning: var(--persian-orange-vivid);
  --sb-color-warning-hover: color-mix(in srgb, var(--sb-color-warning) 88%, black);
  --sb-color-warning-active: color-mix(in srgb, var(--sb-color-warning) 86%, black);
  --sb-color-warning-50: color-mix(in srgb, var(--sb-color-warning) 8%, transparent);
  --sb-color-warning-100: color-mix(in srgb, var(--sb-color-warning) 14%, var(--sb-color-surface));
  --sb-color-warning-light: var(--sb-color-warning-100);
  --sb-color-warning-text: var(--persian-brown-strong-reddish);
  --sb-color-on-warning: #101F2C;
  --sb-color-danger: var(--persian-red-vivid);
  --sb-color-danger-hover: color-mix(in srgb, var(--sb-color-danger) 88%, black);
  --sb-color-danger-active: color-mix(in srgb, var(--sb-color-danger) 76%, black);
  --sb-color-danger-50: color-mix(in srgb, var(--sb-color-danger) 8%, transparent);
  --sb-color-danger-100: color-mix(in srgb, var(--sb-color-danger) 14%, var(--sb-color-surface));
  --sb-color-danger-light: var(--sb-color-danger-100);
  --sb-color-danger-text: color-mix(in srgb, var(--sb-color-danger) 88%, black);
  --sb-color-on-danger: #FFFFFF;
  --sb-color-info: var(--persian-blue-vivid);
  --sb-color-info-hover: color-mix(in srgb, var(--sb-color-info) 88%, black);
  --sb-color-info-active: color-mix(in srgb, var(--sb-color-info) 76%, black);
  --sb-color-info-50: color-mix(in srgb, var(--sb-color-info) 8%, transparent);
  --sb-color-info-100: color-mix(in srgb, var(--sb-color-info) 14%, var(--sb-color-surface));
  --sb-color-info-light: var(--sb-color-info-100);
  --sb-color-info-text: var(--sb-color-info);
  --sb-color-on-info: #FFFFFF;
  --sb-color-white: #FFFFFF;
  --sb-color-text-white: #FFFFFF;
  --sb-color-surface: #FFFFFF;
  --sb-color-surface-variant: color-mix(in srgb, var(--persian-blue-vivid-pale) 18%, white);
  --sb-color-background: color-mix(in srgb, var(--persian-blue-vivid-pale) 24%, white);
  --sb-color-border: color-mix(in srgb, var(--persian-blue-pale) 42%, white);
  --sb-color-border-strong: var(--persian-blue-pale);
  --sb-color-sidebar-dark: #101F2C;
  --sb-color-surface-hover: color-mix(in srgb, var(--sb-color-primary) 6%, transparent);
  --sb-color-gray-700: var(--persian-blue-grayish-purplish);
  --sb-color-gray-900: #101F2C;
  --sb-color-text: #101F2C;
  --sb-color-text-secondary: var(--persian-blue-grayish-purplish);
  --sb-color-text-muted: var(--persian-green-grayish);
  --sb-color-text-disabled: var(--persian-blue-pale);
  --sb-color-surface-muted: color-mix(in srgb, var(--persian-blue-vivid-pale) 30%, white);
  --sb-color-surface-secondary: color-mix(in srgb, var(--persian-blue-vivid-pale) 10%, white);
  --sb-color-surface-subtle: var(--sb-color-surface-secondary);
  --sb-color-border-subtle: color-mix(in srgb, var(--persian-blue-pale) 24%, white);
  --sb-color-primary-subtle: var(--sb-color-primary-50);
  --sb-color-primary-soft: var(--sb-color-primary-100);
  --sb-color-primary-alpha: var(--sb-color-primary-50);
  --sb-color-control-border: var(--persian-green-grayish);
  --sb-color-on-dark: #F2F6F9;
  --sb-color-dark-muted: var(--persian-blue-vivid-pale);
  --sb-color-overlay: rgb(16 31 44 / 56%);
  --sb-color-selection: color-mix(in srgb, var(--sb-color-primary) 20%, transparent);
  --sb-focus-ring-color: var(--persian-blue-vivid);
  --sb-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sb-focus-ring-color) 35%, transparent);
  --sb-color-chart-1: var(--persian-blue-strong);
  --sb-color-chart-2: var(--persian-orange-moderate-reddish);
  --sb-color-chart-3: var(--persian-blue-vivid-purplish);
  --sb-color-chart-4: var(--persian-green-moderate-bluish);
  --sb-color-chart-5: var(--persian-red-strong-purplish);
  --sb-color-chart-6: var(--persian-blue-grayish-purplish);
  --sb-color-chart-7: var(--persian-purple-vivid-reddish);
  --sb-color-chart-8: var(--persian-green-dark-grayish);
  /* ----------------------------------------
     Semantic Aliases (component compatibility)
     Maps shorthand/alternate token names to canonical tokens.
     ---------------------------------------- */
  --sb-primary: var(--sb-color-primary);
  --sb-primary-light: var(--sb-color-primary-light);
  --sb-primary-dark: var(--sb-color-primary-hover);
  --sb-border-color: var(--sb-color-border);
  --sb-bg-subtle: var(--sb-color-surface-variant);
  --sb-hover-bg: var(--sb-color-surface-hover);
  --sb-text-muted: var(--sb-color-text-muted);
  --sb-bg: var(--sb-color-surface);
  --sb-surface: var(--sb-color-surface);
  --sb-surface-variant: var(--sb-color-surface-variant);
  --sb-on-surface: var(--sb-color-text);
  --sb-on-surface-variant: var(--sb-color-text-secondary);
  --sb-outline: var(--sb-color-border);
  --sb-outline-variant: var(--sb-color-border);
  --sb-primary-container: var(--sb-color-primary-light);
  --sb-error: var(--sb-color-danger);
  /* Compatibility aliases for module styles. */
  --sb-color-surface-default: var(--sb-color-surface);
  --sb-color-surface-raised: var(--sb-color-surface);
  --sb-surface-muted: var(--sb-color-surface-muted);
  --sb-color-info-subtle: var(--sb-color-info-50);
  --sb-color-warning-subtle: var(--sb-color-warning-50);
  --sb-color-success-subtle: var(--sb-color-success-50);
  --sb-color-danger-subtle: var(--sb-color-danger-50);
  --sb-color-muted: var(--sb-color-text-muted);
  --sb-color-text-primary: var(--sb-color-text);
  --sb-color-error: var(--sb-color-danger);
  --sb-z-menu: 1300;
  --sb-z-select: 1300;
  /* ----------------------------------------
     Typography
     ---------------------------------------- */
  /* Font Families */
  --sb-font-family-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sb-font-family-farsi: "Vazirmatn", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
  --sb-font-family-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  /* Font Sizes */
  --sb-font-size-xs: 0.75rem;
  /* 12px */
  --sb-font-size-sm: 0.875rem;
  /* 14px */
  --sb-font-size-md: 1rem;
  /* 16px */
  --sb-font-size-lg: 1.125rem;
  /* 18px */
  --sb-font-size-xl: 1.25rem;
  /* 20px */
  --sb-font-size-2xl: 1.5rem;
  /* 24px */
  --sb-font-size-3xl: 1.875rem;
  /* 30px */
  --sb-font-size-4xl: 2.25rem;
  /* 36px */
  --sb-font-size-5xl: 3rem;
  /* 48px */
  /* Font Weights */
  --sb-font-weight-normal: 400;
  --sb-font-weight-medium: 500;
  --sb-font-weight-semibold: 600;
  --sb-font-weight-bold: 700;
  /* Line Heights */
  --sb-line-height-tight: 1.25;
  --sb-line-height-normal: 1.5;
  --sb-line-height-relaxed: 1.75;
  /* ----------------------------------------
     Spacing Scale
     ---------------------------------------- */
  --sb-space-0: 0;
  --sb-space-1: 0.25rem;
  /* 4px */
  --sb-space-2: 0.5rem;
  /* 8px */
  --sb-space-3: 0.75rem;
  /* 12px */
  --sb-space-4: 1rem;
  /* 16px */
  --sb-space-5: 1.25rem;
  /* 20px */
  --sb-space-6: 1.5rem;
  /* 24px */
  --sb-space-8: 2rem;
  /* 32px */
  --sb-space-10: 2.5rem;
  /* 40px */
  --sb-space-12: 3rem;
  /* 48px */
  --sb-space-16: 4rem;
  /* 64px */
  /* ----------------------------------------
     Border Radius
     ---------------------------------------- */
  --sb-radius-none: 0;
  --sb-radius-sm: 0.25rem;
  /* 4px */
  --sb-radius-md: 0.375rem;
  /* 6px */
  --sb-radius-lg: 0.5rem;
  /* 8px */
  --sb-radius-xl: 0.75rem;
  /* 12px */
  --sb-radius-2xl: 1rem;
  /* 16px */
  --sb-radius-full: 9999px;
  /* ----------------------------------------
     Shadows / Elevation
     ---------------------------------------- */
  --sb-shadow-none: none;
  --sb-shadow-sm: 0 1px 2px 0 rgb(16 31 44 / 0.06);
  --sb-shadow-md: 0 4px 10px -2px rgb(16 31 44 / 0.09), 0 2px 4px -2px rgb(0 103 165 / 0.06);
  --sb-shadow-lg: 0 12px 24px -6px rgb(16 31 44 / 0.12), 0 4px 10px -4px rgb(0 103 165 / 0.08);
  --sb-shadow-xl: 0 20px 36px -8px rgb(16 31 44 / 0.14), 0 8px 16px -8px rgb(0 103 165 / 0.09);
  --sb-shadow-2xl: 0 28px 60px -14px rgb(16 31 44 / 0.2);
  /* ----------------------------------------
     Motion / Transitions
     ---------------------------------------- */
  --sb-duration-fast: 100ms;
  --sb-duration-normal: 200ms;
  --sb-duration-slow: 300ms;
  --sb-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --sb-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --sb-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --sb-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* ----------------------------------------
     Z-Index Scale
     ---------------------------------------- */
  --sb-z-dropdown: 1000;
  --sb-z-sticky: 1020;
  --sb-z-fixed: 1030;
  --sb-z-overlay-backdrop: 1040;
  --sb-z-overlay: 1050;
  --sb-z-modal: 1060;
  --sb-z-popover: 1070;
  --sb-z-tooltip: 1080;
  --sb-z-toast: 1090;
  /* ----------------------------------------
     Focus Ring
     ---------------------------------------- */
  --sb-focus-ring-width: 2px;
  --sb-focus-ring-offset: 2px;
  /* ----------------------------------------
     Container Max Widths
     ---------------------------------------- */
  --sb-container-sm: 640px;
  --sb-container-md: 768px;
  --sb-container-lg: 1024px;
  --sb-container-xl: 1280px;
  --sb-container-2xl: 1536px;
}

/* ============================================
   Dark Theme
   ============================================ */

.sb-theme-light {
    color-scheme: light;
}

.sb-theme-dark {
    color-scheme: dark;
    --sb-color-primary: var(--persian-blue-vivid-pale);
    --sb-color-primary-hover: color-mix(in srgb, var(--sb-color-primary) 88%, white);
    --sb-color-primary-active: color-mix(in srgb, var(--sb-color-primary) 76%, white);
    --sb-color-primary-50: color-mix(in srgb, var(--sb-color-primary) 8%, transparent);
    --sb-color-primary-100: color-mix(in srgb, var(--sb-color-primary) 14%, var(--sb-color-surface));
    --sb-color-primary-light: var(--sb-color-primary-100);
    --sb-color-primary-text: var(--sb-color-primary);
    --sb-color-on-primary: #101F2C;
    --sb-color-secondary: var(--persian-pink-moderate-purplish);
    --sb-color-secondary-hover: color-mix(in srgb, var(--sb-color-secondary) 88%, white);
    --sb-color-secondary-active: color-mix(in srgb, var(--sb-color-secondary) 76%, white);
    --sb-color-secondary-50: color-mix(in srgb, var(--sb-color-secondary) 8%, transparent);
    --sb-color-secondary-100: color-mix(in srgb, var(--sb-color-secondary) 14%, var(--sb-color-surface));
    --sb-color-secondary-light: var(--sb-color-secondary-100);
    --sb-color-secondary-text: var(--sb-color-secondary);
    --sb-color-on-secondary: #101F2C;
    --sb-color-success: var(--persian-green-brilliant-bluish);
    --sb-color-success-hover: color-mix(in srgb, var(--sb-color-success) 88%, white);
    --sb-color-success-active: color-mix(in srgb, var(--sb-color-success) 76%, white);
    --sb-color-success-50: color-mix(in srgb, var(--sb-color-success) 8%, transparent);
    --sb-color-success-100: color-mix(in srgb, var(--sb-color-success) 14%, var(--sb-color-surface));
    --sb-color-success-light: var(--sb-color-success-100);
    --sb-color-success-text: color-mix(in srgb, var(--sb-color-success) 80%, white);
    --sb-color-on-success: #101F2C;
    --sb-color-warning: var(--persian-orange-moderate);
    --sb-color-warning-hover: color-mix(in srgb, var(--sb-color-warning) 88%, white);
    --sb-color-warning-active: color-mix(in srgb, var(--sb-color-warning) 76%, white);
    --sb-color-warning-50: color-mix(in srgb, var(--sb-color-warning) 8%, transparent);
    --sb-color-warning-100: color-mix(in srgb, var(--sb-color-warning) 14%, var(--sb-color-surface));
    --sb-color-warning-light: var(--sb-color-warning-100);
    --sb-color-warning-text: color-mix(in srgb, var(--sb-color-warning) 80%, white);
    --sb-color-on-warning: #101F2C;
    --sb-color-danger: color-mix(in srgb, var(--persian-red-vivid) 55%, white);
    --sb-color-danger-hover: color-mix(in srgb, var(--sb-color-danger) 88%, white);
    --sb-color-danger-active: color-mix(in srgb, var(--sb-color-danger) 76%, white);
    --sb-color-danger-50: color-mix(in srgb, var(--sb-color-danger) 8%, transparent);
    --sb-color-danger-100: color-mix(in srgb, var(--sb-color-danger) 14%, var(--sb-color-surface));
    --sb-color-danger-light: var(--sb-color-danger-100);
    --sb-color-danger-text: var(--sb-color-danger);
    --sb-color-on-danger: #101F2C;
    --sb-color-info: color-mix(in srgb, var(--persian-blue-vivid) 55%, white);
    --sb-color-info-hover: color-mix(in srgb, var(--sb-color-info) 88%, white);
    --sb-color-info-active: color-mix(in srgb, var(--sb-color-info) 76%, white);
    --sb-color-info-50: color-mix(in srgb, var(--sb-color-info) 8%, transparent);
    --sb-color-info-100: color-mix(in srgb, var(--sb-color-info) 14%, var(--sb-color-surface));
    --sb-color-info-light: var(--sb-color-info-100);
    --sb-color-info-text: color-mix(in srgb, var(--sb-color-info) 80%, white);
    --sb-color-on-info: #101F2C;
    --sb-color-surface: #192C38;
    --sb-color-surface-variant: #243B45;
    --sb-color-background: #101F2C;
    --sb-color-border: color-mix(in srgb, var(--persian-blue-pale) 30%, var(--sb-color-surface));
    --sb-color-border-strong: var(--persian-blue-pale);
    --sb-color-sidebar-dark: #0C1922;
    --sb-color-surface-hover: color-mix(in srgb, var(--persian-blue-vivid-pale) 8%, transparent);
    --sb-color-gray-700: var(--persian-blue-grayish-purplish);
    --sb-color-gray-900: #101F2C;
    --sb-color-text: #F2F6F9;
    --sb-color-text-secondary: var(--persian-blue-vivid-pale);
    --sb-color-text-muted: var(--persian-blue-pale);
    --sb-color-text-disabled: #718690;
    --sb-color-surface-muted: var(--sb-color-background);
    --sb-color-surface-secondary: var(--sb-color-surface-variant);
    --sb-color-surface-subtle: var(--sb-color-surface-muted);
    --sb-color-surface-raised: var(--sb-color-surface-variant);
    --sb-color-border-subtle: color-mix(in srgb, var(--persian-blue-pale) 20%, var(--sb-color-surface));
    --sb-color-primary-subtle: var(--sb-color-primary-50);
    --sb-color-primary-soft: var(--sb-color-primary-100);
    --sb-color-primary-alpha: var(--sb-color-primary-50);
    --sb-color-control-border: var(--persian-blue-pale);
    --sb-focus-ring-color: var(--persian-blue-vivid-pale);
    --sb-color-chart-1: var(--persian-blue-vivid-pale);
    --sb-color-chart-2: var(--persian-orange-moderate);
    --sb-color-chart-3: var(--persian-pink-moderate-purplish);
    --sb-color-chart-4: var(--persian-green-brilliant-bluish);
    --sb-color-chart-5: var(--persian-pink-deep-purplish);
    --sb-color-chart-6: var(--persian-blue-pale);
    --sb-color-chart-7: var(--persian-orange-grayish-reddish);
    --sb-color-chart-8: var(--persian-pink-dark-purplish);

    /* Shadows (darker for dark mode) */
    --sb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --sb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4),
        0 2px 4px -2px rgb(0 0 0 / 0.3);
    --sb-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4),
        0 4px 6px -4px rgb(0 0 0 / 0.3);
    --sb-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4),
        0 8px 10px -6px rgb(0 0 0 / 0.3);
    --sb-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);

}

/* ============================================
   Language-Aware Font Application
   ============================================ */

/* Default: Latin fonts */
.sb-theme-root {
    font-family: var(--sb-font-family-latin);
}

/* Arabic/Persian scripts */
:lang(fa),
:lang(ar),
:lang(he),
:lang(ur) {
    font-family: var(--sb-font-family-farsi);
}

/* Monospace */
code,
pre,
kbd,
samp,
.sb-mono {
    font-family: var(--sb-font-family-mono);
}

/* ============================================
   RTL Support
   ============================================ */

.sb-rtl {
    direction: rtl;
}

/* Icon mirroring for RTL */
.sb-rtl .sb-icon--mirror {
    transform: scaleX(-1);
}

/* ============================================
   Base Styles
   ============================================ */

.sb-theme-root {
    color: var(--sb-color-text);
    background-color: var(--sb-color-background);
    font-size: var(--sb-font-size-md);
    line-height: var(--sb-line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Border-box sizing so width: 100% form controls respect grid gaps and do not overflow. */
.sb-theme-root,
.sb-theme-root *,
.sb-theme-root *::before,
.sb-theme-root *::after {
    box-sizing: border-box;
}

/* Reset user-agent input border (2px inset from UA stylesheet).
   Mobile browsers (especially iOS) still draw native borders unless appearance is reset. */
.sb-theme-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.sb-theme-root textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
}

/* Chrome/Edge paint autofill with light-scheme fieldtext (near-black). On dark
   surfaces the inset fill hides that text unless fill-color follows the theme. */
.sb-theme-root input:-webkit-autofill,
.sb-theme-root input:-webkit-autofill:hover,
.sb-theme-root input:-webkit-autofill:focus,
.sb-theme-root input:-webkit-autofill:active,
.sb-theme-root textarea:-webkit-autofill,
.sb-theme-root textarea:-webkit-autofill:hover,
.sb-theme-root textarea:-webkit-autofill:focus,
.sb-theme-root textarea:-webkit-autofill:active,
.sb-theme-root input:autofill,
.sb-theme-root textarea:autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--sb-color-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--sb-color-surface) inset !important;
    -webkit-text-fill-color: var(--sb-color-text) !important;
    caret-color: var(--sb-color-text);
    color: var(--sb-color-text) !important;
    background-color: transparent !important;
}

/* Focus visible utility */
.sb-focus-visible:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

/* Screen reader only */
.sb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------
   Utility classes (Bootstrap-like)
   Uses --sb-space-*, --sb-radius-*, --sb-font-* design tokens.
   ---------------------------------------- */

/* Margin (m = all, t/b/s/e = top/bottom/start/end, x = inline, y = block) */
.m-0 { margin: var(--sb-space-0); }
.m-1 { margin: var(--sb-space-1); }
.m-2 { margin: var(--sb-space-2); }
.m-3 { margin: var(--sb-space-3); }
.m-4 { margin: var(--sb-space-4); }
.m-5 { margin: var(--sb-space-5); }
.m-6 { margin: var(--sb-space-6); }
.mt-0 { margin-top: var(--sb-space-0); }
.mt-1 { margin-top: var(--sb-space-1); }
.mt-2 { margin-top: var(--sb-space-2); }
.mt-3 { margin-top: var(--sb-space-3); }
.mt-4 { margin-top: var(--sb-space-4); }
.mt-5 { margin-top: var(--sb-space-5); }
.mt-6 { margin-top: var(--sb-space-6); }
.mb-0 { margin-bottom: var(--sb-space-0); }
.mb-1 { margin-bottom: var(--sb-space-1); }
.mb-2 { margin-bottom: var(--sb-space-2); }
.mb-3 { margin-bottom: var(--sb-space-3); }
.mb-4 { margin-bottom: var(--sb-space-4); }
.mb-5 { margin-bottom: var(--sb-space-5); }
.mb-6 { margin-bottom: var(--sb-space-6); }
.ms-0 { margin-inline-start: var(--sb-space-0); }
.ms-1 { margin-inline-start: var(--sb-space-1); }
.ms-2 { margin-inline-start: var(--sb-space-2); }
.ms-3 { margin-inline-start: var(--sb-space-3); }
.ms-4 { margin-inline-start: var(--sb-space-4); }
.me-0 { margin-inline-end: var(--sb-space-0); }
.me-1 { margin-inline-end: var(--sb-space-1); }
.me-2 { margin-inline-end: var(--sb-space-2); }
.me-3 { margin-inline-end: var(--sb-space-3); }
.me-4 { margin-inline-end: var(--sb-space-4); }
.mx-0 { margin-inline: var(--sb-space-0); }
.mx-1 { margin-inline: var(--sb-space-1); }
.mx-2 { margin-inline: var(--sb-space-2); }
.mx-3 { margin-inline: var(--sb-space-3); }
.mx-4 { margin-inline: var(--sb-space-4); }
.mx-auto { margin-inline: auto; }
.my-0 { margin-block: var(--sb-space-0); }
.my-1 { margin-block: var(--sb-space-1); }
.my-2 { margin-block: var(--sb-space-2); }
.my-3 { margin-block: var(--sb-space-3); }
.my-4 { margin-block: var(--sb-space-4); }
.my-5 { margin-block: var(--sb-space-5); }
.my-6 { margin-block: var(--sb-space-6); }

/* Padding (p = all, t/b/s/e = top/bottom/start/end, x = inline, y = block) */
.p-0 { padding: var(--sb-space-0); }
.p-1 { padding: var(--sb-space-1); }
.p-2 { padding: var(--sb-space-2); }
.p-3 { padding: var(--sb-space-3); }
.p-4 { padding: var(--sb-space-4); }
.p-5 { padding: var(--sb-space-5); }
.p-6 { padding: var(--sb-space-6); }
.pt-0 { padding-top: var(--sb-space-0); }
.pt-1 { padding-top: var(--sb-space-1); }
.pt-2 { padding-top: var(--sb-space-2); }
.pt-3 { padding-top: var(--sb-space-3); }
.pt-4 { padding-top: var(--sb-space-4); }
.pb-0 { padding-bottom: var(--sb-space-0); }
.pb-1 { padding-bottom: var(--sb-space-1); }
.pb-2 { padding-bottom: var(--sb-space-2); }
.pb-3 { padding-bottom: var(--sb-space-3); }
.pb-4 { padding-bottom: var(--sb-space-4); }
.ps-0 { padding-inline-start: var(--sb-space-0); }
.ps-1 { padding-inline-start: var(--sb-space-1); }
.ps-2 { padding-inline-start: var(--sb-space-2); }
.ps-3 { padding-inline-start: var(--sb-space-3); }
.ps-4 { padding-inline-start: var(--sb-space-4); }
.pe-0 { padding-inline-end: var(--sb-space-0); }
.pe-1 { padding-inline-end: var(--sb-space-1); }
.pe-2 { padding-inline-end: var(--sb-space-2); }
.pe-3 { padding-inline-end: var(--sb-space-3); }
.pe-4 { padding-inline-end: var(--sb-space-4); }
.px-0 { padding-inline: var(--sb-space-0); }
.px-1 { padding-inline: var(--sb-space-1); }
.px-2 { padding-inline: var(--sb-space-2); }
.px-3 { padding-inline: var(--sb-space-3); }
.px-4 { padding-inline: var(--sb-space-4); }
.py-0 { padding-block: var(--sb-space-0); }
.py-1 { padding-block: var(--sb-space-1); }
.py-2 { padding-block: var(--sb-space-2); }
.py-3 { padding-block: var(--sb-space-3); }
.py-4 { padding-block: var(--sb-space-4); }

/* Width */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.min-w-0 { min-width: 0; }
.max-w-100 { max-width: 100%; }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* Flex direction & wrap */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1 1 0%; }

/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align items */
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

/* Gap (for flex/grid) */
.gap-0 { gap: var(--sb-space-0); }
.gap-1 { gap: var(--sb-space-1); }
.gap-2 { gap: var(--sb-space-2); }
.gap-3 { gap: var(--sb-space-3); }
.gap-4 { gap: var(--sb-space-4); }
.gap-5 { gap: var(--sb-space-5); }
.gap-6 { gap: var(--sb-space-6); }

/* Text alignment */
.text-start { text-align: start; }
.text-end { text-align: end; }
.text-center { text-align: center; }

/* Text transform */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

/* Font weight */
.fw-normal { font-weight: var(--sb-font-weight-normal); }
.fw-medium { font-weight: var(--sb-font-weight-medium); }
.fw-semibold { font-weight: var(--sb-font-weight-semibold); }
.fw-bold { font-weight: var(--sb-font-weight-bold); }

/* Border radius */
.rounded { border-radius: var(--sb-radius-md); }
.rounded-0 { border-radius: var(--sb-radius-none); }
.rounded-sm { border-radius: var(--sb-radius-sm); }
.rounded-lg { border-radius: var(--sb-radius-lg); }
.rounded-xl { border-radius: var(--sb-radius-xl); }
.rounded-full { border-radius: var(--sb-radius-full); }

/* Position */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }

/* ============================================
   Component Styles
   ============================================ */

/* Note: Component styles are bundled via Blazor's 
   scoped CSS mechanism into SufiChain.SufiBlazor.styles.css.
   The styles below provide global/unscoped component styles. */
/* SbContainer */
.sb-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--sb-space-4);
}

.sb-container--no-gutters {
    padding-inline: 0;
}

.sb-container--sm {
    max-width: var(--sb-container-sm);
}

.sb-container--md {
    max-width: var(--sb-container-md);
}

.sb-container--lg {
    max-width: var(--sb-container-lg);
}

.sb-container--xl {
    max-width: var(--sb-container-xl);
}

.sb-container--xxl {
    max-width: var(--sb-container-2xl);
}

.sb-container--fluid {
    max-width: none;
}

/* SbStack */
.sb-stack {
    display: flex;
}

.sb-stack--row {
    flex-direction: row;
}

.sb-stack--column {
    flex-direction: column;
}

.sb-stack--wrap {
    flex-wrap: wrap;
}

/* Stack responsive direction (matches sb-grid breakpoints) */
@media (min-width: 640px) {
    .sb-stack--sm-row { flex-direction: row; }
    .sb-stack--sm-column { flex-direction: column; }
}

@media (min-width: 768px) {
    .sb-stack--md-row { flex-direction: row; }
    .sb-stack--md-column { flex-direction: column; }
}

@media (min-width: 1024px) {
    .sb-stack--lg-row { flex-direction: row; }
    .sb-stack--lg-column { flex-direction: column; }
}

@media (min-width: 1280px) {
    .sb-stack--xl-row { flex-direction: row; }
    .sb-stack--xl-column { flex-direction: column; }
}

/* Stack responsive alignment */
@media (min-width: 640px) {
    .sb-stack--sm-align-start { align-items: flex-start; }
    .sb-stack--sm-align-center { align-items: center; }
    .sb-stack--sm-align-end { align-items: flex-end; }
    .sb-stack--sm-align-stretch { align-items: stretch; }
    .sb-stack--sm-align-baseline { align-items: baseline; }
}

@media (min-width: 768px) {
    .sb-stack--md-align-start { align-items: flex-start; }
    .sb-stack--md-align-center { align-items: center; }
    .sb-stack--md-align-end { align-items: flex-end; }
    .sb-stack--md-align-stretch { align-items: stretch; }
    .sb-stack--md-align-baseline { align-items: baseline; }
}

@media (min-width: 1024px) {
    .sb-stack--lg-align-start { align-items: flex-start; }
    .sb-stack--lg-align-center { align-items: center; }
    .sb-stack--lg-align-end { align-items: flex-end; }
    .sb-stack--lg-align-stretch { align-items: stretch; }
    .sb-stack--lg-align-baseline { align-items: baseline; }
}

@media (min-width: 1280px) {
    .sb-stack--xl-align-start { align-items: flex-start; }
    .sb-stack--xl-align-center { align-items: center; }
    .sb-stack--xl-align-end { align-items: flex-end; }
    .sb-stack--xl-align-stretch { align-items: stretch; }
    .sb-stack--xl-align-baseline { align-items: baseline; }
}

/* Stack alignment */
.sb-stack--align-start {
    align-items: flex-start;
}

.sb-stack--align-center {
    align-items: center;
}

.sb-stack--align-end {
    align-items: flex-end;
}

.sb-stack--align-stretch {
    align-items: stretch;
}

.sb-stack--align-baseline {
    align-items: baseline;
}

/* Stack justify */
.sb-stack--justify-start {
    justify-content: flex-start;
}

.sb-stack--justify-center {
    justify-content: center;
}

.sb-stack--justify-end {
    justify-content: flex-end;
}

.sb-stack--justify-between {
    justify-content: space-between;
}

.sb-stack--justify-around {
    justify-content: space-around;
}

.sb-stack--justify-evenly {
    justify-content: space-evenly;
}

/* SbGrid */
.sb-grid {
    --sb-grid-track: minmax(0, 1fr);
    display: grid;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(var(--sb-grid-columns, 12), var(--sb-grid-track));
}

/* Direct children (e.g. SbTextField, SbSelect) must shrink with their column track */
.sb-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* Responsive grid columns */
@media (min-width: 640px) {
    .sb-grid--sm-1 { grid-template-columns: repeat(1, var(--sb-grid-track)); }
    .sb-grid--sm-2 { grid-template-columns: repeat(2, var(--sb-grid-track)); }
    .sb-grid--sm-3 { grid-template-columns: repeat(3, var(--sb-grid-track)); }
    .sb-grid--sm-4 { grid-template-columns: repeat(4, var(--sb-grid-track)); }
    .sb-grid--sm-5 { grid-template-columns: repeat(5, var(--sb-grid-track)); }
    .sb-grid--sm-6 { grid-template-columns: repeat(6, var(--sb-grid-track)); }
    .sb-grid--sm-12 { grid-template-columns: repeat(12, var(--sb-grid-track)); }
}

@media (min-width: 768px) {
    .sb-grid--md-1 { grid-template-columns: repeat(1, var(--sb-grid-track)); }
    .sb-grid--md-2 { grid-template-columns: repeat(2, var(--sb-grid-track)); }
    .sb-grid--md-3 { grid-template-columns: repeat(3, var(--sb-grid-track)); }
    .sb-grid--md-4 { grid-template-columns: repeat(4, var(--sb-grid-track)); }
    .sb-grid--md-5 { grid-template-columns: repeat(5, var(--sb-grid-track)); }
    .sb-grid--md-6 { grid-template-columns: repeat(6, var(--sb-grid-track)); }
    .sb-grid--md-12 { grid-template-columns: repeat(12, var(--sb-grid-track)); }
}

@media (min-width: 1024px) {
    .sb-grid--lg-1 { grid-template-columns: repeat(1, var(--sb-grid-track)); }
    .sb-grid--lg-2 { grid-template-columns: repeat(2, var(--sb-grid-track)); }
    .sb-grid--lg-3 { grid-template-columns: repeat(3, var(--sb-grid-track)); }
    .sb-grid--lg-4 { grid-template-columns: repeat(4, var(--sb-grid-track)); }
    .sb-grid--lg-5 { grid-template-columns: repeat(5, var(--sb-grid-track)); }
    .sb-grid--lg-6 { grid-template-columns: repeat(6, var(--sb-grid-track)); }
    .sb-grid--lg-12 { grid-template-columns: repeat(12, var(--sb-grid-track)); }
}

@media (min-width: 1280px) {
    .sb-grid--xl-1 { grid-template-columns: repeat(1, var(--sb-grid-track)); }
    .sb-grid--xl-2 { grid-template-columns: repeat(2, var(--sb-grid-track)); }
    .sb-grid--xl-3 { grid-template-columns: repeat(3, var(--sb-grid-track)); }
    .sb-grid--xl-4 { grid-template-columns: repeat(4, var(--sb-grid-track)); }
    .sb-grid--xl-5 { grid-template-columns: repeat(5, var(--sb-grid-track)); }
    .sb-grid--xl-6 { grid-template-columns: repeat(6, var(--sb-grid-track)); }
    .sb-grid--xl-12 { grid-template-columns: repeat(12, var(--sb-grid-track)); }
}

/* SbGridItem */
.sb-grid-item {
    grid-column: span var(--sb-grid-span, 1);
    min-width: 0;
}

.sb-grid-item > * {
    min-width: 0;
    max-width: 100%;
}

/* Responsive grid spans */
@media (min-width: 640px) {
    .sb-grid-item--sm-1 {
        grid-column: span 1;
    }

    .sb-grid-item--sm-2 {
        grid-column: span 2;
    }

    .sb-grid-item--sm-3 {
        grid-column: span 3;
    }

    .sb-grid-item--sm-4 {
        grid-column: span 4;
    }

    .sb-grid-item--sm-5 {
        grid-column: span 5;
    }

    .sb-grid-item--sm-6 {
        grid-column: span 6;
    }

    .sb-grid-item--sm-7 {
        grid-column: span 7;
    }

    .sb-grid-item--sm-8 {
        grid-column: span 8;
    }

    .sb-grid-item--sm-9 {
        grid-column: span 9;
    }

    .sb-grid-item--sm-10 {
        grid-column: span 10;
    }

    .sb-grid-item--sm-11 {
        grid-column: span 11;
    }

    .sb-grid-item--sm-12 {
        grid-column: span 12;
    }
}

@media (min-width: 768px) {
    .sb-grid-item--md-1 {
        grid-column: span 1;
    }

    .sb-grid-item--md-2 {
        grid-column: span 2;
    }

    .sb-grid-item--md-3 {
        grid-column: span 3;
    }

    .sb-grid-item--md-4 {
        grid-column: span 4;
    }

    .sb-grid-item--md-5 {
        grid-column: span 5;
    }

    .sb-grid-item--md-6 {
        grid-column: span 6;
    }

    .sb-grid-item--md-7 {
        grid-column: span 7;
    }

    .sb-grid-item--md-8 {
        grid-column: span 8;
    }

    .sb-grid-item--md-9 {
        grid-column: span 9;
    }

    .sb-grid-item--md-10 {
        grid-column: span 10;
    }

    .sb-grid-item--md-11 {
        grid-column: span 11;
    }

    .sb-grid-item--md-12 {
        grid-column: span 12;
    }
}

@media (min-width: 1024px) {
    .sb-grid-item--lg-1 {
        grid-column: span 1;
    }

    .sb-grid-item--lg-2 {
        grid-column: span 2;
    }

    .sb-grid-item--lg-3 {
        grid-column: span 3;
    }

    .sb-grid-item--lg-4 {
        grid-column: span 4;
    }

    .sb-grid-item--lg-5 {
        grid-column: span 5;
    }

    .sb-grid-item--lg-6 {
        grid-column: span 6;
    }

    .sb-grid-item--lg-7 {
        grid-column: span 7;
    }

    .sb-grid-item--lg-8 {
        grid-column: span 8;
    }

    .sb-grid-item--lg-9 {
        grid-column: span 9;
    }

    .sb-grid-item--lg-10 {
        grid-column: span 10;
    }

    .sb-grid-item--lg-11 {
        grid-column: span 11;
    }

    .sb-grid-item--lg-12 {
        grid-column: span 12;
    }
}

@media (min-width: 1280px) {
    .sb-grid-item--xl-1 {
        grid-column: span 1;
    }

    .sb-grid-item--xl-2 {
        grid-column: span 2;
    }

    .sb-grid-item--xl-3 {
        grid-column: span 3;
    }

    .sb-grid-item--xl-4 {
        grid-column: span 4;
    }

    .sb-grid-item--xl-5 {
        grid-column: span 5;
    }

    .sb-grid-item--xl-6 {
        grid-column: span 6;
    }

    .sb-grid-item--xl-7 {
        grid-column: span 7;
    }

    .sb-grid-item--xl-8 {
        grid-column: span 8;
    }

    .sb-grid-item--xl-9 {
        grid-column: span 9;
    }

    .sb-grid-item--xl-10 {
        grid-column: span 10;
    }

    .sb-grid-item--xl-11 {
        grid-column: span 11;
    }

    .sb-grid-item--xl-12 {
        grid-column: span 12;
    }
}

/* SbText */
.sb-text {
    margin: 0;
    color: var(--sb-color-text);
}

.sb-text--body {
    font-size: var(--sb-font-size-md);
    line-height: var(--sb-line-height-normal);
}

.sb-text--bodysmall {
    font-size: var(--sb-font-size-sm);
    line-height: var(--sb-line-height-normal);
}

.sb-text--lead {
    font-size: var(--sb-font-size-xl);
    line-height: var(--sb-line-height-relaxed);
}

.sb-text--caption {
    font-size: var(--sb-font-size-xs);
    line-height: var(--sb-line-height-normal);
}

.sb-text--overline {
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: var(--sb-line-height-tight);
}

.sb-text--code {
    font-family: var(--sb-font-family-mono);
    font-size: var(--sb-font-size-sm);
    background-color: var(--sb-color-surface-variant);
    padding: var(--sb-space-1) var(--sb-space-2);
    border-radius: var(--sb-radius-sm);
}

.sb-text--size-xs {
    font-size: var(--sb-font-size-xs);
}

.sb-text--size-sm {
    font-size: var(--sb-font-size-sm);
}

.sb-text--size-md {
    font-size: var(--sb-font-size-md);
}

.sb-text--size-lg {
    font-size: var(--sb-font-size-lg);
}

.sb-text--size-xl {
    font-size: var(--sb-font-size-xl);
}

.sb-text--weight-normal {
    font-weight: var(--sb-font-weight-normal);
}

.sb-text--weight-medium {
    font-weight: var(--sb-font-weight-medium);
}

.sb-text--weight-semibold {
    font-weight: var(--sb-font-weight-semibold);
}

.sb-text--weight-bold {
    font-weight: var(--sb-font-weight-bold);
}

/* Text colors */
.sb-text--primary {
    color: var(--sb-color-primary-text);
}

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

.sb-text--success {
    color: var(--sb-color-success-text);
}

.sb-text--warning {
    color: var(--sb-color-warning-text);
}

.sb-text--danger {
    color: var(--sb-color-danger-text);
}

.sb-text--info {
    color: var(--sb-color-info-text);
}

.sb-text--muted {
    color: var(--sb-color-text-muted);
}

/* Text alignment */
.sb-text--align-start {
    text-align: start;
}

.sb-text--align-center {
    text-align: center;
}

.sb-text--align-end {
    text-align: end;
}

.sb-text--align-justify {
    text-align: justify;
}

/* Truncation */
.sb-text--truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SbHeading */
.sb-heading {
    margin: 0;
    color: var(--sb-color-text);
    font-weight: var(--sb-font-weight-semibold);
    line-height: var(--sb-line-height-tight);
}

.sb-heading--h1 {
    font-size: var(--sb-font-size-5xl);
}

.sb-heading--h2 {
    font-size: var(--sb-font-size-4xl);
}

.sb-heading--h3 {
    font-size: var(--sb-font-size-3xl);
}

.sb-heading--h4 {
    font-size: var(--sb-font-size-2xl);
}

.sb-heading--h5 {
    font-size: var(--sb-font-size-xl);
}

.sb-heading--h6 {
    font-size: var(--sb-font-size-lg);
}

/* Heading colors */
.sb-heading--primary {
    color: var(--sb-color-primary-text);
}

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

.sb-heading--success {
    color: var(--sb-color-success-text);
}

.sb-heading--warning {
    color: var(--sb-color-warning-text);
}

.sb-heading--danger {
    color: var(--sb-color-danger-text);
}

.sb-heading--info {
    color: var(--sb-color-info-text);
}

.sb-heading--muted {
    color: var(--sb-color-text-muted);
}

/* Heading alignment */
.sb-heading--align-start {
    text-align: start;
}

.sb-heading--align-center {
    text-align: center;
}

.sb-heading--align-end {
    text-align: end;
}

.sb-heading--align-justify {
    text-align: justify;
}

/* Truncation */
.sb-heading--truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SbButton */
.sb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-2);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: none;
    border-radius: var(--sb-radius-md);
    font-family: inherit;
    font-weight: var(--sb-font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default),
        border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-button:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

/* Button sizes */
.sb-button--sm {
    height: 32px;
    padding-inline: var(--sb-space-3);
    font-size: var(--sb-font-size-sm);
}

.sb-button--md {
    height: 40px;
    padding-inline: var(--sb-space-4);
    font-size: var(--sb-font-size-md);
}

.sb-button--lg {
    height: 48px;
    padding-inline: var(--sb-space-6);
    font-size: var(--sb-font-size-lg);
}

/* Solid variant */
.sb-button--solid.sb-button--primary {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-button--solid.sb-button--primary:hover:not(:disabled) {
    background-color: var(--sb-color-primary-hover);
}

.sb-button--solid.sb-button--primary:active:not(:disabled) {
    background-color: var(--sb-color-primary-active);
}

.sb-button--solid.sb-button--secondary {
    background-color: var(--sb-color-secondary);
    color: var(--sb-color-on-secondary);
}

.sb-button--solid.sb-button--secondary:hover:not(:disabled) {
    background-color: var(--sb-color-secondary-hover);
}

.sb-button--solid.sb-button--success {
    background-color: var(--sb-color-success);
    color: var(--sb-color-on-success);
}

.sb-button--solid.sb-button--success:hover:not(:disabled) {
    background-color: var(--sb-color-success-hover);
}

.sb-button--solid.sb-button--warning {
    background-color: var(--sb-color-warning);
    color: var(--sb-color-on-warning);
}

.sb-button--solid.sb-button--warning:hover:not(:disabled) {
    background-color: var(--sb-color-warning-hover);
}

.sb-button--solid.sb-button--danger {
    background-color: var(--sb-color-danger);
    color: var(--sb-color-on-danger);
}

.sb-button--solid.sb-button--danger:hover:not(:disabled) {
    background-color: var(--sb-color-danger-hover);
}

/* Outline variant */
.sb-button--outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

.sb-button--outline.sb-button--primary {
    color: var(--sb-color-primary-text);
}

.sb-button--outline.sb-button--primary:hover:not(:disabled) {
    background-color: var(--sb-color-primary-light);
}

.sb-button--outline.sb-button--secondary {
    color: var(--sb-color-secondary-text);
}

.sb-button--outline.sb-button--secondary:hover:not(:disabled) {
    background-color: var(--sb-color-secondary-light);
}

.sb-button--outline.sb-button--success {
    color: var(--sb-color-success-text);
}

.sb-button--outline.sb-button--success:hover:not(:disabled) {
    background-color: var(--sb-color-success-light);
}

.sb-button--outline.sb-button--warning {
    color: var(--sb-color-warning-text);
}

.sb-button--outline.sb-button--warning:hover:not(:disabled) {
    background-color: var(--sb-color-warning-light);
}

.sb-button--outline.sb-button--danger {
    color: var(--sb-color-danger-text);
}

.sb-button--outline.sb-button--danger:hover:not(:disabled) {
    background-color: var(--sb-color-danger-light);
}

/* Ghost variant */
.sb-button--ghost {
    background-color: transparent;
    border: none;
}

.sb-button--ghost.sb-button--primary {
    color: var(--sb-color-primary-text);
}

.sb-button--ghost.sb-button--primary:hover:not(:disabled) {
    background-color: var(--sb-color-primary-light);
}

.sb-button--ghost.sb-button--secondary {
    color: var(--sb-color-text);
}

.sb-button--ghost.sb-button--secondary:hover:not(:disabled) {
    background-color: var(--sb-color-surface-variant);
}

.sb-button--ghost.sb-button--muted {
    color: var(--sb-color-text-secondary, var(--sb-color-text-muted));
}

.sb-button--ghost.sb-button--muted:hover:not(:disabled) {
    color: var(--sb-color-text);
    background-color: var(--sb-color-surface-hover, var(--sb-color-surface-variant));
}

/* Link variant */
.sb-button--link {
    background-color: transparent;
    border: none;
    padding-inline: 0;
    height: auto;
}

.sb-button--link.sb-button--primary {
    color: var(--sb-color-primary-text);
}

.sb-button--link.sb-button--primary:hover:not(:disabled) {
    text-decoration: underline;
}

/* Disabled state */
.sb-button--disabled,
.sb-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state */
.sb-button--loading {
    position: relative;
}

.sb-button__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sb-spin 0.6s linear infinite;
}

@keyframes sb-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Full width */
.sb-button--full-width {
    width: 100%;
}

/* Button content */
.sb-button__content {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-button__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: inherit;
}

/* SbIconButton */
.sb-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--sb-radius-md);
    background-color: transparent;
    color: var(--sb-color-text);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-icon-button:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

.sb-icon-button--sm {
    width: 32px;
    height: 32px;
    font-size: var(--sb-font-size-sm);
}

.sb-icon-button--md {
    width: 40px;
    height: 40px;
    font-size: var(--sb-font-size-md);
}

.sb-icon-button--lg {
    width: 48px;
    height: 48px;
    font-size: var(--sb-font-size-lg);
}

/* Ghost variant (default) – no border */
.sb-icon-button--ghost:hover:not(:disabled) {
    background-color: var(--sb-color-surface-variant);
}

/* Outline variant – visible border */
.sb-icon-button--outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

.sb-icon-button--outline.sb-icon-button--primary {
    color: var(--sb-color-primary-text);
}

.sb-icon-button--outline.sb-icon-button--primary:hover:not(:disabled) {
    background-color: var(--sb-color-primary-light);
}

.sb-icon-button--outline.sb-icon-button--secondary {
    color: var(--sb-color-secondary-text);
}

.sb-icon-button--outline.sb-icon-button--secondary:hover:not(:disabled) {
    background-color: var(--sb-color-secondary-light);
}

.sb-icon-button--outline.sb-icon-button--success {
    color: var(--sb-color-success-text);
}

.sb-icon-button--outline.sb-icon-button--success:hover:not(:disabled) {
    background-color: var(--sb-color-success-light);
}

.sb-icon-button--outline.sb-icon-button--warning {
    color: var(--sb-color-warning-text);
}

.sb-icon-button--outline.sb-icon-button--warning:hover:not(:disabled) {
    background-color: var(--sb-color-warning-light);
}

.sb-icon-button--outline.sb-icon-button--danger {
    color: var(--sb-color-danger-text);
}

.sb-icon-button--outline.sb-icon-button--danger:hover:not(:disabled) {
    background-color: var(--sb-color-danger-light);
}

/* Solid variant – filled background */
.sb-icon-button--solid {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

.sb-icon-button--solid:hover:not(:disabled) {
    background-color: var(--sb-color-border);
}

.sb-icon-button--solid.sb-icon-button--primary {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-icon-button--solid.sb-icon-button--primary:hover:not(:disabled) {
    background-color: var(--sb-color-primary-hover);
}

.sb-icon-button--solid.sb-icon-button--secondary {
    background-color: var(--sb-color-secondary);
    color: var(--sb-color-on-secondary);
}

.sb-icon-button--solid.sb-icon-button--secondary:hover:not(:disabled) {
    background-color: var(--sb-color-secondary-hover);
}

.sb-icon-button--solid.sb-icon-button--success {
    background-color: var(--sb-color-success);
    color: var(--sb-color-on-success);
}

.sb-icon-button--solid.sb-icon-button--success:hover:not(:disabled) {
    background-color: var(--sb-color-success-hover);
}

.sb-icon-button--solid.sb-icon-button--warning {
    background-color: var(--sb-color-warning);
    color: var(--sb-color-on-warning);
}

.sb-icon-button--solid.sb-icon-button--warning:hover:not(:disabled) {
    background-color: var(--sb-color-warning-hover);
}

.sb-icon-button--solid.sb-icon-button--danger {
    background-color: var(--sb-color-danger);
    color: var(--sb-color-on-danger);
}

.sb-icon-button--solid.sb-icon-button--danger:hover:not(:disabled) {
    background-color: var(--sb-color-danger-hover);
}

/* Color modifiers (ghost / default) – icon color only */
.sb-icon-button--primary {
    color: var(--sb-color-primary-text);
}

.sb-icon-button--primary:hover:not(:disabled) {
    background-color: var(--sb-color-primary-light);
}

.sb-icon-button--secondary {
    color: var(--sb-color-secondary-text);
}

.sb-icon-button--secondary:hover:not(:disabled) {
    background-color: var(--sb-color-secondary-light);
}

.sb-icon-button--success {
    color: var(--sb-color-success-text);
}

.sb-icon-button--success:hover:not(:disabled) {
    background-color: var(--sb-color-success-light);
}

.sb-icon-button--warning {
    color: var(--sb-color-warning-text);
}

.sb-icon-button--warning:hover:not(:disabled) {
    background-color: var(--sb-color-warning-light);
}

.sb-icon-button--danger {
    color: var(--sb-color-danger-text);
}

.sb-icon-button--danger:hover:not(:disabled) {
    background-color: var(--sb-color-danger-light);
}

.sb-icon-button--disabled,
.sb-icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-icon-button__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sb-spin 0.6s linear infinite;
}

/* SbLink */
.sb-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    color: var(--sb-color-primary-text);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-link:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

.sb-link--underline-always {
    text-decoration: underline;
}

.sb-link--underline-hover:hover {
    text-decoration: underline;
}

.sb-link--underline-none {
    text-decoration: none;
}

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

.sb-link--primary:hover {
    color: var(--sb-color-primary-hover);
}

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

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

.sb-link--muted {
    color: var(--sb-color-text-muted);
}

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

.sb-link--success {
    color: var(--sb-color-success-text);
}

.sb-link--success:hover {
    color: var(--sb-color-success-hover);
}

.sb-link--warning {
    color: var(--sb-color-warning-text);
}

.sb-link--warning:hover {
    color: var(--sb-color-warning-text);
}

.sb-link--danger {
    color: var(--sb-color-danger-text);
}

.sb-link--danger:hover {
    color: var(--sb-color-danger-hover);
}

.sb-link--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sb-link__external-icon {
    font-size: 0.8em;
}

/* SbCard */
.sb-card {
    background-color: var(--sb-color-surface);
    border-radius: var(--sb-radius-lg);
    overflow: visible;
    display: block;
    text-decoration: none;
    color: inherit;
    border: none;
    font: inherit;
    text-align: start;
    width: 100%;
}

.sb-card--outlined {
    border: 1px solid var(--sb-color-border);
    box-shadow: none;
}

.sb-card--elevation-1 {
    box-shadow: var(--sb-shadow-sm);
}

.sb-card--elevation-2 {
    box-shadow: var(--sb-shadow-md);
}

.sb-card--elevation-3 {
    box-shadow: var(--sb-shadow-lg);
}

.sb-card--elevation-4 {
    box-shadow: var(--sb-shadow-xl);
}

.sb-card--elevation-5 {
    box-shadow: var(--sb-shadow-2xl);
}

.sb-card--clickable {
    cursor: pointer;
    transition: box-shadow var(--sb-duration-fast) var(--sb-easing-default),
        transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-card--clickable:hover {
    box-shadow: var(--sb-shadow-lg);
}

.sb-card--clickable:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

.sb-card--clickable:active {
    transform: scale(0.99);
}

.sb-card__header {
    padding: var(--sb-space-4) var(--sb-space-6);
    border-block-end: 1px solid var(--sb-color-border);
}

.sb-card__body {
    padding: var(--sb-space-6);
}

.sb-card__footer {
    padding: var(--sb-space-4) var(--sb-space-6);
    border-block-start: 1px solid var(--sb-color-border);
    background-color: var(--sb-color-surface-variant);
}

.sb-card--no-padding .sb-card__header,
.sb-card--no-padding .sb-card__body,
.sb-card--no-padding .sb-card__footer {
    padding: 0;
}

/* SbDivider */
.sb-divider {
    border: none;
    margin: 0;
}

.sb-divider--horizontal {
    width: 100%;
    height: 1px;
    background-color: var(--sb-color-border);
    margin-block: var(--sb-space-4);
}

.sb-divider--vertical {
    width: 1px;
    height: auto;
    align-self: stretch;
    background-color: var(--sb-color-border);
    margin-inline: var(--sb-space-4);
}

.sb-divider--with-label {
    display: flex;
    align-items: center;
    gap: var(--sb-space-4);
    background-color: transparent;
    height: auto;
}

.sb-divider--with-label::before,
.sb-divider--with-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--sb-color-border);
}

.sb-divider--label-start::before {
    flex: 0;
}

.sb-divider--label-end::after {
    flex: 0;
}

.sb-divider__content {
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
    white-space: nowrap;
}

/* SbBadge */
.sb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: var(--sb-space-1);
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-semibold);
    line-height: 1;
    box-shadow: var(--sb-shadow-sm);
}

.sb-badge--dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    box-shadow: none;
}

.sb-badge--primary {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-badge--secondary {
    background-color: var(--sb-color-secondary);
    color: var(--sb-color-on-secondary);
}

.sb-badge--success {
    background-color: var(--sb-color-success);
    color: var(--sb-color-on-success);
}

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

.sb-badge--danger {
    background-color: var(--sb-color-danger);
    color: var(--sb-color-on-danger);
}

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

/* SbChip */
.sb-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    border-radius: var(--sb-radius-full);
    font-family: inherit;
    cursor: default;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-chip--sm {
    height: 24px;
    padding-inline: var(--sb-space-2);
    font-size: var(--sb-font-size-xs);
}

.sb-chip--md {
    height: 32px;
    padding-inline: var(--sb-space-3);
    font-size: var(--sb-font-size-sm);
}

.sb-chip--lg {
    height: 40px;
    padding-inline: var(--sb-space-4);
    font-size: var(--sb-font-size-md);
}

.sb-chip--filled {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
    border: none;
}

.sb-chip--outlined {
    background-color: transparent;
    border: 1px solid var(--sb-color-border);
    color: var(--sb-color-text);
}

.sb-chip--filled.sb-chip--primary {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
}

.sb-chip--filled.sb-chip--success {
    background-color: var(--sb-color-success-light);
    color: var(--sb-color-success-text);
}

.sb-chip--filled.sb-chip--warning {
    background-color: var(--sb-color-warning-light);
    color: var(--sb-color-warning-text);
}

.sb-chip--filled.sb-chip--danger {
    background-color: var(--sb-color-danger-light);
    color: var(--sb-color-danger-text);
}

.sb-chip--clickable {
    cursor: pointer;
}

.sb-chip--clickable:hover:not(.sb-chip--disabled) {
    filter: brightness(0.95);
}

.sb-chip--clickable:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

.sb-chip--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-chip__icon {
    display: inline-flex;
    font-size: 1.2em;
}

.sb-chip__label {
    white-space: nowrap;
}

.sb-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-inline-end: calc(-1 * var(--sb-space-1));
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: inherit;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-chip__remove:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* SbAlert */
.sb-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sb-space-3);
    padding: var(--sb-space-4);
    border-radius: var(--sb-radius-lg);
    border-inline-start: 4px solid;
    box-shadow: var(--sb-shadow-sm);
}

.sb-alert--info {
    background-color: var(--sb-color-info-light);
    color: var(--sb-color-info-text);
    border-inline-start-color: var(--sb-color-info);
}

.sb-alert--success {
    background-color: var(--sb-color-success-light);
    color: var(--sb-color-success-text);
    border-inline-start-color: var(--sb-color-success);
}

.sb-alert--warning {
    background-color: var(--sb-color-warning-light);
    color: var(--sb-color-warning-text);
    border-inline-start-color: var(--sb-color-warning);
}

.sb-alert--danger {
    background-color: var(--sb-color-danger-light);
    color: var(--sb-color-danger-text);
    border-inline-start-color: var(--sb-color-danger);
}

.sb-alert--dense {
    padding: var(--sb-space-2) var(--sb-space-3);
    gap: var(--sb-space-2);
}

.sb-alert--dense .sb-alert__icon {
    font-size: var(--sb-font-size-md);
}

.sb-alert--dense .sb-alert__dismiss {
    width: 20px;
    height: 20px;
    font-size: var(--sb-font-size-md);
}

.sb-alert__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: var(--sb-radius-md);
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-semibold);
}

.sb-alert--info .sb-alert__icon {
    background-color: var(--sb-color-info-light);
}

.sb-alert--success .sb-alert__icon {
    background-color: var(--sb-color-success-light);
}

.sb-alert--warning .sb-alert__icon {
    background-color: var(--sb-color-warning-light);
}

.sb-alert--danger .sb-alert__icon {
    background-color: var(--sb-color-danger-light);
}

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

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

.sb-alert__message {
    color: var(--sb-color-text);
}

.sb-alert__dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--sb-radius-sm);
    background-color: transparent;
    color: inherit;
    font-size: var(--sb-font-size-lg);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-alert__dismiss:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.sb-theme-dark .sb-alert--info {
    color: var(--sb-color-info-hover);
}

.sb-theme-dark .sb-alert--success {
    color: var(--sb-color-success-hover);
}

.sb-theme-dark .sb-alert--warning {
    color: var(--sb-color-warning-text);
}

.sb-theme-dark .sb-alert--danger {
    color: var(--sb-color-danger-hover);
}

.sb-theme-dark .sb-alert__title,
.sb-theme-dark .sb-alert__message {
    color: var(--sb-color-text);
}

.sb-theme-dark .sb-alert__dismiss:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* SbProgress */
.sb-progress--linear {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    width: 100%;
}

.sb-progress--linear.sb-progress--sm {
    height: 4px;
}

.sb-progress--linear.sb-progress--md {
    height: 8px;
}

.sb-progress--linear.sb-progress--lg {
    height: 12px;
}

.sb-progress__track {
    flex: 1;
    background-color: var(--sb-color-border);
    border-radius: var(--sb-radius-full);
    overflow: hidden;
    height: 100%;
}

.sb-progress__bar {
    height: 100%;
    border-radius: var(--sb-radius-full);
    transition: width var(--sb-duration-normal) var(--sb-easing-default);
}

.sb-progress--primary .sb-progress__bar {
    background-color: var(--sb-color-primary);
}

.sb-progress--success .sb-progress__bar {
    background-color: var(--sb-color-success);
}

.sb-progress--warning .sb-progress__bar {
    background-color: var(--sb-color-warning);
}

.sb-progress--danger .sb-progress__bar {
    background-color: var(--sb-color-danger);
}

.sb-progress--indeterminate .sb-progress__bar {
    width: 30% !important;
    animation: sb-progress-indeterminate 1.5s infinite linear;
}

@keyframes sb-progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(400%);
    }
}

.sb-progress__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
    min-width: 3ch;
}

/* Circular progress */
.sb-progress--circular {
    transform-origin: center;
}

.sb-progress--circular.sb-progress--sm {
    width: 24px;
    height: 24px;
}

.sb-progress--circular.sb-progress--md {
    width: 40px;
    height: 40px;
}

.sb-progress--circular.sb-progress--lg {
    width: 56px;
    height: 56px;
}

.sb-progress__track-circle {
    stroke: var(--sb-color-border);
}

.sb-progress__bar-circle {
    transition: stroke-dashoffset var(--sb-duration-normal) var(--sb-easing-default);
}

.sb-progress--primary .sb-progress__bar-circle {
    stroke: var(--sb-color-primary);
}

.sb-progress--success .sb-progress__bar-circle {
    stroke: var(--sb-color-success);
}

.sb-progress--circular.sb-progress--indeterminate {
    animation: sb-spin 1s linear infinite;
}

.sb-progress__label-text {
    font-size: 10px;
    font-weight: var(--sb-font-weight-medium);
    fill: var(--sb-color-text);
}

/* SbForm */
.sb-form__validation-summary .validation-errors {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-danger-text);
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* SbFormField */
.sb-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-1);
}

.sb-form-field__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
}

.sb-form-field__required {
    color: var(--sb-color-danger-text);
    margin-inline-start: var(--sb-space-1);
}

.sb-form-field__helper {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

.sb-form-field__error {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-danger-text);
}

.sb-form-field--disabled {
    opacity: 0.5;
}

/* SbTextField */
.sb-text-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sb-text-field__label {
    display: block;
    font-size: var(--sb-font-size-sm);
    font-weight: 500;
    color: var(--sb-color-text);
}

.sb-text-field__required {
    color: var(--sb-color-danger-text);
    margin-inline-start: 2px;
}

.sb-text-field {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    height: 40px;
    padding-inline: var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-control-border);
    border-radius: var(--sb-radius-md);
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-text-field:focus-within {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-text-field--error {
    border-color: var(--sb-color-danger);
}

.sb-text-field--error:focus-within {
    box-shadow: 0 0 0 3px var(--sb-color-danger-light);
}

.sb-text-field--disabled {
    background-color: var(--sb-color-surface-variant);
    cursor: not-allowed;
}

.sb-text-field--readonly {
    background-color: var(--sb-color-surface-variant);
}

.sb-text-field__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    color: var(--sb-color-text);
    outline: none !important;
    box-shadow: none !important;
}

.sb-text-field__input::placeholder {
    color: var(--sb-color-text-muted);
}

.sb-text-field__input:disabled {
    cursor: not-allowed;
}

/* Override browser autofill background and text (user agent uses !important) */
.sb-text-field__input:-webkit-autofill,
.sb-text-field__input:-webkit-autofill:hover,
.sb-text-field__input:-webkit-autofill:focus,
.sb-text-field__input:-webkit-autofill:active,
.sb-text-field__input:autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--sb-color-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--sb-color-surface) inset !important;
    -webkit-text-fill-color: var(--sb-color-text) !important;
    caret-color: var(--sb-color-text);
    color: var(--sb-color-text) !important;
    background-color: transparent !important;
}

.sb-text-field__adornment {
    display: flex;
    align-items: center;
    color: var(--sb-color-text-muted);
}

.sb-text-field__clear,
.sb-text-field__toggle-password {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-secondary);
    cursor: pointer;
    transition: all var(--sb-duration-fast) var(--sb-easing-default);
}


.sb-text-field__clear:hover,
.sb-text-field__toggle-password:hover {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-primary-text);
}

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

/* SbCheckbox */
.sb-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-2);
    cursor: pointer;
    user-select: none;
}

.sb-checkbox--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-checkbox__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sb-checkbox__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--sb-color-control-border);
    border-radius: var(--sb-radius-sm);
    background-color: var(--sb-color-surface);
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        border-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-checkbox__input:focus-visible+.sb-checkbox__box {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

.sb-checkbox--checked .sb-checkbox__box,
.sb-checkbox--indeterminate .sb-checkbox__box {
    border-color: var(--sb-color-primary);
    background-color: var(--sb-color-primary);
}

.sb-checkbox--primary.sb-checkbox--checked .sb-checkbox__box,
.sb-checkbox--primary.sb-checkbox--indeterminate .sb-checkbox__box {
    border-color: var(--sb-color-primary);
    background-color: var(--sb-color-primary);
}

.sb-checkbox--success.sb-checkbox--checked .sb-checkbox__box,
.sb-checkbox--success.sb-checkbox--indeterminate .sb-checkbox__box {
    border-color: var(--sb-color-success);
    background-color: var(--sb-color-success);
}

.sb-checkbox--warning.sb-checkbox--checked .sb-checkbox__box,
.sb-checkbox--warning.sb-checkbox--indeterminate .sb-checkbox__box {
    border-color: var(--sb-color-warning);
    background-color: var(--sb-color-warning);
}

.sb-checkbox--danger.sb-checkbox--checked .sb-checkbox__box,
.sb-checkbox--danger.sb-checkbox--indeterminate .sb-checkbox__box {
    border-color: var(--sb-color-danger);
    background-color: var(--sb-color-danger);
}

.sb-checkbox__box .sb-icon {
    color: var(--sb-color-on-primary);
}

.sb-checkbox--success.sb-checkbox--checked .sb-checkbox__box .sb-icon,
.sb-checkbox--success.sb-checkbox--indeterminate .sb-checkbox__box .sb-icon {
    color: var(--sb-color-on-success);
}

.sb-checkbox--warning.sb-checkbox--checked .sb-checkbox__box .sb-icon,
.sb-checkbox--warning.sb-checkbox--indeterminate .sb-checkbox__box .sb-icon {
    color: var(--sb-color-on-warning);
}

.sb-checkbox--danger.sb-checkbox--checked .sb-checkbox__box .sb-icon,
.sb-checkbox--danger.sb-checkbox--indeterminate .sb-checkbox__box .sb-icon {
    color: var(--sb-color-on-danger);
}

.sb-checkbox__check,
.sb-checkbox__indeterminate {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-checkbox__label {
    font-size: var(--sb-font-size-md);
    color: var(--sb-color-text);
}

/* SbSwitch */
.sb-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-2);
    cursor: pointer;
    user-select: none;
}

.sb-switch--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

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

.sb-switch__track {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: var(--sb-color-border-strong);
    border-radius: var(--sb-radius-full);
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-switch:has(.sb-switch__input:focus-visible) .sb-switch__track {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

.sb-switch--checked .sb-switch__track {
    background-color: var(--sb-color-primary);
}

.sb-switch--success.sb-switch--checked .sb-switch__track {
    background-color: var(--sb-color-success);
}

.sb-switch--warning.sb-switch--checked .sb-switch__track {
    background-color: var(--sb-color-warning);
}

.sb-switch--danger.sb-switch--checked .sb-switch__track {
    background-color: var(--sb-color-danger);
}

.sb-switch__thumb {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--sb-color-surface);
    border-radius: 50%;
    box-shadow: var(--sb-shadow-sm);
    transition: inset-inline-start var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-switch--checked .sb-switch__thumb {
    inset-inline-start: 22px;
}

/* SbSwitch sizes (default = md) */
.sb-switch--sm .sb-switch__track {
    width: 36px;
    height: 20px;
}

.sb-switch--sm .sb-switch__thumb {
    width: 16px;
    height: 16px;
    top: 2px;
    inset-inline-start: 2px;
}

.sb-switch--sm.sb-switch--checked .sb-switch__thumb {
    inset-inline-start: 18px;
}

.sb-switch--lg .sb-switch__track {
    width: 52px;
    height: 28px;
}

.sb-switch--lg .sb-switch__thumb {
    width: 24px;
    height: 24px;
    top: 2px;
    inset-inline-start: 2px;
}

.sb-switch--lg.sb-switch--checked .sb-switch__thumb {
    inset-inline-start: 26px;
}

.sb-switch__text {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
}

.sb-switch__label {
    font-size: var(--sb-font-size-md);
    color: var(--sb-color-text);
}

.sb-switch__helper {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-muted);
    line-height: var(--sb-line-height-tight);
}

/* SbRadioGroup */
.sb-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3);
}

.sb-radio-group__label {
    display: block;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
    margin-block-end: 0;
}

.sb-radio-group--vertical {
    flex-direction: column;
}

.sb-radio-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.sb-radio-group--horizontal .sb-radio-group__label {
    width: 100%;
}

.sb-radio-group--disabled {
    opacity: 0.5;
}

/* SbRadio */
.sb-radio {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sb-space-2);
    cursor: pointer;
    user-select: none;
}

.sb-radio--disabled {
    cursor: not-allowed;
}

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

.sb-radio__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sb-radio__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--sb-color-control-border);
    border-radius: 50%;
    background-color: var(--sb-color-surface);
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-radio:has(.sb-radio__input:focus-visible) .sb-radio__circle {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

.sb-radio--checked .sb-radio__circle {
    border-color: var(--sb-color-primary);
}

.sb-radio__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-radio--checked .sb-radio__dot {
    background-color: var(--sb-color-primary);
}

.sb-radio__text {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    min-width: 0;
    flex: 1;
}

.sb-radio__label {
    font-size: var(--sb-font-size-md);
    color: var(--sb-color-text);
}

.sb-radio__helper {
    display: block;
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
    line-height: var(--sb-line-height-tight);
}

/* SbNavMenu */
.sb-nav-menu {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    padding: var(--sb-space-2);
}

.sb-nav-menu--collapsed {
    width: auto;
}

.sb-nav-menu--collapsed .sb-nav-item__text,
.sb-nav-menu--collapsed .sb-nav-item__badge {
    display: none;
}

/* SbNavItem */
.sb-nav-item {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    padding: var(--sb-space-3) var(--sb-space-4);
    border-radius: var(--sb-radius-md);
    color: var(--sb-color-text-secondary);
    text-decoration: none;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-nav-item:hover:not(.sb-nav-item--disabled) {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

.sb-nav-item:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: calc(-1 * var(--sb-focus-ring-offset));
}

.sb-nav-item--active {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
}

.sb-nav-item--active:hover:not(.sb-nav-item--disabled) {
    background-color: var(--sb-color-primary-light);
}

.sb-nav-item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sb-nav-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 1.1em;
}

.sb-nav-item__text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-nav-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: var(--sb-space-1);
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-semibold);
}

/* When Badge slot contains SbBadge, let the component style itself (avoid double oval/overlap) */
.sb-nav-item__badge:has(.sb-badge) {
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    color: inherit;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* ============================================
   Overlay Components
   ============================================ */

/* SbDialog - Native dialog element.
   Never set display on the closed dialog: UA uses display:none when [open] is absent.
   display:flex on .sb-dialog would show every modal inline on the page. */
.sb-dialog {
    border: none;
    border-radius: var(--sb-radius-lg);
    padding: 0;
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    box-shadow: var(--sb-shadow-xl);
    max-height: 90vh;
    max-width: 90vw;
    overflow: hidden;
}

.sb-dialog[open] {
    display: flex;
    flex-direction: column;
}

.sb-dialog:not([open]) {
    display: none;
}

/* Responsive: add padding on sides so dialog isn't stuck to screen edges on mobile */
@media (max-width: 640px) {
    .sb-dialog:not(.sb-dialog--fullscreen) {
        margin: var(--sb-space-4);
        max-width: calc(100vw - var(--sb-space-8));
        max-height: calc(100vh - var(--sb-space-8));
    }
}

.sb-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.sb-dialog--sm {
    width: 100%;
    max-width: 400px;
}

.sb-dialog--md {
    width: 100%;
    max-width: 600px;
}

.sb-dialog--lg {
    width: 100%;
    max-width: 800px;
}

.sb-dialog--xl {
    width: 100%;
    max-width: 1024px;
}

.sb-dialog--fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
}

.sb-dialog__container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 90vh;
}

.sb-dialog--fullscreen .sb-dialog__container {
    height: 100vh;
    max-height: 100vh;
}

.sb-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: var(--sb-space-3);
    padding-block: var(--sb-space-4);
    padding-inline: var(--sb-space-6);
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-dialog__heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
}

.sb-dialog__title {
    margin: 0;
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
}

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

.sb-dialog__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-md);
    background-color: transparent;
    color: var(--sb-color-text-secondary);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-dialog__close-btn:hover {
    background-color: var(--sb-color-surface-hover);
}

.sb-dialog__close-btn:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

.sb-dialog__body {
    flex: 1;
    min-height: 0;
    padding: var(--sb-space-6);
    overflow-y: auto !important;
}

.sb-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: var(--sb-space-3);
    padding: var(--sb-space-4) var(--sb-space-6);
    border-top: 1px solid var(--sb-color-border);
}

/* Allow dropdowns (e.g. SbSelect, SbAutocomplete) inside modal to overflow without clipping. */
.sb-dialog--allow-dropdown-overflow {
    overflow: visible;
}

.sb-dialog--allow-dropdown-overflow .sb-dialog__container {
    overflow: visible;
}

.sb-dialog--allow-dropdown-overflow .sb-dialog__body {
    overflow: visible;
}

/* SbDrawer - Side panel using native dialog */
.sb-drawer {
    border: none;
    padding: 0;
    margin: 0;
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    box-shadow: var(--sb-shadow-xl);
}

.sb-drawer::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    animation: sb-drawer-backdrop-in 0.25s ease-out;
}

@keyframes sb-drawer-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sb-drawer--start {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: var(--sb-drawer-width, 320px);
    max-width: 90vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
}

.sb-drawer--start[open] {
    animation: sb-drawer-slide-in-start 0.3s var(--sb-easing-default) forwards;
}

@keyframes sb-drawer-slide-in-start {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

[dir="rtl"] .sb-drawer--start[open] {
    animation: sb-drawer-slide-in-start-rtl 0.3s var(--sb-easing-default) forwards;
}

@keyframes sb-drawer-slide-in-start-rtl {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.sb-drawer--end {
    position: fixed;
    inset-block: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: var(--sb-drawer-width, 320px);
    max-width: 90vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
}

.sb-drawer--end[open] {
    animation: sb-drawer-slide-in-end 0.3s var(--sb-easing-default) forwards;
}

@keyframes sb-drawer-slide-in-end {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

[dir="rtl"] .sb-drawer--end[open] {
    animation: sb-drawer-slide-in-end-rtl 0.3s var(--sb-easing-default) forwards;
}

@keyframes sb-drawer-slide-in-end-rtl {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.sb-drawer--top {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    width: 100vw;
    max-width: 100vw;
    height: var(--sb-drawer-height, 320px);
    max-height: 90vh;
    border-radius: 0;
}

.sb-drawer--top[open] {
    animation: sb-drawer-slide-in-top 0.3s var(--sb-easing-default) forwards;
}

@keyframes sb-drawer-slide-in-top {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.sb-drawer--bottom {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    inset-inline: 0;
    inset-block-start: auto;
    inset-block-end: 0;
    margin: 0;
    width: 100vw;
    max-width: 100vw;
    height: var(--sb-drawer-height, 320px);
    max-height: 90vh;
    border-radius: 0;
}

.sb-drawer--bottom[open] {
    animation: sb-drawer-slide-in-bottom 0.3s var(--sb-easing-default) forwards;
}

@keyframes sb-drawer-slide-in-bottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.sb-drawer__container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

.sb-drawer__title {
    margin: 0;
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-semibold);
}

.sb-drawer__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-md);
    background-color: transparent;
    color: var(--sb-color-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-drawer__close-btn:hover {
    background-color: var(--sb-color-surface-hover);
}

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

.sb-drawer__footer {
    padding: var(--sb-space-4);
    border-top: 1px solid var(--sb-color-border);
}

/* SbTooltip */
.sb-tooltip-wrapper {
    position: relative;
    display: inline-flex;
}

.sb-tooltip {
    position: absolute;
    z-index: var(--sb-z-tooltip, 1500);
    padding: var(--sb-space-2) var(--sb-space-3);
    background-color: var(--sb-color-text);
    color: var(--sb-color-background);
    font-size: var(--sb-font-size-sm);
    border-radius: var(--sb-radius-md);
    white-space: nowrap;
    pointer-events: none;
    /* Opacity-only so placement transform (e.g. translateX(-50%)) is never overridden */
    animation: sb-tooltip-fade-in var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-tooltip--rich {
    white-space: normal;
    padding: var(--sb-space-3) var(--sb-space-4);
    min-width: 200px;
    max-width: min(280px, 90vw);
}

@keyframes sb-tooltip-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Tooltip placements - CSS-only positioning */
.sb-tooltip--top,
.sb-tooltip--top-start,
.sb-tooltip--top-end {
    bottom: 100%;
    margin-bottom: var(--sb-space-2);
}

.sb-tooltip--top {
    left: 50%;
    transform: translateX(-50%);
}

.sb-tooltip--top-start {
    inset-inline-start: 0;
}

.sb-tooltip--top-end {
    inset-inline-end: 0;
}

.sb-tooltip--bottom,
.sb-tooltip--bottom-start,
.sb-tooltip--bottom-end {
    top: 100%;
    margin-top: var(--sb-space-2);
}

.sb-tooltip--bottom {
    left: 50%;
    transform: translateX(-50%);
}

.sb-tooltip--bottom-start {
    inset-inline-start: 0;
}

.sb-tooltip--bottom-end {
    inset-inline-end: 0;
}

.sb-tooltip--start,
.sb-tooltip--start-start,
.sb-tooltip--start-end {
    inset-inline-end: 100%;
    margin-inline-end: var(--sb-space-2);
}

.sb-tooltip--start {
    top: 50%;
    transform: translateY(-50%);
}

.sb-tooltip--start-start {
    top: 0;
}

.sb-tooltip--start-end {
    bottom: 0;
}

.sb-tooltip--end,
.sb-tooltip--end-start,
.sb-tooltip--end-end {
    inset-inline-start: 100%;
    margin-inline-start: var(--sb-space-2);
}

.sb-tooltip--end {
    top: 50%;
    transform: translateY(-50%);
}

.sb-tooltip--end-start {
    top: 0;
}

.sb-tooltip--end-end {
    bottom: 0;
}

/* SbPopover */
.sb-popover-anchor {
    position: relative;
    display: inline-flex;
    width: max-content;
}

.sb-popover {
    position: absolute;
    z-index: var(--sb-z-popover, 1400);
    min-width: 200px;
    padding: var(--sb-space-4);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
    /* Viewport constraint: set by component when ConstrainToViewport is true */
    --sb-popover-shift-x: 0;
    --sb-popover-shift-y: 0;
    /* Opacity-only so placement transform (e.g. translateX(-50%)) is never overridden */
    animation: sb-popover-fade-in var(--sb-duration-fast) var(--sb-easing-default);
}

@keyframes sb-popover-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Popover placements - same pattern as tooltip */
.sb-popover--top,
.sb-popover--top-start,
.sb-popover--top-end {
    bottom: 100%;
    margin-bottom: var(--sb-space-2);
}

.sb-popover--top {
    left: 50%;
    transform: translateX(-50%) translate(var(--sb-popover-shift-x, 0), var(--sb-popover-shift-y, 0));
}

.sb-popover--top-start {
    inset-inline-start: 0;
    transform: translate(var(--sb-popover-shift-x, 0), var(--sb-popover-shift-y, 0));
}

.sb-popover--top-end {
    inset-inline-end: 0;
    transform: translate(var(--sb-popover-shift-x, 0), var(--sb-popover-shift-y, 0));
}

.sb-popover--bottom,
.sb-popover--bottom-start,
.sb-popover--bottom-end {
    top: 100%;
    margin-top: var(--sb-space-2);
}

.sb-popover--bottom {
    left: 50%;
    transform: translateX(-50%) translate(var(--sb-popover-shift-x, 0), var(--sb-popover-shift-y, 0));
}

.sb-popover--bottom-start {
    inset-inline-start: 0;
    transform: translate(var(--sb-popover-shift-x, 0), var(--sb-popover-shift-y, 0));
}

.sb-popover--bottom-end {
    inset-inline-end: 0;
    transform: translate(var(--sb-popover-shift-x, 0), var(--sb-popover-shift-y, 0));
}

.sb-popover--start,
.sb-popover--start-start,
.sb-popover--start-end {
    inset-inline-end: 100%;
    margin-inline-end: var(--sb-space-2);
    transform: translate(var(--sb-popover-shift-x, 0), var(--sb-popover-shift-y, 0));
}

.sb-popover--end,
.sb-popover--end-start,
.sb-popover--end-end {
    inset-inline-start: 100%;
    margin-inline-start: var(--sb-space-2);
    transform: translate(var(--sb-popover-shift-x, 0), var(--sb-popover-shift-y, 0));
}

/* SbMenu */
.sb-menu-anchor {
    position: relative;
    display: inline-flex;
}

.sb-menu {
    position: absolute;
    z-index: var(--sb-z-menu, 1300);
    min-width: 180px;
    padding: var(--sb-space-1);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
    animation: sb-menu-fade-in var(--sb-duration-fast) var(--sb-easing-default);
}

@keyframes sb-menu-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Menu placements */
.sb-menu--bottom,
.sb-menu--bottom-start,
.sb-menu--bottom-end {
    top: 100%;
    margin-top: var(--sb-space-1);
}

.sb-menu--bottom {
    left: 50%;
    transform: translateX(-50%);
}

.sb-menu--bottom-start {
    inset-inline-start: 0;
}

.sb-menu--bottom-end {
    inset-inline-end: 0;
}

.sb-menu--top,
.sb-menu--top-start,
.sb-menu--top-end {
    bottom: 100%;
    margin-bottom: var(--sb-space-1);
}

.sb-menu--top {
    left: 50%;
    transform: translateX(-50%);
}

.sb-menu--top-start {
    inset-inline-start: 0;
}

.sb-menu--top-end {
    inset-inline-end: 0;
}

.sb-menu--start,
.sb-menu--start-start,
.sb-menu--start-end {
    inset-inline-end: 100%;
    margin-inline-end: var(--sb-space-1);
}

.sb-menu--start {
    top: 50%;
    transform: translateY(-50%);
}

.sb-menu--start-start {
    top: 0;
}

.sb-menu--start-end {
    bottom: 0;
}

.sb-menu--end,
.sb-menu--end-start,
.sb-menu--end-end {
    inset-inline-start: 100%;
    margin-inline-start: var(--sb-space-1);
}

.sb-menu--end {
    top: 50%;
    transform: translateY(-50%);
}

.sb-menu--end-start {
    top: 0;
}

.sb-menu--end-end {
    bottom: 0;
}

/* SbMenuItem */
.sb-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    border-radius: var(--sb-radius-md);
    background-color: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-menu-item:hover:not(.sb-menu-item--disabled) {
    background-color: var(--sb-color-surface-hover);
}

.sb-menu-item:focus {
    outline: none;
    background-color: var(--sb-color-surface-hover);
}

.sb-menu-item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-menu-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--sb-color-text-secondary);
}

.sb-menu-item__text {
    flex: 1;
}

.sb-menu-item__shortcut {
    color: var(--sb-color-text-secondary);
    font-size: var(--sb-font-size-xs);
}

/* SbSelect */
.sb-select-anchor {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sb-select-label {
    display: block;
    font-size: var(--sb-font-size-sm);
    font-weight: 500;
    color: var(--sb-color-text);
}

.sb-select-trigger {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    width: 100%;
    height: 40px;
    padding-inline: var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-control-border);
    border-radius: var(--sb-radius-md);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    text-align: start;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-select-trigger__main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-2);
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: start;
}

.sb-select-trigger__main:hover:not(:disabled) {
    outline: none;
}

.sb-select-trigger__main:focus {
    outline: none;
}

.sb-select-trigger:hover .sb-select-trigger__main:not(:disabled) {
    cursor: pointer;
}

.sb-select-trigger:focus-within {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-select-trigger:hover:not(:has(.sb-select-trigger__main:disabled)) {
    border-color: var(--sb-color-primary);
}

.sb-select-trigger__main:disabled {
    cursor: not-allowed;
}

.sb-select-trigger:has(.sb-select-trigger__main:disabled) {
    opacity: 0.5;
}

.sb-select-trigger__value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-select-trigger__placeholder {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sb-color-text-secondary);
}

.sb-select-trigger__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--sb-color-text-secondary);
    transition: transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-select-trigger__icon--open {
    transform: rotate(180deg);
}

.sb-select-trigger__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-select-trigger__clear:hover {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-primary-text);
}

.sb-select-dropdown {
    position: absolute;
    z-index: var(--sb-z-select, 1300);
    top: 100%;
    inset-inline: 0;
    margin-top: var(--sb-space-1);
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-shadow-lg);
    animation: sb-select-fade-in var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-select-dropdown--flip-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--sb-space-1);
    animation: sb-select-fade-in-up var(--sb-duration-fast) var(--sb-easing-default);
}

@keyframes sb-select-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sb-select-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.sb-select-search {
    position: sticky;
    top: 0;
    padding: var(--sb-space-2);
    background-color: var(--sb-color-surface);
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-select-search__input {
    width: 100%;
    height: 32px;
    padding-inline: var(--sb-space-3);
    border: 1px solid var(--sb-color-control-border);
    border-radius: var(--sb-radius-md);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
}

.sb-select-search__input:focus {
    outline: none;
    border-color: var(--sb-color-primary);
}

.sb-select-options {
    padding: var(--sb-space-1);
}

.sb-select-option {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    border-radius: var(--sb-radius-md);
    background-color: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-select-option:hover:not(.sb-select-option--disabled) {
    background-color: var(--sb-color-surface-hover);
}

.sb-select-option--selected {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
}

.sb-select-option--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-select-empty {
    padding: var(--sb-space-4);
    text-align: center;
    color: var(--sb-color-text-secondary);
    font-size: var(--sb-font-size-sm);
}

/* SbAutocomplete */
.sb-autocomplete {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sb-space-2);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sb-autocomplete__label {
    display: block;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
    margin-block-end: 0;
}

.sb-autocomplete__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-autocomplete__input-wrapper:focus-within {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-autocomplete__input {
    flex: 1;
    width: 100%;
    height: 100%;
    padding-inline: var(--sb-space-3);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    outline: none !important;
    box-shadow: none !important;
}

.sb-autocomplete__input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-autocomplete__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-inline-end: var(--sb-space-2);
    border: 2px solid var(--sb-color-border);
    border-top-color: var(--sb-color-primary);
    border-radius: 50%;
    animation: sb-spin 0.6s linear infinite;
}

@keyframes sb-spin {
    to {
        transform: rotate(360deg);
    }
}

.sb-autocomplete__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-inline-end: var(--sb-space-1);
    border: none;
    background: transparent;
    color: var(--sb-color-text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: color var(--sb-duration-fast) var(--sb-easing-default);
}

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

.sb-autocomplete__icon {
    display: flex;
    align-items: center;
    padding-inline-end: var(--sb-space-3);
    color: var(--sb-color-text-secondary);
    font-size: 0.75rem;
    pointer-events: none;
}

.sb-autocomplete__dropdown {
    position: absolute;
    z-index: var(--sb-z-select, 1300);
    top: 100%;
    inset-inline: 0;
    margin-top: var(--sb-space-1);
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-shadow-lg);
    animation: sb-select-fade-in var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-autocomplete__dropdown.sb-autocomplete__dropdown--flip-up {
    top: auto !important;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--sb-space-1);
    animation: sb-select-fade-in-up var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-autocomplete__option {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-autocomplete__option:hover,
.sb-autocomplete__option--highlighted {
    background-color: var(--sb-color-surface-hover);
}

.sb-autocomplete__option--selected {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
}

.sb-autocomplete__no-results {
    padding: var(--sb-space-4);
    text-align: center;
    color: var(--sb-color-text-secondary);
    font-size: var(--sb-font-size-sm);
}

/* SbNumberField */
.sb-number-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sb-space-1);
}

.sb-number-field--disabled {
    opacity: 0.5;
}

.sb-number-field__label {
    display: block;
    font-size: var(--sb-font-size-sm);
    font-weight: 500;
    color: var(--sb-color-text);
}

.sb-number-field__required {
    color: var(--sb-color-danger-text);
    margin-inline-start: 2px;
}

.sb-number-field__helper {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

.sb-number-field__input-group {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 40px;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-control-border);
    border-radius: var(--sb-radius-md);
    overflow: hidden;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-number-field__input-group:focus-within {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-number-field__input {
    flex: 1;
    width: 100%;
    height: 100%;
    padding-inline: var(--sb-space-3);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    text-align: start;
}

.sb-number-field__input:focus {
    outline: none;
}

.sb-number-field__input::-webkit-inner-spin-button,
.sb-number-field__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sb-number-field__input[type="number"] {
    -moz-appearance: textfield;
}

.sb-number-field__spinners {
    display: flex;
    flex-direction: column;
    border-inline-start: 1px solid var(--sb-color-border);
}

.sb-number-field__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 20px;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--sb-color-text-secondary);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-number-field__spinner:hover:not(:disabled) {
    background-color: var(--sb-color-surface-hover);
}

.sb-number-field__spinner:first-child {
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-number-field__spinner:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Common Components
   ============================================ */

/* SbIcon */
.sb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
}

.sb-icon svg {
    width: 100%;
    height: 100%;
}

/* Icon sizes */
.sb-icon--xs {
    width: 12px;
    height: 12px;
}

.sb-icon--sm {
    width: 16px;
    height: 16px;
}

.sb-icon--md {
    width: 20px;
    height: 20px;
}

.sb-icon--lg {
    width: 24px;
    height: 24px;
}

.sb-icon--xl {
    width: 32px;
    height: 32px;
}

/* Icon colors */
.sb-icon--primary {
    color: var(--sb-color-primary-text);
}

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

.sb-icon--success {
    color: var(--sb-color-success-text);
}

.sb-icon--warning {
    color: var(--sb-color-warning-text);
}

.sb-icon--danger {
    color: var(--sb-color-danger-text);
}

.sb-icon--info {
    color: var(--sb-color-info-text);
}

.sb-icon--muted {
    color: var(--sb-color-text-secondary);
}

/* RTL icon mirroring */
[dir="rtl"] .sb-icon--mirror {
    transform: scaleX(-1);
}

/* SbMultiSelect */
.sb-multi-select-anchor {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sb-space-2);
}

.sb-multi-select__label {
    display: block;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
    margin-block-end: 0;
}

.sb-multi-select-trigger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-1);
    min-height: 40px;
    padding: var(--sb-space-1) var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-control-border);
    border-radius: var(--sb-radius-md);
    cursor: pointer;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-multi-select-trigger:hover:not(.sb-multi-select--disabled) {
    border-color: var(--sb-color-primary);
}

.sb-multi-select-trigger:focus-within {
    outline: none;
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-multi-select--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-multi-select__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
    border-radius: var(--sb-radius-md);
    font-size: var(--sb-font-size-sm);
}

.sb-multi-select__chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
}

.sb-multi-select__chip-remove:hover {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-multi-select__placeholder {
    color: var(--sb-color-text-secondary);
    font-size: var(--sb-font-size-md);
}

/* SbSlider */
.sb-slider {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    width: 100%;
}

.sb-slider__track-container {
    position: relative;
    flex: 1;
    height: 6px;
    cursor: pointer;
}

.sb-slider__track {
    position: absolute;
    inset: 0;
    background-color: var(--sb-color-border);
    border-radius: var(--sb-radius-full);
}

.sb-slider__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background-color: var(--sb-color-primary);
    border-radius: var(--sb-radius-full);
    transition: width var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-slider__thumb {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    background-color: var(--sb-color-primary);
    border: 2px solid var(--sb-color-surface);
    border-radius: var(--sb-radius-full);
    box-shadow: var(--sb-shadow-sm);
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-slider__thumb:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.sb-slider[dir="rtl"] .sb-slider__thumb {
    transform: translate(50%, -50%);
}

.sb-slider[dir="rtl"] .sb-slider__thumb:hover {
    transform: translate(50%, -50%) scale(1.1);
}

.sb-slider__thumb:active {
    cursor: grabbing;
}

.sb-slider__thumb:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-slider__value {
    min-width: 4ch;
    text-align: center;
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
    flex-shrink: 0;
}

.sb-slider--disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* SbFileUpload */
.sb-file-upload {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3);
}

.sb-file-upload__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-2);
    min-height: 120px;
    padding: var(--sb-space-6);
    background-color: var(--sb-color-surface);
    border: 2px dashed var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    cursor: pointer;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-file-upload__dropzone:hover {
    border-color: var(--sb-color-primary);
    background-color: var(--sb-color-primary-light);
}

.sb-file-upload__dropzone--dragging {
    border-color: var(--sb-color-primary);
    background-color: var(--sb-color-primary-light);
}

.sb-file-upload__dropzone--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-file-upload__icon {
    color: var(--sb-color-text-secondary);
}

.sb-file-upload__text {
    text-align: center;
    color: var(--sb-color-text-secondary);
    font-size: var(--sb-font-size-sm);
}

.sb-file-upload__input {
    display: none;
}

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

.sb-file-upload__item {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    padding: var(--sb-space-2) var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
}

.sb-file-upload__item-icon {
    flex-shrink: 0;
    color: var(--sb-color-text-secondary);
}

.sb-file-upload__item-info {
    flex: 1;
    min-width: 0;
}

.sb-file-upload__item-name {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-file-upload__item-size {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-secondary);
}

.sb-file-upload__item-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-md);
    background: transparent;
    color: var(--sb-color-text-secondary);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-file-upload__item-remove:hover {
    background-color: var(--sb-color-danger-light);
    color: var(--sb-color-danger-text);
}

/* SbValidationSummary */
.sb-validation-summary {
    padding: var(--sb-space-3);
    background-color: var(--sb-color-danger-light);
    border: 1px solid var(--sb-color-danger);
    border-radius: var(--sb-radius-md);
}

.sb-validation-summary__title {
    margin: 0 0 var(--sb-space-2);
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-danger-text);
}

.sb-validation-summary__list {
    margin: 0;
    padding-inline-start: var(--sb-space-4);
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-danger-text);
}

.sb-validation-summary__list li {
    margin-block: var(--sb-space-1);
}

/* SbFieldError */
.sb-field-error {
    display: block;
    margin-top: var(--sb-space-1);
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-danger-text);
}

/* ============================================
   SbPagination
   ============================================ */

.sb-pagination {
    display: flex;
    align-items: center;
    gap: var(--sb-space-4);
}

.sb-pagination__container {
    display: flex;
    align-items: center;
    gap: var(--sb-space-4);
    flex-wrap: wrap;
}

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

.sb-pagination__label {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
    white-space: nowrap;
}

.sb-pagination__select {
    height: 32px;
    padding-inline: var(--sb-space-2);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
}

.sb-pagination__select:focus {
    outline: none;
    border-color: var(--sb-color-primary);
}

.sb-pagination__info {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
    white-space: nowrap;
}

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

.sb-pagination__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        border-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-pagination__button:hover:not(:disabled) {
    background-color: var(--sb-color-surface-variant);
    border-color: var(--sb-color-primary);
}

.sb-pagination__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-pagination__icon {
    font-size: 10px;
}

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

.sb-pagination__page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding-inline: var(--sb-space-2);
    border: 1px solid transparent;
    border-radius: var(--sb-radius-md);
    background-color: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-pagination__page:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-pagination__page--active {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-pagination__page--active:hover {
    background-color: var(--sb-color-primary-hover);
}

.sb-pagination__ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--sb-color-text-secondary);
}

/* ============================================
   SbDatePicker
   ============================================ */

.sb-datepicker {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sb-datepicker__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
}

.sb-datepicker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-2);
    width: 100%;
    height: 40px;
    padding-inline: var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    cursor: pointer;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datepicker__trigger:hover:not(.sb-datepicker__trigger--disabled) {
    border-color: var(--sb-color-primary);
}

.sb-datepicker__trigger--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-datepicker__value {
    flex: 1;
    color: var(--sb-color-text);
    font-size: var(--sb-font-size-md);
}

.sb-datepicker__placeholder {
    flex: 1;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-md);
}

.sb-datepicker__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datepicker__clear:hover {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

.sb-datepicker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
}

.sb-datepicker__dropdown {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    top: 100%;
    inset-inline-start: 0;
    margin-top: var(--sb-space-1);
    min-width: 280px;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
    animation: sb-datepicker-fade-in var(--sb-duration-fast) var(--sb-easing-default);
}

@keyframes sb-datepicker-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sb-datepicker__dropdown.sb-datepicker__dropdown--flip-up {
    top: auto !important;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--sb-space-1);
    animation: sb-datepicker-fade-in-up var(--sb-duration-fast) var(--sb-easing-default);
}

@keyframes sb-datepicker-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sb-datepicker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sb-space-3);
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-datepicker__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-md);
    background: transparent;
    color: var(--sb-color-text);
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datepicker__nav-btn:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-datepicker__title {
    flex: 1;
    text-align: center;
}

.sb-datepicker__month-year {
    padding: var(--sb-space-1) var(--sb-space-2);
    border: none;
    border-radius: var(--sb-radius-md);
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    font-weight: var(--sb-font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datepicker__month-year:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-datepicker__day-names {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: var(--sb-space-2);
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-datepicker__day-name {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text-muted);
    text-transform: uppercase;
}

.sb-datepicker__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: var(--sb-space-2);
    gap: var(--sb-space-1);
}

.sb-datepicker__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: auto;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datepicker__day:hover:not(:disabled):not(.sb-datepicker__day--selected) {
    background-color: var(--sb-color-surface-variant);
}

.sb-datepicker__day--other-month {
    color: var(--sb-color-text-muted);
}

.sb-datepicker__day--today {
    border: 1px solid var(--sb-color-primary);
}

.sb-datepicker__day--selected {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-datepicker__day--disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.sb-datepicker__months,
.sb-datepicker__years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: var(--sb-space-3);
    gap: var(--sb-space-2);
}

.sb-datepicker__month,
.sb-datepicker__year {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-md);
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datepicker__month:hover,
.sb-datepicker__year:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-datepicker__month--selected,
.sb-datepicker__year--selected {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-datepicker__footer {
    display: flex;
    justify-content: center;
    padding: var(--sb-space-2);
    border-top: 1px solid var(--sb-color-border);
}

.sb-datepicker__today-btn {
    padding: var(--sb-space-1) var(--sb-space-3);
    border: none;
    border-radius: var(--sb-radius-md);
    background: transparent;
    color: var(--sb-color-primary-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datepicker__today-btn:hover {
    background-color: var(--sb-color-primary-light);
}

/* ============================================
   SbDateRangePicker
   ============================================ */

.sb-daterangepicker {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    width: 100%;
}

.sb-daterangepicker > .sb-daterangepicker__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
}

.sb-daterangepicker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-2);
    width: 100%;
    height: 40px;
    padding-inline: var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    cursor: pointer;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-daterangepicker__trigger:hover:not(.sb-daterangepicker__trigger--disabled) {
    border-color: var(--sb-color-primary);
}

.sb-daterangepicker__trigger--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-daterangepicker__value {
    flex: 1;
    color: var(--sb-color-text);
    font-size: var(--sb-font-size-md);
}

.sb-daterangepicker__placeholder {
    flex: 1;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-md);
}

.sb-daterangepicker__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-text-muted);
    font-size: 12px;
    cursor: pointer;
}

.sb-daterangepicker__clear:hover {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

.sb-daterangepicker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
}

.sb-daterangepicker__dropdown {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    top: 100%;
    inset-inline-start: 0;
    margin-top: var(--sb-space-1);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
    animation: sb-datepicker-fade-in var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-daterangepicker__dropdown.sb-daterangepicker__dropdown--flip-up {
    top: auto !important;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--sb-space-1);
    animation: sb-datepicker-fade-in-up var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-daterangepicker__calendars {
    display: flex;
    gap: var(--sb-space-4);
    padding: var(--sb-space-3);
}

.sb-daterangepicker__calendar {
    min-width: 260px;
}

/* Responsive: single month on narrow viewports */
@media (max-width: 640px) {
    .sb-daterangepicker__dropdown {
        /* Extra margin to stay within viewport (content padding + safe area) */
        max-width: min(100%, calc(100vw - 4rem));
        width: min(100%, calc(100vw - 4rem));
        box-sizing: border-box;
    }

    .sb-daterangepicker__calendars {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sb-space-2);
    }

    /* Hide second calendar - show only one month */
    .sb-daterangepicker__calendars .sb-daterangepicker__calendar:nth-child(2) {
        display: none;
    }

    /* Show Next button on first calendar for month navigation */
    .sb-daterangepicker__nav-btn--mobile {
        display: flex !important;
    }

    .sb-daterangepicker__calendar {
        min-width: 0;
        width: 100%;
        max-width: none;
    }
}

.sb-daterangepicker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--sb-space-2);
}

.sb-daterangepicker__title {
    flex: 1;
    text-align: center;
    font-weight: var(--sb-font-weight-semibold);
}

.sb-daterangepicker__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-md);
    background: transparent;
    color: var(--sb-color-text);
    font-size: 10px;
    cursor: pointer;
}

.sb-daterangepicker__nav-btn:hover {
    background-color: var(--sb-color-surface-variant);
}

/* Mobile nav button - hidden on desktop, shown on mobile when second calendar is hidden */
@media (min-width: 641px) {
    .sb-daterangepicker__nav-btn--mobile {
        display: none;
    }
}

.sb-daterangepicker__day-names {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding-bottom: var(--sb-space-1);
}

.sb-daterangepicker__day-name {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text-muted);
}

.sb-daterangepicker__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.sb-daterangepicker__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-daterangepicker__day:hover:not(:disabled):not(.sb-daterangepicker__day--start):not(.sb-daterangepicker__day--end) {
    background-color: var(--sb-color-surface-variant);
}

.sb-daterangepicker__day--other-month {
    color: var(--sb-color-text-muted);
}

.sb-daterangepicker__day--today {
    font-weight: var(--sb-font-weight-bold);
    color: var(--sb-color-primary-text);
}

.sb-daterangepicker__day--start,
.sb-daterangepicker__day--end {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-daterangepicker__day--start {
    border-start-start-radius: var(--sb-radius-full);
    border-end-start-radius: var(--sb-radius-full);
}

.sb-daterangepicker__day--end {
    border-start-end-radius: var(--sb-radius-full);
    border-end-end-radius: var(--sb-radius-full);
}

.sb-daterangepicker__day--in-range {
    background-color: var(--sb-color-primary-light);
}

.sb-daterangepicker__day--preview {
    background-color: var(--sb-color-surface-variant);
}

.sb-daterangepicker__day--disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.sb-daterangepicker__presets {
    padding: var(--sb-space-3);
    border-top: 1px solid var(--sb-color-border);
}

.sb-daterangepicker__preset-select {
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
    appearance: auto;
}

.sb-daterangepicker__preset-select:hover {
    border-color: var(--sb-color-primary);
}

.sb-daterangepicker__preset-select:focus {
    outline: none;
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 2px var(--sb-color-primary-light);
}

.sb-daterangepicker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sb-space-3);
    border-top: 1px solid var(--sb-color-border);
}

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

.sb-daterangepicker__actions {
    display: flex;
    gap: var(--sb-space-2);
}

.sb-daterangepicker__cancel,
.sb-daterangepicker__apply {
    padding: var(--sb-space-2) var(--sb-space-4);
    border: none;
    border-radius: var(--sb-radius-md);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-daterangepicker__cancel {
    background: transparent;
    color: var(--sb-color-text-secondary);
}

.sb-daterangepicker__cancel:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-daterangepicker__apply {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-daterangepicker__apply:hover:not(:disabled) {
    background-color: var(--sb-color-primary-hover);
}

.sb-daterangepicker__apply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   SbDataGrid
   ============================================ */

.sb-datagrid {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    background-color: var(--sb-color-surface);
    border-radius: var(--sb-radius-lg);
    overflow: visible;
}

/* Filter bar: active filters as chips + Clear all */
.sb-datagrid__filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-3) var(--sb-space-4);
    background-color: var(--sb-color-surface-variant);
    border-bottom: 1px solid var(--sb-color-border);
    font-size: var(--sb-font-size-sm);
}

.sb-datagrid__filter-bar-label {
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-secondary);
    margin-inline-end: var(--sb-space-1);
}

.sb-datagrid__filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-1) var(--sb-space-3);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-font-size-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sb-datagrid__filter-tag-text {
    font-weight: var(--sb-font-weight-medium);
}

.sb-datagrid__filter-tag-remove {
    min-width: 0;
    padding: var(--sb-space-1);
}

.sb-datagrid__filter-bar-clear {
    margin-inline-start: auto;
}

.sb-datagrid__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-4);
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text-secondary);
    font-size: var(--sb-font-size-sm);
}

.sb-datagrid__loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sb-spin 0.6s linear infinite;
}

.sb-datagrid__container {
    position: relative;
    z-index: 2;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
}

.sb-datagrid__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sb-font-size-sm);
}

/* Frozen columns: table must preserve column widths so sticky offsets match; prevents gap between frozen cols */
.sb-datagrid--frozen .sb-datagrid__table {
    width: max-content;
    min-width: 100%;
}

/* RTL: first column (شناسه etc.) appears on the right */
.sb-datagrid[dir="rtl"] .sb-datagrid__container,
.sb-datagrid[dir="rtl"] .sb-datagrid__table {
    direction: rtl;
}

.sb-datagrid__header {
    background-color: var(--sb-color-surface-variant);
    position: relative;
    z-index: 2;
}

.sb-datagrid__cell {
    padding: var(--sb-space-3) var(--sb-space-4);
}

/* Density variants: row height is set inline; cell padding varies */
.sb-datagrid--density-compact .sb-datagrid__cell {
    padding: var(--sb-space-1) var(--sb-space-3);
}

.sb-datagrid--density-comfortable .sb-datagrid__cell {
    padding: var(--sb-space-4) var(--sb-space-5);
}

.sb-datagrid__cell--header {
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
    text-align: start;
    white-space: nowrap;
    user-select: none;
}

.sb-datagrid__cell--header[style*="cursor"] {
    cursor: pointer;
}

.sb-datagrid__cell--header {
    position: relative;
}

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

/* Column resize handle: draggable strip on the right edge of the header cell */
.sb-datagrid__resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 1;
}

.sb-datagrid__resize-handle:hover {
    background-color: var(--sb-color-primary-light);
}

.sb-datagrid__resize-handle::after {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    inset-inline-end: 3px;
    width: 2px;
    background-color: var(--sb-color-border-strong);
    border-radius: 1px;
}

.sb-datagrid__resize-handle:hover::after {
    background-color: var(--sb-color-primary);
}

/* Prevent text selection while dragging resize */
body.sb-resizing {
    user-select: none;
    cursor: col-resize;
}

.sb-datagrid__header-title {
    flex: 1;
    min-width: 0; /* Allow shrinking for ellipsis when table-layout: fixed */
}

.sb-datagrid__sort-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-inline-start: var(--sb-space-1);
    color: var(--sb-color-text-muted);
    transition: color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datagrid__sort-icon--asc,
.sb-datagrid__sort-icon--desc {
    color: var(--sb-color-primary-text);
}

.sb-datagrid__cell--selection {
    width: 56px;
    min-width: 56px;
    text-align: center;
}

.sb-datagrid__cell--selection input {
    cursor: pointer;
}

/* Row expand (master-detail) button and column */
.sb-datagrid__cell--expand {
    width: 52px;
    min-width: 52px;
    text-align: center;
    vertical-align: middle;
}

.sb-datagrid__expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text-secondary);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        border-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datagrid__expand-btn:hover {
    background-color: var(--sb-color-surface-variant);
    border-color: var(--sb-color-border-strong);
    color: var(--sb-color-text);
}

.sb-datagrid__expand-btn:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: var(--sb-focus-ring-offset);
}

.sb-datagrid__expand-btn--expanded {
    border-color: var(--sb-color-primary);
    color: var(--sb-color-primary-text);
    background-color: var(--sb-color-primary-light);
}

.sb-datagrid__expand-btn--expanded:hover {
    background-color: var(--sb-color-primary-light);
    border-color: var(--sb-color-primary-hover);
    color: var(--sb-color-primary-hover);
}

/* Detail row (child content) */
.sb-datagrid__row--detail {
    background-color: var(--sb-color-surface-variant);
}

.sb-datagrid__row--detail:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-datagrid__cell--detail {
    padding: 0;
    vertical-align: top;
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-datagrid__detail-content {
    padding: var(--sb-space-4) var(--sb-space-6);
    margin: 0 var(--sb-space-4);
    margin-block-end: var(--sb-space-2);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    border-inline-start: 4px solid var(--sb-color-primary);
    box-shadow: var(--sb-shadow-sm);
}

.sb-datagrid__body .sb-datagrid__row {
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datagrid__body .sb-datagrid__row:hover {
    background-color: var(--sb-color-surface-variant);
}

/* Frozen columns: solid background so scrolling content doesn't show through; shadow for separation */
.sb-datagrid__cell--frozen-start,
.sb-datagrid__cell--frozen-end {
    isolation: isolate; /* Ensure proper stacking above scrollable content */
    background-color: var(--sb-color-surface);
}

.sb-datagrid__cell--frozen-start {
    box-shadow: 2px 0 4px -2px rgb(0 0 0 / 0.08);
}

.sb-datagrid__header .sb-datagrid__cell--frozen-start {
    background-color: var(--sb-color-surface);
}

.sb-datagrid__body .sb-datagrid__row:hover .sb-datagrid__cell--frozen-start {
    background-color: var(--sb-color-surface-variant);
}

.sb-datagrid__cell--frozen-end {
    box-shadow: -2px 0 4px -2px rgb(0 0 0 / 0.08);
}

.sb-datagrid__header .sb-datagrid__cell--frozen-end {
    background-color: var(--sb-color-surface);
}

.sb-datagrid__body .sb-datagrid__row:hover .sb-datagrid__cell--frozen-end {
    background-color: var(--sb-color-surface-variant);
}

/* Striped rows: alternating row background when Striped=true */
.sb-datagrid__row--striped {
    background-color: var(--sb-color-surface-variant);
}

.sb-datagrid__row--selected {
    background-color: var(--sb-color-primary-light) !important;
}

.sb-datagrid__row--empty {
    text-align: center;
}

/* Virtualization, Frozen, Resizable: prevent cell overflow and overlap when table-layout: fixed */
.sb-datagrid--virtualized .sb-datagrid__cell,
.sb-datagrid--frozen .sb-datagrid__cell,
.sb-datagrid--resizable .sb-datagrid__cell {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-datagrid--virtualized .sb-datagrid__body .sb-datagrid__cell:not(.sb-datagrid__cell--expand):not(.sb-datagrid__cell--selection),
.sb-datagrid--frozen .sb-datagrid__body .sb-datagrid__cell:not(.sb-datagrid__cell--expand):not(.sb-datagrid__cell--selection),
.sb-datagrid--resizable .sb-datagrid__body .sb-datagrid__cell:not(.sb-datagrid__cell--expand):not(.sb-datagrid__cell--selection) {
    /* Ensure data columns respect width; expand/selection have fixed widths */
    min-width: 0;
}

/* Virtualization Spacers */
.sb-datagrid__body>tr:not(.sb-datagrid__row) {
    display: block;
    border: none !important;
    padding: 0 !important;
}

.sb-datagrid__cell--empty {
    padding: var(--sb-space-8);
    text-align: center;
    color: var(--sb-color-text-muted);
}

/* Inline edit inputs: match SbTextField / design system */
.sb-datagrid__editor {
    display: block;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text);
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datagrid__editor:hover {
    border-color: var(--sb-color-border-strong);
}

.sb-datagrid__editor:focus {
    outline: none;
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-datagrid__editor::placeholder {
    color: var(--sb-color-text-muted);
}

.sb-datagrid__editor--number,
.sb-datagrid__editor--date {
    /* number/date inputs: same as base; align content for numbers */
}

.sb-datagrid__editor--number {
    text-align: end;
}

/* Inline edit checkbox: match SbCheckbox look */
.sb-datagrid__editor--checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    margin: 0;
    accent-color: var(--sb-color-primary);
    cursor: pointer;
}

.sb-datagrid__cell--editing .sb-datagrid__editor--checkbox {
    /* center checkbox in cell */
    display: block;
    margin-inline: auto;
}

.sb-datagrid__footer {
    background-color: var(--sb-color-surface-variant);
}

.sb-datagrid__cell--footer {
    font-weight: var(--sb-font-weight-medium);
}

.sb-datagrid__pagination {
    padding: var(--sb-space-3) var(--sb-space-4);
    border-top: 1px solid var(--sb-color-border);
    background-color: var(--sb-color-surface);
    position: relative;
    z-index: 3;
}

.sb-datagrid__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-2);
    padding: var(--sb-space-2) var(--sb-space-3);
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-datagrid__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sb-space-2);
    margin-inline-start: auto;
}

.sb-datagrid__cell--filter {
    padding: var(--sb-space-2);
    vertical-align: middle;
    background-color: var(--sb-color-surface-variant);
}

.sb-datagrid__filter-input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: var(--sb-space-1) var(--sb-space-2);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font: inherit;
    font-size: var(--sb-font-size-sm);
}

.sb-datagrid__filter-input:focus {
    outline: 2px solid var(--sb-color-primary);
    outline-offset: 1px;
}

.sb-datagrid__chooser {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2);
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    padding: var(--sb-space-3);
}

.sb-datagrid__chooser-item {
    display: flex;
    align-items: center;
    min-height: 36px;
}

.sb-datagrid__chooser-item--locked {
    opacity: 0.7;
}

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

.sb-datagrid__cards-empty {
    padding: var(--sb-space-6);
    text-align: center;
    color: var(--sb-color-text-muted);
}

.sb-datagrid__card {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3);
    padding: var(--sb-space-4);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-sm);
}

.sb-datagrid__card--selected {
    border-color: var(--sb-color-primary);
    background-color: var(--sb-color-primary-light);
}

.sb-datagrid__card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--sb-space-3);
}

.sb-datagrid__card-title {
    flex: 1;
    min-width: 0;
    font-weight: var(--sb-font-weight-semibold);
}

.sb-datagrid__card-fields {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2);
    margin: 0;
}

.sb-datagrid__card-field {
    display: grid;
    grid-template-columns: minmax(6rem, 34%) 1fr;
    gap: var(--sb-space-2);
    align-items: start;
}

.sb-datagrid__card-field dt {
    margin: 0;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
}

.sb-datagrid__card-field dd {
    margin: 0;
    min-width: 0;
}

.sb-datagrid__card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-2);
    padding-top: var(--sb-space-2);
    border-top: 1px solid var(--sb-color-border);
}

.sb-datagrid__card-actions .sb-icon-button,
.sb-datagrid__card-actions button {
    min-width: 44px;
    min-height: 44px;
}

.sb-datagrid__sheet {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-4);
}

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

.sb-datagrid__sheet-label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-secondary);
}

.sb-datagrid--cards .sb-datagrid__container {
    overflow: visible;
}

/* Bordered grid: outer border + horizontal and vertical cell borders */
.sb-datagrid--bordered {
    border: 1px solid var(--sb-color-border);
}

.sb-datagrid--bordered .sb-datagrid__cell {
    border-bottom: 1px solid var(--sb-color-border);
    border-inline-end: 1px solid var(--sb-color-border);
}

.sb-datagrid--bordered .sb-datagrid__cell:last-child {
    border-inline-end: none;
}

/* Borderless grid: no outer border, no cell borders; keep header separator */
.sb-datagrid--borderless .sb-datagrid__cell {
    border: none;
}

.sb-datagrid--borderless .sb-datagrid__header .sb-datagrid__cell {
    border-bottom: 1px solid var(--sb-color-border);
}

/* ============================================
   SbColumnFilterMenu (column filter dropdown)
   ============================================ */

.sb-filter-menu {
    position: relative;
    display: inline-flex;
    z-index: 1;
}

.sb-filter-menu--open {
    z-index: 1001;
}

.sb-filter-menu__trigger {
    min-width: 0;
    padding: var(--sb-space-1);
}

.sb-filter-menu__trigger--active {
    color: var(--sb-color-primary-text);
}

.sb-filter-menu__dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 1000;
    min-width: 240px;
    margin-top: var(--sb-space-1);
    padding: 0;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-shadow-lg);
    font-size: var(--sb-font-size-sm);
}

/* Fixed positioning so dropdown does not scroll with the grid; position set via JS/interop */
.sb-filter-menu__dropdown--fixed {
    position: fixed;
    margin-top: 0;
}

.sb-filter-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-2);
    padding: var(--sb-space-3) var(--sb-space-4);
    border-bottom: 1px solid var(--sb-color-border);
    background-color: var(--sb-color-surface-variant);
}

.sb-filter-menu__title {
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
}

.sb-filter-menu__content {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3);
    padding: var(--sb-space-4);
}

.sb-filter-menu__field {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
}

.sb-filter-menu__label {
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-secondary);
    font-size: var(--sb-font-size-xs);
}

.sb-filter-menu__select,
.sb-filter-menu__input {
    width: 100%;
}

.sb-filter-menu__input {
    padding: var(--sb-space-2) var(--sb-space-3);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
                box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-filter-menu__input:focus {
    outline: none;
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 2px var(--sb-color-primary-light);
}

.sb-filter-menu__input::placeholder {
    color: var(--sb-color-text-muted);
}

.sb-filter-menu__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sb-space-2);
    padding: var(--sb-space-3) var(--sb-space-4);
    border-top: 1px solid var(--sb-color-border);
    background-color: var(--sb-color-surface);
}

/* ============================================
   SbTextArea
   ============================================ */

.sb-textarea {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-textarea:focus-within {
    border-color: var(--sb-color-primary);
}


/* Higher specificity than .sb-theme-root textarea reset so our border is visible */
.sb-theme-root .sb-textarea__input {
    width: 100%;
    min-height: 80px;
    padding: var(--sb-space-3);
    border: 1px solid var(--sb-color-control-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-textarea__input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.sb-textarea:focus-within .sb-textarea__input {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}


.sb-textarea__input::placeholder {
    color: var(--sb-color-text-muted);
}

.sb-textarea--error .sb-textarea__input {
    border-color: var(--sb-color-danger);
}

.sb-textarea--disabled .sb-textarea__input {
    opacity: 0.5;
    cursor: not-allowed;
    resize: none;
}

.sb-textarea--readonly .sb-textarea__input {
    background-color: var(--sb-color-surface-variant);
}

.sb-textarea__counter {
    margin-top: var(--sb-space-1);
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
    text-align: right;
}

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

.sb-textarea__error {
    margin-top: var(--sb-space-1);
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-danger-text);
}

/* ============================================
   SbTagInput
   ============================================ */

.sb-tag-input {
    position: relative;
}

.sb-tag-input__container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-1);
    min-height: 40px;
    padding: var(--sb-space-2);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    cursor: text;
}

.sb-tag-input__container:focus-within {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-tag-input--disabled .sb-tag-input__container {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-tag-input__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    background-color: var(--sb-color-primary-light);
    border-radius: var(--sb-radius-sm);
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-primary-text);
}

.sb-tag-input__tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-primary-text);
    font-size: 14px;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-tag-input__tag-remove:hover {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-tag-input__input {
    flex: 1;
    min-width: 100px;
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    outline: none;
}

.sb-tag-input__input:focus,
.sb-tag-input__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.sb-tag-input__counter {
    margin-top: var(--sb-space-1);
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

/* ============================================
   SbTagAutocomplete
   ============================================ */

.sb-tag-autocomplete {
    position: relative;
    width: 100%;
}

.sb-tag-autocomplete__label {
    display: block;
    margin-bottom: var(--sb-space-1);
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
}

.sb-tag-autocomplete__required {
    color: var(--sb-color-danger-text);
    margin-inline-start: var(--sb-space-1);
}

.sb-tag-autocomplete__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-1);
    min-height: 40px;
    padding: var(--sb-space-2);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    cursor: text;
}

.sb-tag-autocomplete__container:focus-within {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-tag-autocomplete--disabled .sb-tag-autocomplete__container {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-tag-autocomplete__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    background-color: var(--sb-color-primary-light);
    border-radius: var(--sb-radius-sm);
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-primary-text);
}

.sb-tag-autocomplete__chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-primary-text);
    cursor: pointer;
}

.sb-tag-autocomplete__chip-remove:hover {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-tag-autocomplete__input {
    flex: 1;
    min-width: 120px;
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    outline: none;
}

.sb-tag-autocomplete__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--sb-color-border);
    border-top-color: var(--sb-color-primary);
    border-radius: 50%;
    animation: sb-spin 0.8s linear infinite;
}

.sb-tag-autocomplete__dropdown {
    position: absolute;
    z-index: var(--sb-z-index-dropdown, 1000);
    top: calc(100% + var(--sb-space-1));
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    box-shadow: var(--sb-shadow-md);
}

.sb-tag-autocomplete__dropdown--flip-up {
    top: auto;
    bottom: calc(100% + var(--sb-space-1));
}

.sb-tag-autocomplete__option {
    display: block;
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    text-align: start;
    cursor: pointer;
}

.sb-tag-autocomplete__option:hover,
.sb-tag-autocomplete__option--highlighted {
    background-color: var(--sb-color-surface-hover);
}

.sb-tag-autocomplete__option--create {
    color: var(--sb-color-primary-text);
    font-weight: var(--sb-font-weight-medium);
}

.sb-tag-autocomplete__no-results {
    padding: var(--sb-space-3);
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
}

.sb-tag-autocomplete__counter {
    margin-top: var(--sb-space-1);
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

/* ============================================
   SbTimePicker
   ============================================ */

.sb-timepicker {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    width: 100%;
}

.sb-timepicker__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
}

.sb-timepicker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-2);
    width: 100%;
    height: 40px;
    padding-inline: var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    cursor: pointer;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-timepicker__trigger:hover:not(.sb-timepicker__trigger--disabled) {
    border-color: var(--sb-color-primary);
}

.sb-timepicker__trigger--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-timepicker__value {
    flex: 1;
    color: var(--sb-color-text);
}

.sb-timepicker__placeholder {
    flex: 1;
    color: var(--sb-color-text-muted);
}

.sb-timepicker__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-timepicker__clear:hover {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

.sb-timepicker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
}

.sb-timepicker__dropdown {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    top: 100%;
    inset-inline-start: 0;
    margin-top: var(--sb-space-1);
    min-width: 280px;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
}

.sb-timepicker__dropdown.sb-timepicker__dropdown--flip-up {
    top: auto !important;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--sb-space-1);
    animation: sb-datepicker-fade-in-up var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-timepicker__selectors {
    display: flex;
    align-items: stretch;
    padding: var(--sb-space-3);
    gap: var(--sb-space-2);
}

.sb-timepicker__column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sb-timepicker__column-header {
    padding: var(--sb-space-1);
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text-muted);
    text-align: center;
    text-transform: uppercase;
}

.sb-timepicker__scroll {
    max-height: 200px;
    overflow-y: auto;
}

.sb-timepicker__option {
    display: block;
    width: 100%;
    padding: var(--sb-space-2);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-timepicker__option:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-timepicker__option--selected {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-timepicker__separator {
    display: flex;
    align-items: center;
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-bold);
    color: var(--sb-color-text-muted);
}

.sb-timepicker__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sb-space-2);
    padding: var(--sb-space-2) var(--sb-space-3);
    border-top: 1px solid var(--sb-color-border);
}

.sb-timepicker__now-btn,
.sb-timepicker__apply-btn {
    padding: var(--sb-space-1) var(--sb-space-3);
    border: none;
    border-radius: var(--sb-radius-md);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
}

.sb-timepicker__now-btn {
    background: transparent;
    color: var(--sb-color-primary-text);
}

.sb-timepicker__apply-btn {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

/* ============================================
   SbAutocomplete
   ============================================ */

.sb-autocomplete {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sb-autocomplete__input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding-inline: var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-autocomplete__input-wrapper:focus-within {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-autocomplete__input {
    flex: 1;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    outline: none;
}

.sb-autocomplete__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--sb-color-border);
    border-top-color: var(--sb-color-primary);
    border-radius: 50%;
    animation: sb-spin 0.8s linear infinite;
}

@keyframes sb-spin {
    to {
        transform: rotate(360deg);
    }
}

.sb-autocomplete__clear,
.sb-autocomplete__icon {
    color: var(--sb-color-text-muted);
    cursor: pointer;
}

.sb-autocomplete__dropdown {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--sb-space-1);
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-shadow-lg);
}

.sb-autocomplete__option {
    display: block;
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-autocomplete__option:hover,
.sb-autocomplete__option--highlighted {
    background-color: var(--sb-color-surface-variant);
}

.sb-autocomplete__option--selected {
    background-color: var(--sb-color-primary-light);
}

.sb-autocomplete__no-results {
    padding: var(--sb-space-3);
    text-align: center;
    color: var(--sb-color-text-muted);
}

/* ============================================
   SbColorPicker
   ============================================ */

.sb-colorpicker {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    width: 100%;
}

.sb-colorpicker > .sb-colorpicker__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
}

.sb-colorpicker__trigger {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    width: 100%;
    padding: var(--sb-space-2);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    cursor: pointer;
}

.sb-colorpicker__value {
    flex: 1;
    min-width: 0;
}

.sb-colorpicker__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-inline-start: auto;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-muted);
    cursor: pointer;
    transition: color var(--sb-duration-fast) var(--sb-easing-default),
        background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-colorpicker__clear:hover {
    color: var(--sb-color-primary-text);
    background-color: var(--sb-color-primary-light);
}

.sb-colorpicker__clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sb-color-primary);
}

.sb-colorpicker__swatch {
    width: 24px;
    height: 24px;
    border-radius: var(--sb-radius-sm);
    border: 1px solid var(--sb-color-border);
}

.sb-colorpicker__dropdown {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    top: 100%;
    inset-inline-start: 0;
    margin-top: var(--sb-space-1);
    padding: var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
}

.sb-colorpicker__dropdown.sb-colorpicker__dropdown--flip-up {
    top: auto !important;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--sb-space-1);
    animation: sb-datepicker-fade-in-up var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-colorpicker__presets {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--sb-space-1);
    margin-bottom: var(--sb-space-3);
}

.sb-colorpicker__preset {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--sb-radius-sm);
    cursor: pointer;
    transition: transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-colorpicker__preset:hover {
    transform: scale(1.1);
}

.sb-colorpicker__preset--selected {
    border-color: var(--sb-color-text);
    box-shadow: 0 0 0 2px var(--sb-color-surface);
}


.sb-colorpicker__custom {
    margin-bottom: var(--sb-space-3);
}

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

.sb-colorpicker__native-wrapper {
    position: relative;
    width: 38px;
    height: 38px;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-sm);
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.sb-colorpicker__native {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    padding: 0;
    margin: 0;
    border: none;
    opacity: 0;
    cursor: pointer;
}

.sb-colorpicker__hex {
    flex: 1;
    height: 38px;
    padding-inline: var(--sb-space-3);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-sm);
    font-family: monospace;
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text);
    background-color: var(--sb-color-background);
}

.sb-colorpicker__hex:focus {
    outline: none;
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 2px var(--sb-color-primary-light);
}

.sb-colorpicker__label {
    display: block;
    margin-bottom: var(--sb-space-1);
    font-size: var(--sb-font-size-xs);
    font-weight: 500;
    color: var(--sb-color-muted);
}

.sb-colorpicker__opacity {
    margin-bottom: var(--sb-space-3);
}

.sb-colorpicker__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sb-space-2);
}

/* ============================================
   SbTabs
   ============================================ */

.sb-tabs {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow shrinking in flex layouts for responsive view */
}

.sb-tabs--vertical {
    flex-direction: row;
}

.sb-tabs__list {
    display: flex;
    gap: var(--sb-space-1);
    border-bottom: 1px solid var(--sb-color-border);
    overflow-x: auto; /* Horizontal scroll when tabs overflow in responsive view */
    overflow-y: hidden; /* No vertical scrollbar in tab header */
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

.sb-tabs--vertical .sb-tabs__list {
    overflow-x: visible;
    overflow-y: auto;
}

.sb-tabs--vertical .sb-tabs__list {
    flex-direction: column;
    border-bottom: none;
    border-inline-end: 1px solid var(--sb-color-border);
    padding-inline-end: var(--sb-space-2);
}

.sb-tabs__tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-2) var(--sb-space-4);
    flex-shrink: 0; /* Prevent tabs from shrinking; scroll when overflow */
    border: none;
    background: transparent;
    color: var(--sb-color-text-secondary);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    font-weight: var(--sb-font-weight-medium);
    cursor: pointer;
    transition: color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-tabs__tab:hover {
    color: var(--sb-color-text);
}

.sb-tabs__tab--active {
    color: var(--sb-color-primary-text);
}

.sb-tabs__tab--active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--sb-color-primary);
}

.sb-tabs--vertical .sb-tabs__tab--active::after {
    bottom: auto;
    top: 0;
    left: auto;
    right: -1px;
    width: 2px;
    height: 100%;
}

.sb-tabs__tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-tabs__tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sb-tabs__tab-badge:has(.sb-badge) {
    display: inline-flex;
}

.sb-tabs__panel {
    padding: var(--sb-space-4) 0;
}

.sb-tabs--vertical .sb-tabs__panel {
    flex: 1;
    padding: 0 var(--sb-space-4);
}

/* sb-tabs--vertical: responsive - horizontal tabs on top on mobile */
@media (max-width: 767px) {
    .sb-tabs--vertical {
        flex-direction: column;
    }

    .sb-tabs--vertical .sb-tabs__list {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        border-inline-end: none;
        border-block-end: 1px solid var(--sb-color-border);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sb-tabs--vertical .sb-tabs__tab {
        flex-shrink: 0;
        width: auto;
        min-width: max-content;
        white-space: nowrap;
    }

    .sb-tabs--vertical .sb-tabs__tab--active::after {
        inset-inline-start: 0;
        inset-inline-end: 0;
        top: auto;
        bottom: -1px;
        width: 100%;
        height: 2px;
    }

    .sb-tabs--vertical .sb-tabs__panel {
        padding: var(--sb-space-4) 0;
    }
}

/* ============================================
   SbBreadcrumb
   ============================================ */

.sb-breadcrumb {
    font-size: var(--sb-font-size-sm);
}

.sb-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.sb-breadcrumb__link {
    color: var(--sb-color-text-muted);
    text-decoration: none;
    transition: color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-breadcrumb__link:hover {
    color: var(--sb-color-text);
}

.sb-breadcrumb__item--current .sb-breadcrumb__text {
    color: var(--sb-color-text);
    font-weight: var(--sb-font-weight-medium);
}

.sb-breadcrumb__current {
    color: var(--sb-color-text);
    font-weight: var(--sb-font-weight-medium);
}

.sb-breadcrumb__separator {
    color: var(--sb-color-text-muted);
}

/* ============================================
   SbAccordion
   ============================================ */

.sb-accordion {
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    overflow: hidden;
}

.sb-accordion-item {
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-accordion-item:last-child {
    border-bottom: none;
}

.sb-accordion-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sb-space-3) var(--sb-space-4);
    border: none;
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    font-weight: var(--sb-font-weight-medium);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-accordion-item__header:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-accordion-item__header:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-accordion-item__header-start {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    min-width: 0;
}

.sb-accordion-item__header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sb-space-1);
    min-width: 0;
}

.sb-accordion-item__subtitle {
    margin: 0;
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-muted);
}

.sb-accordion-item__subtitle > * {
    margin: 0;
}

.sb-accordion-item__icon {
    flex-shrink: 0;
}

.sb-accordion-item__chevron {
    flex-shrink: 0;
    transition: transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-accordion-item--expanded .sb-accordion-item__chevron {
    transform: rotate(180deg);
}

.sb-accordion-item--expanded .sb-accordion-item__header {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-accordion-item__content {
    padding: var(--sb-space-4);
    border-top: 1px solid var(--sb-color-border);
}

/* ============================================
   SbStepper
   ============================================ */

.sb-stepper {
    display: flex;
    flex-direction: column;
}

.sb-stepper__steps {
    display: flex;
    align-items: flex-start;
}

.sb-stepper--vertical .sb-stepper__steps {
    flex-direction: column;
}

.sb-stepper__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.sb-stepper--vertical .sb-stepper__step {
    flex: none;
    flex-direction: column;
    align-items: flex-start;
}

.sb-stepper--vertical .sb-stepper__step-button {
    flex-direction: row;
    align-items: center;
    text-align: left;
}

.sb-stepper__step-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-2);
    border: none;
    background: transparent;
    cursor: pointer;
}

.sb-stepper__step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-semibold);
    transition: all var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-stepper__step--active .sb-stepper__step-indicator {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-stepper__step--completed .sb-stepper__step-indicator {
    background-color: var(--sb-color-success);
    color: var(--sb-color-on-success);
}

.sb-stepper__step-label {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
}

.sb-stepper__step--active .sb-stepper__step-label {
    color: var(--sb-color-text);
    font-weight: var(--sb-font-weight-medium);
}

.sb-stepper__connector {
    position: absolute;
    top: calc(var(--sb-space-2) + 16px);
    inset-inline-start: calc(50% + 20px);
    inset-inline-end: calc(-50% + 20px);
    height: 2px;
    background-color: var(--sb-color-border);
}

.sb-stepper--vertical .sb-stepper__connector {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 2px;
    height: 24px;
    margin-inline-start: calc(var(--sb-space-2) + 15px);
}

.sb-stepper__step--completed+.sb-stepper__connector,
.sb-stepper__step--completed .sb-stepper__connector {
    background-color: var(--sb-color-success);
}

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

.sb-stepper__navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sb-space-3);
    margin-top: var(--sb-space-4);
    padding-top: var(--sb-space-4);
    border-top: 1px solid var(--sb-color-border);
}

.sb-stepper__back,
.sb-stepper__next,
.sb-stepper__finish {
    padding: var(--sb-space-2) var(--sb-space-4);
    border-radius: var(--sb-radius-md);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-stepper__back {
    border: 1px solid var(--sb-color-border);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text-secondary);
}

.sb-stepper__back:hover:not(:disabled) {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

.sb-stepper__next,
.sb-stepper__finish {
    border: none;
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-stepper__next:hover:not(:disabled),
.sb-stepper__finish:hover:not(:disabled) {
    background-color: var(--sb-color-primary-hover);
}

.sb-stepper__back:disabled,
.sb-stepper__next:disabled,
.sb-stepper__finish:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-stepper__step-button:hover:not(:disabled) .sb-stepper__step-indicator {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

.sb-stepper__step-labels {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sb-space-1);
    text-align: center;
}

.sb-stepper--vertical .sb-stepper__step-labels {
    align-items: flex-start;
    text-align: left;
}

.sb-stepper__step-description {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

.sb-stepper__step-optional {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
    font-style: italic;
}

/* ============================================
   SbTreeView
   ============================================ */

.sb-treeview {
    font-size: var(--sb-font-size-sm);
}

.sb-treeview-node {
    user-select: none;
}

.sb-treeview-node__content {
    display: flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    border-radius: var(--sb-radius-sm);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-treeview-node__content:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-treeview-node__content.sb-treeview-node__content--selected {
  background-color: var(--sb-color-primary-light);
}

.sb-treeview-node__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sb-color-text-muted);
    cursor: pointer;
    transition: transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-treeview-node--expanded>.sb-treeview-node__content .sb-treeview-node__toggle {
    transform: rotate(90deg);
}

[dir="rtl"] .sb-treeview-node--expanded>.sb-treeview-node__content .sb-treeview-node__toggle {
    transform: rotate(-90deg);
}

.sb-treeview-node__spacer {
    width: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.sb-treeview-node__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
}

.sb-treeview-node__label,
.sb-treeview-node__text {
    flex: 1;
    color: var(--sb-color-text);
}

.sb-treeview-node__children {
    padding-inline-start: var(--sb-space-4);
}

/* ============================================
   SbToast
   ============================================ */

.sb-toast-host {
    position: fixed;
    z-index: var(--sb-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2);
    padding: var(--sb-space-4);
    max-width: 400px;
    pointer-events: none;
}

.sb-toast-host--top-right {
    top: 0;
    right: 0;
}

.sb-toast-host--top-left {
    top: 0;
    left: 0;
}

.sb-toast-host--bottom-right {
    bottom: 0;
    right: 0;
}

.sb-toast-host--bottom-left {
    bottom: 0;
    left: 0;
}

.sb-toast-host--top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.sb-toast-host--bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.sb-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sb-space-3);
    padding: var(--sb-space-3) var(--sb-space-4);
    border-radius: var(--sb-radius-lg);
    background-color: var(--sb-color-surface);
    box-shadow: var(--sb-shadow-lg);
    pointer-events: auto;
    animation: sb-toast-in 0.3s var(--sb-easing-default);
    border: 1px solid var(--sb-color-border);
}

@keyframes sb-toast-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sb-toast--info {
    border-inline-start: 4px solid var(--sb-color-info);
}

.sb-toast--success {
    border-inline-start: 4px solid var(--sb-color-success);
}

.sb-toast--warning {
    border-inline-start: 4px solid var(--sb-color-warning);
}

.sb-toast--error {
    border-inline-start: 4px solid var(--sb-color-danger);
}

.sb-toast__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: var(--sb-radius-md);
    font-size: 1rem;
}

.sb-toast--info .sb-toast__icon {
    color: var(--sb-color-info-text);
    background-color: var(--sb-color-info-light);
}

.sb-toast--success .sb-toast__icon {
    color: var(--sb-color-success-text);
    background-color: var(--sb-color-success-light);
}

.sb-toast--warning .sb-toast__icon {
    color: var(--sb-color-warning-text);
    background-color: var(--sb-color-warning-light);
}

.sb-toast--error .sb-toast__icon {
    color: var(--sb-color-danger-text);
    background-color: var(--sb-color-danger-light);
}

.sb-toast__content {
    flex: 1;
}

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

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

.sb-toast__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-muted);
    cursor: pointer;
}

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

/* ============================================
   SbSkeleton
   ============================================ */

.sb-skeleton {
    background: linear-gradient(90deg,
            var(--sb-color-surface-variant) 25%,
            var(--sb-color-border) 50%,
            var(--sb-color-surface-variant) 75%);
    background-size: 200% 100%;
    animation: sb-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes sb-skeleton-pulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.sb-skeleton--no-animation {
    animation: none;
    background: var(--sb-color-surface-variant);
}

.sb-skeleton--text {
    height: 1em;
    border-radius: var(--sb-radius-sm);
    margin-bottom: var(--sb-space-2);
}

.sb-skeleton--circular {
    border-radius: 50%;
}

.sb-skeleton--rectangular {
    border-radius: 0;
}

.sb-skeleton--rounded {
    border-radius: var(--sb-radius-md);
}

/* ============================================
   SbEmptyState
   ============================================ */

.sb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sb-space-8);
    text-align: center;
}

.sb-empty-state__icon {
    font-size: 48px;
    color: var(--sb-color-text-muted);
    margin-bottom: var(--sb-space-4);
}

.sb-empty-state__title {
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
    margin-bottom: var(--sb-space-2);
}

.sb-empty-state__description {
    font-size: var(--sb-font-size-md);
    color: var(--sb-color-text-secondary);
    max-width: 400px;
    margin-bottom: var(--sb-space-4);
}

.sb-empty-state__content {
    margin-bottom: var(--sb-space-4);
}

.sb-empty-state__actions {
    display: flex;
    gap: var(--sb-space-2);
    margin-top: var(--sb-space-4);
}

/* ============================================
   SbBanner
   ============================================ */

.sb-banner {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3);
    padding: var(--sb-space-3) var(--sb-space-4);
    border-radius: var(--sb-radius-lg);
    border: 1px solid var(--sb-color-border);
    border-inline-start: 4px solid;
    box-shadow: var(--sb-shadow-sm);
}

.sb-banner--info {
    background-color: var(--sb-color-info-light, #e0f2fe);
    border-color: var(--sb-color-border);
    border-inline-start-color: var(--sb-color-info);
}

.sb-banner--success {
    background-color: var(--sb-color-success-light, #dcfce7);
    border-color: var(--sb-color-border);
    border-inline-start-color: var(--sb-color-success);
}

.sb-banner--warning {
    background-color: var(--sb-color-warning-light, #fef3c7);
    border-color: var(--sb-color-border);
    border-inline-start-color: var(--sb-color-warning);
}

.sb-banner--error {
    background-color: var(--sb-color-danger-light, #fee2e2);
    border-color: var(--sb-color-border);
    border-inline-start-color: var(--sb-color-danger);
}

/* Row 1: Icon | Title | Close */
.sb-banner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-3);
    min-width: 0;
}

.sb-banner__header-start {
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    min-width: 0;
}

.sb-banner__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: var(--sb-radius-md);
    font-size: 1rem;
}

.sb-banner--info .sb-banner__icon {
    color: var(--sb-color-info-text);
    background-color: var(--sb-color-info-light);
}

.sb-banner--success .sb-banner__icon {
    color: var(--sb-color-success-text);
    background-color: var(--sb-color-success-light);
}

.sb-banner--warning .sb-banner__icon {
    color: var(--sb-color-warning-text);
    background-color: var(--sb-color-warning-light);
}

.sb-banner--error .sb-banner__icon {
    color: var(--sb-color-danger-text);
    background-color: var(--sb-color-danger-light);
}

.sb-banner__title {
    font-weight: var(--sb-font-weight-semibold);
}

/* Row 2: Content */
.sb-banner__content {
    min-width: 0;
}

.sb-banner__message {
    font-size: var(--sb-font-size-sm);
}

/* Row 3: Actions */
.sb-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
}

.sb-banner__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-muted);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-banner__close:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--sb-color-text);
}

/* ============================================
   SbConfirmDialog
   ============================================ */

.sb-confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--sb-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sb-space-4);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.sb-confirm-dialog {
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - (var(--sb-space-4) * 2));
    padding: var(--sb-space-6);
    background-color: var(--sb-color-surface);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
    box-sizing: border-box;
    overflow: auto;
}

.sb-confirm-dialog__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--sb-space-4);
    border-radius: 50%;
    font-size: 24px;
}

.sb-confirm-dialog--default .sb-confirm-dialog__icon {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
}

.sb-confirm-dialog--danger .sb-confirm-dialog__icon {
    background-color: var(--sb-color-danger-light, #fee2e2);
    color: var(--sb-color-danger-text);
}

.sb-confirm-dialog--warning .sb-confirm-dialog__icon {
    background-color: var(--sb-color-warning-light, #fef3c7);
    color: var(--sb-color-warning-text);
}

.sb-confirm-dialog--info .sb-confirm-dialog__icon {
    background-color: var(--sb-color-info-light, #e0f2fe);
    color: var(--sb-color-info-text);
}

.sb-confirm-dialog--success .sb-confirm-dialog__icon {
    background-color: var(--sb-color-success-light, #dcfce7);
    color: var(--sb-color-success-text);
}

.sb-confirm-dialog__title {
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-semibold);
    text-align: center;
    margin-bottom: var(--sb-space-2);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.sb-confirm-dialog__message {
    text-align: center;
    color: var(--sb-color-text-secondary);
    margin-bottom: var(--sb-space-4);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 100%;
}

.sb-confirm-dialog__content,
.sb-confirm-dialog__body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sb-confirm-dialog__actions {
    display: flex;
    justify-content: center;
    gap: var(--sb-space-2);
}

/* ============================================
   SbTable
   ============================================ */

.sb-table-container {
    overflow-x: auto;
    min-width: 0; /* Allow shrinking in flex layouts for responsive view */
    -webkit-overflow-scrolling: touch;
}

.sb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sb-font-size-sm);
}

.sb-table--bordered {
    border: 1px solid var(--sb-color-border);
}

.sb-table--bordered th,
.sb-table--bordered td {
    border: 1px solid var(--sb-color-border);
}

.sb-table th,
.sb-table td {
    padding: var(--sb-space-3) var(--sb-space-4);
    text-align: left;
}

.sb-table th {
    background-color: var(--sb-color-surface-variant);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
}

.sb-table--striped tbody tr:nth-child(even) {
    background-color: var(--sb-color-surface-variant);
}

.sb-table--hoverable tbody tr {
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-table--hoverable tbody tr:hover {
    background-color: var(--sb-color-surface-variant);
}

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

.sb-table__empty {
    text-align: center;
    color: var(--sb-color-text-muted);
    padding: var(--sb-space-8);
}

/* ============================================
   SbStatCard
   ============================================ */

.sb-stat-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sb-space-3);
    padding: var(--sb-space-4);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-sm);
    transition: box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-stat-card:hover {
    box-shadow: var(--sb-shadow-md);
}

.sb-stat-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-color-text-muted);
}

.sb-stat-card__content {
    flex: 1;
    min-width: 0;
}

.sb-stat-card__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-secondary);
    margin-bottom: var(--sb-space-1);
}

.sb-stat-card__value {
    font-size: var(--sb-font-size-2xl);
    font-weight: var(--sb-font-weight-bold);
    color: var(--sb-color-text);
    line-height: 1.2;
}

.sb-stat-card__prefix,
.sb-stat-card__suffix {
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-medium);
}

.sb-stat-card__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    margin-top: var(--sb-space-2);
    font-size: var(--sb-font-size-sm);
}

.sb-stat-card__trend--positive {
    color: var(--sb-color-success-text);
}

.sb-stat-card__trend--negative {
    color: var(--sb-color-danger-text);
}

.sb-stat-card__trend-icon,
.sb-stat-card__trend-value {
    font-weight: var(--sb-font-weight-medium);
}

.sb-stat-card__trend-label {
    color: var(--sb-color-text-muted);
    font-weight: var(--sb-font-weight-normal);
}

.sb-stat-card__description {
    margin-top: var(--sb-space-1);
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

.sb-stat-card__actions {
    flex-shrink: 0;
}

/* ============================================
   SbMetric
   ============================================ */

.sb-metric {
    display: flex;
    flex-direction: column;
}

.sb-metric__label {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
    margin-bottom: var(--sb-space-1);
}

.sb-metric__value {
    font-size: var(--sb-font-size-xl);
    font-weight: var(--sb-font-weight-bold);
    color: var(--sb-color-text);
}

.sb-metric__unit {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-muted);
    margin-left: var(--sb-space-1);
}

/* ============================================
   SbFilterBar
   ============================================ */

.sb-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-3);
    background-color: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-md);
}

.sb-filterbar__search {
    flex: 1;
    min-width: 200px;
}

.sb-filterbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-2);
}

.sb-filterbar__actions {
    display: flex;
    gap: var(--sb-space-2);
}

/* ============================================
   SbStatusPill
   ============================================ */

.sb-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-medium);
}

.sb-status-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.sb-status-pill--success {
    background-color: var(--sb-color-success-light, #dcfce7);
    color: var(--sb-color-success-text);
}

.sb-status-pill--success .sb-status-pill__dot {
    background-color: var(--sb-color-success);
}

.sb-status-pill--warning {
    background-color: var(--sb-color-warning-light, #fef3c7);
    color: var(--sb-color-warning-text);
}

.sb-status-pill--warning .sb-status-pill__dot {
    background-color: var(--sb-color-warning);
}

.sb-status-pill--error {
    background-color: var(--sb-color-danger-light, #fee2e2);
    color: var(--sb-color-danger-text);
}

.sb-status-pill--error .sb-status-pill__dot {
    background-color: var(--sb-color-danger);
}

.sb-status-pill--info {
    background-color: var(--sb-color-info-light, #e0f2fe);
    color: var(--sb-color-info-text);
}

.sb-status-pill--info .sb-status-pill__dot {
    background-color: var(--sb-color-info);
}

.sb-status-pill--neutral {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text-secondary);
}

.sb-status-pill--neutral .sb-status-pill__dot {
    background-color: var(--sb-color-text-muted);
}

/* ============================================
   SbSurface
   ============================================ */

.sb-surface {
    background-color: var(--sb-color-surface);
    border-radius: var(--sb-radius-md);
}

.sb-surface--elevation-0 {
    box-shadow: none;
}

.sb-surface--elevation-1 {
    box-shadow: var(--sb-shadow-sm);
}

.sb-surface--elevation-2 {
    box-shadow: var(--sb-shadow-md);
}

.sb-surface--elevation-3 {
    box-shadow: var(--sb-shadow-lg);
}

.sb-surface--elevation-4 {
    box-shadow: var(--sb-shadow-xl);
}

.sb-surface--elevation-5 {
    box-shadow: var(--sb-shadow-2xl);
}

/* ============================================
   SbSpacer
   ============================================ */

.sb-spacer {
    flex-shrink: 0;
}

/* ============================================
   SbContextMenu
   ============================================ */

.sb-context-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--sb-z-popover);
}

.sb-context-menu {
    position: fixed;
    min-width: 180px;
    padding: var(--sb-space-1);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-shadow-lg);
}

/* ============================================
   SbBuilder Components
   ============================================ */

.sb-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sb-space-1);
    color: var(--sb-color-text-muted);
    cursor: grab;
}

.sb-drag-handle:active {
    cursor: grabbing;
}

.sb-drag-handle--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-drag-handle__icon {
    font-size: 16px;
}

.sb-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: var(--sb-space-4);
    border: 2px dashed var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface-variant);
    transition: all var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-dropzone--drag-over {
    border-color: var(--sb-color-primary);
    background-color: var(--sb-color-primary-light);
}

.sb-dropzone--disabled {
    opacity: 0.5;
}

.sb-dropzone__icon {
    font-size: 32px;
    color: var(--sb-color-text-muted);
    margin-bottom: var(--sb-space-2);
}

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

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

.sb-draggable-item {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-2) var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    transition: box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-draggable-item--dragging {
    box-shadow: var(--sb-shadow-lg);
    opacity: 0.8;
}

.sb-draggable-item--selected {
    border-color: var(--sb-color-primary);
    background-color: var(--sb-color-primary-light);
}

.sb-resizable {
    position: relative;
}

.sb-resizable__handle {
    position: absolute;
    background-color: var(--sb-color-primary);
}

.sb-resizable__handle--e {
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

.sb-resizable__handle--s {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    cursor: ns-resize;
}

.sb-resizable__handle--se {
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
}

.sb-split-pane {
    display: flex;
    height: 100%;
}

.sb-split-pane--vertical {
    flex-direction: column;
}

.sb-split-pane__panel {
    overflow: auto;
}

.sb-split-pane__divider {
    flex-shrink: 0;
    background-color: var(--sb-color-border);
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-split-pane__divider:hover {
    background-color: var(--sb-color-primary);
}

.sb-split-pane--horizontal>.sb-split-pane__divider {
    width: 4px;
    cursor: col-resize;
}

.sb-split-pane--vertical>.sb-split-pane__divider {
    height: 4px;
    cursor: row-resize;
}

.sb-inspector-panel {
    display: flex;
    flex-direction: column;
    width: 300px;
    background-color: var(--sb-color-surface);
    border-inline-start: 1px solid var(--sb-color-border);
}

.sb-inspector-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sb-space-3);
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-inspector-panel__title {
    font-weight: var(--sb-font-weight-semibold);
}

.sb-inspector-panel__content {
    flex: 1;
    overflow-y: auto;
}

.sb-inspector-section {
    border-bottom: 1px solid var(--sb-color-border);
}

.sb-inspector-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sb-space-2) var(--sb-space-3);
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-secondary);
    cursor: pointer;
}

.sb-inspector-section__content {
    padding: var(--sb-space-3);
}

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

.sb-property-grid__row {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
}

.sb-property-grid__label {
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-secondary);
}

.sb-inline-toolbar {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-shadow-md);
}

.sb-inline-toolbar__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-inline-toolbar__button:hover {
    background-color: var(--sb-color-surface-variant);
}

.sb-inline-toolbar__button--active {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
}

.sb-inline-toolbar__divider {
    width: 1px;
    height: 20px;
    background-color: var(--sb-color-border);
}

.sb-add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-2);
    width: 100%;
    padding: var(--sb-space-3);
    border: 2px dashed var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background: transparent;
    color: var(--sb-color-text-secondary);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
    transition: all var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-add-button:hover {
    border-color: var(--sb-color-primary);
    color: var(--sb-color-primary-text);
    background-color: var(--sb-color-primary-light);
}

.sb-add-button__icon {
    font-size: 20px;
}

/* Pagination RTL Support */
[dir='rtl'] .sb-pagination__button--first .sb-icon,
[dir='rtl'] .sb-pagination__button--prev .sb-icon,
[dir='rtl'] .sb-pagination__button--next .sb-icon,
[dir='rtl'] .sb-pagination__button--last .sb-icon {
    transform: scaleX(-1);
}

/* ============================================
   SbRichTextEditor
   ============================================ */

.sb-editor {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    overflow: hidden;
}

.sb-editor--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.sb-editor--readonly .sb-editor__toolbar {
    pointer-events: none;
    opacity: 0.6;
}

.sb-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-2);
    border-bottom: 1px solid var(--sb-color-border);
    background-color: var(--sb-color-surface-variant);
}

.sb-editor__toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text);
    font-size: var(--sb-font-size-md);
    cursor: pointer;
    transition: all var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-editor__toolbar-btn:hover:not(:disabled) {
    background-color: var(--sb-color-surface);
}

.sb-editor__toolbar-btn--active {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
}

.sb-editor__toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-editor__toolbar-select {
    height: 32px;
    padding: 0 var(--sb-space-2);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-sm);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
}

.sb-editor__toolbar-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-editor__toolbar-separator {
    width: 1px;
    height: 24px;
    margin: 0 var(--sb-space-1);
    background-color: var(--sb-color-border);
}

.sb-editor__toolbar-icon {
    font-size: 16px;
}

.sb-editor__toolbar-icon--strike {
    text-decoration: line-through;
}

.sb-editor__content {
    flex: 1;
    min-height: var(--sb-editor-height, 300px);
    max-height: var(--sb-editor-height, 300px);
    overflow-y: auto;
}


.sb-editor__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sb-space-3);
    padding: var(--sb-space-2) var(--sb-space-3);
    border-top: 1px solid var(--sb-color-border);
    background-color: var(--sb-color-surface-variant);
}

.sb-editor__count {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

/* Link dialog (inside SbDialog) */
.sb-editor__link-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-4);
}

.sb-editor__link-dialog-field {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
}

.sb-editor__link-dialog-field label {
    font-size: var(--sb-font-size-sm);
    font-weight: 500;
    color: var(--sb-color-text);
}

.sb-editor__link-input {
    padding: var(--sb-space-2) var(--sb-space-3);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-sm);
    font-size: var(--sb-font-size-sm);
    font-family: inherit;
}

.sb-editor__link-input:focus {
    outline: none;
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 2px var(--sb-color-primary-alpha);
}

.sb-editor__link-dialog-field select.sb-editor__link-input {
    cursor: pointer;
    appearance: auto;
}

.sb-editor__link-selection-label {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-muted);
}

.sb-editor__link-selection-text {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text);
    padding: var(--sb-space-2);
    background: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-sm);
}

.sb-editor__link-dialog-field--inline {
    flex: 1;
    min-width: 0;
}

/* RTL Support */
.sb-editor--rtl,
.sb-editor[dir="rtl"] {
    direction: rtl;
}

.sb-document-viewer__fallback {
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
}


/* ============================================
   CSS Coverage Gap Fixes
   Classes emitted by components that had no matching rule.
   Organized by component. Uses --sb-* design tokens and matches
   neighboring component conventions.
   ============================================ */

/* ---- Shared required-asterisk pattern (form fields) ---- */
.sb-autocomplete__required,
.sb-colorpicker__required,
.sb-daterangepicker__required,
.sb-multi-select__required,
.sb-property-grid__required,
.sb-select__required,
.sb-textarea__required,
.sb-timepicker__required {
    color: var(--sb-color-danger-text);
    margin-inline-start: var(--sb-space-1);
}

/* ---- Shared field-label pattern ---- */
.sb-select__label,
.sb-textarea__label {
    display: block;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
    margin-bottom: var(--sb-space-1);
}

/* ============================================
   SbAccordionItem
   ============================================ */
.sb-accordion-item__title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-weight: var(--sb-font-weight-medium);
}

.sb-accordion-item__body {
    min-width: 0;
}

/* ============================================
   SbAddButton
   ============================================ */
.sb-add-button-container {
    position: relative;
    display: inline-block;
}

.sb-add-button__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
}

.sb-add-button__menu {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    inset-inline-start: 0;
    margin-top: var(--sb-space-1);
    min-width: 220px;
    padding: var(--sb-space-1);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-shadow-lg);
}

.sb-add-button__option {
    display: flex;
    align-items: flex-start;
    gap: var(--sb-space-2);
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    text-align: start;
    cursor: pointer;
    border-radius: var(--sb-radius-sm);
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-add-button__option:hover:not(:disabled) {
    background-color: var(--sb-color-surface-variant);
}

.sb-add-button__option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-add-button__option-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
}

.sb-add-button__option-label {
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
}

.sb-add-button__option-description {
    display: block;
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

/* ============================================
   SbBreadcrumb
   ============================================ */
.sb-breadcrumb__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
}

/* ============================================
   SbContextMenu
   ============================================ */
.sb-context-menu-trigger {
    display: inline-flex;
    cursor: context-menu;
}

/* ============================================
   SbDataGrid
   ============================================ */
.sb-datagrid__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-secondary);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-datagrid__action-btn:hover {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

.sb-datagrid__cell--actions {
    width: 1%;
    min-width: 80px;
    white-space: nowrap;
    text-align: center;
}

.sb-datagrid__editor--text {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--sb-space-1) var(--sb-space-2);
    border: 1px solid var(--sb-color-primary);
    border-radius: var(--sb-radius-sm);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    outline: none;
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

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

/* ============================================
   SbDropZone
   ============================================ */
.sb-dropzone__indicator {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-primary-text);
    margin-top: var(--sb-space-1);
}

.sb-dropzone__placeholder {
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
}

/* ============================================
   SbEmptyState
   ============================================ */
.sb-empty-state__icon-text {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
    margin-top: var(--sb-space-2);
}

/* ============================================
   SbFilterBar (component emits sb-filter-bar; legacy CSS used sb-filterbar)
   ============================================ */
.sb-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-3);
    background-color: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-md);
}

.sb-filter-bar__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.sb-filter-bar__search-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-filter-bar__search-input:focus {
    outline: none;
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-filter-bar__search-clear {
    position: absolute;
    inset-inline-end: var(--sb-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-md);
    line-height: 1;
    cursor: pointer;
}

.sb-filter-bar__search-clear:hover {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

.sb-filter-bar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-2);
}

.sb-filter-bar__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-1);
    width: 100%;
}

.sb-filter-bar__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-font-size-xs);
}

.sb-filter-bar__tag-label {
    font-weight: var(--sb-font-weight-medium);
}

.sb-filter-bar__tag-value {
    color: var(--sb-color-text);
}

.sb-filter-bar__tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-primary-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.sb-filter-bar__tag-remove:hover {
    background-color: var(--sb-color-primary);
    color: var(--sb-color-on-primary);
}

.sb-filter-bar__clear-all {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sb-color-text-secondary);
    font-family: inherit;
    font-size: var(--sb-font-size-xs);
    cursor: pointer;
    text-decoration: underline;
}

.sb-filter-bar__clear-all:hover {
    color: var(--sb-color-text);
}

.sb-filter-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    margin-inline-start: auto;
}

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

.sb-form__content {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-4);
}

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

/* ============================================
   SbFormField
   ============================================ */
.sb-form-field__input {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    min-width: 0;
}

/* ============================================
   SbInlineToolbar (component emits __btn/__separator; legacy CSS used __button/__divider)
   ============================================ */
.sb-inline-toolbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-inline-toolbar__btn:hover:not(:disabled) {
    background-color: var(--sb-color-surface-variant);
}

.sb-inline-toolbar__btn--active {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
}

.sb-inline-toolbar__btn--danger {
    color: var(--sb-color-danger-text);
}

.sb-inline-toolbar__btn--danger:hover:not(:disabled) {
    background-color: var(--sb-color-danger-light, #fee2e2);
    color: var(--sb-color-danger-text);
}

.sb-inline-toolbar__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-inline-toolbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sb-font-size-md);
}

.sb-inline-toolbar__label {
    font-size: var(--sb-font-size-sm);
    margin-inline-start: var(--sb-space-1);
}

.sb-inline-toolbar__separator {
    width: 1px;
    height: 20px;
    background-color: var(--sb-color-border);
    flex-shrink: 0;
}

/* ============================================
   SbInspectorPanel
   ============================================ */
.sb-inspector-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sb-space-3);
}

.sb-inspector-panel__header-actions {
    display: flex;
    align-items: center;
    gap: var(--sb-space-1);
}

.sb-inspector-panel__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-muted);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-inspector-panel__toggle:hover {
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
}

/* ============================================
   SbInspectorSection
   ============================================ */
.sb-inspector-section__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sb-color-text);
}

.sb-inspector-section__badge {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

.sb-inspector-section__chevron {
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
    transition: transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-inspector-section--expanded .sb-inspector-section__chevron {
    transform: rotate(90deg);
}

[dir="rtl"] .sb-inspector-section--expanded .sb-inspector-section__chevron {
    transform: rotate(-90deg);
}

/* ============================================
   SbDocumentViewer
   ============================================ */
.sb-document-viewer pre,
.sb-document-viewer code {
    font-family: var(--sb-font-family-mono, monospace);
}

/* ============================================
   SbMetric
   ============================================ */
.sb-metric__number {
    display: inline-block;
}

.sb-metric__prefix,
.sb-metric__suffix {
    font-size: 0.6em;
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-muted);
    margin-inline: var(--sb-space-1);
}

.sb-metric__content {
    margin-top: var(--sb-space-2);
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
}

.sb-metric__progress {
    height: 4px;
    margin-top: var(--sb-space-2);
    background-color: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-full);
    overflow: hidden;
}

.sb-metric__progress-bar {
    height: 100%;
    background-color: var(--sb-color-primary);
    border-radius: var(--sb-radius-full);
    transition: width var(--sb-duration-slow) var(--sb-easing-default);
}

.sb-metric--small .sb-metric__value {
    font-size: var(--sb-font-size-lg);
}

.sb-metric--medium .sb-metric__value {
    font-size: var(--sb-font-size-xl);
}

.sb-metric--large .sb-metric__value {
    font-size: var(--sb-font-size-3xl);
}

/* ============================================
   SbPropertyGrid
   ============================================ */
.sb-property-grid__value {
    min-width: 0;
}

/* ============================================
   SbResizable (component emits full direction names; legacy CSS used compass abbreviations)
   ============================================ */
.sb-resizable__handle--top {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    cursor: ns-resize;
}

.sb-resizable__handle--bottom {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    cursor: ns-resize;
}

.sb-resizable__handle--left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

.sb-resizable__handle--right {
    top: 0;
    bottom: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

.sb-resizable__handle--top-left {
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
}

.sb-resizable__handle--top-right {
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
}

.sb-resizable__handle--bottom-left {
    bottom: 0;
    left: 0;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
}

.sb-resizable__handle--bottom-right {
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
}

/* ============================================
   SbSlugEditor
   ============================================ */
.sb-slug-editor {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2);
    width: 100%;
}

.sb-slug-editor--error .sb-slug-editor__input-row {
    border-color: var(--sb-color-danger);
}

.sb-slug-editor--error .sb-slug-editor__input-row:focus-within {
    border-color: var(--sb-color-danger);
    box-shadow: 0 0 0 3px var(--sb-color-danger-light);
}

.sb-slug-editor__input-row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    overflow: hidden;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-slug-editor__input-row:focus-within {
    border-color: var(--sb-color-primary);
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

.sb-slug-editor__base-url {
    display: inline-flex;
    align-items: center;
    padding: var(--sb-space-2) var(--sb-space-3);
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
    white-space: nowrap;
    border-inline-end: 1px solid var(--sb-color-border);
}

.sb-slug-editor__input-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
}

.sb-slug-editor__input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    outline: none;
}

.sb-slug-editor__input::placeholder {
    color: var(--sb-color-text-muted);
}

.sb-slug-editor__input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.sb-slug-editor__preview {
    display: flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    background-color: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-sm);
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-secondary);
}

.sb-slug-editor__preview-label {
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-muted);
    flex-shrink: 0;
}

.sb-slug-editor__preview-url {
    color: var(--sb-color-primary-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-slug-editor__error {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-danger-text);
}

.sb-slug-editor__generate {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-3);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
    align-self: flex-start;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-slug-editor__generate:hover:not(:disabled) {
    background-color: var(--sb-color-surface-variant);
}

.sb-slug-editor__generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   SbSortableList
   ============================================ */
.sb-sortable-list--horizontal {
    flex-direction: row;
    align-items: center;
}

.sb-sortable-list__item {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-2) var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    transition: box-shadow var(--sb-duration-fast) var(--sb-easing-default),
        border-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-sortable-list__item--dragging {
    box-shadow: var(--sb-shadow-lg);
    opacity: 0.8;
}

.sb-sortable-list__item--drop-target {
    border-color: var(--sb-color-primary);
    background-color: var(--sb-color-primary-light);
}

.sb-sortable-list__handle {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
    cursor: grab;
}

.sb-sortable-list__handle:active {
    cursor: grabbing;
}

.sb-sortable-list__content {
    flex: 1;
    min-width: 0;
}

.sb-sortable-list__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-md);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-sortable-list__remove:hover {
    background-color: var(--sb-color-danger-light, #fee2e2);
    color: var(--sb-color-danger-text);
}

.sb-sortable-list__empty {
    padding: var(--sb-space-4);
    text-align: center;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
}

/* ============================================
   SbSplitPane
   ============================================ */
.sb-split-pane__panel--first,
.sb-split-pane__panel--second {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.sb-split-pane__divider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--sb-color-border-strong);
    border-radius: var(--sb-radius-sm);
    pointer-events: none;
}

.sb-split-pane--horizontal > .sb-split-pane__divider .sb-split-pane__divider-handle {
    width: 2px;
    height: 24px;
}

.sb-split-pane--vertical > .sb-split-pane__divider .sb-split-pane__divider-handle {
    width: 24px;
    height: 2px;
}

/* ============================================
   SbStatusPill
   ============================================ */
.sb-status-pill__label {
    min-width: 0;
    white-space: nowrap;
}

/* ============================================
   SbStep
   ============================================ */
.sb-step-content {
    margin-top: var(--sb-space-4);
    padding-top: var(--sb-space-4);
    border-top: 1px solid var(--sb-color-border);
}

/* ============================================
   SbTable
   ============================================ */
.sb-table__head th {
    background-color: var(--sb-color-surface-variant);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
    text-align: start;
}

.sb-table__foot td {
    font-weight: var(--sb-font-weight-medium);
    border-top: 2px solid var(--sb-color-border);
}

.sb-table__row {
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-table__row:hover {
    background-color: var(--sb-color-surface-variant);
}

/* ============================================
   SbTab / SbTabs
   ============================================ */
.sb-tab-panel {
    display: block;
    min-width: 0;
}

.sb-tab-panel[hidden] {
    display: none;
}

.sb-tabs__content {
    flex: 1;
    min-width: 0;
}

.sb-tabs__tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   SbTagInput
   ============================================ */
.sb-tag-input__tag-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   SbTextArea
   ============================================ */
.sb-textarea__resize-handle {
    position: absolute;
    bottom: var(--sb-space-1);
    inset-inline-end: var(--sb-space-1);
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
    color: var(--sb-color-border-strong);
    pointer-events: none;
}

/* ============================================
   SbTextField
   ============================================ */
.sb-text-field__adornment--start,
.sb-text-field__adornment--end {
    flex-shrink: 0;
}

/* ============================================
   SbTimePicker
   ============================================ */
.sb-timepicker__column--period {
    min-width: 80px;
}

/* ============================================
   SbToastHost
   ============================================ */
.sb-toast-host__item {
    pointer-events: auto;
    animation: sb-toast-in 0.3s var(--sb-easing-default);
}

/* ============================================
   SbTreeViewNode
   ============================================ */
.sb-treeview-node__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-treeview-node__checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--sb-color-primary);
}

/* ============================================
   SbConfirmDialog (explicit icon-variant modifiers; legacy CSS used descendant form)
   ============================================ */
.sb-confirm-dialog__icon--default {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary-text);
}

.sb-confirm-dialog__icon--danger {
    background-color: var(--sb-color-danger-light, #fee2e2);
    color: var(--sb-color-danger-text);
}

.sb-confirm-dialog__icon--warning {
    background-color: var(--sb-color-warning-light, #fef3c7);
    color: var(--sb-color-warning-text);
}

.sb-confirm-dialog__icon--info {
    background-color: var(--sb-color-info-light, #e0f2fe);
    color: var(--sb-color-info-text);
}

.sb-confirm-dialog__icon--success {
    background-color: var(--sb-color-success-light, #dcfce7);
    color: var(--sb-color-success-text);
}

/* ============================================
   SbColorPicker (remaining sub-elements)
   ============================================ */
.sb-colorpicker__preview {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-sm);
    background-color: var(--sb-color-surface);
}

.sb-colorpicker__opacity-slider {
    width: 100%;
    margin: var(--sb-space-1) 0 0;
    cursor: pointer;
    accent-color: var(--sb-color-primary);
}

/* ============================================
   SbTable (tbody structural rule)
   ============================================ */
.sb-table__body {
    vertical-align: top;
}

/* ============================================
   Maps (OpenStreetMap / Leaflet)
   ============================================ */
.sb-map {
    position: relative;
    width: 100%;
    min-height: 120px;
    border-radius: var(--sb-radius-md, 8px);
    overflow: hidden;
    background: var(--sb-color-surface-muted, var(--sb-color-surface-variant));
    z-index: 0;
}

.sb-map--readonly {
    cursor: default;
}

.sb-map .leaflet-container {
    width: 100%;
    height: 100%;
    font: inherit;
    background: var(--sb-color-surface-muted, var(--sb-color-surface-variant));
}

.sb-map-preview {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2, 0.5rem);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md, 8px);
    overflow: hidden;
    background: var(--sb-color-surface);
}

.sb-map-preview__map {
    position: relative;
}

.sb-map-preview__leaflet {
    border-radius: 0;
}

.sb-map-preview__overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    cursor: pointer;
}

.sb-map-picker {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3, 0.75rem);
}

.sb-map-picker__toolbar {
    display: flex;
    align-items: flex-start;
    gap: var(--sb-space-2, 0.5rem);
}

.sb-map-picker__search {
    flex: 1;
    min-width: 0;
}

.sb-map-picker__map {
    border: 1px solid var(--sb-color-border);
}

.sb-map-picker__status {
    font-size: var(--sb-font-size-sm, 0.875rem);
    color: var(--sb-color-danger-text, #dc2626);
}

.sb-place-search {
    width: 100%;
}

.sb-geolocate-button {
    flex-shrink: 0;
}

/* ========== Conversation ========== */

.sb-conversation-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3, 0.75rem);
    min-height: 0;
}

.sb-conversation-timeline__loading,
.sb-conversation-timeline__empty {
    padding: var(--sb-space-4, 1rem);
    text-align: center;
    color: var(--sb-color-text-muted);
}

.sb-conversation-timeline__messages {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3, 0.75rem);
}

.sb-conversation-timeline__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sb-conversation-timeline__thinking-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2, 0.5rem);
}

.sb-conversation-timeline__thinking {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-2, 0.5rem);
}

.sb-conversation-timeline__thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.sb-conversation-timeline__thinking-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--sb-color-text-muted);
    animation: sb-conversation-thinking 1.2s ease-in-out infinite;
}

.sb-conversation-timeline__thinking-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.sb-conversation-timeline__thinking-dot:nth-child(3) {
    animation-delay: 0.3s;
}

.sb-conversation-timeline__thinking-text {
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm, 0.875rem);
}

.sb-conversation-timeline__thinking-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sb-conversation-message__bubble--thinking {
    min-inline-size: 7.5rem;
}

.sb-conversation-message__bubble--thinking-detail {
    min-inline-size: 12rem;
    max-inline-size: min(100%, 22rem);
}

@keyframes sb-conversation-thinking {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-0.15rem);
    }
}

.sb-conversation-message {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1, 0.25rem);
    max-width: min(100%, 42rem);
}

.sb-conversation-message--start {
    align-self: flex-start;
    align-items: flex-start;
}

.sb-conversation-message--end {
    align-self: flex-end;
    align-items: flex-end;
}

.sb-conversation-message__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-2, 0.5rem);
    font-size: var(--sb-font-size-xs, 0.75rem);
    color: var(--sb-color-text-muted);
}

.sb-conversation-message__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--sb-color-border-subtle, var(--sb-color-border));
    background: var(--sb-color-surface);
}

.sb-conversation-message__badge--highlight {
    border-color: var(--sb-color-warning, #f59e0b);
    color: var(--sb-color-warning-text, #b45309);
    background: color-mix(in srgb, var(--sb-color-warning, #f59e0b) 12%, transparent);
}

.sb-conversation-message__bubble {
    border-radius: 0.9rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--sb-color-border-subtle, var(--sb-color-border));
    background: var(--sb-color-surface);
    word-break: break-word;
}

.sb-conversation-message__bubble--end {
    background: color-mix(in srgb, var(--sb-color-primary) 10%, var(--sb-color-surface));
    border-color: color-mix(in srgb, var(--sb-color-primary) 25%, var(--sb-color-border-subtle, var(--sb-color-border)));
}

.sb-conversation-message__body {
    white-space: pre-wrap;
    line-height: 1.5;
}

.sb-conversation-message__footer,
.sb-conversation-message__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-2, 0.5rem);
    margin-top: var(--sb-space-2, 0.5rem);
}

.sb-conversation-message__attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--sb-color-surface-muted, var(--sb-color-surface-variant));
    font-size: var(--sb-font-size-xs, 0.75rem);
}

.sb-conversation-composer {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1, 0.25rem);
}

.sb-conversation-composer__header {
    min-width: 0;
}

.sb-conversation-composer__shell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid var(--sb-color-border-subtle, var(--sb-color-border));
    border-radius: 1.25rem;
    background: var(--sb-color-surface-muted, var(--sb-color-surface-variant));
    padding: 0.25rem 0.35rem 0.25rem 0.5rem;
    cursor: text;
}

.sb-conversation-composer__pending {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-inline: 0.35rem;
    padding-block-start: 0.2rem;
}

.sb-conversation-composer__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border-subtle, var(--sb-color-border));
    font-size: var(--sb-font-size-xs, 0.75rem);
}

.sb-conversation-composer__chip-remove {
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.15rem;
    color: var(--sb-color-text-muted);
}

.sb-conversation-composer__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 0;
}

.sb-conversation-composer__field {
    order: -1;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
    display: flex;
    cursor: text;
}

.sb-conversation-composer__textarea {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-inline-size: 100%;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.375;
    min-height: 1.375rem;
    max-height: 8rem;
    overflow-y: auto;
    field-sizing: content;
    padding-block: 0.4rem;
    padding-inline: 0.25rem;
    cursor: text;
}

.sb-conversation-composer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

.sb-conversation-composer__actions-start,
.sb-conversation-composer__actions-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    cursor: default;
}

.sb-conversation-composer__actions-start {
    flex: 0 1 auto;
    flex-wrap: wrap;
    max-width: calc(100% - 4.5rem);
}

.sb-conversation-composer__actions-end {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-inline-start: auto;
    justify-content: flex-end;
}

.sb-conversation-composer__send {
    flex-shrink: 0;
    font-weight: 700;
}

.sb-conversation-composer__footer {
    min-width: 0;
}

@media (max-width: 767px) {
    .sb-conversation-composer__actions-start {
        flex-wrap: wrap;
    }
}

/* =========================================================================
   SbChart — lightweight SVG charts (Line / Bar / Donut / Sparkline)
   ========================================================================= */
.sb-chart {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.sb-chart--line,
.sb-chart--bar,
.sb-chart--sparkline {
    overflow: visible;
}

.sb-chart--donut {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sb-chart__donut-svg {
    position: absolute;
    inset: 0;
    margin: auto;
}

.sb-chart--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-color-text-muted);
    border: 1px dashed var(--sb-color-border);
    border-radius: var(--sb-radius-md);
}

.sb-chart__empty {
    font-size: var(--sb-font-size-sm);
}

/* ============================================
   Document viewer mermaid
   ============================================ */

.sb-document-viewer .mermaid {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    margin: var(--sb-space-3) 0;
    display: block;
    box-sizing: border-box;
}

.sb-document-viewer .mermaid svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}



/* Editor status chrome follows SB tokens; document/user-selected colors are retained. */
:is(:root, .sb-theme-root) .sb-callout--note { border-inline-start-color: var(--sb-color-info); }
:is(:root, .sb-theme-root) .sb-callout--tip { border-inline-start-color: var(--sb-color-success); }
:is(:root, .sb-theme-root) .sb-callout--warn { border-inline-start-color: var(--sb-color-warning); }
:is(:root, .sb-theme-root) .sb-callout--alert { border-inline-start-color: var(--sb-color-danger); }
:is(:root, .sb-theme-root) .sb-suggestion--insert { background: var(--sb-color-success-light); }
:is(:root, .sb-theme-root) .sb-suggestion--replace { background: var(--sb-color-info-light); }

/* Form and configuration content must remain readable at narrow widths and zoom. */
.sb-card,
.sb-card__header,
.sb-card__body,
.sb-card__footer,
.sb-stack,
.sb-grid-item,
.sb-form-field,
.sb-form-field__input,
.sb-text-field-wrapper,
.sb-textarea,
.sb-number-field,
.sb-select-anchor,
.sb-tabs__content,
.sb-tabs__panel {
    min-inline-size: 0;
}

.sb-form-field__label,
.sb-form-field__helper,
.sb-form-field__error,
.sb-text-field__label,
.sb-text-field__helper,
.sb-textarea__label,
.sb-textarea__helper,
.sb-textarea__error,
.sb-number-field__label,
.sb-number-field__helper,
.sb-select-label,
.sb-select__label,
.sb-checkbox__label,
.sb-switch__text,
.sb-dialog__title,
.sb-dialog__description,
.sb-card__header {
    overflow-wrap: anywhere;
}

.sb-select-trigger {
    box-sizing: border-box;
    min-block-size: 2.75rem;
    block-size: auto;
    padding-block: var(--sb-space-2);
}

.sb-select-trigger__main {
    min-inline-size: 0;
    min-block-size: 1.5rem;
    block-size: auto;
}

.sb-select-trigger__value,
.sb-select-trigger__placeholder,
.sb-select-option {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
}

.sb-text-field__clear,
.sb-text-field__toggle-password,
.sb-select-trigger__clear {
    min-inline-size: 2rem;
    min-block-size: 2rem;
    flex-shrink: 0;
}

.sb-text-field__clear:focus-visible,
.sb-text-field__toggle-password:focus-visible,
.sb-select-trigger__clear:focus-visible,
.sb-select-trigger__main:focus-visible,
.sb-select-option:focus-visible,
.sb-tabs__tab:focus-visible {
    outline: var(--sb-focus-ring-width) solid var(--sb-focus-ring-color);
    outline-offset: -2px;
}

.sb-dialog__footer {
    flex-wrap: wrap;
}

.sb-dialog:not(.sb-dialog--fullscreen) .sb-dialog__container {
    max-block-size: calc(100dvh - 2rem);
}

.sb-dialog__body {
    overscroll-behavior: contain;
    scroll-padding-block: var(--sb-space-4);
}

:is(.sb-dialog__footer, .sb-card__footer, .sb-stack--wrap) .sb-button {
    block-size: auto;
    min-block-size: 2.5rem;
    padding-block: var(--sb-space-2);
    white-space: normal;
}

:is(.sb-dialog__footer, .sb-card__footer, .sb-stack--wrap) .sb-button__content {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}

@media (max-width: 639px) {
    .sb-dialog__header,
    .sb-dialog__body,
    .sb-dialog__footer,
    .sb-card__header,
    .sb-card__body,
    .sb-card__footer {
        padding-inline: var(--sb-space-3);
    }

    .sb-text-field__input,
    .sb-textarea__input,
    .sb-number-field__input,
    .sb-select-search__input {
        font-size: max(1rem, 16px);
    }

    .sb-tabs:not(.sb-tabs--vertical) > .sb-tabs__list {
        flex-wrap: wrap;
    }

    .sb-tabs:not(.sb-tabs--vertical) > .sb-tabs__list .sb-tabs__tab {
        flex: 1 1 auto;
        min-inline-size: 0;
        max-inline-size: 100%;
        white-space: normal;
    }

    .sb-tabs__tab-label {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb-tabs__tab,
    .sb-select-trigger__icon,
    .sb-select-dropdown,
    .sb-dialog {
        animation: none;
        transition: none;
    }
}