@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import "tailwindcss";

@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.jsx";
@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";

@plugin "daisyui" {
    themes: "lofi" --default;
}

@plugin "daisyui/theme" {
    name: "lofi";
    default: true;
    prefersdark: false;
    color-scheme: "light";
    --color-base-100: oklch(98% 0.002 247.839);
    --color-base-200: oklch(96% 0.003 264.542);
    --color-base-300: oklch(92% 0.006 264.531);
    --color-base-content: oklch(0.2617 0.0575 259.89);
    --color-primary: oklch(0.2455 0.1671 264.11);
    --color-primary-content: oklch(98% 0.003 247.858);
    --color-secondary: oklch(0.8632 0.1762 91.11);
    --color-secondary-content: oklch(28% 0.141 291.089);
    --color-accent: oklch(82% 0.12 346.018);
    --color-accent-content: oklch(28% 0.109 3.907);
    --color-neutral: oklch(0.2455 0.1671 264.11);
    --color-neutral-content: oklch(98% 0.002 247.839);
    --color-info: oklch(54% 0.245 262.881);
    --color-info-content: oklch(97% 0.014 254.604);
    --color-success: oklch(59% 0.145 163.225);
    --color-success-content: oklch(97% 0.021 166.113);
    --color-warning: oklch(66% 0.179 58.318);
    --color-warning-content: oklch(98% 0.022 95.277);
    --color-error: oklch(59% 0.249 0.584);
    --color-error-content: oklch(97% 0.014 343.198);
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 0.5rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 0.5px;
    --depth: 0;
    --noise: 0;
}

@theme {
    --color-ux-text-gray: #737791;
    --color-aside: #0b1329;
    --color-ux-body: #f5f7fa;
    --color-gray: #eef8fb;

    --color-body: #ebf0f4;
    --color-border-gray: #e4e6e8;

    --font-base: "Roboto", sans-serif;
}

@layer utilities {
    .shadow-smoth {
        @apply shadow-[5px_5px_20px_-5px_rgba(0,0,0,0.02)];
    }

    .input.input > .grow,
    .select,
    .textarea,
    .file-input,
    .input {
        @apply outline-0 duration-300 focus:outline-0 focus:border-primary w-full placeholder:text-sm;
    }
    input {
        @apply placeholder:text-sm;
    }
    .fieldset-legend {
        @apply p-0 pb-1;
    }
}

@layer components {
    .safearea {
        @apply max-w-[1100px] px-5 mx-auto;
    }
}

@layer base {
    body,
    html {
        @apply scroll-smooth font-base text-neutral bg-body;
    }
    button {
        @apply outline-0 focus:outline-0;
    }

    .modal {
        &.modal-open,
        &[open],
        &:target,
        .modal-toggle:checked + & {
            pointer-events: auto;
            visibility: visible;
            opacity: 100%;
            transition:
                visibility 0s allow-discrete,
                background-color 0.3s ease-out,
                opacity 0.1s ease-out;
            background-color: oklch(0% 0 0 / 0.452) !important;
            backdrop-filter: blur(3px);
        }
    }
}

/* won style */
.iframe-style iframe{
    width: 100% !important;
    height: 100% !important;
}

/* slider */
.embla__viewport {
    overflow: hidden;
}

.embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
}

.embla__slide {
    flex: 0 0 100%;
    min-width: 0;
}

/* scroll bar */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

/* range slider */
#range-slider {
    background: var(--color-base-300);
    height: 4px !important;
    border-radius: var(--radius-box);
}

#range-slider .range-slider__range {
    background: var(--color-primary);
    transition: height 0.3s;
}

#range-slider .range-slider__thumb {
    background: var(--color-neutral-content);
    border: 2px solid var(--color-primary);
    transition: transform 0.3s;
}

#range-slider .range-slider__thumb[data-active] {
    transform: translate(-50%, -50%) scale(1.25);
}

#range-slider .range-slider__range[data-active] {
    height: 16px;
}

/* react calender */
.react-calendar {
    border-radius: var(--radius-box) !important;
    border: 1px solid var(--color-border-gray) !important;
    box-shadow: var(--depth) !important;
    padding: 0.5rem !important;
}
.react-calendar__tile {
    border-radius: var(--radius-box) !important;
    transition:
        background-color 0.3s,
        color 0.3s;
    background-color: transparent !important;
}
.react-calendar__tile:hover {
    background-color: var(--color-base-300) !important;
}
.react-calendar__tile--active {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-content) !important;
}