/* ============================================================
   Craftlead — CSS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Open+Sans:wght@400;500;600&display=swap');

:root {
  --pri:    #0f2235;
  --acc:    #00a896;
  --gold:   #f59e0b;
  --cream:  #f0f4f8;
  --white:  #ffffff;
  --border: #e2e8f0;
  --gray:   #64748b;
  --text:   #1e293b;
  --shadow: 0 2px 12px rgba(15,34,53,.08);
  --rad:    10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Open Sans',sans-serif;color:var(--text);background:var(--cream);line-height:1.6}
h1,h2,h3{font-family:'Nunito',sans-serif;color:var(--pri)}
a{color:var(--pri);text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;border-radius:var(--rad);font-family:'Nunito',sans-serif;font-weight:700;font-size:.87rem;cursor:pointer;border:none;transition:all .18s;text-decoration:none}
.btn-primary{background:var(--pri);color:#fff}.btn-primary:hover{background:#1a3a5c;color:#fff}
.btn-acc{background:var(--acc);color:#fff}.btn-acc:hover{filter:brightness(1.1);color:#fff}
.btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{background:#d97706;color:#fff}
.btn-ghost{background:var(--cream);color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{background:var(--border)}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626;color:#fff}

/* ── Login ── */
.admin-login-body{background:linear-gradient(135deg,#0f2235,#1a3a5c);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-wrap{background:#fff;border-radius:16px;padding:40px 36px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-logo{text-align:center;margin-bottom:26px}
.login-title{font-family:'Nunito',sans-serif;font-weight:900;font-size:1.2rem;color:var(--pri)}
.login-sub{font-size:.7rem;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}

/* ── Layout ── */
.admin-body{background:var(--cream)}
.admin-layout{display:flex;min-height:100vh}

/* ── Sidebar ── */
.admin-sidebar{width:260px;flex-shrink:0;background:var(--pri);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .25s;overflow-y:auto}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand-name{font-family:'Nunito',sans-serif;font-weight:900;font-size:.95rem;color:#fff;line-height:1.2}
.sidebar-brand-sub{font-size:.62rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em}

/* Site Switcher */
.site-switcher{padding:12px 10px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.site-switcher-label{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.1em;padding:0 8px 6px}
.site-option{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;color:rgba(255,255,255,.65);font-size:.83rem;transition:background .15s;text-decoration:none}
.site-option:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.site-option.active{background:rgba(255,255,255,.12);color:#fff}
.site-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.site-check{margin-left:auto;font-size:.75rem;color:var(--acc)}
.site-badge{padding:3px 10px;border-radius:20px;font-size:.73rem;font-weight:700;color:#fff;flex-shrink:0}

.sidebar-nav{flex:1;padding:12px 10px}
.sidebar-nav-label{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.1em;padding:4px 10px 8px}
.sidebar-nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;text-decoration:none;margin-bottom:2px;transition:background .15s;color:rgba(255,255,255,.7)}
.sidebar-nav-item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.sidebar-nav-item.active{background:var(--acc);color:#fff}
.nav-icon{font-size:1rem;flex-shrink:0;width:20px;text-align:center}
.nav-label{display:block;font-size:.86rem;font-weight:700;line-height:1.2}
.nav-desc{display:block;font-size:.68rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer{padding:12px 10px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-footer-link{display:block;padding:8px 11px;border-radius:8px;font-size:.8rem;color:rgba(255,255,255,.4);text-decoration:none;transition:all .15s}
.sidebar-footer-link:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);text-decoration:none}
.sidebar-footer-link.logout{color:#fff;background:rgba(239,68,68,.25);border:1px solid rgba(239,68,68,.35);font-weight:700}.sidebar-footer-link.logout:hover{background:rgba(239,68,68,.45);color:#fff}

/* ── Main ── */
.admin-main{flex:1;margin-left:260px;display:flex;flex-direction:column;min-height:100vh}
.admin-topbar{background:#fff;border-bottom:1px solid var(--border);padding:0 16px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:0 1px 6px rgba(0,0,0,.05);gap:8px;overflow:hidden}
.admin-page-title{font-family:'Nunito',sans-serif;font-size:1rem;font-weight:800;color:var(--pri);margin:0}
.sidebar-toggle{display:none;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--gray);padding:4px 7px;border-radius:6px}
.admin-content{padding:24px 24px 60px;flex:1;min-width:0;overflow-x:hidden}

/* ── Cards ── */
.admin-card{background:#fff;border-radius:var(--rad);padding:22px;box-shadow:var(--shadow);margin-bottom:18px;border:1px solid var(--border)}
.card-title{font-size:.76rem;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;display:flex;align-items:center;gap:7px}

/* ── KPI ── */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:18px}
.kpi-box{background:#fff;border-radius:10px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1.5px solid var(--border);position:relative;overflow:hidden}
.kpi-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--pri)}
.kpi-box.acc::before{background:var(--acc)}.kpi-box.gold::before{background:var(--gold)}.kpi-box.red::before{background:#ef4444}.kpi-box.purple::before{background:#8b5cf6}
.kpi-val{font-family:'Nunito',sans-serif;font-size:1.3rem;font-weight:900;color:var(--pri);line-height:1.1;margin-bottom:3px}
.kpi-box.acc .kpi-val{color:var(--acc)}.kpi-box.gold .kpi-val{color:var(--gold)}.kpi-box.red .kpi-val{color:#ef4444}.kpi-box.purple .kpi-val{color:#8b5cf6}
.kpi-label{font-size:.68rem;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* ── Tables ── */
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{background:var(--cream);padding:9px 14px;text-align:left;font-size:.7rem;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.admin-table td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:.84rem;vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:#fafbfc}

/* ── Forms ── */
.form-field{margin-bottom:13px}
.form-field label{display:block;font-size:.74rem;font-weight:700;color:#374151;margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.form-field input,.form-field select,.form-field textarea{width:100%;max-width:100%;box-sizing:border-box;padding:9px 13px;border:2px solid var(--border);border-radius:8px;font-size:.91rem;font-family:'Open Sans',sans-serif;color:var(--text);background:#fff;outline:none;transition:border-color .2s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--pri)}
.form-field textarea{resize:vertical;min-height:80px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.alert{padding:11px 15px;border-radius:8px;font-size:.86rem;margin-bottom:14px}
.alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac}
.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.alert-info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}

/* ── Chips/Badges ── */
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap}
.chip-blue{background:#dbeafe;color:#1d4ed8}.chip-green{background:#dcfce7;color:#166534}
.chip-red{background:#fee2e2;color:#991b1b}.chip-gray{background:var(--cream);color:var(--gray)}
.chip-amber{background:#fef3c7;color:#92400e}.chip-purple{background:#f3e8ff;color:#6b21a8}

/* ── Responsive ── */
@media(max-width:900px){
  .admin-sidebar{transform:translateX(-100%)}
  .admin-sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.25)}
  .admin-main{margin-left:0;overflow-x:hidden;max-width:100vw}
  .sidebar-toggle{display:block}
  .kpi-row{grid-template-columns:repeat(3,1fr)}
  .form-row-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .admin-content{padding:16px 14px 60px}
}