/* BeatUI Tailwind bundle: assumes Tailwind v4 preflight and base tokens via preset */
@layer base;
@layer components;

@layer base {
:root {
  --color-white: white;
  --color-black: black;
  --color-inherit: inherit;
  --color-red-50: oklch(0.971 0.013 17.38);
  --color-red-100: oklch(0.936 0.032 17.717);
  --color-red-200: oklch(0.885 0.062 18.334);
  --color-red-300: oklch(0.808 0.114 19.571);
  --color-red-400: oklch(0.704 0.191 22.216);
  --color-red-500: oklch(0.637 0.237 25.331);
  --color-red-600: oklch(0.577 0.245 27.325);
  --color-red-700: oklch(0.505 0.213 27.518);
  --color-red-800: oklch(0.444 0.177 26.899);
  --color-red-900: oklch(0.396 0.141 25.723);
  --color-red-950: oklch(0.258 0.092 26.042);
  --color-orange-50: oklch(0.98 0.016 73.684);
  --color-orange-100: oklch(0.954 0.038 75.164);
  --color-orange-200: oklch(0.901 0.076 70.697);
  --color-orange-300: oklch(0.837 0.128 66.29);
  --color-orange-400: oklch(0.75 0.183 55.934);
  --color-orange-500: oklch(0.705 0.213 47.604);
  --color-orange-600: oklch(0.646 0.222 41.116);
  --color-orange-700: oklch(0.553 0.195 38.402);
  --color-orange-800: oklch(0.47 0.157 37.304);
  --color-orange-900: oklch(0.408 0.123 38.172);
  --color-orange-950: oklch(0.266 0.079 36.259);
  --color-amber-50: oklch(0.987 0.022 95.277);
  --color-amber-100: oklch(0.962 0.059 95.617);
  --color-amber-200: oklch(0.924 0.12 95.746);
  --color-amber-300: oklch(0.879 0.169 91.605);
  --color-amber-400: oklch(0.828 0.189 84.429);
  --color-amber-500: oklch(0.769 0.188 70.08);
  --color-amber-600: oklch(0.666 0.179 58.318);
  --color-amber-700: oklch(0.555 0.163 48.998);
  --color-amber-800: oklch(0.473 0.137 46.201);
  --color-amber-900: oklch(0.414 0.112 45.904);
  --color-amber-950: oklch(0.279 0.077 45.635);
  --color-yellow-50: oklch(0.987 0.026 102.212);
  --color-yellow-100: oklch(0.973 0.071 103.193);
  --color-yellow-200: oklch(0.945 0.129 101.54);
  --color-yellow-300: oklch(0.905 0.182 98.111);
  --color-yellow-400: oklch(0.852 0.199 91.936);
  --color-yellow-500: oklch(0.795 0.184 86.047);
  --color-yellow-600: oklch(0.681 0.162 75.834);
  --color-yellow-700: oklch(0.554 0.135 66.442);
  --color-yellow-800: oklch(0.476 0.114 61.907);
  --color-yellow-900: oklch(0.421 0.095 57.708);
  --color-yellow-950: oklch(0.286 0.066 53.813);
  --color-lime-50: oklch(0.986 0.031 120.757);
  --color-lime-100: oklch(0.967 0.067 122.328);
  --color-lime-200: oklch(0.938 0.127 124.321);
  --color-lime-300: oklch(0.897 0.196 126.665);
  --color-lime-400: oklch(0.841 0.238 128.85);
  --color-lime-500: oklch(0.768 0.233 130.85);
  --color-lime-600: oklch(0.648 0.2 131.684);
  --color-lime-700: oklch(0.532 0.157 131.589);
  --color-lime-800: oklch(0.453 0.124 130.933);
  --color-lime-900: oklch(0.405 0.101 131.063);
  --color-lime-950: oklch(0.274 0.072 132.109);
  --color-green-50: oklch(0.982 0.018 155.826);
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-200: oklch(0.925 0.084 155.995);
  --color-green-300: oklch(0.871 0.15 154.449);
  --color-green-400: oklch(0.792 0.209 151.711);
  --color-green-500: oklch(0.723 0.219 149.579);
  --color-green-600: oklch(0.627 0.194 149.214);
  --color-green-700: oklch(0.527 0.154 150.069);
  --color-green-800: oklch(0.448 0.119 151.328);
  --color-green-900: oklch(0.393 0.095 152.535);
  --color-green-950: oklch(0.266 0.065 152.934);
  --color-emerald-50: oklch(0.979 0.021 166.113);
  --color-emerald-100: oklch(0.95 0.052 163.051);
  --color-emerald-200: oklch(0.905 0.093 164.15);
  --color-emerald-300: oklch(0.845 0.143 164.978);
  --color-emerald-400: oklch(0.765 0.177 163.223);
  --color-emerald-500: oklch(0.696 0.17 162.48);
  --color-emerald-600: oklch(0.596 0.145 163.225);
  --color-emerald-700: oklch(0.508 0.118 165.612);
  --color-emerald-800: oklch(0.432 0.095 166.913);
  --color-emerald-900: oklch(0.378 0.077 168.94);
  --color-emerald-950: oklch(0.262 0.051 172.552);
  --color-teal-50: oklch(0.984 0.014 180.72);
  --color-teal-100: oklch(0.953 0.051 180.801);
  --color-teal-200: oklch(0.91 0.096 180.426);
  --color-teal-300: oklch(0.855 0.138 181.071);
  --color-teal-400: oklch(0.777 0.152 181.912);
  --color-teal-500: oklch(0.704 0.14 182.503);
  --color-teal-600: oklch(0.6 0.118 184.704);
  --color-teal-700: oklch(0.511 0.096 186.391);
  --color-teal-800: oklch(0.437 0.078 188.216);
  --color-teal-900: oklch(0.386 0.063 188.416);
  --color-teal-950: oklch(0.277 0.046 192.524);
  --color-cyan-50: oklch(0.984 0.019 200.873);
  --color-cyan-100: oklch(0.956 0.045 203.388);
  --color-cyan-200: oklch(0.917 0.08 205.041);
  --color-cyan-300: oklch(0.865 0.127 207.078);
  --color-cyan-400: oklch(0.789 0.154 211.53);
  --color-cyan-500: oklch(0.715 0.143 215.221);
  --color-cyan-600: oklch(0.609 0.126 221.723);
  --color-cyan-700: oklch(0.52 0.105 223.128);
  --color-cyan-800: oklch(0.45 0.085 224.283);
  --color-cyan-900: oklch(0.398 0.07 227.392);
  --color-cyan-950: oklch(0.302 0.056 229.695);
  --color-sky-50: oklch(0.977 0.013 236.62);
  --color-sky-100: oklch(0.951 0.026 236.824);
  --color-sky-200: oklch(0.901 0.058 230.902);
  --color-sky-300: oklch(0.828 0.111 230.318);
  --color-sky-400: oklch(0.746 0.16 232.661);
  --color-sky-500: oklch(0.685 0.169 237.323);
  --color-sky-600: oklch(0.588 0.158 241.966);
  --color-sky-700: oklch(0.5 0.134 242.749);
  --color-sky-800: oklch(0.443 0.11 240.79);
  --color-sky-900: oklch(0.391 0.09 240.876);
  --color-sky-950: oklch(0.293 0.066 243.157);
  --color-blue-50: oklch(0.97 0.014 254.604);
  --color-blue-100: oklch(0.932 0.032 255.585);
  --color-blue-200: oklch(0.882 0.059 254.128);
  --color-blue-300: oklch(0.809 0.105 251.813);
  --color-blue-400: oklch(0.707 0.165 254.624);
  --color-blue-500: oklch(0.623 0.214 259.815);
  --color-blue-600: oklch(0.546 0.245 262.881);
  --color-blue-700: oklch(0.488 0.243 264.376);
  --color-blue-800: oklch(0.424 0.199 265.638);
  --color-blue-900: oklch(0.379 0.146 265.522);
  --color-blue-950: oklch(0.282 0.091 267.935);
  --color-indigo-50: oklch(0.962 0.018 272.314);
  --color-indigo-100: oklch(0.93 0.034 272.788);
  --color-indigo-200: oklch(0.87 0.065 274.039);
  --color-indigo-300: oklch(0.785 0.115 274.713);
  --color-indigo-400: oklch(0.673 0.182 276.935);
  --color-indigo-500: oklch(0.585 0.233 277.117);
  --color-indigo-600: oklch(0.511 0.262 276.966);
  --color-indigo-700: oklch(0.457 0.24 277.023);
  --color-indigo-800: oklch(0.398 0.195 277.366);
  --color-indigo-900: oklch(0.359 0.144 278.697);
  --color-indigo-950: oklch(0.257 0.09 281.288);
  --color-violet-50: oklch(0.969 0.016 293.756);
  --color-violet-100: oklch(0.943 0.029 294.588);
  --color-violet-200: oklch(0.894 0.057 293.283);
  --color-violet-300: oklch(0.811 0.111 293.571);
  --color-violet-400: oklch(0.702 0.183 293.541);
  --color-violet-500: oklch(0.606 0.25 292.717);
  --color-violet-600: oklch(0.541 0.281 293.009);
  --color-violet-700: oklch(0.491 0.27 292.581);
  --color-violet-800: oklch(0.432 0.232 292.759);
  --color-violet-900: oklch(0.38 0.189 293.745);
  --color-violet-950: oklch(0.283 0.141 291.089);
  --color-purple-50: oklch(0.977 0.014 308.299);
  --color-purple-100: oklch(0.946 0.033 307.174);
  --color-purple-200: oklch(0.902 0.063 306.703);
  --color-purple-300: oklch(0.827 0.119 306.383);
  --color-purple-400: oklch(0.714 0.203 305.504);
  --color-purple-500: oklch(0.627 0.265 303.9);
  --color-purple-600: oklch(0.558 0.288 302.321);
  --color-purple-700: oklch(0.496 0.265 301.924);
  --color-purple-800: oklch(0.438 0.218 303.724);
  --color-purple-900: oklch(0.381 0.176 304.987);
  --color-purple-950: oklch(0.291 0.149 302.717);
  --color-fuchsia-50: oklch(0.977 0.017 320.058);
  --color-fuchsia-100: oklch(0.952 0.037 318.852);
  --color-fuchsia-200: oklch(0.903 0.076 319.62);
  --color-fuchsia-300: oklch(0.833 0.145 321.434);
  --color-fuchsia-400: oklch(0.74 0.238 322.16);
  --color-fuchsia-500: oklch(0.667 0.295 322.15);
  --color-fuchsia-600: oklch(0.591 0.293 322.896);
  --color-fuchsia-700: oklch(0.518 0.253 323.949);
  --color-fuchsia-800: oklch(0.452 0.211 324.591);
  --color-fuchsia-900: oklch(0.401 0.17 325.612);
  --color-fuchsia-950: oklch(0.293 0.136 325.661);
  --color-pink-50: oklch(0.971 0.014 343.198);
  --color-pink-100: oklch(0.948 0.028 342.258);
  --color-pink-200: oklch(0.899 0.061 343.231);
  --color-pink-300: oklch(0.823 0.12 346.018);
  --color-pink-400: oklch(0.718 0.202 349.761);
  --color-pink-500: oklch(0.656 0.241 354.308);
  --color-pink-600: oklch(0.592 0.249 0.584);
  --color-pink-700: oklch(0.525 0.223 3.958);
  --color-pink-800: oklch(0.459 0.187 3.815);
  --color-pink-900: oklch(0.408 0.153 2.432);
  --color-pink-950: oklch(0.284 0.109 3.907);
  --color-rose-50: oklch(0.969 0.015 12.422);
  --color-rose-100: oklch(0.941 0.03 12.58);
  --color-rose-200: oklch(0.892 0.058 10.001);
  --color-rose-300: oklch(0.81 0.117 11.638);
  --color-rose-400: oklch(0.712 0.194 13.428);
  --color-rose-500: oklch(0.645 0.246 16.439);
  --color-rose-600: oklch(0.586 0.253 17.585);
  --color-rose-700: oklch(0.514 0.222 16.935);
  --color-rose-800: oklch(0.455 0.188 13.697);
  --color-rose-900: oklch(0.41 0.159 10.272);
  --color-rose-950: oklch(0.271 0.105 12.094);
  --color-slate-50: oklch(0.984 0.003 247.858);
  --color-slate-100: oklch(0.968 0.007 247.896);
  --color-slate-200: oklch(0.929 0.013 255.508);
  --color-slate-300: oklch(0.869 0.022 252.894);
  --color-slate-400: oklch(0.704 0.04 256.788);
  --color-slate-500: oklch(0.554 0.046 257.417);
  --color-slate-600: oklch(0.446 0.043 257.281);
  --color-slate-700: oklch(0.372 0.044 257.287);
  --color-slate-800: oklch(0.279 0.041 260.031);
  --color-slate-900: oklch(0.208 0.042 265.755);
  --color-slate-950: oklch(0.129 0.042 264.695);
  --color-gray-50: oklch(0.985 0.002 247.839);
  --color-gray-100: oklch(0.967 0.003 264.542);
  --color-gray-200: oklch(0.928 0.006 264.531);
  --color-gray-300: oklch(0.872 0.01 258.338);
  --color-gray-400: oklch(0.707 0.022 261.325);
  --color-gray-500: oklch(0.551 0.027 264.364);
  --color-gray-600: oklch(0.446 0.03 256.802);
  --color-gray-700: oklch(0.373 0.034 259.733);
  --color-gray-800: oklch(0.278 0.033 256.848);
  --color-gray-900: oklch(0.21 0.034 264.665);
  --color-gray-950: oklch(0.13 0.028 261.692);
  --color-zinc-50: oklch(0.985 0 0);
  --color-zinc-100: oklch(0.967 0.001 286.375);
  --color-zinc-200: oklch(0.92 0.004 286.32);
  --color-zinc-300: oklch(0.871 0.006 286.286);
  --color-zinc-400: oklch(0.705 0.015 286.067);
  --color-zinc-500: oklch(0.552 0.016 285.938);
  --color-zinc-600: oklch(0.442 0.017 285.786);
  --color-zinc-700: oklch(0.37 0.013 285.805);
  --color-zinc-800: oklch(0.274 0.006 286.033);
  --color-zinc-900: oklch(0.21 0.006 285.885);
  --color-zinc-950: oklch(0.141 0.005 285.823);
  --color-neutral-50: oklch(0.985 0 0);
  --color-neutral-100: oklch(0.97 0 0);
  --color-neutral-200: oklch(0.922 0 0);
  --color-neutral-300: oklch(0.87 0 0);
  --color-neutral-400: oklch(0.708 0 0);
  --color-neutral-500: oklch(0.556 0 0);
  --color-neutral-600: oklch(0.439 0 0);
  --color-neutral-700: oklch(0.371 0 0);
  --color-neutral-800: oklch(0.269 0 0);
  --color-neutral-900: oklch(0.205 0 0);
  --color-neutral-950: oklch(0.145 0 0);
  --color-stone-50: oklch(0.985 0.001 106.423);
  --color-stone-100: oklch(0.97 0.001 106.424);
  --color-stone-200: oklch(0.923 0.003 48.717);
  --color-stone-300: oklch(0.869 0.005 56.366);
  --color-stone-400: oklch(0.709 0.01 56.259);
  --color-stone-500: oklch(0.553 0.013 58.071);
  --color-stone-600: oklch(0.444 0.011 73.639);
  --color-stone-700: oklch(0.374 0.01 67.558);
  --color-stone-800: oklch(0.268 0.007 34.298);
  --color-stone-900: oklch(0.216 0.006 56.043);
  --color-stone-950: oklch(0.147 0.004 49.25);
  --spacing-none: 0;
  --spacing-px: 1px;
  --spacing-base: 0.25rem;
  --spacing-full: 2000px;
  --font-size-base: 1rem;
  --font-size-5xl-lh: 1;
  --font-size-6xl-lh: 1;
  --font-size-7xl-lh: 1;
  --font-size-8xl-lh: 1;
  --font-size-9xl-lh: 1;
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --radius-none: 0;
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-top-2xs: 0 -1px rgb(0 0 0 / 0.05);
  --shadow-top-xs: 0 -1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-top-sm: 0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-top-md: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-top-lg: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-top-xl: 0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-top-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
  --motion-duration-instant: 0s;
  --motion-duration-base: 200ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-emphasized: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-exit: cubic-bezier(0.8, 0, 0.6, 1);
  --text-shadow-none: none;
  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
  --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
  --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
  --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
  --z-index-base: 0;
  --z-index-raised: 100;
  --z-index-navigation: 200;
  --z-index-sidebar: 200;
  --z-index-overlay: 500;
  --z-index-modal: 600;
  --z-index-tooltip: 700;
  --z-index-popover: 800;
  --z-index-notification: 900;
  --z-index-maximum: 1000;
  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-default: 1.5px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  --outline-width-none: 0;
  --outline-width-default: 1px;
  --outline-width-focus: 2px;
  --overlay-width-xs: min(20rem, 90vw);
  --overlay-width-sm: min(25rem, 90vw);
  --overlay-width-md: min(37.5rem, 90vw);
  --overlay-width-lg: min(50rem, 90vw);
  --overlay-width-xl: min(62.5rem, 90vw);
  --overlay-width-min-width: 12rem;
}

*, ::before, ::after {
  --spacing-xs: calc(var(--spacing-base) / 2);
  --spacing-sm: var(--spacing-base);
  --spacing-smh: calc(var(--spacing-base) * 1.5);
  --spacing-md: calc(var(--spacing-base) * 2);
  --spacing-mdh: calc(var(--spacing-base) * 3);
  --spacing-lg: calc(var(--spacing-base) * 4);
  --spacing-lgh: calc(var(--spacing-base) * 5);
  --spacing-xl: calc(var(--spacing-base) * 6);
  --spacing-2xl: calc(var(--spacing-base) * 8);
  --spacing-2xlh: calc(var(--spacing-base) * 10);
  --spacing-3xl: calc(var(--spacing-base) * 12);
  --spacing-4xl: calc(var(--spacing-base) * 16);
  --font-size-3xs: calc(var(--font-size-base) * 0.5);
  --font-size-3xs-lh: calc(var(--font-size-base) * 0.75);
  --font-size-2xs: calc(var(--font-size-base) * 0.625);
  --font-size-2xs-lh: calc(var(--font-size-base) * 0.75);
  --font-size-xs: calc(var(--font-size-base) * 0.75);
  --font-size-xs-lh: var(--font-size-base);
  --font-size-sm: calc(var(--font-size-base) * 0.875);
  --font-size-sm-lh: calc(var(--font-size-base) * 1.25);
  --font-size-md: var(--font-size-base);
  --font-size-md-lh: calc(var(--font-size-base) * 1.5);
  --font-size-lg: calc(var(--font-size-base) * 1.125);
  --font-size-lg-lh: calc(var(--font-size-base) * 1.75);
  --font-size-xl: calc(var(--font-size-base) * 1.25);
  --font-size-xl-lh: calc(var(--font-size-base) * 1.75);
  --font-size-2xl: calc(var(--font-size-base) * 1.5);
  --font-size-2xl-lh: calc(var(--font-size-base) * 2);
  --font-size-3xl: calc(var(--font-size-base) * 1.875);
  --font-size-3xl-lh: calc(var(--font-size-base) * 2.25);
  --font-size-4xl: calc(var(--font-size-base) * 2.25);
  --font-size-4xl-lh: calc(var(--font-size-base) * 2.5);
  --font-size-5xl: calc(var(--font-size-base) * 3);
  --font-size-6xl: calc(var(--font-size-base) * 3.75);
  --font-size-7xl: calc(var(--font-size-base) * 4.5);
  --font-size-8xl: calc(var(--font-size-base) * 6);
  --font-size-9xl: calc(var(--font-size-base) * 8);
  --radius-xs: var(--spacing-xs);
  --radius-sm: var(--spacing-sm);
  --radius-md: var(--spacing-smh);
  --radius-lg: var(--spacing-md);
  --radius-xl: var(--spacing-mdh);
  --motion-duration-fast: calc(var(--motion-duration-base) * 0.6);
  --motion-duration-slow: calc(var(--motion-duration-base) * 1.6);
  --motion-duration-relaxed: calc(var(--motion-duration-base) * 2.4);
  --control-height-xs: calc(var(--spacing-base) * 7);
  --control-height-sm: calc(var(--spacing-base) * 8);
  --control-height-md: calc(var(--spacing-base) * 10);
  --control-height-lg: calc(var(--spacing-base) * 12);
  --control-height-xl: calc(var(--spacing-base) * 14);
  --control-padding-block-xs: var(--spacing-xs);
  --control-padding-block-sm: var(--spacing-sm);
  --control-padding-block-md: var(--spacing-md);
  --control-padding-block-lg: var(--spacing-mdh);
  --control-padding-block-xl: var(--spacing-lg);
  --control-padding-inline-xs: var(--spacing-md);
  --control-padding-inline-sm: var(--spacing-mdh);
  --control-padding-inline-md: var(--spacing-lg);
  --control-padding-inline-lg: var(--spacing-lgh);
  --control-padding-inline-xl: var(--spacing-xl);
  --control-gap-xs: var(--spacing-xs);
  --control-gap-sm: var(--spacing-sm);
  --control-gap-md: var(--spacing-smh);
  --control-gap-lg: var(--spacing-md);
  --control-gap-xl: var(--spacing-mdh);
}

}
@layer base {
:root {
}

*, ::before, ::after {
  --color-primary-50: var(--color-blue-50);
  --color-primary-100: var(--color-blue-100);
  --color-primary-200: var(--color-blue-200);
  --color-primary-300: var(--color-blue-300);
  --color-primary-400: var(--color-blue-400);
  --color-primary-500: var(--color-blue-500);
  --color-primary-600: var(--color-blue-600);
  --color-primary-700: var(--color-blue-700);
  --color-primary-800: var(--color-blue-800);
  --color-primary-900: var(--color-blue-900);
  --color-primary-950: var(--color-blue-950);
  --color-secondary-50: var(--color-gray-50);
  --color-secondary-100: var(--color-gray-100);
  --color-secondary-200: var(--color-gray-200);
  --color-secondary-300: var(--color-gray-300);
  --color-secondary-400: var(--color-gray-400);
  --color-secondary-500: var(--color-gray-500);
  --color-secondary-600: var(--color-gray-600);
  --color-secondary-700: var(--color-gray-700);
  --color-secondary-800: var(--color-gray-800);
  --color-secondary-900: var(--color-gray-900);
  --color-secondary-950: var(--color-gray-950);
  --color-base-50: var(--color-gray-50);
  --color-base-100: var(--color-gray-100);
  --color-base-200: var(--color-gray-200);
  --color-base-300: var(--color-gray-300);
  --color-base-400: var(--color-gray-400);
  --color-base-500: var(--color-gray-500);
  --color-base-600: var(--color-gray-600);
  --color-base-700: var(--color-gray-700);
  --color-base-800: var(--color-gray-800);
  --color-base-900: var(--color-gray-900);
  --color-base-950: var(--color-gray-950);
  --color-success-50: var(--color-green-50);
  --color-success-100: var(--color-green-100);
  --color-success-200: var(--color-green-200);
  --color-success-300: var(--color-green-300);
  --color-success-400: var(--color-green-400);
  --color-success-500: var(--color-green-500);
  --color-success-600: var(--color-green-600);
  --color-success-700: var(--color-green-700);
  --color-success-800: var(--color-green-800);
  --color-success-900: var(--color-green-900);
  --color-success-950: var(--color-green-950);
  --color-warning-50: var(--color-amber-50);
  --color-warning-100: var(--color-amber-100);
  --color-warning-200: var(--color-amber-200);
  --color-warning-300: var(--color-amber-300);
  --color-warning-400: var(--color-amber-400);
  --color-warning-500: var(--color-amber-500);
  --color-warning-600: var(--color-amber-600);
  --color-warning-700: var(--color-amber-700);
  --color-warning-800: var(--color-amber-800);
  --color-warning-900: var(--color-amber-900);
  --color-warning-950: var(--color-amber-950);
  --color-danger-50: var(--color-red-50);
  --color-danger-100: var(--color-red-100);
  --color-danger-200: var(--color-red-200);
  --color-danger-300: var(--color-red-300);
  --color-danger-400: var(--color-red-400);
  --color-danger-500: var(--color-red-500);
  --color-danger-600: var(--color-red-600);
  --color-danger-700: var(--color-red-700);
  --color-danger-800: var(--color-red-800);
  --color-danger-900: var(--color-red-900);
  --color-danger-950: var(--color-red-950);
  --color-info-50: var(--color-blue-50);
  --color-info-100: var(--color-blue-100);
  --color-info-200: var(--color-blue-200);
  --color-info-300: var(--color-blue-300);
  --color-info-400: var(--color-blue-400);
  --color-info-500: var(--color-blue-500);
  --color-info-600: var(--color-blue-600);
  --color-info-700: var(--color-blue-700);
  --color-info-800: var(--color-blue-800);
  --color-info-900: var(--color-blue-900);
  --color-info-950: var(--color-blue-950);
  --bg-background-light: var(--color-base-50);
  --bg-surface-light: var(--color-base-100);
  --bg-subtle-light: var(--color-base-200);
  --bg-elevated-light: var(--color-base-300);
  --bg-raised-light: var(--color-base-400);
  --bg-overlay-light: var(--color-base-500);
  --bg-background-dark: var(--color-base-950);
  --bg-surface-dark: var(--color-base-900);
  --bg-subtle-dark: var(--color-base-800);
  --bg-elevated-dark: var(--color-base-700);
  --bg-raised-dark: var(--color-base-600);
  --bg-overlay-dark: var(--color-base-500);
  --text-normal-light: var(--color-base-900);
  --text-muted-light: var(--color-base-500);
  --text-inverted-light: var(--color-base-100);
  --text-normal-dark: var(--color-base-100);
  --text-muted-dark: var(--color-base-400);
  --text-inverted-dark: var(--color-base-900);
  --border-subtle-light: var(--color-base-100);
  --border-muted-light: var(--color-base-200);
  --border-border-light: var(--color-base-200);
  --border-divider-light: var(--color-base-300);
  --border-input-light: var(--color-base-300);
  --border-strong-light: var(--color-base-400);
  --border-inverted-light: var(--color-base-100);
  --border-subtle-dark: var(--color-base-800);
  --border-muted-dark: var(--color-base-700);
  --border-border-dark: var(--color-base-700);
  --border-divider-dark: var(--color-base-600);
  --border-input-dark: var(--color-base-600);
  --border-strong-dark: var(--color-base-500);
  --border-inverted-dark: var(--color-base-900);
  --interactive-focus-light: var(--color-primary-700);
  --interactive-hover-light: var(--color-base-100);
  --interactive-active-light: var(--color-base-200);
  --interactive-focus-dark: var(--color-primary-300);
  --interactive-hover-dark: var(--color-base-800);
  --interactive-active-dark: var(--color-base-700);
  --font-body: var(--font-family-sans);
  --font-heading: var(--font-family-sans);
  --font-display: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
  --font-ui: var(--font-family-sans);
  --font-prose: var(--font-family-serif);
  --font-family-default: var(--font-body);
  --font-family-default-heading: var(--font-heading);
  --font-family-default-display: var(--font-display);
  --font-family-default-ui: var(--font-ui);
  --font-family-default-prose: var(--font-prose);
  --font-family-default-mono: var(--font-mono);
  --radius-control: var(--radius-md);
  --radius-control-sm: var(--radius-sm);
  --radius-control-xs: var(--radius-xs);
  --radius-button: var(--radius-md);
  --radius-surface: var(--radius-lg);
  --radius-overlay: var(--radius-lg);
  --radius-popover: var(--radius-md);
  --radius-pill: var(--radius-full);
  --radius-focus: var(--radius-sm);
  --shadow-surface: var(--shadow-sm);
  --shadow-surface-elevated: var(--shadow-md);
  --shadow-popover: var(--shadow-lg);
  --shadow-overlay: var(--shadow-xl);
  --shadow-button: var(--shadow-xs);
  --motion-transition-fast: var(--motion-duration-fast);
  --motion-transition-medium: var(--motion-duration-base);
  --motion-transition-slow: var(--motion-duration-slow);
  --motion-transition-overlay: var(--motion-duration-relaxed);
  --motion-transition-emphasis: var(--motion-duration-fast);
  --motion-easing-emphasis: var(--motion-easing-emphasized);
  --spacing-stack-2xs: var(--spacing-xs);
  --spacing-stack-xs: var(--spacing-sm);
  --spacing-stack-sm: var(--spacing-md);
  --spacing-stack-md: var(--spacing-mdh);
  --spacing-stack-lg: var(--spacing-lg);
  --spacing-stack-xl: var(--spacing-xl);
  --text-shadow-button-filled: var(--text-shadow-sm);
  --text-shadow-button-light: var(--text-shadow-xs);
  --text-shadow-button-default: var(--text-shadow-2xs);
}

}
@layer base {
/* Tailwind-specific reset additions for BeatUI components.
 * This file stays lean to avoid duplicating Tailwind's preflight.
 * Populate with BeatUI-only overrides as they are identified.
 */

}
@layer base {
/* Default (light) semantic tokens at :root so components work without .dark/.light class */
:root {
  --text-normal: var(--text-normal-light);
  --text-muted: var(--text-muted-light);
  --text-inverted: var(--text-inverted-light);
  --bg-background: var(--bg-background-light);
  --bg-surface: var(--bg-surface-light);
  --bg-subtle: var(--bg-subtle-light);
  --bg-elevated: var(--bg-elevated-light);
  --bg-raised: var(--bg-raised-light);
  --bg-overlay: var(--bg-overlay-light);
  --border-subtle: var(--border-subtle-light);
  --border-muted: var(--border-muted-light);
  --border-default: var(--border-border-light);
  --border-divider: var(--border-divider-light);
  --border-input: var(--border-input-light);
  --border-strong: var(--border-strong-light);
  --border-inverted: var(--border-inverted-light);
  --interactive-focus: var(--interactive-focus-light);
  --interactive-hover: var(--interactive-hover-light);
  --interactive-active: var(--interactive-active-light);
}

/* BeatUI theme helpers */
.dark {
  color-scheme: dark;
  --text-normal: var(--text-normal-dark);
  --text-muted: var(--text-muted-dark);
  --text-inverted: var(--text-inverted-dark);
  --bg-background: var(--bg-background-dark);
  --bg-surface: var(--bg-surface-dark);
  --bg-subtle: var(--bg-subtle-dark);
  --bg-elevated: var(--bg-elevated-dark);
  --bg-raised: var(--bg-raised-dark);
  --bg-overlay: var(--bg-overlay-dark);
  --border-subtle: var(--border-subtle-dark);
  --border-muted: var(--border-muted-dark);
  --border-default: var(--border-border-dark);
  --border-divider: var(--border-divider-dark);
  --border-input: var(--border-input-dark);
  --border-strong: var(--border-strong-dark);
  --border-inverted: var(--border-inverted-dark);
  --interactive-focus: var(--interactive-focus-dark);
  --interactive-hover: var(--interactive-hover-dark);
  --interactive-active: var(--interactive-active-dark);
  color: var(--text-normal);
  background-color: var(--bg-background);
}

.light {
  color-scheme: light;
  --text-normal: var(--text-normal-light);
  --text-muted: var(--text-muted-light);
  --text-inverted: var(--text-inverted-light);
  --bg-background: var(--bg-background-light);
  --bg-surface: var(--bg-surface-light);
  --bg-subtle: var(--bg-subtle-light);
  --bg-elevated: var(--bg-elevated-light);
  --bg-raised: var(--bg-raised-light);
  --bg-overlay: var(--bg-overlay-light);
  --border-subtle: var(--border-subtle-light);
  --border-muted: var(--border-muted-light);
  --border-default: var(--border-border-light);
  --border-divider: var(--border-divider-light);
  --border-input: var(--border-input-light);
  --border-strong: var(--border-strong-light);
  --border-inverted: var(--border-inverted-light);
  --interactive-focus: var(--interactive-focus-light);
  --interactive-hover: var(--interactive-hover-light);
  --interactive-active: var(--interactive-active-light);
  color: var(--text-normal);
  background-color: var(--bg-background);
}

.dark *:focus-visible {
  outline-color: var(--interactive-focus);
}

.light *:focus-visible {
  outline-color: var(--interactive-focus);
}

.b-ltr {
  direction: ltr;
  text-align: start;
}

.b-rtl {
  direction: rtl;
  text-align: start;
}

.b-ltr *:focus-visible,
.b-rtl *:focus-visible {
  outline-offset: 2px;
}

.b-rtl input,
.b-rtl textarea,
.b-rtl select {
  text-align: start;
}

.b-rtl input[type='number'] {
  text-align: end;
}

.b-rtl table {
  text-align: start;
}

.b-rtl th,
.b-rtl td {
  text-align: start;
}

.b-rtl blockquote,
.b-ltr blockquote {
  border-inline-start: calc(2 * var(--border-width-medium)) solid
    var(--color-base-300);
  border-inline-end: none;
  padding-inline-start: 1rem;
  padding-inline-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

}
@layer base {
/* Consistent Focus Styles for All Focusable Components */

/* Base focus style for all focusable elements */
*:focus-visible {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-focus, var(--radius-sm));
}

/* Dark mode focus styles */
.dark *:focus-visible {
  outline-color: var(--interactive-focus-dark);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline-width: 2px;
    outline-offset: 1px;
  }
}

/* Focus styles for specific component types */

/* Button-like elements */
button:focus-visible,
[role='button']:focus-visible,
.bc-button:focus-visible {
  outline-offset: -2px;
}

/* Input-like elements */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible,
.bc-input:focus-visible {
  outline: none;
}

/* Link elements */
a:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-focus, var(--radius-xs));
}

/* Custom component focus styles */
.bc-switch:focus-visible {
  outline: none; /* Remove outline from container */
}

.bc-switch:focus-visible .bc-switch__track {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: -2px;
  border-radius: var(--radius-pill, var(--radius-full));
}

.dark .bc-switch:focus-visible .bc-switch__track {
  outline-color: var(--interactive-focus-dark);
}

/* Focus styles for checkbox and radio are handled by the individual components */
.bc-checkbox-input__checkbox:focus-visible,
.bc-radio-input__radio:focus-visible {
  outline: 2px solid var(--interactive-focus-light);
  outline-offset: 2px;
  border-radius: var(--radius-focus, var(--radius-sm));
}

.dark .bc-checkbox-input__checkbox:focus-visible,
.dark .bc-radio-input__radio:focus-visible {
  outline-color: var(--interactive-focus-dark);
}

/* Modal and overlay focus management */
.bc-modal:focus-visible,
.bc-popover:focus-visible,
.bc-tooltip:focus-visible {
  outline: none; /* These should manage focus internally */
}

/* Focus trap containers should not show focus outline */
[data-focus-trap]:focus-visible {
  outline: none;
}

/* Ensure focus is visible on keyboard navigation */
.js-focus-visible *:focus:not(.focus-visible) {
  outline: none;
}

/* Smooth focus transition when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  *:focus-visible {
    transition:
      outline-color 0.15s ease-in-out,
      outline-offset 0.15s ease-in-out;
  }
}

}
@layer base {
/* Accessibility helpers */
.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;
}

/* Spinners rely on Tailwind's `animate-spin` utility; a standalone fallback
   lives in the standalone bundle's utility layer. */

}
@layer components {
@layer components {
  .bc-action-card {
    /* Default CSS variables - can be overridden by inline styles or hover states */
    --action-card-bg: var(--bg-background);
    --action-card-border: var(--border-divider);
    --action-card-title-color: var(--text-normal);
    --action-card-description-color: var(--text-muted);

    /* Layout */
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);

    /* Spacing */
    padding: var(--spacing-md);

    /* Border */
    border: var(--border-width-medium) solid var(--action-card-border);
    border-radius: var(--radius-lg);

    /* Background */
    background-color: var(--action-card-bg);

    /* Transitions */
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  /* Icon container */
  .bc-action-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Content container */
  .bc-action-card__content {
    flex: 1;
    min-width: 0; /* Allow text truncation */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  /* Title — fixed font size across all sizes */
  .bc-action-card__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--action-card-title-color);
    line-height: var(--line-height-tight);
  }

  /* Description — fixed font size across all sizes */
  .bc-action-card__description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--action-card-description-color);
    line-height: var(--line-height-normal);
  }

  /* Clickable state */
  .bc-action-card--clickable {
    cursor: pointer;
    user-select: none;
  }

  .bc-action-card--clickable:hover {
    --action-card-bg: var(--bg-surface);
    box-shadow: var(--shadow-md);
  }

  .bc-action-card--clickable:active {
    transform: translateY(1px);
  }

  /* Active state */
  .bc-action-card--active {
    --action-card-border: var(--color-primary-500);
    box-shadow: var(--shadow-sm);
  }

  .bc-action-card--active:hover {
    --action-card-border: var(--color-primary-600);
  }

  .dark .bc-action-card--active {
    --action-card-border: var(--color-primary-400);
  }

  .dark .bc-action-card--active:hover {
    --action-card-border: var(--color-primary-300);
  }

  /* Disabled state */
  .bc-action-card--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Size variants — padding and gap only */
  .bc-action-card--xs {
    padding: var(--spacing-xs);
    gap: var(--spacing-xs);
  }

  .bc-action-card--sm {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .bc-action-card--lg {
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
  }

  .bc-action-card--xl {
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
  }

  /* Focus styles for accessibility */
  .bc-action-card--clickable:focus-visible {
    outline: var(--outline-width-focus) solid var(--color-primary-500);
    outline-offset: 2px;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .bc-action-card {
      transition: none;
    }

    .bc-action-card--clickable:active {
      transform: none;
    }
  }
}

/* Animated Toggle Component - Composable Animation System */
.bc-animated-toggle {
  --animation-duration: 1s;
  --animation-easing: cubic-bezier(0.2, 0, 0, 1);
  --scale-factor: 0.95;
  --transform-origin: center;
  --slide-distance: var(--spacing-xl);

  transition-property: opacity, transform;
  transition-duration: var(--animation-duration);
  transition-timing-function: var(--animation-easing);
  transform-origin: var(--transform-origin);
}

/* Status: closed - element is hidden */
.bc-animated-toggle--closed {
  display: none;
}

/* Status: start-opening - element becomes visible but hasn't started animating */
.bc-animated-toggle--start-opening {
  display: initial;
}

/* Animation: NONE - no animation, just show/hide */
.bc-animated-toggle--none {
  transition-property: none;
  transition-duration: 0s;
}

/* Animation: FADE */
.bc-animated-toggle--fade.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--start-opening {
  opacity: 0;
}

.bc-animated-toggle--fade.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--start-closing {
  opacity: 1;
}

/* Animation: SLIDE - individual directions */
.bc-animated-toggle--slide-right.bc-animated-toggle--closing,
.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
  transform: translateX(calc(-1 * var(--slide-distance)));
}

.bc-animated-toggle--slide-right.bc-animated-toggle--opening,
.bc-animated-toggle--slide-right.bc-animated-toggle--opened,
.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
  transform: translateX(0);
}

.bc-animated-toggle--slide-left.bc-animated-toggle--closing,
.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
  transform: translateX(var(--slide-distance));
}

.bc-animated-toggle--slide-left.bc-animated-toggle--opening,
.bc-animated-toggle--slide-left.bc-animated-toggle--opened,
.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
  transform: translateX(0);
}

.bc-animated-toggle--slide-up.bc-animated-toggle--closing,
.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
  transform: translateY(var(--slide-distance));
}

.bc-animated-toggle--slide-up.bc-animated-toggle--opening,
.bc-animated-toggle--slide-up.bc-animated-toggle--opened,
.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
  transform: translateY(0);
}

.bc-animated-toggle--slide-down.bc-animated-toggle--closing,
.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
  transform: translateY(calc(-1 * var(--slide-distance)));
}

.bc-animated-toggle--slide-down.bc-animated-toggle--opening,
.bc-animated-toggle--slide-down.bc-animated-toggle--opened,
.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
  transform: translateY(0);
}

/* Animation: SCALE */
.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: scale(var(--scale-factor));
}

.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: scale(1);
}

/* Composable animations: fade + slide combinations */
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance)));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateX(0);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateX(var(--slide-distance));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateX(0);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateY(var(--slide-distance));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateY(0);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateY(calc(-1 * var(--slide-distance)));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateY(0);
}

/* Composable animations: fade + scale */
.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: scale(1);
}

/* Composable animations: slide + scale combinations */
.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: translateX(calc(-1 * var(--slide-distance)))
    scale(var(--scale-factor));
}

.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: translateX(0) scale(1);
}

.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: translateX(var(--slide-distance)) scale(var(--scale-factor));
}

.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: translateX(0) scale(1);
}

.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: translateY(var(--slide-distance)) scale(var(--scale-factor));
}

.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: translateY(0) scale(1);
}

.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  transform: translateY(calc(-1 * var(--slide-distance)))
    scale(var(--scale-factor));
}

.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  transform: translateY(0) scale(1);
}

/* Composable animations: fade + slide + scale (all three) */
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateX(calc(-1 * var(--slide-distance)))
    scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-right.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateX(var(--slide-distance)) scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-left.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateY(var(--slide-distance)) scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-up.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--closing,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-opening {
  opacity: 0;
  transform: translateY(calc(-1 * var(--slide-distance)))
    scale(var(--scale-factor));
}

.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opening,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--opened,
.bc-animated-toggle--fade.bc-animated-toggle--slide-down.bc-animated-toggle--scale.bc-animated-toggle--start-closing {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-animated-toggle {
    transition: none;
  }
}

/* Auth Container Component */
.bc-auth-container--styled {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--spacing-2xl);
  --auth-container-bg: var(--bg-background);
  background-color: var(--auth-container-bg);
  border-radius: var(--radius-surface, var(--radius-lg));
  box-shadow: var(--shadow-surface, var(--shadow-md));
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Dark mode */
.dark .bc-auth-container--styled {
  background-color: var(--bg-surface);
}

/* Mode-specific styling */
.bc-auth-container--signin {
  /* Specific styling for sign in mode if needed */
}

.bc-auth-container--signup {
  /* Specific styling for sign up mode if needed */
}

.bc-auth-container--reset-password {
  /* Specific styling for reset password mode if needed */
}

/* Responsive design */
@media (width < 40rem) {
  .bc-auth-container--styled {
    max-width: none;
    margin: 0;
    padding: var(--spacing-lg);
    border-radius: 0;
    box-shadow: var(--shadow-none, none);
    min-height: 100vh;
    justify-content: center;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-auth-container--styled {
    border: var(--border-width-medium) solid var(--border-default);
  }

  .dark .bc-auth-container--styled {
    border-color: var(--border-default);
  }
}

/* Auth Divider Component */
.bc-auth-divider {
  display: flex;
  align-items: center;
  margin: var(--spacing-md) 0;
}

.bc-auth-divider__line {
  flex: 1;
  height: 1px;
  background-color: var(--border-divider);
}

.bc-auth-divider__text {
  font-size: var(--font-size-sm);
  color: var(--color-black);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--spacing-sm);
  background-color: var(--border-divider);
  border-radius: var(--radius-full);
}

.dark .bc-auth-divider__text {
  color: var(--color-white);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-auth-divider__line {
    height: 2px;
  }
}

/* Auth Form Component */
.bc-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xl, var(--spacing-xl));
  width: 100%;
}

/* Form title */
.bc-auth-form__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  color: var(--text-normal);
  margin: 0 0 var(--spacing-md) 0;
}

/* Form description */
.bc-auth-form__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 var(--spacing-lg) 0;
  line-height: var(--line-height-relaxed);
}

/* Social login section */
.bc-auth-form__social {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md, var(--spacing-mdh));
}

/* Form fields */
.bc-auth-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xl, var(--spacing-xl));
}

.bc-auth-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-lg, var(--spacing-lg));
}

/* Remember me checkbox */
.bc-auth-form__remember-me {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
}

.bc-auth-form__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
  font-size: var(--font-size-sm);
  color: var(--text-normal);
  cursor: pointer;
  user-select: none;
}

/* Terms acceptance */
.bc-auth-form__terms {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xs, var(--spacing-xs));
}

/* Field error */
.bc-auth-form__field-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger-600);
  margin-top: var(--spacing-xs);
}

.dark .bc-auth-form__field-error {
  color: var(--color-danger-400);
}

/* Submit button */
.bc-auth-form__submit {
  width: 100%;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
}

/* Footer links */
.bc-auth-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
  align-items: center;
  text-align: center;
}

.bc-auth-form__link {
  background: none;
  border: none;
  color: var(--color-primary-600);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-auth-form__link:hover {
  color: var(--color-primary-700);
  background-color: var(--color-primary-50);
}

.bc-auth-form__link:focus-visible {
  outline: var(--outline-width-focus) solid var(--interactive-focus);
  outline-offset: 2px;
}

.dark .bc-auth-form__link {
  color: var(--color-primary-400);
}

.dark .bc-auth-form__link:hover {
  color: var(--color-primary-300);
  background-color: var(--color-primary-950);
}

/* Responsive adjustments */
@media (width < 40rem) {
  .bc-auth-form {
    gap: var(--spacing-stack-lg, var(--spacing-lg));
  }

  .bc-auth-form__title {
    font-size: var(--font-size-xl);
  }

  .bc-auth-form__fields {
    gap: var(--spacing-stack-md, var(--spacing-mdh));
  }
}

@media (prefers-contrast: high) {
  /* High contrast mode support */
  .bc-auth-form__link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-auth-form__link {
    transition: none;
  }
}

.bc-social-login-buttons.bc-stack {
  gap: var(--spacing-stack-sm, var(--spacing-md));
  padding-inline: var(--spacing-2xl);
  width: 100%;
}

.bc-social-login-button {
  width: 100%;
}

.bc-social-login-button__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

.bc-social-login-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  padding: var(--spacing-sm);
}

.dark .bc-social-login-button__icon {
  background-color: var(--bg-elevated);
}

.bc-social-login-button__icon-inner {
  color: var(--color-base-900);
}

.dark .bc-social-login-button__icon-inner {
  color: var(--text-normal);
}

.bc-social-login-button__label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: var(--spacing-lg);
}

/* Provider-specific icon backgrounds and colors */

/* Google - colorful logo needs white background */
.bc-social-login-button--google .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* GitHub - black icon needs contrasting background */
.bc-social-login-button--github .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Apple - black icon needs contrasting background */
.bc-social-login-button--apple .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* X (Twitter rebrand) - black icon needs contrasting background */
.bc-social-login-button--x .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Microsoft - colorful logo needs white background */
.bc-social-login-button--microsoft .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Steam - dark icon needs contrasting background */
.bc-social-login-button--steam .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Epic Games - simple-icons, dark icon on white background */
.bc-social-login-button--epic .bc-social-login-button__icon {
  background-color: var(--color-white);
}
.bc-social-login-button--epic .bc-social-login-button__icon-inner {
  color: var(--color-black);
}

/* PlayStation - simple-icons, blue icon on white background */
.bc-social-login-button--playstation .bc-social-login-button__icon {
  background-color: var(--color-white);
}
.bc-social-login-button--playstation .bc-social-login-button__icon-inner {
  color: #003791;
}

/* Xbox - simple-icons, green icon on white background */
.bc-social-login-button--xbox .bc-social-login-button__icon {
  background-color: var(--color-white);
}
.bc-social-login-button--xbox .bc-social-login-button__icon-inner {
  color: #107c10;
}

/* TikTok - has dark elements that need contrasting background */
.bc-social-login-button--tiktok .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Snapchat - simple-icons, yellow icon on black background */
.bc-social-login-button--snapchat .bc-social-login-button__icon {
  background-color: var(--color-black);
}
.bc-social-login-button--snapchat .bc-social-login-button__icon-inner {
  color: #fffc00;
}

/* Amazon - simple-icons, orange icon on white background */
.bc-social-login-button--amazon .bc-social-login-button__icon {
  background-color: var(--color-white);
}
.bc-social-login-button--amazon .bc-social-login-button__icon-inner {
  color: #ff9900;
}

/* WeChat - simple-icons, green icon on white background */
.bc-social-login-button--wechat .bc-social-login-button__icon {
  background-color: var(--color-white);
}
.bc-social-login-button--wechat .bc-social-login-button__icon-inner {
  color: #07c160;
}

/* Yahoo - purple icon needs white background for visibility */
.bc-social-login-button--yahoo .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* PayPal - blue icon needs white background */
.bc-social-login-button--paypal .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Facebook - blue logo needs white background */
.bc-social-login-button--facebook .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Twitter - blue bird needs white background */
.bc-social-login-button--twitter .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Discord - purple icon works on white background */
.bc-social-login-button--discord .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* LinkedIn - blue icon needs white background */
.bc-social-login-button--linkedin .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Instagram - gradient icon needs white background */
.bc-social-login-button--instagram .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Reddit - orange icon needs white background */
.bc-social-login-button--reddit .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Pinterest - red icon needs white background */
.bc-social-login-button--pinterest .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Twitch - purple icon needs white background */
.bc-social-login-button--twitch .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* WhatsApp - green icon needs white background */
.bc-social-login-button--whatsapp .bc-social-login-button__icon {
  background-color: var(--color-white);
}

/* Two-Factor Authentication Component */
.bc-two-factor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xl, var(--spacing-xl));
  width: 100%;
}

.bc-two-factor__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xl, var(--spacing-xl));
}

/* Method selector */
.bc-two-factor__methods {
  display: flex;
  gap: var(--spacing-sm);
  border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
  padding-bottom: var(--spacing-sm);
}

.dark .bc-two-factor__methods {
  border-bottom-color: var(--color-neutral-700);
}

.bc-two-factor__method-button {
  background: none;
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-two-factor__method-button:hover {
  color: var(--text-normal);
  background-color: var(--color-neutral-100);
}

.bc-two-factor__method-button--active {
  color: var(--color-primary-600);
  font-weight: var(--font-weight-semibold);
  border-bottom: var(--border-width-medium) solid var(--color-primary-600);
}

.dark .bc-two-factor__method-button:hover {
  color: var(--text-normal);
  background-color: var(--color-neutral-800);
}

.dark .bc-two-factor__method-button--active {
  color: var(--color-primary-400);
  border-bottom-color: var(--color-primary-400);
}

/* TOTP URI display */
.bc-two-factor__totp-uri {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: center;
}

.bc-two-factor__code-display {
  display: block;
  padding: var(--spacing-md);
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  word-break: break-all;
  text-align: center;
}

.dark .bc-two-factor__code-display {
  background-color: var(--color-neutral-800);
}

/* Backup codes */
.bc-two-factor__backup-codes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bc-two-factor__backup-codes ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-two-factor__backup-codes li {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-align: center;
}

.dark .bc-two-factor__backup-codes li {
  background-color: var(--color-neutral-800);
}

/* Complete state */
.bc-two-factor__complete {
  text-align: center;
}

/* Code input */
.bc-two-factor__code-input {
  text-align: center;
  letter-spacing: 0.5em;
  font-size: var(--font-size-xl);
  font-family: var(--font-mono);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-two-factor__method-button {
    transition: none;
  }
}

/* Passkey Components */

/* Passkey management */
.bc-passkey-management {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
}

/* Passkey list */
.bc-passkey-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bc-passkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-neutral-50);
  border-radius: var(--radius-md);
  border: var(--border-width-thin) solid var(--color-neutral-200);
}

.dark .bc-passkey-item {
  background-color: var(--color-neutral-900);
  border-color: var(--color-neutral-700);
}

.bc-passkey-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
  min-width: 0;
}

.bc-passkey-item__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-passkey-item__date {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.bc-passkey-item__edit {
  flex: 1;
  min-width: 0;
}

.bc-passkey-item__actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

/* Add passkey */
.bc-passkey-add {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Sign-in button */
.bc-passkey-signin {
  width: 100%;
  justify-content: center;
}

/* Avatar Component */
.bc-avatar {
  --avatar-bg: var(--color-base-500);
  --avatar-bg-dark: var(--color-base-600);
  --avatar-text: var(--color-white);
  --avatar-text-dark: var(--color-black);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--avatar-bg);
  color: var(--avatar-text);
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  user-select: none;
  vertical-align: middle;
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
}

/* Image inside avatar - cover entire area */
.bc-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Initials text */
.bc-avatar__initials {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-none);
  text-align: center;
  text-transform: uppercase;
}

/* Icon container */
.bc-avatar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Size variants */
.bc-avatar--size-xs {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  font-size: var(--font-size-xs);
}

.bc-avatar--size-sm {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  font-size: var(--font-size-sm);
}

.bc-avatar--size-md {
  width: var(--spacing-2xlh);
  height: var(--spacing-2xlh);
  font-size: var(--font-size-md);
}

.bc-avatar--size-lg {
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  font-size: var(--font-size-lg);
}

.bc-avatar--size-xl {
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  font-size: var(--font-size-xl);
}

.bc-avatar--size-2xl {
  width: calc(var(--spacing-base) * 24);
  height: calc(var(--spacing-base) * 24);
  font-size: var(--font-size-2xl);
}

/* Shape variants */
.bc-avatar--circle {
  border-radius: 50%;
}

.bc-avatar--square {
  border-radius: var(--radius-sm);
}

/* Bordered variant */
.bc-avatar--bordered {
  border: var(--border-width-medium) solid
    var(--avatar-border-color, var(--color-white));
}

/* Avatar Group */
.bc-avatar-group {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
}

/* Group size cascades to child avatars */
.bc-avatar-group--size-xs > .bc-avatar {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  font-size: var(--font-size-xs);
}

.bc-avatar-group--size-sm > .bc-avatar {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  font-size: var(--font-size-sm);
}

.bc-avatar-group--size-md > .bc-avatar {
  width: var(--spacing-2xlh);
  height: var(--spacing-2xlh);
  font-size: var(--font-size-md);
}

.bc-avatar-group--size-lg > .bc-avatar {
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  font-size: var(--font-size-lg);
}

.bc-avatar-group--size-xl > .bc-avatar {
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  font-size: var(--font-size-xl);
}

.bc-avatar-group--size-2xl > .bc-avatar {
  width: calc(var(--spacing-base) * 24);
  height: calc(var(--spacing-base) * 24);
  font-size: var(--font-size-2xl);
}

/* Tight spacing - avatars overlap */
.bc-avatar-group--spacing-tight {
  gap: 0;
}

.bc-avatar-group--spacing-tight > .bc-avatar + .bc-avatar,
.bc-avatar-group--spacing-tight > .bc-avatar + .bc-avatar-group__overflow {
  margin-left: calc(var(--spacing-base) * -2);
}

/* Add border to overlapping avatars for better separation */
.bc-avatar-group--spacing-tight > .bc-avatar,
.bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
  border: var(--border-width-medium) solid var(--color-white);
}

/* Normal spacing - standard gap */
.bc-avatar-group--spacing-normal {
  gap: var(--spacing-sm);
}

/* Overflow indicator */
.bc-avatar-group__overflow {
  cursor: default;
}

/* Dark mode styles */
.dark .bc-avatar {
  background-color: var(--avatar-bg-dark);
  color: var(--avatar-text-dark);
}

.dark .bc-avatar--bordered {
  border-color: var(
    --avatar-border-color-dark,
    var(--bg-background-dark, var(--color-base-950))
  );
}

.dark .bc-avatar-group--spacing-tight > .bc-avatar,
.dark .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
  border-color: var(--bg-background-dark, var(--color-base-950));
}

/* Accessibility adjustments */
@media (prefers-contrast: high) {
  .bc-avatar--bordered {
    border-width: var(--border-width-thick);
  }

  .bc-avatar-group--spacing-tight > .bc-avatar,
  .bc-avatar-group--spacing-tight > .bc-avatar-group__overflow {
    border-width: var(--border-width-thick);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-avatar {
    transition: none;
  }
}

/* Badge Component */
.bc-badge {
  --badge-bg: transparent;
  --badge-bg-dark: transparent;
  --badge-bg-hover: var(--badge-bg);
  --badge-bg-hover-dark: var(--badge-bg-dark);
  --badge-text: inherit;
  --badge-text-dark: inherit;
  --badge-text-hover: var(--badge-text);
  --badge-text-hover-dark: var(--badge-text-dark);
  --badge-border: transparent;
  --badge-border-dark: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--badge-gap, var(--control-gap-md));
  border: var(--border-width-default) solid var(--badge-border);
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-size: inherit;
  line-height: var(--line-height-none);
  border-radius: var(--radius-badge, var(--radius-control, var(--radius-md)));
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
  background-color: var(--badge-bg);
  color: var(--badge-text);
  white-space: nowrap;
}

.bc-badge__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--badge-gap, var(--control-gap-md));
}

/* Size variants */
.bc-badge--size-xs {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  --badge-gap: calc(var(--spacing-base) * 0.25);
}

.bc-badge--size-sm {
  font-size: var(--font-size-sm);
  padding: calc(var(--spacing-base) * 0.75) var(--spacing-smh);
  --badge-gap: var(--spacing-xs);
}

.bc-badge--size-md {
  font-size: var(--font-size-md);
  padding: var(--spacing-sm) var(--spacing-md);
  --badge-gap: calc(var(--spacing-base) * 0.75);
}

.bc-badge--size-lg {
  font-size: var(--font-size-lg);
  padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 2.5);
  --badge-gap: var(--spacing-sm);
}

.bc-badge--size-xl {
  font-size: var(--font-size-xl);
  padding: var(--spacing-smh) var(--spacing-mdh);
  --badge-gap: calc(var(--spacing-base) * 1.25);
}

/* Circle variant - makes badge circular with equal width/height */
.bc-badge--circle {
  padding-left: 0;
  padding-right: 0;
  aspect-ratio: 1;
  border-radius: 50%;
}

.bc-badge--circle.bc-badge--size-xs {
  min-width: calc(
    var(--font-size-xs) + var(--spacing-base) * 1 + var(--border-width-thick)
  );
}

.bc-badge--circle.bc-badge--size-sm {
  min-width: calc(
    var(--font-size-sm) + var(--spacing-base) * 1.5 + var(--border-width-thick)
  );
}

.bc-badge--circle.bc-badge--size-md {
  min-width: calc(
    var(--font-size-md) + var(--spacing-base) * 2 + var(--border-width-thick)
  );
}

.bc-badge--circle.bc-badge--size-lg {
  min-width: calc(
    var(--font-size-lg) * 1.2 + var(--spacing-base) * 2.5 +
      var(--border-width-thick)
  );
}

.bc-badge--circle.bc-badge--size-xl {
  min-width: calc(
    var(--font-size-xl) * 1.2 + var(--spacing-base) * 3 +
      var(--border-width-thick)
  );
}

/* Full width variant */
.bc-badge--full-width {
  display: flex;
  width: 100%;
}

/* Close button — lightweight inline × */
.bc-badge__close {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  line-height: var(--line-height-none);
  opacity: 0.5;
  transition: opacity var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-badge__close:hover {
  opacity: 1;
}

/* Disabled state */
.bc-badge.bc-badge--disabled {
  opacity: 0.55;
  filter: grayscale(0.4) saturate(0.8);
  cursor: default;
}

.bc-badge.bc-badge--disabled .bc-badge__close {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

.bc-badge.bc-badge--disabled .bc-badge__close:hover {
  color: inherit;
  border-color: transparent;
}

/* Dark mode styles */
.dark .bc-badge {
  background-color: var(--badge-bg-dark);
  color: var(--badge-text-dark);
  border-color: var(--badge-border-dark);
}

.dark .bc-badge:hover {
  background-color: var(--badge-bg-hover-dark);
  color: var(--badge-text-hover-dark);
}

.dark .bc-badge__close {
  color: var(--badge-text-dark);
}

/* Accessibility adjustments */
@media (prefers-contrast: high) {
  .bc-badge {
    border-width: var(--border-width-medium);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-badge {
    transition: none;
  }
}

/* Block Command Palette */
.bc-block-command-palette {
  width: 280px;
  background: var(--color-white);
  border: var(--border-width-thin) solid var(--color-base-200);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
  overflow: hidden;
  z-index: var(--z-index-popover, 1000);
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  animation: block-command-enter 120ms ease-out;
}

@keyframes block-command-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Search */
.bc-block-command-palette__search {
  display: flex;
  align-items: center;
  gap: var(--spacing-smh);
  padding: var(--spacing-md) var(--spacing-mdh);
  border-bottom: var(--border-width-thin) solid var(--color-base-200);
}

.bc-block-command-palette__search-prefix {
  font-size: var(--font-size-sm);
  color: var(--color-base-400);
  font-family: monospace;
}

.bc-block-command-palette__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--font-size-sm);
  color: var(--color-base-800);
  font-family: inherit;
}

.bc-block-command-palette__search-input::placeholder {
  color: var(--color-base-400);
}

/* List */
.bc-block-command-palette__list {
  max-height: 260px;
  overflow-y: auto;
  padding: var(--spacing-sm) 0;
}

/* Item */
.bc-block-command-palette__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
  cursor: pointer;
  transition: background-color 80ms ease;
}

.bc-block-command-palette__item:hover,
.bc-block-command-palette__item--selected {
  background: var(--color-base-100);
}

.bc-block-command-palette__item-icon {
  display: flex;
  align-items: center;
  color: var(--color-base-500);
  flex-shrink: 0;
}

.bc-block-command-palette__item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bc-block-command-palette__item-label {
  font-size: var(--font-size-sm);
  color: var(--color-base-800);
}

.bc-block-command-palette__item-desc {
  font-size: var(--font-size-xs);
  color: var(--color-base-400);
}

.bc-block-command-palette__item-shortcut {
  font-size: var(--font-size-xs);
  color: var(--color-base-400);
  font-family: monospace;
  flex-shrink: 0;
}

/* Empty state */
.bc-block-command-palette__empty {
  padding: var(--spacing-lg);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-base-400);
}

/* Dark mode */
.dark .bc-block-command-palette {
  background: var(--color-base-800);
  border-color: var(--color-base-700);
}

.dark .bc-block-command-palette__search {
  border-color: var(--color-base-700);
}

.dark .bc-block-command-palette__search-input {
  color: var(--color-base-100);
}

.dark .bc-block-command-palette__item:hover,
.dark .bc-block-command-palette__item--selected {
  background: var(--color-base-700);
}

.dark .bc-block-command-palette__item-label {
  color: var(--color-base-100);
}

@media (prefers-reduced-motion: reduce) {
  .bc-block-command-palette {
    animation: none;
  }
}

/* Breadcrumbs Component */

.bc-breadcrumbs {
  display: block;
}

.bc-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-stack-xs, calc(var(--spacing-base) * 0.75));
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-stack-2xs, var(--spacing-xs));
  list-style: none;
}

/* Link styling */
.bc-breadcrumbs__link,
.bc-breadcrumbs__button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-stack-2xs, var(--spacing-xs));
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  border-radius: var(--radius-xs);
}

.bc-breadcrumbs__button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

.bc-breadcrumbs__link:hover,
.bc-breadcrumbs__button:hover {
  color: var(--text-normal);
  text-decoration: underline;
}

.bc-breadcrumbs__link:focus-visible,
.bc-breadcrumbs__button:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: 2px;
}

.dark .bc-breadcrumbs__link:focus-visible,
.dark .bc-breadcrumbs__button:focus-visible {
  outline-color: var(--color-primary-400);
}

/* Plain text styling */
.bc-breadcrumbs__text {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-stack-2xs, var(--spacing-xs));
}

/* Current page styling */
.bc-breadcrumbs__item--current {
  color: var(--text-normal);
  font-weight: var(--font-weight-medium);
}

/* Separator styling */
.bc-breadcrumbs__separator {
  color: var(--text-muted);
  user-select: none;
  display: inline-flex;
  list-style: none;
}

/* Ellipsis styling */
.bc-breadcrumbs__ellipsis {
  color: var(--text-muted);
  list-style: none;
  font-weight: var(--font-weight-medium);
}

/* Size variants */
.bc-breadcrumbs--size-xs {
  font-size: var(--font-size-xs);
}

.bc-breadcrumbs--size-sm {
  font-size: var(--font-size-sm);
}

.bc-breadcrumbs--size-md {
  font-size: var(--font-size-md);
}

.bc-breadcrumbs--size-lg {
  font-size: var(--font-size-lg);
}

.bc-breadcrumbs--size-xl {
  font-size: var(--font-size-xl);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-breadcrumbs__link,
  .bc-breadcrumbs__button {
    text-decoration: underline;
  }

  .bc-breadcrumbs__item--current {
    font-weight: var(--font-weight-bold);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-breadcrumbs__link,
  .bc-breadcrumbs__button {
    transition: none;
  }
}

/* Button Component */
.bc-button {
  --button-bg: transparent;
  --button-bg-dark: transparent;
  --button-bg-hover: var(--button-bg);
  --button-bg-hover-dark: var(--button-bg-dark);
  --button-text: inherit;
  --button-text-dark: inherit;
  --button-text-hover: var(--button-text);
  --button-text-hover-dark: var(--button-text-dark);
  --button-border: transparent;
  --button-border-dark: transparent;
  --button-border-style: solid;
  --button-hover-decoration: none;
  --button-text-shadow: var(--text-shadow-none);
  --button-text-shadow-dark: var(--text-shadow-none);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap-md);
  border: var(--border-width-default) var(--button-border-style)
    var(--button-border);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-size: inherit;
  line-height: var(--line-height-none);
  border-radius: var(--radius-button, var(--radius-control, var(--radius-md)));
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  background-color: var(--button-bg);
  color: var(--button-text);
  text-shadow: var(--button-text-shadow, var(--text-shadow-none));
}

.bc-button--full-width {
  width: 100%;
}

.bc-button > span {
  min-height: var(--spacing-md);
}

.bc-button:hover:not(:disabled) {
  transform: scale(1.03);
  background-color: var(--button-bg-hover);
  color: var(--button-text-hover);
  text-decoration: var(--button-hover-decoration);
}

/* Keep hover transform while flyout/menu is expanded to prevent position shift */
.bc-button[aria-expanded='true']:not(:disabled) {
  transform: scale(1.03);
}

.bc-button:active:not(:disabled) {
  z-index: 1;
  transform: translateY(var(--spacing-base));
}

.bc-button:disabled {
  cursor: not-allowed;
}

.bc-button:disabled:not(.bc-button--loading) {
  opacity: 0.5;
}

.bc-button--loading .bc-icon {
  width: 1em;
  height: 1em;
}

.bc-button--size-xs {
  font-size: var(--font-size-xs);
}

.bc-button--size-sm {
  font-size: var(--font-size-sm);
}

.bc-button--size-md {
  font-size: var(--font-size-md);
}

.bc-button--size-lg {
  font-size: var(--font-size-lg);
}

.bc-button--size-xl {
  font-size: var(--font-size-xl);
}

/* Dark mode styles */
.dark .bc-button {
  background-color: var(--button-bg-dark);
  color: var(--button-text-dark);
  border-color: var(--button-border-dark);
  text-shadow: var(
    --button-text-shadow-dark,
    var(--button-text-shadow, var(--text-shadow-none))
  );
}

.dark .bc-button:hover:not(:disabled) {
  background-color: var(--button-bg-hover-dark);
  color: var(--button-text-hover-dark);
}

/* Accessibility adjustments */
@media (prefers-contrast: high) {
  .bc-button {
    border-width: var(--border-width-medium);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-button {
    transition: none;
  }
}

/* Card Component */
.bc-card {
  --card-bg: var(--bg-background);
  --card-text: var(--text-normal);
  --card-border: var(--border-default);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-surface, var(--radius-lg));
  border: var(--border-width-thin) solid var(--card-border);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-surface, var(--shadow-md));
  background-color: var(--card-bg);
  color: var(--card-text);
  transition: transform
    var(--motion-transition-medium, var(--motion-duration-base, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Card variants */
.bc-card--elevated {
  box-shadow: var(--shadow-surface-elevated, var(--shadow-lg));
}

.bc-card--flat {
  box-shadow: var(--shadow-none, none);
  --card-border: var(--border-divider);
}

.bc-card--outlined {
  box-shadow: var(--shadow-none, none);
  --card-border: var(--border-default);
}

/* Card sizes */
.bc-card--padding-xs {
  padding: var(--spacing-xs);
}

.bc-card--padding-sm {
  padding: var(--spacing-sm);
}

.bc-card--padding-md {
  padding: var(--spacing-md);
}

.bc-card--padding-lg {
  padding: var(--spacing-lg);
}

.bc-card--padding-xl {
  padding: var(--spacing-xl);
}

/* Card roundedness */
.bc-card--rounded-none {
  border-radius: 0;
}

.bc-card--rounded-sm {
  border-radius: var(--radius-sm);
}

.bc-card--rounded-md {
  border-radius: var(--radius-md);
}

.bc-card--rounded-lg {
  border-radius: var(--radius-lg);
}

.bc-card--rounded-xl {
  border-radius: var(--radius-xl);
}

.bc-card--rounded-full {
  border-radius: var(--radius-full);
}

/* Remove Card padding when structured sub-components are used */
.bc-card:has(
  > .bc-card__header,
  > .bc-card__body,
  > .bc-card__footer,
  > .bc-card__cover-image
) {
  padding: 0;
}

/* Card sections */
.bc-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-bottom: var(--border-width-thin) solid var(--card-border);
  background-color: var(
    --bg-surface-secondary,
    color-mix(in srgb, var(--card-bg) 90%, var(--card-text) 10%)
  );
  flex-shrink: 0;
}

.bc-card__body {
  flex: 1;
  padding: var(--spacing-md);
}

.bc-card__footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: var(--border-width-thin) solid var(--card-border);
  background-color: var(
    --bg-surface-secondary,
    color-mix(in srgb, var(--card-bg) 90%, var(--card-text) 10%)
  );
  flex-shrink: 0;
  justify-content: flex-end;
}

/* Cover image */
.bc-card__cover-image {
  width: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.bc-card__cover-image:first-child {
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bc-card__cover-image:last-child {
  border-radius: inherit;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Dark mode styles */
.dark .bc-card--elevated {
  --card-bg: var(--bg-elevated);
}

/* Center Component */
.bc-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: var(--spacing-stack-lg, var(--spacing-lg));
}

/* Center Horizontal Only */
.bc-center-h {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Center gap variants */
.bc-center--gap-none {
  gap: 0;
}

.bc-center--gap-xs {
  gap: var(--spacing-stack-xs, var(--spacing-xs));
}

.bc-center--gap-sm {
  gap: var(--spacing-stack-sm, var(--spacing-sm));
}

.bc-center--gap-md {
  gap: var(--spacing-stack-md, var(--spacing-mdh));
}

.bc-center--gap-lg {
  gap: var(--spacing-stack-lg, var(--spacing-lg));
}

.bc-center--gap-xl {
  gap: var(--spacing-stack-xl, var(--spacing-xl));
}

/* Center content wrapper */
.bc-center__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
}

/* Checkbox Input Component */
.bc-checkbox-input {
  --checkbox-checked-color: var(--color-primary-500);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-stack-sm);
}

.bc-checkbox-input__checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-base) * 7);
  height: calc(var(--spacing-base) * 7);
  color: var(--color-base-400);
  cursor: pointer;
  transition: color var(--motion-transition-fast) var(--motion-easing-standard);
  flex-shrink: 0;
  line-height: 0;
}

.bc-checkbox-input__checkbox--checked {
  color: var(--checkbox-checked-color);
}

.bc-checkbox-input__checkbox--indeterminate {
  color: var(--checkbox-checked-color);
}

.bc-checkbox-input__checkbox--unchecked {
  color: var(--color-base-400);
}

.bc-checkbox-input__checkbox--disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  opacity: 0.6;
}

.bc-checkbox-input__checkbox:focus-visible,
.bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
  outline: var(--outline-width-default) solid var(--interactive-focus);
  outline-offset: calc(-1 * var(--outline-width-default));
  border-radius: var(--radius-lg);
}

.bc-checkbox-input__label {
  cursor: pointer;
  user-select: none;
}

.dark .bc-checkbox-input__checkbox {
  color: var(--color-base-500);
}

.dark .bc-checkbox-input__checkbox--checked {
  color: var(--color-primary-400);
}

.dark .bc-checkbox-input__checkbox--indeterminate {
  color: var(--color-primary-400);
}

.dark .bc-checkbox-input__checkbox--unchecked {
  color: var(--color-base-500);
}

.dark .bc-checkbox-input__checkbox:focus-visible,
.dark .bc-checkbox-input:focus-within .bc-checkbox-input__checkbox {
  outline: var(--outline-width-focus) solid var(--interactive-focus);
  outline-offset: 2px;
}

.dark .bc-checkbox-input__label {
  color: var(--text-normal);
}

/* Error state */
.bc-input-container--error:has(*.bc-checkbox-input) {
  outline: none;
}

.bc-input-container--error:focus-within:has(*.bc-checkbox-input) {
  outline: none;
}

.bc-collapse {
  overflow: hidden;
  transition: height
    var(--motion-transition-slow, var(--motion-duration-slow, 0.4s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  --collapse-height: auto;
}

.bc-collapse--closed,
.bc-collapse--start-opening,
.bc-collapse--closing {
  height: 0px;
}

.bc-collapse--opening,
.bc-collapse--start-closing {
  height: var(--collapse-height);
}

/* Once fully opened, switch to auto so nested collapses can grow the parent.
   --collapse-height is still tracked by ElementRect for the close transition. */
.bc-collapse--opened {
  height: auto;
  overflow: visible;
}

/* Color Swatch Input Component (SVG blob preview overlaying native input) */

.bc-color-swatch-input__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-control, var(--radius-md));
  overflow: visible;
  cursor: pointer;
  border: var(--border-width-thin) solid var(--color-neutral-300);
}

.bc-input-container .bc-color-input__swatch-container {
  display: flex;
  align-items: center;
  justify-content: end;
  padding-right: var(--spacing-base);
}

.bc-input-container .bc-color-input__swatch {
  position: relative;
  width: calc(var(--spacing-base) * 7.2);
  height: calc(var(--spacing-base) * 7.2);
  cursor: pointer;
  border: var(--border-width-thin) solid var(--color-neutral-300);
  border-radius: 100%;
  overflow: hidden;
}

.bc-color-input__swatch-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.bc-color-swatch-input__control--alpha {
  /* subtle checkerboard background to visualize transparency */
  background-image:
    linear-gradient(
      45deg,
      color-mix(in srgb, var(--color-black) 8%, transparent) 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      color-mix(in srgb, var(--color-black) 8%, transparent) 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      color-mix(in srgb, var(--color-black) 8%, transparent) 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      color-mix(in srgb, var(--color-black) 8%, transparent) 75%
    );
  background-size: 10px 10px;
  background-position:
    0 0,
    0 5px,
    5px -5px,
    -5px 0px;
}

.bc-color-swatch-input__control:focus-within {
  outline: var(--outline-width-focus) solid var(--interactive-focus);
  outline-offset: 2px;
}

.bc-color-swatch-input__svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* ensure clicks go to the native input */
  filter: drop-shadow(
    0 1px 1px color-mix(in srgb, var(--color-black) 10%, transparent)
  );
}

.bc-input-container--error .bc-color-swatch-input__control:focus-within {
  outline: var(--outline-width-focus) solid var(--color-danger-600);
}

.bc-color-swatch-input__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  opacity: 0; /* keep accessible and clickable */
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.bc-color-swatch-input__native:disabled {
  cursor: not-allowed;
}

.bc-color-swatch-input__rgb {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.bc-color-swatch-input__alpha {
  width: calc(var(--spacing-base) * 20);
  margin-inline-start: var(--spacing-md);
}

.bc-color-input input[type='text'] {
  font-family: monospace;
  width: 9ch;
}

/* Dark mode */
.dark .bc-input-container--error .bc-color-swatch-input__control:focus-within {
  outline: var(--outline-width-focus) solid var(--color-danger-400);
}

.bc-command-palette {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  margin: 15vh auto 0;
  width: 90%;
  max-height: 60vh;
}

.bc-command-palette--size-sm {
  max-width: 480px;
}

.bc-command-palette--size-md {
  max-width: 600px;
}

.bc-command-palette--size-lg {
  max-width: 720px;
}

.bc-command-palette__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-mdh) var(--spacing-lg);
  border-bottom: var(--border-width-thin) solid var(--border-default);
}

.bc-command-palette__search-icon {
  display: flex;
  color: var(--text-muted);
  flex-shrink: 0;
}

.bc-command-palette__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--font-size-md);
  font-family: inherit;
  color: inherit;
}

.bc-command-palette__input::placeholder {
  color: var(--text-muted);
}

.bc-command-palette__body {
  overflow-y: auto;
  padding: var(--spacing-md);
}

.bc-command-palette__empty {
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.bc-command-palette__section + .bc-command-palette__section {
  margin-top: var(--spacing-md);
}

.bc-command-palette__section-title {
  padding: var(--spacing-base) var(--spacing-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bc-command-palette__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-command-palette__item:hover,
.bc-command-palette__item--selected {
  background-color: var(--interactive-hover);
}

.bc-command-palette__item-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--text-muted);
}

.bc-command-palette__item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.bc-command-palette__item-label {
  font-size: var(--font-size-sm);
}

.bc-command-palette__item-description {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.bc-command-palette__item-shortcut {
  display: flex;
  gap: var(--spacing-base);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bc-command-palette__item {
    transition: none;
  }
}

.bc-dropdown__search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  padding: var(--spacing-base) var(--spacing-md);
  margin: 0;
  background-color: var(--color-gray-50);
  border-radius: 0;
  border-bottom: var(--border-width-thin) solid var(--color-gray-300);
}

/* Dark mode */
.dark .bc-dropdown__search-input {
  background-color: var(--color-base-800);
  border-bottom-color: var(--color-base-600);
}

/* Dropdown Component */
.bc-dropdown {
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  padding: 0;
}

.bc-dropdown__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-stack-sm);
}

/* Display area for selected value */
.bc-dropdown__display {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Arrow indicator */
.bc-dropdown__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-inline-start: var(--spacing-xs);
}

/* Listbox (dropdown) */
.bc-dropdown__listbox {
  background-color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-base-200);
  border-radius: var(--radius-popover, var(--radius-md));
  box-shadow: var(--shadow-popover, var(--shadow-lg));
  padding: var(--spacing-xs) 0;
  z-index: var(--z-index-navigation);
  min-width: var(--overlay-min-width);
  max-height: 20rem;
  overflow-y: auto;
  outline: none;
}

/* Individual option */
.bc-dropdown__option {
  display: flex;
  align-items: center;
  padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
  color: var(--color-gray-900);
  background-color: transparent;
}

.bc-dropdown__option:hover {
  background-color: var(--color-base-100);
}

.bc-dropdown__option--focused {
  background-color: var(--color-base-100);
  color: var(--color-base-900);
}

.bc-dropdown__option--selected {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  font-weight: var(--font-weight-semibold);
}

.bc-dropdown__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Option content layout */
.bc-dropdown__option-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm);
  width: 100%;
}

.bc-dropdown__option-before {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bc-dropdown__option-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-dropdown__option-after {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Option groups */
.bc-dropdown__group {
  margin: var(--spacing-xs) 0;
}

.bc-dropdown__group-label {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Separator */
.bc-dropdown__separator {
  margin: var(--spacing-xs) 0;
  border: none;
  border-top: var(--border-width-thin) solid var(--color-gray-200);
}

/* Dark mode styles */
.dark .bc-dropdown__listbox {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-normal);
}

.dark .bc-dropdown__option {
  color: var(--text-normal);
}

.dark .bc-dropdown__option:hover {
  background-color: var(--interactive-hover);
}

.dark .bc-dropdown__option--focused {
  background-color: var(--color-primary-900);
  color: var(--color-primary-100);
}

.dark .bc-dropdown__option--selected {
  background-color: var(--color-primary-900);
  color: var(--color-primary-200);
  font-weight: var(--font-weight-semibold);
}

.dark .bc-dropdown__separator {
  border-color: var(--border-divider);
}

/* Responsive styles */
@media (width >= 40rem) {
  .bc-dropdown__option {
    padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
  }

  .bc-dropdown__listbox {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
  }
}

/* Animation for dropdown appearance */
.bc-dropdown__listbox {
  animation: dropdown-appear var(--motion-duration-fast)
    var(--motion-easing-entrance);
}

@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-dropdown__option--focused {
    outline: var(--outline-width-focus) solid currentColor;
    outline-offset: calc(-1 * var(--outline-width-focus));
  }

  .bc-dropdown__option--selected {
    outline: var(--outline-width-focus) solid currentColor;
    outline-offset: calc(-1 * var(--outline-width-focus));
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-dropdown__listbox {
    animation: none;
  }
}

.bc-control--padding-none {
  padding: 0;
}

.bc-control--padding-xs {
  padding-block: var(--control-padding-block-xs);
  padding-inline: var(--control-padding-inline-xs);
  min-height: var(--control-height-xs);
}

.bc-control--padding-sm {
  padding-block: var(--control-padding-block-sm);
  padding-inline: var(--control-padding-inline-sm);
  min-height: var(--control-height-sm);
}

.bc-control--padding-md {
  padding-block: var(--control-padding-block-md);
  padding-inline: var(--control-padding-inline-md);
  min-height: var(--control-height-md);
}

.bc-control--padding-lg {
  padding-block: var(--control-padding-block-lg);
  padding-inline: var(--control-padding-inline-lg);
  min-height: var(--control-height-lg);
}

.bc-control--padding-xl {
  padding-block: var(--control-padding-block-xl);
  padding-inline: var(--control-padding-inline-xl);
  min-height: var(--control-height-xl);
}

.bc-control--padding-xs:has(> .bc-icon:only-child) {
  padding: var(--control-padding-block-xs);
}

.bc-control--padding-sm:has(> .bc-icon:only-child) {
  padding: var(--control-padding-block-sm);
}

.bc-control--padding-md:has(> .bc-icon:only-child) {
  padding: var(--control-padding-block-md);
}

.bc-control--padding-lg:has(> .bc-icon:only-child) {
  padding: var(--control-padding-block-lg);
}

.bc-control--padding-xl:has(> .bc-icon:only-child) {
  padding: var(--control-padding-block-xl);
}

.bc-control--rounded-none {
  border-radius: 0;
}

.bc-control--rounded-xs {
  border-radius: var(--radius-xs);
}

.bc-control--rounded-sm {
  border-radius: var(--radius-sm);
}

.bc-control--rounded-md {
  border-radius: var(--radius-md);
}

.bc-control--rounded-lg {
  border-radius: var(--radius-lg);
}

.bc-control--rounded-xl {
  border-radius: var(--radius-xl);
}

.bc-control--rounded-full {
  border-radius: var(--radius-full);
}

/* Shared control font sizing to align heights across components */
.bc-control--text-size-xs {
  font-size: var(--font-size-xs);
}

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

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

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

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

/* Control Input Wrapper Component */
.bc-control-input-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Label header container */
.bc-control-input-wrapper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

/* Label container */
.bc-control-input-wrapper__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-2xs, var(--spacing-xs));
}

/* Label text styles */
.bc-control-input-wrapper__label-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Label text states */
.bc-control-input-wrapper__label-text--default {
  color: var(--color-gray-600);
  font-weight: var(--font-weight-semibold);
}

.bc-control-input-wrapper__label-text--disabled {
  color: var(--color-gray-500);
  font-weight: var(--font-weight-normal);
}

.bc-control-input-wrapper__label-text--error {
  color: var(--color-danger-600);
  font-weight: var(--font-weight-normal);
}

/* Required symbol */
.bc-control-input-wrapper__required {
  font-size: var(--font-size-xs);
  color: var(--color-danger-600);
  vertical-align: top;
}

/* Content container */
.bc-control-input-wrapper__content {
  /* Content styling is handled by the child components */
}

/* Description text */
.bc-control-input-wrapper__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-normal);
}

/* Error message */
.bc-control-input-wrapper__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger-500);
  line-height: var(--line-height-normal);
}

/* Dark mode styles */
.dark .bc-control-input-wrapper__label-text--default {
  color: var(--text-normal);
}

.dark .bc-control-input-wrapper__label-text--error {
  color: var(--color-danger-300);
}

.dark .bc-control-input-wrapper__required {
  color: var(--color-danger-400);
}

.dark .bc-control-input-wrapper__error {
  color: var(--color-danger-400);
}

/* Divider Component */
.bc-divider {
  border: 0;
  border-top: var(--border-width-thin) solid var(--border-divider);
  margin: 0;
  height: 0;
  background: transparent;
  width: 100%;
  transition: border-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Vertical orientation */
.bc-divider--vertical {
  border-top: none;
  border-top-width: 0;
  border-left: var(--border-width-thin) solid var(--border-divider);
  width: auto;
  height: auto;
  align-self: stretch;
  min-height: var(--spacing-lg);
}

/* Tone variants */
.bc-divider--tone-subtle {
  border-color: var(--border-muted);
}

.bc-divider--tone-strong {
  border-color: var(--border-strong);
}

/* Line style variants */
.bc-divider--dashed {
  border-top-style: dashed;
}

.bc-divider--dotted {
  border-top-style: dotted;
}

.bc-divider--vertical.bc-divider--dashed {
  border-left-style: dashed;
}

.bc-divider--vertical.bc-divider--dotted {
  border-left-style: dotted;
}

/* Labeled divider */
.bc-divider--labeled {
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
  border: 0;
  height: auto;
}

.bc-divider--labeled.bc-divider--vertical {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-base);
  height: 100%;
}

.bc-divider__line {
  flex: 1;
  border: 0;
  border-top: var(--border-width-thin) solid var(--border-default);
  height: 0;
  background: transparent;
  margin: 0;
  transition: border-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-divider--vertical .bc-divider__line {
  border-top: none;
  border-top-width: 0;
  border-left: var(--border-width-thin) solid var(--border-divider);
  width: 0;
  flex: 1;
  min-height: var(--spacing-lg);
}

.bc-divider__label {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  white-space: nowrap;
  line-height: var(--line-height-none);
}

/* Label alignment */
.bc-divider--labeled-left .bc-divider__line:first-child {
  flex: 0 1 auto;
  min-width: 0;
}

.bc-divider--labeled-right .bc-divider__line:last-child {
  flex: 0 1 auto;
  min-width: 0;
}

.bc-divider--vertical.bc-divider--labeled-left .bc-divider__line:first-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: initial;
}

.bc-divider--vertical.bc-divider--labeled-right .bc-divider__line:last-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: initial;
}

/* Tone variants for labeled dividers */
.bc-divider--labeled.bc-divider--tone-subtle .bc-divider__line {
  border-color: var(--border-muted);
}

.bc-divider--labeled.bc-divider--tone-strong .bc-divider__line {
  border-color: var(--border-strong);
}

.bc-divider--labeled.bc-divider--tone-subtle .bc-divider__label {
  color: var(--color-base-400);
}

.bc-divider--labeled.bc-divider--tone-strong .bc-divider__label {
  color: var(--text-muted);
}

/* Line style variants for labeled dividers */
.bc-divider--labeled.bc-divider--dashed .bc-divider__line {
  border-top-style: dashed;
}

.bc-divider--labeled.bc-divider--dotted .bc-divider__line {
  border-top-style: dotted;
}

.bc-divider--labeled.bc-divider--vertical.bc-divider--dashed .bc-divider__line {
  border-left-style: dashed;
}

.bc-divider--labeled.bc-divider--vertical.bc-divider--dotted .bc-divider__line {
  border-left-style: dotted;
}

/* Dark mode styles */
.dark .bc-divider--labeled.bc-divider--tone-subtle .bc-divider__label {
  color: var(--color-base-500);
}

.dark .bc-divider--labeled.bc-divider--tone-strong .bc-divider__label {
  color: var(--text-normal);
}

/* Accessibility adjustments */
@media (prefers-contrast: high) {
  .bc-divider,
  .bc-divider__line {
    border-width: var(--border-width-medium);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-divider,
  .bc-divider__line {
    transition: none;
  }
}

/* Drawer Component */
.bc-drawer {
  z-index: var(--z-index-modal);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-overlay, var(--shadow-xl));
  background-color: var(--color-base-100);
  overflow: hidden;
  transition: transform
    var(--motion-transition-overlay, var(--motion-duration-slow, 0.3s))
    var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
}

/* Animation states for drawer sliding - specific transforms are defined per side below */

/* Right side animations */
.bc-drawer--side-right.bc-drawer--status-closed,
.bc-drawer--side-right.bc-drawer--status-start-closing,
.bc-drawer--side-right.bc-drawer--status-closing {
  transform: translateX(100%);
}

.bc-drawer--side-right.bc-drawer--status-start-opening,
.bc-drawer--side-right.bc-drawer--status-opening,
.bc-drawer--side-right.bc-drawer--status-opened {
  transform: translateX(0);
}

/* Left side animations */
.bc-drawer--side-left.bc-drawer--status-closed,
.bc-drawer--side-left.bc-drawer--status-start-closing,
.bc-drawer--side-left.bc-drawer--status-closing {
  transform: translateX(-100%);
}

.bc-drawer--side-left.bc-drawer--status-start-opening,
.bc-drawer--side-left.bc-drawer--status-opening,
.bc-drawer--side-left.bc-drawer--status-opened {
  transform: translateX(0);
}

/* Direction-aware inline-end animations (right in LTR, left in RTL) */
.bc-drawer--side-inline-end.bc-drawer--status-closed,
.bc-drawer--side-inline-end.bc-drawer--status-start-closing,
.bc-drawer--side-inline-end.bc-drawer--status-closing {
  transform: translateX(100%);
}

.b-rtl .bc-drawer--side-inline-end.bc-drawer--status-closed,
.b-rtl .bc-drawer--side-inline-end.bc-drawer--status-start-closing,
.b-rtl .bc-drawer--side-inline-end.bc-drawer--status-closing {
  transform: translateX(-100%);
}

.bc-drawer--side-inline-end.bc-drawer--status-start-opening,
.bc-drawer--side-inline-end.bc-drawer--status-opening,
.bc-drawer--side-inline-end.bc-drawer--status-opened {
  transform: translateX(0);
}

/* Direction-aware inline-start animations (left in LTR, right in RTL) */
.bc-drawer--side-inline-start.bc-drawer--status-closed,
.bc-drawer--side-inline-start.bc-drawer--status-start-closing,
.bc-drawer--side-inline-start.bc-drawer--status-closing {
  transform: translateX(-100%);
}

.b-rtl .bc-drawer--side-inline-start.bc-drawer--status-closed,
.b-rtl .bc-drawer--side-inline-start.bc-drawer--status-start-closing,
.b-rtl .bc-drawer--side-inline-start.bc-drawer--status-closing {
  transform: translateX(100%);
}

.bc-drawer--side-inline-start.bc-drawer--status-start-opening,
.bc-drawer--side-inline-start.bc-drawer--status-opening,
.bc-drawer--side-inline-start.bc-drawer--status-opened {
  transform: translateX(0);
}

/* Top side animations */
.bc-drawer--side-top.bc-drawer--status-closed,
.bc-drawer--side-top.bc-drawer--status-start-closing,
.bc-drawer--side-top.bc-drawer--status-closing {
  transform: translateY(-100%);
}

.bc-drawer--side-top.bc-drawer--status-start-opening,
.bc-drawer--side-top.bc-drawer--status-opening,
.bc-drawer--side-top.bc-drawer--status-opened {
  transform: translateY(0);
}

/* Bottom side animations */
.bc-drawer--side-bottom.bc-drawer--status-closed,
.bc-drawer--side-bottom.bc-drawer--status-start-closing,
.bc-drawer--side-bottom.bc-drawer--status-closing {
  transform: translateY(100%);
}

.bc-drawer--side-bottom.bc-drawer--status-start-opening,
.bc-drawer--side-bottom.bc-drawer--status-opening,
.bc-drawer--side-bottom.bc-drawer--status-opened {
  transform: translateY(0);
}

/* Drawer anchored to body (default) */
.bc-drawer--container-body {
  position: fixed;
}

/* Drawer anchored to element container */
.bc-drawer--container-element {
  position: absolute;
}

/* Drawer positioning - Right side (default) */
.bc-drawer--side-right.bc-drawer--container-body {
  top: 0;
  right: 0;
  height: 100vh;
  max-width: 90vw;
}

.bc-drawer--side-right.bc-drawer--container-element {
  top: 0;
  right: 0;
  height: 100%;
  max-width: 90%;
}

/* Drawer positioning - Left side */
.bc-drawer--side-left.bc-drawer--container-body {
  top: 0;
  left: 0;
  height: 100vh;
  max-width: 90vw;
}

.bc-drawer--side-left.bc-drawer--container-element {
  top: 0;
  left: 0;
  height: 100%;
  max-width: 90%;
}

/* Direction-aware drawer positioning - Inline End */
.bc-drawer--side-inline-end.bc-drawer--container-body {
  top: 0;
  inset-inline-end: 0;
  height: 100vh;
  max-width: 90vw;
}

.bc-drawer--side-inline-end.bc-drawer--container-element {
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  max-width: 90%;
}

/* Direction-aware drawer positioning - Inline Start */
.bc-drawer--side-inline-start.bc-drawer--container-body {
  top: 0;
  inset-inline-start: 0;
  height: 100vh;
  max-width: 90vw;
}

.bc-drawer--side-inline-start.bc-drawer--container-element {
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  max-width: 90%;
}

/* Drawer positioning - Top side */
.bc-drawer--side-top.bc-drawer--container-body {
  top: 0;
  left: 0;
  width: 100vw;
  max-height: 90vh;
}

.bc-drawer--side-top.bc-drawer--container-element {
  top: 0;
  left: 0;
  width: 100%;
  max-height: 90%;
}

/* Drawer positioning - Bottom side */
.bc-drawer--side-bottom.bc-drawer--container-body {
  bottom: 0;
  left: 0;
  width: 100vw;
  max-height: 90vh;
}

.bc-drawer--side-bottom.bc-drawer--container-element {
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 90%;
}

/* Drawer sizes for vertical drawers (left/right/inline) */
.bc-drawer--side-left.bc-drawer--size-sm,
.bc-drawer--side-right.bc-drawer--size-sm,
.bc-drawer--side-inline-start.bc-drawer--size-sm,
.bc-drawer--side-inline-end.bc-drawer--size-sm {
  width: min(320px, 90vw);
}

.bc-drawer--side-left.bc-drawer--size-md,
.bc-drawer--side-right.bc-drawer--size-md,
.bc-drawer--side-inline-start.bc-drawer--size-md,
.bc-drawer--side-inline-end.bc-drawer--size-md {
  width: min(480px, 90vw);
}

.bc-drawer--side-left.bc-drawer--size-lg,
.bc-drawer--side-right.bc-drawer--size-lg,
.bc-drawer--side-inline-start.bc-drawer--size-lg,
.bc-drawer--side-inline-end.bc-drawer--size-lg {
  width: min(640px, 90vw);
}

.bc-drawer--side-left.bc-drawer--size-xl,
.bc-drawer--side-right.bc-drawer--size-xl,
.bc-drawer--side-inline-start.bc-drawer--size-xl,
.bc-drawer--side-inline-end.bc-drawer--size-xl {
  width: min(800px, 90vw);
}

/* Drawer sizes for horizontal drawers (top/bottom) */
.bc-drawer--side-top.bc-drawer--size-sm,
.bc-drawer--side-bottom.bc-drawer--size-sm {
  height: min(240px, 90vh);
}

.bc-drawer--side-top.bc-drawer--size-md,
.bc-drawer--side-bottom.bc-drawer--size-md {
  height: min(360px, 90vh);
}

.bc-drawer--side-top.bc-drawer--size-lg,
.bc-drawer--side-bottom.bc-drawer--size-lg {
  height: min(480px, 90vh);
}

.bc-drawer--side-top.bc-drawer--size-xl,
.bc-drawer--side-bottom.bc-drawer--size-xl {
  height: min(600px, 90vh);
}

/* Drawer content structure */
.bc-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.bc-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: var(--border-width-thin) solid var(--color-base-300);
  background-color: var(--color-base-50);
  flex-shrink: 0;
}

.bc-drawer__body {
  flex: 1;
  padding: var(--spacing-md);
  overflow-y: auto;
}

.bc-drawer__footer {
  padding: var(--spacing-md);
  border-top: var(--border-width-thin) solid var(--color-base-300);
  background-color: var(--color-base-50);
  flex-shrink: 0;
}

/* Dark mode styles */
.dark .bc-drawer {
  background-color: var(--bg-surface);
  color: var(--text-normal);
  border: var(--border-width-thin) solid var(--border-default);
}

.dark .bc-drawer__header {
  border-bottom: var(--border-width-thin) solid var(--border-divider);
  background-color: var(--bg-elevated);
}

.dark .bc-drawer__footer {
  border-top: var(--border-width-thin) solid var(--border-divider);
  background-color: var(--bg-elevated);
}

/* Responsive adjustments */
@media (width <= 640px) {
  .bc-drawer--side-left.bc-drawer--container-body,
  .bc-drawer--side-right.bc-drawer--container-body,
  .bc-drawer--side-inline-start.bc-drawer--container-body,
  .bc-drawer--side-inline-end.bc-drawer--container-body {
    width: 100vw;
    max-width: none;
  }

  .bc-drawer--side-top.bc-drawer--container-body,
  .bc-drawer--side-bottom.bc-drawer--container-body {
    height: 100vh;
    max-height: none;
  }
}

/* Editable Text Component */
.bc-editable-text {
  border-bottom: var(--border-width-thin) dashed var(--color-gray-300);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-stack-sm, var(--spacing-md));
  align-items: flex-start;
  cursor: pointer;
}

/* Disabled state */
.bc-editable-text--disabled {
  border-bottom-color: transparent;
  cursor: default;
}

.bc-editable-text--disabled .bc-editable-text__display {
  cursor: default;
}

.bc-editable-text--disabled .bc-editable-text__edit-button {
  display: none;
}

/* Input state */
.bc-editable-text__input {
  outline: none;
  padding: 0 var(--spacing-xs);
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  flex-grow: 1;
  line-height: var(--line-height-normal);
  height: var(--spacing-2xl);
}

/* Use base focus system for inputs (consistent with TextInput) */
.bc-editable-text__input:focus-visible {
  outline: none; /* Input itself should not draw outline */
}

/* Draw the focus on the display container similar to other inputs via focus-within */
.bc-editable-text:focus-within {
  outline: var(--outline-width-focus) solid var(--interactive-focus);
  outline-offset: calc(-1 * var(--outline-width-focus));
  border-radius: var(--radius-sm);
}

/* Display state */
.bc-editable-text__display {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-stack-sm, var(--spacing-md));
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0 var(--spacing-xs);
  white-space: nowrap;
  flex-grow: 1;
  overflow: hidden;
  line-height: var(--line-height-normal);
  height: var(--spacing-2xl);
}

/* Text content */
.bc-editable-text__text {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placeholder text */
.bc-editable-text__placeholder {
  color: var(--color-gray-500);
  font-style: italic;
}

/* Edit button */
.bc-editable-text__edit-button {
  border-radius: var(--radius-full);
  color: var(--color-yellow-700);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-editable-text__edit-button:focus-visible {
  outline: none;
}

.bc-editable-text__edit-button:hover {
  background-color: var(--color-gray-100);
}

.bc-editable-text__edit-button:active {
  background-color: var(--color-gray-200);
}

/* Scale icon to match text size */
.bc-editable-text__edit-button .bc-icon {
  width: 1em;
  height: 1em;
}

/* Dark mode styles */
.dark .bc-editable-text {
  border-bottom-color: var(--border-default);
  color: var(--text-normal);
}

.dark .bc-editable-text__edit-button {
  color: var(--color-yellow-400);
}

.dark .bc-editable-text__edit-button:hover {
  background-color: var(--interactive-hover);
  color: var(--color-yellow-300);
}

.dark .bc-editable-text__edit-button:active {
  background-color: var(--interactive-active);
}

/* EmptyState Component */
.bc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-xl);
  max-width: 400px;
  margin: 0 auto;
}

.bc-empty-state__icon {
  opacity: 0.5;
  margin-bottom: var(--spacing-md);
  line-height: 0;
  color: var(--text-muted);
}

.bc-empty-state__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-normal);
  margin: 0;
  margin-bottom: var(--spacing-sm);
}

.bc-empty-state__description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0;
  margin-bottom: var(--spacing-md);
  line-height: 1.5;
}

.bc-empty-state__action {
  margin-top: var(--spacing-md);
}

/* Size variants */
.bc-empty-state--size-sm {
  padding: var(--spacing-md);
  max-width: 300px;
}

.bc-empty-state--size-sm .bc-empty-state__icon {
  margin-bottom: var(--spacing-sm);
}

.bc-empty-state--size-sm .bc-empty-state__title {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-xs);
}

.bc-empty-state--size-sm .bc-empty-state__description {
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-sm);
}

.bc-empty-state--size-sm .bc-empty-state__action {
  margin-top: var(--spacing-sm);
}

.bc-empty-state--size-lg {
  padding: var(--spacing-2xl, var(--spacing-2xlh));
  max-width: 500px;
}

.bc-empty-state--size-lg .bc-empty-state__icon {
  margin-bottom: var(--spacing-lg);
}

.bc-empty-state--size-lg .bc-empty-state__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-md);
}

.bc-empty-state--size-lg .bc-empty-state__description {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-lg);
}

.bc-empty-state--size-lg .bc-empty-state__action {
  margin-top: var(--spacing-lg);
}

/* File Input Component */
.bc-file-input {
  width: 100%;
}

/* Drop Zone Styles */
.bc-file-input__drop-zone {
  width: 100%;
  min-height: 120px;
  border: var(--border-width-medium) dashed var(--color-gray-300);
  border-radius: var(--radius-control, var(--radius-md));
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  cursor: pointer;
  position: relative;
}

.bc-file-input__drop-zone:hover {
  border-color: var(--color-primary-500);
  background-color: var(--color-primary-50);
}

.bc-file-input__drop-zone:focus-within {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Drop Zone Content */
.bc-file-input__drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  height: 100%;
  min-height: 120px;
  text-align: center;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

.bc-file-input__drop-zone-content--empty {
  color: var(--color-gray-600);
}

.bc-file-input__drop-zone-content--drag-over {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
}

.bc-file-input__drop-zone-content--has-files {
  color: var(--color-gray-500);
  min-height: 80px;
  padding: var(--spacing-lg);
}

.bc-file-input__drop-zone-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

/* File List Styles */
.bc-file-input__clear-all-button-container {
  display: flex;
  justify-content: center;
}

.bc-file-input__file-list {
  margin-top: var(--spacing-mdh);
  border-top: var(--border-width-thin) solid var(--color-gray-200);
  padding-top: var(--spacing-mdh);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-stack-md, var(--spacing-mdh));
}

.bc-file-input__file-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-md));
  padding: var(--spacing-md);
  border: var(--border-width-thin) solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  transition:
    border-color
      var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
    box-shadow var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  width: 18rem;
}

.bc-file-input__file-item:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-surface, var(--shadow-sm));
}

.bc-file-input__file-item:last-child {
  margin-bottom: 0;
}

.bc-file-input__file-icon {
  flex-shrink: 0;
  color: var(--color-primary-500);
}

/* Thumbnail Styles */
.bc-file-input__thumbnail-container {
  min-width: var(--spacing-3xl);
  max-width: var(--spacing-3xl);
  min-height: var(--spacing-3xl);
  max-height: var(--spacing-3xl);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-file-input__file-icon .bc-icon {
  min-width: var(--spacing-3xl);
  max-width: var(--spacing-3xl);
  min-height: var(--spacing-3xl);
  max-height: var(--spacing-3xl);
}

.bc-file-input__compact-value-item .bc-icon {
  min-width: var(--spacing-xl);
  max-width: var(--spacing-xl);
  min-height: var(--spacing-xl);
  max-height: var(--spacing-xl);
}

.bc-file-input__compact-value-item .bc-file-input__thumbnail-container {
  min-width: var(--spacing-xl);
  max-width: var(--spacing-xl);
  min-height: var(--spacing-xl);
  max-height: var(--spacing-xl);
}

.bc-file-input__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: none;
}
.bc-file-input__file-info {
  flex: 1;
  min-width: 0;
}

.bc-file-input__file-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: calc(var(--spacing-base) * 0.5);
}

.bc-file-input__file-meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-file-input__remove-button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-file-input__remove-button:hover {
  background-color: var(--color-danger-50);
  color: var(--color-danger-500);
}

.bc-file-input__remove-button:focus {
  outline: var(--outline-width-focus) solid var(--color-danger-500);
  outline-offset: 2px;
}

.bc-file-input__remove-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bc-file-input__clear-all-button {
  display: block;
  margin: var(--spacing-md) auto 0;
  padding: var(--spacing-smh) var(--spacing-mdh);
  border: var(--border-width-thin) solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-file-input__clear-all-button:hover {
  border-color: var(--color-danger-300);
  background-color: var(--color-danger-50);
  color: var(--color-danger-600);
}

.bc-file-input__clear-all-button:focus {
  outline: var(--outline-width-focus) solid var(--color-danger-500);
  outline-offset: 2px;
}

.bc-file-input__clear-all-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Error State */
.bc-base-input-container--error .bc-file-input__drop-zone {
  border-color: var(--color-danger-300);
}

.bc-base-input-container--error .bc-file-input__drop-zone:hover {
  border-color: var(--color-danger-400);
  background-color: var(--color-danger-50);
}

/* Disabled State */
.bc-base-input-container--disabled .bc-file-input__drop-zone {
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  cursor: not-allowed;
  opacity: 0.6;
}

.bc-base-input-container--disabled .bc-file-input__drop-zone:hover {
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
}

.bc-base-input-container--disabled .bc-file-input__drop-zone-content {
  color: var(--color-gray-400);
}

.bc-base-input-container--disabled .bc-file-input__file-item {
  opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 640px) {
  .bc-file-input__file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-stack-sm, var(--spacing-md));
  }

  .bc-file-input__remove-button {
    align-self: flex-end;
    margin-top: calc(var(--spacing-base) * -1);
  }

  .bc-file-input__file-info {
    width: 100%;
  }
}

/* Input mode */
.bc-file-input--input {
  width: 100%;
}

/* Compact mode */
.bc-file-input--compact {
  width: 100%;
}

.bc-file-input__compact-input {
  width: 100%;
  min-height: 19px;
  display: flex;
  align-items: center;
}

.bc-file-input__compact-placeholder {
  color: var(--color-gray-500);
}

.bc-file-input__compact-value {
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-stack-xs, var(--spacing-sm));
}

.bc-file-input__compact-value-item {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-md));
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-file-input__compact-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-file-input__compact-clear:hover {
  background-color: var(--color-danger-50);
  color: var(--color-danger-500);
}

.bc-file-input__compact-clear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bc-file-input__compact-value-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact preview thumbnail */
.bc-file-input__compact-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background-color: var(--color-gray-100);
  flex-shrink: 0;
}

.bc-file-input__compact-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: none;
  display: block;
}

/* Compact mode drop zone */
.bc-file-input__compact-drop-zone {
  width: 100%;
  min-height: 100px;
  border: var(--border-width-medium) dashed var(--color-gray-300);
  border-radius: var(--radius-control, var(--radius-md));
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  cursor: pointer;
  position: relative;
  padding: var(--spacing-mdh);
}

.bc-file-input__compact-drop-zone:hover {
  border-color: var(--color-primary-500);
  background-color: var(--color-primary-50);
}

.bc-file-input__compact-drop-zone:focus-within {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Compact mode placeholder */
.bc-file-input__compact-drop-zone .bc-file-input__compact-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-stack-sm, var(--spacing-md));
  color: var(--color-gray-600);
  text-align: center;
  padding: var(--spacing-md);
}

.bc-file-input__compact-placeholder-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

/* Compact mode file list */
.bc-file-input__compact-file-list {
  display: flex;
  flex-direction: column;
  justify-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-md));
  overflow-y: auto;
}

.bc-file-input__compact-file-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-md));
  padding: var(--spacing-smh);
  border-radius: var(--radius-sm);
  background-color: var(--color-gray-50);
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-file-input__compact-file-item:hover {
  background-color: var(--color-gray-100);
}

.bc-file-input__compact-file-icon {
  flex-shrink: 0;
  color: var(--color-primary-500);
}

.bc-file-input__compact-file-icon .bc-icon {
  min-width: var(--spacing-2xl);
  max-width: var(--spacing-2xl);
  min-height: var(--spacing-2xl);
  max-height: var(--spacing-2xl);
}

.bc-file-input__compact-file-icon .bc-file-input__thumbnail-container {
  min-width: var(--spacing-2xl);
  max-width: var(--spacing-2xl);
  min-height: var(--spacing-2xl);
  max-height: var(--spacing-2xl);
}

.bc-file-input__compact-file-info {
  flex: 1;
  min-width: 0;
}

.bc-file-input__compact-file-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: calc(var(--spacing-base) * 0.5);
}

.bc-file-input__compact-file-meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-file-input__compact-remove-button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-file-input__compact-remove-button:hover {
  background-color: var(--color-danger-50);
  color: var(--color-danger-500);
}

.bc-file-input__compact-remove-button:focus {
  outline: var(--outline-width-focus) solid var(--color-danger-500);
  outline-offset: 2px;
}

.bc-file-input__compact-remove-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Compact mode error state */
.bc-base-input-container--error .bc-file-input__compact-drop-zone {
  border-color: var(--color-danger-300);
}

.bc-base-input-container--error .bc-file-input__compact-drop-zone:hover {
  border-color: var(--color-danger-400);
  background-color: var(--color-danger-50);
}

/* Compact mode disabled state */
.bc-base-input-container--disabled .bc-file-input__compact-drop-zone {
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  cursor: not-allowed;
  opacity: 0.6;
}

.bc-base-input-container--disabled .bc-file-input__compact-drop-zone:hover {
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
}

.bc-base-input-container--disabled .bc-file-input__compact-file-item {
  opacity: 0.6;
}

/* Dark mode */
.dark .bc-file-input__drop-zone {
  border-color: var(--color-base-600);
}

.dark .bc-file-input__drop-zone:hover {
  border-color: var(--color-primary-400);
  background-color: color-mix(
    in srgb,
    var(--color-primary-500) 10%,
    transparent
  );
}

.dark .bc-file-input__drop-zone-content--empty {
  color: var(--color-base-400);
}

.dark .bc-file-input__drop-zone-content--drag-over {
  color: var(--color-primary-300);
  background-color: color-mix(
    in srgb,
    var(--color-primary-500) 10%,
    transparent
  );
}

.dark .bc-file-input__drop-zone-content--has-files {
  color: var(--color-base-400);
}

.dark .bc-file-input__file-list {
  border-top-color: var(--color-base-700);
}

.dark .bc-file-input__file-item {
  border-color: var(--color-base-700);
  background-color: var(--bg-surface);
}

.dark .bc-file-input__file-item:hover {
  border-color: var(--color-base-600);
}

.dark .bc-file-input__file-name {
  color: var(--text-normal);
}

.dark .bc-file-input__file-meta {
  color: var(--color-base-400);
}

.dark .bc-file-input__thumbnail-container {
  background-color: var(--color-base-800);
}

.dark .bc-file-input__remove-button {
  color: var(--color-base-500);
}

.dark .bc-file-input__remove-button:hover {
  background-color: color-mix(
    in srgb,
    var(--color-danger-500) 15%,
    transparent
  );
  color: var(--color-danger-400);
}

.dark .bc-file-input__clear-all-button {
  border-color: var(--color-base-600);
  background-color: var(--bg-surface);
  color: var(--color-base-400);
}

.dark .bc-file-input__clear-all-button:hover {
  border-color: var(--color-danger-600);
  background-color: color-mix(
    in srgb,
    var(--color-danger-500) 15%,
    transparent
  );
  color: var(--color-danger-400);
}

.dark .bc-base-input-container--error .bc-file-input__drop-zone {
  border-color: var(--color-danger-600);
}

.dark .bc-base-input-container--error .bc-file-input__drop-zone:hover {
  border-color: var(--color-danger-500);
  background-color: color-mix(
    in srgb,
    var(--color-danger-500) 10%,
    transparent
  );
}

.dark .bc-base-input-container--disabled .bc-file-input__drop-zone {
  border-color: var(--color-base-700);
  background-color: var(--color-base-800);
}

.dark .bc-base-input-container--disabled .bc-file-input__drop-zone:hover {
  border-color: var(--color-base-700);
  background-color: var(--color-base-800);
}

.dark .bc-base-input-container--disabled .bc-file-input__drop-zone-content {
  color: var(--color-base-600);
}

.dark .bc-file-input__compact-placeholder {
  color: var(--color-base-400);
}

.dark .bc-file-input__compact-value {
  color: var(--text-normal);
}

.dark .bc-file-input__compact-value-item {
  background-color: var(--color-base-800);
}

.dark .bc-file-input__compact-clear {
  color: var(--color-base-500);
}

.dark .bc-file-input__compact-clear:hover {
  background-color: color-mix(
    in srgb,
    var(--color-danger-500) 15%,
    transparent
  );
  color: var(--color-danger-400);
}

.dark .bc-file-input__compact-preview {
  background-color: var(--color-base-800);
}

.dark .bc-file-input__compact-drop-zone {
  border-color: var(--color-base-600);
}

.dark .bc-file-input__compact-drop-zone:hover {
  border-color: var(--color-primary-400);
  background-color: color-mix(
    in srgb,
    var(--color-primary-500) 10%,
    transparent
  );
}

.dark .bc-file-input__compact-drop-zone .bc-file-input__compact-placeholder {
  color: var(--color-base-400);
}

.dark .bc-file-input__compact-file-item {
  background-color: var(--color-base-800);
}

.dark .bc-file-input__compact-file-item:hover {
  background-color: var(--color-base-700);
}

.dark .bc-file-input__compact-file-name {
  color: var(--text-normal);
}

.dark .bc-file-input__compact-file-meta {
  color: var(--color-base-400);
}

.dark .bc-file-input__compact-remove-button {
  color: var(--color-base-500);
}

.dark .bc-file-input__compact-remove-button:hover {
  background-color: color-mix(
    in srgb,
    var(--color-danger-500) 15%,
    transparent
  );
  color: var(--color-danger-400);
}

.dark .bc-base-input-container--error .bc-file-input__compact-drop-zone {
  border-color: var(--color-danger-600);
}

.dark .bc-base-input-container--error .bc-file-input__compact-drop-zone:hover {
  border-color: var(--color-danger-500);
  background-color: color-mix(
    in srgb,
    var(--color-danger-500) 10%,
    transparent
  );
}

.dark .bc-base-input-container--disabled .bc-file-input__compact-drop-zone {
  border-color: var(--color-base-700);
  background-color: var(--color-base-800);
}

.dark
  .bc-base-input-container--disabled
  .bc-file-input__compact-drop-zone:hover {
  border-color: var(--color-base-700);
  background-color: var(--color-base-800);
}

.bc-flyout-container {
  z-index: var(--z-index-popover);
}

/* Override bc-animated-toggle--closed display:none so floating-ui can position the element */
.bc-flyout-container.bc-animated-toggle--closed {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.bc-flyout {
  /* Base flyout styles */
  background-color: var(--color-neutral-50);
  border: var(--border-width-thin) solid var(--color-neutral-200);
  border-radius: var(--radius-popover, var(--radius-md));
  box-shadow: var(--shadow-popover, var(--shadow-lg));
  padding: var(--spacing-sm);
}

/* Strip flyout panel styles when containing a menu (menu provides its own) */
.bc-flyout:has(.bc-menu) {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* Pointer events management */
.bc-flyout-container.bc-animated-toggle--start-opening,
.bc-flyout-container.bc-animated-toggle--closing,
.bc-flyout-container.bc-animated-toggle--start-closing {
  pointer-events: none;
}

.bc-flyout-container.bc-animated-toggle--opening,
.bc-flyout-container.bc-animated-toggle--opened {
  pointer-events: auto;
}

/* Dark mode */
.dark .bc-flyout {
  background-color: var(--color-base-800);
  border-color: var(--color-base-700);
}

.bc-group {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bc-group--direction-column {
  flex-direction: column;
}

.bc-group--direction-row {
  flex-direction: row;
}

.bc-group--align-start {
  align-items: flex-start;
}

.bc-group--align-center {
  align-items: center;
}

.bc-group--align-end {
  align-items: flex-end;
}

.bc-group--justify-between {
  justify-content: space-between;
}

.bc-group--justify-center {
  justify-content: center;
}

.bc-group--justify-end {
  justify-content: flex-end;
}

.bc-group--gap-0 {
  gap: 0;
}

.bc-group--gap-1 {
  gap: var(--spacing-xs);
}

.bc-group--gap-2 {
  gap: var(--spacing-sm);
}

.bc-group--gap-4 {
  gap: var(--spacing-lg);
}

.bc-group--gap-md {
  gap: var(--spacing-md);
}

.bc-group--grow {
  flex-grow: 1;
}

/* History Timeline */
.bc-history-timeline {
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
}

/* Filter chips */
.bc-history-timeline__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-smh);
  margin-bottom: var(--spacing-lg);
}

.bc-history-timeline__filter {
  padding: var(--spacing-sm) var(--spacing-mdh);
  border: var(--border-width-thin) solid var(--color-base-200);
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  font-size: var(--font-size-xs);
  color: var(--color-base-500);
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms ease;
}

.bc-history-timeline__filter:hover {
  background: var(--color-base-50);
  color: var(--color-base-700);
}

.bc-history-timeline__filter--active {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

/* Timeline list */
.bc-history-timeline__list {
  position: relative;
}

/* Entry */
.bc-history-timeline__entry {
  display: flex;
  gap: var(--spacing-mdh);
  padding-bottom: var(--spacing-lgh);
}

/* Timeline line + dot */
.bc-history-timeline__line {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--spacing-lg);
  flex-shrink: 0;
  position: relative;
}

.bc-history-timeline__line::after {
  content: '';
  position: absolute;
  top: var(--spacing-lg);
  bottom: calc(-1 * var(--spacing-sm));
  left: 50%;
  width: 1.5px;
  background: var(--color-base-200);
  transform: translateX(-50%);
}

.bc-history-timeline__entry:last-child .bc-history-timeline__line::after {
  display: none;
}

.bc-history-timeline__dot {
  width: calc(var(--spacing-base) * 2.5);
  height: calc(var(--spacing-base) * 2.5);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: calc(var(--spacing-base) * 0.75);
  z-index: 1;
}

/* Content */
.bc-history-timeline__content {
  flex: 1;
  min-width: 0;
}

.bc-history-timeline__content-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.bc-history-timeline__action {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bc-history-timeline__time {
  font-size: 10px;
  color: var(--color-base-400);
}

.bc-history-timeline__target {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-base-800);
  margin-bottom: var(--spacing-xs);
}

.bc-history-timeline__detail {
  font-size: var(--font-size-xs);
  color: var(--color-base-500);
  line-height: 1.4;
  margin-bottom: var(--spacing-smh);
}

.bc-history-timeline__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.bc-history-timeline__actor {
  display: flex;
  align-items: center;
  gap: var(--spacing-smh);
  font-size: var(--font-size-xs);
  color: var(--color-base-500);
}

.bc-history-timeline__avatar {
  width: var(--spacing-lgh);
  height: var(--spacing-lgh);
  border-radius: 50%;
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Empty state */
.bc-history-timeline__empty {
  padding: var(--spacing-xl);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-base-400);
}

/* Dark mode */
.dark .bc-history-timeline__filter {
  border-color: var(--color-base-600);
  color: var(--color-base-400);
}

.dark .bc-history-timeline__filter:hover {
  background: var(--color-base-700);
}

.dark .bc-history-timeline__filter--active {
  background: color-mix(in srgb, var(--color-primary-600) 15%, transparent);
  border-color: var(--color-primary-600);
  color: var(--color-primary-300);
}

.dark .bc-history-timeline__line::after {
  background: var(--color-base-700);
}

.dark .bc-history-timeline__target {
  color: var(--color-base-100);
}

.dark .bc-history-timeline__avatar {
  background: var(--color-primary-800);
  color: var(--color-primary-200);
}

.bc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
  box-sizing: content-box;
  color: var(--icon-color, currentColor);
}

.dark .bc-icon {
  color: var(--icon-color-dark, var(--icon-color, currentColor));
}

.bc-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bc-icon--xs {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
}

.bc-icon--sm {
  width: var(--spacing-lgh);
  height: var(--spacing-lgh);
}

.bc-icon--md {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
}

.bc-icon--lg {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
}

.bc-icon--xl {
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
}

/* Indicator Component */
.bc-indicator {
  position: relative;
  display: inline-flex;
}

.bc-indicator__badge {
  position: absolute;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-none);
  white-space: nowrap;
  background-color: var(--indicator-bg);
  color: var(--indicator-text);
}

/* Placement variants */
.bc-indicator--top-right {
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
}

.bc-indicator--top-left {
  top: 0;
  left: 0;
  transform: translate(-40%, -40%);
}

.bc-indicator--bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(40%, 40%);
}

.bc-indicator--bottom-left {
  bottom: 0;
  left: 0;
  transform: translate(-40%, 40%);
}

/* Dot variant — small circle with no text */
.bc-indicator--dot.bc-indicator--size-xs {
  width: var(--spacing-smh);
  height: var(--spacing-smh);
}

.bc-indicator--dot.bc-indicator--size-sm {
  width: var(--spacing-md);
  height: var(--spacing-md);
}

.bc-indicator--dot.bc-indicator--size-md {
  width: calc(var(--spacing-base) * 2.5);
  height: calc(var(--spacing-base) * 2.5);
}

.bc-indicator--dot.bc-indicator--size-lg {
  width: var(--spacing-mdh);
  height: var(--spacing-mdh);
}

.bc-indicator--dot.bc-indicator--size-xl {
  width: calc(var(--spacing-base) * 3.5);
  height: calc(var(--spacing-base) * 3.5);
}

/* Count variant — pill badge with text */
.bc-indicator--count {
  min-width: 1.25em;
  height: 1.25em;
  padding: 0 0.35em;
  border-radius: 999px;
}

.bc-indicator--count.bc-indicator--size-xs {
  font-size: var(--font-size-xs);
}

.bc-indicator--count.bc-indicator--size-sm {
  font-size: var(--font-size-xs);
}

.bc-indicator--count.bc-indicator--size-md {
  font-size: var(--font-size-sm);
}

.bc-indicator--count.bc-indicator--size-lg {
  font-size: var(--font-size-md);
}

.bc-indicator--count.bc-indicator--size-xl {
  font-size: var(--font-size-lg);
}

/* Dark mode */
.dark .bc-indicator__badge {
  background-color: var(--indicator-bg-dark);
  color: var(--indicator-text-dark);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .bc-indicator__badge {
    transition: none;
  }
}

/* Input Adornment Component */
.bc-input-adornment {
  display: grid;
  align-items: center;
  justify-items: center;
  color: var(--color-neutral-500);
  white-space: nowrap;
  user-select: none;
  line-height: var(--line-height-none);
  align-self: stretch;
}

/* Square spacer: occupies height×height, ensuring min-width >= height */
.bc-input-adornment::before {
  content: '';
  grid-row: 1;
  grid-column: 1;
  height: 100%;
  aspect-ratio: 1 / 1;
}

/* Content overlaps the spacer on the same grid cell */
.bc-input-adornment__content {
  grid-row: 1;
  grid-column: 1;
}

/* Size variants — padding on __content so the square spacer isn't offset */
.bc-input-adornment--size-xs {
  font-size: var(--font-size-xs);
}
.bc-input-adornment--size-xs > .bc-input-adornment__content {
  padding-inline: var(--spacing-xs);
}

.bc-input-adornment--size-sm {
  font-size: var(--font-size-sm);
}
.bc-input-adornment--size-sm > .bc-input-adornment__content {
  padding-inline: var(--spacing-sm);
}

.bc-input-adornment--size-md {
  font-size: var(--font-size-md);
}
.bc-input-adornment--size-md > .bc-input-adornment__content {
  padding-inline: var(--spacing-md);
}

.bc-input-adornment--size-lg {
  font-size: var(--font-size-lg);
}
.bc-input-adornment--size-lg > .bc-input-adornment__content {
  padding-inline: var(--spacing-lg);
}

.bc-input-adornment--size-xl {
  font-size: var(--font-size-xl);
}
.bc-input-adornment--size-xl > .bc-input-adornment__content {
  padding-inline: var(--spacing-xl);
}

/* Filled variant */
.bc-input-adornment--filled {
  background-color: var(--color-neutral-100);
}

/* Dark mode */
.dark .bc-input-adornment--filled {
  background-color: var(--bg-subtle);
}

/* Input Container Component */
.bc-base-input-container,
.bc-input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bc-input-container {
  width: 100%;
  /* Add a transparent border to match button height math */
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-control, var(--radius-md));
  box-shadow: var(--shadow-xs);
  line-height: var(--line-height-none);
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
  align-items: stretch;
}

/* Default state */
.bc-base-input-container--default,
.bc-input-container--default {
  color: var(--color-neutral-900);
}

.bc-input-container--default {
  background-color: var(--color-white);
  outline: var(--outline-width-default) solid var(--border-divider);
  outline-offset: calc(-1 * var(--outline-width-default));
}

.bc-base-input-container ::placeholder,
.bc-input-container ::placeholder {
  color: var(--color-neutral-400);
}

/* Disabled state */
.bc-base-input-container--disabled,
.bc-input-container--disabled {
  color: var(--color-neutral-500);
  cursor: not-allowed;
}

.bc-input-container--disabled {
  background-color: var(--color-neutral-200);
  outline: var(--outline-width-focus) solid var(--border-divider);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

/* Focus within state */
.bc-input-container:focus-within {
  z-index: var(--z-index-navigation);
  outline: var(--outline-width-focus) solid var(--interactive-focus);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

/* Error state */
.bc-input-container--error {
  outline: var(--outline-width-focus) solid var(--color-danger-600);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

.bc-input-container--error:focus-within {
  outline: var(--outline-width-focus) solid var(--color-danger-600);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

/* Before and after elements */
.bc-input-container__before,
.bc-input-container__after {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-navigation);
}

/* Input wrapper */
.bc-input-container__input {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.bc-input-container__input--grow {
  flex-grow: 1;
}

/* Input element styles */
.bc-input-container input,
.bc-input-container textarea,
.bc-input-container select,
.bc-input-container .bc-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  line-height: 1.1;
}

/* Normalize native element heights for consistent input container sizing */
.bc-input-container input,
.bc-input-container select {
  padding: 0;
  padding-block: var(--spacing-px);
  line-height: var(--line-height-none);
}

.bc-input-container textarea {
  resize: vertical;
  line-height: var(--line-height-normal);
}

/* Password toggle button */
.bc-input-container__password-toggle {
  font-size: var(--font-size-sm);
  fill: var(--color-neutral-400);
  border-radius: var(--radius-full);
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* aspect-ratio: 1 / 1; */
}

.bc-input-container__password-toggle:hover {
  background-color: var(--color-neutral-100);
}

/* Nullable reset button */
.bc-input-container__reset {
  font-size: var(--font-size-sm);
  fill: var(--color-neutral-400);
  border-radius: var(--radius-full);
  padding: var(--spacing-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-base) * 7);
  height: calc(var(--spacing-base) * 7);
}

.bc-input-container__reset:hover:not(:disabled) {
  background-color: var(--color-neutral-100);
}

.bc-input-container__reset:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Tags input wrapper */
.bc-input-container__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-stack-sm);
  align-items: center;
}

/* Tags selector (dropdown trigger area in select-tags) */
.bc-input-container__tags-selector {
  flex-grow: 1;
  background-color: transparent;
  min-width: 100px;
  min-height: var(--spacing-lg);
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

/* Tags input text field */
.bc-input-container .bc-input-container__tags-input {
  min-width: 8rem;
  flex-shrink: 0;
  display: inline-flex;
  width: auto;
  flex-grow: 1;
}

.bc-input-container__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
}

/* Dark mode styles */
.dark .bc-input-container--default {
  background-color: var(--bg-surface);
  color: var(--text-normal);
  outline: var(--outline-width-focus) solid var(--border-default);
}

.dark .bc-input-container--default:focus-within {
  outline: var(--outline-width-focus) solid var(--interactive-focus);
  background-color: var(--bg-elevated);
}

.dark .bc-input-container::placeholder,
.dark .bc-base-input-container::placeholder {
  color: var(--color-gray-500);
}

.dark .bc-input-container--disabled {
  background-color: var(--bg-subtle);
  outline: var(--outline-width-focus) solid var(--border-divider);
  opacity: 0.6;
}

.dark .bc-input-container--error {
  outline: var(--outline-width-focus) solid var(--color-danger-400);
  background-color: var(--color-danger-950);
}

.dark .bc-input-container--error:focus-within {
  outline: var(--outline-width-focus) solid var(--color-danger-400);
  background-color: var(--color-danger-900);
}

.dark .bc-input-container__password-toggle {
  fill: var(--text-muted);
}

.dark .bc-input-container__password-toggle:hover {
  background-color: var(--interactive-hover);
  fill: var(--text-normal);
}

/* Dark mode for nullable reset */
.dark .bc-input-container__reset {
  fill: var(--text-muted);
}

.dark .bc-input-container__reset:hover:not(:disabled) {
  background-color: var(--interactive-hover);
  fill: var(--text-normal);
}

.dark .bc-input-container__reset:disabled {
  opacity: 0.3;
}

/* Responsive styles */
@media (width >= 40rem) {
  .bc-input-container {
    /* Do not force font-size; sizing classes control this */
    line-height: var(--line-height-none);
  }
}

/* Accessibility adjustments */
@media (prefers-contrast: high) {
  .bc-input-container,
  .bc-input {
    border-width: var(--border-width-medium);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-input-container,
  .bc-input {
    transition: none;
  }
}

/* Input Wrapper Component */
.bc-input-wrapper {
  display: flex;
  flex-direction: column;
}

.bc-input-wrapper--full-width {
  width: 100%;
}

/* Horizontal layout variants - use grid for proper error positioning */
.bc-input-wrapper--horizontal,
.bc-input-wrapper--horizontal-label-right,
.bc-input-wrapper--horizontal-fixed {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--spacing-sm, var(--spacing-lg));
}

/* Horizontal with label on right */
.bc-input-wrapper--horizontal-label-right {
  grid-template-columns: 1fr auto;
}

.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__header {
  order: 2;
}

.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__content {
  order: 1;
}

/* Horizontal with fixed-width label */
.bc-input-wrapper--horizontal-fixed {
  grid-template-columns: var(--input-wrapper-label-width, 12rem) 1fr;
}

/* Label header container */
.bc-input-wrapper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

/* Label section container */
.bc-input-wrapper__label-section {
  display: flex;
  flex-direction: column;
}

/* Label container */
.bc-input-wrapper__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-2xs, var(--spacing-xs));
}

/* Label text styles */
.bc-input-wrapper__label-text {
  text-wrap: nowrap;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Label text states */
.bc-input-wrapper__label-text--default {
  color: var(--color-gray-600);
  font-weight: var(--font-weight-semibold);
}

.bc-input-wrapper__label-text--disabled {
  color: var(--color-gray-500);
  font-weight: var(--font-weight-normal);
}

.bc-input-wrapper__label-text--error {
  color: var(--color-danger-600);
  font-weight: var(--font-weight-normal);
}

/* Required symbol */
.bc-input-wrapper__required {
  font-size: var(--font-size-xs);
  color: var(--color-danger-600);
  vertical-align: top;
}

/* Error messages in horizontal mode span full width on their own row */
.bc-input-wrapper--horizontal .bc-input-wrapper__error,
.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error,
.bc-input-wrapper--horizontal-fixed .bc-input-wrapper__error {
  grid-column: 1 / -1;
}

.bc-input-wrapper--horizontal-label-right .bc-input-wrapper__error {
  order: 3;
}

/* Description text */
.bc-input-wrapper__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: var(--line-height-normal);
}

/* Description under label in horizontal mode */
.bc-input-wrapper__description--under-label {
  font-size: var(--font-size-xs);
}

/* Error message */
.bc-input-wrapper__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger-500);
  line-height: var(--line-height-normal);
}

/* Dark mode styles */
.dark .bc-input-wrapper__label-text--default {
  color: var(--text-normal);
}

.dark .bc-input-wrapper__label-text--error {
  color: var(--color-danger-300);
}

.dark .bc-input-wrapper__required {
  color: var(--color-danger-400);
}

.dark .bc-input-wrapper__error {
  color: var(--color-danger-400);
}

.bc-json-schema-object {
  border-left: var(--spacing-md) solid var(--color-base-200);
  padding-inline-start: var(--spacing-md);
}

.dark .bc-json-schema-object {
  border-left-color: var(--color-base-700);
}

.bc-schema-grid {
  display: grid;
}

.bc-schema-grid--gap-4 {
  gap: var(--spacing-stack-lg, var(--spacing-lg));
}

.bc-schema-grid--cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.bc-schema-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bc-schema-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bc-schema-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bc-schema-grid--cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bc-schema-grid--cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (width >= 40rem) {
  .bc-schema-grid--cols-sm-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-sm-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (width >= 48rem) {
  .bc-schema-grid--cols-md-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-md-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (width >= 64rem) {
  .bc-schema-grid--cols-lg-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-lg-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (width >= 80rem) {
  .bc-schema-grid--cols-xl-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-xl-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (width >= 96rem) {
  .bc-schema-grid--cols-2xl-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .bc-schema-grid--cols-2xl-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.bc-array-control__item-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-700);
}

.dark .bc-array-control__item-label {
  color: var(--color-neutral-200);
}

.bc-array-control__indicator {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.bc-array-control__indicator--error {
  color: var(--color-danger-600);
}

.bc-array-control__indicator--success {
  color: var(--color-success-600);
}

.dark .bc-array-control__indicator--error {
  color: var(--color-danger-400);
}

.dark .bc-array-control__indicator--success {
  color: var(--color-success-400);
}

.bc-array-control__summary {
  font-size: var(--font-size-sm);
}

.bc-array-control__summary--success {
  color: var(--color-success-600);
}

.bc-array-control__summary--error {
  color: var(--color-danger-600);
  font-weight: var(--font-weight-medium);
}

.dark .bc-array-control__summary--success {
  color: var(--color-success-300);
}

.dark .bc-array-control__summary--error {
  color: var(--color-danger-300);
}

.bc-object-helpers__row {
  display: grid;
  gap: var(--spacing-stack-sm, var(--spacing-md));
  grid-template-columns: 2fr 3fr min-content;
}

.bc-object-helpers__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger-600);
}

.bc-object-helpers__description {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.bc-object-helpers__remove {
  padding-top: var(--spacing-mdh);
  flex-shrink: 1;
}

.dark .bc-object-helpers__error {
  color: var(--color-danger-400);
}

.bc-json-schema-form__error {
  color: var(--color-danger-600);
  font-size: var(--font-size-sm);
}

.dark .bc-json-schema-form__error {
  color: var(--color-danger-400);
}

/* JSON Schema Display - Read-only value rendering */

/* Grid containers — parent holds the shared column tracks */
.bc-json-schema-display__fields,
.bc-json-schema-display__object {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--spacing-mdh);
}

/* Each field spans both parent columns and inherits their sizing via subgrid */
.bc-json-schema-display__field {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  row-gap: calc(var(--spacing-base) * 0.25);
  align-items: baseline;
  padding-block: calc(var(--spacing-base) * 0.5);
}

/* Extra properties also participate in the shared grid */
.bc-json-schema-display__extra-property {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.bc-json-schema-display__label-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  grid-column: 1;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-json-schema-display__description,
.bc-json-schema-display__mismatches {
  grid-column: 1 / -1;
}

.bc-json-schema-display__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-neutral-500);
}

.dark .bc-json-schema-display__label {
  color: var(--color-neutral-400);
}

.bc-json-schema-display__required {
  font-size: var(--font-size-sm);
  color: var(--color-danger-600);
  font-weight: var(--font-weight-bold);
}

.dark .bc-json-schema-display__required {
  color: var(--color-danger-400);
}

.bc-json-schema-display__deprecated {
  font-size: var(--font-size-xs);
  color: var(--color-warning-600);
  background-color: var(--color-warning-100);
  padding: 0.1em var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
}

.dark .bc-json-schema-display__deprecated {
  color: var(--color-warning-300);
  background-color: var(--color-warning-900);
}

.bc-json-schema-display__description {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.bc-json-schema-display__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-900);
}

.dark .bc-json-schema-display__value {
  color: var(--color-neutral-100);
}

.bc-json-schema-display__value--null {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-400);
  font-style: italic;
}

.dark .bc-json-schema-display__value--null {
  color: var(--color-neutral-500);
}

.bc-json-schema-display__value--missing {
  font-size: var(--font-size-sm);
  color: var(--color-danger-600);
  font-style: italic;
}

.dark .bc-json-schema-display__value--missing {
  color: var(--color-danger-400);
}

.bc-json-schema-display__value-context {
  font-size: var(--font-size-xs);
  color: var(--color-neutral-400);
  margin-left: var(--spacing-sm);
}

.dark .bc-json-schema-display__value-context {
  color: var(--color-neutral-500);
}

/* Links */
.bc-json-schema-display__link {
  color: var(--color-primary-600);
  text-decoration: underline;
  font-size: var(--font-size-sm);
}

.bc-json-schema-display__link:hover {
  color: var(--color-primary-700);
}

.dark .bc-json-schema-display__link {
  color: var(--color-primary-400);
}

.dark .bc-json-schema-display__link:hover {
  color: var(--color-primary-300);
}

/* Color swatch */
.bc-json-schema-display__color-display {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.bc-json-schema-display__color-swatch {
  display: inline-block;
  width: var(--spacing-lgh);
  height: var(--spacing-lgh);
  border-radius: var(--radius-sm);
  border: var(--border-width-thin) solid var(--color-neutral-300);
  vertical-align: middle;
}

.dark .bc-json-schema-display__color-swatch {
  border-color: var(--color-neutral-600);
}

/* Monospace */
.bc-json-schema-display__monospace {
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-sm);
}

/* Pre-formatted */
.bc-json-schema-display__pre {
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--color-neutral-50);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: var(--border-width-thin) solid var(--color-neutral-200);
  margin: 0;
  overflow-x: auto;
}

.dark .bc-json-schema-display__pre {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

/* Boolean */
.bc-json-schema-display__boolean {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--spacing-smh);
  border-radius: var(--radius-full);
  line-height: 1.6;
}

.bc-json-schema-display__boolean--true {
  color: var(--color-success-700);
  background-color: var(--color-success-100);
}

.bc-json-schema-display__boolean--false {
  color: var(--color-danger-700);
  background-color: var(--color-danger-100);
}

.dark .bc-json-schema-display__boolean--true {
  color: var(--color-success-300);
  background-color: var(--color-success-900);
}

.dark .bc-json-schema-display__boolean--false {
  color: var(--color-danger-300);
  background-color: var(--color-danger-900);
}

/* Object */
.bc-json-schema-display__object {
  border-left: var(--spacing-md) solid var(--color-base-200);
  padding-inline-start: var(--spacing-md);
}

.dark .bc-json-schema-display__object {
  border-left-color: var(--color-neutral-700);
}

/* Extra properties */
.bc-json-schema-display__extra-property {
  opacity: 0.7;
  border-left: var(--border-width-medium) dashed var(--color-warning-400);
  padding-inline-start: var(--spacing-md);
}

.dark .bc-json-schema-display__extra-property {
  border-left-color: var(--color-warning-600);
}

/* Array */
.bc-json-schema-display__array {
  display: flex;
  flex-direction: column;
}

.bc-json-schema-display__array-item {
  display: flex;
  gap: var(--spacing-smh);
  align-items: baseline;
}

/* Strip field wrapper padding inside array items */
.bc-json-schema-display__array-item > .bc-json-schema-display__field {
  padding-block: 0;
}

.bc-json-schema-display__array-index {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-neutral-400);
  font-family: var(--font-family-mono, monospace);
  min-width: var(--spacing-2xl);
  text-align: right;
  flex-shrink: 0;
}

.dark .bc-json-schema-display__array-index {
  color: var(--color-neutral-500);
}

.bc-json-schema-display__empty {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-400);
  font-style: italic;
}

.dark .bc-json-schema-display__empty {
  color: var(--color-neutral-500);
}

/* Composition (oneOf/anyOf) branch label */
.bc-json-schema-display__branch-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-600);
  padding: 0 var(--spacing-sm);
  background-color: var(--color-primary-50);
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-bottom: var(--spacing-sm);
}

.dark .bc-json-schema-display__branch-label {
  color: var(--color-primary-300);
  background-color: var(--color-primary-900);
}

.bc-json-schema-display__branch-label--ambiguous {
  color: var(--color-warning-700);
  background-color: var(--color-warning-100);
}

.dark .bc-json-schema-display__branch-label--ambiguous {
  color: var(--color-warning-300);
  background-color: var(--color-warning-900);
}

.bc-json-schema-display__branch-label--no-match {
  color: var(--color-danger-700);
  background-color: var(--color-danger-100);
}

.dark .bc-json-schema-display__branch-label--no-match {
  color: var(--color-danger-300);
  background-color: var(--color-danger-900);
}

/* Mismatch indicators */
.bc-json-schema-display__mismatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.bc-json-schema-display__mismatch {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--spacing-smh);
  border-radius: var(--radius-full);
  line-height: 1.6;
}

.bc-json-schema-display__mismatch--type-mismatch {
  color: var(--color-danger-700);
  background-color: var(--color-danger-100);
}

.bc-json-schema-display__mismatch--missing-required {
  color: var(--color-danger-700);
  background-color: var(--color-danger-100);
}

.bc-json-schema-display__mismatch--extra-property {
  color: var(--color-warning-700);
  background-color: var(--color-warning-100);
}

.bc-json-schema-display__mismatch--enum-mismatch {
  color: var(--color-warning-700);
  background-color: var(--color-warning-100);
}

.bc-json-schema-display__mismatch--const-mismatch {
  color: var(--color-warning-700);
  background-color: var(--color-warning-100);
}

.bc-json-schema-display__mismatch--constraint-violation {
  color: var(--color-danger-700);
  background-color: var(--color-danger-100);
}

.bc-json-schema-display__mismatch-indicator {
  font-size: var(--font-size-xs);
  color: var(--color-danger-600);
  font-style: italic;
  margin-left: var(--spacing-sm);
}

.dark .bc-json-schema-display__mismatch--type-mismatch,
.dark .bc-json-schema-display__mismatch--missing-required {
  color: var(--color-danger-300);
  background-color: var(--color-danger-900);
}

.dark .bc-json-schema-display__mismatch--extra-property,
.dark .bc-json-schema-display__mismatch--enum-mismatch,
.dark .bc-json-schema-display__mismatch--const-mismatch {
  color: var(--color-warning-300);
  background-color: var(--color-warning-900);
}

.dark .bc-json-schema-display__mismatch--constraint-violation {
  color: var(--color-danger-300);
  background-color: var(--color-danger-900);
}

.dark .bc-json-schema-display__mismatch-indicator {
  color: var(--color-danger-400);
}

/**
 * JSON Structure Form Component Styles
 *
 * CSS styles for JSON Structure form components.
 * Uses BEM-like naming with bc-json-structure- prefix.
 */

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

.bc-json-structure-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md, var(--spacing-mdh));
}

/* =============================================================================
   Object Layout
   ============================================================================= */

.bc-json-structure-object {
  border-left: var(--spacing-md) solid var(--color-base-200);
  padding-inline-start: var(--spacing-md);
}

.bc-json-structure-object-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-md, var(--spacing-mdh));
}

.bc-json-structure-object--nested {
  margin-top: var(--spacing-stack-sm, var(--spacing-md));
}

/* Additional properties */
.bc-json-structure-additional-property {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xs, var(--spacing-base));
  padding: var(--spacing-inline-sm, var(--spacing-md));
  border: var(--border-width-thin) solid var(--color-base-200);
  border-radius: var(--radius-sm);
  background: var(--color-base-50);
}

.bc-json-structure-additional-property-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-inline-sm, var(--spacing-md));
}

.bc-json-structure-additional-property-value {
  padding-inline-start: var(--spacing-md);
}

/* =============================================================================
   Array/Set/Map Layout
   ============================================================================= */

.bc-json-structure-array,
.bc-json-structure-set,
.bc-json-structure-map {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

.bc-json-structure-array-items,
.bc-json-structure-set-items,
.bc-json-structure-map-entries {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

.bc-json-structure-array-item,
.bc-json-structure-set-item,
.bc-json-structure-map-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-inline-sm, var(--spacing-md));
}

.bc-json-structure-array-item-content,
.bc-json-structure-set-item-content,
.bc-json-structure-map-entry-content {
  flex: 1;
  min-width: 0;
}

.bc-json-structure-array-item-actions,
.bc-json-structure-set-item-actions,
.bc-json-structure-map-entry-actions {
  flex-shrink: 0;
}

.bc-json-structure-collection-add {
  margin-top: var(--spacing-stack-xs, var(--spacing-base));
}

/* Map entry specific styles */
.bc-json-structure-map-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-inline-sm, var(--spacing-md));
  margin-bottom: var(--spacing-stack-xs, var(--spacing-base));
}

.bc-json-structure-map-entry-key {
  font-family: var(--font-family-mono);
  font-weight: 600;
  color: var(--color-base-700);
}

.bc-json-structure-map-entry-value {
  padding-inline-start: var(--spacing-md);
}

/* Set error indicator */
.bc-json-structure-set-error {
  color: var(--color-danger-500);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-stack-xs, var(--spacing-base));
}

/* =============================================================================
   Tuple Layout
   ============================================================================= */

.bc-json-structure-tuple {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

.bc-json-structure-tuple-label {
  font-weight: 600;
  color: var(--color-base-700);
  margin-bottom: var(--spacing-stack-xs, var(--spacing-base));
}

.bc-json-structure-tuple-description {
  color: var(--color-base-500);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-stack-xs, var(--spacing-base));
}

.bc-json-structure-tuple-elements {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

.bc-json-structure-tuple-element {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xs, var(--spacing-base));
}

.bc-json-structure-tuple-element-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-inline-xs, calc(var(--spacing-base) * 0.5));
  color: var(--color-base-600);
  font-size: var(--font-size-sm);
}

.bc-json-structure-tuple-position {
  font-family: var(--font-family-mono);
  font-weight: 600;
  color: var(--color-base-500);
}

.bc-json-structure-tuple-element-name {
  font-weight: 500;
}

.bc-json-structure-tuple-element-control {
  padding-inline-start: var(--spacing-md);
}

/* =============================================================================
   Choice Layout
   ============================================================================= */

.bc-json-structure-choice {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

.bc-json-structure-choice-selector {
  margin-bottom: var(--spacing-stack-sm, var(--spacing-md));
}

.bc-json-structure-choice-options {
  padding-inline-start: var(--spacing-md);
}

/* =============================================================================
   Grid Layout (for objects with many properties)
   ============================================================================= */

.bc-structure-grid {
  display: grid;
}

.bc-structure-grid--gap-4 {
  gap: var(--spacing-stack-lg, var(--spacing-lg));
}

.bc-structure-grid--cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.bc-structure-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bc-structure-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bc-structure-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (width >= 40rem) {
  .bc-structure-grid--cols-sm-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-structure-grid--cols-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-structure-grid--cols-sm-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-structure-grid--cols-sm-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (width >= 48rem) {
  .bc-structure-grid--cols-md-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-structure-grid--cols-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-structure-grid--cols-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-structure-grid--cols-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (width >= 64rem) {
  .bc-structure-grid--cols-lg-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bc-structure-grid--cols-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bc-structure-grid--cols-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bc-structure-grid--cols-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =============================================================================
   Validation States
   ============================================================================= */

.bc-json-structure-error {
  color: var(--color-danger-500);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-stack-xs, var(--spacing-base));
}

.bc-json-structure-field--invalid {
  --field-border-color: var(--color-danger-500);
}

.bc-json-structure-field--valid {
  --field-border-color: var(--color-success-500, #16a34a);
}

/* =============================================================================
   Metadata Display
   ============================================================================= */

.bc-json-structure-description {
  color: var(--color-base-500);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-stack-xs, var(--spacing-base));
}

.bc-json-structure-deprecated {
  opacity: 0.7;
  position: relative;
}

.bc-json-structure-deprecated::before {
  content: '(deprecated)';
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--font-size-xs);
  color: var(--color-warning-500, #d97706);
  background: var(--color-warning-100, #fef3c7);
  padding: 0.125em 0.5em;
  border-radius: var(--radius-sm);
}

.bc-json-structure-deprecated-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-inline-xs, calc(var(--spacing-base) * 0.5));
  font-size: var(--font-size-xs);
  color: var(--color-warning-700);
  background: var(--color-warning-100);
  padding: 0.125em 0.5em;
  border-radius: var(--radius-sm);
  margin-inline-start: var(
    --spacing-inline-xs,
    calc(var(--spacing-base) * 0.5)
  );
}

.bc-json-structure-required-indicator {
  color: var(--color-danger-500);
  margin-inline-start: 0.25em;
}

/* =============================================================================
   Const/Enum Display
   ============================================================================= */

.bc-json-structure-const {
  font-family: var(--font-family-mono);
  background: var(--color-base-100);
  padding: var(--spacing-inline-xs, calc(var(--spacing-base) * 0.5))
    var(--spacing-inline-sm, var(--spacing-md));
  border-radius: var(--radius-sm);
  color: var(--color-base-600);
}

/* =============================================================================
   Read-Only State
   ============================================================================= */

.bc-json-structure-readonly {
  pointer-events: none;
  opacity: 0.7;
}

.bc-json-structure-readonly input,
.bc-json-structure-readonly select,
.bc-json-structure-readonly textarea {
  background: var(--color-base-100);
  cursor: not-allowed;
}

/* =============================================================================
   Placeholder Styles (temporary, for development)
   ============================================================================= */

.bc-json-structure-placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xs, var(--spacing-base));
  padding: var(--spacing-inline-sm, var(--spacing-md));
  border: var(--border-width-thin) dashed var(--color-base-300);
  border-radius: var(--radius-md);
  background: var(--color-base-50);
}

.bc-json-structure-placeholder > span:first-child {
  font-size: var(--font-size-xs);
  color: var(--color-base-400);
  font-family: var(--font-family-mono);
}

.bc-json-structure-unknown {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xs, var(--spacing-base));
  padding: var(--spacing-inline-sm, var(--spacing-md));
  border: var(--border-width-thin) solid var(--color-warning-300);
  border-radius: var(--radius-md);
  background: var(--color-warning-50);
  color: var(--color-warning-700);
}

/* Dark mode */
.dark .bc-json-structure-object {
  border-left-color: var(--color-base-700);
}

.dark .bc-json-structure-additional-property {
  border-color: var(--color-base-700);
  background: var(--color-base-800);
}

.dark .bc-json-structure-map-entry-key {
  color: var(--color-base-300);
}

.dark .bc-json-structure-tuple-label {
  color: var(--color-base-300);
}

.dark .bc-json-structure-tuple-description {
  color: var(--color-base-400);
}

.dark .bc-json-structure-tuple-element-header {
  color: var(--color-base-400);
}

.dark .bc-json-structure-tuple-position {
  color: var(--color-base-400);
}

.dark .bc-json-structure-description {
  color: var(--color-base-400);
}

.dark .bc-json-structure-deprecated::before {
  color: var(--color-warning-400);
  background: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
}

.dark .bc-json-structure-deprecated-badge {
  color: var(--color-warning-300);
  background: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
}

.dark .bc-json-structure-const {
  background: var(--color-base-800);
  color: var(--color-base-300);
}

.dark .bc-json-structure-readonly input,
.dark .bc-json-structure-readonly select,
.dark .bc-json-structure-readonly textarea {
  background: var(--color-base-800);
}

.dark .bc-json-structure-placeholder {
  border-color: var(--color-base-600);
  background: var(--color-base-800);
}

.dark .bc-json-structure-placeholder > span:first-child {
  color: var(--color-base-500);
}

.dark .bc-json-structure-unknown {
  border-color: var(--color-warning-700);
  background: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
  color: var(--color-warning-300);
}

/* Kbd (Keyboard Key) Component */
.bc-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-none);
  border-radius: var(--radius-xs);
  background-color: var(--bg-surface);
  color: var(--text-muted);
  border: var(--border-width-thin) solid var(--border-subtle);
  box-shadow: rgb(229, 229, 229) 0px 1px 0px;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background-color var(--motion-transition-fast) var(--motion-easing-standard),
    box-shadow var(--motion-transition-fast) var(--motion-easing-standard);
}

/* Size variants */
.bc-kbd--size-xs {
  font-size: var(--font-size-xs);
  padding: calc(var(--spacing-base) * 0.25) var(--spacing-base);
  min-width: calc(var(--font-size-xs) + var(--spacing-base) * 1.5);
}

.bc-kbd--size-sm {
  font-size: var(--font-size-sm);
  padding: calc(var(--spacing-base) * 0.5) var(--spacing-smh);
  min-width: calc(var(--font-size-sm) + var(--spacing-base) * 2);
}

.bc-kbd--size-md {
  font-size: var(--font-size-md);
  padding: calc(var(--spacing-base) * 0.5) var(--spacing-md);
  min-width: calc(var(--font-size-md) + var(--spacing-base) * 2.5);
}

/* Dark mode styles */
.dark .bc-kbd {
  border-color: var(--border-default);
  box-shadow:
    0 1px 0 0 var(--border-default),
    0 2px 3px 0 rgba(0, 0, 0, 0.35),
    0 1px 2px 0 rgba(0, 0, 0, 0.25);
}

/* Accessibility adjustments */
@media (prefers-contrast: high) {
  .bc-kbd {
    border-width: var(--border-width-medium);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-kbd {
    transition: none;
  }
}

.bc-label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
}

.bc-label--emphasis {
  font-weight: var(--font-weight-bold);
}

.bc-label--default {
  font-weight: var(--font-weight-medium);
}

.bc-label--muted {
  font-weight: var(--font-weight-medium);
  opacity: 0.5;
}

.bc-label--danger {
  font-weight: var(--font-weight-medium);
  color: var(--color-danger-500);
}

/* Dark mode styles */
.dark .bc-label {
  color: var(--text-normal);
}

.dark .bc-label--danger {
  color: var(--color-danger-400);
}

@layer components {
  /* Lexical Editor Component */

  /* Container wrapper for toolbar + editor */
  .bc-lexical-editor-container {
    display: flex;
    flex-direction: column;
    border: var(--border-width-thin) solid var(--color-neutral-200);
    border-radius: var(--radius-control, var(--radius-md));
    background-color: var(--color-neutral-50);
    overflow: hidden;
    transition: all
      var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  }

  /* Fixed height mode on container: fill parent, constrain children */
  .bc-lexical-editor-container--fixed {
    height: 100%;
  }

  /* Editor surface (contenteditable) */
  .bc-lexical-editor {
    position: relative;
    min-height: 150px;
    padding: var(--spacing-lg);
    outline: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.6;
    color: var(--color-neutral-900);
    background-color: var(--color-white);
  }

  /* Fixed height mode: fill container, scroll on overflow */
  .bc-lexical-editor--fixed {
    flex: 1 1 0;
    overflow-y: auto;
  }

  /* Auto height mode: grow with content */
  .bc-lexical-editor--auto {
    overflow-y: visible;
  }

  /* Focus state */
  .bc-lexical-editor-container:focus-within {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 2px var(--color-primary-100);
  }

  /* Error state */
  .bc-lexical-editor-container--error {
    border-color: var(--color-danger-600);
  }

  .bc-lexical-editor-container--error:focus-within {
    border-color: var(--color-danger-600);
    box-shadow: 0 0 0 2px var(--color-danger-100);
  }

  /* Read-only state */
  .bc-lexical-editor--readonly {
    cursor: default;
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-700);
  }

  /* Placeholder styling */
  .bc-lexical-editor [data-lexical-placeholder] {
    color: var(--color-neutral-400);
    pointer-events: none;
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    user-select: none;
    font-style: italic;
  }

  /* Typography within editor */
  .bc-lexical-editor h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-mdh);
  }

  .bc-lexical-editor h1:first-child {
    margin-top: 0;
  }

  .bc-lexical-editor h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-top: var(--spacing-lgh);
    margin-bottom: calc(var(--spacing-base) * 2.5);
  }

  .bc-lexical-editor h2:first-child {
    margin-top: 0;
  }

  .bc-lexical-editor h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
  }

  .bc-lexical-editor h3:first-child {
    margin-top: 0;
  }

  .bc-lexical-editor h4 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    margin-top: calc(var(--spacing-base) * 3.5);
    margin-bottom: var(--spacing-md);
  }

  .bc-lexical-editor h4:first-child {
    margin-top: 0;
  }

  .bc-lexical-editor h5 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin-top: var(--spacing-mdh);
    margin-bottom: var(--spacing-md);
  }

  .bc-lexical-editor h5:first-child {
    margin-top: 0;
  }

  .bc-lexical-editor h6 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    margin-top: var(--spacing-mdh);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .bc-lexical-editor h6:first-child {
    margin-top: 0;
  }

  .bc-lexical-editor p {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .bc-lexical-editor p:first-child {
    margin-top: 0;
  }

  .bc-lexical-editor p:last-child {
    margin-bottom: 0;
  }

  .bc-lexical-editor blockquote {
    margin: var(--spacing-lg) 0;
    padding-left: var(--spacing-lg);
    border-left: calc(2 * var(--border-width-medium)) solid
      var(--color-neutral-300);
    color: var(--color-neutral-700);
    font-style: italic;
  }

  .bc-lexical-editor ul,
  .bc-lexical-editor ol {
    margin: var(--spacing-mdh) 0;
    padding-left: var(--spacing-xl);
  }

  .bc-lexical-editor ul {
    list-style-type: disc;
  }

  .bc-lexical-editor ol {
    list-style-type: decimal;
  }

  .bc-lexical-editor li {
    margin: var(--spacing-sm) 0;
  }

  .bc-lexical-editor code {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.875em;
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-800);
    padding: var(--spacing-xs) var(--spacing-smh);
    border-radius: var(--radius-xs, 0.25rem);
  }

  .bc-lexical-editor pre {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-md, 0.5rem);
    overflow-x: auto;
    border: var(--border-width-thin) solid var(--color-neutral-200);
  }

  .bc-lexical-editor pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .bc-lexical-editor a {
    color: var(--color-primary-600);
    text-decoration: underline;
    text-underline-offset: 0.125rem;
    cursor: pointer;
  }

  .bc-lexical-editor a:hover {
    color: var(--color-primary-700);
  }

  .bc-lexical-editor hr {
    margin: var(--spacing-xl) 0;
    border: none;
    border-top: var(--border-width-medium) solid var(--color-neutral-200);
  }

  .bc-lexical-editor strong,
  .bc-lexical-bold {
    font-weight: 700;
  }

  .bc-lexical-editor em,
  .bc-lexical-italic {
    font-style: italic;
  }

  .bc-lexical-editor u,
  .bc-lexical-underline {
    text-decoration: underline;
  }

  .bc-lexical-editor s,
  .bc-lexical-strikethrough {
    text-decoration: line-through;
  }

  .bc-lexical-code {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.875em;
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-800);
    padding: var(--spacing-xs) var(--spacing-smh);
    border-radius: var(--radius-xs, 0.25rem);
  }

  .dark .bc-lexical-code {
    background-color: var(--color-neutral-800);
    color: var(--color-neutral-200);
  }

  /* Check list items */
  .bc-lexical-li-checked,
  .bc-lexical-li-unchecked {
    list-style-type: none;
    position: relative;
    padding-left: var(--spacing-xl);
    margin-left: calc(-1 * var(--spacing-xl));
  }

  .bc-lexical-li-checked::before,
  .bc-lexical-li-unchecked::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 1em;
    height: 1em;
    border: var(--border-width-medium) solid var(--color-neutral-400);
    border-radius: var(--radius-xs, 0.25rem);
    cursor: pointer;
  }

  .bc-lexical-li-checked::before {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
  }

  .bc-lexical-li-checked::after {
    content: '';
    position: absolute;
    left: 0.25em;
    top: 0.45em;
    width: 0.5em;
    height: 0.25em;
    border-left: var(--border-width-medium) solid white;
    border-bottom: var(--border-width-medium) solid white;
    transform: rotate(-45deg);
  }

  .bc-lexical-li-checked {
    text-decoration: line-through;
    color: var(--color-neutral-500);
  }

  .dark .bc-lexical-li-checked::before {
    background-color: var(--color-primary-400);
    border-color: var(--color-primary-400);
  }

  .dark .bc-lexical-li-unchecked::before {
    border-color: var(--color-neutral-600);
  }

  /* Dark mode styles */
  .dark .bc-lexical-editor-container {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-700);
  }

  .dark .bc-lexical-editor {
    background-color: var(--bg-surface);
    color: var(--text-normal);
  }

  .dark .bc-lexical-editor-container:focus-within {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 2px var(--color-primary-900);
  }

  .dark .bc-lexical-editor-container--error {
    border-color: var(--color-danger-400);
  }

  .dark .bc-lexical-editor-container--error:focus-within {
    border-color: var(--color-danger-400);
    box-shadow: 0 0 0 2px var(--color-danger-900);
  }

  .dark .bc-lexical-editor--readonly {
    background-color: var(--color-neutral-900);
  }

  .dark .bc-lexical-editor [data-lexical-placeholder] {
    color: var(--color-neutral-500);
  }

  .dark .bc-lexical-editor blockquote {
    border-left-color: var(--color-neutral-600);
  }

  .dark .bc-lexical-editor code {
    background-color: var(--color-neutral-800);
    color: var(--color-neutral-200);
  }

  .dark .bc-lexical-editor pre {
    background-color: var(--color-neutral-900);
    border-color: var(--color-neutral-700);
  }

  .dark .bc-lexical-editor a {
    color: var(--color-primary-400);
  }

  .dark .bc-lexical-editor a:hover {
    color: var(--color-primary-300);
  }

  .dark .bc-lexical-editor hr {
    border-top-color: var(--color-neutral-700);
  }

  /* Collaboration: Remote cursors and selections */
  .bc-lexical-collaboration-cursor {
    position: absolute;
    pointer-events: none;
    user-select: none;
  }

  .bc-lexical-collaboration-cursor__caret {
    position: absolute;
    width: 2px;
    height: 1.2em;
    background-color: currentColor;
    animation: bc-lexical-cursor-blink 1s infinite;
  }

  .bc-lexical-collaboration-cursor__name {
    position: absolute;
    top: -20px;
    left: 0;
    padding: 2px 6px;
    background-color: currentColor;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .bc-lexical-collaboration-cursor:hover
    .bc-lexical-collaboration-cursor__name {
    opacity: 1;
  }

  .bc-lexical-collaboration-selection {
    position: absolute;
    pointer-events: none;
    background-color: currentColor;
    opacity: 0.3;
  }

  @keyframes bc-lexical-cursor-blink {
    0%,
    49% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0;
    }
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .bc-lexical-editor-container {
      transition: none;
    }
  }

  @media (prefers-contrast: high) {
    .bc-lexical-editor-container {
      border-width: var(--border-width-medium);
    }

    .bc-lexical-editor-container:focus-within {
      box-shadow: 0 0 0 3px var(--color-primary-100);
    }

    .dark .bc-lexical-editor-container:focus-within {
      box-shadow: 0 0 0 3px var(--color-primary-900);
    }
  }
}

@layer components {
  /* Lexical Editor Toolbar */

  /* Toolbar positioned at top of editor container */
  .bc-lexical-toolbar {
    border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
    border-radius: 0;
    border: none;
    background-color: var(--color-neutral-50);
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-wrap: wrap;
  }

  .dark .bc-lexical-toolbar {
    background-color: var(--color-neutral-800);
  }

  /* When toolbar is inside the editor container, add bottom border */
  .bc-lexical-editor-container > .bc-lexical-toolbar {
    border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
  }

  .dark .bc-lexical-editor-container > .bc-lexical-toolbar {
    border-bottom-color: var(--color-neutral-700);
  }

  /* Bottom position variant */
  .bc-lexical-toolbar--bottom {
    border-bottom: none;
    border-top: var(--border-width-thin) solid var(--color-neutral-200);
  }

  .dark .bc-lexical-toolbar--bottom {
    border-top-color: var(--color-neutral-700);
  }

  /* Hidden state for readOnly mode */
  .bc-lexical-toolbar--hidden {
    display: none;
  }

  /* Toolbar selects (font family/size) */
  .bc-lexical-toolbar-select {
    height: calc(var(--spacing-base) * 7);
    padding: 0 var(--spacing-xs);
    border: var(--border-width-thin) solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background-color: var(--bg-surface);
    color: var(--color-neutral-900);
    font-size: 0.75rem;
    cursor: pointer;
  }

  .dark .bc-lexical-toolbar-select {
    border-color: var(--color-neutral-600);
    background-color: var(--color-neutral-700);
    color: var(--color-neutral-100);
  }

  /* Color picker labels */
  .bc-lexical-toolbar-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: calc(var(--spacing-base) * 7);
    height: calc(var(--spacing-base) * 7);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }

  .bc-lexical-toolbar-color:hover {
    background-color: var(--color-neutral-200);
  }

  .dark .bc-lexical-toolbar-color:hover {
    background-color: var(--color-neutral-600);
  }

  .bc-lexical-toolbar-color input[type='color'] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
  }

  .bc-lexical-toolbar-color-icon {
    font-size: 0.875rem;
    font-weight: 700;
    pointer-events: none;
    line-height: var(--line-height-none);
  }

  .bc-lexical-toolbar-color-icon--highlight {
    background-color: #ffff00;
    padding: 0 var(--spacing-xs);
    border-radius: 2px;
  }

  .bc-lexical-toolbar-color-icon--bg {
    font-size: 1rem;
  }

  /* Responsive: compact toolbar on small containers */
  @container (max-width: 400px) {
    .bc-lexical-toolbar {
      padding: var(--spacing-xs) var(--spacing-xs);
      gap: var(--spacing-xs);
    }
  }
}

@layer components {
  /* Lexical Floating Toolbar */

  .bc-floating-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    border: var(--border-width-thin) solid var(--color-neutral-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    animation: bc-floating-toolbar-enter 0.15s ease-out;
  }

  .dark .bc-floating-toolbar {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  @keyframes bc-floating-toolbar-enter {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  /* Slash Command Palette */

  .bc-slash-command-palette {
    min-width: 280px;
    max-width: 360px;
    max-height: 400px;
    overflow-y: auto;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    border: var(--border-width-thin) solid var(--color-neutral-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: var(--spacing-xs);
    z-index: 1000;
    animation: bc-slash-palette-enter 0.12s ease-out;
  }

  .dark .bc-slash-command-palette {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-700);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }

  @keyframes bc-slash-palette-enter {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .bc-slash-command-palette__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.12s ease;
  }

  .bc-slash-command-palette__item:hover,
  .bc-slash-command-palette__item[aria-selected='true'] {
    background-color: var(--color-primary-50);
  }

  .dark .bc-slash-command-palette__item:hover,
  .dark .bc-slash-command-palette__item[aria-selected='true'] {
    background-color: var(--color-primary-900);
  }

  .bc-slash-command-palette__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-lgh);
    height: var(--spacing-lgh);
  }

  .bc-slash-command-palette__content {
    flex: 1;
    min-width: 0;
  }

  .bc-slash-command-palette__label {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    margin-bottom: var(--spacing-xs);
  }

  .dark .bc-slash-command-palette__label {
    color: var(--color-neutral-100);
  }

  .bc-slash-command-palette__description {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bc-slash-command-palette__category {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    padding: var(--spacing-xs) var(--spacing-smh);
    border-radius: var(--radius-sm);
    background-color: var(--color-neutral-100);
    flex-shrink: 0;
  }

  .dark .bc-slash-command-palette__category {
    background-color: var(--color-neutral-700);
    color: var(--color-neutral-400);
  }

  .bc-slash-command-palette__empty {
    padding: var(--spacing-md);
    color: var(--color-neutral-500);
    text-align: center;
    font-size: var(--font-size-sm);
  }

  /* Block Handle */

  .bc-block-handle {
    z-index: 999;
    animation: bc-block-handle-enter 0.1s ease-out;
  }

  @keyframes bc-block-handle-enter {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .bc-block-handle__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    border: var(--border-width-thin) solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    color: var(--color-neutral-400);
    cursor: pointer;
    padding: 0;
    transition: all 0.12s ease;
  }

  .bc-block-handle__button:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-600);
    border-color: var(--color-neutral-300);
  }

  .bc-block-handle__button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .dark .bc-block-handle__button {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-700);
    color: var(--color-neutral-500);
  }

  .dark .bc-block-handle__button:hover {
    background-color: var(--color-neutral-700);
    color: var(--color-neutral-300);
    border-color: var(--color-neutral-600);
  }
}

@layer components {
  /* Lexical Table Component */

  /* Table structure */
  .bc-lexical-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: var(--spacing-lg) 0;
    overflow: hidden;
    table-layout: fixed;
  }

  .bc-lexical-table-row {
    border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
  }

  .bc-lexical-table-cell,
  .bc-lexical-table-cell-header {
    border: var(--border-width-thin) solid var(--color-neutral-200);
    padding: var(--spacing-md) var(--spacing-mdh);
    position: relative;
    vertical-align: top;
    min-width: 75px;
  }

  .bc-lexical-table-cell-header {
    background-color: var(--color-neutral-50);
    font-weight: 600;
    text-align: left;
  }

  /* Selected cell highlight */
  .bc-lexical-table-cell--selected {
    background-color: var(--color-primary-50);
    outline: var(--outline-width-focus) solid var(--color-primary-500);
    outline-offset: calc(-1 * var(--outline-width-focus));
  }

  /* Table cell marker button (appears at top-right of selected cell) */
  .bc-table-cell-marker {
    pointer-events: auto;
  }

  .bc-table-cell-marker__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-lgh);
    height: var(--spacing-lgh);
    padding: 0;
    border: var(--border-width-thin) solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-neutral-600);
    cursor: pointer;
    transition:
      background-color 0.15s,
      border-color 0.15s;
    font-size: 0;
    line-height: 1;
  }

  .bc-table-cell-marker__button:hover:not(:disabled) {
    background-color: var(--color-neutral-100);
    border-color: var(--color-neutral-400);
    color: var(--color-neutral-800);
  }

  .bc-table-cell-marker__button:active:not(:disabled) {
    background-color: var(--color-neutral-200);
  }

  .bc-table-cell-marker__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Dark mode styles */
  .dark .bc-lexical-table-cell,
  .dark .bc-lexical-table-cell-header {
    border-color: var(--color-neutral-700);
  }

  .dark .bc-lexical-table-row {
    border-bottom-color: var(--color-neutral-700);
  }

  .dark .bc-lexical-table-cell-header {
    background-color: var(--color-neutral-800);
  }

  .dark .bc-lexical-table-cell--selected {
    background-color: var(--color-primary-900);
    outline-color: var(--color-primary-400);
  }

  .dark .bc-table-cell-marker__button {
    border-color: var(--color-neutral-600);
    background-color: var(--color-neutral-800);
    color: var(--color-neutral-400);
  }

  .dark .bc-table-cell-marker__button:hover:not(:disabled) {
    background-color: var(--color-neutral-700);
    border-color: var(--color-neutral-500);
    color: var(--color-neutral-200);
  }

  .dark .bc-table-cell-marker__button:active:not(:disabled) {
    background-color: var(--color-neutral-600);
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .bc-table-cell-marker__button {
      transition: none;
    }
  }

  @media (prefers-contrast: high) {
    .bc-lexical-table-cell,
    .bc-lexical-table-cell-header {
      border-width: var(--border-width-medium);
    }

    .bc-lexical-table-cell--selected {
      outline-width: 3px;
    }
  }
}

@layer components {
  /* Lexical Code Block Component */

  /* Code block structure */
  .bc-lexical-code-block {
    position: relative;
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background-color: var(--color-neutral-50);
    border: var(--border-width-thin) solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family:
      'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  /* Language selector */
  .bc-code-language-selector {
    /* Positioning handled inline */
  }

  .bc-code-language-button:hover:not(:disabled) {
    background-color: var(--color-neutral-200);
    border-color: var(--color-neutral-400);
  }

  .bc-code-language-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .bc-code-language-dropdown {
    /* Dropdown styling handled inline */
  }

  .bc-code-language-option:hover {
    background-color: var(--color-neutral-100);
  }

  .bc-code-language-option:active {
    background-color: var(--color-neutral-200);
  }

  /* Syntax highlighting token colors (light theme) */
  .bc-lexical-code-block .token.comment,
  .bc-lexical-code-block .token.prolog,
  .bc-lexical-code-block .token.doctype,
  .bc-lexical-code-block .token.cdata {
    color: #6a737d;
    font-style: italic;
  }

  .bc-lexical-code-block .token.punctuation {
    color: #24292e;
  }

  .bc-lexical-code-block .token.property,
  .bc-lexical-code-block .token.tag,
  .bc-lexical-code-block .token.boolean,
  .bc-lexical-code-block .token.number,
  .bc-lexical-code-block .token.constant,
  .bc-lexical-code-block .token.symbol,
  .bc-lexical-code-block .token.deleted {
    color: #005cc5;
  }

  .bc-lexical-code-block .token.selector,
  .bc-lexical-code-block .token.attr-name,
  .bc-lexical-code-block .token.string,
  .bc-lexical-code-block .token.char,
  .bc-lexical-code-block .token.builtin,
  .bc-lexical-code-block .token.inserted {
    color: #032f62;
  }

  .bc-lexical-code-block .token.operator,
  .bc-lexical-code-block .token.entity,
  .bc-lexical-code-block .token.url,
  .bc-lexical-code-block .language-css .token.string,
  .bc-lexical-code-block .style .token.string {
    color: #d73a49;
  }

  .bc-lexical-code-block .token.atrule,
  .bc-lexical-code-block .token.attr-value,
  .bc-lexical-code-block .token.keyword {
    color: #d73a49;
  }

  .bc-lexical-code-block .token.function,
  .bc-lexical-code-block .token.class-name {
    color: #6f42c1;
  }

  .bc-lexical-code-block .token.regex,
  .bc-lexical-code-block .token.important,
  .bc-lexical-code-block .token.variable {
    color: #e36209;
  }

  /* Line numbers (optional) */
  .bc-lexical-code-block--with-line-numbers {
    padding-left: calc(var(--spacing-base) * 14);
  }

  .bc-lexical-code-block .line-number {
    position: absolute;
    left: 0;
    width: var(--spacing-3xl);
    text-align: right;
    color: var(--color-neutral-400);
    user-select: none;
    padding-right: var(--spacing-lg);
  }

  /* Dark mode styles */
  .dark .bc-lexical-code-block {
    background-color: var(--color-neutral-900);
    border-color: var(--color-neutral-700);
    color: var(--color-neutral-100);
  }

  .dark .bc-code-language-button {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-600);
    color: var(--color-neutral-200);
  }

  .dark .bc-code-language-button:hover:not(:disabled) {
    background-color: var(--color-neutral-700);
    border-color: var(--color-neutral-500);
  }

  .dark .bc-code-language-dropdown {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-700);
  }

  .dark .bc-code-language-option {
    color: var(--color-neutral-100);
  }

  .dark .bc-code-language-option:hover {
    background-color: var(--color-neutral-700);
  }

  .dark .bc-code-language-option:active {
    background-color: var(--color-neutral-600);
  }

  /* Syntax highlighting token colors (dark theme) */
  .dark .bc-lexical-code-block .token.comment,
  .dark .bc-lexical-code-block .token.prolog,
  .dark .bc-lexical-code-block .token.doctype,
  .dark .bc-lexical-code-block .token.cdata {
    color: #8b949e;
  }

  .dark .bc-lexical-code-block .token.punctuation {
    color: #c9d1d9;
  }

  .dark .bc-lexical-code-block .token.property,
  .dark .bc-lexical-code-block .token.tag,
  .dark .bc-lexical-code-block .token.boolean,
  .dark .bc-lexical-code-block .token.number,
  .dark .bc-lexical-code-block .token.constant,
  .dark .bc-lexical-code-block .token.symbol,
  .dark .bc-lexical-code-block .token.deleted {
    color: #79c0ff;
  }

  .dark .bc-lexical-code-block .token.selector,
  .dark .bc-lexical-code-block .token.attr-name,
  .dark .bc-lexical-code-block .token.string,
  .dark .bc-lexical-code-block .token.char,
  .dark .bc-lexical-code-block .token.builtin,
  .dark .bc-lexical-code-block .token.inserted {
    color: #a5d6ff;
  }

  .dark .bc-lexical-code-block .token.operator,
  .dark .bc-lexical-code-block .token.entity,
  .dark .bc-lexical-code-block .token.url,
  .dark .bc-lexical-code-block .language-css .token.string,
  .dark .bc-lexical-code-block .style .token.string {
    color: #ff7b72;
  }

  .dark .bc-lexical-code-block .token.atrule,
  .dark .bc-lexical-code-block .token.attr-value,
  .dark .bc-lexical-code-block .token.keyword {
    color: #ff7b72;
  }

  .dark .bc-lexical-code-block .token.function,
  .dark .bc-lexical-code-block .token.class-name {
    color: #d2a8ff;
  }

  .dark .bc-lexical-code-block .token.regex,
  .dark .bc-lexical-code-block .token.important,
  .dark .bc-lexical-code-block .token.variable {
    color: #ffa657;
  }

  .dark .bc-lexical-code-block .line-number {
    color: var(--color-neutral-600);
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .bc-code-language-button,
    .bc-code-language-option {
      transition: none;
    }
  }

  @media (prefers-contrast: high) {
    .bc-lexical-code-block {
      border-width: var(--border-width-medium);
    }
  }
}

/* List Item Controls Component */
.bc-list-item-controls {
  display: flex;
}

/* Aside layout: row, content + controls side by side */
.bc-list-item-controls--aside {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-stack-xs, var(--spacing-sm));
}

/* Below layout: column, controls under content */
.bc-list-item-controls--below {
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-md));
}

/* Content area */
.bc-list-item-controls__content {
  flex-grow: 1;
  width: 100%;
}

/* Actions wrapper */
.bc-list-item-controls__actions {
  display: flex;
}

.bc-list-item-controls--aside .bc-list-item-controls__actions {
  flex-direction: column;
  align-items: center;
}

.bc-list-item-controls--below .bc-list-item-controls__actions {
  flex-direction: row;
  justify-content: space-between;
}

/* Move buttons group */
.bc-list-item-controls__move {
  display: flex;
  gap: var(--spacing-stack-xs, var(--spacing-sm));
}

.bc-list-item-controls--aside .bc-list-item-controls__move {
  flex-direction: column;
}

.bc-list-item-controls--below .bc-list-item-controls__move {
  flex-direction: row;
}

/* Link Component */
.bc-link {
  --link-color: inherit;
  --link-color-dark: inherit;
  --link-hover-color: var(--link-color);
  --link-hover-color-dark: var(--link-color-dark);

  transition: color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  cursor: pointer;
  color: var(--link-color);
}

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

.dark .bc-link {
  color: var(--link-color-dark);
}

.dark .bc-link:hover {
  color: var(--link-hover-color-dark);
}

.bc-link:focus-visible {
  outline: var(--outline-width-focus) solid currentColor;
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Default variant - standard underline behavior */
.bc-link--default {
  text-decoration: underline;
}

/* Plain variant - no underline */
.bc-link--plain {
  text-decoration: none;
}

/* Hover variant - underline only on hover */
.bc-link--hover {
  text-decoration: none;
}

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

/* Disabled state */
.bc-link--disabled {
  cursor: not-allowed;
  text-decoration: none !important;
}

.bc-link--disabled:hover {
  text-decoration: none !important;
}

.bc-link--disabled:focus-visible {
  outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-link {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .bc-link--plain {
    text-decoration: none;
    border-bottom: var(--border-width-medium) solid currentColor;
  }

  .bc-link--hover {
    text-decoration: none;
  }

  .bc-link--hover:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-link {
    transition: none;
  }
}

/* Menu Component */
.bc-menu {
  background-color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-base-200);
  border-radius: var(--radius-popover, var(--radius-md));
  box-shadow: var(--shadow-popover, var(--shadow-lg));
  padding: var(--spacing-xs) 0;
  z-index: var(--z-index-popover);
  min-width: var(--overlay-min-width);
  max-height: 20rem;
  overflow-y: auto;
  outline: none;
  font-family: var(--font-family-default-ui, inherit);
}

/* Dark mode styles */
.dark .bc-menu {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
}

/* Submenu specific styles */
.bc-submenu {
  margin-left: var(--spacing-xs);
}

/* Menu Item Component */
.bc-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-md, var(--spacing-md));
  padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
  border-radius: 0;
  cursor: pointer;
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.15s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  color: var(--text-normal);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  position: relative;
  outline: none;
  user-select: none;
}

/* Menu item hover state */
.bc-menu-item:hover:not(.bc-menu-item--disabled) {
  background-color: var(--color-base-100);
  color: var(--text-normal);
}

/* Menu item focused state */
.bc-menu-item--focused {
  background-color: var(--color-base-100);
  color: var(--color-base-900);
}

/* Menu item active (click) state */
.bc-menu-item:active:not(.bc-menu-item--disabled) {
  background-color: var(--color-base-200);
}

/* Menu item disabled state */
.bc-menu-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted);
}

.bc-menu-item--disabled:hover {
  background-color: transparent;
}

/* Menu item with submenu */
.bc-menu-item--has-submenu::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 3px solid currentColor;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  margin-left: auto;
  opacity: 0.5;
}

/* Dark mode menu item styles */
.dark .bc-menu-item:hover:not(.bc-menu-item--disabled) {
  background-color: var(--interactive-hover);
}

.dark .bc-menu-item--focused {
  background-color: var(--color-primary-900);
  color: var(--color-primary-100);
}

.dark .bc-menu-item:active:not(.bc-menu-item--disabled) {
  background-color: var(--interactive-active);
}

/* Menu Item Content Areas */
.bc-menu-item__start {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bc-menu-item__content {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.bc-menu-item__end {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Menu Separator Component */
.bc-menu-separator {
  margin: var(--spacing-xs) var(--spacing-sm);
  border-top: var(--border-width-thin) solid
    var(--border-divider, var(--color-base-200));
  position: relative;
}

.bc-menu-separator__label {
  position: absolute;
  top: -0.5em;
  left: var(--spacing-sm);
  background-color: var(--color-white);
  padding: 0 var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Dark mode separator styles */
.dark .bc-menu-separator {
  border-color: var(--border-divider);
}

.dark .bc-menu-separator__label {
  background-color: var(--bg-surface);
}

/* Focus styles for accessibility */
.bc-menu-item:focus-visible {
  outline: var(--outline-width-focus) solid var(--interactive-focus);
  outline-offset: calc(-1 * var(--outline-width-focus));
  border-radius: var(--radius-sm);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-menu {
    border-width: var(--border-width-medium);
  }

  .bc-menu-item--focused {
    outline: var(--outline-width-focus) solid currentColor;
    outline-offset: calc(-1 * var(--outline-width-focus));
  }

  .bc-menu-separator {
    border-width: var(--border-width-medium);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-menu-item {
    transition: none;
  }
}

/* Menu size variants */
.bc-menu--size-sm {
  min-width: 8rem;
  padding: var(--spacing-xs) 0;
}

.bc-menu--size-sm .bc-menu-item {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
}

.bc-menu--size-lg {
  min-width: 16rem;
  padding: var(--spacing-sm) 0;
}

.bc-menu--size-lg .bc-menu-item {
  padding: var(--spacing-md) calc(var(--spacing-base) * 3.5);
  font-size: var(--font-size-md);
}

/* Menu item icon sizing */
.bc-menu-item__start .bc-icon,
.bc-menu-item__end .bc-icon {
  width: 1em;
  height: 1em;
}

/* Screen reader only content */
.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;
}

/* Responsive design for mobile devices */
@media (max-width: 640px) {
  .bc-menu {
    min-width: 100%;
    max-width: 100vw;
    border-radius: var(--radius-popover, var(--radius-lg))
      var(--radius-popover, var(--radius-lg)) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 50vh;
    box-shadow: var(--shadow-overlay, var(--shadow-xl));
  }

  .bc-menu-item {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-md);
    min-height: calc(var(--spacing-base) * 11); /* Touch target size */
  }

  .bc-submenu {
    margin-left: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    max-height: 100vh;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .bc-menu-item {
    min-height: calc(var(--spacing-base) * 11); /* Minimum touch target */
    padding: calc(var(--spacing-base) * 1.75) var(--spacing-mdh);
  }

  .bc-menu-item:hover {
    background-color: transparent; /* Disable hover on touch devices */
  }

  .bc-menu-item:active {
    background-color: var(--color-base-200);
  }

  .dark .bc-menu-item:active {
    background-color: var(--interactive-active);
  }
}

/* Container queries for adaptive sizing */
@container (max-width: 300px) {
  .bc-menu {
    min-width: 100%;
  }

  .bc-menu-item__end {
    display: none; /* Hide end content in narrow containers */
  }
}

/* Print styles */
@media print {
  .bc-menu {
    display: none;
  }
}

/* Modal Component */
.bc-modal {
  z-index: var(--z-index-modal);
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-overlay, var(--radius-lg));
  box-shadow: var(--shadow-overlay, var(--shadow-xl));
  background-color: var(--color-base-100);
  border: var(--border-width-thick) solid var(--color-base-300);
  overflow: hidden;
  transition: all var(--motion-transition-overlay) var(--motion-easing-emphasis);
}

/* Modal anchored to body (default) */
.bc-modal--container-body {
  position: fixed;
  max-height: 90vh;
  max-width: 90vw;
}

/* Modal anchored to element container */
.bc-modal--container-element {
  position: absolute;
  max-height: 90%;
  max-width: 90%;
}

/* Modal positioning - Center (default) */
.bc-modal--position-center.bc-modal--container-body {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bc-modal--position-center.bc-modal--container-element {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Modal positioning - Top */
.bc-modal--position-top.bc-modal--container-body {
  top: var(--spacing-2xl);
  left: 50%;
  transform: translateX(-50%);
}

.bc-modal--position-top.bc-modal--container-element {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}

/* Modal positioning - Bottom */
.bc-modal--position-bottom.bc-modal--container-body {
  bottom: var(--spacing-2xl);
  left: 50%;
  transform: translateX(-50%);
}

.bc-modal--position-bottom.bc-modal--container-element {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

/* Modal positioning - Left */
.bc-modal--position-left.bc-modal--container-body {
  top: 50%;
  left: var(--spacing-2xl);
  transform: translateY(-50%);
}

.bc-modal--position-left.bc-modal--container-element {
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}

/* Modal positioning - Right */
.bc-modal--position-right.bc-modal--container-body {
  top: 50%;
  right: var(--spacing-2xl);
  transform: translateY(-50%);
}

.bc-modal--position-right.bc-modal--container-element {
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

/* Modal positioning - Top Left */
.bc-modal--position-top-start.bc-modal--container-body {
  top: var(--spacing-2xl);
  left: var(--spacing-2xl);
}

.bc-modal--position-top-start.bc-modal--container-element {
  top: 5%;
  left: 5%;
}

/* Modal positioning - Top Right */
.bc-modal--position-top-end.bc-modal--container-body {
  top: var(--spacing-2xl);
  right: var(--spacing-2xl);
}

.bc-modal--position-top-end.bc-modal--container-element {
  top: 5%;
  right: 5%;
}

/* Modal positioning - Bottom Left */
.bc-modal--position-bottom-start.bc-modal--container-body {
  bottom: var(--spacing-2xl);
  left: var(--spacing-2xl);
}

.bc-modal--position-bottom-start.bc-modal--container-element {
  bottom: 5%;
  left: 5%;
}

/* Modal positioning - Bottom Right */
.bc-modal--position-bottom-end.bc-modal--container-body {
  bottom: var(--spacing-2xl);
  right: var(--spacing-2xl);
}

.bc-modal--position-bottom-end.bc-modal--container-element {
  bottom: 5%;
  right: 5%;
}

/* Direction-aware modal positioning - Inline Start */
.bc-modal--position-inline-start.bc-modal--container-body {
  top: 50%;
  inset-inline-start: var(--spacing-2xl);
  transform: translateY(-50%);
}

.bc-modal--position-inline-start.bc-modal--container-element {
  top: 50%;
  inset-inline-start: 5%;
  transform: translateY(-50%);
}

/* Direction-aware modal positioning - Inline End */
.bc-modal--position-inline-end.bc-modal--container-body {
  top: 50%;
  inset-inline-end: var(--spacing-2xl);
  transform: translateY(-50%);
}

.bc-modal--position-inline-end.bc-modal--container-element {
  top: 50%;
  inset-inline-end: 5%;
  transform: translateY(-50%);
}

/* Direction-aware modal positioning - Top Inline Start */
.bc-modal--position-top-inline-start.bc-modal--container-body {
  top: var(--spacing-2xl);
  inset-inline-start: var(--spacing-2xl);
}

.bc-modal--position-top-inline-start.bc-modal--container-element {
  top: 5%;
  inset-inline-start: 5%;
}

/* Direction-aware modal positioning - Top Inline End */
.bc-modal--position-top-inline-end.bc-modal--container-body {
  top: var(--spacing-2xl);
  inset-inline-end: var(--spacing-2xl);
}

.bc-modal--position-top-inline-end.bc-modal--container-element {
  top: 5%;
  inset-inline-end: 5%;
}

/* Direction-aware modal positioning - Bottom Inline Start */
.bc-modal--position-bottom-inline-start.bc-modal--container-body {
  bottom: var(--spacing-2xl);
  inset-inline-start: var(--spacing-2xl);
}

.bc-modal--position-bottom-inline-start.bc-modal--container-element {
  bottom: 5%;
  inset-inline-start: 5%;
}

/* Direction-aware modal positioning - Bottom Inline End */
.bc-modal--position-bottom-inline-end.bc-modal--container-body {
  bottom: var(--spacing-2xl);
  inset-inline-end: var(--spacing-2xl);
}

.bc-modal--position-bottom-inline-end.bc-modal--container-element {
  bottom: 5%;
  inset-inline-end: 5%;
}

/* Modal sizes */
.bc-modal--size-sm {
  width: var(--overlay-width-sm);
}

.bc-modal--size-md {
  width: var(--overlay-width-md);
}

.bc-modal--size-lg {
  width: var(--overlay-width-lg);
}

.bc-modal--size-xl {
  width: var(--overlay-width-xl);
}

/* Modal content container */
.bc-modal__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
}

/* Modal header */
.bc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  border-bottom: var(--border-width-thin) solid var(--color-base-300);
  flex-shrink: 0;
  background-color: var(--color-base-100);
}

/* Modal body */
.bc-modal__body {
  padding: var(--spacing-2xl);
  flex: 1;
  overflow-y: auto;
  color: var(--color-gray-700);
  line-height: var(--line-height-normal);
  background-color: var(--color-white);
}

/* Modal footer */
.bc-modal__footer {
  display: flex;
  gap: var(--spacing-stack-md);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  border-top: var(--border-width-thin) solid var(--color-base-300);
  flex-shrink: 0;
  background-color: var(--color-base-100);
  align-items: center;
}

/* Animation states - Center position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-center,
.bc-overlay[data-status='closing'] .bc-modal--position-center {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-center,
.bc-overlay[data-status='opening'] .bc-modal--position-center {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Animation states - Top position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-top,
.bc-overlay[data-status='closing'] .bc-modal--position-top {
  opacity: 0;
  transform: translateX(-50%) translateY(calc(-1 * var(--spacing-lgh)))
    scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-top,
.bc-overlay[data-status='opening'] .bc-modal--position-top {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Animation states - Bottom position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom {
  opacity: 0;
  transform: translateX(-50%) translateY(var(--spacing-lgh)) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-bottom,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Animation states - Left position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-left,
.bc-overlay[data-status='closing'] .bc-modal--position-left {
  opacity: 0;
  transform: translateY(-50%) translateX(calc(-1 * var(--spacing-lgh)))
    scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-left,
.bc-overlay[data-status='opening'] .bc-modal--position-left {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Animation states - Right position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-right,
.bc-overlay[data-status='closing'] .bc-modal--position-right {
  opacity: 0;
  transform: translateY(-50%) translateX(var(--spacing-lgh)) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-right,
.bc-overlay[data-status='opening'] .bc-modal--position-right {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Animation states - Corner positions */
.bc-overlay[data-status='start-opening'] .bc-modal--position-top-start,
.bc-overlay[data-status='closing'] .bc-modal--position-top-start,
.bc-overlay[data-status='start-opening'] .bc-modal--position-top-end,
.bc-overlay[data-status='closing'] .bc-modal--position-top-end,
.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-start,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom-start,
.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-end,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom-end {
  opacity: 0;
  transform: scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-top-start,
.bc-overlay[data-status='opening'] .bc-modal--position-top-start,
.bc-overlay[data-status='opened'] .bc-modal--position-top-end,
.bc-overlay[data-status='opening'] .bc-modal--position-top-end,
.bc-overlay[data-status='opened'] .bc-modal--position-bottom-start,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom-start,
.bc-overlay[data-status='opened'] .bc-modal--position-bottom-end,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom-end {
  opacity: 1;
  transform: scale(1);
}

/* Animation states - Direction-aware Inline Start position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-inline-start,
.bc-overlay[data-status='closing'] .bc-modal--position-inline-start {
  opacity: 0;
  transform: translateY(-50%) translateX(calc(-1 * var(--spacing-lgh)))
    scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-inline-start,
.bc-overlay[data-status='opening'] .bc-modal--position-inline-start {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Animation states - Direction-aware Inline End position */
.bc-overlay[data-status='start-opening'] .bc-modal--position-inline-end,
.bc-overlay[data-status='closing'] .bc-modal--position-inline-end {
  opacity: 0;
  transform: translateY(-50%) translateX(var(--spacing-lgh)) scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-inline-end,
.bc-overlay[data-status='opening'] .bc-modal--position-inline-end {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Animation states - Direction-aware corner positions */
.bc-overlay[data-status='start-opening'] .bc-modal--position-top-inline-start,
.bc-overlay[data-status='closing'] .bc-modal--position-top-inline-start,
.bc-overlay[data-status='start-opening'] .bc-modal--position-top-inline-end,
.bc-overlay[data-status='closing'] .bc-modal--position-top-inline-end,
.bc-overlay[data-status='start-opening']
  .bc-modal--position-bottom-inline-start,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom-inline-start,
.bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-inline-end,
.bc-overlay[data-status='closing'] .bc-modal--position-bottom-inline-end {
  opacity: 0;
  transform: scale(0.95);
}

.bc-overlay[data-status='opened'] .bc-modal--position-top-inline-start,
.bc-overlay[data-status='opening'] .bc-modal--position-top-inline-start,
.bc-overlay[data-status='opened'] .bc-modal--position-top-inline-end,
.bc-overlay[data-status='opening'] .bc-modal--position-top-inline-end,
.bc-overlay[data-status='opened'] .bc-modal--position-bottom-inline-start,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom-inline-start,
.bc-overlay[data-status='opened'] .bc-modal--position-bottom-inline-end,
.bc-overlay[data-status='opening'] .bc-modal--position-bottom-inline-end {
  opacity: 1;
  transform: scale(1);
}

/* Responsive adjustments */
@container (max-width: 640px) {
  .bc-modal--container-body {
    margin: var(--spacing-md);
    max-width: calc(100vw - calc(var(--spacing-md) * 2));
    max-height: calc(100vh - calc(var(--spacing-md) * 2));
  }

  .bc-modal--container-element {
    margin: var(--spacing-md);
    max-width: calc(100% - calc(var(--spacing-md) * 2));
    max-height: calc(100% - calc(var(--spacing-md) * 2));
  }

  .bc-modal__body {
    padding: var(--spacing-md);
  }

  .bc-modal__footer {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  }
}

/* Dark mode styles */
.dark .bc-modal {
  background-color: var(--bg-surface);
  border: var(--border-width-thin) solid var(--border-default);
  color: var(--text-normal);
}

.dark .bc-modal__header {
  border-bottom: var(--border-width-thin) solid var(--border-divider);
  background-color: var(--bg-elevated);
}

.dark .bc-modal__body {
  color: var(--text-normal);
  background-color: var(--bg-surface);
}

.dark .bc-modal__footer {
  border-top: var(--border-width-thin) solid var(--border-divider);
  background-color: var(--bg-elevated);
}

.dark .bc-modal__confirm-body {
  color: var(--color-base-400);
}

.dark .bc-modal__confirm-consequences {
  background: var(--color-base-800);
  color: var(--color-base-400);
}

.dark .bc-modal__confirm-consequences li::before {
  color: var(--color-base-600);
}

.dark .bc-modal--confirm .bc-modal__footer {
  border-top: var(--border-width-thin) solid var(--color-base-700);
  background: var(--color-base-800);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-modal {
    border-width: var(--border-width-medium);
  }

  .bc-modal__header {
    border-bottom-width: var(--border-width-medium);
  }

  .bc-modal__footer {
    border-top-width: var(--border-width-medium);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-modal {
    transition: none;
  }

  /* Center position */
  .bc-overlay[data-status='start-opening'] .bc-modal--position-center,
  .bc-overlay[data-status='closing'] .bc-modal--position-center,
  .bc-overlay[data-status='opened'] .bc-modal--position-center,
  .bc-overlay[data-status='opening'] .bc-modal--position-center {
    transform: translate(-50%, -50%);
  }

  /* Top and bottom positions */
  .bc-overlay[data-status='start-opening'] .bc-modal--position-top,
  .bc-overlay[data-status='closing'] .bc-modal--position-top,
  .bc-overlay[data-status='opened'] .bc-modal--position-top,
  .bc-overlay[data-status='opening'] .bc-modal--position-top,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom,
  .bc-overlay[data-status='closing'] .bc-modal--position-bottom,
  .bc-overlay[data-status='opened'] .bc-modal--position-bottom,
  .bc-overlay[data-status='opening'] .bc-modal--position-bottom {
    transform: translateX(-50%);
  }

  /* Left and right positions */
  .bc-overlay[data-status='start-opening'] .bc-modal--position-left,
  .bc-overlay[data-status='closing'] .bc-modal--position-left,
  .bc-overlay[data-status='opened'] .bc-modal--position-left,
  .bc-overlay[data-status='opening'] .bc-modal--position-left,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-right,
  .bc-overlay[data-status='closing'] .bc-modal--position-right,
  .bc-overlay[data-status='opened'] .bc-modal--position-right,
  .bc-overlay[data-status='opening'] .bc-modal--position-right {
    transform: translateY(-50%);
  }

  /* Corner positions */
  .bc-overlay[data-status='start-opening'] .bc-modal--position-top-start,
  .bc-overlay[data-status='closing'] .bc-modal--position-top-start,
  .bc-overlay[data-status='opened'] .bc-modal--position-top-start,
  .bc-overlay[data-status='opening'] .bc-modal--position-top-start,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-top-end,
  .bc-overlay[data-status='closing'] .bc-modal--position-top-end,
  .bc-overlay[data-status='opened'] .bc-modal--position-top-end,
  .bc-overlay[data-status='opening'] .bc-modal--position-top-end,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-start,
  .bc-overlay[data-status='closing'] .bc-modal--position-bottom-start,
  .bc-overlay[data-status='opened'] .bc-modal--position-bottom-start,
  .bc-overlay[data-status='opening'] .bc-modal--position-bottom-start,
  .bc-overlay[data-status='start-opening'] .bc-modal--position-bottom-end,
  .bc-overlay[data-status='closing'] .bc-modal--position-bottom-end,
  .bc-overlay[data-status='opened'] .bc-modal--position-bottom-end,
  .bc-overlay[data-status='opening'] .bc-modal--position-bottom-end {
    transform: none;
  }
}

.bc-modal__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

.dark .bc-modal__title {
  color: var(--color-gray-200);
}

.bc-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-stack-sm);
}

/* Confirmation dialog variant */
.bc-modal--confirm {
  max-width: 440px;
  overflow: hidden;
}

.bc-modal--confirm .bc-modal__header {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-base) * 2.5);
  padding: var(--spacing-lgh) var(--spacing-xl) calc(var(--spacing-base) * 2.5);
  border-bottom: none;
}

.bc-modal__confirm-icon {
  width: calc(var(--spacing-base) * 9);
  height: calc(var(--spacing-base) * 9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bc-modal__confirm-body {
  padding: 0 var(--spacing-xl) var(--spacing-lgh);
  font-size: var(--font-size-sm);
  color: var(--color-base-600);
  line-height: var(--line-height-normal);
}

.bc-modal__confirm-consequences {
  padding: var(--spacing-md) var(--spacing-mdh);
  border-radius: var(--radius-md);
  background: var(--color-base-50);
  font-size: var(--font-size-xs);
  color: var(--color-base-600);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  margin-top: var(--spacing-mdh);
}

.bc-modal__confirm-consequences li {
  display: flex;
  gap: var(--spacing-smh);
  list-style: none;
}

.bc-modal__confirm-consequences li::before {
  content: '•';
  color: var(--color-base-400);
}

.bc-modal--confirm .bc-modal__footer {
  padding: var(--spacing-mdh) var(--spacing-xl);
  border-top: var(--border-width-thin) solid var(--color-base-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  background: var(--color-base-50);
}

.bc-native-select {
  width: 100%;
  /* Reset native styling so BeatUI theme applies (Safari, Chrome, Firefox) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
  border: none;
  color: inherit;
  font: inherit;
}

/* Remove default focus ring; container provides focus styles */
.bc-native-select:focus,
.bc-native-select:focus-visible {
  outline: none;
}

.bc-nine-slice-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

.bc-nine-slice-pane-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.bc-nine-slice-pane {
  position: absolute;
  overflow: visible;
}

.bc-nine-slice-pane-content {
  will-change: transform;
}

/* Z-index layering: corners > sidebars > header/footer > body */
.bc-nine-slice-top-start {
  z-index: 60;
}

.bc-nine-slice-header {
  z-index: 20;
  overflow: hidden;
}

.bc-nine-slice-top-end {
  z-index: 70;
}

.bc-nine-slice-sidebar-start {
  z-index: 30;
  overflow: hidden;
}

.bc-nine-slice-body {
  z-index: 10;
  overflow: hidden;
}

.bc-nine-slice-sidebar-end {
  z-index: 40;
  overflow: hidden;
}

.bc-nine-slice-bottom-start {
  z-index: 80;
}

.bc-nine-slice-footer {
  z-index: 50;
  overflow: hidden;
}

.bc-nine-slice-bottom-end {
  z-index: 90;
}

/* Scrollbar shared */
.bc-nine-slice-scrollbar {
  position: absolute;
  z-index: 100;
}

.bc-nine-slice-scrollbar-track {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--color-base-200);
  border-radius: 8px;
}

.bc-nine-slice-scrollbar-thumb {
  position: absolute;
  border-radius: 8px;
  background-color: var(--color-base-400);
  cursor: grab;
  transition: background-color 150ms ease;
}

.bc-nine-slice-scrollbar-thumb:hover {
  background-color: var(--color-base-500);
}

.bc-nine-slice-scrollbar-thumb:active,
.bc-nine-slice-scrollbar-thumb--dragging {
  background-color: var(--color-base-600);
  cursor: grabbing;
}

/* Horizontal scrollbar */
.bc-nine-slice-scrollbar--horizontal {
  left: 0;
  bottom: 0;
  height: 12px;
}

.bc-nine-slice-scrollbar--horizontal .bc-nine-slice-scrollbar-thumb {
  top: 0;
  height: 100%;
  min-width: 24px;
}

/* Vertical scrollbar */
.bc-nine-slice-scrollbar--vertical {
  top: 0;
  right: 0;
  width: 12px;
}

.bc-nine-slice-scrollbar--vertical .bc-nine-slice-scrollbar-thumb {
  left: 0;
  width: 100%;
  min-height: 24px;
}

/* Hidden state */
.bc-nine-slice-scrollbar--hidden {
  display: none;
}

/* Dark mode */
.dark .bc-nine-slice-scrollbar-track {
  background-color: var(--color-base-800);
}

.dark .bc-nine-slice-scrollbar-thumb {
  background-color: var(--color-base-600);
}

.dark .bc-nine-slice-scrollbar-thumb:hover {
  background-color: var(--color-base-500);
}

.dark .bc-nine-slice-scrollbar-thumb:active,
.dark .bc-nine-slice-scrollbar-thumb--dragging {
  background-color: var(--color-base-400);
}

/* Number Input Component */
.bc-number-input {
  text-align: end;
}

/* Remove default number input spinners */
.bc-number-input::-webkit-outer-spin-button,
.bc-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bc-number-input[type='number'] {
  -moz-appearance: textfield;
}

/* Number Input Steppers */
.bc-number-input-steppers {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.bc-number-input-steppers-button {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: var(--line-height-none);
  border-radius: var(--radius-xs);
  outline: var(--outline-width-default) solid var(--color-gray-300);
  outline-offset: calc(-1 * var(--outline-width-default));
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));

  width: var(--spacing-lg);
  height: 50%;
}

.bc-number-input-steppers-button:hover {
  background-color: var(--color-neutral-100);
}

.bc-number-input-steppers .bc-button:hover:not(:disabled) {
  transform: none;
}

.bc-number-input-steppers .bc-button:active:not(:disabled) {
  transform: none;
}

/* Dark mode */
.dark .bc-number-input-steppers-button {
  outline-color: var(--color-base-600);
}

.dark .bc-number-input-steppers-button:hover {
  background-color: var(--color-base-700);
}

/* export type OverlayEffect = 'transparent' | 'opaque'
export type OverlayMode = 'capturing' | 'non-capturing' */

.bc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-overlay);
  transition: background-color
    var(--motion-transition-overlay, var(--motion-duration-relaxed, 0.3s))
    var(--motion-easing-emphasis, cubic-bezier(0.33, 1, 0.68, 1));
}

/* When portaled to body, use fixed positioning to avoid layout interference */
.bc-overlay--container-body {
  position: fixed;
}

.bc-overlay[data-status='start-opening'],
.bc-overlay[data-status='closing'] {
  backdrop-filter: blur(0);
  background-color: transparent;
}

.bc-overlay > * {
  z-index: var(--z-index-overlay);
}

.bc-overlay--effect-none {
  background-color: transparent;
}

.bc-overlay--effect-transparent {
  background-color: color-mix(in srgb, var(--color-black) 5%, transparent);
}

.bc-overlay--effect-opaque[data-status='opened'],
.bc-overlay--effect-opaque[data-status='opening'] {
  background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
  backdrop-filter: blur(2px);
}

/* Dark mode styles */
.dark .bc-overlay--effect-transparent {
  background-color: color-mix(in srgb, var(--color-white) 2%, transparent);
}

.dark .bc-overlay--effect-opaque[data-status='opened'],
.dark .bc-overlay--effect-opaque[data-status='opening'] {
  background-color: color-mix(in srgb, var(--color-black) 80%, transparent);
  backdrop-filter: blur(4px);
}

.bc-popover {
  background: var(--color-white);
  border: var(--border-width-thin) solid var(--color-base-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: var(--overlay-min-width);
  max-width: var(--overlay-width-sm);
  padding: var(--spacing-md);
  color: var(--color-base-700);
}

/* Dark mode */
.dark .bc-popover {
  background: var(--color-base-800);
  border-color: var(--color-base-700);
  color: var(--color-base-200);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-popover {
    animation: none;
  }
}

/* Lightbox component */

.bc-lightbox {
  position: absolute;
  inset: 0;
  display: block;
}

.bc-lightbox__close {
  position: absolute;
  top: var(--spacing-2, 16px);
  right: var(--spacing-2, 16px);
  z-index: calc(var(--z-index-overlay, 1000) + 1);
  border-radius: 100%;
  padding: var(--spacing-base, 4px);
  background-color: color-mix(in srgb, var(--color-gray-100) 80%, transparent);
  color: var(--color-gray-900);
}

.dark .bc-lightbox__close {
  background-color: color-mix(in srgb, var(--color-gray-800) 80%, transparent);
  color: var(--color-gray-100);
}

.bc-lightbox__viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The padding here is set inline by the component to sync with measurement */
  box-sizing: border-box;
}

.bc-lightbox__content {
  /* Capped to viewport; no transform scaling */
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow-overlay, var(--shadow-xl));
  border-radius: var(--radius-lg);
}

@layer components {
  .bc-announcement-bar {
    --announcement-bar-bg-color: var(--color-primary-600);
    --announcement-bar-text-color: var(--color-white);

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-index-raised, 10);

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--announcement-bar-bg-color);
    color: var(--announcement-bar-text-color);

    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-md);

    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);

    max-width: min(90%, 800px);
  }

  /* When portaled to body, use fixed positioning */
  body > .bc-announcement-bar {
    position: fixed;
  }

  .bc-announcement-bar__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .bc-announcement-bar__icon {
    display: flex;
    align-items: center;
    line-height: 0;
  }

  .bc-announcement-bar__text {
    flex: 1;
    text-align: center;
  }

  .bc-announcement-bar__close {
    display: flex;
    align-items: center;
    margin-left: var(--spacing-sm);
  }

  /* Ensure close button is visible on colored background */
  .bc-announcement-bar--dismissible .bc-announcement-bar__close button {
    color: var(--announcement-bar-text-color);
    opacity: 0.9;
  }

  .bc-announcement-bar--dismissible .bc-announcement-bar__close button:hover {
    opacity: 1;
    background-color: color-mix(in srgb, var(--color-white) 10%, transparent);
  }

  /* Responsive adjustments */
  @media (max-width: 640px) {
    .bc-announcement-bar {
      max-width: 95%;
      padding: var(--spacing-xs) var(--spacing-md);
      font-size: var(--font-size-xs);
    }

    .bc-announcement-bar__content {
      gap: var(--spacing-xs);
    }
  }
}

.bc-panel {
  --panel-bg: var(--bg-surface);
  --panel-bg-dark: var(--bg-surface);
  --panel-text: var(--text-normal);
  --panel-text-dark: var(--text-normal);
  background-color: var(--panel-bg);
  color: var(--panel-text);
  height: 100%;
  overflow: hidden;
}

.dark .bc-panel {
  background-color: var(--panel-bg-dark);
  color: var(--panel-text-dark);
}

.bc-panel--side-none {
  border: none;
}

.bc-panel--side-all {
  border: var(--border-width-thin) solid var(--border-default);
}

.bc-panel--side-top {
  border-top: var(--border-width-thin) solid var(--border-default);
}

.bc-panel--side-bottom {
  border-bottom: var(--border-width-thin) solid var(--border-default);
}

.bc-panel--side-left {
  border-left: var(--border-width-thin) solid var(--border-default);
}

.bc-panel--side-right {
  border-right: var(--border-width-thin) solid var(--border-default);
}

/* Direction-aware panel borders */
.bc-panel--side-inline-start {
  border-inline-start: var(--border-width-thin) solid var(--border-default);
}

.bc-panel--side-inline-end {
  border-inline-end: var(--border-width-thin) solid var(--border-default);
}

.bc-panel--shadow-sm {
  box-shadow: var(--shadow-surface, var(--shadow-sm));
}

.bc-panel--shadow-md {
  box-shadow: var(--shadow-surface-elevated, var(--shadow-md));
}

.bc-panel--shadow-lg {
  box-shadow: var(--shadow-overlay, var(--shadow-lg));
}

/* Pagination Component */
.bc-pagination {
  --pagination-active-bg: var(--color-primary-500);
  --pagination-active-text: var(--color-white);
  --pagination-active-border: transparent;
  --pagination-active-bg-dark: var(--color-primary-600);
  --pagination-active-text-dark: var(--color-white);
  --pagination-active-border-dark: transparent;
  --pagination-hover-bg: var(--color-base-100);
  --pagination-hover-bg-dark: var(--color-base-700);

  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
}

/* Justify — distribute items across full width */
.bc-pagination--justify {
  justify-content: space-between;
  width: 100%;
}

/* Pagination Item (Button) */
.bc-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  padding: 0;
  cursor: pointer;
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-control-sm, var(--radius-sm));
  background: transparent;
  color: var(--color-base-700);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
  user-select: none;
}

.bc-pagination__item:hover:not(:disabled):not(.bc-pagination__item--active) {
  background-color: var(--pagination-hover-bg);
  color: var(--color-base-900);
}

.bc-pagination__item:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: 2px;
  z-index: 1;
}

/* Disabled State */
.bc-pagination__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bc-pagination__item:disabled:hover {
  background: transparent;
  color: var(--color-base-700);
}

/* Ellipsis Dots */
.bc-pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  color: var(--color-base-500);
  font-size: var(--font-size-md);
  user-select: none;
}

/* ------------------------------------------------------------------ */
/* Variant: filled (default)                                          */
/* ------------------------------------------------------------------ */
.bc-pagination--variant-filled .bc-pagination__item--active {
  background-color: var(--pagination-active-bg);
  color: var(--pagination-active-text);
  border-color: transparent;
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

/* ------------------------------------------------------------------ */
/* Variant: outline                                                   */
/* ------------------------------------------------------------------ */
.bc-pagination--variant-outline .bc-pagination__item {
  border-color: var(--pagination-item-border, var(--color-base-300));
}

.bc-pagination--variant-outline .bc-pagination__item--active {
  background-color: var(--pagination-active-bg);
  color: var(--pagination-active-text);
  border-color: var(--pagination-active-border);
  border-width: var(--border-width-default);
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

/* ------------------------------------------------------------------ */
/* Variant: light                                                     */
/* ------------------------------------------------------------------ */
.bc-pagination--variant-light .bc-pagination__item {
  background-color: var(--pagination-item-bg, var(--color-base-100));
}

.bc-pagination--variant-light .bc-pagination__item--active {
  background-color: var(--pagination-active-bg);
  color: var(--pagination-active-text);
  border-color: transparent;
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

/* ------------------------------------------------------------------ */
/* Variant: subtle                                                    */
/* ------------------------------------------------------------------ */
.bc-pagination--variant-subtle .bc-pagination__item {
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
}

.bc-pagination--variant-subtle .bc-pagination__item--active {
  background-color: transparent;
  color: var(--pagination-active-text);
  border-bottom-color: var(--pagination-active-text);
  font-weight: var(--font-weight-bold);
  cursor: default;
}

.bc-pagination--variant-subtle
  .bc-pagination__item:hover:not(:disabled):not(.bc-pagination__item--active) {
  background-color: transparent;
  border-bottom-color: var(--color-base-300);
}

.bc-pagination--variant-subtle .bc-pagination__dots {
  border-bottom: 2px solid transparent;
}

/* ------------------------------------------------------------------ */
/* Variant: pill                                                      */
/* ------------------------------------------------------------------ */
.bc-pagination--variant-pill .bc-pagination__item {
  border-radius: var(--radius-full);
}

.bc-pagination--variant-pill .bc-pagination__item--active {
  background-color: var(--pagination-active-bg);
  color: var(--pagination-active-text);
  border-color: transparent;
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

.bc-pagination--variant-pill .bc-pagination__dots {
  border-radius: var(--radius-full);
}

/* ------------------------------------------------------------------ */
/* Size Variants                                                      */
/* ------------------------------------------------------------------ */
.bc-pagination--size-xs .bc-pagination__item,
.bc-pagination--size-xs .bc-pagination__dots {
  min-width: var(--spacing-xl);
  height: var(--spacing-xl);
  font-size: var(--font-size-xs);
}

.bc-pagination--size-sm .bc-pagination__item,
.bc-pagination--size-sm .bc-pagination__dots {
  min-width: calc(var(--spacing-base) * 7);
  height: calc(var(--spacing-base) * 7);
  font-size: var(--font-size-sm);
}

.bc-pagination--size-md .bc-pagination__item,
.bc-pagination--size-md .bc-pagination__dots {
  min-width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  font-size: var(--font-size-md);
}

.bc-pagination--size-lg .bc-pagination__item,
.bc-pagination--size-lg .bc-pagination__dots {
  min-width: calc(var(--spacing-base) * 9);
  height: calc(var(--spacing-base) * 9);
  font-size: var(--font-size-lg);
}

.bc-pagination--size-xl .bc-pagination__item,
.bc-pagination--size-xl .bc-pagination__dots {
  min-width: var(--spacing-2xlh);
  height: var(--spacing-2xlh);
  font-size: var(--font-size-xl);
}

/* ------------------------------------------------------------------ */
/* Dark Mode                                                          */
/* ------------------------------------------------------------------ */
.dark .bc-pagination__item {
  color: var(--color-base-300);
}

.dark
  .bc-pagination__item:hover:not(:disabled):not(.bc-pagination__item--active) {
  background-color: var(--pagination-hover-bg-dark);
  color: var(--color-base-100);
}

/* Dark: filled */
.dark .bc-pagination--variant-filled .bc-pagination__item--active {
  background-color: var(--pagination-active-bg-dark);
  color: var(--pagination-active-text-dark);
}

/* Dark: outline */
.dark .bc-pagination--variant-outline .bc-pagination__item {
  border-color: var(--pagination-item-border-dark, var(--color-base-600));
}

.dark .bc-pagination--variant-outline .bc-pagination__item--active {
  background-color: var(--pagination-active-bg-dark);
  color: var(--pagination-active-text-dark);
  border-color: var(--pagination-active-border-dark);
}

/* Dark: light */
.dark .bc-pagination--variant-light .bc-pagination__item {
  background-color: var(--pagination-item-bg-dark, var(--color-base-800));
}

.dark .bc-pagination--variant-light .bc-pagination__item--active {
  background-color: var(--pagination-active-bg-dark);
  color: var(--pagination-active-text-dark);
}

/* Dark: subtle */
.dark .bc-pagination--variant-subtle .bc-pagination__item--active {
  color: var(--pagination-active-text-dark);
  border-bottom-color: var(--pagination-active-text-dark);
}

.dark
  .bc-pagination--variant-subtle
  .bc-pagination__item:hover:not(:disabled):not(.bc-pagination__item--active) {
  background-color: transparent;
  border-bottom-color: var(--color-base-600);
}

/* Dark: pill */
.dark .bc-pagination--variant-pill .bc-pagination__item--active {
  background-color: var(--pagination-active-bg-dark);
  color: var(--pagination-active-text-dark);
}

.dark .bc-pagination__item:disabled:hover {
  background: transparent;
  color: var(--color-base-300);
}

.dark .bc-pagination__dots {
  color: var(--color-base-600);
}

/* ------------------------------------------------------------------ */
/* Reduced Motion & High Contrast                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bc-pagination__item {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .bc-pagination__item {
    border-width: var(--border-width-medium);
  }

  .bc-pagination__item--active {
    border-color: var(--pagination-active-border, var(--pagination-active-bg));
  }

  .bc-pagination__item:focus-visible {
    outline-width: 3px;
  }
}

/* Password Strength Indicator Component */
.bc-password-strength {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-sm, var(--spacing-sm));
  width: 100%;
}

/* Strength bar */
.bc-password-strength__bar {
  width: 100%;
  height: var(--spacing-sm);
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dark .bc-password-strength__bar {
  background-color: var(--color-gray-700);
}

.bc-password-strength__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition:
    background-color
      var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
    width var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
      var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  background-color: var(--color-danger-500);
}

/* Strength levels */
.bc-password-strength--weak .bc-password-strength__fill {
  background-color: var(--color-danger-500);
}

.bc-password-strength--fair .bc-password-strength__fill {
  background-color: var(--color-warning-500);
}

.bc-password-strength--good .bc-password-strength__fill {
  background-color: var(--color-info-500);
}

.bc-password-strength--strong .bc-password-strength__fill {
  background-color: var(--color-success-500);
}

/* Strength label */
.bc-password-strength__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: right;
}

.bc-password-strength--weak .bc-password-strength__label {
  color: var(--color-danger-600);
}

.bc-password-strength--fair .bc-password-strength__label {
  color: var(--color-warning-600);
}

.bc-password-strength--good .bc-password-strength__label {
  color: var(--color-info-600);
}

.bc-password-strength--strong .bc-password-strength__label {
  color: var(--color-success-600);
}

.dark .bc-password-strength--weak .bc-password-strength__label {
  color: var(--color-danger-400);
}

.dark .bc-password-strength--fair .bc-password-strength__label {
  color: var(--color-warning-400);
}

.dark .bc-password-strength--good .bc-password-strength__label {
  color: var(--color-info-400);
}

.dark .bc-password-strength--strong .bc-password-strength__label {
  color: var(--color-success-400);
}

/* Requirements checklist */
.bc-password-strength__requirements {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-stack-xs, var(--spacing-xs));
}

.bc-password-strength__requirement {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-xs, var(--spacing-xs));
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  transition: color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-password-strength__requirement--met {
  color: var(--color-success-600);
}

.dark .bc-password-strength__requirement--met {
  color: var(--color-success-400);
}

.bc-password-strength__requirement-icon {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  width: var(--spacing-mdh);
  text-align: center;
}

.bc-password-strength__requirement-text {
  flex: 1;
}

/* Simplified bar variant */
.bc-password-strength-bar {
  width: 100%;
  height: var(--spacing-sm);
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dark .bc-password-strength-bar {
  background-color: var(--color-gray-700);
}

.bc-password-strength-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: all
    var(--motion-transition-medium, var(--motion-duration-base, 0.3s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  background-color: var(--color-danger-500);
}

.bc-password-strength-bar--weak .bc-password-strength-bar__fill {
  background-color: var(--color-danger-500);
}

.bc-password-strength-bar--fair .bc-password-strength-bar__fill {
  background-color: var(--color-warning-500);
}

.bc-password-strength-bar--good .bc-password-strength-bar__fill {
  background-color: var(--color-info-500);
}

.bc-password-strength-bar--strong .bc-password-strength-bar__fill {
  background-color: var(--color-success-500);
}

/* Text variant */
.bc-password-strength-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.bc-password-strength-text--weak {
  color: var(--color-danger-600);
}

.bc-password-strength-text--fair {
  color: var(--color-warning-600);
}

.bc-password-strength-text--good {
  color: var(--color-info-600);
}

.bc-password-strength-text--strong {
  color: var(--color-success-600);
}

.dark .bc-password-strength-text--weak {
  color: var(--color-danger-400);
}

.dark .bc-password-strength-text--fair {
  color: var(--color-warning-400);
}

.dark .bc-password-strength-text--good {
  color: var(--color-info-400);
}

.dark .bc-password-strength-text--strong {
  color: var(--color-success-400);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-password-strength__bar,
  .bc-password-strength-bar {
    border: var(--border-width-thin) solid var(--border-default);
  }

  .dark .bc-password-strength__bar,
  .dark .bc-password-strength-bar {
    border-color: var(--border-default);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-password-strength__fill,
  .bc-password-strength-bar__fill {
    transition: none;
  }

  .bc-password-strength__requirement {
    transition: none;
  }
}

/* Presence Overlay - Collaborative editing cursors and selections */

.bc-presence-selection {
  position: relative;
  display: inline;
}

/* Highlight */
.bc-presence-highlight {
  background-color: color-mix(
    in srgb,
    var(--presence-color, var(--color-primary-600)) 12%,
    transparent
  );
  border-radius: 1px;
}

/* Cursor */
.bc-presence-cursor {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: text-top;
}

.bc-presence-cursor__bar {
  position: absolute;
  top: -1px;
  left: 0;
  width: 2px;
  height: calc(1em + 4px);
  background: var(--presence-color, var(--color-primary-600));
  border-radius: 1px;
}

.bc-presence-cursor__label {
  position: absolute;
  bottom: calc(100% + 2px);
  left: -1px;
  padding: 1px 6px;
  background: var(--presence-color, var(--color-primary-600));
  color: var(--color-white);
  font-size: 9px;
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  border-radius: 3px 3px 3px 0;
  line-height: 1.4;
  pointer-events: none;
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
}

/* Animation for cursor blink */
@keyframes presence-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.bc-presence-cursor__bar {
  animation: presence-blink 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bc-presence-cursor__bar {
    animation: none;
  }
}

/* ProgressBar Component - Progress indicator with determinate and indeterminate states */

.bc-progress-bar-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}

.bc-progress-bar {
  --progress-fill: var(--color-primary-500);
  --progress-fill-dark: var(--color-primary-600);
  --progress-track: oklch(0.9 0 0);
  --progress-track-dark: oklch(0.3 0 0);

  position: relative;
  width: 100%;
  overflow: hidden;
}

.bc-progress-bar__track {
  width: 100%;
  height: 100%;
  background-color: var(--progress-track);
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

.bc-progress-bar__fill {
  height: 100%;
  background-color: var(--progress-fill);
  border-radius: inherit;
  transition: width var(--motion-transition-medium)
    var(--motion-easing-standard);
  will-change: width;
}

/* Size variants */
.bc-progress-bar--size-sm {
  height: var(--spacing-base);
  min-width: var(--spacing-2xl);
}

.bc-progress-bar--size-md {
  height: var(--spacing-md);
  min-width: var(--spacing-3xl);
}

.bc-progress-bar--size-lg {
  height: var(--spacing-mdh);
  min-width: var(--spacing-4xl);
}

/* Indeterminate state - animated sliding bar */
.bc-progress-bar--indeterminate .bc-progress-bar__fill {
  width: 40%;
  position: absolute;
  animation: bc-progress-indeterminate 1.5s cubic-bezier(0.4, 0, 0.6, 1)
    infinite;
}

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

/* Label text */
.bc-progress-bar__label {
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: right;
  line-height: var(--line-height-none);
}

/* Dark mode styles */
.dark .bc-progress-bar__track {
  background-color: var(--progress-track-dark);
}

.dark .bc-progress-bar__fill {
  background-color: var(--progress-fill-dark);
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .bc-progress-bar__fill {
    transition: none;
  }

  .bc-progress-bar--indeterminate .bc-progress-bar__fill {
    animation: none;
    /* Show static partial fill instead of animation */
    width: 40%;
    transform: translateX(0);
  }
}

/* High contrast mode: add borders for better visibility */
@media (prefers-contrast: high) {
  .bc-progress-bar__track {
    outline: var(--outline-width-default) solid currentColor;
    outline-offset: calc(-1 * var(--outline-width-default));
  }

  .bc-progress-bar__fill {
    outline: var(--outline-width-default) solid var(--progress-fill);
    outline-offset: calc(-1 * var(--outline-width-default));
  }
}

/* Scrollable Panel Component */
.bc-scrollable-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Header - always sticks to top */
.bc-scrollable-panel__header {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Body - scrollable content area */
.bc-scrollable-panel__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

/* Footer - always sticks to bottom */
.bc-scrollable-panel__footer {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Ensure proper stacking context */
.bc-scrollable-panel__header,
.bc-scrollable-panel__footer {
  isolation: isolate;
}

/* Shadow containers — always positioned, visibility controlled by opacity */
.bc-scrollable-panel--header-shadow,
.bc-scrollable-panel--footer-shadow {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}

.bc-scrollable-panel--header-shadow > div,
.bc-scrollable-panel--footer-shadow > div {
  width: 100%;
  height: 0;
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  background: linear-gradient(
    var(--gradient-direction, to bottom),
    rgb(0 0 0 / 0.04),
    transparent
  );
  pointer-events: none;
}

.bc-scrollable-panel--header-shadow > div {
  --gradient-direction: to bottom;
  top: 0;
  height: 6px;
}

.bc-scrollable-panel--footer-shadow > div {
  --gradient-direction: to top;
  bottom: 0;
  height: 6px;
}

/* Show header shadow when scrolled down */
.bc-scrollable-panel--scrolled-down .bc-scrollable-panel--header-shadow > div {
  opacity: 1;
}

/* Show footer shadow when scrolled up (content below) */
.bc-scrollable-panel--scrolled-up .bc-scrollable-panel--footer-shadow > div {
  opacity: 1;
}

/* Custom scrollbar styling (webkit browsers) */
.bc-scrollable-panel__body::-webkit-scrollbar {
  width: var(--spacing-md);
}

.bc-scrollable-panel__body::-webkit-scrollbar-track {
  background: var(--color-base-200);
  border-radius: var(--radius-sm);
}

.bc-scrollable-panel__body::-webkit-scrollbar-thumb {
  background: var(--color-base-400);
  border-radius: var(--radius-sm);
  transition: background-color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-base-500);
}

/* Firefox scrollbar styling */
.bc-scrollable-panel__body {
  scrollbar-width: thin;
  scrollbar-color: var(--color-base-400) var(--color-base-200);
}

/* Dark mode styles */
.dark .bc-scrollable-panel__body::-webkit-scrollbar-track {
  background: var(--bg-subtle);
}

.dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb {
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
}

.dark .bc-scrollable-panel__body::-webkit-scrollbar-thumb:hover {
  background: var(--bg-overlay);
}

.dark .bc-scrollable-panel__body {
  scrollbar-color: var(--bg-raised) var(--bg-subtle);
}

/* Segmented Control Component */
.bc-segmented-input {
  background-color: var(--color-base-200);
  border-radius: var(--radius-pill, var(--radius-full));
  box-shadow: var(--shadow-surface, var(--shadow-sm));
  position: relative;
  border: var(--border-width-thin) solid var(--color-base-300);
  padding: var(--spacing-xs);
  display: inline-block;
}

.bc-segmented-input__container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Sliding indicator */
.bc-segmented-input__indicator {
  position: absolute;
  height: 100%;
  background-color: var(--si-indicator-bg, var(--color-base-50));
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  border-radius: var(--radius-pill, var(--radius-full));
  box-shadow: var(--shadow-surface, var(--shadow-sm));
  z-index: 1;
}

/* Segment buttons */
.bc-segmented-input__segment {
  position: relative;
  /* padding: var(--spacing-sm) var(--spacing-md); */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  font-weight: var(--font-weight-semibold);
  color: var(--color-base-700);
  transition: color
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  z-index: 2;
  border-radius: var(--radius-pill, var(--radius-full));
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
}

.bc-segmented-input--size-xs .bc-segmented-input__segment {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
}

.bc-segmented-input--size-sm .bc-segmented-input__segment {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.bc-segmented-input--size-md .bc-segmented-input__segment {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-md);
}

.bc-segmented-input--size-lg .bc-segmented-input__segment {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
}

.bc-segmented-input--size-xl .bc-segmented-input__segment {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-xl);
}

/* Squared variant — matches TextInput border-radius and approximate height */
.bc-segmented-input--squared {
  border-radius: var(--radius-control, var(--radius-md));
}

.bc-segmented-input--squared .bc-segmented-input__indicator {
  border-radius: var(--radius-control-sm, var(--radius-sm));
}

.bc-segmented-input--squared .bc-segmented-input__segment {
  border-radius: var(--radius-control-sm, var(--radius-sm));
}

.bc-segmented-input__segment:hover {
  background-color: var(--color-white);
  color: var(--color-base-900);
}

.bc-segmented-input__segment--active {
  color: var(--si-active-text, var(--color-primary-800));
}

.bc-segmented-input__segment--inactive {
  color: var(--color-base-600);
}

/* Disabled state */
.bc-segmented-input--disabled {
  background-color: var(--color-base-300);
  border: var(--border-width-thin) solid var(--color-base-300);
  cursor: not-allowed;
}

.bc-segmented-input--disabled .bc-segmented-input__segment {
  color: var(--text-muted);
  cursor: not-allowed;
}

.bc-segmented-input--disabled .bc-segmented-input__segment:hover {
  background-color: var(--color-base-300);
}

.bc-segmented-input--disabled .bc-segmented-input__segment--active,
.bc-segmented-input--disabled .bc-segmented-input__segment--active:hover {
  background-color: var(--color-base-200);
  color: var(--text-muted);
}

/* Dark mode styles */
.dark .bc-segmented-input {
  background-color: var(--bg-subtle);
  border: var(--border-width-thin) solid var(--border-default);
}

.dark .bc-segmented-input__indicator {
  background-color: var(--si-indicator-bg-dark, var(--bg-elevated));
  box-shadow: var(
    --shadow-segmented-control-indicator-dark,
    0 1px 3px var(--shadow-color-dark),
    0 0 0 1px var(--shadow-highlight-dark)
  );
}

.dark .bc-segmented-input__segment {
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  border-radius: var(--radius-full);
}

.dark .bc-segmented-input--squared .bc-segmented-input__segment {
  border-radius: var(--radius-control-sm, var(--radius-sm));
}

.dark .bc-segmented-input__segment:hover {
  color: var(--text-normal);
  background-color: var(--interactive-hover);
}

.dark .bc-segmented-input__segment--active,
.dark .bc-segmented-input__segment--active:hover {
  color: var(--si-active-text-dark, var(--text-normal));
  background: transparent;
}

.dark .bc-segmented-input__segment--inactive:hover {
  color: var(--text-normal);
}

/* Disabled state (dark) */
.dark .bc-segmented-input--disabled {
  background-color: var(--bg-background);
  border: var(--border-width-thin) solid var(--border-divider);
  opacity: 0.5;
}

.dark .bc-segmented-input--disabled .bc-segmented-input__indicator {
  background-color: var(--bg-subtle);
  box-shadow: var(--shadow-none, none);
}

.dark .bc-segmented-input--disabled .bc-segmented-input__segment {
  cursor: not-allowed;
}

.dark .bc-segmented-input--disabled .bc-segmented-input__segment:hover {
  background-color: transparent;
}

.bc-sidebar {
  background-color: var(--bg-background);
  padding: var(--spacing-lg);
  width: 100%;
}

.bc-sidebar-group__header,
.bc-sidebar-link {
  color: var(--text-normal);
}

/* Dark background mode - override semantic tokens to invert colors */
.bc-sidebar--dark-bg {
  --bg-background: var(--bg-background-dark);
  --bg-surface: var(--bg-surface-dark);
  --text-normal: var(--text-normal-dark);
  --text-muted: var(--text-muted-dark);
  --text-inverted: var(--text-inverted-dark);
  --border-default: var(--border-border-dark);
  --border-divider: var(--border-divider-dark);
  --border-input: var(--border-input-dark);
  --border-strong: var(--border-strong-dark);
  --interactive-hover: var(--interactive-hover-dark);
  --interactive-active: var(--interactive-active-dark);
  --interactive-focus: var(--interactive-focus-dark);
}

.dark .bc-sidebar--dark-bg {
  --bg-background: var(--bg-background-light);
  --bg-surface: var(--bg-surface-light);
  --text-normal: var(--text-normal-light);
  --text-muted: var(--text-muted-light);
  --text-inverted: var(--text-inverted-light);
  --border-default: var(--border-border-light);
  --border-divider: var(--border-divider-light);
  --border-input: var(--border-input-light);
  --border-strong: var(--border-strong-light);
  --interactive-hover: var(--interactive-hover-light);
  --interactive-active: var(--interactive-active-light);
  --interactive-focus: var(--interactive-focus-light);
}

.bc-sidebar-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-stack-sm, var(--spacing-md));
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  padding: var(--spacing-md) var(--spacing-md);
}

.bc-sidebar-group__header {
  font-weight: 500;
  color: var(--color-base-500);
  padding-inline-start: 0;
}

.bc-sidebar-link__content {
  flex: 1;
  text-align: start;
}

button.bc-sidebar-link:hover,
a.bc-sidebar-link:hover {
  background-color: var(--interactive-hover);
  cursor: pointer;
}

span.bc-sidebar-link {
  font-weight: var(--font-weight-medium);
  width: 100%;
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  border-radius: var(--radius-md);
}

.dark span.bc-sidebar-link {
  background-color: var(--color-primary-950);
  color: var(--color-primary-200);
}

/* Dark bg inverts the active link colors */
.bc-sidebar--dark-bg span.bc-sidebar-link {
  background-color: var(--color-primary-950);
  color: var(--color-primary-200);
}

.dark .bc-sidebar--dark-bg span.bc-sidebar-link {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}

.bc-sidebar-link--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  color: var(--text-muted);
}

.bc-sidebar-link--action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-control, var(--radius-md));
  cursor: pointer;
  padding: var(--spacing-sm);
  color: var(--text-normal);
}

.bc-sidebar-link--action:hover {
  background-color: var(--interactive-hover);
  border-color: var(--border-divider);
}

.bc-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: stretch;
  width: 100%;
}

.bc-sidebar-group--rail {
  padding-inline-start: var(--spacing-md);
  margin-left: 1px;
  border-left: var(--border-width-thin) solid var(--border-default);
}

.bc-sidebar-group-collapsible-indicator {
  transition: transform
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-sidebar-group-collapsible--open .bc-sidebar-group-collapsible-indicator {
  transform: rotate(0deg);
}

.bc-sidebar-group-collapsible--closed .bc-sidebar-group-collapsible-indicator {
  transform: rotate(90deg);
}

/* RTL support for collapsible indicator */
.b-rtl
  .bc-sidebar-group-collapsible--closed
  .bc-sidebar-group-collapsible-indicator {
  transform: rotate(-90deg);
}

.bc-sidebar-separator {
  border: none;
  border-top: var(--border-width-thin) solid var(--border-default);
  margin: var(--spacing-md) 0;
}

/* Sink Component */
.bc-sink {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-surface, var(--radius-lg));
  border: var(--border-width-thin) solid var(--color-base-300);
  padding: var(--spacing-md);
  box-shadow: var(
    --shadow-sink,
    inset 0 1px 3px color-mix(in srgb, var(--color-black) 8%, transparent)
  );
  background-color: var(--color-base-50);
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Sink variants */
.bc-sink--deep {
  box-shadow: var(
    --shadow-sink-deep,
    inset 0 2px 6px color-mix(in srgb, var(--color-black) 12%, transparent)
  );
}

.bc-sink--shallow {
  box-shadow: var(
    --shadow-sink-shallow,
    inset 0 1px 2px color-mix(in srgb, var(--color-black) 5%, transparent)
  );
}

.bc-sink--flat {
  box-shadow: var(--shadow-sink-flat, none);
  border: var(--border-width-thin) solid var(--color-base-200);
}

/* Sink sizes */
.bc-sink--padding-xs {
  padding: var(--spacing-xs);
}

.bc-sink--padding-sm {
  padding: var(--spacing-sm);
}

.bc-sink--padding-md {
  padding: var(--spacing-md);
}

.bc-sink--padding-lg {
  padding: var(--spacing-lg);
}

.bc-sink--padding-xl {
  padding: var(--spacing-xl);
}

/* Sink roundedness */
.bc-sink--rounded-none {
  border-radius: 0;
}

.bc-sink--rounded-sm {
  border-radius: var(--radius-sm);
}

.bc-sink--rounded-md {
  border-radius: var(--radius-md);
}

.bc-sink--rounded-lg {
  border-radius: var(--radius-lg);
}

.bc-sink--rounded-xl {
  border-radius: var(--radius-xl);
}

.bc-sink--rounded-full {
  border-radius: var(--radius-full);
}

/* Dark mode styles */
.dark .bc-sink {
  background-color: var(--bg-background);
  border: var(--border-width-thin) solid var(--border-default);
  box-shadow: var(--shadow-sink-dark, inset 0 2px 4px var(--shadow-color-dark));
  color: var(--text-normal);
}

.dark .bc-sink--deep {
  box-shadow: var(
    --shadow-sink-dark-deep,
    inset 0 4px 8px var(--shadow-color-dark)
  );
}

.dark .bc-sink--shallow {
  box-shadow: var(
    --shadow-sink-dark-shallow,
    inset 0 1px 2px var(--shadow-color-dark)
  );
}

.dark .bc-sink--flat {
  box-shadow: var(--shadow-sink-dark-flat, none);
  border: var(--border-width-thin) solid var(--border-divider);
  background-color: var(--bg-subtle);
}

/* Skeleton Component - Loading placeholders with shimmer animation */

.bc-skeleton {
  --skeleton-bg: oklch(0.92 0 0);
  --skeleton-shimmer: oklch(0.96 0 0);

  display: block;
  background-color: var(--skeleton-bg);
  overflow: hidden;
  position: relative;
}

/* Shimmer animation */
.bc-skeleton--animate {
  background: linear-gradient(
    90deg,
    var(--skeleton-bg) 0%,
    var(--skeleton-shimmer) 50%,
    var(--skeleton-bg) 100%
  );
  background-size: 200% 100%;
  animation: bc-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes bc-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Variant: Text (default) */
.bc-skeleton--text {
  height: 1em;
  width: 100%;
}

/* Variant: Rectangle */
.bc-skeleton--rect {
  width: 100%;
  min-height: var(--spacing-2xl);
}

/* Variant: Circle */
.bc-skeleton--circle {
  border-radius: 50%;
  aspect-ratio: 1;
}

/* Multi-line text skeleton */
.bc-skeleton__lines-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-smh);
  width: 100%;
}

.bc-skeleton__line {
  height: 1em;
  width: 100%;
}

.bc-skeleton__line:last-child {
  width: 80%;
}

/* Dark mode styles */
.dark .bc-skeleton {
  --skeleton-bg: oklch(0.25 0 0);
  --skeleton-shimmer: oklch(0.3 0 0);
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .bc-skeleton--animate {
    animation: none;
    background: var(--skeleton-bg);
  }
}

/* High contrast mode: add subtle border */
@media (prefers-contrast: high) {
  .bc-skeleton {
    outline: var(--outline-width-default) solid currentColor;
    outline-offset: calc(-1 * var(--outline-width-default));
  }
}

.bc-stack {
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}

.bc-stack--gap-1 {
  gap: var(--spacing-xs);
}

.bc-stack--gap-2 {
  gap: var(--spacing-sm);
}

.bc-stack--gap-4 {
  gap: var(--spacing-lg);
}

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

.bc-stack--grow {
  flex-grow: 1;
  width: 100%;
}

/* Switch Component */
.bc-switch {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-stack-sm);
  cursor: pointer;
  --switch-track-on-bg: var(--color-primary-500);
  --switch-track-on-label: var(--color-gray-100);
  --switch-track-on-bg-dark: var(--color-primary-600);
  --switch-track-on-label-dark: var(--text-normal);
  --switch-track-on-border-dark: var(--color-primary-500);
}

/* Switch label */
.bc-switch__label {
  color: var(--color-gray-500);
  user-select: none;
}

.bc-switch__label--nowrap {
  white-space: nowrap;
}

.bc-switch--size-xs .bc-switch__label {
  font-size: var(--font-size-xs);
}

.bc-switch--size-sm .bc-switch__label {
  font-size: var(--font-size-sm);
}

.bc-switch--size-md .bc-switch__label {
  font-size: var(--font-size-md);
}

.bc-switch--size-lg .bc-switch__label {
  font-size: var(--font-size-lg);
}

.bc-switch--size-xl .bc-switch__label {
  font-size: var(--font-size-xl);
}

/* Switch track container */
.bc-switch__track {
  position: relative;
  display: grid;
  grid-template-areas: 'stack';
  border-radius: var(--radius-full);
  box-shadow:
    inset 0 1px 3px 0 color-mix(in srgb, var(--color-black) 10%, transparent),
    inset 0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent);
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-base);
}

/* Switch track - off state */
.bc-switch__track--off {
  background-color: var(--color-gray-300);
}

/* Switch track - on state */
.bc-switch__track--on {
  background-color: var(--switch-track-on-bg, var(--color-primary-500));
}

/* Switch labels inside track */
.bc-switch__track-label {
  grid-area: stack;
  display: flex;
  align-items: center;
  z-index: 1;
  transition: opacity var(--motion-transition-medium)
    var(--motion-easing-standard);
  pointer-events: none;
}

/* Off label positioning and styling */
.bc-switch__track-label--off {
  justify-content: flex-end;
  padding-inline-end: var(--spacing-base);
  padding-inline-start: var(--spacing-lgh);
  color: var(--color-gray-600);
  line-height: var(--line-height-none);
}

/* On label positioning and styling */
.bc-switch__track-label--on {
  justify-content: flex-start;
  padding-inline-end: var(--spacing-lgh);
  padding-inline-start: var(--spacing-base);
  color: var(--switch-track-on-label, var(--color-gray-100));
  line-height: var(--line-height-none);
}

.bc-switch--size-xs .bc-switch__track-label {
  font-size: var(--font-size-2xs);
}

.bc-switch--size-sm .bc-switch__track-label {
  font-size: var(--font-size-xs);
}

.bc-switch--size-md .bc-switch__track-label {
  font-size: var(--font-size-sm);
}

.bc-switch--size-lg .bc-switch__track-label {
  font-size: var(--font-size-md);
}

.bc-switch--size-xl .bc-switch__track-label {
  font-size: var(--font-size-lg);
}

/* Label visibility states */
.bc-switch__track-label--visible {
  opacity: 1;
}

.bc-switch__track-label--hidden {
  opacity: 0;
}

/* Switch thumb/handle */
.bc-switch__thumb {
  grid-area: stack;
  position: relative;
  width: var(--spacing-lg); /* 16px equivalent */
  height: var(--spacing-lg);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  box-shadow: var(
    --shadow-switch-thumb,
    0 1px 3px 0 color-mix(in srgb, var(--color-black) 10%, transparent),
    0 1px 2px 0 color-mix(in srgb, var(--color-black) 6%, transparent)
  );
  z-index: 1;
  inset-inline-start: 0;
  transition: inset-inline-start var(--motion-duration-fast, 120ms)
    cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}

/* Thumb position when on — uses inset-inline-start so RTL is handled
   automatically via the logical property. calc(100% - thumbWidth) moves
   the thumb to the far end of the grid area regardless of track width. */
.bc-switch__thumb--on {
  inset-inline-start: calc(100% - var(--spacing-lg));
}

/* Size variants for track and thumb */
.bc-switch--xs .bc-switch__thumb {
  width: var(--spacing-mdh); /* 12px equivalent */
  height: var(--spacing-mdh);
}
.bc-switch--xs .bc-switch__thumb--on {
  inset-inline-start: calc(100% - var(--spacing-mdh));
}
.bc-switch--xs .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: var(--spacing-lg);
}
.bc-switch--xs .bc-switch__track-label--on {
  padding-inline-end: var(--spacing-lg);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--xs .bc-switch__track {
  min-width: calc(var(--spacing-base) * 7.5);
}

.bc-switch--sm .bc-switch__thumb {
  width: calc(var(--spacing-base) * 3.5); /* 14px equivalent */
  height: calc(var(--spacing-base) * 3.5);
}
.bc-switch--sm .bc-switch__thumb--on {
  inset-inline-start: calc(100% - var(--spacing-base) * 3.5);
}
.bc-switch--sm .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: var(--spacing-lgh);
}
.bc-switch--sm .bc-switch__track-label--on {
  padding-inline-end: var(--spacing-lgh);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--sm .bc-switch__track {
  min-width: calc(var(--spacing-base) * 9);
}

.bc-switch--md .bc-switch__thumb {
  width: var(--spacing-lg); /* 20px equivalent */
  height: var(--spacing-lg);
}
.bc-switch--md .bc-switch__thumb--on {
  inset-inline-start: calc(100% - var(--spacing-lg));
}
.bc-switch--md .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: var(--spacing-xl);
}
.bc-switch--md .bc-switch__track-label--on {
  padding-inline-end: var(--spacing-xl);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--md .bc-switch__track {
  min-width: calc(var(--spacing-base) * 10.5);
}

.bc-switch--lg .bc-switch__thumb {
  width: var(--spacing-lgh); /* 20px equivalent */
  height: var(--spacing-lgh);
}
.bc-switch--lg .bc-switch__thumb--on {
  inset-inline-start: calc(100% - var(--spacing-lgh));
}
.bc-switch--lg .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: calc(var(--spacing-base) * 7);
}
.bc-switch--lg .bc-switch__track-label--on {
  padding-inline-end: calc(var(--spacing-base) * 7);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--lg .bc-switch__track {
  min-width: var(--spacing-3xl);
}

.bc-switch--xl .bc-switch__thumb {
  width: var(--spacing-xl); /* 24px equivalent */
  height: var(--spacing-xl);
}
.bc-switch--xl .bc-switch__thumb--on {
  inset-inline-start: calc(100% - var(--spacing-xl));
}
.bc-switch--xl .bc-switch__track-label--off {
  padding-inline-end: var(--spacing-base);
  padding-inline-start: calc(var(--spacing-base) * 7);
}
.bc-switch--xl .bc-switch__track-label--on {
  padding-inline-end: calc(var(--spacing-base) * 7);
  padding-inline-start: var(--spacing-base);
}
.bc-switch--xl .bc-switch__track {
  min-width: calc(var(--spacing-base) * 13.5);
}

/* Match input height — adds vertical padding so the switch occupies the same
   height as text inputs at the corresponding size. */
.bc-switch--match-input.bc-switch--xs {
  padding-block: var(--spacing-smh);
}
.bc-switch--match-input.bc-switch--sm {
  padding-block: var(--spacing-md);
}
.bc-switch--match-input.bc-switch--md {
  padding-block: calc(var(--spacing-base) * 1.75);
}
.bc-switch--match-input.bc-switch--lg {
  padding-block: var(--spacing-md);
}
.bc-switch--match-input.bc-switch--xl {
  padding-block: var(--spacing-md);
}

/* Focus styles are handled by the base focus system */

/* Disabled state */
.bc-switch--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.bc-switch--disabled .bc-switch__track {
  cursor: not-allowed;
}

/* Dark mode styles */
.dark .bc-switch__label {
  color: var(--text-normal);
}

.dark .bc-switch__track--off {
  background-color: var(--bg-subtle);
  border: var(--border-width-thin) solid var(--border-default);
}

.dark .bc-switch__track--on {
  background-color: var(--switch-track-on-bg-dark, var(--color-primary-600));
  border: var(--border-width-thin) solid
    var(--switch-track-on-border-dark, var(--color-primary-500));
}

.dark .bc-switch__track-label--on {
  color: var(--switch-track-on-label-dark, var(--text-normal));
}

.dark .bc-switch__thumb {
  background-color: var(--text-normal);
  box-shadow: var(--shadow-switch-thumb-dark, var(--shadow-md));
}

/* Table Container */
.bc-table-container {
  --table-bg: var(--color-white);
  --table-text: var(--text-normal);
  --table-border: var(--border-default);
  --table-header-bg: var(--bg-surface);
  --table-header-text: var(--text-normal);
  --table-stripe-bg: var(--bg-background);
  --table-hover-bg: var(--interactive-hover);
  --table-border-radius: var(--radius-surface, var(--radius-lg));

  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--table-border-radius);
}

/* Container for sticky header - needs to be scrollable */
.bc-table-container--sticky {
  max-height: 100%;
  overflow: auto;
}

/* Full width container */
.bc-table-container--full-width {
  display: block;
  width: 100%;
}

/* Table Component */
.bc-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--table-bg);
  color: var(--table-text);
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  border: none;
}

/* Table header */
.bc-table > thead,
.bc-table > tfoot {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: var(--font-weight-semibold);
}

/* Sticky header */
.bc-table--sticky-header > thead {
  position: sticky;
  top: 0;
  z-index: var(--z-index-raised, 10);
  box-shadow: var(--shadow-sm);
}

/* Sticky footer */
.bc-table--sticky-header > tfoot {
  position: sticky;
  bottom: 0;
  z-index: var(--z-index-raised, 10);
  box-shadow: var(--shadow-sm);
}

/* Table cells */
.bc-table > thead > tr > th,
.bc-table > thead > tr > td,
.bc-table > tbody > tr > th,
.bc-table > tbody > tr > td,
.bc-table > tfoot > tr > th,
.bc-table > tfoot > tr > td {
  text-align: left;
  vertical-align: middle;
  padding: var(--spacing-md);
  border: none;
}

.bc-table > thead > tr > th,
.bc-table > tbody > tr > th,
.bc-table > tfoot > tr > th {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* With table border */
.bc-table-container--with-table-border {
  border: var(--border-width-thin) solid var(--table-border);
}

/* With row borders */
.bc-table--with-row-borders > thead > tr > th,
.bc-table--with-row-borders > thead > tr > td,
.bc-table--with-row-borders > tbody > tr > th,
.bc-table--with-row-borders > tbody > tr > td,
.bc-table--with-row-borders > tfoot > tr > th,
.bc-table--with-row-borders > tfoot > tr > td {
  border-bottom: var(--border-width-thin) solid var(--table-border);
}

/* With column borders */
.bc-table--with-column-borders > thead > tr > th,
.bc-table--with-column-borders > thead > tr > td,
.bc-table--with-column-borders > tbody > tr > th,
.bc-table--with-column-borders > tbody > tr > td,
.bc-table--with-column-borders > tfoot > tr > th,
.bc-table--with-column-borders > tfoot > tr > td {
  border-right: var(--border-width-thin) solid var(--table-border);
}

.bc-table--with-column-borders > thead > tr > th:last-child,
.bc-table--with-column-borders > thead > tr > td:last-child,
.bc-table--with-column-borders > tbody > tr > th:last-child,
.bc-table--with-column-borders > tbody > tr > td:last-child,
.bc-table--with-column-borders > tfoot > tr > th:last-child,
.bc-table--with-column-borders > tfoot > tr > td:last-child {
  border-right: none;
}

/* With striped rows */
.bc-table--with-striped-rows > tbody > tr:nth-child(even) {
  background-color: var(--table-stripe-bg);
}

/* Hoverable striped rows - darker stripe on hover */
.bc-table--hoverable.bc-table--with-striped-rows
  > tbody
  > tr:nth-child(even):hover {
  background-color: var(--table-hover-bg);
  filter: brightness(0.95);
}

/* Size variants */
.bc-table--size-xs > thead > tr > th,
.bc-table--size-xs > thead > tr > td,
.bc-table--size-xs > tbody > tr > th,
.bc-table--size-xs > tbody > tr > td,
.bc-table--size-xs > tfoot > tr > th,
.bc-table--size-xs > tfoot > tr > td {
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.bc-table--size-sm > thead > tr > th,
.bc-table--size-sm > thead > tr > td,
.bc-table--size-sm > tbody > tr > th,
.bc-table--size-sm > tbody > tr > td,
.bc-table--size-sm > tfoot > tr > th,
.bc-table--size-sm > tfoot > tr > td {
  padding: var(--spacing-smh);
  font-size: var(--font-size-sm);
}

.bc-table--size-lg > thead > tr > th,
.bc-table--size-lg > thead > tr > td,
.bc-table--size-lg > tbody > tr > th,
.bc-table--size-lg > tbody > tr > td,
.bc-table--size-lg > tfoot > tr > th,
.bc-table--size-lg > tfoot > tr > td {
  padding: var(--spacing-lg);
  font-size: var(--font-size-lg);
}

.bc-table--size-xl > thead > tr > th,
.bc-table--size-xl > thead > tr > td,
.bc-table--size-xl > tbody > tr > th,
.bc-table--size-xl > tbody > tr > td,
.bc-table--size-xl > tfoot > tr > th,
.bc-table--size-xl > tfoot > tr > td {
  padding: var(--spacing-lgh);
  font-size: var(--font-size-lg);
}

/* Hoverable rows */
.bc-table--hoverable > tbody > tr {
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
  cursor: pointer;
}

.bc-table--hoverable > tbody > tr:hover {
  background-color: var(--table-hover-bg);
}

/* Footer */
.bc-table__footer {
  background-color: var(--table-header-bg);
  font-weight: var(--font-weight-semibold);
  border-top: var(--border-width-medium) solid var(--table-border);
}

/* Dark mode styles */
.dark .bc-table-container {
  --table-bg: var(--bg-background);
  --table-stripe-bg: var(--bg-surface);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .bc-table--hoverable > tbody > tr {
    transition: none;
  }
}

/* Responsive behavior - allow horizontal scroll on small screens */
@media (width < 48rem) {
  .bc-table-container {
    overflow-x: auto;
  }

  .bc-table {
    white-space: nowrap;
  }
}

/* Tabs Component */
.bc-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bc-tabs--horizontal {
  flex-direction: column;
}

.bc-tabs--vertical {
  flex-direction: row;
}

.bc-tabs--disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Tab List */
.bc-tabs__list {
  display: flex;
  position: relative;
  background-color: var(--color-base-100);
  border-bottom: var(--border-width-medium) solid var(--color-base-200);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: max-content;
  flex-shrink: 0;
}

.bc-tabs__list::-webkit-scrollbar {
  display: none;
}

.bc-tabs--vertical .bc-tabs__list {
  flex-direction: column;
  border-bottom: none;
  border-right: var(--border-width-medium) solid var(--color-base-200);
  min-width: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Individual Tab */
.bc-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
  font-weight: var(--font-weight-medium);
  color: var(--color-base-600);
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
  white-space: nowrap;
  position: relative;
  border-radius: var(--radius-control-sm, var(--radius-sm))
    var(--radius-control-sm, var(--radius-sm)) 0 0;
}

.bc-tabs--vertical .bc-tab {
  justify-content: flex-start;
  border-radius: var(--radius-control-sm, var(--radius-sm)) 0 0
    var(--radius-control-sm, var(--radius-sm));
}

/* Tab Sizes */
.bc-tab--xs {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-xs);
  min-height: var(--spacing-xl);
}

.bc-tab--sm {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  min-height: var(--spacing-2xl);
}

.bc-tab--md {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-md);
  min-height: var(--spacing-3xl);
}

.bc-tab--lg {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: var(--font-size-lg);
  min-height: var(--spacing-4xl);
}

.bc-tab--xl {
  padding: var(--spacing-xl) var(--spacing-3xl);
  font-size: var(--font-size-xl);
  min-height: calc(var(--spacing-base) * 20);
}

/* Tab States */
.bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
  color: var(--color-base-800);
  background-color: var(--color-base-50);
}

.bc-tab:focus-visible {
  outline: var(--outline-width-focus) solid
    var(--tabs-indicator-color, var(--color-primary-500));
  outline-offset: calc(-1 * var(--outline-width-focus));
  z-index: 1;
}

.bc-tab--active {
  color: var(--tabs-active-color, var(--color-primary-600));
  background-color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

.bc-tab--active::after {
  content: '';
  position: absolute;
  background-color: var(--tabs-indicator-color, var(--color-primary-500));
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
}

.bc-tabs--horizontal .bc-tab--active::after {
  bottom: calc(-1 * var(--spacing-xs));
  left: 0;
  right: 0;
  height: var(--spacing-xs);
}

.bc-tabs--vertical .bc-tab--active::after {
  right: calc(-1 * var(--spacing-xs));
  top: 0;
  bottom: 0;
  width: var(--spacing-xs);
}

.bc-tab--disabled {
  color: var(--color-base-400);
  cursor: not-allowed;
  opacity: 0.5;
}

.bc-tab--disabled:hover {
  color: var(--color-base-400);
  background-color: transparent;
}

/* Tab Panels Container */
.bc-tabs__panels {
  flex-grow: 1;
  overflow: hidden;
}

.bc-tabs--vertical .bc-tabs__panels {
  min-height: 0;
}

/* Individual Tab Panel */
.bc-tabs__panel {
  background-color: var(--color-white);
  border-radius: 0 0 var(--radius-popover, var(--radius-md))
    var(--radius-popover, var(--radius-md));
  height: 100%;
}

.bc-tabs--vertical .bc-tabs__panel {
  border-radius: 0 var(--radius-popover, var(--radius-md))
    var(--radius-popover, var(--radius-md)) 0;
  height: 100%;
  overflow-y: auto;
}

.bc-tabs__panel:focus-visible {
  outline: var(--outline-width-focus) solid
    var(--tabs-indicator-color, var(--color-primary-500));
  outline-offset: calc(-1 * var(--outline-width-focus));
}

/* Responsive Design */
@container (max-width: 640px) {
  .bc-tabs__list {
    overflow-x: auto;
  }

  .bc-tab {
    min-width: 120px;
    flex-shrink: 0;
  }
}

/* Dark mode support */
.dark .bc-tabs__list {
  background-color: var(--color-base-800);
  border-color: var(--color-base-700);
}

.dark .bc-tab {
  color: var(--color-base-300);
}

.dark .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
  color: var(--color-base-100);
  background-color: var(--color-base-700);
}

.dark .bc-tab--active {
  color: var(--tabs-active-color-dark, var(--color-primary-400));
  background-color: var(--color-base-900);
}

.dark .bc-tab--disabled {
  color: var(--color-base-600);
}

.dark .bc-tabs__panel {
  background-color: var(--color-base-900);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bc-tabs__list {
    border-width: var(--border-width-thick);
  }

  .bc-tab--active::after {
    height: 3px;
  }

  .bc-tabs--vertical .bc-tab--active::after {
    width: 3px;
  }

  .bc-tab:focus-visible {
    outline-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bc-tab,
  .bc-tab--active::after {
    transition: none;
  }
}

/* Variants */

/* Filled variant: inverted - inactive tabs filled with color, active is white */
.bc-tabs--variant-filled .bc-tabs__list {
  background-color: transparent;
  border-bottom: none;
}
.bc-tabs--variant-filled .bc-tab {
  background-color: var(--tabs-filled-inactive-bg);
  color: var(--tabs-filled-inactive-text);
  border-radius: 0;
}
.bc-tabs--variant-filled
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active),
.bc-tabs--variant-filled
  .bc-tab:focus-visible:not(.bc-tab--disabled):not(.bc-tab--active) {
  background-color: var(
    --tabs-filled-inactive-bg-hover,
    var(--tabs-filled-inactive-bg)
  );
  color: var(--tabs-filled-inactive-text, var(--color-white));
}
.bc-tabs--variant-filled .bc-tab--active {
  background-color: var(--tabs-filled-active-bg, var(--color-white));
  color: var(--tabs-filled-active-text, var(--color-base-800));
}
.bc-tabs--variant-filled .bc-tab--active::after {
  display: none;
}
/* Corner rounding rules */
.bc-tabs--variant-filled.bc-tabs--horizontal .bc-tab:first-child {
  border-top-start-radius: var(--radius-control-sm, var(--radius-sm));
}
.bc-tabs--variant-filled.bc-tabs--horizontal .bc-tab:last-child {
  border-top-end-radius: var(--radius-control-sm, var(--radius-sm));
}
.bc-tabs--variant-filled.bc-tabs--vertical .bc-tab:first-child {
  border-top-start-radius: var(--radius-control-sm, var(--radius-sm));
}
.bc-tabs--variant-filled.bc-tabs--vertical .bc-tab:last-child {
  border-bottom-start-radius: var(--radius-control-sm, var(--radius-sm));
}

/* Outline variant: tabs look like segmented buttons */
.bc-tabs--variant-outline .bc-tabs__list {
  border-bottom: none;
  gap: var(--spacing-xs);
}
.bc-tabs--variant-outline .bc-tab {
  background-color: var(--color-base-50);
  border: var(--border-width-thin) solid var(--color-base-300);
  border-radius: var(--radius-control-sm, var(--radius-sm))
    var(--radius-control-sm, var(--radius-sm)) 0 0;
}
.bc-tabs--variant-outline .bc-tab--active {
  background-color: var(--color-white);
  border-color: var(--tabs-outline-active-border, var(--color-primary-400));
  border-bottom-color: var(--color-white);
}
.bc-tabs--variant-outline .bc-tab--active::after {
  display: none;
}
.bc-tabs--vertical.bc-tabs--variant-outline .bc-tabs__list {
  border-right: none;
}
.bc-tabs--vertical.bc-tabs--variant-outline .bc-tab {
  border-radius: var(--radius-control-sm, var(--radius-sm)) 0 0
    var(--radius-control-sm, var(--radius-sm));
}
.bc-tabs--variant-outline .bc-tab--active {
  color: var(--tabs-active-color, var(--color-primary-600));
}
.bc-tabs--vertical.bc-tabs--variant-outline .bc-tab--active {
  border-bottom-color: var(
    --tabs-outline-active-border,
    var(--color-primary-400)
  );
  border-right-color: var(--color-white);
}

/* Dark mode adjustments for variants */
.dark .bc-tabs--variant-filled .bc-tab {
  background-color: var(--tabs-filled-inactive-bg-dark);
  color: var(--tabs-filled-inactive-text-dark);
}
.dark .bc-tabs--variant-filled .bc-tab--active {
  background-color: var(--tabs-filled-active-bg-dark, var(--color-white));
  color: var(--tabs-filled-active-text-dark);
}
.dark
  .bc-tabs--variant-filled
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active),
.dark
  .bc-tabs--variant-filled
  .bc-tab:focus-visible:not(.bc-tab--disabled):not(.bc-tab--active) {
  background-color: var(
    --tabs-filled-inactive-bg-dark-hover,
    var(--tabs-filled-inactive-bg-dark)
  );
}

.dark .bc-tabs--variant-outline .bc-tab {
  background-color: var(--color-base-800);
  border-color: var(--color-base-600);
}
.dark .bc-tabs--variant-outline .bc-tab--active {
  background-color: var(--color-base-900);
  color: var(--tabs-active-color-dark, var(--color-primary-400));
  border-color: var(
    --tabs-outline-active-border-dark,
    var(--color-primary-600)
  );
  border-bottom-color: var(--color-base-900);
}
.dark .bc-tabs--vertical.bc-tabs--variant-outline .bc-tab--active {
  border-bottom-color: var(
    --tabs-outline-active-border-dark,
    var(--color-primary-600)
  );
  border-right-color: var(--color-base-900);
}

/* Underline variant: minimal, clean underline style */
.bc-tabs--variant-underline .bc-tabs__list {
  background-color: transparent;
  border-bottom: var(--border-width-thin) solid var(--color-base-200);
}

.bc-tabs--variant-underline .bc-tab {
  background-color: transparent;
  color: var(--color-base-400);
  border-radius: 0;
  padding: var(--spacing-sm) var(--spacing-lg);
}

.bc-tabs--variant-underline .bc-tab--sm {
  padding: var(--spacing-xs) var(--spacing-md);
}

.bc-tabs--variant-underline .bc-tab--md {
  padding: var(--spacing-sm) var(--spacing-lg);
}

.bc-tabs--variant-underline .bc-tab--lg {
  padding: var(--spacing-md) var(--spacing-xl);
}

.bc-tabs--variant-underline .bc-tab--xl {
  padding: var(--spacing-lg) var(--spacing-2xl);
}

.bc-tabs--variant-underline .bc-tab--xs {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.bc-tabs--variant-underline
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
  color: var(--color-base-600);
  background-color: transparent;
}

.bc-tabs--variant-underline .bc-tab--active {
  color: var(--tabs-active-color, var(--color-primary-600));
  background-color: transparent;
  font-weight: var(--font-weight-medium);
}

.bc-tabs--variant-underline .bc-tab--active::after {
  background-color: var(--tabs-indicator-color, var(--color-primary-500));
  bottom: calc(-1 * var(--spacing-px));
  height: var(--spacing-xs);
}
.bc-tabs--vertical.bc-tabs--variant-underline .bc-tabs__list {
  border-bottom: none;
  border-right: var(--border-width-thin) solid var(--color-base-200);
}
.bc-tabs--vertical.bc-tabs--variant-underline .bc-tab--active::after {
  bottom: auto;
  left: auto;
  height: auto;
  right: calc(-1 * var(--spacing-px));
  top: 0;
  bottom: 0;
  width: var(--spacing-xs);
}

/* Pill variant: segmented button style with contained tabs */
.bc-tabs--variant-pill .bc-tabs__list {
  background-color: var(--color-base-100);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing-base) * 0.75);
  gap: calc(var(--spacing-base) * 0.5);
  display: inline-flex;
  border-bottom: none;
}

.bc-tabs--variant-pill .bc-tab {
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-base-400);
  padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 3.5);
}

.bc-tabs--variant-pill .bc-tab--xs {
  padding: calc(var(--spacing-base) * 0.75) calc(var(--spacing-base) * 2.5);
}

.bc-tabs--variant-pill .bc-tab--sm {
  padding: var(--spacing-base) var(--spacing-mdh);
}

.bc-tabs--variant-pill .bc-tab--md {
  padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 3.5);
}

.bc-tabs--variant-pill .bc-tab--lg {
  padding: var(--spacing-smh) var(--spacing-lg);
}

.bc-tabs--variant-pill .bc-tab--xl {
  padding: var(--spacing-md) var(--spacing-lgh);
}

.bc-tabs--variant-pill
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
  color: var(--color-base-600);
  background-color: var(--color-base-50);
}

.bc-tabs--variant-pill .bc-tab--active {
  background-color: var(--color-white);
  color: var(--color-base-800);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-sm);
}

.bc-tabs--variant-pill .bc-tab--active::after {
  display: none;
}
.bc-tabs--vertical.bc-tabs--variant-pill .bc-tabs__list {
  display: flex;
  flex-direction: column;
}

/* Dark mode adjustments for underline variant */
.dark .bc-tabs--variant-underline .bc-tabs__list {
  background-color: transparent;
  border-bottom-color: var(--color-base-700);
}

.dark .bc-tabs--variant-underline .bc-tab {
  color: var(--color-base-500);
}

.dark
  .bc-tabs--variant-underline
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
  color: var(--color-base-300);
}

.dark .bc-tabs--variant-underline .bc-tab--active {
  color: var(--tabs-active-color-dark, var(--color-primary-400));
}

.dark .bc-tabs--variant-underline .bc-tab--active::after {
  background-color: var(--tabs-indicator-color-dark, var(--color-primary-400));
}
.dark .bc-tabs--vertical.bc-tabs--variant-underline .bc-tabs__list {
  border-bottom: none;
  border-right-color: var(--color-base-700);
}

/* Dark mode adjustments for pill variant */
.dark .bc-tabs--variant-pill .bc-tabs__list {
  background-color: var(--color-base-800);
}

.dark .bc-tabs--variant-pill .bc-tab {
  color: var(--color-base-500);
}

.dark
  .bc-tabs--variant-pill
  .bc-tab:hover:not(.bc-tab--disabled):not(.bc-tab--active) {
  color: var(--color-base-300);
  background-color: var(--color-base-700);
}

.dark .bc-tabs--variant-pill .bc-tab--active {
  background-color: var(--color-base-900);
  color: var(--color-base-200);
  box-shadow: var(--shadow-sm);
}

/* Tag Input Component */
.bc-tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width-thin) solid var(--color-base-300);
  border-radius: var(--radius-md, 5px);
  background: var(--color-white);
  min-height: calc(var(--spacing-base) * 8.5);
  cursor: text;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.bc-tag-input:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--color-primary-600) 12%, transparent);
}

.bc-tag-input--error {
  border-color: var(--color-danger-500);
}

.bc-tag-input--error:focus-within {
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--color-danger-600) 12%, transparent);
}

.bc-tag-input--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-base-50);
}

/* Size variants */
.bc-tag-input--xs {
  min-height: var(--spacing-xl);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}
.bc-tag-input--sm {
  min-height: calc(var(--spacing-base) * 7);
  padding: calc(var(--spacing-base) * 0.75) var(--spacing-smh);
  font-size: var(--font-size-xs);
}
.bc-tag-input--md {
  min-height: calc(var(--spacing-base) * 8.5);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}
.bc-tag-input--lg {
  min-height: calc(var(--spacing-base) * 9.5);
  padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 2.5);
  font-size: var(--font-size-md);
}
.bc-tag-input--xl {
  min-height: calc(var(--spacing-base) * 11);
  padding: var(--spacing-smh) var(--spacing-mdh);
  font-size: var(--font-size-md);
}

/* Individual tag */
.bc-tag-input__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-smh);
  background: var(--color-base-100);
  border-radius: var(--radius-sm, 3px);
  font-size: inherit;
  color: var(--color-base-700);
  white-space: nowrap;
  line-height: 1.4;
}

.bc-tag-input__tag-text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-tag-input__tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: var(--spacing-xs);
  font-size: 14px;
  line-height: var(--line-height-none);
  color: var(--color-base-400);
  opacity: 0.5;
  transition: opacity 120ms ease;
}

.bc-tag-input__tag-remove:hover {
  opacity: 1;
}

/* Inline input */
.bc-tag-input__input {
  flex: 1;
  min-width: 60px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
}

.bc-tag-input__input::placeholder {
  color: var(--color-base-400);
}

/* Dark mode */
.dark .bc-tag-input {
  background: var(--color-base-800);
  border-color: var(--color-base-600);
}

.dark .bc-tag-input__tag {
  background: var(--color-base-700);
  color: var(--color-base-200);
}

.dark .bc-tag-input__tag-remove {
  color: var(--color-base-400);
}

.dark .bc-tag-input__input {
  color: var(--color-base-100);
}

.bc-tooltip {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-50);
  padding: var(--spacing-xs) var(--spacing-md);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: var(--font-size-sm-lh);
  font-weight: var(--font-weight-medium);
  max-width: var(--overlay-width-xs);
  word-wrap: break-word;
  z-index: var(--z-index-tooltip);
  box-shadow: var(--shadow-popover, var(--shadow-md));

  /* Ensure tooltip text doesn't interfere with pointer events */
  pointer-events: none;
}

.bc-tooltip__arrow {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  position: absolute;
  transform-origin: center;
  /* Remove background and shadow since SVG will handle the styling */
}

.bc-tooltip__arrow svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(var(--shadow-popover, var(--shadow-md)));
}

.bc-tooltip__arrow svg path {
  fill: var(--color-neutral-900);
}

.bc-tooltip__arrow-down {
  left: 0;
  top: 100%;
}

.bc-tooltip__arrow-up {
  left: 0;
  bottom: 100%;
}

.bc-tooltip__arrow-left {
  right: calc(100% - 0.5px);
  top: 0;
}

.bc-tooltip__arrow-right {
  left: calc(100% - 0.5px);
  top: 0;
}

/* Direction-aware arrow positioning */
.bc-tooltip__arrow-inline-start {
  inset-inline-end: calc(100% - 0.5px);
  top: 0;
}

.bc-tooltip__arrow-inline-end {
  inset-inline-start: calc(100% - 0.5px);
  top: 0;
}

/* Show state */
[data-status='opened'] .bc-tooltip,
[data-status='entering'] .bc-tooltip {
  opacity: 1;
  transform: scale(1);
}

/* Hide state */
[data-status='closed'] .bc-tooltip,
[data-status='exiting'] .bc-tooltip {
  opacity: 0;
  transform: scale(0.95);
}

/* Dark theme adjustments */
.dark .bc-tooltip {
  background-color: var(--bg-elevated);
  color: var(--text-normal);
  border: var(--border-width-thin) solid var(--border-default);
  box-shadow: var(
    --shadow-tooltip-dark,
    0 10px 15px -3px var(--shadow-color-dark),
    0 4px 6px -2px var(--shadow-color-dark)
  );
}

.dark .bc-tooltip__arrow svg path {
  fill: var(--bg-elevated);
  stroke: var(--border-default);
  stroke-width: 1;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .bc-tooltip {
    border: var(--border-width-thin) solid var(--color-neutral-600);
  }

  .dark .bc-tooltip {
    border: var(--border-width-thin) solid var(--color-neutral-400);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-tooltip {
    transition: none;
  }
}

/* Toolbar Component System */
.bc-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-stack-sm);
  padding: var(--spacing-sm);
  border: var(--border-width-thin) solid var(--color-neutral-200);
  border-radius: var(--radius-control, var(--radius-md));
  background-color: var(--color-neutral-50);
  width: 100%;
}

.dark .bc-toolbar {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

.bc-toolbar__group {
  display: flex;
  align-items: center;
  gap: 0;
}

.bc-toolbar__divider {
  width: 1px;
  height: var(--spacing-xl);
  background-color: var(--color-neutral-300);
  margin: 0 var(--spacing-xs);
}

.dark .bc-toolbar__divider {
  background-color: var(--color-neutral-600);
}

.bc-toolbar__spacer {
  flex: 1 1 auto;
}

.bc-toolbar__button {
  display: flex;
  align-items: center;
}

.bc-toolbar__button .bc-button {
  gap: var(--spacing-xs);
}

.bc-toolbar__button--icon-only .bc-button {
  /* Keep button height consistent; only adjust horizontal padding */
  padding-inline: var(--spacing-xs);
}

.bc-toolbar .bc-input-container {
  /* Reduce horizontal padding in toolbar but keep vertical from size */
  padding-inline: var(--spacing-mdh);
  outline-width: 1px;
  outline-offset: calc(-1 * var(--outline-width-default));
  width: auto;
  box-shadow: var(--shadow-none, none);
}

/* Container queries for responsive behavior */
@container (max-width: 480px) {
  .bc-toolbar {
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
  }

  .bc-toolbar__divider {
    height: var(--spacing-lg);
    margin: 0 var(--spacing-xs);
  }

  /* Hide only text labels at narrow widths; keep icons visible */
  .bc-toolbar__button
    .bc-button
    > span:not(.sr-only):not(.bc-icon):not(.bc-content-box) {
    display: none;
  }
}

/* ── Toolbar group button blending ── */

/* Strip all border-radius inside the group */
.bc-toolbar__group > .bc-button {
  border-radius: 0;
}

/* First child gets left radii */
.bc-toolbar__group > .bc-button:first-child {
  border-top-left-radius: var(--radius-control-sm, var(--radius-sm));
  border-bottom-left-radius: var(--radius-control-sm, var(--radius-sm));
}

/* Last child gets right radii */
.bc-toolbar__group > .bc-button:last-child {
  border-top-right-radius: var(--radius-control-sm, var(--radius-sm));
  border-bottom-right-radius: var(--radius-control-sm, var(--radius-sm));
}

/* Collapse borders between adjacent buttons */
.bc-toolbar__group > .bc-button + .bc-button {
  margin-left: -1.5px;
}

/* Ensure active/hover/focus buttons layer above neighbours */
.bc-toolbar__group > .bc-button[aria-pressed='true'],
.bc-toolbar__group > .bc-button.bc-toolbar__button--active {
  z-index: 1;
}

.bc-toolbar__group > .bc-button:hover {
  z-index: 2;
}

.bc-toolbar__group > .bc-button:focus-visible {
  z-index: 3;
}

/* ── Toolbar group button styling ── */

/* Base: transparent bg, no border, muted text */
.bc-toolbar__group > .bc-toolbar__button.bc-button {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-base-600);
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
}

/* Hover: subtle tint, no scale/translate */
.bc-toolbar__group > .bc-toolbar__button.bc-button:hover:not(:disabled) {
  background-color: var(--color-base-100);
  color: var(--color-base-800);
  transform: none;
}

/* Active press: no translate */
.bc-toolbar__group > .bc-toolbar__button.bc-button:active:not(:disabled) {
  transform: none;
}

/* Active/pressed: primary highlight */
.bc-toolbar__group > .bc-toolbar__button.bc-button[aria-pressed='true'],
.bc-toolbar__group > .bc-toolbar__button.bc-button.bc-toolbar__button--active {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

.bc-toolbar__group
  > .bc-toolbar__button.bc-button[aria-pressed='true']:hover:not(:disabled),
.bc-toolbar__group
  > .bc-toolbar__button.bc-button.bc-toolbar__button--active:hover:not(
    :disabled
  ) {
  background-color: var(--color-primary-200);
  color: var(--color-primary-800);
}

/* Dark mode */
.dark .bc-toolbar__group > .bc-toolbar__button.bc-button {
  color: var(--color-base-300);
}

.dark .bc-toolbar__group > .bc-toolbar__button.bc-button:hover:not(:disabled) {
  background-color: var(--color-base-700);
  color: var(--color-base-100);
}

.dark .bc-toolbar__group > .bc-toolbar__button.bc-button[aria-pressed='true'],
.dark
  .bc-toolbar__group
  > .bc-toolbar__button.bc-button.bc-toolbar__button--active {
  background-color: var(--color-primary-900);
  color: var(--color-primary-300);
}

.dark
  .bc-toolbar__group
  > .bc-toolbar__button.bc-button[aria-pressed='true']:hover:not(:disabled),
.dark
  .bc-toolbar__group
  > .bc-toolbar__button.bc-button.bc-toolbar__button--active:hover:not(
    :disabled
  ) {
  background-color: var(--color-primary-800);
  color: var(--color-primary-200);
}

/* Floating toolbar variant */
.bc-toolbar--floating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: calc(var(--spacing-base) * 0.75);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: var(--border-width-thin) solid var(--color-base-200);
  width: auto;
}

.bc-toolbar--floating .bc-toolbar__button .bc-button {
  width: calc(var(--spacing-base) * 7);
  height: calc(var(--spacing-base) * 7);
  min-width: calc(var(--spacing-base) * 7);
  min-height: calc(var(--spacing-base) * 7);
  padding: 0;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  font-size: var(--font-size-sm);
  color: var(--color-base-600);
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-toolbar--floating .bc-toolbar__button .bc-button:hover {
  background: var(--color-base-100);
}

.bc-toolbar--floating .bc-toolbar__button .bc-button[aria-pressed='true'],
.bc-toolbar--floating .bc-toolbar__button .bc-button.bc-button--active {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.bc-toolbar--floating .bc-toolbar__divider {
  width: 1px;
  height: var(--spacing-lgh);
  background: var(--color-base-200);
  margin: 0 calc(var(--spacing-base) * 0.5);
  flex-shrink: 0;
}

/* Dark mode for floating toolbar */
.dark .bc-toolbar--floating {
  background: var(--color-base-800);
  border-color: var(--color-base-700);
}

.dark .bc-toolbar--floating .bc-toolbar__button .bc-button {
  color: var(--color-base-300);
}

.dark .bc-toolbar--floating .bc-toolbar__button .bc-button:hover {
  background: var(--color-base-700);
}

.dark .bc-toolbar--floating .bc-toolbar__button .bc-button[aria-pressed='true'],
.dark .bc-toolbar--floating .bc-toolbar__button .bc-button.bc-button--active {
  background: var(--color-primary-900);
  color: var(--color-primary-300);
}

.dark .bc-toolbar--floating .bc-toolbar__divider {
  background: var(--color-base-700);
}

/* TreeView Component Styles */

.bc-tree-view {
  display: flex;
  flex-direction: column;
  user-select: none;
  gap: var(--spacing-px);
}

.bc-tree-item {
  display: flex;
  flex-direction: column;
}

.bc-tree-item__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-tree-item__row:hover {
  background-color: oklch(0.95 0 0);
}

.bc-tree-item__row--selected {
  background-color: oklch(0.93 0.02 250);
  color: oklch(0.5 0.15 250);
}

.bc-tree-item__row--size-xs {
  padding-top: calc(var(--spacing-xs) / 2);
  padding-bottom: calc(var(--spacing-xs) / 2);
  padding-right: var(--spacing-sm);
  font-size: var(--font-size-xs);
  min-height: var(--spacing-lg);
}

.bc-tree-item__row--size-sm {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  padding-right: var(--spacing-md);
  font-size: var(--font-size-sm);
  min-height: var(--spacing-xl);
}

.bc-tree-item__row--size-md {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  padding-right: var(--spacing-md);
  font-size: var(--font-size-md);
  min-height: var(--spacing-2xl);
}

.bc-tree-item__row--size-lg {
  padding-top: var(--spacing-smh);
  padding-bottom: var(--spacing-smh);
  padding-right: var(--spacing-mdh);
  font-size: var(--font-size-lg);
  min-height: var(--spacing-2xlh);
}

.bc-tree-item__row--size-xl {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  padding-right: var(--spacing-lg);
  font-size: var(--font-size-xl);
  min-height: var(--spacing-3xl);
}

.bc-tree-item__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--spacing-lgh);
  height: var(--spacing-lgh);
  transition: transform 0.15s ease;
  color: var(--color-gray-500);
  cursor: pointer;
}

.bc-tree-item__toggle:hover {
  color: var(--color-gray-700);
}

.bc-tree-item__toggle--expanded {
  transform: rotate(90deg);
}

.bc-tree-item__toggle-spacer {
  width: var(--spacing-lgh);
  flex-shrink: 0;
}

.bc-tree-item__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-gray-500);
}

.bc-tree-item__label {
  text-align: left;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.bc-tree-item__badge {
  font-size: 0.75em;
  color: var(--color-gray-600);
  padding: var(--spacing-xs) var(--spacing-smh);
  background: oklch(0.95 0 0);
  border-radius: var(--radius-sm);
  font-weight: 500;
  line-height: var(--line-height-none);
  display: inline-flex;
  align-items: center;
}

.bc-tree-item__children {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-px);
}

/* Dark mode */
.dark .bc-tree-item__row:hover {
  background-color: oklch(0.25 0 0);
}

.dark .bc-tree-item__row--selected {
  background-color: oklch(0.25 0.03 250);
  color: oklch(0.75 0.12 250);
}

.dark .bc-tree-item__toggle {
  color: var(--color-gray-400);
}

.dark .bc-tree-item__toggle:hover {
  color: var(--color-gray-200);
}

.dark .bc-tree-item__icon {
  color: var(--color-gray-400);
}

.dark .bc-tree-item__badge {
  background: oklch(0.25 0 0);
  color: var(--color-gray-300);
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-tree-item__toggle {
    transition: none;
  }
  .bc-tree-item__row {
    transition: none;
  }
}

/* Focus styles for keyboard navigation */
.bc-tree-item__row:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

.dark .bc-tree-item__row:focus-visible {
  outline-color: var(--color-primary-400);
}

/* Rating Input Component */
.bc-rating-input {
  display: inline-flex;
  gap: var(--spacing-stack-xs, var(--spacing-sm));
}

.bc-rating-input__icon-container {
  position: relative;
  cursor: pointer;
  transition: all
    var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
    var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.bc-rating-input__icon-empty,
.bc-rating-input__icon-full,
.bc-rating-input__icon-clipper {
  position: absolute;
  display: block;
  overflow: hidden;
}

.bc-rating-input__icon-container:hover {
  transform: scale(1.2);
}

/* Disabled state: no hover scale and different cursor */
.bc-rating-input[aria-disabled='true'] .bc-rating-input__icon-container,
.bc-input-container--disabled .bc-rating-input__icon-container {
  cursor: not-allowed;
}

.bc-rating-input[aria-disabled='true'] .bc-rating-input__icon-container:hover,
.bc-input-container--disabled .bc-rating-input__icon-container:hover {
  transform: none;
}

/* RadioGroup Component */
.bc-radio-group {
  display: flex;
  gap: var(--spacing-md);
}

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

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

.bc-radio-group__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
  position: relative;
  padding: var(--spacing-xs) 0;
}

.bc-radio-group__item--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Native radio input - visually hidden but accessible */
.bc-radio-group__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom radio indicator */
.bc-radio-group__indicator {
  width: var(--spacing-lgh);
  height: var(--spacing-lgh);
  min-width: var(--spacing-lgh);
  min-height: var(--spacing-lgh);
  border-radius: 50%;
  border: var(--border-width-thin) solid var(--color-base-400);
  background-color: --color-white;
  flex-shrink: 0;
  position: relative;
  transition: all var(--motion-duration-fast) var(--motion-easing-standard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-xs);
}

/* Checked state - border color */
.bc-radio-group__input:checked + .bc-radio-group__indicator {
  border-color: var(--color-primary-500);
}

/* Checked state - inner dot */
.bc-radio-group__input:checked + .bc-radio-group__indicator::after {
  content: '';
  position: absolute;
  width: var(--spacing-md);
  height: var(--spacing-md);
  border-radius: 50%;
  background-color: var(--color-primary-500);
  transition: all var(--motion-duration-fast) var(--motion-easing-standard);
}

/* Focus state */
.bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
  outline: var(--outline-width-focus) solid var(--interactive-focus);
  outline-offset: 2px;
}

/* Disabled state */
.bc-radio-group__input:disabled + .bc-radio-group__indicator {
  border-color: var(--color-base-400);
  background-color: var(--color-base-400);
  cursor: not-allowed;
}

.bc-radio-group__input:disabled:checked + .bc-radio-group__indicator::after {
  background-color: var(--text-muted);
}

/* Label container */
.bc-radio-group__label-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Label text */
.bc-radio-group__label {
  font-size: var(--font-size-sm);
  color: var(--text-normal);
  line-height: var(--line-height-normal);
  user-select: none;
}

/* Description text */
.bc-radio-group__description {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: var(--line-height-snug);
  user-select: none;
}

/* Size variants */
.bc-radio-group__item--size-xs .bc-radio-group__indicator {
  width: calc(var(--spacing-base) * 3.5);
  height: calc(var(--spacing-base) * 3.5);
  min-width: calc(var(--spacing-base) * 3.5);
  min-height: calc(var(--spacing-base) * 3.5);
}

.bc-radio-group__item--size-xs
  .bc-radio-group__input:checked
  + .bc-radio-group__indicator::after {
  width: var(--spacing-smh);
  height: var(--spacing-smh);
}

.bc-radio-group__item--size-xs .bc-radio-group__label {
  font-size: var(--font-size-xs);
}

.bc-radio-group__item--size-xs .bc-radio-group__description {
  font-size: var(--font-size-2xs);
}

.bc-radio-group__item--size-sm .bc-radio-group__indicator {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  min-width: var(--spacing-lg);
  min-height: var(--spacing-lg);
}

.bc-radio-group__item--size-sm
  .bc-radio-group__input:checked
  + .bc-radio-group__indicator::after {
  width: calc(var(--spacing-base) * 1.75);
  height: calc(var(--spacing-base) * 1.75);
}

.bc-radio-group__item--size-sm .bc-radio-group__label {
  font-size: var(--font-size-xs);
}

.bc-radio-group__item--size-sm .bc-radio-group__description {
  font-size: var(--font-size-2xs);
}

/* md is default */

.bc-radio-group__item--size-lg .bc-radio-group__indicator {
  width: var(--spacing-lgh);
  height: var(--spacing-lgh);
  min-width: var(--spacing-lgh);
  min-height: var(--spacing-lgh);
}

.bc-radio-group__item--size-lg
  .bc-radio-group__input:checked
  + .bc-radio-group__indicator::after {
  width: calc(var(--spacing-base) * 2.5);
  height: calc(var(--spacing-base) * 2.5);
}

.bc-radio-group__item--size-lg .bc-radio-group__label {
  font-size: var(--font-size-md);
}

.bc-radio-group__item--size-lg .bc-radio-group__description {
  font-size: var(--font-size-sm);
}

.bc-radio-group__item--size-xl .bc-radio-group__indicator {
  width: calc(var(--spacing-base) * 5.5);
  height: calc(var(--spacing-base) * 5.5);
  min-width: calc(var(--spacing-base) * 5.5);
  min-height: calc(var(--spacing-base) * 5.5);
}

.bc-radio-group__item--size-xl
  .bc-radio-group__input:checked
  + .bc-radio-group__indicator::after {
  width: calc(var(--spacing-base) * 2.75);
  height: calc(var(--spacing-base) * 2.75);
}

.bc-radio-group__item--size-xl .bc-radio-group__label {
  font-size: var(--font-size-lg);
}

.bc-radio-group__item--size-xl .bc-radio-group__description {
  font-size: var(--font-size-md);
}

/* Dark mode */
.dark .bc-radio-group__indicator {
  border-color: var(--border-default);
  background-color: var(--bg-surface);
}

.dark .bc-radio-group__input:checked + .bc-radio-group__indicator {
  border-color: var(--color-primary-400);
}

.dark .bc-radio-group__input:checked + .bc-radio-group__indicator::after {
  background-color: var(--color-primary-400);
}

.dark .bc-radio-group__input:focus-visible + .bc-radio-group__indicator {
  outline-color: var(--interactive-focus);
}

.dark .bc-radio-group__input:disabled + .bc-radio-group__indicator {
  border-color: var(--border-default);
  background-color: var(--bg-subtle);
}

.dark
  .bc-radio-group__input:disabled:checked
  + .bc-radio-group__indicator::after {
  background-color: var(--text-muted);
}

/* Notice Component */
.bc-notice {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-stack-md, var(--spacing-mdh));
  align-items: start;
  border-radius: var(--radius-control, var(--radius-md));
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.bc-notice__icon {
  line-height: 0;
}

.bc-notice__title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

.bc-notice__content {
  color: var(--text-normal);
  white-space: pre-line;
}

/* Tones */
.bc-notice--tone-subtle {
  border: var(--border-width-thin) solid var(--border-default);
  background-color: var(--bg-surface);
}

.bc-notice--tone-prominent {
  border: var(--border-width-thin) solid var(--border-default);
}

/* Variants base color variables per tone */
.bc-notice--info.bc-notice--tone-prominent {
  background-color: var(--color-info-50);
  border-color: var(--color-info-200);
  color: var(--color-info-900);
}

.bc-notice--success.bc-notice--tone-prominent {
  background-color: var(--color-success-50);
  border-color: var(--color-success-200);
  color: var(--color-success-900);
}

.bc-notice--warning.bc-notice--tone-prominent {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-200);
  color: var(--color-warning-900);
}

.bc-notice--danger.bc-notice--tone-prominent {
  background-color: var(--color-danger-50);
  border-color: var(--color-danger-200);
  color: var(--color-danger-900);
}

.bc-notice--info.bc-notice--tone-subtle {
  background-color: var(--bg-surface);
  color: var(--color-info-800);
}

.bc-notice--success.bc-notice--tone-subtle {
  background-color: var(--bg-surface);
  color: var(--color-success-800);
}

.bc-notice--warning.bc-notice--tone-subtle {
  background-color: var(--bg-surface);
  color: var(--color-warning-800);
}

.bc-notice--danger.bc-notice--tone-subtle {
  background-color: var(--bg-surface);
  color: var(--color-danger-800);
}

.bc-notice__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.bc-notice__close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}

/* Dark mode */
.dark .bc-notice--tone-prominent {
  border-color: var(--color-base-700);
}

.dark .bc-notice--tone-subtle {
  border-color: var(--color-base-700);
}

.dark .bc-notice--info.bc-notice--tone-prominent {
  background-color: color-mix(in srgb, var(--color-info-500) 12%, transparent);
  border-color: var(--color-info-800);
  color: var(--color-info-200);
}

.dark .bc-notice--success.bc-notice--tone-prominent {
  background-color: color-mix(
    in srgb,
    var(--color-success-500) 12%,
    transparent
  );
  border-color: var(--color-success-800);
  color: var(--color-success-200);
}

.dark .bc-notice--warning.bc-notice--tone-prominent {
  background-color: color-mix(
    in srgb,
    var(--color-warning-500) 12%,
    transparent
  );
  border-color: var(--color-warning-800);
  color: var(--color-warning-200);
}

.dark .bc-notice--danger.bc-notice--tone-prominent {
  background-color: color-mix(
    in srgb,
    var(--color-danger-500) 12%,
    transparent
  );
  border-color: var(--color-danger-800);
  color: var(--color-danger-200);
}

.dark .bc-notice--info.bc-notice--tone-subtle {
  color: var(--color-info-300);
}

.dark .bc-notice--success.bc-notice--tone-subtle {
  color: var(--color-success-300);
}

.dark .bc-notice--warning.bc-notice--tone-subtle {
  color: var(--color-warning-300);
}

.dark .bc-notice--danger.bc-notice--tone-subtle {
  color: var(--color-danger-300);
}

@layer components {
  .bc-notification {
    --notification-accent-color: var(--color-primary-500);
    --notification-radius: var(--radius-lg);
    --notification-bg: var(--color-white);
    --notification-border-color: var(--color-base-200);
    --notification-text-color: var(--text-normal);
    --notification-muted-color: var(--text-muted);

    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-md);
    border-radius: var(--notification-radius);
    background-color: var(--notification-bg);
    color: var(--notification-text-color);
    border: var(--border-width-thin) solid var(--notification-border-color);
    box-shadow: var(--shadow-md);
  }

  .bc-notification--bordered {
    border-color: var(--notification-border-color);
  }

  .bc-notification__icon {
    flex-shrink: 0;
    width: var(--spacing-2xl);
    height: var(--spacing-2xl);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--notification-accent-color);
    color: var(--color-white);
  }

  .bc-notification__accent {
    margin: 0 var(--spacing-md) 0 0;
    min-width: var(--spacing-sm);
    min-height: 100%;
    border-radius: var(--radius-pill, var(--radius-full));
    background-color: var(--notification-accent-color);
    align-self: stretch;
  }

  .bc-notification__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .bc-notification__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0;
    color: var(--notification-text-color);
  }

  .bc-notification__content {
    font-size: var(--font-size-sm);
    color: var(--notification-muted-color);
    line-height: var(--line-height-normal);
  }

  .bc-notification__meta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
  }

  .bc-notification-viewport {
    position: fixed;
    display: flex;
    gap: var(--spacing-md);
    width: min(420px, calc(100vw - var(--spacing-2xl)));
    z-index: var(--z-index-notification, 90);
    pointer-events: none;
  }

  .bc-notification-viewport > * {
    pointer-events: auto;
  }

  .bc-notification-viewport--top-end {
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    flex-direction: column;
    align-items: flex-end;
  }

  .bc-notification-viewport--top-start {
    top: var(--spacing-xl);
    left: var(--spacing-xl);
    flex-direction: column;
    align-items: flex-start;
  }

  .bc-notification-viewport--bottom-end {
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .bc-notification-viewport--bottom-start {
    bottom: var(--spacing-xl);
    left: var(--spacing-xl);
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .dark .bc-notification {
    --notification-bg: var(--bg-surface);
    --notification-border-color: var(--color-base-700);
  }

  @media (max-width: 640px) {
    .bc-notification-viewport {
      left: var(--spacing-md);
      right: var(--spacing-md);
      width: auto;
    }
  }

  .bc-notification-item {
    transition:
      opacity var(--motion-duration-base, 200ms)
        var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
      transform var(--motion-duration-base, 200ms)
        var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
  }

  .bc-notification-item--entering {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }

  .bc-notification-item:not(.bc-notification-item--entering):not(
      .bc-notification-item--exiting
    ) {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .bc-notification-item--exiting {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }

  @media (prefers-reduced-motion: reduce) {
    .bc-notification,
    .bc-notification-item {
      transition: none;
    }
  }
}

/* Notification Panel */
.bc-notification-panel {
  width: 380px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border-width-thin) solid var(--color-base-200);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
  overflow: hidden;
  font-family: var(
    --font-family-default-ui,
    var(--font-ui, var(--font-body, var(--font-family-sans)))
  );
}

/* Header */
.bc-notification-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-mdh) var(--spacing-lg);
  border-bottom: var(--border-width-thin) solid var(--color-base-200);
  flex-shrink: 0;
}

.bc-notification-panel__header-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-base-800);
}

.bc-notification-panel__header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.bc-notification-panel__mark-read-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--color-primary-600);
  font-family: inherit;
  padding: var(--spacing-xs) var(--spacing-sm);
}

.bc-notification-panel__mark-read-btn:hover {
  text-decoration: underline;
}

.bc-notification-panel__close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-base-400);
  padding: var(--spacing-xs);
  display: flex;
}

/* List */
.bc-notification-panel__list {
  flex: 1;
  overflow-y: auto;
}

/* Item */
.bc-notification-panel__item {
  display: flex;
  gap: calc(var(--spacing-base) * 2.5);
  padding: calc(var(--spacing-base) * 2.5) var(--spacing-lg);
  cursor: pointer;
  transition: background-color 80ms ease;
  position: relative;
}

.bc-notification-panel__item:hover {
  background: var(--color-base-50);
}

.bc-notification-panel__item--unread {
  background: var(--color-primary-50, rgba(37, 99, 235, 0.04));
}

.bc-notification-panel__item--unread:hover {
  background: var(--color-primary-100, rgba(37, 99, 235, 0.08));
}

.bc-notification-panel__item-icon {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-base-100);
}

.bc-notification-panel__item-content {
  flex: 1;
  min-width: 0;
}

.bc-notification-panel__item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-base-800);
  margin-bottom: var(--spacing-xs);
}

.bc-notification-panel__item-body {
  font-size: var(--font-size-xs);
  color: var(--color-base-500);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
}

.bc-notification-panel__item-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: 10px;
  color: var(--color-base-400);
}

.bc-notification-panel__item-source {
  color: var(--color-primary-600);
}

.bc-notification-panel__item-dot {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-smh);
  height: var(--spacing-smh);
  border-radius: 50%;
  background: var(--color-primary-500);
}

/* Empty state */
.bc-notification-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl);
  color: var(--color-base-400);
  font-size: var(--font-size-sm);
}

/* Dark mode */
.dark .bc-notification-panel {
  background: var(--color-base-800);
  border-color: var(--color-base-700);
}

.dark .bc-notification-panel__header {
  border-color: var(--color-base-700);
}

.dark .bc-notification-panel__header-title {
  color: var(--color-base-100);
}

.dark .bc-notification-panel__item:hover {
  background: var(--color-base-700);
}

.dark .bc-notification-panel__item--unread {
  background: rgba(37, 99, 235, 0.08);
}

.dark .bc-notification-panel__item-icon {
  background: var(--color-base-700);
}

.dark .bc-notification-panel__item-title {
  color: var(--color-base-100);
}

.dark .bc-notification-panel__item-body {
  color: var(--color-base-400);
}

.dark .bc-notification-panel__mark-read-btn {
  color: var(--color-primary-400);
}

.dark .bc-notification-panel__close-btn {
  color: var(--color-base-500);
}

.dark .bc-notification-panel__item-meta {
  color: var(--color-base-500);
}

.dark .bc-notification-panel__item-source {
  color: var(--color-primary-400);
}

.dark .bc-notification-panel__empty {
  color: var(--color-base-500);
}

.dark .bc-notification-panel__item--unread:hover {
  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
}

/* Minimal optional controls for VideoPlayer wrapper */

.bc-video-player {
  position: relative;
  display: block;
}

.bc-video-player__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-2, 8px);
  padding: var(--spacing-2, 8px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.bc-video-player__button {
  appearance: none;
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  border: none;
  border-radius: var(--radius-sm, 4px);
  padding: 2px 6px;
  cursor: pointer;
}

.bc-video-player__timeline,
.bc-video-player__volume {
  flex: 1 1 auto;
}

/* PDF Page Viewer Component */

.bc-pdf-page-viewer {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
}

/* Fit modes */
.bc-pdf-page-viewer--fit-width {
  display: block;
  width: 100%;
  max-width: 100%;
}

.bc-pdf-page-viewer--fit-height {
  display: block;
  height: 100%;
  max-height: 100%;
}

.bc-pdf-page-viewer--fit-contain,
.bc-pdf-page-viewer--fit-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.bc-pdf-page-viewer--fit-cover {
  overflow: hidden;
}

/* Content wrapper - provides positioning context for layers */
.bc-pdf-page-viewer__content {
  position: relative;
  display: inline-block;
}

.bc-pdf-page-viewer__canvas {
  display: block;
}

/* Text layer for text selection */
/* Must be both absolutely positioned AND a positioning context for text spans */
.bc-pdf-page-viewer__text-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.2;
  line-height: var(--line-height-none);
  text-align: initial;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
}

.bc-pdf-page-viewer__text-layer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.bc-pdf-page-viewer__text-layer span.markedContent {
  top: 0;
  height: 0;
}

.bc-pdf-page-viewer__text-layer .highlight {
  margin: -1px;
  padding: 1px;
  background-color: rgba(180, 0, 170, 1);
  border-radius: 4px;
}

.bc-pdf-page-viewer__text-layer .highlight.appended {
  position: initial;
}

.bc-pdf-page-viewer__text-layer .highlight.begin {
  border-radius: 4px 0 0 4px;
}

.bc-pdf-page-viewer__text-layer .highlight.end {
  border-radius: 0 4px 4px 0;
}

.bc-pdf-page-viewer__text-layer .highlight.middle {
  border-radius: 0;
}

.bc-pdf-page-viewer__text-layer .highlight.selected {
  background-color: rgba(0, 100, 0, 1);
}

.bc-pdf-page-viewer__text-layer ::selection {
  background: rgba(0, 0, 255, 0.3);
}

.bc-pdf-page-viewer__text-layer br::selection {
  background: transparent;
}

.bc-pdf-page-viewer__text-layer .endOfContent {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  right: 0;
  bottom: 0;
  z-index: -1;
  cursor: default;
  user-select: none;
}

.bc-pdf-page-viewer__text-layer .endOfContent.active {
  top: 0;
}

/* Annotation layer for links, forms, etc. */
.bc-pdf-page-viewer__annotation-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bc-pdf-page-viewer__annotation-layer section {
  position: absolute;
  text-align: initial;
  pointer-events: auto;
}

.bc-pdf-page-viewer__annotation-layer .linkAnnotation > a,
.bc-pdf-page-viewer__annotation-layer .buttonWidgetAnnotation.pushButton > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.pushButton
  > canvas {
  width: 100%;
  height: 100%;
}

.bc-pdf-page-viewer__annotation-layer .linkAnnotation > a:hover,
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.pushButton
  > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

.bc-pdf-page-viewer__annotation-layer .textAnnotation img {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation input,
.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation textarea,
.bc-pdf-page-viewer__annotation-layer .choiceWidgetAnnotation select,
.bc-pdf-page-viewer__annotation-layer .buttonWidgetAnnotation.checkBox input,
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.radioButton
  input {
  background-image: none;
  border: var(--border-width-thin) solid transparent;
  box-sizing: border-box;
  font: calc(9px * var(--scale-factor)) sans-serif;
  height: 100%;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.bc-pdf-page-viewer__annotation-layer .choiceWidgetAnnotation select option {
  padding: 0;
}

.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.radioButton
  input {
  border-radius: 50%;
}

.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation textarea {
  resize: none;
}

.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation input[disabled],
.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation textarea[disabled],
.bc-pdf-page-viewer__annotation-layer .choiceWidgetAnnotation select[disabled],
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.checkBox
  input[disabled],
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.radioButton
  input[disabled] {
  background: none;
  border: var(--border-width-thin) solid transparent;
  cursor: not-allowed;
}

.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation input:hover,
.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation textarea:hover,
.bc-pdf-page-viewer__annotation-layer .choiceWidgetAnnotation select:hover,
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.checkBox
  input:hover,
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.radioButton
  input:hover {
  border: var(--border-width-thin) solid rgba(0, 0, 0, 1);
}

.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation input:focus,
.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation textarea:focus,
.bc-pdf-page-viewer__annotation-layer .choiceWidgetAnnotation select:focus {
  background: none;
  border: var(--border-width-thin) solid transparent;
}

.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.checkBox
  input:checked::before,
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.checkBox
  input:checked::after,
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.radioButton
  input:checked::before {
  background-color: CanvasText;
  content: '';
  display: block;
  position: absolute;
}

.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.checkBox
  input:checked::before,
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.checkBox
  input:checked::after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.checkBox
  input:checked::before {
  transform: rotate(45deg);
}

.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.checkBox
  input:checked::after {
  transform: rotate(-45deg);
}

.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.radioButton
  input:checked::before {
  border-radius: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  width: 50%;
}

.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.bc-pdf-page-viewer__annotation-layer .textWidgetAnnotation input.comb:focus {
  width: 103%;
}

.bc-pdf-page-viewer__annotation-layer .buttonWidgetAnnotation.checkBox input,
.bc-pdf-page-viewer__annotation-layer
  .buttonWidgetAnnotation.radioButton
  input {
  appearance: none;
}

.bc-pdf-page-viewer__annotation-layer .popupTriggerArea {
  height: 100%;
  width: 100%;
}

.bc-pdf-page-viewer__annotation-layer .popupWrapper {
  position: absolute;
  font-size: calc(9px * var(--scale-factor));
  width: 100%;
  min-width: calc(180px * var(--scale-factor));
  pointer-events: none;
}

.bc-pdf-page-viewer__annotation-layer .popup {
  position: absolute;
  max-width: calc(180px * var(--scale-factor));
  background-color: rgba(255, 255, 153, 1);
  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
    rgba(136, 136, 136, 1);
  border-radius: calc(2px * var(--scale-factor));
  padding: calc(6px * var(--scale-factor));
  margin-left: calc(5px * var(--scale-factor));
  cursor: pointer;
  font: message-box;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: auto;
}

.bc-pdf-page-viewer__annotation-layer .popup > * {
  font-size: calc(9px * var(--scale-factor));
}

.bc-pdf-page-viewer__annotation-layer .popup h1 {
  display: inline-block;
}

.bc-pdf-page-viewer__annotation-layer .popupDate {
  display: inline-block;
  margin-left: calc(5px * var(--scale-factor));
}

.bc-pdf-page-viewer__annotation-layer .popupContent {
  border-top: var(--border-width-thin) solid rgba(51, 51, 51, 1);
  margin-top: calc(2px * var(--scale-factor));
  padding-top: calc(2px * var(--scale-factor));
}

.bc-pdf-page-viewer__annotation-layer .richText > * {
  white-space: pre-wrap;
  font-size: calc(9px * var(--scale-factor));
}

.bc-pdf-page-viewer__annotation-layer .highlightAnnotation,
.bc-pdf-page-viewer__annotation-layer .underlineAnnotation,
.bc-pdf-page-viewer__annotation-layer .squigglyAnnotation,
.bc-pdf-page-viewer__annotation-layer .strikeoutAnnotation,
.bc-pdf-page-viewer__annotation-layer .freeTextAnnotation,
.bc-pdf-page-viewer__annotation-layer .lineAnnotation svg line,
.bc-pdf-page-viewer__annotation-layer .squareAnnotation svg rect,
.bc-pdf-page-viewer__annotation-layer .circleAnnotation svg ellipse,
.bc-pdf-page-viewer__annotation-layer .polylineAnnotation svg polyline,
.bc-pdf-page-viewer__annotation-layer .polygonAnnotation svg polygon,
.bc-pdf-page-viewer__annotation-layer .caretAnnotation,
.bc-pdf-page-viewer__annotation-layer .inkAnnotation svg polyline,
.bc-pdf-page-viewer__annotation-layer .stampAnnotation,
.bc-pdf-page-viewer__annotation-layer .fileAttachmentAnnotation {
  cursor: pointer;
}

/* Loading state */
.bc-pdf-page-viewer__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
}

.bc-pdf-page-viewer__loading-text {
  font-size: var(--font-size-md);
  color: var(--text-muted);
}

/* Error state */
.bc-pdf-page-viewer__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
}

.bc-pdf-page-viewer__error-text {
  font-size: var(--font-size-md);
  color: var(--color-danger-600);
  text-align: center;
}

.dark .bc-pdf-page-viewer__error-text {
  color: var(--color-danger-400);
}


/* Dialog Components (ConfirmationDialog, AlertDialog, PromptDialog) */

.bc-dialog__header-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-base) * 2.5);
}

.bc-dialog__icon {
  width: calc(var(--spacing-base) * 9);
  height: calc(var(--spacing-base) * 9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bc-dialog__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-normal);
}

.bc-dialog__body {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.bc-dialog__description {
  margin: 0;
  color: var(--text-muted);
}

.bc-dialog__consequences {
  padding: var(--spacing-md) var(--spacing-mdh);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base);
  margin: var(--spacing-mdh) 0 0;
  list-style: none;
}

.bc-dialog__consequences li {
  display: flex;
  gap: var(--spacing-smh);
}

.bc-dialog__consequences li::before {
  content: '\2022';
  color: var(--color-base-400);
  flex-shrink: 0;
}

.bc-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  width: 100%;
}

.bc-dialog__input {
  display: block;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-mdh);
  margin-top: var(--spacing-mdh);
  border: var(--border-width-thin) solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--bg-background);
  color: var(--text-normal);
  font-size: var(--font-size-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--motion-duration-fast)
    var(--motion-easing-standard);
}

.bc-dialog__input::placeholder {
  color: var(--text-muted);
}

.bc-dialog__input:focus {
  border-color: var(--interactive-focus);
  box-shadow: 0 0 0 2px
    color-mix(in oklch, var(--interactive-focus), transparent 75%);
}

/* Dark mode */
.dark .bc-dialog__consequences li::before {
  color: var(--color-base-600);
}

.dark .bc-dialog__icon {
  /* In dark mode, use shade 900 for bg and 400 for fg — applied via inline styles */
}

/* Ribbon component - diagonal label at specified corner */

.bc-ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none; /* decorative by default */
  z-index: var(--z-index-tooltip, 50);
  height: 0;
}

/* The diagonal band - base styles */
.bc-ribbon {
  position: absolute;
  display: flex;
  justify-content: center;
  background: var(--ribbon-bg);
  color: var(--ribbon-text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-ribbon, var(--shadow-md));
  text-shadow: var(--text-shadow-ribbon, var(--text-shadow-2xs));
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: var(--ribbon-width, 0);
  height: max-content;
}

/* top-end corner (default) */
.bc-ribbon {
  top: 0;
  left: 100%;
  transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
    translate(var(--ribbon-inset, 0px), var(--ribbon-offset, 0px));
}

/* top-start corner */
.bc-ribbon[style*='--ribbon-corner: top-start'] {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
    translate(calc(var(--ribbon-inset, 0px) * -1), var(--ribbon-offset, 0px));
}

/* bottom-end corner */
.bc-ribbon[style*='--ribbon-corner: bottom-end'] {
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(calc(var(--ribbon-angle, 45deg) * -1))
    translate(var(--ribbon-inset, 0px), calc(var(--ribbon-offset, 0px) * -1));
}

/* bottom-start corner */
.bc-ribbon[style*='--ribbon-corner: bottom-start'] {
  top: 100%;
  left: 0;
  transform: translate(-50%, -50%) rotate(var(--ribbon-angle, 45deg))
    translate(
      calc(var(--ribbon-inset, 0px) * -1),
      calc(var(--ribbon-offset, 0px) * -1)
    );
}

/* Dark mode overrides */
.dark .bc-ribbon {
  background: var(--ribbon-bg-dark);
  color: var(--ribbon-text-dark);
}

/* High contrast */
@media (prefers-contrast: more) {
  .bc-ribbon {
    outline: var(--outline-width-default) solid
      var(--border-border-light, var(--color-neutral-500));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-ribbon {
    transition: none;
  }
}

/* Accordion Component */
.bc-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Default variant: bordered list */
.bc-accordion--default {
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bc-accordion--default .bc-accordion__item + .bc-accordion__item {
  border-top: var(--border-width-thin) solid var(--border-default);
}

/* Separated variant: cards with gaps */
.bc-accordion--separated {
  gap: var(--spacing-sm);
}

.bc-accordion--separated .bc-accordion__item {
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Item */
.bc-accordion__item {
  background-color: var(--bg-background);
}

.bc-accordion__item--disabled {
  opacity: 0.5;
}

/* Header / trigger button */
.bc-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  color: var(--text-normal);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-accordion__header:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.bc-accordion__header:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

.bc-accordion__header:disabled {
  cursor: not-allowed;
}

.bc-accordion__header-content {
  flex: 1;
  min-width: 0;
}

/* Chevron indicator */
.bc-accordion__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-accordion__chevron--open {
  transform: rotate(180deg);
}

.bc-accordion__chevron-icon {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: var(--border-width-medium) solid currentColor;
  border-bottom: var(--border-width-medium) solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.15em;
}

/* Panel body */
.bc-accordion__body {
  color: var(--text-normal);
}

/* Size variants */
.bc-accordion--size-xs .bc-accordion__header {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}
.bc-accordion--size-xs .bc-accordion__body {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

.bc-accordion--size-sm .bc-accordion__header {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}
.bc-accordion--size-sm .bc-accordion__body {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.bc-accordion--size-md .bc-accordion__header {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
}
.bc-accordion--size-md .bc-accordion__body {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
}

.bc-accordion--size-lg .bc-accordion__header {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-lg);
}
.bc-accordion--size-lg .bc-accordion__body {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

.bc-accordion--size-xl .bc-accordion__header {
  padding: var(--spacing-xl) var(--spacing-2xl);
  font-size: var(--font-size-xl);
}
.bc-accordion--size-xl .bc-accordion__body {
  padding: var(--spacing-xl) var(--spacing-2xl);
  font-size: var(--font-size-xl);
}

/* Dark mode */
.dark .bc-accordion--default {
  border-color: var(--border-default);
}

.dark .bc-accordion--default .bc-accordion__item + .bc-accordion__item {
  border-top-color: var(--border-default);
}

.dark .bc-accordion--separated .bc-accordion__item {
  border-color: var(--border-default);
}

.dark .bc-accordion__item {
  background-color: var(--bg-background);
}

.dark .bc-accordion__header {
  color: var(--text-normal);
}

.dark .bc-accordion__header:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.dark .bc-accordion__body {
  color: var(--text-normal);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-accordion__chevron {
    transition: none;
  }
  .bc-accordion__header {
    transition: none;
  }
}

/* DatePicker Component */
.bc-date-picker {
  display: inline-flex;
  flex-direction: column;
  background-color: var(--bg-background);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  user-select: none;
}

.bc-date-picker--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Navigation header */
.bc-date-picker__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
  gap: var(--spacing-xs);
}

.bc-date-picker__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-normal);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
  line-height: var(--line-height-none);
}

.bc-date-picker__nav-btn:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.bc-date-picker__nav-btn:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

.bc-date-picker__nav-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.bc-date-picker__title {
  flex: 1;
  text-align: center;
  font-weight: var(--font-weight-semibold);
  color: var(--text-normal);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.bc-date-picker__title-btn {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-normal);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  font-size: inherit;
  padding: var(--spacing-2xs) var(--spacing-xs);
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-date-picker__title-btn:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.bc-date-picker__title-btn:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

.bc-date-picker__title-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Days view container */
.bc-date-picker__days-view {
  display: flex;
  flex-direction: column;
  min-height: calc(5 * var(--cal-cell-size));
}

/* Weekday headers */
.bc-date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.bc-date-picker__weekday {
  text-align: center;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
}

/* Day grid */
.bc-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* Day cells */
.bc-date-picker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-normal);
  font-family: inherit;
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
}

.bc-date-picker__day:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.bc-date-picker__day:focus-visible {
  outline: var(--outline-width-focus) solid var(--cal-selected-bg);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

.bc-date-picker__day--outside {
  color: var(--text-muted);
  opacity: 0.4;
}

.bc-date-picker__day--today {
  background-color: var(--cal-today-bg);
  color: var(--cal-today-text);
  font-weight: var(--font-weight-semibold);
}

.bc-date-picker__day--selected {
  background-color: var(--cal-selected-bg);
  color: var(--cal-selected-text);
  font-weight: var(--font-weight-bold);
}

.bc-date-picker__day--selected.bc-date-picker__day--today {
  background-color: var(--cal-selected-bg);
  color: var(--cal-selected-text);
}

.bc-date-picker__day--selected:hover:not(:disabled) {
  filter: brightness(0.9);
}

.bc-date-picker__day--disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  opacity: 0.4;
  text-decoration: line-through;
}

/* Month and Year Picker Grid */
.bc-date-picker__picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xs);
  min-height: calc(5 * var(--cal-cell-size));
}

.bc-date-picker__picker-grid--months {
  grid-template-rows: repeat(3, 1fr);
}

.bc-date-picker__picker-grid--years {
  grid-template-rows: repeat(5, 1fr);
}

/* Month cells */
.bc-date-picker__month-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-normal);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
  padding: var(--spacing-xs);
}

.bc-date-picker__month-cell:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.bc-date-picker__month-cell:focus-visible {
  outline: var(--outline-width-focus) solid var(--cal-selected-bg);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

.bc-date-picker__month-cell--current {
  background-color: var(--cal-selected-bg);
  color: var(--cal-selected-text);
  font-weight: var(--font-weight-bold);
}

.bc-date-picker__month-cell--current:hover:not(:disabled) {
  filter: brightness(0.9);
}

.bc-date-picker__month-cell--active {
  background-color: var(--cal-today-bg);
  color: var(--cal-today-text);
  font-weight: var(--font-weight-semibold);
}

.bc-date-picker__month-cell--current.bc-date-picker__month-cell--active {
  background-color: var(--cal-selected-bg);
  color: var(--cal-selected-text);
}

/* Year cells */
.bc-date-picker__year-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-normal);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
  padding: var(--spacing-xs);
}

.bc-date-picker__year-cell:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.bc-date-picker__year-cell:focus-visible {
  outline: var(--outline-width-focus) solid var(--cal-selected-bg);
  outline-offset: calc(-1 * var(--outline-width-focus));
}

.bc-date-picker__year-cell--current {
  background-color: var(--cal-selected-bg);
  color: var(--cal-selected-text);
  font-weight: var(--font-weight-bold);
}

.bc-date-picker__year-cell--current:hover:not(:disabled) {
  filter: brightness(0.9);
}

.bc-date-picker__year-cell--active {
  background-color: var(--cal-today-bg);
  color: var(--cal-today-text);
  font-weight: var(--font-weight-semibold);
}

.bc-date-picker__year-cell--current.bc-date-picker__year-cell--active {
  background-color: var(--cal-selected-bg);
  color: var(--cal-selected-text);
}

/* Size variants */
.bc-date-picker--size-xs {
  --cal-cell-size: var(--spacing-xl);
  padding: var(--spacing-xs);
  font-size: var(--font-size-xs);
  width: calc(7 * var(--spacing-xl) + 2 * var(--spacing-xs) + 2px);
}
.bc-date-picker--size-xs .bc-date-picker__nav-btn {
  width: var(--spacing-lgh);
  height: var(--spacing-lgh);
  font-size: var(--font-size-xs);
}
.bc-date-picker--size-xs .bc-date-picker__day {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  font-size: var(--font-size-2xs);
}
.bc-date-picker--size-xs .bc-date-picker__weekday {
  font-size: var(--font-size-2xs);
  padding: var(--spacing-2xs);
}
.bc-date-picker--size-xs .bc-date-picker__month-cell,
.bc-date-picker--size-xs .bc-date-picker__year-cell {
  font-size: var(--font-size-2xs);
}

.bc-date-picker--size-sm {
  --cal-cell-size: calc(var(--spacing-base) * 7);
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
  width: calc(7 * calc(var(--spacing-base) * 7) + 2 * var(--spacing-sm) + 2px);
}
.bc-date-picker--size-sm .bc-date-picker__nav-btn {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  font-size: var(--font-size-sm);
}
.bc-date-picker--size-sm .bc-date-picker__day {
  width: calc(var(--spacing-base) * 7);
  height: calc(var(--spacing-base) * 7);
  font-size: var(--font-size-xs);
}
.bc-date-picker--size-sm .bc-date-picker__weekday {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs);
}
.bc-date-picker--size-sm .bc-date-picker__month-cell,
.bc-date-picker--size-sm .bc-date-picker__year-cell {
  font-size: var(--font-size-xs);
}

.bc-date-picker--size-md {
  --cal-cell-size: calc(var(--spacing-base) * 9);
  padding: var(--spacing-md);
  font-size: var(--font-size-md);
  width: calc(7 * calc(var(--spacing-base) * 9) + 2 * var(--spacing-md) + 2px);
}
.bc-date-picker--size-md .bc-date-picker__nav-btn {
  width: calc(var(--spacing-base) * 7);
  height: calc(var(--spacing-base) * 7);
  font-size: var(--font-size-md);
}
.bc-date-picker--size-md .bc-date-picker__day {
  width: calc(var(--spacing-base) * 9);
  height: calc(var(--spacing-base) * 9);
  font-size: var(--font-size-sm);
}
.bc-date-picker--size-md .bc-date-picker__weekday {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs);
}
.bc-date-picker--size-md .bc-date-picker__month-cell,
.bc-date-picker--size-md .bc-date-picker__year-cell {
  font-size: var(--font-size-sm);
}

.bc-date-picker--size-lg {
  --cal-cell-size: calc(var(--spacing-base) * 10.5);
  padding: var(--spacing-lg);
  font-size: var(--font-size-lg);
  width: calc(
    7 * calc(var(--spacing-base) * 10.5) + 2 * var(--spacing-lg) + 2px
  );
}
.bc-date-picker--size-lg .bc-date-picker__nav-btn {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  font-size: var(--font-size-lg);
}
.bc-date-picker--size-lg .bc-date-picker__day {
  width: calc(var(--spacing-base) * 10.5);
  height: calc(var(--spacing-base) * 10.5);
  font-size: var(--font-size-md);
}
.bc-date-picker--size-lg .bc-date-picker__weekday {
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm);
}
.bc-date-picker--size-lg .bc-date-picker__month-cell,
.bc-date-picker--size-lg .bc-date-picker__year-cell {
  font-size: var(--font-size-md);
}

.bc-date-picker--size-xl {
  --cal-cell-size: var(--spacing-3xl);
  padding: var(--spacing-xl);
  font-size: var(--font-size-xl);
  width: calc(7 * var(--spacing-3xl) + 2 * var(--spacing-xl) + 2px);
}
.bc-date-picker--size-xl .bc-date-picker__nav-btn {
  width: calc(var(--spacing-base) * 9);
  height: calc(var(--spacing-base) * 9);
  font-size: var(--font-size-xl);
}
.bc-date-picker--size-xl .bc-date-picker__day {
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  font-size: var(--font-size-lg);
}
.bc-date-picker--size-xl .bc-date-picker__weekday {
  font-size: var(--font-size-md);
  padding: var(--spacing-sm);
}
.bc-date-picker--size-xl .bc-date-picker__month-cell,
.bc-date-picker--size-xl .bc-date-picker__year-cell {
  font-size: var(--font-size-lg);
}

/* Dark mode */
.dark .bc-date-picker {
  background-color: var(--bg-background);
  border-color: var(--border-default);
}

.dark .bc-date-picker__nav-btn {
  color: var(--text-normal);
}

.dark .bc-date-picker__nav-btn:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.dark .bc-date-picker__title {
  color: var(--text-normal);
}

.dark .bc-date-picker__weekday {
  color: var(--text-muted);
}

.dark .bc-date-picker__day {
  color: var(--text-normal);
}

.dark .bc-date-picker__day:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.dark .bc-date-picker__day--selected {
  background-color: var(--cal-selected-bg-dark);
  color: var(--cal-selected-text-dark);
}

.dark .bc-date-picker__day--today {
  background-color: var(--cal-today-bg-dark);
  color: var(--cal-today-text-dark);
}

.dark .bc-date-picker__day--selected.bc-date-picker__day--today {
  background-color: var(--cal-selected-bg-dark);
  color: var(--cal-selected-text-dark);
}

.dark .bc-date-picker__title-btn {
  color: var(--text-normal);
}

.dark .bc-date-picker__title-btn:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.dark .bc-date-picker__month-cell,
.dark .bc-date-picker__year-cell {
  color: var(--text-normal);
}

.dark .bc-date-picker__month-cell:hover:not(:disabled),
.dark .bc-date-picker__year-cell:hover:not(:disabled) {
  background-color: var(--bg-subtle);
}

.dark .bc-date-picker__month-cell--current,
.dark .bc-date-picker__year-cell--current {
  background-color: var(--cal-selected-bg-dark);
  color: var(--cal-selected-text-dark);
}

.dark .bc-date-picker__month-cell--active,
.dark .bc-date-picker__year-cell--active {
  background-color: var(--cal-today-bg-dark);
  color: var(--cal-today-text-dark);
}

.dark .bc-date-picker__month-cell--current.bc-date-picker__month-cell--active,
.dark .bc-date-picker__year-cell--current.bc-date-picker__year-cell--active {
  background-color: var(--cal-selected-bg-dark);
  color: var(--cal-selected-text-dark);
}

/* Range selection */
.bc-date-picker__day--range-start,
.bc-date-picker__day--range-end {
  background-color: var(--cal-selected-bg);
  color: var(--cal-selected-text);
  font-weight: var(--font-weight-bold);
}

.bc-date-picker__day--range-start {
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}

.bc-date-picker__day--range-end {
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.bc-date-picker__day--range-start.bc-date-picker__day--range-end {
  border-radius: var(--radius-full);
}

.bc-date-picker__day--in-range {
  background-color: var(--cal-today-bg);
  color: var(--cal-today-text);
  border-radius: 0;
}

.bc-date-picker__day--preview.bc-date-picker__day--in-range {
  opacity: 0.7;
}

.bc-date-picker__day--preview.bc-date-picker__day--range-start,
.bc-date-picker__day--preview.bc-date-picker__day--range-end {
  opacity: 0.8;
}

.bc-date-picker__day--range-start:hover:not(:disabled),
.bc-date-picker__day--range-end:hover:not(:disabled) {
  filter: brightness(0.9);
}

/* Range selection - dark mode */
.dark .bc-date-picker__day--range-start,
.dark .bc-date-picker__day--range-end {
  background-color: var(--cal-selected-bg-dark);
  color: var(--cal-selected-text-dark);
}

.dark .bc-date-picker__day--in-range {
  background-color: var(--cal-today-bg-dark);
  color: var(--cal-today-text-dark);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-date-picker__day {
    transition: none;
  }
  .bc-date-picker__nav-btn {
    transition: none;
  }
  .bc-date-picker__title-btn {
    transition: none;
  }
  .bc-date-picker__month-cell {
    transition: none;
  }
  .bc-date-picker__year-cell {
    transition: none;
  }
}

/* Advanced Slider Component */
.bc-advanced-slider {
  --slider-color: var(--color-primary-500);
  --slider-color-dark: var(--color-primary-600);

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  touch-action: none;
  cursor: pointer;
  user-select: none;
}

.bc-advanced-slider--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Track */
.bc-advanced-slider__track {
  position: relative;
  width: 100%;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
}

/* Filled portion */
.bc-advanced-slider__fill {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: var(--slider-color);
  border-radius: var(--radius-full);
  pointer-events: none;
}

/* Thumb container (for positioning value label + thumb) */
.bc-advanced-slider__thumb-container {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

/* Thumb */
.bc-advanced-slider__thumb {
  background-color: var(--color-white);
  border: var(--border-width-medium) solid var(--slider-color);
  border-radius: var(--radius-full);
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--motion-transition-fast) var(--motion-easing-standard),
    transform var(--motion-transition-fast) var(--motion-easing-standard);
}

.bc-advanced-slider__thumb:hover {
  box-shadow: var(--shadow-md);
  transform: scale(1.15);
}

.bc-advanced-slider__thumb:active {
  cursor: grabbing;
  transform: scale(1.2);
}

.bc-advanced-slider__thumb:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Custom thumb wrapper — no default visual styling */
.bc-advanced-slider__thumb-custom {
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.bc-advanced-slider__thumb-custom:active {
  cursor: grabbing;
}

.bc-advanced-slider__thumb-custom:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Value label */
.bc-advanced-slider__value-label {
  position: absolute;
  white-space: nowrap;
  background-color: var(--slider-color);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  pointer-events: none;
  text-align: center;
  line-height: var(--line-height-none);
}

/* Ticks container */
.bc-advanced-slider__ticks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Individual tick */
.bc-advanced-slider__tick {
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bc-advanced-slider__tick::before {
  content: '';
  display: block;
  background-color: var(--color-gray-400);
  border-radius: var(--radius-full);
}

/* Tick label */
.bc-advanced-slider__tick-label {
  position: absolute;
  white-space: nowrap;
  color: var(--text-muted);
}

/* ── Size variants ── */

/* xs */
.bc-advanced-slider--size-xs {
  padding: var(--spacing-lg) var(--spacing-smh) var(--spacing-md);
}
.bc-advanced-slider--size-xs .bc-advanced-slider__track {
  height: var(--spacing-xs);
}
.bc-advanced-slider--size-xs .bc-advanced-slider__thumb {
  width: calc(var(--spacing-base) * 2.5);
  height: calc(var(--spacing-base) * 2.5);
}
.bc-advanced-slider--size-xs .bc-advanced-slider__value-label {
  font-size: var(--font-size-2xs);
  padding: var(--spacing-px) var(--spacing-sm);
  bottom: calc(100% + var(--spacing-sm));
}
.bc-advanced-slider--size-xs .bc-advanced-slider__tick::before {
  width: var(--spacing-px);
  height: var(--spacing-smh);
  margin-top: var(--spacing-sm);
}
.bc-advanced-slider--size-xs .bc-advanced-slider__tick-label {
  top: calc(var(--spacing-base) * 2.5);
  font-size: var(--font-size-2xs);
}

/* sm */
.bc-advanced-slider--size-sm {
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
}
.bc-advanced-slider--size-sm .bc-advanced-slider__track {
  height: calc(var(--spacing-base) * 0.75);
}
.bc-advanced-slider--size-sm .bc-advanced-slider__thumb {
  width: calc(var(--spacing-base) * 3.5);
  height: calc(var(--spacing-base) * 3.5);
}
.bc-advanced-slider--size-sm .bc-advanced-slider__value-label {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) calc(var(--spacing-base) * 1.25);
  bottom: calc(100% + calc(var(--spacing-base) * 1.25));
}
.bc-advanced-slider--size-sm .bc-advanced-slider__tick::before {
  width: var(--spacing-px);
  height: var(--spacing-md);
  margin-top: calc(var(--spacing-base) * 1.25);
}
.bc-advanced-slider--size-sm .bc-advanced-slider__tick-label {
  top: calc(var(--spacing-base) * 3.5);
  font-size: var(--font-size-2xs);
}

/* md (default) */
.bc-advanced-slider--size-md {
  padding: var(--spacing-2xl) calc(var(--spacing-base) * 2.5) var(--spacing-xl);
}
.bc-advanced-slider--size-md .bc-advanced-slider__track {
  height: var(--spacing-sm);
}
.bc-advanced-slider--size-md .bc-advanced-slider__thumb {
  width: calc(var(--spacing-base) * 4.5);
  height: calc(var(--spacing-base) * 4.5);
}
.bc-advanced-slider--size-md .bc-advanced-slider__value-label {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-smh);
  bottom: calc(100% + var(--spacing-smh));
}
.bc-advanced-slider--size-md .bc-advanced-slider__tick::before {
  width: var(--spacing-xs);
  height: calc(var(--spacing-base) * 2.5);
  margin-top: var(--spacing-smh);
}
.bc-advanced-slider--size-md .bc-advanced-slider__tick-label {
  top: calc(var(--spacing-base) * 4.5);
  font-size: var(--font-size-xs);
}

/* lg */
.bc-advanced-slider--size-lg {
  padding: var(--spacing-3xl) var(--spacing-mdh) var(--spacing-2xl);
}
.bc-advanced-slider--size-lg .bc-advanced-slider__track {
  height: var(--spacing-smh);
}
.bc-advanced-slider--size-lg .bc-advanced-slider__thumb {
  width: calc(var(--spacing-base) * 5.5);
  height: calc(var(--spacing-base) * 5.5);
}
.bc-advanced-slider--size-lg .bc-advanced-slider__value-label {
  font-size: var(--font-size-md);
  padding: calc(var(--spacing-base) * 0.75) var(--spacing-md);
  bottom: calc(100% + var(--spacing-md));
}
.bc-advanced-slider--size-lg .bc-advanced-slider__tick::before {
  width: var(--spacing-xs);
  height: var(--spacing-mdh);
  margin-top: var(--spacing-md);
}
.bc-advanced-slider--size-lg .bc-advanced-slider__tick-label {
  top: calc(var(--spacing-base) * 5.5);
  font-size: var(--font-size-sm);
}

/* xl */
.bc-advanced-slider--size-xl {
  padding: var(--spacing-4xl) calc(var(--spacing-base) * 3.5) var(--spacing-3xl);
}
.bc-advanced-slider--size-xl .bc-advanced-slider__track {
  height: var(--spacing-md);
}
.bc-advanced-slider--size-xl .bc-advanced-slider__thumb {
  width: calc(var(--spacing-base) * 6.5);
  height: calc(var(--spacing-base) * 6.5);
}
.bc-advanced-slider--size-xl .bc-advanced-slider__value-label {
  font-size: var(--font-size-lg);
  padding: var(--spacing-sm) calc(var(--spacing-base) * 2.5);
  bottom: calc(100% + calc(var(--spacing-base) * 2.5));
}
.bc-advanced-slider--size-xl .bc-advanced-slider__tick::before {
  width: var(--spacing-xs);
  height: calc(var(--spacing-base) * 3.5);
  margin-top: calc(var(--spacing-base) * 2.5);
}
.bc-advanced-slider--size-xl .bc-advanced-slider__tick-label {
  top: calc(var(--spacing-base) * 6.5);
  font-size: var(--font-size-md);
}

/* Dark mode */
.dark .bc-advanced-slider__track {
  background-color: var(--bg-subtle);
}

.dark .bc-advanced-slider__fill {
  background-color: var(--slider-color-dark);
}

.dark .bc-advanced-slider__thumb {
  background-color: var(--text-normal);
  border-color: var(--slider-color-dark);
}

.dark .bc-advanced-slider__value-label {
  background-color: var(--slider-color-dark);
}

.dark .bc-advanced-slider__tick::before {
  background-color: var(--color-gray-500);
}

.dark .bc-advanced-slider__tick-label {
  color: var(--text-muted);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-advanced-slider__thumb {
    transition: none;
  }
}

/* OTP / Pin Input Component */
.bc-otp-input {
  --otp-focus-color: var(--color-primary-500);
  --otp-focus-color-dark: var(--color-primary-600);
  --otp-focus-border: var(--color-primary-500);
  --otp-focus-border-dark: var(--color-primary-400);

  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.bc-otp-input--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Individual cell */
.bc-otp-input__cell {
  text-align: center;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text-normal);
  background-color: var(--bg-background);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  caret-color: var(--otp-focus-color);
  transition:
    border-color var(--motion-transition-fast) var(--motion-easing-standard),
    box-shadow var(--motion-transition-fast) var(--motion-easing-standard);
}

.bc-otp-input__cell::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
}

.bc-otp-input__cell:focus,
.bc-otp-input__cell--focused {
  border-color: var(--otp-focus-border);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--otp-focus-color) 20%, transparent);
}

.bc-otp-input__cell:disabled {
  cursor: not-allowed;
}

/* Size variants */
.bc-otp-input--size-xs .bc-otp-input__cell {
  width: calc(var(--spacing-base) * 7);
  height: calc(var(--spacing-base) * 7);
  font-size: var(--font-size-xs);
}
.bc-otp-input--size-xs {
  gap: var(--spacing-xs);
}

.bc-otp-input--size-sm .bc-otp-input__cell {
  width: calc(var(--spacing-base) * 8.5);
  height: calc(var(--spacing-base) * 8.5);
  font-size: var(--font-size-sm);
}
.bc-otp-input--size-sm {
  gap: var(--spacing-xs);
}

.bc-otp-input--size-md .bc-otp-input__cell {
  width: calc(var(--spacing-base) * 10.5);
  height: calc(var(--spacing-base) * 10.5);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.bc-otp-input--size-lg .bc-otp-input__cell {
  width: calc(var(--spacing-base) * 12.5);
  height: calc(var(--spacing-base) * 12.5);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}
.bc-otp-input--size-lg {
  gap: var(--spacing-md);
}

.bc-otp-input--size-xl .bc-otp-input__cell {
  width: calc(var(--spacing-base) * 14.5);
  height: calc(var(--spacing-base) * 14.5);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}
.bc-otp-input--size-xl {
  gap: var(--spacing-md);
}

/* Dark mode */
.dark .bc-otp-input__cell {
  background-color: var(--bg-background);
  border-color: var(--border-default);
  color: var(--text-normal);
}

.dark .bc-otp-input__cell:focus,
.dark .bc-otp-input__cell--focused {
  border-color: var(--otp-focus-border-dark);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--otp-focus-color-dark) 25%, transparent);
}

.dark .bc-otp-input__cell::placeholder {
  color: var(--text-muted);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-otp-input__cell {
    transition: none;
  }
}

/* Toggle Button Component */
.bc-toggle-button {
  --toggle-bg: transparent;
  --toggle-text: inherit;
  --toggle-border: transparent;
  --toggle-border-style: solid;
  --toggle-text-shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-stack-2xs);
  border: var(--border-width-default) var(--toggle-border-style)
    var(--toggle-border);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  background-color: var(--toggle-bg);
  color: var(--toggle-text);
  text-shadow: var(--toggle-text-shadow);
  line-height: var(--line-height-none);
  transition: all var(--motion-transition-fast) var(--motion-easing-standard);
  user-select: none;
}

/* Keep icons sized to the font so icon-only buttons match text button height */
.bc-toggle-button .bc-icon {
  width: 1em;
  height: 1em;
}

.bc-toggle-button--full-width {
  width: 100%;
}

.bc-toggle-button:hover:not(:disabled) {
  background-color: var(--toggle-bg-hover);
  color: var(--toggle-text-hover);
}

.bc-toggle-button:focus-visible {
  outline: var(--outline-width-focus) solid var(--color-primary-500);
  outline-offset: 2px;
}

.bc-toggle-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.bc-toggle-button--pressed {
  box-shadow: inset 0 1px 3px
    color-mix(in srgb, var(--color-black) 10%, transparent);
}

/* Size variants */
.bc-toggle-button--size-xs {
  font-size: var(--font-size-xs);
  min-height: var(--spacing-xl);
  min-width: var(--spacing-xl);
}

.bc-toggle-button--size-sm {
  font-size: var(--font-size-sm);
  min-height: calc(var(--spacing-base) * 7);
  min-width: calc(var(--spacing-base) * 7);
}

.bc-toggle-button--size-md {
  font-size: var(--font-size-md);
  min-height: var(--spacing-2xl);
  min-width: var(--spacing-2xl);
}

.bc-toggle-button--size-lg {
  font-size: var(--font-size-lg);
  min-height: var(--spacing-2xlh);
  min-width: var(--spacing-2xlh);
}

.bc-toggle-button--size-xl {
  font-size: var(--font-size-xl);
  min-height: var(--spacing-3xl);
  min-width: var(--spacing-3xl);
}

/* Dark mode */
.dark .bc-toggle-button {
  background-color: var(--toggle-bg-dark);
  color: var(--toggle-text-dark);
  border-color: var(--toggle-border-dark);
  text-shadow: var(--toggle-text-shadow-dark);
}

.dark .bc-toggle-button:hover:not(:disabled) {
  background-color: var(--toggle-bg-hover-dark);
  color: var(--toggle-text-hover-dark);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-toggle-button {
    transition: none;
  }
}

/* High contrast */
@media (prefers-contrast: high) {
  .bc-toggle-button {
    border-width: var(--border-width-medium);
  }
}

/* Toggle Button Group Component */
.bc-toggle-button-group {
  display: inline-flex;
  align-items: stretch;
}

/* Horizontal layout (default) */
.bc-toggle-button-group--horizontal {
  flex-direction: row;
}

/* Vertical layout */
.bc-toggle-button-group--vertical {
  flex-direction: column;
}

/* ── Horizontal: collapse borders between buttons ── */
.bc-toggle-button-group--horizontal > .bc-toggle-button + .bc-toggle-button {
  margin-left: -1.5px;
}

/* ── Vertical: collapse borders between buttons ── */
.bc-toggle-button-group--vertical > .bc-toggle-button + .bc-toggle-button {
  margin-top: -1.5px;
}

/* ── Strip all border-radius inside the group ── */
.bc-toggle-button-group > .bc-toggle-button {
  border-radius: 0;
}

/* ── Horizontal: first child gets left radii ── */
.bc-toggle-button-group--horizontal > .bc-toggle-button:first-child {
  border-top-left-radius: var(--toggle-group-radius, var(--radius-sm));
  border-bottom-left-radius: var(--toggle-group-radius, var(--radius-sm));
}

/* ── Horizontal: last child gets right radii ── */
.bc-toggle-button-group--horizontal > .bc-toggle-button:last-child {
  border-top-right-radius: var(--toggle-group-radius, var(--radius-sm));
  border-bottom-right-radius: var(--toggle-group-radius, var(--radius-sm));
}

/* ── Vertical: first child gets top radii ── */
.bc-toggle-button-group--vertical > .bc-toggle-button:first-child {
  border-top-left-radius: var(--toggle-group-radius, var(--radius-sm));
  border-top-right-radius: var(--toggle-group-radius, var(--radius-sm));
}

/* ── Vertical: last child gets bottom radii ── */
.bc-toggle-button-group--vertical > .bc-toggle-button:last-child {
  border-bottom-left-radius: var(--toggle-group-radius, var(--radius-sm));
  border-bottom-right-radius: var(--toggle-group-radius, var(--radius-sm));
}

/* Ensure pressed buttons layer above neighbors for visible borders */
.bc-toggle-button-group > .bc-toggle-button--pressed {
  z-index: 1;
}

.bc-toggle-button-group > .bc-toggle-button:hover {
  z-index: 2;
}

.bc-toggle-button-group > .bc-toggle-button:focus-visible {
  z-index: 3;
}

/* Size-specific radius overrides using the design-token scale */
.bc-toggle-button-group--rounded-none {
  --toggle-group-radius: 0;
}

.bc-toggle-button-group--rounded-xs {
  --toggle-group-radius: var(--radius-xs);
}

.bc-toggle-button-group--rounded-sm {
  --toggle-group-radius: var(--radius-sm);
}

.bc-toggle-button-group--rounded-md {
  --toggle-group-radius: var(--radius-md);
}

.bc-toggle-button-group--rounded-lg {
  --toggle-group-radius: var(--radius-lg);
}

.bc-toggle-button-group--rounded-xl {
  --toggle-group-radius: var(--radius-xl);
}

.bc-toggle-button-group--rounded-full {
  --toggle-group-radius: var(--radius-full);
}

.bc-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--bg-surface) 75%, transparent);
  z-index: var(--z-index-raised);
  pointer-events: all;
  border-radius: inherit;
}

.bc-loading-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.bc-loading-overlay__message {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Sortable Header */
.bc-sortable-header {
  cursor: pointer;
  user-select: none;
  transition: background-color var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-sortable-header:hover {
  background-color: var(--interactive-hover);
}

.bc-sortable-header__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xs);
}

.bc-sortable-header__label {
  flex: 1;
}

.bc-sortable-header__icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2xs);
  flex-shrink: 0;
}

.bc-sortable-header__icon {
  opacity: 0.45;
  transition: opacity var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-sortable-header__icon--active {
  opacity: 1;
}

.bc-sortable-header:hover .bc-sortable-header__icon {
  opacity: 0.8;
}

.bc-sortable-header:hover .bc-sortable-header__icon--active {
  opacity: 1;
}

/* Column Filter */
.bc-column-filter {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: var(--border-width-thin) solid var(--border-input);
  border-radius: var(--radius-control-sm);
  background-color: var(--bg-background);
  color: var(--text-normal);
  font-size: var(--font-size-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-column-filter:focus {
  border-color: var(--interactive-focus);
  box-shadow: 0 0 0 1px var(--interactive-focus);
}

.bc-column-filter--size-xs {
  padding: var(--spacing-2xs) var(--spacing-xs);
  font-size: var(--font-size-xs);
}

.bc-column-filter--size-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.bc-column-filter--size-lg {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-md);
}

/* Selection Checkbox */
.bc-selection-checkbox {
  cursor: pointer;
  accent-color: var(--color-primary-500);
}

.bc-selection-checkbox--size-xs {
  width: 14px;
  height: 14px;
}

.bc-selection-checkbox--size-sm {
  width: 16px;
  height: 16px;
}

.bc-selection-checkbox--size-md {
  width: 18px;
  height: 18px;
}

.bc-selection-checkbox--size-lg {
  width: 20px;
  height: 20px;
}

.bc-selection-checkbox--size-xl {
  width: 24px;
  height: 24px;
}

/* Data Toolbar */
.bc-data-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--bg-surface);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-control);
  margin-bottom: var(--spacing-sm);
}

.bc-data-toolbar__selection {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.bc-data-toolbar__selection-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}

.bc-data-toolbar__action {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-control-sm);
  background-color: var(--bg-background);
  color: var(--text-normal);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color var(--motion-transition-fast);
}

.bc-data-toolbar__action:hover {
  background-color: var(--interactive-hover);
}

.bc-data-toolbar__action--secondary {
  border: none;
  background: none;
  color: var(--text-muted);
}

.bc-data-toolbar__action--secondary:hover {
  color: var(--text-normal);
  background: none;
}

.bc-data-toolbar__reset {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-left: auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: color var(--motion-transition-fast);
}

.bc-data-toolbar__reset:hover {
  color: var(--color-danger-600);
}

/* Data Table */
.bc-data-table__wrapper {
  position: relative;
  min-height: 120px;
}

.bc-data-table__filter-row > th {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.bc-data-table__selection-header {
  width: calc(var(--spacing-base) * 10);
}

.bc-table--size-xl .bc-data-table__selection-header {
  width: calc(var(--spacing-base) * 18);
}

.bc-table--size-lg .bc-data-table__selection-header {
  width: calc(var(--spacing-base) * 14);
}

.bc-table--size-sm .bc-data-table__selection-header {
  width: calc(var(--spacing-base) * 8);
}

.bc-table--size-xs .bc-data-table__selection-header {
  width: calc(var(--spacing-base) * 6);
}

.bc-data-table__selection-cell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-data-table__row--clickable {
  cursor: pointer;
}

.bc-data-table__row--selected {
  background-color: var(--color-primary-50);
}

.bc-data-table__empty {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--text-muted);
  font-style: italic;
}

.bc-data-table__pagination {
  display: flex;
  justify-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
}

/* Column Filter Panel */
.bc-column-filter-panel__trigger-wrap {
  display: flex;
  justify-content: flex-end;
}

.bc-column-filter-panel__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xs);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-control-sm);
  background-color: var(--bg-background);
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--motion-transition-fast) var(--motion-easing-standard),
    color var(--motion-transition-fast) var(--motion-easing-standard);
}

.bc-column-filter-panel__trigger:hover {
  border-color: var(--interactive-hover);
  color: var(--text-normal);
}

.bc-column-filter-panel__trigger--active {
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
}

.bc-column-filter-panel__active-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-500);
}

.bc-column-filter-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  width: 320px;
}

.bc-column-filter-panel__mode {
  display: flex;
  justify-content: center;
}

.bc-column-filter-panel__conditions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bc-column-filter-panel__row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.bc-column-filter-panel__row-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xs);
}

.bc-column-filter-panel__operator {
  flex: 1 1 0;
  min-width: 0;
}

.bc-column-filter-panel__value-wrap {
  display: flex;
  gap: var(--spacing-xs);
}

.bc-column-filter-panel__value-wrap--hidden {
  display: none;
}

.bc-column-filter-panel__value {
  flex: 1 1 auto;
  min-width: 0;
}

.bc-column-filter-panel__add {
  display: flex;
}

.bc-column-filter-panel__add-btn {
  border: none;
  background: none;
  color: var(--color-primary-600);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--spacing-2xs) 0;
  transition: color var(--motion-transition-fast);
}

.bc-column-filter-panel__add-btn:hover {
  color: var(--color-primary-700);
}

.bc-column-filter-panel__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: var(--border-width-thin) solid var(--border-default);
}

/* Dark mode */
.dark .bc-column-filter-panel__trigger {
  background-color: var(--bg-surface);
}

.dark .bc-column-filter-panel__trigger--active {
  border-color: var(--color-primary-400);
  color: var(--color-primary-400);
}

.dark .bc-column-filter-panel__active-dot {
  background-color: var(--color-primary-400);
}

.dark .bc-column-filter-panel__add-btn {
  color: var(--color-primary-400);
}

.dark .bc-column-filter-panel__add-btn:hover {
  color: var(--color-primary-300);
}

.dark .bc-data-table__row--selected {
  background-color: var(--color-primary-950);
}

.dark .bc-column-filter {
  background-color: var(--bg-surface);
}

/* Column visibility toggle */
.bc-data-table__column-toggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-xs);
}

.bc-data-table__column-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--motion-transition-fast) var(--motion-easing-standard),
    color var(--motion-transition-fast) var(--motion-easing-standard);
}

.bc-data-table__column-toggle-btn:hover {
  border-color: var(--interactive-hover);
  color: var(--text-normal);
}

.bc-data-table__column-toggle-btn:focus-visible {
  outline: 2px solid var(--interactive-focus);
  outline-offset: 2px;
}

.bc-data-table__column-toggle-btn--active {
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
}

.bc-data-table__column-toggle-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  min-width: 180px;
}

.dark .bc-data-table__column-toggle-btn {
  background-color: var(--bg-surface);
}

.dark .bc-data-table__column-toggle-btn--active {
  border-color: var(--color-primary-400);
  color: var(--color-primary-400);
}

/* Column Header Menu */
.bc-column-header-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--motion-transition-fast) var(--motion-easing-standard);
}

.bc-column-header-menu:hover {
  color: var(--text-normal);
}

/* Sortable header menu slot */
.bc-sortable-header__menu {
  display: inline-flex;
  align-items: center;
}

/* Row count footer */
.bc-data-table__row-count {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Column Reorder Drag */
th[draggable='true'] {
  background-color: var(--bg-surface);
  cursor: grab;
}

th.bc-data-table__header--dragging {
  opacity: 0.5;
}

th.bc-data-table__header--drag-over {
  border-left: 2px solid var(--color-primary-500);
}

/* Footer */
.bc-data-table__footer-row {
  background-color: var(--bg-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}

.bc-data-table__footer-row td {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-top: var(--border-width-thin) solid var(--border-default);
}

.bc-data-table__group-footer-row {
  font-size: var(--font-size-xs);
}

.bc-data-table__group-footer-row td {
  border-top: none;
  padding-top: var(--spacing-2xs);
  padding-bottom: var(--spacing-2xs);
}

/* Group By */
.bc-data-table__group-header {
  cursor: pointer;
  user-select: none;
  background-color: var(--bg-surface);
}

.bc-data-table__group-header:hover {
  background-color: var(--interactive-hover);
}

.bc-data-table__group-header-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.bc-data-table__group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--motion-transition-fast)
    var(--motion-easing-standard);
}

.bc-data-table__group-toggle--collapsed {
  transform: rotate(-90deg);
}

.bc-data-table__group-label {
  flex: 0 0 auto;
}

.bc-data-table__group-count {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
}

.bc-data-table__group-footer-summary {
  margin-left: auto;
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.dark .bc-data-table__group-header {
  background-color: var(--bg-surface);
}

.dark .bc-data-table__group-header:hover {
  background-color: var(--interactive-hover);
}

/* Tags Filter (inline checkbox list) */
.bc-column-filter-tags {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.bc-column-filter-tags__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  max-height: 200px;
  overflow-y: auto;
}

.bc-column-filter-tags__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  cursor: pointer;
  border-radius: var(--radius-control-sm);
  font-size: var(--font-size-sm);
  user-select: none;
}

.bc-column-filter-tags__item:hover {
  background-color: var(--interactive-hover);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bc-sortable-header,
  .bc-sortable-header__icon,
  .bc-column-filter,
  .bc-column-filter-panel__trigger,
  .bc-column-filter-panel__add-btn,
  .bc-data-toolbar__action,
  .bc-data-toolbar__reset,
  .bc-data-table__column-toggle-btn,
  .bc-data-table__group-toggle {
    transition: none;
  }
}

/* Shared flex modifiers for Stack and Group */

/* Gap */
.bc-flex--gap-none {
  gap: 0;
}

.bc-flex--gap-xs {
  gap: var(--spacing-xs);
}

.bc-flex--gap-sm {
  gap: var(--spacing-sm);
}

.bc-flex--gap-md {
  gap: var(--spacing-md);
}

.bc-flex--gap-lg {
  gap: var(--spacing-lg);
}

.bc-flex--gap-xl {
  gap: var(--spacing-xl);
}

/* Align */
.bc-flex--align-start {
  align-items: flex-start;
}

.bc-flex--align-center {
  align-items: center;
}

.bc-flex--align-end {
  align-items: flex-end;
}

.bc-flex--align-stretch {
  align-items: stretch;
}

.bc-flex--align-baseline {
  align-items: baseline;
}

/* Justify */
.bc-flex--justify-start {
  justify-content: flex-start;
}

.bc-flex--justify-center {
  justify-content: center;
}

.bc-flex--justify-end {
  justify-content: flex-end;
}

.bc-flex--justify-between {
  justify-content: space-between;
}

.bc-flex--justify-around {
  justify-content: space-around;
}

.bc-flex--justify-evenly {
  justify-content: space-evenly;
}

/* Wrap */
.bc-flex--wrap {
  flex-wrap: wrap;
}

.bc-flex--nowrap {
  flex-wrap: nowrap;
}

/* Grow */
.bc-flex--grow {
  flex-grow: 1;
}


}