/* ============================================================
panel-v2.css — rupa panel pentadbir thalhah.my (tulis semula)
3 Okt 2026
Menggantikan panel-v1.css (yang ditampal berlapis-lapis sehingga
satu peraturan ditulis 3–4 kali). Fail ini SATU sumber kebenaran:
setiap komponen ditulis sekali, semua warna datang daripada token.
Tema : bar sisi NAVY, kandungan PUTIH, aksen biru.
Gelap : — butang di bar atas
(templat/_atas.cfm + _bawah.cfm). Bootstrap 5.3 menukar
komponennya sendiri; fail ini menukar tokennya.
Asas : Bootstrap 5.3 + AdminLTE 4 kekal. Tiada pustaka baharu.
Kelas : SEMUA nama kelas panel-v1 dikekalkan.
Undur : tukar semula pautan dalam _atas.cfm ke panel-v1.css.
============================================================ */
/* ---------- 0. Fon jenama ---------- */
@font-face {
font-family: "Plus Jakarta Sans";
src: url("/assets/admin/fonts/plus-jakarta-sans.ttf") format("truetype");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
/* ---------- 1. Token: mod cerah ---------- */
:root {
/* navy jenama (bar sisi) — sama dalam kedua-dua mod */
--navy-950: #081430;
--navy-900: #0b1b44;
--navy-800: #10265c;
--navy-700: #1a3578;
--navy-600: #24479a;
--sisi-teks: #c9d6f0;
--sisi-teks-kuat: #ffffff;
--sisi-kepala: #7f9bd6;
--sisi-hover: rgba(255, 255, 255, .08);
--sisi-aktif: rgba(96, 143, 255, .22);
/* permukaan & teks kandungan */
--latar: #f5f7fb; /* latar halaman: putih kebiruan */
--permukaan: #ffffff; /* kad, bar atas, jadual */
--permukaan-2: #f8fafc; /* kepala jadual, pengaki kad, medan */
--permukaan-3: #eef2f8; /* suis bersegmen, bar kemajuan */
--teks: #0f172a;
--teks-2: #334155;
--sari: #64748b; /* teks sekunder */
--sari-2: #94a3b8; /* teks paling lembut */
--garis: #e3e8f0;
--garis-lembut: #eef1f6;
/* aksen */
--aksen: #2563eb;
--aksen-tua: #1d4ed8;
--aksen-lembut: #eaf1ff;
--aksen-garis: #a9c4fb;
--fokus: 0 0 0 .2rem rgba(37, 99, 235, .18);
/* warna status (latar lembut + teks) */
--hijau: #15803d; --hijau-lembut: #dcfce7;
--kuning: #a16207; --kuning-lembut: #fef3c7;
--merah: #b91c1c; --merah-lembut: #fee2e2;
--biru: #1d4ed8; --biru-lembut: #dbeafe;
--ungu: #6d28d9; --ungu-lembut: #ede9fe;
--sian: #0e7490; --sian-lembut: #cffafe;
--kelabu: #475569; --kelabu-lembut: #eef2f7;
--pink: #be185d; --pink-lembut: #fce7f3;
--teal: #0f766e; --teal-lembut: #ccfbf1;
--oren: #c2410c; --oren-lembut: #ffedd5;
/* bentuk */
--radius: 1rem;
--radius-kecil: .7rem;
--bayang: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -26px rgba(15, 23, 42, .4);
--bayang-angkat: 0 2px 6px rgba(15, 23, 42, .06), 0 20px 40px -26px rgba(15, 23, 42, .5);
--fon: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--tinggi-bar-bawah: 4.1rem;
/* sambungkan token ke Bootstrap supaya komponennya ikut sekali */
--bs-body-font-family: var(--fon);
--bs-body-bg: var(--latar);
--bs-body-color: var(--teks);
--bs-border-color: var(--garis);
--bs-secondary-color: var(--sari);
--bs-tertiary-bg: var(--latar);
--bs-link-color: var(--aksen);
--bs-link-color-rgb: 37, 99, 235;
--bs-link-hover-color: var(--aksen-tua);
--bs-link-hover-color-rgb: 29, 78, 216;
--bs-primary: #2563eb;
--bs-primary-rgb: 37, 99, 235;
color-scheme: light;
}
/* ---------- 1b. Token: mod gelap ----------
Diskop pada :root sahaja — bar sisi juga ada data-bs-theme="dark"
tetapi tidak boleh menukar token kandungan. */
:root[data-bs-theme="dark"] {
--navy-950: #050c1f;
--navy-900: #08142f;
--navy-800: #0c1d45;
--sisi-aktif: rgba(96, 143, 255, .2);
--latar: #0a1122;
--permukaan: #111a2e;
--permukaan-2: #16213a;
--permukaan-3: #1c2945;
--teks: #e6ebf5;
--teks-2: #c4cee0;
--sari: #93a1b8;
--sari-2: #6c7a92;
--garis: #233150;
--garis-lembut: #1b2742;
--aksen: #5b8cff;
--aksen-tua: #7aa2ff;
--aksen-lembut: rgba(91, 140, 255, .14);
--aksen-garis: rgba(91, 140, 255, .45);
--fokus: 0 0 0 .2rem rgba(91, 140, 255, .28);
--hijau: #4ade80; --hijau-lembut: rgba(74, 222, 128, .14);
--kuning: #fbbf24; --kuning-lembut: rgba(251, 191, 36, .14);
--merah: #f87171; --merah-lembut: rgba(248, 113, 113, .15);
--biru: #7aa2ff; --biru-lembut: rgba(91, 140, 255, .16);
--ungu: #b69cff; --ungu-lembut: rgba(167, 139, 250, .16);
--sian: #5eead4; --sian-lembut: rgba(45, 212, 191, .14);
--kelabu: #a3b0c6; --kelabu-lembut: rgba(148, 163, 184, .13);
--pink: #f9a8d4; --pink-lembut: rgba(244, 114, 182, .15);
--teal: #5eead4; --teal-lembut: rgba(45, 212, 191, .14);
--oren: #fdba74; --oren-lembut: rgba(251, 146, 60, .15);
--bayang: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -24px rgba(0, 0, 0, .7);
--bayang-angkat: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 40px -22px rgba(0, 0, 0, .8);
--bs-body-bg: var(--latar);
--bs-body-color: var(--teks);
--bs-border-color: var(--garis);
--bs-secondary-color: var(--sari);
--bs-tertiary-bg: var(--latar);
--bs-secondary-bg: var(--permukaan-2);
--bs-link-color: var(--aksen);
--bs-link-color-rgb: 91, 140, 255;
--bs-link-hover-color: var(--aksen-tua);
--bs-link-hover-color-rgb: 122, 162, 255;
color-scheme: dark;
}
/* ---------- 2. Asas ---------- */
body, body.bg-body-tertiary {
font-family: var(--fon);
color: var(--teks);
background: var(--latar) !important; /* atasi bg-body-tertiary (kelas !important Bootstrap) */
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, .card-title {
font-weight: 800;
letter-spacing: -.015em;
color: var(--teks);
}
a { text-underline-offset: .18em; }
code { color: var(--aksen-tua); background: var(--aksen-lembut); padding: .08rem .35rem; border-radius: .3rem; }
.text-secondary, .text-muted, .text-body-secondary { color: var(--sari) !important; }
/* nombor sebaris: digit sama lebar supaya lajur angka tersusun */
.kad-stat-nombor, .kad-tapis-bil, .small-box h3, .negara-bil, .pangkat-bil,
.table td.text-end, .nav-badge, .fs-3, .fs-4 { font-variant-numeric: tabular-nums; }
::selection { background: rgba(37, 99, 235, .2); }
/* ---------- 3. Bar atas ---------- */
.app-header {
background: var(--permukaan) !important;
border-bottom: 1px solid var(--garis);
box-shadow: none;
position: sticky;
top: 0;
z-index: 1035;
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.app-header {
background: color-mix(in srgb, var(--permukaan) 86%, transparent) !important;
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
}
}
.app-header .nav-link {
color: var(--teks-2);
border-radius: .6rem;
display: flex;
align-items: center;
gap: .35rem;
min-height: 2.5rem;
}
.app-header .nav-link:hover { background: var(--permukaan-3); color: var(--teks); }
.app-header .nav-link .bi { font-size: 1.1rem; }
/* butang mod gelap (ikon bulan / matahari bertukar ikut tema) */
.butang-tema { background: none; border: 0; cursor: pointer; }
.butang-tema .ikon-matahari { display: none; }
:root[data-bs-theme="dark"] .butang-tema .ikon-bulan { display: none; }
:root[data-bs-theme="dark"] .butang-tema .ikon-matahari { display: inline-block; }
/* ---------- 4. Bar sisi: NAVY ---------- */
.app-sidebar {
background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 55%, var(--navy-950) 100%) !important;
border-right: 1px solid rgba(255, 255, 255, .06);
box-shadow: none !important;
}
.app-sidebar .sidebar-brand {
height: 3.6rem;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.app-sidebar .brand-link { color: var(--sisi-teks-kuat); text-decoration: none; }
.app-sidebar .brand-image { opacity: 1 !important; }
.app-sidebar .brand-image i { color: #7aa2ff !important; }
.app-sidebar .brand-text { color: #fff; font-weight: 800 !important; letter-spacing: -.01em; }
.app-sidebar .nav-header {
color: var(--sisi-kepala) !important;
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
margin: 1.1rem .95rem .35rem;
padding: 0;
}
.app-sidebar .sidebar-menu .nav-link {
color: var(--sisi-teks);
border-radius: .7rem;
margin: .1rem .5rem;
padding: .52rem .6rem;
font-size: .875rem;
transition: background-color .15s ease, color .15s ease;
}
.app-sidebar .sidebar-menu .nav-link:hover { background: var(--sisi-hover); color: var(--sisi-teks-kuat); }
.app-sidebar .sidebar-menu .nav-link.active {
background: var(--sisi-aktif) !important;
color: var(--sisi-teks-kuat);
box-shadow: inset 3px 0 0 #7aa2ff;
}
.app-sidebar .sidebar-menu .nav-link.active p { font-weight: 700; }
.app-sidebar .sidebar-menu .nav-icon { width: 1.5rem; font-size: 1.02rem; }
.app-sidebar .sidebar-menu .nav-link { display: flex; align-items: center; }
/* label panjang + lencana: label turun baris, lencana tidak menindih teks */
.app-sidebar .sidebar-menu .nav-link p { display: flex; align-items: center; gap: .4rem; width: 100%; margin: 0; white-space: normal; line-height: 1.3; }
/* lencana menu: pil lembut; hanya amaran guna warna */
.sidebar-menu .nav-badge.badge {
margin-left: auto !important;
flex: 0 0 auto;
background: rgba(255, 255, 255, .12) !important;
color: #e6edfb !important;
font-weight: 700;
font-size: .7rem;
border-radius: 99px;
padding: .22rem .5rem;
}
.sidebar-menu .nav-badge.text-bg-danger { background: #dc2626 !important; color: #fff !important; }
.sidebar-menu .nav-badge.text-bg-warning { background: #f59e0b !important; color: #1f1302 !important; }
/* warna ikon menu (kelas sedia ada) — dilembutkan supaya sepadan dengan navy */
.warna-biru { color: #7aa2ff !important; }
.warna-biru-muda { color: #93c5fd !important; }
.warna-ungu { color: #a78bfa !important; }
.warna-ungu2 { color: #c4b5fd !important; }
.warna-pink { color: #f9a8d4 !important; }
.warna-emas { color: #fcd34d !important; }
.warna-oren { color: #fdba74 !important; }
.warna-teal { color: #5eead4 !important; }
.warna-hijau { color: #86efac !important; }
.warna-merah { color: #fda4af !important; }
.warna-kelabu { color: #cbd5e1 !important; }
/* ---------- 5. Kepala kandungan ---------- */
.app-content-header { padding: 1rem 1.25rem .25rem; }
.app-content-header h3 { font-size: 1.35rem; color: var(--teks); }
.app-content-header:not(:has(h3)) { padding: 0; } /* sembunyiTajuk: jangan tinggalkan ruang kosong */
.breadcrumb { margin: 0; font-size: .82rem; --bs-breadcrumb-divider-color: var(--sari-2); }
.breadcrumb a { color: var(--sari); text-decoration: none; }
.breadcrumb a:hover { color: var(--aksen); }
.breadcrumb-item.active { color: var(--sari-2); }
/* ---------- 6. Kandungan & jarak menegak ---------- */
.app-content { padding: 1rem 1.25rem 1.5rem; }
/* Semua anak langsung dijarakkan secara seragam oleh gap — margin
bawah utiliti (mb-3, mb-4) pada anak langsung diabaikan supaya
jarak antara blok sentiasa sama. */
.app-content > .container-fluid { display: flex; flex-direction: column; gap: 1.1rem; }
.app-content > .container-fluid > * { margin-bottom: 0 !important; }
/* baris tanpa kelas g-*: beri jarak menegak antara kad */
.app-content .row:not([class*=" g-"]):not([class^="g-"]):not([class*="gy-"]) { --bs-gutter-y: 1.1rem; }
/* ---------- 7. Kad ---------- */
.card {
--bs-card-bg: var(--permukaan);
--bs-card-border-color: var(--garis);
--bs-card-border-radius: var(--radius);
--bs-card-inner-border-radius: calc(var(--radius) - 1px);
--bs-card-cap-bg: transparent;
background: var(--permukaan);
border: 1px solid var(--garis);
border-radius: var(--radius);
box-shadow: var(--bayang);
color: var(--teks);
}
/* AdminLTE: card-outline card-primary — garis atas aksen */
.card.card-outline { border-top: 3px solid var(--aksen); }
.card-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem .75rem;
background: transparent;
border-bottom: 1px solid var(--garis-lembut);
padding: .85rem 1.15rem;
font-weight: 700;
}
.card-header::after { display: none; } /* clearfix AdminLTE tidak perlu dengan flex */
.card-header > .card-title { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: .1rem; }
.card-header > .card-title .bi { color: var(--aksen); }
.card-header > .card-tools { margin-left: auto; float: none; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.card-body { padding: 1.15rem; }
.card-footer {
background: var(--permukaan-2);
border-top: 1px solid var(--garis-lembut);
border-radius: 0 0 var(--radius) var(--radius) !important;
padding: .75rem 1.15rem;
}
/* ---------- 8. Kad statistik AdminLTE (small-box) ----------
Dahulu blok warna penuh. Kini kad putih + jubin ikon berwarna,
sama dengan kad-stat papan pemuka — satu bahasa reka bentuk. */
.small-box {
--sb: var(--biru); --sb-lembut: var(--biru-lembut);
position: relative;
display: block;
background: var(--permukaan) !important;
color: var(--teks) !important;
border: 1px solid var(--garis);
border-radius: var(--radius);
box-shadow: var(--bayang);
overflow: hidden;
text-align: left; /* AdminLTE menengahkan teks di telefon */
margin-bottom: 0; /* jarak datang daripada gutter baris */
transition: transform .15s ease, box-shadow .15s ease;
}
.small-box.text-bg-success { --sb: var(--hijau); --sb-lembut: var(--hijau-lembut); }
.small-box.text-bg-warning { --sb: var(--kuning); --sb-lembut: var(--kuning-lembut); }
.small-box.text-bg-danger { --sb: var(--merah); --sb-lembut: var(--merah-lembut); }
.small-box.text-bg-info { --sb: var(--sian); --sb-lembut: var(--sian-lembut); }
.small-box.text-bg-secondary,
.small-box.text-bg-light,
.small-box.text-bg-dark { --sb: var(--kelabu); --sb-lembut: var(--kelabu-lembut); }
.small-box:hover { transform: translateY(-2px); box-shadow: var(--bayang-angkat); }
.small-box .inner { padding: 1rem 4.4rem 1rem 1.1rem; color: var(--teks) !important; }
.small-box .inner h3 {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -.02em;
margin: 0 0 .1rem;
color: var(--teks);
text-shadow: none;
white-space: nowrap;
}
.small-box .inner p { margin: 0; font-size: .82rem; font-weight: 600; color: var(--sari); }
.small-box .small-box-icon {
position: absolute;
top: 50%; right: 1rem;
transform: translateY(-50%);
width: 2.7rem; height: 2.7rem;
display: grid; place-items: center;
font-size: 1.2rem;
border-radius: .85rem;
background: var(--sb-lembut);
color: var(--sb);
opacity: 1;
fill: currentColor;
}
.small-box:hover .small-box-icon { transform: translateY(-50%); } /* AdminLTE besarkan ikon semasa hover — matikan */
.small-box .small-box-footer {
display: flex; align-items: center; justify-content: center; gap: .35rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: var(--permukaan-2);
border-top: 1px solid var(--garis-lembut);
color: var(--sari) !important;
padding: .4rem 1rem;
font-size: .8rem;
font-weight: 600;
text-decoration: none;
}
.small-box .small-box-footer:hover { color: var(--aksen) !important; }
/* ---------- 9. Jadual ---------- */
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--teks);
--bs-table-border-color: var(--garis-lembut);
--bs-table-striped-bg: var(--permukaan-2);
--bs-table-striped-color: var(--teks);
--bs-table-hover-bg: var(--aksen-lembut);
--bs-table-hover-color: var(--teks);
margin-bottom: 0;
color: var(--teks);
}
.table > :not(caption) > * > * { padding: .7rem .8rem; }
.table > thead th {
background: var(--permukaan-2);
color: var(--sari);
font-size: .74rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
border-bottom: 1px solid var(--garis);
white-space: nowrap;
}
.table-sm > :not(caption) > * > * { padding: .5rem .7rem; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--aksen-lembut); }
.card-body.p-0 > .table > thead th:first-child,
.card-body.p-0 .table-responsive > .table > thead th:first-child { padding-left: 1.15rem; }
.card-body.p-0 > .table td:first-child,
.card-body.p-0 .table-responsive > .table td:first-child { padding-left: 1.15rem; }
.card-body.p-0 > .table td:last-child,
.card-body.p-0 .table-responsive > .table td:last-child { padding-right: 1.15rem; }
.table-responsive { -webkit-overflow-scrolling: touch; }
/* ---------- 10. Butang ---------- */
.btn { border-radius: var(--radius-kecil); font-weight: 600; }
.btn-sm { padding: .3rem .65rem; border-radius: .6rem; }
.btn-primary {
--bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb;
--bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8;
--bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e40af;
--bs-btn-disabled-bg: #2563eb; --bs-btn-disabled-border-color: #2563eb;
box-shadow: 0 8px 18px -12px rgba(37, 99, 235, .9);
}
.btn-success { --bs-btn-bg: #16a34a; --bs-btn-border-color: #16a34a; --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d; }
.btn-outline-primary { --bs-btn-color: var(--aksen); --bs-btn-border-color: var(--aksen-garis); --bs-btn-hover-bg: var(--aksen); --bs-btn-hover-border-color: var(--aksen); --bs-btn-hover-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--teks-2); --bs-btn-border-color: var(--garis); --bs-btn-hover-bg: var(--permukaan-3); --bs-btn-hover-border-color: var(--garis); --bs-btn-hover-color: var(--teks); --bs-btn-active-bg: var(--permukaan-3); --bs-btn-active-color: var(--teks); background: var(--permukaan); }
.btn-outline-warning { --bs-btn-color: var(--kuning); --bs-btn-border-color: #e6bb4b; --bs-btn-hover-bg: #a16207; --bs-btn-hover-border-color: #a16207; --bs-btn-hover-color: #fff; }
.btn-outline-info { --bs-btn-color: var(--sian); --bs-btn-border-color: #7cc4d6; --bs-btn-hover-bg: #0e7490; --bs-btn-hover-border-color: #0e7490; --bs-btn-hover-color: #fff; }
.btn-outline-success { --bs-btn-color: var(--hijau); --bs-btn-border-color: #79c7a1; --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d; --bs-btn-hover-color: #fff; }
.btn-outline-danger { --bs-btn-color: var(--merah); --bs-btn-border-color: #f3b0b0; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; --bs-btn-hover-color: #fff; }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: var(--fokus); }
/* ---------- 11. Lencana: pil lembut (seluruh panel) ---------- */
.badge { border-radius: .5rem; font-weight: 600; padding: .34em .62em; letter-spacing: .01em; }
.badge.text-bg-success { background: var(--hijau-lembut) !important; color: var(--hijau) !important; }
.badge.text-bg-warning { background: var(--kuning-lembut) !important; color: var(--kuning) !important; }
.badge.text-bg-danger { background: var(--merah-lembut) !important; color: var(--merah) !important; }
.badge.text-bg-secondary { background: var(--kelabu-lembut) !important; color: var(--kelabu) !important; }
.badge.text-bg-info { background: var(--sian-lembut) !important; color: var(--sian) !important; }
.badge.text-bg-primary { background: var(--biru-lembut) !important; color: var(--biru) !important; }
.badge.text-bg-dark { background: var(--teks-2) !important; color: var(--permukaan) !important; }
/* ---------- 12. Borang ---------- */
.form-label { font-size: .84rem; font-weight: 700; color: var(--teks-2); margin-bottom: .35rem; }
.form-text { color: var(--sari); font-size: .8rem; }
.form-control, .form-select {
border-radius: var(--radius-kecil);
border-color: var(--garis);
background-color: var(--permukaan);
color: var(--teks);
padding: .55rem .8rem;
}
.form-control::placeholder { color: var(--sari-2); }
.form-control:focus, .form-select:focus { border-color: var(--aksen-garis); background-color: var(--permukaan); color: var(--teks); }
.form-check-input:checked { background-color: var(--aksen); border-color: var(--aksen); }
.input-group-text { background: var(--permukaan-2); border-color: var(--garis); color: var(--sari); }
/* ---------- 13. Amaran, tab, halaman, menu lungsur ---------- */
.alert { border-radius: .8rem; border: 1px solid transparent; }
.alert-success { --bs-alert-bg: var(--hijau-lembut); --bs-alert-color: var(--hijau); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--hijau); }
.alert-warning { --bs-alert-bg: var(--kuning-lembut); --bs-alert-color: var(--kuning); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--kuning); }
.alert-danger { --bs-alert-bg: var(--merah-lembut); --bs-alert-color: var(--merah); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--merah); }
.alert-info { --bs-alert-bg: var(--biru-lembut); --bs-alert-color: var(--biru); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--biru); }
.alert-light, .alert-secondary { --bs-alert-bg: var(--permukaan-2); --bs-alert-color: var(--teks-2); --bs-alert-border-color: var(--garis); }
.nav-pills { gap: .3rem; }
.nav-pills .nav-link { border-radius: .65rem; font-weight: 600; font-size: .88rem; color: var(--teks-2); background: var(--permukaan-3); }
.nav-pills .nav-link:hover { color: var(--aksen); }
.nav-pills .nav-link.active { background: var(--aksen); color: #fff; }
.nav-tabs { border-bottom-color: var(--garis); }
.nav-tabs .nav-link { border-radius: .6rem .6rem 0 0; font-weight: 600; color: var(--sari); }
.nav-tabs .nav-link.active { color: var(--teks); background: var(--permukaan); border-color: var(--garis) var(--garis) var(--permukaan); }
.pagination { --bs-pagination-bg: var(--permukaan); --bs-pagination-border-color: var(--garis); --bs-pagination-color: var(--teks-2); --bs-pagination-active-bg: var(--aksen); --bs-pagination-active-border-color: var(--aksen); gap: .2rem; }
.pagination .page-link { border-radius: .55rem !important; }
.dropdown-menu {
--bs-dropdown-bg: var(--permukaan);
--bs-dropdown-border-color: var(--garis);
--bs-dropdown-link-color: var(--teks-2);
--bs-dropdown-link-hover-bg: var(--permukaan-3);
--bs-dropdown-link-hover-color: var(--teks);
--bs-dropdown-divider-bg: var(--garis);
border-radius: .85rem;
padding: .4rem;
box-shadow: var(--bayang-angkat);
}
.dropdown-item { border-radius: .55rem; padding: .5rem .7rem; font-size: .9rem; }
.list-group { --bs-list-group-bg: var(--permukaan); --bs-list-group-border-color: var(--garis-lembut); --bs-list-group-color: var(--teks); }
/* ---------- 14. Pengaki ---------- */
.app-footer {
background: transparent;
border-top: 1px solid var(--garis);
color: var(--sari);
font-size: .8rem;
padding: .85rem 1.25rem;
}
.app-footer code { background: var(--permukaan-3); color: var(--teks-2); }
/* ============================================================
15. Papan pemuka
============================================================ */
/* sapaan + alat */
.salam { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.salam-tajuk { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.salam-sari { margin: .15rem 0 0; color: var(--sari); font-size: .9rem; }
.salam-alat { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.butang-tambah { border-radius: var(--radius-kecil); white-space: nowrap; }
/* suis bersegmen (7/14/30 hari, Paparan/Pelawat) */
.suis { display: inline-flex; background: var(--permukaan-3); border: 1px solid var(--garis-lembut); border-radius: .8rem; padding: .2rem; gap: .15rem; }
.suis a { padding: .38rem .8rem; border-radius: .6rem; font-size: .83rem; font-weight: 600; color: var(--sari); text-decoration: none; white-space: nowrap; }
.suis a:hover { color: var(--aksen); }
.suis a.aktif { background: var(--permukaan); color: var(--aksen-tua); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
/* butang isyarat (loceng) */
.butang-isyarat {
position: relative; display: inline-grid; place-items: center;
width: 2.5rem; height: 2.5rem; border-radius: .8rem;
background: var(--permukaan); border: 1px solid var(--garis); color: var(--teks-2);
text-decoration: none;
}
.butang-isyarat:hover { color: var(--aksen); border-color: var(--aksen-garis); }
.butang-isyarat-bil {
position: absolute; top: -.4rem; right: -.4rem;
min-width: 1.15rem; height: 1.15rem; padding: 0 .28rem;
border-radius: 99px; background: #dc2626; color: #fff;
font-size: .68rem; font-weight: 700; display: grid; place-items: center;
box-shadow: 0 0 0 2px var(--permukaan);
}
/* kad statistik berjubin ikon */
.kad-stat {
display: flex; align-items: center; gap: .85rem; height: 100%;
padding: 1rem 1.05rem;
background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius);
box-shadow: var(--bayang);
text-decoration: none; color: inherit;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kad-stat:hover { transform: translateY(-2px); box-shadow: var(--bayang-angkat); border-color: var(--aksen-garis); color: inherit; }
.kad-stat-ikon { flex: 0 0 auto; width: 2.7rem; height: 2.7rem; border-radius: .85rem; display: grid; place-items: center; font-size: 1.15rem; }
.ikon-kuning { background: var(--kuning-lembut); color: var(--kuning); }
.ikon-hijau { background: var(--hijau-lembut); color: var(--hijau); }
.ikon-biru { background: var(--biru-lembut); color: var(--biru); }
.ikon-ungu { background: var(--ungu-lembut); color: var(--ungu); }
.ikon-merah { background: var(--merah-lembut); color: var(--merah); }
.ikon-kelabu { background: var(--kelabu-lembut); color: var(--kelabu); }
.kad-stat-teks { display: flex; flex-direction: column; min-width: 0; }
.kad-stat-label { font-size: .78rem; font-weight: 600; color: var(--sari); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kad-stat-nombor { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--teks); }
.kad-stat-sari { font-size: .72rem; color: var(--sari-2); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kad-stat-panah { margin-left: auto; color: var(--sari-2); font-size: .95rem; }
/* kepala kad dengan suis */
.kartu-kepala { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
/* carta SVG — warna ditetapkan di sini supaya ikut mod gelap
(CSS mengatasi atribut warna dalam SVG) */
.carta-bekas { display: grid; grid-template-columns: auto 1fr; gap: .45rem; align-items: stretch; }
.carta-y { display: flex; flex-direction: column; justify-content: space-between; font-size: .7rem; color: var(--sari-2); padding: .1rem 0 .35rem; text-align: right; min-width: 2.2rem; font-variant-numeric: tabular-nums; }
.carta-luar { position: relative; }
.carta-svg { display: block; width: 100%; height: 200px; }
.carta-svg line { stroke: var(--garis-lembut); }
.carta-svg polyline { stroke: var(--aksen); }
.carta-svg stop { stop-color: var(--aksen); }
.carta-svg rect { fill: var(--permukaan); stroke: var(--aksen); }
.carta-paksi { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .75rem; color: var(--sari-2); }
.carta-ringkas { margin: .8rem 0 0; font-size: .85rem; color: var(--teks-2); }
.carta-tip {
position: absolute; transform: translate(-50%, -130%);
background: var(--navy-900); color: #fff; font-size: .74rem; font-weight: 600;
padding: .3rem .6rem; border-radius: .5rem; white-space: nowrap;
box-shadow: 0 10px 20px -10px rgba(8, 20, 48, .8);
transition: opacity .12s ease; pointer-events: none; opacity: 0; z-index: 5;
}
.carta-tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--navy-900); }
.graf-sumber text { fill: var(--sari); }
/* senarai negara (bendera + bar) */
.negara-baris { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .3rem .55rem; align-items: center; margin-bottom: .7rem; }
.negara-bendera { display: flex; align-items: center; justify-content: center; width: 1.6rem; line-height: 1; }
.negara-bendera img { border-radius: 2px; box-shadow: 0 0 0 1px var(--garis); display: block; }
.negara-bendera .bi { color: var(--sari-2); font-size: 1rem; }
.negara-nama { font-size: .88rem; font-weight: 600; color: var(--teks-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.negara-bil { font-size: .85rem; font-weight: 700; color: var(--teks); }
.negara-bar { grid-column: 1 / -1; display: block; height: 6px; background: var(--permukaan-3); border-radius: 99px; overflow: hidden; }
.negara-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7aa2ff, var(--aksen)); }
/* aktiviti terkini (garis masa) */
.aktiviti { list-style: none; margin: 0; padding: 0; }
.aktiviti-item { position: relative; padding: 0 0 .95rem 1.15rem; border-left: 2px solid var(--garis-lembut); margin-left: .3rem; }
.aktiviti-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.aktiviti-titik { position: absolute; left: -6.5px; top: .28rem; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 3px var(--permukaan); }
.aktiviti-teks { display: block; font-size: .87rem; color: var(--teks-2); line-height: 1.4; }
.aktiviti-teks strong { color: var(--teks); }
.aktiviti-masa { display: block; font-size: .74rem; color: var(--sari-2); margin-top: .1rem; }
/* senarai bernombor (halaman popular) */
.senarai-pangkat { list-style: none; margin: 0; padding: 0; }
.senarai-pangkat li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--garis-lembut); }
.senarai-pangkat li:last-child { border-bottom: 0; }
.pangkat { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: .55rem; background: var(--permukaan-3); color: var(--sari); font-size: .76rem; font-weight: 700; display: grid; place-items: center; }
.senarai-pangkat li:nth-child(1) .pangkat { background: var(--kuning-lembut); color: var(--kuning); }
.senarai-pangkat li:nth-child(2) .pangkat { background: var(--kelabu-lembut); color: var(--kelabu); }
.senarai-pangkat li:nth-child(3) .pangkat { background: var(--merah-lembut); color: var(--merah); }
.pangkat-pautan { flex: 1 1 auto; min-width: 0; font-size: .87rem; color: var(--aksen); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pangkat-pautan:hover { text-decoration: underline; }
.pangkat-bil { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--teks-2); }
/* ============================================================
16. Halaman senarai (Direktori dan yang serupa)
============================================================ */
.kepala-halaman { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; justify-content: space-between; }
.tajuk-halaman { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.sari-halaman { margin: .2rem 0 0; color: var(--sari); font-size: .92rem; }
.alat-halaman { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.jejak { font-size: .78rem; color: var(--sari-2); display: flex; gap: .4rem; }
.jejak a { color: var(--sari); text-decoration: none; }
.jejak a:hover { color: var(--aksen); }
.butang-utama { border-radius: var(--radius-kecil); font-weight: 600; white-space: nowrap; }
/* kad tapis status */
.tapis-status { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.kad-tapis {
display: flex; align-items: center; gap: .65rem; padding: .75rem .85rem;
background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius);
box-shadow: var(--bayang);
text-decoration: none; color: inherit;
transition: transform .15s ease, border-color .15s ease;
}
.kad-tapis:hover { transform: translateY(-2px); color: inherit; border-color: var(--aksen-garis); }
.kad-tapis.aktif { border-color: var(--aksen); background: var(--aksen-lembut); box-shadow: 0 0 0 1px var(--aksen) inset; }
.kad-tapis-ikon { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: .75rem; display: grid; place-items: center; font-size: 1rem; }
.kad-tapis-teks { display: flex; flex-direction: column; min-width: 0; }
.kad-tapis-label { font-size: .76rem; font-weight: 600; color: var(--sari); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kad-tapis-bil { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--teks); }
/* bar carian */
.bar-cari {
display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius);
padding: .75rem .85rem; box-shadow: var(--bayang);
}
.bar-cari-medan { position: relative; flex: 1 1 260px; min-width: 0; }
.bar-cari-medan i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--sari-2); pointer-events: none; }
.bar-cari-medan input {
width: 100%; border: 1px solid var(--garis); border-radius: var(--radius-kecil);
padding: .62rem .8rem .62rem 2.3rem; background: var(--permukaan-2); color: var(--teks); font-size: .92rem;
}
.bar-cari-medan input::placeholder { color: var(--sari-2); }
.bar-cari-medan input:focus { outline: none; border-color: var(--aksen-garis); background: var(--permukaan); box-shadow: var(--fokus); }
.bar-cari-pilih { display: flex; gap: .5rem; flex: 0 1 auto; }
.bar-cari-pilih select, .pilih-had select {
border: 1px solid var(--garis); border-radius: var(--radius-kecil);
padding: .62rem 2rem .62rem .8rem;
background: var(--permukaan) url("data:image/svg+xml;utf8,") no-repeat right .7rem center;
font-size: .88rem; color: var(--teks-2); appearance: none; -webkit-appearance: none;
}
.bar-cari-pilih select:focus, .pilih-had select:focus { outline: none; border-color: var(--aksen-garis); box-shadow: var(--fokus); }
.butang-cari, .butang-set { border-radius: var(--radius-kecil); font-weight: 600; }
/* kepala kad senarai */
.kartu-kanan { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.kira-rekod { font-size: .82rem; color: var(--sari); font-weight: 600; }
.pilih-had { font-size: .78rem; color: var(--sari); display: flex; align-items: center; gap: .4rem; font-weight: 500; }
.pilih-had select { padding: .3rem 1.6rem .3rem .55rem; font-size: .8rem; background-position: right .45rem center; }
/* pil & tindakan dalam senarai */
.pil { display: inline-block; padding: .2rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 600; background: var(--kelabu-lembut); color: var(--kelabu); }
.pil-kelabu { background: var(--kelabu-lembut); color: var(--teks-2); }
.hub-item { display: block; margin-bottom: .15rem; }
.aksi { display: flex; justify-content: flex-end; gap: .35rem; }
.btn-aksi {
width: 2.15rem; height: 2.15rem; padding: 0; display: inline-grid; place-items: center;
border: 1px solid var(--garis); border-radius: .6rem; background: var(--permukaan); color: var(--teks-2); font-size: .95rem;
}
.btn-aksi:hover, .btn-aksi:focus-visible { border-color: var(--aksen-garis); color: var(--aksen); background: var(--aksen-lembut); }
.btn-aksi-bahaya { color: var(--merah); border-color: color-mix(in srgb, var(--merah) 35%, transparent); }
.btn-aksi-bahaya:hover { border-color: var(--merah); color: var(--merah); background: var(--merah-lembut); }
/* kaki jadual + nombor halaman */
.jadual-kaki { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.halaman { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.hlm {
min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; display: inline-grid; place-items: center;
border: 1px solid var(--garis); border-radius: .6rem; background: var(--permukaan); color: var(--teks-2);
font-size: .82rem; font-weight: 600; text-decoration: none;
}
.hlm:hover { border-color: var(--aksen-garis); color: var(--aksen); }
.hlm.aktif { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.hlm.mati { opacity: .4; pointer-events: none; }
/* ============================================================
17. Navigasi bawah (telefon) + butang terapung
============================================================ */
.nav-bawah {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
display: flex; justify-content: space-around; align-items: stretch;
background: color-mix(in srgb, var(--permukaan) 94%, transparent);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-top: 1px solid var(--garis);
padding: .35rem .35rem calc(.4rem + env(safe-area-inset-bottom, 0px));
}
.nav-bawah .nb-item {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
flex: 1 1 0; min-height: 3.1rem;
font-size: .7rem; font-weight: 600; color: var(--sari);
text-decoration: none; border-radius: .8rem;
}
.nav-bawah .nb-item i { font-size: 1.3rem; line-height: 1; }
.nav-bawah .nb-item.aktif { color: var(--aksen); }
.nav-bawah .nb-item.aktif::before { /* pil kecil di atas ikon aktif */
content: ""; position: absolute; top: -.35rem; width: 1.6rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--aksen);
}
.nav-bawah .nb-item:active { background: var(--permukaan-3); }
@media (min-width: 992px) { .nav-bawah { display: none; } }
.fab-tambah {
position: fixed; right: 1rem; bottom: calc(var(--tinggi-bar-bawah) + .9rem + env(safe-area-inset-bottom, 0px)); z-index: 1045;
width: 3.4rem; height: 3.4rem; border-radius: 1.1rem;
background: var(--aksen); color: #fff;
display: grid; place-items: center; font-size: 1.4rem; text-decoration: none;
box-shadow: 0 14px 28px -10px rgba(37, 99, 235, .75);
}
.fab-tambah:hover { background: var(--aksen-tua); color: #fff; }
@media (min-width: 992px) { .fab-tambah { display: none; } }
/* ============================================================
18. Halaman log masuk (dua panel) — kelas masuk-* dikekalkan
3 Okt 2026: panel navy bercorak, cip ciri, borang dengan ikon dalam medan,
butang lihat kata laluan, amaran Caps Lock, keadaan "sedang menyemak".
Telefon: jalur jenama ringkas + borang terus kelihatan tanpa skrol.
============================================================ */
body.login-page { background: var(--latar) !important; min-height: 100vh; margin: 0; }
.login-panel { font-family: var(--fon); color: var(--teks); }
.login-panel.login-page { display: block; padding: 0; }
.login-panel a { text-decoration: none; }
.masuk { display: flex; min-height: 100vh; min-height: 100dvh; }
/* --- panel kiri --- */
.masuk-hero {
position: relative; flex: 1 1 54%; align-self: stretch;
display: flex; align-items: center; justify-content: center;
padding: 2.5rem 2rem; overflow: hidden; color: #fff;
background:
radial-gradient(620px 420px at 85% 10%, rgba(96, 143, 255, .35), transparent 70%),
radial-gradient(520px 380px at 10% 95%, rgba(45, 212, 191, .16), transparent 70%),
linear-gradient(160deg, #1a3578 0%, var(--navy-800) 40%, var(--navy-950) 100%);
}
.masuk-hero::before { /* corak titik halus */
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255, 255, 255, .13) 1.2px, transparent 1.3px); background-size: 18px 18px;
-webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 30% 20%, #000 0%, transparent 65%);
}
.masuk-hero::after { /* gelang cahaya di belakang ilustrasi */
content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: 55%; transform: translate(-50%, -50%);
border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(122, 162, 255, .28) 0%, rgba(122, 162, 255, 0) 62%);
}
.masuk-hero-isi { position: relative; z-index: 1; max-width: 520px; text-align: center; }
.masuk-logo { display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.masuk-logo:hover { color: #fff; }
.masuk-logo b { font-weight: 800; color: #9dbbff; }
.masuk-logo-ikon { width: 2.3rem; height: 2.3rem; border-radius: .75rem; display: grid; place-items: center; font-size: 1.05rem; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); }
.masuk-slogan { margin: 1rem 0 0; font-size: 1.45rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.masuk-slogan-sorot { background: linear-gradient(90deg, #9dbbff, #5eead4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.masuk-ilustrasi {
display: block; width: min(400px, 78%); height: auto; margin: 1.2rem auto .4rem;
filter: drop-shadow(0 28px 46px rgba(2, 6, 23, .5));
animation: masuk-apung 6s ease-in-out infinite;
}
@keyframes masuk-apung { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.masuk-ciri { list-style: none; margin: .4rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.masuk-ciri li {
display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 99px;
font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .9);
background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.masuk-ciri .bi { color: #9dbbff; }
.masuk-nota { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .65); }
/* --- panel kanan --- */
.masuk-kad { flex: 1 1 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.75rem 1.75rem 1rem; }
.masuk-kad-isi {
width: 100%; max-width: 410px;
background: var(--permukaan); border: 1px solid var(--garis); border-radius: 1.5rem;
padding: 2rem 1.9rem 1.5rem; box-shadow: 0 30px 60px -36px rgba(15, 23, 42, .45);
}
.masuk-kad-ikon {
width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 1rem;
color: #fff; background: linear-gradient(135deg, #2563eb, var(--navy-800)); box-shadow: 0 12px 24px -12px rgba(37, 99, 235, .8);
}
.masuk-label { margin: 0 0 .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--aksen); }
.masuk-tajuk { margin: 0 0 .35rem; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.masuk-sari { margin: 0 0 1.3rem; font-size: .9rem; color: var(--sari); }
.masuk-amaran { display: flex; align-items: flex-start; gap: .55rem; padding: .65rem .8rem; font-size: .86rem; border-radius: .85rem; margin-bottom: 1rem; }
.masuk-amaran .bi { flex: 0 0 auto; margin-top: .1rem; }
.masuk-medan { display: block; margin: 0 0 .4rem; font-size: .8rem; font-weight: 700; color: var(--teks-2); }
/* medan dengan ikon di dalam + butang lihat kata laluan */
.medan-ikon { position: relative; }
.medan-ikon > .bi { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--sari-2); pointer-events: none; transition: color .15s ease; }
.medan-ikon .form-control { padding: .78rem 2.9rem .78rem 2.7rem; border-radius: .9rem; background: var(--permukaan-2); font-size: .95rem; }
.medan-ikon .form-control:focus { background: var(--permukaan); }
.medan-ikon:focus-within > .bi { color: var(--aksen); }
.medan-lihat {
position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
width: 2.2rem; height: 2.2rem; border: 0; border-radius: .65rem; background: transparent; color: var(--sari);
display: grid; place-items: center;
}
.medan-lihat:hover { background: var(--permukaan-3); color: var(--aksen); }
.masuk-capslock { margin: .45rem 0 0; font-size: .78rem; font-weight: 600; color: var(--kuning); display: flex; align-items: center; gap: .35rem; }
.masuk-capslock[hidden] { display: none; }
.masuk-butang { margin-top: 1.25rem; padding: .82rem; font-weight: 700; border-radius: .9rem; font-size: .98rem; }
.masuk-butang-tunggu { display: none; }
.masuk-butang.menunggu .masuk-butang-teks { display: none; }
.masuk-butang.menunggu .masuk-butang-tunggu { display: inline-flex; align-items: center; }
.masuk-kaki { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--garis-lembut); font-size: .8rem; color: var(--sari); }
.masuk-kaki a { color: var(--sari); }
.masuk-kaki a:hover { color: var(--aksen); }
.masuk-kaki .bi-lock-fill { color: var(--hijau); }
.masuk-hakcipta { margin: 1rem 0 0; font-size: .75rem; color: var(--sari-2); }
/* sisa gaya lama (input-group) jika markup lama masih digunakan */
.login-panel .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.login-panel .input-group-text { border-radius: 0 var(--radius-kecil) var(--radius-kecil) 0; }
/* --- telefon & tablet: jalur jenama ringkas, borang naik bertindih --- */
@media (max-width: 900px) {
.masuk { flex-direction: column; }
.masuk-hero { flex: 0 0 auto; padding: 1.6rem 1.25rem 3.6rem; border-radius: 0 0 1.75rem 1.75rem; }
.masuk-hero::after { width: 320px; height: 320px; top: 40%; }
.masuk-slogan { font-size: 1rem; margin-top: .6rem; }
.masuk-slogan br { display: none; }
.masuk-slogan-sorot { display: block; }
.masuk-ilustrasi { display: none; }
.masuk-ciri { margin: .8rem 0 0; gap: .35rem; }
.masuk-ciri li { font-size: .72rem; padding: .28rem .6rem; }
.masuk-nota { display: none; }
.masuk-kad { padding: 0 1rem 1.5rem; margin-top: -2.4rem; position: relative; z-index: 2; justify-content: flex-start; }
.masuk-kad-isi { border-radius: 1.35rem; padding: 1.5rem 1.3rem 1.25rem; box-shadow: 0 22px 44px -28px rgba(15, 23, 42, .5); }
.masuk-kad-ikon { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; margin-bottom: .8rem; }
.masuk-tajuk { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .masuk-ilustrasi { animation: none; } }
:root[data-bs-theme="dark"] .masuk-kad-isi { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
/* ============================================================
19. Telefon & tablet (utama — panel lebih kerap dibuka di telefon)
============================================================ */
/* jadual-kad: mod kad juga pada skrin riba kecil (≤1199px) — jadual 6 lajur
tidak muat di sebelah bar sisi dan akan melimpah ke kanan */
@media (max-width: 1199.98px) {
/* jadual-kad: setiap baris jadi kad bertindan */
.jadual-kad thead { display: none; }
.jadual-kad, .jadual-kad tbody, .jadual-kad tr, .jadual-kad td { display: block; width: 100%; }
.card-body.p-0 .jadual-kad { padding: .85rem; }
.jadual-kad tr {
border: 1px solid var(--garis); border-radius: var(--radius); background: var(--permukaan);
padding: .85rem .95rem; margin-bottom: .75rem;
}
.jadual-kad tr:last-child { margin-bottom: 0; }
.jadual-kad td, .card-body.p-0 .table-responsive > .jadual-kad td:first-child, .card-body.p-0 .table-responsive > .jadual-kad td:last-child { border: 0; padding: .2rem 0 !important; text-align: left !important; }
.jadual-kad td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sari-2); margin: .35rem 0 .1rem; }
.jadual-kad td[data-label]:first-child::before { display: none; }
.jadual-kad td[data-label="Tindakan"]::before { display: none; }
/* baris tindakan: butang dibahagi sama rata selebar kad, sasaran sentuh besar */
.jadual-kad td[data-label="Tindakan"] {
display: flex; gap: .4rem;
border-top: 1px solid var(--garis-lembut) !important; margin-top: .65rem; padding-top: .7rem !important;
}
.jadual-kad td[data-label="Tindakan"] > *,
.jadual-kad td[data-label="Tindakan"] .aksi > * { flex: 1 1 0; display: block !important; }
.jadual-kad td[data-label="Tindakan"] .aksi { display: flex !important; gap: .4rem; }
.jadual-kad td[data-label="Tindakan"] .btn,
.jadual-kad td[data-label="Tindakan"] .btn-aksi { width: 100%; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.hub-item { display: inline-flex; gap: .3rem; margin: 0 .9rem .2rem 0; }
}
/* kad tapis 5 lajur pada skrin riba kecil: ikon di atas supaya label tidak dipotong */
@media (min-width: 992px) and (max-width: 1399.98px) {
.kad-tapis { flex-direction: column; align-items: flex-start; gap: .45rem; }
}
@media (max-width: 991.98px) {
/* ruang supaya kandungan tidak tertutup bar bawah */
.app-content { padding-bottom: calc(var(--tinggi-bar-bawah) + 1.5rem + env(safe-area-inset-bottom, 0px)); }
.app-footer { margin-bottom: calc(var(--tinggi-bar-bawah) + env(safe-area-inset-bottom, 0px)); }
/* direktori: kad tapis boleh dileret */
.tapis-status { display: flex; overflow-x: auto; gap: .55rem; padding: .1rem .1rem .35rem; margin: 0 -.1rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.tapis-status::-webkit-scrollbar { display: none; }
.kad-tapis { flex: 0 0 auto; min-width: 8.6rem; scroll-snap-align: start; }
.kepala-halaman .alat-halaman { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
.jejak { order: -1; }
.bar-cari-pilih { width: 100%; }
.bar-cari-pilih select { flex: 1 1 0; min-width: 0; }
.butang-cari, .butang-set { flex: 1 1 0; white-space: nowrap; font-size: .92rem; padding-left: .5rem; padding-right: .5rem; }
.tajuk-halaman { font-size: 1.35rem; }
/* Direktori: butang terapung (+) sudah ada di telefon — jangan ulang di kepala */
.alat-halaman .butang-utama { display: none; }
/* borang sunting yang panjang: butang Simpan melekat di bawah, atas bar navigasi */
.card-body > form.row > .col-12.d-flex.gap-2:last-child {
position: sticky; bottom: calc(var(--tinggi-bar-bawah) + env(safe-area-inset-bottom, 0px)); z-index: 5;
background: var(--permukaan); border-top: 1px solid var(--garis-lembut);
margin: .25rem 0 -1rem; padding: .75rem calc(var(--bs-gutter-x) * .5) 1rem;
}
.card-body > form.row > .col-12.d-flex.gap-2:last-child > .btn { flex: 1 1 0; padding: .7rem .5rem; white-space: nowrap; font-size: .92rem; }
}
@media (max-width: 767.98px) {
.app-content-header { padding: .85rem .9rem .1rem; }
.app-content { padding-left: .85rem; padding-right: .85rem; padding-top: .85rem; }
.app-content > .container-fluid { gap: .9rem; }
.app-content .row:not([class*=" g-"]):not([class^="g-"]):not([class*="gy-"]) { --bs-gutter-y: .9rem; }
.app-content .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
.card-header { padding: .75rem .95rem; }
.card-body { padding: .95rem; }
/* jadual tanpa .table-responsive: boleh dileret ke sisi, bukan melimpah skrin.
Hanya pada kad yang ada jadual — overflow pada semua kad mematahkan butang Simpan melekat. */
.card-body:has(> .table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-body.p-0 > .table td:first-child, .card-body.p-0 .table-responsive > .table td:first-child,
.card-body.p-0 > .table > thead th:first-child, .card-body.p-0 .table-responsive > .table > thead th:first-child { padding-left: .95rem; }
.table > :not(caption) > * > * { padding: .6rem .65rem; font-size: .87rem; }
/* iOS: medan bawah 16px menyebabkan zum automatik — elakkan */
.form-control, .form-select, .bar-cari-medan input, .bar-cari-pilih select { font-size: 16px; }
/* sasaran sentuh sekurang-kurangnya ~40px */
.btn { padding: .5rem .9rem; }
.btn-sm { padding: .4rem .7rem; }
.app-header .nav-link { padding: .5rem .65rem; }
/* papan pemuka */
.salam-tajuk { font-size: 1.3rem; }
.salam-alat { width: 100%; }
.salam-alat .suis { flex: 1 1 auto; }
.salam-alat .suis a { flex: 1 1 0; text-align: center; }
.salam-alat .butang-tambah { display: none; } /* butang terapung (+) sudah ada */
.kad-stat-label, .kad-stat-sari { white-space: normal; overflow: visible; }
.carta-svg { height: 160px; }
.small-box .inner { padding: .9rem 3.6rem .9rem .95rem; }
.small-box .inner h3 { font-size: 1.35rem; }
.small-box .inner p { font-size: .76rem; }
.small-box .small-box-icon { width: 2.25rem; height: 2.25rem; font-size: 1rem; right: .8rem; border-radius: .7rem; }
.app-footer { font-size: .76rem; }
.app-footer .float-end { float: none !important; display: block; margin-top: .25rem; }
.graf-sumber text.paksi { font-size: 27px; }
}
/* kad statistik dalam lajur sempit (telefon 2 lajur, atau 4 lajur pada
skrin riba kecil): ikon di atas teks supaya label tidak dipotong "Men…" */
@media (max-width: 575.98px), (min-width: 992px) and (max-width: 1399.98px) {
.kad-stat { position: relative; flex-direction: column; align-items: flex-start; gap: .55rem; padding: .9rem; }
.kad-stat-ikon { width: 2.3rem; height: 2.3rem; font-size: 1.05rem; border-radius: .75rem; }
.kad-stat-panah { position: absolute; top: .95rem; right: .85rem; }
.kad-stat-teks { width: 100%; }
.kad-stat-label, .kad-stat-sari { white-space: normal; overflow: visible; }
}
@media (max-width: 575.98px) {
h1, .h1 { font-size: 1.4rem; }
.card-title { font-size: .95rem; }
.kad-stat { padding: .85rem; }
.kad-stat-ikon { width: 2.2rem; height: 2.2rem; font-size: 1rem; border-radius: .7rem; }
.kad-stat-nombor { font-size: 1.35rem; }
.kad-stat-label { font-size: .74rem; }
.butang-isyarat { width: 2.35rem; height: 2.35rem; }
.suis a { padding: .34rem .55rem; font-size: .78rem; }
.carta-y { font-size: .64rem; min-width: 1.9rem; }
}
/* ---------- 20. Kebolehcapaian & cetak ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
.kad-stat:hover, .kad-tapis:hover, .small-box:hover { transform: none; }
}
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 0; }
@media print {
.app-sidebar, .app-header, .app-footer, .nav-bawah, .fab-tambah { display: none !important; }
body { background: #fff !important; }
.card, .kad-stat, .small-box { box-shadow: none; border-color: #ccc; }
}
/* ============================================================
21. Hiasan: kepala bahagian berikon, sepanduk papan pemuka,
jubin ikon kad, avatar, keadaan kosong
============================================================ */
.ikon-pink { background: var(--pink-lembut); color: var(--pink); }
.ikon-teal { background: var(--teal-lembut); color: var(--teal); }
.ikon-oren { background: var(--oren-lembut); color: var(--oren); }
/* nada warna setiap bahagian (dipakai oleh kepala-bahagian) */
.nada-biru { --nada: var(--biru); }
.nada-ungu { --nada: var(--ungu); }
.nada-pink { --nada: var(--pink); }
.nada-kuning { --nada: var(--kuning); }
.nada-oren { --nada: var(--oren); }
.nada-teal { --nada: var(--teal); }
.nada-merah { --nada: var(--merah); }
.nada-hijau { --nada: var(--hijau); }
.nada-kelabu { --nada: var(--kelabu); }
/* --- kepala bahagian (semua halaman kecuali papan & direktori) --- */
.kepala-bahagian {
--nada: var(--aksen);
position: relative; overflow: hidden;
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3rem 1rem;
background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius);
padding: 1rem 1.2rem; box-shadow: var(--bayang), inset 4px 0 0 var(--nada);
}
.kepala-bahagian > *:not(.kepala-hiasan) { position: relative; z-index: 1; }
.kepala-ikon { width: 3rem; height: 3rem; border-radius: .95rem; display: grid; place-items: center; font-size: 1.35rem; }
.kepala-teks { min-width: 0; }
.kepala-bahagian h3 { font-size: 1.3rem; line-height: 1.2; }
.kepala-sari { margin: .2rem 0 0; color: var(--sari); font-size: .88rem; }
.kepala-bahagian .breadcrumb { align-self: start; white-space: nowrap; }
.kepala-hiasan {
position: absolute; right: 1.2rem; bottom: -1.9rem; z-index: 0;
font-size: 7.5rem; line-height: 1; color: var(--nada); opacity: .07; pointer-events: none;
transform: rotate(-12deg);
}
.app-content-header:has(.kepala-bahagian) { padding-bottom: 0; }
@media (max-width: 767.98px) {
.kepala-bahagian { grid-template-columns: auto 1fr; padding: .85rem .95rem; gap: .2rem .8rem; }
.kepala-bahagian .breadcrumb { display: none; }
.kepala-ikon { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; border-radius: .8rem; }
.kepala-bahagian h3 { font-size: 1.12rem; }
.kepala-sari { font-size: .8rem; }
.kepala-hiasan { font-size: 5.5rem; bottom: -1.3rem; right: .6rem; }
}
/* --- sepanduk sapaan papan pemuka: navy, teks putih, cahaya lembut --- */
.salam {
position: relative; overflow: hidden;
background:
radial-gradient(520px 220px at 100% 0%, rgba(96, 143, 255, .38), transparent 70%),
radial-gradient(380px 200px at 0% 120%, rgba(45, 212, 191, .18), transparent 70%),
linear-gradient(135deg, #1a3578 0%, var(--navy-800) 45%, var(--navy-900) 100%);
color: #fff; border-radius: var(--radius); padding: 1.35rem 1.4rem;
box-shadow: 0 18px 40px -26px rgba(8, 20, 48, .8);
}
.salam::after { /* corak titik halus di kanan */
content: ""; position: absolute; right: -10px; top: -10px; width: 240px; height: 160px; pointer-events: none;
background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.3px); background-size: 14px 14px;
-webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 75%); mask-image: linear-gradient(225deg, #000 20%, transparent 75%);
}
.salam > * { position: relative; z-index: 1; }
.salam .salam-tajuk { color: #fff; }
.salam .salam-sari { color: rgba(255, 255, 255, .72); }
.salam .suis { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); }
.salam .suis a { color: rgba(255, 255, 255, .78); }
.salam .suis a:hover { color: #fff; }
.salam .suis a.aktif { background: #fff; color: var(--navy-800); }
.salam .butang-isyarat { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; }
.salam .butang-isyarat-bil { box-shadow: 0 0 0 2px var(--navy-800); }
.salam .butang-tambah { --bs-btn-bg: #fff; --bs-btn-color: var(--navy-800); --bs-btn-border-color: #fff; --bs-btn-hover-bg: #e8efff; --bs-btn-hover-color: var(--navy-800); --bs-btn-hover-border-color: #e8efff; background-image: none; box-shadow: none; }
/* --- kepala halaman direktori: kad dengan jubin ikon --- */
.kepala-halaman {
position: relative; overflow: hidden;
background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius);
padding: 1rem 1.2rem; box-shadow: var(--bayang), inset 4px 0 0 var(--ungu);
}
.kepala-halaman > div:first-child { display: flex; align-items: center; gap: 1rem; }
.kepala-halaman .kepala-ikon { flex: 0 0 auto; }
/* --- jubin ikon pada tajuk kad --- */
.card-header .card-title > .bi:first-child {
display: inline-grid; place-items: center; flex: 0 0 auto;
width: 1.95rem; height: 1.95rem; border-radius: .6rem; margin-right: .6rem !important;
background: var(--aksen-lembut); color: var(--aksen); font-size: .95rem;
}
/* --- kad statistik tanpa pautan: tiada kesan angkat --- */
div.kad-stat:hover { transform: none; box-shadow: var(--bayang); border-color: var(--garis); }
/* --- avatar pengguna di bar atas --- */
.pengguna-kini .avatar {
width: 2rem; height: 2rem; border-radius: 50%; flex: 0 0 auto;
display: grid; place-items: center; font-size: .85rem; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #2563eb, var(--navy-800));
box-shadow: 0 0 0 2px var(--permukaan), 0 0 0 3.5px var(--aksen-garis);
}
.pengguna-kini .badge { font-size: .68rem; }
/* --- keadaan kosong ("Tiada …", "Belum ada …") — kelas dipasang oleh skrip dalam _bawah.cfm --- */
.keadaan-kosong { text-align: center !important; color: var(--sari) !important; padding: 1.7rem 1rem !important; font-size: .9rem; }
.keadaan-kosong::before {
content: ""; display: block; width: 2.8rem; height: 2.8rem; margin: 0 auto .65rem; border-radius: .95rem;
background: var(--aksen-lembut) url("data:image/svg+xml;utf8,") center / 1.35rem no-repeat;
}
.jadual-kad .keadaan-kosong { border: 0 !important; }
/* --- tajuk kecil seksyen dalam kad (contoh: "Daftar baru", "Top player") --- */
.label-seksyen { display: flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sari); margin-bottom: .6rem; }
.label-seksyen .bi { color: var(--aksen); font-size: .9rem; }
/* --- kotak maklumat: penerangan + cip ciri (contoh: ulasan.cfm) --- */
.kotak-maklumat {
display: flex; gap: .9rem; align-items: flex-start;
background: var(--permukaan-2); border: 1px solid var(--garis-lembut); border-radius: .9rem;
padding: .9rem 1rem;
}
.kotak-maklumat-ikon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: .8rem; display: grid; place-items: center; font-size: 1.15rem; }
.kotak-maklumat-isi { min-width: 0; }
.kotak-maklumat-tajuk { margin: 0; font-weight: 700; color: var(--teks); font-size: .95rem; }
.kotak-maklumat-teks { margin: .15rem 0 .6rem; color: var(--sari); font-size: .87rem; }
.kotak-maklumat-nota { margin: .6rem 0 0; color: var(--sari); font-size: .82rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.kotak-maklumat-nota .bi { color: var(--aksen); }
.cip-senarai { display: flex; flex-wrap: wrap; gap: .4rem; }
.cip {
display: inline-flex; align-items: center; gap: .35rem;
padding: .28rem .65rem; border-radius: 99px; font-size: .78rem; font-weight: 600;
background: var(--permukaan); border: 1px solid var(--garis); color: var(--teks-2);
}
.cip .bi { color: var(--hijau); font-size: .85rem; }
@media (max-width: 575.98px) {
.kotak-maklumat { flex-direction: column; gap: .6rem; }
}
/* --- senarai halaman popular: tajuk + laluan di bawahnya --- */
.pangkat-isi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pangkat-tajuk { font-size: .88rem; font-weight: 600; color: var(--teks); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pangkat-isi .pangkat-pautan { font-size: .75rem; color: var(--sari); }
.pangkat-isi .pangkat-pautan:hover { color: var(--aksen); }
.pangkat-unit { font-weight: 500; color: var(--sari-2); font-size: .72rem; }
.senarai-pangkat li { padding: .55rem 0; }
/* --- kad negara (analitik): peratus & baris pelawat unik --- */
.negara-pct { font-size: .72rem; font-weight: 600; color: var(--sari); margin-left: .25rem; }
.negara-pelawat { grid-column: 1 / -1; font-size: .72rem; color: var(--sari-2); margin-top: -.1rem; }
.negara-pelawat .bi { font-size: .75rem; }
.card-body > .negara-baris:last-child { margin-bottom: 0; }
/* ---------- Baikan menu tepi pada telefon (ditambah 3 Okt 2026) ----------
Menu tepi tiada skrol sendiri, jadi item bawah seperti Tetapan tidak dapat dicapai.
Tambahan ini menjadikan menu itu boleh diskrol dan memberi ruang di bawah supaya
item terakhir tidak tertutup bar menu bawah telefon. */
.app-sidebar {
height: 100vh !important;
max-height: 100vh !important;
overflow-y: auto !important;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-bottom: 96px !important;
}
.app-sidebar .sidebar-menu { padding-bottom: 12px; }
.app-sidebar .sidebar-menu .nav-link { min-height: 44px; } /* sasaran jari yang selesa */
@media (min-width: 992px) {
.app-sidebar { padding-bottom: 24px !important; }
}
/* Bekas dalaman menu: inilah yang perlu diskrolkan pada telefon.
AdminLTE menyimpan item menu dalam .sidebar-wrapper, bukan pada .app-sidebar. */
.sidebar-wrapper {
height: 100% !important;
max-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-bottom: 140px !important; /* ruang supaya item terakhir tidak tertutup bar bawah */
}
.sidebar-wrapper::-webkit-scrollbar { width: 6px; }
.sidebar-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
@media (min-width: 992px) { .sidebar-wrapper { padding-bottom: 32px !important; } }