/* ============================================================================
   DATE AND TIME FIELD (Components/Shared/DateTimeField.razor).

   WHY IT EXISTS. Every deadline field was an <input type="datetime-local">, and the popup
   that control opens is browser chrome: on Windows it is the system picker in system blue,
   it reads none of the tokens, and inside the task modal it looked like a stranger. The
   closed field could be skinned (04-compose-filter-modal.css did); the popup could not, so
   the popup is ours now.

   WHAT IT BORROWS. The board calendar's language at control size (02-main-layout.css): the
   Today chip, the ‹ › chips with the month between them on auto margins, a 7-column weekday
   header, the endpoint token on the picked day. The cells are 13px against the board's 14px
   on purpose - a control inside a modal is one step quieter than the board.

   THE ONE LOUD THING. The hour is set in the numeral face (--chronos-font-mono, 700) under a
   hairline: the day above it is prose, the hour is a number, the same register as the streak
   clock. 700 and not 800 because 800 is the streak clock's own volume and this control has
   to sit under the modal, not beside the clock.

   SIZING. The root takes its column and stops at 300px; trigger and panel are both 100% of
   it, so the panel is exactly as wide as the field it unfolds from. The detail sidebar's
   204px column gets a right-anchored 280px panel instead, hanging left over the body inside
   the card, because 28px cells are not a calendar.

   PHONES. Under 720px the panel is a fixed bottom sheet: 44px cells in thumb reach, and
   nothing depends on which modal region scrolls (the create modal clips its card and scrolls
   only its body, the AI confirm card scrolls whole - an absolute panel inside either would
   have to be found by scrolling). position: fixed escapes both because neither card is a
   containing block once its entry animation has finished: 23-motion.css leaves transform
   at none.

   DARK. Token-driven, with the spot-fixes it needs carried here rather than in
   24-theme-dark.css: every selector is new in this file, so nothing there fights them.
   ============================================================================ */
.dtf {
    position: relative;
    width: 100%;
    max-width: 300px;
}

/* The closed field is the shared .modal-search box on a <button>, so it inherits the border,
   radius, padding, 40px floor and the dark inset from that class without a copy. A button
   centres its label; a field does not. */
.dtf-trigger {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    padding-right: 38px;
    text-align: left;
    color: var(--chronos-fg-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.dtf-empty { color: var(--chronos-fg-muted); }
.dtf.open .dtf-trigger { border-color: var(--chronos-violet); }
.dtf-trigger:disabled { opacity: 0.5; cursor: not-allowed; }

/* The same brand calendar the native field wore, drawn as a pseudo-element rather than as
   the button's own background: .modal-search sets `background` as a shorthand and the dark
   theme sets it again, and either wipes a background-image off the button. A data URI cannot
   read a custom property, so it mirrors the --chronos-violet hex like the select caret does;
   the dark card steps it up to the --chronos-lavender hex from the same ramp. */
.dtf-trigger::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    opacity: 0.85;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%237C3AED' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.5' width='12' height='10.5' rx='2'/%3E%3Cpath d='M2 7h12M5.5 1.5v3.5M10.5 1.5v3.5'/%3E%3C/g%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
html[data-theme="dark"] .dtf-trigger::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23A855F7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.5' width='12' height='10.5' rx='2'/%3E%3Cpath d='M2 7h12M5.5 1.5v3.5M10.5 1.5v3.5'/%3E%3C/g%3E%3C/svg%3E");
}

.dtf-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--chronos-card-bg);
    border: 1px solid var(--chronos-outline);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
html[data-theme="dark"] .dtf-panel { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }

/* Head: [Today] ‹ Month Year › - the .cal-head arrangement, arrows hugging the title. */
.dtf-head {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dtf-head .chip {
    height: 24px;
    min-height: 24px;
    padding: 0 9px;
    font-size: var(--text-xs);
    line-height: 24px;
}
.dtf-head > :nth-child(2) { margin-left: auto; }
.dtf-head > :nth-child(4) { margin-right: auto; }
.dtf-month {
    padding: 0 6px;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.dtf-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    color: var(--chronos-fg-muted);
}

.dtf-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.dtf-day {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--chronos-fg-primary);
    font-family: inherit;
    font-size: var(--text-base);
    cursor: pointer;
}
/* Borderless, so the sanctioned fill rather than a rim lift (00-tokens-base.css). Inside
   (hover: hover) so a phone does not keep the last tapped cell painted. */
@media (hover: hover) {
    .dtf-day:hover:not(:disabled):not(.picked) { background: var(--chronos-hover-bg); }
}
.dtf-day.muted-day { color: var(--chronos-day-muted); }
.dtf-day.picked {
    background: var(--chronos-day-selected);
    color: #FFFFFF;
    font-weight: var(--weight-semibold);
}
/* Today is a dot, not a ring: it must never read as a second selection. On the picked fill
   the dot goes white so it stays visible on the dark token in both themes. */
.dtf-day.today::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--chronos-violet);
}
.dtf-day.picked.today::after { background: #FFFFFF; }
.dtf-panel button:disabled { opacity: 0.5; cursor: default; }

/* The hour, behind the hairline. */
.dtf-time {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--chronos-outline);
}
.dtf-clock {
    width: 46px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--chronos-outline);
    border-radius: 8px;
    background: var(--chronos-card-bg);
    color: var(--chronos-fg-primary);
    font-family: var(--chronos-font-mono);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
}
.dtf-clock:focus { border-color: var(--chronos-violet); }
.dtf-clock:disabled { opacity: 0.5; }
/* The same inset every dark field takes (24-theme-dark.css .modal-search): card-on-card
   would leave only the rim to say "type here". */
html[data-theme="dark"] .dtf-clock { background: var(--chronos-bg); }
.dtf-colon {
    font-family: var(--chronos-font-mono);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--chronos-fg-muted);
}
.dtf-eod { margin-left: auto; }
.dtf-time .chip,
.dtf-foot .chip {
    padding: 5px 11px;
    font-size: var(--text-sm);
}

.dtf-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Clear is a quiet word, not a button: the destructive-looking thing here is the deadline,
   not its removal. The negative margin keeps its text on the panel's left edge. */
.dtf-clear {
    padding: 4px 8px;
    margin-left: -8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--chronos-fg-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}
@media (hover: hover) {
    .dtf-clear:hover:not(:disabled) { background: var(--chronos-hover-bg); }
}

/* Detail sidebar: a 204px column (06-planning-tasks.css .detail-body). The trigger keeps the
   column; the panel is anchored to the field's right edge and hangs left over the body. */
.detail-sidebar .dtf-panel {
    left: auto;
    right: 0;
    width: 280px;
}

/* Phones: a bottom sheet. */
@media (max-width: 720px) {
    .dtf-panel,
    .detail-sidebar .dtf-panel {
        position: fixed;
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        gap: 10px;
        padding: 14px;
        border-radius: 14px;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
    }
    .dtf-grid { gap: 4px; }
    .dtf-day { font-size: var(--text-md); }
    .dtf-clock { width: 52px; height: 40px; }
}