/* Custom CSS start Here */
.datepicker, .monthpicker, .yearpicker, .kt-datepicker {
    background: #ffffff;
    cursor: pointer;
}

.datepicker:disabled,
.monthpicker:disabled,
.yearpicker:disabled,
.kt-datepicker:disabled {
    cursor: not-allowed !important;
    background: #f5f5f5;
    pointer-events: none;
    user-select: none;
}

/* Define CSS Custom Properties (CSS Variables) for your color system */
:root {
    --tw-red-50: oklch(0.971 0.013 17.38);
    --tw-red-100: oklch(0.936 0.032 17.717);
    --tw-red-200: oklch(0.885 0.062 18.334);
    --tw-red-300: oklch(0.808 0.114 19.571);
    --tw-red-400: oklch(0.704 0.191 22.216);
    --tw-red-500: oklch(0.637 0.237 25.331);
    --tw-red-600: oklch(0.577 0.245 27.325);
    --tw-red-700: oklch(0.505 0.213 27.518);
    --tw-red-800: oklch(0.444 0.177 26.899);
    --tw-red-900: oklch(0.396 0.141 25.723);
    --tw-red-950: oklch(0.258 0.092 26.042);
    --tw-orange-50: oklch(0.98 0.016 73.684);
    --tw-orange-100: oklch(0.954 0.038 75.164);
    --tw-orange-200: oklch(0.901 0.076 70.697);
    --tw-orange-300: oklch(0.837 0.128 66.29);
    --tw-orange-400: oklch(0.75 0.183 55.934);
    --tw-orange-500: oklch(0.705 0.213 47.604);
    --tw-orange-600: oklch(0.646 0.222 41.116);
    --tw-orange-700: oklch(0.553 0.195 38.402);
    --tw-orange-800: oklch(0.47 0.157 37.304);
    --tw-orange-900: oklch(0.408 0.123 38.172);
    --tw-orange-950: oklch(0.266 0.079 36.259);
    --tw-amber-50: oklch(0.987 0.022 95.277);
    --tw-amber-100: oklch(0.962 0.059 95.617);
    --tw-amber-200: oklch(0.924 0.12 95.746);
    --tw-amber-300: oklch(0.879 0.169 91.605);
    --tw-amber-400: oklch(0.828 0.189 84.429);
    --tw-amber-500: oklch(0.769 0.188 70.08);
    --tw-amber-600: oklch(0.666 0.179 58.318);
    --tw-amber-700: oklch(0.555 0.163 48.998);
    --tw-amber-800: oklch(0.473 0.137 46.201);
    --tw-amber-900: oklch(0.414 0.112 45.904);
    --tw-amber-950: oklch(0.279 0.077 45.635);
    --tw-yellow-50: oklch(0.987 0.026 102.212);
    --tw-yellow-100: oklch(0.973 0.071 103.193);
    --tw-yellow-200: oklch(0.945 0.129 101.54);
    --tw-yellow-300: oklch(0.905 0.182 98.111);
    --tw-yellow-400: oklch(0.852 0.199 91.936);
    --tw-yellow-500: oklch(0.795 0.184 86.047);
    --tw-yellow-600: oklch(0.681 0.162 75.834);
    --tw-yellow-700: oklch(0.554 0.135 66.442);
    --tw-yellow-800: oklch(0.476 0.114 61.907);
    --tw-yellow-900: oklch(0.421 0.095 57.708);
    --tw-yellow-950: oklch(0.286 0.066 53.813);
    --tw-lime-50: oklch(0.986 0.031 120.757);
    --tw-lime-100: oklch(0.967 0.067 122.328);
    --tw-lime-200: oklch(0.938 0.127 124.321);
    --tw-lime-300: oklch(0.897 0.196 126.665);
    --tw-lime-400: oklch(0.841 0.238 128.85);
    --tw-lime-500: oklch(0.768 0.233 130.85);
    --tw-lime-600: oklch(0.648 0.2 131.684);
    --tw-lime-700: oklch(0.532 0.157 131.589);
    --tw-lime-800: oklch(0.453 0.124 130.933);
    --tw-lime-900: oklch(0.405 0.101 131.063);
    --tw-lime-950: oklch(0.274 0.072 132.109);
    --tw-green-50: oklch(0.982 0.018 155.826);
    --tw-green-100: oklch(0.962 0.044 156.743);
    --tw-green-200: oklch(0.925 0.084 155.995);
    --tw-green-300: oklch(0.871 0.15 154.449);
    --tw-green-400: oklch(0.792 0.209 151.711);
    --tw-green-500: oklch(0.723 0.219 149.579);
    --tw-green-600: oklch(0.627 0.194 149.214);
    --tw-green-700: oklch(0.527 0.154 150.069);
    --tw-green-800: oklch(0.448 0.119 151.328);
    --tw-green-900: oklch(0.393 0.095 152.535);
    --tw-green-950: oklch(0.266 0.065 152.934);
    --tw-emerald-50: oklch(0.979 0.021 166.113);
    --tw-emerald-100: oklch(0.95 0.052 163.051);
    --tw-emerald-200: oklch(0.905 0.093 164.15);
    --tw-emerald-300: oklch(0.845 0.143 164.978);
    --tw-emerald-400: oklch(0.765 0.177 163.223);
    --tw-emerald-500: oklch(0.696 0.17 162.48);
    --tw-emerald-600: oklch(0.596 0.145 163.225);
    --tw-emerald-700: oklch(0.508 0.118 165.612);
    --tw-emerald-800: oklch(0.432 0.095 166.913);
    --tw-emerald-900: oklch(0.378 0.077 168.94);
    --tw-emerald-950: oklch(0.262 0.051 172.552);
    --tw-teal-50: oklch(0.984 0.014 180.72);
    --tw-teal-100: oklch(0.953 0.051 180.801);
    --tw-teal-200: oklch(0.91 0.096 180.426);
    --tw-teal-300: oklch(0.855 0.138 181.071);
    --tw-teal-400: oklch(0.777 0.152 181.912);
    --tw-teal-500: oklch(0.704 0.14 182.503);
    --tw-teal-600: oklch(0.6 0.118 184.704);
    --tw-teal-700: oklch(0.511 0.096 186.391);
    --tw-teal-800: oklch(0.437 0.078 188.216);
    --tw-teal-900: oklch(0.386 0.063 188.416);
    --tw-teal-950: oklch(0.277 0.046 192.524);
    --tw-cyan-50: oklch(0.984 0.019 200.873);
    --tw-cyan-100: oklch(0.956 0.045 203.388);
    --tw-cyan-200: oklch(0.917 0.08 205.041);
    --tw-cyan-300: oklch(0.865 0.127 207.078);
    --tw-cyan-400: oklch(0.789 0.154 211.53);
    --tw-cyan-500: oklch(0.715 0.143 215.221);
    --tw-cyan-600: oklch(0.609 0.126 221.723);
    --tw-cyan-700: oklch(0.52 0.105 223.128);
    --tw-cyan-800: oklch(0.45 0.085 224.283);
    --tw-cyan-900: oklch(0.398 0.07 227.392);
    --tw-cyan-950: oklch(0.302 0.056 229.695);
    --tw-sky-50: oklch(0.977 0.013 236.62);
    --tw-sky-100: oklch(0.951 0.026 236.824);
    --tw-sky-200: oklch(0.901 0.058 230.902);
    --tw-sky-300: oklch(0.828 0.111 230.318);
    --tw-sky-400: oklch(0.746 0.16 232.661);
    --tw-sky-500: oklch(0.685 0.169 237.323);
    --tw-sky-600: oklch(0.588 0.158 241.966);
    --tw-sky-700: oklch(0.5 0.134 242.749);
    --tw-sky-800: oklch(0.443 0.11 240.79);
    --tw-sky-900: oklch(0.391 0.09 240.876);
    --tw-sky-950: oklch(0.293 0.066 243.157);
    --tw-blue-50: oklch(0.97 0.014 254.604);
    --tw-blue-100: oklch(0.932 0.032 255.585);
    --tw-blue-200: oklch(0.882 0.059 254.128);
    --tw-blue-300: oklch(0.809 0.105 251.813);
    --tw-blue-400: oklch(0.707 0.165 254.624);
    --tw-blue-500: oklch(0.623 0.214 259.815);
    --tw-blue-600: oklch(0.546 0.245 262.881);
    --tw-blue-700: oklch(0.488 0.243 264.376);
    --tw-blue-800: oklch(0.424 0.199 265.638);
    --tw-blue-900: oklch(0.379 0.146 265.522);
    --tw-blue-950: oklch(0.282 0.091 267.935);
    --tw-indigo-50: oklch(0.962 0.018 272.314);
    --tw-indigo-100: oklch(0.93 0.034 272.788);
    --tw-indigo-200: oklch(0.87 0.065 274.039);
    --tw-indigo-300: oklch(0.785 0.115 274.713);
    --tw-indigo-400: oklch(0.673 0.182 276.935);
    --tw-indigo-500: oklch(0.585 0.233 277.117);
    --tw-indigo-600: oklch(0.511 0.262 276.966);
    --tw-indigo-700: oklch(0.457 0.24 277.023);
    --tw-indigo-800: oklch(0.398 0.195 277.366);
    --tw-indigo-900: oklch(0.359 0.144 278.697);
    --tw-indigo-950: oklch(0.257 0.09 281.288);
    --tw-violet-50: oklch(0.969 0.016 293.756);
    --tw-violet-100: oklch(0.943 0.029 294.588);
    --tw-violet-200: oklch(0.894 0.057 293.283);
    --tw-violet-300: oklch(0.811 0.111 293.571);
    --tw-violet-400: oklch(0.702 0.183 293.541);
    --tw-violet-500: oklch(0.606 0.25 292.717);
    --tw-violet-600: oklch(0.541 0.281 293.009);
    --tw-violet-700: oklch(0.491 0.27 292.581);
    --tw-violet-800: oklch(0.432 0.232 292.759);
    --tw-violet-900: oklch(0.38 0.189 293.745);
    --tw-violet-950: oklch(0.283 0.141 291.089);
    --tw-purple-50: oklch(0.977 0.014 308.299);
    --tw-purple-100: oklch(0.946 0.033 307.174);
    --tw-purple-200: oklch(0.902 0.063 306.703);
    --tw-purple-300: oklch(0.827 0.119 306.383);
    --tw-purple-400: oklch(0.714 0.203 305.504);
    --tw-purple-500: oklch(0.627 0.265 303.9);
    --tw-purple-600: oklch(0.558 0.288 302.321);
    --tw-purple-700: oklch(0.496 0.265 301.924);
    --tw-purple-800: oklch(0.438 0.218 303.724);
    --tw-purple-900: oklch(0.381 0.176 304.987);
    --tw-purple-950: oklch(0.291 0.149 302.717);
    --tw-fuchsia-50: oklch(0.977 0.017 320.058);
    --tw-fuchsia-100: oklch(0.952 0.037 318.852);
    --tw-fuchsia-200: oklch(0.903 0.076 319.62);
    --tw-fuchsia-300: oklch(0.833 0.145 321.434);
    --tw-fuchsia-400: oklch(0.74 0.238 322.16);
    --tw-fuchsia-500: oklch(0.667 0.295 322.15);
    --tw-fuchsia-600: oklch(0.591 0.293 322.896);
    --tw-fuchsia-700: oklch(0.518 0.253 323.949);
    --tw-fuchsia-800: oklch(0.452 0.211 324.591);
    --tw-fuchsia-900: oklch(0.401 0.17 325.612);
    --tw-fuchsia-950: oklch(0.293 0.136 325.661);
    --tw-pink-50: oklch(0.971 0.014 343.198);
    --tw-pink-100: oklch(0.948 0.028 342.258);
    --tw-pink-200: oklch(0.899 0.061 343.231);
    --tw-pink-300: oklch(0.823 0.12 346.018);
    --tw-pink-400: oklch(0.718 0.202 349.761);
    --tw-pink-500: oklch(0.656 0.241 354.308);
    --tw-pink-600: oklch(0.592 0.249 0.584);
    --tw-pink-700: oklch(0.525 0.223 3.958);
    --tw-pink-800: oklch(0.459 0.187 3.815);
    --tw-pink-900: oklch(0.408 0.153 2.432);
    --tw-pink-950: oklch(0.284 0.109 3.907);
    --tw-rose-50: oklch(0.969 0.015 12.422);
    --tw-rose-100: oklch(0.941 0.03 12.58);
    --tw-rose-200: oklch(0.892 0.058 10.001);
    --tw-rose-300: oklch(0.81 0.117 11.638);
    --tw-rose-400: oklch(0.712 0.194 13.428);
    --tw-rose-500: oklch(0.645 0.246 16.439);
    --tw-rose-600: oklch(0.586 0.253 17.585);
    --tw-rose-700: oklch(0.514 0.222 16.935);
    --tw-rose-800: oklch(0.455 0.188 13.697);
    --tw-rose-900: oklch(0.41 0.159 10.272);
    --tw-rose-950: oklch(0.271 0.105 12.094);
    --tw-slate-50: oklch(0.984 0.003 247.858);
    --tw-slate-100: oklch(0.968 0.007 247.896);
    --tw-slate-200: oklch(0.929 0.013 255.508);
    --tw-slate-300: oklch(0.869 0.022 252.894);
    --tw-slate-400: oklch(0.704 0.04 256.788);
    --tw-slate-500: oklch(0.554 0.046 257.417);
    --tw-slate-600: oklch(0.446 0.043 257.281);
    --tw-slate-700: oklch(0.372 0.044 257.287);
    --tw-slate-800: oklch(0.279 0.041 260.031);
    --tw-slate-900: oklch(0.208 0.042 265.755);
    --tw-slate-950: oklch(0.129 0.042 264.695);
    --tw-gray-50: oklch(0.985 0.002 247.839);
    --tw-gray-100: oklch(0.967 0.003 264.542);
    --tw-gray-200: oklch(0.928 0.006 264.531);
    --tw-gray-300: oklch(0.872 0.01 258.338);
    --tw-gray-400: oklch(0.707 0.022 261.325);
    --tw-gray-500: oklch(0.551 0.027 264.364);
    --tw-gray-600: oklch(0.446 0.03 256.802);
    --tw-gray-700: oklch(0.373 0.034 259.733);
    --tw-gray-800: oklch(0.278 0.033 256.848);
    --tw-gray-900: oklch(0.21 0.034 264.665);
    --tw-gray-950: oklch(0.13 0.028 261.692);
    --tw-zinc-50: oklch(0.985 0 0);
    --tw-zinc-100: oklch(0.967 0.001 286.375);
    --tw-zinc-200: oklch(0.92 0.004 286.32);
    --tw-zinc-300: oklch(0.871 0.006 286.286);
    --tw-zinc-400: oklch(0.705 0.015 286.067);
    --tw-zinc-500: oklch(0.552 0.016 285.938);
    --tw-zinc-600: oklch(0.442 0.017 285.786);
    --tw-zinc-700: oklch(0.37 0.013 285.805);
    --tw-zinc-800: oklch(0.274 0.006 286.033);
    --tw-zinc-900: oklch(0.21 0.006 285.885);
    --tw-zinc-950: oklch(0.141 0.005 285.823);
    --tw-neutral-50: oklch(0.985 0 0);
    --tw-neutral-100: oklch(0.97 0 0);
    --tw-neutral-200: oklch(0.922 0 0);
    --tw-neutral-300: oklch(0.87 0 0);
    --tw-neutral-400: oklch(0.708 0 0);
    --tw-neutral-500: oklch(0.556 0 0);
    --tw-neutral-600: oklch(0.439 0 0);
    --tw-neutral-700: oklch(0.371 0 0);
    --tw-neutral-800: oklch(0.269 0 0);
    --tw-neutral-900: oklch(0.205 0 0);
    --tw-neutral-950: oklch(0.145 0 0);
    --tw-stone-50: oklch(0.985 0.001 106.423);
    --tw-stone-100: oklch(0.97 0.001 106.424);
    --tw-stone-200: oklch(0.923 0.003 48.717);
    --tw-stone-300: oklch(0.869 0.005 56.366);
    --tw-stone-400: oklch(0.709 0.01 56.259);
    --tw-stone-500: oklch(0.553 0.013 58.071);
    --tw-stone-600: oklch(0.444 0.011 73.639);
    --tw-stone-700: oklch(0.374 0.01 67.558);
    --tw-stone-800: oklch(0.268 0.007 34.298);
    --tw-stone-900: oklch(0.216 0.006 56.043);
    --tw-stone-950: oklch(0.147 0.004 49.25);
    --tw-black: #000;
    --tw-white: #fff;

    /* Primary Colors - Tailwind Blue 500 */
    --color-primary: #3b82f6;
    --color-primary-light: #60a5fa;  /* blue-400 */
    --color-primary-dark: #2563eb;   /* blue-600 */
    --color-primary-rgb: 59, 130, 246;

    /* Info Colors - Electric Purple (Custom) */
    --color-info: #6200ee;
    --color-info-light: #7e3ff2;
    --color-info-dark: #4a00b4;
    --color-info-rgb: 98, 0, 238;

    /* Secondary Colors - Tailwind Zinc (Grey) */
    --color-secondary: #71717A; /* Zinc-500 */
    --color-secondary-light: #F4F4F5; /* Zinc-100 */
    --color-secondary-dark: #3F3F46; /* Zinc-700 */
    --color-secondary-rgb: 113, 113, 122; /* Zinc-500 RGB */

    /* Light Colors - Tailwind Cyan 500 */
    --color-light-blue: #06b6d4;
    --color-light-blue-light: #22d3ee;  /* cyan-400 */
    --color-light-blue-dark: #0891b2;   /* cyan-600 */
    --color-light-blue-rgb: 6, 182, 212;

    /* Success Colors - Tailwind Emerald 500 */
    --color-success: #10b981;
    --color-success-light: #34d399;  /* emerald-400 */
    --color-success-dark: #059669;   /* emerald-600 */
    --color-success-rgb: 16, 185, 129;

    /* Warning Colors - Golden Yellow (Custom) */
    --color-warning: #ffc53d;
    --color-warning-light: #ffd061;
    --color-warning-dark: #f9b71a;
    --color-warning-rgb: 255, 197, 61;

    /* Danger Colors - Tailwind Rose 500 */
    --color-danger: #f43f5e;
    --color-danger-light: #fb7185;  /* rose-400 */
    --color-danger-dark: #e11d48;   /* rose-600 */
    --color-danger-rgb: 244, 63, 94;

    /* Neutral Colors */
    --color-gray: #686b73;
    --color-gray-light: #9ca3af;
    --color-gray-dark: #4b5563;
    --color-gray-rgb: 107, 114, 128;

    /* Utility Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-dark: #1f2937;
    --color-light: #f9fafb;
}

/* ============= LAYER: COMPONENTS ============= */
@layer components {
    .glass-card {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 16px 32px 16px 32px;
        position: relative;
        overflow: hidden;
    }
}

/* ============= LAYER: UTILITIES ============= */
@layer utilities {
    .kt-toast {
        width: calc(var(--spacing) * 100);
        border-radius: 0.5rem;
        display: flex;
        padding: 0.25rem 1rem;
        align-items: center;
        gap: 0.75rem;
    }

    .kt-table-col-label {
        user-select: none;
    }

    .icon-2xs {
        width: 0.625rem;  /* 10px */
        height: 0.625rem;
    }

    .icon-xs {
        width: 0.75rem;   /* 12px */
        height: 0.75rem;
    }

    .icon-sm {
        width: 0.875rem;  /* 14px */
        height: 0.875rem;
    }

    .icon-base {
        width: 1rem;      /* 16px */
        height: 1rem;
    }

    .icon-md {
        width: 1.25rem;   /* 20px */
        height: 1.25rem;
    }

    .icon-lg {
        width: 1.5rem;    /* 24px */
        height: 1.5rem;
    }

    .icon-xl {
        width: 1.75rem;   /* 28px */
        height: 1.75rem;
    }

    .icon-2xl {
        width: 2rem;      /* 32px */
        height: 2rem;
    }

    .icon-3xl {
        width: 2.5rem;    /* 40px */
        height: 2.5rem;
    }

    .icon-4xl {
        width: 3rem;      /* 48px */
        height: 3rem;
    }

    .icon-5xl {
        width: 3.5rem;    /* 56px */
        height: 3.5rem;
    }

    .icon-6xl {
        width: 4rem;      /* 64px */
        height: 4rem;
    }

    /* ============= HEXAGON SHAPES ============= */
    .hexagon {
        position: relative;
        width: var(--hexagon-size, 100px);
        height: calc(var(--hexagon-size, 100px) * 1.09); /* Maintain aspect ratio 44:48 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hexagon::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--hexagon-bg-color, var(--color-light));
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z' fill='black'/%3E%3C/svg%3E");
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z' fill='black'/%3E%3C/svg%3E");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        z-index: 0;
    }

    .hexagon::after {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--hexagon-border-color, transparent);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        z-index: 1;
    }

    /* Hexagon Solid Variants */
    .hexagon-primary {
        --hexagon-bg-color: var(--color-primary);
        --hexagon-border-color: var(--color-primary-dark);
    }
    .hexagon-success {
        --hexagon-bg-color: var(--color-success);
        --hexagon-border-color: var(--color-success-dark);
    }
    .hexagon-warning {
        --hexagon-bg-color: var(--color-warning);
        --hexagon-border-color: var(--color-warning-dark);
    }
    .hexagon-danger {
        --hexagon-bg-color: var(--color-danger);
        --hexagon-border-color: var(--color-danger-dark);
    }
    .hexagon-info {
        --hexagon-bg-color: var(--color-info);
        --hexagon-border-color: var(--color-info-dark);
    }
    .hexagon-secondary {
        --hexagon-bg-color: var(--color-secondary);
        --hexagon-border-color: var(--color-secondary-dark);
    }
    .hexagon-mono {
        --hexagon-bg-color: var(--color-dark);
        --hexagon-border-color: var(--color-black);
    }

    /* Hexagon Light Variants */
    .hexagon-light-primary {
        --hexagon-bg-color: var(--tw-blue-200);
        --hexagon-border-color: var(--tw-blue-300);
    }
    .hexagon-light-success {
        --hexagon-bg-color: var(--tw-emerald-200);
        --hexagon-border-color: var(--tw-emerald-300);
    }
    .hexagon-light-warning {
        --hexagon-bg-color: var(--tw-yellow-200);
        --hexagon-border-color: var(--tw-yellow-300);
    }
    .hexagon-light-danger {
        --hexagon-bg-color: var(--tw-rose-200);
        --hexagon-border-color: var(--tw-rose-300);
    }
    .hexagon-light-info {
        --hexagon-bg-color: var(--tw-violet-200);
        --hexagon-border-color: var(--tw-violet-300);
    }
    .hexagon-light-secondary {
        --hexagon-bg-color: var(--tw-zinc-200);
        --hexagon-border-color: var(--tw-zinc-300);
    }

    /* Hexagon Outline Variants (transparent bg, colored border) */
    .hexagon-outline-primary {
        --hexagon-bg-color: transparent;
        --hexagon-border-color: var(--color-primary);
    }
    .hexagon-outline-success {
        --hexagon-bg-color: transparent;
        --hexagon-border-color: var(--color-success);
    }
    .hexagon-outline-warning {
        --hexagon-bg-color: transparent;
        --hexagon-border-color: var(--color-warning);
    }
    .hexagon-outline-danger {
        --hexagon-bg-color: transparent;
        --hexagon-border-color: var(--color-danger);
    }
    .hexagon-outline-info {
        --hexagon-bg-color: transparent;
        --hexagon-border-color: var(--color-info);
    }
    .hexagon-outline-secondary {
        --hexagon-bg-color: transparent;
        --hexagon-border-color: var(--color-secondary);
    }

    /* ============= SHAPE SIZES ============= */
    .shape-2xs { --hexagon-size: 24px; }
    .shape-xs { --hexagon-size: 32px; }
    .shape-sm { --hexagon-size: 48px; }
    .shape-md { --hexagon-size: 64px; }
    .shape-lg { --hexagon-size: 96px; }
    .shape-xl { --hexagon-size: 128px; }
}

/* ============= LAYER: OVERRIDES (KT UI Overrides) ============= */
@layer overrides {
    /* ============= INPUTS ============= */
    .kt-input-label {
        color: var(--tw-slate-800);
    }
    .kt-form-label {
        color: var(--tw-slate-800);
    }
    .kt-label {
        color: var(--tw-slate-800);
    }
    .kt-menu-title{
        color: var(--tw-slate-800);
    }

    /* ============= ALERTS ============= */

    .kt-alert-title {
        color: inherit;
    }

    /* Solid Appearances - White text except warning/secondary use dark */
    .kt-alert.kt-alert-solid.kt-alert-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    }
    .kt-alert.kt-alert-solid.kt-alert-success {
        background-color: var(--color-success);
        color: var(--color-white);
    }
    .kt-alert.kt-alert-solid.kt-alert-warning {
        background-color: var(--color-warning);
        color: var(--color-dark);
    }
    .kt-alert.kt-alert-solid.kt-alert-destructive {
        background-color: var(--color-danger);
        color: var(--color-white);
    }
    .kt-alert.kt-alert-solid.kt-alert-info {
        background-color: var(--color-info);
        color: var(--color-white);
    }
    .kt-alert.kt-alert-solid.kt-alert-mono {
        background-color: var(--color-dark);
        color: var(--color-white);
    }
    .kt-alert.kt-alert-solid.kt-alert-secondary {
        background-color: var(--color-secondary-light);
        color: var(--color-dark);
    }

    /* Outline Appearances - Text matches border color, secondary uses dark */
    .kt-alert.kt-alert-outline.kt-alert-primary {
        background-color: var(--color-white);
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
    }
    .kt-alert.kt-alert-outline.kt-alert-success {
        background-color: var(--color-white);
        border: 1px solid var(--color-success);
        color: var(--color-success);
    }
    .kt-alert.kt-alert-outline.kt-alert-warning {
        background-color: var(--color-white);
        border: 1px solid var(--color-warning);
        color: var(--color-warning-dark);
    }
    .kt-alert.kt-alert-outline.kt-alert-destructive {
        background-color: var(--color-white);
        border: 1px solid var(--color-danger);
        color: var(--color-danger);
    }
    .kt-alert.kt-alert-outline.kt-alert-info {
        background-color: var(--color-white);
        border: 1px solid var(--color-info);
        color: var(--color-info);
    }
    .kt-alert.kt-alert-outline.kt-alert-mono {
        background-color: var(--color-white);
        border: 1px solid var(--color-dark);
        color: var(--color-dark);
    }
    .kt-alert.kt-alert-outline.kt-alert-secondary {
        background-color: var(--color-white);
        border: 1px solid var(--tw-gray-200);
        color: var(--color-dark);
    }

    /* Light Appearances - Full opacity light bg, light border, dark text */
    .kt-alert.kt-alert-light.kt-alert-primary {
        background-color: var(--tw-blue-100);
        border: 1px solid var(--tw-blue-300);
        color: var(--color-dark);
    }
    .kt-alert.kt-alert-light.kt-alert-success {
        background-color: var(--tw-emerald-100);
        border: 1px solid var(--tw-emerald-300);
        color: var(--color-dark);
    }
    .kt-alert.kt-alert-light.kt-alert-warning {
        background-color: var(--tw-yellow-100);
        border: 1px solid var(--tw-yellow-300);
        color: var(--color-dark);
    }
    .kt-alert.kt-alert-light.kt-alert-destructive {
        background-color: var(--tw-rose-100);
        border: 1px solid var(--tw-rose-300);
        color: var(--color-dark);
    }
    .kt-alert.kt-alert-light.kt-alert-info {
        background-color: var(--tw-violet-100);
        border: 1px solid var(--tw-violet-300);
        color: var(--color-dark);
    }
    .kt-alert.kt-alert-light.kt-alert-mono {
        background-color: var(--tw-gray-300);
        border: 1px solid var(--tw-gray-400);
        color: var(--color-dark);
    }
    .kt-alert.kt-alert-light.kt-alert-secondary {
        background-color: var(--color-secondary-light);
        border: 1px solid var(--color-gray-light);
        color: var(--color-dark);
    }

    /* Progress bar colors */
    .kt-alert.kt-alert-solid .kt-toast-progress {
        background-color: rgba(255, 255, 255, 0.5);
    }

    .kt-alert-info {
        background-color: var(--color-primary);
        color: #ffffff;
    }
    .kt-alert.kt-alert-solid.kt-alert-warning .kt-toast-progress,
    .kt-alert.kt-alert-solid.kt-alert-secondary .kt-toast-progress {
        background-color: rgba(0, 0, 0, 0.3);
    }

    .kt-alert.kt-alert-outline.kt-alert-primary .kt-toast-progress { background-color: var(--color-primary); }
    .kt-alert.kt-alert-outline.kt-alert-success .kt-toast-progress { background-color: var(--color-success); }
    .kt-alert.kt-alert-outline.kt-alert-warning .kt-toast-progress { background-color: var(--color-warning); }
    .kt-alert.kt-alert-outline.kt-alert-destructive .kt-toast-progress { background-color: var(--color-danger); }
    .kt-alert.kt-alert-outline.kt-alert-info .kt-toast-progress { background-color: var(--color-info); }
    .kt-alert.kt-alert-outline.kt-alert-mono .kt-toast-progress { background-color: var(--color-dark); }
    .kt-alert.kt-alert-outline.kt-alert-secondary .kt-toast-progress { background-color: var(--color-gray); }

    .kt-alert.kt-alert-light.kt-alert-primary .kt-toast-progress { background-color: var(--color-primary); }
    .kt-alert.kt-alert-light.kt-alert-success .kt-toast-progress { background-color: var(--color-success); }
    .kt-alert.kt-alert-light.kt-alert-warning .kt-toast-progress { background-color: var(--color-warning); }
    .kt-alert.kt-alert-light.kt-alert-destructive .kt-toast-progress { background-color: var(--color-danger); }
    .kt-alert.kt-alert-light.kt-alert-info .kt-toast-progress { background-color: var(--color-info); }
    .kt-alert.kt-alert-light.kt-alert-mono .kt-toast-progress { background-color: var(--color-dark); }
    .kt-alert.kt-alert-light.kt-alert-secondary .kt-toast-progress { background-color: var(--color-gray); }

    .kt-tabs-nav {
        display: flex;
        gap: 0.5rem;
        border-bottom: 2px solid #e5e7eb;
        padding-bottom: 0;
    }

    .kt-tab {
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        font-size: 0.875rem;
        color: #6b7280;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .kt-tab:hover {
        color: var(--color-primary);
        background-color: #f3f4f6;
    }

    .kt-tab.kt-active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        font-weight: 600;
    }

    .kt-tabs-content {
        padding-top: 1rem;
    }

    .kt-tab-panel {
        display: none;
    }

    .kt-tab-panel.kt-active {
        display: block;
    }

    /* ============= STANDARD BUTTONS ============= */

    /* Primary Button - Blue */
    .btn.btn-primary,
    .btn-primary {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: #ffffff;
    }

    .btn.btn-primary:hover,
    .btn-primary:hover {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
    }

    .btn.btn-primary:active,
    .btn-primary:active,
    .btn.btn-primary.active,
    .btn-primary.active {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
    }

    .btn.btn-primary:focus,
    .btn-primary:focus,
    .btn.btn-primary:focus-visible,
    .btn-primary:focus-visible {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
    }

    /* Info Button - Electric Purple */
    .btn.btn-info,
    .btn-info {
        background-color: var(--color-info);
        border-color: var(--color-info);
        color: #ffffff;
    }

    .btn.btn-info:hover,
    .btn-info:hover {
        background-color: var(--color-info-dark);
        border-color: var(--color-info-dark);
    }

    .btn.btn-info:active,
    .btn-info:active,
    .btn.btn-info.active,
    .btn-info.active {
        background-color: var(--color-info-dark);
        border-color: var(--color-info-dark);
    }

    .btn.btn-info:focus,
    .btn-info:focus,
    .btn.btn-info:focus-visible,
    .btn-info:focus-visible {
        background-color: var(--color-info);
        border-color: var(--color-info);
        box-shadow: 0 0 0 0.25rem rgba(var(--color-info-rgb), 0.25);
    }

    /* Secondary Button - Grey */
    .btn.btn-secondary,
    .btn-secondary {
        background-color: var(--color-secondary);
        border-color: var(--color-secondary);
        color: #ffffff;
    }

    .btn.btn-secondary:hover,
    .btn-secondary:hover {
        background-color: var(--color-secondary-dark);
        border-color: var(--color-secondary-dark);
    }

    .btn.btn-secondary:active,
    .btn-secondary:active,
    .btn.btn-secondary.active,
    .btn-secondary.active {
        background-color: var(--color-secondary-dark);
        border-color: var(--color-secondary-dark);
    }

    .btn.btn-secondary:focus,
    .btn-secondary:focus,
    .btn.btn-secondary:focus-visible,
    .btn-secondary:focus-visible {
        background-color: var(--color-secondary);
        border-color: var(--color-secondary);
        box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary-rgb), 0.25);
    }

    /* Success Button - Emerald */
    .btn.btn-success,
    .btn-success {
        background-color: var(--color-success);
        border-color: var(--color-success);
        color: #ffffff;
    }

    .btn.btn-success:hover,
    .btn-success:hover {
        background-color: var(--color-success-dark);
        border-color: var(--color-success-dark);
    }

    .btn.btn-success:active,
    .btn-success:active,
    .btn.btn-success.active,
    .btn-success.active {
        background-color: var(--color-success-dark);
        border-color: var(--color-success-dark);
    }

    .btn.btn-success:focus,
    .btn-success:focus,
    .btn.btn-success:focus-visible,
    .btn-success:focus-visible {
        background-color: var(--color-success);
        border-color: var(--color-success);
        box-shadow: 0 0 0 0.25rem rgba(var(--color-success-rgb), 0.25);
    }

    /* Warning Button - Golden Yellow */
    .btn.btn-warning,
    .btn-warning {
        background-color: var(--color-warning);
        border-color: var(--color-warning);
        color: #000000; /* Dark text for better contrast */
    }

    .btn.btn-warning:hover,
    .btn-warning:hover {
        background-color: var(--color-warning-dark);
        border-color: var(--color-warning-dark);
        color: #000000;
    }

    .btn.btn-warning:active,
    .btn-warning:active,
    .btn.btn-warning.active,
    .btn-warning.active {
        background-color: var(--color-warning-dark);
        border-color: var(--color-warning-dark);
        color: #000000;
    }

    .btn.btn-warning:focus,
    .btn-warning:focus,
    .btn.btn-warning:focus-visible,
    .btn-warning:focus-visible {
        background-color: var(--color-warning);
        border-color: var(--color-warning);
        box-shadow: 0 0 0 0.25rem rgba(var(--color-warning-rgb), 0.25);
    }

    /* Danger Button - Rose */
    .btn.btn-danger,
    .btn-danger {
        background-color: var(--color-danger);
        border-color: var(--color-danger);
        color: #ffffff;
    }

    .btn.btn-danger:hover,
    .btn-danger:hover {
        background-color: var(--color-danger-dark);
        border-color: var(--color-danger-dark);
    }

    .btn.btn-danger:active,
    .btn-danger:active,
    .btn.btn-danger.active,
    .btn-danger.active {
        background-color: var(--color-danger-dark);
        border-color: var(--color-danger-dark);
    }

    .btn.btn-danger:focus,
    .btn-danger:focus,
    .btn.btn-danger:focus-visible,
    .btn-danger:focus-visible {
        background-color: var(--color-danger);
        border-color: var(--color-danger);
        box-shadow: 0 0 0 0.25rem rgba(var(--color-danger-rgb), 0.25);
    }

    /* ============= LIGHT VARIANTS (Soft Background) ============= */

    /* Light Primary */
    .btn.btn-light-primary,
    .btn-light-primary {
        background-color: rgba(var(--color-primary-rgb), 0.1);
        color: var(--color-primary);
        border: 1px solid rgba(var(--color-primary-rgb), 0.4);
    }

    .btn.btn-light-primary:hover,
    .btn-light-primary:hover {
        background-color: rgba(var(--color-primary-rgb), 0.2);
        color: var(--color-primary-dark);
    }

    .btn.btn-light-primary:focus,
    .btn-light-primary:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.1);
    }

    /* Light Info */
    .btn.btn-light-info,
    .btn-light-info {
        background-color: rgba(var(--color-info-rgb), 0.1);
        color: var(--color-info);
        border: 1px solid rgba(var(--color-info-rgb), 0.4);
    }

    .btn.btn-light-info:hover,
    .btn-light-info:hover {
        background-color: rgba(var(--color-info-rgb), 0.2);
        color: var(--color-info-dark);
    }

    .btn.btn-light-info:focus,
    .btn-light-info:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-info-rgb), 0.1);
    }

    /* Light Secondary */
    .btn.btn-light-secondary,
    .btn-light-secondary {
        background-color: rgba(var(--color-secondary-rgb), 0.1);
        color: var(--color-secondary);
        border: 1px solid rgba(var(--color-secondary-rgb), 0.4);
    }

    .btn.btn-light-secondary:hover,
    .btn-light-secondary:hover {
        background-color: rgba(var(--color-secondary-rgb), 0.2);
        color: var(--color-secondary-dark);
    }

    .btn.btn-light-secondary:focus,
    .btn-light-secondary:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary-rgb), 0.1);
    }

    /* Light Success */
    .btn.btn-light-success,
    .btn-light-success {
        background-color: rgba(var(--color-success-rgb), 0.1);
        color: var(--color-success);
        border: 1px solid rgba(var(--color-success-rgb), 0.4);
    }

    .btn.btn-light-success:hover,
    .btn-light-success:hover {
        background-color: rgba(var(--color-success-rgb), 0.2);
        color: var(--color-success-dark);
    }

    .btn.btn-light-success:focus,
    .btn-light-success:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-success-rgb), 0.1);
    }

    /* Light Warning */
    .btn.btn-light-warning,
    .btn-light-warning {
        background-color: rgba(var(--color-warning-rgb), 0.1);
        color: var(--color-warning);
        border: 1px solid rgba(var(--color-warning-rgb));
    }

    .btn.btn-light-warning:hover,
    .btn-light-warning:hover {
        background-color: rgba(var(--color-warning-rgb), 0.2);
        color: var(--color-warning-dark);
    }

    .btn.btn-light-warning:focus,
    .btn-light-warning:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-warning-rgb), 0.1);
    }

    /* Light Danger */
    .btn.btn-light-danger,
    .btn-light-danger {
        background-color: rgba(var(--color-danger-rgb), 0.1);
        color: var(--color-danger);
        border: 1px solid rgba(var(--color-danger-rgb), 0.4);
    }

    .btn.btn-light-danger:hover,
    .btn-light-danger:hover {
        background-color: rgba(var(--color-danger-rgb), 0.2);
        color: var(--color-danger-dark);
    }

    .btn.btn-light-danger:focus,
    .btn-light-danger:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-danger-rgb), 0.1);
    }

    /* ============= OUTLINE VARIANTS ============= */

    /* Outline Primary */
    .btn.btn-outline-primary,
    .btn-outline-primary {
        background-color: transparent;
        color: var(--color-primary);
        border: 1px solid rgba(var(--color-primary-rgb), 0.4);
    }

    .btn.btn-outline-primary:hover,
    .btn-outline-primary:hover {
        background-color: var(--color-primary);
        color: #ffffff;
        border-color: var(--color-primary);
    }

    .btn.btn-outline-primary:focus,
    .btn-outline-primary:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
    }

    /* Outline Info */
    .btn.btn-outline-info,
    .btn-outline-info {
        background-color: transparent;
        color: var(--color-info);
        border: 1px solid rgba(var(--color-info-rgb), 0.4);
    }

    .btn.btn-outline-info:hover,
    .btn-outline-info:hover {
        background-color: var(--color-info);
        color: #ffffff;
        border-color: var(--color-info);
    }

    .btn.btn-outline-info:focus,
    .btn-outline-info:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-info-rgb), 0.25);
    }

    /* Outline Secondary */
    .btn.btn-outline-secondary,
    .btn-outline-secondary {
        background-color: transparent;
        color: var(--color-secondary);
        border: 1px solid rgba(var(--color-secondary-rgb), 0.4);
    }

    .btn.btn-outline-secondary:hover,
    .btn-outline-secondary:hover {
        background-color: var(--color-secondary);
        color: #ffffff;
        border-color: var(--color-secondary);
    }

    .btn.btn-outline-secondary:focus,
    .btn-outline-secondary:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-secondary-rgb), 0.25);
    }

    /* Outline Success */
    .btn.btn-outline-success,
    .btn-outline-success {
        background-color: transparent;
        color: var(--color-success);
        border: 1px solid rgba(var(--color-success-rgb), 0.4);
    }

    .btn.btn-outline-success:hover,
    .btn-outline-success:hover {
        background-color: var(--color-success);
        color: #ffffff;
        border-color: var(--color-success);
    }

    .btn.btn-outline-success:focus,
    .btn-outline-success:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-success-rgb), 0.25);
    }

    /* Outline Warning */
    .btn.btn-outline-warning,
    .btn-outline-warning {
        background-color: transparent;
        color: var(--color-warning);
        border: 1px solid rgba(var(--color-warning-rgb));
    }

    .btn.btn-outline-warning:hover,
    .btn-outline-warning:hover {
        background-color: var(--color-warning);
        color: #000000;
        border-color: var(--color-warning);
    }

    .btn.btn-outline-warning:focus,
    .btn-outline-warning:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-warning-rgb), 0.25);
    }

    /* Outline Danger */
    .btn.btn-outline-danger,
    .btn-outline-danger {
        background-color: transparent;
        color: var(--color-danger);
        border: 1px solid rgba(var(--color-danger-rgb), 0.4);
    }

    .btn.btn-outline-danger:hover,
    .btn-outline-danger:hover {
        background-color: var(--color-danger);
        color: #ffffff;
        border-color: var(--color-danger);
    }

    .btn.btn-outline-danger:focus,
    .btn-outline-danger:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--color-danger-rgb), 0.25);
    }

    /* ============= BADGES WITH CUSTOM COLORS ============= */

    /* Override primary badge colors */
    .kt-badge-primary {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    /* Override secondary badge colors */
    .kt-badge-secondary {
        background-color: var(--color-secondary);
        color: var(--color-white);
    }

    /* Override success badge colors */
    .kt-badge-success {
        background-color: var(--color-success);
        color: var(--color-white);
    }

    /* Override warning badge colors */
    .kt-badge-warning {
        background-color: var(--color-warning);
        color: var(--color-black); /* Dark text for better contrast on yellow */
    }

    /* Override info badge colors */
    .kt-badge-info {
        background-color: var(--color-info);
        color: var(--color-white);
    }

    /* Override destructive/danger badge colors */
    .kt-badge-destructive {
        background-color: var(--color-danger);
        color: var(--color-white);
    }

    /* ============= BADGES WITH OUTLINE VARIANTS ============= */

    .kt-badge-outline {
        &.kt-badge-primary {
            border-color: rgba(var(--color-primary-rgb), 0.2);
            background-color: rgba(var(--color-primary-rgb), 0.05);
            color: var(--color-primary);

            &:is(.dark *) {
                border-color: var(--color-primary-dark);
                background-color: rgba(var(--color-primary-rgb), 0.15);
                color: var(--color-primary-light);
            }
        }

        &.kt-badge-secondary {
            border-color: rgba(var(--color-secondary-rgb), 0.2);
            background-color: rgba(var(--color-secondary-rgb), 0.05);
            color: var(--color-secondary);

            &:is(.dark *) {
                border-color: var(--color-secondary-dark);
                background-color: rgba(var(--color-secondary-rgb), 0.15);
                color: var(--color-secondary-light);
            }
        }

        &.kt-badge-success {
            border-color: rgba(var(--color-success-rgb), 0.2);
            background-color: rgba(var(--color-success-rgb), 0.05);
            color: var(--color-success);

            &:is(.dark *) {
                border-color: var(--color-success-dark);
                background-color: rgba(var(--color-success-rgb), 0.15);
                color: var(--color-success-light);
            }
        }

        &.kt-badge-warning {
            border-color: rgba(var(--color-warning-rgb), 0.5);
            background-color: rgba(var(--color-warning-rgb), 0.05);
            color: var(--color-warning-dark);

            &:is(.dark *) {
                border-color: var(--color-warning-dark);
                background-color: rgba(var(--color-warning-rgb), 0.15);
                color: var(--color-warning);
            }
        }

        &.kt-badge-info {
            border-color: rgba(var(--color-info-rgb), 0.2);
            background-color: rgba(var(--color-info-rgb), 0.05);
            color: var(--color-info);

            &:is(.dark *) {
                border-color: var(--color-info-dark);
                background-color: rgba(var(--color-info-rgb), 0.15);
                color: var(--color-info-light);
            }
        }

        &.kt-badge-destructive {
            border-color: rgba(var(--color-danger-rgb), 0.2);
            background-color: rgba(var(--color-danger-rgb), 0.05);
            color: var(--color-danger);

            &:is(.dark *) {
                border-color: var(--color-danger-dark);
                background-color: rgba(var(--color-danger-rgb), 0.15);
                color: var(--color-danger-light);
            }
        }
    }

    /* ============= BADGES WITH LIGHT VARIANTS ============= */

    .kt-badge-light {
        &.kt-badge-primary {
            background-color: rgba(var(--color-primary-rgb), 0.1);
            color: var(--color-primary);

            &:is(.dark *) {
                background-color: rgba(var(--color-primary-rgb), 0.2);
                color: var(--color-primary-light);
            }
        }

        &.kt-badge-secondary {
            background-color: rgba(var(--color-secondary-rgb), 0.1);
            color: var(--color-secondary);

            &:is(.dark *) {
                background-color: rgba(var(--color-secondary-rgb), 0.2);
                color: var(--color-secondary-light);
            }
        }

        &.kt-badge-success {
            background-color: rgba(var(--color-success-rgb), 0.1);
            color: var(--color-success);

            &:is(.dark *) {
                background-color: rgba(var(--color-success-rgb), 0.2);
                color: var(--color-success-light);
            }
        }

        &.kt-badge-warning {
            background-color: rgba(var(--color-warning-rgb), 0.1);
            color: var(--color-warning-dark);

            &:is(.dark *) {
                background-color: rgba(var(--color-warning-rgb), 0.2);
                color: var(--color-warning);
            }
        }

        &.kt-badge-info {
            background-color: rgba(var(--color-info-rgb), 0.1);
            color: var(--color-info);

            &:is(.dark *) {
                background-color: rgba(var(--color-info-rgb), 0.2);
                color: var(--color-info-light);
            }
        }

        &.kt-badge-destructive {
            background-color: rgba(var(--color-danger-rgb), 0.1);
            color: var(--color-danger);

            &:is(.dark *) {
                background-color: rgba(var(--color-danger-rgb), 0.2);
                color: var(--color-danger-light);
            }
        }
    }

    /* ============= BADGES WITH GHOST VARIANTS ============= */

    .kt-badge-ghost {
        /* Ensure transparent background takes precedence over color variants */

        &.kt-badge-primary {
            background-color: transparent;
            color: var(--color-primary);
        }

        &.kt-badge-secondary {
            background-color: transparent;
            color: var(--color-secondary);
        }

        &.kt-badge-success {
            background-color: transparent;
            color: var(--color-success);
        }

        &.kt-badge-warning {
            background-color: transparent;
            color: var(--color-warning);
        }

        &.kt-badge-info {
            background-color: transparent;
            color: var(--color-info);
        }

        &.kt-badge-destructive {
            background-color: transparent;
            color: var(--color-danger);
        }
    }

    /* ============= BADGES WITH FOCUS RING COLOR OVERRIDES ============= */

    .kt-badge:focus {
        &.kt-badge-primary {
            --tw-ring-color: var(--color-primary);
        }

        &.kt-badge-secondary {
            --tw-ring-color: var(--color-secondary);
        }

        &.kt-badge-success {
            --tw-ring-color: var(--color-success);
        }

        &.kt-badge-warning {
            --tw-ring-color: var(--color-warning);
        }

        &.kt-badge-info {
            --tw-ring-color: var(--color-info);
        }

        &.kt-badge-destructive {
            --tw-ring-color: var(--color-danger);
        }
    }
}