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

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

:root,
.sb-theme-root {
  /* ----------------------------------------
     Colors - Light Theme (Default)
     ---------------------------------------- */
  /* Primary — violet brand accent */
  --sb-color-primary: #7C3AED;
  --sb-color-primary-hover: #6D28D9;
  --sb-color-primary-active: #5B21B6;
  --sb-color-primary-50: rgb(124 58 237 / 8%);
  --sb-color-primary-100: #EDE9FE;
  --sb-color-primary-light: #EDE9FE;
  --sb-color-on-primary: #FFFFFF;
  /* Secondary */
  --sb-color-secondary: #4F46E5;
  --sb-color-secondary-hover: #4338CA;
  --sb-color-secondary-active: #3730A3;
  --sb-color-secondary-50: rgb(79 70 229 / 8%);
  --sb-color-secondary-100: #E0E7FF;
  --sb-color-secondary-light: #E0E7FF;
  --sb-color-on-secondary: #FFFFFF;
  /* Success */
  --sb-color-success: #1D8A62;
  --sb-color-success-hover: #16704F;
  --sb-color-success-50: rgb(29 138 98 / 8%);
  --sb-color-success-100: #DDF3EA;
  --sb-color-success-light: #DDF3EA;
  --sb-color-on-success: #FFFFFF;
  /* Warning */
  --sb-color-warning: #C27A16;
  --sb-color-warning-hover: #9E6010;
  --sb-color-warning-50: rgb(194 122 22 / 8%);
  --sb-color-warning-100: #F8E9CE;
  --sb-color-warning-light: #F8E9CE;
  --sb-color-on-warning: #FFFFFF;
  /* Danger */
  --sb-color-danger: #DC5F6D;
  --sb-color-danger-hover: #BE4353;
  --sb-color-danger-50: rgb(220 95 109 / 8%);
  --sb-color-danger-100: #F9E1E4;
  --sb-color-danger-light: #F9E1E4;
  --sb-color-on-danger: #FFFFFF;
  /* Info */
  --sb-color-info: #0891B2;
  --sb-color-info-hover: #0E7490;
  --sb-color-info-50: rgb(8 145 178 / 8%);
  --sb-color-info-100: #D5F5FA;
  --sb-color-info-light: #D5F5FA;
  --sb-color-on-info: #FFFFFF;
  /* Neutral / Surface */
  --sb-color-white: #FFFFFF;
  --sb-color-surface: #FFFFFF;
  --sb-color-surface-variant: #F7F6FC;
  --sb-color-background: #F4F3F9;
  --sb-color-border: #E4E0EE;
  --sb-color-border-strong: #CBC4D9;
  --sb-color-sidebar-dark: #050712;
  --sb-color-surface-hover: rgb(124 58 237 / 6%);
  --sb-color-gray-700: #4B556B;
  --sb-color-gray-900: #11182A;
  /* Text */
  --sb-color-text: #11182A;
  --sb-color-text-white: #FFFFFF;
  --sb-color-text-secondary: #4B556B;
  --sb-color-text-muted: #68758D;
  --sb-color-text-disabled: #9AA5B8;
  /* ----------------------------------------
     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);
  /* Orphan aliases used by modules/components with light-only hex fallbacks */
  --sb-color-surface-muted: #F1EFF8;
  --sb-color-surface-secondary: #FAF9FD;
  --sb-color-surface-default: var(--sb-color-surface);
  --sb-color-surface-raised: var(--sb-color-surface);
  --sb-color-surface-subtle: #FAF9FD;
  --sb-surface-muted: var(--sb-color-surface-muted);
  --sb-color-border-subtle: #EEEAF4;
  --sb-color-primary-subtle: rgb(124 58 237 / 8%);
  --sb-color-primary-soft: var(--sb-color-primary-100);
  --sb-color-primary-text: var(--sb-color-primary-active);
  --sb-color-primary-alpha: var(--sb-color-primary-50);
  --sb-color-info-subtle: var(--sb-color-info-50);
  --sb-color-warning-subtle: var(--sb-color-warning-50);
  --sb-color-success-subtle: var(--sb-color-success-50);
  --sb-color-danger-subtle: var(--sb-color-danger-50);
  --sb-color-muted: var(--sb-color-text-muted);
  --sb-color-text-primary: var(--sb-color-text);
  --sb-color-error: var(--sb-color-danger);
  --sb-z-menu: 1300;
  --sb-z-select: 1300;
  /* ----------------------------------------
     Typography
     ---------------------------------------- */
  /* Font Families */
  --sb-font-family-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sb-font-family-farsi: "Vazirmatn", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
  --sb-font-family-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  /* Font Sizes */
  --sb-font-size-xs: 0.75rem;
  /* 12px */
  --sb-font-size-sm: 0.875rem;
  /* 14px */
  --sb-font-size-md: 1rem;
  /* 16px */
  --sb-font-size-lg: 1.125rem;
  /* 18px */
  --sb-font-size-xl: 1.25rem;
  /* 20px */
  --sb-font-size-2xl: 1.5rem;
  /* 24px */
  --sb-font-size-3xl: 1.875rem;
  /* 30px */
  --sb-font-size-4xl: 2.25rem;
  /* 36px */
  --sb-font-size-5xl: 3rem;
  /* 48px */
  /* Font Weights */
  --sb-font-weight-normal: 400;
  --sb-font-weight-medium: 500;
  --sb-font-weight-semibold: 600;
  --sb-font-weight-bold: 700;
  /* Line Heights */
  --sb-line-height-tight: 1.25;
  --sb-line-height-normal: 1.5;
  --sb-line-height-relaxed: 1.75;
  /* ----------------------------------------
     Spacing Scale
     ---------------------------------------- */
  --sb-space-0: 0;
  --sb-space-1: 0.25rem;
  /* 4px */
  --sb-space-2: 0.5rem;
  /* 8px */
  --sb-space-3: 0.75rem;
  /* 12px */
  --sb-space-4: 1rem;
  /* 16px */
  --sb-space-5: 1.25rem;
  /* 20px */
  --sb-space-6: 1.5rem;
  /* 24px */
  --sb-space-8: 2rem;
  /* 32px */
  --sb-space-10: 2.5rem;
  /* 40px */
  --sb-space-12: 3rem;
  /* 48px */
  --sb-space-16: 4rem;
  /* 64px */
  /* ----------------------------------------
     Border Radius
     ---------------------------------------- */
  --sb-radius-none: 0;
  --sb-radius-sm: 0.25rem;
  /* 4px */
  --sb-radius-md: 0.375rem;
  /* 6px */
  --sb-radius-lg: 0.5rem;
  /* 8px */
  --sb-radius-xl: 0.75rem;
  /* 12px */
  --sb-radius-2xl: 1rem;
  /* 16px */
  --sb-radius-full: 9999px;
  /* ----------------------------------------
     Shadows / Elevation
     ---------------------------------------- */
  --sb-shadow-none: none;
  --sb-shadow-sm: 0 1px 2px 0 rgb(17 24 42 / 0.06);
  --sb-shadow-md: 0 4px 10px -2px rgb(17 24 42 / 0.09), 0 2px 4px -2px rgb(79 70 229 / 0.06);
  --sb-shadow-lg: 0 12px 24px -6px rgb(17 24 42 / 0.12), 0 4px 10px -4px rgb(79 70 229 / 0.08);
  --sb-shadow-xl: 0 20px 36px -8px rgb(17 24 42 / 0.14), 0 8px 16px -8px rgb(79 70 229 / 0.09);
  --sb-shadow-2xl: 0 28px 60px -14px rgb(17 24 42 / 0.2);
  /* ----------------------------------------
     Motion / Transitions
     ---------------------------------------- */
  --sb-duration-fast: 100ms;
  --sb-duration-normal: 200ms;
  --sb-duration-slow: 300ms;
  --sb-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --sb-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --sb-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --sb-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* ----------------------------------------
     Z-Index Scale
     ---------------------------------------- */
  --sb-z-dropdown: 1000;
  --sb-z-sticky: 1020;
  --sb-z-fixed: 1030;
  --sb-z-overlay-backdrop: 1040;
  --sb-z-overlay: 1050;
  --sb-z-modal: 1060;
  --sb-z-popover: 1070;
  --sb-z-tooltip: 1080;
  --sb-z-toast: 1090;
  /* ----------------------------------------
     Focus Ring
     ---------------------------------------- */
  --sb-focus-ring-color: #0891B2;
  --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: #7C3AED;
    --sb-color-primary-hover: #A78BFA;
    --sb-color-primary-active: #4F46E5;
    --sb-color-primary-50: rgb(124 58 237 / 8%);
    --sb-color-primary-100: rgb(124 58 237 / 22%);
    --sb-color-primary-light: rgb(124 58 237 / 22%);
    --sb-color-on-primary: #FFFFFF;

    --sb-color-secondary: #4F46E5;
    --sb-color-secondary-hover: #6366F1;
    --sb-color-secondary-active: #3730A3;
    --sb-color-secondary-50: rgb(79 70 229 / 8%);
    --sb-color-secondary-100: rgb(79 70 229 / 22%);
    --sb-color-secondary-light: rgb(79 70 229 / 22%);
    --sb-color-on-secondary: #FFFFFF;

    --sb-color-success: #1D8A62;
    --sb-color-success-hover: #5BC39A;
    --sb-color-success-50: rgb(29 138 98 / 8%);
    --sb-color-success-100: rgb(29 138 98 / 22%);
    --sb-color-success-light: rgb(29 138 98 / 22%);
    --sb-color-on-success: #FFFFFF;

    --sb-color-warning: #C27A16;
    --sb-color-warning-hover: #E0A64E;
    --sb-color-warning-50: rgb(194 122 22 / 8%);
    --sb-color-warning-100: rgb(194 122 22 / 22%);
    --sb-color-warning-light: rgb(194 122 22 / 22%);
    --sb-color-on-warning: #FFFFFF;

    --sb-color-danger: #DC5F6D;
    --sb-color-danger-hover: #F08A96;
    --sb-color-danger-50: rgb(220 95 109 / 8%);
    --sb-color-danger-100: rgb(220 95 109 / 22%);
    --sb-color-danger-light: rgb(220 95 109 / 22%);
    --sb-color-on-danger: #FFFFFF;

    --sb-color-info: #22D3EE;
    --sb-color-info-hover: #67E8F9;
    --sb-color-info-50: rgb(34 211 238 / 8%);
    --sb-color-info-100: rgb(34 211 238 / 22%);
    --sb-color-info-light: rgb(34 211 238 / 22%);
    --sb-color-on-info: #050712;

    /* Neutral / Surface — landing palette surface ladder */
    --sb-color-surface: #0B1020;            /* Elevated canvas */
    --sb-color-surface-variant: #11182A;    /* Main surface */
    --sb-color-background: #050712;         /* Canvas */
    --sb-color-border: rgb(168 178 199 / 16%);
    --sb-color-border-strong: rgb(168 178 199 / 30%);
    --sb-color-sidebar-dark: #050712;
    --sb-color-surface-hover: rgba(255, 255, 255, 0.06);
    /* Recessed wells (chat timeline, muted panels) sit below main surface */
    --sb-color-surface-muted: var(--sb-color-background);
    --sb-color-surface-secondary: var(--sb-color-surface-variant);
    --sb-color-surface-default: var(--sb-color-surface);
    --sb-color-surface-raised: var(--sb-color-surface-variant);
    --sb-color-surface-subtle: var(--sb-color-surface-muted);
    --sb-surface-muted: var(--sb-color-surface-muted);
    /* Selected / tinted rows use the violet brand wash */
    --sb-color-primary-subtle: rgb(124 58 237 / 22%);
    --sb-color-primary-soft: rgb(124 58 237 / 28%);
    --sb-color-primary-text: #A78BFA;
    --sb-color-primary-alpha: rgb(124 58 237 / 28%);

    /* Text */
    --sb-color-text: #E7EAF2;
    --sb-color-text-secondary: #A8B2C7;
    --sb-color-text-muted: #748096;
    --sb-color-text-disabled: #596579;

    /* 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: #22D3EE;
}

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

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

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

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

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

.sb-rtl {
    direction: rtl;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: none;
    border-radius: var(--sb-radius-md);
    font-family: inherit;
    font-weight: var(--sb-font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default),
        border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* SbForm */
.sb-form__validation-summary .validation-errors {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-danger);
    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);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

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

.sb-text-field__required {
    color: var(--sb-color-danger);
    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 {
    height: 100vh;
    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;
    min-height: 0;
    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 {
    overflow: visible;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sb-select-trigger {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    width: 100%;
    height: 40px;
    padding-inline: var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-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%;
    min-width: 0;
    max-width: 100%;
}

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

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

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

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

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

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

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

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

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

.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: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sb-datepicker__today-btn {
    padding: var(--sb-space-1) var(--sb-space-3);
    border: none;
    border-radius: var(--sb-radius-md);
    background: transparent;
    color: var(--sb-color-primary);
    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);
}

/* ============================================
   SbTagAutocomplete
   ============================================ */

.sb-tag-autocomplete {
    position: relative;
    width: 100%;
}

.sb-tag-autocomplete__label {
    display: block;
    margin-bottom: var(--sb-space-1);
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
}

.sb-tag-autocomplete__required {
    color: var(--sb-color-danger);
    margin-inline-start: var(--sb-space-1);
}

.sb-tag-autocomplete__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-1);
    min-height: 40px;
    padding: var(--sb-space-2);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    cursor: text;
}

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

.sb-tag-autocomplete--disabled .sb-tag-autocomplete__container {
    opacity: 0.5;
    cursor: not-allowed;
}

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

.sb-tag-autocomplete__chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-primary);
    cursor: pointer;
}

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

.sb-tag-autocomplete__input {
    flex: 1;
    min-width: 120px;
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    outline: none;
}

.sb-tag-autocomplete__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--sb-color-border);
    border-top-color: var(--sb-color-primary);
    border-radius: 50%;
    animation: sb-spin 0.8s linear infinite;
}

.sb-tag-autocomplete__dropdown {
    position: absolute;
    z-index: var(--sb-z-index-dropdown, 1000);
    top: calc(100% + var(--sb-space-1));
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    box-shadow: var(--sb-shadow-md);
}

.sb-tag-autocomplete__dropdown--flip-up {
    top: auto;
    bottom: calc(100% + var(--sb-space-1));
}

.sb-tag-autocomplete__option {
    display: block;
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    text-align: start;
    cursor: pointer;
}

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

.sb-tag-autocomplete__option--create {
    color: var(--sb-color-primary);
    font-weight: var(--sb-font-weight-medium);
}

.sb-tag-autocomplete__no-results {
    padding: var(--sb-space-3);
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
}

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

/* ============================================
   SbTimePicker
   ============================================ */

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

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

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

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

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

.sb-timepicker__value {
    flex: 1;
    color: var(--sb-color-text);
}

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

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

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

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

.sb-timepicker__dropdown {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    top: 100%;
    inset-inline-start: 0;
    margin-top: var(--sb-space-1);
    min-width: 280px;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
}

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

.sb-timepicker__selectors {
    display: flex;
    align-items: stretch;
    padding: var(--sb-space-3);
    gap: var(--sb-space-2);
}

.sb-timepicker__column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sb-timepicker__column-header {
    padding: var(--sb-space-1);
    font-size: var(--sb-font-size-xs);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text-muted);
    text-align: center;
    text-transform: uppercase;
}

.sb-timepicker__scroll {
    max-height: 200px;
    overflow-y: auto;
}

.sb-timepicker__option {
    display: block;
    width: 100%;
    padding: var(--sb-space-2);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

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

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

.sb-timepicker__separator {
    display: flex;
    align-items: center;
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-bold);
    color: var(--sb-color-text-muted);
}

.sb-timepicker__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sb-space-2);
    padding: var(--sb-space-2) var(--sb-space-3);
    border-top: 1px solid var(--sb-color-border);
}

.sb-timepicker__now-btn,
.sb-timepicker__apply-btn {
    padding: var(--sb-space-1) var(--sb-space-3);
    border: none;
    border-radius: var(--sb-radius-md);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
}

.sb-timepicker__now-btn {
    background: transparent;
    color: var(--sb-color-primary);
}

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

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

.sb-autocomplete {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sb-autocomplete__input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    padding-inline: var(--sb-space-3);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default);
}

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

.sb-autocomplete__input {
    flex: 1;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    outline: none;
}

.sb-autocomplete__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--sb-color-border);
    border-top-color: var(--sb-color-primary);
    border-radius: 50%;
    animation: sb-spin 0.8s linear infinite;
}

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

.sb-autocomplete__clear,
.sb-autocomplete__icon {
    color: var(--sb-color-text-muted);
    cursor: pointer;
}

.sb-autocomplete__dropdown {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--sb-space-1);
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-shadow-lg);
}

.sb-autocomplete__option {
    display: block;
    width: 100%;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

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

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

.sb-autocomplete__no-results {
    padding: var(--sb-space-3);
    text-align: center;
    color: var(--sb-color-text-muted);
}

/* ============================================
   SbColorPicker
   ============================================ */

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

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

.sb-colorpicker__trigger {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    width: 100%;
    padding: var(--sb-space-2);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    cursor: pointer;
}

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

.sb-colorpicker__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-inline-start: auto;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-muted);
    cursor: pointer;
    transition: color var(--sb-duration-fast) var(--sb-easing-default),
        background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-colorpicker__clear:hover {
    color: var(--sb-color-primary);
    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;
    max-height: calc(100vh - (var(--sb-space-4) * 2));
    padding: var(--sb-space-6);
    background-color: var(--sb-color-surface);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
    box-sizing: border-box;
    overflow: auto;
}

.sb-confirm-dialog__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--sb-space-4);
    border-radius: 50%;
    font-size: 24px;
}

.sb-confirm-dialog--default .sb-confirm-dialog__icon {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary);
}

.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--success .sb-confirm-dialog__icon {
    background-color: var(--sb-color-success-light, #dcfce7);
    color: var(--sb-color-success);
}

.sb-confirm-dialog__title {
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-semibold);
    text-align: center;
    margin-bottom: var(--sb-space-2);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.sb-confirm-dialog__message {
    text-align: center;
    color: var(--sb-color-text-secondary);
    margin-bottom: var(--sb-space-4);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 100%;
}

.sb-confirm-dialog__content,
.sb-confirm-dialog__body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sb-confirm-dialog__actions {
    display: flex;
    justify-content: center;
    gap: var(--sb-space-2);
}

/* ============================================
   SbTable
   ============================================ */

.sb-table-container {
    overflow-x: auto;
    min-width: 0; /* Allow shrinking in flex layouts for responsive view */
    -webkit-overflow-scrolling: touch;
}

.sb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sb-font-size-sm);
}

.sb-table--bordered {
    border: 1px solid var(--sb-color-border);
}

.sb-table--bordered th,
.sb-table--bordered td {
    border: 1px solid var(--sb-color-border);
}

.sb-table th,
.sb-table td {
    padding: var(--sb-space-3) var(--sb-space-4);
    text-align: left;
}

.sb-table th {
    background-color: var(--sb-color-surface-variant);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
}

.sb-table--striped tbody tr:nth-child(even) {
    background-color: var(--sb-color-surface-variant);
}

.sb-table--hoverable tbody tr {
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-table--hoverable tbody tr:hover {
    background-color: var(--sb-color-surface-variant);
}

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

.sb-table__empty {
    text-align: center;
    color: var(--sb-color-text-muted);
    padding: var(--sb-space-8);
}

/* ============================================
   SbStatCard
   ============================================ */

.sb-stat-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sb-space-3);
    padding: var(--sb-space-4);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-sm);
    transition: box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-stat-card:hover {
    box-shadow: var(--sb-shadow-md);
}

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

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

.sb-stat-card__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-secondary);
    margin-bottom: var(--sb-space-1);
}

.sb-stat-card__value {
    font-size: var(--sb-font-size-2xl);
    font-weight: var(--sb-font-weight-bold);
    color: var(--sb-color-text);
    line-height: 1.2;
}

.sb-stat-card__prefix,
.sb-stat-card__suffix {
    font-size: var(--sb-font-size-lg);
    font-weight: var(--sb-font-weight-medium);
}

.sb-stat-card__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    margin-top: var(--sb-space-2);
    font-size: var(--sb-font-size-sm);
}

.sb-stat-card__trend--positive {
    color: var(--sb-color-success);
}

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

/* Markdown Editor */
.sb-markdown-editor {
    --sb-diff-add: rgba(46, 160, 67, 0.25);
    --sb-diff-remove: rgba(248, 81, 73, 0.25);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background: var(--sb-color-surface);
    overflow: hidden;
}

.sb-markdown-editor--json .EasyMDEContainer .CodeMirror {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

.sb-markdown-editor--json-invalid {
    border-color: var(--sb-color-danger, #ef4444);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sb-color-danger, #ef4444) 35%, transparent);
}

.sb-markdown-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-1);
    padding: var(--sb-space-2);
    border-bottom: 1px solid var(--sb-color-border);
    background: var(--sb-color-surface-variant);
}

.sb-markdown-editor__toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--sb-space-2);
    border: 1px solid transparent;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text);
    cursor: pointer;
}

.sb-markdown-editor__toolbar-btn:hover:not(:disabled) {
    background: var(--sb-color-surface);
    border-color: var(--sb-color-border);
}

.sb-markdown-editor__toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-markdown-editor__toolbar-separator {
    width: 1px;
    align-self: stretch;
    margin: 0 var(--sb-space-1);
    background: var(--sb-color-border);
}

.sb-markdown-editor__textarea {
    width: 100%;
    min-height: 200px;
}

.sb-markdown-editor__diff-host {
    min-height: 240px;
}

.sb-markdown-editor--diff .CodeMirror-merge-gap {
    background: var(--sb-color-surface-variant);
}

.sb-markdown-editor--diff .CodeMirror-merge-copybuttons-left,
.sb-markdown-editor--diff .CodeMirror-merge-copybuttons-right {
    display: none;
}

.sb-markdown-editor .EasyMDEContainer .CodeMirror {
    min-height: inherit;
}

.sb-markdown-editor .editor-preview,
.sb-markdown-editor .editor-preview-side {
    background: var(--sb-color-surface);
    color: var(--sb-color-text);
}

/* Dark theme / design-token overrides for CodeMirror (EasyMDE) */
.sb-markdown-editor .EasyMDEContainer .CodeMirror {
    background: var(--sb-color-surface);
    color: var(--sb-color-text);
    border-color: var(--sb-color-border);
}

.sb-markdown-editor .EasyMDEContainer .CodeMirror-gutters {
    background: var(--sb-color-surface-variant);
    border-right-color: var(--sb-color-border);
    color: var(--sb-color-text-muted);
}

/* RTL: CodeMirror 5's RTL support is incomplete — it sets
   margin-left on the sizer for the gutter but the gutter stays
   at left:0 (vendor CSS default). We flip the layout manually. */
.sb-markdown-editor[dir="rtl"] .EasyMDEContainer .CodeMirror-gutters {
    left: auto !important;
    right: 0 !important;
    border-right-color: transparent;
    border-left-color: var(--sb-color-border);
}

.sb-markdown-editor[dir="rtl"] .EasyMDEContainer .CodeMirror-sizer {
    margin-left: 0 !important;
    margin-right: 36px !important;
}

.sb-markdown-editor[dir="rtl"] .EasyMDEContainer .CodeMirror-cursor {
    border-left: none;
    border-right: 2px solid var(--sb-color-primary);
}

.sb-markdown-editor[dir="rtl"] .EasyMDEContainer .CodeMirror-linenumber {
    text-align: right;
    padding: 0 5px 0 3px;
}

.sb-markdown-editor .EasyMDEContainer .CodeMirror-linenumber {
    color: var(--sb-color-text-muted);
}

.sb-markdown-editor .EasyMDEContainer .CodeMirror-cursor {
    border-left-color: var(--sb-color-primary);
}

.sb-markdown-editor .EasyMDEContainer .CodeMirror-selected {
    background: color-mix(in srgb, var(--sb-color-primary) 20%, transparent);
}

.sb-markdown-editor .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
    background: color-mix(in srgb, var(--sb-color-primary) 30%, transparent);
}

.sb-markdown-editor .EasyMDEContainer .CodeMirror-activeline-background {
    background: color-mix(in srgb, var(--sb-color-primary) 10%, transparent);
}

.sb-markdown-editor .EasyMDEContainer .editor-toolbar {
    background: var(--sb-color-surface-variant);
    border-color: var(--sb-color-border);
}

.sb-markdown-editor .EasyMDEContainer .editor-toolbar button {
    color: var(--sb-color-text);
}

.sb-markdown-editor .EasyMDEContainer .editor-toolbar button:hover:not(:disabled),
.sb-markdown-editor .EasyMDEContainer .editor-toolbar button.active {
    background: var(--sb-color-surface);
    border-color: var(--sb-color-border);
}

.sb-markdown-editor .EasyMDEContainer .editor-statusbar {
    background: var(--sb-color-surface-variant);
    border-top-color: var(--sb-color-border);
    color: var(--sb-color-text-muted);
}

.sb-markdown-editor .editor-preview,
.sb-markdown-editor .editor-preview-side,
.sb-markdown-editor .editor-preview-full {
    background: var(--sb-color-surface);
    color: var(--sb-color-text);
    border-color: var(--sb-color-border);
}

.sb-markdown-editor .editor-preview pre,
.sb-markdown-editor .editor-preview-side pre,
.sb-markdown-editor .editor-preview-full pre {
    background: var(--sb-color-surface-variant);
    color: var(--sb-color-text);
    border: 1px solid var(--sb-color-border);
}

.sb-markdown-editor .editor-preview table td,
.sb-markdown-editor .editor-preview table th,
.sb-markdown-editor .editor-preview-side table td,
.sb-markdown-editor .editor-preview-side table th,
.sb-markdown-editor .editor-preview-full table td,
.sb-markdown-editor .editor-preview-full table th {
    border-color: var(--sb-color-border);
}

.sb-markdown-editor .editor-preview blockquote,
.sb-markdown-editor .editor-preview-side blockquote,
.sb-markdown-editor .editor-preview-full blockquote {
    border-left-color: var(--sb-color-primary);
    color: var(--sb-color-text-muted);
}

/* CodeMirror syntax tokens (cm-s-easymde theme) */
.cm-s-easymde .cm-header,
.cm-s-easymde .cm-strong {
    color: var(--sb-color-text);
}

.cm-s-easymde .cm-comment {
    color: var(--sb-color-text-muted);
}

.cm-s-easymde .cm-link,
.cm-s-easymde .cm-url {
    color: var(--sb-color-primary);
}

.cm-s-easymde .cm-quote {
    color: var(--sb-color-info);
}

.cm-s-easymde .cm-keyword {
    color: var(--sb-color-warning);
}

.cm-s-easymde .cm-string {
    color: var(--sb-color-success);
}

.cm-s-easymde .cm-number {
    color: var(--sb-color-info);
}

.cm-s-easymde .cm-tag {
    color: var(--sb-color-danger);
}

.cm-s-easymde .cm-attribute {
    color: var(--sb-color-warning);
}

.cm-s-easymde .cm-header-1,
.cm-s-easymde .cm-header-2,
.cm-s-easymde .cm-header-3,
.cm-s-easymde .cm-header-4,
.cm-s-easymde .cm-header-5,
.cm-s-easymde .cm-header-6 {
    color: var(--sb-color-text);
}

.sb-markdown-editor .EasyMDEContainer.sided--no-fullscreen {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.sb-markdown-editor .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided,
.sb-markdown-editor .EasyMDEContainer.sided--no-fullscreen .editor-preview-side {
    flex: 1 1 50%;
    width: 50% !important;
    min-width: 20rem;
    position: static !important;
    inset: auto !important;
    height: auto;
    max-height: none;
}

.sb-markdown-editor .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
    display: block;
}

.sb-markdown-editor-fullscreen-active,
.sb-markdown-editor-fullscreen-active body {
    overflow: hidden;
}

.sb-markdown-editor.sb-markdown-editor--fullscreen {
    position: fixed;
    inset: var(--sb-space-4);
    z-index: 2000;
    min-height: auto;
    background: var(--sb-color-surface);
    box-shadow: var(--sb-shadow-xl, 0 24px 64px rgba(15, 23, 42, 0.22));
}

.sb-markdown-editor.sb-markdown-editor--fullscreen .EasyMDEContainer {
    flex: 1 1 auto;
    min-height: 0;
}

.sb-markdown-editor.sb-markdown-editor--fullscreen .EasyMDEContainer .CodeMirror {
    height: calc(100vh - 9rem) !important;
}

.sb-markdown-editor.sb-markdown-editor--fullscreen .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided,
.sb-markdown-editor.sb-markdown-editor--fullscreen .EasyMDEContainer.sided--no-fullscreen .editor-preview-side {
    height: calc(100vh - 9rem) !important;
}

.sb-markdown-viewer pre,
.sb-markdown-viewer code {
    font-family: var(--sb-font-family-mono, monospace);
}

.sb-markdown-viewer__fallback {
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
}

.sb-markdown-alert {
    padding: var(--sb-space-3) var(--sb-space-4);
    border-radius: var(--sb-radius-sm);
    margin: var(--sb-space-3) 0;
    border-left: 4px solid var(--sb-color-primary);
}

.sb-markdown-alert--note,
.sb-markdown-alert--tip {
    border-left-color: var(--sb-color-info, #0ea5e9);
    background: rgba(14, 165, 233, 0.08);
}

.sb-markdown-alert--warn,
.sb-markdown-alert--alert {
    border-left-color: var(--sb-color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
}

.sb-markdown-editor[dir="rtl"] .sb-markdown-alert {
    border-left: none;
    border-right: 4px solid var(--sb-color-primary);
}

.sb-markdown-editor[dir="rtl"] .editor-preview,
.sb-markdown-editor[dir="rtl"] .editor-preview-side,
.sb-markdown-editor[dir="rtl"] .editor-preview-full,
.sb-markdown-editor[dir="rtl"] .sb-markdown-preview {
    direction: rtl;
    text-align: right;
}

.sb-markdown-editor[dir="rtl"] .editor-preview blockquote,
.sb-markdown-editor[dir="rtl"] .editor-preview-side blockquote,
.sb-markdown-editor[dir="rtl"] .sb-markdown-preview blockquote {
    border-left: none;
    border-right: 4px solid var(--sb-color-primary);
    padding-left: 0;
    padding-right: var(--sb-space-4);
    margin-left: 0;
    margin-right: 0;
}

.sb-markdown-editor[dir="rtl"] .editor-preview ul,
.sb-markdown-editor[dir="rtl"] .editor-preview ol,
.sb-markdown-editor[dir="rtl"] .editor-preview-side ul,
.sb-markdown-editor[dir="rtl"] .editor-preview-side ol,
.sb-markdown-editor[dir="rtl"] .sb-markdown-preview ul,
.sb-markdown-editor[dir="rtl"] .sb-markdown-preview ol {
    padding-left: 0;
    padding-right: var(--sb-space-6);
}

.sb-markdown-editor[dir="rtl"] .editor-preview pre,
.sb-markdown-editor[dir="rtl"] .editor-preview code,
.sb-markdown-editor[dir="rtl"] .editor-preview-side pre,
.sb-markdown-editor[dir="rtl"] .editor-preview-side code,
.sb-markdown-editor[dir="rtl"] .sb-markdown-preview pre,
.sb-markdown-editor[dir="rtl"] .sb-markdown-preview code {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

/* ============================================
   CSS Coverage Gap Fixes
   Classes emitted by components that had no matching rule.
   Organized by component. Uses --sb-* design tokens and matches
   neighboring component conventions.
   ============================================ */

/* ---- Shared required-asterisk pattern (form fields) ---- */
.sb-autocomplete__required,
.sb-colorpicker__required,
.sb-daterangepicker__required,
.sb-multi-select__required,
.sb-property-grid__required,
.sb-select__required,
.sb-textarea__required,
.sb-timepicker__required {
    color: var(--sb-color-danger);
    margin-inline-start: var(--sb-space-1);
}

/* ---- Shared field-label pattern ---- */
.sb-select__label,
.sb-textarea__label {
    display: block;
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
    margin-bottom: var(--sb-space-1);
}

/* ============================================
   SbAccordionItem
   ============================================ */
.sb-accordion-item__title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-weight: var(--sb-font-weight-medium);
}

.sb-accordion-item__body {
    min-width: 0;
}

/* ============================================
   SbAddButton
   ============================================ */
.sb-add-button-container {
    position: relative;
    display: inline-block;
}

.sb-add-button__label {
    font-size: var(--sb-font-size-sm);
    font-weight: var(--sb-font-weight-medium);
}

.sb-add-button__menu {
    position: absolute;
    z-index: var(--sb-z-dropdown);
    inset-inline-start: 0;
    margin-top: var(--sb-space-1);
    min-width: 220px;
    padding: var(--sb-space-1);
    background-color: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    box-shadow: var(--sb-shadow-lg);
}

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

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

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

.sb-add-button__option-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
}

.sb-add-button__option-label {
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text);
}

.sb-add-button__option-description {
    display: block;
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-muted);
}

/* ============================================
   SbBreadcrumb
   ============================================ */
.sb-breadcrumb__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
}

/* ============================================
   SbContextMenu
   ============================================ */
.sb-context-menu-trigger {
    display: inline-flex;
    cursor: context-menu;
}

/* ============================================
   SbDataGrid
   ============================================ */
.sb-datagrid__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-secondary);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

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

.sb-datagrid__cell--actions {
    width: 1%;
    min-width: 80px;
    white-space: nowrap;
    text-align: center;
}

.sb-datagrid__editor--text {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--sb-space-1) var(--sb-space-2);
    border: 1px solid var(--sb-color-primary);
    border-radius: var(--sb-radius-sm);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    outline: none;
    box-shadow: 0 0 0 3px var(--sb-color-primary-light);
}

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

/* ============================================
   SbDropZone
   ============================================ */
.sb-dropzone__indicator {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-primary);
    margin-top: var(--sb-space-1);
}

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

/* ============================================
   SbEmptyState
   ============================================ */
.sb-empty-state__icon-text {
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
    margin-top: var(--sb-space-2);
}

/* ============================================
   SbFilterBar (component emits sb-filter-bar; legacy CSS used sb-filterbar)
   ============================================ */
.sb-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-2);
    padding: var(--sb-space-3);
    background-color: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-md);
}

.sb-filter-bar__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.sb-filter-bar__search-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default);
}

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

.sb-filter-bar__search-clear {
    position: absolute;
    inset-inline-end: var(--sb-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-md);
    line-height: 1;
    cursor: pointer;
}

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

.sb-filter-bar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-2);
}

.sb-filter-bar__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-1);
    width: 100%;
}

.sb-filter-bar__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary);
    border-radius: var(--sb-radius-full);
    font-size: var(--sb-font-size-xs);
}

.sb-filter-bar__tag-label {
    font-weight: var(--sb-font-weight-medium);
}

.sb-filter-bar__tag-value {
    color: var(--sb-color-text);
}

.sb-filter-bar__tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-full);
    background: transparent;
    color: var(--sb-color-primary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

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

.sb-filter-bar__clear-all {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sb-color-text-secondary);
    font-family: inherit;
    font-size: var(--sb-font-size-xs);
    cursor: pointer;
    text-decoration: underline;
}

.sb-filter-bar__clear-all:hover {
    color: var(--sb-color-text);
}

.sb-filter-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--sb-space-2);
    margin-inline-start: auto;
}

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

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

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

/* ============================================
   SbFormField
   ============================================ */
.sb-form-field__input {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1);
    min-width: 0;
}

/* ============================================
   SbInlineToolbar (component emits __btn/__separator; legacy CSS used __button/__divider)
   ============================================ */
.sb-inline-toolbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

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

.sb-inline-toolbar__btn--active {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary);
}

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

.sb-inline-toolbar__btn--danger:hover:not(:disabled) {
    background-color: var(--sb-color-danger-light, #fee2e2);
    color: var(--sb-color-danger);
}

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

.sb-inline-toolbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sb-font-size-md);
}

.sb-inline-toolbar__label {
    font-size: var(--sb-font-size-sm);
    margin-inline-start: var(--sb-space-1);
}

.sb-inline-toolbar__separator {
    width: 1px;
    height: 20px;
    background-color: var(--sb-color-border);
    flex-shrink: 0;
}

/* ============================================
   SbInspectorPanel
   ============================================ */
.sb-inspector-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sb-space-3);
}

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

.sb-inspector-panel__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-muted);
    cursor: pointer;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

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

/* ============================================
   SbInspectorSection
   ============================================ */
.sb-inspector-section__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sb-color-text);
}

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

.sb-inspector-section__chevron {
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
    transition: transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-inspector-section--expanded .sb-inspector-section__chevron {
    transform: rotate(90deg);
}

[dir="rtl"] .sb-inspector-section--expanded .sb-inspector-section__chevron {
    transform: rotate(-90deg);
}

/* ============================================
   SbMarkdownEditor
   ============================================ */
.sb-markdown-editor__fallback {
    white-space: pre-wrap;
    margin: 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);
    color: var(--sb-color-text);
}

.sb-markdown-editor__toolbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sb-font-size-md);
}

/* ============================================
   SbMetric
   ============================================ */
.sb-metric__number {
    display: inline-block;
}

.sb-metric__prefix,
.sb-metric__suffix {
    font-size: 0.6em;
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-muted);
    margin-inline: var(--sb-space-1);
}

.sb-metric__content {
    margin-top: var(--sb-space-2);
    font-size: var(--sb-font-size-sm);
    color: var(--sb-color-text-secondary);
}

.sb-metric__progress {
    height: 4px;
    margin-top: var(--sb-space-2);
    background-color: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-full);
    overflow: hidden;
}

.sb-metric__progress-bar {
    height: 100%;
    background-color: var(--sb-color-primary);
    border-radius: var(--sb-radius-full);
    transition: width var(--sb-duration-slow) var(--sb-easing-default);
}

.sb-metric--small .sb-metric__value {
    font-size: var(--sb-font-size-lg);
}

.sb-metric--medium .sb-metric__value {
    font-size: var(--sb-font-size-xl);
}

.sb-metric--large .sb-metric__value {
    font-size: var(--sb-font-size-3xl);
}

/* ============================================
   SbPropertyGrid
   ============================================ */
.sb-property-grid__value {
    min-width: 0;
}

/* ============================================
   SbResizable (component emits full direction names; legacy CSS used compass abbreviations)
   ============================================ */
.sb-resizable__handle--top {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    cursor: ns-resize;
}

.sb-resizable__handle--bottom {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    cursor: ns-resize;
}

.sb-resizable__handle--left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

.sb-resizable__handle--right {
    top: 0;
    bottom: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

.sb-resizable__handle--top-left {
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
}

.sb-resizable__handle--top-right {
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
}

.sb-resizable__handle--bottom-left {
    bottom: 0;
    left: 0;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
}

.sb-resizable__handle--bottom-right {
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
}

/* ============================================
   SbSlugEditor
   ============================================ */
.sb-slug-editor {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2);
    width: 100%;
}

.sb-slug-editor--error .sb-slug-editor__input-row {
    border-color: var(--sb-color-danger);
}

.sb-slug-editor--error .sb-slug-editor__input-row:focus-within {
    border-color: var(--sb-color-danger);
    box-shadow: 0 0 0 3px var(--sb-color-danger-light);
}

.sb-slug-editor__input-row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    overflow: hidden;
    transition: border-color var(--sb-duration-fast) var(--sb-easing-default),
        box-shadow var(--sb-duration-fast) var(--sb-easing-default);
}

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

.sb-slug-editor__base-url {
    display: inline-flex;
    align-items: center;
    padding: var(--sb-space-2) var(--sb-space-3);
    background-color: var(--sb-color-surface-variant);
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
    white-space: nowrap;
    border-inline-end: 1px solid var(--sb-color-border);
}

.sb-slug-editor__input-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
}

.sb-slug-editor__input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: var(--sb-space-2) var(--sb-space-3);
    border: none;
    background: transparent;
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-md);
    outline: none;
}

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

.sb-slug-editor__input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.sb-slug-editor__preview {
    display: flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-2);
    background-color: var(--sb-color-surface-variant);
    border-radius: var(--sb-radius-sm);
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-text-secondary);
}

.sb-slug-editor__preview-label {
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-color-text-muted);
    flex-shrink: 0;
}

.sb-slug-editor__preview-url {
    color: var(--sb-color-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-slug-editor__error {
    font-size: var(--sb-font-size-xs);
    color: var(--sb-color-danger);
}

.sb-slug-editor__generate {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-1);
    padding: var(--sb-space-1) var(--sb-space-3);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md);
    background-color: var(--sb-color-surface);
    color: var(--sb-color-text);
    font-family: inherit;
    font-size: var(--sb-font-size-sm);
    cursor: pointer;
    align-self: flex-start;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

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

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

/* ============================================
   SbSortableList
   ============================================ */
.sb-sortable-list--horizontal {
    flex-direction: row;
    align-items: center;
}

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

.sb-sortable-list__item--dragging {
    box-shadow: var(--sb-shadow-lg);
    opacity: 0.8;
}

.sb-sortable-list__item--drop-target {
    border-color: var(--sb-color-primary);
    background-color: var(--sb-color-primary-light);
}

.sb-sortable-list__handle {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--sb-color-text-muted);
    cursor: grab;
}

.sb-sortable-list__handle:active {
    cursor: grabbing;
}

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

.sb-sortable-list__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--sb-radius-sm);
    background: transparent;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-md);
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default),
        color var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-sortable-list__remove:hover {
    background-color: var(--sb-color-danger-light, #fee2e2);
    color: var(--sb-color-danger);
}

.sb-sortable-list__empty {
    padding: var(--sb-space-4);
    text-align: center;
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm);
}

/* ============================================
   SbSplitPane
   ============================================ */
.sb-split-pane__panel--first,
.sb-split-pane__panel--second {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.sb-split-pane__divider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--sb-color-border-strong);
    border-radius: var(--sb-radius-sm);
    pointer-events: none;
}

.sb-split-pane--horizontal > .sb-split-pane__divider .sb-split-pane__divider-handle {
    width: 2px;
    height: 24px;
}

.sb-split-pane--vertical > .sb-split-pane__divider .sb-split-pane__divider-handle {
    width: 24px;
    height: 2px;
}

/* ============================================
   SbStatusPill
   ============================================ */
.sb-status-pill__label {
    min-width: 0;
    white-space: nowrap;
}

/* ============================================
   SbStep
   ============================================ */
.sb-step-content {
    margin-top: var(--sb-space-4);
    padding-top: var(--sb-space-4);
    border-top: 1px solid var(--sb-color-border);
}

/* ============================================
   SbTable
   ============================================ */
.sb-table__head th {
    background-color: var(--sb-color-surface-variant);
    font-weight: var(--sb-font-weight-semibold);
    color: var(--sb-color-text);
    text-align: start;
}

.sb-table__foot td {
    font-weight: var(--sb-font-weight-medium);
    border-top: 2px solid var(--sb-color-border);
}

.sb-table__row {
    transition: background-color var(--sb-duration-fast) var(--sb-easing-default);
}

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

/* ============================================
   SbTab / SbTabs
   ============================================ */
.sb-tab-panel {
    display: block;
    min-width: 0;
}

.sb-tab-panel[hidden] {
    display: none;
}

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

.sb-tabs__tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   SbTagInput
   ============================================ */
.sb-tag-input__tag-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   SbTextArea
   ============================================ */
.sb-textarea__resize-handle {
    position: absolute;
    bottom: var(--sb-space-1);
    inset-inline-end: var(--sb-space-1);
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
    color: var(--sb-color-border-strong);
    pointer-events: none;
}

/* ============================================
   SbTextField
   ============================================ */
.sb-text-field__adornment--start,
.sb-text-field__adornment--end {
    flex-shrink: 0;
}

/* ============================================
   SbTimePicker
   ============================================ */
.sb-timepicker__column--period {
    min-width: 80px;
}

/* ============================================
   SbToastHost
   ============================================ */
.sb-toast-host__item {
    pointer-events: auto;
    animation: sb-toast-in 0.3s var(--sb-easing-default);
}

/* ============================================
   SbTreeViewNode
   ============================================ */
.sb-treeview-node__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--sb-duration-fast) var(--sb-easing-default);
}

.sb-treeview-node__checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--sb-color-primary);
}

/* ============================================
   SbConfirmDialog (explicit icon-variant modifiers; legacy CSS used descendant form)
   ============================================ */
.sb-confirm-dialog__icon--default {
    background-color: var(--sb-color-primary-light);
    color: var(--sb-color-primary);
}

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

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

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

.sb-confirm-dialog__icon--success {
    background-color: var(--sb-color-success-light, #dcfce7);
    color: var(--sb-color-success);
}

/* ============================================
   SbColorPicker (remaining sub-elements)
   ============================================ */
.sb-colorpicker__preview {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-sm);
    background-color: var(--sb-color-surface);
}

.sb-colorpicker__opacity-slider {
    width: 100%;
    margin: var(--sb-space-1) 0 0;
    cursor: pointer;
    accent-color: var(--sb-color-primary);
}

/* ============================================
   SbTable (tbody structural rule)
   ============================================ */
.sb-table__body {
    vertical-align: top;
}

/* ============================================
   Maps (OpenStreetMap / Leaflet)
   ============================================ */
.sb-map {
    position: relative;
    width: 100%;
    min-height: 120px;
    border-radius: var(--sb-radius-md, 8px);
    overflow: hidden;
    background: var(--sb-color-surface-muted, var(--sb-color-surface-variant));
    z-index: 0;
}

.sb-map--readonly {
    cursor: default;
}

.sb-map .leaflet-container {
    width: 100%;
    height: 100%;
    font: inherit;
    background: var(--sb-color-surface-muted, var(--sb-color-surface-variant));
}

.sb-map-preview {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2, 0.5rem);
    border: 1px solid var(--sb-color-border);
    border-radius: var(--sb-radius-md, 8px);
    overflow: hidden;
    background: var(--sb-color-surface);
}

.sb-map-preview__map {
    position: relative;
}

.sb-map-preview__leaflet {
    border-radius: 0;
}

.sb-map-preview__overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    cursor: pointer;
}

.sb-map-picker {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3, 0.75rem);
}

.sb-map-picker__toolbar {
    display: flex;
    align-items: flex-start;
    gap: var(--sb-space-2, 0.5rem);
}

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

.sb-map-picker__map {
    border: 1px solid var(--sb-color-border);
}

.sb-map-picker__status {
    font-size: var(--sb-font-size-sm, 0.875rem);
    color: var(--sb-color-danger, #dc2626);
}

.sb-place-search {
    width: 100%;
}

.sb-geolocate-button {
    flex-shrink: 0;
}

/* ========== Conversation ========== */

.sb-conversation-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3, 0.75rem);
    min-height: 0;
}

.sb-conversation-timeline__loading,
.sb-conversation-timeline__empty {
    padding: var(--sb-space-4, 1rem);
    text-align: center;
    color: var(--sb-color-text-muted);
}

.sb-conversation-timeline__messages {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-3, 0.75rem);
}

.sb-conversation-timeline__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sb-conversation-timeline__thinking {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-2, 0.5rem);
}

.sb-conversation-timeline__thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.sb-conversation-timeline__thinking-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--sb-color-text-muted);
    animation: sb-conversation-thinking 1.2s ease-in-out infinite;
}

.sb-conversation-timeline__thinking-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.sb-conversation-timeline__thinking-dot:nth-child(3) {
    animation-delay: 0.3s;
}

.sb-conversation-timeline__thinking-text {
    color: var(--sb-color-text-muted);
    font-size: var(--sb-font-size-sm, 0.875rem);
}

.sb-conversation-message__bubble--thinking {
    min-inline-size: 7.5rem;
}

@keyframes sb-conversation-thinking {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-0.15rem);
    }
}

.sb-conversation-message {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-1, 0.25rem);
    max-width: min(100%, 42rem);
}

.sb-conversation-message--start {
    align-self: flex-start;
    align-items: flex-start;
}

.sb-conversation-message--end {
    align-self: flex-end;
    align-items: flex-end;
}

.sb-conversation-message__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sb-space-2, 0.5rem);
    font-size: var(--sb-font-size-xs, 0.75rem);
    color: var(--sb-color-text-muted);
}

.sb-conversation-message__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--sb-color-border-subtle, var(--sb-color-border));
    background: var(--sb-color-surface);
}

.sb-conversation-message__badge--highlight {
    border-color: var(--sb-color-warning, #f59e0b);
    color: var(--sb-color-warning, #b45309);
    background: color-mix(in srgb, var(--sb-color-warning, #f59e0b) 12%, transparent);
}

.sb-conversation-message__bubble {
    border-radius: 0.9rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--sb-color-border-subtle, var(--sb-color-border));
    background: var(--sb-color-surface);
    word-break: break-word;
}

.sb-conversation-message__bubble--end {
    background: color-mix(in srgb, var(--sb-color-primary) 10%, var(--sb-color-surface));
    border-color: color-mix(in srgb, var(--sb-color-primary) 25%, var(--sb-color-border-subtle, var(--sb-color-border)));
}

.sb-conversation-message__body {
    white-space: pre-wrap;
    line-height: 1.5;
}

.sb-conversation-message__footer,
.sb-conversation-message__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sb-space-2, 0.5rem);
    margin-top: var(--sb-space-2, 0.5rem);
}

.sb-conversation-message__attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--sb-color-surface-muted, var(--sb-color-surface-variant));
    font-size: var(--sb-font-size-xs, 0.75rem);
}

.sb-conversation-composer {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-2, 0.5rem);
}

.sb-conversation-composer__header {
    min-width: 0;
}

.sb-conversation-composer__shell {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 1px solid var(--sb-color-border-subtle, var(--sb-color-border));
    border-radius: 0.75rem;
    background: var(--sb-color-surface-muted, var(--sb-color-surface-variant));
    padding: 0.5rem 0.75rem;
}

.sb-conversation-composer__pending {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sb-conversation-composer__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--sb-color-surface);
    border: 1px solid var(--sb-color-border-subtle, var(--sb-color-border));
    font-size: var(--sb-font-size-xs, 0.75rem);
}

.sb-conversation-composer__chip-remove {
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.15rem;
    color: var(--sb-color-text-muted);
}

.sb-conversation-composer__textarea {
    width: 100%;
    border: 0;
    outline: none;
    resize: vertical;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.5;
    min-height: 2.5rem;
    max-height: 10rem;
    overflow-y: auto;
    field-sizing: content;
    padding: 0;
}

.sb-conversation-composer__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.15rem;
}

.sb-conversation-composer__actions-start,
.sb-conversation-composer__actions-end {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.sb-conversation-composer__actions-end {
    margin-inline-start: auto;
}

.sb-conversation-composer__send {
    font-weight: 700;
}

.sb-conversation-composer__footer {
    min-width: 0;
}

@media (max-width: 767px) {
    .sb-conversation-composer__actions {
        flex-wrap: wrap;
    }
}

/* =========================================================================
   SbChart — lightweight SVG charts (Line / Bar / Donut / Sparkline)
   ========================================================================= */
.sb-chart {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.sb-chart--line,
.sb-chart--bar,
.sb-chart--sparkline {
    overflow: visible;
}

.sb-chart--donut {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sb-chart__donut-svg {
    position: absolute;
    inset: 0;
    margin: auto;
}

.sb-chart--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-color-text-muted);
    border: 1px dashed var(--sb-color-border);
    border-radius: var(--sb-radius-md);
}

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

/* ============================================
   SbMarkdownEditor - Mermaid Diagram Styling
   ============================================ */

.sb-markdown-editor .sb-markdown-preview .mermaid,
.sb-markdown-editor .editor-preview .mermaid,
.sb-markdown-editor .editor-preview-side .mermaid {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    margin: var(--sb-space-3) 0;
    display: block;
}

.sb-markdown-editor .sb-markdown-preview .mermaid svg,
.sb-markdown-editor .editor-preview .mermaid svg,
.sb-markdown-editor .editor-preview-side .mermaid svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Ensure mermaid containers are responsive */
.sb-markdown-preview .mermaid,
.editor-preview .mermaid,
.editor-preview-side .mermaid {
    box-sizing: border-box;
}

/* Mermaid error styling */
.sb-markdown-mermaid-error {
    background: var(--sb-color-surface-danger, #fef2f2);
    border: 1px solid var(--sb-color-danger, #ef4444);
    border-radius: var(--sb-radius-sm);
    padding: var(--sb-space-3);
    color: var(--sb-color-danger, #ef4444);
    font-family: var(--sb-font-family-mono, ui-monospace, monospace);
    font-size: var(--sb-font-size-sm);
    overflow-x: auto;
}

/* Light theme mermaid styling */
.sb-theme-light .sb-markdown-editor .sb-markdown-preview .mermaid svg,
.sb-theme-light .sb-markdown-editor .editor-preview .mermaid svg,
.sb-theme-light .sb-markdown-editor .editor-preview-side .mermaid svg {
    fill: var(--sb-color-text, #1e293b);
}

.sb-theme-light .sb-markdown-editor .sb-markdown-preview .mermaid .node text,
.sb-theme-light .sb-markdown-editor .editor-preview .mermaid .node text,
.sb-theme-light .sb-markdown-editor .editor-preview-side .mermaid .node text {
    fill: var(--sb-color-text, #1e293b);
}

.sb-theme-light .sb-markdown-editor .sb-markdown-preview .mermaid .edge path,
.sb-theme-light .sb-markdown-editor .editor-preview .mermaid .edge path,
.sb-theme-light .sb-markdown-editor .editor-preview-side .mermaid .edge path {
    stroke: var(--sb-color-border, #e2e8f0);
}

.sb-theme-light .sb-markdown-editor .sb-markdown-preview .mermaid .edge text,
.sb-theme-light .sb-markdown-editor .editor-preview .mermaid .edge text,
.sb-theme-light .sb-markdown-editor .editor-preview-side .mermaid .edge text {
    fill: var(--sb-color-text-muted, #94a3b8);
}

/* Dark theme mermaid styling */
.sb-theme-dark .sb-markdown-editor .sb-markdown-preview .mermaid svg,
.sb-theme-dark .sb-markdown-editor .editor-preview .mermaid svg,
.sb-theme-dark .sb-markdown-editor .editor-preview-side .mermaid svg {
    fill: var(--sb-color-text, #f1f5f9);
}

.sb-theme-dark .sb-markdown-editor .sb-markdown-preview .mermaid .node text,
.sb-theme-dark .sb-markdown-editor .editor-preview .mermaid .node text,
.sb-theme-dark .sb-markdown-editor .editor-preview-side .mermaid .node text {
    fill: var(--sb-color-text, #f1f5f9);
}

.sb-theme-dark .sb-markdown-editor .sb-markdown-preview .mermaid .edge path,
.sb-theme-dark .sb-markdown-editor .editor-preview .mermaid .edge path,
.sb-theme-dark .sb-markdown-editor .editor-preview-side .mermaid .edge path {
    stroke: var(--sb-color-border, #334159);
}

.sb-theme-dark .sb-markdown-editor .sb-markdown-preview .mermaid .edge text,
.sb-theme-dark .sb-markdown-editor .editor-preview .mermaid .edge text,
.sb-theme-dark .sb-markdown-editor .editor-preview-side .mermaid .edge text {
    fill: var(--sb-color-text-muted, #94a3b8);
}