/* ------------------------------------------------------------------
   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;
    }
}