:root{
  --pos-primary:#0f766e;
  --pos-primary-dark:#115e59;
  --pos-accent:#f59e0b;
  --pos-bg:#f1f5f9;
}
body{background:var(--pos-bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
.app-navbar{background:linear-gradient(90deg,var(--pos-primary),var(--pos-primary-dark));}
.app-navbar .navbar-brand,.app-navbar .nav-link{color:#fff !important;}
.app-navbar .nav-link:hover{color:#ffe8b3 !important;}
.card{border:0;border-radius:.85rem;box-shadow:0 1px 3px rgba(15,23,42,.08);}
.card-header{background:#fff;border-bottom:1px solid #e2e8f0;font-weight:600;border-radius:.85rem .85rem 0 0 !important;}
.btn-primary{background:var(--pos-primary);border-color:var(--pos-primary);}
.btn-primary:hover,.btn-primary:focus{background:var(--pos-primary-dark);border-color:var(--pos-primary-dark);}
.text-primary{color:var(--pos-primary) !important;}
.stat-card{border-left:4px solid var(--pos-primary);}
.stat-card .stat-value{font-size:1.45rem;font-weight:700;}
table.dataTable thead th{background:#f8fafc;}
/* ---------- POS ---------- */
.pos-wrap{height:calc(100vh - 130px);}
.pos-products{overflow-y:auto;max-height:calc(100vh - 240px);}
.pos-workspace{--bs-gutter-x:1rem;align-items:stretch;}
.pos-workspace>.pos-pane{flex:0 0 50%;max-width:50%;}
.pos-workspace>.pos-pane>.card{min-height:calc(100vh - 135px);}
.pos-workspace>.pos-pane:last-child>.card>.card-body{overflow-y:auto;max-height:calc(100vh - 190px);}
@media(max-width:991.98px){
  .pos-workspace>.pos-pane{flex:0 0 100%;max-width:100%;}
  .pos-workspace>.pos-pane>.card{min-height:auto;}
  .pos-workspace>.pos-pane:last-child>.card>.card-body{max-height:none;overflow:visible;}
}
.product-tile{cursor:pointer;transition:.15s;border:1px solid #e2e8f0;border-radius:.7rem;background:#fff;padding:.65rem;height:100%;}
.product-tile:hover{border-color:var(--pos-primary);transform:translateY(-2px);}
.product-tile .p-name{font-weight:600;font-size:.85rem;line-height:1.2;}
.product-tile .p-price{color:var(--pos-primary);font-weight:700;font-size:.85rem;}
.product-tile .p-stock{font-size:.72rem;color:#64748b;}
.cart-list{max-height:38vh;overflow-y:auto;}
.cart-item{border-bottom:1px dashed #e2e8f0;padding:.5rem 0;}
.qty-input{width:62px;text-align:center;}
.summary-row{display:flex;justify-content:space-between;font-size:.92rem;padding:.15rem 0;}
.summary-total{font-size:1.3rem;font-weight:800;color:var(--pos-primary);}
.pay-btn.active{background:var(--pos-primary);color:#fff;border-color:var(--pos-primary);}
/* ---------- Login ---------- */
.login-page{min-height:100vh;display:flex;align-items:center;background:linear-gradient(135deg,#0f766e,#134e4a);}
.login-card{max-width:420px;width:100%;margin:auto;}
/* ---------- Struk ---------- */
.receipt{width:80mm;margin:0 auto;background:#fff;padding:10px 12px;font-family:"Courier New",monospace;font-size:12px;color:#000;}
.receipt h5{text-align:center;margin:0;font-size:14px;font-weight:700;}
.receipt .rc-line{border-top:1px dashed #000;margin:6px 0;}
.receipt table{width:100%;font-size:11.5px;}
.receipt td{vertical-align:top;}
.text-end{text-align:right;}
@media print{
  body{background:#fff;}
  .no-print,nav,footer,.app-topbar,.app-sidebar,.app-sidebar-backdrop{display:none !important;}
  .app-main{margin-left:0 !important;padding:0 !important;}
  .receipt{width:auto;box-shadow:none;}
  @page{margin:4mm;}
}

/* ---------- Layout Sidebar (menu vertikal kiri) ---------- */
:root{--pos-sidebar-w:250px;--pos-sidebar-w-sm:66px;--pos-topbar-h:54px;}
.app-topbar{position:sticky;top:0;z-index:1040;height:var(--pos-topbar-h);display:flex;align-items:center;padding:0 .75rem;
  background:linear-gradient(90deg,var(--pos-primary),var(--pos-primary-dark));color:#fff;box-shadow:0 1px 4px rgba(15,23,42,.15);}
.app-topbar .app-brand{color:#fff;text-decoration:none;font-weight:700;display:flex;align-items:center;white-space:nowrap;}
.app-topbar .nav-link,.app-topbar .navbar-nav .nav-link{color:#fff !important;}
/* ---------- Menu pengguna pojok kanan atas ----------
   Menu selalu membuka ke BAWAH, menempel di kanan, dan seluruh isinya
   tampak: tinggi dibatasi ke sisa ruang layar dengan scroll halus. */
.app-topbar{overflow:visible;}
.app-topbar .navbar,.app-topbar .nav-item{position:static;}
.app-topbar .nav-item.dropdown{position:relative;}
.app-topbar .dropdown-menu{
  position:absolute !important;inset:auto 0 auto auto !important;
  top:100% !important;left:auto !important;right:0 !important;bottom:auto !important;
  transform:none !important;margin-top:.4rem;z-index:1080;
  min-width:250px;max-width:min(340px,94vw);
  max-height:calc(100vh - var(--pos-topbar-h) - 1.5rem);
  max-height:calc(100dvh - var(--pos-topbar-h) - 1.5rem);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border:0;border-radius:.7rem;padding:.35rem;box-shadow:0 12px 30px rgba(15,23,42,.25);
}
.app-topbar .dropdown-menu::-webkit-scrollbar{width:6px;}
.app-topbar .dropdown-menu::-webkit-scrollbar-thumb{background:rgba(15,23,42,.25);border-radius:6px;}
.app-topbar .dropdown-menu .dropdown-item{white-space:normal;border-radius:.5rem;padding:.5rem .7rem;display:flex;align-items:center;gap:.55rem;}
.app-topbar .dropdown-menu .dropdown-item i{width:1.1rem;text-align:center;flex:0 0 1.1rem;}
@media (max-width:575.98px){
  .app-topbar .nav-item.dropdown{position:static;}
  .app-topbar .dropdown-menu{
    position:fixed !important;top:var(--pos-topbar-h) !important;right:.5rem !important;left:auto !important;
    max-width:min(320px,94vw);
    max-height:calc(100vh - var(--pos-topbar-h) - .75rem);
    max-height:calc(100dvh - var(--pos-topbar-h) - .75rem);
  }
}
/* ---------- Footer ---------- */
.app-footer{background:transparent;}
.app-footer .app-footer-text{color:inherit;}
.app-footer .app-footer-brand{color:var(--pos-primary);letter-spacing:.5px;}
.app-footer .app-footer-brand:hover{color:var(--pos-primary-dark);text-decoration:underline !important;}
.app-sidebar-toggle{color:#fff;border:1px solid rgba(255,255,255,.35);line-height:1;padding:.25rem .5rem;}
.app-sidebar-toggle:hover{color:#fff;background:rgba(255,255,255,.15);}
.app-shell{display:flex;align-items:stretch;min-height:calc(100vh - var(--pos-topbar-h));}
.app-sidebar{width:var(--pos-sidebar-w);flex:0 0 var(--pos-sidebar-w);background:linear-gradient(180deg,var(--pos-primary),var(--pos-primary-dark));color:#fff;
  position:sticky;top:var(--pos-topbar-h);align-self:flex-start;height:calc(100vh - var(--pos-topbar-h));overflow-y:auto;
  transition:width .18s ease,flex-basis .18s ease,transform .18s ease;}
.app-sidebar::-webkit-scrollbar{width:6px;}
.app-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:6px;}
.app-sidebar-nav{padding:.6rem .5rem 2rem;}
.app-nav{gap:2px;}
.app-nav .nav-link{color:#cfe3e0;border-radius:.55rem;padding:.5rem .7rem;font-size:.9rem;display:flex;align-items:center;gap:.6rem;white-space:nowrap;}
.app-nav .nav-link i{font-size:1.05rem;width:1.25rem;text-align:center;flex:0 0 1.25rem;}
.app-nav .nav-link:hover{background:rgba(255,255,255,.09);color:#fff;}
.app-nav .nav-link.active{background:var(--pos-primary);color:#fff;font-weight:600;}
.app-nav .dropdown-toggle::after{margin-left:auto;transition:transform .15s ease;}
.app-nav .dropdown-toggle.open::after,.app-nav .dropdown-toggle[aria-expanded="true"]::after{transform:rotate(180deg);}
.app-nav .sub-menu{list-style:none;margin:.15rem 0 .2rem;padding:0 0 0 1.85rem;}
.app-nav .sub-menu .dropdown-item{color:#b9d2ce;font-size:.83rem;padding:.34rem .55rem;border-radius:.45rem;white-space:normal;}
.app-nav .sub-menu .dropdown-item:hover{background:rgba(255,255,255,.1);color:#fff;}
.app-nav .sub-menu .dropdown-item.active{background:var(--pos-primary);color:#fff;}
.app-nav .sub-menu .dropdown-divider{border-color:rgba(255,255,255,.16);margin:.3rem 0;}
.app-main{flex:1 1 auto;min-width:0;padding:1.25rem;}
/* Mode ringkas (desktop) */
body.sidebar-collapsed .app-sidebar{width:var(--pos-sidebar-w-sm);flex-basis:var(--pos-sidebar-w-sm);}
body.sidebar-collapsed .app-nav .nav-link{justify-content:center;padding:.55rem .2rem;}
body.sidebar-collapsed .app-nav .nav-link span,
body.sidebar-collapsed .app-nav .sub-menu,
body.sidebar-collapsed .app-nav .dropdown-toggle::after{display:none;}
body.sidebar-collapsed .app-nav .nav-link{font-size:0;gap:0;}
body.sidebar-collapsed .app-nav .nav-link i{font-size:1.15rem;}
.app-sidebar-backdrop{display:none;}
@media (max-width:991.98px){
  .app-sidebar{position:fixed;left:0;top:var(--pos-topbar-h);z-index:1035;transform:translateX(-100%);width:var(--pos-sidebar-w);flex-basis:0;box-shadow:2px 0 12px rgba(0,0,0,.25);}
  body.sidebar-open .app-sidebar{transform:translateX(0);}
  body.sidebar-collapsed .app-sidebar{width:var(--pos-sidebar-w);}
  body.sidebar-collapsed .app-nav .nav-link{justify-content:flex-start;font-size:.9rem;gap:.6rem;padding:.5rem .7rem;}
  body.sidebar-collapsed .app-nav .sub-menu{display:block;}
  body.sidebar-open .app-sidebar-backdrop{display:block;position:fixed;inset:var(--pos-topbar-h) 0 0 0;background:rgba(15,23,42,.45);z-index:1030;}
  .app-brand-text{max-width:45vw;overflow:hidden;text-overflow:ellipsis;}
  .app-main{padding:1rem .75rem;}
}
/* Halaman kasir: sesuaikan tinggi area kerja dengan topbar baru */
.pos-wrap{height:calc(100vh - 140px);height:calc(100dvh - 140px);}
/* Tabel matriks hak akses */
.perm-table thead th{position:sticky;top:0;background:#f8fafc;z-index:2;}
.perm-table td,.perm-table th{vertical-align:middle;}

/* ==========================================================================
   V28 — Penyegaran tampilan (berlaku untuk semua template):
   efek halus, gradasi, kedalaman, animasi, pembatas menu/sub-menu,
   dan penyesuaian responsif untuk semua perangkat.
   Semua warna memakai variabel tema sehingga otomatis mengikuti template.
   ========================================================================== */
:root{
  --pos-elev-1:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.06);
  --pos-elev-2:0 6px 18px rgba(15,23,42,.10),0 18px 40px rgba(15,23,42,.08);
  --pos-ring:color-mix(in srgb,var(--pos-primary) 35%,transparent);
  --pos-soft:color-mix(in srgb,var(--pos-primary) 8%,transparent);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* Latar hidup namun lembut, tidak mengganggu keterbacaan. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38rem 38rem at 108% -8%,color-mix(in srgb,var(--pos-accent) 16%,transparent),transparent 70%),
    radial-gradient(34rem 34rem at -10% 108%,color-mix(in srgb,var(--pos-primary) 14%,transparent),transparent 70%);
}
/* ---------- Kartu & panel ---------- */
.card{border:1px solid color-mix(in srgb,var(--pos-primary) 8%,transparent);box-shadow:var(--pos-elev-1);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;overflow:hidden;}
.card:hover{transform:translateY(-2px);box-shadow:var(--pos-elev-2);border-color:color-mix(in srgb,var(--pos-primary) 22%,transparent);}
.card-header{background:linear-gradient(180deg,color-mix(in srgb,var(--pos-primary) 7%,transparent),transparent);
  border-bottom:1px solid color-mix(in srgb,var(--pos-primary) 12%,transparent);letter-spacing:.2px;}
.stat-card{position:relative;border-left:0;}
.stat-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--pos-primary),var(--pos-accent));}
.stat-card .stat-value{letter-spacing:-.5px;}
/* ---------- Tombol & input ---------- */
.btn{border-radius:calc(var(--pos-radius,.7rem) * .7);transition:transform .16s ease,box-shadow .16s ease,background .16s ease,filter .16s ease;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{background-image:linear-gradient(135deg,var(--pos-primary),var(--pos-primary-dark));border:0;
  box-shadow:0 4px 14px color-mix(in srgb,var(--pos-primary) 30%,transparent);}
.btn-primary:hover,.btn-primary:focus{filter:brightness(1.06);box-shadow:0 8px 22px color-mix(in srgb,var(--pos-primary) 38%,transparent);}
.btn:focus-visible,.form-control:focus,.form-select:focus,.form-check-input:focus{
  outline:0;box-shadow:0 0 0 .2rem var(--pos-ring) !important;border-color:var(--pos-primary) !important;}
.form-control,.form-select{transition:border-color .16s ease,box-shadow .16s ease;}
.badge{letter-spacing:.3px;}
.nav-tabs .nav-link.active{border-bottom-color:var(--pos-primary);}
.table thead th{text-transform:uppercase;font-size:.74rem;letter-spacing:.6px;}
.table-hover tbody tr{transition:background .14s ease;}
.progress-bar{background-image:linear-gradient(90deg,var(--pos-primary),var(--pos-accent));}
/* ---------- Topbar lebih segar ---------- */
.app-topbar{
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 2px 14px rgba(15,23,42,.18);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.app-topbar .app-brand img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.app-topbar .app-brand:hover{opacity:.92;}
.app-sidebar-toggle{border-radius:.6rem;transition:transform .16s ease,background .16s ease;}
.app-sidebar-toggle:active{transform:scale(.94);}
.app-topbar .dropdown-menu{animation:fxMenu .16s ease-out;}
@keyframes fxMenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ---------- Sidebar: pembatas menu & sub-menu ---------- */
.app-sidebar{box-shadow:inset -1px 0 0 rgba(255,255,255,.06),2px 0 18px rgba(15,23,42,.10);}
.app-nav{gap:1px;}
.app-nav > .nav-item + .nav-item{
  border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);
}
.app-nav .nav-link{position:relative;transition:background .16s ease,color .16s ease,padding-left .16s ease;}
.app-nav .nav-link::before{
  content:"";position:absolute;left:0;top:50%;height:0;width:3px;border-radius:3px;
  background:var(--pos-accent);transform:translateY(-50%);transition:height .18s ease;
}
.app-nav .nav-link:hover{padding-left:.95rem;}
.app-nav .nav-link.active::before,.app-nav .nav-link:hover::before{height:62%;}
.app-nav .nav-link.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent);}
/* Garis pembatas vertikal antara menu induk dan sub-menu */
.app-nav .sub-menu{
  position:relative;margin:.2rem 0 .35rem;padding:.15rem 0 .15rem 1.5rem;
  border-top:1px dashed color-mix(in srgb,currentColor 18%,transparent);
}
.app-nav .sub-menu::before{
  content:"";position:absolute;left:.85rem;top:.35rem;bottom:.35rem;width:1px;
  background:linear-gradient(180deg,color-mix(in srgb,currentColor 45%,transparent),color-mix(in srgb,currentColor 10%,transparent));
}
.app-nav .sub-menu > li{position:relative;}
.app-nav .sub-menu .dropdown-item{position:relative;transition:background .15s ease,color .15s ease,transform .15s ease;}
.app-nav .sub-menu .dropdown-item::before{
  content:"";position:absolute;left:-.65rem;top:50%;width:.5rem;height:1px;
  background:color-mix(in srgb,currentColor 35%,transparent);
}
.app-nav .sub-menu .dropdown-item:hover{transform:translateX(2px);}
.app-nav .sub-menu.collapsing,.app-nav .sub-menu.show{will-change:height;}
body.sidebar-collapsed .app-nav > .nav-item + .nav-item{border-top-color:color-mix(in srgb,currentColor 10%,transparent);}
/* ---------- Konten: animasi masuk halus ---------- */
.app-main > h1,.app-main > h2,.app-main > h3,.app-main > h4,.app-main > h5,
.app-main > .card,.app-main > .row,.app-main > p,.app-main > .alert,.app-main > .table-responsive{
  animation:fxRise .32s ease both;
}
.fx-rise{animation:fxRise .32s ease both;}
@keyframes fxRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.product-tile{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;box-shadow:var(--pos-elev-1);}
.product-tile:hover{box-shadow:var(--pos-elev-2);}
.product-tile:active{transform:scale(.985);}
/* ---------- Login lebih hidup ---------- */
.login-page{position:relative;overflow:hidden;padding:1.25rem 0;}
.login-page::after{
  content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(28rem 28rem at 20% 20%,rgba(255,255,255,.22),transparent 60%),
             radial-gradient(26rem 26rem at 80% 80%,rgba(255,255,255,.16),transparent 60%);
}
.login-card{position:relative;z-index:1;border-radius:1.1rem;
  box-shadow:0 24px 60px rgba(15,23,42,.28);animation:fxRise .38s ease both;}
.login-logo{max-height:64px;max-width:70%;object-fit:contain;}
.login-card .app-footer-brand{color:var(--pos-primary);}
/* ---------- Footer ---------- */
.app-footer{position:relative;color:inherit;}
.app-footer::before{
  content:"";display:block;height:1px;margin:0 auto 1rem;max-width:min(720px,90%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pos-primary) 45%,transparent),transparent);
}
.login-card .app-footer::before{margin-bottom:.6rem;}
.app-footer .app-footer-brand{background:linear-gradient(90deg,var(--pos-primary),var(--pos-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.6px;}
.app-footer .app-footer-brand:hover{text-decoration:underline !important;}
/* ---------- Responsif untuk semua perangkat ---------- */
@media (max-width:575.98px){
  .app-main{padding:.85rem .7rem;}
  .card-body{padding:.9rem;}
  h1,.h1{font-size:1.5rem}h2,.h2{font-size:1.3rem}h3,.h3{font-size:1.15rem}h4,.h4{font-size:1.05rem}
  .table-responsive{-webkit-overflow-scrolling:touch;}
  .btn{min-height:38px;}
  .app-brand-text{max-width:38vw;}
}
@media (min-width:1600px){ .app-main{padding:1.5rem 2rem;} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}
@media print{ body::before,.login-page::after,.app-footer::before{display:none !important;} }

/* ================================================================
   PERBAIKAN RESPONSIF v30 — Mobile (HP) & Tablet
   Tujuan: menu samping (drawer) selalu tampil sempurna saat tombol
   menu ditekan, dan seluruh tata letak menyesuaikan lebar layar.
   Aturan di sini sengaja diletakkan paling akhir + memakai
   !important agar tidak tertimpa lapisan efek (fx-v29.css).
   ================================================================ */
@media (max-width:991.98px){
  html,body{overflow-x:hidden;}
  .app-shell{display:block !important;min-height:auto;}
  .app-main{width:100% !important;max-width:100% !important;}

  /* Drawer menu */
  .app-sidebar{
    position:fixed !important;
    top:var(--pos-topbar-h) !important;
    left:0 !important;right:auto !important;
    width:min(84vw,300px) !important;
    max-width:min(84vw,300px) !important;
    flex:0 0 auto !important;
    height:calc(100vh - var(--pos-topbar-h)) !important;
    height:calc(100dvh - var(--pos-topbar-h)) !important;
    padding-bottom:env(safe-area-inset-bottom,0);
    overflow-y:auto !important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateX(-105%) !important;
    transition:transform .22s ease !important;
    z-index:1055 !important;
    visibility:hidden;
    box-shadow:2px 0 18px rgba(0,0,0,.3);
  }
  body.sidebar-open .app-sidebar{transform:translateX(0) !important;visibility:visible;}
  /* Mode ringkas desktop tidak boleh mempengaruhi tampilan mobile */
  body.sidebar-collapsed .app-sidebar{width:min(84vw,300px) !important;max-width:min(84vw,300px) !important;}
  body.sidebar-collapsed .app-nav .nav-link{justify-content:flex-start !important;font-size:.92rem !important;gap:.6rem !important;padding:.6rem .7rem !important;}
  body.sidebar-collapsed .app-nav .nav-link span{display:inline !important;}
  body.sidebar-collapsed .app-nav .nav-link i{font-size:1.1rem;}
  body.sidebar-collapsed .app-nav .dropdown-toggle::after{display:block !important;}
  body.sidebar-collapsed .app-nav .sub-menu{display:none;}
  body.sidebar-collapsed .app-nav .sub-menu.show,
  body.sidebar-collapsed .app-nav .sub-menu.collapsing{display:block;}

  /* Sentuhan lebih nyaman di layar sentuh */
  .app-nav .nav-link{padding:.62rem .7rem;font-size:.95rem;}
  .app-nav .sub-menu .dropdown-item{padding:.5rem .6rem;font-size:.88rem;}

  .app-sidebar-backdrop{display:none;}
  body.sidebar-open .app-sidebar-backdrop{
    display:block !important;position:fixed;inset:var(--pos-topbar-h) 0 0 0;
    background:rgba(15,23,42,.5);z-index:1045;
  }
  /* Cegah halaman ikut tergulir saat drawer terbuka */
  body.sidebar-open{overflow:hidden;}

  /* Konten umum */
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .pos-wrap{height:auto !important;}
  .app-topbar{padding:0 .5rem;}
  .app-topbar .app-brand{min-width:0;}
  .app-brand-text{display:inline-block;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
  .app-sidebar-toggle{min-width:40px;min-height:36px;}
}

/* Tablet: dua kolom tetap nyaman */
@media (min-width:768px) and (max-width:991.98px){
  .app-main{padding:1rem 1.1rem;}
  .app-brand-text{max-width:50vw;}
}

/* Handphone kecil */
@media (max-width:575.98px){
  .app-topbar .app-brand span.badge,.app-topbar .nav-link .badge{font-size:.62rem;}
  .app-topbar .nav-link{padding:.35rem .4rem;font-size:.85rem;}
  .app-brand-text{max-width:34vw;}
  .card{border-radius:.7rem;}
  .btn-group-sm > .btn,.btn-sm{min-height:34px;}
  .form-control,.form-select{font-size:16px;} /* cegah zoom otomatis iOS */
  table.dataTable{font-size:.85rem;}
  .dataTables_wrapper .row > div{width:100%;max-width:100%;flex:0 0 100%;text-align:left !important;}
  .dataTables_wrapper .dataTables_paginate{margin-top:.4rem;}
  .modal-dialog{margin:.5rem;}
}