/* SufiBlazor - Design Tokens & Base Styles */
/* Version: 0.1.0 */

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

:root,
.sb-theme-root {
  /* ----------------------------------------
     Colors - Light Theme (Default)
     ---------------------------------------- */
  /* Primary */
  --sb-color-primary: #2563eb;
  --sb-color-primary-hover: #1d4ed8;
  --sb-color-primary-active: #1e40af;
  --sb-color-primary-50: #eff6ff;
  --sb-color-primary-100: #dbeafe;
  --sb-color-primary-light: #dbeafe;
  --sb-color-on-primary: #ffffff;
  /* Secondary */
  --sb-color-secondary: #64748b;
  --sb-color-secondary-hover: #475569;
  --sb-color-secondary-active: #334155;
  --sb-color-secondary-50: #f8fafc;
  --sb-color-secondary-100: #f1f5f9;
  --sb-color-secondary-light: #f1f5f9;
  --sb-color-on-secondary: #ffffff;
  /* Success */
  --sb-color-success: #16a34a;
  --sb-color-success-hover: #15803d;
  --sb-color-success-50: #f0fdf4;
  --sb-color-success-100: #dcfce7;
  --sb-color-success-light: #dcfce7;
  --sb-color-on-success: #ffffff;
  /* Warning */
  --sb-color-warning: #ca8a04;
  --sb-color-warning-hover: #a16207;
  --sb-color-warning-50: #fefce8;
  --sb-color-warning-100: #fef9c3;
  --sb-color-warning-light: #fef9c3;
  --sb-color-on-warning: #ffffff;
  /* Danger */
  --sb-color-danger: #dc2626;
  --sb-color-danger-hover: #b91c1c;
  --sb-color-danger-50: #fef2f2;
  --sb-color-danger-100: #fee2e2;
  --sb-color-danger-light: #fee2e2;
  --sb-color-on-danger: #ffffff;
  /* Info */
  --sb-color-info: #0891b2;
  --sb-color-info-hover: #0e7490;
  --sb-color-info-50: #ecfeff;
  --sb-color-info-100: #cffafe;
  --sb-color-info-light: #cffafe;
  --sb-color-on-info: #ffffff;
  /* Neutral / Surface */
  --sb-color-white: #ffffff;
  --sb-color-surface: #ffffff;
  --sb-color-surface-variant: #f8fafc;
  --sb-color-background: #f4f4f5;
  --sb-color-border: #e2e8f0;
  --sb-color-border-strong: #cbd5e1;
  --sb-color-sidebar-dark: #18181B;
  --sb-color-surface-hover: rgba(0, 0, 0, 0.04);
  --sb-color-gray-700: #475569;
  --sb-color-gray-900: #1e293b;
  /* Text */
  --sb-color-text: #0f172a;
  --sb-color-text-white: #ffffff;
  --sb-color-text-secondary: #475569;
  --sb-color-text-muted: #71717b;
  --sb-color-text-disabled: #cbd5e1;
  /* ----------------------------------------
     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);
  /* ----------------------------------------
     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(0 0 0 / 0.05);
  --sb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sb-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sb-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --sb-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  /* ----------------------------------------
     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-color: var(--sb-color-primary);
  --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-dark {
    /* Colors - Dark Theme */
    --sb-color-primary: #3b82f6;
    --sb-color-primary-hover: #60a5fa;
    --sb-color-primary-active: #2563eb;
    --sb-color-primary-50: rgba(59, 130, 246, 0.08);
    --sb-color-primary-100: #1e3a5f;
    --sb-color-primary-light: #1e3a5f;
    --sb-color-on-primary: #ffffff;

    --sb-color-secondary: #94a3b8;
    --sb-color-secondary-hover: #cbd5e1;
    --sb-color-secondary-active: #64748b;
    --sb-color-secondary-50: rgba(148, 163, 184, 0.08);
    --sb-color-secondary-100: #1e293b;
    --sb-color-secondary-light: #1e293b;
    --sb-color-on-secondary: #0f172a;

    --sb-color-success: #22c55e;
    --sb-color-success-hover: #4ade80;
    --sb-color-success-50: rgba(34, 197, 94, 0.08);
    --sb-color-success-100: #14532d;
    --sb-color-success-light: #14532d;
    --sb-color-on-success: #ffffff;

    --sb-color-warning: #eab308;
    --sb-color-warning-hover: #facc15;
    --sb-color-warning-50: rgba(234, 179, 8, 0.08);
    --sb-color-warning-100: #422006;
    --sb-color-warning-light: #422006;
    --sb-color-on-warning: #0f172a;

    --sb-color-danger: #ef4444;
    --sb-color-danger-hover: #f87171;
    --sb-color-danger-50: rgba(239, 68, 68, 0.08);
    --sb-color-danger-100: #450a0a;
    --sb-color-danger-light: #450a0a;
    --sb-color-on-danger: #ffffff;

    --sb-color-info: #22d3ee;
    --sb-color-info-hover: #67e8f9;
    --sb-color-info-50: rgba(34, 211, 238, 0.08);
    --sb-color-info-100: #083344;
    --sb-color-info-light: #083344;
    --sb-color-on-info: #0f172a;

    /* Neutral / Surface */
    --sb-color-surface: #0b0809;
    --sb-color-surface-variant: #334155;
    --sb-color-background: #18181B;
    --sb-color-border: #334155;
    --sb-color-border-strong: #475569;
    --sb-color-surface-hover: rgba(255, 255, 255, 0.06);

    /* Text */
    --sb-color-text: #f1f5f9;
    --sb-color-text-secondary: #cbd5e1;
    --sb-color-text-muted: #64748b;
    --sb-color-text-disabled: #475569;

    /* 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);

    /* Focus Ring */
    --sb-focus-ring-color: var(--sb-color-primary);
}

/* ============================================
   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;
}

/* 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;
}

/* 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 {
    display: grid;
    grid-template-columns: repeat(var(--sb-grid-columns, 12), 1fr);
}

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

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

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

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

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

/* 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--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);
}

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

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

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

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

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

.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);
}

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

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

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

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

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

.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);
    border: none;
    border-radius: var(--sb-radius-md);
    font-family: inherit;
    font-weight: var(--sb-font-weight-medium);
    text-decoration: none;
    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);
}

.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);
}

.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);
}

.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);
}

.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);
}

.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);
}

.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);
}

/* 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);
}

.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: inline-flex;
    align-items: center;
}

.sb-button__icon {
    display: inline-flex;
    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);
}

.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);
}

.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);
}

.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);
}

.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);
}

.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);
}

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

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

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

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

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

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

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

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

.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-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);
}

.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);
}

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

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

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

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

.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);
}

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

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

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

.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);
    border-inline-start-color: var(--sb-color-info);
}

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

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

.sb-alert--danger {
    background-color: var(--sb-color-danger-light);
    color: var(--sb-color-danger);
    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: rgba(8, 145, 178, 0.15);
}

.sb-alert--success .sb-alert__icon {
    background-color: rgba(22, 163, 74, 0.15);
}

.sb-alert--warning .sb-alert__icon {
    background-color: rgba(202, 138, 4, 0.15);
}

.sb-alert--danger .sb-alert__icon {
    background-color: rgba(220, 38, 38, 0.15);
}

.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);
}

/* 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);
    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);
    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);
}

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

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

.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);
    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-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 (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 {
    -webkit-box-shadow: 0 0 0 1000px var(--sb-color-surface) inset !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);
}

.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-border-strong);
    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-border-strong);
    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);
}

.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 */
.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;
}

/* 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;
    max-height: 90vh;
}

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

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

.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__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-dialog__close-btn:hover {
    background-color: var(--sb-color-surface-hover);
}

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

.sb-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    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,
.sb-dialog--allow-dropdown-overflow .sb-dialog__container,
.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%;
}

.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-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);
}

.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-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);
}

.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%;
}

.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);
}

.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);
}

.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);
    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-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);
}

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

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

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

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

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

.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-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);
    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);
}

/* 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);
}

.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);
}

.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);
}

/* ============================================
   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: inline-flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    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);
    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);
}

.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);
}

.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);
    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;
}

/* 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);
}

.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-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);
}

/* ============================================
   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);
}

.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);
    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);
}

/* ============================================
   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);
}

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

/* ============================================
   SbAutocomplete
   ============================================ */

.sb-autocomplete {
    position: relative;
    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);
    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);
}

.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: white;
}

.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);
    background-color: rgba(8, 145, 178, 0.12);
}

.sb-toast--success .sb-toast__icon {
    color: var(--sb-color-success);
    background-color: rgba(22, 163, 74, 0.12);
}

.sb-toast--warning .sb-toast__icon {
    color: var(--sb-color-warning);
    background-color: rgba(202, 138, 4, 0.12);
}

.sb-toast--error .sb-toast__icon {
    color: var(--sb-color-danger);
    background-color: rgba(220, 38, 38, 0.12);
}

.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);
    background-color: rgba(8, 145, 178, 0.15);
}

.sb-banner--success .sb-banner__icon {
    color: var(--sb-color-success);
    background-color: rgba(22, 163, 74, 0.15);
}

.sb-banner--warning .sb-banner__icon {
    color: var(--sb-color-warning);
    background-color: rgba(202, 138, 4, 0.15);
}

.sb-banner--error .sb-banner__icon {
    color: var(--sb-color-danger);
    background-color: rgba(220, 38, 38, 0.15);
}

.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;
    padding: var(--sb-space-6);
    background-color: var(--sb-color-surface);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
}

.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);
}

.sb-confirm-dialog--danger .sb-confirm-dialog__icon {
    background-color: var(--sb-color-danger-light, #fee2e2);
    color: var(--sb-color-danger);
}

.sb-confirm-dialog--warning .sb-confirm-dialog__icon {
    background-color: var(--sb-color-warning-light, #fef3c7);
    color: var(--sb-color-warning);
}

.sb-confirm-dialog--info .sb-confirm-dialog__icon {
    background-color: var(--sb-color-info-light, #e0f2fe);
    color: var(--sb-color-info);
}

.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);
}

.sb-confirm-dialog__message {
    text-align: center;
    color: var(--sb-color-text-secondary);
    margin-bottom: var(--sb-space-4);
}

.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);
}

.sb-stat-card__trend--negative {
    color: var(--sb-color-danger);
}

.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);
}

.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);
}

.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);
}

.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);
}

.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);
}

.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);
    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);
}

.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;
}

/* Override Quill's default styles to match our theme */
.sb-editor .ql-editor {
    min-height: var(--sb-editor-height, 300px);
    padding: var(--sb-space-3);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    line-height: var(--sb-line-height-relaxed);
    color: var(--sb-color-text);
}

.sb-editor .ql-editor.ql-blank::before {
    color: var(--sb-color-text-muted);
    font-style: normal;
    left: var(--sb-space-3);
    right: var(--sb-space-3);
}

.sb-editor .ql-container {
    border: none;
    font-family: inherit;
}

.sb-editor .ql-editor h1,
.sb-editor .ql-editor h2,
.sb-editor .ql-editor h3,
.sb-editor .ql-editor h4,
.sb-editor .ql-editor h5,
.sb-editor .ql-editor h6 {
    margin-top: var(--sb-space-4);
    margin-bottom: var(--sb-space-2);
    font-weight: var(--sb-font-weight-semibold);
    line-height: var(--sb-line-height-tight);
}

.sb-editor .ql-editor h1 {
    font-size: var(--sb-font-size-3xl);
}

.sb-editor .ql-editor h2 {
    font-size: var(--sb-font-size-2xl);
}

.sb-editor .ql-editor h3 {
    font-size: var(--sb-font-size-xl);
}

.sb-editor .ql-editor h4 {
    font-size: var(--sb-font-size-lg);
}

.sb-editor .ql-editor h5 {
    font-size: var(--sb-font-size-md);
}

.sb-editor .ql-editor h6 {
    font-size: var(--sb-font-size-sm);
}

.sb-editor .ql-editor p {
    margin-bottom: var(--sb-space-3);
}

.sb-editor .ql-editor ul,
.sb-editor .ql-editor ol {
    margin-bottom: var(--sb-space-3);
    padding-left: var(--sb-space-6);
}

.sb-editor .ql-editor li {
    margin-bottom: var(--sb-space-1);
}

.sb-editor .ql-editor blockquote {
    margin: var(--sb-space-3) 0;
    padding: var(--sb-space-3);
    padding-left: var(--sb-space-4);
    border-left: 4px solid var(--sb-color-primary);
    background-color: var(--sb-color-surface-variant);
    border-radius: 0 var(--sb-radius-sm) var(--sb-radius-sm) 0;
    font-style: italic;
    color: var(--sb-color-text-secondary);
}

.sb-editor .ql-editor pre {
    margin: var(--sb-space-3) 0;
    padding: var(--sb-space-3);
    background-color: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-md);
    font-family: var(--sb-font-family-mono);
    font-size: var(--sb-font-size-sm);
    overflow-x: auto;
}

.sb-editor .ql-editor code {
    padding: 0.125em 0.25em;
    background-color: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-sm);
    font-family: var(--sb-font-family-mono);
    font-size: 0.9em;
}

.sb-editor .ql-editor pre code {
    padding: 0;
    background: none;
    border-radius: 0;
}

.sb-editor .ql-editor a {
    color: var(--sb-color-primary);
    text-decoration: underline;
}

.sb-editor .ql-editor a:hover {
    color: var(--sb-color-primary-hover);
}

.sb-editor .ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sb-radius-md);
}

.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-editor--rtl .ql-editor.ql-blank::before {
    left: auto;
    right: var(--sb-space-3);
}

.sb-editor--rtl .ql-editor blockquote {
    border-left: none;
    border-right: 4px solid var(--sb-color-primary);
    padding-left: var(--sb-space-3);
    padding-right: var(--sb-space-4);
    border-radius: var(--sb-radius-sm) 0 0 var(--sb-radius-sm);
}

.sb-editor--rtl .ql-editor ul,
.sb-editor--rtl .ql-editor ol {
    padding-left: 0;
    padding-right: var(--sb-space-6);
}
