/* ==============================
   EyebAi — ADMIN PANEL
   ============================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg:     #080808;
  --bg2:    #0f0f0f;
  --bg3:    #161616;
  --border: #1e1e1e;
  --orange: #FF6B00;
  --teal:   #00E5C3;
  --white:  #ffffff;
  --mid:    #888888;
  --light:  #cccccc;
  --sidebar-w: 220px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Plus Jakarta Sans',Arial,sans-serif; background:var(--bg); color:var(--white); line-height:1.5; }

/* ── Login ── */
.login-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.login-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:16px; padding:48px 40px; width:380px; text-align:center;
}
.login-logo {
  font-size:28px; font-weight:800; color:var(--white);
  margin-bottom:6px; letter-spacing:-0.5px;
}
.login-logo em { color:var(--orange); font-style:normal; }
.login-sub { font-size:13px; color:var(--mid); margin-bottom:32px; }
.login-field { text-align:left; margin-bottom:20px; }
.login-field label { font-size:12px; font-weight:600; color:var(--mid); display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px; }
.login-error { color:#f44336; font-size:12px; margin-bottom:12px; }
.btn-login {
  width:100%; padding:14px; background:var(--orange); color:var(--white);
  border:none; border-radius:8px; font-size:15px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:background 0.2s;
}
.btn-login:hover { background:#E05A00; }

/* ── Shell ── */
.admin-shell { display:flex; min-height:100vh; }

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-w); min-height:100vh;
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; left:0; top:0; bottom:0;
  z-index:100;
}
.sidebar-brand {
  padding:20px 20px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.sidebar-logo { font-size:17px; font-weight:800; color:var(--white); }
.sidebar-logo em { color:var(--orange); font-style:normal; }
.sidebar-badge { font-size:9px; font-weight:700; color:var(--orange); background:rgba(255,107,0,0.12); border:1px solid rgba(255,107,0,0.25); border-radius:4px; padding:2px 6px; text-transform:uppercase; letter-spacing:1px; }
.sidebar-nav { padding:16px 12px; flex:1; display:flex; flex-direction:column; gap:4px; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; border:none;
  background:transparent; color:var(--mid); font-size:13px; font-weight:500;
  cursor:pointer; font-family:inherit; text-align:left; width:100%;
  transition:background 0.15s, color 0.15s;
}
.nav-item:hover { background:var(--bg3); color:var(--light); }
.nav-item.active { background:rgba(255,107,0,0.12); color:var(--orange); }
.nav-icon { font-size:14px; opacity:0.8; }
.sidebar-footer { padding:16px 12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.sidebar-back, .sidebar-logout {
  font-size:12px; color:var(--mid); background:none; border:none;
  cursor:pointer; font-family:inherit; text-decoration:none; text-align:left;
  padding:6px 12px; border-radius:6px; transition:color 0.15s, background 0.15s;
}
.sidebar-back:hover { color:var(--teal); }
.sidebar-logout:hover { color:#f44336; }

/* ── Main ── */
.admin-main { margin-left:var(--sidebar-w); flex:1; min-height:100vh; padding-bottom:48px; }

/* ── Topbar ── */
.topbar {
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:14px 28px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50;
}
.topbar-title { font-size:15px; font-weight:700; color:var(--white); }
.server-status { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--mid); }
.status-dot { width:7px; height:7px; background:var(--teal); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Sections ── */
.section { display:none; padding:28px; }
.section.active { display:block; }
.section-header { margin-bottom:24px; }
.section-header h1 { font-size:26px; font-weight:800; letter-spacing:-0.5px; margin-bottom:6px; }
.section-header p { font-size:14px; color:var(--mid); }

/* ── Stats grid ── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:20px; }
.stat-num { font-size:36px; font-weight:800; color:var(--white); letter-spacing:-1.5px; }
.stat-num.orange { color:var(--orange); }
.stat-num.teal   { color:var(--teal); }
.stat-label { font-size:12px; color:var(--mid); margin-top:4px; text-transform:uppercase; letter-spacing:0.5px; }

/* ── Cards ── */
.card { background:var(--bg3); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.card-header { padding:16px 20px; border-bottom:1px solid var(--border); font-size:13px; font-weight:700; color:var(--mid); text-transform:uppercase; letter-spacing:1px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }

/* ── Table ── */
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th { padding:10px 16px; text-align:left; font-size:11px; font-weight:700; color:var(--mid); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); }
.admin-table td { padding:12px 16px; font-size:13px; border-bottom:1px solid var(--border); }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:rgba(255,255,255,0.02); }
.score-badge { display:inline-block; padding:2px 10px; border-radius:100px; font-size:11px; font-weight:700; }
.score-excellent { background:rgba(0,200,83,0.12); color:#00c853; }
.score-good      { background:rgba(255,107,0,0.12); color:var(--orange); }
.score-needs     { background:rgba(255,152,0,0.12); color:#ff9800; }
.score-critical  { background:rgba(244,67,54,0.12); color:#f44336; }

/* ── Scanner card ── */
.scanner-card { padding:24px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-full { grid-column:1/-1; }
.form-group label { font-size:11px; font-weight:700; color:var(--mid); text-transform:uppercase; letter-spacing:0.5px; }
.admin-input {
  background:#0d0d0d; border:1.5px solid #252525; border-radius:8px;
  color:var(--white); font-family:inherit; font-size:13px; padding:11px 14px;
  transition:border-color 0.2s; outline:none;
}
.admin-input:focus { border-color:var(--orange); }
.admin-input::placeholder { color:#444; }
select.admin-input { cursor:pointer; }
select.admin-input option { background:#111; }
.scan-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.btn-scan-run {
  padding:12px 28px; background:var(--orange); color:var(--white);
  border:none; border-radius:8px; font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:background 0.2s;
}
.btn-scan-run:hover { background:#E05A00; }
.btn-scan-run:disabled { opacity:0.5; cursor:not-allowed; }
.send-report-toggle { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--mid); cursor:pointer; }
.send-report-toggle input { accent-color:var(--orange); width:15px; height:15px; }
.scan-progress-area { margin-top:20px; padding:20px; background:#0d0d0d; border-radius:8px; }
.progress-bar-wrap { background:#1a1a1a; border-radius:100px; height:5px; margin-bottom:10px; overflow:hidden; }
.progress-bar-fill { height:100%; background:var(--orange); border-radius:100px; transition:width 0.6s ease; width:0%; }
.progress-msg { font-size:13px; color:var(--mid); }

/* ── Scan result ── */
.scan-result-card { margin-top:20px; background:#0d0d0d; border-radius:10px; padding:24px; }
.result-score-row { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.result-score-circle { width:72px; height:72px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:3px solid var(--orange); }
.result-score-num { font-size:24px; font-weight:800; color:var(--white); line-height:1; }
.result-score-max { font-size:10px; color:var(--mid); }
.result-business { font-size:18px; font-weight:700; }
.result-url { font-size:12px; color:var(--mid); margin-top:3px; }
.result-cats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.result-cat { background:#161616; border-radius:8px; padding:12px; text-align:center; }
.result-cat-num { font-size:20px; font-weight:800; color:var(--orange); }
.result-cat-label { font-size:10px; color:var(--mid); margin-top:3px; text-transform:uppercase; letter-spacing:0.5px; }
.result-recs h4 { font-size:12px; font-weight:700; color:var(--mid); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.result-recs ol { padding-left:18px; }
.result-recs li { font-size:13px; color:var(--light); padding:5px 0; line-height:1.6; }
.result-profile { background:#111; border-radius:8px; padding:16px; margin-bottom:16px; }
.result-profile h4 { font-size:11px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.profile-row { display:flex; gap:12px; padding:4px 0; font-size:12px; }
.profile-key { color:var(--mid); width:100px; flex-shrink:0; }
.profile-val { color:var(--light); }

/* ── Leads ── */
.leads-toolbar { display:flex; gap:12px; margin-bottom:16px; align-items:center; }
.search-input { flex:1; }
.btn-refresh { padding:11px 18px; background:var(--bg3); border:1.5px solid var(--border); color:var(--mid); border-radius:8px; font-size:13px; cursor:pointer; font-family:inherit; transition:border-color 0.2s, color 0.2s; }
.btn-refresh:hover { border-color:var(--teal); color:var(--teal); }
.lead-row-detail { font-size:11px; color:var(--mid); }
.btn-view-lead { padding:4px 12px; background:rgba(255,107,0,0.1); border:1px solid rgba(255,107,0,0.3); color:var(--orange); border-radius:5px; font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; transition:background 0.2s; }
.btn-view-lead:hover { background:rgba(255,107,0,0.2); }

/* ── Integrations ── */
.integrations-row { padding:16px 20px; display:flex; flex-wrap:wrap; gap:12px; }
.int-badge { display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; }
.int-badge.connected { border-color:rgba(0,229,195,0.4); }
.int-dot { width:7px; height:7px; border-radius:50%; background:#444; }
.int-dot.connected { background:var(--teal); }

.integration-card { padding:24px; margin-bottom:12px; }
.integration-card.coming-soon { opacity:0.45; pointer-events:none; }
.int-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.int-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; flex-shrink:0; }
.zoho-icon { background:rgba(255,107,0,0.15); color:var(--orange); }
.hs-icon   { background:rgba(255,122,0,0.15); color:#ff7a00; }
.sf-icon   { background:rgba(0,161,223,0.15); color:#00a1df; }
.int-name  { font-size:16px; font-weight:700; }
.int-desc  { font-size:12px; color:var(--mid); margin-top:3px; }
.badge-disconnected { font-size:11px; font-weight:700; color:var(--mid); background:#1a1a1a; border-radius:100px; padding:4px 12px; }
.badge-connected    { font-size:11px; font-weight:700; color:var(--teal); background:rgba(0,229,195,0.1); border-radius:100px; padding:4px 12px; }
.badge-soon         { font-size:11px; font-weight:700; color:var(--mid); background:#111; border-radius:100px; padding:4px 12px; margin-left:auto; }
.int-connect-form { padding-top:4px; }
.btn-connect { padding:12px 24px; background:rgba(255,107,0,0.12); border:1.5px solid rgba(255,107,0,0.4); color:var(--orange); border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:background 0.2s; margin-top:8px; }
.btn-connect:hover { background:rgba(255,107,0,0.2); }
.int-help { font-size:11px; color:var(--mid); margin-top:12px; line-height:1.6; }
.int-help a { color:var(--teal); text-decoration:none; }
.int-help code { background:#111; border-radius:3px; padding:1px 6px; font-size:11px; color:var(--light); }

/* ── Analysis result ── */
.analysis-toolbar { display:flex; gap:12px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.analysis-section { background:#0d0d0d; border-radius:10px; padding:20px; margin-bottom:14px; }
.analysis-section h3 { font-size:12px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.analysis-section p { font-size:14px; color:var(--light); line-height:1.7; }
.analysis-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:14px; }
.kpi-card { background:#0d0d0d; border-radius:8px; padding:14px; text-align:center; }
.kpi-num { font-size:24px; font-weight:800; color:var(--orange); }
.kpi-label { font-size:10px; color:var(--mid); margin-top:4px; text-transform:uppercase; letter-spacing:0.5px; }

/* ── Settings ── */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--border); font-size:13px; }
.settings-row:last-child { border-bottom:none; }
.settings-key { color:var(--mid); font-weight:600; }
.settings-val { color:var(--light); font-family:monospace; font-size:12px; }
.settings-val.ok   { color:var(--teal); }
.settings-val.miss { color:#f44336; }
.change-pwd-msg { font-size:13px; margin-top:12px; }

/* ── AI Automation Suite ── */
.auto-suite { margin-top:20px; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.auto-suite-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:#111; border-bottom:1px solid var(--border); }
.auto-suite-title { font-size:12px; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:1px; }
.auto-suite-sub { font-size:11px; color:var(--teal); margin-top:3px; }
.auto-card { display:flex; align-items:center; gap:16px; padding:18px 20px; background:#0d0d0d; border-bottom:1px solid var(--border); position:relative; transition:background 0.15s; }
.auto-card:last-of-type { border-bottom:none; }
.auto-card:hover:not(.auto-card-soon) { background:#111; }
.auto-card-soon { opacity:0.55; }
.auto-badge { position:absolute; top:10px; right:170px; font-size:9px; font-weight:800; letter-spacing:0.8px; padding:2px 8px; border-radius:100px; text-transform:uppercase; }
.auto-badge-ready { background:rgba(0,229,195,0.1); color:var(--teal); border:1px solid rgba(0,229,195,0.2); }
.auto-badge-soon  { background:#1a1a1a; color:#555; border:1px solid #252525; }
.auto-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; }
.auto-card-body { flex:1; min-width:0; }
.auto-card-title { font-size:14px; font-weight:700; color:var(--white); margin-bottom:5px; }
.auto-card-desc  { font-size:12px; color:var(--mid); line-height:1.5; }
.auto-card-impact { font-size:11px; color:var(--orange); margin-top:5px; font-weight:600; }
.btn-auto { padding:10px 18px; background:var(--orange); color:var(--white); border:none; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; flex-shrink:0; transition:background 0.2s; }
.btn-auto:hover { background:#E05A00; }
.btn-auto-soon { background:#1a1a1a !important; color:#444 !important; border:1px solid #252525; cursor:not-allowed !important; }

/* ── Forecast ── */
.forecast-wrap { background:#0d0d0d; border-radius:10px; padding:20px; margin-top:14px; }
.forecast-head { margin-bottom:20px; }
.forecast-head-title { font-size:12px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.forecast-head-meta  { font-size:11px; color:var(--mid); }
.forecast-bars { display:flex; flex-direction:column; gap:14px; }
.forecast-row  { display:flex; align-items:center; gap:14px; }
.forecast-lbl  { width:108px; font-size:12px; color:var(--mid); flex-shrink:0; }
.forecast-track { flex:1; background:#1a1a1a; border-radius:100px; height:8px; overflow:hidden; }
.forecast-fill  { height:100%; border-radius:100px; transition:width 1s ease; }
.forecast-val   { width:130px; font-size:13px; font-weight:700; text-align:right; flex-shrink:0; }
.forecast-overdue { margin-top:14px; padding:10px 14px; background:rgba(244,67,54,0.08); border:1px solid rgba(244,67,54,0.2); border-radius:6px; font-size:12px; color:#f44336; }

/* ── Reminder modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:999; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-overlay[hidden] { display:none; }
.modal-box { background:var(--bg3); border:1px solid var(--border); border-radius:16px; width:100%; max-width:520px; overflow:hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-header h2 { font-size:17px; font-weight:800; }
.modal-close { background:none; border:none; color:var(--mid); font-size:24px; cursor:pointer; padding:0 6px; border-radius:4px; line-height:1; font-family:inherit; }
.modal-close:hover { color:var(--white); }
.modal-body { padding:20px 22px; max-height:380px; overflow-y:auto; }
.modal-footer { display:flex; gap:10px; padding:14px 22px; border-top:1px solid var(--border); }
.modal-info-box { background:#0d0d0d; border-radius:8px; padding:16px; margin-bottom:4px; }
.modal-info-box p { font-size:13px; color:var(--light); line-height:1.6; }
.remind-result { }
.remind-result-ok { font-size:14px; color:var(--mid); margin-bottom:8px; }
.remind-result-warn { background:rgba(255,152,0,0.1); border:1px solid rgba(255,152,0,0.25); color:#ff9800; font-size:12px; font-weight:700; border-radius:6px; padding:8px 12px; margin-bottom:10px; }
.remind-row { font-size:12px; color:var(--light); padding:5px 0; border-bottom:1px solid #1a1a1a; }
.remind-row:last-child { border-bottom:none; }
.skip-row { color:var(--mid) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#0d0d0d; }
::-webkit-scrollbar-thumb { background:#252525; border-radius:3px; }

/* ── Responsive ── */
@media (max-width:900px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .result-cats { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .sidebar { width:200px; }
  .admin-main { margin-left:200px; }
  .form-grid-2 { grid-template-columns:1fr; }
}