/* =============================================================================
   assets/css/custom_css.css (v9)
   CSS custom yang SEBELUM INI terbenam sebagai blok <style> berasingan dalam
   SETIAP halaman v9, kini disatukan ke SATU fail dikongsi ini atas arahan
   pengguna (2026-09-20).

   KEMASKINI LOKASI (2026-09-20, kemudian pada hari sama): fail ini asalnya
   dicipta di css/custom_css.css (root impspk_v9\), TETAPI kemudian DIALIHKAN
   oleh pengguna sendiri ke assets/css/custom_css.css (bersama SEMUA aset
   Vuexy lain dalam assets/) - SEMUA <link> pada setiap halaman turut
   dikemaskini oleh pengguna pada masa yang sama. Folder css/ lama SUDAH
   TIDAK WUJUD lagi.

   KAEDAH PENYATUAN (PENTING - baca sebelum tambah/ubah apa-apa dalam fail ini):
   1. Token reka bentuk (:root --mpspk-*), animasi kongsi (@keyframes mpspkFadeIn)
      dan BEBERAPA komponen kongsi yang disahkan IDENTIK di >1 halaman (cth.
      .auth-kicker, .mpspk-gradient-text, .btn-mpspk-green, jalur gradient
      ::before kad, wizard bs-stepper, slot fail lampiran, kad semakan/ulasan)
      digabung SEKALI di BAHAGIAN KONGSI di bawah - TIADA skop diperlukan
      kerana nilainya SAMA di semua halaman yang guna.
   2. SEMUA rule lain (termasuk mana-mana rule yang guna nama class SAMA tetapi
      NILAI BERBEZA antara halaman, cth. .mpspk-brand-logo tinggi 44px di
      login.cfm tapi 40px di kebanyakan halaman lain) diletakkan di bawah
      SATU prefix skop `body.pg-<nama-halaman>` KHUSUS halaman asal masing-
      masing. Ini WAJIB - kerana fail ini kini DIKONGSI serentak oleh SEMUA
      halaman (setiap satu memuatkannya secara berasingan melalui <link>),
      rule TANPA skop akan terpakai pada SEMUA halaman yang memuatkan fail
      ini, bukan hanya halaman asalnya - tanpa skop, dua halaman yang
      kebetulan guna nama class sama dengan nilai berbeza akan BERLANGGAR
      (rule yang terkemudian dalam fail ini akan menindih yang lain pada
      KEDUA-DUA halaman). Skop `body.pg-*` mengelak ini sepenuhnya.
   3. JANGAN alih keluar/ubah prefix skop `body.pg-*` sedia ada kecuali anda
      sengaja mahu rule itu terpakai pada halaman lain juga (dalam kes itu,
      alih rule ke BAHAGIAN KONGSI di atas, bukan sekadar buang prefixnya).
   4. Fail YANG TIDAK disertakan di sini (kekal guna CSS inline/atribut
      style="" pada elemen, TIDAK diubah pusingan ini):
      - print/csr_complete_public.cfm - resit PDF dijana melalui <cfdocument>;
        gaya inline dikekalkan sengaja kerana enjin render PDF ColdFusion
        lebih boleh dipercayai dengan CSS inline berbanding fail luaran
        dimuat melalui rangkaian semasa penjanaan PDF.
      - eaduan/eaduan_detail.cfm, eaduan/cust_feedback_notification.cfm,
        public_user/aduan_search_result.cfm - tiada blok <style> asal
        (hanya beberapa atribut style="" kecil pada elemen individu, cth.
        saiz tetap thumbnail lampiran - dikekalkan sebagai inline kerana
        terlalu khusus/remeh untuk dijadikan class kongsi).
      - modules/pop_lookup/aduan_tambah_lampiran_eaduan.cfm - tiada blok
        <style> asal langsung.

   SENARAI PENUH HALAMAN YANG MEMUATKAN FAIL INI & KELAS SKOP MASING-MASING:
   - dasar_privasi.html & dasar_privasi_en.html  -> body.pg-dasar-privasi
     (kedua-dua fail asalnya ada blok <style> IDENTIK - digabung SEKALI)
   - login.cfm                                    -> body.pg-login
   - reset_password_f.cfm                         -> body.pg-reset-password
   - public_user/aduan_search.cfm                 -> body.pg-aduan-search
   - public_user/public_feedback_notification.cfm -> body.pg-public-feedback-notification
   - public_user/public_feedback_register.cfm     -> body.pg-public-feedback-register
   - public_user/public_register.cfm              -> body.pg-public-register
   - eaduan/index.cfm                             -> body.pg-eaduan-index
     (turut meliputi 3 serpihan (.load()-ed) di bawahnya yang KINI TIDAK lagi
     bawa <style> sendiri - eaduan/cust_new_feedback_form.cfm,
     eaduan/cust_new_feedback.cfm, eaduan/cust_search_feedback.cfm - kerana
     ketiga-tiganya HANYA pernah dimuatkan ke dalam #mainPanel index.cfm,
     jadi rule mereka turut diskop di bawah body.pg-eaduan-index yang sama)
   ============================================================================= */


/* -----------------------------------------------------------------------
   BAHAGIAN KONGSI - token reka bentuk & komponen disahkan IDENTIK di >1
   halaman. TIADA skop di sini dengan sengaja (selamat/neutral pada semua
   halaman lain walaupun tidak guna kelas berkenaan).
   ----------------------------------------------------------------------- */

/* Warna rasmi MPSPK - sebelum ini diulang tulis dalam 7 fail berasingan */
:root {
    --mpspk-green: #1b7a43;
    --mpspk-green-dark: #145c33;
    --mpspk-gold: #c99a2e;
    --mpspk-gold-light: #e4c368;
    --mpspk-red: #a52422;
}

/* Skrol lancar untuk pautan #anchor (TOC dasar privasi) - selamat sejagat,
   tiada kesan buruk pada halaman yang tidak guna pautan #anchor langsung. */
html { scroll-behavior: smooth; }

/* Animasi masuk borang pengesahan (login/reset kata laluan) - IDENTIK */
.auth-form-fade-in { animation: mpspkFadeIn .45s ease both; }
@keyframes mpspkFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Label kicker & aksen tajuk kecil (login/reset) - IDENTIK */
.auth-kicker {
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mpspk-green); margin-bottom: .35rem; display: inline-block;
}
.auth-heading-accent {
    display: block; width: 42px; height: 4px; border-radius: 50rem;
    background: linear-gradient(90deg, var(--mpspk-green), var(--mpspk-gold));
    margin: .6rem 0 1rem;
}

/* Togol lihat/sorok kata laluan (ikon mata) - IDENTIK di login.cfm,
   public_register.cfm & reset_password_f.cfm. Diskop ikut `.input-group-merge
   input[type="password"]` (BUKAN `.form-password-toggle`, kerana div pembalut
   itu wujud pada login.cfm & reset_password_f.cfm sahaja - public_register.cfm
   terus guna `.input-group.input-group-merge` tanpa class itu). Disahkan:
   SETIAP `.input-group-merge` yang jenis "password" pada ketiga-tiga halaman
   ini ada span ikon mata `.cursor-pointer` sepasang (7 medan kesemuanya) -
   satu-satunya `.input-group-merge` yang type="text" ialah j_username pada
   login.cfm, jadi selector ini TIDAK tersentuh padanya.
   Punca aduan pengguna: "kena klik ikon mata ke tepi sikit baru boleh" -
   Edge (& IE lama) menambah butang "reveal password" TERBINA-DALAM sendiri
   di atas input[type=password], yang bertindih/terlalu hampir dengan ikon
   mata custom kita di sebelahnya lalu mencuri klik tepat pada ikon. Baris
   ::-ms-reveal/::-ms-clear di bawah menyorok butang terbina-dalam Edge itu
   (tiada kesan pada Chrome/Firefox - pseudo-elemen ini tidak dikenali
   langsung oleh pelayar tersebut). pointer-events:none pada <i> ikon pula
   memastikan klik tepat atas glyph mata sentiasa terus ke span induk yang
   ada event click jQuery (elak sebarang isu bubble/hit-area). Selamat
   ditaruh tanpa skop halaman kerana class .input-group-merge + ikon
   .cursor-pointer sekali hanya wujud pada 3 halaman ini. */
.input-group-merge input[type="password"]::-ms-reveal,
.input-group-merge input[type="password"]::-ms-clear {
    display: none;
    width: 0; height: 0;
}
.input-group-merge .input-group-text.cursor-pointer {
    display: flex; align-items: center; justify-content: center;
    min-width: 2.5rem;
}
.input-group-merge .input-group-text.cursor-pointer i {
    pointer-events: none;
}

/* Teks jenama bergradient (login/reset/aduan_search/public_feedback_notification/
   public_feedback_register/public_register) - IDENTIK di semua halaman */
.mpspk-gradient-text {
    background: linear-gradient(90deg, var(--mpspk-green), var(--mpspk-green-dark));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Logo jenama - lalai 40px (nilai paling biasa merentasi halaman). login.cfm
   & reset_password_f.cfm sengaja guna saiz berbeza - lihat override skop
   masing-masing di bahagian halaman masing-masing di bawah. */
.mpspk-brand-logo { height: 40px; width: auto; }

/* Butang hijau MPSPK generik (aduan_search/public_feedback_notification/
   public_register) - IDENTIK */
.btn-mpspk-green { background-color: var(--mpspk-green); border-color: var(--mpspk-green); color: #fff; }
.btn-mpspk-green:hover, .btn-mpspk-green:focus { background-color: var(--mpspk-green-dark); border-color: var(--mpspk-green-dark); color: #fff; }

/* Jalur gradient 3-warna di atas kad ".mpspk-aduan-card" (aduan_search/
   public_feedback_notification/public_feedback_register/public_register) -
   IDENTIK. (Kad ".mpspk-reset-card" pada reset_password_f.cfm guna jalur
   gradient SAMA tetapi nama class berbeza - kekal berasingan, lihat skop
   pg-reset-password di bawah, supaya markup asal fail itu tidak disentuh.) */
.mpspk-aduan-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, var(--mpspk-gold-light), var(--mpspk-green) 55%, var(--mpspk-red));
}

/* Wizard bernombor (bs-stepper) - warna langkah aktif/selesai. IDENTIK
   antara public_feedback_register.cfm (standalone) & eaduan/cust_new_feedback.cfm
   (serpihan eaduan/index.cfm) - ID/class butang next/submit sengaja BERBEZA
   nama antara kedua-dua fail (#btnSubmitAduan vs #btnSubmitEaduan, dsb.) jadi
   kekal sebagai rule berasingan di bahagian halaman masing-masing. */
.bs-stepper.wizard-numbered .bs-stepper-header .step .bs-stepper-circle {
    background-color: #f1f2f4; color: #6f727d;
}
.bs-stepper.wizard-numbered .bs-stepper-header .step.active .bs-stepper-circle,
.bs-stepper.wizard-numbered .bs-stepper-header .step.crossed .bs-stepper-circle {
    background-color: var(--mpspk-green); color: #fff;
}
.bs-stepper.wizard-numbered .bs-stepper-header .step.active .bs-stepper-title { color: var(--mpspk-green-dark); }

/* Slot pratonton fail lampiran wizard - IDENTIK antara
   public_feedback_register.cfm & eaduan/cust_new_feedback.cfm */
.mpspk-file-slot {
    border: 1px dashed #c6c8ce; border-radius: .5rem; padding: .75rem; text-align: center; position: relative;
}
.mpspk-file-slot img.picture-src { max-width: 100%; max-height: 90px; object-fit: contain; margin-bottom: .5rem; }
.mpspk-file-slot input[type="file"] { font-size: .75rem; }

/* Kad ringkasan pada langkah "Pengesahan" wizard - IDENTIK antara
   public_feedback_register.cfm & eaduan/cust_new_feedback.cfm */
.mpspk-review-card { border: 1px solid #e7e7e8; border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.mpspk-review-card h6 { color: var(--mpspk-red); text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; margin-bottom: .75rem; }
.mpspk-review-row { display: flex; padding: .2rem 0; font-size: .875rem; }
.mpspk-review-row .mpspk-review-label { flex: 0 0 40%; color: #6f727d; }
.mpspk-review-row .mpspk-review-value { flex: 1; }


/* =========================================================================
   dasar_privasi.html & dasar_privasi_en.html  (skop: body.pg-dasar-privasi)
   Kandungan asal KEDUA-DUA fail identik - digabung SEKALI, dipakai kepada
   kedua-duanya melalui class body yang sama.
   ========================================================================= */
body.pg-dasar-privasi { background-color: #f5f5f9; }
body.pg-dasar-privasi .policy-section { scroll-margin-top: 1.5rem; }
body.pg-dasar-privasi .policy-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: .5rem;
    background-color: rgba(115, 103, 240, .12); color: #7367f0; flex-shrink: 0;
    font-size: 1.15rem;
}
body.pg-dasar-privasi .toc-list a {
    display: block; padding: .4rem .6rem; border-radius: .375rem;
    color: #6f6b7d; text-decoration: none; font-size: .8125rem; line-height: 1.3;
}
body.pg-dasar-privasi .toc-list a:hover { background-color: rgba(115, 103, 240, .08); color: #7367f0; }
body.pg-dasar-privasi .toc-card { position: sticky; top: 1.5rem; }
body.pg-dasar-privasi .effective-date-badge {
    background-color: rgba(115, 103, 240, .08); color: #5e548e;
    border: 1px solid rgba(115, 103, 240, .16);
}
body.pg-dasar-privasi .brand-navbar { background-color: #fff; border-bottom: 1px solid #e7e7ee; }
body.pg-dasar-privasi .back-to-top {
    position: fixed; right: 1.5rem; bottom: 1.5rem; width: 2.75rem; height: 2.75rem;
    display: none; align-items: center; justify-content: center; z-index: 1030;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
}
body.pg-dasar-privasi section.policy-section p,
body.pg-dasar-privasi section.policy-section ul,
body.pg-dasar-privasi section.policy-section ol {
    color: #444050; line-height: 1.85; margin-bottom: 1rem;
}
body.pg-dasar-privasi section.policy-section h2 { font-size: 1.15rem; font-weight: 700; color: #32324d; }


/* =========================================================================
   login.cfm  (skop: body.pg-login)
   ========================================================================= */
body.pg-login .mpspk-brand-logo { height: 44px; width: auto; } /* override lalai 40px - sengaja lebih besar pada login */

body.pg-login .mpspk-auth-wrapper { background-color: #fdfdfd; min-height: 100vh; }
body.pg-login .mpspk-auth-inner { position: relative; overflow: hidden; min-height: 100vh; }

body.pg-login .mpspk-form-panel { position: relative; z-index: 2; background-color: #fff; }

body.pg-login .mpspk-photo-panel { overflow: hidden; background-color: #0d3d22; }
@media (min-width: 992px) {
    body.pg-login .mpspk-photo-panel {
        position: absolute; top: 0; left: 36%; width: 64%; height: 100%; z-index: 1;
    }
}
body.pg-login .mpspk-photo-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
    filter: url(#mpspkSharpen) contrast(1.06) saturate(1.1);
}
body.pg-login .mpspk-digital-overlay {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(228, 195, 104, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(228, 195, 104, .12) 1px, transparent 1px);
    background-size: 34px 34px;
    mix-blend-mode: overlay; opacity: .55;
}
body.pg-login .mpspk-photo-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(0deg, rgba(9, 33, 20, .78) 0%, rgba(9, 33, 20, .22) 32%, rgba(9, 33, 20, 0) 52%),
        linear-gradient(180deg, rgba(9, 33, 20, .4) 0%, rgba(9, 33, 20, 0) 26%);
}
body.pg-login .mpspk-photo-frame { position: absolute; inset: 22px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; pointer-events: none; }
body.pg-login .mpspk-photo-frame::before,
body.pg-login .mpspk-photo-frame::after {
    content: ""; position: absolute; width: 46px; height: 46px;
    border-color: var(--mpspk-gold-light); border-style: solid; border-width: 0;
}
body.pg-login .mpspk-photo-frame::before { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; }
body.pg-login .mpspk-photo-frame::after { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; }

body.pg-login .mpspk-clocktower-layer {
    position: absolute; top: 0; left: 0; bottom: 0; width: 44%; overflow: hidden;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 42%, rgba(0, 0, 0, .55) 62%, transparent 86%);
    mask-image: linear-gradient(100deg, #000 0%, #000 42%, rgba(0, 0, 0, .55) 62%, transparent 86%);
}
body.pg-login .mpspk-clocktower-layer img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
    filter: contrast(1.05) saturate(1.08);
}

body.pg-login .mpspk-photo-caption { position: absolute; left: 15%; right: 48px; bottom: 40px; z-index: 2; color: #fff; }
body.pg-login .mpspk-photo-caption img { height: 54px; width: auto; margin-bottom: 1rem; }
body.pg-login .mpspk-photo-caption h2 { color: #fff; font-weight: 700; margin-bottom: .4rem; }
body.pg-login .mpspk-photo-caption p { color: rgba(255, 255, 255, .82); margin-bottom: 0; font-size: .9rem; }
body.pg-login .mpspk-photo-accent-line {
    width: 64px; height: 4px; border-radius: 50rem; margin: 1rem 0 0;
    background: linear-gradient(90deg, var(--mpspk-gold-light), var(--mpspk-green) 55%, var(--mpspk-red));
}

@media (min-width: 992px) {
    body.pg-login .mpspk-form-panel { clip-path: url(#mpspkFormClip); }
}

body.pg-login #btnSubmit { background-color: var(--mpspk-green); border-color: var(--mpspk-green); }
body.pg-login #btnSubmit:hover, body.pg-login #btnSubmit:focus { background-color: var(--mpspk-green-dark); border-color: var(--mpspk-green-dark); }
body.pg-login #user_login .form-control:focus { border-color: var(--mpspk-green); box-shadow: 0 0 0 .2rem rgba(27, 122, 67, .15); }
body.pg-login #lnk_forgot { color: var(--mpspk-green); }

body.pg-login .access-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; padding: .9rem .25rem; border-radius: .5rem; height: 100%;
    width: 100%; font-size: .78125rem; font-weight: 500; text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
body.pg-login .access-tile i { font-size: 1.25rem; }
body.pg-login .access-tile:hover { transform: translateY(-2px); box-shadow: 0 .375rem .75rem rgba(0, 0, 0, .08); }
body.pg-login .tile-green { background: rgba(27, 122, 67, .08); color: #145c33; }
body.pg-login .tile-green:hover { background: rgba(27, 122, 67, .14); }
body.pg-login .tile-gold { background: rgba(201, 154, 46, .14); color: #8a6a12; }
body.pg-login .tile-gold:hover { background: rgba(201, 154, 46, .22); }
body.pg-login .tile-red { background: rgba(165, 36, 34, .08); color: #8a2422; }
body.pg-login .tile-red:hover { background: rgba(165, 36, 34, .14); }


/* =========================================================================
   reset_password_f.cfm  (skop: body.pg-reset-password)
   ========================================================================= */
body.pg-reset-password .mpspk-brand-logo { height: 42px; width: auto; } /* override lalai 40px - sengaja sedikit lebih besar pada halaman ini */

body.pg-reset-password { background-color: #fdfdfd; }
body.pg-reset-password .mpspk-reset-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
body.pg-reset-password .mpspk-reset-card {
    width: 100%; max-width: 460px; background: #fff; border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(9, 33, 20, .12);
    padding: 2.5rem 2.25rem; position: relative; overflow: hidden;
}
body.pg-reset-password .mpspk-reset-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, var(--mpspk-gold-light), var(--mpspk-green) 55%, var(--mpspk-red));
}
body.pg-reset-password #btnSubmitReset { background-color: var(--mpspk-green); border-color: var(--mpspk-green); }
body.pg-reset-password #btnSubmitReset:hover, body.pg-reset-password #btnSubmitReset:focus { background-color: var(--mpspk-green-dark); border-color: var(--mpspk-green-dark); }
body.pg-reset-password #btnSubmitReset:disabled { opacity: .6; }
body.pg-reset-password #reset_password_form .form-control:focus { border-color: var(--mpspk-green); box-shadow: 0 0 0 .2rem rgba(27, 122, 67, .15); }

body.pg-reset-password .mpspk-req-list { list-style: none; padding: 0; margin: .75rem 0 1.25rem; font-size: .8125rem; }
body.pg-reset-password .mpspk-req-list li { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; color: #8a8d93; transition: color .15s ease; }
body.pg-reset-password .mpspk-req-list li i { font-size: 1rem; color: #c6c8ce; transition: color .15s ease; }
body.pg-reset-password .mpspk-req-list li.ok { color: var(--mpspk-green-dark); }
body.pg-reset-password .mpspk-req-list li.ok i { color: var(--mpspk-green); }


/* =========================================================================
   public_user/aduan_search.cfm  (skop: body.pg-aduan-search)
   ========================================================================= */
body.pg-aduan-search { background-color: #fdfdfd; }

body.pg-aduan-search .mpspk-aduan-wrapper {
    min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
    padding: 2rem 1rem;
}
body.pg-aduan-search .mpspk-aduan-outer { width: 100%; max-width: 1100px; }
body.pg-aduan-search .mpspk-aduan-card {
    width: 100%; background: #fff; border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(9, 33, 20, .12);
    padding: 2rem 2.25rem 2.5rem; position: relative; overflow: hidden;
}

body.pg-aduan-search .mpspk-guide-box {
    border: 1px solid #e7e7e8; border-radius: .75rem; padding: 1.25rem 1.4rem;
    background: rgba(201,154,46,.06); height: 100%;
}
body.pg-aduan-search .mpspk-guide-box h6 { color: var(--mpspk-green-dark); margin-bottom: .75rem; }
body.pg-aduan-search .mpspk-guide-box ol { padding-left: 1.1rem; margin-bottom: 0; font-size: .875rem; }
body.pg-aduan-search .mpspk-guide-box li { margin-bottom: .6rem; }

/* ---- Kad ringkasan (No. Rujukan / Tarikh / Status) ---- */
body.pg-aduan-search .mpspk-stat { display: flex; align-items: center; gap: .85rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid #e7e7e8; border-left: 4px solid var(--mpspk-green); border-radius: .75rem; background: #fff; }
body.pg-aduan-search .mpspk-stat-status { border-left-color: var(--mpspk-red); background: rgba(201,154,46,.06); }
body.pg-aduan-search .mpspk-stat-icon { font-size: 1.6rem; color: var(--mpspk-green); flex: 0 0 auto; }
body.pg-aduan-search .mpspk-stat-status .mpspk-stat-icon { color: var(--mpspk-red); }
body.pg-aduan-search .mpspk-stat-label { font-size: .75rem; color: #6f727d; line-height: 1.25; }
body.pg-aduan-search .mpspk-stat-value { font-weight: 700; font-size: 1.05rem; word-break: break-word; }

/* ---- Seksyen ---- */
body.pg-aduan-search .mpspk-section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #f1f2f4; }
body.pg-aduan-search .mpspk-section-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mpspk-green-dark); }
body.pg-aduan-search .mpspk-section-title i.ti { font-size: 1.15rem; }
body.pg-aduan-search .mpspk-section-title i:not(.ti) { text-transform: none; font-weight: 400; color: #8a8d93; letter-spacing: 0; }

body.pg-aduan-search .mpspk-dept-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border-radius: 2rem; font-size: .75rem; font-weight: 500; color: var(--mpspk-green-dark); background: rgba(27,122,67,.1); border: 1px solid rgba(27,122,67,.25); }

body.pg-aduan-search .mpspk-result-row { display: flex; gap: 1rem; padding: .6rem .25rem; font-size: .9rem; border-bottom: 1px solid #f1f2f4; }
body.pg-aduan-search .mpspk-result-row:nth-child(even) { background: #fafafb; }
body.pg-aduan-search .mpspk-result-row:last-child { border-bottom: none; }
body.pg-aduan-search .mpspk-result-row .mpspk-result-label { flex: 0 0 38%; color: #6f727d; }
body.pg-aduan-search .mpspk-result-row .mpspk-result-value { flex: 1; font-weight: 500; word-break: break-word; }

/* ---- Garis masa ---- */
body.pg-aduan-search .mpspk-timeline { position: relative; }
body.pg-aduan-search .timeline-item { position: relative; display: flex; gap: .85rem; padding-bottom: 1rem; }
body.pg-aduan-search .timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #e7e7e8; }
body.pg-aduan-search .timeline-dot { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--mpspk-green); color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
body.pg-aduan-search .timeline-body { flex: 1; min-width: 0; background: #fafafb; border: 1px solid #f1f2f4; border-radius: .6rem; padding: .6rem .85rem; }
body.pg-aduan-search .timeline-date { font-size: .78rem; color: #6f727d; margin-bottom: .2rem; }
body.pg-aduan-search .timeline-content p { margin-bottom: .15rem; font-size: .875rem; }

@media (max-width: 575.98px) {
    body.pg-aduan-search .mpspk-aduan-card { padding: 1.5rem 1.1rem 1.75rem; }
    body.pg-aduan-search .mpspk-result-row { flex-direction: column; gap: .1rem; }
}

body.pg-aduan-search .mpspk-attach-thumb { width: 100px; height: 100px; object-fit: cover; border-radius: .4rem; border: 1px solid #e7e7e8; }
body.pg-aduan-search .mpspk-attach-link { display: inline-block; cursor: zoom-in; }
body.pg-aduan-search .mpspk-attach-link[data-type="pdf"] { cursor: pointer; }
body.pg-aduan-search .mpspk-attach-link:hover .mpspk-attach-thumb { border-color: #28a745; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* ---- Lightbox lampiran (fullscreen + zoom) - lihat skrip mpspkLightbox dalam aduan_search.cfm ---- */
html.mpspk-lb-lock, html.mpspk-lb-lock body { overflow: hidden !important; }
body.pg-aduan-search .mpspk-lb { position: fixed; inset: 0; z-index: 2000; display: none; background: rgba(10,12,16,.94); color: #fff; user-select: none; -webkit-user-select: none; }
body.pg-aduan-search .mpspk-lb.is-open { display: block; animation: mpspkLbFade .15s ease; }
@keyframes mpspkLbFade { from { opacity: 0; } to { opacity: 1; } }
body.pg-aduan-search .mpspk-lb-toolbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); }
body.pg-aduan-search .mpspk-lb-caption { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
body.pg-aduan-search .mpspk-lb-counter { font-size: .85rem; opacity: .75; white-space: nowrap; }
body.pg-aduan-search .mpspk-lb-actions { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
body.pg-aduan-search .mpspk-lb-zoom { min-width: 3.2rem; text-align: center; font-size: .8rem; opacity: .85; }
body.pg-aduan-search .mpspk-lb-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 1.25rem; cursor: pointer; text-decoration: none; transition: background .15s; }
body.pg-aduan-search .mpspk-lb-btn:hover, body.pg-aduan-search .mpspk-lb-btn:focus-visible { background: rgba(255,255,255,.22); color: #fff; outline: none; }
body.pg-aduan-search .mpspk-lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
body.pg-aduan-search .mpspk-lb-stage.is-zoomed { cursor: grab; }
body.pg-aduan-search .mpspk-lb-stage.is-dragging { cursor: grabbing; }
body.pg-aduan-search .mpspk-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; opacity: 0; pointer-events: none; }
body.pg-aduan-search .mpspk-lb-img.is-loaded { opacity: 1; }
body.pg-aduan-search .mpspk-lb-spinner { position: absolute; width: 42px; height: 42px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: mpspkLbSpin .8s linear infinite; }
@keyframes mpspkLbSpin { to { transform: rotate(360deg); } }
body.pg-aduan-search .mpspk-lb-nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); display: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.6rem; cursor: pointer; }
body.pg-aduan-search .mpspk-lb-nav:hover { background: rgba(255,255,255,.25); }
body.pg-aduan-search .mpspk-lb.has-multi .mpspk-lb-nav { display: inline-flex; align-items: center; justify-content: center; }
body.pg-aduan-search .mpspk-lb-prev { left: 1rem; }
body.pg-aduan-search .mpspk-lb-next { right: 1rem; }
@media (max-width: 575.98px) {
    body.pg-aduan-search .mpspk-lb-toolbar { flex-wrap: wrap; gap: .25rem .5rem; }
    body.pg-aduan-search .mpspk-lb-caption { flex-basis: calc(100% - 4rem); }
    body.pg-aduan-search .mpspk-lb-actions { width: 100%; justify-content: space-between; }
    body.pg-aduan-search .mpspk-lb-btn { width: 36px; height: 36px; font-size: 1.1rem; }
    body.pg-aduan-search .mpspk-lb-zoom, body.pg-aduan-search .mpspk-lb [data-lb="fullscreen"] { display: none; }
    body.pg-aduan-search .mpspk-lb-nav { width: 40px; height: 40px; font-size: 1.3rem; }
    body.pg-aduan-search .mpspk-lb-prev { left: .4rem; }
    body.pg-aduan-search .mpspk-lb-next { right: .4rem; }
}


/* =========================================================================
   public_user/public_feedback_notification.cfm  (skop: body.pg-public-feedback-notification)
   ========================================================================= */
body.pg-public-feedback-notification { background-color: #fdfdfd; }

body.pg-public-feedback-notification .mpspk-aduan-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
body.pg-public-feedback-notification .mpspk-aduan-card {
    width: 100%; max-width: 720px; background: #fff; border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(9, 33, 20, .12);
    padding: 2.5rem 2.25rem; position: relative; overflow: hidden; text-align: center;
}

body.pg-public-feedback-notification .mpspk-success-icon {
    width: 84px; height: 84px; border-radius: 50%; background: rgba(27,122,67,.1);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;
}
body.pg-public-feedback-notification .mpspk-success-icon i { font-size: 2.75rem; color: var(--mpspk-green); }

body.pg-public-feedback-notification .mpspk-ref-box {
    border: 1px dashed var(--mpspk-green); border-radius: .5rem; padding: 1rem 1.25rem;
    margin: 1.5rem 0; background: rgba(27,122,67,.04);
}
body.pg-public-feedback-notification .mpspk-ref-box .mpspk-ref-label { font-size: .8rem; color: #6f727d; text-transform: uppercase; letter-spacing: .04em; }
body.pg-public-feedback-notification .mpspk-ref-box .mpspk-ref-no { font-size: 1.5rem; font-weight: 700; color: var(--mpspk-red); letter-spacing: .02em; }

body.pg-public-feedback-notification .mpspk-detail-row { display: flex; padding: .35rem 0; font-size: .9rem; text-align: left; border-bottom: 1px solid #f1f2f4; }
body.pg-public-feedback-notification .mpspk-detail-row:last-child { border-bottom: none; }
body.pg-public-feedback-notification .mpspk-detail-row .mpspk-detail-label { flex: 0 0 42%; color: #6f727d; }
body.pg-public-feedback-notification .mpspk-detail-row .mpspk-detail-value { flex: 1; font-weight: 500; }

body.pg-public-feedback-notification .mpspk-channel-list { text-align: left; font-size: .9rem; margin: 0; padding-left: 0; list-style: none; }
body.pg-public-feedback-notification .mpspk-channel-list li { padding: .2rem 0; }
body.pg-public-feedback-notification .mpspk-channel-list i { color: var(--mpspk-green); width: 1.25rem; }


/* =========================================================================
   public_user/public_feedback_register.cfm  (skop: body.pg-public-feedback-register)
   ========================================================================= */
body.pg-public-feedback-register { background-color: #fdfdfd; }
/* Select2 (dropdownParent: body) - lampiran wrapper luar body-appended tiada
   lebar eksplisit & lalai kembang selebar body, menyebabkan scrollbar
   mendatar palsu. overflow-x:hidden sekat ini tanpa memotong kandungan
   dropdown sebenar. Diskop kepada halaman ini sahaja (bukan sejagat) kerana
   hanya halaman yang guna select2+dropdownParent:body memerlukannya. */
body.pg-public-feedback-register { overflow-x: hidden; }
html:has(body.pg-public-feedback-register) { overflow-x: hidden; }

body.pg-public-feedback-register .mpspk-aduan-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}
body.pg-public-feedback-register .mpspk-aduan-card {
    width: 100%; max-width: 960px; background: #fff; border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(9, 33, 20, .12);
    padding: 2rem 2.25rem 2.5rem; position: relative; overflow: hidden;
}

body.pg-public-feedback-register #btnSubmitAduan { background-color: var(--mpspk-green); border-color: var(--mpspk-green); }
body.pg-public-feedback-register #btnSubmitAduan:hover, body.pg-public-feedback-register #btnSubmitAduan:focus { background-color: var(--mpspk-green-dark); border-color: var(--mpspk-green-dark); }
body.pg-public-feedback-register .btn-next-aduan { background-color: var(--mpspk-green); border-color: var(--mpspk-green); }
body.pg-public-feedback-register .btn-next-aduan:hover, body.pg-public-feedback-register .btn-next-aduan:focus { background-color: var(--mpspk-green-dark); border-color: var(--mpspk-green-dark); }

body.pg-public-feedback-register .mpspk-choice-tile {
    border: 1px solid #d7dae0; border-radius: .5rem; padding: 1rem .75rem; text-align: center;
    cursor: pointer; transition: border-color .15s ease, background-color .15s ease; height: 100%;
}
body.pg-public-feedback-register .mpspk-choice-tile i { font-size: 1.75rem; color: #8a8d93; }
body.pg-public-feedback-register .mpspk-choice-tile h6 { margin: .5rem 0 0; }
body.pg-public-feedback-register .mpspk-choice-tile.active { border-color: var(--mpspk-green); background-color: rgba(27,122,67,.06); }
body.pg-public-feedback-register .mpspk-choice-tile.active i, body.pg-public-feedback-register .mpspk-choice-tile.active h6 { color: var(--mpspk-green-dark); }


/* =========================================================================
   public_user/public_register.cfm  (skop: body.pg-public-register)
   ========================================================================= */
body.pg-public-register { background-color: #fdfdfd; }
/* Select2 (dropdownParent: body) - lihat nota sama dalam blok
   public_feedback_register.cfm di atas. */
body.pg-public-register { overflow-x: hidden; }
html:has(body.pg-public-register) { overflow-x: hidden; }

body.pg-public-register .mpspk-aduan-wrapper {
    min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
    padding: 2rem 1rem;
}
body.pg-public-register .mpspk-aduan-outer { width: 100%; max-width: 1100px; }
body.pg-public-register .mpspk-aduan-card {
    width: 100%; background: #fff; border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(9, 33, 20, .12);
    padding: 2rem 2.25rem 2.5rem; position: relative; overflow: hidden;
}

body.pg-public-register .mpspk-guide-box {
    border: 1px solid #e7e7e8; border-radius: .75rem; padding: 1.25rem 1.4rem;
    background: rgba(201,154,46,.06); height: 100%;
}
body.pg-public-register .mpspk-guide-box h6 { color: var(--mpspk-green-dark); margin-bottom: .75rem; }
body.pg-public-register .mpspk-guide-box p { font-size: .875rem; margin-bottom: .6rem; }
body.pg-public-register .mpspk-guide-box p:last-child { margin-bottom: 0; }

body.pg-public-register #user_id_feedback { font-size: .8rem; margin-top: .35rem; display: none; }
body.pg-public-register #user_id_feedback.text-danger, body.pg-public-register #user_id_feedback.text-success { display: block; }


/* =========================================================================
   eaduan/index.cfm  (skop: body.pg-eaduan-index)
   Turut meliputi 3 serpihan .load()-ed ke dalam #mainPanel halaman ini:
   eaduan/cust_new_feedback_form.cfm, eaduan/cust_new_feedback.cfm,
   eaduan/cust_search_feedback.cfm - lihat sub-bahagian bertanda di bawah.
   ========================================================================= */

/* --- index.cfm sendiri (shell dashboard) --- */
/* Select2 (dropdownParent: body) - lihat nota sama dalam blok
   public_feedback_register.cfm di atas. */
body.pg-eaduan-index,
body.pg-index { overflow-x: hidden; }
html:has(body.pg-eaduan-index),
html:has(body.pg-index) { overflow-x: hidden; }

body.pg-eaduan-index .app-brand-logo-img,
body.pg-index .app-brand-logo-img { height: 30px; width: auto; }

/* --- KEMASKINI (2026-09-20, atas arahan pengguna): reka bentuk WARNA menu sisi
   (sidebar #layout-menu) - "professional, formal dan korporat", guna warna rasmi
   jenama MPSPK (hijau gelap + emas, sama token --mpspk-* yang dipakai merentasi
   projek ini) MENGGANTIKAN skema Vuexy lalai (.bg-menu-theme latar putih + aksen
   ungu generik #7367f0) yang kelihatan seperti templat SaaS generik, bukan portal
   agensi kerajaan rasmi. GANTIKAN SEPENUHNYA rule pg-eaduan-index/.bg-menu-theme
   .menu-item.active lama di atas (latar hijau terang atas latar putih) - kini
   TIDAK RELEVAN lagi kerana latar sidebar sendiri sudah ditukar gelap. Selector
   ".bg-menu-theme ..." di bawah SENGAJA lebih spesifik (tambah kelas body.pg-
   eaduan-index + .bg-menu-theme) berbanding rule vendor asal (assets/vendor/css/
   theme-default.css, baris ~1289) supaya menang tanpa perlu sentuh fail vendor -
   custom_css.css dimuatkan SELEPAS semua CSS vendor pada setiap halaman (lihat
   susunan <link> dalam eaduan/index.cfm), jadi kekhususan sama sudah cukup untuk
   menindih (corak sama seperti rule sedia ada lain dalam fail ini). */
body.pg-eaduan-index .layout-menu.bg-menu-theme,
body.pg-index .layout-menu.bg-menu-theme { background-color: var(--mpspk-green-dark) !important; }
/* KEMASKINI (2026-09-20, pusingan ke-3 - atas arahan pengguna): corak lattice
   (kekisi berlian, gaya seni bina Islamik/mashrabiya) ditambah pada latar hijau
   gelap sidebar - "boleh tak ade design sket... warna nya light putih yang
   samar2 tapi boleh dilihat". Corak SVG data-URI (bukan fail imej berasingan -
   tiada permintaan rangkaian tambahan, skala tajam pada mana-mana DPI/zoom),
   diulang (tile 40x40px) merentasi seluruh sidebar. Guna stroke-opacity SVG
   (0.07, bukan rgba() dalam atribut stroke) untuk keserasian merentasi pelayar
   yang lebih luas. Opacity SENGAJA sangat rendah (7%) supaya kekal "samar2"
   (formal/korporat, tidak mengganggu bacaan teks menu) tetapi kelihatan jelas
   pada latar gelap - disahkan tidak berlanggar dengan mana-mana rule warna teks
   sedia ada di bawah (property berlainan sepenuhnya, background-image vs
   color/background-color). TIADA !important diperlukan di sini - vendor
   theme-default.css tidak menetapkan background-image langsung pada
   .bg-menu-theme asas (hanya background-color, yang mana rule di atas sudah
   timpa), jadi tiada pertikaian kekhususan/susunan berlaku. */
body.pg-eaduan-index .layout-menu.bg-menu-theme,
body.pg-index .layout-menu.bg-menu-theme {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20L20 0L40 20L20 40Z' fill='none' stroke='white' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 40px 40px;
}
body.pg-eaduan-index .bg-menu-theme .app-brand,
body.pg-index .bg-menu-theme .app-brand { border-bottom: 1px solid rgba(228,195,104,.22); }
body.pg-eaduan-index .bg-menu-theme .app-brand-text,
body.pg-index .bg-menu-theme .app-brand-text { color: #fff; }
body.pg-eaduan-index .bg-menu-theme .app-brand .layout-menu-toggle,
body.pg-index .bg-menu-theme .app-brand .layout-menu-toggle,
body.pg-eaduan-index .bg-menu-theme .app-brand .layout-menu-toggle i,
body.pg-index .bg-menu-theme .app-brand .layout-menu-toggle i { color: rgba(255,255,255,.7); }
body.pg-eaduan-index .bg-menu-theme .app-brand .layout-menu-toggle:hover,
body.pg-index .bg-menu-theme .app-brand .layout-menu-toggle:hover,
body.pg-eaduan-index .bg-menu-theme .app-brand .layout-menu-toggle:hover i,
body.pg-index .bg-menu-theme .app-brand .layout-menu-toggle:hover i { color: #fff; }
body.pg-eaduan-index .bg-menu-theme,
body.pg-index .bg-menu-theme,
body.pg-eaduan-index .bg-menu-theme .menu-link,
body.pg-index .bg-menu-theme .menu-link,
body.pg-eaduan-index .bg-menu-theme .menu-text,
body.pg-index .bg-menu-theme .menu-text { color: rgba(255,255,255,.75); }
/* KEMASKINI (2026-09-20, pusingan ke-2 - aduan pengguna): teks putih hilang atas
   latar hampir-putih semasa hover/toggle terbuka. Punca: DUA rule vendor
   (assets/vendor/css/theme-default.css ~baris 1372-1377) yang tidak disedari
   semasa reka bentuk asal turut menetapkan latar (background) untuk keadaan yang
   sama - "html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:
   not(.active) > .menu-link:hover { background:#f8f8f8; }" (kekhususan LEBIH
   TINGGI drpd rule kita di bawah tanpa !important, jadi menang walaupun dimuatkan
   lebih awal) dan "...menu-item.open > .menu-link.menu-toggle, ...menu-item.active
   > .menu-link.menu-toggle { background:#f4f4f5; }" (langsung tiada rule kita utk
   timpa sebelum ini). Kedua rule vendor TIDAK guna !important, tapi kekhususan
   tinggi cukup utk menang; oleh itu background-color di bawah ditambah !important
   supaya menang secara MUTLAK (bukan bergantung kepada perlumbaan kekhususan). */
body.pg-eaduan-index .bg-menu-theme .menu-link:hover,
body.pg-index .bg-menu-theme .menu-link:hover,
body.pg-eaduan-index .bg-menu-theme .menu-link:focus,
body.pg-index .bg-menu-theme .menu-link:focus { color: #fff; background-color: rgba(255,255,255,.08) !important; }
body.pg-eaduan-index .bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle,
body.pg-index .bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle,
body.pg-eaduan-index .bg-menu-theme .menu-item.active > .menu-link,
body.pg-index .bg-menu-theme .menu-item.active > .menu-link { color: #fff; }
body.pg-eaduan-index .bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-link.menu-toggle,
body.pg-index .bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-link.menu-toggle,
body.pg-eaduan-index .bg-menu-theme .menu-item.active > .menu-link.menu-toggle,
body.pg-index .bg-menu-theme .menu-item.active > .menu-link.menu-toggle { background-color: rgba(255,255,255,.12) !important; }
body.pg-eaduan-index .bg-menu-theme .menu-item.open > .menu-toggle .menu-icon,
body.pg-index .bg-menu-theme .menu-item.open > .menu-toggle .menu-icon,
body.pg-eaduan-index .bg-menu-theme .menu-item.active > .menu-link .menu-icon,
body.pg-index .bg-menu-theme .menu-item.active > .menu-link .menu-icon { color: var(--mpspk-gold-light); }
/* Item AKTIF peringkat-daun (bukan toggle induk, cth. "Baru"/"Semak Status") -
   latar pekat emas MPSPK menggantikan gradient ungu lalai Vuexy; teks hijau gelap
   supaya kontras tinggi & konsisten dengan warna sidebar sendiri. */
body.pg-eaduan-index .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle),
body.pg-index .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
    background-color: var(--mpspk-gold);
    color: var(--mpspk-green-dark) !important;
    box-shadow: none;
}
body.pg-eaduan-index .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
body.pg-index .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon { color: var(--mpspk-green-dark); }
body.pg-eaduan-index .menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
body.pg-index .menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) { border-inline-start-color: var(--mpspk-green-dark); }
body.pg-eaduan-index .bg-menu-theme .menu-header,
body.pg-index .bg-menu-theme .menu-header,
body.pg-eaduan-index .bg-menu-theme .menu-header-text,
body.pg-index .bg-menu-theme .menu-header-text { color: var(--mpspk-gold-light); letter-spacing: .06em; }
body.pg-eaduan-index .bg-menu-theme .menu-inner-shadow,
body.pg-index .bg-menu-theme .menu-inner-shadow {
    background: linear-gradient(var(--mpspk-green-dark) 41%, rgba(20,92,51,.11) 95%, rgba(20,92,51,0));
}
body.pg-eaduan-index .bg-menu-theme .menu-sub > .menu-item > .menu-link:before,
body.pg-index .bg-menu-theme .menu-sub > .menu-item > .menu-link:before { border-color: rgba(255,255,255,.35); }
body.pg-eaduan-index .bg-menu-theme.menu-vertical .menu-sub > .menu-item .menu-link .menu-icon,
body.pg-index .bg-menu-theme.menu-vertical .menu-sub > .menu-item .menu-link .menu-icon { color: rgba(255,255,255,.55); }
/* Skrol sisi (perfect-scrollbar) - jib kelabu lalai #aaa kekal boleh diterima atas
   latar gelap, tetapi sedikit lebih terang untuk mudah nampak. !important perlu
   kerana theme-default.css ada rule ".bg-menu-theme .ps__thumb-y, ... { background:
   rgba(93,89,108,.2) !important; }" - tanpa !important di sini, rule kita akan
   dikalahkan senyap oleh rule vendor tersebut walaupun dimuatkan lebih akhir. */
body.pg-eaduan-index #layout-menu .ps__thumb-y,
body.pg-index #layout-menu .ps__thumb-y,
body.pg-eaduan-index #layout-menu .ps__thumb-x,
body.pg-index #layout-menu .ps__thumb-x { background-color: rgba(255,255,255,.3) !important; }

body.pg-eaduan-index #mainPanel,
body.pg-index #mainPanel { min-height: 60vh; }
body.pg-eaduan-index .mpspk-loading-panel,
body.pg-index .mpspk-loading-panel { display: flex; align-items: center; justify-content: center; min-height: 40vh; }

/* --- serpihan: eaduan/cust_new_feedback_form.cfm (pemilih jenis maklumbalas) & (BAHARU
   2026-09-27) modules/aduan/register_new_feedback.cfm (pemilih jenis pendaftaran aduan oleh
   pegawai, menu "Maklumbalas > Baru" - reka bentuk jubin IDENTIK, jadi digabung SATU selector
   dikongsi body.pg-eaduan-index + body.pg-index, sama kaedah seperti #mainPanel/.mpspk-loading-panel
   di atas). --- */
body.pg-eaduan-index .mpspk-feedback-tile,
body.pg-index .mpspk-feedback-tile {
    border: 1px solid #d7dae0; border-radius: .75rem; padding: 2rem 1rem; text-align: center;
    cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
    height: 100%;
}
body.pg-eaduan-index .mpspk-feedback-tile:hover,
body.pg-index .mpspk-feedback-tile:hover { border-color: var(--mpspk-green); background-color: rgba(27,122,67,.04); transform: translateY(-2px); }
body.pg-eaduan-index .mpspk-feedback-tile i,
body.pg-index .mpspk-feedback-tile i { font-size: 2.5rem; color: var(--mpspk-green); }
body.pg-eaduan-index .mpspk-feedback-tile h5,
body.pg-index .mpspk-feedback-tile h5 { margin: .75rem 0 .25rem; }
body.pg-eaduan-index .mpspk-feedback-tile p,
body.pg-index .mpspk-feedback-tile p { color: #6f727d; font-size: .85rem; margin-bottom: 0; }

/* --- serpihan: eaduan/cust_new_feedback.cfm (wizard hantar maklumbalas) --- */
body.pg-eaduan-index #btnSubmitEaduan, body.pg-eaduan-index .btn-next-eaduan { background-color: var(--mpspk-green); border-color: var(--mpspk-green); }
body.pg-eaduan-index #btnSubmitEaduan:hover, body.pg-eaduan-index #btnSubmitEaduan:focus,
body.pg-eaduan-index .btn-next-eaduan:hover, body.pg-eaduan-index .btn-next-eaduan:focus { background-color: var(--mpspk-green-dark); border-color: var(--mpspk-green-dark); }

/* --- serpihan (BAHARU 2026-09-27): modules/aduan/feedback_new_default_2.cfm (wizard pendaftaran
   aduan oleh pegawai) - ID/class butang next/submit sengaja berbeza nama drpd eaduan/public
   (##btnSubmitPegawaiAduan/.btn-next-pegawai) supaya kekal rule berasingan, sama sebab seperti
   nota di atas .bs-stepper.wizard-numbered dalam BAHAGIAN KONGSI fail ini. --- */
body.pg-index #btnSubmitPegawaiAduan, body.pg-index .btn-next-pegawai { background-color: var(--mpspk-green); border-color: var(--mpspk-green); }
body.pg-index #btnSubmitPegawaiAduan:hover, body.pg-index #btnSubmitPegawaiAduan:focus,
body.pg-index .btn-next-pegawai:hover, body.pg-index .btn-next-pegawai:focus { background-color: var(--mpspk-green-dark); border-color: var(--mpspk-green-dark); }

/* --- serpihan: eaduan/cust_search_feedback.cfm (senarai "Semak Status") --- */
body.pg-eaduan-index #tbl_eaduan_search tbody tr { cursor: pointer; }
body.pg-eaduan-index .mpspk-status-badge { padding: .3em .65em; border-radius: .375rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; }
body.pg-eaduan-index .mpspk-status-diterima { background-color: rgba(105,108,255,.16); color: #696cff; }
body.pg-eaduan-index .mpspk-status-siasatan, body.pg-eaduan-index .mpspk-status-tindakan { background-color: rgba(255,171,0,.16); color: #ffab00; }
body.pg-eaduan-index .mpspk-status-selesai { background-color: rgba(113,221,55,.16); color: #71dd37; }
body.pg-eaduan-index .mpspk-status-tolak, body.pg-eaduan-index .mpspk-status-ditolak { background-color: rgba(255,62,71,.16); color: #ff3e47; }
body.pg-eaduan-index .mpspk-status-default { background-color: rgba(139,143,159,.16); color: #8b8f9f; }

/* --- serpihan: modules/dashboard/dashboard_2_eaduan.cfm (jubin kiraan status iList > E-Aduan) --- */
body.pg-index .mpspk-status-tile { transition: border-color .15s ease, box-shadow .15s ease; border: 1px solid transparent; }
body.pg-index .mpspk-status-tile:hover { border-color: var(--mpspk-green); }
body.pg-index .mpspk-status-tile-active { border-color: var(--mpspk-green); box-shadow: 0 0 0 .15rem rgba(27,122,67,.15); }

/* --- serpihan: modules/dashboard/dashboard_2_eaduan.cfm & dashboard_2_mobile.cfm (jadual
   "Senarai Aduan" - reka bentuk formal/korporat & menarik, arahan pengguna 2026-09-22).

   Diskop body.pg-index SAHAJA (BUKAN body.pg-eaduan-index) - SATU blok CSS dikongsi antara
   KEDUA-DUA fragment (#tbl_eaduan_terima & #tbl_mobile_terima), sebab kedua-duanya hanya pernah
   dimuat ke dalam index.cfm #mainPanel (SAMA sebab seperti .mpspk-status-tile di atas - lihat
   nota kaedah penyatuan di bahagian atas fail ini).

   #tbl_eaduan_terima_wrapper / #tbl_mobile_terima_wrapper ialah ID AUTO-JANA jQuery DataTables
   (corak baku {id-jadual}_wrapper - TIDAK pernah ditulis dalam HTML fragment, dijana sendiri oleh
   pustaka semasa .DataTable() dipanggil dalam <script> fragment masing-masing), selamat dirujuk
   terus di sini.

   Warna selang-seli (zebra) & hover baris SENGAJA guna pemboleh ubah CSS rasmi Bootstrap 5
   (--bs-table-striped-bg / --bs-table-hover-bg) yang SUDAH dibaca oleh mekanisme box-shadow
   dalaman .table-striped/.table-hover vendor (assets/vendor/css/core.css ~baris 1803-1872,
   selector ".table-striped > tbody > tr:nth-of-type(odd) > *" & ".table-hover > tbody > tr:hover
   > *") - override di peringkat elemen <table> itu sendiri (diwarisi turun secara semula jadi ke
   setiap <td>) DENGAN SENGAJA dipilih berbanding tulis semula logik box-shadow/warna sendiri di
   peringkat <tr>/<td>, supaya tiada pergaduhan kekhususan CSS dengan rule vendor & keutamaan
   hover-mengatasi-strip Bootsrap sendiri (var() fallback chain) kekal terpakai tanpa diubah.
   Class "table-striped" ditambah pada kedua-dua <table> (sebelum ini hanya "table table-hover")
   supaya mekanisme zebra vendor tercetus. */
body.pg-index #tbl_eaduan_terima,
body.pg-index #tbl_mobile_terima {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}

/* Kepala jadual - latar hijau gelap rasmi MPSPK + teks putih huruf besar berjarak (menggantikan
   kepala kelabu generik lalai Vuexy - kesan "formal/korporat" utama diminta). padding-right
   SENGAJA TIDAK disentuh (guna padding-top/bottom/left berasingan, bukan shorthand padding)
   supaya ruang anak panah susun sedia ada (th.sorting:before/:after, vendor padding-right:26px,
   datatables.bootstrap5.css ~baris 41-50) kekal terpelihara - shorthand padding akan menimpa
   nilai itu (ID selector di sini lebih khusus drpd rule vendor) & anak panah bertindih teks tajuk. */
body.pg-index #tbl_eaduan_terima thead th,
body.pg-index #tbl_mobile_terima thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_eaduan_terima thead th:first-child,
body.pg-index #tbl_mobile_terima thead th:first-child { border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_eaduan_terima thead th:last-child,
body.pg-index #tbl_mobile_terima thead th:last-child { border-top-right-radius: .5rem; }
/* Anak panah susun (▲▼, :before/:after) mewarisi color drpd <th> (kini putih) - opacity vendor
   sedia ada (.125 lalai / .6 aktif) sudah memadai untuk kesan "samar bila tidak aktif, jelas bila
   disusun" atas latar gelap, TIADA override color/opacity tambahan diperlukan di sini. */

/* Baris badan - garis pemisah nipis sahaja (reka bentuk 'flat', TIADA border sisi sel - sudah
   default kerana table-bordered tidak dipakai), peralihan lembut semasa hover. */
body.pg-index #tbl_eaduan_terima tbody tr,
body.pg-index #tbl_mobile_terima tbody tr { transition: background-color .12s ease; }
body.pg-index #tbl_eaduan_terima tbody td,
body.pg-index #tbl_mobile_terima tbody td {
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_eaduan_terima tbody tr:last-child td,
body.pg-index #tbl_mobile_terima tbody tr:last-child td { border-bottom: none; }

/* "No. Rujukan" - dipaparkan sebagai chip rujukan rasmi (bukan sekadar teks hijau biasa), fon
   monospace supaya nampak seperti nombor dokumen formal. Selector sepadan span yang dijana JS
   (dataSrc/render kolum "dtcreate" dlm <script> fragment): '<span class="text-success fw-
   semibold">'. !important pada color WAJIB kerana utiliti .text-success Bootstrap sendiri
   ditetapkan !important (core.css). */
body.pg-index #tbl_eaduan_terima tbody td .text-success.fw-semibold,
body.pg-index #tbl_mobile_terima tbody td .text-success.fw-semibold {
    display: inline-block;
    background-color: rgba(27, 122, 67, .09);
    color: var(--mpspk-green-dark) !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .15rem .5rem;
    border-radius: .375rem;
}

/* Badge "Hayat (Hari)" - KEKALKAN logik warna amaran sedia ada (bg-label-danger/warning
   ditetapkan oleh JS ikut nilai >14 hari, lihat render kolum "hayat" dlm <script> fragment),
   sekadar seragamkan lebar minimum & jarak supaya lajur sejajar kemas merentasi baris. */
body.pg-index #tbl_eaduan_terima tbody td .badge,
body.pg-index #tbl_mobile_terima tbody td .badge {
    display: inline-block;
    min-width: 2.75rem;
    padding: .42em .6em;
    font-size: .75rem;
    font-weight: 700;
}

/* Kad pembungkus jadual - bayang lembut (menggantikan kad rata polos lalai Vuexy), supaya
   kelihatan "menarik" tanpa keluar drpd palet rasmi jenama. Ikon kecil di sebelah tajuk "Senarai
   Aduan" (ti-list-details, ditambah dlm HTML fragment) turut dijenamakan warna hijau di sini. */
body.pg-index #card_senarai_aduan_eaduan,
body.pg-index #card_senarai_aduan_mobile {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_senarai_aduan_eaduan .mpspk-card-title-icon,
body.pg-index #card_senarai_aduan_mobile .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}

/* dashboard_2_eaduan.cfm SAHAJA - jalur atas kad "Senarai Aduan" kini DINAMIK, ikut warna jubin
   status yang sedang aktif (arahan pengguna 2026-09-22: "implement juga dalam page
   dashboard_2_eaduan.cfm" - ciri SAMA seperti dashboard_2_mobile.cfm di bawah; jalur emas MPSPK
   statik SEBELUM ini DIGANTIKAN oleh rule dinamik ini). --mpspk-card-accent ditetapkan via JS
   (fungsi updateSenaraiAduanAccent() dlm dashboard_2_eaduan.cfm, dipanggil semasa muat awal
   fragment & setiap kali changelist() tercetus bila jubin lain diklik - lihat komen di sana untuk
   peta status->warna, 4 status termasuk Ditangguh/secondary). Fallback var(--bs-info) di sini
   HANYA jaring keselamatan (sekiranya CSS ini dibaca pelayar sebelum JS sempat jalan) - SEPADAN
   dgn tingkah laku lalai yang diminta (status lalai 'DITERIMA'/jubin "Baru" = info). */
body.pg-index #card_senarai_aduan_eaduan {
    border-top: 3px solid var(--mpspk-card-accent, var(--bs-info));
    transition: border-top-color .2s ease;
}

/* dashboard_2_mobile.cfm SAHAJA - jalur atas kad "Senarai Aduan" kini DINAMIK, ikut warna jubin
   status yang sedang aktif (arahan pengguna 2026-09-22: "tukar warna border top card senarai
   mengikut card status apa yang aktif currently. jika default akan ikut warna card aduan baru").
   --mpspk-card-accent ditetapkan via JS (fungsi updateSenaraiAduanAccent() dlm
   dashboard_2_mobile.cfm, dipanggil semasa muat awal fragment & setiap kali changelist()
   tercetus bila jubin lain diklik - lihat komen di sana untuk peta status->warna). Fallback
   var(--bs-info) di sini HANYA jaring keselamatan (sekiranya CSS ini dibaca pelayar sebelum JS
   sempat jalan) - SEPADAN dgn tingkah laku lalai yang diminta (status lalai 'DITERIMA'/jubin
   "Baru" = info). */
body.pg-index #card_senarai_aduan_mobile {
    border-top: 3px solid var(--mpspk-card-accent, var(--bs-info));
    transition: border-top-color .2s ease;
}

/* Kawalan DataTables (kotak carian, "papar N rekod", info, pagination) - kemas & jenamakan warna
   rasmi MPSPK (menggantikan biru/kelabu generik Bootstrap/Vuexy lalai). */
body.pg-index #tbl_eaduan_terima_wrapper .dataTables_length,
body.pg-index #tbl_mobile_terima_wrapper .dataTables_length,
body.pg-index #tbl_eaduan_terima_wrapper .dataTables_filter,
body.pg-index #tbl_mobile_terima_wrapper .dataTables_filter,
body.pg-index #tbl_eaduan_terima_wrapper .dataTables_info,
body.pg-index #tbl_mobile_terima_wrapper .dataTables_info {
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_eaduan_terima_wrapper .dataTables_length select,
body.pg-index #tbl_mobile_terima_wrapper .dataTables_length select,
body.pg-index #tbl_eaduan_terima_wrapper .dataTables_filter input,
body.pg-index #tbl_mobile_terima_wrapper .dataTables_filter input { border-radius: .5rem; }
body.pg-index #tbl_eaduan_terima_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_mobile_terima_wrapper .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_eaduan_terima_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_mobile_terima_wrapper .dataTables_paginate .page-link {
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_eaduan_terima_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_mobile_terima_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_eaduan_terima_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_mobile_terima_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}

/* --- serpihan: modules/dashboard/dashboard_2_eaduan.cfm (jubin kiraan status - reka bentuk
   "statistics card" RASMI Vuexy, arahan pengguna 2026-09-22: "header card status 'Baru' tukar
   kepada color info seperti template, diterima kepada color warning, ditolak kepada color danger
   dan ditangguh kepada color secondary"). Markup kini guna kelas VENDOR sedia ada
   card-border-shadow-{warna}/avatar-initial/bg-label-{warna} (assets/vendor/css/core.css ~baris
   10548-10684 & tema avatar sedia ada) - disalin drpd vuexy_template_reference/html/vertical-
   menu-template/cards-statistics.html seksyen "Card Border Shadow", TIADA kelas vendor baru
   ditulis semula di sini, hanya kemas kini kecil di bawah.

   PENTING - diskop #row_status_eaduan (ID BARU pada <div class="row"> pembungkus 4 jubin dlm
   dashboard_2_eaduan.cfm), BUKAN #panel_baru/#panel_terima/#panel_tolak/#panel_tangguh terus.
   Sebab: ID tersebut DIKONGSI/BERTINDAN dengan jubin serupa dlm dashboard_2_mobile.cfm (3 jubin
   sahaja, reka bentuk LAMA - BELUM diubah pusingan ini) - kedua-dua fragment sama-sama diskop
   body.pg-index (SPA index.cfm), jadi rule tanpa pembungkus unik akan terpakai pada KEDUA-DUA
   fragment serentak walaupun mobile tidak diminta berubah. Rule .mpspk-status-tile generik sedia
   ada (bahagian atas fail ini, dikongsi dgn mobile - "border: 1px solid transparent" & hover/
   active hijau MPSPK) DIBIARKAN UTUH untuk mobile terus guna; override kekhususan lebih tinggi
   (tambah #row_status_eaduan) di bawah sengaja menang HANYA pada jubin eaduan. */
body.pg-index #row_status_eaduan .mpspk-status-tile {
    transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease;
}
body.pg-index #row_status_eaduan .mpspk-status-tile:hover { transform: translateY(-3px); }

/* Keadaan "aktif" (jubin sedang ditapis) - SEPADANKAN warna dgn avatar/spinner jubin itu sendiri
   (--bs-info/--bs-warning/--bs-danger/--bs-secondary, pemboleh ubah RGB rasmi Bootstrap 5 sedia
   ada dlm core.css) menggantikan gelang hijau MPSPK generik lama (tidak sepadan dgn palet warna
   status pelbagai baru), supaya setiap jubin kekal harmoni dgn warna semantiknya sendiri bila
   dipilih. Kekhususan (#row_status_eaduan + ID jubin) menang berbanding rule generik
   .mpspk-status-tile-active/:hover sedia ada di atas. */
body.pg-index #row_status_eaduan #panel_baru.mpspk-status-tile-active {
    border-color: var(--bs-info);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-info-rgb), .18);
}
body.pg-index #row_status_eaduan #panel_terima.mpspk-status-tile-active {
    border-color: var(--bs-warning);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-warning-rgb), .18);
}
body.pg-index #row_status_eaduan #panel_tolak.mpspk-status-tile-active {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), .18);
}
body.pg-index #row_status_eaduan #panel_tangguh.mpspk-status-tile-active {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-secondary-rgb), .18);
}

/* Avatar ikon & nilai kiraan - lebih besar & tebal sedikit drpd lalai template (sepadan skala
   kad sedia ada projek ini, "formal/korporat" - bukan terlalu kecil/mampat). */
body.pg-index #row_status_eaduan .avatar-initial {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
}
body.pg-index #row_status_eaduan .card-body h4 { font-weight: 700; }
body.pg-index #row_status_eaduan .card-body p.text-muted {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* --- serpihan: modules/dashboard/dashboard_2_mobile.cfm (jubin kiraan status - reka bentuk
   "statistics card" RASMI Vuexy, arahan pengguna 2026-09-22: "buat design yang sama untuk card
   dalam page modules/dashboard/dashboard_2_mobile.cfm" - SAMA PERSIS corak seperti blok
   #row_status_eaduan di atas, lihat nota penuh & sebab kelas vendor di sana, TIDAK diulang di
   sini). 3 jubin sahaja (Baru=info/Diterima=warning/Ditolak=danger - modul Mobile TIADA
   "Ditangguh"/secondary).

   Diskop #row_status_mobile (ID BARU pada <div class="row"> pembungkus 3 jubin dlm
   dashboard_2_mobile.cfm) - BUKAN #row_status_eaduan (fail lain) MAHUPUN #panel_baru/
   #panel_terima/#panel_tolak terus (ID tersebut DIKONGSI/BERTINDAN dgn dashboard_2_eaduan.cfm,
   walaupun KEDUA-DUA fragment kini sama reka bentuk & sama palet warna per-status - pembungkus
   unik berasingan KEKAL perlu supaya rule kekhususan tinggi di bawah TIDAK bergantung kepada
   fragment mana yang kebetulan sedang dimuat dalam #mainPanel). */
body.pg-index #row_status_mobile .mpspk-status-tile {
    transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease;
}
body.pg-index #row_status_mobile .mpspk-status-tile:hover { transform: translateY(-3px); }

body.pg-index #row_status_mobile #panel_baru.mpspk-status-tile-active {
    border-color: var(--bs-info);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-info-rgb), .18);
}
body.pg-index #row_status_mobile #panel_terima.mpspk-status-tile-active {
    border-color: var(--bs-warning);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-warning-rgb), .18);
}
body.pg-index #row_status_mobile #panel_tolak.mpspk-status-tile-active {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), .18);
}

body.pg-index #row_status_mobile .avatar-initial {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
}
body.pg-index #row_status_mobile .card-body h4 { font-weight: 700; }
body.pg-index #row_status_mobile .card-body p.text-muted {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* =============================================================================
   modules/dashboard/dashboard_default.cfm SAHAJA - kad "Carian / Tapisan" (panel
   tapisan Dashboard Eksekutif, id=card_tapisan_dashboard) diberi reka bentuk
   formal/korporat (arahan pengguna 2026-09-23: "card carian/tapisan ini boleh
   tak design agar nampak formal, korporat dan menarik"). Jalur gradient 3-warna
   rasmi MPSPK di atas kad (SAMA jalur seperti ".mpspk-aduan-card::before" di
   BAHAGIAN KONGSI atas fail ini - diulang di sini sebab kad ini dikenal pasti
   melalui ID, bukan class kongsi tersebut). Kepala kad (.card-header) ditukar
   latar hijau gelap MPSPK + teks putih (SAMA palet seperti menu sisi
   body.pg-index, lihat rule #layout-menu di atas), ikon penapis warna emas di
   sebelah tajuk (.mpspk-card-title-icon - nama class SAMA seperti kad "Senarai
   Aduan" tetapi warna diskop berasingan ikut kad, konsisten dgn kaedah fail
   ini). Label borang ditukar huruf besar + letter-spacing (gaya borang
   korporat). Kotak input/select fokus ditukar warna hijau rasmi (SAMA corak
   seperti fokus kotak carian DataTables di atas). Butang "Cari" ditukar drpd
   btn-primary (ungu generik lalai Vuexy) kepada .btn-mpspk-green (kelas kongsi
   sedia ada, lihat BAHAGIAN KONGSI atas fail ini) - lebih sepadan jenama MPSPK
   berbanding warna primary generik. */
body.pg-index #card_tapisan_dashboard {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_tapisan_dashboard::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mpspk-gold-light), var(--mpspk-green) 55%, var(--mpspk-red));
    z-index: 1;
}
body.pg-index #card_tapisan_dashboard .card-header {
    background-color: var(--mpspk-green-dark);
    border-bottom: none;
    padding: .9rem 1.25rem;
}
body.pg-index #card_tapisan_dashboard .card-action-title h5 {
    color: #fff;
    font-weight: 600;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
}
body.pg-index #card_tapisan_dashboard .mpspk-card-title-icon {
    color: var(--mpspk-gold-light);
    margin-right: .5rem;
    font-size: 1.1rem;
}
body.pg-index #card_tapisan_dashboard .card-collapsible i {
    color: #fff;
    transition: color .15s ease;
}
body.pg-index #card_tapisan_dashboard .card-collapsible:hover i {
    color: var(--mpspk-gold-light);
}
body.pg-index #card_tapisan_dashboard .card-body {
    padding-top: 1.35rem;
}
body.pg-index #card_tapisan_dashboard .form-label {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: #5b6472;
    margin-bottom: .4rem;
}
body.pg-index #card_tapisan_dashboard .form-select:focus,
body.pg-index #card_tapisan_dashboard .form-control:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}

/* =============================================================================
   modules/dashboard/dashboard_2.cfm SAHAJA (iList > Aduan / Cadangan / Pertanyaan,
   arahan pengguna 2026-09-23: "tukar UI sesuai dengan template system").
   Reka bentuk SAMA seperti dashboard_2_eaduan.cfm / dashboard_2_mobile.cfm (lihat nota
   penuh blok-blok tersebut di atas) - diulang di sini dengan ID BERASINGAN
   (#row_status_ilist, #card_senarai_aduan_ilist, #tbl_aduan_terima) supaya tiada
   pertindanan dengan fragment lain yang turut guna ID jubin #panel_terima/#panel_tangguh.
   6 jubin: terima=info, lebih_had=danger, tindakan=warning, selesai=primary,
   tutup=success, tangguh=secondary. Kad tapisan guna id=card_tapisan_dashboard sedia ada. */
body.pg-index #row_status_ilist .mpspk-status-tile {
    transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease;
}
body.pg-index #row_status_ilist .mpspk-status-tile:hover { transform: translateY(-3px); }
body.pg-index #row_status_ilist #panel_terima.mpspk-status-tile-active { border-color: var(--bs-info); box-shadow: 0 0 0 .15rem rgba(var(--bs-info-rgb), .18); }
body.pg-index #row_status_ilist #panel_lebih_had.mpspk-status-tile-active { border-color: var(--bs-danger); box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), .18); }
body.pg-index #row_status_ilist #panel_tindakan.mpspk-status-tile-active { border-color: var(--bs-warning); box-shadow: 0 0 0 .15rem rgba(var(--bs-warning-rgb), .18); }
body.pg-index #row_status_ilist #panel_selesai.mpspk-status-tile-active { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .18); }
body.pg-index #row_status_ilist #panel_tutup.mpspk-status-tile-active { border-color: var(--bs-success); box-shadow: 0 0 0 .15rem rgba(var(--bs-success-rgb), .18); }
body.pg-index #row_status_ilist #panel_tangguh.mpspk-status-tile-active { border-color: var(--bs-secondary); box-shadow: 0 0 0 .15rem rgba(var(--bs-secondary-rgb), .18); }
body.pg-index #row_status_ilist .avatar-initial { width: 2.75rem; height: 2.75rem; font-size: 1.15rem; }
body.pg-index #row_status_ilist .card-body h4 { font-weight: 700; }
body.pg-index #row_status_ilist .card-body p.text-muted {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

body.pg-index #card_senarai_aduan_ilist {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
    border-top: 3px solid var(--mpspk-card-accent, var(--bs-info));
    transition: border-top-color .2s ease;
}
body.pg-index #card_senarai_aduan_ilist .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}

body.pg-index #tbl_aduan_terima {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_aduan_terima thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_aduan_terima thead th:first-child { border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_aduan_terima thead th:last-child { border-top-right-radius: .5rem; }
body.pg-index #tbl_aduan_terima tbody tr { transition: background-color .12s ease; cursor: pointer; }
body.pg-index #tbl_aduan_terima tbody td { padding: .75rem .75rem; border-bottom-color: #eef0f3; vertical-align: middle; }
body.pg-index #tbl_aduan_terima tbody tr:last-child td { border-bottom: none; }
body.pg-index #tbl_aduan_terima tbody td .text-success.fw-semibold {
    display: inline-block;
    background-color: rgba(27, 122, 67, .09);
    color: var(--mpspk-green-dark) !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .15rem .5rem;
    border-radius: .375rem;
}
body.pg-index #tbl_aduan_terima tbody td .badge {
    display: inline-block;
    min-width: 2.75rem;
    padding: .42em .6em;
    font-size: .75rem;
    font-weight: 700;
}
body.pg-index #tbl_aduan_terima_wrapper .dataTables_length,
body.pg-index #tbl_aduan_terima_wrapper .dataTables_filter,
body.pg-index #tbl_aduan_terima_wrapper .dataTables_info { color: #6f727d; font-size: .8125rem; }
body.pg-index #tbl_aduan_terima_wrapper .dataTables_length select,
body.pg-index #tbl_aduan_terima_wrapper .dataTables_filter input { border-radius: .5rem; }
body.pg-index #tbl_aduan_terima_wrapper .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_aduan_terima_wrapper .dataTables_paginate .page-link { border-radius: .5rem; margin-inline-start: .2rem; color: #4b4f5a; }
body.pg-index #tbl_aduan_terima_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_aduan_terima_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}
body.pg-index #ilist_export .dt-buttons .btn { border-radius: .5rem; }
/* Ikon tajuk kad senarai turut ikut warna jubin status aktif (sama warna jalur atas kad). */
body.pg-index #card_senarai_aduan_ilist .mpspk-card-title-icon { color: var(--mpspk-card-accent, var(--bs-info)); }
/* --- serpihan: modules/user_registration/staff_list.cfm, customer_list.cfm, sysadmin_list.cfm
   & search_user.cfm/search_user_result.cfm (jadual "Senarai Staff/Customer/Admin/Carian
   Pengguna" - reka bentuk "formal/korporat", arahan pengguna 2026-09-24: "design table tu tukar
   macam dalam page modules/dashboard/dashboard_2_eaduan.cfm"; CSS asal ditulis sbg <style> dalam
   setiap fragment, DIPINDAHKAN ke sini 2026-09-25 atas arahan pengguna "custom css ... letak
   dalam fail assets/css/custom_css.css". search_user.cfm/search_user_result.cfm DITAMBAH
   2026-09-24 (arahan pengguna: "tolong ubah UI tu ... sama macam page ... sysadmin_list.cfm")
   - #tbl_user_result & #card_search_user_result/#card_search_user disertakan ke blok sedia ada
   ini (bukan blok berasingan) supaya konsisten dgn corak penyatuan sedia ada.

   Diskop body.pg-index SAHAJA (SATU blok CSS dikongsi antara fragment-fragment ini - #tbl_staff,
   #tbl_customer, #tbl_sysadminz & #tbl_user_result - sebab kesemuanya hanya pernah dimuat ke
   dalam index.cfm #mainPanel, sama kaedah penyatuan seperti blok
   #tbl_eaduan_terima/#tbl_mobile_terima di atas).
   #tbl_staff_wrapper / #tbl_customer_wrapper / #tbl_sysadminz_wrapper / #tbl_user_result_wrapper
   ialah ID AUTO-JANA jQuery DataTables (corak baku {id-jadual}_wrapper), selamat dirujuk terus
   di sini.

   Reka bentuk sama seperti blok #tbl_eaduan_terima/#tbl_mobile_terima di atas (kepala jadual latar
   hijau gelap MPSPK + teks putih huruf besar, zebra/hover guna pemboleh ubah rasmi Bootstrap5,
   kad pembungkus bayang lembut, kawalan DataTables dijenamakan warna rasmi) - TIDAK termasuk jalur
   atas kad dinamik (--mpspk-card-accent) & chip "No. Rujukan" monospace, sebab dua-dua ciri itu
   khusus jadual "Senarai Aduan" (ada jubin status/rujukan aduan), tiada persamaan konsep dlm
   jadual Staff/Customer/Admin ini. */
body.pg-index #tbl_staff,
body.pg-index #tbl_customer,
body.pg-index #tbl_sysadminz,
body.pg-index #tbl_global_search,
body.pg-index #tbl_user_result {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_staff thead th,
body.pg-index #tbl_customer thead th,
body.pg-index #tbl_sysadminz thead th,
body.pg-index #tbl_global_search thead th,
body.pg-index #tbl_user_result thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_staff thead th:first-child,
body.pg-index #tbl_customer thead th:first-child,
body.pg-index #tbl_sysadminz thead th:first-child,
body.pg-index #tbl_global_search thead th:first-child,
body.pg-index #tbl_user_result thead th:first-child { border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_staff thead th:last-child,
body.pg-index #tbl_customer thead th:last-child,
body.pg-index #tbl_sysadminz thead th:last-child,
body.pg-index #tbl_global_search thead th:last-child,
body.pg-index #tbl_user_result thead th:last-child { border-top-right-radius: .5rem; }
body.pg-index #tbl_staff tbody tr,
body.pg-index #tbl_customer tbody tr,
body.pg-index #tbl_sysadminz tbody tr,
body.pg-index #tbl_global_search tbody tr,
body.pg-index #tbl_user_result tbody tr { transition: background-color .12s ease; }
body.pg-index #tbl_staff tbody td,
body.pg-index #tbl_customer tbody td,
body.pg-index #tbl_sysadminz tbody td,
body.pg-index #tbl_global_search tbody td,
body.pg-index #tbl_user_result tbody td {
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_staff tbody tr:last-child td,
body.pg-index #tbl_customer tbody tr:last-child td,
body.pg-index #tbl_sysadminz tbody tr:last-child td,
body.pg-index #tbl_global_search tbody tr:last-child td,
body.pg-index #tbl_user_result tbody tr:last-child td { border-bottom: none; }

/* Lencana lajur "Active" - HANYA #tbl_staff ada lajur ini (customer/sysadmin tiada lajur status
   Aktif drpd asal - lihat nota di kepala fail masing-masing). */
body.pg-index #tbl_staff tbody td .badge {
    display: inline-block;
    min-width: 4.5rem;
    padding: .42em .6em;
    font-size: .75rem;
    font-weight: 700;
}

/* Kad pembungkus - bayang lembut + ikon tajuk kad warna hijau (sama corak #card_senarai_aduan_eaduan
   di atas). */
body.pg-index #card_staff_list,
body.pg-index #card_customer_list,
body.pg-index #card_sysadmin_list,
body.pg-index #card_search_user,
body.pg-index #card_search_user_result {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_staff_list .mpspk-card-title-icon,
body.pg-index #card_customer_list .mpspk-card-title-icon,
body.pg-index #card_sysadmin_list .mpspk-card-title-icon,
body.pg-index #card_search_user .mpspk-card-title-icon,
body.pg-index #card_search_user_result .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}

/* Kawalan DataTables (kotak carian, "papar N rekod", info, pagination) - jenamakan warna rasmi
   MPSPK (sama corak blok #tbl_eaduan_terima_wrapper/#tbl_mobile_terima_wrapper di atas). */
body.pg-index #tbl_staff_wrapper .dataTables_length,
body.pg-index #tbl_customer_wrapper .dataTables_length,
body.pg-index #tbl_sysadminz_wrapper .dataTables_length,
body.pg-index #tbl_user_result_wrapper .dataTables_length,
body.pg-index #tbl_staff_wrapper .dataTables_filter,
body.pg-index #tbl_customer_wrapper .dataTables_filter,
body.pg-index #tbl_sysadminz_wrapper .dataTables_filter,
body.pg-index #tbl_user_result_wrapper .dataTables_filter,
body.pg-index #tbl_staff_wrapper .dataTables_info,
body.pg-index #tbl_customer_wrapper .dataTables_info,
body.pg-index #tbl_sysadminz_wrapper .dataTables_info,
body.pg-index #tbl_user_result_wrapper .dataTables_info {
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_staff_wrapper .dataTables_length select,
body.pg-index #tbl_customer_wrapper .dataTables_length select,
body.pg-index #tbl_sysadminz_wrapper .dataTables_length select,
body.pg-index #tbl_user_result_wrapper .dataTables_length select,
body.pg-index #tbl_staff_wrapper .dataTables_filter input,
body.pg-index #tbl_customer_wrapper .dataTables_filter input,
body.pg-index #tbl_sysadminz_wrapper .dataTables_filter input,
body.pg-index #tbl_user_result_wrapper .dataTables_filter input { border-radius: .5rem; }
body.pg-index #tbl_staff_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_customer_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_sysadminz_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_user_result_wrapper .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_staff_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_customer_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_sysadminz_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_user_result_wrapper .dataTables_paginate .page-link {
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_staff_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_customer_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_sysadminz_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_user_result_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_staff_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_customer_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_sysadminz_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_user_result_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}

/* --- serpihan: modules/security_profiling/task_list.cfm, access_level_list.cfm, community_list.cfm &
   user_type_list.cfm (2026-09-25, arahan pengguna: "ubah UI ... sama macam page lain").
   Reka bentuk jadual "formal/korporat" SAMA seperti blok #tbl_staff/#tbl_sysadminz di atas (kepala
   hijau gelap MPSPK, zebra/hover, kad berbayang, kawalan DataTables berjenama), diskop kepada ID
   jadual/kad keempat-empat fragment ini. Baris boleh diklik (buka modal kemaskini) -> kursor pointer. */
body.pg-index #tbl_user_task,
body.pg-index #tbl_access_level,
body.pg-index #tbl_user_community,
body.pg-index #tbl_user_type {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_user_task thead th,
body.pg-index #tbl_access_level thead th,
body.pg-index #tbl_user_community thead th,
body.pg-index #tbl_user_type thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_user_task thead th:first-child,
body.pg-index #tbl_access_level thead th:first-child,
body.pg-index #tbl_user_community thead th:first-child,
body.pg-index #tbl_user_type thead th:first-child { border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_user_task thead th:last-child,
body.pg-index #tbl_access_level thead th:last-child,
body.pg-index #tbl_user_community thead th:last-child,
body.pg-index #tbl_user_type thead th:last-child { border-top-right-radius: .5rem; }
body.pg-index #tbl_user_task tbody tr,
body.pg-index #tbl_access_level tbody tr,
body.pg-index #tbl_user_community tbody tr,
body.pg-index #tbl_user_type tbody tr { transition: background-color .12s ease; cursor: pointer; }
body.pg-index #tbl_user_task tbody td,
body.pg-index #tbl_access_level tbody td,
body.pg-index #tbl_user_community tbody td,
body.pg-index #tbl_user_type tbody td {
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_user_task tbody tr:last-child td,
body.pg-index #tbl_access_level tbody tr:last-child td,
body.pg-index #tbl_user_community tbody tr:last-child td,
body.pg-index #tbl_user_type tbody tr:last-child td { border-bottom: none; }

body.pg-index #card_task_list,
body.pg-index #card_access_level,
body.pg-index #card_user_community,
body.pg-index #card_user_type {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_task_list .mpspk-card-title-icon,
body.pg-index #card_access_level .mpspk-card-title-icon,
body.pg-index #card_user_community .mpspk-card-title-icon,
body.pg-index #card_user_type .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}

body.pg-index #tbl_user_task_wrapper .dataTables_length,
body.pg-index #tbl_access_level_wrapper .dataTables_length,
body.pg-index #tbl_user_community_wrapper .dataTables_length,
body.pg-index #tbl_user_type_wrapper .dataTables_length,
body.pg-index #tbl_user_task_wrapper .dataTables_filter,
body.pg-index #tbl_access_level_wrapper .dataTables_filter,
body.pg-index #tbl_user_community_wrapper .dataTables_filter,
body.pg-index #tbl_user_type_wrapper .dataTables_filter,
body.pg-index #tbl_user_task_wrapper .dataTables_info,
body.pg-index #tbl_access_level_wrapper .dataTables_info,
body.pg-index #tbl_user_community_wrapper .dataTables_info,
body.pg-index #tbl_user_type_wrapper .dataTables_info {
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_user_task_wrapper .dataTables_length select,
body.pg-index #tbl_access_level_wrapper .dataTables_length select,
body.pg-index #tbl_user_community_wrapper .dataTables_length select,
body.pg-index #tbl_user_type_wrapper .dataTables_length select,
body.pg-index #tbl_user_task_wrapper .dataTables_filter input,
body.pg-index #tbl_access_level_wrapper .dataTables_filter input,
body.pg-index #tbl_user_community_wrapper .dataTables_filter input,
body.pg-index #tbl_user_type_wrapper .dataTables_filter input { border-radius: .5rem; }
body.pg-index #tbl_user_task_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_access_level_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_user_community_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_user_type_wrapper .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_user_task_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_access_level_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_user_community_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_user_type_wrapper .dataTables_paginate .page-link {
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_user_task_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_access_level_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_user_community_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_user_type_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_user_task_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_access_level_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_user_community_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_user_type_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}

/* --- serpihan: modules/problem_definition/problem_category.cfm, problem_type.cfm &
   problem_matrix_aduan.cfm (2026-09-25, arahan pengguna: "ubah UI ... ikut design yang lain
   merangkumi design table juga"). Reka bentuk jadual "formal/korporat" SAMA seperti blok
   #tbl_staff/#tbl_sysadminz & #tbl_user_community di atas (kepala hijau gelap MPSPK, zebra/hover,
   kad berbayang, kawalan DataTables berjenama), diskop kepada ID jadual/kad ketiga-tiga fragment ini.
   Baris boleh diklik (buka modal kemaskini) -> kursor pointer. */
body.pg-index #tbl_problem_category,
body.pg-index #tbl_problem_type,
body.pg-index #tbl_problem_matrix_aduan {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_problem_category thead th,
body.pg-index #tbl_problem_type thead th,
body.pg-index #tbl_problem_matrix_aduan thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_problem_category thead th:first-child,
body.pg-index #tbl_problem_type thead th:first-child,
body.pg-index #tbl_problem_matrix_aduan thead th:first-child { border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_problem_category thead th:last-child,
body.pg-index #tbl_problem_type thead th:last-child,
body.pg-index #tbl_problem_matrix_aduan thead th:last-child { border-top-right-radius: .5rem; }
body.pg-index #tbl_problem_category tbody tr,
body.pg-index #tbl_problem_type tbody tr,
body.pg-index #tbl_problem_matrix_aduan tbody tr { transition: background-color .12s ease; cursor: pointer; }
body.pg-index #tbl_problem_category tbody td,
body.pg-index #tbl_problem_type tbody td,
body.pg-index #tbl_problem_matrix_aduan tbody td {
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_problem_category tbody tr:last-child td,
body.pg-index #tbl_problem_type tbody tr:last-child td,
body.pg-index #tbl_problem_matrix_aduan tbody tr:last-child td { border-bottom: none; }
body.pg-index #card_problem_category,
body.pg-index #card_problem_type,
body.pg-index #card_problem_matrix_aduan {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_problem_category .mpspk-card-title-icon,
body.pg-index #card_problem_type .mpspk-card-title-icon,
body.pg-index #card_problem_matrix_aduan .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}
body.pg-index #tbl_problem_category_wrapper .dataTables_length,
body.pg-index #tbl_problem_type_wrapper .dataTables_length,
body.pg-index #tbl_problem_matrix_aduan_wrapper .dataTables_length,
body.pg-index #tbl_problem_category_wrapper .dataTables_filter,
body.pg-index #tbl_problem_type_wrapper .dataTables_filter,
body.pg-index #tbl_problem_matrix_aduan_wrapper .dataTables_filter,
body.pg-index #tbl_problem_category_wrapper .dataTables_info,
body.pg-index #tbl_problem_type_wrapper .dataTables_info,
body.pg-index #tbl_problem_matrix_aduan_wrapper .dataTables_info {
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_problem_category_wrapper .dataTables_length select,
body.pg-index #tbl_problem_type_wrapper .dataTables_length select,
body.pg-index #tbl_problem_matrix_aduan_wrapper .dataTables_length select,
body.pg-index #tbl_problem_category_wrapper .dataTables_filter input,
body.pg-index #tbl_problem_type_wrapper .dataTables_filter input,
body.pg-index #tbl_problem_matrix_aduan_wrapper .dataTables_filter input { border-radius: .5rem; }
body.pg-index #tbl_problem_category_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_problem_type_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_problem_matrix_aduan_wrapper .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_problem_category_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_problem_type_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_problem_matrix_aduan_wrapper .dataTables_paginate .page-link {
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_problem_category_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_problem_type_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_problem_matrix_aduan_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_problem_category_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_problem_type_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_problem_matrix_aduan_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}

/* --- serpihan: modules/service_areas/area_main_list.cfm & area_sub_list.cfm (2026-09-25, arahan
   pengguna: "upgrade juga UI ... termasuk table"). Reka bentuk jadual "formal/korporat" SAMA seperti
   blok problem_category/problem_type di atas, diskop kepada ID jadual/kad kedua-dua fragment ini. */
body.pg-index #tbl_main_area,
body.pg-index #tbl_sub_area{
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_main_area thead th,
body.pg-index #tbl_sub_area thead th{
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_main_area thead th:first-child,
body.pg-index #tbl_sub_area thead th:first-child{ border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_main_area thead th:last-child,
body.pg-index #tbl_sub_area thead th:last-child{ border-top-right-radius: .5rem; }
body.pg-index #tbl_main_area tbody tr,
body.pg-index #tbl_sub_area tbody tr{ transition: background-color .12s ease; cursor: pointer; }
body.pg-index #tbl_main_area tbody td,
body.pg-index #tbl_sub_area tbody td{
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_main_area tbody tr:last-child td,
body.pg-index #tbl_sub_area tbody tr:last-child td{ border-bottom: none; }
body.pg-index #card_main_area,
body.pg-index #card_sub_area{
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_main_area .mpspk-card-title-icon,
body.pg-index #card_sub_area .mpspk-card-title-icon{
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}
body.pg-index #tbl_main_area_wrapper .dataTables_length,
body.pg-index #tbl_sub_area_wrapper .dataTables_length,
body.pg-index #tbl_main_area_wrapper .dataTables_filter,
body.pg-index #tbl_sub_area_wrapper .dataTables_filter,
body.pg-index #tbl_main_area_wrapper .dataTables_info,
body.pg-index #tbl_sub_area_wrapper .dataTables_info{
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_main_area_wrapper .dataTables_length select,
body.pg-index #tbl_sub_area_wrapper .dataTables_length select,
body.pg-index #tbl_main_area_wrapper .dataTables_filter input,
body.pg-index #tbl_sub_area_wrapper .dataTables_filter input{ border-radius: .5rem; }
body.pg-index #tbl_main_area_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_sub_area_wrapper .dataTables_filter input:focus{
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_main_area_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_sub_area_wrapper .dataTables_paginate .page-link{
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_main_area_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_sub_area_wrapper .dataTables_paginate .page-item.active .page-link{
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_main_area_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_sub_area_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover{
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}

/* --- serpihan: modules/csr_attributes/* (2026-09-25, arahan pengguna: "upgrade UI ... termasuk design table").
   Reka bentuk jadual "formal/korporat" SAMA seperti blok #tbl_user_type di atas, diskop kpd ID jadual/kad
   7 fragment CSR Attributes (status, severity, priority, channel, csr type, escalation, workflow). */
body.pg-index #tbl_status,
body.pg-index #tbl_severity,
body.pg-index #tbl_priority,
body.pg-index #tbl_channel,
body.pg-index #tbl_csr_type,
body.pg-index #tbl_escalation,
body.pg-index #tbl_workflowStatus {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_status thead th,
body.pg-index #tbl_severity thead th,
body.pg-index #tbl_priority thead th,
body.pg-index #tbl_channel thead th,
body.pg-index #tbl_csr_type thead th,
body.pg-index #tbl_escalation thead th,
body.pg-index #tbl_workflowStatus thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_status thead th:first-child,
body.pg-index #tbl_severity thead th:first-child,
body.pg-index #tbl_priority thead th:first-child,
body.pg-index #tbl_channel thead th:first-child,
body.pg-index #tbl_csr_type thead th:first-child,
body.pg-index #tbl_escalation thead th:first-child,
body.pg-index #tbl_workflowStatus thead th:first-child { border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_status thead th:last-child,
body.pg-index #tbl_severity thead th:last-child,
body.pg-index #tbl_priority thead th:last-child,
body.pg-index #tbl_channel thead th:last-child,
body.pg-index #tbl_csr_type thead th:last-child,
body.pg-index #tbl_escalation thead th:last-child,
body.pg-index #tbl_workflowStatus thead th:last-child { border-top-right-radius: .5rem; }
body.pg-index #tbl_status tbody tr,
body.pg-index #tbl_severity tbody tr,
body.pg-index #tbl_priority tbody tr,
body.pg-index #tbl_channel tbody tr,
body.pg-index #tbl_csr_type tbody tr,
body.pg-index #tbl_escalation tbody tr,
body.pg-index #tbl_workflowStatus tbody tr { transition: background-color .12s ease; cursor: pointer; }
body.pg-index #tbl_status tbody td,
body.pg-index #tbl_severity tbody td,
body.pg-index #tbl_priority tbody td,
body.pg-index #tbl_channel tbody td,
body.pg-index #tbl_csr_type tbody td,
body.pg-index #tbl_escalation tbody td,
body.pg-index #tbl_workflowStatus tbody td {
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_status tbody tr:last-child td,
body.pg-index #tbl_severity tbody tr:last-child td,
body.pg-index #tbl_priority tbody tr:last-child td,
body.pg-index #tbl_channel tbody tr:last-child td,
body.pg-index #tbl_csr_type tbody tr:last-child td,
body.pg-index #tbl_escalation tbody tr:last-child td,
body.pg-index #tbl_workflowStatus tbody tr:last-child td { border-bottom: none; }
body.pg-index #card_status,
body.pg-index #card_severity,
body.pg-index #card_priority,
body.pg-index #card_channel,
body.pg-index #card_csr_type,
body.pg-index #card_escalation,
body.pg-index #card_workflow_status {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_status .mpspk-card-title-icon,
body.pg-index #card_severity .mpspk-card-title-icon,
body.pg-index #card_priority .mpspk-card-title-icon,
body.pg-index #card_channel .mpspk-card-title-icon,
body.pg-index #card_csr_type .mpspk-card-title-icon,
body.pg-index #card_escalation .mpspk-card-title-icon,
body.pg-index #card_workflow_status .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}
body.pg-index #tbl_status_wrapper .dataTables_length,
body.pg-index #tbl_status_wrapper .dataTables_filter,
body.pg-index #tbl_status_wrapper .dataTables_info,
body.pg-index #tbl_severity_wrapper .dataTables_length,
body.pg-index #tbl_severity_wrapper .dataTables_filter,
body.pg-index #tbl_severity_wrapper .dataTables_info,
body.pg-index #tbl_priority_wrapper .dataTables_length,
body.pg-index #tbl_priority_wrapper .dataTables_filter,
body.pg-index #tbl_priority_wrapper .dataTables_info,
body.pg-index #tbl_channel_wrapper .dataTables_length,
body.pg-index #tbl_channel_wrapper .dataTables_filter,
body.pg-index #tbl_channel_wrapper .dataTables_info,
body.pg-index #tbl_csr_type_wrapper .dataTables_length,
body.pg-index #tbl_csr_type_wrapper .dataTables_filter,
body.pg-index #tbl_csr_type_wrapper .dataTables_info,
body.pg-index #tbl_escalation_wrapper .dataTables_length,
body.pg-index #tbl_escalation_wrapper .dataTables_filter,
body.pg-index #tbl_escalation_wrapper .dataTables_info,
body.pg-index #tbl_workflowStatus_wrapper .dataTables_length,
body.pg-index #tbl_workflowStatus_wrapper .dataTables_filter,
body.pg-index #tbl_workflowStatus_wrapper .dataTables_info {
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_status_wrapper .dataTables_length select,
body.pg-index #tbl_status_wrapper .dataTables_filter input,
body.pg-index #tbl_severity_wrapper .dataTables_length select,
body.pg-index #tbl_severity_wrapper .dataTables_filter input,
body.pg-index #tbl_priority_wrapper .dataTables_length select,
body.pg-index #tbl_priority_wrapper .dataTables_filter input,
body.pg-index #tbl_channel_wrapper .dataTables_length select,
body.pg-index #tbl_channel_wrapper .dataTables_filter input,
body.pg-index #tbl_csr_type_wrapper .dataTables_length select,
body.pg-index #tbl_csr_type_wrapper .dataTables_filter input,
body.pg-index #tbl_escalation_wrapper .dataTables_length select,
body.pg-index #tbl_escalation_wrapper .dataTables_filter input,
body.pg-index #tbl_workflowStatus_wrapper .dataTables_length select,
body.pg-index #tbl_workflowStatus_wrapper .dataTables_filter input { border-radius: .5rem; }
body.pg-index #tbl_status_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_severity_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_priority_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_channel_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_csr_type_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_escalation_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_workflowStatus_wrapper .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_status_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_severity_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_priority_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_channel_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_csr_type_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_escalation_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_workflowStatus_wrapper .dataTables_paginate .page-link {
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_status_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_severity_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_priority_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_channel_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_csr_type_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_escalation_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_workflowStatus_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_status_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_severity_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_priority_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_channel_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_csr_type_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_escalation_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_workflowStatus_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}

/* --- serpihan: modules/causal_attributes/* (2026-09-27, arahan pengguna: "UI table juga hendaklah
   diubah agar selaras dengan design table yang lain"). Reka bentuk jadual "formal/korporat" SAMA
   seperti blok #tbl_channel/#tbl_user_type di atas, diskop kpd ID jadual/kad 5 fragment Atribut
   Kausal (root causal, pending/KIV, observation, cancellation, action causal). */
body.pg-index #tbl_causal,
body.pg-index #tbl_pending,
body.pg-index #tbl_observation,
body.pg-index #tbl_cancellation,
body.pg-index #tbl_actionCausal {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_causal thead th,
body.pg-index #tbl_pending thead th,
body.pg-index #tbl_observation thead th,
body.pg-index #tbl_cancellation thead th,
body.pg-index #tbl_actionCausal thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_causal thead th:first-child,
body.pg-index #tbl_pending thead th:first-child,
body.pg-index #tbl_observation thead th:first-child,
body.pg-index #tbl_cancellation thead th:first-child,
body.pg-index #tbl_actionCausal thead th:first-child { border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_causal thead th:last-child,
body.pg-index #tbl_pending thead th:last-child,
body.pg-index #tbl_observation thead th:last-child,
body.pg-index #tbl_cancellation thead th:last-child,
body.pg-index #tbl_actionCausal thead th:last-child { border-top-right-radius: .5rem; }
body.pg-index #tbl_causal tbody tr,
body.pg-index #tbl_pending tbody tr,
body.pg-index #tbl_observation tbody tr,
body.pg-index #tbl_cancellation tbody tr,
body.pg-index #tbl_actionCausal tbody tr { transition: background-color .12s ease; cursor: pointer; }
body.pg-index #tbl_causal tbody td,
body.pg-index #tbl_pending tbody td,
body.pg-index #tbl_observation tbody td,
body.pg-index #tbl_cancellation tbody td,
body.pg-index #tbl_actionCausal tbody td {
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_causal tbody tr:last-child td,
body.pg-index #tbl_pending tbody tr:last-child td,
body.pg-index #tbl_observation tbody tr:last-child td,
body.pg-index #tbl_cancellation tbody tr:last-child td,
body.pg-index #tbl_actionCausal tbody tr:last-child td { border-bottom: none; }
body.pg-index #card_causal,
body.pg-index #card_pending,
body.pg-index #card_observation,
body.pg-index #card_cancellation,
body.pg-index #card_actionCausal {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_causal .mpspk-card-title-icon,
body.pg-index #card_pending .mpspk-card-title-icon,
body.pg-index #card_observation .mpspk-card-title-icon,
body.pg-index #card_cancellation .mpspk-card-title-icon,
body.pg-index #card_actionCausal .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}
body.pg-index #tbl_causal_wrapper .dataTables_length,
body.pg-index #tbl_causal_wrapper .dataTables_filter,
body.pg-index #tbl_causal_wrapper .dataTables_info,
body.pg-index #tbl_pending_wrapper .dataTables_length,
body.pg-index #tbl_pending_wrapper .dataTables_filter,
body.pg-index #tbl_pending_wrapper .dataTables_info,
body.pg-index #tbl_observation_wrapper .dataTables_length,
body.pg-index #tbl_observation_wrapper .dataTables_filter,
body.pg-index #tbl_observation_wrapper .dataTables_info,
body.pg-index #tbl_cancellation_wrapper .dataTables_length,
body.pg-index #tbl_cancellation_wrapper .dataTables_filter,
body.pg-index #tbl_cancellation_wrapper .dataTables_info,
body.pg-index #tbl_actionCausal_wrapper .dataTables_length,
body.pg-index #tbl_actionCausal_wrapper .dataTables_filter,
body.pg-index #tbl_actionCausal_wrapper .dataTables_info {
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_causal_wrapper .dataTables_length select,
body.pg-index #tbl_causal_wrapper .dataTables_filter input,
body.pg-index #tbl_pending_wrapper .dataTables_length select,
body.pg-index #tbl_pending_wrapper .dataTables_filter input,
body.pg-index #tbl_observation_wrapper .dataTables_length select,
body.pg-index #tbl_observation_wrapper .dataTables_filter input,
body.pg-index #tbl_cancellation_wrapper .dataTables_length select,
body.pg-index #tbl_cancellation_wrapper .dataTables_filter input,
body.pg-index #tbl_actionCausal_wrapper .dataTables_length select,
body.pg-index #tbl_actionCausal_wrapper .dataTables_filter input { border-radius: .5rem; }
body.pg-index #tbl_causal_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_pending_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_observation_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_cancellation_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_actionCausal_wrapper .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_causal_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_pending_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_observation_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_cancellation_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_actionCausal_wrapper .dataTables_paginate .page-link {
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_causal_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_pending_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_observation_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_cancellation_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_actionCausal_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_causal_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_pending_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_observation_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_cancellation_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_actionCausal_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}

/* --- serpihan: modules/global_resources/holiday_list.cfm, postcode_list.cfm,
   site_application_list.cfm & site_registry_list.cfm (2026-09-27, arahan pengguna: "ubah UI page
   ... agar ia sama dengan design page lain ... table ... hendaklah ditukar agar sama dengan table
   dalam folder lain"). Reka bentuk jadual "formal/korporat" SAMA seperti blok #tbl_main_area/
   #tbl_sub_area di atas, diskop kepada ID jadual/kad keempat-empat fragment Global Resources ini. */
body.pg-index #tbl_holiday,
body.pg-index #tbl_poscode,
body.pg-index #tbl_application,
body.pg-index #tbl_sitereg{
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_holiday thead th,
body.pg-index #tbl_poscode thead th,
body.pg-index #tbl_application thead th,
body.pg-index #tbl_sitereg thead th{
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_holiday thead th:first-child,
body.pg-index #tbl_poscode thead th:first-child,
body.pg-index #tbl_application thead th:first-child,
body.pg-index #tbl_sitereg thead th:first-child{ border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_holiday thead th:last-child,
body.pg-index #tbl_poscode thead th:last-child,
body.pg-index #tbl_application thead th:last-child,
body.pg-index #tbl_sitereg thead th:last-child{ border-top-right-radius: .5rem; }
body.pg-index #tbl_holiday tbody tr,
body.pg-index #tbl_poscode tbody tr,
body.pg-index #tbl_application tbody tr,
body.pg-index #tbl_sitereg tbody tr{ transition: background-color .12s ease; cursor: pointer; }
body.pg-index #tbl_holiday tbody td,
body.pg-index #tbl_poscode tbody td,
body.pg-index #tbl_application tbody td,
body.pg-index #tbl_sitereg tbody td{
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_holiday tbody tr:last-child td,
body.pg-index #tbl_poscode tbody tr:last-child td,
body.pg-index #tbl_application tbody tr:last-child td,
body.pg-index #tbl_sitereg tbody tr:last-child td{ border-bottom: none; }
body.pg-index #card_holiday,
body.pg-index #card_poscode,
body.pg-index #card_application,
body.pg-index #card_sitereg{
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_holiday .mpspk-card-title-icon,
body.pg-index #card_poscode .mpspk-card-title-icon,
body.pg-index #card_application .mpspk-card-title-icon,
body.pg-index #card_sitereg .mpspk-card-title-icon{
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}
body.pg-index #tbl_holiday_wrapper .dataTables_length,
body.pg-index #tbl_poscode_wrapper .dataTables_length,
body.pg-index #tbl_application_wrapper .dataTables_length,
body.pg-index #tbl_sitereg_wrapper .dataTables_length,
body.pg-index #tbl_holiday_wrapper .dataTables_filter,
body.pg-index #tbl_poscode_wrapper .dataTables_filter,
body.pg-index #tbl_application_wrapper .dataTables_filter,
body.pg-index #tbl_sitereg_wrapper .dataTables_filter,
body.pg-index #tbl_holiday_wrapper .dataTables_info,
body.pg-index #tbl_poscode_wrapper .dataTables_info,
body.pg-index #tbl_application_wrapper .dataTables_info,
body.pg-index #tbl_sitereg_wrapper .dataTables_info{
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_holiday_wrapper .dataTables_length select,
body.pg-index #tbl_poscode_wrapper .dataTables_length select,
body.pg-index #tbl_application_wrapper .dataTables_length select,
body.pg-index #tbl_sitereg_wrapper .dataTables_length select,
body.pg-index #tbl_holiday_wrapper .dataTables_filter input,
body.pg-index #tbl_poscode_wrapper .dataTables_filter input,
body.pg-index #tbl_application_wrapper .dataTables_filter input,
body.pg-index #tbl_sitereg_wrapper .dataTables_filter input{ border-radius: .5rem; }
body.pg-index #tbl_holiday_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_poscode_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_application_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_sitereg_wrapper .dataTables_filter input:focus{
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_holiday_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_poscode_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_application_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_sitereg_wrapper .dataTables_paginate .page-link{
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_holiday_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_poscode_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_application_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_sitereg_wrapper .dataTables_paginate .page-item.active .page-link{
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_holiday_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_poscode_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_application_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_sitereg_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover{
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}


/* --- serpihan: modules/system_utilities/active_users.cfm, activity_log.cfm & delete_csr.cfm
   (2026-09-27, arahan pengguna: "table untuk page active_users.cfm guna datatables tanpa
   pipeline. begitu juga dengan activity_log.cfm. table hendaklah diubah UI agar sama design
   dengan table yang lain"). Reka bentuk jadual "formal/korporat" SAMA seperti blok #tbl_main_area/
   #tbl_holiday di atas, diskop kepada ID jadual/kad ketiga-tiga fragment System Utilities ini.
   delete_csr.cfm tiada jadual (borang carian sahaja) - hanya #card_delete_csr disamakan gaya kad. */
body.pg-index #tbl_active_user,
body.pg-index #tbl_activity_log{
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_active_user thead th,
body.pg-index #tbl_activity_log thead th{
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_active_user thead th:first-child,
body.pg-index #tbl_activity_log thead th:first-child{ border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_active_user thead th:last-child,
body.pg-index #tbl_activity_log thead th:last-child{ border-top-right-radius: .5rem; }
body.pg-index #tbl_active_user tbody td,
body.pg-index #tbl_activity_log tbody td{
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_active_user tbody tr:last-child td,
body.pg-index #tbl_activity_log tbody tr:last-child td{ border-bottom: none; }
body.pg-index #card_active_user,
body.pg-index #card_activity_log,
body.pg-index #card_delete_csr,
body.pg-index #card_new_templates{
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_active_user .mpspk-card-title-icon,
body.pg-index #card_activity_log .mpspk-card-title-icon,
body.pg-index #card_delete_csr .mpspk-card-title-icon,
body.pg-index #card_new_templates .mpspk-card-title-icon{
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}
/* modules/template_management/new_templates.cfm (2026-09-27) - editor Quill (assets/vendor/libs/quill/)
   diberi sudut bulat sepadan gaya form-control Bootstrap5 sedia ada di kad ini, & fokus kotak
   ditukar warna hijau rasmi MPSPK (sama corak fokus input/select lain dlm fail ini). */
body.pg-index #card_new_templates #templ_editor_toolbar{
    border: 1px solid #d9dee3;
    border-bottom: none;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
    background-color: #f8f8f9;
}
body.pg-index #card_new_templates #templ_editor{
    border: 1px solid #d9dee3;
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem;
    min-height: 220px;
}
body.pg-index #card_new_templates .ql-container.ql-snow:focus-within,
body.pg-index #card_new_templates #templ_editor:focus-within{
    border-color: var(--mpspk-green);
}
body.pg-index #tbl_active_user_wrapper .dataTables_length,
body.pg-index #tbl_activity_log_wrapper .dataTables_length,
body.pg-index #tbl_active_user_wrapper .dataTables_filter,
body.pg-index #tbl_activity_log_wrapper .dataTables_filter,
body.pg-index #tbl_active_user_wrapper .dataTables_info,
body.pg-index #tbl_activity_log_wrapper .dataTables_info{
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_active_user_wrapper .dataTables_length select,
body.pg-index #tbl_activity_log_wrapper .dataTables_length select,
body.pg-index #tbl_active_user_wrapper .dataTables_filter input,
body.pg-index #tbl_activity_log_wrapper .dataTables_filter input{ border-radius: .5rem; }
body.pg-index #tbl_active_user_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_activity_log_wrapper .dataTables_filter input:focus{
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_active_user_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_activity_log_wrapper .dataTables_paginate .page-link{
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_active_user_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_activity_log_wrapper .dataTables_paginate .page-item.active .page-link{
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_active_user_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_activity_log_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover{
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}


/* =============================================================================================
   modules/search/search_default.cfm & search_result.cfm (2026-09-29, arahan pengguna: "kemaskini
   ui ... supaya ia seiring design dengan page2 lain ... datatables ... gunakan pipeline").
   Blok BAHARU/BERASINGAN (bukan sambungan blok #tbl_staff/#tbl_customer/#tbl_sysadminz/
   #tbl_user_result di atas) - sengaja diasingkan supaya risiko terhadap blok sedia ada (yg besar
   & telah terbukti rapuh - lihat nota bug sintaks komen ##mpspk-feedback-tile di atas) diminimumkan.
   Reka bentuk jadual "formal/korporat" SAMA corak (kepala hijau gelap MPSPK, zebra/hover, kad
   berbayang, kawalan DataTables berjenama) spt blok #tbl_user_task/#tbl_access_level/
   #tbl_user_community/#tbl_user_type di atas.
   ============================================================================================= */
body.pg-index #tbl_cantuman,
body.pg-index #tbl_aduan_search {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_cantuman thead th,
body.pg-index #tbl_aduan_search thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_cantuman thead th:first-child,
body.pg-index #tbl_aduan_search thead th:first-child { border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_cantuman thead th:last-child,
body.pg-index #tbl_aduan_search thead th:last-child { border-top-right-radius: .5rem; }
body.pg-index #tbl_cantuman tbody tr,
body.pg-index #tbl_aduan_search tbody tr { transition: background-color .12s ease; cursor: pointer; }
body.pg-index #tbl_cantuman tbody td,
body.pg-index #tbl_aduan_search tbody td {
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_cantuman tbody tr:last-child td,
body.pg-index #tbl_aduan_search tbody tr:last-child td { border-bottom: none; }
body.pg-index #tbl_cantuman tbody td .badge,
body.pg-index #tbl_aduan_search tbody td .badge {
    display: inline-block;
    min-width: 4.5rem;
    padding: .42em .6em;
    font-size: .72rem;
    font-weight: 700;
}

/* Kad "Hasil Carian" (jadual keputusan) SAHAJA - bayang lembut + ikon tajuk kad hijau rasmi.
   Kekal reka bentuk ringkas asal (BUKAN kad kriteria - lihat blok formal di bawah). */
body.pg-index #card_cantuman_result,
body.pg-index #card_search_result {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_cantuman_result .mpspk-card-title-icon,
body.pg-index #card_search_result .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}

/* Kad-kad KRITERIA CARIAN (modules/search/search_default.cfm SAHAJA - #card_search_csrno,
   #card_search_maklumbalas, #card_search_tempoh, #card_search_lokasi, #card_search_status)
   diberi reka bentuk formal/korporat (kemaskini 2026-09-29, arahan pengguna verbatim: "tolong
   tukar UI setiap card agar ia nampak korporat, professional dan formal serta menarik") - SAMA
   corak yg TELAH DISAHKAN pengguna pd modules/dashboard/dashboard_default.cfm
   #card_tapisan_dashboard (arahan verbatim serupa 2026-09-23 "...design agar nampak formal,
   korporat dan menarik", lihat blok itu di atas utk komen asal) - DIULANG di sini dgn ID
   berasingan supaya #card_tapisan_dashboard tidak terjejas. Jalur gradient 3-warna rasmi MPSPK
   (SAMA seperti ".mpspk-aduan-card::before" di BAHAGIAN KONGSI atas fail ini) di atas setiap
   kad; kepala kad (.card-header, kini elemen SEBENAR - lihat kemaskini struktur HTML
   search_default.cfm) latar hijau gelap MPSPK + teks putih, ikon tajuk warna emas; label
   borang huruf besar + letter-spacing; kotak fokus input/select ditukar cincin hijau rasmi
   (bukan biru lalai Bootstrap). */
body.pg-index #card_search_csrno,
body.pg-index #card_search_maklumbalas,
body.pg-index #card_search_tempoh,
body.pg-index #card_search_lokasi,
body.pg-index #card_cantuman_filter,
body.pg-index #card_search_status {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_search_csrno::before,
body.pg-index #card_search_maklumbalas::before,
body.pg-index #card_search_tempoh::before,
body.pg-index #card_search_lokasi::before,
body.pg-index #card_cantuman_filter::before,
body.pg-index #card_search_status::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mpspk-gold-light), var(--mpspk-green) 55%, var(--mpspk-red));
    z-index: 1;
}
body.pg-index #card_search_csrno .card-header,
body.pg-index #card_search_maklumbalas .card-header,
body.pg-index #card_search_tempoh .card-header,
body.pg-index #card_search_lokasi .card-header,
body.pg-index #card_cantuman_filter .card-header,
body.pg-index #card_search_status .card-header {
    background-color: var(--mpspk-green-dark);
    border-bottom: none;
    padding: .9rem 1.25rem;
}
body.pg-index #card_search_csrno .card-header h5,
body.pg-index #card_search_maklumbalas .card-header h5,
body.pg-index #card_search_tempoh .card-header h5,
body.pg-index #card_search_lokasi .card-header h5,
body.pg-index #card_cantuman_filter .card-header h5,
body.pg-index #card_search_status .card-header h5 {
    color: #fff;
    font-weight: 600;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
}
body.pg-index #card_search_csrno .card-header .mpspk-card-title-icon,
body.pg-index #card_search_maklumbalas .card-header .mpspk-card-title-icon,
body.pg-index #card_search_tempoh .card-header .mpspk-card-title-icon,
body.pg-index #card_search_lokasi .card-header .mpspk-card-title-icon,
body.pg-index #card_cantuman_filter .card-header .mpspk-card-title-icon,
body.pg-index #card_search_status .card-header .mpspk-card-title-icon {
    color: var(--mpspk-gold-light);
    margin-right: .5rem;
    font-size: 1.1rem;
}
body.pg-index #card_search_csrno .card-body,
body.pg-index #card_search_maklumbalas .card-body,
body.pg-index #card_search_tempoh .card-body,
body.pg-index #card_search_lokasi .card-body,
body.pg-index #card_cantuman_filter .card-body,
body.pg-index #card_search_status .card-body {
    padding-top: 1.35rem;
}
body.pg-index #card_search_csrno .form-label,
body.pg-index #card_search_maklumbalas .form-label,
body.pg-index #card_search_tempoh .form-label,
body.pg-index #card_search_lokasi .form-label,
body.pg-index #card_cantuman_filter .form-label,
body.pg-index #card_search_status .form-label {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: #5b6472;
    margin-bottom: .4rem;
}
body.pg-index #card_search_csrno .form-select:focus,
body.pg-index #card_search_csrno .form-control:focus,
body.pg-index #card_search_maklumbalas .form-select:focus,
body.pg-index #card_search_maklumbalas .form-control:focus,
body.pg-index #card_search_tempoh .form-select:focus,
body.pg-index #card_search_tempoh .form-control:focus,
body.pg-index #card_search_lokasi .form-select:focus,
body.pg-index #card_search_lokasi .form-control:focus,
body.pg-index #card_cantuman_filter .form-select:focus,
body.pg-index #card_search_status .form-select:focus,
body.pg-index #card_cantuman_filter .form-control:focus,
body.pg-index #card_search_status .form-control:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}

/* Kawalan DataTables (kotak carian, "papar N rekod", info, pagination) - jenamakan warna rasmi
   MPSPK (sama corak blok #tbl_staff_wrapper/#tbl_user_task_wrapper di atas). */
body.pg-index #tbl_cantuman_wrapper .dataTables_length,
body.pg-index #tbl_aduan_search_wrapper .dataTables_length,
body.pg-index #tbl_cantuman_wrapper .dataTables_filter,
body.pg-index #tbl_aduan_search_wrapper .dataTables_filter,
body.pg-index #tbl_cantuman_wrapper .dataTables_info,
body.pg-index #tbl_aduan_search_wrapper .dataTables_info {
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_cantuman_wrapper .dataTables_length select,
body.pg-index #tbl_aduan_search_wrapper .dataTables_length select,
body.pg-index #tbl_cantuman_wrapper .dataTables_filter input,
body.pg-index #tbl_aduan_search_wrapper .dataTables_filter input { border-radius: .5rem; }
body.pg-index #tbl_cantuman_wrapper .dataTables_filter input:focus,
body.pg-index #tbl_aduan_search_wrapper .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_cantuman_wrapper .dataTables_paginate .page-link,
body.pg-index #tbl_aduan_search_wrapper .dataTables_paginate .page-link {
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_cantuman_wrapper .dataTables_paginate .page-item.active .page-link,
body.pg-index #tbl_aduan_search_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_cantuman_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
body.pg-index #tbl_aduan_search_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}

/* Kad-kad modules/statistic/search_statistic.cfm (#card_stat_jenis, #card_stat_kriteria,
   #card_stat_placeholder) - reka bentuk formal/korporat (kemaskini 2026-09-29), sama corak kad
   Kriteria Carian modules/search/search_default.cfm: jalur gradient 3-warna MPSPK, kepala hijau
   gelap + teks putih, ikon emas, label huruf besar, fokus input hijau. */
body.pg-index #card_stat_jenis,
body.pg-index #card_stat_kriteria,
body.pg-index #card_stat_placeholder,
body.pg-index #card_rpt_jenis,
body.pg-index #card_rpt_kriteria,
body.pg-index #card_rpt_placeholder {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_stat_jenis::before,
body.pg-index #card_stat_kriteria::before,
body.pg-index #card_stat_placeholder::before,
body.pg-index #card_rpt_jenis::before,
body.pg-index #card_rpt_kriteria::before,
body.pg-index #card_rpt_placeholder::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mpspk-gold-light), var(--mpspk-green) 55%, var(--mpspk-red));
    z-index: 1;
}
body.pg-index #card_stat_jenis .card-header,
body.pg-index #card_stat_kriteria .card-header,
body.pg-index #card_stat_placeholder .card-header,
body.pg-index #card_rpt_jenis .card-header,
body.pg-index #card_rpt_kriteria .card-header,
body.pg-index #card_rpt_placeholder .card-header {
    background-color: var(--mpspk-green-dark);
    border-bottom: none;
    padding: .9rem 1.25rem;
}
body.pg-index #card_stat_jenis .card-header h5,
body.pg-index #card_stat_kriteria .card-header h5,
body.pg-index #card_stat_placeholder .card-header h5,
body.pg-index #card_rpt_jenis .card-header h5,
body.pg-index #card_rpt_kriteria .card-header h5,
body.pg-index #card_rpt_placeholder .card-header h5 {
    color: #fff;
    font-weight: 600;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
}
body.pg-index #card_stat_jenis .card-header .mpspk-card-title-icon,
body.pg-index #card_stat_kriteria .card-header .mpspk-card-title-icon,
body.pg-index #card_stat_placeholder .card-header .mpspk-card-title-icon,
body.pg-index #card_rpt_jenis .card-header .mpspk-card-title-icon,
body.pg-index #card_rpt_kriteria .card-header .mpspk-card-title-icon,
body.pg-index #card_rpt_placeholder .card-header .mpspk-card-title-icon {
    color: var(--mpspk-gold-light);
    margin-right: .5rem;
    font-size: 1.1rem;
}
body.pg-index #card_stat_jenis .card-body,
body.pg-index #card_stat_kriteria .card-body,
body.pg-index #card_stat_placeholder .card-body,
body.pg-index #card_rpt_jenis .card-body,
body.pg-index #card_rpt_kriteria .card-body,
body.pg-index #card_rpt_placeholder .card-body { padding-top: 1.35rem; }
body.pg-index #card_stat_jenis .form-label,
body.pg-index #card_stat_kriteria .form-label,
body.pg-index #card_stat_placeholder .form-label,
body.pg-index #card_rpt_jenis .form-label,
body.pg-index #card_rpt_kriteria .form-label,
body.pg-index #card_rpt_placeholder .form-label {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: #5b6472;
    margin-bottom: .4rem;
}
body.pg-index #card_stat_jenis .form-select:focus,
body.pg-index #card_stat_kriteria .form-select:focus,
body.pg-index #card_stat_kriteria .form-control:focus,
body.pg-index #card_rpt_jenis .form-select:focus,
body.pg-index #card_rpt_kriteria .form-select:focus,
body.pg-index #card_rpt_kriteria .form-control:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
/* Senarai Jenis Statistik (radio) - senarai formal, baris terpilih ditonjolkan hijau MPSPK */
body.pg-index #JenisL,
body.pg-index #report_list { border-radius: .5rem; max-height: 420px; overflow-y: auto; }
body.pg-index #JenisL .list-group-item,
body.pg-index #report_list .list-group-item {
    font-size: .875rem;
    cursor: pointer;
    padding: .65rem 1rem;
    border-color: #e6e8ec;
}
body.pg-index #JenisL .list-group-item:hover,
body.pg-index #report_list .list-group-item:hover { background-color: rgba(27, 122, 67, .06); }
body.pg-index #JenisL .form-check-input:checked,
body.pg-index #report_list .form-check-input:checked {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
}
body.pg-index #JenisL .list-group-item:has(.form-check-input:checked),
body.pg-index #report_list .list-group-item:has(.form-check-input:checked) {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    font-weight: 600;
}

/* Kad & jadual HASIL statistik (fragment modules/statistic/stat_*.cfm dimuat ke #divListSearch) -
   kelas kongsi .mpspk-stat-card / .mpspk-stat-table (kemaskini 2026-09-29; mula digunakan
   stat_jumlah_penerimaan_segala_masalah.cfm - fragment lain boleh guna kelas sama bila dimigrasi).
   Rupa sama kad Kriteria Statistik & jadual #tbl_user_result. */
body.pg-index .mpspk-stat-card {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index .mpspk-stat-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mpspk-gold-light), var(--mpspk-green) 55%, var(--mpspk-red));
    z-index: 1;
}
body.pg-index .mpspk-stat-card .card-header {
    background-color: var(--mpspk-green-dark);
    border-bottom: none;
    padding: .9rem 1.25rem;
}
body.pg-index .mpspk-stat-card .card-header h5 {
    color: #fff;
    font-weight: 600;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
}
body.pg-index .mpspk-stat-card .card-header .mpspk-card-title-icon {
    color: var(--mpspk-gold-light);
    font-size: 1.1rem;
}
/* Butang Eksport: emas (kontra dgn header hijau) + teks gelap supaya jelas kelihatan */
body.pg-index .mpspk-stat-card .card-header .btn-label-light,
body.pg-index .mpspk-stat-card .card-header .dt-buttons .btn {
    background: var(--mpspk-gold-light) !important;
    color: #2b2100 !important;
    border: 1px solid var(--mpspk-gold) !important;
    font-weight: 600;
}
body.pg-index .mpspk-stat-card .card-header .btn-label-light:hover,
body.pg-index .mpspk-stat-card .card-header .btn-label-light:focus,
body.pg-index .mpspk-stat-card .card-header .btn-label-light.show,
body.pg-index .mpspk-stat-card .card-header .dt-buttons .btn:hover,
body.pg-index .mpspk-stat-card .card-header .dt-buttons .btn:focus {
    background: var(--mpspk-gold) !important;
    color: #fff !important;
    border-color: var(--mpspk-gold) !important;
}
body.pg-index .mpspk-stat-card .card-body { padding-top: 1.35rem; }

body.pg-index .mpspk-stat-table {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index .mpspk-stat-table thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding: .85rem .75rem;
    vertical-align: middle;
}
/* Pastikan teks header sentiasa putih (elak ditimpa gaya jadual/DataTables: sorting, th lain, pautan) */
body.pg-index .mpspk-stat-table thead th,
body.pg-index .mpspk-stat-table thead th.sorting,
body.pg-index .mpspk-stat-table thead th.sorting_asc,
body.pg-index .mpspk-stat-table thead th.sorting_desc,
body.pg-index .mpspk-stat-table thead td,
body.pg-index .mpspk-stat-table thead th a,
body.pg-index .mpspk-stat-table thead th span {
    color: #fff !important;
}
body.pg-index .mpspk-stat-table thead th,
body.pg-index .mpspk-stat-table thead td {
    background-color: var(--mpspk-green-dark) !important;
}
body.pg-index .mpspk-stat-table thead th:first-child { border-top-left-radius: .5rem; }
body.pg-index .mpspk-stat-table thead th:last-child { border-top-right-radius: .5rem; }
body.pg-index .mpspk-stat-table tbody td {
    padding: .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index .mpspk-stat-table tfoot th {
    background-color: rgba(27, 122, 67, .08);
    color: var(--mpspk-green-dark);
    font-weight: 700;
    border-top: 2px solid var(--mpspk-green);
    padding: .75rem;
}
body.pg-index .mpspk-stat-card .dataTables_length,
body.pg-index .mpspk-stat-card .dataTables_filter,
body.pg-index .mpspk-stat-card .dataTables_info {
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index .mpspk-stat-card .dataTables_filter input { border-radius: .5rem; }
body.pg-index .mpspk-stat-card .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index .mpspk-stat-card .dataTables_paginate .page-link { border-radius: .5rem; margin-inline-start: .2rem; color: #4b4f5a; }
body.pg-index .mpspk-stat-card .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}

/* Jadual berkumpulan statistik (stat_jumlah_edaran_aduan_mengikut_cat_dan_jenis.cfm, kemaskini 2026-09-29):
   baris kategori ditonjolkan hijau lembut, baris jenis boleh diklik. */
body.pg-index .mpspk-stat-table tr.stat-cat-row td {
    background-color: rgba(27, 122, 67, .10);
    color: var(--mpspk-green-dark);
    font-weight: 700;
    border-bottom-color: rgba(27, 122, 67, .18);
}
body.pg-index .mpspk-stat-table tr.stat-child-row { cursor: pointer; }
body.pg-index .mpspk-stat-table tr.stat-child-row:hover td { background-color: rgba(27, 122, 67, .07); }

/* Jadual statistik berkumpulan pelbagai aras (komponen kongsi modules/statistic/_stat_grouped.cfm, kemaskini 2026-09-29):
   .stat-cat-row (aras 1, sedia ada di atas), .stat-sub-row (aras 2), .stat-child-row (baris boleh diklik),
   .stat-muted (kiraan sifar), .stat-pct (peratus), .stat-total-row/.stat-summary-row (ringkasan bawah jadual). */
body.pg-index .mpspk-stat-table tr.stat-sub-row td {
    background-color: rgba(201, 162, 74, .12);
    color: #5b4a1a;
    font-weight: 600;
    border-bottom-color: rgba(201, 162, 74, .25);
}
body.pg-index .mpspk-stat-table tr.stat-child-row .stat-go-icon { opacity: .55; transition: opacity .15s ease; }
body.pg-index .mpspk-stat-table tr.stat-child-row:hover .stat-go-icon { opacity: 1; }
body.pg-index .mpspk-stat-table tr.stat-plain-row td { color: #4b4f5a; }
body.pg-index .mpspk-stat-table tr.stat-muted td { color: #9aa0aa; }
body.pg-index .mpspk-stat-table tr.stat-log-row td { font-size: .8125rem; padding-top: .5rem; padding-bottom: .5rem; }
body.pg-index .mpspk-stat-table tr.stat-log-row td.stat-late { color: var(--mpspk-red); font-weight: 600; }
body.pg-index .mpspk-stat-table tr.stat-log-row td.stat-ontime { color: var(--mpspk-green-dark); font-weight: 600; }
body.pg-index .mpspk-stat-table tr.stat-error-row td { color: var(--mpspk-red); font-style: italic; background-color: rgba(179, 38, 30, .05); }
body.pg-index .mpspk-stat-table .stat-pct { color: #6f727d; font-size: .8125rem; white-space: nowrap; }
body.pg-index .mpspk-stat-table tfoot td {
    background-color: rgba(27, 122, 67, .04);
    color: var(--mpspk-green-dark);
    padding: .6rem .75rem;
    border-top-color: #eef0f3;
}
body.pg-index .mpspk-stat-table tfoot tr.stat-total-row th {
    border-top: 2px solid var(--mpspk-green);
}
body.pg-index .mpspk-stat-table tfoot tr.stat-summary-row td:first-child { padding-left: 2rem; }


/* =========================================================================
   modules/aduan/eaduan_detail.cfm (butiran E-Aduan pegawai) - kemaskini UI 2026-09-29
   Skop: body.pg-index. Kad guna ID tersendiri (#card_eaduan_*), corak SAMA #card_senarai_aduan_eaduan:
   bayang lembut, ikon tajuk hijau MPSPK, kepala kad bergaris.
   PERHATIAN: semua komen dalam fail .css ini MESTI ditutup dengan penutup CSS sebenar - JANGAN guna
   penutup komen CFML (bug lalu: baris 678/702 menelan rule).
   ========================================================================= */
body.pg-index #card_eaduan_ringkasan,
body.pg-index #card_eaduan_pengadu,
body.pg-index #card_eaduan_proses,
body.pg-index #card_eaduan_sejarah,
body.pg-index #card_eaduan_lampiran,
body.pg-index #card_eaduan_tiada {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_eaduan_ringkasan {
    border-top: 3px solid var(--mpspk-green);
}
body.pg-index #card_eaduan_pengadu > .card-header,
body.pg-index #card_eaduan_proses > .card-header,
body.pg-index #card_eaduan_sejarah > .card-header,
body.pg-index #card_eaduan_lampiran > .card-header {
    border-bottom: 1px solid #eef0f3;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
body.pg-index #card_eaduan_pengadu .mpspk-card-title-icon,
body.pg-index #card_eaduan_proses .mpspk-card-title-icon,
body.pg-index #card_eaduan_sejarah .mpspk-card-title-icon,
body.pg-index #card_eaduan_lampiran .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}

/* Chip No. Rujukan (monospace) - sama gaya chip jadual Senarai Aduan */
body.pg-index .mpspk-csr-chip {
    display: inline-block;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mpspk-green-dark);
    background-color: rgba(27, 122, 67, .08);
    border: 1px solid rgba(27, 122, 67, .25);
    border-radius: .375rem;
    padding: .2rem .65rem;
}

/* Baris label/nilai dalam kad Butiran Pengadu - nilai dibenarkan bungkus, label sedikit lebih rapat */
body.pg-index #card_eaduan_pengadu .mpspk-review-row {
    padding: .45rem 0;
    border-bottom: 1px dashed #eef0f3;
}
body.pg-index #card_eaduan_pengadu .mpspk-review-row .mpspk-review-label { flex: 0 0 38%; }
body.pg-index #card_eaduan_pengadu .mpspk-review-row .mpspk-review-value { color: #2f3349; font-weight: 500; }

/* Tajuk seksyen dalam borang proses (menggantikan kotak .alert berwarna v8) */
body.pg-index #card_eaduan_proses .mpspk-form-section {
    color: var(--mpspk-green-dark);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-bottom: .4rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--mpspk-gold-light);
}
body.pg-index #card_eaduan_proses .form-label { font-weight: 600; color: #4b4f5a; }
body.pg-index #card_eaduan_proses .form-control:focus,
body.pg-index #card_eaduan_proses .form-select:focus,
body.pg-index #card_eaduan_proses .select2-container--open .select2-selection {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #card_eaduan_proses .mpspk-action-bar { border-top: 1px solid #eef0f3; }

/* Garis masa Sejarah Tindakbalas */
body.pg-index .mpspk-timeline {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid #e3e6ea;
    margin-left: .35rem;
}
body.pg-index .mpspk-timeline > li { position: relative; padding-bottom: 1.25rem; }
body.pg-index .mpspk-timeline > li:last-child { padding-bottom: 0; }
body.pg-index .mpspk-timeline > li::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem - 7px);
    top: .3rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--mpspk-green);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(27, 122, 67, .3);
}

/* Grid lampiran */
body.pg-index .mpspk-attach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 104px;
    text-decoration: none;
    color: #4b4f5a;
}
body.pg-index .mpspk-attach-item img,
body.pg-index .mpspk-attach-item .mpspk-attach-icon {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: .5rem;
    border: 1px solid #e7e7e8;
    background: #f8f8f8;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.pg-index .mpspk-attach-item .mpspk-attach-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    color: var(--mpspk-red);
}
body.pg-index .mpspk-attach-item:hover img,
body.pg-index .mpspk-attach-item:hover .mpspk-attach-icon {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index .mpspk-attach-name {
    margin-top: .35rem;
    font-size: .72rem;
    text-align: center;
    word-break: break-all;
    line-height: 1.2;
}

/* Lampiran eaduan_detail - grid maks 6 sebaris + image viewer */
body.pg-index .mpspk-attach-grid .mpspk-attach-item { width: 100%; }
body.pg-index .mpspk-attach-grid .mpspk-attach-item img,
body.pg-index .mpspk-attach-grid .mpspk-attach-item .mpspk-attach-icon { width: 100%; height: auto; aspect-ratio: 1 / 1; }
body.pg-index .mpspk-attach-grid .mpspk-attach-item[data-mpspk-img] { cursor: zoom-in; }
#mpspk_imgviewer { position: fixed; inset: 0; z-index: 200000; background: rgba(0,0,0,.92); display: none; flex-direction: column; }
#mpspk_imgviewer.show { display: flex; }
#mpspk_imgviewer .ivw-bar { display: flex; justify-content: center; gap: .5rem; padding: .75rem; z-index: 2; }
#mpspk_imgviewer .ivw-bar button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 1.25rem; cursor: pointer; }
#mpspk_imgviewer .ivw-bar button:hover { background: rgba(255,255,255,.3); }
#mpspk_imgviewer .ivw-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; touch-action: none; }
#mpspk_imgviewer .ivw-stage.drag { cursor: grabbing; }
#mpspk_imgviewer .ivw-stage img { max-width: 92vw; max-height: 80vh; user-select: none; transition: transform .12s ease; }
#mpspk_imgviewer .ivw-stage.drag img { transition: none; }
#mpspk_imgviewer .ivw-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 1.6rem; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; }
#mpspk_imgviewer .ivw-nav:hover { background: rgba(255,255,255,.3); }
#mpspk_imgviewer .ivw-prev { left: 1rem; }
#mpspk_imgviewer .ivw-next { right: 1rem; }
#mpspk_imgviewer.single .ivw-nav { display: none; }
#mpspk_imgviewer .ivw-cap { color: #ddd; text-align: center; font-size: .8rem; padding: .5rem; }


/* =========================================================================
   modules/aduan/aduan_detail.cfm (cangkerang tab Butiran Aduan) - kemaskini UI 2026-09-30
   Skop: body.pg-index, kad #card_aduan_detail. Kandungan tab dimuat melalui AJAX (aduan_detail_info/
   edaran/attachment/makluman/respond_history), jadi gaya kandungan ditetapkan ringan di bawah kad ini.
   PERHATIAN: semua komen dalam fail .css ini MESTI ditutup dengan penutup CSS sebenar.
   ========================================================================= */
body.pg-index #card_aduan_detail {
    border: none;
    border-top: 3px solid var(--mpspk-green);
    border-radius: .5rem;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
    overflow: hidden;
}
body.pg-index #card_aduan_detail .mpspk-detail-header {
    background: linear-gradient(90deg, rgba(27, 122, 67, .06), rgba(201, 154, 46, .05));
    border-bottom: 1px solid #eef0f3;
    padding: 1rem 1.5rem;
}
body.pg-index #card_aduan_detail .mpspk-detail-header h5 {
    color: var(--mpspk-green-dark);
    font-weight: 700;
    letter-spacing: .01em;
}
body.pg-index #card_aduan_detail .mpspk-detail-header-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; margin-right: .85rem;
    border-radius: .5rem;
    background-color: var(--mpspk-green); color: #fff; font-size: 1.35rem;
    box-shadow: 0 .125rem .375rem rgba(27, 122, 67, .3);
}

/* Tab navigasi */
body.pg-index #card_aduan_detail .mpspk-detail-tabs {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e3e6ea;
    padding: .5rem 1rem 0;
    gap: .25rem;
    flex-wrap: wrap;
}
body.pg-index #card_aduan_detail .mpspk-detail-tabs .nav-link {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: .5rem .5rem 0 0;
    padding: .7rem 1.15rem;
    margin-bottom: -1px;
    font-weight: 600; font-size: .875rem;
    color: #6f727d;
    background: transparent;
    transition: color .15s ease, background-color .15s ease;
}
body.pg-index #card_aduan_detail .mpspk-detail-tabs .nav-link i { font-size: 1.1rem; color: var(--mpspk-gold); }
body.pg-index #card_aduan_detail .mpspk-detail-tabs .nav-link:hover {
    color: var(--mpspk-green-dark); background-color: rgba(27, 122, 67, .06);
}
body.pg-index #card_aduan_detail .mpspk-detail-tabs .nav-link.active {
    color: var(--mpspk-green-dark);
    background-color: #fff;
    border-color: #e3e6ea;
    border-top: 3px solid var(--mpspk-green);
    padding-top: calc(.7rem - 2px);
}
body.pg-index #card_aduan_detail .mpspk-detail-tabs .nav-link.active i { color: var(--mpspk-green); }
/* Buang garis ungu (box-shadow inset #7367f0 dari theme-default.css) pada tab aktif */
body.pg-index #card_aduan_detail .mpspk-detail-tabs .nav-link.active,
body.pg-index #card_aduan_detail .mpspk-detail-tabs .nav-link.active:hover,
body.pg-index #card_aduan_detail .mpspk-detail-tabs .nav-link.active:focus {
    box-shadow: none;
}

/* Panel kandungan & penunjuk memuat */
body.pg-index #card_aduan_detail .mpspk-detail-content { padding: 1.25rem 1.5rem 1.5rem; background-color: #fff; }
body.pg-index #card_aduan_detail .mpspk-tab-loading {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    min-height: 220px; color: #6f727d; font-size: .9rem;
}

/* Gaya kandungan tab (v8 -> selaras tema korporat) */
body.pg-index #card_aduan_detail .panel-body { padding: 0; }
body.pg-index #card_aduan_detail .mpspk-detail-content h2 { font-size: 1.35rem; font-weight: 700; }
body.pg-index #card_aduan_detail .mpspk-detail-content h2 .text-primary,
body.pg-index #card_aduan_detail .mpspk-detail-content h2 font.text-primary { color: var(--mpspk-green-dark) !important; }
body.pg-index #card_aduan_detail .mpspk-detail-content h3 { font-size: 1rem; }
body.pg-index #card_aduan_detail .text-maroon { color: var(--mpspk-red) !important; }
body.pg-index #card_aduan_detail .mpspk-detail-content hr { border-top: 1px solid #eef0f3; opacity: 1; }
body.pg-index #card_aduan_detail .mpspk-detail-content .pull-right { float: right; }
body.pg-index #card_aduan_detail .btn-default {
    background-color: #fff; border: 1px solid #d4d8de; color: #4b4f5a;
}
body.pg-index #card_aduan_detail .btn-default:hover { border-color: var(--mpspk-green); color: var(--mpspk-green-dark); background-color: rgba(27, 122, 67, .05); }
body.pg-index #card_aduan_detail .mpspk-detail-content .table > thead > tr > th {
    background-color: #f4f6f4; color: var(--mpspk-green-dark);
    font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 2px solid var(--mpspk-green);
}
body.pg-index #card_aduan_detail .mpspk-detail-content .table > tbody > tr:hover { background-color: rgba(27, 122, 67, .035); }
body.pg-index #card_aduan_detail .mpspk-detail-content .form-control:focus,
body.pg-index #card_aduan_detail .mpspk-detail-content .form-select:focus {
    border-color: var(--mpspk-green); box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}

@media (max-width: 767.98px) {
    body.pg-index #card_aduan_detail .mpspk-detail-header,
    body.pg-index #card_aduan_detail .mpspk-detail-content { padding-left: 1rem; padding-right: 1rem; }
    body.pg-index #card_aduan_detail .mpspk-detail-tabs .nav-link { padding: .6rem .8rem; font-size: .8rem; }
}


/* =========================================================================
   modules/aduan/aduan_detail_info.cfm (tab Butiran Maklumat Lengkap) - kemaskini UI 2026-09-30
   Skop: body.pg-index #card_aduan_detail (fragmen ini dimuat ke dalam tab aduan_detail.cfm).
   PERHATIAN: semua komen dalam fail .css ini MESTI ditutup dengan penutup CSS sebenar.
   ========================================================================= */

/* Kepala: kicker + chip no. rujukan + kategori */
body.pg-index #card_aduan_detail .mpspk-info-kicker {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mpspk-gold); margin-bottom: .25rem;
}
body.pg-index #card_aduan_detail h2.mpspk-info-ref { margin: 0 0 .5rem; }
body.pg-index #card_aduan_detail .mpspk-info-cat { color: #6f727d; font-size: .9rem; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
body.pg-index #card_aduan_detail .mpspk-cat-label { color: var(--mpspk-red); font-weight: 600; }
body.pg-index #card_aduan_detail .mpspk-info-cat i { color: #adb1ba; }
body.pg-index #card_aduan_detail .mpspk-info-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
body.pg-index #card_aduan_detail .mpspk-info-actions > div { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767.98px) {
    body.pg-index #card_aduan_detail .mpspk-info-actions,
    body.pg-index #card_aduan_detail .mpspk-info-actions > div { justify-content: flex-start; margin-top: .75rem; }
}
body.pg-index #card_aduan_detail .btn-outline-success { --bs-btn-color: var(--mpspk-green); --bs-btn-border-color: var(--mpspk-green); --bs-btn-hover-bg: var(--mpspk-green); --bs-btn-hover-border-color: var(--mpspk-green); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--mpspk-green-dark); --bs-btn-active-border-color: var(--mpspk-green-dark); }
body.pg-index #card_aduan_detail .btn-success { --bs-btn-bg: var(--mpspk-green); --bs-btn-border-color: var(--mpspk-green); --bs-btn-hover-bg: var(--mpspk-green-dark); --bs-btn-hover-border-color: var(--mpspk-green-dark); --bs-btn-active-bg: var(--mpspk-green-dark); }
body.pg-index #card_aduan_detail .mpspk-btn-icon { padding: .2rem .5rem; line-height: 1; }

/* Kad Maklumat Pengadu / Butiran Maklumbalas */
body.pg-index #card_aduan_detail .mpspk-info-card {
    background-color: #fff; border: 1px solid #e3e6ea; border-radius: .5rem;
    box-shadow: 0 .125rem .5rem rgba(30, 34, 40, .06);
    margin-bottom: 1rem; overflow: hidden; height: calc(100% - 1rem);
}
body.pg-index #card_aduan_detail .mpspk-info-pengadu { border-top: 3px solid var(--mpspk-green); }
body.pg-index #card_aduan_detail .mpspk-info-aduan { border-top: 3px solid var(--mpspk-gold); }
body.pg-index #card_aduan_detail .mpspk-info-card > div:first-child { padding: .85rem 1.25rem; background-color: #f8f9fa; border-bottom: 1px solid #eef0f3; }
body.pg-index #card_aduan_detail .mpspk-info-card > hr { display: none; }
body.pg-index #card_aduan_detail h3.mpspk-info-title {
    margin: 0; font-size: 1rem; font-weight: 700; color: var(--mpspk-green-dark);
    display: flex; align-items: center; gap: .55rem;
}
body.pg-index #card_aduan_detail h3.mpspk-info-title > i { font-size: 1.25rem; color: var(--mpspk-green); }
body.pg-index #card_aduan_detail h3.mpspk-info-title .btn { margin: 0 0 0 auto !important; }
body.pg-index #card_aduan_detail h3.mpspk-info-title .text-success { margin-left: auto; }

/* Baris label / nilai */
body.pg-index #card_aduan_detail .mpspk-info-card .ibox-content { padding: .5rem 1.25rem 1.25rem !important; }
body.pg-index #card_aduan_detail .mpspk-info-card .ibox-content .row {
    margin: 0; padding: .6rem 0; border-bottom: 1px dashed #e6e9ed; align-items: flex-start;
}
body.pg-index #card_aduan_detail .mpspk-info-card .ibox-content .row:last-child { border-bottom: 0; }
body.pg-index #card_aduan_detail .mpspk-info-card .ibox-content .row > [class*="col-"] { padding-left: 0; padding-right: .5rem; }
body.pg-index #card_aduan_detail .mpspk-info-card .ibox-content .col-md-3 h4 {
    margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6f727d; padding-top: .15rem;
}
body.pg-index #card_aduan_detail .mpspk-info-card .ibox-content .col-md-9 h4 {
    margin: 0; font-size: .9rem; font-weight: 500; color: #2f3349 !important; line-height: 1.5; word-break: break-word;
}
body.pg-index #card_aduan_detail .mpspk-info-card .col-md-9 h4 h4 { font-size: inherit; display: inline; }
body.pg-index #card_aduan_detail .mpspk-info-card .col-md-9 font.text-danger { color: var(--mpspk-red) !important; font-weight: 600; }
body.pg-index #card_aduan_detail .mpspk-info-card .col-md-9 font.text-info { color: var(--mpspk-green-dark) !important; font-weight: 600; }

/* Karusel pengadu tambahan (slick) */
body.pg-index #card_aduan_detail .slick-dots { bottom: 6px; }
body.pg-index #card_aduan_detail .slick-dots li button:before { color: var(--mpspk-green); font-size: 9px; }
body.pg-index #card_aduan_detail .slick-dots li.slick-active button:before { color: var(--mpspk-green-dark); }
body.pg-index #card_aduan_detail .slick_demo_1 .ibox-content { padding-bottom: 2rem !important; }

/* Seksyen Lampiran & Senarai Edaran */
body.pg-index #card_aduan_detail hr.mpspk-info-hr { display: none; }
body.pg-index #card_aduan_detail .mpspk-info-section {
    background-color: #fff; border: 1px solid #e3e6ea; border-radius: .5rem;
    box-shadow: 0 .125rem .5rem rgba(30, 34, 40, .06); margin: 0 0 1.25rem; padding: 0;
    width: 100%; overflow: hidden;
}
body.pg-index #card_aduan_detail .mpspk-info-section > div:first-child {
    padding: .85rem 1.25rem; background-color: #f8f9fa; border-bottom: 1px solid #eef0f3;
}
body.pg-index #card_aduan_detail .mpspk-info-section h5 { margin: .35rem 0 0; font-size: .78rem; }
body.pg-index #card_aduan_detail .mpspk-info-section h5 .text-danger { color: var(--mpspk-red) !important; }
body.pg-index #card_aduan_detail .mpspk-info-section .ibox-content { padding: 1rem 1.25rem 1.25rem !important; }
body.pg-index #card_aduan_detail #links { float: none !important; width: 100%; }
body.pg-index #card_aduan_detail #links .col-md-3 { text-align: center; margin-bottom: 1rem; font-size: .75rem; }
body.pg-index #card_aduan_detail #links img {
    width: 100px; height: 100px; object-fit: cover; border-radius: .5rem; border: 1px solid #e7e7e8;
    background: #f8f8f8; transition: border-color .15s ease, box-shadow .15s ease;
}
body.pg-index #card_aduan_detail #links img:hover { border-color: var(--mpspk-green); box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15); }

/* Jadual Senarai Edaran */
body.pg-index #card_aduan_detail #divEdaran .ibox-content { padding: 0 !important; }
body.pg-index #card_aduan_detail .mpspk-edaran-table { margin-bottom: 0; border: 0; }
body.pg-index #card_aduan_detail .mpspk-edaran-table thead th {
    background-color: #f4f6f4; color: var(--mpspk-green-dark); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .04em; border-bottom: 2px solid var(--mpspk-green); padding: .8rem 1rem; white-space: nowrap;
}
body.pg-index #card_aduan_detail .mpspk-edaran-table tbody td { padding: .75rem 1rem; font-size: .875rem; color: #2f3349; border-bottom: 1px solid #eef0f3; }
body.pg-index #card_aduan_detail .mpspk-edaran-table tbody tr:last-child td { border-bottom: 0; }
body.pg-index #card_aduan_detail .mpspk-edaran-table tbody tr:hover { background-color: rgba(27, 122, 67, .035); }


/* =========================================================================
   modules/aduan/aduan_detail_respond_history.cfm, aduan_detail_edaran.cfm, aduan_detail_makluman.cfm,
   aduan_detail_attachment.cfm - kemaskini UI 2026-09-30 (tab-tab di dalam #card_aduan_detail).
   Skop: body.pg-index #card_aduan_detail. Komponen kepala (.mpspk-info-*) & jadual (.mpspk-edaran-table)
   dikongsi dengan blok aduan_detail_info.cfm di atas.
   PERHATIAN: semua komen dalam fail .css ini MESTI ditutup dengan penutup CSS sebenar.
   ========================================================================= */

/* Panel log / lampiran (menggantikan .panel .panel-default / .panel-heading v8) */
body.pg-index #card_aduan_detail .mpspk-info-section.mpspk-panel { margin-top: 1.25rem; }
body.pg-index #card_aduan_detail .mpspk-panel-heading {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.25rem; background-color: #f8f9fa; border-bottom: 1px solid #eef0f3;
    font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mpspk-green-dark);
}
body.pg-index #card_aduan_detail .mpspk-panel-heading .pull-right { float: none; color: var(--mpspk-green); font-size: 1.3rem; line-height: 1; }
body.pg-index #card_aduan_detail .mpspk-panel-heading .pull-right:hover { color: var(--mpspk-green-dark); }
body.pg-index #card_aduan_detail .mpspk-info-section.mpspk-panel > .panel-body { padding: 1rem 1.25rem 1.25rem; }
body.pg-index #card_aduan_detail .mpspk-info-section.mpspk-panel .pull-left { float: none !important; }

/* Panduan ringkas (menggantikan kotak alert kuning) */
body.pg-index #card_aduan_detail .mpspk-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; text-align: left;
    margin: 1rem 0 0; padding: .75rem 1rem; font-size: .8rem; color: #4b4f5a;
    background-color: rgba(201, 154, 46, .08); border: 1px solid rgba(201, 154, 46, .35); border-left: 3px solid var(--mpspk-gold);
    border-radius: .375rem;
}
body.pg-index #card_aduan_detail .mpspk-legend br { display: none; }
body.pg-index #card_aduan_detail .mpspk-legend .text-success { color: var(--mpspk-green-dark) !important; margin-right: .5rem; }
body.pg-index #card_aduan_detail .mpspk-legend .btn { margin-right: .25rem; pointer-events: none; }

/* Jadual edaran / makluman */
body.pg-index #card_aduan_detail .table-responsive:has(> .mpspk-edaran-table) {
    border: 1px solid #e3e6ea; border-radius: .5rem; overflow: hidden; box-shadow: 0 .125rem .5rem rgba(30, 34, 40, .06);
}
body.pg-index #card_aduan_detail .mpspk-edaran-table thead th a.collapse-link {
    display: inline-flex; align-items: center; gap: .3rem; text-transform: none; letter-spacing: 0;
    font-size: .8rem; font-weight: 600; color: var(--mpspk-green); text-decoration: none;
}
body.pg-index #card_aduan_detail .mpspk-edaran-table thead th a.collapse-link:hover { color: var(--mpspk-green-dark); }
body.pg-index #card_aduan_detail .mpspk-edaran-table td .btn { margin: 0 .1rem; }
body.pg-index #card_aduan_detail #tbl_makluman_wrapper .dataTables_length,
body.pg-index #card_aduan_detail #tbl_makluman_wrapper .dataTables_filter,
body.pg-index #card_aduan_detail #tbl_makluman_wrapper .dataTables_info { padding: .6rem 1rem; font-size: .8rem; color: #6f727d; }

/* Garis masa Sejarah Tindakbalas */
body.pg-index #card_aduan_detail .mpspk-tl { position: relative; padding: .5rem 0 .5rem 3.25rem; }
body.pg-index #card_aduan_detail .mpspk-tl::before {
    content: ""; position: absolute; left: 1.2rem; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(to bottom, var(--mpspk-green), #dfe3e8);
}
body.pg-index #card_aduan_detail .mpspk-tl-item { position: relative; margin-bottom: 1.25rem; }
body.pg-index #card_aduan_detail .mpspk-tl-dot {
    position: absolute; left: -3.25rem; top: .25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff;
    border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(27, 122, 67, .18); background-color: var(--mpspk-green);
}
body.pg-index #card_aduan_detail .mpspk-tl-dot.is-info { background-color: #3d8fb5; }
body.pg-index #card_aduan_detail .mpspk-tl-dot.is-warn { background-color: var(--mpspk-gold); }
body.pg-index #card_aduan_detail .mpspk-tl-dot.is-ok { background-color: var(--mpspk-green); }
body.pg-index #card_aduan_detail .mpspk-tl-dot.is-closed { background-color: #5b6b7a; }
body.pg-index #card_aduan_detail .mpspk-tl-dot.is-bad { background-color: var(--mpspk-red); }
body.pg-index #card_aduan_detail .mpspk-tl-card {
    position: relative; background-color: #fff; border: 1px solid #e3e6ea; border-radius: .5rem;
    padding: 1rem 1.25rem; box-shadow: 0 .125rem .5rem rgba(30, 34, 40, .06);
}
body.pg-index #card_aduan_detail .mpspk-tl-card::before {
    content: ""; position: absolute; left: -7px; top: 1rem; width: 12px; height: 12px;
    background: #fff; border-left: 1px solid #e3e6ea; border-bottom: 1px solid #e3e6ea; transform: rotate(45deg);
}
body.pg-index #card_aduan_detail .mpspk-tl-card hr { margin: .6rem 0; }
body.pg-index #card_aduan_detail .mpspk-tl-card p { margin-bottom: .4rem; font-size: .875rem; color: #2f3349; }
body.pg-index #card_aduan_detail .mpspk-tl-card p.text-danger { color: var(--mpspk-red) !important; font-weight: 500; }
body.pg-index #card_aduan_detail .mpspk-tl-card p.text-maroon { color: var(--mpspk-green-dark) !important; font-size: .8rem; font-weight: 600; }
body.pg-index #card_aduan_detail h2.mpspk-tl-status,
body.pg-index #card_aduan_detail h3.mpspk-tl-status {
    margin: 0 0 .15rem; font-size: .95rem; font-weight: 700; letter-spacing: .04em; color: var(--mpspk-green-dark);
}
body.pg-index #card_aduan_detail h4.mpspk-tl-sub { margin: 0; font-size: .85rem; font-weight: 500; color: #6f727d; }
body.pg-index #card_aduan_detail .mpspk-tl-meta {
    display: block; margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed #e6e9ed;
    font-size: .78rem; line-height: 1.5; color: #6f727d;
}
body.pg-index #card_aduan_detail .mpspk-tl-meta .text-success { color: var(--mpspk-green-dark) !important; font-weight: 600; }
body.pg-index #card_aduan_detail .mpspk-tl-summary { background-color: rgba(27, 122, 67, .06); border-color: rgba(27, 122, 67, .3); }
body.pg-index #card_aduan_detail .mpspk-tl-summary::before { background-color: #f1f8f4; border-color: rgba(27, 122, 67, .3); }


/* =========================================================================
   Modal serpihan lama (gaya Bootstrap 3 dimuat melalui shim dalam index.cfm) - 2026-09-30
   Skop: body.pg-index. Modal dipindah ke <body>, jadi selektor guna body.pg-index .modal.
   PERHATIAN: semua komen dalam fail .css ini MESTI ditutup dengan penutup CSS sebenar.
   ========================================================================= */
body.pg-index .modal.inmodal .modal-content { border: 0; border-top: 3px solid var(--mpspk-green); border-radius: .5rem; box-shadow: 0 .5rem 1.5rem rgba(30, 34, 40, .2); }
body.pg-index .modal.inmodal .modal-header { background-color: #f8f9fa; border-bottom: 1px solid #eef0f3; padding: 1rem 1.5rem; display: flex; align-items: center; }
body.pg-index .modal.inmodal .modal-title { color: var(--mpspk-green-dark); font-weight: 700; font-size: 1.05rem; }
body.pg-index .modal.inmodal .modal-header .close {
    margin-left: auto; order: 2; background: none; border: 0; padding: 0 .25rem;
    font-size: 1.6rem; line-height: 1; color: #6f727d; opacity: .8; cursor: pointer;
}
body.pg-index .modal.inmodal .modal-header .close:hover { color: var(--mpspk-red); opacity: 1; }
body.pg-index .modal.inmodal .modal-footer { border-top: 1px solid #eef0f3; }
body.pg-index .modal.inmodal .modal-footer .btn-primary { background-color: var(--mpspk-green); border-color: var(--mpspk-green); }
body.pg-index .modal.inmodal .modal-footer .btn-primary:hover { background-color: var(--mpspk-green-dark); border-color: var(--mpspk-green-dark); }
body.pg-index .modal.inmodal .modal-footer .btn-info { background-color: #fff; border: 1px solid #d4d8de; color: #4b4f5a; }
body.pg-index .modal.inmodal .modal-footer .btn-info:hover { border-color: var(--mpspk-green); color: var(--mpspk-green-dark); }


/* =========================================================================
   modules/aduan/aduan_detail_edaran.cfm - "Senarai Log Edaran" (garis masa dijana JS) - 2026-09-30
   Guna semula komponen .mpspk-tl-* (garis masa Sejarah Tindakbalas); di bawah hanya tambahan khusus log edaran.
   PERHATIAN: semua komen dalam fail .css ini MESTI ditutup dengan penutup CSS sebenar.
   ========================================================================= */
body.pg-index #card_aduan_detail .mpspk-tl-log { padding-top: .25rem; }
body.pg-index #card_aduan_detail .mpspk-tl-log .mpspk-tl-item:last-child { margin-bottom: 0; }
body.pg-index #card_aduan_detail .mpspk-tl-no { font-size: .85rem; font-weight: 700; line-height: 1; }
body.pg-index #card_aduan_detail .mpspk-tl-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem;
}
body.pg-index #card_aduan_detail .mpspk-tl-by { display: flex; flex-direction: column; min-width: 0; }
body.pg-index #card_aduan_detail .mpspk-tl-by-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mpspk-gold);
}
body.pg-index #card_aduan_detail .mpspk-tl-by-name { font-size: .95rem; font-weight: 700; color: var(--mpspk-green-dark); }
body.pg-index #card_aduan_detail .mpspk-tl-badge {
    display: inline-block; margin-left: .35rem; padding: .05rem .5rem; font-size: .7rem; font-weight: 600; vertical-align: .08em;
    color: var(--mpspk-green-dark); background-color: rgba(27, 122, 67, .1); border: 1px solid rgba(27, 122, 67, .25); border-radius: 1rem;
}
body.pg-index #card_aduan_detail .mpspk-tl-chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
body.pg-index #card_aduan_detail .mpspk-tl-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; font-size: .75rem; font-weight: 500;
    color: #4b4f5a; background-color: #f4f6f8; border: 1px solid #e3e6ea; border-radius: .375rem; white-space: nowrap;
}
body.pg-index #card_aduan_detail .mpspk-tl-chip i { font-size: .95rem; color: var(--mpspk-green); }
body.pg-index #card_aduan_detail .mpspk-tl-chip-due { background-color: rgba(201, 154, 46, .1); border-color: rgba(201, 154, 46, .4); }
body.pg-index #card_aduan_detail .mpspk-tl-chip-due i { color: var(--mpspk-gold); }
body.pg-index #card_aduan_detail .mpspk-tl-note { margin: .75rem 0 0; padding-top: .6rem; border-top: 1px dashed #e6e9ed; font-size: .85rem; color: #2f3349; }
body.pg-index #card_aduan_detail .mpspk-tl-note + .mpspk-tl-note { margin-top: .4rem; padding-top: 0; border-top: 0; }
body.pg-index #card_aduan_detail .mpspk-tl-remark { color: #6f727d; font-style: italic; }
body.pg-index #card_aduan_detail .mpspk-tl-empty {
    display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1.5rem; color: #6f727d; font-size: .9rem;
}
body.pg-index #card_aduan_detail .mpspk-tl-empty i { font-size: 1.5rem; color: #adb1ba; }


/* =========================================================================
   Senarai Lampiran (aduan_detail_info.cfm & aduan_detail_attachment.cfm) - grid 4 lampiran sebaris +
   pelihat gambar skrin penuh (#mpspk_gviewer, skrip dalam index.cfm) - 2026-09-30
   PERHATIAN: semua komen dalam fail .css ini MESTI ditutup dengan penutup CSS sebenar.
   ========================================================================= */
body.pg-index #card_aduan_detail .mpspk-attach-wrap { float: none !important; width: 100%; }
body.pg-index #card_aduan_detail .mpspk-attach-grid4 {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; width: 100%;
}
@media (max-width: 991.98px) { body.pg-index #card_aduan_detail .mpspk-attach-grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { body.pg-index #card_aduan_detail .mpspk-attach-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.pg-index #card_aduan_detail .mpspk-attach-grid4 > .col-md-3 {
    float: none; width: auto; max-width: none; padding: .75rem; margin: 0; text-align: center;
    background-color: #fff; border: 1px solid #e3e6ea; border-radius: .5rem; font-size: .78rem; color: #4b4f5a;
    transition: border-color .15s ease, box-shadow .15s ease; overflow: hidden;
}
body.pg-index #card_aduan_detail .mpspk-attach-grid4 > .col-md-3:hover { border-color: var(--mpspk-green); box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .12); }
body.pg-index #card_aduan_detail .mpspk-attach-grid4 > .col-md-3 > a { display: block; cursor: zoom-in; margin-bottom: .5rem; }
body.pg-index #card_aduan_detail .mpspk-attach-grid4 > .col-md-3 .col-md-12 { width: 100%; max-width: none; padding: 0; float: none; word-break: break-all; line-height: 1.3; }
body.pg-index #card_aduan_detail #links img.mpspk-attach-thumb,
body.pg-index #card_aduan_detail .mpspk-attach-grid4 img.mpspk-attach-thumb {
    width: 100%; height: 150px; object-fit: cover; border-radius: .375rem; border: 1px solid #e7e7e8; background: #f8f8f8; display: block;
}
body.pg-index #card_aduan_detail .mpspk-attach-grid4 > .col-md-3 .col-md-12 > span[onclick] { color: var(--mpspk-green-dark); font-weight: 600; }

/* Pelihat gambar skrin penuh */
#mpspk_gviewer { position: fixed; inset: 0; z-index: 200000; background: rgba(8, 14, 11, .94); display: none; flex-direction: column; }
#mpspk_gviewer.show { display: flex; }
#mpspk_gviewer .gvw-bar { display: flex; justify-content: center; gap: .5rem; padding: .75rem; z-index: 3; }
#mpspk_gviewer .gvw-bar button {
    width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff;
    font-size: 1.3rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease;
}
#mpspk_gviewer .gvw-bar button:hover { background: var(--mpspk-green); }
#mpspk_gviewer .gvw-bar button[data-a="close"]:hover { background: var(--mpspk-red); }
#mpspk_gviewer .gvw-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; touch-action: none; }
#mpspk_gviewer .gvw-stage.drag { cursor: grabbing; }
#mpspk_gviewer .gvw-stage img { max-width: 92vw; max-height: 78vh; user-select: none; transition: transform .12s ease; box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .5); }
#mpspk_gviewer .gvw-stage.drag img { transition: none; }
#mpspk_gviewer .gvw-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.6rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
#mpspk_gviewer .gvw-nav:hover { background: var(--mpspk-green); }
#mpspk_gviewer .gvw-prev { left: 1rem; }
#mpspk_gviewer .gvw-next { right: 1rem; }
#mpspk_gviewer.single .gvw-nav { display: none; }
#mpspk_gviewer .gvw-cap { display: flex; justify-content: center; gap: .75rem; padding: .6rem 1rem 1rem; color: #dfe5e1; font-size: .85rem; z-index: 3; }
#mpspk_gviewer .gvw-cnt { color: var(--mpspk-gold-light); font-weight: 600; }

/* =========================================================================
   modules/report/*.cfm (hasil laporan) - kemaskini UI 2026-10-03
   Guna kad .mpspk-stat-card & jadual .mpspk-stat-table (blok statistik di atas) melalui komponen kongsi
   modules/report/_rpt_open.cfm + _rpt_close.cfm. Kelas tambahan khusus laporan:
   .rpt-total-row (baris jumlah dlm tbody) dan .rpt-legend (keterangan petunjuk di bawah jadual).
   ========================================================================= */
body.pg-index .mpspk-stat-table tr.rpt-total-row td {
    background-color: rgba(27, 122, 67, .08);
    color: var(--mpspk-green-dark);
    font-weight: 700;
    border-top: 2px solid var(--mpspk-green);
    border-bottom-color: rgba(27, 122, 67, .18);
}
body.pg-index .mpspk-stat-table tbody tr:not([class]):hover td { background-color: rgba(27, 122, 67, .05); }
body.pg-index .mpspk-stat-table td .stat-go-icon { flex-shrink: 0; }
body.pg-index .rpt-legend {
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    text-align: center;
    font-size: .8125rem;
    line-height: 1.6;
    color: #5b4a1a;
    background-color: rgba(201, 162, 74, .10);
    border: 1px dashed rgba(201, 162, 74, .55);
    border-radius: .5rem;
}

/* --- serpihan: modules/archive_doc/archive_list.cfm (2026-10-04, arahan pengguna: "kemaskini UI ... selari dgn page lain").
   Reka bentuk jadual "formal/korporat" SAMA seperti blok #tbl_main_area/#tbl_sub_area, diskop kpd #tbl_archive/#card_archive. */
body.pg-index #tbl_archive {
    --bs-table-striped-bg: rgba(27, 122, 67, .035);
    --bs-table-hover-bg: rgba(27, 122, 67, .09);
    font-size: .875rem;
}
body.pg-index #tbl_archive thead th {
    background-color: var(--mpspk-green-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    padding-left: .75rem;
    vertical-align: middle;
}
body.pg-index #tbl_archive thead th:first-child { border-top-left-radius: .5rem; padding-left: 1rem; }
body.pg-index #tbl_archive thead th:last-child { border-top-right-radius: .5rem; }
body.pg-index #tbl_archive tbody tr { transition: background-color .12s ease; cursor: pointer; }
body.pg-index #tbl_archive tbody td {
    padding: .75rem .75rem;
    border-bottom-color: #eef0f3;
    vertical-align: middle;
}
body.pg-index #tbl_archive tbody tr:last-child td { border-bottom: none; }
body.pg-index #card_archive {
    border: none;
    box-shadow: 0 .1875rem .75rem rgba(30, 34, 40, .08);
}
body.pg-index #card_archive .mpspk-card-title-icon {
    color: var(--mpspk-green);
    margin-right: .45rem;
    font-size: 1.05rem;
    vertical-align: -.05em;
}
body.pg-index #archive_filter .btn.btn-mpspk-green { color: #fff; }
body.pg-index #tbl_archive_wrapper .dataTables_length,
body.pg-index #tbl_archive_wrapper .dataTables_filter,
body.pg-index #tbl_archive_wrapper .dataTables_info {
    color: #6f727d;
    font-size: .8125rem;
}
body.pg-index #tbl_archive_wrapper .dataTables_length select,
body.pg-index #tbl_archive_wrapper .dataTables_filter input { border-radius: .5rem; }
body.pg-index #tbl_archive_wrapper .dataTables_filter input:focus {
    border-color: var(--mpspk-green);
    box-shadow: 0 0 0 .15rem rgba(27, 122, 67, .15);
}
body.pg-index #tbl_archive_wrapper .dataTables_paginate .page-link {
    border-radius: .5rem;
    margin-inline-start: .2rem;
    color: #4b4f5a;
}
body.pg-index #tbl_archive_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--mpspk-green);
    border-color: var(--mpspk-green);
    color: #fff;
}
body.pg-index #tbl_archive_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(27, 122, 67, .1);
    color: var(--mpspk-green-dark);
    border-color: rgba(27, 122, 67, .25);
}

/* Carian Global (modules/global_search/global_list.cfm) - lencana status & lajur rujukan */
body.pg-index #tbl_global_search tbody td .badge { font-size: .72rem; font-weight: 700; }
body.pg-index #tbl_global_search .gs-ref { font-family: Consolas, monospace; font-weight: 700; color: var(--mpspk-green-dark); }
body.pg-index #tbl_global_search tbody tr { cursor: pointer; }

/* Pengepala halaman + breadcrumb (modules/profile/profile.cfm) */
.mpspk-page-head { background: #fff; border: 1px solid #e6e9e7; border-left: 4px solid var(--mpspk-green-dark, #1b7a43); border-radius: .5rem; padding: .85rem 1.15rem; box-shadow: 0 2px 6px rgba(27, 122, 67, .06); }
.mpspk-page-head-icon { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; background: rgba(27, 122, 67, .12); color: var(--mpspk-green-dark, #1b7a43); font-size: 1.5rem; flex-shrink: 0; }
.mpspk-page-head-title { font-weight: 700; letter-spacing: .01em; color: #2f3b34; }
.mpspk-breadcrumb { font-size: .8rem; flex-wrap: wrap; }
.mpspk-breadcrumb .breadcrumb-item, .mpspk-breadcrumb .breadcrumb-item a { color: #6c7a72; }
.mpspk-breadcrumb .breadcrumb-item a { display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; }
.mpspk-breadcrumb .breadcrumb-item a:hover { color: var(--mpspk-green-dark, #1b7a43); }
.mpspk-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; font-size: 1rem; line-height: 1; color: #aab4ae; }
.mpspk-breadcrumb .breadcrumb-item.active { color: var(--mpspk-green-dark, #1b7a43); font-weight: 600; }


/* ===== modules/aduan/new_makluman.cfm (modal Tambah Makluman) ===== */
#modalMakluman .modal-content, #modalMaklumanRegister .modal-content { border: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(20,40,30,.25); }
#modalMakluman .nm-header, #modalMaklumanRegister .nm-header { position: relative; padding: 18px 26px; color: #fff;
    background: linear-gradient(135deg, var(--mpspk-green-dark, #14513a), var(--mpspk-green, #1e6b4a)); border-bottom: 3px solid var(--mpspk-gold, #b8924a); }
#modalMakluman .nm-header .close, #modalMaklumanRegister .nm-header .close { position: absolute; top: 16px; right: 20px; color: #fff; opacity: .8; text-shadow: none; font-size: 26px; }
#modalMakluman .nm-header .close:hover, #modalMaklumanRegister .nm-header .close:hover { opacity: 1; }
#modalMakluman .nm-kicker, #modalMaklumanRegister .nm-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; opacity: .8; }
#modalMakluman .nm-title, #modalMaklumanRegister .nm-title { margin: 4px 0 0; font-size: 20px; font-weight: 600; color: #fff; }
#modalMakluman .modal-body, #modalMaklumanRegister .modal-body { padding: 22px 26px; }
#modalMakluman .nm-guide-wrap, #modalMaklumanRegister .nm-guide-wrap { display: flex; justify-content: flex-end; margin: 0 0 16px; }
#modalMakluman .nm-guide-btn, #modalMaklumanRegister .nm-guide-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; font-size: 13px; font-weight: 600;
    color: #fff !important; background: var(--mpspk-green, #1e6b4a) !important; border: 1px solid var(--mpspk-green, #1e6b4a) !important;
    border-left: 4px solid var(--mpspk-gold, #b8924a) !important; border-radius: 4px; box-shadow: 0 2px 6px rgba(30,107,74,.25);
}
#modalMakluman .nm-guide-btn:hover, #modalMaklumanRegister .nm-guide-btn:hover { background: var(--mpspk-green-dark, #14513a) !important; }
#modalMakluman .nm-section-title, #modalMaklumanRegister .nm-section-title { margin: 0 0 14px; padding-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.1px;
    text-transform: uppercase; color: var(--mpspk-green-dark, #14513a); border-bottom: 1px solid #e3e8e5; }
#modalMakluman .nm-section-title i, #modalMaklumanRegister .nm-section-title i { margin-right: 6px; color: var(--mpspk-gold, #b8924a); }
#modalMakluman .form-group, #modalMaklumanRegister .form-group { margin-bottom: 14px; }
#modalMakluman .control-label, #modalMaklumanRegister .control-label { color: #6b7873; font-size: 12.5px; font-weight: 600; text-align: left; padding-top: 8px; }
#modalMakluman .form-control, #modalMaklumanRegister .form-control { border-color: #d5dcd8; border-radius: 4px; box-shadow: none; font-size: 13px; }
#modalMakluman .form-control:focus, #modalMaklumanRegister .form-control:focus { border-color: var(--mpspk-green, #1e6b4a); box-shadow: 0 0 0 3px rgba(30,107,74,.12); }
#modalMakluman .document-editor, #modalMaklumanRegister .document-editor { border: 1px solid #d5dcd8; border-radius: 4px; overflow: hidden; }
#modalMakluman .toolbar-container, #modalMaklumanRegister .toolbar-container { border-bottom: 1px solid #e3e8e5; background: #f6f8f7; }
#modalMakluman .content-container, #modalMaklumanRegister .content-container { padding: 4px; }
#modalMakluman .modal-footer, #modalMaklumanRegister .modal-footer { background: #f6f8f7; border-top: 1px solid #e3e8e5; padding: 14px 26px; }
#modalMakluman .modal-footer .btn, #modalMaklumanRegister .modal-footer .btn { min-width: 100px; padding: 7px 18px; border-radius: 4px; font-weight: 600; }
#modalMakluman .modal-footer .btn-primary, #modalMaklumanRegister .modal-footer .btn-primary { background: var(--mpspk-green, #1e6b4a); border-color: var(--mpspk-green, #1e6b4a); }
#modalMakluman .modal-footer .btn-primary:hover, #modalMaklumanRegister .modal-footer .btn-primary:hover { background: var(--mpspk-green-dark, #14513a); border-color: var(--mpspk-green-dark, #14513a); }
#modalMakluman .modal-footer .btn-white, #modalMaklumanRegister .modal-footer .btn-white { background: #fff; border: 1px solid #c9d1cd; color: #2f3a36; }
#modalMakluman .modal-footer .btn-white:hover, #modalMaklumanRegister .modal-footer .btn-white:hover { background: #eef2f0; }

/* modal panduan ringkas (muncul di hadapan modal makluman) */
#pg_makluman_modal .modal-content { border: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(20,40,30,.25); }
#pg_makluman_modal .pg-header { position: relative; padding: 18px 26px; color: #fff;
    background: linear-gradient(135deg, var(--mpspk-green-dark, #14513a), var(--mpspk-green, #1e6b4a)); border-bottom: 3px solid var(--mpspk-gold, #b8924a); }
#pg_makluman_modal .pg-header .close { position: absolute; top: 16px; right: 20px; color: #fff; opacity: .8; text-shadow: none; font-size: 26px; }
#pg_makluman_modal .pg-kicker { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; opacity: .8; }
#pg_makluman_modal .pg-title { margin: 4px 0 0; font-size: 20px; font-weight: 600; color: #fff; }
#pg_makluman_modal .pg-body { padding: 18px 26px; }
#pg_makluman_modal .pg-step { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid #e3e8e5; }
#pg_makluman_modal .pg-step:last-child { border-bottom: 0; }
#pg_makluman_modal .pg-step-num { flex: 0 0 24px; height: 24px; line-height: 24px; text-align: center; font-size: 12px; font-weight: 700;
    color: #fff; background: var(--mpspk-green, #1e6b4a); border-radius: 50%; }
#pg_makluman_modal .pg-step-name { font-weight: 600; color: #2f3a36; font-size: 13.5px; }
#pg_makluman_modal .pg-step-desc { color: #6b7873; font-size: 12.5px; margin-top: 2px; }
#pg_makluman_modal .pg-note { margin: 14px 0 0; padding: 10px 14px; font-size: 12.5px; color: #8a6d3b; background: #fcf4e3; border: 1px solid #f0e2bd; border-left: 4px solid var(--mpspk-gold, #b8924a); border-radius: 4px; }
#pg_makluman_modal .modal-footer { background: #f6f8f7; border-top: 1px solid #e3e8e5; padding: 12px 26px; }