/* =====================================================================
   MODE APLIKASI — tampilan HP (≤ 760px) & saat dipasang di layar utama.
   Dipakai Dashboard Tenant dan Dashboard Publik, di atas public.css.
   Desktop tidak berubah; semua aturan di bawah ada di dalam media query.

   Isi:
     1. Label tab pendek/panjang
     2. App bar atas (ringkas, ikut safe-area iPhone)
     3. Navigasi bawah (bottom nav) — pengganti tab bar atas
     4. Konten: hero ringkas, ringkasan angka 1 baris, kartu lebih rapat
===================================================================== */

/* ---------- 1. Label tab ---------- */
.pg-tab-short{display:none;}

/* Tombol "Masuk" di navbar Dashboard Publik */
.pg-login-btn{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;text-decoration:none;
  background:#fff;color:var(--blue-800);font-weight:800;font-size:13px;
  border-radius:999px;padding:8px 14px;box-shadow:0 6px 14px -6px rgba(0,0,0,.35);
}
.pg-login-btn svg{width:16px;height:16px;}
.pg-nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}

/* Transisi ganti tab: hanya menjawab aksi pengguna */
.pg-tab-panel.active{animation:am-panel-in .2s ease-out;}
@keyframes am-panel-in{from{opacity:.4;transform:translateY(4px);}to{opacity:1;transform:none;}}

@media (max-width:760px){

  .pg-app{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));min-height:100dvh;}

  /* ---------- 2. App bar ---------- */
  .pg-topbar{position:sticky;top:0;}
  .pg-nav{
    padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;
    min-height:56px;gap:10px;box-shadow:0 2px 12px rgba(15,10,40,.16);
  }
  .pg-nav-logo{width:34px;height:34px;border-radius:10px;}
  .pg-nav-brand-text b{font-size:15.5px;}
  .pg-nav-brand-text span{display:none;}
  .pg-live{padding:0;width:30px;height:30px;justify-content:center;border-radius:50%;}
  .pg-live span:not(.pg-live-dot){display:none;}
  .tn-userbar{gap:8px;}
  .tn-userbar .pg-live{display:flex;}
  .tn-user{padding:3px;}
  .tn-user-name{display:none;}
  .tn-avatar{width:30px;height:30px;font-size:13px;}
  .tn-logout{display:none;}           /* pindah ke tab Akun */
  .pg-login-btn{padding:7px 12px;font-size:12.5px;}

  /* ---------- 3. Navigasi bawah ---------- */
  .pg-tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid #e3e9f3;border-bottom:none;
    box-shadow:0 -8px 24px -18px rgba(15,27,51,.45);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .pg-tabbar-inner{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
    max-width:560px;padding:6px 6px 8px;overflow:visible;justify-content:stretch;
  }
  .pg-tab{
    position:relative;flex:none;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px 2px;border:none;border-radius:0;background:none;box-shadow:none;
    color:#6b7890;font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  .pg-tab::before{
    content:'';position:absolute;top:3px;left:50%;width:54px;height:32px;margin-left:-27px;border-radius:16px;
    background:transparent;transform:scaleX(.6);opacity:0;transition:transform .22s cubic-bezier(.3,.7,.2,1),opacity .18s,background .18s;
  }
  .pg-tab svg{position:relative;z-index:1;width:22px;height:22px;margin:4px 0 2px;stroke-width:2;}
  .pg-tab-full{display:none;}
  .pg-tab-short{display:block;position:relative;z-index:1;}
  .pg-tab.active{background:none;color:var(--blue-800);box-shadow:none;border-color:transparent;}
  .pg-tab.active::before{opacity:1;transform:scaleX(1);background:linear-gradient(120deg,var(--blue-100),var(--violet-100));}
  .pg-tab.active svg{stroke-width:2.4;}
  .pg-tab:active::before{opacity:1;background:#eef2f9;}

  /* ---------- 4. Konten ---------- */
  .pg-main{padding:16px 16px 0;}

  /* Hero jadi banner ringkas berwarna (warna tetap per tab: biru/ungu/teal/amber) */
  .pb-hero,.pk-hero,.pq-hero,.pn-hero{
    padding:18px 18px 18px;border-radius:20px;margin-bottom:14px;box-shadow:none;align-items:flex-start;
  }
  .pb-hero-art,.pk-hero-art,.pq-hero-art,.pn-hero-art{display:block;width:64px;height:64px;margin:-4px -4px 0 0;}
  .pb-hero-eyebrow,.pk-hero-eyebrow,.pq-hero-eyebrow,.pn-hero-eyebrow{
    font-size:12.5px;letter-spacing:0;text-transform:none;margin-bottom:2px;
  }
  .pb-hero-text h1,.pk-hero-text h1,.pq-hero-text h1,.pn-hero-text h1{font-size:21px;}
  .pb-hero-text p,.pk-hero-text p,.pq-hero-text p,.pn-hero-text p{font-size:13px;margin-top:6px;}
  .pq-hero-reset{margin-top:10px;}

  /* Ringkasan angka: satu kartu, sel sejajar, tanpa ikon besar */
  .pb-stats,.pk-stats,.pq-stats{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none;gap:0;
    background:var(--card-bg);border:1px solid #e8eef8;border-radius:18px;box-shadow:var(--shadow-sm);
    padding:4px 2px;margin-bottom:14px;
  }
  .pb-stat,.pk-stat,.pq-stat{
    position:relative;display:block;padding:10px 4px 10px 10px;border:none;box-shadow:none;background:none;border-radius:14px;min-width:0;
  }
  .pb-stat + .pb-stat::before,.pk-stat + .pk-stat::before,.pq-stat + .pq-stat::before{
    content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;background:#e8eef8;
  }
  .pb-stats .pb-stat-ic,.pk-stats .pk-stat-ic,.pq-stats .pq-stat-ic{display:none;}
  .pb-stat-num,.pk-stat-num,.pq-stat-num{font-size:22px;margin:0 0 3px;}
  .pb-stat-label,.pk-stat-label,.pq-stat-label{
    display:flex;align-items:center;gap:4px;font-size:11px;letter-spacing:0;text-transform:none;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .pb-stat-label::before,.pk-stat-label::before,.pq-stat-label::before{
    content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--blue-600);
  }
  .pb-stat > div:last-child,.pk-stat > div:last-child,.pq-stat > div:last-child{display:flex;flex-direction:column-reverse;}
  .pb-stat-sub,.pk-stat-sub,.pq-stat-sub{display:none;}
  .s-lunas .pb-stat-label::before,.s-updated .pk-stat-label::before,.s-tersedia .pq-stat-label::before{background:var(--success-500);}
  .s-menunggu .pb-stat-label::before,.s-pending .pk-stat-label::before{background:var(--warning-500);}
  .s-terlambat .pb-stat-label::before,.s-habis .pq-stat-label::before{background:var(--danger-500);}
  .pk-stat.s-total .pk-stat-label::before{background:var(--violet-600);}
  .pq-stat.s-total .pq-stat-label::before{background:var(--teal-600);}

  /* Cari + filter dalam satu baris */
  .pb-search-row,.pk-search-row,.pq-search-row{flex-wrap:nowrap;gap:8px;margin-bottom:14px;}
  .pb-search,.pk-search,.pq-search{flex:1 1 auto;min-width:0;min-height:46px;padding:10px 14px;border-radius:14px;box-shadow:none;}
  .pb-search input,.pk-search input,.pq-search input{font-size:16px;}
  .pb-filter,.pk-filter,.pq-filter{width:42%;max-width:170px;flex:0 0 auto;}
  .pb-filter select,.pk-filter select,.pq-filter select{
    min-height:46px;border-radius:14px;box-shadow:none;padding:10px 30px 10px 40px;font-size:13.5px;
    text-overflow:ellipsis;white-space:nowrap;
  }
  .pb-filter-ic,.pk-filter-ic,.pq-filter-ic{left:10px;width:24px;height:24px;}
  .pb-filter-chevron,.pk-filter-chevron,.pq-filter-chevron{right:10px;}

  /* Kartu aplikasi (status iuran) — grid rapat: logo | isi | status */
  .pb-list,.pk-list{gap:10px;}
  .pb-app-card{
    display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:start;column-gap:12px;row-gap:0;
    padding:14px;border-radius:18px;box-shadow:none;border-color:#e8eef8;
  }
  .pb-app-logo{width:44px;height:44px;}
  .pb-app-logo-fallback{font-size:16px;}
  .pb-app-body b{font-size:15px;line-height:1.3;}
  .pb-app-fee-label{display:none;}
  .pb-app-fee{font-size:15.5px;margin-top:4px;}
  .pb-app-due{margin-top:3px;font-size:12px;}
  .pb-status-pill{margin:0;padding:5px 10px;font-size:11.5px;gap:5px;}
  .pb-status-pill svg{width:12px;height:12px;}
  .tn-sub{grid-column:1 / -1;margin-top:12px;padding-top:4px;border-top:1px solid #eef2f9;}
  .tn-sub .pk-history-toggle{margin-top:6px;padding:6px 0 2px;}

  /* Kartu kebijakan */
  .pk-app-card{padding:14px;box-shadow:none;}
  .pk-app-card-top{flex-wrap:nowrap;gap:12px;}
  .pk-app-logo{width:44px;height:44px;}
  .pk-app-body b{font-size:15px;}
  .pk-status-pill{margin-left:0;padding:5px 10px;font-size:11.5px;}

  /* Kartu kuota */
  .pq-grid{grid-template-columns:1fr;gap:10px;}
  .pq-card{padding:14px;box-shadow:none;}

  /* Notifikasi */
  .pn-list{gap:12px;}
  .pn-card{border-radius:18px;box-shadow:none;}
  .pn-card-body{padding:16px;}
  .pn-card-title{font-size:16px;}

  .pb-footnote,.pk-footnote,.pq-footnote,.pn-footnote{margin-top:16px;border-radius:14px;padding:12px 14px;}
  .pb-empty,.pk-empty,.pq-empty,.pn-empty{padding:36px 18px;}

  /* Akun */
  .tn-account{gap:12px;}
  .tn-box{padding:18px;border-radius:18px;box-shadow:none;}
}

@media (max-width:360px){
  .pg-tab{font-size:10.5px;}
  .pb-stat-label,.pk-stat-label,.pq-stat-label{font-size:10.5px;}
  .pb-hero-art,.pk-hero-art,.pq-hero-art,.pn-hero-art{display:none;}
}

/* Dibuka dari ikon layar utama (PWA): tidak ada bar browser, rasa aplikasi penuh */
@media (display-mode:standalone){
  .pg-app{-webkit-user-select:none;user-select:none;}
  .pg-app input,.pg-app textarea,.pn-card-text{-webkit-user-select:text;user-select:text;}
}

/* Fokus keyboard tetap terlihat */
.pg-tab:focus-visible,.tn-seg-btn:focus-visible,.tn-btn:focus-visible,.tn-row-btn:focus-visible,.tn-link:focus-visible{
  outline:3px solid rgba(59,130,246,.55);outline-offset:2px;
}