/* =========================================================
   PAN PANEL – LIGHT THEME OVERRIDE
   Drop this AFTER your existing dark :root block.
   Scopes light colors to the panel only — nothing else
   on the page is affected.
   ========================================================= */

/* ── Panel-scoped token overrides ── */
.pan-panel,
.pan-panel * {
  --bg-deep:       #f1f5f9;       /* input / field background  */
  --bg-card:       #ffffff;       /* panel surface             */
  --bg-card-hover: #e8f0fe;       /* hover tint                */
  --border:        rgba(37, 99, 235, 0.14);
  --border-hover:  rgba(37, 99, 235, 0.35);
  --violet:        #2563eb;       /* primary blue              */
  --violet-soft:   rgba(37, 99, 235, 0.08);
  --cyan:          #0ea5e9;       /* accent                    */
  --cyan-soft:     rgba(14, 165, 233, 0.10);
  --text-primary:  #0f172a;
  --text-muted:    #64748b;
  --glow-violet:   0 0 18px rgba(37, 99, 235, 0.18);
  --glow-cyan:     0 0 14px rgba(14, 165, 233, 0.18);
}

/* ── Panel shell ── */
.pan-panel {
  background: #ffffff;
  border-left: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow: -6px 0 32px rgba(15, 23, 42, 0.09);
  color: #0f172a;
}

/* ── Header ── */
.pan-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(37, 99, 235, 0.10);
}

.pan-header h2 {
  color: #0f172a;
}

.pan-header p {
  color: #64748b;
  font-size: 13px;
  margin: 2px 0 0;
}

.pan-close {
  color: #94a3b8;
}

.pan-close:hover {
  color: #2563eb;
}

/* ── Step headings ── */
.pan-step h3 {
  color: #0f172a;
}

/* ── Labels ── */
.pan-step-section label {
  color: #1e293b;
}

/* ── Inputs, textareas, selects ── */
.pan-step-section input,
.pan-step-section textarea,
.pan-step-section select {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid rgba(37, 99, 235, 0.15);
}

.pan-step-section input::placeholder,
.pan-step-section textarea::placeholder {
  color: #94a3b8;
}

.pan-step-section input:focus,
.pan-step-section textarea:focus,
.pan-step-section select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
  background: #ffffff;
}

/* ── Date / time icons visible on light bg ── */
.pan-step-section input[type="date"],
.pan-step-section input[type="time"] {
  color-scheme: light;
}

.pan-step-section input[type="date"]::-webkit-calendar-picker-indicator,
.pan-step-section input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;           /* remove the invert(1) from the dark theme */
  opacity: 0.6;
  cursor: pointer;
}

.pan-step-section input[type="date"]::-webkit-calendar-picker-indicator:hover,
.pan-step-section input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Scoped override for the global rule further up */
.pan-panel input[type="date"],
.pan-panel input[type="time"] {
  color-scheme: light;
}

.pan-panel input[type="date"]::-webkit-calendar-picker-indicator,
.pan-panel input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.6;
}

/* ── File upload ── */
.pan-step-section input[type="file"] {
  background: #f8fafc;
  border: 1.5px dashed rgba(37, 99, 235, 0.25);
  color: #64748b;
}

/* ── Service option cards (Step 1) ── */
.pan-service-card {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid rgba(37, 99, 235, 0.14);
}

.pan-service-card:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.05);
}

.pan-service-card:has(input:checked) {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}

/* ── Generic card blocks ── */
.pan-card {
  background: #f8fafc;
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.pan-card:hover {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

/* ── Bill card ── */
.pan-bill-card {
  background: #f1f5f9;
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.pan-bill-card .bill-row {
  color: #64748b;
}

.pan-bill-card hr {
  border-top: 1px dashed rgba(37, 99, 235, 0.18);
}

.pan-bill-card .total {
  color: #2563eb;
}

/* ── Checkbox grid ── */
.pan-checkbox label {
  color: #1e293b;
}

.pan-checkbox label:hover {
  color: #2563eb;
}

.pan-checkbox input[type="checkbox"] {
  accent-color: #2563eb;
}

/* ── Upload cards (glass → flat light) ── */
.pan-upload-card {
  background: #f8fafc;
  border: 1px solid rgba(37, 99, 235, 0.14);
  backdrop-filter: none;   /* remove glass blur — not needed on light */
}

.pan-upload-card:hover {
  border-color: rgba(37, 99, 235, 0.30);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08);
  background: #f0f7ff;
}

.upload-info strong {
  color: #0f172a;
}

.upload-info span {
  color: #64748b;
}

.upload-btn {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
}

.upload-btn:hover {
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.30);
}

.file-name {
  color: #2563eb;
}

/* ── Check pills ── */
.check-pill span {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid rgba(37, 99, 235, 0.14);
}

.check-pill input:checked + span {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

.check-pill span:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.05);
}

/* ── Footer ── */
.pan-footer {
  background: #ffffff;
  border-top: 1px solid rgba(37, 99, 235, 0.10);
}

.pan-next {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
}

.pan-next:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.32);
  color: #ffffff;
}

.pan-back {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid rgba(37, 99, 235, 0.14);
}

.pan-back:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: #2563eb;
  color: #2563eb;
}

.pan-next.disabled,
.pan-next:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* ── input-icon FA calendar ── */
.input-icon::after {
  color: #2563eb;
  opacity: 0.65;
}

.input-icon:hover::after {
  opacity: 1;
}