/* ============================================
   KOPERASI MOBILE THEME v6
   Complete App Experience & Tabbed Layouts
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@media (max-width: 768px) {
    :root {
        --bg-app: #0f0f14;
        --bg-surface: #16161d;
        --bg-card: rgba(255, 255, 255, 0.03);
        --bg-elevated: rgba(255, 255, 255, 0.06);
        --border: rgba(255, 255, 255, 0.08);
        --text-primary: #ffffff;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
        --blue: #3b82f6;
        --green: #4ade80;
        --orange: #fbbf24;
        --red: #f87171;
        --purple: #a78bfa;
        --nav-height: 60px;
    }

    html {
        color-scheme: dark !important;
    }

    body {
        font-family: 'Inter', -apple-system, sans-serif !important;
        background: var(--bg-app) !important;
        color: var(--text-primary) !important;
        padding-bottom: var(--nav-height) !important;
        margin: 0 !important;
        font-size: 14px !important;
        overflow-x: hidden !important;
    }

    /* === HIDE DESKTOP ELEMENTS === */
    .fi-sidebar,
    .fi-sidebar-nav,
    aside,
    .fi-topbar .fi-icon-btn,
    .fi-topbar-open-sidebar-btn,
    .fi-breadcrumbs,
    .fi-header-subheading,
    .fi-topbar nav,
    .fi-topbar-item {
        display: none !important;
    }

    /* === LAYOUT FULL WIDTH === */
    .fi-main-ctn,
    .fi-layout {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .fi-main {
        background: var(--bg-app) !important;
        padding: 0 !important;
    }

    .fi-body {
        background: var(--bg-app) !important;
    }

    /* === TOP BAR (Hidden globally on mobile) === */
    .fi-topbar,
    .fi-topbar-ctn,
    header.fi-topbar {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
    }

    /* === PAGE HEADER === */
    .fi-header {
        background: var(--bg-surface) !important;
        padding: 12px 14px !important;
        border-bottom: 1px solid var(--border) !important;
        margin: 0 !important;
    }

    .fi-header-heading {
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
    }

    /* === CARDS & SECTIONS === */
    .fi-section,
    .fi-card,
    .fi-ta-ctn {
        background: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 16px !important;
        margin: 10px 12px !important;
        /* Smaller margin for better utilization */
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .fi-section-header {
        background: var(--bg-elevated) !important;
        padding: 10px 14px !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .fi-section-header-heading {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
    }

    .fi-section-content {
        padding: 12px 14px !important;
    }

    /* === RELATION MANAGER TABS (The most important part for Loan Detail) === */
    .fi-resource-relation-manager-tabs {
        display: flex !important;
        background: var(--bg-surface) !important;
        padding: 0 4px !important;
        border-bottom: 1px solid var(--border) !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        gap: 0 !important;
    }

    .fi-resource-relation-manager-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .fi-resource-relation-manager-tabs-item {
        padding: 14px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        border: none !important;
        background: transparent !important;
        position: relative !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }

    /* Active indicator for tabs */
    .fi-resource-relation-manager-tabs-item[aria-selected="true"],
    .fi-resource-relation-manager-tabs-item.fi-active {
        color: var(--blue) !important;
    }

    .fi-resource-relation-manager-tabs-item[aria-selected="true"]::after,
    .fi-resource-relation-manager-tabs-item.fi-active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        right: 20%;
        height: 3px;
        background: var(--blue);
        border-radius: 3px 3px 0 0;
    }

    /* Handle the standard Filament Tabs as well */
    .fi-tabs {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    .fi-tabs-nav {
        background: var(--bg-surface) !important;
        display: flex !important;
        overflow-x: auto !important;
        padding: 0 8px !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .fi-tabs-nav-item {
        padding: 12px 16px !important;
        font-size: 13px !important;
        color: var(--text-muted) !important;
        border: none !important;
    }

    .fi-tabs-nav-item-active {
        color: var(--blue) !important;
        border-bottom: 3px solid var(--blue) !important;
    }

    /* === TABLES (Like Transaction List) === */
    .fi-ta {
        background: transparent !important;
        border: none !important;
    }

    /* Hide desktop table header */
    .fi-ta-header,
    .fi-ta-header-cell,
    thead {
        display: none !important;
    }

    .fi-ta-content {
        padding: 0 !important;
    }

    table.fi-ta-table,
    tbody.fi-ta-tbody {
        display: block !important;
    }

    /* ROW - Transaction Style */
    tr.fi-ta-row,
    .fi-ta-row {
        display: flex !important;
        align-items: center !important;
        background: var(--bg-card) !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        /* Remove margin for internal rows to make it look like a list */
        gap: 12px !important;
        border-radius: 0 !important;
        /* Items in a list shouldn't be individual cards if they are in a section */
    }

    /* If the table is NOT inside a section, make it look like cards */
    .fi-ta-ctn tr.fi-ta-row:first-child {
        border-radius: 16px 16px 0 0 !important;
    }

    .fi-ta-ctn tr.fi-ta-row:last-child {
        border-radius: 0 0 16px 16px !important;
        border-bottom: none !important;
    }

    /* === PLACEHOLDERS (Viewing details) === */
    .fi-fo-placeholder {
        background: rgba(255, 255, 255, 0.02) !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        margin-bottom: 4px !important;
    }

    .fi-fo-placeholder-label {
        font-size: 11px !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
    }

    .fi-fo-placeholder-content {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
    }

    /* === BADGES === */
    .fi-badge {
        font-size: 10px !important;
        padding: 2px 8px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    /* === SEARCH BAR === */
    .fi-ta-header-toolbar {
        padding: 12px 14px !important;
        background: transparent !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .fi-ta-search-field input {
        background: var(--bg-surface) !important;
        border-radius: 12px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    /* === BOTTOM NAVIGATION === */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--nav-height) !important;
        background: #16161d !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        z-index: 9999 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    }

    .mobile-bottom-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 6px 4px !important;
        flex: 1 !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        color: #94a3b8 !important;
    }

    .mobile-bottom-nav-item.active {
        color: #3b82f6 !important;
        background: transparent !important;
        /* Remove background highlight for cleaner look */
    }

    .mobile-bottom-nav-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .mobile-bottom-nav-label {
        font-size: 9px !important;
        font-weight: 600 !important;
    }

    /* === INPUT FIELDS (FORMS) === */
    .fi-input-wrp {
        border-radius: 12px !important;
        background: var(--bg-surface) !important;
    }

    .fi-input {
        padding: 10px 14px !important;
    }

    /* === HEADER ACTIONS === */

    .fi-header-actions {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .fi-header-actions .fi-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        height: 32px !important;
        border-radius: 8px !important;
    }

    /* === GRID STACKING === */
    .fi-fo-grid,
    .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Allow small grids to stay horizontal if needed (e.g. 2 columns) */
    .grid-cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* === INFOLIST ENTRIES (Detail Pages) === */
    .fi-in-entry-wrp {
        margin-bottom: 12px !important;
    }

    .fi-in-text-item-label {
        font-size: 11px !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
    }

    .fi-in-text-item-value {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
    }

    /* Entry styling as cards inside sections */
    .fi-in-entry {
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
    }

    /* === FORM PLACEHOLDERS === */
    .fi-fo-placeholder {
        padding: 10px 12px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    /* Empty state */
    .fi-ta-empty-state {
        padding: 40px 20px !important;
        text-align: center !important;
        color: var(--text-muted) !important;
    }

    /* Hide horizontal scroll indicators on tabs */
    .fi-tabs-nav::-webkit-scrollbar,
    .fi-resource-relation-manager-tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* Fix for large empty space on some pages */
    .fi-main-ctn {
        min-height: 100vh !important;
    }
}

@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}