/* Perbaikan lintas perangkat AELIN Stock. Dimuat terakhir agar menang dari gaya lama. */
[hidden]{display:none!important}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{-webkit-text-size-adjust:100%}
#app:not(.authorized){display:none!important}
.login{width:100%;min-width:0;min-height:100vh;min-height:100svh;grid-template-columns:minmax(0,390px)}
.box,.card,.grid,.grid>*,.head>*,.top>*,.barcode-layout>*{min-width:0}
.box{width:100%;max-width:390px}
.btn:disabled,button:disabled{opacity:.6;cursor:wait}
.chart{width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.baritem{flex:0 0 34px}
.list{width:100%;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.auth-help{margin:0;padding:10px 12px;border-radius:8px;background:#f3f8f5;color:#53685e;font-size:12px;line-height:1.5}
.admin-panel{margin-top:16px}
.admin-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1ee}
.admin-row:last-child{border-bottom:0}
.admin-row small{display:block;margin-top:4px;color:var(--m);line-height:1.45}
.admin-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.sync-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:20px;background:#edf7f1;color:#17664b;font-size:10px;font-weight:700}
.sync-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:#24a46d}
.login-brand-logo{display:block;width:168px;height:168px;margin:0 auto 13px;object-fit:cover;border:1px solid rgba(189,143,57,.48);border-radius:24px;background:#000;box-shadow:0 12px 28px rgba(0,0,0,.19)}
.login-brand-name{text-align:center;letter-spacing:.7px}.login-brand-name span{color:#a97624!important}
#app .bar .top-brand{display:flex!important;align-items:center;gap:9px;color:#17332b;font-size:14px!important;font-weight:800;letter-spacing:.3px;white-space:nowrap}
.top-brand-logo{display:block;width:36px;height:36px;object-fit:cover;border:1px solid rgba(176,126,39,.48);border-radius:10px;background:#000;box-shadow:0 4px 10px rgba(0,0,0,.12)}
#app .bar .top-brand span{color:#17332b!important}
.nav:before{display:none!important}
.nav-brand{position:absolute;left:16px;right:16px;top:13px;display:flex;align-items:center;gap:10px;min-height:72px;padding:8px 9px;border:1px solid rgba(218,178,89,.28);border-radius:13px;background:rgba(0,25,18,.24);color:#fff}
.nav-brand-logo{display:block;width:54px;height:54px;flex:0 0 54px;object-fit:cover;border:1px solid rgba(230,190,99,.55);border-radius:11px;background:#000;box-shadow:0 7px 15px rgba(0,0,0,.25)}
.nav-brand strong,.nav-brand span{display:block}.nav-brand strong{color:#f0d28a;font-size:14px;letter-spacing:1.1px}.nav-brand span{margin-top:3px;color:rgba(255,255,255,.74);font-size:9px;line-height:1.25}
.dash-hero-art{display:none!important}
@media(min-width:901px){.nav{padding-top:105px}}
@media(min-width:901px) and (max-width:1100px){#app .bar .top-brand{display:none!important}}
@media(max-width:900px){.nav-brand{display:none}.login-brand-logo{width:146px;height:146px}.top-brand-logo{width:32px;height:32px}.top-brand{font-size:12px!important}}
@media(max-width:430px){#app .bar .top-brand span{display:none}.login-brand-logo{width:132px;height:132px;border-radius:20px}}
#barcodeReader video{max-width:100%!important;height:auto!important}
.label-count-field small{display:block;margin-top:6px;color:#718078;font-size:10px;font-weight:500;line-height:1.45}
@media screen{
  #barcodePrintArea{display:block;min-height:0;padding:12px;background:#f4f7f5}
  .label-preview-summary{margin:0 0 10px;color:#4f655b;font-size:11px;text-align:left}
  .print-sheets{display:grid;justify-items:center;gap:14px;width:100%}
  .label-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:min(100%,520px);aspect-ratio:2/3;overflow:hidden;border:1px solid #cbd7d0;background:#fff;box-shadow:0 7px 18px rgba(18,61,52,.08)}
  #barcodePrintArea .print-label{display:grid;grid-template-rows:minmax(20px,auto) 1fr auto;align-items:center;justify-items:center;min-width:0;min-height:0;padding:6px 5px;overflow:hidden;border-right:1px dashed #aebdb5;border-bottom:1px dashed #aebdb5;color:#000;background:#fff}
  #barcodePrintArea .print-label:nth-child(even){border-right:0}
  #barcodePrintArea .print-label:nth-child(n+5){border-bottom:0}
  #barcodePrintArea .print-label b{display:-webkit-box;max-width:100%;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:clamp(8px,1.15vw,12px);line-height:1.05;text-align:center}
  .barcode-qr{display:grid;place-items:center;width:min(72%,150px);max-width:100%;aspect-ratio:1/1;padding:12.85%;box-sizing:border-box;background:#fff}
  .barcode-qr canvas,.barcode-qr img{width:100%!important;height:auto!important;max-width:100%;aspect-ratio:1/1;image-rendering:pixelated}
  #barcodePrintArea .print-label small{display:block;max-width:100%;overflow:hidden;font-size:clamp(6px,.85vw,9px);font-weight:700;letter-spacing:.2px;line-height:1;white-space:nowrap;text-overflow:ellipsis}
}

@page{size:100mm 150mm;margin:0}
@media print{
  html,body{width:100mm!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important;background:#fff!important}
  body.label-printing #login,body.label-printing #app>.bar,body.label-printing #app>main>.nav,body.label-printing #app>main>.page:not(#barcode),body.label-printing #barcode>.top,body.label-printing #barcode>.barcode-layout,body.label-printing .barcode-label-card>.head,body.label-printing .barcode-label-card>.barcode-layout>.form{display:none!important}
  body.label-printing #app,body.label-printing #app>main,body.label-printing #barcode,body.label-printing .barcode-label-card,body.label-printing .barcode-label-card>.barcode-layout{position:static!important;display:block!important;width:100mm!important;max-width:none!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
  #barcodePrintArea{position:static!important;inset:auto!important;display:block!important;width:100mm!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:#fff!important}
  .label-preview-summary{display:none!important}
  .print-sheets{display:block!important;width:100mm!important;height:auto!important;margin:0!important;padding:0!important}
  .label-sheet{display:grid!important;grid-template-columns:repeat(2,50mm)!important;grid-template-rows:repeat(3,50mm)!important;gap:0!important;width:100mm!important;height:150mm!important;margin:0!important;padding:0!important;overflow:hidden!important;break-after:page!important;page-break-after:always!important;break-inside:avoid!important;page-break-inside:avoid!important;background:#fff!important}
  .label-sheet:last-child{break-after:auto!important;page-break-after:auto!important}
  #barcodePrintArea .print-label{display:grid!important;grid-template-rows:5.5mm 35mm 3mm!important;align-content:center!important;align-items:center!important;justify-items:center!important;width:50mm!important;height:50mm!important;min-width:50mm!important;min-height:50mm!important;margin:0!important;padding:1.8mm 1.5mm!important;row-gap:.65mm!important;box-sizing:border-box!important;overflow:hidden!important;border:0!important;color:#000!important;background:#fff!important;break-inside:avoid!important;page-break-inside:avoid!important}
  #barcodePrintArea .print-label:nth-child(odd){border-right:.2mm dashed #777!important}
  #barcodePrintArea .print-label:nth-child(-n+4){border-bottom:.2mm dashed #777!important}
  #barcodePrintArea .print-label b{display:-webkit-box!important;width:46mm!important;max-width:46mm!important;max-height:5.5mm!important;margin:0!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;font-size:7.2pt!important;line-height:1.05!important;text-align:center!important;color:#000!important}
  .barcode-qr{display:grid!important;place-items:center!important;width:35mm!important;height:35mm!important;margin:0!important;padding:4.5mm!important;box-sizing:border-box!important;background:#fff!important}
  .barcode-qr canvas,.barcode-qr img{width:26mm!important;height:26mm!important;max-width:none!important;image-rendering:pixelated!important}
  #barcodePrintArea .print-label small{display:block!important;width:46mm!important;max-width:46mm!important;margin:0!important;overflow:hidden!important;font-size:6.2pt!important;line-height:1!important;font-weight:700!important;letter-spacing:.12mm!important;text-align:center!important;white-space:nowrap!important;color:#000!important}
}

@media(max-width:900px){
  .login{padding:16px}
  .box{padding:22px 18px}
  #app .bar{margin-left:0;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))}
  .app{width:100%;max-width:100%;margin-left:0;padding:0 14px calc(46px + env(safe-area-inset-bottom))}
  .nav{position:relative;left:auto;top:auto;bottom:auto;width:auto;max-width:none;min-height:60px;display:flex;flex-direction:row;gap:7px;overflow-x:auto;overflow-y:hidden;margin:0 -14px 16px;padding:8px max(14px,env(safe-area-inset-left));background:#004a36;box-shadow:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .nav:before,.nav:after{display:none}
  .nav button{flex:0 0 auto;min-height:44px;padding:9px 12px;font-size:12px;touch-action:manipulation}
  .nav button:before{display:none}
  .top-search{display:none!important}
  input:not([type=radio]),select,textarea{min-height:44px;font-size:16px}
  button,.btn{min-height:44px;touch-action:manipulation}
  .top,.head{min-width:0;max-width:100%;flex-wrap:wrap}
  .head>*{max-width:100%}
  #gerak .head select{width:100%}
  #gerak .grid,#gerak .card,#gerak .chart{min-width:0;max-width:100%}
  .filters{width:100%}
  .filters input,.filters select,.filters .btn{width:100%}
  .scan-line{grid-template-columns:minmax(0,1fr) 78px}
  .scan-row{grid-template-columns:minmax(0,1fr) 72px 44px}
  .remove-scan{width:44px;height:44px}
  .scanner-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .scanner-actions .btn{width:100%}
  .barcode-reader{min-height:200px}
  #barcodePrintArea{padding:14px 8px}
  .admin-row{grid-template-columns:1fr}
  .admin-actions{justify-content:flex-start}
}

@media(max-width:430px){
  #dash .metrics,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  #dash .metric{min-height:132px;padding:14px}
  #dash .metric strong{font-size:21px}
  #dash>.top{padding-left:18px;padding-right:18px}
  #dash>.top:before{left:18px}
  .model-avatar{min-width:0}
  th,td{padding:10px 8px}
}