/* Fail: css/reka.css
 *
 * CSS tulisan tangan yang Tailwind tidak boleh hasilkan: token warna yang
 * sistem semasa sudah guna, gaya cetak, dan penanda Leaflet berkelip daripada
 * reka bentuk klien.
 *
 * Dimuatkan SELEPAS vendor/tailwind.css. Halaman lama (dashboard.php,
 * dashboard_admin.php, form_aset.php, tracking.php) MENGEKALKAN blok <style>
 * dalaman masing-masing dan tidak memuatkan fail ini — pertindihan itu memang
 * disengajakan, supaya kerja baharu tidak perlu menyunting dua fail terbesar
 * dalam projek. CSS lama akan bersara bersama halamannya.
 *
 * Token di bawah SENGAJA sepadan dengan :root dalam dashboard_admin.php,
 * supaya halaman baharu dan lama kelihatan seiras semasa peralihan.
 */

:root {
    --primary-color: #1e3a8a;
    --primary-hover: #1e40af;
    --secondary-color: #0f172a;
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --text-main: #0f172a;
    --text-muted: #64748b;

    --badge-user-bg: #e0f2fe;
    --badge-user-text: #0369a1;
    --badge-admin-bg: #fef3c7;
    --badge-admin-text: #b45309;
    --badge-success-bg: #dcfce7;
    --badge-success-text: #15803d;
    --badge-danger-bg: #fee2e2;
    --badge-danger-text: #991b1b;
}

/* ── Cetak ──────────────────────────────────────────────────────────────
 * Reka bentuk klien menandakan chrome dengan .no-print dan blok khusus
 * cetak dengan .print-only. Sembilan daripada 12 mockup mengulangi blok ini;
 * di sini ia sekali sahaja. */
@media print {
    .no-print   { display: none !important; }
    .print-only { display: block !important; }

    body { background: #fff !important; color: #000 !important; font-size: 11pt; }

    /* Bayang dan warna latar membazir dakwat dan menjadikan teks kelabu. */
    .shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
        box-shadow: none !important;
    }
    .border { border-color: #cbd5e1 !important; }

    /* Susun atur sidebar bertukar jadi satu lajur supaya kandungan
     * menggunakan penuh lebar kertas. */
    .sidebar-layout { display: block !important; }

    .page-break { page-break-before: always; }
}

/* Kelas .print-only tersembunyi pada skrin — hanya muncul semasa cetak. */
.print-only { display: none; }

/* ── Sidebar pada telefon ───────────────────────────────────────────────
 *
 * The sidebar is a fixed 16rem column that never collapses. On a desktop
 * that is correct. On a 390px phone it takes two thirds of the screen,
 * stays there, and there is no control to close it: the module page is
 * squeezed into the strip that is left.
 *
 * Below the md breakpoint it becomes an overlay instead - off screen
 * until the menu button is pressed, over the content while it is open,
 * closed again by the backdrop, the Escape key, or picking a link.
 *
 * Everything here is scoped to the media query, so the desktop layout and
 * every link, label and permission inside the sidebar are untouched. The
 * breakpoint is 767.98px to match Tailwind's `md`, which is what the
 * button's `md:hidden` uses - a whole-pixel 767px leaves a gap on screens
 * that report a fractional width, where both the button AND the docked
 * sidebar would disappear.
 */
@media (max-width: 767.98px) {
    .sidebar-layout > aside {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: 17rem;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        overscroll-behavior: contain;
    }

    .sidebar-layout.nav-open > aside { transform: translateX(0); }

    /* Sits above the sticky page header (z-20), below the sidebar (z-50). */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(15, 23, 42, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }
    .sidebar-layout.nav-open .nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

/* The sidebar is never an overlay on a wide screen, so neither the
 * backdrop nor the menu button belongs there - the backdrop would cover
 * the whole page, and the button would open a panel that is already open. */
@media (min-width: 768px) {
    .nav-backdrop,
    .nav-toggle,
    .nav-close { display: none; }
}

/* Never on paper. */
@media print {
    .nav-backdrop,
    .nav-toggle,
    .nav-close { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-layout > aside,
    .nav-backdrop { transition: none; }
}

/* ── Penanda GIS (Leaflet) ──────────────────────────────────────────────
 * Diambil daripada Plan_Location.html / dashboard.html. Ini menggayakan HTML
 * di dalam L.divIcon, bukan Leaflet itu sendiri. Denyutan menunjukkan jenis
 * transaksi sepintas lalu pada peta yang padat. */
.asset-marker-container {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.asset-marker-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3));
    z-index: 2;
    position: relative;
    transition: transform .2s ease-in-out;
}

.asset-marker-container:hover .asset-marker-logo {
    transform: scale(1.25) translateY(-4px);
}

.asset-pulse-ring {
    position: absolute;
    bottom: 2px;
    width: 38px;
    height: 20px;
    border-radius: 50%;
    z-index: 1;
    animation: asset-blink-pulse 1.3s infinite ease-in-out;
}

.pulse-rent    { background-color: rgba(34, 197, 94, .6);  box-shadow: 0 0 14px 6px rgba(34, 197, 94, .6); }
.pulse-lease { background-color: rgba(236, 72, 153, .6); box-shadow: 0 0 14px 6px rgba(236, 72, 153, .6); }
.pulse-sale    { background-color: rgba(239, 68, 68, .6);  box-shadow: 0 0 14px 6px rgba(239, 68, 68, .6); }
.pulse-asset    { background-color: rgba(59, 130, 246, .6); box-shadow: 0 0 14px 6px rgba(59, 130, 246, .6); }

@keyframes asset-blink-pulse {
    0%   { transform: scale(.6); opacity: .95; }
    50%  { transform: scale(1.8); opacity: .25; }
    100% { transform: scale(.6); opacity: .95; }
}

/* Peta perlu tinggi yang jelas — Leaflet tidak memberikan sendiri, dan
 * bekas tanpa tinggi menghasilkan peta 0px yang kelihatan "rosak". */
.peta-bekas { height: 420px; width: 100%; border-radius: 12px; z-index: 1; }
.peta-bekas-besar { height: 600px; }

/* ── Hormati tetapan pengguna ──────────────────────────────────────────
 * Denyutan penanda dan peralihan hover adalah hiasan; matikan untuk
 * pengguna yang meminta kurang gerakan. */
@media (prefers-reduced-motion: reduce) {
    .asset-pulse-ring { animation: none; }
    .asset-marker-logo,
    .asset-marker-container:hover .asset-marker-logo { transition: none; transform: none; }
}

/* ── Tab ────────────────────────────────────────────────────────────────
 * js/tab.js menandakan butang aktif dengan aria-selected="true" dan
 * menyembunyikan panel dengan atribut `hidden`. Warna aktif hidup DI SINI,
 * sekali — itulah sebab perbezaan indigo/blue antara mockup (bg-indigo-600
 * dalam dashboard.html, bg-blue-600 dalam admin_aset.html) tidak boleh
 * kembali. */
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: .75rem;
    font-size: .75rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.tab-btn:hover { background: #e2e8f0; color: #0f172a; }

.tab-btn[aria-selected="true"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.tab-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Preflight Tailwind menyembunyikan [hidden] melalui :where(), yang
 * mempunyai kekhususan SIFAR — jadi mana-mana utiliti display pada panel
 * yang sama akan mengalahkannya dan tab tersembunyi akan kelihatan. Peraturan
 * ini mempunyai kekhususan sebenar. */
section[id^="tab-"][hidden],
div[id^="tab-"][hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .tab-btn { transition: none; }
}