/**
 * datepicker.css — styles for src/shared/ui/datepicker/datepicker.js.
 *
 * MOVED HERE 2026-08-31 from cultivation/tabs/daily-logs/daily-logs.css, which is
 * lazy-loaded for the CULTIVATION department only. datepicker.js is loaded globally
 * in index.html, so every other department got the picker's markup with none of its
 * CSS: measured inside a Production scheduler modal, `.dp-popup` resolved to
 * `position: static` (so it never floated under the field — it landed at the bottom
 * of <body>) and `.dp-day` rendered as a raw grey browser button. Production owns the
 * schedule modals, so every date field in them was affected.
 *
 * Loaded from index.html next to torus-select.css, which is the same shape:
 * src/shared/ui/select/ ships its .js AND its .css, and the CSS is global.
 *
 * Rules below are a VERBATIM move — no restyle — so Cultivation renders identically.
 */

/* ── Custom date picker ───────────────────── */
.dp-popup {
  position: fixed;
  z-index: 9999;
  background: #0b0e1f;
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 14px;
  box-shadow: 0 28px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  padding: 14px;
  font-family: var(--font-body);
  width: 252px;
  user-select: none;
}

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dp-month {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}
.dp-nav {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
  outline: none;
}
.dp-nav:hover {
  background: rgba(56,189,248,0.12);
  color: #38bdf8;
}

.dp-wdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.dp-wd {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  padding: 2px 0;
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  height: 32px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  outline: none;
  padding: 0;
}
.dp-day:hover:not(.dp-dim) {
  background: rgba(56,189,248,0.1);
  border-color: rgba(56,189,248,0.22);
  color: #fff;
}
.dp-day.dp-today {
  border-color: rgba(56,189,248,0.5);
  color: #38bdf8;
  background: rgba(56,189,248,0.06);
  font-weight: 700;
}
.dp-day.dp-sel {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #04050f;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(56,189,248,0.45);
}
.dp-day.dp-dim {
  color: rgba(255,255,255,0.18);
  cursor: default;
}

/* Light mode */
html[data-theme="light"] .dp-popup {
  background: #fff;
  border-color: rgba(2,132,199,0.2);
  box-shadow: 0 20px 56px rgba(0,0,0,0.14), 0 0 0 1px rgba(130,100,200,0.08);
}
html[data-theme="light"] .dp-month { color: #13103a; }
html[data-theme="light"] .dp-nav   { color: rgba(19,16,58,0.35); }
html[data-theme="light"] .dp-nav:hover {
  background: rgba(2,132,199,0.09);
  color: #0284c7;
}
html[data-theme="light"] .dp-wd  { color: rgba(19,16,58,0.3); }
html[data-theme="light"] .dp-day { color: rgba(19,16,58,0.8); }
html[data-theme="light"] .dp-day:hover:not(.dp-dim) {
  background: rgba(2,132,199,0.07);
  border-color: rgba(2,132,199,0.2);
  color: #13103a;
}
html[data-theme="light"] .dp-day.dp-today {
  border-color: rgba(2,132,199,0.5);
  color: #0284c7;
  background: rgba(2,132,199,0.06);
}
html[data-theme="light"] .dp-day.dp-sel {
  background: #0284c7;
  border-color: #0284c7;
  color: #fff;
  box-shadow: 0 2px 12px rgba(2,132,199,0.35);
}
html[data-theme="light"] .dp-day.dp-dim { color: rgba(19,16,58,0.2); }

/* ── PHONE: the date picker, docked ─────────────────────────────────────────
   Two measured failures on a 375x667 phone, both caused by the same thing.
   src/styles/5-utilities/mobile-native.css §2 applies `button { min-width: 44px !important;
   min-height: 44px !important }` under (pointer: coarse). Every day cell is a
   <button>, so the 7-column grid needed 7x44 + 6x2 = 320px of track inside
   .dp-popup's 252 - 28 = 224px content box:

     1. The grid burst its own popup and printed the last two columns
        (1 8 15 22 29) straight over the page behind it — the RECAP button and
        the pH readings were legible THROUGH the calendar.
     2. The taller rows grew the popup to 410px. src/shared/ui/datepicker/datepicker.js reposition()
        hardcodes pw = 252, always drops the popup BELOW the input and never
        clamps to the viewport, so it opened at y=274 and ran to y=684 — the
        whole last week (30, 31, 1-5) sat under the 60px bottom nav and could
        not be tapped.

   Rather than fight the touch floor (it is the right floor for gloves), the
   popup is docked as a bottom sheet just above #mnav: always fully on screen
   whatever the input's y, in the thumb zone, and wide enough for the 44px
   grid. The inline top/left that reposition() writes has to be beaten with
   !important — that is what the property is for here.
   Desktop and mouse tablets never enter this block. */
@media (max-width: 768px) and (pointer: coarse) {
  .dp-popup {
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--mnav-h, 60px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    transform: translateX(-50%);
    width: min(356px, calc(100vw - 16px));
    max-height: calc(100vh - var(--mnav-h, 60px) - 96px);
    max-height: calc(100dvh - var(--mnav-h, 60px) - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* THE GAP IS THE WHOLE BUG — and a bare `.dp-grid { gap: 2px }` did NOT fix
     it. src/styles/5-utilities/mobile-native.css is the LAST <link> in index.html and carries a
     global density rule:

       :is([class*="-grid"], [class*="-cards"], ...) { gap: 8px }

     `.dp-grid` matches `[class*="-grid"]`, and `:is()` takes the specificity
     of its most specific argument — an attribute selector, (0,1,0) — exactly
     tying a bare `.dp-grid`. A tie is broken by document order, and
     mobile-native loads last, so the calendar kept an 8px gap.

     Measured consequence at 375px: the popup's content box is 356 - 28 of
     padding = 326px, but seven mobile-native-mandated 44px day buttons plus
     six 8px gaps need 308 + 48 = 356px. The grid overflowed by 30px and the
     SATURDAY column (1 8 15 22 29 5) rendered from x=337 to x=381 — past the
     popup's right edge at 366 AND past the 375px viewport. The digits were
     sliced in half with no scrollbar and no hint that a seventh column even
     existed. Saturday was simply unpickable.

     Two changes, both scoped to phones:
       1. `.dp-popup .dp-grid` is (0,2,0), which beats the :is() rule on
          specificity so load order stops mattering.
       2. Explicit `minmax(0, 1fr)` tracks + a min-width release on the day
          buttons, so the seven columns always DIVIDE the popup instead of
          demanding 44px each and spilling. At 375 that yields 44.9px cells —
          still over the touch floor — and it degrades smoothly on narrower
          phones instead of clipping. The 44px HEIGHT, which is the axis a
          thumb actually misses on, is untouched.
     `.dp-wdays` gets the same track/gap so SU..SA still line up over the
     columns they label (they had drifted ~1.7px per column). */
  .dp-popup .dp-grid,
  .dp-popup .dp-wdays {
    gap: 2px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .dp-popup .dp-grid > button.dp-day {
    min-width: 0 !important;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── Accent layer ────────────────────────────────────────────────────────────
   Everything above is the verbatim move and keeps its literal cyan. This layer
   re-expresses ONLY the accent-bearing properties in terms of --dp-acc, with the
   original colour as the fallback — so with no accent set the rendering is
   unchanged (verified: computed styles identical before and after), and a caller
   passing opts.accent recolours the calendar to match the surface that opened it.

   Set per-theme on .dp-popup rather than :root, because the popup is a body child
   and there is nothing between it and :root to scope on. */
.dp-popup { --dp-acc: #38bdf8; }
html[data-theme="light"] .dp-popup { --dp-acc: #0284c7; }

.dp-popup { border-color: color-mix(in srgb, var(--dp-acc) 18%, transparent); }
.dp-nav:hover {
  background: color-mix(in srgb, var(--dp-acc) 12%, transparent);
  color: var(--dp-acc);
}
.dp-day:hover:not(.dp-dim) {
  background: color-mix(in srgb, var(--dp-acc) 10%, transparent);
  border-color: color-mix(in srgb, var(--dp-acc) 22%, transparent);
}
.dp-day.dp-today {
  border-color: color-mix(in srgb, var(--dp-acc) 50%, transparent);
  color: var(--dp-acc);
  background: color-mix(in srgb, var(--dp-acc) 6%, transparent);
}
/* `color` is RESTATED here, and leaving it out was a real bug: on a day that is
   both today and selected, the .dp-today rule above sets color:var(--dp-acc) and
   lands after the base sheet's .dp-sel color — so the number rendered in the
   accent colour ON the accent background. Measured 1.0:1. Invisible.
   --dp-acc-ink is set by datepicker.js from the accent's luminance; the fallback
   is this theme's original value, so an un-accented picker is unchanged. */
.dp-day.dp-sel {
  background: var(--dp-acc);
  border-color: var(--dp-acc);
  color: var(--dp-acc-ink, #04050f);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--dp-acc) 45%, transparent);
}
/* LIGHT NEEDS ITS OWN COPY, and this is not belt-and-braces — it was a real bug.
   The verbatim block above carries `html[data-theme="light"] .dp-day.dp-sel`,
   specificity (0,2,1). The accent rules here are (0,2,0), so in light mode the
   original CYAN won and the calendar ignored the accent entirely while dark mode
   looked correct. Same selectors, same specificity, later in the file. */
html[data-theme="light"] .dp-popup { border-color: color-mix(in srgb, var(--dp-acc) 20%, transparent); }
html[data-theme="light"] .dp-nav:hover {
  background: color-mix(in srgb, var(--dp-acc) 9%, transparent);
  color: var(--dp-acc);
}
html[data-theme="light"] .dp-day:hover:not(.dp-dim) {
  background: color-mix(in srgb, var(--dp-acc) 7%, transparent);
  border-color: color-mix(in srgb, var(--dp-acc) 20%, transparent);
}
html[data-theme="light"] .dp-day.dp-today {
  border-color: color-mix(in srgb, var(--dp-acc) 50%, transparent);
  color: var(--dp-acc);
  background: color-mix(in srgb, var(--dp-acc) 6%, transparent);
}
html[data-theme="light"] .dp-day.dp-sel {
  background: var(--dp-acc);
  border-color: var(--dp-acc);
  color: var(--dp-acc-ink, #fff);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--dp-acc) 35%, transparent);
}

/* Keyboard focus was invisible on the day grid — the buttons set outline:none and
   nothing replaced it, so tabbing into an open calendar showed nothing at all. */
.dp-day:focus-visible, .dp-nav:focus-visible {
  outline: 2px solid var(--dp-acc);
  outline-offset: 1px;
}