/* ================================================================================
   APOLLO ENTERPRISE — MOBILE & RESPONSIVE THEMES (apollo-mobile-themes.css)
   ================================================================================
   Berisi seluruh aturan CSS responsif, mobile view, dan touch navigation
   untuk Apollo Enterprise Skin.
   
   Breakpoints:
   - max-width: 1024px   (Tablet Large / iPad Landscape)
   - max-width: 991.98px (Tablet Portrait / Mobile - Breakpoint Utama)
   - max-width: 767.98px (Mobile Landscape / Phablet)
   - max-width: 576px    (Mobile Phone Portrait)
   - max-width: 480px    (Mobile Small Phone)
   ================================================================================ */

/* ================================================================================
   1. TABLET LARGE (<= 1024px)
   ================================================================================ */
@media (max-width: 1024px) {
    .apollo-hero-grid {
        grid-template-columns: 1fr;
    }
    .apollo-quickaccess-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .apollo-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================================================
   2. SMALL TABLET & PHABLET (<= 640px)
   ================================================================================ */
@media (max-width: 640px) {
    .apollo-quickaccess-grid {
        grid-template-columns: 1fr;
    }
    .apollo-footer-grid {
        grid-template-columns: 1fr;
    }
    .apollo-banner-features {
        flex-direction: column;
        gap: 8px;
    }
}

/* ================================================================================
   3. BREAKPOINT UTAMA TABLET & MOBILE (<= 991.98px)
   ================================================================================ */
@media (max-width: 991.98px) {

    /* ----------------------------------------------------------------------------
       A. HEADER MOBILE FIX FULL (EDGE-TO-EDGE, ZERO GAP TOP, LEFT, RIGHT)
       ---------------------------------------------------------------------------- */
    .apollo-header,
    #apollo-main-header,
    .apollo-header.apollo-header-compact,
    #apollo-main-header.apollo-header-compact {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        z-index: 1020 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .apollo-header-card {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .apollo-topbar-wrapper,
    .apollo-header.apollo-header-compact .apollo-topbar-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        padding: 0 14px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
    }

    .apollo-topbar-inner,
    .apollo-header.apollo-header-compact .apollo-topbar-inner {
        width: 100% !important;
        height: 100% !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .apollo-user-btn {
        padding: 4px !important;
        border-radius: 50% !important;
        border: none !important;
        background: transparent !important;
    }

    /* Mobile Dark Mode Toggle Button (In Front of Avatar on Mobile Header) */
    .apollo-mobile-theme-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        color: #64748b !important;
        font-size: 0.88rem !important;
        margin-right: 8px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
        outline: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .apollo-mobile-theme-btn:active {
        transform: scale(0.9) !important;
    }

    /* ----------------------------------------------------------------------------
       B. RESET LAYOUT & SPACING GOLDEN TOKEN (52px HEADER CLEARANCE)
       ---------------------------------------------------------------------------- */
    body, #layout, #layout-content, #mainscreen {
        padding-top: 52px !important;
        margin-top: 0 !important;
    }

    .apollo-portal-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 75px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .portal-cards-container {
        padding: 6px 10px 75px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
    }

    .portal-main-card {
        width: 100% !important;
        padding: 14px 12px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
    }

    /* ----------------------------------------------------------------------------
       C. ELEMEN DESKTOP YANG DISEMBUNYIKAN DI MOBILE
       ---------------------------------------------------------------------------- */
    /* Sembunyikan bilah navigasi desktop baris kedua (Megamenu Bar) agar tidak menabrak bottom dock */
    .apollo-megamenu-bar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        pointer-events: none !important;
    }

    /* Sembunyikan elemen pencarian tengah & aksi topbar desktop */
    .apollo-topbar-center,
    .apollo-topbar-actions,
    .apollo-lang-divider,
    .apollo-lang-dropdown,
    .apollo-user-info,
    .apollo-user-btn .apollo-user-chevron {
        display: none !important;
    }

    /* Sembunyikan Sidebar Card Desktop & Tab Collapsed di Mobile */
    #portalSidebarCard,
    aside#portalSidebarCard,
    aside.portal-sidebar-card,
    #portalSidebar,
    .portal-sidebar-card,
    #portalCollapsedTab,
    .portal-collapsed-tab,
    div#portalCollapsedTab,
    div.portal-collapsed-tab,
    [id*="portalCollapsedTab"],
    [class*="portal-collapsed-tab"] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        z-index: -99999 !important;
    }

    /* ----------------------------------------------------------------------------
       D. MOBILE BOTTOM NAVIGATION DOCK (#apolloMobileBottomNav)
       ---------------------------------------------------------------------------- */
    .apollo-mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 56px !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        z-index: 100000 !important;
        padding: 0 4px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .apollo-bottom-tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: #64748b !important;
        text-decoration: none !important;
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        gap: 3px !important;
        padding: 4px 0 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        transition: color 0.18s ease, transform 0.15s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .apollo-bottom-tab i {
        font-size: 1.15rem !important;
        line-height: 1 !important;
        transition: transform 0.18s ease !important;
    }

    .apollo-bottom-tab.active,
    .apollo-bottom-tab:hover {
        color: #2563eb !important;
    }

    .apollo-bottom-tab:active {
        transform: scale(0.92) !important;
    }

    /* Warna Ikon Vibrant Dock */
    .apollo-bottom-tab .fa-home { color: #2563eb !important; }
    .apollo-bottom-tab .fa-envelope { color: #d97706 !important; }
    .apollo-bottom-tab .fa-database { color: #059669 !important; }
    .apollo-bottom-tab .fa-cash-register { color: #0891b2 !important; }
    .apollo-bottom-tab .fa-bars { color: #6366f1 !important; }

    /* ----------------------------------------------------------------------------
       E. OFFCANVAS DRAWER & BACKDROP
       ---------------------------------------------------------------------------- */
    .apollo-drawer-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(15, 23, 42, 0.55) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 100050 !important;
        display: none;
    }

    .apollo-drawer-backdrop.show {
        display: block !important;
    }

    .apollo-mobile-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 290px !important;
        max-width: 85vw !important;
        background: #ffffff !important;
        z-index: 100100 !important;
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.18) !important;
        display: flex !important;
        flex-direction: column !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow: hidden !important;
    }

    .apollo-mobile-drawer.show {
        transform: translateX(0) !important;
    }

    /* Dukungan Kompatibilitas Drawer Lama */
    #apollo-mobile-backdrop {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(15, 23, 42, 0.55) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 99990 !important;
        cursor: pointer !important;
    }

    .apollo-has-megamenu.mobile-open > .apollo-megamenu-panel {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        bottom: 56px !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 300px !important;
        max-width: 88vw !important;
        height: auto !important;
        max-height: calc(100vh - 116px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #ffffff !important;
        border-radius: 0 16px 0 0 !important;
        box-shadow: 8px -8px 30px rgba(0, 0, 0, 0.22) !important;
        padding: 12px 14px !important;
        z-index: 100010 !important;
        border-right: 1px solid #e2e8f0 !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    /* ----------------------------------------------------------------------------
       F. FLOATING ACTION BUTTON (FAB - .apollo-fab-add)
       ---------------------------------------------------------------------------- */
    .apollo-fab-add {
        display: inline-flex !important;
        position: fixed !important;
        bottom: 72px !important;
        right: 18px !important;
        height: 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
        color: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
        cursor: pointer !important;
        z-index: 99995 !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        text-decoration: none !important;
    }

    .apollo-fab-add .fab-label {
        display: none !important;
    }

    .apollo-fab-add i {
        font-size: 1.25rem !important;
        color: #ffffff !important;
        margin: 0 !important;
    }

    .apollo-fab-add:hover {
        transform: translateY(-3px) scale(1.06) !important;
        box-shadow: 0 10px 25px rgba(22, 163, 74, 0.5) !important;
        color: #ffffff !important;
    }

    .apollo-fab-add:active {
        transform: translateY(1px) scale(0.96) !important;
    }

    body.modal-open .apollo-fab-add,
    .modal.show ~ .apollo-fab-add,
    .modal-open .apollo-fab-add {
        display: none !important;
    }

    /* ----------------------------------------------------------------------------
       G. TOOLBAR PENCARIAN, FILTER & RESPONSIVE DATA TABLES
       ---------------------------------------------------------------------------- */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 10px !important;
        margin-bottom: 14px !important;
    }

    .table th, .table td {
        padding: 8px 10px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }

    .filter-toolbar {
        padding: 10px 12px !important;
        margin-bottom: 14px !important;
    }

    .filter-toolbar .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .filter-toolbar [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .filter-toolbar .d-flex {
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .filter-toolbar select,
    .filter-toolbar .filter-input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .portal-breadcrumb-bar .breadcrumb {
        font-size: 0.78rem !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .portal-top-icons-group {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .top-action-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.72rem !important;
        border-radius: 6px !important;
    }

    .portal-top-search-container {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin: 4px 0 0 0 !important;
    }

    .portal-top-search-container .searchbar input {
        height: 36px !important;
        font-size: 0.82rem !important;
        padding-left: 36px !important;
        padding-right: 32px !important;
    }

    /* ----------------------------------------------------------------------------
       H. ROUNDCUBE WEBMAIL LIST PADA MOBILE
       ---------------------------------------------------------------------------- */
    .gmail-category-tabs-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 2px !important;
        gap: 2px !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .gmail-category-tabs-bar::-webkit-scrollbar {
        display: none !important;
    }

    .gmail-tab {
        padding: 6px 10px !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
        gap: 6px !important;
    }

    .gmail-tab-icon {
        font-size: 0.95rem !important;
    }

    .gmail-tab-title {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }

    .gmail-tab-sub {
        display: none !important;
    }

    .gmail-tab-badge {
        font-size: 0.6rem !important;
        padding: 1px 5px !important;
        margin-left: 4px !important;
    }

    #messagelist tbody tr[id^="rcmrow"],
    #messagelist tbody tr.message {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    .gmail-row-wrapper {
        padding: 0 6px !important;
        height: 48px !important;
        gap: 6px !important;
    }

    .gmail-row-controls {
        width: auto !important;
        min-width: 0 !important;
        max-width: 140px !important;
        flex-shrink: 0 !important;
        gap: 4px !important;
    }

    .gmail-row-checkbox {
        width: 14px !important;
        height: 14px !important;
    }

    .gmail-star-btn {
        font-size: 0.76rem !important;
    }

    .gmail-tag-btn {
        display: none !important;
    }

    .gmail-sender-avatar {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 0.62rem !important;
        margin-right: 0 !important;
    }

    .gmail-sender-label {
        font-size: 0.8rem !important;
        max-width: 85px !important;
    }

    .gmail-row-body {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
    }

    .gmail-subj-label {
        font-size: 0.78rem !important;
    }

    .gmail-snippet-label {
        font-size: 0.74rem !important;
        opacity: 0.75 !important;
    }

    .gmail-row-date {
        font-size: 0.7rem !important;
        min-width: 52px !important;
        max-width: 58px !important;
        flex-shrink: 0 !important;
        text-align: right !important;
        padding-right: 2px !important;
        white-space: nowrap !important;
    }

    .portal-mail-pagination-bar {
        padding: 8px 10px !important;
        font-size: 0.76rem !important;
    }

    /* ----------------------------------------------------------------------------
       I. GRID MODUL DI MOBILE
       ---------------------------------------------------------------------------- */
    .apollo-module-grid {
        grid-template-columns: 1fr !important;
    }

    /* ----------------------------------------------------------------------------
       J. DARK MODE DI MOBILE
       ---------------------------------------------------------------------------- */
    html.dark-mode .apollo-header,
    body.dark-mode .apollo-header,
    html.dark-mode #apollo-main-header,
    body.dark-mode #apollo-main-header,
    html.dark-mode .apollo-header.apollo-header-compact,
    body.dark-mode .apollo-header.apollo-header-compact {
        background: #0f172a !important;
        border-bottom-color: #1e293b !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    html.dark-mode .apollo-mobile-theme-btn,
    body.dark-mode .apollo-mobile-theme-btn {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #fbbf24 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    }

    html.dark-mode .apollo-mobile-bottom-nav,
    body.dark-mode .apollo-mobile-bottom-nav {
        background: #0f172a !important;
        border-top-color: #1e293b !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
    }

    html.dark-mode .apollo-bottom-tab,
    body.dark-mode .apollo-bottom-tab {
        color: #94a3b8 !important;
    }

    html.dark-mode .apollo-bottom-tab.active,
    body.dark-mode .apollo-bottom-tab.active,
    html.dark-mode .apollo-bottom-tab:hover,
    body.dark-mode .apollo-bottom-tab:hover {
        color: #60a5fa !important;
    }

    html.dark-mode .apollo-fab-add {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
        box-shadow: 0 6px 20px rgba(34, 197, 94, 0.45) !important;
        color: #ffffff !important;
    }

    html.dark-mode .apollo-has-megamenu.mobile-open > .apollo-megamenu-panel {
        background: #1e293b !important;
        border-color: #334155 !important;
        box-shadow: 8px -8px 30px rgba(0, 0, 0, 0.5) !important;
    }
}

/* ================================================================================
   4. PERLAKUAN DESKTOP (>= 992px)
   ================================================================================ */
@media (min-width: 992px) {
    /* Sembunyikan bilah navigasi bawah, drawer mobile, tombol tema mobile, dan FAB di desktop */
    .apollo-mobile-bottom-nav,
    .apollo-mobile-theme-btn {
        display: none !important;
    }

    .apollo-fab-add {
        display: none !important;
    }

    .apollo-mobile-drawer,
    .apollo-drawer-backdrop,
    #apollo-mobile-backdrop {
        display: none !important;
    }
}

/* ================================================================================
   5. MOBILE KECIL (<= 480px) — PRATINJAU KARTU IDENTITAS / KARYAWAN
   ================================================================================ */
@media (max-width: 480px) {
    :root {
        --card-width: 92vw;
        --card-height: calc(92vw / 1.636);
    }
    .left-panel {
        padding: 14px 10px;
    }
    .logo-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
        border-radius: 6px;
    }
    .company-name-left {
        font-size: 12px;
    }
    .tagline {
        font-size: 5px;
        letter-spacing: 1px;
    }
    .right-panel {
        padding: 14px 30px 14px 12px;
    }
    .contact-list {
        max-width: 85%;
    }
    .name {
        font-size: 16px;
    }
    .job-title {
        font-size: 9px;
    }
    .contact-item {
        gap: 8px;
        font-size: 10px;
    }
    .contact-icon {
        width: 22px;
        height: 22px;
        font-size: 10px;
        border-radius: 6px;
    }
    .qr-code {
        width: 34px;
        height: 34px;
    }
}