/*
 * Polo Laguna — gaya tema (semantik, dipacu token CSS).
 * Semua warna datang daripada pemboleh ubah yang dicetak oleh Services\ThemeService::head().
 * JANGAN letak warna keras di sini; tambah token baharu dalam ThemeService jika perlu.
 */

html { -webkit-text-size-adjust: 100%; }
body[class] { background-color: rgb(var(--c-bg)); color: rgb(var(--c-text)); font-family: var(--font-body); letter-spacing: -.003em; }
h1, h2, h3 { font-family: var(--font-head); letter-spacing: -.015em; }
::selection { background: rgb(var(--c-blue-200)); color: rgb(var(--c-gray-950)); }
:focus-visible { outline: 2px solid rgb(var(--c-blue-600)) !important; outline-offset: 2px; }
html[data-theme-mode="dark"] { color-scheme: dark; }

/* Kad & panel */
.shadow-sm { box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06), 0 1px 3px rgba(var(--shadow-rgb), .05) !important; }
.shadow, .shadow-md { box-shadow: 0 2px 4px rgba(var(--shadow-rgb), .06), 0 6px 14px rgba(var(--shadow-rgb), .08) !important; }
.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: 0 10px 24px rgba(var(--shadow-rgb), .14), 0 3px 8px rgba(var(--shadow-rgb), .08) !important; }

/* Bar atas */
header.sticky { background: rgb(var(--c-surface) / .92); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 38%, transparent) !important; border-bottom-color: transparent !important; }

/* Butang utama */
button.bg-blue-600, a.bg-blue-600, input[type=submit].bg-blue-600 { box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .25), inset 0 1px 0 rgba(255,255,255,.12); }
button.bg-blue-600:hover, a.bg-blue-600:hover { box-shadow: 0 3px 8px rgba(var(--shadow-rgb), .28), inset 0 1px 0 rgba(255,255,255,.12); }

/* Banner dashboard */
.bg-gradient-to-r.from-blue-600 { background-image: linear-gradient(120deg, rgb(var(--c-blue-900)) 0%, rgb(var(--c-blue-700)) 55%, rgb(var(--c-blue-600)) 100%) !important; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.bg-gradient-to-r.from-blue-600::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); pointer-events: none; }

/* Sidebar */
#mobile-sidebar { background: linear-gradient(180deg, var(--sb-from) 0%, var(--sb-to) 100%) !important; border-right: 1px solid var(--sb-border) !important; box-shadow: 2px 0 18px var(--sb-shadow) !important; transition: width .2s ease; }
#mobile-sidebar > div:first-child { border-bottom: 1px solid var(--sb-border) !important; }
#mobile-sidebar .sb-logo { color: var(--sb-logo) !important; }
#mobile-sidebar .sb-logo svg { color: var(--sb-accent); }
#mobile-sidebar nav a { color: var(--sb-text) !important; border-left: 3px solid transparent; }
#mobile-sidebar nav a:hover { background: var(--sb-hover) !important; color: var(--sb-active-text) !important; }
#mobile-sidebar nav a[aria-current="page"] { background: var(--sb-active) !important; color: var(--sb-active-text) !important; border-left-color: var(--sb-accent); }
#mobile-sidebar nav a[aria-current="page"] svg { color: var(--sb-accent); }
#mobile-sidebar nav .nav-label, #mobile-sidebar nav .text-gray-400, #mobile-sidebar nav .text-gray-500 { color: var(--sb-muted) !important; }
#mobile-sidebar nav .nav-label { display: block; padding: 0 .75rem; margin: .25rem 0 .4rem; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
#mobile-sidebar nav .border-gray-100, #mobile-sidebar nav .border-gray-200, #mobile-sidebar nav .border-t { border-color: var(--sb-border) !important; }
#mobile-sidebar > div:last-child { border-top: 1px solid var(--sb-border) !important; }
#mobile-sidebar > div:last-child a { color: var(--sb-logout) !important; }
#mobile-sidebar > div:last-child a:hover { background: var(--sb-hover) !important; }
#mobile-sidebar button { color: var(--sb-text); }
#mobile-sidebar button:hover { background: var(--sb-hover) !important; color: var(--sb-active-text); }
#mobile-sidebar nav::-webkit-scrollbar { width: 6px; }
#mobile-sidebar nav::-webkit-scrollbar-thumb { background: var(--sb-border); border-radius: 3px; }

/* Sidebar dilipat (desktop sahaja) */
#sb-toggle { display: none; }
@media (min-width: 768px) {
    #sb-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--r-lg); }
    #sb-toggle svg { transition: transform .2s; }
    html.sb-collapsed #sb-toggle svg { transform: rotate(180deg); }
    html.sb-collapsed #mobile-sidebar { width: 4.5rem; }
    html.sb-collapsed .md\:ml-64 { margin-left: 4.5rem; }
    html.sb-collapsed #mobile-sidebar > div:first-child { justify-content: center; padding-left: 0; padding-right: 0; }
    html.sb-collapsed #mobile-sidebar .sb-logo { display: none; }
    html.sb-collapsed #mobile-sidebar nav { padding-left: .75rem; padding-right: .75rem; }
    html.sb-collapsed #mobile-sidebar nav a { font-size: 0; justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
    html.sb-collapsed #mobile-sidebar nav .nav-label { display: none; }
    html.sb-collapsed #mobile-sidebar > div:last-child { padding-left: .75rem; padding-right: .75rem; }
    html.sb-collapsed #mobile-sidebar > div:last-child a { font-size: 0; justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
}
.md\:ml-64 { transition: margin-left .2s ease; }
#sb-tip { position: fixed; z-index: 60; pointer-events: none; padding: .3rem .6rem; border-radius: var(--r-md); font-size: .75rem; font-weight: 500; background: rgb(var(--c-gray-900)); color: rgb(var(--c-gray-50)); box-shadow: 0 4px 12px rgba(0,0,0,.25); white-space: nowrap; opacity: 0; transition: opacity .12s; }
#sb-tip.show { opacity: 1; }

/* Komponen tema (halaman Settings → Theme) */
.theme-card { position: relative; display: flex; flex-direction: column; background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-gray-200)); border-radius: var(--r-2xl); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.theme-card:hover { box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .12); }
.theme-card[data-active="1"] { border-color: rgb(var(--c-blue-600)); box-shadow: 0 0 0 2px rgb(var(--c-blue-600) / .25); }
.theme-mock { display: grid; grid-template-columns: 28% 1fr; height: 7.5rem; font-size: 0; }
.theme-mock .mk-side { padding: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.theme-mock .mk-side i { display: block; height: .4rem; border-radius: 99px; opacity: .35; background: currentColor; }
.theme-mock .mk-side i:first-child { opacity: .95; width: 70%; }
.theme-mock .mk-main { padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.theme-mock .mk-bar { height: .45rem; width: 55%; border-radius: 99px; }
.theme-mock .mk-card { flex: 1; border-radius: .4rem; padding: .4rem; display: flex; gap: .3rem; align-items: flex-end; }
.theme-mock .mk-btn { height: .9rem; width: 2.6rem; border-radius: .3rem; }
.theme-mock .mk-chip { height: .9rem; width: 1.6rem; border-radius: 99px; }
.sw { width: 1.1rem; height: 1.1rem; border-radius: 99px; border: 1px solid rgba(0,0,0,.12); display: inline-block; }

/* Dialog */
.theme-preview-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 70; width: min(94vw, 40rem); }

/* Mod gelap */
html[data-theme-mode="dark"] .bg-gradient-to-r.from-blue-600 { background-image: linear-gradient(120deg, rgb(var(--c-blue-200)) 0%, rgb(var(--c-blue-300)) 55%, rgb(var(--c-blue-600)) 100%) !important; }
html[data-theme-mode="dark"] .from-blue-600 .text-blue-50, html[data-theme-mode="dark"] .from-blue-600 .text-blue-100, html[data-theme-mode="dark"] .from-blue-600 .text-blue-200 { color: rgba(255,255,255,.88); }
html[data-theme-mode="dark"] .bg-white { background-color: rgb(var(--c-surface)) !important; }
html[data-theme-mode="dark"] .hover\:bg-white:hover { background-color: rgb(var(--c-gray-200)) !important; }
html[data-theme-mode="dark"] .bg-gray-800, html[data-theme-mode="dark"] .bg-gray-900 { background-color: #2b3138; }
html[data-theme-mode="dark"] .bg-gray-900\/50 { background-color: rgba(0,0,0,.6); }
html[data-theme-mode="dark"] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
html[data-theme-mode="dark"] select, html[data-theme-mode="dark"] textarea { background-color: rgb(var(--c-gray-100)); color: rgb(var(--c-gray-900)); border-color: rgb(var(--c-gray-300)); }
html[data-theme-mode="dark"] .text-blue-600 { color: rgb(var(--c-blue-700)); }
html[data-theme-mode="dark"] header.sticky { background: rgb(var(--c-surface) / .9); }
html[data-theme-mode="dark"] .shadow-sm, html[data-theme-mode="dark"] .shadow { box-shadow: 0 0 0 1px rgb(var(--c-gray-200)) !important; }

@media print { #mobile-sidebar, header.sticky, .theme-preview-bar { display: none !important; } }

/* Responsif: elak grid/flex "meletup" melebihi lebar skrin (kad statistik, borang penapis pada tablet) */
.grid > * { min-width: 0; }
.flex > select, .flex > input:not([type=checkbox]):not([type=radio]), form.flex select { min-width: 0; max-width: 100%; }

/* Sasaran sentuh minimum (WCAG 2.2 SC 2.5.8, 24px) untuk kawalan padat pada skrin kecil/sentuh */
@media (max-width: 768px), (pointer: coarse) {
    button.py-1, button.py-0\.5, a.py-1, a.py-0\.5 { min-height: 28px; }
    a[href^="tel:"] { display: inline-block; min-height: 24px; padding-block: 2px; }
}

/*
 * Tablet (sidebar kekal terbuka pada >=768px sehingga ruang kandungan hanya ~460-780px): susun atur lama menggunakan
 * pemecah sm:/md: yang terlalu awal. Pembetulan lembut tanpa mengubah markup.
 */
@media (min-width: 640px) and (max-width: 1023px) {
    .flex.sm\:flex-row, .flex.md\:w-auto { flex-wrap: wrap; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .grid.md\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .grid.lg\:grid-cols-4:has(> .lg\:col-span-3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Pautan pada kad gelap (mis. Emergency Contacts di atas bg-gray-900): gunakan tint cerah supaya kontras kekal AA pada semua tema */
.bg-gray-900 .text-blue-400, .bg-gray-900 .text-blue-500 { color: rgb(var(--c-blue-200)); }
.bg-gray-900 .hover\:text-blue-300:hover { color: rgb(var(--c-blue-100)); }

/* Mod gelap: elemen berlatar pekat dengan teks putih mesti kekal pekat (skala kelabu/biru terbalik untuk teks) */
html[data-theme-mode="dark"] :is(.bg-gray-500, .bg-gray-600, .bg-gray-700).text-white { background-color: #454d57; }
html[data-theme-mode="dark"] .hover\:bg-gray-700:hover { background-color: #383f48; }
html[data-theme-mode="dark"] .bg-blue-700, html[data-theme-mode="dark"] .hover\:bg-blue-700:hover { background-color: color-mix(in srgb, rgb(var(--c-blue-600)) 82%, black); }
html[data-theme-mode="dark"] .bg-gray-900 .text-blue-400, html[data-theme-mode="dark"] .bg-gray-900 .text-blue-500 { color: rgb(var(--c-blue-800)); }
html[data-theme-mode="dark"] .bg-gray-900 .hover\:text-blue-300:hover { color: rgb(var(--c-blue-900)); }

/*
 * Ikon "fas fa-*": FontAwesome TIDAK dimuatkan oleh aplikasi ini, jadi ikon (tick matriks Roles, edit, sekat, anak panah ...) sebelum ini
 * kosong/tidak kelihatan. Gantikan dengan topeng SVG sebaris (tanpa kebergantungan luar); warna mengikut `currentColor`.
 */
.fas, .far, .fa { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask: var(--fa) center / contain no-repeat; mask: var(--fa) center / contain no-repeat; font-style: normal; line-height: 1;
    --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='black'/%3E%3C/svg%3E"); }
.fa-check { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-minus { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fa-plus { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fa-user, .fa-user-shield, .fa-user-tie, .fa-users { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='black'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z' fill='black'/%3E%3C/svg%3E"); }
.fa-edit, .fa-pen, .fa-pencil-alt { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19.5 8.5l-4-4L4 16z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-ban { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.6'/%3E%3Cpath d='M5.6 5.6l12.8 12.8' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E"); }
.fa-check-circle { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-chevron-down { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-chevron-left { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-chevron-right { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-search { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='black' stroke-width='2.6'/%3E%3Cpath d='M15 15l5.5 5.5' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fa-arrow-left { --fa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 5l-7 7 7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Kotak tindakan (Tambah/Ubah/Padam) dalam matriks kebenaran: keadaan terpilih jelas (isi + tick) */
.action-icon { width: 1.75rem; height: 1.75rem; font-size: 1rem; border-width: 2px; }
.toggle-action:checked + .action-icon { background-color: rgb(var(--c-blue-50)); }
.toggle-action:focus-visible + .action-icon { outline: 2px solid rgb(var(--c-blue-600)); outline-offset: 2px; }

/* Roles & Access: butang ikon (edit / sekat / lulus) pada baris pengguna mesti memenuhi sasaran sentuh 24px (WCAG 2.2 SC 2.5.8) */
.user-row td button, .user-row td a { min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; }