/* ==========================================================================
   07 RESPONSIF — tata letak berbeda per perangkat, bukan desktop dikecilkan.
   Desktop >= 1200 : sidebar penuh mengambang
   Laptop/tablet 768-1199 : sidebar rail (ikon), bisa dibuka penuh
   HP < 768 : bilah status + island + tab bar mengambang, tanpa sidebar
   ========================================================================== */

/* Sidebar yang dibuka penuh (tablet, HP, halaman kasir) harus berada DI ATAS
   scrim. Dulu scrim (z 80) menutupi sidebar (z 40): seluruh layar jadi buram
   dan menunya tidak bisa diklik. */
html.ios-side-full .ios-side { z-index: var(--z-panel); }

@media (max-width: 1199px) and (min-width: 768px) {
    html:not(.ios-side-full) .ios-side { width: var(--side-rail); }
    html:not(.ios-side-full) .ios-side :is(.ios-side-brand, .ios-side-search, .ios-side-group-label, .lbl, .ios-side-user, .ios-side-extra) { display: none; }
    html:not(.ios-side-full) .ios-side-head { flex-direction: column; }
    html:not(.ios-side-full) .ios-side-link { justify-content: center; padding: 6px; }
    html:not(.ios-side-full) .ios-side-link .ios-tile { --size: 36px; border-radius: 10px; }
    html:not(.ios-side-full) .ios-side-foot { justify-content: center; }
    .ios-main { padding-left: calc(var(--side-rail) + 28px + var(--sp-5)); padding-right: var(--sp-5); }
    /* Dibuka penuh: melayang di atas konten dengan scrim, konten tidak bergeser. */
    html.ios-side-full .ios-side { box-shadow: var(--glass-hi), var(--sh-4); }
}

@media (max-width: 767px) {
    .ios-side { display: none; }
    html.ios-side-full .ios-side {
        display: flex;
        width: min(320px, calc(100vw - 28px));
        z-index: var(--z-panel);
    }
    .ios-statusbar { display: flex; }
    .ios-topbtns { display: none; }
    .ios-tabbar { display: grid; }
    .ios-main {
        padding: calc(var(--safe-t) + 64px) 16px calc(var(--tabbar-h) + var(--safe-b) + 34px);
    }
    html.ios-side-mini .ios-main { padding-left: 16px; }
    .ios-island { top: calc(var(--safe-t) + 10px); width: 124px; height: 36px; }
    /* Jam sudah ada di bilah status; pulau HP cukup titik koneksi. */
    .ios-island .ios-island-lead > span:not(.ios-island-dot):not(.ios-island-eq), .ios-island .ios-island-trail { display: none; }
    .ios-navhead { margin-bottom: var(--sp-5); }
    .ios-navhead-actions { width: 100%; }
    .ios-navhead-actions > .ios-btn:not(.ios-btn--icon) { flex: 1 1 auto; }

    /* Sheet menjadi bottom sheet dengan pegangan. */
    dialog.ios-sheet {
        margin: auto 0 0;
        width: 100vw;
        max-width: 100vw;
        max-height: 92vh;   /* peramban tanpa dvh */
        max-height: 92dvh;
        border-radius: 30px 30px 0 0;
        border-bottom: 0;
    }
    dialog.ios-sheet[open] { animation: ios-sheet-naik var(--t-slow) var(--ease-out); }
    dialog.ios-sheet.is-closing { animation: ios-sheet-turun var(--t-base) var(--ease-io) forwards; }
    .ios-grabber { display: block; }
    /* Isi lembar yang tidak punya kaki: sisakan ruang untuk garis home iPhone
       dan bilah bawah Safari/Chrome, supaya baris terakhir tidak terpotong. */
    dialog.ios-sheet > .ios-sheet-body:last-child,
    dialog.ios-sheet > form > .ios-sheet-body:last-child { padding-bottom: calc(32px + var(--safe-b)); }

    .ios-panel { padding: calc(var(--safe-t) + 60px) 14px calc(var(--safe-b) + 20px); }
    .ios-panel-inner { width: 100%; }
    .ios-cc { gap: 12px; }

    .ios-app .topbar h1 { font-size: var(--fs-large); }
    .ios-app .topbar-actions { width: 100%; }
    .ios-app :is(.form-control, .form-select) { font-size: 16px; }   /* cegah zoom iOS */
    .ios-input, .ios-select, .ios-textarea { font-size: 16px; }
}

/* Halaman cetak: tanpa kerangka, tanpa kaca. */
@media print {
    .ios-wall, .ios-side, .ios-tabbar, .ios-island, .ios-topbtns, .ios-statusbar, .ios-panel, .ios-scrim, .ios-toasts { display: none !important; }
    .ios-main { padding: 0 !important; }
    html[data-ui="ios26"] body { background: #fff !important; color: #000 !important; }
    [class*="ios-mat-"], .ios-card, .ios-group, .ios-widget, .ios-app .card { box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #fff !important; }
}

/* HP: lembar bawah (rincian kasir Pantau, filter, dsb.) dipasang langsung
   ke tepi bawah layar YANG TERLIHAT dan tingginya dihitung dari layar itu
   (persen), bukan dari vh/dvh. Di sebagian HP, vh/dvh menghitung layar
   seolah bilah alamat/bilah bawah browser tidak ada, sehingga bagian bawah
   lembar jatuh di belakang bilah browser dan isinya tampak terpotong. */
@media (max-width: 767px) {
    dialog.ios-sheet {
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(100% - var(--safe-t) - 40px);
    }
    dialog.ios-sheet > .ios-sheet-body {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    dialog.ios-sheet > .ios-sheet-body:last-child,
    dialog.ios-sheet > form > .ios-sheet-body:last-child { padding-bottom: calc(48px + var(--safe-b)); }
}