/* ------------------------------------------------------------------
   Pembetulan paparan responsif e-Tauliah
   Dimuatkan selepas style.css dan custom.css supaya menimpa tema.
   ------------------------------------------------------------------

   Masalah: #header-wrap ialah position:fixed dengan height:auto, manakala
   ruang untuk header ditempah oleh .header-wrap-clone yang tingginya tetap
   (var(--cnvs-header-height)). Apabila menu utama melimpah ke baris kedua,
   header menjadi lebih tinggi daripada ruang yang ditempah lalu menutup
   tajuk halaman di bawahnya.

   Penyelesaian di sini: kecilkan jarak menu supaya ia kekal satu baris.
   js/responsif.js pula menyelaraskan tinggi ruang tempahan jika ia tetap
   melimpah (contohnya apabila pengguna membesarkan zum pelayar).
*/

/* Menu utama mempunyai label panjang: CARIAN PENCERAMAH, PENTADBIR SISTEM.
   Guna pembolehubah tema supaya jarak dan saiz teks mengecil dengan kemas. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    #header {
        --cnvs-primary-menu-padding-x: 8px;
        --cnvs-primary-menu-font-size: .82rem;
    }

    #header .menu-container > .menu-item > .menu-link {
        padding-left: 8px;
        padding-right: 8px;
        font-size: .82rem;
    }

    #header #logo img {
        max-height: 62px;
        width: auto;
    }
}

@media (min-width: 1200px) and (max-width: 1319.98px) {
    #header {
        --cnvs-primary-menu-padding-x: 5px;
        --cnvs-primary-menu-font-size: .74rem;
    }

    #header .menu-container > .menu-item > .menu-link {
        padding-left: 5px;
        padding-right: 5px;
        font-size: .74rem;
    }
}

/* Jalur tajuk halaman: padding dan saiz tajuk mengikut lebar skrin supaya
   tajuk tidak terpotong pada skrin sederhana atau ketika zum dibesarkan. */
#page-title,
.page-title {
    --cnvs-page-title-padding: clamp(1.5rem, 3.2vw, 4rem);
}

.page-title-row {
    min-height: 0;
}

.page-title-content h1,
.page-title-content .h1 {
    font-size: clamp(1.2rem, .9rem + 1.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Kandungan utama: kurangkan padding tepi pada skrin kecil. */
@media (max-width: 767.98px) {
    #content .container-fluid.px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Tajuk halaman sejajar dengan kandungan di bawahnya. Setiap halaman
   membalut tajuknya dalam container-fluid > row > col, jadi gutter
   bersarang itu ditanggalkan supaya tajuk rapat ke kiri. */
.page-title-row .container-fluid,
.page-title-row .row {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.page-title-row .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Padding tepi sama seperti kandungan pada skrin kecil. */
@media (max-width: 767.98px) {
    .page-title > .container-fluid.px-5,
    #page-title > .container-fluid.px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Jalur tajuk: jejak diletak di kanan bawah TANPA mengambil ruang dalam
   susunan jalur - jadi ketinggian jalur tajuk tetap ditentukan oleh tajuk
   sahaja, sama seperti sebelum jejak ditambah. */
.jalur-tajuk {
    position: relative;
}

.jalur-tajuk-utama {
    width: 100%;
}

@media (min-width: 768px) {
    .jejak-halaman {
        position: absolute;
        right: 0;
        bottom: 0;
        max-width: 45%;
    }
}

.jejak-senarai {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .8rem;
    line-height: 1.4;
}

.jejak-aras {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .6);
}

.jejak-aras + .jejak-aras::before {
    content: "\203A";
    margin: 0 .45rem;
    color: rgba(255, 255, 255, .35);
    font-size: .95rem;
    line-height: 1;
}

.jejak-aras a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .15s ease;
}

.jejak-aras a:hover,
.jejak-aras a:focus {
    color: #fff;
    text-decoration: underline;
}

.jejak-semasa {
    color: #fff;
    font-weight: 600;
}

/* Skrin kecil: jejak berada di bawah tajuk, mengikut susunan tema. */
@media (max-width: 767.98px) {
    .jejak-halaman {
        margin-top: .35rem;
    }

    .jejak-senarai {
        justify-content: center;
        font-size: .72rem;
    }
}

/* Kod QR dalam senarai sesi: saiz tetap supaya sama pada semua modul.
   Tanpa saiz, imej SVG mengisi lebar sel - jadi jadual berlajur sedikit
   memaparkan kod QR jauh lebih besar daripada jadual berlajur banyak. */
.qr-senarai {
    width: 80px;
    height: 80px;
}

/* ==================================================================
   Menu atas
   Hanya paparan: dibuat melalui pemboleh ubah tema dan gaya CSS,
   tiada markup menu yang disentuh.
   ================================================================== */

:root {
    --cnvs-primary-menu-color: #16233a;
    --cnvs-primary-menu-hover-color: #0b2d5c;
    --cnvs-primary-menu-active-color: #0b2d5c;
    --cnvs-primary-menu-font-size: .82rem;
    --cnvs-primary-menu-font-weight: 600;
    --cnvs-primary-menu-ls: .04em;
    --cnvs-primary-menu-padding-x: 1rem;
    --cnvs-primary-menu-submenu-hover-bg: #f2f6fc;
    --cnvs-primary-menu-submenu-hover-color: #0b2d5c;
    --cnvs-primary-menu-submenu-font-size: .82rem;
}

#header {
    border-bottom: 1px solid #e6ebf3;
    box-shadow: 0 1px 3px rgba(15, 30, 60, .04);
}

/* Nama menu kekal satu baris; sebelum ini "Carian Penceramah" pecah
   kepada dua baris dan menjadikan ketinggian menu tidak sekata. */
.primary-menu .menu-container > .menu-item > .menu-link {
    position: relative;
    white-space: nowrap;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}

.primary-menu .menu-container > .menu-item > .menu-link > div {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Penanda halus di bawah item semasa dan ketika tuding. */
.primary-menu .menu-container > .menu-item > .menu-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .35rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0b2d5c 0%, #2a5ea8 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
}

.primary-menu .menu-container > .menu-item:hover > .menu-link::after,
.primary-menu .menu-container > .menu-item.current > .menu-link::after {
    transform: scaleX(1);
}

.primary-menu .menu-container > .menu-item:hover > .menu-link {
    background-color: #f7f9fc;
}

/* Menu lungsur: bucu bulat dan bayang lembut. */
.primary-menu .sub-menu-container {
    border-radius: 10px;
    border: 1px solid #e6ebf3;
    box-shadow: 0 10px 24px -12px rgba(15, 30, 60, .35);
    padding: .35rem;
    overflow: hidden;
}

.primary-menu .sub-menu-container .menu-link {
    border-radius: 7px;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

@media (min-width: 1200px) {
    #header .header-row .menu-container {
        align-items: center;
    }
}

/* Skrin kecil: menu lungsur penuh lebar, tanpa bayang berganda. */
@media (max-width: 1199.98px) {
    .primary-menu .sub-menu-container {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .primary-menu .menu-container > .menu-item > .menu-link::after {
        display: none;
    }

    .primary-menu .menu-container > .menu-item > .menu-link {
        white-space: normal;
    }
}

/* ==================================================================
   Menu atas berlatar biru gelap
   Logo diberi latar putih kerana fail logo itu sendiri berlatar putih
   dan akan kelihatan sebagai petak putih di atas latar gelap.
   ================================================================== */

:root {
    /* Sama seperti latar jalur tajuk halaman supaya kedua-duanya
       bercantum tanpa garis pemisah. */
    --menu-latar: #011232;
    --menu-latar-tua: #010b1f;
    --menu-teks: #ffffff;
}

#header,
#header #header-wrap {
    background: var(--menu-latar);
    border-bottom: 0;
    box-shadow: none;
}

#header #logo {
    padding: .3rem 0;
}

#header #logo a {
    display: inline-block;
    background: #ffffff;
    border-radius: 10px;
    padding: .3rem .55rem;
    line-height: 0;
}

/* Teks menu utama */
.primary-menu .menu-container > .menu-item > .menu-link,
.primary-menu .menu-container > .menu-item > .menu-link > div,
#header .header-misc,
#header .header-misc a {
    color: var(--menu-teks);
}

.primary-menu .menu-container > .menu-item:hover > .menu-link,
.primary-menu .menu-container > .menu-item.current > .menu-link {
    color: var(--menu-teks);
    background-color: rgba(255, 255, 255, .1);
}

/* Penanda putih di bawah item semasa dan ketika tuding. */
.primary-menu .menu-container > .menu-item > .menu-link::after {
    background: #ffffff;
}

/* Ikon dalam menu mengikut warna teks. */
#header .menu-link i,
#header .header-row i {
    color: inherit;
}

/* Butang menu telefon */
#header .cnvs-hamburger-inner,
#header .cnvs-hamburger-inner::before,
#header .cnvs-hamburger-inner::after {
    background-color: var(--menu-teks);
}

/* ---------------- Menu lungsur kekal putih ---------------- */

.primary-menu .sub-menu-container {
    background: #ffffff;
    border: 1px solid #e6ebf3;
    box-shadow: 0 12px 26px -14px rgba(8, 24, 48, .45);
}

.primary-menu .sub-menu-container .menu-link,
.primary-menu .sub-menu-container .menu-link > div {
    color: #16233a;
}

.primary-menu .sub-menu-container .menu-item:hover > .menu-link,
.primary-menu .sub-menu-container .menu-item:hover > .menu-link > div {
    background-color: #f2f6fc;
    color: #0b2d5c;
}

/* Penanda tidak diperlukan dalam menu lungsur. */
.primary-menu .sub-menu-container .menu-link::after {
    display: none;
}

/* ---------------- Skrin kecil ---------------- */

@media (max-width: 1199.98px) {
    /* Menu terbuka dipaparkan sebagai panel putih supaya senarai panjang
       kekal mudah dibaca. */
    .primary-menu .menu-container {
        background: #ffffff;
        border-radius: 10px;
        margin-bottom: .75rem;
    }

    .primary-menu .menu-container > .menu-item > .menu-link,
    .primary-menu .menu-container > .menu-item > .menu-link > div {
        color: #16233a;
    }

    .primary-menu .menu-container > .menu-item:hover > .menu-link {
        background-color: #f2f6fc;
        color: #0b2d5c;
    }

    .primary-menu .sub-menu-container {
        box-shadow: none;
        border: 0;
    }
}

/* ==================================================================
   Jadual pada skrin sempit
   Jadual senarai mempunyai sehingga sebelas lajur. Tanpa penatalan
   sendiri, ia menjadikan keseluruhan halaman lebih lebar daripada
   skrin, dan setiap bahagian lain terseret ke tepi.
   ================================================================== */

@media (max-width: 991.98px) {

    #content table.table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Jadual DataTables dibalut oleh pembungkusnya sendiri. */
    #content .dataTables_wrapper {
        overflow-x: auto;
    }

    /* Kawalan "Show entries" dan "Search" dibenarkan turun baris. */
    #content .dataTables_wrapper .row {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    #content .dataTables_length,
    #content .dataTables_filter {
        white-space: normal;
    }

    #content .dataTables_filter input {
        max-width: 100%;
    }

    /* Bekas flex dan lajur grid mengekang anaknya secara lalai, jadi
       jadual di dalamnya tidak dapat menatal tanpa kebenaran ini. */
    #content .d-flex > *,
    #content .row > [class*="col-"] {
        min-width: 0;
    }

    /* Imej dalam jadual - kod QR sesi - kekal dalam lebar selnya. */
    #content table.table img {
        max-width: 100%;
        height: auto;
    }

    /* Butang tindakan tidak memanjangkan baris secara berlebihan. */
    #content table.table .btn {
        white-space: nowrap;
    }
}

/* Kawalan borang tidak melebihi lebar skrin walaupun lebarnya ditetapkan
   secara terus dalam paparan. */
@media (max-width: 991.98px) {
    #content input,
    #content select,
    #content textarea,
    #content .form-label,
    #content label {
        max-width: 100%;
    }

    #content .d-inline-flex {
        flex-wrap: wrap;
    }

    /* Butang bertindan menegak apabila tiada ruang. */
    #content .d-flex.justify-content-end {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: .5rem;
    }
}