@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/Inter.var.woff2) format('woff2-variations');
  font-weight: 1 1000;
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/Gilroy/Gilroy-Regular.woff2) format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/Gilroy/Gilroy-Medium.woff2) format('woff2');
  font-weight: 500;
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/Gilroy/Gilroy-Semibold.woff2) format('woff2');
  font-weight: 600;
}

@layer base {
  :root {
    /* Base */
    --white: 100% 0 0;
    --black-800: 26% 0 0;
    /* #242424 */
    --black: 18.67% 0 0;
    /* #131313 */
    --black-950: 16.84% 0 0;
    /* #151515 */
    --transparent: 0 0 0 / 0;

    /* Primary */
    --primary-400: 62.51% 0.172 283.89;
    /* #8f87ff */
    --primary-500: 58.73% 0.23 279.66;
    /* #695EFF */
    --primary-600: 50% 0.192 279.97;
    /* #544BCC */
    --primary-650: 52.52% 0.272 280.57;
    /* #5C33FF */
    --primary-700: 45.57% 0.171 280.34;
    /* #4A42B2 */

    /* Gray - Tailwind CSS v4 OKLCH palette */
    --gray-50: 98.5% 0.002 247.839;
    --gray-100: 96.7% 0.003 264.542;
    --gray-200: 92.8% 0.006 264.531;
    --gray-300: 87.2% 0.01 258.338;
    --gray-400: 70.7% 0.022 261.325;
    --gray-500: 55.1% 0.027 264.364;
    --gray-600: 44.6% 0.03 256.802;
    --gray-700: 37.3% 0.034 259.733;
    --gray-800: 27.8% 0.033 256.848;
    --gray-900: 21% 0.034 264.665;
    --gray-950: 13% 0.028 261.692;

    /* Red */
    --red-500: 59.16% 0.218 0.58;
    --red-100: var(--red-500) / 10%;
    --red-200: var(--red-500) / 20%;
    --red-300: var(--red-500) / 30%;

    /* Green */
    --green-50: 96.3% 0.0173 168.27;
    --green-100: 92.4% 0.0346 168.27;
    --green-200: 84.9% 0.0692 168.27;
    --green-500: 78.02% 0.1534 168.27;
    --green-600: 64.33% 0.1128 171.09;

    /* Pink */
    --pink-500: 59.16% 0.218 0.58;
    --pink-600: 58.93% 0.2129 359.93;

    /* Yellow */
    --yellow-500: 80.13% 0.1458 73.41;

    /* Blue */
    --blue-500: 82.1% 0.099263 240.9782;
    --blue-600: 64.12% 0.0638 240.72;

    /* Purple */
    --purple-500: 52.06% 0.2042 305.37;

    /* Sizes */
    --size-00: 0.25rem;
    --size-0: 0.4rem;
    --size-1: 0.5rem;
    --size-2: 0.75rem;
    --size-3: 1rem;
    --size-4: 1.25rem;
    --size-5: 1.5rem;

    --size-content-1: 20ch;
    --size-content-2: 45ch;
    --size-content-3: 60ch;

    /* Border */
    --border-size-1: 1px;

    /* Default btn */
    --clr-btn-bg: var(--transparent);
    --clr-btn-bg-active: var(--gray-200);
    --clr-btn-bg-hover: var(--gray-100);
    --clr-btn-text: var(--black);
    --clr-btn-text-hover: var(--black);
    --clr-btn-border: var(--transparent);
    --clr-btn-border-hover: var(--transparent);

    /* Primary btn */
    --clr-primary-btn-bg: var(--primary-500);
    --clr-primary-btn-bg-active: var(--primary-700);
    --clr-primary-btn-bg-hover: var(--primary-600);
    --clr-primary-btn-text: var(--white);
    --clr-primary-btn-text-hover: var(--white);
    --clr-primary-btn-border: var(--primary-600);
    --clr-primary-btn-border-hover: var(--primary-600);

    /* Secondary btn */
    --clr-secondary-btn-bg: var(--white);
    --clr-secondary-btn-bg-active: var(--gray-300);
    --clr-secondary-btn-bg-hover: var(--gray-200);
    --clr-secondary-btn-text: var(--black);
    --clr-secondary-btn-text-hover: var(--black);
    --clr-secondary-btn-border: var(--gray-300);
    --clr-secondary-btn-border-hover: var(--gray-300);

    /* Danger btn */
    --clr-danger-btn-bg: var(--red-500) / 10%;
    --clr-danger-btn-bg-active: var(--red-500) / 30%;
    --clr-danger-btn-bg-hover: var(--red-500) / 20%;
    --clr-danger-btn-text: var(--red-500);
    --clr-danger-btn-text-hover: var(--red-500);
    --clr-danger-btn-border: var(--clr-danger-btn-bg);
    --clr-danger-btn-border-hover: var(--clr-danger-btn-bg);

    /* Primary outline btn */
    --clr-primary-outline-btn-text: var(--primary-500);
    --clr-primary-outline-btn-text-hover: var(--primary-500);
    --clr-primary-outline-btn-border: var(--primary-500);
    --clr-primary-outline-btn-border-hover: var(--primary-500);
    --clr-primary-outline-btn-bg-hover: var(--primary-500) / 5%;

    /* Sidebar btn */
    --clr-sidebar-btn-bg: var(--transparent);
    --clr-sidebar-btn-bg-active: var(--primary-500);
    --clr-sidebar-btn-bg-hover: var(--primary-500);
    --clr-sidebar-btn-text: var(--gray-400);
    --clr-sidebar-btn-text-hover: var(--white);
    --clr-sidebar-btn-border: var(--transparent);
    --clr-sidebar-btn-border-hover: var(--primary-500);

    /* Form control */
    --clr-form-control-bg: var(--transparent);
    --clr-form-control-bg-active: var(--transparent);
    --clr-form-control-placeholder: var(--gray-400);
    --clr-form-control-border: var(--gray-300);
    --clr-form-control-border-hover: var(--primary-500);
    --clr-form-control-text: var(--black);
    --clr-form-control-ring: var(--primary-650) / 20%;
    --clr-form-control-label: var(--gray-400);
    --form-control-border-size: var(--border-size-1);
    --form-control-size-x: calc(var(--size-2) - var(--form-control-border-size) * 2);
    --form-control-size-y: calc(var(--size-2) - var(--form-control-border-size) * 2);

    /* Surface */
    --clr-surface-50: var(--gray-50);
    --clr-surface-100: var(--gray-100);
    --clr-surface-200: var(--black);
    --clr-surface-300: var(--white);
    --clr-surface-400: var(--gray-200);
    --clr-surface-500: var(--gray-100);
    --clr-surface-600: var(--white);

    /* Text */
    --clr-text-100: var(--black);
    --clr-text-200: var(--gray-600);
    --clr-text-300: var(--gray-400);
    --clr-text-green: var(--green-500);
    --clr-text-pink: var(--pink-500);
    --clr-text-yellow: var(--yellow-500);
    --clr-text-blue: var(--blue-500);
    --clr-text-purple: var(--purple-500);

    /* Avatar */
    --clr-avatar-bg: var(--primary-500) / 15%;
    --clr-avatar-text: var(--primary-500);

    /* Border */
    --clr-border-primary: var(--gray-300);
    --clr-border-secondary: var(--gray-100);
    --clr-border-green: var(--green-500);
    --clr-border-pink: var(--pink-500);
    --clr-border-yellow: var(--yellow-500);
    --clr-border-blue: var(--blue-500);
    --clr-border-purple: var(--purple-500);

    /* Table */
    --table-radius: 0.5rem;

    /* Shadows */
    --shadow-100: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
    --shadow-200: 0px 8px 8px 0px rgba(0, 0, 0, 0.08);

    /* Theme switcher */
    --clr-theme-switcher-bg: var(--gray-100);
    --clr-theme-switcher-text: var(--black);

    --clr-success: var(--green-500);
    --clr-on-sucess: var(--white);

    /* Badges */
    --clr-badge-pink: var(--pink-500) / 8%;
    --clr-badge-yellow: var(--yellow-500) / 8%;
    --clr-badge-green: var(--green-500) / 8%;
    --clr-badge-blue: var(--blue-500) / 8%;
    --clr-badge-purple: var(--purple-500) / 8%;
    --clr-badge-gray: var(--gray-100);

    /* Easing */
    --ease-1: cubic-bezier(.25, 0, .5, 1);
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
    --ease-squish-2: var(--ease-elastic-in-out-2);
    --ease-squish-3: var(--ease-elastic-in-out-3);

    /* Animation */
    --animation-slide-in-up: slide-in-up 500ms var(--ease-3);
    --animation-slide-in-right: slide-in-right 500ms var(--ease-3);
    --animation-slide-in-left: slide-in-left 500ms var(--ease-3);
    --animation-slide-in-down: slide-in-down 500ms var(--ease-3);
    --animation-scale-down: scale-down 500ms var(--ease-3);
    --animation-slide-out-down: slide-out-down 500ms var(--ease-3);
    --animation-slide-out-right: slide-out-right 500ms var(--ease-3);
    --animation-slide-out-left: slide-out-left 500ms var(--ease-3);
  }

  *,
  ::before,
  ::after,
  ::backdrop {
    border-color: oklch(var(--clr-surface-400));
  }

  ::selection {
    background-color: oklch(var(--primary-600));
    color: oklch(var(--white));
  }

  html.dark {
    color-scheme: dark;
    /* Surface */
    --clr-surface-50: var(--black-950);
    --clr-surface-100: var(--black-950);
    --clr-surface-300: var(--black);
    --clr-surface-400: var(--black-950);
    --clr-surface-500: var(--black);
    --clr-surface-600: var(--black-950);

    /* Badges */
    --clr-badge-pink: var(--pink-600) / 8%;
    --clr-badge-green: var(--green-600) / 8%;
    --clr-badge-blue: var(--blue-600) / 8%;
    --clr-badge-gray: var(--gray-700);

    /* Text */
    --clr-text-100: var(--white);
    --clr-text-200: var(--gray-100);
    --clr-text-300: var(--gray-300);
    --clr-text-green: var(--green-600);
    --clr-text-pink: var(--pink-600);
    --clr-text-blue: var(--blue-600);

    /* Avatar */
    --clr-avatar-text: var(--primary-400);

    /* Border */
    --clr-border-primary: var(--black-800);
    --clr-border-secondary: var(--black-950);
    --clr-border-green: var(--green-600);
    --clr-border-pink: var(--pink-600);
    --clr-border-blue: var(--blue-600);

    /* Secondary btn */
    --clr-secondary-btn-bg: var(--black-950);
    --clr-secondary-btn-bg-active: var(--black);
    --clr-secondary-btn-bg-hover: var(--black);
    --clr-secondary-btn-text: var(--gray-100);
    --clr-secondary-btn-text-hover: var(--white);
    --clr-secondary-btn-border: var(--black-800);
    --clr-secondary-btn-border-hover: var(--black-950);

    /* Form control */
    --clr-form-control-bg: var(--black);
    --clr-form-control-bg-active: var(--black);
    --clr-form-control-placeholder: var(--gray-100);
    --clr-form-control-border: var(--black-800);
    --clr-form-control-border-hover: var(--primary-500);
    --clr-form-control-text: var(--white);
    --clr-form-control-ring: var(--primary-650);
    --clr-form-control-label: var(--white);
  }

  button {
    cursor: default;
  }

  button:disabled {
    opacity: 0.7;
    pointer-events: none;
  }

  details>summary {
    list-style: none;
  }

  details summary::-webkit-details-marker {
    display: none;
  }

  details summary::marker {
    display: none;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  form:invalid .btn:not(.btn-enabled) {
    --events: none;
    --opacity: 0.7;
  }
}

[x-cloak] {
  display: none !important;
}

@layer components {
  .form-control {
    --bg-color: var(--clr-form-control-bg);
    --bg-active: var(--clr-form-control-bg-active);
    --placeholder: var(--clr-form-control-placeholder);
    --text-color: var(--clr-form-control-text);
    --border-color: var(--clr-form-control-border);
    --border-hover: var(--clr-form-control-border-hover);
    --border-size: var(--form-control-border-size);
    --ring-color: var(--transparent);
    --ring-color-active: var(--clr-form-control-ring);
    --size-x: var(--form-control-size-x);
    --size-y: var(--form-control-size-y);
    --font-size: 0.875rem;
    --radius: 0.5rem;
    --opacity: 1;
    --events: all;
    pointer-events: var(--events);
    outline: none;
    background-color: oklch(var(--bg-color));
    box-shadow: 0 0 0 2px oklch(var(--ring-color));
    color: oklch(var(--text-color));
    font-size: var(--font-size);
    border-radius: var(--radius);
    opacity: var(--opacity);
    border: var(--border-size) solid oklch(var(--border-color));
    transition-duration: 200ms;
    font-weight: 500;
  }

  .form-control-input {
    padding: var(--size-y) var(--size-x);
    border-radius: var(--radius);
    background-color: oklch(var(--bg-color));
  }

  .form-control-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .form-control-label {
    color: var(--clr-form-control-label);
    font-size: 0.875rem;
  }

  .form-control-input::placeholder {
    color: oklch(var(--placeholder));
  }

  .form-control:hover {
    --border-color: var(--border-hover);
  }

  .form-control:focus-within {
    --border-color: var(--border-hover);
    --ring-color: var(--ring-color-active);
  }

  .btn {
    --text-color: var(--clr-btn-text);
    --loading-indicator-color: var(--clr-btn-text);
    --text-hover: var(--clr-btn-text-hover);
    --bg-color: var(--clr-btn-bg);
    --bg-active: var(--clr-btn-bg-active);
    --bg-hover: var(--clr-btn-bg-hover);
    --border-color: var(--clr-btn-border);
    --border-hover: var(--clr-btn-border-hover);
    --border-size: 1px;
    --size-x: calc(1rem - var(--border-size) * 2);
    --size-y: calc(0.75rem - var(--border-size) * 2);
    --font-size: 0.875rem;
    --radius: 0.5rem;
    --opacity: 1;
    --events: all;
    --user-select: auto;
    --height: 2.625rem;
    --width: auto;
    background-color: oklch(var(--bg-color));
    color: oklch(var(--text-color));
    padding: var(--size-y) var(--size-x);
    font-size: var(--font-size);
    border-radius: var(--radius);
    opacity: var(--opacity);
    border: var(--border-size) solid oklch(var(--border-color));
    transition-duration: 200ms;
    font-weight: 500;
    position: relative;
    display: inline-flex;
    align-items: center;
    outline-color: oklch(var(--bg-active));
    user-select: var(--user-select);
    height: var(--height);
    width: var(--width);
    cursor: pointer;
  }

  .btn:not(.btn-loading):not(.htmx-request):active,
  .btn:not(.btn-loading):not(.htmx-request).active {
    --bg-color: var(--bg-active);
    --text-color: var(--text-hover);
  }

  .btn:not(.btn-loading):not(.htmx-request):hover {
    --bg-color: var(--bg-hover);
    --text-color: var(--text-hover);
    --border-hover: var(--border-hover);
  }

  .btn-primary {
    --bg-color: var(--clr-primary-btn-bg);
    --bg-active: var(--clr-primary-btn-bg-active);
    --text-color: var(--clr-primary-btn-text);
    --border-color: var(--clr-primary-btn-border);
    --bg-hover: var(--clr-primary-btn-bg-hover);
    --text-hover: var(--clr-primary-btn-text-hover);
    --loading-indicator-color: var(--clr-primary-btn-text);
    --border-hover: var(--clr-primary-btn-border-hover);
  }

  .btn-secondary {
    --bg-color: var(--clr-secondary-btn-bg);
    --bg-active: var(--clr-secondary-btn-bg-active);
    --text-color: var(--clr-secondary-btn-text);
    --border-color: var(--clr-secondary-btn-border);
    --bg-hover: var(--clr-secondary-btn-bg-hover);
    --text-hover: var(--clr-secondary-btn-text-hover);
    --border-hover: var(--clr-secondary-btn-border-hover);
  }

  .btn-danger {
    --bg-color: var(--clr-danger-btn-bg);
    --bg-active: var(--clr-danger-btn-bg-active);
    --text-color: var(--clr-danger-btn-text);
    --loading-indicator-color: var(--clr-danger-btn-text);
    --border-color: var(--clr-danger-btn-border);
    --bg-hover: var(--clr-danger-btn-bg-hover);
    --text-hover: var(--clr-danger-btn-text-hover);
    --border-hover: var(--clr-danger-btn-border-hover);
  }

  .btn-primary-outline {
    --text-color: var(--clr-primary-outline-btn-text);
    --loading-indicator-color: var(--clr-primary-outline-btn-text);
    --border-color: var(--clr-primary-outline-btn-border);
    --text-hover: var(--clr-primary-outline-btn-text-hover);
    --border-hover: var(--clr-primary-outline-btn-border-hover);
    --bg-hover: var(--clr-primary-outline-btn-bg-hover);
  }

  .btn-sidebar {
    --bg-color: var(--clr-sidebar-btn-bg);
    --bg-active: var(--clr-sidebar-btn-bg-active);
    --text-color: var(--clr-sidebar-btn-text);
    --loading-indicator-color: var(--clr-sidebar-btn-text);
    --border-color: var(--clr-sidebar-btn-border);
    --bg-hover: var(--clr-sidebar-btn-bg-hover);
    --text-hover: var(--clr-sidebar-btn-text-hover);
    --border-hover: var(--clr-sidebar-btn-border-hover);
  }

  .btn-md {
    --height: 3rem;
    --size-x: 1rem;
    --size-y: calc(1rem - 3.5px);
  }

  .btn-sm {
    --height: 2.5rem;
    --size-x: 0.75rem;
    --size-y: calc(0.75rem - 3.5px);
  }

  .btn-xs {
    --height: 1.65rem;
    --size-x: 0.25rem;
    --size-y: 0.1rem;
  }

  .btn-fixed {
    --size-y: var(--size-x);
    --width: var(--height);
  }

  .btn-with-icon {
    gap: 0.5rem;
  }

  .btn-rounded {
    --radius: 9999px;
  }

  .btn-loading {
    --text-color: var(--transparent);
  }

  .btn-disabled {
    opacity: 0.7;
    pointer-events: none;
  }

  .htmx-request .btn,
  .htmx-request.btn {
    --text-color: var(--transparent);
    --user-select: none;
  }

  .btn-loading-indicator {
    --size: var(--size-0);
    --radius: 9999px;
    --display: none;
    --color: var(--loading-indicator-color);
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius);
    background-color: oklch(var(--color));
    color: oklch(var(--color));
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: 0.5s;
    display: var(--display);
    position: absolute;
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
  }

  .btn-loading-indicator::before,
  .btn-loading-indicator::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
  }

  .btn-loading-indicator::before {
    left: calc(-1 * var(--size) * 1.5);
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius);
    background-color: oklch(var(--color));
    color: oklch(var(--color));
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: 0s;
  }

  .btn-loading-indicator::after {
    left: calc(var(--size) * 1.5);
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius);
    background-color: oklch(var(--color));
    color: oklch(var(--color));
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: 1s;
  }

  .btn-loading .btn-loading-indicator,
  .htmx-request .btn-loading-indicator,
  .htmx-request.btn-loading-indicator {
    --display: block;
  }

  /*
   * Loading state (stale-while-revalidate): while an HTMX row/content swap is
   * in flight, dim the previous rows in place and show a centered spinner via
   * .table-loading-overlay, instead of hiding the rows and blanking the table
   * body. Custom class names are used deliberately: `.hidden` collides with
   * Tailwind's utility (which lives in @layer utilities and wins on layer
   * order regardless of specificity), so a `.htmx-request .hidden` reveal can
   * never take effect — see the dead rules below.
   */
  .htmx-request .hide-on-load {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  /* Fully self-contained styling (no utility classes) so the overlay renders
     correctly regardless of which template roots a consumer's Tailwind build
     scans for class generation. */
  .table-loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .htmx-request .table-loading-overlay {
    display: flex;
  }

  .table-loading-overlay__card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
    border-radius: 9999px;
    background-color: #fff;
    box-shadow:
      0 6px 18px rgba(2, 6, 23, 0.14),
      0 1px 3px rgba(2, 6, 23, 0.1);
  }

  .htmx-request.hide-on-load {
    display: revert;
  }

  .htmx-request .hidden {
    display: revert;
  }

  .htmx-request.hidden {
    display: revert;
  }

  .table {
    --radius: var(--table-radius);
    border-collapse: separate;
    border-spacing: 0;
  }

  .table tr:first-child th:first-child {
    border-top-left-radius: var(--radius);
  }

  .table tr:first-child th:last-child {
    border-top-right-radius: var(--radius);
  }

  .table tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius);
  }

  .table tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius);
  }

  .dialog {
    --bg-color: var(--clr-surface-300);
    --text-color: var(--clr-text-100);
    --radius: 0.5rem;
    display: grid;
    align-content: start;
    background-color: oklch(var(--bg-color));
    color: oklch(var(--text-color));
    max-inline-size: min(90vw, var(--size-content-3));
    margin: auto;
    padding: 0;
    position: fixed;
    inset: 0;
    overflow: hidden;
    transition: opacity 500ms var(--ease-3);
  }

  .dialog-rounded {
    border-radius: var(--radius);
  }

  .dialog-btt {
    animation: var(--animation-slide-out-down) forwards;
    animation-timing-function: var(--ease-squish-2);
  }

  .dialog-rtl {
    animation: var(--animation-slide-out-right) forwards;
    animation-timing-function: var(--ease-squish-2);
  }

  .dialog-ltr {
    animation: var(--animation-slide-out-left) forwards;
    animation-timing-function: var(--ease-squish-2);
  }

  .dialog-tbd {
    animation: var(--animation-slide-out-up) forwards;
    animation-timing-function: var(--ease-squish-2);
  }

  .dialog:not([open]) {
    pointer-events: none;
    opacity: 0;
  }

  .dialog-btt[open] {
    animation: var(--animation-slide-in-up);
  }

  .dialog-rtl[open] {
    animation: var(--animation-slide-in-right);
  }

  .dialog-ltr[open] {
    animation: var(--animation-slide-in-left);
  }

  .dialog-tbd[open] {
    animation: var(--animation-slide-in-down);
  }

  .dialog::backdrop {
    backdrop-filter: blur(8px);
    transition: backdrop-filter 500ms ease;
  }

  .tab-slider {
    @apply relative;
  }

  .tab-slider-inner {
    @apply mb-6 flex;
  }

  .tab-slider-track {
    @apply relative flex w-full items-center font-sans bg-slate-100 dark:bg-slate-700;
  }

  .tab-slider-item {
    @apply relative z-20 h-full flex flex-1 items-center justify-center text-sm font-sans;
  }

  .tab-slider-item:not(.tab-active) {
    @apply text-slate-400 dark:text-slate-400;
  }

  .tab-slider-item.tab-active {
    @apply text-white dark:text-white;
  }

  .tab-slider-naver {
    @apply absolute start-0 top-0 z-10 h-full bg-brand-500 dark:bg-brand-500 transition-all duration-300;
  }

  .tab-content {
    @apply relative block;
  }

  /* Alignment classes */
  .tabs-centered .tab-slider-inner {
    @apply justify-center;
  }

  .tabs-end .tab-slider-inner {
    @apply justify-end;
  }

  /* Rounded variants */
  .tabs-rounded .tab-slider-track,
  .tabs-rounded .tab-slider-naver {
    @apply rounded-md;
  }

  .tabs-smooth .tab-slider-track,
  .tabs-smooth .tab-slider-naver {
    @apply rounded-lg;
  }

  .tabs-curved .tab-slider-track,
  .tabs-curved .tab-slider-naver {
    @apply rounded-xl;
  }

  .tabs-full .tab-slider-track,
  .tabs-full .tab-slider-naver {
    @apply rounded-full;
  }

  /* Size: sm */
  .tabs-sm.tabs-two-slots .tab-slider-track {
    @apply max-w-[140px];
  }

  .tabs-sm.tabs-three-slots .tab-slider-track {
    @apply max-w-[210px];
  }

  .tabs-sm .tab-slider-track {
    @apply h-8;
  }

  /* Size: md */
  .tabs-md.tabs-two-slots .tab-slider-track {
    @apply max-w-[250px];
  }

  .tabs-md.tabs-three-slots .tab-slider-track {
    @apply max-w-[320px];
  }

  .tabs-md .tab-slider-track {
    @apply h-10;
  }

  /* Slot-based transitions */
  .tabs-two-slots .tab-slider-naver,
  .tabs-two-slots .tab-slider-item {
    @apply w-1/2;
  }

  .tabs-two-slots .tab-slider-item:first-child.tab-active~.tab-slider-naver {
    @apply ms-0;
  }

  .tabs-two-slots .tab-slider-item:nth-child(2).tab-active~.tab-slider-naver {
    @apply ms-[50%];
  }

  .tabs-three-slots .tab-slider-naver,
  .tabs-three-slots .tab-slider-item {
    @apply w-1/3;
  }

  .tabs-three-slots .tab-slider-item:first-child.tab-active~.tab-slider-naver {
    @apply ms-0;
  }

  .tabs-three-slots .tab-slider-item:nth-child(2).tab-active~.tab-slider-naver {
    @apply ms-[33.3%];
  }

  .tabs-three-slots .tab-slider-item:nth-child(3).tab-active~.tab-slider-naver {
    @apply ms-[66.6%];
  }

  .accent-color-card {
    --color: oklch(var(--primary-500));
  }

  /* Prevent Alpine.js transition flicker on initial load */
  [x-cloak] {
    display: none !important;
  }

  /* Prevent sidebar flicker during initial load */
  .sidebar-container:not([data-alpine-loaded]) {
    opacity: 0;
    transition: opacity 0.1s ease-in;
  }

  .sidebar-container[data-alpine-loaded] {
    opacity: 1;
  }

  /* Sidebar width styles */
  .sidebar-expanded {
    width: 280px;
  }

  /* Sidebar collapsed styles */
  .sidebar-collapsed {
    width: 4rem !important;
    min-height: 100vh !important;
  }

  .sidebar-collapsed .btn-sidebar {
    justify-content: center;
    min-width: 2.5rem;
    --text-color: var(--gray-100);
  }

  .sidebar-collapsed .btn-sidebar:hover {
    --text-color: var(--white);
    --bg-color: var(--clr-sidebar-btn-bg-hover);
  }

  /* Collapsed accordion group styling */
  .sidebar-collapsed .accordion-group-collapsed {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 2.5rem;
    height: 3rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
    color: oklch(var(--gray-100));
  }

  .sidebar-collapsed .accordion-group-collapsed:hover {
    background-color: oklch(var(--clr-sidebar-btn-bg-hover));
    color: oklch(var(--white));
  }

  /* Sidebar flyout dropdown (collapsed mode popover) */
  .sidebar-flyout {
    background-color: oklch(var(--clr-surface-200));
    border: 1px solid oklch(var(--white) / 8%);
    box-shadow: 0 8px 24px -4px oklch(var(--black) / 60%);
    color: oklch(var(--white));
  }

  .sidebar-flyout .btn-sidebar {
    --text-color: var(--gray-300);
  }

  .sidebar-flyout .btn-sidebar:not(.btn-loading):not(.htmx-request):hover {
    --bg-color: var(--clr-sidebar-btn-bg-hover);
    --text-color: var(--white);
  }

  .sidebar-flyout .btn-sidebar:not(.btn-loading):not(.htmx-request).active {
    --bg-color: var(--clr-sidebar-btn-bg-active);
    --text-color: var(--white);
  }

  /* Toggle button styling */
  .btn-ghost {
    --text-color: var(--gray-600);
  }

  .btn-ghost:hover {
    --text-color: var(--gray-400);
    --bg-color: var(--gray-200);
  }

  /* Toggle button in collapsed state */
  .sidebar-collapsed .btn-ghost {
    --text-color: var(--gray-600);
  }

  .sidebar-collapsed .btn-ghost:hover {
    --text-color: var(--gray-400);
    --bg-color: var(--gray-200);
  }

  /* Sidebar toggle button styling */
  .btn-sidebar-toggle {
    --text-color: var(--gray-600);
    --bg-color: var(--white);
    --border-color: var(--transparent);
  }

  .btn-sidebar-toggle:hover {
    --text-color: var(--gray-400);
    --bg-color: var(--gray-100);
  }

  /* Sidebar click-to-toggle cursor styles */
  .sidebar-expand-cursor {
    cursor: e-resize;
  }

  .sidebar-collapse-cursor {
    cursor: w-resize;
  }

  .sidebar-expand-cursor a,
  .sidebar-expand-cursor button,
  .sidebar-expand-cursor summary,
  .sidebar-expand-cursor [role="button"],
  .sidebar-collapse-cursor a,
  .sidebar-collapse-cursor button,
  .sidebar-collapse-cursor summary,
  .sidebar-collapse-cursor [role="button"] {
    cursor: pointer;
  }
}

@layer utilities {
  .hide-scrollbar {
    scrollbar-width: none;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-transition {
    transition: none !important;
  }

  /* Slider styles */
  .slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 1rem;
    position: relative;
    z-index: 10;
  }

  .slider-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: oklch(var(--primary-500));
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 20;
  }

  .slider-thumb::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: oklch(var(--primary-500));
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 20;
  }

  .slider-thumb:focus {
    outline: none;
  }

  .slider-thumb:disabled::-webkit-slider-thumb {
    background: oklch(var(--gray-400));
  }

  .slider-thumb:disabled::-moz-range-thumb {
    background: oklch(var(--gray-400));
  }
}

/* iOS Safari 100vh fix - use dynamic viewport height */
@supports (height: 100dvh) {
  .min-h-screen {
    min-height: 100dvh !important;
  }
  .h-screen {
    height: 100dvh !important;
  }
}

/* Keyframes */
@keyframes slide-in-right {
  from {
    transform: translateX(100%)
  }
}

@keyframes slide-out-right {
  to {
    transform: translateX(100%)
  }
}


@keyframes slide-in-left {
  from {
    transform: translateX(-100%)
  }
}

@keyframes slide-out-left {
  to {
    transform: translateX(-100%)
  }
}

@keyframes slide-in-up {
  from {
    transform: translateY(100%)
  }
}

@keyframes scale-down {
  to {
    transform: scale(.75)
  }
}

@keyframes slide-out-down {
  to {
    transform: translateY(100%)
  }
}

@keyframes slide-in-down {
  from {
    transform: translateY(-100%)
  }
}

@keyframes slide-out-up {
  to {
    transform: translateY(-100%)
  }
}

@keyframes dot-flashing {
  0% {
    background-color: oklch(var(--color));
  }

  50%,
  100% {
    background-color: oklch(var(--color) / 30%);
  }
}

/* Lazy loading component styles */
.lazy-load.htmx-settling * {
  opacity: 0;
}

.lazy-load * {
  transition: opacity 300ms ease-in;
}