/* =====================================================================
   StokKira — skin mudah alih
   Latar biru, kad putih bulat, baris statistik biru + ikon & chevron.
   Semua di dalam @media supaya paparan desktop kekal tidak berubah.
   ===================================================================== */

@media (max-width:760px){

  :root{
    --m-bg:#5b5ff2;        /* latar skrin */
    --m-blue:#3b31e8;      /* kad / baris biru pekat */
    --m-blue-soft:#4f47ef;
    --m-yellow:#f7a728;
    --m-shadow:0 8px 22px rgba(24,22,110,.18);
  }

  body{background:var(--m-bg)}

  /* ---------- Rangka ---------- */
  .layout{display:block;min-height:100vh}
  .sidebar{display:none}
  .main{display:block}

  .topbar{
    position:sticky;top:0;z-index:30;height:58px;
    background:var(--m-bg);border-bottom:0;padding:0 12px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .topbar h1{
    position:absolute;left:0;right:0;text-align:center;pointer-events:none;
    color:#fff;font-size:16.5px;font-weight:650;letter-spacing:.01em;
  }
  .topbar .icon-btn{
    position:relative;z-index:1;color:#fff;background:rgba(255,255,255,.16);
    width:34px;height:34px;display:grid;place-items:center;border-radius:50%;padding:0;font-size:15px;
  }
  .topbar .icon-btn:hover{background:rgba(255,255,255,.26);color:#fff}
  .topbar-actions{position:relative;z-index:1}
  .topbar-actions .btn-primary{
    background:#fff;color:var(--m-blue);font-weight:650;font-size:13px;
    padding:7px 13px;border-radius:999px;box-shadow:0 3px 10px rgba(20,20,80,.2);
  }
  .topbar-actions .btn-primary:hover{background:#f2f3ff}

  .content{padding:8px 12px 104px;max-width:none}

  /* ---------- Kad ---------- */
  .card{background:#fff;border:0;border-radius:22px;box-shadow:var(--m-shadow);margin-bottom:14px}
  .card-head{border-bottom:0;padding:15px 17px 4px}
  .card-head h2{font-size:14.5px}
  .card-body{padding:15px 17px 17px}
  .grid-2{display:block}

  /* kad yang mengandungi senarai utama — barisnya sendiri jadi kad */
  .card-table{background:transparent;box-shadow:none;border-radius:0;margin-bottom:0;overflow:visible}
  .card-table .table-wrap{overflow:visible}

  /* ---------- Jalur ringkas ---------- */
  .mini-stats{
    display:flex;background:#fff;border-radius:20px;padding:13px 4px;
    margin:6px 0 14px;box-shadow:var(--m-shadow);
  }
  .mini{flex:1;text-align:center;border-right:1px solid var(--line-soft)}
  .mini:last-child{border-right:0}
  .mini-label{display:block;font-size:11.5px;color:var(--muted)}
  .mini-value{display:block;font-size:21px;font-weight:730;letter-spacing:-.02em;margin-top:2px}

  /* ---------- Baris statistik biru ---------- */
  .stats{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
  .stat{
    display:flex;align-items:center;gap:14px;width:100%;text-align:left;
    background:var(--m-blue);border:0;border-radius:20px;padding:13px 15px;
    box-shadow:0 8px 20px rgba(30,25,140,.3);cursor:pointer;
  }
  .stat:hover,.stat:active{background:var(--m-blue-soft);transform:none;border:0}
  .stat-icon{
    display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;
    border-radius:50%;background:#fff;font-size:24px;
    box-shadow:inset 0 0 0 3px rgba(247,167,40,.16);
  }
  .stat-main{display:flex;flex-direction:column;flex:1;min-width:0}
  .stat-value{order:1;margin:0;font-size:25px;font-weight:750;color:#fff;line-height:1.15}
  .stat-label{order:2;margin-top:1px;font-size:13px;color:rgba(255,255,255,.82)}
  .stat-foot{display:none}
  .stat-go{
    display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,.18);color:#fff;font-size:14px;letter-spacing:-1px;
  }

  /* ---------- Bar alat ---------- */
  .toolbar{
    display:flex;flex-direction:column;align-items:stretch;gap:9px;
    background:#fff;border-radius:20px;padding:12px;margin-bottom:13px;box-shadow:var(--m-shadow);
  }
  .toolbar .search{min-width:0;width:100%}
  .toolbar select.input{width:100%;min-width:0}
  .check{padding:2px}

  /* ---------- Jadual senarai utama -> kad ---------- */
  .card-table .table{display:block;font-size:13.5px}
  .card-table .table thead{display:none}
  .card-table .table tbody{display:block}
  .card-table .table tr{
    display:block;background:#fff;border-radius:18px;padding:13px 15px;
    margin-bottom:11px;box-shadow:var(--m-shadow);
  }
  .card-table .table tbody tr:hover{background:#fff}
  .card-table .table td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:4px 0;border:0;text-align:right;
  }
  .card-table .table td::before{
    content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:12px;font-weight:600;color:var(--muted);
  }
  .card-table .table td.cell-title{
    display:block;text-align:left;padding:0 0 9px;margin-bottom:7px;
    border-bottom:1px solid var(--line-soft);
  }
  .card-table .table td.cell-title::before{display:none}
  .card-table .table td.cell-title .strong{font-size:15px}
  .card-table .table td.cell-title .sub{display:block;font-size:12px;margin-top:1px}
  .card-table .table td.cell-desk{display:none}
  .card-table .table td[colspan]{display:block;text-align:center}
  .card-table .table td[colspan]::before{display:none}
  .card-table .table td.actions{
    justify-content:flex-end;gap:7px;padding-top:11px;margin-top:7px;
    border-top:1px solid var(--line-soft);
  }
  .card-table .table td.actions::before{display:none}
  .card-table .table td.cell-amount{font-size:16px}

  /* penanda jenis pergerakan stok */
  .card-table .table tr.row-IN{border-left:5px solid var(--ok)}
  .card-table .table tr.row-OUT{border-left:5px solid var(--m-yellow)}
  .card-table .table tr.row-WASTE{border-left:5px solid var(--danger)}
  .card-table .table tr.row-ADJUST{border-left:5px solid #9aa4b8}

  /* ---------- Jadual dalam kad (papan pemuka) ---------- */
  .table.stack{display:block}
  .table.stack thead{display:none}
  .table.stack tbody{display:block}
  .table.stack tr{display:block;padding:12px 17px;border-bottom:1px solid var(--line-soft)}
  .table.stack tr:last-child{border-bottom:0}
  .table.stack td{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:3px 0;border:0;text-align:right;
  }
  .table.stack td::before{
    content:attr(data-label);text-align:left;font-size:12px;font-weight:600;color:var(--muted);
  }
  .table.stack td.cell-title{display:block;text-align:left;padding-bottom:6px}
  .table.stack td.cell-title::before{display:none}
  .table.stack td.cell-desk{display:none}
  .table.stack td[colspan]{display:block;text-align:center}
  .table.stack td[colspan]::before{display:none}
  .table.stack td.actions{justify-content:flex-end;padding-top:7px}
  .table.stack td.actions::before{display:none}

  /* ---------- Tab bar bawah ---------- */
  .tabbar{
    position:fixed;left:10px;right:10px;bottom:10px;z-index:60;
    display:flex;gap:4px;padding:6px;height:62px;
    background:#fff;border-radius:22px;box-shadow:0 10px 30px rgba(20,20,80,.28);
    padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));
    height:calc(62px + env(safe-area-inset-bottom,0px));
  }
  .tab-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;background:none;border-radius:16px;color:#8b93a7;font:inherit;cursor:pointer;
    transition:background .14s,color .14s;
  }
  .tab-item b{font-size:16px;line-height:1;font-weight:400}
  .tab-item i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.01em}
  .tab-item.is-active{background:var(--m-blue);color:#fff}

  /* ---------- Modal jadi bottom sheet ---------- */
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal,.modal.wide{
    max-width:none;border-radius:24px 24px 0 0;max-height:94vh;
    display:flex;flex-direction:column;animation:sheet .2s ease-out;
  }
  @keyframes sheet{from{transform:translateY(28px)}to{transform:none}}
  .modal-head{padding:16px 18px 12px}
  .modal-head::before{
    content:'';position:absolute;left:50%;top:7px;width:38px;height:4px;
    transform:translateX(-50%);border-radius:2px;background:var(--line);
  }
  .modal{position:relative}
  .modal-body{max-height:none;flex:1;overflow-y:auto}
  .modal-foot{
    border-radius:0;flex-wrap:wrap;
    padding-bottom:calc(13px + env(safe-area-inset-bottom,0px));
  }
  .modal-foot .btn{flex:1;min-width:120px}

  /* ---------- Pembina invois ---------- */
  .line-table{display:block}
  .line-table thead{display:none}
  .line-table tbody{display:block}
  .line-table tr{
    display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;
    background:var(--surface-2);border:1px solid var(--line);
    border-radius:16px;padding:11px;margin-bottom:10px;
  }
  .line-table td{display:block;padding:0;width:auto}
  .line-table td:nth-child(1){grid-column:1 / -1}
  .line-table .col-qty::before{content:'Kuantiti'}
  .line-table .col-price::before{content:'Harga seunit'}
  .line-table .col-qty::before,.line-table .col-price::before{
    display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:3px;
  }
  .line-table .col-amt{
    grid-column:1;align-self:center;padding-top:4px;
    font-size:15px;font-weight:650;text-align:left;
  }
  .line-table .col-x{grid-column:2;text-align:right;align-self:center}
  .totals{width:100%;margin-top:16px}
  .totals-row input{width:120px}

  /* ---------- Lain-lain ---------- */
  .setup{background:linear-gradient(165deg,#5b5ff2,#241f9e)}
  .setup-card{border-radius:22px;padding:26px 22px}
  .empty{padding:26px 14px}
  .alert{border-radius:12px}
  .toasts{left:14px;right:14px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .toast{max-width:none;border-radius:14px}
  .btn{padding:9px 15px}
  .input{padding:10px 12px;font-size:16px} /* 16px elak auto-zoom iOS */
  .field>span{font-size:12.5px}

  /* invois yang dipapar dalam sheet */
  .inv-doc{padding:18px 16px;font-size:12.5px}
  .inv-top{flex-direction:column;gap:14px}
  .inv-title{text-align:left;font-size:22px}
  .inv-meta{text-align:left}
  .inv-sum{width:100%}
  .inv-foot{flex-direction:column;gap:14px}
}

/* Skrin sangat kecil */
@media (max-width:360px){
  .stat-icon{flex:0 0 46px;width:46px;height:46px;font-size:21px}
  .stat-value{font-size:22px}
  .tab-item i{font-size:9.5px}
}