/* ============================================================
   NGT DNC Portal — tab-checker.css
   Checker-only visual rules: the widget card, phone input, result
   box, JSON highlight colors, mismatch banner, and phone history
   panel. NGT-theme and mobile fine-tuning overrides for these same
   classes stay in core.css (they're interleaved with other tabs'
   theme rules there) — this file covers the base look.
   ============================================================ */

.widget.checker-widget { background:var(--checker-card-bg,var(--widget-bg)) !important; border:1px solid var(--checker-card-border,transparent) !important; }
.widget-subtitle { text-align:center;color:var(--checker-subtitle,var(--text));font-size:16px;font-weight:600;line-height:1.5;margin-bottom:24px; }
.field-label { display:block;color:var(--text);font-size:14px;font-weight:600;margin-bottom:8px;text-align:center; }
.phone-input { width:100%;background:var(--input-bg);border:1px solid var(--border2);border-radius:8px;padding:14px 16px;color:var(--text);font-size:15px;outline:none;transition:all 0.2s;margin-bottom:12px; }
.phone-input::placeholder { color:var(--text4); }
.phone-input:focus { background:var(--input-focus);border-color:rgba(255,255,255,0.4); }

/* ── RESULT BOX ── */
.result-box { width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:14px 16px;min-height:50px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;transition:all 0.3s; }
.result-box.has-result { align-items:flex-start;justify-content:flex-start; }
.result-box.bad-result, .result-bad { color:var(--clr-bad,#f87171) !important; }
.result-box.good-result, .result-good { color:var(--clr-good,#4ade80) !important; }
/* ── JSON ── */
.json-pre { font-family:'Consolas','Monaco','Courier New',monospace;font-size:18px;line-height:2;color:#d4d4d4;white-space:pre;word-break:normal;overflow-x:auto;width:100%; }
.json-key { color:#9cdcfe; }
.json-str { color:#ce9178; }
.json-str.highlight-good { color:#4ade80;font-weight:800;font-size:22px; }
.json-str.highlight-bad  { color:#ff4444;font-weight:900;font-size:22px;letter-spacing:.5px; }
.json-key.key-important  { color:#fff;font-weight:800;font-size:20px; }
.json-num { color:#b5cea8; }
.json-bool { color:#569cd6; }
.json-null { color:#569cd6; }
/* ── WARNING ── */
.warning-box { background:var(--checker-warning-bg,#f5f500);border-radius:6px;padding:10px 14px;color:var(--checker-warning-text,#111);font-size:12px;font-weight:600;line-height:1.55;text-align:center; }
.checker-reset-btn { background:var(--checker-reset-bg,rgba(255,255,255,0.07));border:1px solid rgba(255,255,255,0.15);color:var(--checker-reset-text,rgba(255,255,255,0.5)); }
.checker-reset-btn:hover { background:rgba(255,255,255,0.13);color:#fff; }

/* ══ MISMATCH FLASH ══ */
@keyframes mismatchPulse { 0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,0)} 25%,75%{box-shadow:0 0 0 6px rgba(248,113,113,.4),0 0 30px rgba(248,113,113,.25)} }
.mismatch-banner { background:rgba(248,113,113,.12);border:1.5px solid rgba(248,113,113,.5);border-radius:10px;padding:12px 16px;margin-top:10px;animation:mismatchPulse 1.2s ease 3;display:flex;gap:10px;align-items:flex-start; }
.mismatch-banner-icon { font-size:20px;flex-shrink:0; }
.mismatch-banner-body { font-size:12px;color:#f87171;line-height:1.6; }
.mismatch-banner-body strong { font-weight:800; }

/* ══ DUPLICATE WARNING / HISTORY PANEL ══ */
.dup-warn { background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);border-radius:8px;padding:8px 12px;margin-top:8px;font-size:11px;color:#fbbf24;display:flex;gap:8px;align-items:center; }

.phone-history-panel {
  margin-top:10px;
  background:rgba(251,191,36,.06);
  border:1px solid rgba(251,191,36,.28);
  border-radius:12px;
  overflow:hidden;
  animation:histPanelIn .25s cubic-bezier(.34,1.2,.64,1);
}
@keyframes histPanelIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.php-header {
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 14px;cursor:pointer;
  background:rgba(251,191,36,.08);border-bottom:1px solid rgba(251,191,36,.18);
  user-select:none;
}
.php-header:hover { background:rgba(251,191,36,.13); }
.php-title { font-size:12px;font-weight:800;color:#fbbf24;display:flex;align-items:center;gap:7px; }
.php-count-badge {
  background:rgba(251,191,36,.25);border:1px solid rgba(251,191,36,.5);
  color:#fbbf24;font-size:10px;font-weight:800;
  padding:1px 8px;border-radius:10px;letter-spacing:.3px;
}
.php-chevron { font-size:11px;color:rgba(251,191,36,.6);transition:transform .2s; }
.php-chevron.open { transform:rotate(180deg); }
.php-body { display:none;max-height:280px;overflow-y:auto; }
.php-body.open { display:block; }
.php-row {
  display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:center;
  padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.04);font-size:11px;
  transition:background .15s;
}
.php-row:last-child { border-bottom:none; }
.php-row:hover { background:rgba(255,255,255,.04); }
.php-user { font-weight:700;color:#fff; }
.php-status-pill { font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;white-space:nowrap; }
.php-time { font-size:10px;color:rgba(255,255,255,.3);text-align:right;white-space:nowrap; }
.php-load-all { display:block;width:100%;padding:8px;text-align:center;font-size:11px;color:rgba(251,191,36,.6);background:none;border:none;border-top:1px solid rgba(251,191,36,.15);cursor:pointer;font-weight:700;transition:color .18s; }
.php-load-all:hover { color:#fbbf24; }

/* ══════════════════════════════════════════════════════════
   NGT-THEME (light theme) overrides — moved here from core.css
   so the checker tab's light-theme styling lives with the rest
   of its rules instead of interleaved with other tabs' overrides.
   ══════════════════════════════════════════════════════════ */
html[data-theme="ngt"] .php-time { color:#a8a29e !important; }
html[data-theme="ngt"] .checker-reset-btn { border-color:#c0b08a !important; }
html[data-theme="ngt"] .phone-input {
  background:#f7f0dc !important;
  color:#1c1917 !important;
  border-color:#c0b08a !important;
}
html[data-theme="ngt"] .json-str.highlight-good { color:#15803d !important; }
html[data-theme="ngt"] .mismatch-banner-body { color:#b91c1c !important; }
html[data-theme="ngt"] .dup-warn,
html[data-theme="ngt"] .php-title,
html[data-theme="ngt"] .php-load-all:hover { color:#a16207 !important; }

/* ══ NGT BLUE — WAVE 3 PATCH (DNC checker + Bulk cards) ══ */

/* JSON result console box */
html[data-theme="ngt"] .result-box {
  background:#f7f0dc !important;
  border-color:#c0b08a !important;
}
html[data-theme="ngt"] .json-pre { color:#292524 !important; }
html[data-theme="ngt"] .json-key { color:#1d4ed8 !important; }
html[data-theme="ngt"] .json-str { color:#b45309 !important; }
html[data-theme="ngt"] .json-str.highlight-good { color:#16a34a !important; }
html[data-theme="ngt"] .json-str.highlight-bad  { color:#dc2626 !important; }
html[data-theme="ngt"] .json-key.key-important  { color:#111827 !important; }
html[data-theme="ngt"] .json-num  { color:#15803d !important; }
html[data-theme="ngt"] .json-bool { color:#1d4ed8 !important; }
html[data-theme="ngt"] .json-null { color:#6b7280 !important; }

/* Phone history / previously checked panel */
html[data-theme="ngt"] .phone-history-panel {
  background:#f7f0dc !important;
  border-color:#c0b08a !important;
}
html[data-theme="ngt"] .php-header {
  background:#ede6cc !important;
  border-bottom-color:#c0b08a !important;
  color:#292524 !important;
}
html[data-theme="ngt"] .php-header:hover { background:#e0d4b0 !important; }
html[data-theme="ngt"] .php-body { background:#f7f0dc !important; }
html[data-theme="ngt"] .php-row {
  border-bottom-color:#d4c6a0 !important;
  background:transparent !important;
}
html[data-theme="ngt"] .php-row:hover { background:#ede6cc !important; }
html[data-theme="ngt"] .php-user { color:#292524 !important; }
html[data-theme="ngt"] .php-time { color:#78716c !important; }
html[data-theme="ngt"] .php-count-badge {
  background:rgba(37,99,235,0.1) !important;
  border-color:rgba(37,99,235,0.25) !important;
  color:#1d4ed8 !important;
}
html[data-theme="ngt"] .php-chevron { color:#78716c !important; }
html[data-theme="ngt"] .php-title { color:#292524 !important; }

/* Reset button */
html[data-theme="ngt"] .reset-btn,
html[data-theme="ngt"] .checker-reset-btn {
  background:#e0d4b0 !important;
  border-color:#c0b08a !important;
  color:#292524 !important;
}
html[data-theme="ngt"] .reset-btn:hover,
html[data-theme="ngt"] .checker-reset-btn:hover {
  background:#d4c6a0 !important;
}

/* ══ MOBILE RESPONSIVE (checker-only rules, moved from core.css) ══ */
@media (max-width: 800px) {
  #pane-checker { flex-direction:column !important; }
  #pane-checker > div { flex:unset !important;width:100% !important;min-width:0 !important;position:static !important; }
}
@media (max-width: 768px) {
  .result-box { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .json-pre {
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: pre !important;
    word-break: normal !important;
    overflow-x: auto !important;
  }
  #pane-checker { flex-direction: column !important; }
  #pane-checker > div {
    flex: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
  }
}
@media (max-width: 560px) {
  .phone-input { font-size:18px; }
}