/* Al-Manara brand accent for the shared date/time picker - same in light and dark mode.
   Load AFTER flatpickr.min.css and flatpickr-dark.css (dark.css is scoped to html:not(.mn-light));
   `html:root` makes these win over both themes on specificity. */
html:root .flatpickr-day.selected,
html:root .flatpickr-day.selected:hover,
html:root .flatpickr-day.selected:focus,
html:root .flatpickr-day.startRange,
html:root .flatpickr-day.endRange,
html:root .flatpickr-day.startRange:hover,
html:root .flatpickr-day.endRange:hover {
  background: #DAA520;
  border-color: #DAA520;
  color: #111;
}
html:root .flatpickr-day.inRange,
html:root .flatpickr-day.inRange:hover {
  background: rgba(218, 165, 32, .22);
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(218, 165, 32, .22), 5px 0 0 rgba(218, 165, 32, .22);
}
html:root .flatpickr-day.today { border-color: #DAA520; }
html:root .flatpickr-day.today:hover,
html:root .flatpickr-day.today:focus { background: #DAA520; border-color: #DAA520; color: #111; }

/* sizes from the system type scale (assets/mn-type.css) */
.flatpickr-calendar { font-size: var(--fs-value, 14px); }
.flatpickr-day { font-size: var(--fs-body, 14px); }
html:root .flatpickr-weekday { font-size: var(--fs-caption, 11px); }
.flatpickr-current-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { font-size: var(--fs-value, 14px); }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { font-size: var(--fs-value, 14px); }

/* the readable twin of a due-date field (assets/mn-due-picker.js, altInputClass): the same field look as the rest of the system, never the browser default white */
input.mn-due-input { background: var(--surface-2, #0f1115); border: 1px solid var(--rule, #374151); border-radius: 8px; padding: 6px 10px; color: var(--ink, inherit); font: inherit; min-width: 210px; max-width: 100%; }
input.mn-due-input::placeholder { color: var(--ink-faint, #94a3b8); }
input.mn-due-input:focus { outline: 2px solid var(--blue, #60a5fa); outline-offset: 1px; }
input.mn-due-input:disabled { opacity: .6; cursor: not-allowed; }

/* LIGHT mode: the stock popup is white with a faint shadow and disappears on a white dialog (Manar, 2026-10-15). The light identity is
   BLUE (the tokens of the light theme: --blue, --blue-wash): a blue-washed card, a clear blue edge, a real shadow, stronger blue for the header,
   the hovered day and the chosen day (instead of the brand gold, which is the dark theme's accent). Tokens live on body, the popup is appended to it. */
html.mn-light .flatpickr-calendar { background: var(--blue-wash, #e9f0fe); border: 1px solid color-mix(in srgb, var(--blue, #2563eb) 38%, #ffffff); box-shadow: 0 18px 44px rgba(20, 25, 35, .28), 0 2px 8px rgba(20, 25, 35, .14); }
html.mn-light .flatpickr-months { background: color-mix(in srgb, var(--blue, #2563eb) 16%, #ffffff); border-radius: 5px 5px 0 0; }
html.mn-light .flatpickr-weekdays { background: color-mix(in srgb, var(--blue, #2563eb) 9%, #ffffff); }
html.mn-light .flatpickr-time { border-top: 1px solid color-mix(in srgb, var(--blue, #2563eb) 25%, #ffffff); background: color-mix(in srgb, var(--blue, #2563eb) 12%, #ffffff); }
html.mn-light .flatpickr-day:hover { background: color-mix(in srgb, var(--blue, #2563eb) 18%, #ffffff); border-color: transparent; }
html:root.mn-light .flatpickr-day.selected,
html:root.mn-light .flatpickr-day.selected:hover,
html:root.mn-light .flatpickr-day.selected:focus { background: var(--blue, #2563eb); border-color: var(--blue, #2563eb); color: #ffffff; }
html:root.mn-light .flatpickr-day.today { border-color: var(--blue, #2563eb); }
html:root.mn-light .flatpickr-day.today:hover,
html:root.mn-light .flatpickr-day.today:focus { background: color-mix(in srgb, var(--blue, #2563eb) 18%, #ffffff); border-color: var(--blue, #2563eb); color: inherit; }