/* AELIN Stock — consistent visual hierarchy for every application menu. */
@media screen {
  :root{--aelin-deep:#073f30;--aelin-green:#0d684b;--aelin-mid:#16815f;--aelin-pale:#eef8f2;--aelin-line:#d8e7df;--aelin-amber:#ffe7a7;--aelin-amber-text:#855000;--m:#5d7067}

  /* Compact hero for the menus that previously only had a plain heading. */
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top{position:relative;display:flex;align-items:center;min-height:142px;overflow:hidden;padding:24px 28px;margin-bottom:17px;border-radius:19px;color:#fff;background:linear-gradient(122deg,var(--aelin-deep),#0c684b 62%,#16815f);box-shadow:0 13px 27px rgba(7,63,48,.17)}
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top:after{content:'';position:absolute;right:-70px;top:-112px;width:245px;height:245px;border:34px solid rgba(255,255,255,.075);border-radius:50%;pointer-events:none}
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top>div{position:relative;z-index:1;min-width:0}
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top>div:before{display:block;margin-bottom:8px;color:#91dfbb;font-size:10px;font-weight:900;letter-spacing:1.1px}
  #stok>.top>div:before{content:'DATA GUDANG'}
  #biaya>.top>div:before{content:'PENCATATAN BIAYA'}
  #laporan>.top>div:before{content:'LAPORAN & PENUTUPAN'}
  #produk>.top>div:before{content:'MASTER PRODUK'}
  #barcode>.top>div:before{content:'SCAN & LABEL'}
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top h1{margin:0;color:#fff;font-size:27px;line-height:1.17;letter-spacing:-.45px}
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top .muted{max-width:720px;margin:9px 0 0;color:rgba(255,255,255,.8);font-size:13px;line-height:1.55}

  /* Shared cards and headers. */
  :is(#stok,#biaya,#laporan,#produk,#barcode) .card:not(.metric),#gerak.packing-show-legacy>.grid>.card,#gerak.packing-show-legacy>.card{overflow:hidden;border:1px solid var(--aelin-line)!important;border-left:5px solid var(--aelin-green)!important;border-radius:16px!important;background:#fff;box-shadow:0 6px 17px rgba(17,71,54,.075)}
  :is(#stok,#biaya,#laporan,#produk,#barcode) .card:not(.metric)>.head,#gerak.packing-show-legacy .card>.head{padding:16px 17px;border-bottom:1px solid #dcebe3;background:linear-gradient(110deg,var(--aelin-pale),#fafdfb)}
  :is(#stok,#biaya,#laporan,#produk,#barcode) .card:not(.metric)>.head h2,#gerak.packing-show-legacy .card>.head h2{color:#0b5d45;font-size:17px;font-weight:900;line-height:1.3}
  :is(#stok,#biaya,#produk,#barcode) .grid{gap:15px}
  :is(#biaya,#produk,#barcode,#gerak.packing-show-legacy) .form label{color:#60736a;font-size:10.5px;font-weight:900;letter-spacing:.35px}
  :is(#biaya,#produk,#barcode,#gerak.packing-show-legacy) .form input,:is(#biaya,#produk,#barcode,#gerak.packing-show-legacy) .form select{min-height:45px;border-color:#d6e2dc;border-radius:9px}
  :is(#biaya,#produk,#barcode,#gerak.packing-show-legacy) .form input:focus,:is(#biaya,#produk,#barcode,#gerak.packing-show-legacy) .form select:focus{border-color:#48a57c;outline:3px solid rgba(22,129,95,.11)}
  :is(#stok,#biaya,#produk,#barcode) .btn{border-radius:9px}

  /* Inventory and legacy tables. */
  :is(#stok,#biaya,#gerak.packing-show-legacy) .list{max-height:min(62vh,620px);border-top:0}
  :is(#stok,#biaya,#gerak.packing-show-legacy) table{border-collapse:separate;border-spacing:0}
  :is(#stok,#biaya,#gerak.packing-show-legacy) thead th{color:#0d654a;background:#eaf5ee;font-size:10px;font-weight:900;letter-spacing:.25px}
  :is(#stok,#biaya,#gerak.packing-show-legacy) tbody td{border-color:#e7efea;font-size:11.5px;transition:background .15s ease}
  :is(#stok,#biaya,#gerak.packing-show-legacy) tbody tr:nth-child(even) td{background:#f4f8f5}
  :is(#stok,#biaya,#gerak.packing-show-legacy) tbody tr:hover td{background:#edf7f1}
  #stok table{min-width:640px}
  #biaya table,#gerak.packing-show-legacy table{min-width:720px}
  #stok tbody td:first-child b,#stok tbody td:nth-child(3) b{color:#0d654a;font-weight:900}
  #stok .filters input,#stok .filters select{min-height:43px;border-color:#d3e0d9;border-radius:9px}

  /* Expenses and product administration. */
  #extotal{display:grid;gap:7px}
  #extotal .stat{padding:10px 11px;margin:0;border:1px solid #dce9e2;border-left:4px solid var(--aelin-mid);border-radius:9px;background:#f4f9f6}
  #extotal .stat b{color:#0d654a;font-size:13px}
  #adminAccessPanel .admin-row{padding:11px 12px;border:0;border-left:4px solid #82b69e;border-radius:9px;background:#f7faf8}
  #adminAccessPanel .admin-row:nth-child(even){background:#eef7f2}

  /* Monthly report: success is green, an unfinished period is amber. */
  #laporan>.card>.head .btn{background:#9a650f;color:#fff;box-shadow:0 5px 12px rgba(154,101,15,.16)}
  #laporan .metrics{gap:10px;margin:0}
  #laporan .metric{min-height:112px;border:1px solid #dce7e1;border-left:4px solid var(--aelin-mid);border-radius:13px;background:#fff;box-shadow:0 4px 12px rgba(17,71,54,.05)}
  #laporan .metric:nth-child(1){border-left-color:#16815f;background:#f1f8f4}
  #laporan .metric:nth-child(2){border-left-color:#4772b8;background:#f3f6fb}
  #laporan .metric:nth-child(3){border-left-color:#ad7420;background:#fff8e9}
  #laporan .metric:nth-child(4){border-left-color:#9a650f;background:#fff5df}
  #laporan .metric strong{color:#124d3c;font-weight:900}
  #closingInfo:not(:empty){padding:11px 13px;margin-top:13px;border:1px solid #efd59b;border-left:4px solid #c18a2e;border-radius:10px;color:#7c5916;background:#fff7e5;font-weight:750}

  /* Barcode workflow. Screen-only so label printing remains unchanged. */
  #barcode .barcode-layout{gap:14px}
  #barcode .barcode-mode input{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
  #barcode .scan-row{padding:10px;border-radius:9px;background:#f4f9f6}
  #barcode .scan-row:nth-child(even){background:#fff}
  #barcode .barcode-guide div{border:1px solid #dce9e2;border-left:4px solid var(--aelin-mid);background:#f1f8f4}
  #barcode .scanner-status{border:1px solid #d1e6d9;border-left:4px solid var(--aelin-mid);background:#edf7f1}
  #barcode .scanner-status.bad{border-color:#efc9c5;border-left-color:#bd4541;background:#fff0ee}
  #barcode .scan-total{padding:14px 10px 7px;border-top:1px solid #e2ece6}

  /* The advanced Opname and Picking/Packing modules use the same accent. */
  :is(.stocktake-create-card,.stocktake-active-card,.stocktake-history-card,.stocktake-count-card,.stocktake-review-card,.stocktake-receipt-lines){border:1px solid var(--aelin-line)!important;border-left:5px solid var(--aelin-green)!important}
  :is(.stocktake-create-card,.stocktake-active-card,.stocktake-history-card,.stocktake-count-card,.stocktake-review-card,.stocktake-receipt-lines)>.head{border-bottom:1px solid #dcebe3;background:linear-gradient(110deg,var(--aelin-pale),#fafdfb)}
  :is(.stocktake-create-card,.stocktake-active-card,.stocktake-history-card,.stocktake-count-card,.stocktake-review-card)>.head h2{color:#0b5d45;font-weight:900}
  .stocktake-session-card{border-left:4px solid var(--aelin-mid);box-shadow:0 4px 12px rgba(17,71,54,.055)}
  .stocktake-session-card header{background:linear-gradient(110deg,#f1f8f4,#fff)}
  .stocktake-table tbody tr:nth-child(even){background:#f5f9f6}
  .stocktake-sticky-actions{padding-bottom:calc(13px + env(safe-area-inset-bottom))}

  :is(.card.packing-active,.card.packing-exceptions,.card.packing-create,.card.packing-catalog-card,.card.packing-add,.card.packing-formula){border:1px solid var(--aelin-line)!important;border-left:5px solid var(--aelin-green)!important;border-radius:16px!important;box-shadow:0 6px 17px rgba(17,71,54,.075)}
  :is(.packing-active,.packing-exceptions,.packing-create,.packing-catalog-card,.packing-add,.packing-formula)>.head{border-bottom:1px solid #dcebe3;background:linear-gradient(110deg,var(--aelin-pale),#fafdfb)}
  :is(.packing-active,.packing-exceptions,.packing-create,.packing-catalog-card,.packing-add,.packing-formula)>.head h2{color:#0b5d45;font-weight:900}
  .packing-session-card{border-left:4px solid var(--aelin-mid);background:linear-gradient(110deg,#f7fbf8,#fff);box-shadow:0 4px 12px rgba(17,71,54,.055)}

  /* Keep the already-polished Dashboard layout intact; only fix its badge anchor. */
  .model-avatar{position:relative}

  .packing-hero .btn,.stocktake-tabs button{min-height:44px}
}

/* A tablet still has plenty of room when the sidebar becomes a horizontal menu. */
@media screen and (max-width:1050px){
  #app .bar{margin-left:0;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left))}
  .app{width:100%;max-width:100%;margin-left:0;padding:0 18px calc(48px + 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 -18px 18px;padding:8px max(18px,env(safe-area-inset-left));background:#004a36;box-shadow:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .nav-brand,.nav:before,.nav:after{display:none!important}
  .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}
}

@media screen and (max-width:900px){
  .grid{grid-template-columns:1fr}
  #dash .metrics,#laporan .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  #barcode .barcode-layout{grid-template-columns:1fr}
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top{min-height:auto;padding:21px 19px;border-radius:16px}
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top h1{font-size:24px}
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top .muted{font-size:12px}
  :is(#stok,#biaya,#laporan,#produk,#barcode) .card:not(.metric)>.head,#gerak.packing-show-legacy .card>.head{align-items:flex-start;padding:14px 15px}
  #laporan>.card>.head .filters{display:grid;grid-template-columns:1fr;width:100%}
  #laporan>.card>.head .filters .btn{width:100%}
}

@media screen and (max-width:430px){
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top{padding:18px 16px}
  :is(#stok,#biaya,#laporan,#produk,#barcode)>.top h1{font-size:22px}
  :is(#stok,#biaya,#laporan,#produk,#barcode) .card:not(.metric),#gerak.packing-show-legacy>.grid>.card,#gerak.packing-show-legacy>.card{border-left-width:4px!important}
  #laporan .metrics{grid-template-columns:1fr}
}

@media screen and (max-width:360px){
  #dash .metrics{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  :is(#stok,#biaya,#gerak.packing-show-legacy) tbody td{transition:none}
}