/* Shared, platform-wide date/time input styling (owner binding
   directive, 2026-09-17; calendar rebuild 2026-09-17 P0 hotfix).
   Deliberately minimal/neutral so the INPUT itself inherits sanely
   inside any theme's own form styling - themes are free to override
   .platform-date-input/.platform-time-input's own look via their own
   more specific selectors.

   CALENDAR_REBUILD_2026-09-17_P0: every interactive element INSIDE the
   popup (day/month/year cells, nav arrows, header labels) is styled
   with a 2-class compound selector - e.g. ".platform-date-calendar
   .platform-date-cal-day" - which has higher CSS specificity than any
   single-class-plus-element global reset such as admin CSS's
   "body.admin-app button" (comparing specificity tuples, two classes
   beats one class plus two elements). The visual properties that must
   never leak in from elsewhere (background, color, padding, width,
   height, border, font) also carry !important as defense in depth,
   since a future global rule could otherwise win again by being even
   more specific. Root cause of the reported P0 defect: the OLD popup
   used single-class selectors that lost this specificity contest
   against "body.admin-app button", AND always positioned a fixed 4px
   below its anchor with no viewport check - on any field positioned
   low on the page, most of the day grid rendered below the browser's
   viewport, which is what the "missing day numbers" / "empty white
   box" screenshots actually showed. */
.platform-date-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.platform-date-input,
.platform-time-input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.platform-date-input-wrap .platform-date-trigger {
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  background: transparent !important;
  border-radius: 6px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.platform-date-input-wrap .platform-date-trigger:hover { background: rgba(0, 0, 0, 0.05) !important; }
.platform-date-input-wrap .platform-date-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.platform-date-calendar {
  z-index: 3000;
  background: #fff;
  color: #172033;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 10px;
  width: 296px;
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto;
  font-size: 13px;
  box-sizing: border-box;
}
.platform-date-calendar * {
  box-sizing: border-box;
}

.platform-date-calendar .platform-date-cal-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 8px;
  font-weight: 600;
}
.platform-date-calendar .platform-date-cal-nav {
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  flex: 0 0 auto;
}
.platform-date-calendar .platform-date-cal-nav:hover { background: rgba(0, 0, 0, 0.06) !important; }

.platform-date-calendar .platform-date-cal-label,
.platform-date-calendar .platform-date-cal-label-btn {
  font-size: 13px;
  text-align: center;
  flex: 1 1 auto;
}
.platform-date-calendar .platform-date-cal-label-btn {
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  font-weight: 600 !important;
  cursor: pointer;
  padding: 4px 6px !important;
  border-radius: 6px !important;
}
.platform-date-calendar .platform-date-cal-label-btn:hover { background: rgba(0, 0, 0, 0.06) !important; }

.platform-date-calendar .platform-date-cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px;
  text-align: center;
}
.platform-date-calendar .platform-date-cal-wd {
  font-size: 11px;
  color: #667085;
  padding: 4px 0;
}
.platform-date-calendar .platform-date-cal-day {
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  padding: 8px 0 !important;
  min-height: 36px;
  width: 100%;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-radius: 6px !important;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.platform-date-calendar .platform-date-cal-day:hover:not(.is-disabled) { background: rgba(37, 99, 235, 0.12) !important; }
.platform-date-calendar .platform-date-cal-day.is-today {
  box-shadow: inset 0 0 0 1px #2563eb;
  font-weight: 600 !important;
}
.platform-date-calendar .platform-date-cal-day.is-selected {
  background: #2563eb !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.platform-date-calendar .platform-date-cal-day.is-disabled {
  color: #c1c7d0 !important;
  cursor: not-allowed;
}

.platform-date-calendar .platform-date-cal-month-grid,
.platform-date-calendar .platform-date-cal-year-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px;
}
.platform-date-calendar .platform-date-cal-month,
.platform-date-calendar .platform-date-cal-year {
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  padding: 10px 4px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-radius: 6px !important;
  cursor: pointer;
  text-align: center;
}
.platform-date-calendar .platform-date-cal-month:hover,
.platform-date-calendar .platform-date-cal-year:hover { background: rgba(37, 99, 235, 0.12) !important; }
.platform-date-calendar .platform-date-cal-month.is-today,
.platform-date-calendar .platform-date-cal-year.is-today {
  box-shadow: inset 0 0 0 1px #2563eb;
  font-weight: 600 !important;
}
.platform-date-calendar .platform-date-cal-month.is-selected,
.platform-date-calendar .platform-date-cal-year.is-selected {
  background: #2563eb !important;
  color: #fff !important;
  font-weight: 600 !important;
}

@media (max-width: 400px) {
  .platform-date-calendar { width: calc(100vw - 16px); max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .platform-date-calendar { transition: none; }
}