/* public/konsol.css — Konsol Platform FixOS (konsol.fixos.my). Berdiri sendiri (token jenama /fixos-tema.css, fon dihos sendiri).
   Mudah alih dahulu (390px), skrin lebar 1280px. Tiada skrol mendatar dokumen. */
:root{
  /* Petakan token konsol ke palet jenama FixOS (/fixos-tema.css) — terang + gelap automatik */
  --bg:var(--fx-bg);--bg2:var(--fx-kad);--panel:var(--fx-kad);--panel2:var(--fx-kad2);
  --line:var(--fx-garis);--line2:var(--fx-garis2);
  --teks:var(--fx-ink);--teks2:var(--fx-redup);--teks3:var(--fx-halus);
  --cyan:var(--fx-ungu-teks);--primary:var(--fx-ungu);--on-primary:#FFFFFF;
  --hijau:var(--fx-hijau-teks);--kuning:var(--fx-kuning-teks);--merah:var(--fx-merah-teks);--danger:var(--fx-merah);--ungu:var(--fx-ungu-teks);--biru:var(--fx-biru-teks);--oren:var(--fx-oren-teks);
  --r:14px;--r2:24px;
  --font:var(--fx-font);
  color-scheme:light dark;
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--teks);font:15px/1.5 var(--font);min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:1.3rem;line-height:1.3}
h2{font-size:1.1rem;line-height:1.3}
h3{font-size:.95rem;line-height:1.3;color:var(--teks2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}
a{color:var(--cyan)}
.sembunyi{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kl-pudar{color:var(--teks2)}
.kl-kecil{font-size:.85rem}
.kl-ralat{color:var(--merah);font-size:.9rem;margin:.25rem 0 .5rem}

/* ---- Butang ---- */
.kl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:.5rem 1rem;border-radius:10px;border:1px solid transparent;cursor:pointer;font-weight:600;white-space:nowrap;background:var(--panel2)}
.kl-btn:disabled{opacity:.55;cursor:not-allowed}
.kl-btn-utama{background:var(--primary);color:var(--on-primary)}
.kl-btn-utama:hover:not(:disabled){filter:brightness(1.12)}
.kl-btn-bahaya{background:var(--danger);color:#fff}
.kl-btn-hijau{background:var(--fx-hijau);color:#fff}
.kl-btn-garis{background:transparent;border-color:var(--line2)}
.kl-btn-garis:hover:not(:disabled){border-color:var(--cyan)}
.kl-btn-kecil{min-height:34px;padding:.3rem .75rem;font-size:.88rem}
.kl-btn-penuh{width:100%}
.kl-btn-ikon{background:none;border:0;font-size:1.6rem;line-height:1;width:40px;height:40px;cursor:pointer;color:var(--teks2);border-radius:10px}
.kl-btn-ikon:hover{background:var(--panel2);color:var(--teks)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- Medan ---- */
.kl-medan{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.75rem;min-width:0}
.kl-medan>span{font-size:.88rem;color:var(--teks2)}
.kl-medan input,.kl-medan select,.kl-medan textarea{width:100%;min-width:0;min-height:42px;padding:.5rem .7rem;border-radius:10px;border:1px solid var(--line2);background:var(--bg2)}
.kl-medan textarea{resize:vertical}
.kl-medan input:focus,.kl-medan select:focus,.kl-medan textarea:focus{border-color:var(--cyan);outline:none}

/* ---- Kad ---- */
.kl-kad{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:1rem;min-width:0}
.kl-jenama{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;white-space:nowrap}
.kl-jenama b{color:var(--cyan)}
.kl-logo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--primary));color:#03121B;font-weight:800}

/* ---- Log masuk ---- */
.kl-log-masuk{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.kl-kad-log-masuk{width:100%;max-width:400px;padding:1.5rem}
.kl-kad-log-masuk h1{margin:1rem 0 .3rem}
.kl-kad-log-masuk p.kl-pudar{margin-bottom:1.1rem;font-size:.92rem}
#klTotp{letter-spacing:.3em;font-variant-numeric:tabular-nums}

/* ---- Kepala & navigasi ---- */
.kl-kepala{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.6rem 1rem;background:var(--bg2);border-bottom:1px solid var(--line)}
.kl-nav{order:3;display:flex;gap:.25rem;width:100%;min-width:0}
.kl-nav-btn{flex:1;min-width:0;min-height:38px;padding:.35rem .5rem;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:600;color:var(--teks2);display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
.kl-nav-btn.aktif{background:var(--panel2);color:var(--teks);border-color:var(--line2)}
.kl-lencana-bil{display:inline-block;min-width:1.4em;padding:0 .35em;border-radius:999px;background:var(--danger);color:#fff;font-size:.75rem;line-height:1.4em;text-align:center}
.kl-pengguna{margin-left:auto;display:flex;align-items:center;gap:.5rem;min-width:0}
.kl-nama-admin{display:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}

.kl-isi{padding:1rem;max-width:1240px;margin:0 auto}
.kl-tajuk-baris{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}

/* ---- Papan ---- */
.kl-grid-kad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.kl-stat .kl-stat-label{font-size:.82rem;color:var(--teks2)}
.kl-stat .kl-stat-nilai{font-size:1.45rem;font-weight:800;line-height:1.2;margin-top:.15rem;overflow-wrap:anywhere}
.kl-stat-mrr{grid-column:1/-1;background:var(--fx-grad-kepala);color:#fff;border:0}
.kl-stat-mrr .kl-stat-label{color:#EDE9FE}
.kl-stat-mrr .kl-stat-nilai{font-size:1.9rem}
.kl-grid-dua{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}

/* ---- Jadual ringkas (status/pelan) ---- */
.kl-jadual{width:100%;border-collapse:collapse;font-size:.92rem}
.kl-jadual th,.kl-jadual td{padding:.5rem .4rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.kl-jadual th{font-size:.8rem;color:var(--teks2);font-weight:600}
.kl-jadual td.kl-nombor,.kl-jadual th.kl-nombor{text-align:right;font-variant-numeric:tabular-nums}
.kl-jadual tr:last-child td{border-bottom:0}

/* Jadual tenant: kad bertindan pada mudah alih */
.kl-jadual-tenant tbody tr{cursor:pointer}
.kl-jadual-tenant tbody tr:hover td{background:var(--panel2)}
@media (max-width:759px){
  .kl-jadual-tenant thead{display:none}
  .kl-jadual-tenant,.kl-jadual-tenant tbody,.kl-jadual-tenant tr,.kl-jadual-tenant td{display:block;width:100%}
  .kl-jadual-tenant tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:.6rem;padding:.4rem .6rem;background:var(--panel)}
  .kl-jadual-tenant td{border:0;padding:.2rem 0;display:flex;justify-content:space-between;gap:.75rem;overflow-wrap:anywhere}
  .kl-jadual-tenant td::before{content:attr(data-label);color:var(--teks2);font-size:.8rem;flex:none}
  .kl-jadual-tenant td>*{min-width:0;text-align:right}
}

/* ---- Lencana status ---- */
.kl-lencana{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap;background:var(--panel2);border:1px solid var(--line2);color:var(--teks)}
.kl-lencana[data-nada="hijau"]{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.5);color:var(--hijau)}
.kl-lencana[data-nada="kuning"]{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.5);color:var(--kuning)}
.kl-lencana[data-nada="merah"]{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.5);color:var(--merah)}
.kl-lencana[data-nada="biru"]{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.5);color:var(--fx-biru-teks)}
.kl-lencana[data-nada="ungu"]{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.5);color:var(--ungu)}

/* ---- Bayaran ---- */
.kl-senarai-bayaran{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.kl-bayaran-kepala{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}
.kl-bayaran-kepala h2{font-size:1rem;overflow-wrap:anywhere}
.kl-jumlah{font-size:1.25rem;font-weight:800;white-space:nowrap}
.kl-butiran{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .75rem;font-size:.9rem;margin-bottom:.75rem}
.kl-butiran dt{color:var(--teks2)}
.kl-butiran dd{overflow-wrap:anywhere}
.kl-butang-baris{display:flex;flex-wrap:wrap;gap:.5rem}
.kl-butang-baris .kl-btn{flex:1 1 auto}
.kl-kosong{text-align:center;padding:2rem 1rem;color:var(--teks2)}

/* ---- Penapis tenant ---- */
.kl-penapis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 .5rem;margin-bottom:.75rem}
.kl-penapis .kl-medan-cari{grid-column:1/-1}
.kl-penapis .kl-btn{grid-column:1/-1;margin-bottom:.75rem}
.kl-halaman{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}

/* ---- Panel tenant ---- */
.kl-panel-latar{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40}
.kl-panel{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:520px;background:var(--bg2);border-left:1px solid var(--line);z-index:41;display:flex;flex-direction:column}
.kl-panel-kepala{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.kl-panel-kepala h2{overflow-wrap:anywhere;min-width:0}
.kl-panel-isi{overflow-y:auto;overflow-x:hidden;padding:1rem;flex:1}
.kl-seksyen{margin-bottom:1rem}
.kl-baris-medan{display:flex;gap:.5rem;align-items:flex-end}
.kl-baris-medan .kl-medan{flex:1;margin-bottom:0}
.kl-catatan{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}
.kl-catatan li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;font-size:.9rem;overflow-wrap:anywhere;white-space:pre-wrap}
.kl-catatan .kl-meta{display:block;font-size:.78rem;color:var(--teks3);white-space:normal}
.kl-amaran{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.45);border-radius:10px;padding:.5rem .7rem;font-size:.9rem;margin-bottom:.75rem;overflow-wrap:anywhere}

/* ---- Modal ---- */
.kl-modal-latar{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem}
.kl-modal{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r2);padding:1.25rem}
.kl-modal h2{margin-bottom:.35rem}
.kl-modal p.kl-pudar{margin-bottom:.9rem;font-size:.92rem;overflow-wrap:anywhere}
.kl-modal-butang{display:flex;gap:.5rem;justify-content:flex-end}
.kl-modal-butang .kl-btn{flex:1}

/* ---- Toast ---- */
.kl-toast{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:70;max-width:calc(100% - 2rem);background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:.6rem 1rem;box-shadow:0 8px 30px rgba(0,0,0,.45);font-size:.92rem}
.kl-toast[data-jenis="ralat"]{border-color:var(--merah);color:var(--merah)}

/* ---- Skrin lebar ---- */
@media (min-width:760px){
  .kl-kepala{flex-wrap:nowrap;padding:.6rem 1.5rem}
  .kl-nav{order:0;width:auto;margin-left:1.5rem}
  .kl-nav-btn{flex:none;padding:.35rem .9rem}
  .kl-nama-admin{display:inline}
  .kl-isi{padding:1.5rem}
  .kl-grid-kad{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kl-stat-mrr{grid-column:span 2}
  .kl-grid-dua{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kl-senarai-bayaran{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kl-penapis{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:.5rem}
  .kl-penapis .kl-medan-cari,.kl-penapis .kl-btn{grid-column:auto}
  .kl-penapis .kl-btn{margin-bottom:.75rem;align-self:end}
  .kl-modal-butang .kl-btn{flex:none}
}
@media (min-width:1100px){
  .kl-senarai-bayaran{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.kl-stat-btn{text-align:left;cursor:pointer;width:100%}
.kl-stat-btn:hover{border-color:var(--cyan)}

/* =========================================================
   Rupa jenama FixOS (moden + colourful) — lapisan akhir
   ========================================================= */
.kl-btn{min-height:44px;border-radius:14px;font-weight:800;-webkit-tap-highlight-color:transparent}
.kl-btn-utama{box-shadow:0 6px 14px rgba(109,40,217,.28)}
.kl-btn-utama:hover:not(:disabled){background:var(--fx-ungu-hover);filter:none}
.kl-btn-garis{border-width:2px;color:var(--fx-ungu-teks);border-color:var(--fx-ungu)}
.kl-btn-garis:hover:not(:disabled){border-color:var(--fx-ungu-hover);background:var(--fx-ungu-lembut)}
.kl-btn-kecil{min-height:44px;font-size:.9rem}
.kl-btn-bahaya{background:var(--fx-merah)}
:focus-visible{outline:3px solid var(--fx-fokus);outline-offset:2px}
.kl-medan>span{font-weight:700;color:var(--fx-ink)}
.kl-medan input,.kl-medan select,.kl-medan textarea{min-height:48px;border-radius:14px;border:2px solid var(--fx-garis);background:var(--fx-kad2)}
.kl-medan input:focus,.kl-medan select:focus,.kl-medan textarea:focus{border-color:var(--fx-ungu);background:var(--fx-kad)}
.kl-kad{border-radius:24px;box-shadow:var(--fx-bayang)}
.kl-logo{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#FACC15,#F472B6);color:#1A1033;font-size:19px}
.kl-jenama{font-weight:800;letter-spacing:-.01em}
.kl-ralat{background:var(--fx-merah-lembut);padding:.5rem .75rem;border-radius:12px;font-weight:600}

/* log masuk: latar gradien + kad putih bulat */
.kl-log-masuk{position:relative;overflow:hidden;background:var(--fx-grad-kepala)}
.kl-log-masuk::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:#F472B6;opacity:.28;top:-110px;right:-80px;pointer-events:none}
.kl-log-masuk::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:#FACC15;opacity:.2;bottom:-100px;left:-70px;pointer-events:none}
.kl-kad-log-masuk{position:relative;z-index:1;border-radius:32px;border:0;padding:2rem 1.5rem;box-shadow:var(--fx-bayang-besar)}
.kl-kad-log-masuk h1{font-size:1.4rem;letter-spacing:-.02em}
.kl-jenama b{color:var(--fx-ungu-teks)}

/* kepala + navigasi */
.kl-kepala{background:var(--fx-grad-kepala);color:#fff;border-bottom:0;border-radius:0 0 28px 28px;box-shadow:0 10px 26px rgba(46,16,101,.22)}
.kl-kepala .kl-jenama b{color:#FDE047}
.kl-kepala .kl-pudar{color:#EDE9FE}
.kl-kepala .kl-btn-garis{color:#fff;border-color:rgba(255,255,255,.6)}
.kl-kepala .kl-btn-garis:hover:not(:disabled){background:rgba(255,255,255,.18);border-color:#fff}
.kl-kepala :focus-visible{outline-color:#FDE047}
.kl-nav-btn{min-height:44px;border-radius:999px;color:#fff;font-weight:700;border:2px solid transparent}
.kl-nav-btn:hover{background:rgba(255,255,255,.16)}
.kl-nav-btn.aktif{background:#FACC15;color:#1A1033;border-color:#FACC15}
.kl-lencana-bil{background:var(--fx-merah);min-width:1.6em}
.kl-tajuk-baris h1{font-size:1.5rem;letter-spacing:-.02em}

/* papan: kad statistik berwarna */
.kl-stat{border:0}
.kl-grid-kad>.kl-stat:nth-child(2){background:var(--fx-cyan-lembut);color:var(--fx-cyan-teks)}
.kl-grid-kad>.kl-stat:nth-child(3){background:var(--fx-hijau-lembut);color:var(--fx-hijau-teks)}
.kl-grid-kad>.kl-stat:nth-child(4){background:var(--fx-oren-lembut);color:var(--fx-oren-teks)}
.kl-grid-kad>.kl-stat:nth-child(5){background:var(--fx-pink-lembut);color:var(--fx-pink-teks)}
.kl-grid-kad>.kl-stat:nth-child(6){background:var(--fx-kuning-lembut);color:var(--fx-kuning-teks)}
.kl-grid-kad>.kl-stat:nth-child(7){background:var(--fx-biru-lembut);color:var(--fx-biru-teks)}
.kl-grid-kad>.kl-stat:nth-child(8){background:var(--fx-ungu-lembut);color:var(--fx-ungu-teks)}
.kl-grid-kad>.kl-stat:nth-child(n+2) .kl-stat-label{color:inherit;opacity:.9}
.kl-stat-btn:hover{box-shadow:var(--fx-bayang-besar);border:0}
h3{color:var(--fx-ungu-teks)}
.kl-jadual th{color:var(--fx-ungu-teks);font-weight:800}
.kl-lencana{font-weight:800;border-width:0}
.kl-lencana[data-nada="hijau"]{background:var(--fx-hijau-lembut);color:var(--fx-hijau-teks)}
.kl-lencana[data-nada="kuning"]{background:var(--fx-kuning-lembut);color:var(--fx-kuning-teks)}
.kl-lencana[data-nada="merah"]{background:var(--fx-merah-lembut);color:var(--fx-merah-teks)}
.kl-lencana[data-nada="biru"]{background:var(--fx-biru-lembut);color:var(--fx-biru-teks)}
.kl-lencana[data-nada="ungu"]{background:var(--fx-ungu-lembut);color:var(--fx-ungu-teks)}
.kl-nav-btn,.kl-btn,.kl-stat-btn{transition:transform .18s cubic-bezier(.34,1.56,.64,1),background-color .16s}
.kl-btn:active,.kl-nav-btn:active,.kl-stat-btn:active{transform:scale(.96)}
.kl-modal,.kl-panel{border-radius:28px}
.kl-panel{border-radius:28px 0 0 28px}
.kl-modal{border:0;box-shadow:var(--fx-bayang-besar)}
.kl-toast{border-radius:16px;font-weight:700}
@media (prefers-reduced-motion:reduce){.kl-nav-btn,.kl-btn,.kl-stat-btn{transition:none}.kl-btn:active,.kl-nav-btn:active,.kl-stat-btn:active{transform:none}}