/*
 * Brand override for the flatpickr calendar popup (core/date_field.js,
 * vendored core/vendor/flatpickr/flatpickr.min.css).
 *
 * This file is loaded in base.html *after* flatpickr.min.css so its rules
 * win the cascade without needing !important — vendored flatpickr.min.css
 * ships `.flatpickr-day.selected{background:#569ff7}` etc. and previously
 * beat the same override when it lived in the Tailwind-compiled bundle
 * (base.html loads {% tailwind_css %} before flatpickr.min.css, so the
 * compiled bundle's rules were always overridden by flatpickr's own CSS).
 * Keeping it as a plain static file also means editing it doesn't require a
 * `tailwind build` — runserver in DEBUG serves it straight away.
 *
 * Colors reuse the project's CSS custom properties declared under Tailwind
 * v4's `@theme` block (app/theme/static_src/src/styles.css). NOTE: Tailwind v4
 * tree-shakes `@theme` colors — it only mirrors a `--color-*` onto `:root` in
 * the compiled bundle if some generated utility actually uses that color.
 * `--color-brand` has no utility usage in the build, so it is ABSENT from the
 * compiled `:root` and `var(--color-brand)` would resolve to empty (which made
 * the selected day render white-on-white — invisible). Every `var()` below
 * therefore carries the theme's literal hex as a fallback so the popup styles
 * correctly regardless of Tailwind's tree-shaking.
 *
 * Font sizes: flatpickr's own CSS sets a 14px calendar base with the
 * month/year title at 135% (~19px) and weekdays at 90% (~12.6px). That read
 * noticeably larger than the rest of the app's inputs (13px, see
 * core/number_field.js / the shared text input classes), so every piece
 * here is pinned to an explicit px value instead of inheriting the
 * percentage scale.
 */

.flatpickr-calendar {
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    font-family: 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', Meiryo, 'Noto Sans JP', Arial, sans-serif;
}

/* --- Header: month/year title, prev/next arrows -------------------------- */

.flatpickr-months .flatpickr-month,
.flatpickr-current-month {
    color: var(--color-text, #1a1a1a);
    font-size: 14px;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: var(--color-text-2, #666);
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--color-brand, #bc1224);
}

/* --- Month dropdown + the JS-built year dropdown (core/date_field.js) ---
 * Both selects share this rule so they read as one consistent control —
 * the year <select> is created at runtime with the exact same class list
 * (`flatpickr-monthDropdown-months`) precisely so it inherits these styles
 * without a second near-duplicate block.
 */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text, #1a1a1a);
}

/* --- Weekday row ----------------------------------------------------------- */

.flatpickr-weekday {
    color: var(--color-text-2, #666);
    font-weight: 600;
    font-size: 11px;
}

/* --- Day cells --------------------------------------------------------------- */

.flatpickr-day {
    color: var(--color-text, #1a1a1a);
    border-radius: 5px;
    font-size: 13px;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--color-text-3, #999);
}

.flatpickr-day.today {
    border-color: var(--color-info, #185fa5);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--color-bg-3, #f0efea);
    border-color: var(--color-bg-3, #f0efea);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
    background: var(--color-brand, #bc1224);
    border-color: var(--color-brand, #bc1224);
    color: #fff;
}

/* Today, when selected, uses the info blue (#185FA5) instead of brand red —
 * higher specificity (3 classes) than the .selected group above, so it wins.
 */
.flatpickr-day.today.selected,
.flatpickr-day.today.selected:hover,
.flatpickr-day.today.selected:focus {
    background: var(--color-info, #185fa5);
    border-color: var(--color-info, #185fa5);
    color: #fff;
}

/* --- Visible field: calendar icon on the right ------------------------------
 * Since the field is flatpickr's altInput (type="text"), it has no native
 * date-picker icon. Paint one via a background SVG so it reads like the
 * default <input type="date"> control. The whole field opens the picker on
 * focus, so the icon is purely a visual affordance. `date-alt-input` is added
 * to the altInput in core/date_field.js onReady. Loaded after the Tailwind
 * bundle, so `padding-right` here wins over the input's `px-2`.
 *
 * The gutter is 26px, not the 30px it started at: paired with the field's
 * size=10 intrinsic width (components/date_input.html) it is the other half of
 * how wide the control ends up wherever nothing else sets a width, and 26px
 * still clears the 14px icon with room on both sides.
 */
.date-alt-input {
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 14px 14px;
    cursor: pointer;
}

/* Compact variant for date cells inside a dense transaction line-items table.
 * Opt in by passing "date-alt-input--compact" through the `input_class` param
 * of components/date_input.html — flatpickr copies the original input's
 * className onto the altInput, so the marker lands on the visible field.
 *
 * Budget in a 112px date column (core/../transaction/home.html columnWidth):
 *   112 − 16 (td px-2) − 4 (input px-1) − 22 (this gutter) − 2 (border) = 68px
 * which clears the 12px "yyyy/mm/dd" placeholder (~64px). The 30px default
 * above leaves only 58px and clips it.
 */
.date-alt-input.date-alt-input--compact {
    padding-right: 22px;
    background-position: right 5px center;
    background-size: 12px 12px;
}