@import "tailwindcss";
@import "./themes.css";
@import "./components/animation.css";
@import "./components/pace-loader.css";
@import "./components/v-tooltips.css";

@plugin "@tailwindcss/typography";
@plugin "tailwind-scrollbar";

@source "../scripts/**/*.vue";
@source "../scripts/**/*.js";
@source "../scripts-v2/**/*.vue";
@source "../scripts-v2/**/*.ts";
@source "../../resources/views/**/*.php";

@theme inline {
  --color-primary-50: var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  --color-primary-200: var(--color-primary-200);
  --color-primary-300: var(--color-primary-300);
  --color-primary-400: var(--color-primary-400);
  --color-primary-500: var(--color-primary-500);
  --color-primary-600: var(--color-primary-600);
  --color-primary-700: var(--color-primary-700);
  --color-primary-800: var(--color-primary-800);
  --color-primary-900: var(--color-primary-900);
  --color-primary-950: var(--color-primary-950);
  --color-black: #040405;

  /* Semantic theme tokens */
  --color-surface: var(--color-surface);
  --color-surface-secondary: var(--color-surface-secondary);
  --color-surface-tertiary: var(--color-surface-tertiary);
  --color-surface-muted: var(--color-surface-muted);
  --color-heading: var(--color-heading);
  --color-body: var(--color-body);
  --color-muted: var(--color-muted);
  --color-subtle: var(--color-subtle);
  --color-line-light: var(--color-line-light);
  --color-line-default: var(--color-line-default);
  --color-line-strong: var(--color-line-strong);
  --color-hover: var(--color-hover);
  --color-hover-strong: var(--color-hover-strong);
  --color-header-from: var(--color-header-from);
  --color-header-to: var(--color-header-to);
  --color-btn-primary: var(--color-btn-primary);
  --color-btn-primary-hover: var(--color-btn-primary-hover);

  /* Status badge text */
  --color-status-yellow: var(--color-status-yellow);
  --color-status-green: var(--color-status-green);
  --color-status-blue: var(--color-status-blue);
  --color-status-red: var(--color-status-red);
  --color-status-purple: var(--color-status-purple);

  /* Alert colors */
  --color-alert-warning-bg: var(--color-alert-warning-bg);
  --color-alert-warning-text: var(--color-alert-warning-text);
  --color-alert-error-bg: var(--color-alert-error-bg);
  --color-alert-error-text: var(--color-alert-error-text);
  --color-alert-success-bg: var(--color-alert-success-bg);
  --color-alert-success-text: var(--color-alert-success-text);
}

@theme {
  --spacing-88: 22rem;
  --font-base: Poppins, sans-serif;
}

/* Glass UI background gradient */
@utility bg-glass-gradient {
  background-image: linear-gradient(
    135deg,
    var(--color-surface-tertiary) 0%,
    color-mix(in srgb, var(--color-primary-500) 8%, var(--color-surface-tertiary)) 30%,
    var(--color-surface-tertiary) 50%,
    color-mix(in srgb, var(--color-primary-400) 6%, var(--color-surface-tertiary)) 70%,
    var(--color-surface-tertiary) 100%
  );
  background-attachment: fixed;
}

@utility bg-multiselect-caret {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

@utility bg-multiselect-spinner {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' fill='%234a3dff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'/%3E%3C/svg%3E");
}

@utility bg-multiselect-remove {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'/%3E%3C/svg%3E");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("$fonts/Poppins-Black.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("$fonts/Poppins-Light.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("$fonts/Poppins-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("$fonts/Poppins-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("$fonts/Poppins-SemiBold.ttf") format("truetype");
}

/* Form base styles (replaces @tailwindcss/forms) */
@layer base {
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
    @apply appearance-none bg-surface border border-line-default rounded-lg px-3 py-2 text-sm leading-6 text-heading;
}

[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
    @apply outline-2 outline-transparent outline-offset-2 border-primary-500 ring-1 ring-primary-500;
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    @apply bg-no-repeat pr-10;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
}

[type='checkbox'],
[type='radio'] {
    @apply appearance-none p-0 text-primary-500 bg-surface border border-line-strong inline-block align-middle select-none shrink-0 h-4 w-4;
    background-origin: border-box;
    print-color-adjust: exact;
}

[type='checkbox'] {
    @apply rounded;
}

[type='radio'] {
    @apply rounded-full;
}

[type='checkbox']:focus,
[type='radio']:focus {
    @apply outline-2 outline-transparent outline-offset-2;
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-500);
}

[type='checkbox']:checked,
[type='radio']:checked {
    @apply border-transparent bg-current bg-center bg-no-repeat;
    background-size: 100% 100%;
}

[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type='checkbox']:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    @apply border-transparent bg-current bg-center bg-no-repeat;
    background-size: 100% 100%;
}

::placeholder {
    @apply text-subtle opacity-100;
}
} /* end @layer base */

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    color: var(--color-heading);
    scrollbar-color: var(--color-surface-muted) var(--color-surface-secondary);
}

/* Webkit scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-surface-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-line-strong);
}

html {
    height: -webkit-fill-available;
}

.h-screen-ios {
    height: -webkit-fill-available;
}