/* ========== Shadcn/ui-inspired Components ========== */

:root {
    --border-radius: 0.5rem;
    --padding: 0.75rem 1rem;
    --transition: 0.2s ease;
}

/* Light Theme */
.theme-light {
    background-color: #fff;
    color: #000000;
}

/* Dark Theme */
.theme-dark {
    background-color: rgb(9, 9, 11);
    color: #ffffff;
}

/* Common Styles */
.shadcn-component {
    border-radius: var(--border-radius);
    padding: var(--padding);
    transition: all var(--transition);
}

/* Common Styles */
.shadcn-radius {
    border-radius: var(--border-radius);
}

.shadcn-padding {
    padding: var(--padding);
}

.shadcn-transition {
    transition: all var(--transition);
}

/* Buttons */
.btn-shadcn {
    font-weight: 500;
}

.btn-shadcn-light-primary {
    background-color: #fff;
    color: #000000;
    border: 1px solid #e5e7eb;
}

.btn-shadcn-light-primary:hover {
    background-color: #e2e2e2;
}

.btn-shadcn-light-secondary {
    background-color: #000000;
    color: #fff;
    border: 1px solid #000000;
}

.btn-shadcn-light-secondary:hover {
    background-color: #27272a;
}

.btn-shadcn-dark-primary {
    background-color: rgb(9, 9, 11);
    color: #ffffff;
    border: 1px solid #27272a;
}

.btn-shadcn-dark-primary:hover {
    background-color: #27272a;
}

.btn-shadcn-dark-secondary {
    background-color: #ffffff;
    color: rgb(9, 9, 11);
    border: 1px solid #ffffff;
}

.btn-shadcn-dark-secondary:hover {
    background-color: #e2e2e2;
}

/* Input, Select, Textarea */
.input-shadcn, .select-shadcn, .textarea-shadcn {
    width: 100%;
}

.input-shadcn-light, .select-shadcn-light, .textarea-shadcn-light {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    color: #000000;
}

.input-shadcn-dark, .select-shadcn-dark, .textarea-shadcn-dark {
    background-color: rgb(9, 9, 11);
    border: 1px solid #27272a;
    color: #ffffff;
}

.input-shadcn:focus, .select-shadcn:focus, .textarea-shadcn:focus {
    outline: none;
}

.input-shadcn-light:focus, .select-shadcn-light:focus, .textarea-shadcn-light:focus {
    border-color: #000000;
}

.input-shadcn-dark:focus, .select-shadcn-dark:focus, .textarea-shadcn-dark:focus {
    border-color: #ffffff;
}

/* Dropdown */
.dropdown-shadcn {
    position: relative;
}

.dropdown-menu-shadcn {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    border-radius: var(--border-radius);
}

.dropdown-menu-shadcn.show {
    display: block;
}

.dropdown-menu-light {
    background-color: #fff;
    border: 1px solid #e5e7eb;
}

.dropdown-menu-dark {
    background-color: rgb(9, 9, 11);
    border: 1px solid #27272a;
}

/* Label */
.label-shadcn {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.label-shadcn-light {
    color: #000000;
}

.label-shadcn-dark {
    color: #ffffff;
}

/* Form */
.card-shadcn-light {
    padding: var(--padding);
    background-color: #f3f4f6;
    color: #000000;
    border-color:#e5e7eb;
    border-radius: var(--border-radius);
}

.card--shadcn-dark {
    padding: var(--padding);
    background-color: #27272a;
    color: #ffffff;
    border-color: #27272a;
    border-radius: var(--border-radius);
}

/* Form */
.form-shadcn-light {
    padding: var(--padding);
    background-color: #f3f4f6;
    color: #000000;
    border-color:#e5e7eb;
    border-radius: var(--border-radius);
}

.form-shadcn-dark {
    padding: var(--padding);
    background-color: #27272a;
    color: #ffffff;
    border-color: #27272a;
    border-radius: var(--border-radius);
}

/* Table */
.table-shadcn {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-shadcn th,
.table-shadcn td {
    padding: var(--padding);
    text-align: left;
}

.table-shadcn-light {
    border: 1px solid #e5e7eb;
}

.table-shadcn-light th {
    background-color: #f3f4f6;
}

.table-shadcn-dark {
    border: 1px solid #27272a;
}

.table-shadcn-dark th {
    background-color: #18181b;
}

/* Badge */
.badge-shadcn {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.badge-shadcn-light {
    background-color: #e5e7eb;
    color: #000000;
}

.badge-shadcn-dark {
    background-color: #27272a;
    color: #ffffff;
}

/* Alert */
.alert-shadcn {
    padding: var(--padding);
    margin-bottom: 1rem;
}

.alert-shadcn-light {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #1f2937;
}

.alert-shadcn-dark {
    background-color: #18181b;
    border: 1px solid #27272a;
    color: #f9fafb;
}

/* Error Alert */
.alert-error-light {
    background-color: #fee2e2;
    border: 1px solid #f87171;
    color: #991b1b;
}

.alert-error-dark {
    background-color: #7f1d1d;
    border: 1px solid #f87171;
    color: #fecaca;
}

/* Active States */
.theme-light .active {
    color: #000000 !important;
}

.theme-dark .active {
    color: #ffffff !important;
}

/* Tabs */
.tabs-shadcn {
    display: flex;
    border-bottom: 1px solid;
}

.tab-shadcn {
    padding: var(--padding);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
}

.tab-shadcn:hover {
    opacity: 0.8;
}

.tab-shadcn.active {
    border-bottom-color: currentColor;
}

.tabs-shadcn-light {
    border-bottom-color: #e5e7eb;
}

.tab-shadcn-light {
    color: #6b7280;
}

.tab-shadcn-light.active {
    color: #000000;
}

.tabs-shadcn-dark {
    border-bottom-color: #27272a;
}

.tab-shadcn-dark {
    color: #9ca3af;
}

.tab-shadcn-dark.active {
    color: #ffffff;
}

/* Radio */
.radio-shadcn {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-shadcn input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid;
    border-radius: 50%;
    margin-right: 0.5rem;
    transition: all var(--transition);
}

.radio-shadcn input[type="radio"]:checked {
    background-color: currentColor;
    border-color: currentColor;
    box-shadow: inset 0 0 0 3px;
}

.radio-shadcn-light input[type="radio"] {
    border-color: #6b7280;
}

.radio-shadcn-light input[type="radio"]:checked {
    background-color: #000000;
    border-color: #000000;
    box-shadow: inset 0 0 0 3px #fff;
}

.radio-shadcn-dark input[type="radio"] {
    border-color: #9ca3af;
}

.radio-shadcn-dark input[type="radio"]:checked {
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: inset 0 0 0 3px rgb(9, 9, 11);
}

/* Modal */
.modal-shadcn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content-shadcn {
    max-width: 500px;
    width: 100%;
}

.modal-header-shadcn, .modal-body-shadcn, .modal-footer-shadcn {
    padding: var(--padding);
}

.modal-content-light {
    background-color: #fff;
    color: #000000;
}

.modal-content-dark {
    background-color: rgb(9, 9, 11);
    color: #ffffff;
}

/* Carousel */
.carousel-shadcn {
    position: relative;
    overflow: hidden;
}

.carousel-inner-shadcn {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item-shadcn {
    flex: 0 0 100%;
}

.carousel-control-shadcn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    text-decoration: none;
}

.carousel-control-prev { left: 10px; }
.carousel-control-next { right: 10px; }

/* Progress Bar */
.progress-shadcn {
    height: 0.5rem;
    overflow: hidden;
}

.progress-bar-shadcn {
    height: 100%;
    transition: width 0.3s ease;
}

.progress-light {
    background-color: #e5e7eb;
}

.progress-bar-light {
    background-color: #3b82f6;
}

.progress-dark {
    background-color: #27272a;
}

.progress-bar-dark {
    background-color: #60a5fa;
}

/* Tooltip */
.tooltip-shadcn {
    position: relative;
    display: inline-block;
}

.tooltip-content-shadcn {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-shadcn:hover .tooltip-content-shadcn {
    visibility: visible;
    opacity: 1;
}

.tooltip-light {
    background-color: #000000;
    color: #ffffff;
}

.tooltip-dark {
    background-color: #ffffff;
    color: #000000;
}

/* Popover */
.popover-shadcn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

.popover-content-shadcn {
    padding: var(--padding);
}

.popover-light {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    color: #000000;
}

.popover-dark {
    background-color: rgb(9, 9, 11);
    border: 1px solid #27272a;
    color: #ffffff;
}

/* Accordion/Collapse */
.accordion-shadcn {
    border: 1px solid;
}

.accordion-item-shadcn {
    border-bottom: 1px solid;
}

.accordion-header-shadcn {
    padding: var(--padding);
    cursor: pointer;
}

.accordion-body-shadcn {
    padding: var(--padding);
    display: none;
}

.accordion-light {
    border-color: #e5e7eb;
}

.accordion-dark {
    border-color: #27272a;
}

/* Spinner */
.spinner-shadcn {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25rem solid rgba(0, 0, 0, 0.1);
    border-right-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Pagination */
.pagination-shadcn {
    display: flex;
    list-style-type: none;
    padding: 0;
}

.page-item-shadcn {
    margin: 0 0.25rem;
}

.page-link-shadcn {
    padding: 0.5rem 0.75rem;
    text-decoration: none;
}

.pagination-light .page-link-shadcn {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    color: #000000;
}

.pagination-dark .page-link-shadcn {
    background-color: rgb(9, 9, 11);
    border: 1px solid #27272a;
    color: #ffffff;
}

/* Breadcrumbs */
.breadcrumb-shadcn {
    display: flex;
    list-style-type: none;
    padding: 0;
}

.breadcrumb-item-shadcn {
    display: flex;
    align-items: center;
}

.breadcrumb-item-shadcn + .breadcrumb-item-shadcn::before {
    content: "/";
    padding: 0 0.5rem;
}

/* List Group */
.list-group-shadcn {
    list-style-type: none;
    padding: 0;
}

.list-group-item-shadcn {
    padding: var(--padding);
    border: 1px solid;
}

.list-group-light .list-group-item-shadcn {
    background-color: #fff;
    border-color: #e5e7eb;
    color: #000000;
}

.list-group-dark .list-group-item-shadcn {
    background-color: rgb(9, 9, 11);
    border-color: #27272a;
    color: #ffffff;
}

/*! Bootstrap Ultra Pro UI Framework v1.0.0 | MIT License | Bootstrap Compatible */

/* ===== CSS CUSTOM PROPERTIES (PRESERVED FROM ORIGINAL) ===== */
:root {
  /* Core Typography */
  --bs-font-sans-serif: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --bs-font-monospace: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Enhanced Color Palette (OKLCH) */
  --bs-red-50: oklch(97.1% .013 17.38);
  --bs-red-100: oklch(93.6% .032 17.717);
  --bs-red-200: oklch(88.5% .062 18.334);
  --bs-red-300: oklch(80.8% .114 19.571);
  --bs-red-400: oklch(70.4% .191 22.216);
  --bs-red-500: oklch(63.7% .237 25.331);
  --bs-red-600: oklch(57.7% .245 27.325);
  --bs-red-700: oklch(50.5% .213 27.518);
  --bs-red-800: oklch(44.4% .177 26.899);
  --bs-red-900: oklch(39.6% .141 25.723);
  --bs-red-950: oklch(25.8% .092 26.042);

  --bs-blue-50: oklch(97% .014 254.604);
  --bs-blue-100: oklch(93.2% .032 255.585);
  --bs-blue-200: oklch(88.2% .059 254.128);
  --bs-blue-300: oklch(80.9% .105 251.813);
  --bs-blue-400: oklch(70.7% .165 254.624);
  --bs-blue-500: oklch(62.3% .214 259.815);
  --bs-blue-600: oklch(54.6% .245 262.881);
  --bs-blue-700: oklch(48.8% .243 264.376);
  --bs-blue-800: oklch(42.4% .199 265.638);
  --bs-blue-900: oklch(37.9% .146 265.522);
  --bs-blue-950: oklch(28.2% .091 267.935);

  --bs-green-50: oklch(98.2% .018 155.826);
  --bs-green-100: oklch(96.2% .044 156.743);
  --bs-green-200: oklch(92.5% .084 155.995);
  --bs-green-300: oklch(87.1% .15 154.449);
  --bs-green-400: oklch(79.2% .209 151.711);
  --bs-green-500: oklch(72.3% .219 149.579);
  --bs-green-600: oklch(62.7% .194 149.214);
  --bs-green-700: oklch(52.7% .154 150.069);
  --bs-green-800: oklch(44.8% .119 151.328);
  --bs-green-900: oklch(39.3% .095 152.535);
  --bs-green-950: oklch(26.6% .065 152.934);

  --bs-yellow-50: oklch(98.7% .026 102.212);
  --bs-yellow-100: oklch(97.3% .071 103.193);
  --bs-yellow-200: oklch(94.5% .129 101.54);
  --bs-yellow-300: oklch(90.5% .182 98.111);
  --bs-yellow-400: oklch(85.2% .199 91.936);
  --bs-yellow-500: oklch(79.5% .184 86.047);
  --bs-yellow-600: oklch(68.1% .162 75.834);
  --bs-yellow-700: oklch(55.4% .135 66.442);
  --bs-yellow-800: oklch(47.6% .114 61.907);
  --bs-yellow-900: oklch(42.1% .095 57.708);
  --bs-yellow-950: oklch(28.6% .066 53.813);

  --bs-purple-50: oklch(97.7% .014 308.299);
  --bs-purple-100: oklch(94.6% .033 307.174);
  --bs-purple-200: oklch(90.2% .063 306.703);
  --bs-purple-300: oklch(82.7% .119 306.383);
  --bs-purple-400: oklch(71.4% .203 305.504);
  --bs-purple-500: oklch(62.7% .265 303.9);
  --bs-purple-600: oklch(55.8% .288 302.321);
  --bs-purple-700: oklch(49.6% .265 301.924);
  --bs-purple-800: oklch(43.8% .218 303.724);
  --bs-purple-900: oklch(38.1% .176 304.987);
  --bs-purple-950: oklch(29.1% .149 302.717);

  --bs-gray-50: oklch(98.5% .002 247.839);
  --bs-gray-100: oklch(96.7% .003 264.542);
  --bs-gray-200: oklch(92.8% .006 264.531);
  --bs-gray-300: oklch(87.2% .01 258.338);
  --bs-gray-400: oklch(70.7% .022 261.325);
  --bs-gray-500: oklch(55.1% .027 264.364);
  --bs-gray-600: oklch(44.6% .03 256.802);
  --bs-gray-700: oklch(37.3% .034 259.733);
  --bs-gray-800: oklch(27.8% .033 256.848);
  --bs-gray-900: oklch(21% .034 264.665);
  --bs-gray-950: oklch(13% .028 261.692);

  /* Enhanced Spacing Scale */
  --bs-spacer-0-5: 0.125rem;
  --bs-spacer-1-5: 0.375rem;
  --bs-spacer-2-5: 0.625rem;
  --bs-spacer-3-5: 0.875rem;
  --bs-spacer-7: 1.75rem;
  --bs-spacer-8: 2rem;
  --bs-spacer-9: 2.25rem;
  --bs-spacer-10: 2.5rem;
  --bs-spacer-11: 2.75rem;
  --bs-spacer-12: 3rem;
  --bs-spacer-14: 3.5rem;
  --bs-spacer-16: 4rem;
  --bs-spacer-20: 5rem;
  --bs-spacer-24: 6rem;
  --bs-spacer-28: 7rem;
  --bs-spacer-32: 8rem;
  --bs-spacer-36: 9rem;
  --bs-spacer-40: 10rem;
  --bs-spacer-44: 11rem;
  --bs-spacer-48: 12rem;
  --bs-spacer-52: 13rem;
  --bs-spacer-56: 14rem;
  --bs-spacer-60: 15rem;
  --bs-spacer-64: 16rem;
  --bs-spacer-72: 18rem;
  --bs-spacer-80: 20rem;
  --bs-spacer-96: 24rem;

  /* Enhanced Border Radius */
  --bs-border-radius-xs: 0.125rem;
  --bs-border-radius-2xl: 1rem;
  --bs-border-radius-3xl: 1.5rem;
  --bs-border-radius-4xl: 2rem;
  --bs-border-radius-full: 9999px;

  /* Enhanced Shadows */
  --bs-box-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bs-box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --bs-box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* Theme System */
  --bs-theme-radius: 0.625rem;
  --bs-theme-background: oklch(1 0 0);
  --bs-theme-foreground: oklch(.145 0 0);
  --bs-theme-card: oklch(1 0 0);
  --bs-theme-card-foreground: oklch(.145 0 0);
  --bs-theme-popover: oklch(1 0 0);
  --bs-theme-popover-foreground: oklch(.145 0 0);
  --bs-theme-primary: oklch(.205 0 0);
  --bs-theme-primary-foreground: oklch(.985 0 0);
  --bs-theme-secondary: oklch(.97 0 0);
  --bs-theme-secondary-foreground: oklch(.205 0 0);
  --bs-theme-muted: oklch(.97 0 0);
  --bs-theme-muted-foreground: oklch(.556 0 0);
  --bs-theme-accent: oklch(.97 0 0);
  --bs-theme-accent-foreground: oklch(.205 0 0);
  --bs-theme-destructive: oklch(.577 .245 27.325);
  --bs-theme-border: oklch(.922 0 0);
  --bs-theme-input: oklch(.922 0 0);
  --bs-theme-ring: oklch(.708 0 0);
  --bs-theme-surface: oklch(.98 0 0);
  --bs-theme-surface-foreground: oklch(.145 0 0);
}

/* Dark Theme */
[data-bs-theme="dark"] {
  --bs-theme-background: oklch(.145 0 0);
  --bs-theme-foreground: oklch(.985 0 0);
  --bs-theme-card: oklch(.205 0 0);
  --bs-theme-card-foreground: oklch(.985 0 0);
  --bs-theme-popover: oklch(.269 0 0);
  --bs-theme-popover-foreground: oklch(.985 0 0);
  --bs-theme-primary: oklch(.922 0 0);
  --bs-theme-primary-foreground: oklch(.205 0 0);
  --bs-theme-secondary: oklch(.269 0 0);
  --bs-theme-secondary-foreground: oklch(.985 0 0);
  --bs-theme-muted: oklch(.269 0 0);
  --bs-theme-muted-foreground: oklch(.708 0 0);
  --bs-theme-accent: oklch(.371 0 0);
  --bs-theme-accent-foreground: oklch(.985 0 0);
  --bs-theme-destructive: oklch(.704 .191 22.216);
  --bs-theme-border: oklch(1 0 0/10%);
  --bs-theme-input: oklch(1 0 0/15%);
  --bs-theme-ring: oklch(.556 0 0);
  --bs-theme-surface: oklch(.2 0 0);
  --bs-theme-surface-foreground: oklch(.708 0 0);
}

/* ===== EXTENDED BOOTSTRAP UTILITIES ===== */

/* Enhanced Display Utilities */
.d-grid { display: grid !important; }
.d-inline-grid { display: inline-grid !important; }

/* Enhanced Flex Utilities */
.flex-0 { flex: 0 !important; }
.flex-auto { flex: auto !important; }
.flex-none { flex: none !important; }

/* Grid System Enhancement */
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-7 > * { flex: 0 0 auto; width: 14.2857142857%; }
.row-cols-8 > * { flex: 0 0 auto; width: 12.5%; }
.row-cols-9 > * { flex: 0 0 auto; width: 11.1111111111%; }
.row-cols-10 > * { flex: 0 0 auto; width: 10%; }
.row-cols-11 > * { flex: 0 0 auto; width: 9.0909090909%; }
.row-cols-12 > * { flex: 0 0 auto; width: 8.3333333333%; }

.col-auto { flex: 0 0 auto; width: auto; }
.col-1-5 { flex: 0 0 auto; width: 12.5%; }
.col-2-5 { flex: 0 0 auto; width: 20%; }
.col-3-5 { flex: 0 0 auto; width: 60%; }
.col-4-5 { flex: 0 0 auto; width: 80%; }

/* CSS Grid Utilities */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

.col-span-1 { grid-column: span 1 / span 1 !important; }
.col-span-2 { grid-column: span 2 / span 2 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-5 { grid-column: span 5 / span 5 !important; }
.col-span-6 { grid-column: span 6 / span 6 !important; }
.col-span-7 { grid-column: span 7 / span 7 !important; }
.col-span-8 { grid-column: span 8 / span 8 !important; }
.col-span-9 { grid-column: span 9 / span 9 !important; }
.col-span-10 { grid-column: span 10 / span 10 !important; }
.col-span-11 { grid-column: span 11 / span 11 !important; }
.col-span-12 { grid-column: span 12 / span 12 !important; }
.col-span-full { grid-column: 1 / -1 !important; }

.row-span-1 { grid-row: span 1 / span 1 !important; }
.row-span-2 { grid-row: span 2 / span 2 !important; }
.row-span-3 { grid-row: span 3 / span 3 !important; }
.row-span-4 { grid-row: span 4 / span 4 !important; }
.row-span-5 { grid-row: span 5 / span 5 !important; }
.row-span-6 { grid-row: span 6 / span 6 !important; }
.row-span-full { grid-row: 1 / -1 !important; }

/* Enhanced Gap Utilities */
.gap-0-5 { gap: var(--bs-spacer-0-5) !important; }
.gap-1-5 { gap: var(--bs-spacer-1-5) !important; }
.gap-2-5 { gap: var(--bs-spacer-2-5) !important; }
.gap-3-5 { gap: var(--bs-spacer-3-5) !important; }
.gap-7 { gap: var(--bs-spacer-7) !important; }
.gap-8 { gap: var(--bs-spacer-8) !important; }
.gap-9 { gap: var(--bs-spacer-9) !important; }
.gap-10 { gap: var(--bs-spacer-10) !important; }
.gap-11 { gap: var(--bs-spacer-11) !important; }
.gap-12 { gap: var(--bs-spacer-12) !important; }
.gap-14 { gap: var(--bs-spacer-14) !important; }
.gap-16 { gap: var(--bs-spacer-16) !important; }
.gap-20 { gap: var(--bs-spacer-20) !important; }
.gap-24 { gap: var(--bs-spacer-24) !important; }

.row-gap-0-5 { row-gap: var(--bs-spacer-0-5) !important; }
.row-gap-1-5 { row-gap: var(--bs-spacer-1-5) !important; }
.row-gap-2-5 { row-gap: var(--bs-spacer-2-5) !important; }
.row-gap-3-5 { row-gap: var(--bs-spacer-3-5) !important; }
.row-gap-7 { row-gap: var(--bs-spacer-7) !important; }
.row-gap-8 { row-gap: var(--bs-spacer-8) !important; }

.column-gap-0-5 { column-gap: var(--bs-spacer-0-5) !important; }
.column-gap-1-5 { column-gap: var(--bs-spacer-1-5) !important; }
.column-gap-2-5 { column-gap: var(--bs-spacer-2-5) !important; }
.column-gap-3-5 { column-gap: var(--bs-spacer-3-5) !important; }
.column-gap-7 { column-gap: var(--bs-spacer-7) !important; }
.column-gap-8 { column-gap: var(--bs-spacer-8) !important; }

/* Enhanced Spacing Utilities */
.p-0-5 { padding: var(--bs-spacer-0-5) !important; }
.p-1-5 { padding: var(--bs-spacer-1-5) !important; }
.p-2-5 { padding: var(--bs-spacer-2-5) !important; }
.p-3-5 { padding: var(--bs-spacer-3-5) !important; }
.p-7 { padding: var(--bs-spacer-7) !important; }
.p-8 { padding: var(--bs-spacer-8) !important; }
.p-9 { padding: var(--bs-spacer-9) !important; }
.p-10 { padding: var(--bs-spacer-10) !important; }
.p-11 { padding: var(--bs-spacer-11) !important; }
.p-12 { padding: var(--bs-spacer-12) !important; }

.px-0-5 { padding-right: var(--bs-spacer-0-5) !important; padding-left: var(--bs-spacer-0-5) !important; }
.px-1-5 { padding-right: var(--bs-spacer-1-5) !important; padding-left: var(--bs-spacer-1-5) !important; }
.px-2-5 { padding-right: var(--bs-spacer-2-5) !important; padding-left: var(--bs-spacer-2-5) !important; }
.px-3-5 { padding-right: var(--bs-spacer-3-5) !important; padding-left: var(--bs-spacer-3-5) !important; }
.px-7 { padding-right: var(--bs-spacer-7) !important; padding-left: var(--bs-spacer-7) !important; }
.px-8 { padding-right: var(--bs-spacer-8) !important; padding-left: var(--bs-spacer-8) !important; }
.px-9 { padding-right: var(--bs-spacer-9) !important; padding-left: var(--bs-spacer-9) !important; }
.px-10 { padding-right: var(--bs-spacer-10) !important; padding-left: var(--bs-spacer-10) !important; }
.px-11 { padding-right: var(--bs-spacer-11) !important; padding-left: var(--bs-spacer-11) !important; }
.px-12 { padding-right: var(--bs-spacer-12) !important; padding-left: var(--bs-spacer-12) !important; }

.py-0-5 { padding-top: var(--bs-spacer-0-5) !important; padding-bottom: var(--bs-spacer-0-5) !important; }
.py-1-5 { padding-top: var(--bs-spacer-1-5) !important; padding-bottom: var(--bs-spacer-1-5) !important; }
.py-2-5 { padding-top: var(--bs-spacer-2-5) !important; padding-bottom: var(--bs-spacer-2-5) !important; }
.py-3-5 { padding-top: var(--bs-spacer-3-5) !important; padding-bottom: var(--bs-spacer-3-5) !important; }
.py-7 { padding-top: var(--bs-spacer-7) !important; padding-bottom: var(--bs-spacer-7) !important; }
.py-8 { padding-top: var(--bs-spacer-8) !important; padding-bottom: var(--bs-spacer-8) !important; }
.py-9 { padding-top: var(--bs-spacer-9) !important; padding-bottom: var(--bs-spacer-9) !important; }
.py-10 { padding-top: var(--bs-spacer-10) !important; padding-bottom: var(--bs-spacer-10) !important; }
.py-11 { padding-top: var(--bs-spacer-11) !important; padding-bottom: var(--bs-spacer-11) !important; }
.py-12 { padding-top: var(--bs-spacer-12) !important; padding-bottom: var(--bs-spacer-12) !important; }

.pt-0-5 { padding-top: var(--bs-spacer-0-5) !important; }
.pt-1-5 { padding-top: var(--bs-spacer-1-5) !important; }
.pt-2-5 { padding-top: var(--bs-spacer-2-5) !important; }
.pt-3-5 { padding-top: var(--bs-spacer-3-5) !important; }
.pt-7 { padding-top: var(--bs-spacer-7) !important; }
.pt-8 { padding-top: var(--bs-spacer-8) !important; }
.pt-9 { padding-top: var(--bs-spacer-9) !important; }
.pt-10 { padding-top: var(--bs-spacer-10) !important; }
.pt-11 { padding-top: var(--bs-spacer-11) !important; }
.pt-12 { padding-top: var(--bs-spacer-12) !important; }

.pe-0-5 { padding-right: var(--bs-spacer-0-5) !important; }
.pe-1-5 { padding-right: var(--bs-spacer-1-5) !important; }
.pe-2-5 { padding-right: var(--bs-spacer-2-5) !important; }
.pe-3-5 { padding-right: var(--bs-spacer-3-5) !important; }
.pe-7 { padding-right: var(--bs-spacer-7) !important; }
.pe-8 { padding-right: var(--bs-spacer-8) !important; }
.pe-9 { padding-right: var(--bs-spacer-9) !important; }
.pe-10 { padding-right: var(--bs-spacer-10) !important; }
.pe-11 { padding-right: var(--bs-spacer-11) !important; }
.pe-12 { padding-right: var(--bs-spacer-12) !important; }

.pb-0-5 { padding-bottom: var(--bs-spacer-0-5) !important; }
.pb-1-5 { padding-bottom: var(--bs-spacer-1-5) !important; }
.pb-2-5 { padding-bottom: var(--bs-spacer-2-5) !important; }
.pb-3-5 { padding-bottom: var(--bs-spacer-3-5) !important; }
.pb-7 { padding-bottom: var(--bs-spacer-7) !important; }
.pb-8 { padding-bottom: var(--bs-spacer-8) !important; }
.pb-9 { padding-bottom: var(--bs-spacer-9) !important; }
.pb-10 { padding-bottom: var(--bs-spacer-10) !important; }
.pb-11 { padding-bottom: var(--bs-spacer-11) !important; }
.pb-12 { padding-bottom: var(--bs-spacer-12) !important; }

.ps-0-5 { padding-left: var(--bs-spacer-0-5) !important; }
.ps-1-5 { padding-left: var(--bs-spacer-1-5) !important; }
.ps-2-5 { padding-left: var(--bs-spacer-2-5) !important; }
.ps-3-5 { padding-left: var(--bs-spacer-3-5) !important; }
.ps-7 { padding-left: var(--bs-spacer-7) !important; }
.ps-8 { padding-left: var(--bs-spacer-8) !important; }
.ps-9 { padding-left: var(--bs-spacer-9) !important; }
.ps-10 { padding-left: var(--bs-spacer-10) !important; }
.ps-11 { padding-left: var(--bs-spacer-11) !important; }
.ps-12 { padding-left: var(--bs-spacer-12) !important; }

/* Enhanced Margin Utilities */
.m-0-5 { margin: var(--bs-spacer-0-5) !important; }
.m-1-5 { margin: var(--bs-spacer-1-5) !important; }
.m-2-5 { margin: var(--bs-spacer-2-5) !important; }
.m-3-5 { margin: var(--bs-spacer-3-5) !important; }
.m-7 { margin: var(--bs-spacer-7) !important; }
.m-8 { margin: var(--bs-spacer-8) !important; }
.m-9 { margin: var(--bs-spacer-9) !important; }
.m-10 { margin: var(--bs-spacer-10) !important; }
.m-11 { margin: var(--bs-spacer-11) !important; }
.m-12 { margin: var(--bs-spacer-12) !important; }

.mx-0-5 { margin-right: var(--bs-spacer-0-5) !important; margin-left: var(--bs-spacer-0-5) !important; }
.mx-1-5 { margin-right: var(--bs-spacer-1-5) !important; margin-left: var(--bs-spacer-1-5) !important; }
.mx-2-5 { margin-right: var(--bs-spacer-2-5) !important; margin-left: var(--bs-spacer-2-5) !important; }
.mx-3-5 { margin-right: var(--bs-spacer-3-5) !important; margin-left: var(--bs-spacer-3-5) !important; }
.mx-7 { margin-right: var(--bs-spacer-7) !important; margin-left: var(--bs-spacer-7) !important; }
.mx-8 { margin-right: var(--bs-spacer-8) !important; margin-left: var(--bs-spacer-8) !important; }
.mx-9 { margin-right: var(--bs-spacer-9) !important; margin-left: var(--bs-spacer-9) !important; }
.mx-10 { margin-right: var(--bs-spacer-10) !important; margin-left: var(--bs-spacer-10) !important; }
.mx-11 { margin-right: var(--bs-spacer-11) !important; margin-left: var(--bs-spacer-11) !important; }
.mx-12 { margin-right: var(--bs-spacer-12) !important; margin-left: var(--bs-spacer-12) !important; }

.my-0-5 { margin-top: var(--bs-spacer-0-5) !important; margin-bottom: var(--bs-spacer-0-5) !important; }
.my-1-5 { margin-top: var(--bs-spacer-1-5) !important; margin-bottom: var(--bs-spacer-1-5) !important; }
.my-2-5 { margin-top: var(--bs-spacer-2-5) !important; margin-bottom: var(--bs-spacer-2-5) !important; }
.my-3-5 { margin-top: var(--bs-spacer-3-5) !important; margin-bottom: var(--bs-spacer-3-5) !important; }
.my-7 { margin-top: var(--bs-spacer-7) !important; margin-bottom: var(--bs-spacer-7) !important; }
.my-8 { margin-top: var(--bs-spacer-8) !important; margin-bottom: var(--bs-spacer-8) !important; }
.my-9 { margin-top: var(--bs-spacer-9) !important; margin-bottom: var(--bs-spacer-9) !important; }
.my-10 { margin-top: var(--bs-spacer-10) !important; margin-bottom: var(--bs-spacer-10) !important; }
.my-11 { margin-top: var(--bs-spacer-11) !important; margin-bottom: var(--bs-spacer-11) !important; }
.my-12 { margin-top: var(--bs-spacer-12) !important; margin-bottom: var(--bs-spacer-12) !important; }

.mt-0-5 { margin-top: var(--bs-spacer-0-5) !important; }
.mt-1-5 { margin-top: var(--bs-spacer-1-5) !important; }
.mt-2-5 { margin-top: var(--bs-spacer-2-5) !important; }
.mt-3-5 { margin-top: var(--bs-spacer-3-5) !important; }
.mt-7 { margin-top: var(--bs-spacer-7) !important; }
.mt-8 { margin-top: var(--bs-spacer-8) !important; }
.mt-9 { margin-top: var(--bs-spacer-9) !important; }
.mt-10 { margin-top: var(--bs-spacer-10) !important; }
.mt-11 { margin-top: var(--bs-spacer-11) !important; }
.mt-12 { margin-top: var(--bs-spacer-12) !important; }

/* Enhanced Width & Height Utilities */
.w-1-5 { width: 10% !important; }
.w-2-5 { width: 20% !important; }
.w-3-5 { width: 60% !important; }
.w-4-5 { width: 80% !important; }
.w-1-6 { width: 16.666667% !important; }
.w-5-6 { width: 83.333333% !important; }
.w-1-12 { width: 8.333333% !important; }
.w-5-12 { width: 41.666667% !important; }
.w-7-12 { width: 58.333333% !important; }
.w-11-12 { width: 91.666667% !important; }

.h-1-5 { height: 10% !important; }
.h-2-5 { height: 20% !important; }
.h-3-5 { height: 60% !important; }
.h-4-5 { height: 80% !important; }
.h-1-6 { height: 16.666667% !important; }
.h-5-6 { height: 83.333333% !important; }

.min-h-0 { min-height: 0 !important; }
.min-h-fit { min-height: fit-content !important; }

.max-h-fit { max-height: fit-content !important; }
.max-h-screen { max-height: 100vh !important; }

/* Enhanced Border Radius */
.rounded-xs { border-radius: var(--bs-border-radius-xs) !important; }
.rounded-2xl { border-radius: var(--bs-border-radius-2xl) !important; }
.rounded-3xl { border-radius: var(--bs-border-radius-3xl) !important; }
.rounded-4xl { border-radius: var(--bs-border-radius-4xl) !important; }
.rounded-full { border-radius: var(--bs-border-radius-full) !important; }

.rounded-t-xs { border-top-left-radius: var(--bs-border-radius-xs) !important; border-top-right-radius: var(--bs-border-radius-xs) !important; }
.rounded-t-2xl { border-top-left-radius: var(--bs-border-radius-2xl) !important; border-top-right-radius: var(--bs-border-radius-2xl) !important; }
.rounded-t-3xl { border-top-left-radius: var(--bs-border-radius-3xl) !important; border-top-right-radius: var(--bs-border-radius-3xl) !important; }

.rounded-e-xs { border-top-right-radius: var(--bs-border-radius-xs) !important; border-bottom-right-radius: var(--bs-border-radius-xs) !important; }
.rounded-e-2xl { border-top-right-radius: var(--bs-border-radius-2xl) !important; border-bottom-right-radius: var(--bs-border-radius-2xl) !important; }
.rounded-e-3xl { border-top-right-radius: var(--bs-border-radius-3xl) !important; border-bottom-right-radius: var(--bs-border-radius-3xl) !important; }

.rounded-b-xs { border-bottom-right-radius: var(--bs-border-radius-xs) !important; border-bottom-left-radius: var(--bs-border-radius-xs) !important; }
.rounded-b-2xl { border-bottom-right-radius: var(--bs-border-radius-2xl) !important; border-bottom-left-radius: var(--bs-border-radius-2xl) !important; }
.rounded-b-3xl { border-bottom-right-radius: var(--bs-border-radius-3xl) !important; border-bottom-left-radius: var(--bs-border-radius-3xl) !important; }

.rounded-s-xs { border-top-left-radius: var(--bs-border-radius-xs) !important; border-bottom-left-radius: var(--bs-border-radius-xs) !important; }
.rounded-s-2xl { border-top-left-radius: var(--bs-border-radius-2xl) !important; border-bottom-left-radius: var(--bs-border-radius-2xl) !important; }
.rounded-s-3xl { border-top-left-radius: var(--bs-border-radius-3xl) !important; border-bottom-left-radius: var(--bs-border-radius-3xl) !important; }

/* Enhanced Shadow Utilities */
.shadow-xs { box-shadow: var(--bs-box-shadow-xs) !important; }
.shadow-2xl { box-shadow: var(--bs-box-shadow-2xl) !important; }
.shadow-inner { box-shadow: var(--bs-box-shadow-inner) !important; }

/* Enhanced Color Utilities */
.text-gray-50 { color: var(--bs-gray-50) !important; }
.text-gray-100 { color: var(--bs-gray-100) !important; }
.text-gray-200 { color: var(--bs-gray-200) !important; }
.text-gray-300 { color: var(--bs-gray-300) !important; }
.text-gray-400 { color: var(--bs-gray-400) !important; }
.text-gray-500 { color: var(--bs-gray-500) !important; }
.text-gray-600 { color: var(--bs-gray-600) !important; }
.text-gray-700 { color: var(--bs-gray-700) !important; }
.text-gray-800 { color: var(--bs-gray-800) !important; }
.text-gray-900 { color: var(--bs-gray-900) !important; }
.text-gray-950 { color: var(--bs-gray-950) !important; }

.text-red-50 { color: var(--bs-red-50) !important; }
.text-red-100 { color: var(--bs-red-100) !important; }
.text-red-200 { color: var(--bs-red-200) !important; }
.text-red-300 { color: var(--bs-red-300) !important; }
.text-red-400 { color: var(--bs-red-400) !important; }
.text-red-500 { color: var(--bs-red-500) !important; }
.text-red-600 { color: var(--bs-red-600) !important; }
.text-red-700 { color: var(--bs-red-700) !important; }
.text-red-800 { color: var(--bs-red-800) !important; }
.text-red-900 { color: var(--bs-red-900) !important; }
.text-red-950 { color: var(--bs-red-950) !important; }

.text-blue-50 { color: var(--bs-blue-50) !important; }
.text-blue-100 { color: var(--bs-blue-100) !important; }
.text-blue-200 { color: var(--bs-blue-200) !important; }
.text-blue-300 { color: var(--bs-blue-300) !important; }
.text-blue-400 { color: var(--bs-blue-400) !important; }
.text-blue-500 { color: var(--bs-blue-500) !important; }
.text-blue-600 { color: var(--bs-blue-600) !important; }
.text-blue-700 { color: var(--bs-blue-700) !important; }
.text-blue-800 { color: var(--bs-blue-800) !important; }
.text-blue-900 { color: var(--bs-blue-900) !important; }
.text-blue-950 { color: var(--bs-blue-950) !important; }

.text-green-50 { color: var(--bs-green-50) !important; }
.text-green-100 { color: var(--bs-green-100) !important; }
.text-green-200 { color: var(--bs-green-200) !important; }
.text-green-300 { color: var(--bs-green-300) !important; }
.text-green-400 { color: var(--bs-green-400) !important; }
.text-green-500 { color: var(--bs-green-500) !important; }
.text-green-600 { color: var(--bs-green-600) !important; }
.text-green-700 { color: var(--bs-green-700) !important; }
.text-green-800 { color: var(--bs-green-800) !important; }
.text-green-900 { color: var(--bs-green-900) !important; }
.text-green-950 { color: var(--bs-green-950) !important; }

.text-yellow-50 { color: var(--bs-yellow-50) !important; }
.text-yellow-100 { color: var(--bs-yellow-100) !important; }
.text-yellow-200 { color: var(--bs-yellow-200) !important; }
.text-yellow-300 { color: var(--bs-yellow-300) !important; }
.text-yellow-400 { color: var(--bs-yellow-400) !important; }
.text-yellow-500 { color: var(--bs-yellow-500) !important; }
.text-yellow-600 { color: var(--bs-yellow-600) !important; }
.text-yellow-700 { color: var(--bs-yellow-700) !important; }
.text-yellow-800 { color: var(--bs-yellow-800) !important; }
.text-yellow-900 { color: var(--bs-yellow-900) !important; }
.text-yellow-950 { color: var(--bs-yellow-950) !important; }

.text-purple-50 { color: var(--bs-purple-50) !important; }
.text-purple-100 { color: var(--bs-purple-100) !important; }
.text-purple-200 { color: var(--bs-purple-200) !important; }
.text-purple-300 { color: var(--bs-purple-300) !important; }
.text-purple-400 { color: var(--bs-purple-400) !important; }
.text-purple-500 { color: var(--bs-purple-500) !important; }
.text-purple-600 { color: var(--bs-purple-600) !important; }
.text-purple-700 { color: var(--bs-purple-700) !important; }
.text-purple-800 { color: var(--bs-purple-800) !important; }
.text-purple-900 { color: var(--bs-purple-900) !important; }
.text-purple-950 { color: var(--bs-purple-950) !important; }

/* Background Colors */
.bg-gray-50 { background-color: var(--bs-gray-50) !important; }
.bg-gray-100 { background-color: var(--bs-gray-100) !important; }
.bg-gray-200 { background-color: var(--bs-gray-200) !important; }
.bg-gray-300 { background-color: var(--bs-gray-300) !important; }
.bg-gray-400 { background-color: var(--bs-gray-400) !important; }
.bg-gray-500 { background-color: var(--bs-gray-500) !important; }
.bg-gray-600 { background-color: var(--bs-gray-600) !important; }
.bg-gray-700 { background-color: var(--bs-gray-700) !important; }
.bg-gray-800 { background-color: var(--bs-gray-800) !important; }
.bg-gray-900 { background-color: var(--bs-gray-900) !important; }
.bg-gray-950 { background-color: var(--bs-gray-950) !important; }

.bg-red-50 { background-color: var(--bs-red-50) !important; }
.bg-red-100 { background-color: var(--bs-red-100) !important; }
.bg-red-500 { background-color: var(--bs-red-500) !important; }
.bg-red-600 { background-color: var(--bs-red-600) !important; }

.bg-blue-50 { background-color: var(--bs-blue-50) !important; }
.bg-blue-100 { background-color: var(--bs-blue-100) !important; }
.bg-blue-500 { background-color: var(--bs-blue-500) !important; }
.bg-blue-600 { background-color: var(--bs-blue-600) !important; }

.bg-green-50 { background-color: var(--bs-green-50) !important; }
.bg-green-100 { background-color: var(--bs-green-100) !important; }
.bg-green-500 { background-color: var(--bs-green-500) !important; }
.bg-green-600 { background-color: var(--bs-green-600) !important; }

.bg-yellow-50 { background-color: var(--bs-yellow-50) !important; }
.bg-yellow-100 { background-color: var(--bs-yellow-100) !important; }
.bg-yellow-500 { background-color: var(--bs-yellow-500) !important; }
.bg-yellow-600 { background-color: var(--bs-yellow-600) !important; }

.bg-purple-50 { background-color: var(--bs-purple-50) !important; }
.bg-purple-100 { background-color: var(--bs-purple-100) !important; }
.bg-purple-500 { background-color: var(--bs-purple-500) !important; }
.bg-purple-600 { background-color: var(--bs-purple-600) !important; }

/* Theme-based Colors */
.text-theme-primary { color: var(--bs-theme-primary) !important; }
.text-theme-secondary { color: var(--bs-theme-secondary) !important; }
.text-theme-muted { color: var(--bs-theme-muted-foreground) !important; }
.text-theme-accent { color: var(--bs-theme-accent) !important; }
.text-theme-destructive { color: var(--bs-theme-destructive) !important; }
.text-theme-foreground { color: var(--bs-theme-foreground) !important; }

.bg-theme-primary { background-color: var(--bs-theme-primary) !important; }
.bg-theme-secondary { background-color: var(--bs-theme-secondary) !important; }
.bg-theme-muted { background-color: var(--bs-theme-muted) !important; }
.bg-theme-accent { background-color: var(--bs-theme-accent) !important; }
.bg-theme-destructive { background-color: var(--bs-theme-destructive) !important; }
.bg-theme-background { background-color: var(--bs-theme-background) !important; }
.bg-theme-card { background-color: var(--bs-theme-card) !important; }
.bg-theme-surface { background-color: var(--bs-theme-surface) !important; }

/* Border Colors */
.border-theme-primary { border-color: var(--bs-theme-primary) !important; }
.border-theme-secondary { border-color: var(--bs-theme-secondary) !important; }
.border-theme-muted { border-color: var(--bs-theme-muted) !important; }
.border-theme-accent { border-color: var(--bs-theme-accent) !important; }
.border-theme-destructive { border-color: var(--bs-theme-destructive) !important; }
.border-theme-border { border-color: var(--bs-theme-border) !important; }

/* ===== RESPONSIVE UTILITIES (Bootstrap Breakpoints) ===== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .d-sm-grid { display: grid !important; }
  .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .col-span-sm-2 { grid-column: span 2 / span 2 !important; }
  .col-span-sm-3 { grid-column: span 3 / span 3 !important; }
  .gap-sm-4 { gap: var(--bs-gutter-x) !important; }
  .gap-sm-6 { gap: var(--bs-spacer-6) !important; }
  .gap-sm-8 { gap: var(--bs-spacer-8) !important; }
  .p-sm-6 { padding: var(--bs-spacer-6) !important; }
  .p-sm-8 { padding: var(--bs-spacer-8) !important; }
  .px-sm-6 { padding-right: var(--bs-spacer-6) !important; padding-left: var(--bs-spacer-6) !important; }
  .px-sm-8 { padding-right: var(--bs-spacer-8) !important; padding-left: var(--bs-spacer-8) !important; }
  .py-sm-6 { padding-top: var(--bs-spacer-6) !important; padding-bottom: var(--bs-spacer-6) !important; }
  .py-sm-8 { padding-top: var(--bs-spacer-8) !important; padding-bottom: var(--bs-spacer-8) !important; }
  .rounded-sm-lg { border-radius: var(--bs-border-radius-lg) !important; }
  .rounded-sm-xl { border-radius: var(--bs-border-radius-xl) !important; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .d-md-grid { display: grid !important; }
  .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .col-span-md-2 { grid-column: span 2 / span 2 !important; }
  .col-span-md-3 { grid-column: span 3 / span 3 !important; }
  .col-span-md-4 { grid-column: span 4 / span 4 !important; }
  .gap-md-6 { gap: var(--bs-spacer-6) !important; }
  .gap-md-8 { gap: var(--bs-spacer-8) !important; }
  .gap-md-10 { gap: var(--bs-spacer-10) !important; }
  .p-md-8 { padding: var(--bs-spacer-8) !important; }
  .p-md-10 { padding: var(--bs-spacer-10) !important; }
  .px-md-8 { padding-right: var(--bs-spacer-8) !important; padding-left: var(--bs-spacer-8) !important; }
  .px-md-10 { padding-right: var(--bs-spacer-10) !important; padding-left: var(--bs-spacer-10) !important; }
  .py-md-8 { padding-top: var(--bs-spacer-8) !important; padding-bottom: var(--bs-spacer-8) !important; }
  .py-md-10 { padding-top: var(--bs-spacer-10) !important; padding-bottom: var(--bs-spacer-10) !important; }
  .rounded-md-xl { border-radius: var(--bs-border-radius-xl) !important; }
  .rounded-md-2xl { border-radius: var(--bs-border-radius-2xl) !important; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .d-lg-grid { display: grid !important; }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .grid-cols-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .grid-cols-lg-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .col-span-lg-3 { grid-column: span 3 / span 3 !important; }
  .col-span-lg-4 { grid-column: span 4 / span 4 !important; }
  .col-span-lg-5 { grid-column: span 5 / span 5 !important; }
  .col-span-lg-6 { grid-column: span 6 / span 6 !important; }
  .gap-lg-8 { gap: var(--bs-spacer-8) !important; }
  .gap-lg-10 { gap: var(--bs-spacer-10) !important; }
  .gap-lg-12 { gap: var(--bs-spacer-12) !important; }
  .p-lg-10 { padding: var(--bs-spacer-10) !important; }
  .p-lg-12 { padding: var(--bs-spacer-12) !important; }
  .px-lg-10 { padding-right: var(--bs-spacer-10) !important; padding-left: var(--bs-spacer-10) !important; }
  .px-lg-12 { padding-right: var(--bs-spacer-12) !important; padding-left: var(--bs-spacer-12) !important; }
  .py-lg-10 { padding-top: var(--bs-spacer-10) !important; padding-bottom: var(--bs-spacer-10) !important; }
  .py-lg-12 { padding-top: var(--bs-spacer-12) !important; padding-bottom: var(--bs-spacer-12) !important; }
  .rounded-lg-2xl { border-radius: var(--bs-border-radius-2xl) !important; }
  .rounded-lg-3xl { border-radius: var(--bs-border-radius-3xl) !important; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .d-xl-grid { display: grid !important; }
  .grid-cols-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .grid-cols-xl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .grid-cols-xl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .grid-cols-xl-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .col-span-xl-4 { grid-column: span 4 / span 4 !important; }
  .col-span-xl-5 { grid-column: span 5 / span 5 !important; }
  .col-span-xl-6 { grid-column: span 6 / span 6 !important; }
  .col-span-xl-8 { grid-column: span 8 / span 8 !important; }
  .gap-xl-10 { gap: var(--bs-spacer-10) !important; }
  .gap-xl-12 { gap: var(--bs-spacer-12) !important; }
  .gap-xl-16 { gap: var(--bs-spacer-16) !important; }
  .p-xl-12 { padding: var(--bs-spacer-12) !important; }
  .p-xl-16 { padding: var(--bs-spacer-16) !important; }
  .px-xl-12 { padding-right: var(--bs-spacer-12) !important; padding-left: var(--bs-spacer-12) !important; }
  .px-xl-16 { padding-right: var(--bs-spacer-16) !important; padding-left: var(--bs-spacer-16) !important; }
  .py-xl-12 { padding-top: var(--bs-spacer-12) !important; padding-bottom: var(--bs-spacer-12) !important; }
  .py-xl-16 { padding-top: var(--bs-spacer-16) !important; padding-bottom: var(--bs-spacer-16) !important; }
  .rounded-xl-3xl { border-radius: var(--bs-border-radius-3xl) !important; }
  .rounded-xl-4xl { border-radius: var(--bs-border-radius-4xl) !important; }
}

/* Extra extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
  .d-xxl-grid { display: grid !important; }
  .grid-cols-xxl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .grid-cols-xxl-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .grid-cols-xxl-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
  .grid-cols-xxl-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .col-span-xxl-6 { grid-column: span 6 / span 6 !important; }
  .col-span-xxl-8 { grid-column: span 8 / span 8 !important; }
  .col-span-xxl-10 { grid-column: span 10 / span 10 !important; }
  .col-span-xxl-12 { grid-column: span 12 / span 12 !important; }
  .gap-xxl-12 { gap: var(--bs-spacer-12) !important; }
  .gap-xxl-16 { gap: var(--bs-spacer-16) !important; }
  .gap-xxl-20 { gap: var(--bs-spacer-20) !important; }
  .p-xxl-16 { padding: var(--bs-spacer-16) !important; }
  .p-xxl-20 { padding: var(--bs-spacer-20) !important; }
}

/* ===== ENHANCED COMPONENTS ===== */

/* Enhanced Button Styles */
.btn-theme {
  --bs-btn-color: var(--bs-theme-primary-foreground);
  --bs-btn-bg: var(--bs-theme-primary);
  --bs-btn-border-color: var(--bs-theme-primary);
  --bs-btn-hover-color: var(--bs-theme-primary-foreground);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-theme-primary) 90%, black);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-theme-primary) 90%, black);
  --bs-btn-focus-shadow-rgb: var(--bs-theme-ring);
  --bs-btn-active-color: var(--bs-theme-primary-foreground);
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-theme-primary) 80%, black);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-theme-primary) 80%, black);
}

.btn-theme-outline {
  --bs-btn-color: var(--bs-theme-primary);
  --bs-btn-border-color: var(--bs-theme-primary);
  --bs-btn-hover-color: var(--bs-theme-primary-foreground);
  --bs-btn-hover-bg: var(--bs-theme-primary);
  --bs-btn-hover-border-color: var(--bs-theme-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-theme-ring);
  --bs-btn-active-color: var(--bs-theme-primary-foreground);
  --bs-btn-active-bg: var(--bs-theme-primary);
  --bs-btn-active-border-color: var(--bs-theme-primary);
}

.btn-destructive {
  --bs-btn-color: white;
  --bs-btn-bg: var(--bs-theme-destructive);
  --bs-btn-border-color: var(--bs-theme-destructive);
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-theme-destructive) 90%, black);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-theme-destructive) 90%, black);
  --bs-btn-focus-shadow-rgb: var(--bs-theme-destructive);
  --bs-btn-active-color: white;
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-theme-destructive) 80%, black);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-theme-destructive) 80%, black);
}

/* Enhanced Card Styles */
.card-theme {
  background-color: var(--bs-theme-card);
  color: var(--bs-theme-card-foreground);
  border-color: var(--bs-theme-border);
}

.card-elevated {
  box-shadow: var(--bs-box-shadow-lg);
  border: none;
}

.card-glass {
  background-color: color-mix(in oklab, var(--bs-theme-background) 80%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, var(--bs-theme-border) 50%, transparent);
}

/* Enhanced Form Controls */
.form-control-theme {
  background-color: var(--bs-theme-input);
  border-color: var(--bs-theme-border);
  color: var(--bs-theme-foreground);
}

.form-control-theme:focus {
  background-color: var(--bs-theme-background);
  border-color: var(--bs-theme-ring);
  box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--bs-theme-ring) 25%, transparent);
}

/* Enhanced Badge Styles */
.badge-theme {
  color: var(--bs-theme-primary-foreground);
  background-color: var(--bs-theme-primary);
}

.badge-muted {
  color: var(--bs-theme-muted-foreground);
  background-color: var(--bs-theme-muted);
}

.badge-accent {
  color: var(--bs-theme-accent-foreground);
  background-color: var(--bs-theme-accent);
}

.badge-destructive {
  color: white;
  background-color: var(--bs-theme-destructive);
}

/* Enhanced Alert Styles */
.alert-theme {
  color: var(--bs-theme-primary);
  background-color: color-mix(in oklab, var(--bs-theme-primary) 10%, transparent);
  border-color: color-mix(in oklab, var(--bs-theme-primary) 20%, transparent);
}

.alert-destructive {
  color: var(--bs-theme-destructive);
  background-color: color-mix(in oklab, var(--bs-theme-destructive) 10%, transparent);
  border-color: color-mix(in oklab, var(--bs-theme-destructive) 20%, transparent);
}

/* ===== ENHANCED INTERACTIONS ===== */

/* Focus Ring */
.focus-ring-theme:focus {
  outline: 2px solid var(--bs-theme-ring);
  outline-offset: 2px;
}

/* Hover Effects */
.hover-lift:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Transitions */
.transition-colors {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.transition-transform {
  transition: transform 0.15s ease-in-out;
}

.transition-all {
  transition: all 0.15s ease-in-out;
}

/* ===== ENHANCED FORM CONTROLS ===== */

/* Advanced Form Control Variants */
.form-control-xs {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--bs-border-radius-sm);
}

.form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}

.form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}

.form-control-xl {
  min-height: calc(1.5em + 1.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.75rem 1.25rem;
  font-size: 1.375rem;
  border-radius: var(--bs-border-radius-lg);
}

/* Enhanced Form Control States */
.form-control-ghost {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.form-control-ghost:focus {
  background-color: var(--bs-theme-input);
  border-color: var(--bs-theme-ring);
  box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--bs-theme-ring) 25%, transparent);
}

.form-control-underline {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--bs-theme-border);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.form-control-underline:focus {
  background-color: transparent;
  border-bottom-color: var(--bs-theme-ring);
  border-bottom-width: 2px;
  box-shadow: none;
}

/* Form Control with Icons */
.form-control-icon {
  padding-left: 2.375rem;
}

.form-control-icon-end {
  padding-right: 2.375rem;
}

.form-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-theme-muted-foreground);
  pointer-events: none;
  z-index: 4;
}

.form-icon-start {
  left: 0.75rem;
}

.form-icon-end {
  right: 0.75rem;
}

/* Enhanced Select Controls */
.form-select-xs {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--bs-border-radius-sm);
}

.form-select-xl {
  min-height: calc(1.5em + 1.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.75rem 2.25rem 0.75rem 1.25rem;
  font-size: 1.375rem;
  border-radius: var(--bs-border-radius-lg);
}

/* Floating Labels Enhancement */
.form-floating-xs .form-control,
.form-floating-xs .form-select {
  height: calc(2.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
  font-size: 0.75rem;
}

.form-floating-xs > label {
  padding: 0.75rem 0.5rem;
  font-size: 0.65rem;
}

.form-floating-xl .form-control,
.form-floating-xl .form-select {
  height: calc(4.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
  font-size: 1.375rem;
}

.form-floating-xl > label {
  padding: 1.25rem 1rem;
  font-size: 1.125rem;
}

/* Form Validation Enhancements */
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--bs-success) 25%, transparent);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--bs-danger) 25%, transparent);
}

/* Input Groups Enhancement */
.input-group-xs .form-control,
.input-group-xs .input-group-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--bs-border-radius-sm);
}

.input-group-xl .form-control,
.input-group-xl .input-group-text {
  padding: 0.75rem 1.25rem;
  font-size: 1.375rem;
  border-radius: var(--bs-border-radius-lg);
}

/* ===== ENHANCED TYPOGRAPHY ===== */

/* Extended Font Sizes */
.fs-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.fs-2xs { font-size: 0.625rem !important; line-height: 0.875rem !important; }
.fs-3xs { font-size: 0.5rem !important; line-height: 0.75rem !important; }
.fs-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.fs-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.fs-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.fs-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.fs-5xl { font-size: 3rem !important; line-height: 1 !important; }
.fs-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
.fs-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
.fs-8xl { font-size: 6rem !important; line-height: 1 !important; }
.fs-9xl { font-size: 8rem !important; line-height: 1 !important; }

/* Extended Font Weights */
.fw-thin { font-weight: 100 !important; }
.fw-extralight { font-weight: 200 !important; }
.fw-light { font-weight: 300 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-extrabold { font-weight: 800 !important; }
.fw-black { font-weight: 900 !important; }

/* Extended Line Heights */
.lh-none { line-height: 1 !important; }
.lh-tight { line-height: 1.25 !important; }
.lh-snug { line-height: 1.375 !important; }
.lh-relaxed { line-height: 1.625 !important; }
.lh-loose { line-height: 2 !important; }

/* Letter Spacing */
.tracking-tighter { letter-spacing: -0.05em !important; }
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0em !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* Text Decoration */
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

.text-underline-offset-1 { text-underline-offset: 1px !important; }
.text-underline-offset-2 { text-underline-offset: 2px !important; }
.text-underline-offset-4 { text-underline-offset: 4px !important; }
.text-underline-offset-8 { text-underline-offset: 8px !important; }

/* Text Transform Extensions */
.text-capitalize { text-transform: capitalize !important; }
.text-normal-case { text-transform: none !important; }

/* Text Wrap */
.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.text-pre { white-space: pre !important; }
.text-pre-line { white-space: pre-line !important; }
.text-pre-wrap { white-space: pre-wrap !important; }
.text-break-spaces { white-space: break-spaces !important; }

/* Word Break */
.text-break { word-wrap: break-word !important; overflow-wrap: break-word !important; }
.text-break-all { word-break: break-all !important; }
.text-break-keep { word-break: keep-all !important; }

/* Text Overflow */
.text-ellipsis { text-overflow: ellipsis !important; }
.text-clip { text-overflow: clip !important; }

/* Line Clamp Extensions */
.line-clamp-1 {
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-5 {
  display: -webkit-box !important;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-6 {
  display: -webkit-box !important;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-none {
  display: block !important;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

/* ===== ENHANCED POSITIONING ===== */

/* Position Extensions */
.position-sticky-top { position: sticky !important; top: 0; }
.position-sticky-bottom { position: sticky !important; bottom: 0; }

/* Top/Right/Bottom/Left Utilities */
.top-0 { top: 0 !important; }
.top-1 { top: var(--bs-spacer-1) !important; }
.top-2 { top: var(--bs-spacer-2) !important; }
.top-3 { top: var(--bs-spacer-3) !important; }
.top-4 { top: var(--bs-spacer-4) !important; }
.top-5 { top: var(--bs-spacer-5) !important; }
.top-auto { top: auto !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }

.end-0 { right: 0 !important; }
.end-1 { right: var(--bs-spacer-1) !important; }
.end-2 { right: var(--bs-spacer-2) !important; }
.end-3 { right: var(--bs-spacer-3) !important; }
.end-4 { right: var(--bs-spacer-4) !important; }
.end-5 { right: var(--bs-spacer-5) !important; }
.end-auto { right: auto !important; }
.end-50 { right: 50% !important; }
.end-100 { right: 100% !important; }

.bottom-0 { bottom: 0 !important; }
.bottom-1 { bottom: var(--bs-spacer-1) !important; }
.bottom-2 { bottom: var(--bs-spacer-2) !important; }
.bottom-3 { bottom: var(--bs-spacer-3) !important; }
.bottom-4 { bottom: var(--bs-spacer-4) !important; }
.bottom-5 { bottom: var(--bs-spacer-5) !important; }
.bottom-auto { bottom: auto !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }

.start-0 { left: 0 !important; }
.start-1 { left: var(--bs-spacer-1) !important; }
.start-2 { left: var(--bs-spacer-2) !important; }
.start-3 { left: var(--bs-spacer-3) !important; }
.start-4 { left: var(--bs-spacer-4) !important; }
.start-5 { left: var(--bs-spacer-5) !important; }
.start-auto { left: auto !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }

/* Inset Utilities */
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.inset-1 { top: var(--bs-spacer-1) !important; right: var(--bs-spacer-1) !important; bottom: var(--bs-spacer-1) !important; left: var(--bs-spacer-1) !important; }
.inset-2 { top: var(--bs-spacer-2) !important; right: var(--bs-spacer-2) !important; bottom: var(--bs-spacer-2) !important; left: var(--bs-spacer-2) !important; }
.inset-auto { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }

.inset-x-0 { left: 0 !important; right: 0 !important; }
.inset-x-auto { left: auto !important; right: auto !important; }
.inset-y-0 { top: 0 !important; bottom: 0 !important; }
.inset-y-auto { top: auto !important; bottom: auto !important; }

/* ===== ENHANCED TRANSFORMS ===== */

/* Transform Utilities */
.transform-none { transform: none !important; }

/* Translate */
.translate-x-0 { transform: translateX(0) !important; }
.translate-x-1 { transform: translateX(var(--bs-spacer-1)) !important; }
.translate-x-2 { transform: translateX(var(--bs-spacer-2)) !important; }
.translate-x-3 { transform: translateX(var(--bs-spacer-3)) !important; }
.translate-x-4 { transform: translateX(var(--bs-spacer-4)) !important; }
.translate-x-50 { transform: translateX(50%) !important; }
.translate-x-n50 { transform: translateX(-50%) !important; }
.translate-x-100 { transform: translateX(100%) !important; }
.translate-x-n100 { transform: translateX(-100%) !important; }

.translate-y-0 { transform: translateY(0) !important; }
.translate-y-1 { transform: translateY(var(--bs-spacer-1)) !important; }
.translate-y-2 { transform: translateY(var(--bs-spacer-2)) !important; }
.translate-y-3 { transform: translateY(var(--bs-spacer-3)) !important; }
.translate-y-4 { transform: translateY(var(--bs-spacer-4)) !important; }
.translate-y-50 { transform: translateY(50%) !important; }
.translate-y-n50 { transform: translateY(-50%) !important; }
.translate-y-100 { transform: translateY(100%) !important; }
.translate-y-n100 { transform: translateY(-100%) !important; }

/* Scale */
.scale-0 { transform: scale(0) !important; }
.scale-50 { transform: scale(0.5) !important; }
.scale-75 { transform: scale(0.75) !important; }
.scale-90 { transform: scale(0.9) !important; }
.scale-95 { transform: scale(0.95) !important; }
.scale-100 { transform: scale(1) !important; }
.scale-105 { transform: scale(1.05) !important; }
.scale-110 { transform: scale(1.1) !important; }
.scale-125 { transform: scale(1.25) !important; }
.scale-150 { transform: scale(1.5) !important; }

.scale-x-0 { transform: scaleX(0) !important; }
.scale-x-50 { transform: scaleX(0.5) !important; }
.scale-x-75 { transform: scaleX(0.75) !important; }
.scale-x-90 { transform: scaleX(0.9) !important; }
.scale-x-95 { transform: scaleX(0.95) !important; }
.scale-x-100 { transform: scaleX(1) !important; }
.scale-x-105 { transform: scaleX(1.05) !important; }
.scale-x-110 { transform: scaleX(1.1) !important; }
.scale-x-125 { transform: scaleX(1.25) !important; }
.scale-x-150 { transform: scaleX(1.5) !important; }

.scale-y-0 { transform: scaleY(0) !important; }
.scale-y-50 { transform: scaleY(0.5) !important; }
.scale-y-75 { transform: scaleY(0.75) !important; }
.scale-y-90 { transform: scaleY(0.9) !important; }
.scale-y-95 { transform: scaleY(0.95) !important; }
.scale-y-100 { transform: scaleY(1) !important; }
.scale-y-105 { transform: scaleY(1.05) !important; }
.scale-y-110 { transform: scaleY(1.1) !important; }
.scale-y-125 { transform: scaleY(1.25) !important; }
.scale-y-150 { transform: scaleY(1.5) !important; }

/* Rotate */
.rotate-0 { transform: rotate(0deg) !important; }
.rotate-1 { transform: rotate(1deg) !important; }
.rotate-2 { transform: rotate(2deg) !important; }
.rotate-3 { transform: rotate(3deg) !important; }
.rotate-6 { transform: rotate(6deg) !important; }
.rotate-12 { transform: rotate(12deg) !important; }
.rotate-45 { transform: rotate(45deg) !important; }
.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }
.rotate-n1 { transform: rotate(-1deg) !important; }
.rotate-n2 { transform: rotate(-2deg) !important; }
.rotate-n3 { transform: rotate(-3deg) !important; }
.rotate-n6 { transform: rotate(-6deg) !important; }
.rotate-n12 { transform: rotate(-12deg) !important; }
.rotate-n45 { transform: rotate(-45deg) !important; }
.rotate-n90 { transform: rotate(-90deg) !important; }
.rotate-n180 { transform: rotate(-180deg) !important; }

/* Skew */
.skew-x-0 { transform: skewX(0deg) !important; }
.skew-x-1 { transform: skewX(1deg) !important; }
.skew-x-2 { transform: skewX(2deg) !important; }
.skew-x-3 { transform: skewX(3deg) !important; }
.skew-x-6 { transform: skewX(6deg) !important; }
.skew-x-12 { transform: skewX(12deg) !important; }

.skew-y-0 { transform: skewY(0deg) !important; }
.skew-y-1 { transform: skewY(1deg) !important; }
.skew-y-2 { transform: skewY(2deg) !important; }
.skew-y-3 { transform: skewY(3deg) !important; }
.skew-y-6 { transform: skewY(6deg) !important; }
.skew-y-12 { transform: skewY(12deg) !important; }

/* Transform Origin */
.transform-origin-center { transform-origin: center !important; }
.transform-origin-top { transform-origin: top !important; }
.transform-origin-top-right { transform-origin: top right !important; }
.transform-origin-right { transform-origin: right !important; }
.transform-origin-bottom-right { transform-origin: bottom right !important; }
.transform-origin-bottom { transform-origin: bottom !important; }
.transform-origin-bottom-left { transform-origin: bottom left !important; }
.transform-origin-left { transform-origin: left !important; }
.transform-origin-top-left { transform-origin: top left !important; }

/* ===== ENHANCED INTERACTIONS ===== */

/* Extended Cursor Utilities */
.cursor-auto { cursor: auto !important; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-help { cursor: help !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-none { cursor: none !important; }
.cursor-context-menu { cursor: context-menu !important; }
.cursor-progress { cursor: progress !important; }
.cursor-cell { cursor: cell !important; }
.cursor-crosshair { cursor: crosshair !important; }
.cursor-vertical-text { cursor: vertical-text !important; }
.cursor-alias { cursor: alias !important; }
.cursor-copy { cursor: copy !important; }
.cursor-no-drop { cursor: no-drop !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }
.cursor-all-scroll { cursor: all-scroll !important; }
.cursor-col-resize { cursor: col-resize !important; }
.cursor-row-resize { cursor: row-resize !important; }
.cursor-n-resize { cursor: n-resize !important; }
.cursor-e-resize { cursor: e-resize !important; }
.cursor-s-resize { cursor: s-resize !important; }
.cursor-w-resize { cursor: w-resize !important; }
.cursor-ne-resize { cursor: ne-resize !important; }
.cursor-nw-resize { cursor: nw-resize !important; }
.cursor-se-resize { cursor: se-resize !important; }
.cursor-sw-resize { cursor: sw-resize !important; }
.cursor-ew-resize { cursor: ew-resize !important; }
.cursor-ns-resize { cursor: ns-resize !important; }
.cursor-nesw-resize { cursor: nesw-resize !important; }
.cursor-nwse-resize { cursor: nwse-resize !important; }
.cursor-zoom-in { cursor: zoom-in !important; }
.cursor-zoom-out { cursor: zoom-out !important; }

/* User Select Extensions */
.user-select-auto { user-select: auto !important; }
.user-select-text { user-select: text !important; }
.user-select-none { user-select: none !important; }
.user-select-all { user-select: all !important; }

/* Pointer Events */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* Resize */
.resize-none { resize: none !important; }
.resize-both { resize: both !important; }
.resize-horizontal { resize: horizontal !important; }
.resize-vertical { resize: vertical !important; }

/* ===== ENHANCED ANIMATIONS ===== */

/* Transition Extensions */
.transition-none { transition: none !important; }
.transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-opacity {
  transition-property: opacity !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-shadow {
  transition-property: box-shadow !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.transition-transform {
  transition-property: transform !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

/* Duration */
.duration-75 { transition-duration: 75ms !important; }
.duration-100 { transition-duration: 100ms !important; }
.duration-150 { transition-duration: 150ms !important; }
.duration-200 { transition-duration: 200ms !important; }
.duration-300 { transition-duration: 300ms !important; }
.duration-500 { transition-duration: 500ms !important; }
.duration-700 { transition-duration: 700ms !important; }
.duration-1000 { transition-duration: 1000ms !important; }

/* Timing Functions */
.ease-linear { transition-timing-function: linear !important; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* Delay */
.delay-75 { transition-delay: 75ms !important; }
.delay-100 { transition-delay: 100ms !important; }
.delay-150 { transition-delay: 150ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-500 { transition-delay: 500ms !important; }
.delay-700 { transition-delay: 700ms !important; }
.delay-1000 { transition-delay: 1000ms !important; }

/* Animation */
.animate-none { animation: none !important; }
.animate-spin { animation: spin 1s linear infinite !important; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; }
.animate-bounce { animation: bounce 1s infinite !important; }

/* Keyframes */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes pulse {
  50% { opacity: .5; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* ===== UTILITY EXTENSIONS ===== */

/* Aspect Ratio */
.ratio-1x1 { aspect-ratio: 1 !important; }
.ratio-5x4 { aspect-ratio: 5/4 !important; }
.ratio-4x3 { aspect-ratio: 4/3 !important; }
.ratio-3x2 { aspect-ratio: 3/2 !important; }
.ratio-5x3 { aspect-ratio: 5/3 !important; }
.ratio-16x9 { aspect-ratio: 16/9 !important; }
.ratio-2x1 { aspect-ratio: 2/1 !important; }
.ratio-3x1 { aspect-ratio: 3/1 !important; }
.ratio-square { aspect-ratio: 1 !important; }
.ratio-video { aspect-ratio: 16/9 !important; }

/* Object Fit */
.object-contain { object-fit: contain !important; }
.object-cover { object-fit: cover !important; }
.object-fill { object-fit: fill !important; }
.object-none { object-fit: none !important; }
.object-scale-down { object-fit: scale-down !important; }

/* Object Position */
.object-bottom { object-position: bottom !important; }
.object-center { object-position: center !important; }
.object-left { object-position: left !important; }
.object-left-bottom { object-position: left bottom !important; }
.object-left-top { object-position: left top !important; }
.object-right { object-position: right !important; }
.object-right-bottom { object-position: right bottom !important; }
.object-right-top { object-position: right top !important; }
.object-top { object-position: top !important; }

/* Overflow Extensions */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-clip { overflow: clip !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-x-clip { overflow-x: clip !important; }
.overflow-y-clip { overflow-y: clip !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

/* Overscroll Behavior */
.overscroll-auto { overscroll-behavior: auto !important; }
.overscroll-contain { overscroll-behavior: contain !important; }
.overscroll-none { overscroll-behavior: none !important; }
.overscroll-y-auto { overscroll-behavior-y: auto !important; }
.overscroll-y-contain { overscroll-behavior-y: contain !important; }
.overscroll-y-none { overscroll-behavior-y: none !important; }
.overscroll-x-auto { overscroll-behavior-x: auto !important; }
.overscroll-x-contain { overscroll-behavior-x: contain !important; }
/* ===== ENHANCED HOVER STATES ===== */

/* Background Hover */
.hover-bg-primary:hover { background-color: var(--bs-theme-primary) !important; }
.hover-bg-secondary:hover { background-color: var(--bs-theme-secondary) !important; }
.hover-bg-success:hover { background-color: var(--bs-success) !important; }
.hover-bg-danger:hover { background-color: var(--bs-danger) !important; }
.hover-bg-warning:hover { background-color: var(--bs-warning) !important; }
.hover-bg-info:hover { background-color: var(--bs-info) !important; }
.hover-bg-light:hover { background-color: var(--bs-light) !important; }
.hover-bg-dark:hover { background-color: var(--bs-dark) !important; }
.hover-bg-muted:hover { background-color: var(--bs-theme-muted) !important; }
.hover-bg-accent:hover { background-color: var(--bs-theme-accent) !important; }
.hover-bg-theme-card:hover { background-color: var(--bs-theme-card) !important; }
.hover-bg-transparent:hover { background-color: transparent !important; }

/* Background Hover with Opacity */
.hover-bg-primary-subtle:hover { background-color: color-mix(in oklab, var(--bs-theme-primary) 10%, transparent) !important; }
.hover-bg-secondary-subtle:hover { background-color: color-mix(in oklab, var(--bs-theme-secondary) 10%, transparent) !important; }
.hover-bg-muted-subtle:hover { background-color: color-mix(in oklab, var(--bs-theme-muted) 50%, transparent) !important; }
.hover-bg-accent-subtle:hover { background-color: color-mix(in oklab, var(--bs-theme-accent) 50%, transparent) !important; }

/* Text Color Hover */
.hover-text-primary:hover { color: var(--bs-theme-primary) !important; }
.hover-text-secondary:hover { color: var(--bs-theme-secondary) !important; }
.hover-text-success:hover { color: var(--bs-success) !important; }
.hover-text-danger:hover { color: var(--bs-danger) !important; }
.hover-text-warning:hover { color: var(--bs-warning) !important; }
.hover-text-info:hover { color: var(--bs-info) !important; }
.hover-text-light:hover { color: var(--bs-light) !important; }
.hover-text-dark:hover { color: var(--bs-dark) !important; }
.hover-text-muted:hover { color: var(--bs-theme-muted-foreground) !important; }
.hover-text-accent:hover { color: var(--bs-theme-accent) !important; }
.hover-text-foreground:hover { color: var(--bs-theme-foreground) !important; }
.hover-text-white:hover { color: white !important; }
.hover-text-black:hover { color: black !important; }

/* Border Color Hover */
.hover-border-primary:hover { border-color: var(--bs-theme-primary) !important; }
.hover-border-secondary:hover { border-color: var(--bs-theme-secondary) !important; }
.hover-border-muted:hover { border-color: var(--bs-theme-muted) !important; }
.hover-border-accent:hover { border-color: var(--bs-theme-accent) !important; }
.hover-border-transparent:hover { border-color: transparent !important; }

/* Transform Hover */
.hover-scale-105:hover { transform: scale(1.05) !important; }
.hover-scale-110:hover { transform: scale(1.1) !important; }
.hover-scale-95:hover { transform: scale(0.95) !important; }
.hover-scale-100:hover { transform: scale(1) !important; }

.hover-translate-y-1:hover { transform: translateY(-0.25rem) !important; }
.hover-translate-y-2:hover { transform: translateY(-0.5rem) !important; }
.hover-translate-y-n1:hover { transform: translateY(0.25rem) !important; }

.hover-rotate-1:hover { transform: rotate(1deg) !important; }
.hover-rotate-2:hover { transform: rotate(2deg) !important; }
.hover-rotate-3:hover { transform: rotate(3deg) !important; }
.hover-rotate-6:hover { transform: rotate(6deg) !important; }
.hover-rotate-n1:hover { transform: rotate(-1deg) !important; }
.hover-rotate-n2:hover { transform: rotate(-2deg) !important; }
.hover-rotate-n3:hover { transform: rotate(-3deg) !important; }
.hover-rotate-n6:hover { transform: rotate(-6deg) !important; }

/* Shadow Hover */
.hover-shadow:hover { box-shadow: var(--bs-box-shadow) !important; }
.hover-shadow-sm:hover { box-shadow: var(--bs-box-shadow-sm) !important; }
.hover-shadow-lg:hover { box-shadow: var(--bs-box-shadow-lg) !important; }
.hover-shadow-xl:hover { box-shadow: var(--bs-box-shadow-xl) !important; }
.hover-shadow-2xl:hover { box-shadow: var(--bs-box-shadow-2xl) !important; }
.hover-shadow-none:hover { box-shadow: none !important; }

/* Opacity Hover */
.hover-opacity-0:hover { opacity: 0 !important; }
.hover-opacity-25:hover { opacity: 0.25 !important; }
.hover-opacity-50:hover { opacity: 0.5 !important; }
.hover-opacity-75:hover { opacity: 0.75 !important; }
.hover-opacity-100:hover { opacity: 1 !important; }

/* Text Decoration Hover */
.hover-underline:hover { text-decoration: underline !important; }
.hover-no-underline:hover { text-decoration: none !important; }

/* ===== ENHANCED FOCUS STATES ===== */

/* Focus Ring */
.focus-ring-0:focus {
  outline: none !important;
  box-shadow: none !important;
}

.focus-ring:focus {
  outline: 2px solid var(--bs-theme-ring) !important;
  outline-offset: 2px !important;
}

.focus-ring-primary:focus {
  outline: 2px solid var(--bs-theme-primary) !important;
  outline-offset: 2px !important;
}

.focus-ring-secondary:focus {
  outline: 2px solid var(--bs-theme-secondary) !important;
  outline-offset: 2px !important;
}

.focus-ring-success:focus {
  outline: 2px solid var(--bs-success) !important;
  outline-offset: 2px !important;
}

.focus-ring-danger:focus {
  outline: 2px solid var(--bs-danger) !important;
  outline-offset: 2px !important;
}

.focus-ring-warning:focus {
  outline: 2px solid var(--bs-warning) !important;
  outline-offset: 2px !important;
}

.focus-ring-info:focus {
  outline: 2px solid var(--bs-info) !important;
  outline-offset: 2px !important;
}

/* Focus Ring Offset */
.focus-ring-offset-0:focus { outline-offset: 0 !important; }
.focus-ring-offset-1:focus { outline-offset: 1px !important; }
.focus-ring-offset-2:focus { outline-offset: 2px !important; }
.focus-ring-offset-4:focus { outline-offset: 4px !important; }
.focus-ring-offset-8:focus { outline-offset: 8px !important; }

/* Focus Background */
.focus-bg-primary:focus { background-color: var(--bs-theme-primary) !important; }
.focus-bg-secondary:focus { background-color: var(--bs-theme-secondary) !important; }
.focus-bg-muted:focus { background-color: var(--bs-theme-muted) !important; }
.focus-bg-accent:focus { background-color: var(--bs-theme-accent) !important; }
.focus-bg-transparent:focus { background-color: transparent !important; }

/* Focus Text Color */
.focus-text-primary:focus { color: var(--bs-theme-primary) !important; }
.focus-text-secondary:focus { color: var(--bs-theme-secondary) !important; }
.focus-text-muted:focus { color: var(--bs-theme-muted-foreground) !important; }
.focus-text-accent:focus { color: var(--bs-theme-accent) !important; }
.focus-text-foreground:focus { color: var(--bs-theme-foreground) !important; }

/* ===== ENHANCED ACTIVE STATES ===== */

/* Active Background */
.active-bg-primary:active { background-color: color-mix(in oklab, var(--bs-theme-primary) 90%, black) !important; }
.active-bg-secondary:active { background-color: color-mix(in oklab, var(--bs-theme-secondary) 90%, black) !important; }
.active-bg-muted:active { background-color: color-mix(in oklab, var(--bs-theme-muted) 90%, black) !important; }
.active-bg-accent:active { background-color: color-mix(in oklab, var(--bs-theme-accent) 90%, black) !important; }

/* Active Transform */
.active-scale-95:active { transform: scale(0.95) !important; }
.active-scale-90:active { transform: scale(0.9) !important; }
.active-translate-y-0:active { transform: translateY(0) !important; }

/* ===== ENHANCED DISABLED STATES ===== */

/* Disabled Opacity */
.disabled-opacity-25[disabled] { opacity: 0.25 !important; }
.disabled-opacity-50[disabled] { opacity: 0.5 !important; }
.disabled-opacity-75[disabled] { opacity: 0.75 !important; }

/* Disabled Cursor */
.disabled-cursor-not-allowed[disabled] { cursor: not-allowed !important; }
.disabled-cursor-default[disabled] { cursor: default !important; }

/* Disabled Pointer Events */
.disabled-pointer-events-none[disabled] { pointer-events: none !important; }

/* ===== ENHANCED VISIBILITY ===== */

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.collapse { visibility: collapse !important; }

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

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ===== ENHANCED FILTERS ===== */

/* Blur */
.blur-none { filter: blur(0) !important; }
.blur-sm { filter: blur(4px) !important; }
.blur { filter: blur(8px) !important; }
.blur-md { filter: blur(12px) !important; }
.blur-lg { filter: blur(16px) !important; }
.blur-xl { filter: blur(24px) !important; }
.blur-2xl { filter: blur(40px) !important; }
.blur-3xl { filter: blur(64px) !important; }

/* Brightness */
.brightness-0 { filter: brightness(0) !important; }
.brightness-50 { filter: brightness(.5) !important; }
.brightness-75 { filter: brightness(.75) !important; }
.brightness-90 { filter: brightness(.9) !important; }
.brightness-95 { filter: brightness(.95) !important; }
.brightness-100 { filter: brightness(1) !important; }
.brightness-105 { filter: brightness(1.05) !important; }
.brightness-110 { filter: brightness(1.1) !important; }
.brightness-125 { filter: brightness(1.25) !important; }
.brightness-150 { filter: brightness(1.5) !important; }
.brightness-200 { filter: brightness(2) !important; }

/* Contrast */
.contrast-0 { filter: contrast(0) !important; }
.contrast-50 { filter: contrast(.5) !important; }
.contrast-75 { filter: contrast(.75) !important; }
.contrast-100 { filter: contrast(1) !important; }
.contrast-125 { filter: contrast(1.25) !important; }
.contrast-150 { filter: contrast(1.5) !important; }
.contrast-200 { filter: contrast(2) !important; }

/* Grayscale */
.grayscale-0 { filter: grayscale(0) !important; }
.grayscale { filter: grayscale(100%) !important; }

/* Hue Rotate */
.hue-rotate-0 { filter: hue-rotate(0deg) !important; }
.hue-rotate-15 { filter: hue-rotate(15deg) !important; }
.hue-rotate-30 { filter: hue-rotate(30deg) !important; }
.hue-rotate-60 { filter: hue-rotate(60deg) !important; }
.hue-rotate-90 { filter: hue-rotate(90deg) !important; }
.hue-rotate-180 { filter: hue-rotate(180deg) !important; }

/* Invert */
.invert-0 { filter: invert(0) !important; }
.invert { filter: invert(100%) !important; }

/* Saturate */
.saturate-0 { filter: saturate(0) !important; }
.saturate-50 { filter: saturate(.5) !important; }
.saturate-100 { filter: saturate(1) !important; }
.saturate-150 { filter: saturate(1.5) !important; }
.saturate-200 { filter: saturate(2) !important; }

/* Sepia */
.sepia-0 { filter: sepia(0) !important; }
.sepia { filter: sepia(100%) !important; }

/* Drop Shadow */
.drop-shadow-sm { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) !important; }
.drop-shadow { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)) !important; }
.drop-shadow-md { filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) !important; }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) !important; }
.drop-shadow-xl { filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)) !important; }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)) !important; }
.drop-shadow-none { filter: drop-shadow(0 0 #0000) !important; }

/* ===== ENHANCED BACKDROP FILTERS ===== */

/* Backdrop Blur */
.backdrop-blur-none { backdrop-filter: blur(0) !important; }
.backdrop-blur-sm { backdrop-filter: blur(4px) !important; }
.backdrop-blur { backdrop-filter: blur(8px) !important; }
.backdrop-blur-md { backdrop-filter: blur(12px) !important; }
.backdrop-blur-lg { backdrop-filter: blur(16px) !important; }
.backdrop-blur-xl { backdrop-filter: blur(24px) !important; }
.backdrop-blur-2xl { backdrop-filter: blur(40px) !important; }
.backdrop-blur-3xl { backdrop-filter: blur(64px) !important; }

/* Backdrop Brightness */
.backdrop-brightness-0 { backdrop-filter: brightness(0) !important; }
.backdrop-brightness-50 { backdrop-filter: brightness(.5) !important; }
.backdrop-brightness-75 { backdrop-filter: brightness(.75) !important; }
.backdrop-brightness-90 { backdrop-filter: brightness(.9) !important; }
.backdrop-brightness-95 { backdrop-filter: brightness(.95) !important; }
.backdrop-brightness-100 { backdrop-filter: brightness(1) !important; }
.backdrop-brightness-105 { backdrop-filter: brightness(1.05) !important; }
.backdrop-brightness-110 { backdrop-filter: brightness(1.1) !important; }
.backdrop-brightness-125 { backdrop-filter: brightness(1.25) !important; }
.backdrop-brightness-150 { backdrop-filter: brightness(1.5) !important; }
.backdrop-brightness-200 { backdrop-filter: brightness(2) !important; }

/* Backdrop Contrast */
.backdrop-contrast-0 { backdrop-filter: contrast(0) !important; }
.backdrop-contrast-50 { backdrop-filter: contrast(.5) !important; }
.backdrop-contrast-75 { backdrop-filter: contrast(.75) !important; }
.backdrop-contrast-100 { backdrop-filter: contrast(1) !important; }
.backdrop-contrast-125 { backdrop-filter: contrast(1.25) !important; }
.backdrop-contrast-150 { backdrop-filter: contrast(1.5) !important; }
.backdrop-contrast-200 { backdrop-filter: contrast(2) !important; }

/* Backdrop Grayscale */
.backdrop-grayscale-0 { backdrop-filter: grayscale(0) !important; }
.backdrop-grayscale { backdrop-filter: grayscale(100%) !important; }

/* Backdrop Hue Rotate */
.backdrop-hue-rotate-0 { backdrop-filter: hue-rotate(0deg) !important; }
.backdrop-hue-rotate-15 { backdrop-filter: hue-rotate(15deg) !important; }
.backdrop-hue-rotate-30 { backdrop-filter: hue-rotate(30deg) !important; }
.backdrop-hue-rotate-60 { backdrop-filter: hue-rotate(60deg) !important; }
.backdrop-hue-rotate-90 { backdrop-filter: hue-rotate(90deg) !important; }
.backdrop-hue-rotate-180 { backdrop-filter: hue-rotate(180deg) !important; }

/* Backdrop Invert */
.backdrop-invert-0 { backdrop-filter: invert(0) !important; }
.backdrop-invert { backdrop-filter: invert(100%) !important; }

/* Backdrop Opacity */
.backdrop-opacity-0 { backdrop-filter: opacity(0) !important; }
.backdrop-opacity-5 { backdrop-filter: opacity(0.05) !important; }
.backdrop-opacity-10 { backdrop-filter: opacity(0.1) !important; }
.backdrop-opacity-20 { backdrop-filter: opacity(0.2) !important; }
.backdrop-opacity-25 { backdrop-filter: opacity(0.25) !important; }
.backdrop-opacity-30 { backdrop-filter: opacity(0.3) !important; }
.backdrop-opacity-40 { backdrop-filter: opacity(0.4) !important; }
.backdrop-opacity-50 { backdrop-filter: opacity(0.5) !important; }
.backdrop-opacity-60 { backdrop-filter: opacity(0.6) !important; }
.backdrop-opacity-70 { backdrop-filter: opacity(0.7) !important; }
.backdrop-opacity-75 { backdrop-filter: opacity(0.75) !important; }
.backdrop-opacity-80 { backdrop-filter: opacity(0.8) !important; }
.backdrop-opacity-90 { backdrop-filter: opacity(0.9) !important; }
.backdrop-opacity-95 { backdrop-filter: opacity(0.95) !important; }
.backdrop-opacity-100 { backdrop-filter: opacity(1) !important; }

/* Backdrop Saturate */
.backdrop-saturate-0 { backdrop-filter: saturate(0) !important; }
.backdrop-saturate-50 { backdrop-filter: saturate(.5) !important; }
.backdrop-saturate-100 { backdrop-filter: saturate(1) !important; }
.backdrop-saturate-150 { backdrop-filter: saturate(1.5) !important; }
.backdrop-saturate-200 { backdrop-filter: saturate(2) !important; }

/* Backdrop Sepia */
.backdrop-sepia-0 { backdrop-filter: sepia(0) !important; }
/* ===== COMPONENT HELPERS ===== */

/* Enhanced List Styles */
.list-none { list-style: none !important; }
.list-disc { list-style-type: disc !important; }
.list-decimal { list-style-type: decimal !important; }
.list-inside { list-style-position: inside !important; }
.list-outside { list-style-position: outside !important; }

/* Enhanced Table Styles */
.table-auto { table-layout: auto !important; }
.table-fixed { table-layout: fixed !important; }

.border-collapse { border-collapse: collapse !important; }
.border-separate { border-collapse: separate !important; }

.caption-top { caption-side: top !important; }
.caption-bottom { caption-side: bottom !important; }

/* Enhanced Image Styles */
.img-rendering-auto { image-rendering: auto !important; }
.img-rendering-crisp-edges { image-rendering: crisp-edges !important; }
.img-rendering-pixelated { image-rendering: pixelated !important; }

/* Enhanced Appearance */
.appearance-none { appearance: none !important; }
.appearance-auto { appearance: auto !important; }

/* Enhanced Isolation */
.isolate { isolation: isolate !important; }
.isolation-auto { isolation: auto !important; }

/* Mix Blend Mode */
.mix-blend-normal { mix-blend-mode: normal !important; }
.mix-blend-multiply { mix-blend-mode: multiply !important; }
.mix-blend-screen { mix-blend-mode: screen !important; }
.mix-blend-overlay { mix-blend-mode: overlay !important; }
.mix-blend-darken { mix-blend-mode: darken !important; }
.mix-blend-lighten { mix-blend-mode: lighten !important; }
.mix-blend-color-dodge { mix-blend-mode: color-dodge !important; }
.mix-blend-color-burn { mix-blend-mode: color-burn !important; }
.mix-blend-hard-light { mix-blend-mode: hard-light !important; }
.mix-blend-soft-light { mix-blend-mode: soft-light !important; }
.mix-blend-difference { mix-blend-mode: difference !important; }
.mix-blend-exclusion { mix-blend-mode: exclusion !important; }
.mix-blend-hue { mix-blend-mode: hue !important; }
.mix-blend-saturation { mix-blend-mode: saturation !important; }
.mix-blend-color { mix-blend-mode: color !important; }
.mix-blend-luminosity { mix-blend-mode: luminosity !important; }
.mix-blend-plus-lighter { mix-blend-mode: plus-lighter !important; }

/* Background Blend Mode */
.bg-blend-normal { background-blend-mode: normal !important; }
.bg-blend-multiply { background-blend-mode: multiply !important; }
.bg-blend-screen { background-blend-mode: screen !important; }
.bg-blend-overlay { background-blend-mode: overlay !important; }
.bg-blend-darken { background-blend-mode: darken !important; }
.bg-blend-lighten { background-blend-mode: lighten !important; }
.bg-blend-color-dodge { background-blend-mode: color-dodge !important; }
.bg-blend-color-burn { background-blend-mode: color-burn !important; }
.bg-blend-hard-light { background-blend-mode: hard-light !important; }
.bg-blend-soft-light { background-blend-mode: soft-light !important; }
.bg-blend-difference { background-blend-mode: difference !important; }
.bg-blend-exclusion { background-blend-mode: exclusion !important; }
.bg-blend-hue { background-blend-mode: hue !important; }
.bg-blend-saturation { background-blend-mode: saturation !important; }
.bg-blend-color { background-blend-mode: color !important; }
.bg-blend-luminosity { background-blend-mode: luminosity !important; }

/* Enhanced Background Utilities */
.bg-fixed { background-attachment: fixed !important; }
.bg-local { background-attachment: local !important; }
.bg-scroll { background-attachment: scroll !important; }

.bg-clip-border { background-clip: border-box !important; }
.bg-clip-padding { background-clip: padding-box !important; }
.bg-clip-content { background-clip: content-box !important; }
.bg-clip-text { background-clip: text !important; -webkit-background-clip: text !important; }

.bg-origin-border { background-origin: border-box !important; }
.bg-origin-padding { background-origin: padding-box !important; }
.bg-origin-content { background-origin: content-box !important; }

.bg-repeat { background-repeat: repeat !important; }
.bg-no-repeat { background-repeat: no-repeat !important; }
.bg-repeat-x { background-repeat: repeat-x !important; }
.bg-repeat-y { background-repeat: repeat-y !important; }
.bg-repeat-round { background-repeat: round !important; }
.bg-repeat-space { background-repeat: space !important; }

.bg-auto { background-size: auto !important; }
.bg-cover { background-size: cover !important; }
.bg-contain { background-size: contain !important; }

.bg-center { background-position: center !important; }
.bg-top { background-position: top !important; }
.bg-right-top { background-position: right top !important; }
.bg-right { background-position: right !important; }
.bg-right-bottom { background-position: right bottom !important; }
.bg-bottom { background-position: bottom !important; }
.bg-left-bottom { background-position: left bottom !important; }
.bg-left { background-position: left !important; }
.bg-left-top { background-position: left top !important; }

/* Enhanced Gradient Utilities */
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--bs-gradient-stops)) !important; }
.bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--bs-gradient-stops)) !important; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--bs-gradient-stops)) !important; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--bs-gradient-stops)) !important; }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--bs-gradient-stops)) !important; }
.bg-gradient-to-bl { background-image: linear-gradient(to bottom left, var(--bs-gradient-stops)) !important; }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--bs-gradient-stops)) !important; }
.bg-gradient-to-tl { background-image: linear-gradient(to top left, var(--bs-gradient-stops)) !important; }

/* Gradient Color Stops */
.from-inherit { --bs-gradient-from: inherit !important; --bs-gradient-to: rgb(255 255 255 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), var(--bs-gradient-to) !important; }
.from-current { --bs-gradient-from: currentColor !important; --bs-gradient-to: rgb(255 255 255 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), var(--bs-gradient-to) !important; }
.from-transparent { --bs-gradient-from: transparent !important; --bs-gradient-to: rgb(0 0 0 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), var(--bs-gradient-to) !important; }
.from-black { --bs-gradient-from: #000 !important; --bs-gradient-to: rgb(0 0 0 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), var(--bs-gradient-to) !important; }
.from-white { --bs-gradient-from: #fff !important; --bs-gradient-to: rgb(255 255 255 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), var(--bs-gradient-to) !important; }

.to-inherit { --bs-gradient-to: inherit !important; }
.to-current { --bs-gradient-to: currentColor !important; }
.to-transparent { --bs-gradient-to: transparent !important; }
.to-black { --bs-gradient-to: #000 !important; }
.to-white { --bs-gradient-to: #fff !important; }

.via-inherit { --bs-gradient-to: rgb(255 255 255 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), inherit, var(--bs-gradient-to) !important; }
.via-current { --bs-gradient-to: rgb(255 255 255 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), currentColor, var(--bs-gradient-to) !important; }
.via-transparent { --bs-gradient-to: rgb(0 0 0 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), transparent, var(--bs-gradient-to) !important; }
.via-black { --bs-gradient-to: rgb(0 0 0 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), #000, var(--bs-gradient-to) !important; }
.via-white { --bs-gradient-to: rgb(255 255 255 / 0) !important; --bs-gradient-stops: var(--bs-gradient-from), #fff, var(--bs-gradient-to) !important; }

/* Enhanced Fill and Stroke */
.fill-none { fill: none !important; }
.fill-current { fill: currentColor !important; }
.fill-transparent { fill: transparent !important; }
.fill-black { fill: #000 !important; }
.fill-white { fill: #fff !important; }

.stroke-none { stroke: none !important; }
.stroke-current { stroke: currentColor !important; }
.stroke-transparent { stroke: transparent !important; }
.stroke-black { stroke: #000 !important; }
.stroke-white { stroke: #fff !important; }

.stroke-0 { stroke-width: 0 !important; }
.stroke-1 { stroke-width: 1 !important; }
.stroke-2 { stroke-width: 2 !important; }

/* ===== ENHANCED ACCESSIBILITY ===== */

/* Focus Visible */
.focus-visible-ring:focus-visible {
  outline: 2px solid var(--bs-theme-ring) !important;
  outline-offset: 2px !important;
}

.focus-visible-ring-0:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.focus-visible-ring-primary:focus-visible {
  outline: 2px solid var(--bs-theme-primary) !important;
  outline-offset: 2px !important;
}

.focus-visible-ring-inset:focus-visible {
  outline: 2px solid var(--bs-theme-ring) !important;
  outline-offset: -2px !important;
}

/* Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .motion-reduce-transform-none { transform: none !important; }
  .motion-reduce-transition-none { transition: none !important; }
  .motion-reduce-animate-none { animation: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe-transform { transform: var(--bs-transform) !important; }
  .motion-safe-transition { transition: var(--bs-transition) !important; }
  .motion-safe-animate { animation: var(--bs-animation) !important; }
}

/* Color Scheme Preferences */
@media (prefers-color-scheme: dark) {
  .dark-auto {
    color-scheme: dark;
  }
}

@media (prefers-color-scheme: light) {
  .light-auto {
    color-scheme: light;
  }
}

/* Print Styles */
@media print {
  .print-none { display: none !important; }
  .print-block { display: block !important; }
  .print-inline-block { display: inline-block !important; }
  .print-inline { display: inline !important; }
  .print-flex { display: flex !important; }
  .print-inline-flex { display: inline-flex !important; }
  .print-table { display: table !important; }
  .print-grid { display: grid !important; }
  .print-hidden { display: none !important; }
}

/* ===== ENHANCED FORMS (FINAL) ===== */

/* Form Check Enhancements */
.form-check-reverse .form-check-input {
  margin-right: -1.5em;
  margin-left: 0;
}

.form-check-reverse .form-check-label {
  padding-right: 1.5em;
  padding-left: 0;
}

/* Form Switch Enhancements */
.form-switch-lg {
  padding-left: 4rem;
}

.form-switch-lg .form-check-input {
  width: 3rem;
  height: 1.5rem;
  margin-left: -4rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2855, 65, 81, 1%29'/%3e%3c/svg%3e");
  background-size: contain;
  border-radius: 3rem;
}

.form-switch-lg .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
}

.form-switch-sm {
  padding-left: 2rem;
}

.form-switch-sm .form-check-input {
  width: 1.5rem;
  height: 0.75rem;
  margin-left: -2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='rgba%2855, 65, 81, 1%29'/%3e%3c/svg%3e");
  background-size: contain;
  border-radius: 1.5rem;
}

.form-switch-sm .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
}

/* ===== FINAL RESPONSIVE HELPERS ===== */

/* Container Query Support */
@supports (container-type: inline-size) {
  .container-query {
    container-type: inline-size;
  }

  .container-query-size {
    container-type: size;
  }

  .container-query-normal {
    container-type: normal;
  }
}

/* ===== EXAMPLES AND USAGE PATTERNS ===== */

/*
USAGE EXAMPLES:

<!-- Enhanced Form -->
<div class="mb-3">
  <label for="email" class="form-label fw-medium">Email</label>
  <div class="position-relative">
    <input type="email" class="form-control form-control-theme form-control-lg ps-10" id="email" placeholder="Enter your email">
    <i class="form-icon form-icon-start bi bi-envelope"></i>
  </div>
</div>

<!-- Enhanced Card with Effects -->
<div class="card card-theme card-elevated hover-lift transition-all duration-200">
  <div class="card-body">
    <h5 class="card-title text-theme-primary fw-semibold">Enhanced Card</h5>
    <p class="card-text text-theme-muted line-clamp-2">This card has enhanced styling with hover effects.</p>
    <button class="btn btn-theme hover-scale-105 transition-transform">Action</button>
  </div>
</div>

<!-- Enhanced Grid Layout -->
<div class="d-grid grid-cols-1 grid-cols-md-2 grid-cols-lg-3 gap-4 gap-lg-6">
  <div class="bg-theme-card p-4 rounded-lg shadow-sm">Item 1</div>
  <div class="bg-theme-card p-4 rounded-lg shadow-sm">Item 2</div>
  <div class="bg-theme-card p-4 rounded-lg shadow-sm">Item 3</div>
</div>

<!-- Enhanced Typography -->
<h1 class="fs-4xl fw-bold text-theme-primary tracking-tight leading-tight">
  Modern Heading
</h1>
<p class="fs-lg text-theme-muted leading-relaxed line-clamp-3">
  Enhanced paragraph with custom line height and text clamping.
</p>

<!-- Enhanced Button with States -->
<button class="btn btn-theme hover-bg-primary hover-scale-105 focus-ring-primary transition-all duration-200 active-scale-95">
  Interactive Button
</button>

<!-- Theme Switching -->
<div data-bs-theme="dark" class="theme-blue">
  <div class="bg-theme-background text-theme-foreground p-4 rounded-lg">
    Dark theme with blue accent
  </div>
</div>
*/

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== THEME VARIANTS ===== */

/* Blue Theme */
.theme-blue {
  --bs-theme-primary: var(--bs-blue-600);
  --bs-theme-primary-foreground: var(--bs-blue-50);
  --bs-theme-ring: var(--bs-blue-400);
}

[data-bs-theme="dark"] .theme-blue {
  --bs-theme-primary: var(--bs-blue-500);
  --bs-theme-ring: var(--bs-blue-900);
}

/* Green Theme */
.theme-green {
  --bs-theme-primary: var(--bs-green-600);
  --bs-theme-primary-foreground: var(--bs-green-50);
  --bs-theme-ring: var(--bs-green-400);
}

[data-bs-theme="dark"] .theme-green {
  --bs-theme-primary: var(--bs-green-500);
  --bs-theme-ring: var(--bs-green-900);
}

/* Red Theme */
.theme-red {
  --bs-theme-primary: var(--bs-red-600);
  --bs-theme-primary-foreground: var(--bs-red-50);
  --bs-theme-ring: var(--bs-red-400);
}

[data-bs-theme="dark"] .theme-red {
  --bs-theme-primary: var(--bs-red-500);
  --bs-theme-ring: var(--bs-red-900);
}

/* Purple Theme */
.theme-purple {
  --bs-theme-primary: var(--bs-purple-600);
  --bs-theme-primary-foreground: var(--bs-purple-50);
  --bs-theme-ring: var(--bs-purple-400);
}

[data-bs-theme="dark"] .theme-purple {
  --bs-theme-primary: var(--bs-purple-500);
  --bs-theme-ring: var(--bs-purple-900);
}