/*
 * SIMAD Polish Layer
 * Sentuhan modern global yang dimuat setelah filament-theme-global.css
 * dan modern-2026-*.css. Aman untuk di-disable kapan saja tanpa
 * memengaruhi fungsionalitas.
 *
 * Cakupan:
 * - Typography & heading rhythm
 * - Section card refinements (lift, header accent)
 * - Sidebar active indicator
 * - Topbar refinement
 * - Input/button micro-interactions
 * - Table polish (sticky header, divider)
 * - Badge & pill style
 * - Custom scrollbars
 * - Modal & dropdown polish
 * - Empty/loading states
 * - Page enter animation
 * - Print styles
 */

/* ============================================================
 * 1. TYPOGRAPHY
 * ============================================================ */
.fi-main h1,
.fi-main .fi-header-heading {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.fi-main h2,
.fi-main h3,
.fi-main .fi-section-header-heading {
    font-weight: 600;
    letter-spacing: -0.015em;
}

.fi-main p {
    line-height: 1.6;
}

/* ============================================================
 * 2. SECTION CARDS - subtle hover lift + header accent bar
 * ============================================================ */
.fi-main .fi-section,
.fi-main .fi-wi,
.fi-main .fi-ta-ctn {
    transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.fi-main .fi-section:hover,
.fi-main .fi-wi:hover {
    box-shadow:
        0 6px 14px rgba(15, 23, 42, 0.05),
        0 22px 44px rgba(15, 23, 42, 0.08);
}

/* Soft accent bar on section header */
.fi-main .fi-section-header {
    position: relative;
    padding-left: 0.75rem;
}

.fi-main .fi-section-header::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0.85rem;
    bottom: 0.85rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--simad-primary, #0f766e), transparent);
    opacity: 0.5;
}

.fi-main .fi-section-header-icon {
    color: var(--simad-primary, #0f766e);
}

/* ============================================================
 * 3. SIDEBAR - left indicator on active item
 * ============================================================ */
.fi-sidebar .fi-sidebar-item {
    position: relative;
}

.fi-sidebar .fi-sidebar-item-active::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 999px;
    background: var(--simad-primary, #0f766e);
    box-shadow: 0 0 8px var(--simad-primary, #0f766e);
}

.fi-sidebar .fi-sidebar-item-button {
    transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.fi-sidebar .fi-sidebar-item-button:hover {
    background: var(--simad-primary-soft, rgba(15, 118, 110, 0.08));
    transform: translateX(2px);
}

.fi-sidebar .fi-sidebar-item-icon {
    transition: transform 160ms ease;
}

.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    transform: scale(1.1);
}

/* ============================================================
 * 4. TOPBAR
 * ============================================================
 * PENTING — FIX CHROME ZOOM BUG:
 * Filament memberi class `overflow-x-clip` pada .fi-topbar.
 * Di Chrome, saat browser zoom < 100%, subpixel rounding pada
 * bounding rect trigger (avatar / lonceng) bisa membuat panel
 * dropdown yang dihitung Floating UI dengan `position: fixed`
 * dianggap "menyentuh" area clip topbar, lalu ter-clip walau
 * seharusnya position:fixed lolos dari overflow ancestor.
 * Solusi: paksa topbar overflow: visible agar panel tidak pernah
 * ter-clip. Side effect ke horizontal scroll diatasi oleh nav
 * di dalamnya yang tetap punya kontrol layout.
 *
 * Sumber pola: lihat issue serupa di Filament + Floating UI ketika
 * zoom != 100% di Chromium.
 */
.fi-topbar,
.fi-topbar nav {
    overflow: visible !important;
}

.fi-topbar {
    background: rgba(255, 255, 255, 0.92) !important;
}

.dark .fi-topbar {
    background: rgba(17, 24, 39, 0.92) !important;
}

/* Failsafe: panel dropdown selalu di atas dengan z-index tinggi */
.fi-dropdown-panel,
.fi-user-menu .fi-dropdown-panel,
.fi-tenant-menu .fi-dropdown-panel {
    z-index: 9999 !important;
}

/* ============================================================
 * FIX CHROME ZOOM <100% — USER-MENU PANEL POSITIONING
 * Floating UI di Filament pakai strategy "fixed" saat teleport=true,
 * tapi panel tetap descendant DOM dari topbar. Saat zoom Chrome
 * <100%, perhitungan posisi pakai bounding rect subpixel
 * menghasilkan koordinat yang ke-clip atau di luar viewport.
 *
 * Solusi: override panel jadi `position: absolute` relatif ke
 * wrapper .fi-user-menu, dengan top/right tetap. Ini bypass total
 * kalkulasi Floating UI sehingga aman di semua zoom level.
 * ============================================================ */
.fi-user-menu {
    position: relative;
}

.fi-user-menu > .fi-dropdown-panel {
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    /* Pastikan panel cukup lebar untuk konten menu */
    min-width: 14rem;
}

/* Untuk dropdown lain di topbar (group navigation di top-navigation) */
.fi-topbar .fi-dropdown {
    position: relative;
}

.fi-topbar .fi-dropdown > .fi-dropdown-panel {
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    bottom: auto !important;
    transform: none !important;
}

/* Default placement bottom-start utk topbar group dropdowns */
.fi-topbar .fi-dropdown > .fi-dropdown-panel {
    left: 0;
    right: auto;
}

/* Overrides specific placement: user-menu pakai bottom-end */
.fi-user-menu > .fi-dropdown-panel {
    left: auto !important;
    right: 0 !important;
}

/* ============================================================
 * 5. BUTTONS & ICON BUTTONS
 * ============================================================ */
.fi-btn {
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 140ms ease, box-shadow 200ms ease, background-color 180ms ease, filter 180ms ease;
}

.fi-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.fi-btn:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

.fi-btn-color-primary {
    background: linear-gradient(180deg, var(--simad-primary, #0f766e) 0%, var(--simad-primary-strong, #115e59) 100%) !important;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.22), 0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
    border: 0 !important;
}

.fi-btn-color-primary:hover {
    box-shadow: 0 12px 26px rgba(15, 118, 110, 0.32), 0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
}

.fi-icon-btn {
    transition: background-color 160ms ease, color 160ms ease;
}
/* Catatan: hindari transform pada .fi-icon-btn — banyak yang jadi dropdown trigger
   (lonceng notifikasi, dll) sehingga Floating UI bisa salah menghitung posisi panel. */

/* Soft secondary buttons */
.fi-btn-color-gray {
    background: var(--simad-surface-soft, #f8fafc) !important;
    color: var(--simad-text, #233044) !important;
    border: 1px solid var(--simad-border, #dfe7ee) !important;
}

.dark .fi-btn-color-gray {
    background: var(--simad-surface-soft, #162033) !important;
    color: var(--simad-text, #e5edf7) !important;
}

/* ============================================================
 * 6. INPUTS
 * ============================================================ */
.fi-input,
.fi-input-wrp,
.fi-select-input {
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.fi-input::placeholder {
    color: var(--simad-text-muted, #66758b);
    opacity: 0.55;
}

.fi-input:focus,
.fi-input-wrp:focus-within,
.fi-select-input:focus-within {
    background: var(--simad-surface, #fff);
}

/* Disabled state */
.fi-input:disabled,
.fi-input[readonly] {
    background: var(--simad-surface-soft, #f8fafc) !important;
    color: var(--simad-text-muted, #66758b) !important;
    cursor: not-allowed;
}

/* ============================================================
 * 7. TABLES
 * ============================================================ */
.fi-main .fi-ta-table thead th,
.fi-main .fi-ta-header-cell {
    position: sticky;
    top: 0;
    z-index: 1;
}

.fi-main .fi-ta-record,
.fi-main .fi-ta-table tbody tr {
    transition: background-color 140ms ease, transform 120ms ease;
}

.fi-main .fi-ta-record:hover {
    transform: translateX(1px);
}

/* Action buttons in tables: subtle */
.fi-main .fi-ta-actions .fi-icon-btn {
    background: transparent;
}

.fi-main .fi-ta-actions .fi-icon-btn:hover {
    background: var(--simad-primary-soft, rgba(15, 118, 110, 0.1));
    color: var(--simad-primary, #0f766e);
}

/* Empty state */
.fi-main .fi-ta-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
}

.fi-main .fi-ta-empty-state-icon {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--simad-text-muted, #66758b);
    opacity: 0.5;
}

/* ============================================================
 * 8. BADGES
 * ============================================================ */
.fi-badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition: transform 140ms ease, box-shadow 180ms ease;
}

.fi-badge:hover {
    transform: translateY(-1px);
}

/* ============================================================
 * 9. PAGINATION
 * ============================================================ */
.fi-pagination-item-button {
    transition: background-color 160ms ease, transform 120ms ease, color 160ms ease;
    font-weight: 600;
}

.fi-pagination-item-button:hover {
    transform: translateY(-1px);
    background: var(--simad-primary-soft, rgba(15, 118, 110, 0.08));
}

.fi-pagination-item-active .fi-pagination-item-button {
    background: var(--simad-primary, #0f766e) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(15, 118, 110, 0.28);
}

/* ============================================================
 * 10. MODALS
 * NOTE: Tidak pakai backdrop-filter di .fi-modal karena di Chrome
 * akan jadi containing block untuk descendant fixed/absolute,
 * sehingga dropdown user-menu yang di-teleport ke body bisa kena
 * clip/posisi salah saat modal dibuka.
 * Tidak juga menambah keyframe animation di .fi-modal-window
 * karena Filament/Alpine sudah punya x-transition sendiri.
 * ============================================================ */
.fi-main .fi-modal-window {
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18) !important;
}

/* ============================================================
 * 11. DROPDOWNS
 * NOTE: Hindari animation/keyframes di .fi-dropdown-panel karena
 * Filament sudah pakai Alpine x-transition. Dobel animasi bisa
 * menyebabkan popup tidak kelihatan (opacity 0 stuck).
 * z-index 9999 dideklarasi di blok TOPBAR (seksi 4).
 * ============================================================ */
.fi-dropdown-panel {
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14) !important;
}

.dark .fi-dropdown-panel {
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.5) !important;
}

.fi-dropdown-list-item {
    transition: background-color 140ms ease, color 140ms ease;
}

.fi-dropdown-list-item:hover {
    background: var(--simad-primary-soft, rgba(15, 118, 110, 0.08));
}

/* ============================================================
 * 12. SCROLLBARS (webkit)
 * ============================================================ */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
    background-clip: padding-box;
}

.dark *::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    background-clip: padding-box;
}

.dark *::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
    background-clip: padding-box;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.3) transparent;
}

.dark * {
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* ============================================================
 * 13. LOADING / SKELETON
 * ============================================================ */
.fi-loading-indicator {
    color: var(--simad-primary, #0f766e);
}

.fi-skeleton {
    background: linear-gradient(
        90deg,
        var(--simad-surface-soft, #f1f5f9) 0%,
        var(--simad-surface, #fff) 50%,
        var(--simad-surface-soft, #f1f5f9) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: simadShimmer 1.5s ease-in-out infinite;
}

@keyframes simadShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
 * 14. PAGE ENTER ANIMATION (DINONAKTIFKAN)
 * NOTE: Animasi page-enter pada .fi-main > * dihapus karena
 * setiap Livewire re-render section, animasi akan dijalankan
 * ulang sehingga section sempat berkedip / invisible.
 * Visual polish lain (hover lift, accent bar) sudah cukup.
 * ============================================================ */

/* Hormati preferensi reduced-motion hanya untuk animation/keyframe
 * milik kita sendiri (jangan override transition global Filament). */
@media (prefers-reduced-motion: reduce) {
    [class*="simad-"],
    .fi-dropdown-list-item,
    .fi-tabs-item,
    .fi-btn,
    .fi-pagination-item-button,
    .fi-sidebar-item-button {
        animation: none !important;
    }
}

/* ============================================================
 * 15. NOTIFICATIONS / TOAST
 * NOTE: Hanya polish shadow. Tidak pakai backdrop-filter
 * agar konsisten antar browser (Chrome paling sensitif).
 * Animasi enter diserahkan ke Filament/Alpine agar tidak
 * bertabrakan.
 * ============================================================ */
.fi-no-notification {
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18) !important;
}

/* ============================================================
 * 16. FORM FIELD WRAPPER POLISH
 * ============================================================ */
.fi-fo-field-wrp-label {
    font-weight: 600;
    color: var(--simad-text, #233044);
    margin-bottom: 0.4rem;
}

.fi-fo-field-wrp-helper-text {
    color: var(--simad-text-muted, #66758b);
    font-size: 0.75rem;
    margin-top: 0.35rem;
}

.fi-fo-field-wrp-error-message {
    color: var(--simad-danger, #e11d48);
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ============================================================
 * 17. TABS
 * ============================================================ */
.fi-tabs {
    border-bottom: 1px solid var(--simad-border, #dfe7ee);
    gap: 0.25rem;
}

.fi-tabs-item {
    transition: all 180ms ease;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    padding: 0.6rem 1rem;
}

.fi-tabs-item:hover {
    background: var(--simad-primary-soft, rgba(15, 118, 110, 0.06));
    color: var(--simad-primary-strong, #115e59);
}

.fi-tabs-item.fi-active,
.fi-tabs-item[aria-selected="true"] {
    background: var(--simad-primary-soft, rgba(15, 118, 110, 0.1)) !important;
    color: var(--simad-primary-strong, #115e59) !important;
    position: relative;
}

.fi-tabs-item.fi-active::after,
.fi-tabs-item[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: var(--simad-primary, #0f766e);
}

/* ============================================================
 * 18. KBD / CODE
 * ============================================================ */
kbd {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.78em;
    padding: 0.15em 0.45em;
    background: var(--simad-surface-soft, #f1f5f9);
    border: 1px solid var(--simad-border, #dfe7ee);
    border-bottom-width: 2px;
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

/* ============================================================
 * 19. MOBILE TOUCH-FRIENDLY
 * ============================================================ */
@media (max-width: 768px) {
    .fi-btn,
    .fi-icon-btn,
    .fi-sidebar-item-button {
        min-height: 40px;
    }

    .fi-main h1,
    .fi-main .fi-header-heading {
        font-size: 1.4rem;
    }

    /* Disable heavy animations on mobile for perf */
    .fi-main > * {
        animation-duration: 200ms;
    }
}

/* ============================================================
 * 20. PRINT
 * ============================================================ */
@media print {
    .fi-sidebar,
    .fi-topbar,
    .fi-header-actions,
    .fi-ta-header-toolbar,
    .fi-ta-actions,
    .fi-pagination,
    .fi-no-notifications,
    .fi-modal {
        display: none !important;
    }

    .fi-main,
    .fi-main-ctn {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .fi-section {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }

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

/* ============================================================
 * 21. UTILITY: page hero (untuk halaman dashboard custom)
 * ============================================================ */
.simad-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--simad-card-radius, 18px);
    padding: 1.4rem 1.6rem;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 50%),
        linear-gradient(135deg, var(--simad-primary, #0f766e), var(--simad-primary-strong, #115e59));
    box-shadow: 0 18px 38px rgba(15, 118, 110, 0.25);
}

.simad-hero h1,
.simad-hero h2,
.simad-hero h3 {
    color: #fff !important;
}

.simad-hero::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.simad-hero::after {
    content: "";
    position: absolute;
    right: 60px;
    bottom: -50px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
 * 22. UTILITY: divider with label
 * ============================================================ */
.simad-divider-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--simad-text-muted, #66758b);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.simad-divider-label::before,
.simad-divider-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--simad-border, #dfe7ee);
}

/* ============================================================
 * 23. CHIP / TAG (mirip x-profile.field badge tapi pendek)
 * ============================================================ */
.simad-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--simad-surface-soft, #f1f5f9);
    color: var(--simad-text, #233044);
    border: 1px solid var(--simad-border, #dfe7ee);
}

.simad-chip--primary { background: var(--simad-primary-soft, rgba(15, 118, 110, 0.1)); color: var(--simad-primary-strong, #115e59); border-color: rgba(15, 118, 110, 0.18); }
.simad-chip--success { background: var(--simad-success-soft, rgba(22, 163, 74, 0.1)); color: var(--simad-success, #16a34a); border-color: rgba(22, 163, 74, 0.2); }
.simad-chip--info { background: var(--simad-info-soft, rgba(37, 99, 235, 0.1)); color: var(--simad-info, #2563eb); border-color: rgba(37, 99, 235, 0.2); }
.simad-chip--warning { background: var(--simad-warning-soft, rgba(217, 119, 6, 0.1)); color: var(--simad-warning, #d97706); border-color: rgba(217, 119, 6, 0.2); }
.simad-chip--danger { background: var(--simad-danger-soft, rgba(225, 29, 72, 0.1)); color: var(--simad-danger, #e11d48); border-color: rgba(225, 29, 72, 0.2); }

/* ============================================================
 * 24. FILE UPLOAD POLISH
 * ============================================================ */
.fi-fo-file-upload .filepond--root {
    border-radius: var(--simad-control-radius, 12px);
}

.fi-fo-file-upload .filepond--panel-root {
    background: var(--simad-surface-soft, #f8fafc);
    border: 2px dashed var(--simad-border, #dfe7ee);
    transition: border-color 180ms ease, background 180ms ease;
}

.fi-fo-file-upload .filepond--panel-root:hover {
    border-color: var(--simad-primary, #0f766e);
    background: var(--simad-primary-soft, rgba(15, 118, 110, 0.05));
}

/* ============================================================
 * 25. CHECKBOX & RADIO
 * ============================================================ */
.fi-fo-checkbox input[type="checkbox"],
.fi-fo-radio input[type="radio"] {
    transition: all 160ms ease;
    cursor: pointer;
}

.fi-fo-checkbox input[type="checkbox"]:checked,
.fi-fo-radio input[type="radio"]:checked {
    background-color: var(--simad-primary, #0f766e) !important;
    border-color: var(--simad-primary, #0f766e) !important;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
}

/* ============================================================
 * 26. DASHBOARD WIDGET POLISH
 * ============================================================ */
.fi-wi-stats-overview-stat {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

.fi-wi-stats-overview-stat-value {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ============================================================
 * 27. SECTION DESCRIPTION SUBTLE
 * ============================================================ */
.fi-section-description,
.fi-header-subheading {
    font-size: 0.8rem;
    line-height: 1.55;
}

/* ============================================================
 * 28. AVATAR
 * Catatan: tidak ada transform agar tidak mengganggu Floating UI
 * (avatar di topbar adalah trigger user-menu).
 * ============================================================ */
.fi-avatar {
    box-shadow: 0 0 0 2px var(--simad-surface, #fff), 0 6px 14px rgba(15, 23, 42, 0.1);
}

/* ============================================================
 * 29. GLOBAL SEARCH POLISH
 * ============================================================ */
.fi-global-search-input {
    border-radius: 999px !important;
    background: var(--simad-surface-soft, #f8fafc) !important;
    border: 1px solid var(--simad-border, #dfe7ee) !important;
    transition: all 180ms ease;
}

.fi-global-search-input:focus-within {
    background: var(--simad-surface, #fff) !important;
    border-color: var(--simad-primary, #0f766e) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

/* ============================================================
 * 30. SELECTION COLOR
 * ============================================================ */
::selection {
    background: var(--simad-primary, #0f766e);
    color: #fff;
}