/* Mr. Hut Stock System V12.1 — iPhone/iPad responsive UI overrides */
:root{
  --tap:46px;
  --page-pad:clamp(12px,2.2vw,22px);
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  min-width:0;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{
  max-width:100%;
}
button,.primary,.secondary,.danger,.ghost,.nav-btn,.profile-pill,.icon-btn,.scan-btn{
  min-height:var(--tap);
  touch-action:manipulation;
}
input,select,textarea{
  min-height:var(--tap);
}
textarea{line-height:1.45}
img,video,canvas,svg{max-width:100%}

/* Header */
.topbar{
  min-height:72px;
  gap:12px;
  padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));
}
.topbar>div:first-child{min-width:0}
.top-actions{min-width:0;flex-shrink:1}
.profile-pill{
  max-width:min(46vw,310px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.icon-btn{min-width:46px;flex:0 0 46px}

/* Location + navigation */
.location-bar{
  width:100%;
  padding-left:max(var(--page-pad),env(safe-area-inset-left));
  padding-right:max(var(--page-pad),env(safe-area-inset-right));
  background:var(--bg);
}
.location-bar label{min-width:min(280px,100%)}
.nav-scroll{
  top:72px;
  gap:9px;
  padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.nav-btn{
  scroll-snap-align:start;
  padding:10px 14px;
  font-size:.94rem;
}
.nav-btn .small{font-size:.78rem}

.main{
  width:100%;
  max-width:1280px;
  padding:var(--page-pad);
  padding-left:max(var(--page-pad),env(safe-area-inset-left));
  padding-right:max(var(--page-pad),env(safe-area-inset-right));
  padding-bottom:max(28px,calc(18px + env(safe-area-inset-bottom)));
}
.page,.card,.table-wrap{min-width:0}
.page-head h2{line-height:1.2}
.actions>button,.button-row>button{min-height:var(--tap)}

/* Tables remain complete but are easy to swipe on touch devices */
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.table-wrap table{margin:0}
th,td{overflow-wrap:anywhere}
td .button-row{min-width:0!important;flex-wrap:nowrap}
td .button-row button{white-space:nowrap}

/* Media and receipt UI */
.photo-preview{width:100%;height:auto;max-height:min(58vh,520px)}
.receipt-preview-layout{align-items:start}
.receipt-line{min-width:0}
.receipt-line>*{min-width:0}
.receipt-title h3{overflow-wrap:anywhere}
.prepared-grid .card{min-width:0}
.product-thumb{flex:none}

/* Modal/scanner */
.modal{
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
.modal-card{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.reader{min-height:min(52vh,420px)}

/* iPad portrait / small tablet */
@media (max-width:1024px){
  .cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col{grid-template-columns:1fr}
  .page-head{align-items:stretch}
  .receipt-preview-layout{grid-template-columns:1fr}
  .receipt-preview-layout .photo-preview{max-height:48vh}
  .prepared-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* iPhone landscape / compact tablets */
@media (max-width:760px){
  :root{--page-pad:12px}
  .topbar{min-height:68px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px}
  .nav-scroll{top:68px}
  .top-title{font-size:1rem}
  .eyebrow{font-size:.66rem}
  .profile-pill{max-width:44vw;padding:8px 11px;font-size:.92rem}
  .location-bar{gap:7px;padding-top:9px;padding-bottom:9px}
  .location-bar label{width:100%;min-width:0}
  .location-notice{width:100%;line-height:1.35}

  /* 16px prevents Safari zooming when a field receives focus */
  input,select,textarea{font-size:16px;padding:12px}
  label{font-size:.94rem}
  .primary,.secondary,.danger,.ghost{padding:12px 14px}

  .page-head{flex-direction:column;gap:10px;margin-bottom:13px}
  .page-head .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .page-head .actions:has(> button:only-child){grid-template-columns:1fr}
  .search-line{align-items:stretch}
  .search-line input{min-width:0}
  .scan-btn{min-width:52px}

  .receipt-line{grid-template-columns:1fr 1fr;gap:10px}
  .receipt-line .check-line,.receipt-line .receipt-line-total,.receipt-line .receipt-remove{grid-column:1/-1}
  .receipt-line .receipt-remove{width:100%}
  .ingredient-row{grid-template-columns:1fr 1fr}
  .ingredient-row label:first-child{grid-column:1/-1}

  .modal{align-items:end;padding-left:0;padding-right:0;padding-bottom:0}
  .modal-card{
    width:100%;
    max-width:none;
    max-height:calc(92dvh - env(safe-area-inset-top));
    border-radius:22px 22px 0 0;
    padding:16px max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  }
}

/* iPhone portrait */
@media (max-width:520px){
  .topbar{gap:8px}
  .top-title{font-size:.96rem}
  .top-actions{gap:6px}
  .profile-pill{max-width:45vw;font-size:.88rem;padding:8px 10px}
  .icon-btn{min-width:44px;width:44px;height:44px;flex-basis:44px}
  .badge{top:-4px;right:-4px}

  .nav-scroll{gap:7px;padding-top:8px;padding-bottom:8px}
  .nav-btn{min-height:44px;padding:9px 12px;font-size:.9rem}

  .cards-4,.cards-3{grid-template-columns:1fr}
  .metric .value{font-size:1.55rem}
  .card{padding:14px;border-radius:16px}
  .page-head .actions{grid-template-columns:1fr}
  .button-row{display:grid;grid-template-columns:1fr;width:100%}
  .button-row>button{width:100%}
  .inline-form{display:grid;grid-template-columns:1fr}
  .search-line{display:grid;grid-template-columns:minmax(0,1fr) auto}

  .prepared-grid{grid-template-columns:1fr}
  .prepared-grid .product-thumb{height:min(42vw,180px)}
  .receipt-line{grid-template-columns:1fr}
  .receipt-line>*{grid-column:1!important}
  .ingredient-row{grid-template-columns:1fr}
  .ingredient-row>*{grid-column:1!important}
  .receipt-summary{font-size:1.05rem}
  .photo-preview{max-height:55vh}

  .kv{grid-template-columns:1fr;gap:5px}
  .kv div:nth-child(odd){margin-top:8px}
  .auth-view{padding:16px max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .auth-card{padding:22px 18px;border-radius:22px}
  .auth-card .primary{width:100%}

  table{min-width:640px}
  .report-section table{min-width:760px}
  th,td{padding:10px;font-size:.88rem}
  th{font-size:.72rem}

  .toast{width:calc(100vw - 24px);max-width:none;text-align:center}
}

/* Extra narrow iPhones */
@media (max-width:380px){
  .topbar{padding-left:10px;padding-right:10px}
  .profile-pill{max-width:42vw;font-size:.82rem}
  .top-title{font-size:.9rem}
  .nav-btn{font-size:.86rem}
  .card{padding:12px}
}

/* Landscape phones: preserve usable vertical workspace */
@media (max-height:520px) and (orientation:landscape){
  .topbar{position:relative;min-height:60px}
  .nav-scroll{top:0}
  .photo-preview{max-height:68vh}
  .modal-card{max-height:100dvh}
}

@media print{
  .responsive-mobile-hint{display:none!important}
}