/* ============================================================
   Mythox — branded date-picker (Phase 1)
   Minimal, layout-safe global tweaks to native date inputs (so we
   never break existing table cells / styled fields) + the branded
   month-grid popover (CreatorDate).
   ============================================================ */

/* Global, layout-safe: hide the ugly native picker glyph + give a
   pointer + a brand focus ring. No padding/border/width changes, so
   finance table cells and already-styled inputs keep their look. */
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="date"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-soft, rgba(198,255,63,.2));
  border-color: var(--accent, #C6FF3F);
}

/* The branded popover */
#cos-datepop {
  position: fixed;
  z-index: 100000;              /* above guided overlay (9999) + money pop */
  width: 268px;
  background: var(--surface, #0E1213);
  border: 1px solid var(--line-2, rgba(255,255,255,.12));
  border-radius: var(--radius, 14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 12px;
  color: var(--text, #F3F7EF);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s var(--ease, ease), transform .14s var(--ease, ease);
}
#cos-datepop.open { opacity: 1; transform: translateY(0); }

#cos-datepop .cd-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
#cos-datepop .cd-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-weight: 600; font-size: 14px; letter-spacing: .2px;
}
#cos-datepop .cd-nav {
  width: 30px; height: 30px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2, #151B1C);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 9px; color: var(--text, #F3F7EF);
  font-size: 17px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
#cos-datepop .cd-nav:hover { background: var(--surface-3, #1C2425); border-color: var(--accent, #C6FF3F); }

#cos-datepop .cd-dows {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
#cos-datepop .cd-dow {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--muted, rgba(243,247,239,.55)); padding: 4px 0;
}
#cos-datepop .cd-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
#cos-datepop .cd-cell {
  height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
#cos-datepop .cd-empty { visibility: hidden; }
#cos-datepop .cd-day {
  background: transparent; border: 1px solid transparent;
  color: var(--text, #F3F7EF); cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
}
#cos-datepop .cd-day:hover { background: var(--surface-2, #151B1C); }
#cos-datepop .cd-today { border-color: var(--line-2, rgba(255,255,255,.18)); }
#cos-datepop .cd-sel {
  background: var(--accent, #C6FF3F);
  color: var(--ink-on-accent, #0A0D05);
  font-weight: 700; border-color: var(--accent, #C6FF3F);
}
#cos-datepop .cd-sel:hover { background: var(--accent-2, #7FE000); }

#cos-datepop .cd-foot {
  display: flex; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
#cos-datepop .cd-btn {
  flex: 1; padding: 7px 0; border-radius: 9px;
  background: var(--surface-2, #151B1C);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  color: var(--text, #F3F7EF); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s;
}
#cos-datepop .cd-btn:hover { background: var(--surface-3, #1C2425); border-color: var(--accent, #C6FF3F); }
#cos-datepop .cd-clear { color: var(--muted, rgba(243,247,239,.62)); }