/* ============================================================
   responsive.css — seluruh aturan responsif & tampilan mobile.
   Dimuat SETELAH app.css. Ubah perilaku layar kecil/tablet di sini saja.
   ============================================================ */

/* -- Lebar container berjenjang (gaya Bootstrap) -- */
@media (min-width: 768px)  { .shell-container { width: 750px; } }
@media (min-width: 992px)  { .shell-container { width: 970px; } }
@media (min-width: 1200px) { .shell-container { width: 1170px; } }
@media (min-width: 1400px) { .shell-container { width: 1320px; } }
@media (min-width: 1600px) { .shell-container { width: 1570px; } }

/* -- Cegah scroll horizontal (penyebab utama tampilan "meluber") -- */
html, body { max-width: 100%; overflow-x: hidden; }
.shell-container { max-width: 100%; }
img { max-width: 100%; }

/* ============================================================
   Tablet ke bawah (≤ 991.98px)
   ============================================================ */
@media (max-width: 991.98px) {
    /* Header */
    .brandbar__inner { min-height: 64px; gap: .7rem; }
    .brandbar__brand { gap: .7rem; min-width: 0; }
    .brandbar__brand > span { min-width: 0; }
    .brandbar__logo { width: 42px; height: 42px; }
    .brandbar__logo--img { padding: 4px; }
    .brandbar__logo--img img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .brandbar__eyebrow { font-size: .68rem; }
    .brandbar__title {
        font-size: .92rem; line-height: 1.12; white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .brandbar__utils { gap: .7rem; }
    .brandbar__lang { display: none; }
    .user-menu__meta { display: none; }

    /* Navigasi (collapse) — rapi, padat, berjenjang */
    .mainnav .navbar-collapse {
        border-top: 1px solid var(--border);
        margin-top: 0;
        padding: .2rem 0;
    }
    .mainnav .navbar-nav { gap: 0; padding: 0; }
    .mainnav .nav-item + .nav-item { border-top: 1px solid var(--border); }
    .mainnav .nav-link {
        padding: .5rem .35rem;
        font-size: .85rem;
        border-radius: 0;
        border-left: 3px solid transparent;
    }
    .mainnav .nav-link.active,
    .mainnav .nav-link.show,
    .mainnav .show > .nav-link {
        border-left-color: var(--brand);
        background: var(--brand-soft);
        color: var(--brand-700);
    }
    /* Sub-menu tingkat 1: latar lembut + indentasi */
    .mainnav .dropdown-menu {
        box-shadow: none; border: 0; margin: 0; border-radius: 0;
        padding: .1rem 0 .3rem; background: var(--surface-2);
    }
    .mainnav .dropdown-item,
    .mainnav .dropdown-submenu > .flyout-parent {
        padding: .4rem .35rem .4rem 1.4rem;
        font-size: .8rem;
    }
    /* Sub-menu tingkat 2 (flyout → inline) lebih menjorok */
    .dropdown-submenu > .dropdown-menu {
        position: static; left: auto; display: block;
        box-shadow: none; border: 0; min-width: 0; background: transparent; padding: 0;
    }
    .mainnav .dropdown-submenu > .dropdown-menu .dropdown-item { padding-left: 2.4rem; }
    .dropdown-submenu > .flyout-parent .flyout-caret { transform: rotate(90deg); margin-left: auto; }

    /* CRUD & form */
    .filter-panel { position: static; }
    .crud-toolbar__spacer { display: none; }
    .form-grid { grid-template-columns: 1fr; column-gap: 0; }
    .form-row { grid-template-columns: 1fr; align-items: start; gap: .3rem; min-height: 0; }
}

/* ============================================================
   Ponsel (≤ 767.98px)
   ============================================================ */
@media (max-width: 767.98px) {
    /* Header lebih pendek */
    .brandbar__inner { min-height: 54px; padding-top: .4rem; padding-bottom: .4rem; }
    .brandbar__logo { width: 38px; height: 38px; }
    .brandbar__title { font-size: .84rem; -webkit-line-clamp: 2; }
    .brandbar__eyebrow { font-size: .64rem; }
    .brandbar__utils { gap: .55rem; }
    .user-menu__icon { font-size: 1.2rem; }
    .shell-container { padding-left: .75rem; padding-right: .75rem; }

    /* Rapatkan area & jarak antar-bagian */
    .app-main { padding-top: .8rem; padding-bottom: 1.1rem; }
    .breadcrumb { margin-bottom: .5rem; font-size: .76rem; }
    .page-header { flex-direction: column; align-items: flex-start; gap: .3rem; margin-bottom: .75rem; }
    .page-header__title { font-size: 1.15rem; }
    .page-header__subtitle { font-size: .8rem; }

    /* Toolbar aksi list-view: rapi 2 kolom (search full-width di atas) */
    .page-header__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
    .page-header__actions > .btn,
    .page-header__actions > .dropdown { width: 100%; margin: 0; }
    .page-header__actions > .dropdown > .btn { width: 100%; }
    .page-header__search,
    .page-header__actions > .filter-toggle { grid-column: 1 / -1; max-width: none; }
    .mb-4 { margin-bottom: .9rem !important; }
    .mb-3 { margin-bottom: .7rem !important; }
    .g-3 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
    .row { --bs-gutter-x: .7rem; }

    /* Kartu & panel lebih padat */
    .card { border-radius: .6rem; }
    .card > .card-body,
    .card-body { padding: .8rem !important; }
    .card-header { padding: .6rem .8rem; }
    .p-3 { padding: .8rem !important; }
    .dash-panel__head { padding: .6rem .85rem; font-size: .85rem; }
    .dash-panel__body { padding: .75rem .85rem; }
    .dash-filter { flex-direction: column; align-items: stretch; padding: .75rem .85rem; gap: .55rem; margin-bottom: .8rem; }
    /* Cegah field meregang setinggi 260px (flex-basis vertikal) saat kolom */
    .dash-filter__field { flex: 0 0 auto; min-width: 0; }
    .dash-filter__action { flex: 0 0 auto; }
    .dash-filter__action .btn { width: 100%; }
    .form-section { padding: .75rem 1rem .4rem; margin: .2rem 1rem 0; font-size: .95rem; }
    .form-row { padding: .5rem 1rem; }
    .filter-top { grid-template-columns: 1fr; column-gap: 0; padding: .85rem 1rem .4rem; }
    .filter-top__row { grid-template-columns: 1fr; gap: .25rem; }

    /* Tabel data lebih ringkas + boleh scroll dalam kontainer */
    .datatable > thead th { padding: .4rem .55rem; font-size: .72rem; }
    .datatable > tbody td { padding: .38rem .55rem; font-size: .78rem; }
    .datatable-footer { padding: .55rem .75rem; }

    /* Kartu statistik dashboard */
    .stat-card .card-body { gap: .6rem; padding: .75rem !important; }
    .stat-card .card-body > div { min-width: 0; }
    .stat-card__icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: .55rem; }
    .stat-card__value { font-size: 1.35rem; }
    .stat-card__label {
        font-size: .64rem; letter-spacing: .01em;
        white-space: normal; overflow-wrap: anywhere;
    }
    .stat-tile { min-height: 96px; padding: .9rem 1rem; }
    .stat-tile__value { font-size: 1.6rem; }
    .stat-tile__label { font-size: .78rem; }
    .stat-tile__bg { font-size: 3.2rem; }
    .worklist-item { padding: .55rem .65rem; gap: .6rem; }
    .worklist-item__icon { width: 30px; height: 30px; }
    .chart-holder { height: 240px; }
}

/* -- Launcher sub-sistem -- */
@media (max-width: 640px) {
    .subsystem-grid { grid-template-columns: 1fr; }

    /* Header launcher menumpuk (brand di atas, aksi di bawah) — cegah tumpang tindih */
    .launcher-head { flex-direction: column; align-items: stretch; gap: .85rem; }
    .launcher-head__actions { margin-left: 0; }

    /* Kartu subsistem: ikon berdampingan dengan nama, deskripsi penuh di bawah */
    .subsystem-card {
        grid-template-areas:
            "icon head go"
            "tag  tag  go";
        align-items: center;
        column-gap: .8rem;
        padding: 1.1rem 1.15rem;
    }
    .subsystem-card__icon { width: 46px; height: 46px; border-radius: 13px; font-size: 1.4rem; }
    .subsystem-card__label { font-size: 1rem; }
    .subsystem-card__tagline { margin-top: .45rem; }
}

/* ============================================================
   Ponsel kecil (≤ 480px): kartu statistik menumpuk vertikal
   ============================================================ */
@media (max-width: 480px) {
    .stat-card .card-body { flex-direction: column; align-items: flex-start; gap: .55rem; }
    .stat-card__value { font-size: 1.6rem; }
}

/* -- Cetak -- */
@media print {
    .brandbar, .mainnav, .page-header__actions { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ccc; }
    .app-main { padding: 0; }
}