/* Iterasi 2 — Mobile release readiness layer. Does not modify desktop style.css. */

.ak2-busy{opacity:.82;cursor:wait!important;pointer-events:none;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;}
.ak2-spinner{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;display:inline-block;animation:ak2spin .75s linear infinite;}
@keyframes ak2spin{to{transform:rotate(360deg)}}
.ak2-local-data-warning{margin:0 28px 16px;padding:13px 15px;border:1px solid #f2d39a;background:#fff8e8;color:#624000;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 6px 20px rgba(138,90,0,.06)}
.ak2-local-data-warning b{color:#5d3b00}.ak2-local-data-warning span{font-size:12px;line-height:1.45}.ak2-local-data-warning .outline{background:#fff8e8;border-color:#dcae45;color:#7a4e00;white-space:nowrap}.ak2-local-data-card{border-color:#f2d39a;background:#fffdf6}

/* The base style.css collapses sidebar labels below 1100px. For this app, labels must remain visible on tablet / narrow desktop widths; only explicit collapse or mobile drawer should hide them. */
@media(min-width:721px) and (max-width:1100px){
  .app{grid-template-columns:238px 1fr!important;}
  .sidebar{width:auto!important;padding:22px 15px!important;}
  .brand{justify-content:flex-start!important;padding:0 10px 25px!important;}
  .brand h1,.brand p{display:block!important;}
  .nav span:not(.ico):not(.pill){display:inline!important;}
  .nav button{justify-content:flex-start!important;padding:11px 12px!important;}
  .tip{display:block!important;}
  .product-grid{grid-template-columns:repeat(3,1fr);}
}

@media(max-width:720px){
  body{overflow-x:hidden;}
  .app{width:100%;min-height:100vh;}
  .app main{width:100%;min-width:0;}
  .top{position:sticky;top:0;z-index:40;gap:8px;padding:10px;background:var(--card,#fff);}
  .top .search{min-width:0;flex:1;}
  .top .profile{display:none;}
  .ak2-local-data-warning{margin:0 18px 14px;display:block}.ak2-local-data-warning .outline{width:100%;margin-top:10px}
  .sidebar{display:block!important;position:fixed;top:0;bottom:0;left:0;width:min(86vw,320px);z-index:80;transform:translateX(-105%);transition:transform .2s ease;background:var(--card,#fff);box-shadow:0 24px 60px rgba(15,23,42,.22);overflow:auto;padding:22px 15px!important;}
  .app.mobile-drawer-open .sidebar{transform:translateX(0);}
  .app.mobile-drawer-open .brand{justify-content:flex-start!important;padding:0 10px 25px!important;}
  .app.mobile-drawer-open .brand h1,.app.mobile-drawer-open .brand p{display:block!important;}
  .app.mobile-drawer-open .nav button{justify-content:flex-start!important;padding:11px 12px!important;}
  .app.mobile-drawer-open .nav span:not(.ico):not(.pill){display:inline!important;width:auto!important;height:auto!important;opacity:1!important;visibility:visible!important;overflow:visible!important;}
  .app.mobile-drawer-open .tip{display:block!important;}
  .app.sidebar-collapsed.mobile-drawer-open .nav span:not(.ico):not(.pill){display:inline!important;width:auto!important;height:auto!important;opacity:1!important;visibility:visible!important;overflow:visible!important;}
  .app.sidebar-collapsed.mobile-drawer-open .brand h1,.app.sidebar-collapsed.mobile-drawer-open .brand p{display:block!important;}
  .app.sidebar-collapsed.mobile-drawer-open .tip{display:block!important;}
  .mobile-drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:70;display:none;}
  .app.mobile-drawer-open + .mobile-drawer-overlay{display:block;}
  .nav button{min-height:44px;}
  .grid5,.grid4,.grid3,.two,.split{grid-template-columns:1fr!important;}
  .head{gap:12px;align-items:flex-start;}
  .head .primary,.head .outline{width:100%;}
  .tools{flex-direction:column;align-items:stretch;}
  .tools input,.tools select,.tools button{width:100%;}
  .product-grid{grid-template-columns:1fr!important;}
  .modal-wrap.show{align-items:flex-end;padding:0;}
  .modal{width:100%;max-width:none;max-height:88vh;border-radius:18px 18px 0 0;overflow:auto;}
  .modal:before{content:'';display:block;width:44px;height:4px;border-radius:99px;background:#ccd6d0;margin:0 auto 12px;}
  .modal h3{position:sticky;top:0;background:inherit;z-index:1;padding-top:6px;}
  .modal .actions{position:sticky;bottom:0;background:inherit;padding-top:10px;}
  input,select,textarea,button{font-size:16px;}
  .form input,.form select,.form textarea{min-height:44px;}
  table.mobile-card-table, table.mobile-card-table thead, table.mobile-card-table tbody, table.mobile-card-table tr, table.mobile-card-table th, table.mobile-card-table td{display:block;width:100%;}
  table.mobile-card-table thead{display:none;}
  table.mobile-card-table tr{border:1px solid var(--line,#e5e7eb);border-radius:14px;margin:10px 0;padding:10px;background:var(--card,#fff);}
  table.mobile-card-table td{border:0!important;padding:7px 4px!important;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
  table.mobile-card-table td:before{content:attr(data-label);font-weight:700;color:var(--muted,#64748b);min-width:110px;}
}