/*
 * AYUKKI V23 — GLOBAL RESPONSIVE REFINEMENT
 * Visual CSS only. No modifications to the Node.js backend or SQLite.
 * Loaded after v16 typography, v19 analytics, v20 sidebar, v21 popups & v22 reports.
 */
:root{--ay-mobile-gutter:14px;--ay-mobile-radius:17px}
html,body{max-width:100%;overflow-x:clip}
.app,main,.section,.panel,.card,.two,.three,.hero,.sales-panels,.an-columns,.formgrid,.finance-balance,.catalog-toolbar,.tablewrap{min-width:0;max-width:100%}
img,svg{max-width:100%}
input,select,textarea,button{box-sizing:border-box}
button,select{touch-action:manipulation}
/* Controls added without changing app.js/tab names. */
.ay-mobile-nav-toggle{display:none;background:#fff7f4;border:1px solid #e9d2cb;border-radius:13px;padding:0 12px;height:42px;min-width:88px;align-items:center;justify-content:center;gap:8px;color:#810D0D;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ay-mobile-nav-toggle:focus-visible{outline:3px solid rgba(129,13,13,.32);outline-offset:2px}
.ay-mobile-nav-toggle .ay-menu-icon{width:19px;height:19px;flex-shrink:0}
.ay-mobile-nav-toggle .ay-menu-icon line{transition:transform .18s ease;transform-origin:center}
/* Desktop: the filter should never fill the full panel width for each select. */
#produk .panel>.toolbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(135px,190px) minmax(120px,165px);align-items:center;gap:10px}
#produk .panel>.toolbar>*{min-width:0!important;max-width:none!important;width:100%!important;margin:0!important;flex:none!important}
#produk .panel>.toolbar>.ay-select-control{display:block;width:100%}
#produk .panel>.toolbar .ay-select-trigger{min-height:44px;width:100%}
#produk .panel>.toolbar>input{height:44px}
/* Unified chart/table containment and interaction feedback. */
.tablewrap{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#e4c9c3 transparent;border-radius:10px}
.tablewrap>table{width:100%}
.tablewrap:focus-visible{outline:2px solid #a82f2f;outline-offset:3px}
#dashboard .month-chart,#dashboard .line-chart-wrap,#dashboard .channel-chart,#dashboard .legend{min-width:0;max-width:100%}
#dashboard .line-chart-meta{min-width:0;flex-wrap:wrap}
#dashboard .line-chart-big,.metric,.finance-amount,.an-kpi .an-value{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.panel,.card{min-width:0}
#productgrid .product{min-width:0}
/* Mobile-only hint for wide data tables; scroll stays inside panel. */
.ay-table-scroll-hint{display:none;color:#967a73;font-size:10px;line-height:1.5;margin:0 0 7px;padding:0 2px}
/* Better spacing on intermediate tablet layouts. */
@media(min-width:861px) and (max-width:1230px){
 main{padding-inline:clamp(16px,2vw,27px)}
 .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .finance-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
 .sales-panels,.hero,.two,.an-columns,.an-columns.equal{grid-template-columns:1fr}
 .products{grid-template-columns:repeat(2,minmax(0,1fr))}
 #produk .panel>.toolbar{grid-template-columns:minmax(180px,1fr) repeat(2,minmax(120px,160px))}
}
/* All pages: phone + tablet use compact header and an expandable vertical navigation. */
@media(max-width:860px){
 html{scroll-padding-top:92px}
 body{font-size:13px;line-height:1.55;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .app{display:block;width:100%;max-width:100%}
 .app>aside{
   position:sticky!important;inset-block-start:0;z-index:125;
   width:100%!important;min-width:0!important;height:auto!important;min-height:70px;
   display:flex!important;flex-direction:row!important;align-items:center;flex-wrap:wrap;
   justify-content:space-between;gap:0 8px;
   padding:10px max(14px,env(safe-area-inset-left)) 10px max(14px,env(safe-area-inset-right));
   overflow:visible!important;border-right:0;
   border-bottom:1px solid #eedaD5;
   background:rgba(255,253,251,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
   box-shadow:0 4px 19px rgba(79,31,26,.06)
 }
 .app>aside .brand{min-width:0;flex:1 1 160px;margin:0!important;padding:0!important;border:0!important;gap:9px;align-items:center}
 .app>aside .brand-logo{width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:13px!important}
 .app>aside .brand-word{font-size:clamp(12px,3.2vw,15px)!important;line-height:1.26!important;letter-spacing:-.03em!important;white-space:normal!important}
 .app>aside .subtitle{font-size:8px!important;line-height:1.3!important;letter-spacing:.08em!important;white-space:normal!important;margin-top:3px!important}
 .app>aside .sidefoot{display:none!important}
 .ay-mobile-nav-toggle{display:inline-flex;flex:0 0 auto}
 .app>aside .menus{display:none!important;flex:0 0 100%!important;width:100%!important;min-width:0!important;max-height:min(67dvh,590px);overflow-y:auto!important;overflow-x:hidden!important;scroll-snap-type:none!important;overscroll-behavior-y:contain;flex-direction:column!important;gap:12px!important;padding:13px 0 9px!important;margin-top:10px;border-top:1px solid #f1e2dd}
 .app>aside.is-mobile-open .menus{display:flex!important}
 .app>aside .nav-group,.app>aside .nav-group:nth-child(2),.app>aside .nav-group:nth-child(3),.app>aside .nav-group:nth-child(4){width:100%!important;min-width:0!important;max-width:100%!important;flex:0 0 auto!important;scroll-snap-align:none!important}
 .app>aside .nav-group-title{font-size:10px!important;padding:2px 9px 7px!important;letter-spacing:.12em}
 .app>aside .nav-group-items,.app>aside .nav-group:nth-child(2) .nav-group-items{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
 .app>aside .nav{font-size:12px!important;padding:11px 10px!important;gap:8px!important;min-width:0!important;min-height:47px!important;line-height:1.4!important;border-radius:12px!important;align-items:center!important}
 .app>aside .nav .ico{flex:0 0 19px!important;width:19px!important;height:19px!important}
 .app>aside .nav-svg{height:18px!important;width:18px!important}
 .app>aside .nav-label{min-width:0!important;overflow-wrap:anywhere}
 .app>aside .nav-group-settings{padding-top:9px!important;border-top:1px solid #f1e3df!important}
 .app>aside .nav-group-settings .nav-group-items{grid-template-columns:1fr!important}
 .app>aside .nav-group-settings .nav{max-width:100%!important}
 .app main{width:100%;max-width:100%;min-width:0;padding:17px var(--ay-mobile-gutter) calc(28px + env(safe-area-inset-bottom))!important}
 main>.topbar{gap:11px;align-items:center;margin-bottom:18px;min-width:0}
 main>.topbar>div:first-child{min-width:0;flex:1 1 100%}
 .topbar .path{font-size:10px;margin-bottom:5px}
 .topbar .section-h1{margin:6px 0 6px;font-size:clamp(22px,4.7vw,29px);line-height:1.22;letter-spacing:-.65px;overflow-wrap:anywhere}
 .topbar .lead{font-size:11px;line-height:1.6;margin:0 0 3px}
 main>.topbar .top-actions{gap:7px;margin-top:0;justify-content:flex-start}
 .pill,.logout{font-size:11px;padding:8px 11px}
 .section>h1{font-size:clamp(22px,5vw,28px);line-height:1.22;letter-spacing:-.7px;margin:5px 0 8px;overflow-wrap:anywhere}
 .section>.lead{font-size:11.5px;line-height:1.65;margin-bottom:18px}
 .section-h1{align-items:center;gap:8px!important}
 .section-h1 .icon-chip{width:34px!important;height:34px!important;flex:0 0 34px!important;font-size:15px!important}
 h2{font-size:15px;line-height:1.35;letter-spacing:-.2px}
 .card,.panel{padding:16px!important;border-radius:18px!important;box-shadow:0 8px 26px rgba(62,28,24,.055)!important;max-width:100%;min-width:0}
 .panel h2::before{width:31px;height:31px;flex-shrink:0}
 .grid-cards,.two,.three,.hero,.sales-panels,.an-columns,.an-columns.equal{display:grid;grid-template-columns:1fr!important;gap:12px!important}
 .grid-cards{margin:0;gap:11px!important}
 .card .metric{font-size:clamp(19px,4.5vw,26px);line-height:1.22;letter-spacing:-.5px;margin:7px 0 5px}
 .card .label{font-size:11px}
 .card .small{font-size:10px;line-height:1.55}
 .metric-card{padding-top:17px!important}
 .two,.hero,.sales-panels{margin-top:12px!important}
 .formgrid,.formgrid.triple,.formgrid.merchant-visible{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .field{min-width:0;margin:6px 0 9px!important}
 .field label{font-size:11.5px;line-height:1.4;margin-bottom:5px}
 .formgrid>.field{min-width:0}
 textarea{min-height:88px}
 /* iOS Safari does not zoom focused inputs when their text is at least 16px. */
 input,select,textarea,.ay-date-trigger,.ay-select-trigger{font-size:16px!important;min-width:0;max-width:100%;width:100%;line-height:1.35}
 input,select{min-height:45px}
 .ay-date-trigger,.ay-select-trigger{min-height:45px!important;padding:10px 11px!important}
 .ay-date-label,.ay-select-label{font-size:13px;line-height:1.4}
 .ay-select-control,.ay-date-control{min-width:0;width:100%;max-width:100%}
 .btn,.logout,.stockaction button{min-height:42px}
 .notice,.menu-guidance,.finance-tip,.an-warning,.an-export-summary,.settings-note{font-size:11px;line-height:1.65;padding:12px}
 .products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .product{min-width:0;padding:12px!important;border-radius:15px}
 .product strong{font-size:11.5px!important;overflow-wrap:anywhere}
 .product .availability{font-size:10px;line-height:1.4}
 .cartline{flex-wrap:wrap}
 .cartline>*{min-width:0}
 .total{font-size:18px;gap:10px}
 .total span:last-child{overflow-wrap:anywhere;text-align:right}
 .ay-table-scroll-hint{display:flex;align-items:center;gap:6px}
 .tablewrap table{min-width:580px}
 .tablewrap td,.tablewrap th{padding:11px 9px}
 .tablewrap .editprice{min-width:90px;width:105px;font-size:14px!important}
 .tablewrap .stockaction{min-width:170px}
 .tablewrap .stockaction button{white-space:nowrap;padding:8px!important;min-height:36px}
 .toolbar{gap:9px}
 .pager{flex-wrap:wrap;justify-content:center;gap:7px}
 .pager button{padding:9px 12px;font-size:11px}
 .channel-chart{display:grid;grid-template-columns:1fr!important;gap:12px}
 #dashboard .donut{margin:8px auto 10px}
 .barrow{grid-template-columns:76px minmax(0,1fr) 78px;gap:7px;font-size:10px;margin:12px 0}
 .barrow>*{min-width:0}
 .barrow>span:last-child,.barrow>b:last-child{overflow-wrap:anywhere;text-align:right}
 #dashboard .month-chart{min-height:190px;max-width:100%;padding:10px!important}
 #dashboard .line-chart-svg{width:100%;max-width:100%;height:160px}
 #dashboard .line-chart-big{font-size:21px}
 .finance-balance{display:block!important;padding:20px!important;border-radius:19px!important;margin-bottom:12px}
 .finance-amount{font-size:clamp(27px,6.3vw,37px)!important;overflow-wrap:anywhere;line-height:1.24}
 .finance-live{font-size:9px;white-space:normal}
 .finance-equation{margin-top:15px!important;padding:15px 0 0!important;border:0!important;border-top:1px solid #ffffff45!important;min-width:0}
 .finance-ledger{max-width:100%;min-width:0}
 .finance-ledger-row{grid-template-columns:32px minmax(0,1fr)!important;gap:6px 10px!important;padding:12px 0!important}
 .finance-ledger-icon{width:32px;height:32px}
 .finance-ledger-name,.finance-ledger-meta{overflow-wrap:anywhere}
 .finance-ledger-amount,.finance-ledger-balance{grid-column:2!important;text-align:left!important;overflow-wrap:anywhere}
 .finance-ledger-balance{display:flex;gap:6px;align-items:baseline}
 .finance-ledger-balance b{display:inline!important}
 .finance-history-heading{flex-wrap:wrap}
 .finance-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .finance-summary .card:first-child{grid-column:1/-1}
 .finance-summary .card .metric{font-size:21px!important}
 .an-toolbar{padding:14px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
 .an-toolbar .field{min-width:0!important;flex:none!important;width:100%!important}
 .an-toolbar .field:nth-child(3){grid-column:1/-1}
 .an-toolbar>button,.an-toolbar>.an-state{grid-column:1/-1;width:100%;white-space:normal!important}
 .an-overview{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .an-kpi{min-width:0;padding:13px!important;border-radius:16px}
 .an-kpi .an-value{font-size:clamp(16px,4.4vw,22px)!important;overflow-wrap:anywhere}
 .an-graph-svg{height:220px!important;max-width:100%;overflow:hidden}
 .an-tabs{max-width:100%;flex-wrap:wrap}
 .an-tabs button{font-size:11px;padding:8px 10px}
 .an-columns,.an-columns.equal{grid-template-columns:1fr!important}
 .an-baritem{grid-template-columns:minmax(0,1fr) minmax(65px,auto)}
 .an-table{min-width:540px}
 .an-export-form{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .an-export-form>.field:first-child,.an-export-form>.an-export-submit{grid-column:1/-1!important}
 .an-export-form .ay-select-trigger{width:100%}
 .settings-grid{grid-template-columns:1fr!important;gap:12px!important}
 .settings-card{padding:17px!important}
 .settings-info-item{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start}
 .settings-info-item span,.settings-info-item strong{min-width:0;overflow-wrap:anywhere}
 .stock-filter-row{display:grid;grid-template-columns:1fr;gap:7px;padding:12px}
 .stock-filter-row>*{width:100%;min-width:0!important;max-width:100%!important}
 .catalog-toolbar{align-items:stretch;padding:12px;gap:10px}
 .catalog-toolbar>.btn{min-width:0;white-space:normal}
 #produk .panel>.toolbar{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
 #produk .panel>.toolbar>input#search-product{grid-column:1/-1}
 #produk .panel>.toolbar>.ay-select-control{width:100%}
 #produk .panel>.toolbar .ay-select-trigger{min-height:44px!important;height:44px}
 #penjualan .sales-filter-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 #penjualan .sales-filter-toolbar>input#search-sales{grid-column:1/-1;min-height:44px}
 #penjualan .sales-filter-toolbar>.date-filter,#penjualan .sales-filter-toolbar>.reset-date{grid-column:auto!important}
 .login-box{padding:20px!important;border-radius:21px!important}
 .login-head{gap:9px!important}
 .login-logo{width:60px!important;height:60px!important;border-radius:14px!important;flex:0 0 60px}
 .login-box h2{font-size:18px;line-height:1.3}
 .login-overlay{padding:14px}
 .ay-floating{max-width:calc(100vw - 20px)!important}
 .ay-dialog{max-width:calc(100vw - 32px);padding:19px!important}
}
@media(max-width:480px){
 :root{--ay-mobile-gutter:12px}
 .app>aside .nav-group-items,.app>aside .nav-group:nth-child(2) .nav-group-items{grid-template-columns:1fr!important;gap:3px!important}
 .app>aside .menus{max-height:min(69dvh,550px)}
 .app>aside .nav{min-height:42px!important;padding:9px 12px!important;font-size:12px!important}
 .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #dashboard .grid-cards .metric-card:first-child{grid-column:1/-1}
 .inventory-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .inventory-stats>.card:first-child{grid-column:1/-1}
 .customer-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .customer-kpis>.card:first-child{grid-column:1/-1}
 .panel,.card{padding:14px!important;border-radius:16px!important}
 .card .metric{font-size:clamp(17px,5vw,24px)}
 .panel h2{font-size:14px}
 .products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #kasir .formgrid:not(#sales-details-grid){grid-template-columns:1fr!important}
 .formgrid.triple{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .formgrid.triple>.field:last-child{grid-column:1/-1}
 .an-toolbar{padding:12px!important}
 .an-overview{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:355px){
 .app>aside .brand-logo{width:40px!important;height:40px!important;flex-basis:40px!important}
 .app>aside .brand-word{font-size:12px!important}
 .ay-mobile-nav-toggle{min-width:76px;padding-inline:8px;font-size:11px}
 .products{grid-template-columns:1fr!important}
 .finance-summary{grid-template-columns:1fr!important}
 .grid-cards{grid-template-columns:1fr!important}
 .grid-cards>.card,.inventory-stats>.card,.customer-kpis>.card{grid-column:auto!important}
 .an-overview{grid-template-columns:1fr!important}
 .barrow{grid-template-columns:70px minmax(0,1fr) 73px}
 .ay-date-trigger,.ay-select-trigger{padding-inline:8px!important}
 #produk .panel>.toolbar{grid-template-columns:1fr!important}
 #produk .panel>.toolbar>input#search-product{grid-column:1!important}
}
@media(prefers-reduced-motion:reduce){.app>aside .menus,.ay-mobile-nav-toggle{transition:none!important}}