/* ==========================================================
   KAZUKO LAUNDRY V67 - STANDARD FINAL UI
   Single responsive source of truth.
   ========================================================== */

html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
#app,#mainApp,.page,.page>main{
  max-width:100%;
  box-sizing:border-box;
}
*,*:before,*:after{box-sizing:border-box}

/* ---------- Customer address ---------- */
#sale #saleAddress{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:32px!important;
  max-height:64px!important;
  padding:5px 8px!important;
  resize:none!important;
  overflow:auto!important;
  border:1px solid #d9c7ba!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#17262a!important;
  pointer-events:auto!important;
  user-select:text!important;
  -webkit-user-select:text!important;
  touch-action:manipulation!important;
}

/* ---------- Dashboard: exact 3 columns on phone/tablet ---------- */
@media screen and (max-width:1280px){
  body #home main{
    width:100%!important;
    max-width:100%!important;
    padding-left:8px!important;
    padding-right:8px!important;
    overflow-x:hidden!important;
  }
  body #home main .tiles{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
  }
  body #home main .tiles>button.tile{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:82px!important;
    margin:0!important;
    padding:7px 3px!important;
    text-align:center!important;
  }
  body #home main .tiles>button.tile>span{
    display:block!important;
    line-height:1!important;
    margin:0 0 4px!important;
  }
  #home .hero,#home .summary,#home .homeQuickRow{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}
@media screen and (max-width:600px){
  body #home main .tiles{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body #home main .tiles>button.tile{
    min-height:76px!important;
    padding:5px 2px!important;
    font-size:10.5px!important;
  }
  body #home main .tiles>button.tile>span{
    font-size:21px!important;
  }
}
@media screen and (min-width:1281px){
  body #home main .tiles{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* ---------- Stock navigation: readable but compact ---------- */
.stockTabs{
  max-width:100%!important;
}
.stockTabs>button{
  font-size:13.5px!important;
  font-weight:750!important;
  line-height:1.15!important;
  white-space:normal!important;
  min-height:42px!important;
  padding:7px 5px!important;
}
@media(max-width:600px){
  .stockTabs>button{
    font-size:11.5px!important;
    min-height:44px!important;
    padding:6px 3px!important;
  }
}

/* ---------- Long tables scroll only inside their table area ---------- */
.tableWrap,.stockTableWrap,.reportTableWrap,[class*="tableWrap"]{
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

/* ==========================================================
   MODALS - GENERAL
   Bottom nav is hidden whenever a modal is open.
   This prevents every long screen from losing its action buttons.
   ========================================================== */
body.modalOpen67 .bottomNav{
  display:none!important;
}

#modal.on{
  z-index:10000!important;
}

@media screen and (max-width:1280px){
  #modal.on{
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:hidden!important;
    padding:6px!important;
  }

  #modal.on>.sheet{
    width:min(100%,720px)!important;
    max-width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:10px 12px 0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:16px!important;
  }

  #modal.on>.sheet>.sheetHead{
    flex:0 0 auto!important;
    min-height:42px!important;
    margin:0!important;
    padding:0 0 7px!important;
    background:#fff!important;
    z-index:20!important;
  }

  #modal.on>.sheet>#modalBody{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0 0 8px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain;
  }

  /* Common action rows stay reachable at the bottom of their modal. */
  #modal.on:not(.billOnly43) .settingActions,
  #modal.on:not(.billOnly43) .mFooter42,
  #modal.on:not(.billOnly43) .footerActions41,
  #modal.on:not(.billOnly43) .footer41,
  #modal.on:not(.billOnly43) .modalActions{
    position:sticky!important;
    bottom:0!important;
    z-index:200!important;
    width:100%!important;
    margin:8px 0 0!important;
    padding:7px 0 max(8px,env(safe-area-inset-bottom))!important;
    background:#fff!important;
    border-top:1px solid #ead8cc!important;
    box-shadow:0 -6px 14px rgba(255,255,255,.98)!important;
  }

  #modal.on:not(.billOnly43) .settingActions,
  #modal.on:not(.billOnly43) .mFooter42,
  #modal.on:not(.billOnly43) .footerActions41,
  #modal.on:not(.billOnly43) .footer41{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)!important;
    gap:7px!important;
  }

  #modal.on:not(.billOnly43) .settingActions>button,
  #modal.on:not(.billOnly43) .mFooter42>button,
  #modal.on:not(.billOnly43) .footerActions41>button,
  #modal.on:not(.billOnly43) .footer41>button{
    width:100%!important;
    min-width:0!important;
    min-height:41px!important;
    margin:0!important;
  }

  /* Delete-data dialog */
  .deleteData49{
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }
  .deleteData49 .deleteItems49{
    max-height:92px!important;
    overflow-y:auto!important;
  }

  /* Form content may shrink but never escape modal width. */
  #modal .settingRow,#modal .settingGrid,#modal .twoCol41,#modal .cols41,
  #modal input,#modal select,#modal textarea,#modal button{
    min-width:0!important;
    max-width:100%!important;
  }
}

/* ==========================================================
   BILL PREVIEW - LONG BILL
   Preserve exact K80 paper, but make on-screen preview independently
   scrollable and keep IN K80 / CHIA SẺ visible.
   ========================================================== */
@media screen and (max-width:1280px){
  #modal.billOnly43.on{
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:hidden!important;
    padding:6px!important;
  }

  #modal.billOnly43.on>.sheet{
    width:min(calc(80mm + 28px),calc(100vw - 12px))!important;
    max-width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    min-height:0!important;
    padding:8px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  #modal.billOnly43.on>.sheet>.sheetHead{
    flex:0 0 auto!important;
    min-height:36px!important;
    padding:0 0 5px!important;
  }

  #modal.billOnly43.on>.sheet>#modalBody{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0 0 8px!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #modal.billOnly43 .billPreview43{
    width:80mm!important;
    max-width:100%!important;
    min-width:0!important;
    padding-bottom:2px!important;
  }

  #modal.billOnly43 .billPreview43 .billPaper{
    max-width:100%!important;
  }

  #modal.billOnly43 .billActions43{
    position:sticky!important;
    bottom:0!important;
    z-index:300!important;
    display:flex!important;
    justify-content:center!important;
    gap:7px!important;
    width:100%!important;
    margin:8px 0 0!important;
    padding:7px 3px max(8px,env(safe-area-inset-bottom))!important;
    background:#fff!important;
    border-top:1px solid #ead8cc!important;
    box-shadow:0 -6px 14px rgba(255,255,255,.98)!important;
  }

  #modal.billOnly43 .billActions43>button{
    min-width:0!important;
    min-height:40px!important;
    margin:0!important;
  }
}

/* Small phones: scale preview visually, physical print remains 80mm. */
@media screen and (max-width:380px){
  #modal.billOnly43 .billPreview43,
  #modal.billOnly43 .billPreview43 .billPaper{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
}

/* Printing remains the original K80 layout. */
@media print{
  body.modalOpen67 .bottomNav{display:none!important}
  #modal.billOnly43.on>.sheet,
  #modal.billOnly43.on>.sheet>#modalBody{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #modal.billOnly43 .billActions43{display:none!important}
}


/* ---------- V67 Cash-flow report ---------- */
.flowReport67{display:grid;gap:12px}
.flowHead67{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:1px solid #f0d8c8;border-radius:16px;background:#fff;
}
.flowHead67 h3{margin:0;font-size:18px}
.flowHead67 small{display:block;margin-top:3px;opacity:.65}
.flowGrand67{text-align:right}
.flowGrand67 span{display:block;font-size:11px;opacity:.65}
.flowGrand67 b{font-size:22px}
.flowMethodGrid67{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;
}
.flowMethodGrid67 button{
  min-width:0;padding:12px 8px;border:1px solid #ead8ca;border-radius:15px;background:#fff;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
}
.flowMethodGrid67 button.on{border:2px solid #ff3d7f;background:#fff6f9}
.flowMethodGrid67 button>span{font-size:24px}
.flowMethodGrid67 button>b{font-size:12px}
.flowMethodGrid67 button>small{font-size:10px;opacity:.62}
.flowMethodGrid67 button>strong{font-size:15px}
.flowSelected67{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:10px 12px;border-radius:12px;background:#fff7ed;border:1px solid #f1dcc8;
}
@media(max-width:900px){
  .flowMethodGrid67{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flowHead67{align-items:flex-start}
  .flowGrand67 b{font-size:18px}
}
@media(max-width:480px){
  .flowHead67{display:grid}
  .flowGrand67{text-align:left}
  .flowMethodGrid67{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .flowMethodGrid67 button{padding:9px 4px}
  .flowSelected67{display:grid}
}


/* V69 QUICK PATCH - logout remains inside hero, never follows scroll */
#home .hero{
  position:relative!important;
}
#home .hero .logoutBtn,
#home .hero button[onclick*="logout"],
#home .hero button[onclick*="Logout"],
#home .hero button[onclick*="LOGOUT"],
#home .hero button[onclick*="signOut"],
#home .hero button[onclick*="doLogout"]{
  position:absolute!important;
  top:14px!important;
  right:16px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:0!important;
  z-index:3!important;
}
@media(max-width:600px){
  #home .hero .logoutBtn,
  #home .hero button[onclick*="logout"],
  #home .hero button[onclick*="Logout"],
  #home .hero button[onclick*="LOGOUT"],
  #home .hero button[onclick*="signOut"],
  #home .hero button[onclick*="doLogout"]{
    top:12px!important;
    right:14px!important;
  }
}
.addAnother69{display:flex;align-items:center;gap:8px;margin:8px 0 4px}
.addAnother69 button{font-weight:800;min-height:40px}
.addAnother69 small{opacity:.65}
.orderItems69{display:grid;gap:6px;margin:8px 0}
@media(max-width:600px){
  .addAnother69{display:grid}
  .addAnother69 button{width:100%}
}

/* ===== V74 BILL DESIGNER MOBILE ===== */
.billTable74{width:100%!important;table-layout:fixed!important;border-collapse:collapse!important}
.billTable74 th,.billTable74 td{vertical-align:top!important;box-sizing:border-box!important}
.billTable74 th:nth-child(1),.billTable74 td:nth-child(1){width:43%!important;text-align:left!important;padding-right:3px!important}
.billTable74 th:nth-child(2),.billTable74 td:nth-child(2){width:8%!important;text-align:center!important}
.billTable74 th:nth-child(3),.billTable74 td:nth-child(3){width:23%!important;text-align:right!important;white-space:nowrap!important;padding-right:8px!important}
.billTable74 th:nth-child(4),.billTable74 td:nth-child(4){width:26%!important;text-align:right!important;white-space:nowrap!important;padding-left:6px!important}
.billCustom74 .billBrand74 h2{font-family:var(--b-shop-font)!important;font-size:var(--b-shop-size)!important;font-weight:var(--b-shop-weight)!important;font-style:var(--b-shop-style)!important;text-align:var(--b-shop-align)!important}
.billCustom74 .billBrand74{text-align:var(--b-shop-align)!important}
.billCustom74 .billShopInfo74{font-family:var(--b-shopinfo-font)!important;font-size:var(--b-shopinfo-size)!important;font-weight:var(--b-shopinfo-weight)!important;font-style:var(--b-shopinfo-style)!important;text-align:var(--b-shopinfo-align)!important}
.billCustom74 .billTitle74{font-family:var(--b-title-font)!important;font-size:var(--b-title-size)!important;font-weight:var(--b-title-weight)!important;font-style:var(--b-title-style)!important;text-align:var(--b-title-align)!important}
.billCustom74 .billInfo74{font-family:var(--b-info-font)!important;font-size:var(--b-info-size)!important;font-weight:var(--b-info-weight)!important;font-style:var(--b-info-style)!important;text-align:var(--b-info-align)!important}
.billCustom74 .billTable74,.billCustom74 .billTable74 th,.billCustom74 .billTable74 td{font-family:var(--b-table-font)!important;font-size:var(--b-table-size)!important;font-weight:var(--b-table-weight)!important;font-style:var(--b-table-style)!important}
.billCustom74 .billTotals74,.billCustom74 .billTotals74 .moneyRow{font-family:var(--b-total-font)!important;font-size:var(--b-total-size)!important;font-weight:var(--b-total-weight)!important;font-style:var(--b-total-style)!important}
.billCustom74 .billStamp74{font-family:var(--b-stamp-font)!important;font-size:var(--b-stamp-size)!important;font-weight:var(--b-stamp-weight)!important;font-style:var(--b-stamp-style)!important;text-align:var(--b-stamp-align)!important}
.billCustom74 .billFooter74{margin-top:10px;font-family:var(--b-footer-font)!important;font-size:var(--b-footer-size)!important;font-weight:var(--b-footer-weight)!important;font-style:var(--b-footer-style)!important;text-align:var(--b-footer-align)!important}
.billDocCode74{text-align:center;font-weight:900;font-size:14px;margin-top:2px}.billOrderCode74{text-align:center;font-size:8px;opacity:.65;margin-top:1px}.billConfirm74{text-align:center;font-size:10px}
.billDesigner74{display:grid!important;gap:10px!important;padding-bottom:4px!important}
.billDesignerTop74{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;padding:11px;border:1px solid #efd6c6;border-radius:14px;background:#fffaf7}
.billLogoToggle74{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:42px!important;padding:7px 10px!important;border:1px solid #ead7c9!important;border-radius:10px!important;background:#fff!important}
.billLogoToggle74 input{width:22px!important;height:22px!important;min-height:0!important}
.billDesignerSectionTitle74{font-size:12px;font-weight:900;padding:8px 10px;border-radius:10px;background:#fff0e7;border:1px solid #f0d7c8}
.billDesignerGroup74{border:1px solid #ead9cd;border-radius:12px;background:#fff;overflow:hidden}
.billDesignerGroup74>summary{cursor:pointer;list-style:none;padding:11px 12px;font-weight:850;display:flex;align-items:center;min-height:44px}
.billDesignerGroup74>summary::-webkit-details-marker{display:none}.billDesignerGroup74>summary:after{content:'⌄';margin-left:auto;font-size:18px;opacity:.55}.billDesignerGroup74[open]>summary:after{content:'⌃'}.billDesignerGroup74[open]>summary{background:#fff8f3;border-bottom:1px solid #efe0d7}
.billDocGrid74,.billDesignerControls74{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}.billDocGrid74 .span2{grid-column:1/-1}
.billDocGrid74 label,.billDesignerControls74 label{min-width:0;font-size:11px;font-weight:700;display:grid;gap:4px}
.billDocGrid74 input,.billDocGrid74 select,.billDesignerControls74 input,.billDesignerControls74 select{width:100%!important;min-width:0!important;min-height:38px!important;padding:6px 8px!important;border-radius:9px!important}
.billDesignerControls74 .billCheck74{display:flex!important;align-items:center!important;gap:8px!important;min-height:38px!important;padding:6px 8px!important;border:1px solid #ead8cc!important;border-radius:9px!important;background:#fff!important}
.billDesignerControls74 .billCheck74 input{width:20px!important;height:20px!important;min-height:0!important}.billExample74{padding:8px 10px;border-radius:9px;background:#f7fafb;border:1px dashed #cbd7db;font-size:11px}.billExample74 b{font-size:13px;word-break:break-all}
.billDesignerHint74{padding:9px 10px;border-radius:10px;background:#fff9de;border:1px solid #eedf9c;font-size:10px;line-height:1.35}
.billDesigner74>.settingActions{position:sticky!important;bottom:0!important;z-index:250!important;background:#fff!important;padding-top:8px!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
@media(max-width:600px){.billDesigner74{gap:7px!important}.billDesignerTop74{grid-template-columns:1fr;padding:8px}.billLogoToggle74{width:100%}.billDocGrid74,.billDesignerControls74{grid-template-columns:1fr 1fr;gap:6px;padding:8px}.billDocGrid74 label,.billDesignerControls74 label{font-size:10.5px}.billDesignerGroup74>summary{padding:9px 10px;min-height:42px;font-size:12px}.billDesignerSectionTitle74{font-size:11px;padding:7px 8px}.billDocGrid74 input,.billDocGrid74 select,.billDesignerControls74 input,.billDesignerControls74 select{min-height:36px!important;font-size:12px!important}}
@media(max-width:390px){.billDocGrid74,.billDesignerControls74{grid-template-columns:1fr}.billDocGrid74 .span2{grid-column:auto}}