/* ─── UCIDOS overrides (dimuat selepas style.bundle.css) ─────────────────── */

/* Senarai tugasan: lajur Tajuk Projek.
   Tajuk panjang dulu memerah lajur sempit (min-w-150px) jadi berpuluh baris
   pada skrin laptop. Bagi lajur lebar munasabah & hadkan 4 baris — tajuk
   penuh dalam tooltip (atribut title). */
.td-project-title {
    min-width: 260px;
    max-width: 420px;
}
.td-project-title > .project-title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Header satu baris — setiap lajur sekurang-kurangnya selebar headernya,
   jadi lajur pendek (tarikh, daerah, jarak) tak lagi dipecah. Sel data tak
   dipaksa nowrap supaya lajur Catatan / jadual bersarang masih boleh balut. */
table:has(.td-project-title) th {
    white-space: nowrap;
}

/* Sidebar: penunjuk dropdown pada menu accordion (cth. Dashboard).
   Tema sembunyikan .menu-arrow dalam sidebar, jadi guna chevron SVG sendiri
   (gaya sama dengan .sp-colhead-chev di panel pratonton): ke kanan bila
   tutup, pusing 90° ke bawah bila buka. Ikut .showing/.hiding juga — Metronic
   hanya letak .show SELEPAS animasi slide habis, jadi tanpa ni ikon
   lambat berpusing. */
.app-sidebar .menu-accordion > .menu-link .menu-chevron {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--bs-gray-500);
    transition: transform .12s;
}
.app-sidebar .menu-accordion.showing > .menu-link .menu-chevron,
.app-sidebar .menu-accordion.show:not(.hiding) > .menu-link .menu-chevron {
    transform: rotate(90deg);
}

/* Sidebar: pisahkan dari kandungan dengan garis + bayang lembut (desktop
   sahaja — pada mobile sidebar ialah drawer dengan gaya sendiri). */
@media (min-width: 992px) {
    .app-sidebar {
        background-color: var(--bs-body-bg);
        border-right: 1px solid var(--bs-gray-200);
        box-shadow: 4px 0 16px rgba(15, 23, 42, 0.04);
    }
}

/* Sidebar: latar lembut bila hover pada item yang tak aktif. Kecualikan
   .here (induk sub-menu aktif, cth. Dashboard) — latarnya gelap + teks putih. */
.app-sidebar .menu .menu-item > .menu-link {
    transition: background-color .15s ease;
}
.app-sidebar .menu .menu-item:not(.here) > .menu-link:not(.active):hover {
    background-color: var(--bs-gray-100);
}

/* Sidebar footer: pengguna sebagai kad — jelas boleh diklik untuk menu akaun. */
.app-sidebar-footer {
    border-top: 1px dashed var(--bs-gray-200);
}
.app-sidebar-footer .sidebar-user {
    padding: 10px 12px;
    border: 1px solid var(--bs-gray-200);
    border-radius: 12px;
    background-color: var(--bs-gray-100);
    transition: background-color .15s ease, border-color .15s ease;
}
.app-sidebar-footer .sidebar-user:hover,
.app-sidebar-footer .sidebar-user.show {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-gray-300);
}