/* =============================================================================
   ÜBERNOMMEN aus tools (public/assets/datum.css, Stand 16.10.2026), unverändert.
   Die Variablen, die es erwartet (--brand, --ink, --muted, --g-…), legt
   stil.css im Abschnitt „Datum & Uhrzeit“ auf die Namen dieses Projekts um.

   Datum & Uhrzeit (assets/datum.js) – Aussehen wie in todo (todo.css, Abschnitt
   „Datum & Uhrzeit“): Schnellwahl als Glas-Chips, gewählt rot; Pille mit Pfeilen
   im Rot-Tint; Uhrzeit-Block klappt nach „Andere…“ weich auf; Kalender im Popover.
   Nur Variablen aus base.css und glanz.css. Fehlt glanz.css auf einer Seite,
   greifen die Rückfallwerte aus base.css – dann eben ohne Glanz, aber lesbar.
   Klassen mit dtm-Vorsilbe, damit nichts mit todo (td__, tdd__) zusammenstößt.
   ========================================================================== */

/* Das echte Feld bleibt im Formular, ist aber nicht mehr zu sehen. */
.dtm-native { display: none !important; }

.dtm { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 14px; line-height: 1.3; }
.dtm.is-open { z-index: 45; }            /* Popover über die folgenden Felder legen */
/* Vorfahren mit eigener Stapelebene (Glas-Karten …) für die Dauer des Popovers nach vorn (datum.js) */
.dtm-vorn { z-index: 45 !important; }
.dtm-vorn--pos { position: relative; }
.dtm__sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dtm--dt { gap: 14px; }
.dtm__lbl { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Schnellwahl: Chips wie .td__tg (Glas, gewählt rot) */
.dtm__tgs { display: flex; flex-wrap: wrap; gap: 6px; }
.dtm__tg {
    position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
    font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; color: var(--ink-2);
    background: var(--g-glass, color-mix(in srgb, var(--ink) 6%, transparent));
    border: 1px solid var(--g-glass-line, transparent); box-shadow: var(--g-glass-shadow, none);
    -webkit-backdrop-filter: var(--g-glass-blur, none); backdrop-filter: var(--g-glass-blur, none);
    transition: background .12s, box-shadow .12s, transform .1s, color .12s;
}
.dtm__tg svg { width: 14px; height: 14px; flex: none; }
.dtm__tg:hover { background: var(--g-glass-hover, color-mix(in srgb, var(--ink) 11%, transparent)); color: var(--ink); }
.dtm__tg:not(.on):active { background: var(--g-glass-press, color-mix(in srgb, var(--ink) 14%, transparent));
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 15%, transparent); transform: scale(.97); }
/* Gewählt schlägt Zeigen – sonst bleibt nach dem Klick die Hover-Farbe stehen. */
.dtm__tg.on, .dtm__tg.on:hover { background: var(--g-red, var(--brand)); color: #fff; border-color: transparent; box-shadow: var(--g-red-shadow, none); }
.dtm__tg.on:active { background: var(--g-red-press, var(--brand-dark)); box-shadow: var(--g-red-shadow-press, none); transform: scale(.97); }
.dtm__tg[disabled] { opacity: .45; cursor: default; transform: none; }
.dtm__tg:focus-visible, .dtm button:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.dtm__tg.on[aria-expanded] { box-shadow: none; }
.dtm__chev { width: 12px !important; height: 12px !important; margin: 0 -3px 0 -2px; transition: transform .18s ease; }
.dtm__tg[aria-expanded="true"] .dtm__chev { transform: rotate(180deg); }

/* Wertzeile: Pille links, in Worten rechts („morgen“, „in 3 Std.“) */
.dtm__val { display: flex; align-items: center; gap: 8px; min-height: 34px; min-width: 0; }
.dtm__rel { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dtm__emp { font-size: 13px; color: var(--muted); }
.dtm__emp--err { color: var(--danger); font-weight: 600; }
.dtm.is-invalid .dtm__tgs .dtm__tg:not([disabled]) { box-shadow: var(--g-glass-shadow, none), 0 0 0 2px var(--brand-light); }

/* Pille mit Pfeilen */
.dtm__step { display: inline-flex; align-items: stretch; height: 34px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark);
    max-width: 100%; min-width: 0; flex: 0 1 auto; }
.dtm__step button { position: relative; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; font: inherit; transition: background .12s, transform .1s; }
.dtm__step button:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.dtm__step button:active { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.dtm__step button[disabled] { cursor: default; opacity: .5; background: none; }
.dtm__arr, .dtm__x { width: 32px; flex: none; display: grid; place-items: center; }
.dtm__arr:first-child { border-radius: 999px 0 0 999px; }
.dtm__step > .dtm__arr:nth-child(3):last-child { border-radius: 0 999px 999px 0; }    /* Pflichtfeld: ohne × */
.dtm__mid { padding: 0 6px !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    font-variant-numeric: tabular-nums; }
.dtm__step .dtm__x { border-left: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); border-radius: 0 999px 999px 0; opacity: .85; }
.dtm__step svg { width: 15px; height: 15px; }

/* Uhrzeit-Block: Stundenraster + Minuten, weich auf- und zuklappend */
/* Der Abstand zum Feld darüber steckt im Inhalt (erstes Kind), nicht im Außenabstand: so wird nur
   grid-template-rows animiert und kein Margin – zugeklappt hebt -8px die Lücke des Elternblocks auf. */
.dtm__xp { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: -8px; transition: grid-template-rows .22s ease, opacity .18s ease; }
.dtm__xp.open { grid-template-rows: 1fr; opacity: 1; }
.dtm__xp-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.dtm__xp-in > :first-child { margin-top: 10px; }
.dtm__hgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.dtm__hc { position: relative; height: 30px; border: 0; border-radius: 8px; padding: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); transition: background .12s, color .12s, transform .1s; }
.dtm__hc:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); color: var(--ink); }
.dtm__hc:active { background: color-mix(in srgb, var(--ink) 15%, transparent); transform: scale(.94); }
.dtm__hc.on, .dtm__hc.on:hover { background: var(--g-red, var(--brand)); color: #fff; box-shadow: var(--g-red-shadow, none); }
.dtm__hc.on:active { background: var(--g-red-press, var(--brand-dark)); }
.dtm__hc[disabled] { opacity: .45; cursor: default; transform: none; }
.dtm__mins { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dtm__seg { display: inline-flex; background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: var(--g-field-shadow, none); border-radius: 9px; padding: 3px; gap: 2px; }
.dtm__seg button { position: relative; border: 0; background: none; height: 28px; padding: 0 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted);
    border-radius: 7px; font-variant-numeric: tabular-nums; transition: background .12s, color .12s; }
.dtm__seg button:not(.on):hover { background: var(--g-hover, color-mix(in srgb, var(--ink) 6%, transparent)); color: var(--ink); }
.dtm__seg button:not(.on):active { background: var(--g-press, color-mix(in srgb, var(--ink) 12%, transparent)); }
.dtm__seg button.on, .dtm__seg button.on:hover { background: var(--g-red, var(--brand)); color: #fff; box-shadow: var(--g-red-shadow, none); }
.dtm__seg button.on:active { background: var(--g-red-press, var(--brand-dark)); box-shadow: var(--g-red-shadow-press, none); }
.dtm__seg button[disabled] { opacity: .45; cursor: default; }

/* Popover (Kalender, genaue Uhrzeit). In schmalen Rasterzellen mindestens so breit wie
   ein lesbarer Kalender; datum.js schiebt es nach links, falls es aus dem Fenster ragt. */
.dtm__pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: max(100%, 288px); max-width: calc(100vw - 16px); box-sizing: border-box;
    background: var(--paper); border: 1px solid var(--bd); border-radius: var(--g-r, 12px); box-shadow: var(--shadow-lg);
    padding: 12px; display: flex; flex-direction: column; gap: 10px; animation: dtm-in .14s ease-out; }
@keyframes dtm-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
.dtm__pop-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dtm__pop-l { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dtm__pop input.dtm__exact { flex: 1 1 110px; width: auto; min-width: 0; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-size: 14.5px;
    background: var(--g-field, color-mix(in srgb, var(--ink) 5%, transparent)); box-shadow: var(--g-field-shadow, none); color: var(--ink); outline: none; }
.dtm__pop input.dtm__exact:focus { box-shadow: var(--g-field-shadow, none), 0 0 0 2px var(--brand-light); }
.dtm__ok { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--g-red, var(--brand)); box-shadow: var(--g-red-shadow, none); color: #fff;
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s, box-shadow .12s, transform .1s; }
.dtm__ok:hover { background: var(--g-red-hover, var(--brand-dark)); }
.dtm__ok:active { background: var(--g-red-press, var(--brand-dark)); box-shadow: var(--g-red-shadow-press, none); transform: scale(.98); }
.dtm__ib { position: relative; width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; padding: 0;
    transition: background .12s, transform .1s; }
.dtm__ib:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.dtm__ib:active { background: color-mix(in srgb, var(--ink) 12%, transparent); transform: scale(.94); }
.dtm__ib svg { width: 16px; height: 16px; }
.dtm__cal-h { display: flex; align-items: center; gap: 2px; margin: 0 0 4px; }
.dtm__cal-m { flex: 1; font-weight: 700; font-size: 14px; letter-spacing: -.01em; padding-left: 4px; color: var(--ink); }
.dtm__cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dtm__cal-w { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0 4px; }
.dtm__cal-d { position: relative; height: 34px; border: 0; background: none; border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; padding: 0;
    font-variant-numeric: tabular-nums; transition: background .12s, transform .1s; }
.dtm__cal-d:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dtm__cal-d:active { background: color-mix(in srgb, var(--ink) 12%, transparent); transform: scale(.94); }
.dtm__cal-d.out { color: var(--muted); opacity: .55; }
.dtm__cal-d.today { color: var(--brand-dark); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--brand-light); }
.dtm__cal-d.on, .dtm__cal-d.on:hover { background: var(--g-red, var(--brand)); color: #fff; font-weight: 700; opacity: 1; box-shadow: var(--g-red-shadow, none); }
/* außerhalb von min/max: ansteuerbar (Pfeiltasten), nicht wählbar */
.dtm__cal-d.off, .dtm__cal-d.off:hover, .dtm__cal-d.off:active { color: var(--muted); opacity: .35; background: none; cursor: default; transform: none; text-decoration: line-through; }

/* Gesperrt (disabled/readonly) */
.dtm.is-off .dtm__step { opacity: .7; }

@media (prefers-color-scheme: dark) {
    .dtm__step { color: var(--brand-light); }
    .dtm__cal-d.today { color: var(--brand-light); }
    .dtm__seg button:not(.on):hover { background: var(--g-hover, rgba(255, 255, 255, .08)); }
}

/* Finger: wie in todo wachsen die Ziele (Chips 38, Raster und Pille 40 px); den Rest bis
   44 px holt eine unsichtbare Trefferfläche, ohne dass sich Nachbarn überlappen
   (Abstand 6 px zwischen Chips, 4 px im Raster, 2 px im Kalender). */
@media (pointer: coarse) {
    .dtm__tg { height: 38px; }
    .dtm__tg::after { content: ""; position: absolute; inset: -3px -2px; }
    .dtm__hc { height: 40px; }
    .dtm__hc::after { content: ""; position: absolute; inset: -2px; }
    .dtm__seg button { height: 38px; }
    .dtm__seg button::after { content: ""; position: absolute; inset: -3px -1px; }
    .dtm__step { height: 44px; }
    .dtm__arr, .dtm__step .dtm__x { width: 44px; }
    .dtm__pop { width: max(100%, 332px); }      /* 7 × 44 px Tagesraster + Rand */
    .dtm__cal-d { height: 42px; }
    .dtm__cal-d::after { content: ""; position: absolute; inset: -1px; }
    .dtm__ib { width: 44px; height: 44px; }
    .dtm__ok, .dtm__pop input.dtm__exact { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .dtm__xp, .dtm__chev, .dtm__pop, .dtm__tg, .dtm__hc, .dtm__step button, .dtm__cal-d, .dtm__ib, .dtm__ok { transition: none; animation: none; }
}