/* Platform date-input component — shared "style B" three-box picker.
   Layout only: the day/month/year/time inputs adopt whichever input class the
   calling module passes (parivar-input, control, sreg field, …) so they match
   their surroundings. See Documentations/DATE_INPUT_CONTRACT.md.

   Each box is <span class="date-parts__wrap date-parts__day|month|year|hour|
   minute"><input class="... date-parts__field"><ul class="date-parts__menu">.
   The per-part class (day/month/…) carries the box's width/flex sizing and now
   lives on the wrap span, since that's the flex item; the input fills it via
   .date-parts__field so its own inputClass padding/border render exactly as
   before. This is deliberately NOT the native `<input list>` / `<datalist>`
   combo — that renders a browser-drawn, un-stylable dropdown icon inside the
   input which reserves real width no matter how the box is sized, and on the
   2-digit-wide hour/minute boxes left almost no room for the digits actually
   being typed. */

.date-parts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 420px;
}

.date-parts__day    { width: 68px; flex: 0 0 auto; }
/* Sized to its own content ("September", the longest month name) plus a
   little breathing room — not a flex-grow box, so it doesn't claim leftover
   row width the way a generic "middle" field normally would. */
.date-parts__month  { width: calc(9ch + 24px); flex: 0 0 auto; }
.date-parts__year   { width: 88px; flex: 0 0 auto; }
.date-parts__hour,
.date-parts__minute { width: 60px; flex: 0 0 auto; text-align: center; }

.date-parts__wrap { position: relative; }
.date-parts__field { width: 100%; box-sizing: border-box; }
/* These boxes hold at most a handful of characters, so the caller's usual
   control/parivar-input horizontal padding wastes proportionally more of the
   box than on a normal-width field. Tighten it here, scoped to date-parts
   inputs only (specificity via the wrap ancestor beats .control/.date-parts__
   input's single-class rule) so it never touches those classes elsewhere. */
.date-parts__wrap .date-parts__field {
    padding-left: 8px;
    padding-right: 8px;
}

.date-parts__at,
.date-parts__colon {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--color-text-secondary, #6B7280);
}
.date-parts__colon { padding: 0 1px; }

/* Date-time rows can get wide; let the time segment wrap under on narrow forms. */
.date-parts--time { max-width: 560px; }

/* Labels / hints rendered by the partial when a label is supplied. */
.date-parts__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
}
.date-parts__hint {
    font-weight: 400;
    color: var(--color-text-tertiary, #9CA3AF);
}
.date-parts__hint--block {
    display: block;
    margin-top: 6px;
    font-size: 12px;
}

/* Neutral fallback styling for the day/month/year inputs when the caller does
   NOT pass a module input class (uses the bare .date-parts__input default). */
.date-parts__input {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--color-border-primary, rgba(17, 24, 39, 0.2));
    border-radius: 8px;
    font: inherit;
    background: var(--color-background-primary, #fff);
    color: var(--color-text-primary, #1F2937);
}
.date-parts__input:focus {
    outline: none;
    border-color: var(--color-border-info, #B45309);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.15);
}
.date-parts [readonly] {
    background: var(--color-background-secondary, #F3F4F6);
    cursor: default;
}

/* In-house suggestion popup — replaces the native datalist dropdown. */
.date-parts__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    margin: 0;
    padding: 4px;
    list-style: none;
    min-width: max(100%, 64px);
    max-height: 220px;
    overflow-y: auto;
    background: var(--color-background-primary, #fff);
    border: 1px solid var(--color-border-primary, rgba(17, 24, 39, 0.14));
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.16);
}
.date-parts__menu[hidden] { display: none; }
.date-parts__opt {
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-primary, #1F2937);
    cursor: pointer;
    white-space: nowrap;
}
.date-parts__opt.is-active {
    background: var(--color-background-secondary, #FFF3E6);
}
.date-parts__opt--empty {
    color: var(--color-text-tertiary, #9CA3AF);
    cursor: default;
}

@media (max-width: 480px) {
    .date-parts__month { flex-basis: 100%; }
}

/* Inline variant — keep every part (day/month/year + time) on one line, each
   box sized to its own content (day ≈3 chars, month ≈9 chars — "September",
   the longest month name — year ≈5 chars) and none of them growing to claim
   leftover row width. Boxes can still shrink (min-width:0) so the whole
   control fits a narrow column. The wrap itself carries no padding of its
   own — the nested .date-parts__field input supplies its usual inputClass
   padding, so the "+18px" etc. allowance below is exactly the same budget the
   input already accounted for pre-refactor. */
.date-parts.date-parts--inline { flex-wrap: nowrap; max-width: none; width: 100%; gap: 6px; }
.date-parts--inline .date-parts__day,
.date-parts--inline .date-parts__month,
.date-parts--inline .date-parts__year,
.date-parts--inline .date-parts__hour,
.date-parts--inline .date-parts__minute {
    box-sizing: border-box;
    min-width: 0;
}
.date-parts--inline .date-parts__day    { width: calc(3ch  + 18px); flex: 0 1 auto; }
.date-parts--inline .date-parts__month  { width: calc(9ch + 18px); flex: 0 1 auto; }
.date-parts--inline .date-parts__year   { width: calc(5ch  + 18px); flex: 0 1 auto; }
.date-parts--inline .date-parts__hour,
.date-parts--inline .date-parts__minute { width: calc(2.5ch + 18px); flex: 0 1 auto; }