/* ============================================================================
   SKY REALTORS — Admin panel
   Berkongsi palet laman awam tetapi lebih padat: ini alat kerja harian, bukan
   halaman pemasaran.
   ========================================================================== */

:root{
  --bg:#F4F5F3; --surface:#FFFFFF; --ink:#0B0F14; --ink-2:#26313D;
  --muted:#5C6874; --muted-2:#8A939E; --line:#E2E4E0; --line-2:#EEF0ED;
  --brand:#12365F; --brand-dark:#0A2340; --brand-tint:#EAF1F8; --brand-line:#C4D7E9;
  --amber:#1E5C9E; --amber-tint:#E8F0F9;
  --danger:#B4322B; --danger-tint:#FBEDEA; --danger-line:#EFD0C8;
  --dark:#0B0F14;
  --r-sm:7px; --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(18,33,29,.05);
  --sidebar:250px;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Bricolage Grotesque','Public Sans',sans-serif;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.2}
h1{font-size:26px} h2{font-size:20px} h3{font-size:17px}
p{margin:0}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.ic{flex:0 0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-variant-numeric:tabular-nums}

/* ── Rangka ───────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

.side{background:var(--dark);color:#C6D2DE;padding:20px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side__brand{display:flex;align-items:center;gap:11px;padding:0 8px 4px}
.side__mark{width:36px;height:36px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.side__name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;color:#fff;letter-spacing:-.02em;line-height:1.15}
.side__sub{font-size:10px;letter-spacing:.14em;color:#8494A5;font-weight:600}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r);color:#C6D2DE;font-size:15px;font-weight:500}
.side nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.side nav a.is-on{background:var(--brand);color:#fff;font-weight:600}
.side nav a .count{margin-left:auto;font-size:12px;font-weight:700;background:rgba(255,255,255,.14);padding:2px 8px;border-radius:999px}
.side__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.side__foot a{color:#94A1AF;display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:var(--r)}
.side__foot a:hover{background:rgba(255,255,255,.06);color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.topline{background:var(--surface);border-bottom:1px solid var(--line);padding:16px clamp(16px,3vw,32px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.content{padding:clamp(18px,3vw,32px);display:flex;flex-direction:column;gap:22px}

/* ── Kad & panel ──────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
/* .card--pad wujud dalam site.css tetapi tidak pernah di sini — jadi kotak
   admin/portal yang menggunakannya (dua kepala halaman User manual) melekat
   terus pada bingkainya tanpa sebarang ruang. Kebanyakan kotak admin mendapat
   ruang daripada .card__head dan borangnya sendiri; kotak yang membawa
   kandungan bebas memerlukan kelas ini. */
.card--pad{padding:clamp(20px,2.4vw,28px)}
.card__head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.card__body{padding:20px}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.kpi b{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--brand);line-height:1.1}
.kpi span{font-size:13px;color:var(--muted);font-weight:500}
.kpi--amber b{color:var(--amber)}

/* ── Butang ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;
  border-radius:var(--r);font-weight:600;font-size:15px;background:var(--brand);color:#fff;white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--brand-dark);color:#fff}
.btn--ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.btn--ghost:hover{background:var(--bg);border-color:var(--brand);color:var(--brand)}
.btn--danger{background:var(--danger-tint);border:1px solid var(--danger-line);color:var(--danger)}
.btn--danger:hover{background:var(--danger);color:#fff}
.btn--sm{min-height:34px;padding:6px 12px;font-size:13px;border-radius:var(--r-sm)}
.btn--icon{min-height:34px;width:34px;padding:0}
.btn--block{width:100%}

/* ── Borang ───────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:13px;font-weight:600;color:var(--ink-2)}
.input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:15px}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
textarea.input{min-height:110px;resize:vertical;line-height:1.6}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6B66' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.hint{font-size:12px;color:var(--muted-2)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:15px;cursor:pointer}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--brand);flex:0 0 auto}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}

.alert{border-radius:var(--r);padding:12px 15px;font-size:14px;border:1px solid;display:flex;gap:10px;align-items:flex-start}
.alert--ok{background:var(--brand-tint);border-color:var(--brand-line);color:var(--brand-dark)}
.alert--err{background:var(--danger-tint);border-color:var(--danger-line);color:var(--danger)}
.alert--warn{background:var(--amber-tint);border-color:#CFE0F0;color:#123E6B}

/* ── Jadual ───────────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:#FAFBFA}
td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFBFA}
td .thumb{width:56px;height:42px;border-radius:var(--r-sm);object-fit:cover;background:var(--line-2)}
td .thumb svg{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm)}
.cell-main{display:flex;align-items:center;gap:12px;min-width:0}
.cell-main b{display:block;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.cell-actions{display:flex;gap:6px;justify-content:flex-end}

.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.tag--on{background:var(--brand-tint);color:var(--brand)}
.tag--off{background:var(--line-2);color:var(--muted)}
.tag--amber{background:var(--amber-tint);color:#123E6B}
.tag--danger{background:var(--danger-tint);color:var(--danger)}

.empty{padding:48px 24px;text-align:center;color:var(--muted)}
.empty h3{margin-bottom:6px;color:var(--ink)}

.pager{display:flex;gap:6px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--line)}
.pager a,.pager span{min-width:36px;height:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--ink-2);background:var(--surface)}
.pager .is-on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── Bar penggunaan storage ───────────────────────────────────────────────── */
.bar{height:12px;border-radius:999px;background:var(--line-2);overflow:hidden}
.bar > span{display:block;height:100%;border-radius:999px;transition:width .3s ease}

/* ── Slot gambar (muat naik · aset sedia ada · Default) ───────────────────── */
.slot{display:flex;flex-direction:column;gap:9px}
.slot__box{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.slot__box img{width:100%;height:100%;object-fit:contain;background:var(--dark)}
.slot__kosong{font-size:13px;color:var(--muted-2)}
.slot__btn{align-self:flex-start;cursor:pointer}

/* ── Pratonton gambar ─────────────────────────────────────────────────────── */
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.imgs figure{margin:0;position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line-2)}
.imgs img{width:100%;aspect-ratio:4/3;object-fit:cover}
.imgs .rm{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.94);
  color:var(--danger);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.imgs .rm:hover{background:var(--danger);color:#fff}

/* ── Susun gambar (tarik-lepas) ───────────────────────────────────────────── */
.imgs--susun{list-style:none;margin:0;padding:0}
.imgs__item{display:flex;flex-direction:column;gap:6px;background:var(--surface);border-radius:var(--r);
  /* Grab hanya pada pemegang; menarik gambar itu sendiri akan bertembung
     dengan seleksi teks dan tarik-imej lalai penyemak imbas. */
  transition:opacity .12s ease,transform .12s ease}
.imgs__item figure{cursor:default}
.imgs__no{position:absolute;top:6px;left:6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:rgba(17,24,39,.78);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.imgs__kulit{position:absolute;bottom:6px;left:6px;padding:2px 8px;border-radius:999px;
  background:var(--brand,#12467B);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}
.imgs__kulit[hidden]{display:none}
.imgs__alat{display:flex;align-items:center;justify-content:space-between;gap:4px}
.imgs__btn{width:30px;height:28px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:14px;line-height:1}
.imgs__btn:hover:not(:disabled){background:var(--line-2)}
.imgs__btn:disabled{opacity:.34;cursor:not-allowed}
.imgs__pegang{flex:1;text-align:center;color:var(--muted-2);cursor:grab;letter-spacing:-2px;
  user-select:none;-webkit-user-select:none;touch-action:none}
.imgs__pegang:active{cursor:grabbing}
.imgs__item.is-tarik{opacity:.45}
.imgs__item.is-sasar{outline:2px dashed var(--brand,#12467B);outline-offset:2px}
.imgs__simpan{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.imgs__simpan[hidden]{display:none}
/* Tanpa JS, pemegang tarik itu menipu — sembunyikan sampai JS menghidupkannya. */
.imgs__pegang{display:none}
.js-susun .imgs__pegang{display:block}

/* ── Log masuk ────────────────────────────────────────────────────────────── */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--dark)}
.login__card{width:100%;max-width:400px;background:var(--surface);border-radius:18px;padding:32px;
  display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}

/* ── Responsif ────────────────────────────────────────────────────────────── */
@media (max-width:1100px){ .g-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px}
  .side__brand{padding:0}
  .side nav{flex-direction:row;flex-wrap:wrap;gap:6px;flex:1 1 100%}
  .side nav a{padding:9px 12px;font-size:14px}
  .side__foot{margin:0;flex-direction:row;border-top:0;padding-top:0;flex:1 1 100%}
  .g-3,.g-2{grid-template-columns:1fr}
}
@media (max-width:620px){
  .g-4{grid-template-columns:1fr}
  .content{padding:14px}
}

/* ============================================================================
   Portal agent
   ========================================================================== */

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.kpi{transition:border-color .15s ease}
a.kpi:hover{border-color:var(--brand)}
.kpi__k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

.blok{display:flex;flex-direction:column;gap:14px}
.blok__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.blok__head h2{display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque',sans-serif;
  font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0}

.leads{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
.lead{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.lead--baru{border-left-color:var(--brand)}
.lead--followup{border-left-color:var(--amber)}
.lead--menang{border-left-color:#2E7D50}
.lead--kalah{border-left-color:var(--muted-2)}
/* Followup yang sudah lewat tarikhnya diberi tepi merah — ia bukan hiasan,
   ia satu-satunya isyarat visual bahawa seseorang sedang menunggu. */
.lead.is-late{border-left-color:var(--danger);background:var(--danger-tint)}

.lead__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lead__nama{font-size:17px;font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.lead__masa{font-size:12.5px;color:var(--muted-2)}

.stat{padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.stat--baru{background:var(--brand-tint);color:var(--brand)}
.stat--dihubungi{background:var(--line-2);color:var(--muted)}
.stat--followup{background:var(--amber-tint);color:var(--amber)}
.stat--menang{background:#E4F3EA;color:#2E7D50}
.stat--kalah{background:var(--line-2);color:var(--muted-2)}

.lead__kontak{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.lead__kontak a{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600}

.lead__prop{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r);font-size:14px;color:var(--ink-2)}
.lead__prop span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lead__prop b{font-weight:600}
.lead__prop i{font-style:normal;font-size:12.5px;color:var(--muted)}

.lead__mesej{margin:0;padding:10px 14px;border-left:3px solid var(--line);background:var(--bg);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14px;color:var(--ink-2);line-height:1.6}
.lead__balasan{display:grid;gap:3px;margin:0;padding:10px 14px;border-radius:var(--r-sm);
  background:#EEF4FB;border:1px solid #CFE0F2;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.lead__balasan b{font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--brand)}
.lead__loan{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13.5px;color:var(--muted)}

.lead__form{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;
  padding-top:12px;border-top:1px solid var(--line-2)}
.lead__form .field--wide{grid-column:1 / -1}
.lead__form textarea{min-height:60px}
.lead__form button{grid-column:1 / -1;justify-self:start}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow)}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-size:14px;font-weight:600}
.pill:hover{border-color:var(--brand);color:var(--brand)}
.pill.is-on{background:var(--brand);border-color:var(--brand);color:#fff}

/* Status lead dalam jadual admin */
.tag--baru{background:var(--brand-tint);color:var(--brand)}
.tag--dihubungi{background:var(--line-2);color:var(--muted)}
.tag--followup{background:var(--amber-tint);color:var(--amber)}
.tag--menang{background:#E4F3EA;color:#2E7D50}
.tag--kalah{background:var(--line-2);color:var(--muted-2)}

@media (max-width: 720px){
  .lead__form{grid-template-columns:1fr}
}

/* ── Training agent (guna semula bentuk kad e-learning laman awam) ────────── */
.learn{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.learn__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.learn__media{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;
  background:var(--dark);cursor:pointer;overflow:hidden}
.learn__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.learn__media:hover img{transform:scale(1.04)}
.learn__media iframe{width:100%;height:100%;border:0;display:block}
.learn__media--kosong{cursor:default;display:grid;place-items:center}
.learn__play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:999px;
  background:rgba(11,15,20,.72);color:#fff;display:grid;place-items:center;transition:background .15s ease}
.learn__media:hover .learn__play{background:var(--brand)}
.learn__nota{background:var(--danger);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px}
.learn__body{padding:18px;display:flex;flex-direction:column;gap:7px}
.learn__no{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.12em;color:var(--brand-soft)}
.learn__body h3{font-size:17px;line-height:1.3;margin:0}
.learn__body p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* ── Pil status lead (admin + portal) ─────────────────────────────────────────
   Warna ditetapkan oleh klien: putih = sudah bercakap, kuning = sedang
   dikejar, merah = jalan buntu, hijau = deal ditutup. Kelas datang daripada
   sky_lead_warna() supaya satu lead kelihatan sama di admin dan di portal. */
.spill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid}
.spill::before{content:'';width:7px;height:7px;border-radius:999px;background:currentColor;flex:0 0 auto}
.spill--putih {background:#FFFFFF;           border-color:#C9D4E0; color:#26313D}
.spill--kuning{background:#FCF3D6;           border-color:#E8CE7E; color:#7A5A08}
.spill--merah {background:#FBE9E7;           border-color:#E9AFA8; color:#9B2C22}
.spill--hijau {background:#E4F3EA;           border-color:#A8D8BC; color:#15633E}
.spill--baru  {background:var(--brand-tint); border-color:var(--brand-line); color:var(--brand)}

/* Status jualan hartanah — On Sell / Book / Sold / Hold. */
.tag--jual-on_sell{background:#E4F3EA;color:#15633E}
.tag--jual-book{background:var(--amber-tint);color:#123E6B}
.tag--jual-sold{background:var(--line-2);color:var(--muted)}
.tag--jual-hold{background:#FBE9E7;color:#9B2C22}
.tag--jual-cancelled{background:var(--line-2);color:var(--muted-2);text-decoration:line-through}
/* Penanda diberi warna sendiri supaya mata tidak keliru antara "apa
   keadaannya" (status) dan "apa yang baru berubah" (penanda). */
.tag--flag{background:#FDE7E5;color:#9B2C22;font-weight:700}

/* ── Panel notifikasi kemas kini listing ─────────────────────────────────── */
.notif--baru{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.notif__kira{
  display:inline-flex;align-items:center;margin-left:9px;padding:3px 9px;
  border-radius:999px;background:var(--brand);color:#fff;font-size:12px;font-weight:700;
}
.notif__list{list-style:none;margin:0;padding:0}
.notif__item{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 2px;border-bottom:1px solid var(--line-2);
}
.notif__item:last-child{border-bottom:0}
/* Titik hanya pada yang belum dibaca. Baris yang sudah dibaca mengekalkan
   lekukan yang sama supaya senarai tidak melompat bila ditandai dibaca. */
.notif__dot{flex:0 0 8px;width:8px;height:8px;margin-top:6px;border-radius:50%;background:transparent}
.notif__item.is-baru .notif__dot{background:var(--brand)}
.notif__teks{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.notif__tajuk{font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.notif__tajuk:hover{color:var(--brand);text-decoration:underline}
.notif__ubah{font-size:13px;color:var(--muted)}
.notif__ubah.is-penanda{color:#9B2C22;font-weight:600}
.notif__masa{flex:0 0 auto;font-size:12px;color:var(--muted-2);white-space:nowrap;padding-top:2px}
@media (max-width:560px){
  .notif__item{flex-wrap:wrap}
  .notif__masa{flex-basis:100%;padding-left:20px}
}

/* ── Jadual lead dalam portal agent ───────────────────────────────────────────
   Jadual dipilih untuk halaman "Semua lead" kerana agent membacanya untuk
   memutuskan siapa hendak dihubungi hari ini, bukan untuk membaca satu lead
   dengan teliti. Baris kedua setiap lead membawa borang kemas kininya, jadi
   menukar status tidak memerlukan halaman lain. */
.leadtab{width:100%;border-collapse:collapse}
.leadtab th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.leadtab td{padding:12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.leadtab__row:hover{background:var(--bg)}
.leadtab__row.is-late{background:#FBE9E7}
.leadtab__row.is-late:hover{background:#F8DFDC}
.leadtab__kontak{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:3px;font-size:12.5px}
.leadtab__kontak a{display:inline-flex;align-items:center;gap:4px;color:var(--brand);font-weight:600}
.leadtab__emel{margin-top:2px;font-size:12.5px;overflow-wrap:anywhere}
.leadtab__emel a{color:var(--muted-2)}
.leadtab__emel a:hover{color:var(--brand)}
/* Gaji / komitmen / anggaran kelayakan — sebab lead semakan loan itu wujud. */
.leadtab__kira{display:flex;flex-direction:column;gap:1px;margin-top:5px;font-size:12px;color:var(--muted-2)}
.leadtab__kira i{font-style:normal;opacity:.75;margin-right:3px}
.leadtab__kira b{color:var(--ink)}
.leadtab__lewat{color:#9B2C22;font-weight:700}
.leadtab .nowrap{white-space:nowrap}
.leadtab__edit td{padding:0;border-bottom:1px solid var(--line-2)}
.leadtab__edit details[open]{padding:14px 12px 18px;background:var(--bg)}
.leadtab__edit summary{list-style:none}
.leadtab__edit summary::-webkit-details-marker{display:none}

/* Grid kotak semak untuk penapis lokasi. */
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;
  max-height:260px;overflow-y:auto;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.checkrow{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;padding:3px 4px;border-radius:6px}
.checkrow:hover{background:var(--surface)}
.checkrow input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--brand)}
.checkrow i{font-style:normal;font-size:11.5px}

/* ── Kad Want To Buy ──────────────────────────────────────────────────────── */
.wtbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.wtb{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:18px;display:grid;gap:12px;align-content:start}
.wtb.is-tutup{opacity:.62}
.wtb__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wtb__head b{font-size:15.5px;line-height:1.35}
.wtb__head i{font-style:normal;font-weight:500;font-size:13px}
.wtb__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:0}
.wtb__meta div{display:grid;gap:2px}
.wtb__meta dt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.wtb__meta dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.wtb__remark{margin:0;padding:10px 12px;background:var(--bg);border-radius:var(--r-sm);font-size:13.5px;
  color:var(--ink-2);line-height:1.6}
.wtb__padan{background:var(--brand-tint);border-radius:var(--r-sm);padding:10px 12px;display:grid;gap:6px}
.wtb__padan > span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--brand)}
.wtb__padan ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.wtb__padan li{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.wtb__padan i{font-style:normal;color:var(--muted);white-space:nowrap}
.wtb__kaki{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:2px}

/* ── User manual ──────────────────────────────────────────────────────────────
   Manual dibaca sekali semasa belajar, kemudian dirujuk semula secara
   berselerak. Sebab itu setiap bahagian bernombor, ada senarai isi di atas,
   dan tangkapan skrin diletak SELEPAS langkah — pembaca yang sudah tahu tidak
   perlu menyusuri gambar untuk sampai ke ayat seterusnya. */
.man{display:grid;gap:26px}
.man__isi{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.man__isi a{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg);font-size:14px;font-weight:600;color:var(--ink);
  transition:border-color .16s,background .16s}
.man__isi a:hover{border-color:var(--brand);background:var(--brand-tint)}
.man__isi span{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:12px;font-weight:800;
  color:var(--brand);letter-spacing:.04em}

.man__sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,2.5vw,26px);display:grid;gap:16px;scroll-margin-top:20px}
.man__kepala{display:flex;gap:16px;align-items:flex-start}
.man__no{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:26px;font-weight:800;
  line-height:1;color:var(--brand-line);flex:0 0 auto;letter-spacing:-.02em}
.man__sec h2{font-size:clamp(18px,2vw,22px);margin:0}
.man__ringkas{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:70ch}
.man__pautan{display:flex;flex-wrap:wrap;gap:8px}
.man__langkah{margin:0;padding-left:0;list-style:none;counter-reset:mlangkah;display:grid;gap:10px}
.man__langkah li{counter-increment:mlangkah;position:relative;padding-left:34px;font-size:14.5px;
  line-height:1.65;color:var(--ink-2)}
.man__langkah li::before{content:counter(mlangkah);position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:999px;background:var(--brand-tint);color:var(--brand);font-size:11.5px;font-weight:800;
  display:grid;place-items:center;font-family:'Bricolage Grotesque',system-ui,sans-serif}
.man__nota{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;
  background:var(--amber-tint);border-radius:var(--r);font-size:14px;color:#123E6B;line-height:1.6}
.man__nota svg{flex:0 0 auto;margin-top:2px}
.man__shot{margin:0;display:grid;gap:8px}
.man__shot img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg)}
.man__shot figcaption{font-size:12px;color:var(--muted-2)}


/* ══ Tablet & telefon — admin dan portal ═══════════════════════════════════
   Punca yang sama seperti dalam site.css. Panel admin lebih teruk terkesan
   kerana ia penuh dengan jadual dan baris penapis: pada 375px, halaman
   Pengurusan Leads melimpah 832px sebelum pembetulan ini — hampir tiga skrin
   ke sisi.                                                                  */

@media (max-width:760px){
  .grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}

.grid > *, .stack > *{min-width:0}
.row{flex-wrap:wrap}
.row > *{min-width:0}
.tablewrap{min-width:0;max-width:100%}
.card,.blok,.kpi{min-width:0}
.row--nowrap{flex-wrap:nowrap}

/* Bekas susun atur utama. `.shell` ialah grid dan `.main` ialah flex, jadi
   anak-anaknya mewarisi `min-width:auto` — dan jadual 907px di dalamnya
   menolak keseluruhan lajur itu melebar, membawa halaman bersamanya. Pada
   768px inilah punca halaman Listing menyorot 191px ke sisi. Meletakkannya
   kepada 0 membenarkan lajur itu mengecil, dan jadual menyorot dalam kadnya
   sendiri seperti yang sepatutnya. */
.shell > *, .main > *, .main, .content{min-width:0}

/* Jadual lebar kekal boleh dibaca dengan menyorot ke sisi DALAM kadnya
   sendiri, bukan dengan menarik seluruh halaman. -webkit-overflow-scrolling
   memberi momentum pada iOS. */
.tablewrap{-webkit-overflow-scrolling:touch}

@media (max-width:900px){
  /* Borang penapis dalam kepala kad: susun menegak supaya setiap medan
     mendapat lebar penuh, bukan diperah menjadi 60px. */
  .card__head{flex-wrap:wrap;gap:12px}
  .card__head form{width:100%}
  .card__head form .input{flex:1 1 160px;min-width:0}
}

@media (max-width:620px){
  .btn{min-height:44px}
  .btn--sm{min-height:40px}
  .pill{min-height:40px}
  /* Penapis: dua lajur, bukan satu.
     Satu medan satu baris bermakna lima penapis memakan satu skrin penuh
     sebelum baris pertama data kelihatan. Dua lajur memuatkannya dalam tiga
     baris pendek.

     `min-width` diisytiharkan INLINE dalam templat (200px untuk carian,
     130-170px untuk yang lain). Dalam lajur ~170px, min-width itu memaksa
     limpahan — jadi ia mesti dikalahkan di sini, dan hanya !important boleh
     mengalahkan gaya inline.

     Asas 50% dengan grow bermakna borang satu medan masih mengisi lebar
     penuh dengan sendirinya; tiada pengecualian perlu ditulis. */
  .card__head form{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:8px}
  .card__head form .input{
    flex:1 1 calc(50% - 4px);
    min-width:0 !important;width:auto;
  }
  /* Medan carian ialah yang utama — beri ia baris sendiri. */
  .card__head form .input[type=search]{flex:1 1 100%}
  .card__head form > button,
  .card__head form .btn{flex:1 1 100%;width:auto}
  /* Jadual: kurangkan padding supaya lebih banyak lajur muat sebelum menyorot */
  table th,table td{padding-left:10px;padding-right:10px}
  .small,.hint,.muted.small{font-size:12.5px}
}

/* Skrol melintang hantu.
   Jadual lebar dalam `.tablewrap` dipotong dengan betul untuk lukisan — kad
   kekal 720px dan jadual menyorot di dalamnya. Tetapi penyorot AKAR masih
   mengira limpahan jadual itu, jadi halaman boleh ditarik 191px ke sisi
   kepada kawasan yang tiada apa-apa dilukis. Pengguna tablet merasainya
   sebagai halaman yang longgar dan bocor.

   `contain:paint` memberitahu pelayar bahawa tiada keturunan elemen ini akan
   melukis di luar sempadannya, jadi limpahan itu tidak lagi dikira oleh akar.
   Diuji: 191px → 0px, dan jadual masih menyorot di dalam kadnya.

   Yang TIDAK berkesan, supaya tidak dicuba semula:
     · html{overflow-x:clip}   — limpahan akar propagate, Chrome abaikan
     · body{overflow-x:clip}   — sama
     · .card{overflow:hidden}  — sama, dan ia memotong bayang fokus
   `overflow-x:hidden` pada html/body memang menutupnya, tetapi ia mematikan
   `position:sticky` pada bar sisi dan kepala jadual. Sebab itu bukan itu. */
.tablewrap{contain:paint}

/* Petunjuk jadual boleh disorot.
   Jadual lebar menyorot di dalam kadnya — tetapi pada skrin sentuh tiada
   apa-apa memberitahu pengguna bahawa ada lagi lajur di sebelah kanan. Kesan
   pudar ini muncul HANYA apabila memang ada sesuatu untuk disorot, dan hilang
   sebaik pengguna sampai ke hujung. `background-attachment:local` pada lapisan
   pudar itulah yang menjadikannya sedar-skrol tanpa satu baris JavaScript. */
@media (max-width:1024px){
  .tablewrap{
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0 50%,    rgba(11,15,20,.14), rgba(0,0,0,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(11,15,20,.14), rgba(0,0,0,0)) right center;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
}


/* ══ Nav telefon & tablet ══════════════════════════════════════════════════
   Sebelum ini, bar sisi 17 pautan itu dibaluk menjadi blok rata di atas
   setiap halaman. Pada telefon 390px ia memakan 678px — 80% skrin pertama —
   jadi setiap kali admin membuka apa-apa halaman, dia melihat menu dahulu dan
   perlu menyorot melepasinya untuk sampai kepada kerjanya. Setiap kali.

   Sekarang: satu bar padat yang melekat di atas, dan menu hanya terbuka bila
   diminta. Kandungan bermula serta-merta.                                    */

.navsuis{position:absolute;opacity:0;pointer-events:none}
.side__bar{display:contents}
.side__hamb{display:none}

@media (max-width:900px){
  .side{
    position:sticky;top:0;z-index:40;
    display:block;padding:0;height:auto;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  /* Bar: jenama di kiri, butang menu di kanan. */
  .side__bar{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:10px 14px;
  }
  .side__brand{padding:0;flex:0 1 auto;min-width:0}
  .side__hamb{
    display:grid;place-items:center;flex:0 0 auto;
    width:44px;height:44px;border-radius:10px;cursor:pointer;
    color:#C6D2DE;background:rgba(255,255,255,.06);
  }
  .side__hamb:hover{background:rgba(255,255,255,.12);color:#fff}
  .side__hamb-tutup{display:none}

  /* Tertutup secara lalai. */
  .side nav,.side__foot{display:none}

  /* Dibuka oleh suis. */
  .navsuis:checked + .shell .side nav{
    display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;
    padding:4px 14px 14px;
  }
  .navsuis:checked + .shell .side nav a{padding:10px 13px;font-size:14.5px}
  .navsuis:checked + .shell .side__foot{
    display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;
    margin:0;padding:0 14px 14px;border-top:0;
  }
  .navsuis:checked + .shell .side__hamb-buka{display:none}
  .navsuis:checked + .shell .side__hamb-tutup{display:block}

  /* Kepala halaman tidak perlu melekat juga — dua lapisan melekat pada skrin
     telefon meninggalkan terlalu sedikit ruang untuk kandungan sebenar. */
  .topline{position:static}
}

@media (max-width:620px){
  .side__bar{padding:8px 12px}
  .navsuis:checked + .shell .side nav a{flex:1 1 calc(50% - 3px)}
}

/* ══ Jadual pada skrin sentuh ══════════════════════════════════════════════
   Dicuba dan DIBUANG: melekatkan lajur pertama semasa jadual disorot.
   Ia berfungsi cantik pada senarai Hartanah, yang lajur pertamanya ialah nama
   hartanah. Tetapi pada Pengurusan Leads lajur pertama ialah TARIKH — 76px,
   tidak mengenal pasti apa-apa — dan ia melekat di situ sambil memotong nama
   pemohon yang menyorot di belakangnya. Satu jadual bertambah baik, satu lagi
   menjadi lebih teruk.

   Petunjuk pudar tepi di atas sudah memberitahu pengguna bahawa jadual ini
   boleh disorot, dan itu memadai. Kalau nanti mahu lajur melekat, ia perlu
   ditanda per-jadual dalam templat (lajur mana yang mengenal pasti baris),
   bukan diteka daripada kedudukan.                                          */


/* ══ Jadual Want To Buy ════════════════════════════════════════════════════
   Struktur sama seperti jadual lead: satu baris ringkasan, satu baris butiran
   yang tersembunyi sehingga dibuka. Menggunakan semula corak yang sama
   bermakna sesiapa yang sudah biasa dengan Pengurusan Leads tidak perlu
   belajar apa-apa yang baharu di sini.                                      */

.wtbtab{width:100%;border-collapse:collapse;font-size:14px}
.wtbtab th{
  text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;padding:11px 14px;
  border-bottom:1px solid var(--line);background:#FCFDFE;white-space:nowrap;
}
.wtbtab td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.wtbtab__row:hover > td{background:var(--bg)}
/* Permintaan yang sudah ditutup masih berguna sebagai rekod, tetapi ia tidak
   patut menarik mata sekuat yang masih terbuka. */
.wtbtab__row.is-tutup > td{opacity:.58}
.wtbtab__padan{
  margin-top:5px;font-size:11.5px;font-weight:700;color:var(--brand);white-space:nowrap;
}

/* Baris butiran: tiada padding sendiri supaya <details> mengawal ruangnya. */
.wtbtab__edit > td{padding:0;border-bottom:1px solid var(--line-2)}
.wtbtab__edit details[open] > .wtbtab__isi{display:grid}
.wtbtab__isi{
  display:grid;gap:16px;padding:16px 14px 20px;background:var(--bg);
}
.wtbtab__blok{display:grid;gap:6px}
.wtbtab__label{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;
}
.wtbtab__blok p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;max-width:70ch}
.wtbtab__padanan{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.wtbtab__padanan li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);font-size:13.5px;
}
.wtbtab__padanan a{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.wtbtab__padanan a:hover{color:var(--brand);text-decoration:underline}
.wtbtab__padanan i{font-style:normal;color:var(--muted);white-space:nowrap}
.wtbtab__aksi{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

@media (max-width:620px){
  .wtbtab__padanan li{flex-direction:column;gap:3px;align-items:flex-start}
  .wtbtab__aksi .btn{flex:1 1 100%;justify-content:center}
}

/* ── Penapis papan WTB (maklum balas klien #14) ─────────────────────────── */
.wtb-tapis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px;align-items:end;margin-bottom:16px}
.wtb-tapis .field{margin:0}
.wtb-tapis__btn{display:flex;gap:8px;flex-wrap:wrap}
.wtb-tapis__nota{grid-column:1/-1;margin:0}

/* ── Penapis senarai listing: grid 3 lajur ──────────────────────────────── */
.lst-tapis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.lst-tapis .field{margin:0;min-width:0}
.lst-tapis__harga{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lst-tapis__aksi{display:flex;justify-content:flex-end;align-items:flex-end;gap:8px}
@media (max-width:900px){.lst-tapis{grid-template-columns:repeat(2,minmax(0,1fr))}.lst-tapis__aksi{grid-column:1/-1}}
@media (max-width:560px){.lst-tapis{grid-template-columns:1fr;padding:14px 16px}}


/* Teks & Gambar — lompat ke seksyen. Seksyen disusun ikut halaman HQ. */
.content-lompat{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px}
.content-lompat .btn{min-height:30px;padding:4px 10px;font-size:12.5px}
[id^="seksyen-"]{scroll-margin-top:150px}
details.card > summary{list-style:none}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary h2::after{content:" ▾";color:var(--muted);font-weight:400}
details.card[open] > summary h2::after{content:" ▴"}

/* Senarai hartanah admin — bilangan & saiz gambar setiap listing. */
.lst-gambar{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);margin-top:2px;flex-wrap:wrap}
.lst-gambar svg{flex-shrink:0;color:var(--muted)}
.lst-gambar b{font-weight:600;color:var(--ink)}
.imgs__saiz{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.3;font-variant-numeric:tabular-nums}
.imgs__saiz b{color:var(--ink-2);font-weight:600}

/* Padam beberapa gambar listing sekali gus. */
.imgs__pilihbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.imgs__semua{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.imgs__pilihbar .btn:disabled{opacity:.45;cursor:not-allowed}
.imgs__pilih{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.94);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.imgs__pilih input{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--danger)}
.imgs__item.is-pilih figure{outline:3px solid var(--danger);outline-offset:-3px}
.imgs__item.is-pilih img{opacity:.7}

/* Lencana persetujuan PDPA dalam senarai lead (admin & portal) */
.pdpa-ok{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.6;
  color:#17663A;background:#E6F4EC;border:1px solid #BFE3CD;white-space:nowrap;align-self:flex-start;width:max-content}