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

@layer components {
    /* Scrollbar utilities */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    /* Clipboard */
    .clipboard-tooltip-visible {
        @apply visible opacity-100;
    }

    .clipboard-tooltip-hidden {
        @apply invisible opacity-0;
    }

    .clipboard-success {
        @apply bg-green-600;
    }

    .clipboard-error {
        @apply bg-red-600;
    }

    .clipboard-copying {
        @apply bg-blue-600;
    }

    /* Titulos */
    .section-heading {
        @apply text-lg font-semibold text-content-primary;
    }

    /* Titulos - Fin */
    /* Botones - Fin */
    /* Formulario */
    .form-label {
        @apply block text-sm font-medium text-content-primary;
    }

    .form-label .required {
        @apply text-danger-600 font-normal;
    }


    .form-input {
        @apply mt-1 block w-full rounded-lg border-surface-elevated shadow-sm focus:border-primary focus:ring-primary sm:text-sm disabled:bg-surface-bg disabled:text-content-muted disabled:cursor-not-allowed;
    }

    .form-submit {
        @apply bg-primary text-content-onPrimary py-2 px-4 rounded-lg text-sm font-medium hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors duration-200;
    }

    .form-cancel {
        @apply bg-white text-content-primary border border-surface-elevated py-2 px-4 rounded-lg text-sm font-medium hover:bg-surface-bg focus:outline-none focus:ring-2 focus:ring-content-secondary focus:ring-offset-2 transition-colors duration-200;
    }

    /* Formulario Fin */
    /* Tabs */
    .active-tab {
        @apply relative px-4 py-2 text-primary font-medium border-b-2 border-primary;
    }

    .inactive-tab {
        @apply relative px-4 py-2 text-content-secondary hover:text-primary font-medium border-b-2 border-transparent hover:border-surface-elevated;
    }

    /* Tabs Fin */
    /* Paginación */
    .pagy {
        @apply flex space-x-1 font-medium text-sm;

        a:not(.gap) {
            @apply block rounded-lg px-3 py-1 transition-colors;
            @apply text-sm bg-surface-bg;

            &:hover {
                @apply bg-surface-elevated;
            }

            &:not([href]) {
                @apply text-sm bg-white cursor-default;
            }

            &.current {
                @apply text-content-onPrimary bg-primary hover:bg-primary-dark;
            }
        }

        label {
            @apply inline-block whitespace-nowrap bg-surface-bg rounded-lg px-3 py-0.5;

            input {
                @apply bg-white border-none rounded-md text-sm;
            }
        }
    }

    /* Paginación Fin */
    /* Date picker */
    /* air-datepicker */
    .air-datepicker {
        --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        --adp-font-size: 14px;
        --adp-width: 246px;
        --adp-z-index: 40;
        --adp-padding: 4px;
        --adp-grid-areas: "nav" "body" "timepicker" "buttons";
        --adp-transition-duration: 0.3s;
        --adp-transition-ease: ease-out;
        --adp-transition-offset: 8px;
        --adp-background-color: #fff;
        --adp-background-color-hover: #f0f0f0;
        --adp-background-color-active: #eaeaea;
        --adp-background-color-in-range: rgba(16, 16, 16, 0.1);
        --adp-background-color-in-range-focused: rgba(236, 236, 236, 0.2);
        --adp-background-color-selected-other-month-focused: #f1f1f1;
        --adp-background-color-selected-other-month: #e6e6e6;
        --adp-color: #4a4a4a;
        --adp-color-secondary: #9c9c9c;
        --adp-accent-color: #0a0a0a;
        --adp-color-current-date: var(--adp-accent-color);
        --adp-color-other-month: #dedede;
        --adp-color-disabled: #aeaeae;
        --adp-color-disabled-in-range: #939393;
        --adp-color-other-month-hover: #c5c5c5;
        --adp-border-color: rgba(0, 0, 0, 0.1);
        --adp-border-color-inner: #efefef;
        --adp-border-radius: 8px;
        --adp-border-color-inline: #d7d7d7;
        --adp-nav-height: 32px;
        --adp-nav-arrow-color: var(--adp-color-secondary);
        --adp-nav-action-size: 32px;
        --adp-nav-color-secondary: var(--adp-color-secondary);
        --adp-day-name-color: #464646;
        --adp-day-name-color-hover: #f1f1f1;
        --adp-day-cell-width: 1fr;
        --adp-day-cell-height: 32px;
        --adp-month-cell-height: 42px;
        --adp-year-cell-height: 56px;
        --adp-pointer-size: 10px;
        --adp-poiner-border-radius: 2px;
        --adp-pointer-offset: 14px;
        --adp-cell-border-radius: 4px;
        --adp-cell-background-color-hover: var(--adp-background-color-hover);
        --adp-cell-background-color-selected: #1d1d1d;
        --adp-cell-background-color-selected-hover: #303030;
        --adp-cell-background-color-in-range: rgba(38, 38, 38, 0.1);
        --adp-cell-background-color-in-range-hover: rgba(44, 44, 44, 0.2);
        --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
        --adp-btn-height: 32px;
        --adp-btn-color: var(--adp-accent-color);
        --adp-btn-color-hover: var(--adp-color);
        --adp-btn-border-radius: var(--adp-border-radius);
        --adp-btn-background-color-hover: var(--adp-background-color-hover);
        --adp-btn-background-color-active: var(--adp-background-color-active);
        --adp-time-track-height: 1px;
        --adp-time-track-color: #dedede;
        --adp-time-track-color-hover: #b1b1b1;
        --adp-time-thumb-size: 12px;
        --adp-time-padding-inner: 10px;
        --adp-time-day-period-color: var(--adp-color-secondary);
        --adp-mobile-font-size: 16px;
        --adp-mobile-nav-height: 40px;
        --adp-mobile-width: 320px;
        --adp-mobile-day-cell-height: 38px;
        --adp-mobile-month-cell-height: 48px;
        --adp-mobile-year-cell-height: 64px;
    }

    .air-datepicker-overlay {
        --adp-overlay-background-color: rgba(0, 0, 0, 0.3);
        --adp-overlay-transition-duration: 0.3s;
        --adp-overlay-transition-ease: ease-out;
        --adp-overlay-z-index: 99;
    }

    .air-datepicker-cell.-selected-.-day- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-selected-.-year- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-selected-.-month- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-selected- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: red;
    }

    .air-datepicker-cell.-selected-.-current- {
        color: #ffffff; /* Ensure selected cell text is also light in dark mode */
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-current- {
        border: 1px solid #bdbdbd !important;
    }

    .air-datepicker-cell.-selected-.-day-.-other-month- {
        color: #cccccc; /* Ensure selected cell text is also light in dark mode */
        background: #7e7e7e;
    }

    .dark {
        .air-datepicker {
            --adp-background-color: #2d2d2d; /* Dark background */
            --adp-background-color-hover: #3a3a3a;
            --adp-background-color-active: #4a4a4a;
            --adp-background-color-in-range: rgba(196, 196, 196, 0.2);
            --adp-background-color-in-range-focused: rgba(196, 196, 196, 0.3);
            --adp-background-color-selected-other-month-focused: #333;
            --adp-background-color-selected-other-month: #444;
            --adp-color: #e0e0e0; /* Light text color */
            --adp-color-secondary: #a0a0a0;
            --adp-accent-color: #ffffff; /* A light accent color for dark mode */
            --adp-color-other-month: #555;
            --adp-color-disabled: #777;
            --adp-color-disabled-in-range: #888;
            --adp-color-other-month-hover: #666;
            --adp-border-color: #ffffff1a; /* Lighter border for dark mode */
            --adp-border-color-inner: #444;
            --adp-border-color-inline: #444444;
            --adp-nav-arrow-color: var(--adp-color-secondary);
            --adp-day-name-color: #c0c0c0;
            --adp-day-name-color-hover: #3a3a3a;
            --adp-cell-background-color-hover: var(--adp-background-color-hover);
            --adp-cell-background-color-selected: #ffffff;
            --adp-cell-background-color-selected-hover: #e9e9e9;
            --adp-cell-background-color-in-range: rgba(175, 175, 175, 0.2);
            --adp-cell-background-color-in-range-hover: rgba(169, 169, 169, 0.3);
            --adp-btn-color: var(--adp-accent-color);
            --adp-btn-color-hover: var(--adp-color);
            --adp-btn-background-color-hover: var(--adp-background-color-hover);
            --adp-btn-background-color-active: var(--adp-background-color-active);
            --adp-time-track-color: #555;
            --adp-time-track-color-hover: #777;
            --adp-time-day-period-color: var(--adp-color-secondary);
        }

        .air-datepicker-overlay {
            --adp-overlay-background-color: rgba(255, 255, 255, 0.1); /* Lighter overlay for dark mode */
        }

        .air-datepicker-cell.-selected-.-day- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-selected-.-year- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-selected-.-month- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-selected- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-selected-.-current- {
            color: #1d1d1d; /* Ensure selected cell text is also light in dark mode */
            background: var(--adp-cell-background-color-selected);
        }

        .air-datepicker-cell.-current- {
            border: 1px solid #505050 !important;
        }

        .air-datepicker-cell.-selected-.-day-.-other-month- {
            color: #cccccc; /* Ensure selected cell text is also light in dark mode */
            background: #7e7e7e;
        }
    }

    .air-datepicker--navigation {
        width: 100%;
    }

    .air-datepicker--pointer {
        opacity: 0;
    }

    .air-datepicker {
        background: var(--adp-background-color);
        border: 1px solid var(--adp-border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-radius: var(--adp-border-radius);
        box-sizing: content-box;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, max-content);
        grid-template-areas: var(--adp-grid-areas);
        font-family: var(--adp-font-family), sans-serif;
        font-size: var(--adp-font-size);
        color: var(--adp-color);
        width: var(--adp-width);
        position: absolute;
        transition: opacity var(--adp-transition-duration) var(--adp-transition-ease),
        transform var(--adp-transition-duration) var(--adp-transition-ease);
        z-index: var(--adp-z-index);
    }

    .air-datepicker-cell.-selected- {
        color: #1d1d1d;
        border: none;
        background: var(--adp-cell-background-color-selected);
    }

    .air-datepicker-cell.-disabled- {
        cursor: not-allowed;
    }

    /* Add a new rule for dark mode selected cells if needed, or adjust the general .air-datepicker-cell.-selected- inside the dark mode media query */
    .dark {
        .air-datepicker-cell.-selected- {
            color: #e0e0e0; /* Example: light text for selected cells in dark mode */
            /* background: var(--adp-cell-background-color-selected); Is already set within .air-datepicker dark vars */
        }
    }

    /* Time-only picker styles */
    .air-datepicker.only-timepicker .air-datepicker--navigation {
        display: none;
    }

    .air-datepicker.only-timepicker .air-datepicker--content {
        display: none;
    }

    .air-datepicker.only-timepicker .air-datepicker--time {
        border-top: none;
    }


}