@layer vendor, base, components, utilities;
@import "../vendor/tom-select/dist/css/tom-select.default.min-5Ubr_SJ.css" layer(vendor);

:root {
  /* Design Tokens (Primitives) */
  --clr-white: #ffffff;
  --clr-black: #000000;
  --clr-gray-50: #f9fafb;
  --clr-gray-100: #f3f4f6;
  --clr-gray-200: #e5e7eb;
  --clr-gray-800: #1f2937;
  --clr-blue-500: #3b82f6;
  --clr-blue-600: #2563eb;
  --clr-purple-500: #a855f7;

  /* Semantic Variables (System) */
  --color-body-bg: var(--clr-gray-50);
  --color-surface: var(--clr-white);
  --color-text: var(--clr-gray-800);
  --color-primary: var(--clr-blue-600);
  --color-border: var(--clr-gray-200);

  /* ColorSets - Primitives for sets */
  --color-blue-primary: #3b82f6;
  --color-blue-bg: #eff6ff;
  --color-blue-border: #dbeafe;

  --color-purple-primary: #8b5cf6;
  --color-purple-bg: #f5f3ff;
  --color-purple-border: #ede9fe;

  --color-green-primary: #22c55e;
  --color-green-bg: #dcfce7;
  --color-green-border: #bbf7d0;

  --color-orange-primary: #f97316;
  --color-orange-bg: #ffedd5;
  --color-orange-border: #fed7aa;

  --color-sky-primary: #0ea5e9;
  --color-sky-bg: #e0f2fe;
  --color-sky-border: #bae6fd;

  --color-amber-primary: #d97706;
  --color-amber-bg: #fef3c7;
  --color-amber-border: #fde68a;

  /* TomSelect Variables (System) */
  --ts-bg-main: var(--color-surface);
  --ts-color-text: var(--color-text);
  --ts-bg-dropdown: var(--color-surface);
  --ts-color-dropdown-item: var(--color-text);
  --ts-color-dropdown-item-active: var(--color-blue-primary);
  --ts-bg-dropdown-item-active: var(--color-blue-bg);
  --ts-border-color: var(--color-border);
  --ts-border-radius: var(--radius-m);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;

  /* Sizes */
  --size-step-0: 1rem;
  --size-step-1: 1.25rem;
  --size-step-2: 1.5rem;
  --size-step-3: 2rem;

  /* Radius */
  --radius-m: 0.75rem;
  --radius-l: 1rem;
  --radius-xl: 1.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-body-bg: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    --color-border: #334155;

    --color-blue-primary: #60a5fa;
    --color-blue-bg: rgba(59, 130, 246, 0.15);
    --color-blue-border: rgba(59, 130, 246, 0.25);

    --color-purple-primary: #a78bfa;
    --color-purple-bg: rgba(139, 92, 246, 0.15);
    --color-purple-border: rgba(139, 92, 246, 0.25);

    --color-green-primary: #4ade80;
    --color-green-bg: rgba(34, 197, 94, 0.15);
    --color-green-border: rgba(34, 197, 94, 0.25);

    --color-orange-primary: #fb923c;
    --color-orange-bg: rgba(249, 115, 22, 0.15);
    --color-orange-border: rgba(249, 115, 22, 0.25);

    --color-sky-primary: #38bdf8;
    --color-sky-bg: rgba(14, 165, 233, 0.15);
    --color-sky-border: rgba(14, 165, 233, 0.25);

    --color-amber-primary: #fbbf24;
    --color-amber-bg: rgba(217, 119, 6, 0.15);
    --color-amber-border: rgba(217, 119, 6, 0.25);
  }
}

@layer base {
  :root {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  body {
    background-color: var(--color-body-bg);
    color: var(--color-text);
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }

  .l-container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-s);
  }
}

@layer components {
  /* Globálne pravidlá pre TomSelect */
  .ts-wrapper {
    & .ts-control {
      background: var(--ts-bg-main);
      color: var(--ts-color-text);
      border-color: var(--ts-border-color);
      border-radius: var(--ts-border-radius);
      font-size: var(--size-step-0);
      min-height: 2.5rem;
      display: flex;
      align-items: center;

      & input {
          color: var(--ts-color-text);
      }
    }

    &.focus .ts-control {
      box-shadow: 0 0 0 2px var(--color-blue-bg);
      border-color: var(--color-blue-primary);
    }

    & .ts-dropdown {
      background: var(--ts-bg-dropdown);
      color: var(--ts-color-text);
      border-color: var(--ts-border-color);
      border-radius: var(--ts-border-radius);
      box-shadow: var(--shadow-lg);
      z-index: 100;
      margin-top: 4px;

      & .option {
        padding: 0.6rem 0.8rem;
        color: var(--ts-color-dropdown-item);
        cursor: pointer;
        transition: background-color 0.2s;

        &.active {
          background-color: var(--ts-bg-dropdown-item-active);
          color: var(--ts-color-dropdown-item-active);
        }

        &.selected {
          background-color: var(--ts-bg-dropdown-item-active);
          color: var(--ts-color-dropdown-item-active);
        }
      }

      & .optgroup-header {
          background: var(--color-body-bg);
          color: var(--color-text);
          font-weight: 600;
          padding: 0.5rem 0.8rem;
      }

      & .ts-dropdown-content {
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-track {
          background: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background-color: var(--color-border);
          border-radius: 10px;
        }
      }
    }
  }
}