/* SFC Pulse — rounded custom date/time picker (Style A). Progressive enhancement over native
   <input type=date|time> on pointer:fine (desktop); mobile keeps the native wheel. Light/dark via
   [data-theme="dark"]; the selected accent follows the user's theme (--fp-accent set from JS). */
:root{
  --fp-bg:#ffffff; --fp-border:#e6e9f0; --fp-text:#0f172a; --fp-sub:#64748b;
  --fp-muted:#94a3b8; --fp-hover:#f1f5f9; --fp-shadow:0 12px 34px rgba(15,23,42,.16);
  --fp-accent:#4f46e5; --fp-on:#ffffff;
}
:root[data-theme="dark"]{
  --fp-bg:#161c26; --fp-border:#2a3342; --fp-text:#e8ebf1; --fp-sub:#94a3b8;
  --fp-muted:#5b6675; --fp-hover:#1e2632; --fp-shadow:0 12px 34px rgba(0,0,0,.5);
  --fp-accent:#6366f1;
}
/* Hide the native calendar/clock indicator on enhanced (desktop) fields only. */
.fp-on::-webkit-calendar-picker-indicator{ display:none; }
.fp-on{ cursor:pointer; text-align:center; }   /* centre the date/time value in the field */

.fp-pop{
  position:absolute; z-index:1000; background:var(--fp-bg); color:var(--fp-text);
  border:1px solid var(--fp-border); border-radius:16px; box-shadow:var(--fp-shadow);
  padding:12px; font-size:13px; -webkit-user-select:none; user-select:none;
  opacity:0; transform:translateY(-4px); transition:opacity .12s ease, transform .12s ease;
}
.fp-pop.fp-show{ opacity:1; transform:translateY(0); }

/* calendar */
.fp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
.fp-title{ font-size:13px; font-weight:600; color:var(--fp-text); }
.fp-nav{ display:flex; gap:4px; }
.fp-nav button{ width:28px; height:28px; border:0; background:transparent; color:var(--fp-sub);
  border-radius:8px; cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; }
.fp-nav button:hover{ background:var(--fp-hover); color:var(--fp-text); }
.fp-wd{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:2px; }
.fp-wd span{ text-align:center; font-size:10px; font-weight:600; color:var(--fp-muted); padding:2px 0; }
.fp-grid{ display:grid; grid-template-columns:repeat(7,34px); gap:2px; }
.fp-day{ height:34px; border:0; background:transparent; color:var(--fp-text); border-radius:9px;
  cursor:pointer; font-size:12px; transition:background .1s; }
.fp-day:hover:not(.fp-dis):not(.fp-sel){ background:var(--fp-hover); }
.fp-day.fp-sel{ background:var(--fp-accent); color:var(--fp-on); font-weight:700; }
.fp-day.fp-today:not(.fp-sel){ box-shadow:inset 0 0 0 1.5px var(--fp-accent); }
.fp-day.fp-mut{ color:var(--fp-muted); opacity:.55; }
.fp-day.fp-dis{ color:var(--fp-muted); opacity:.35; cursor:not-allowed; }
.fp-actions{ display:flex; justify-content:space-between; margin-top:8px; }
.fp-actions button{ border:0; background:transparent; color:var(--fp-accent); font-size:12px;
  font-weight:600; cursor:pointer; padding:4px 8px; border-radius:8px; }
.fp-actions button:hover{ background:var(--fp-hover); }

/* time */
.fp-time{ display:flex; gap:8px; }
.fp-col{ display:flex; flex-direction:column; }
.fp-col .fp-cl{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--fp-muted); text-align:center; margin-bottom:4px; }
.fp-scroll{ max-height:196px; overflow-y:auto; padding-right:2px; scrollbar-width:thin; }
.fp-scroll::-webkit-scrollbar{ width:6px; }
.fp-scroll::-webkit-scrollbar-thumb{ background:var(--fp-border); border-radius:6px; }
.fp-opt{ display:block; width:52px; text-align:center; border:0; background:transparent; color:var(--fp-text);
  font-size:13px; padding:7px 0; margin-bottom:3px; border-radius:9px; cursor:pointer; transition:background .1s; }
.fp-opt:hover:not(.fp-sel){ background:var(--fp-hover); }
.fp-opt.fp-sel{ background:var(--fp-accent); color:var(--fp-on); font-weight:700; }