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

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