/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import "accordion";

/* Accordion content panel
 *
 * Uses the grid-template-rows: 0fr → 1fr trick.
 * This is the only reliable CSS-only approach that transitions
 * to an unknown height without any JS measurement.
 *
 * The content target needs a single child element (the inner wrapper)
 * so that min-content is constrained to 0 when rows = 0fr.
 * In our template the content div wraps the slot divs directly — that's fine.
 */

.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms ease;
    overflow: hidden;
}

.accordion-content.accordion-open {
    grid-template-rows: 1fr;
}

/* The direct child must have overflow:hidden so it collapses to 0 */
.accordion-content > * {
    overflow: hidden;
}

dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: 90vw;
    max-height: 90vh;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* 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: var(--adp-cell-background-color-selected);
}

.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;
}