/* ============================================================
   Wameed CRM — admin UI (brand: purple + gold, RTL)
   ============================================================ */
:root{
  --p900:#2b0f38; --p800:#3a1650; --p700:#4c1e64; --p600:#5f2a7c;
  --gold:#d4a537; --gold3:#ecc766; --cream:#f6f2ea; --ink:#1b1220;
  --line:rgba(76,30,100,.1); --shadow:0 10px 30px rgba(27,10,40,.12);
  --head:"Thmanyah Serif Display","Times New Roman",serif;
  --body:"Thmanyah Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--body);background:var(--cream);color:var(--ink);letter-spacing:.012em;}
a{text-decoration:none;color:inherit;}

/* ---------- login ---------- */
.login-body{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(70% 60% at 50% 20%,rgba(212,165,55,.18),transparent 60%),linear-gradient(160deg,#2b0f38,#4c1e64);}
.login-card{width:min(420px,100%);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);
  border-radius:24px;padding:2.4rem 2rem;text-align:center;color:#fff;box-shadow:0 24px 60px rgba(0,0,0,.4);}
.login-logo{height:52px;width:auto;margin-bottom:1.2rem;}
.login-card h1{font-family:var(--head);font-weight:900;font-size:1.5rem;margin:0;}
.login-card .sub{color:rgba(255,255,255,.65);font-size:.9rem;margin:.4rem 0 1.6rem;}
.login-err{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);color:#fecaca;border-radius:12px;padding:.7rem;font-size:.9rem;margin-bottom:1rem;}
.fld{text-align:right;margin-bottom:1rem;}
.fld label{display:block;font-size:.85rem;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:.4rem;}
.fld input{width:100%;font-family:var(--body);font-size:1rem;color:#fff;background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.2);border-radius:12px;padding:.85rem 1rem;}
.fld input:focus{outline:none;border-color:var(--gold);}
.btn-gold{width:100%;font-family:var(--body);font-weight:700;font-size:1rem;cursor:pointer;border:none;
  border-radius:999px;padding:.9rem;margin-top:.5rem;color:var(--p900);background:linear-gradient(135deg,var(--gold),var(--gold3));
  box-shadow:0 10px 24px rgba(212,165,55,.35);transition:transform .2s;}
.btn-gold:hover{transform:translateY(-2px);}
.login-foot{margin-top:1.6rem;font-size:.8rem;color:rgba(255,255,255,.5);}

/* ---------- app shell ---------- */
.wrap{display:flex;min-height:100vh;}
.side{width:250px;flex:none;background:linear-gradient(180deg,var(--p800),var(--p900));color:#fff;display:flex;flex-direction:column;padding:1.4rem 0;position:sticky;top:0;height:100vh;}
.brand{text-align:center;padding:0 1.4rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:1rem;}
.brand img{height:38px;width:auto;}
.side nav{display:flex;flex-direction:column;gap:.2rem;padding:0 .8rem;flex:1;}
.side nav a{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:12px;color:rgba(255,255,255,.75);font-weight:500;transition:background .2s,color .2s;}
.side nav a svg{width:20px;height:20px;flex:none;}
.side nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.side nav a.on{background:linear-gradient(135deg,var(--gold),var(--gold3));color:var(--p900);font-weight:700;}
.side .logout{display:flex;align-items:center;gap:.8rem;margin:0 .8rem;padding:.8rem 1rem;border-radius:12px;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.12);}
.side .logout svg{width:20px;height:20px;}
.side .logout:hover{background:rgba(239,68,68,.15);color:#fecaca;border-color:transparent;}

main{flex:1;min-width:0;}
.top{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 2rem;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;}
.top h1{font-family:var(--head);font-weight:900;font-size:1.5rem;color:var(--p800);margin:0;}
.top .me{display:flex;align-items:center;gap:.7rem;font-weight:500;color:var(--p700);}
.top .me i{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold3));color:var(--p900);font-style:normal;font-weight:700;font-family:var(--head);}
.content{padding:2rem;}
.flash{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#166534;border-radius:12px;padding:.8rem 1.1rem;margin-bottom:1.2rem;}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.6rem;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.3rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow);}
.kpi-ic{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:14px;font-size:1.4rem;color:#fff;}
.ic-blue{background:#3b82f6;}.ic-gold{background:var(--gold);}.ic-green{background:#22c55e;}.ic-purple{background:var(--p600);}
.kpi b{font-family:var(--head);font-weight:900;font-size:1.5rem;color:var(--p800);display:block;line-height:1.2;}
.kpi em{font-style:normal;font-size:.85rem;color:#7a6a86;}

/* ---------- panel + table ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);}
.panel-head h2{font-family:var(--head);font-weight:900;font-size:1.2rem;color:var(--p800);margin:0;}
.link{color:var(--gold);font-weight:700;font-size:.9rem;}
.empty{padding:2.4rem;text-align:center;color:#9a8ba6;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th,.tbl td{padding:.9rem 1.2rem;text-align:right;font-size:.94rem;}
.tbl thead th{background:var(--cream);color:var(--p700);font-weight:700;font-size:.85rem;}
.tbl tbody tr{border-top:1px solid var(--line);cursor:pointer;transition:background .15s;}
.tbl tbody tr:hover{background:rgba(212,165,55,.07);}
.tbl td small{display:block;color:#9a8ba6;font-size:.8rem;}
.badge{display:inline-block;font-size:.8rem;font-weight:700;padding:.3rem .8rem;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);}

/* buttons / forms (shared in app) */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:700;cursor:pointer;border:none;border-radius:999px;padding:.7rem 1.4rem;background:linear-gradient(135deg,var(--gold),var(--gold3));color:var(--p900);}
.btn--ghost{background:transparent;border:1.5px solid var(--p700);color:var(--p700);}

@media(max-width:820px){
  .side{position:fixed;inset-inline-start:-260px;z-index:50;transition:.3s;}
  .content{padding:1.2rem;}
}

/* ---------- filters ---------- */
.filters{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;}
.tabs a{padding:.5rem .9rem;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--p700);background:#fff;border:1px solid var(--line);}
.tabs a b{color:#9a8ba6;font-weight:700;margin-inline-start:.2rem;}
.tabs a.on{background:linear-gradient(135deg,var(--gold),var(--gold3));color:var(--p900);border-color:transparent;}
.tabs a.on b{color:var(--p900);}
.search{display:flex;gap:.5rem;}
.search input{font-family:var(--body);border:1px solid var(--line);border-radius:999px;padding:.6rem 1.1rem;min-width:220px;background:#fff;}
.search input:focus{outline:none;border-color:var(--gold);}

/* ---------- detail ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:.6rem;}
.dcol{display:flex;flex-direction:column;gap:1.2rem;}
.drows{padding:.8rem 1.4rem;}
.drows>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.95rem;}
.drows>div:last-child{border-bottom:none;}
.drows span{color:#9a8ba6;}
.dnote{padding:1rem 1.4rem;border-top:1px solid var(--line);color:#5b4d68;line-height:1.9;font-size:.95rem;}
.actions{padding:1.4rem;display:flex;flex-direction:column;gap:1.2rem;}
.actions form{display:flex;flex-direction:column;gap:.5rem;}
.actions label{font-weight:700;color:var(--p800);font-size:.9rem;}
.actions .inline{display:flex;gap:.5rem;}
.actions select,.inp{font-family:var(--body);font-size:.95rem;border:1.5px solid var(--line);border-radius:10px;padding:.7rem .9rem;background:var(--cream);width:100%;color:var(--ink);}
.actions select:focus,.inp:focus{outline:none;border-color:var(--gold);}
.actions .inline select{flex:1;}

/* ---------- follow-up timeline ---------- */
.fu-add{padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.5rem;}
.fu-add select,.fu-add textarea{font-family:var(--body);border:1.5px solid var(--line);border-radius:10px;padding:.7rem .9rem;background:var(--cream);width:100%;}
.fu-add textarea:focus,.fu-add select:focus{outline:none;border-color:var(--gold);}
.fu-add .btn{align-self:flex-start;}
.timeline{padding:1rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;max-height:540px;overflow:auto;}
.fu{border-inline-start:3px solid var(--gold);background:var(--cream);border-radius:0 12px 12px 0;padding:.8rem 1rem;}
.fu--status_change{border-color:#8b5cf6;}.fu--call{border-color:#3b82f6;}.fu--feedback{border-color:#22c55e;}
.fu-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.3rem;}
.fu-h b{color:var(--p800);font-size:.9rem;}
.fu-h small{color:#9a8ba6;font-size:.78rem;}
.fu p{margin:0;color:#4a3d55;font-size:.94rem;line-height:1.7;}

/* ---------- reports ---------- */
.rep-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1.2rem;}
.bars{display:flex;align-items:flex-end;gap:.8rem;padding:1.6rem 1.4rem 1.2rem;height:220px;}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;height:100%;justify-content:flex-end;}
.bar .bv{width:100%;max-width:46px;background:linear-gradient(180deg,var(--gold),var(--p600));border-radius:8px 8px 0 0;display:flex;align-items:flex-start;justify-content:center;position:relative;min-height:6px;}
.bar .bv i{position:absolute;top:-20px;font-style:normal;font-weight:700;color:var(--p700);font-size:.85rem;}
.bar em{font-style:normal;font-size:.75rem;color:#9a8ba6;}
.stat-list{padding:1rem 1.4rem;display:flex;flex-direction:column;gap:.7rem;}
.sl-row{display:flex;align-items:center;gap:.7rem;font-size:.92rem;}
.sl-row .dot{width:10px;height:10px;border-radius:50%;flex:none;}
.sl-row .sl-name{flex:1;color:#5b4d68;}
.sl-row b{color:var(--p800);}
.sl-row .mini{flex:2;height:8px;background:var(--cream);border-radius:6px;overflow:hidden;}
.sl-row .mini span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold3));}
.badge-btn{cursor:pointer;border:none;font-family:var(--body);font-size:.8rem;font-weight:700;padding:.3rem .8rem;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);}
.link{display:inline-block;margin-bottom:1rem;color:var(--gold);font-weight:700;}
@media(max-width:900px){.detail{grid-template-columns:1fr;}.rep-grid{grid-template-columns:1fr;}}