/* ------------------------------------------------------------------
   Tab moden e-Tauliah
   Digunakan pada skrin permohonan (urusetia dan pemohon), tauliah khas,
   profil dan tetapan. Dimuatkan selepas style.css supaya menimpa tema.
   ------------------------------------------------------------------ */

.nav-tabs,
.canvas-alt-tabs {
    --tab-warna: #1d4ed8;
    --tab-warna-cerah: #3b82f6;

    display: flex;
    flex-wrap: nowrap;
    gap: .3rem;
    padding: .3rem;
    margin-bottom: 1.25rem !important;

    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;

    /* Tab boleh menatal mendatar apabila terlalu banyak, supaya ia tidak
       melimpah ke baris kedua atau memaksa halaman menatal. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs::-webkit-scrollbar,
.canvas-alt-tabs::-webkit-scrollbar {
    height: 5px;
}

.nav-tabs::-webkit-scrollbar-thumb,
.canvas-alt-tabs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 99px;
}

.nav-tabs > .nav-item,
.canvas-alt-tabs > .nav-item {
    flex: 1 1 auto;
    margin: 0;
    border: 0;
    min-width: max-content;
}

.nav-tabs .nav-link,
.canvas-alt-tabs .nav-link {
    width: 100%;
    height: 100%;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;

    padding: .5rem .95rem !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;

    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .01em;
    color: #475569 !important;
    text-align: center;
    white-space: nowrap;

    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.nav-tabs .nav-link:hover,
.canvas-alt-tabs .nav-link:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.nav-tabs .nav-link.active,
.canvas-alt-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--tab-warna) 0%, var(--tab-warna-cerah) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px -8px var(--tab-warna);
}

.nav-tabs .nav-link:focus-visible,
.canvas-alt-tabs .nav-link:focus-visible {
    outline: 2px solid var(--tab-warna);
    outline-offset: 2px;
}

/* Tema Canvas meletakkan sempadan bawah pada tab aktif; matikan supaya
   tiada garis berganda dengan gaya baharu. */
.nav-tabs .nav-link.active::after,
.canvas-alt-tabs .nav-link.active::after,
.tabs-alt .nav-link.active::after {
    display: none !important;
}

.tab-content {
    padding-top: .25rem;
}

@media (max-width: 575.98px) {
    .nav-tabs .nav-link,
    .canvas-alt-tabs .nav-link {
        font-size: .74rem;
        padding: .45rem .7rem !important;
        min-height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-tabs .nav-link,
    .canvas-alt-tabs .nav-link {
        transition: none;
    }
}

/* ------------------------------------------------------------------
   Bahagian dalam tab Keputusan Tauliah
   Setiap bahagian dalam kadnya sendiri supaya sempadan antara maklumat
   temuduga, keputusan, carian fail, rayuan dan bayaran jelas kelihatan.
   ------------------------------------------------------------------ */

.kad-bahagian {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 30, 60, .05);
    padding: 1.1rem 1.25rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
}

/* Tajuk bahagian: jalur biru di kiri dan garis pemisah di bawah. */
.kad-bahagian > h2:first-child,
.kad-bahagian > h3:first-child {
    position: relative;
    margin: -1.1rem -1.25rem 1rem -1.25rem;
    padding: .7rem 1.25rem .7rem 1.6rem;
    border-bottom: 1px solid #eef1f6;
    background: #f7f9fc;
    border-radius: 12px 12px 0 0;
    font-size: .9rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #0b2d5c;
}

.kad-bahagian > h2:first-child::before,
.kad-bahagian > h3:first-child::before {
    content: "";
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.1rem;
    border-radius: 2px;
    background: linear-gradient(180deg, #0b2d5c 0%, #2a5ea8 100%);
}

/* Jadual dalam bahagian menatal sendiri pada skrin sempit. */
/* Jadual di mana-mana aras dalam bahagian, bukan anak terus sahaja:
   jadual bayaran berada tiga aras ke dalam dan sebelum ini terlepas. */
.kad-bahagian table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

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

/* Imej dalam bahagian - contohnya kod QR bayaran - tidak melebihi
   lebar skrin. */
.kad-bahagian img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .kad-bahagian table {
        display: table;
        white-space: normal;
    }
}

@media (max-width: 575.98px) {
    .kad-bahagian {
        padding: .9rem 1rem 1rem 1rem;
    }

    .kad-bahagian > h2:first-child,
    .kad-bahagian > h3:first-child {
        margin: -.9rem -1rem .8rem -1rem;
        padding-left: 1.4rem;
    }
}

/* ==================================================================
   Gaya bahagian sejagat
   Hanya paparan: tiada markup atau logik yang diubah. Halaman kuiz
   dikecualikan atas permintaan, melalui atribut data-halaman pada body.
   ================================================================== */

body:not([data-halaman^="quiz"]) #content h2.text-transform-none,
body:not([data-halaman^="quiz"]) #content h3.text-transform-none {
    position: relative;
    padding: .65rem .9rem .65rem 1.5rem;
    margin-bottom: 1rem;
    background: #f7f9fc;
    border: 1px solid #e6ebf3;
    border-radius: 10px;
    font-size: .92rem !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    color: #0b2d5c;
}

body:not([data-halaman^="quiz"]) #content h2.text-transform-none::before,
body:not([data-halaman^="quiz"]) #content h3.text-transform-none::before {
    content: "";
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.05rem;
    border-radius: 2px;
    background: linear-gradient(180deg, #0b2d5c 0%, #2a5ea8 100%);
}

/* Kepala jadual senarai: lebih jelas tanpa mengubah rangka jadual.
   border-collapse sengaja tidak disentuh kerana banyak jadual
   menggunakan table-bordered, dan menukarnya akan menggandakan
   sempadan setiap sel. */
body:not([data-halaman^="quiz"]) #content table.table > thead th {
    background: #f7f9fc;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #445069;
    vertical-align: middle;
}

body:not([data-halaman^="quiz"]) #content table.table > tbody td {
    vertical-align: middle;
}

/* Ruang antara bahagian supaya kandungan tidak berhimpit. */
body:not([data-halaman^="quiz"]) #content form + h2.text-transform-none,
body:not([data-halaman^="quiz"]) #content table + h2.text-transform-none,
body:not([data-halaman^="quiz"]) #content table + h3.text-transform-none,
body:not([data-halaman^="quiz"]) #content .table-responsive + h2.text-transform-none,
body:not([data-halaman^="quiz"]) #content .table-responsive + h3.text-transform-none {
    margin-top: 1.75rem;
}

/* Tajuk di dalam kad bahagian mengekalkan gayanya sendiri. */
body #content .kad-bahagian > h2.text-transform-none,
body #content .kad-bahagian > h3.text-transform-none {
    border: 0;
    border-bottom: 1px solid #eef1f6;
    border-radius: 12px 12px 0 0;
}

@media (max-width: 575.98px) {
    body:not([data-halaman^="quiz"]) #content h2.text-transform-none,
    body:not([data-halaman^="quiz"]) #content h3.text-transform-none {
        font-size: .84rem !important;
        padding-left: 1.35rem;
    }
}