/* =========================================================
   StudyPilot Exam Backward Planner
   WordPress conflict-safe + input visibility safe
   ========================================================= */

.spx-ep, .spx-ep *{
  box-sizing: border-box !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* wrapper */
.spx-ep{
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 !important;
  background: transparent !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  line-height: 1.35 !important;
}

/* force readable text inside tool only */
.spx-ep,
.spx-ep p, .spx-ep span, .spx-ep div, .spx-ep li,
.spx-ep label, .spx-ep small, .spx-ep strong, .spx-ep em,
.spx-ep h1, .spx-ep h2, .spx-ep h3, .spx-ep h4, .spx-ep h5, .spx-ep h6{
  color: #f3f7ff !important;
}

.spx-ep a{ color:#bcd3ff !important; text-decoration: underline; }

.spx-card{
  background: #0b1220 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 18px !important;
  overflow: hidden;
}

.spx-card__header{ padding: 18px 18px 0; }
.spx-card__footer{
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04) !important;
}

.spx-h1{ font-size: 22px !important; font-weight: 900 !important; color:#fff !important; margin:0 0 6px !important; }
.spx-h2{ font-size: 18px !important; font-weight: 900 !important; color:#fff !important; margin:0 !important; }
.spx-h3{ font-size: 15px !important; font-weight: 900 !important; color:#fff !important; margin:0 0 6px !important; }
.spx-muted{ color: rgba(243,247,255,0.7) !important; }
.spx-tiny{ font-size: 12px !important; }

.spx-ep__topbar{ margin-bottom: 14px; }

.spx-ep__layout{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
  width: 100% !important;
  max-width: 100% !important;
}

/* fields */
.spx-field{ display: grid; gap: 7px; margin-bottom: 12px; }
.spx-field__label{ font-size: 13px; font-weight: 800; color:#fff !important; }
.spx-field__hint{ font-size: 12px; color: rgba(243,247,255,0.58) !important; }

/* inputs (includes critical date/time fix) */
.spx-ep input,
.spx-ep select,
.spx-ep textarea{
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  outline: none !important;
  opacity: 1 !important;
}

.spx-ep input::placeholder,
.spx-ep textarea::placeholder{
  color: rgba(243,247,255,0.55) !important;
}

.spx-ep input[type="date"],
.spx-ep input[type="time"],
.spx-ep input[type="datetime-local"]{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  opacity: 1 !important;
}

/* calendar icon visible */
.spx-ep input[type="date"]::-webkit-calendar-picker-indicator,
.spx-ep input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2);
  opacity: 0.9;
}

/* buttons */
.spx-ep button, .spx-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.spx-btn:hover{ background: rgba(255,255,255,0.14) !important; }
.spx-btn--primary{
  background: rgba(120,166,255,0.22) !important;
  border-color: rgba(120,166,255,0.78) !important;
}
.spx-ep button:disabled{ opacity: 0.6 !important; cursor: not-allowed !important; }

/* grids */
.spx-grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* stepper */
.spx-stepper{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 18px 18px;
}
.spx-step{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(243,247,255,0.72) !important;
  font-weight: 900;
  cursor: pointer;
}
.spx-step--active{
  background: rgba(120,166,255,0.22) !important;
  border-color: rgba(120,166,255,0.85) !important;
  color: #ffffff !important;
}
.spx-stepPane{ display:none; padding: 0 18px 18px; }
.spx-stepPane--active{ display:block; }

/* chips */
.spx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.spx-chip{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.06) !important;
  font-weight: 900;
  cursor:pointer;
}
.spx-chip--on{
  background: rgba(65,211,162,0.22) !important;
  border-color: rgba(65,211,162,0.85) !important;
}

/* subjects list */
#spxSubjectsList{ display: grid; gap: 10px; }
.spx-subjectRow{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.06) !important;
  padding: 12px;
}
.spx-subjectRow__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.spx-subjectRow__title{ font-weight:900; color:#fff !important; }
.spx-subjectRow__grid{
  display:grid;
  grid-template-columns: 1.2fr 0.6fr 0.6fr;
  gap: 10px;
}

/* pills + preview */
.spx-pill{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(243,247,255,0.78) !important;
  white-space: nowrap;
}

.spx-planWrap{
  padding: 14px 18px 18px;
  overflow-x: auto;
  max-height: 70vh;
}

.spx-status{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

/* responsive */
@media (max-width: 980px){
  .spx-ep__layout{ grid-template-columns: 1fr; }
  .spx-planWrap{ max-height: none; }
}
@media (max-width: 640px){
  .spx-grid2{ grid-template-columns: 1fr; }
  .spx-stepper{ grid-template-columns: 1fr 1fr; }
  .spx-subjectRow__grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   HOTFIX: Subject Name input not typing / text invisible
   (Some WP themes add overlays or force transparent input text)
   ========================================================= */

/* Ensure inputs are truly interactive */
.spx-ep input,
.spx-ep textarea,
.spx-ep select{
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  position: relative !important;
  z-index: 50 !important;
}

/* If a theme forces transparent text-fill, this keeps typed text visible */
.spx-ep input[type="text"],
.spx-ep input[type="number"],
.spx-ep input[type="date"],
.spx-ep input[type="time"],
.spx-ep textarea{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 0 #ffffff !important;  /* visibility fallback */
  caret-color: #ffffff !important;
}

/* Prevent any accidental overlay inside the subject row */
.spx-ep .spx-subjectRow,
.spx-ep .spx-subjectRow *{
  pointer-events: auto !important;
}

.spx-ep .spx-subjectRow{
  position: relative !important;
  z-index: 10 !important;
}