@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .nav-link-base {
        @apply flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6;
    }

    .nav-link-base-xl {
        @apply flex gap-x-3 rounded-md p-2 text-xl font-semibold leading-6;
    }

    .nav-link-active {
        @apply bg-gray-800 text-white;
    }

    .nav-link-default {
        @apply text-gray-400 hover:text-white hover:bg-gray-800;
    }

    .nav-icon-base {
        @apply h-6 w-6 shrink-0;
    }

    .nav-icon-active {
        @apply bg-gray-800 text-white;
    }

    .nav-icon-default {
        @apply text-gray-400 hover:text-white hover:bg-gray-800;
    }

    .version-badge {
        @apply text-gray-400 text-sm leading-6 border-gray-600 border-2 rounded-md px-2 py-1;
    }

    .btn {
        @apply flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }

    .btn-xl {
        @apply flex w-full justify-center rounded-md bg-indigo-600 px-6 py-3 text-sm sm:text-xl font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }

    .btn-danger-xl {
        @apply flex w-full justify-center rounded-md bg-red-600 px-6 py-3 text-sm sm:text-xl font-semibold leading-6 text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600;
    }

    .btn-create-xl {
        @apply inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-6 py-3 text-sm sm:text-xl font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }

    .mobile-btn-xl {
        @apply flex w-full justify-center rounded-md bg-indigo-600 px-6 py-3 text-sm sm:text-xl font-semibold leading-6 text-white shadow-sm;
    }

    .mobile-btn-secondary-xl {
        @apply flex w-full justify-center rounded-md bg-blue-500 px-6 py-3 text-sm sm:text-xl font-semibold leading-6 text-white shadow-sm;
    }

    .btn-danger {
        @apply flex w-full justify-center rounded-md bg-red-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600;
    }

    .btn-create {
        @apply inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }

    .btn-more {
        @apply rounded-md bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }

    .btn-start {
        @apply flex items-center rounded-md bg-white px-6 py-3 text-sm sm:text-xl font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
    }

    .btn-in-plan {
        @apply flex items-center rounded-md bg-gray-200 px-6 py-3 text-sm sm:text-xl font-semibold text-gray-900 shadow-sm hover:bg-gray-300;
    }

    .btn-in-production {
        @apply flex items-center rounded-md bg-blue-600 px-6 py-3 text-sm sm:text-xl font-semibold text-white shadow-sm hover:bg-blue-700;
    }

    .btn-preparing {
        @apply flex items-center rounded-md bg-orange-600 px-6 py-3 text-sm sm:text-xl font-semibold text-white shadow-sm hover:bg-orange-700;
    }

    .btn-stop {
        @apply flex items-center rounded-md bg-green-600 px-6 py-3 text-sm sm:text-xl font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-green-700;
    }

    .btn-force-stop {
        @apply flex items-center rounded-md bg-red-600 px-6 py-3 text-sm sm:text-xl font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-red-700;
    }

    .btn-produced {
        @apply flex items-center rounded-md bg-green-600 px-6 py-3 text-sm sm:text-xl font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-green-500;
    }

    .btn-cancelled {
        @apply flex items-center rounded-md bg-red-600 px-6 py-3 text-sm sm:text-xl font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-red-500;
    }

    .icon-btn {
        @apply rounded-full bg-indigo-600 p-1.5 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }

    .icon-btn-success {
        @apply rounded-full bg-green-600 p-1.5 text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600;
    }

    .icon-btn-danger {
        @apply rounded-full bg-red-600 p-1.5 text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600;
    }

    .form-label {
        @apply block text-sm font-medium leading-6 text-gray-900;
    }

    .form-label-xl {
        @apply block text-xl font-medium leading-6 text-gray-900;
    }

    .form-input {
        @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
    }

    .form-input-xl {
        @apply block w-full rounded-md border-0 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-xl sm:leading-6;
    }

    .form-area {
        @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
    }

    .form-area-xl {
        @apply block w-full rounded-md border-0 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-xl sm:leading-6;
    }

    .form-select {
        @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
    }

    .form-select-xl {
        @apply block w-full rounded-md border-0 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-xl sm:leading-6;
    }

    .tab-link {
        @apply flex whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-200 hover:text-gray-700;
    }

    .tab-link-active {
        @apply border-indigo-500 text-indigo-600;
    }

    .tab-select {
        @apply block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base text-indigo-600 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm;
    }

    .metric-radio-btn {
        @apply h-6 w-6 border-gray-300 text-indigo-600 focus:ring-indigo-600;
    }

    .metric-radio-label {
        @apply ml-3 block text-xl font-medium leading-6 text-gray-900;
    }

    .pagy {
        @apply flex items-center justify-end border-t border-gray-200 bg-white py-3 space-x-1;
        a:not(.gap) {
            @apply relative inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus-visible:outline-offset-0;
            &:hover {
                @apply bg-gray-50;
            }
            &:not([href]) { /* disabled links */
                @apply text-gray-300 bg-gray-100 cursor-default;
            }
            &.current {
                @apply text-white bg-indigo-600;
            }
        }
    }

    .breadcrumb-link {
        @apply ml-4 text-sm font-medium text-gray-500 hover:text-gray-700;
    }

    .spinner {
        @apply w-8 h-8 text-gray-200 animate-spin fill-indigo-600;
    }

    .choices {
        @apply relative;
    }

    .choices__list.choices__list--dropdown {
        @apply hidden absolute left-0 mt-1 p-0 rounded-t-md;

        &.is-active {
            @apply block;
        }
    }

    .choices__input--cloned {
        @apply block w-full border-0 py-1.5 rounded-t-md text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-300 sm:text-sm sm:leading-6;
    }

    .choices__list.choices__list--single {
        @apply hidden;
    }

    .choices__list {
        @apply w-full overflow-auto rounded-b-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm;
    }

    .choices__item--choice {
        @apply cursor-default select-none py-2 pl-3 pr-9 text-gray-900 font-normal;

        &.is-selected {
            @apply font-semibold;
        }

        &.is-highlighted {
            @apply bg-indigo-600 text-white outline-none;
        }
    }

    .flatpickr-calendar {
        background: white;
        border: 1px solid oklch(0.92 0.004 286.32);
        border-radius: 0.375rem;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        font-size: 0.875rem;
        inline-size: 285px;
        padding: 0.75rem;

        :is(.dayContainer, .flatpickr-days) {
            inline-size: 100%;
            min-inline-size: 100%;
            max-inline-size: 100%;
        }
        .flatpickr-months {
            > * {
                position: static;
            }
            .flatpickr-month {
                color: black;
            }
            svg {
                fill: oklch(0.705 0.015 286.067);
            }
            .flatpickr-prev-month:hover svg {
                fill: black;
            }
            .flatpickr-next-month:hover svg {
                fill: black;
            }
        }
        .flatpickr-monthDropdown-months {
            appearance: none;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.5;
            padding: 0;
            text-align: center;
            &:hover {
                background: oklch(0.967 0.001 286.375);
            }
        }
        .numInputWrapper {
            input {
                border-radius: 0.375rem;
                color: black;
                font-size: 0.875rem;
                font-weight: 500;
                line-height: 1.5;
                padding: 0;
                text-align: center;
            }
            span {
                border-color: oklch(0.92 0.004 286.32);
            }
            span:hover {
                background: transparent;
            }
            span.arrowUp::after {
                border-bottom-color: black;
            }
            span.arrowDown::after {
                border-top-color: black;
            }
            &:hover {
                background: transparent;
            }
        }
        .flatpickr-weekday {
            color: oklch(0.552 0.016 285.938);
            font-weight: 400;
        }
        .flatpickr-time {
            .hasTime & {
                border-top-color: oklch(0.92 0.004 286.32);
            }
            .hasTime.noCalendar & {
                border: 0;
            }
            .numInput {
                background: transparent;
                color: black;
            }
            .flatpickr-time-separator {
                color: black;
            }
            .flatpickr-am-pm {
                background: transparent;
                color: black;
            }
        }
        .flatpickr-day {
            --day-size: 2.25rem;
            border-radius: 0.375rem;
            border-color: transparent !important;
            box-shadow: none !important;
            color: black;
            height: var(--day-size);
            line-height: var(--day-size);
            margin-block-start: 1px;
            max-width: var(--day-size);
            &:is(.inRange) {
                border-radius: 0;
            }
            &:is(.today, .inRange, :hover, :focus) {
                background: oklch(0.967 0.001 286.375);
                color: black;
            }
            &:is(
      .flatpickr-disabled,
      .flatpickr-disabled:hover,
      .prevMonthDay,
      .nextMonthDay,
      .notAllowed,
      .notAllowed.prevMonthDay,
      .notAllowed.nextMonthDay
    ) {
                color: oklch(0.552 0.016 285.938);
            }
            &:is(
      .selected,
      .startRange,
      .endRange,
      .selected.inRange,
      .startRange.inRange,
      .endRange.inRange,
      .selected:focus,
      .startRange:focus,
      .endRange:focus,
      .selected:hover,
      .startRange:hover,
      .endRange:hover,
      .selected.prevMonthDay,
      .startRange.prevMonthDay,
      .endRange.prevMonthDay,
      .selected.nextMonthDay,
      .startRange.nextMonthDay,
      .endRange.nextMonthDay
    ) {
                background: oklch(0.21 0.006 285.885);
                color: white;
            }
        }
        &::before, &::after {
            display: none;
        }
    }
}