/*
 * 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;
}

/* …and padding or a min-height on it would still show when closed. */
.accordion-content:not(.accordion-open) > * {
    padding-block: 0;
    min-height: 0;
}

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 — themed to match the app's form fields (olive green
   accent, Inter, the same dark surfaces as dialogs and inputs). Only the
   variables and a few rules are set here; the layout comes from
   air-datepicker.min.css, loaded before this file in the layout. */

.air-datepicker {
    --adp-font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --adp-font-size: 14px;
    --adp-width: 256px;
    --adp-z-index: 60;
    --adp-padding: 6px;
    --adp-border-radius: 8px;
    --adp-cell-border-radius: 6px;
    --adp-btn-border-radius: 6px;
    --adp-day-cell-height: 32px;

    --adp-background-color: #ffffff;
    --adp-background-color-hover: #f3f4f6;            /* gray-100 */
    --adp-background-color-active: #e5e7eb;           /* gray-200 */
    --adp-color: #111827;                             /* gray-900 */
    --adp-color-secondary: #6b7280;                   /* gray-500 */
    --adp-accent-color: #5f734c;
    --adp-color-current-date: #5f734c;
    --adp-color-other-month: #d1d5db;                 /* gray-300 */
    --adp-color-other-month-hover: #9ca3af;
    --adp-color-disabled: #d1d5db;
    --adp-border-color: #d1d5db;
    --adp-border-color-inner: #e5e7eb;
    --adp-day-name-color: #5f734c;
    --adp-nav-arrow-color: #6b7280;
    --adp-cell-background-color-hover: #eef2e9;      /* light olive tint */
    --adp-cell-background-color-selected: #5f734c;
    --adp-cell-background-color-selected-hover: #4b5a3d;
    --adp-background-color-selected-other-month: #5f734c;
    --adp-background-color-selected-other-month-focused: #4b5a3d;
    --adp-btn-color: #5f734c;
    --adp-btn-color-hover: #4b5a3d;
    --adp-btn-background-color-hover: #eef2e9;
    --adp-btn-background-color-active: #dfe6d6;

    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.dark .air-datepicker {
    --adp-background-color: #242b1e;
    --adp-background-color-hover: rgb(255 255 255 / 0.08);
    --adp-background-color-active: rgb(255 255 255 / 0.12);
    --adp-color: #e8ede3;
    --adp-color-secondary: #9ca3af;
    --adp-accent-color: #9fb486;
    --adp-color-current-date: #9fb486;
    --adp-color-other-month: #4b5563;
    --adp-color-other-month-hover: #6b7280;
    --adp-color-disabled: #4b5563;
    --adp-border-color: rgb(255 255 255 / 0.2);
    --adp-border-color-inner: rgb(255 255 255 / 0.1);
    --adp-day-name-color: #9fb486;
    --adp-nav-arrow-color: #9ca3af;
    --adp-cell-background-color-hover: rgb(255 255 255 / 0.08);
    --adp-cell-background-color-selected: #7a8f62;
    --adp-cell-background-color-selected-hover: #5f734c;
    --adp-background-color-selected-other-month: #7a8f62;
    --adp-background-color-selected-other-month-focused: #5f734c;
    --adp-btn-color: #9fb486;
    --adp-btn-color-hover: #e8ede3;
    --adp-btn-background-color-hover: rgb(255 255 255 / 0.08);
    --adp-btn-background-color-active: rgb(255 255 255 / 0.12);

    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
}

.air-datepicker--pointer {
    display: none;
}

.air-datepicker-nav--title {
    font-weight: 600;
}

.air-datepicker-body--day-name {
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
}

/* Today: accent-coloured and bold, no box. */
.air-datepicker-cell.-current- {
    font-weight: 600;
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current-,
.air-datepicker-cell.-selected-.-other-month- {
    color: #ffffff;
    font-weight: 600;
}

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

.air-datepicker-button {
    font-weight: 500;
}

/* 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;
}