/* ============================================================
   MKT SYSTEM - Tablet Only Styles
   Rentang: 768px s/d 1279px (portrait & landscape tablet)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1279px) {

    /* ===== NAVBAR: tampilkan mobile bottom nav + sembunyikan desktop nav ===== */

    /* Sembunyikan desktop floating nav di tablet (maksimal kekuatan) */
    #desktop-float-nav,
    #desktop-nav-wrapper,
    #dnav-settings-float,
    .desk-nav-btn,
    .dsk-nav-toggle {
        display: none !important;
    }

    /* Tampilkan kembali mobile nav wrapper (md:hidden memaksa none; override) */
    #mobile-nav-wrapper {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: 90 !important;
        background: transparent !important;
    }

    /* Mobile bottom nav: float menengah — tidak nempel penuh ke bawah */
    #mobile-bottom-nav {
        position: fixed !important;
        width: auto;
        left: 1rem;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        top: auto;
        margin: 0;
        padding: 0.6rem 1rem;
        gap: 0.5rem;
        border-radius: 1.5rem !important;
        justify-content: space-around !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.16) !important;
        border: 1px solid #e5e7eb !important;
        opacity: 1 !important;
        isolation: isolate;
        display: flex !important;
        align-items: center;
    }

    /* Tombol nav: selalu lingkaran di semua state, kolom (icon di atas, label bawah) */
    #mobile-bottom-nav button {
        width: 60px !important;
        height: 58px !important;
        flex: none !important;
        padding: 4px 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        border-radius: 16px !important;
        transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
        background: transparent;
        color: #9ca3af;
    }

    /* ===== MOBILE BOTTOM NAV: Submenu Reporting (tablet) =====
       Di tablet tombol Reporting tidak disembunyikan (beda mobile <768px).
       Submenu muncul DI ATAS navbar, rata tengah relatif viewport. */
    #mob-visit-submenu {
        position: fixed !important;
        bottom: 110px !important;
        left: 40% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 200px !important;
        padding: 8px !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 30px rgba(0,0,0,0.18) !important;
        border: 1px solid #e5e7eb !important;
        z-index: 200 !important;
    }
    #mob-visit-submenu button {
        font-size: 13px !important;
        padding: 10px 14px !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Icon: perbesar dari 18px → 22px */
    #mobile-bottom-nav button i {
        font-size: 22px !important;
        line-height: 1;
    }

    /* Label teks di bawah icon — TABLET: icon only, sembunyikan label */
    #mobile-bottom-nav button span {
        display: none !important;
    }

    /* Active button: efek lebih besar + kotak terisi penuh */
    #mobile-bottom-nav button.text-primary {
        background: var(--tw-primary, #2b3991) !important;
        color: #ffffff !important;
        transform: scale(1.05) translateY(-3px);
        box-shadow: 0 0 0 3px rgba(43, 57, 145, 0.15), 0 4px 10px rgba(43, 57, 145, 0.3);
    }

    /* Active button icon: lebih besar + tidak transparan */
    #mobile-bottom-nav button.text-primary i,
    #mobile-bottom-nav button.text-primary span.label {
        color: #ffffff !important;
        opacity: 1 !important;
        font-size: 22px !important;
    }

    /* Tombol Add (+) — lingkaran terisi, tanpa label */
    #mobile-bottom-nav button#mob-nav-add {
        width: 54px !important;
        height: 54px !important;
        border-radius: 50% !important;
        flex-direction: column !important;
    }
    #mobile-bottom-nav button#mob-nav-add i {
        font-size: 24px !important;
    }
    #mobile-bottom-nav button#mob-nav-add.text-primary {
        background: var(--tw-primary, #2b3991) !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(43, 57, 145, 0.15), 0 4px 10px rgba(43, 57, 145, 0.3);
    }
    #mobile-bottom-nav button#mob-nav-add.text-primary i {
        color: #ffffff !important;
        opacity: 1 !important;
    }
    #mobile-bottom-nav button#mob-nav-add:not(.text-primary) {
        background: #f1f5f9 !important;
        color: #94a3b8 !important;
    }

    /* ===== TOPBAR / HEADER: perbesar ===== */

    header {
        padding: 0.75rem 1.25rem;
        min-height: 60px;
    }

    /* Logo di header */
    #app-header-logo {
        width: 36px !important;
        height: 36px !important;
    }

    /* Judul halaman di header */
    #page-title {
        font-size: 1.25rem !important;
        font-weight: 800;
    }

    /* Jam di header */
    #header-clock {
        font-size: 0.9rem !important;
    }

    /* ===== KONTEN: padding tablet ===== */
    #main-content-area {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 3rem;
    }

    /* ===== HOME HALAMAN — tablet pakai versi MOBILE, elemen lebih besar =====
       Mobile home tampil penuh di tablet; desktop content disembunyikan. */

    /* Di halaman home, hilangkan padding area konten agar latar #f5f6fa
       menutup penuh tanpa strip #f9fafb di sekeliling (efek "kotak"). */
    body.is-home #main-content-area {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Sembunyikan topbar/header saat berada di halaman home (seperti mobile) */
    body.is-home header,
    body.is-home #desktop-nav-wrapper {
        display: none !important;
    }

    /* Full-bleed background untuk halaman home di tablet */
    body.is-home {
        background: #f5f6fa !important;
    }

    /* Tampilkan header + konten mobile home, sembunyikan versi desktop */
    #view-home #home-mob-header {
        display: block !important;
    }
    #home-mobile-content {
        display: block !important;
    }
    #home-desktop-content {
        display: none !important;
    }

    /* Header home lebih lega */
    #view-home #home-mob-header {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 1.25rem;
    }
    /* Header: judul lebih besar */
    #view-home #home-mob-header h2 {
        font-size: 40px !important;
        line-height: 1.1;
        margin-top: 1.25rem;
    }

    /* Search bar lebih besar */
    #home-mob-header input#home-app-search-input {
        padding: 16px 20px 16px 50px !important;
        font-size: 15px !important;
        border-radius: 1.25rem !important;
        margin-top: 0 !important;
    }
    /* Icon pencarian diposisikan pas di tengah vertikal/horizontal input */
    #home-mob-header span[style*="magnifying-glass"] {
        left: 20px !important;
    }
    #home-mob-header .fa-magnifying-glass {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* Tombol profil & activity log lebih besar di tablet */
    #view-home #home-mob-header #home-mob-profile-btn,
    #view-home #home-mob-header #home-mob-activity-btn {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
    }
    #view-home #home-mob-header #home-mob-activity-btn i {
        font-size: 20px !important;
        line-height: 1 !important;
    }
    #view-home #home-mob-header #home-mob-profile-btn #home-mob-avatar-initials {
        font-size: 16px !important;
    }

    /* Konten mobile home: padding horizontal lebih besar */
    #home-mobile-content {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 4rem;
    }

    /* Banner home tablet — pakai #home-tab-banner (sembunyikan banner mobile) */
    #home-mobile-content #home-mob-banner {
        display: none !important;
    }
    #home-tab-banner,
    #home-tab-banner .relative {
        border-radius: 1.5rem !important;
    }
    #home-tab-banner > #home-banner-placeholder-tab {
        min-height: 200px !important;
        padding: 1.5rem !important;
    }
    #home-tab-banner .text-base {
        font-size: 1.25rem !important;
    }
    #home-tab-banner .text-[11px] {
        font-size: 12px !important;
    }

    /* App grid — tetap mobile layout, ikon+label diperbesar */
    #home-mobile-content .home-app-btn {
        padding: 16px 10px !important;
        gap: 8px !important;
        border-radius: 20px !important;
    }
    #home-mobile-content .home-app-btn .icon-wrap {
        width: 56px !important;
        height: 56px !important;
        border-radius: 16px !important;
        font-size: 22px !important;
    }
    #home-mobile-content .home-app-btn .icon-wrap img {
        width: 34px !important;
        height: 34px !important;
    }
    #home-mobile-content .home-app-btn span {
        font-size: 12px !important;
    }

    /* Section heading (Menu Aplikasi, Promo & Update, dll) lebih besar */
    #home-mobile-content .text-sm.font-extrabold.text-gray-800 {
        font-size: 16px !important;
    }

    /* Kartu info perusahaan & promo lebih besar */
    #home-mobile-content .bg-white.rounded-2xl.p-4 {
        border-radius: 20px !important;
        padding: 1.25rem !important;
    }
    #home-mobile-content .bg-white.rounded-2xl.p-4 .w-8.h-8 {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
    }
    #home-mobile-content .bg-white.rounded-2xl.p-4 .text-sm.font-extrabold {
        font-size: 15px !important;
    }
    /* Promo list grid: 1 kolom (ikuti mobile), kartu lebih besar */
    #home-promos-list {
        gap: 0.75rem !important;
    }

    /* ===== DASHBOARD — toolbar arranged ke 4 baris rapi (tablet) =====
       Baris 1: tab menu (Insight, Report Titik, Forecast, Report Harian)
       Baris 2: periode (Harian, Bulanan, Tahunan, Semua)
       Baris 3: pilih bulan, tahun, semua marketing
       Baris 4: shortcut Report Visit + Guide                          */

    /* Paksa wrapper toolbar menjadi kolom (4 baris) di tablet,
       menimpa Tailwind `sm:flex-row`. */
    #view-dashboard > .bg-white.px-3.py-2 > .flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* ---- Baris 1: tab menu full-width merata ---- */
    #view-dashboard .flex.gap-1.bg-gray-100 {
        display: flex !important;
        width: 100% !important;
        gap: 0.375rem !important;
        padding: 0.375rem !important;
        background: #f3f4f6 !important;
    }
    #view-dashboard .flex.gap-1.bg-gray-100 #dash-tab-insight,
    #view-dashboard .flex.gap-1.bg-gray-100 #dash-tab-titik,
    #view-dashboard .flex.gap-1.bg-gray-100 #dash-tab-forecast,
    #view-dashboard .flex.gap-1.bg-gray-100 #dash-tab-progress {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 52px !important;
        padding: 0.6rem 0.5rem !important;
        font-size: 12px !important;
        text-align: center;
    }
    /* Munculkan tab Report Harian yang tadinya hidden */
    #view-dashboard .flex.gap-1.bg-gray-100 #dash-tab-progress {
        display: flex !important;
    }

    /* ---- Baris 2: periode (Harian, Bulanan, Tahunan, Semua) ----
       Hanya ditata saat TIDAK ber-class .hidden (JS menyembunyikan
       tombol ini untuk tab Report Titik & Forecast). Guna `.hidden`
       dibiarkan menang -> jangan paksa display !important. */
    #view-dashboard #dash-period-mode-group:not(.hidden) {
        width: 100% !important;
        display: flex !important;
    }
    #view-dashboard #dash-period-mode-group button {
        flex: 1 1 0 !important;
        min-width: 0;
        min-height: 44px !important;
        padding: 0.55rem 0.5rem !important;
        font-size: 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ---- Baris 3: pilih bulan, tahun, semua marketing ---- */
    /* Jangan paksa `display` pada #dash-month-nav di sini:
       JS (updateDashToolbarForTab) mengatur inline flex/none per tab,
       dan inline selalu menang atas stylesheet non-important. */
    #view-dashboard #dash-month-nav {
        flex: 1 1 auto !important;
        gap: 0.375rem !important;
        min-width: 0;
    }
    #view-dashboard #dash-month-nav select,
    #view-dashboard #dash-filter-year,
    #view-dashboard #dash-filter-marketing {
        flex: 1 1 0 !important;
        min-width: 0;
        min-height: 44px !important;
        padding: 0.5rem 0.5rem !important;
        font-size: 13px !important;
    }
    #view-dashboard #dash-month-nav button {
        min-height: 44px !important;
    }
    /* Dropdown Semua Marketing: hanya ditata saat TIDAK ber-class .hidden.
       JS mengontrol tampil/sembunyi per tab & role -> jangan paksa display. */
    #view-dashboard #dash-filter-marketing:not(.hidden) {
        display: inline-flex !important;
    }

    /* ---- Baris 4: shortcut Report Visit + Guide ---- */
    #view-dashboard #dash-quick-actions {
        width: 100% !important;
        display: flex !important;
    }
    #view-dashboard #dash-quick-actions button {
        flex: 1 1 0 !important;
        min-width: 0;
        min-height: 44px !important;
        padding: 0.5rem 0.5rem !important;
        font-size: 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ===== BARIS TOOLBAR PER TAB =====
        * Report Titik  : baris1 = bulan + tahun (full), baris2 = shortcut("Report Titik") + Guide (full).
        * Forecast      : dropdown bulan ("Semua Bulan") + Guide -> SATU baris, kiri/kanan maks.
       JS memilih mana yang tampil per tab (class `.hidden`). Deteksi tab aktif
       lewat tombol yang ber-class `bg-primary`. Murni CSS tablet (768-1279px). */
    /* Forecast: pecahkan `#dash-quick-actions` agar tombol guide bergabung
       jadi flex item baris yang sama (bulan + guide satu baris). */
    #view-dashboard:has(#dash-tab-forecast.bg-primary) #dash-quick-actions {
        display: contents !important;
    }
    /* Kontainer toolbar harus melebar penuh (abaikan `sm:ml-auto`) supaya
       item bulan/tahun/shortcut/guide benarbenar mengisi kiri-kanan. */
    #view-dashboard:has(#dash-tab-titik.bg-primary) .sm\:ml-auto,
    #view-dashboard:has(#dash-tab-forecast.bg-primary) .sm\:ml-auto {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: stretch !important;
    }
    /* Semua kolom mengisi kiri-kanan merata (flex-basis 0) pada tab aktif */
    #view-dashboard:has(#dash-tab-titik.bg-primary) #dash-month-nav,
    #view-dashboard:has(#dash-tab-titik.bg-primary) #dash-filter-year,
    #view-dashboard:has(#dash-tab-forecast.bg-primary) #dash-fc-period-sel,
    #view-dashboard:has(#dash-tab-forecast.bg-primary) #dash-quick-actions button {
        flex: 1 1 0 !important;
        min-width: 0;
        text-align: center;
    }
    /* Report Titik: baris1 = bulan + tahun (basis 0, isi kiri-kanan);
       baris2 (flex-basis 100% -> pindah baris baru) = shortcut + Guide. */
    #view-dashboard:has(#dash-tab-titik.bg-primary) #dash-quick-actions {
        width: 100% !important;
        display: flex !important;
        flex: 1 0 100% !important;
    }
    #view-dashboard:has(#dash-tab-titik.bg-primary) #dash-quick-actions button {
        flex: 1 1 0 !important;
        min-width: 0;
        text-align: center;
        min-height: 44px;
    }
    /* Dropdown bulan (titik) & dropdown bulan forecast melebar penuh kolomnya */
    #view-dashboard:has(#dash-tab-titik.bg-primary) #dash-month-nav select,
    #view-dashboard:has(#dash-tab-forecast.bg-primary) #dash-fc-period-sel {
        width: 100% !important;
        min-height: 44px;
    }
    /* Nav bulan (chevron) & tombol-guide tingginya konsisten */
    #view-dashboard:has(#dash-tab-titik.bg-primary) #dash-month-nav > button,
    #view-dashboard:has(#dash-tab-forecast.bg-primary) #dash-quick-actions button {
        min-height: 44px;
    }

    /* ===== REPORT HARIAN (progress): shortcut "Report Visit" + Guide =
       menjadi satu baris penuh, lebar maksimal kiri-kanan. */
    #view-dashboard:has(#dash-tab-progress.bg-primary) .sm\:ml-auto {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: stretch !important;
    }
    #view-dashboard:has(#dash-tab-progress.bg-primary) #dash-quick-actions {
        width: 100% !important;
        display: flex !important;
        flex: 1 1 0 !important;
    }
    #view-dashboard:has(#dash-tab-progress.bg-primary) #dash-quick-actions button {
        flex: 1 1 0 !important;
        min-width: 0;
    }

    /* ===== DASHBOARD > INSIGHT: Chart Data =====
       Judul rata tengah + tombol Marketing/Per Area rata tengah.
       Perbesar blok kotak chart & tombol halaman (pagination). */
    /* Header row jadi kolom & rata tengah (dideteksi lewat tombol #cd-btn-mkt) */
    #dash-panel-insight .flex.flex-wrap:has(#cd-btn-mkt) {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-align: center !important;
    }
    #dash-panel-insight #chart-data-head {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        display: block !important;
    }
    #dash-panel-insight .flex.flex-wrap:has(#cd-btn-mkt) > .flex.gap-1 {
        width: max-content !important;
        align-self: center !important;
        margin: 0 auto !important;
    }
    #dash-panel-insight .flex.flex-wrap:has(#cd-btn-mkt) > .flex.gap-1 #cd-btn-mkt,
    #dash-panel-insight .flex.flex-wrap:has(#cd-btn-mkt) > .flex.gap-1 #cd-btn-area {
        min-height: 42px;
    }
    /* Pastikan pagination chart selalu tampil & rata tengah */
    #dash-panel-insight #chart-data-pagination {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    /* Perbesar tombol halaman (1/2/3/...) */
    #dash-panel-insight #chart-data-pagination button {
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 0.5rem !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Perbesar tinggi blok chart */
    #dash-panel-insight #chart-marketing-category-wrap {
        min-width: 100% !important;
    }
    #dash-panel-insight .relative.h-72 {
        height: 24rem !important;
    }

    /* ===== DASHBOARD > INSIGHT: Pencapaian Realisasi Target Event =====
       Judul jadi 1 baris di tengah; tombol Semua & Per Area Induk
       ditaruh di bawahnya dan rata tengah. */
    #dash-panel-insight .flex:has(#kpi-events-btn-all) {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-align: center !important;
    }
    #dash-panel-insight .flex:has(#kpi-events-btn-all) h3 {
        width: 100% !important;
        text-align: center !important;
    }
    #dash-panel-insight .flex:has(#kpi-events-btn-all) > .flex.gap-1 {
        width: max-content !important;
        align-self: center !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    /* ===== DASHBOARD > REPORT TITIK: Grafik Progress Achieve =====
       Judul + tombol Bar/Line diperbesar; blok chart dipertinggi;
       tombol halaman (pagination) diperbesar agar jelas terlihat. */
    #dash-panel-titik .bg-white.rounded-2xl h3 {
        font-size: 15px !important;
        letter-spacing: 0.08em;
    }
    /* Grup tombol Bar & Line: lebih pilih, tinggi konsisten */
    #dash-panel-titik .flex.items-center.justify-center.gap-1.bg-gray-100 {
        padding: 0.3rem !important;
        gap: 0.375rem !important;
    }
    #dash-panel-titik #dash-achieve-bar,
    #dash-panel-titik #dash-achieve-line {
        flex: 1 1 0 !important;
        min-width: 90px !important;
        min-height: 44px !important;
        padding: 0 1rem !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    /* Pagination tampil penuh & rata tengah */
    #dash-panel-titik #achieve-chart-pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        min-height: 44px !important;
    }
    #dash-panel-titik #achieve-chart-pagination button {
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 0.5rem !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    /* Blok canvas dipertinggi (Chart.js responsive ikut parent) */
    #dash-panel-titik div[style*="position:relative;height:260px"] {
        height: 28rem !important;
        min-height: 448px !important;
    }

    /* ===== DASHBOARD > REPORT TITIK: Tabel Summary per Area =====
       (berada di bawah "Grafik Progress Titik"). Diperbesar + dibuat
       kotak-kotak penuh (setiap cell punya border) agar mudah dibaca. */
    #dash-panel-titik #dash-titik-area-summary {
        border: 1px solid #e5e7eb !important;
        border-radius: 1rem !important;
        overflow-x: auto !important;
    }
    #dash-panel-titik #dash-titik-area-summary table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 0.9rem !important;
        min-width: 420px !important;
    }
    #dash-panel-titik #dash-titik-area-summary th,
    #dash-panel-titik #dash-titik-area-summary td {
        padding: 0.8rem 1rem !important;
        border: 1px solid #e5e7eb !important;
        white-space: nowrap !important;
    }
    #dash-panel-titik #dash-titik-area-summary thead th {
        background: #f3f4f6 !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.05em;
    }
    #dash-panel-titik #dash-titik-area-summary tbody tr:nth-child(even) {
        background: #f9fafb !important;
    }
    #dash-panel-titik #dash-titik-area-summary tbody tr:last-child {
        background: #eef2ff !important;
        font-weight: 700 !important;
    }

    /* ===== DASHBOARD > REPORT TITIK: Ranking Achievement per Area =====
       Di tablet, kartu area disusun 2 per baris (2 kolom). Jika jumlah kartu
       ganjil, kartu terakhir otomatis mengisi satu-satunya kolom di baris
       akhir (flex-wrap). Kartu memakai inline `flex:1;min-width:100px`
       sehingga di-override dengan !important (menang atas inline style). */
    #dash-panel-titik #dash-titik-charts-row {
        flex-wrap: wrap !important;
    }
    #dash-panel-titik #dash-titik-charts-row > div[style*="flex:1"] {
        flex: 0 0 calc(50% - 6px) !important;
        min-width: 0 !important;
    }

    /* ===== DASHBOARD > REPORT TITIK: Pagination Perbandingan Tahun Lalu =====
       Per-3-user di tablet agar chart lebih besar. Tombol halaman di tengah. */
    #dash-compare-pagination {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }
    #dash-compare-pagination .flex {
        display: inline-flex !important;
        align-items: center !important;
    }
    #dash-compare-pagination button {
        min-width: 44px !important;
        height: 44px !important;
        padding: 0 0.75rem !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        border-radius: 10px !important;
        border: 1px solid #e5e7eb !important;
        background: #ffffff !important;
        color: var(--tw-primary, #2b3991) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #dash-compare-pagination button[disabled] {
        opacity: 0.35 !important;
        cursor: default !important;
    }
    #dash-compare-pagination span {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #374151 !important;
    }

    /* ===== DASHBOARD > REPORT TITIK: Perbandingan Tahun Lalu =====
       Di tablet, chart dipertinggi & label di atas bar + teks "Total vs"
       diperbesar agar jelas terbaca saat presentasi. */
    #dash-titik-compare-wrap {
        height: 30rem !important;
        min-height: 480px !important;
    }
    #dash-titik-compare-wrap canvas {
        max-height: 100% !important;
    }
    #dash-compare-summary {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: #374151 !important;
    }
    #dash-compare-summary strong {
        font-size: 1.05rem !important;
    }
    #dash-compare-summary span {
        font-size: 1rem !important;
    }

    /* ===== REPORT VISIT TOOLBAR (tablet): filter disusun 3 baris =====
       Baris 1: Bulanan / Tahunan / Semua (lebar penuh, kiri-kanan).
       Baris 2: Pilih Bulan + Tahun (lebar penuh, kiri-kanan).
       Baris 3: Dropdown Marketing (lebar penuh, kiri-kanan). */
    #view-visit .bg-white.px-4.py-2.5.rounded-xl > .flex {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    /* Grup filter (periode + bulan/tahun + marketing) ambil penuh baris sendiri */
    #view-visit .bg-white.px-4.py-2.5.rounded-xl > .flex > .flex.flex-wrap.items-center.gap-1.5 {
        flex: 0 0 100% !important;
        min-width: 0 !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    /* Blok periode (Bulanan/Tahunan/Semua): lebar penuh baris 1, tombol merata */
    #view-visit .bg-white.px-4.py-2.5.rounded-xl .flex.items-center.bg-gray-100.rounded-lg.p-0.5 {
        flex: 0 0 100% !important;
        width: 100% !important;
        display: flex !important;
        min-height: 52px !important;
        padding: 0.375rem !important;
    }
    #view-visit #vp-mode-month,
    #view-visit #vp-mode-year,
    #view-visit #vp-mode-all {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 52px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    /* Baris 2: Pilih Bulan + Tahun membagi lebar kiri-kanan */
    #view-visit #vp-filter-month,
    #view-visit #vp-filter-year {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 52px !important;
        font-size: 14px !important;
        padding: 0.5rem 0.75rem !important;
    }
    /* Label periode ringkas disembunyikan di tablet (layout 3 baris rapi) */
    #view-visit #vp-period-label {
        display: none !important;
    }
    /* Baris 3: Dropdown Marketing lebar penuh kiri-kanan */
    #view-visit #vp-marketing-filter-wrap {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-height: 52px !important;
    }
    #view-visit #vp-marketing-filter-wrap select {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 52px !important;
        font-size: 14px !important;
    }

    /* ===== REPORT VISIT ACTION BUTTONS (tablet) =====
       Sync, Filter, Analisis, Kalender, Log, Target, Setting:
       lebar kiri-kanan mentok & merata (flex:1) di tablet.
       Jangkar via :has(#btn-sync-visits) karena id unik & reliable
       (tidak bergantung pada multi-class Tailwind yang bisa ter-purge). */
    #view-visit .grid:has(#btn-sync-visits) {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin-left: 0 !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    #view-visit .grid:has(#btn-sync-visits) > div,
    #view-visit .grid:has(#btn-sync-visits) > button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 52px !important;
    }
    #view-visit .grid:has(#btn-sync-visits) > div > button {
        width: 100% !important;
        min-height: 52px !important;
    }

    /* ===== REPORT VISIT TABLE (tablet): scroll horizontal, lebar tetap =====
       Tabel tetap selebar minimum (seperti desktop) sehingga semua kolom
       terlihat lengkap, dan kontainer bisa digeser kiri-kanan. */
    #view-visit .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #view-visit .overflow-x-auto table {
        width: 100% !important;
        min-width: 1100px !important;
        white-space: nowrap !important;
        table-layout: auto !important;
    }
    #view-visit .overflow-x-auto th,
    #view-visit .overflow-x-auto td {
        white-space: nowrap !important;
    }

    /* ===== POSTS (tablet): samakan dengan layout mobile =====
       Di mobile, posts-layout 1 kolom. Di tablet, <style> inline content.html
       @media(min-width:960px) mengubahnya jadi 3 kolom desktop (260/1fr/300)
       sehingga kolom kiri sempit & slider area mungil. Di tablet paksa kembali
       ke 1 kolom + slider area (seperti mobile). */
    #view-posts {
        height: auto !important;
        overflow: visible !important;
    }
    #view-posts .posts-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        align-items: start !important;
        height: auto !important;
        flex: none !important;
        min-height: 0 !important;
        margin-top: 12px !important;
    }
    #view-posts .posts-col-center {
        overflow: visible !important;
        min-height: 0 !important;
        padding-right: 0 !important;
    }
    #view-posts .posts-col {
        overflow: visible !important;
        min-height: 0 !important;
    }
    #view-posts #posts-area-thumb-box {
        display: none !important;
    }
    #view-posts #posts-area-slider-wrap {
        display: block !important;
    }
    #view-posts .posts-slider-arrow {
        display: flex !important;
    }

    /* ==== POSTS AREA SLIDER (tablet) =====
       Rule slider di mobile.css hanya aktif di <768px (@media max-width:767px).
       Di tablet rule itu tidak berlaku -> thumbnail menumpuk besar. Disalin
       ke sini agar slider tampil sama seperti mobile (1 baris, bisa scroll). */
    #view-posts .posts-area-slider-wrap {
        position: relative !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
        border-radius: 18px !important;
        padding: 0.5rem 2rem !important;
    }
    #view-posts .posts-area-slider {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc((100% - 1.5rem) / 4) !important;
        gap: 0.5rem !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    #view-posts .posts-area-slider::-webkit-scrollbar {
        display: none !important;
    }
    #view-posts .posts-area-thumb-item {
        scroll-snap-align: start !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        border: 1px solid #e5e7eb !important;
        background: #f8fafc !important;
        flex: none !important;
        position: relative !important;
        min-width: 0 !important;
    }
    #view-posts .posts-area-thumb-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    #view-posts .posts-area-thumb-item.active {
        border-color: var(--tw-primary, #2b3991) !important;
        box-shadow: 0 0 0 2px rgba(43,57,145,0.14) !important;
        transform: translateY(-1px) !important;
    }
    #view-posts .posts-slider-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        color: #64748b !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
        z-index: 2 !important;
    }
    #view-posts .posts-slider-arrow-left {
        left: 0.5rem !important;
    }
    #view-posts .posts-slider-arrow-right {
        right: 0.5rem !important;
    }
    #view-posts .posts-slider-arrow:disabled {
        opacity: 0.35 !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
    }
    #view-posts .posts-area-slider-wrap {
        margin-bottom: 0 !important;
    }

    /* ===== FORECAST (tablet): samakan dengan layout mobile =====
       Tabel desktop disembunyikan, daftar mobile (#forecast-mobile-list)
       ditampilkan & header rata tengah. Render list dipicu JS
       (renderForecastMobileList kini aktif <1280px). */
    #view-forecast > .rounded-2xl:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
    }
    #view-forecast > .rounded-2xl:first-child > div:first-child {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    #view-forecast > .rounded-2xl:first-child > div:first-child h2 {
        justify-content: center !important;
    }
    #view-forecast > .rounded-2xl:first-child .flex.items-center.gap-2.flex-wrap {
        width: 100% !important;
        justify-content: stretch !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-top: 0.25rem !important;
    }
    /* Tombol aksi (Bulan, Target, Sync, dst): merata penuh kiri-kanan */
    #view-forecast > .rounded-2xl:first-child .flex.items-center.gap-2.flex-wrap > button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    #view-forecast .rounded-2xl.bg-white.border:has(> #forecast-table-wrap),
    #view-forecast > div:has(#forecast-table-wrap) {
        display: none !important;
    }
    #forecast-mobile-list {
        display: flex !important;
    }

    /* ===== DASHBOARD > FORECAST: Target, Progress & Realisasi Per Marketing =====
       Judul rata tengah; tombol Semua/Per Bulan + Bar/Line rata tengah & diperbesar;
       pagination diperbesar; chart dipertinggi. Rendering per-halaman (3 marketing)
       aktif via JS (window < 1280). */
    #view-dashboard .bg-white:has(#dash-fc-per-mkt-chart) .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        text-align: center !important;
    }
    #view-dashboard .bg-white:has(#dash-fc-per-mkt-chart) h3 {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    #view-dashboard .bg-white:has(#dash-fc-per-mkt-chart) .flex.items-center.justify-between > div:last-child {
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
    /* Tombol Semua/Per Bulan + Bar/Line: perbesar */
    #view-dashboard .bg-white:has(#dash-fc-per-mkt-chart) .flex.gap-1 button,
    #view-dashboard .bg-white:has(#dash-fc-per-mkt-chart) button[id^="dash-fc-mkt"] {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 0 0.9rem !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    #view-dashboard .bg-white:has(#dash-fc-per-mkt-chart) #dash-fc-mkt-month-sel {
        min-height: 44px !important;
        font-size: 14px !important;
    }
    /* Pagination: perbesar */
    #view-dashboard #dash-fc-per-mkt-pagination {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        min-height: 44px !important;
    }
    #view-dashboard #dash-fc-per-mkt-pagination button {
        min-width: 44px !important;
        height: 44px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    /* Chart dipertinggi */
    #view-dashboard .bg-white:has(#dash-fc-per-mkt-chart) .relative.h-72 {
        height: 28rem !important;
        min-height: 448px !important;
    }

    /* ===== DASHBOARD > FORECAST: Target, Progress & Realisasi Per Area Induk =====
       Konsisten dgn per-Marketing: judul & tombol rata tengah, diperbesar, pagination besar. */
    #view-dashboard .bg-white:has(#dash-fc-per-area-chart) .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        text-align: center !important;
    }
    #view-dashboard .bg-white:has(#dash-fc-per-area-chart) h3 {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    #view-dashboard .bg-white:has(#dash-fc-per-area-chart) .flex.items-center.justify-between > div:last-child {
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
    #view-dashboard .bg-white:has(#dash-fc-per-area-chart) .flex.gap-1 button,
    #view-dashboard .bg-white:has(#dash-fc-per-area-chart) button[id^="dash-fc-area"] {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 0 0.9rem !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    #view-dashboard .bg-white:has(#dash-fc-per-area-chart) #dash-fc-area-month-sel {
        min-height: 44px !important;
        font-size: 14px !important;
    }
    #view-dashboard #dash-fc-per-area-pagination {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        min-height: 44px !important;
    }
    #view-dashboard #dash-fc-per-area-pagination button {
        min-width: 44px !important;
        height: 44px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    #view-dashboard .bg-white:has(#dash-fc-per-area-chart) .relative.h-72 {
        height: 28rem !important;
        min-height: 448px !important;
    }

    /* ===== REPORTING > REPORT TITIK (view-titik-event) — samakan dgn mobile =====
       Header control bar jadi 2 baris, tabel diganti daftar mobile, tombol aksi di layar. */
    #view-titik-event > .bg-white {
        padding: 0.5rem;
    }

    /* Main flex — 2 rows */
    #view-titik-event > .bg-white > .flex {
        gap: 0.375rem;
        flex-wrap: wrap;
    }

    /* Hide title & dividers */
    #view-titik-event > .bg-white > .flex > .flex-shrink-0:first-child {
        display: none !important;
    }
    #view-titik-event > .bg-white > .flex > div.w-px {
        display: none !important;
    }

    /* Row 1: Nav arrows — compact */
    #view-titik-event > .bg-white > .flex > button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        flex-shrink: 0;
        font-size: 15px;
    }

    /* Row 1: Month/Year selects — flex grow, diperbesar */
    #titik-month-sel,
    #titik-year-sel {
        flex: 1;
        min-height: 40px;
        min-width: 0;
        padding: 0.375rem 0.5rem;
        font-size: 13px;
        font-weight: 700;
        border-radius: 0.5rem;
    }

    /* Timer period (chevron + month + year chevron) dipaksa 1 baris ke kanan */
    #view-titik-event > .bg-white > .flex > button:first-of-type {
        order: 1;
    }
    #titik-month-sel,
    #titik-year-sel {
        order: 2;
    }
    #view-titik-event > .bg-white > .flex > button:has(i.fa-chevron-right) {
        order: 3;
    }

    /* Sembunyikan dropdown zoom desktop + reset-nya di tablet */
    #view-titik-event .flex.items-center.gap-1.flex-shrink-0 {
        display: none !important;
    }

    /* Tombol zoom mobile — baris sendiri, full width, tombol diperbesar */
    #titik-zoom-buttons-mobile {
        display: flex !important;
        order: 4;
        width: 100%;
        flex-wrap: nowrap;
        gap: 0.375rem;
    }
    #titik-zoom-buttons-mobile button {
        white-space: nowrap;
        min-height: 44px;
        font-size: 13px;
        font-weight: 800;
        border-radius: 0.75rem;
    }

    /* Row 2: Action buttons — full width, icon-only diperbesar */
    #view-titik-event > .bg-white > .flex > .ml-auto {
        order: 5;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: center;
        align-items: center;
    }
    #view-titik-event > .bg-white > .flex > .ml-auto > button,
    #view-titik-event > .bg-white > .flex > .ml-auto > div > button {
        width: 42px;
        height: 42px;
        min-width: 42px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 0.75rem;
    }
    #view-titik-event > .bg-white > .flex > .ml-auto > button i,
    #view-titik-event > .bg-white > .flex > .ml-auto > div > button i {
        font-size: 15px !important;
    }
    #view-titik-event > .bg-white > .flex > .ml-auto > div.relative {
        position: relative;
        flex-shrink: 0;
    }

    /* Filter area "SEMUA AREA" (pill dropdown) → icon only; tampilkan tombol popup filter */
    #view-titik-event .sm\:flex.items-center.relative:has(#titik-area-filter) {
        display: none !important;
    }
    #view-titik-event #titik-filter-wrap {
        display: block !important;
    }
    #view-titik-event #titik-filter-wrap button {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 0.75rem;
    }
    #view-titik-event #titik-filter-wrap button i {
        font-size: 15px !important;
    }

    /* Mobile action bar Filter Area tampil di tablet */
    #view-titik-event .sm\:hidden {
        display: flex !important;
    }

    /* Tabel titik: nonaktifkan sticky, scroll-x, sel/input lebih kecil */
    #view-titik-event #titik-main-table th.sticky-col-header,
    #view-titik-event #titik-main-table td.sticky-col,
    #view-titik-event #titik-main-table th[style*="position:sticky"],
    #view-titik-event #titik-main-table td[style*="position:sticky"] {
        position: static !important;
        z-index: auto !important;
    }
    #view-titik-event #titik-main-table thead tr:first-child,
    #view-titik-event #titik-main-table thead tr:nth-child(2),
    #view-titik-event #titik-main-table tbody tr:last-child {
        position: static !important;
    }
    #view-titik-event #titik-main-table th,
    #view-titik-event #titik-main-table td {
        white-space: nowrap;
    }
    #view-titik-event #titik-main-table input[type="number"] {
        width: 36px !important;
        font-size: 10px !important;
    }
    #view-titik-event #titik-main-table td {
        padding: 2px 1px;
    }

    /* Warning banner — compact */
    #view-titik-event > .text-\[10px\].font-bold.text-amber-600 {
        font-size: 9px;
        padding: 0.375rem 0.5rem;
    }

    /* Titik MOBILE — ganti tabel desktop dengan daftar khusus mobile */
    #view-titik-event #titik-scroll-wrap {
        display: none !important;
    }
    #view-titik-event #titik-table-card {
        display: none !important;
    }
    #titik-mobile-list {
        display: flex !important;
    }
    #titik-mobile-list .rounded-xl > .grid {
        min-height: 3.4rem;
    }
    /* Sub Area per marketing — perbesar label sub-area */
    #titik-mobile-list .bg-white.rounded-xl > .flex > p.text-right {
        font-size: 13px !important;
        max-width: 150px;
    }
}
/* ===== EVENT: jam harus selalu tampil lengkap, jangan terpotong jadi "..." ===== */
#view-event .ev-time { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }