/* ══════════ SITE FORMS — shared behaviour styles ══════════
   Lives in lib/ (NOT css/) on purpose: a theme's own css/ folder REPLACES the
   project-root css/ wholesale at build time, so anything put there is invisible
   to themes that ship their own stylesheet. lib/ is always copied from the root,
   so these rules reach every theme.

   Injected automatically by the build on any page that renders a form.
   Every colour/size is a CSS variable — the admin's Forms → Confirmation
   message tab overrides them per site via :root. */

:root {
  /* Pop-up confirmation */
  --sf-modal-accent: #2ecc71;
  --sf-modal-bg: #ffffff;
  --sf-modal-text: #1a1a1a;
  --sf-modal-radius: 14px;
  --sf-modal-backdrop: rgba(0, 0, 0, .5);
  --sf-modal-width: 420px;
  /* Inline confirmation */
  --sf-inline-bg: #e9f9f0;
  --sf-inline-border: #96e6b8;
  --sf-inline-text: #1e7e4a;
  --sf-inline-radius: 4px;
}

/* ── Inline confirmation ── */
.sf-success,
.cf-success {
  padding: 12px 16px;
  background: var(--sf-inline-bg);
  border: 1px solid var(--sf-inline-border);
  border-radius: var(--sf-inline-radius);
  color: var(--sf-inline-text);
  font-size: 14px;
  line-height: 1.5;
}

/* Visible label for controls that can't use a placeholder (date inputs ignore
   it), so placeholder-styled themes still say what the field is for. */
.sf-field-lbl { display: block; margin-bottom: 6px; font-size: 14px; opacity: .8; }

/* ── Date fields ──────────────────────────────────────────────────────────
   What CSS can and can't reach on a native date input:
     • the FIELD + its calendar icon  → fully styleable (below)
     • `accent-color`                 → tints the native picker's selected day,
                                        so the calendar picks up the site colour
     • the dropdown calendar PANEL    → browser chrome, NOT styleable. Theming it
                                        fully would mean shipping a custom
                                        JS date-picker widget.
   A theme sets --sf-date-accent to its own colour. Do NOT declare a default for
   it in a :root block here — this file loads AFTER the theme stylesheet, so a
   :root default would override the theme's value. The fallback chain lives
   inline at the point of use instead, where the theme's :root still wins. */
input[type="date"] {
  /* The whole field is clickable (forms.js opens the picker on click), so it
     should read as clickable, not as a text box. */
  cursor: pointer;
  accent-color: var(--sf-date-accent, var(--sf-modal-accent, #2ecc71));
  color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  opacity: .55;
  transition: opacity .15s ease, background .15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
  background: color-mix(in srgb, var(--sf-date-accent, var(--sf-modal-accent, #2ecc71)) 16%, transparent);
}
input[type="date"]:focus-visible {
  outline: 2px solid var(--sf-date-accent, var(--sf-modal-accent, #2ecc71));
  outline-offset: 1px;
}
/* The inner spin/edit fields shouldn't show a text caret cursor. */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper { cursor: pointer; }
input[type="date"]::-webkit-datetime-edit-text { opacity: .5; padding: 0 2px; }

/* ══════════ THEMED DATE PICKER PANEL ══════════
   Replaces the browser's un-styleable native calendar on desktop (see
   datepicker.js). Everything here keys off --sf-date-accent, so it wears the
   site's colours automatically. */
.sf-dp {
  position: absolute;
  z-index: 10000;
  width: 296px;
  padding: 14px;
  background: var(--sf-dp-bg, #fff);
  color: var(--sf-dp-text, #222);
  border: 1px solid color-mix(in srgb, var(--sf-date-accent, #2ecc71) 22%, #d9d9d9);
  border-radius: var(--sf-dp-radius, 12px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
  font-size: 14px;
  line-height: 1.4;
  animation: sf-dp-in .12s ease-out;
}
@keyframes sf-dp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sf-dp { animation: none; } }

.sf-dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sf-dp-title { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.sf-dp-nav {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: inherit;
  transition: background .12s ease, color .12s ease;
}
.sf-dp-nav:hover:not(:disabled) { background: var(--sf-date-accent, #2ecc71); color: #fff; }
.sf-dp-nav:disabled { opacity: .25; cursor: default; }

.sf-dp-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.sf-dp-dows span { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .45; padding: 4px 0; }

.sf-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sf-dp-day {
  height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px;
  background: transparent; color: inherit;
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
button.sf-dp-day:hover:not(:disabled):not(.is-selected) { background: color-mix(in srgb, var(--sf-date-accent, #2ecc71) 15%, transparent); }
.sf-dp-day:disabled { opacity: .25; cursor: default; }
.sf-dp-day--out { opacity: .22; cursor: default; }
.sf-dp-day.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sf-date-accent, #2ecc71) 55%, transparent); font-weight: 700; }
.sf-dp-day.is-selected { background: var(--sf-date-accent, #2ecc71); color: #fff; font-weight: 700; }

.sf-dp-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .07); }
.sf-dp-link {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; padding: 4px 6px; border-radius: 6px;
  color: var(--sf-date-accent, #2ecc71);
}
.sf-dp-link:hover { background: color-mix(in srgb, var(--sf-date-accent, #2ecc71) 12%, transparent); }

/* Our panel replaces the native one, so hide the browser's calendar button and
   give the field its own affordance. */
.sf-dp-input::-webkit-calendar-picker-indicator { display: none !important; }
.sf-dp-input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-right: 42px !important;
}

/* ── Date range: two native date inputs side by side ── */
.sf-daterange { display: flex; gap: 12px; flex-wrap: wrap; }
.sf-daterange-part { flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-daterange-lbl { font-size: 12px; opacity: .75; }
.sf-daterange input[type="date"] { width: 100%; }

/* ── Pop-up confirmation ── */
body.sf-modal-open { overflow: hidden; }
.sf-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--sf-modal-backdrop);
}
.sf-modal[hidden] { display: none; }
.sf-modal-card {
  position: relative;
  width: 100%;
  max-width: var(--sf-modal-width);
  background: var(--sf-modal-bg);
  color: var(--sf-modal-text);
  border-radius: var(--sf-modal-radius);
  padding: 34px 30px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  animation: sf-modal-in .18s ease-out;
}
@keyframes sf-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sf-modal-card { animation: none; } }
.sf-modal-ico {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--sf-modal-accent);
}
.sf-modal-heading { margin: 0 0 8px; font-size: 22px; line-height: 1.3; }
.sf-modal-msg { margin: 0 0 22px; font-size: 15px; line-height: 1.55; opacity: .8; }
.sf-modal-ok {
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--sf-modal-accent);
  border-radius: 999px;
  padding: 11px 30px;
}
.sf-modal-ok:hover { filter: brightness(1.06); }
.sf-modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: currentColor;
  opacity: .4;
  padding: 4px;
}
.sf-modal-x:hover { opacity: .9; }

/* Error / status line the JS inserts under the submit row. */
.sf-status { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.sf-status-error { color: #dc2626; }