/* PHONE UI V2 — final override, loaded LAST */
*{box-sizing:border-box}

@media (max-width:768px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body{
    margin:0!important;
    -webkit-text-size-adjust:100%!important;
  }

  .app{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:8px!important;
    overflow-x:hidden!important;
  }

  .app>header{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 10px!important;
    padding:16px!important;
  }

  .app>header h1{
    margin:0!important;
    font-size:23px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere;
  }

  .app>header p{
    font-size:13px!important;
    line-height:1.5!important;
  }

  /* IMPORTANT: stop desktop grid from leaving empty right side */
  .toolbar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:9px!important;
    padding:10px!important;
    margin:0 0 10px!important;
  }

  .toolbar > *,
  .toolbar .upload-btn,
  #pasteZone,
  #daySelect,
  #timeSelect,
  .date-control,
  #scanBtn,
  #resetBtn,
  #status{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    grid-column:auto!important;
    grid-area:auto!important;
  }

  .toolbar .upload-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:50px!important;
    padding:10px 12px!important;
  }

  #pasteZone{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-height:96px!important;
    padding:14px!important;
    text-align:center!important;
  }

  #pasteZone b{
    font-size:15px!important;
    line-height:1.35!important;
  }

  #pasteZone small{
    display:block!important;
    margin-top:7px!important;
    font-size:12px!important;
    line-height:1.55!important;
    white-space:normal!important;
  }

  .mode-select,
  #daySelect,
  #timeSelect{
    display:block;
    min-height:46px!important;
    padding-left:12px!important;
    font-size:15px!important;
  }

  .date-control{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
  }

  .date-control label,
  .date-control input,
  #todayCambodiaBtn{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .date-control input{
    min-height:48px!important;
    font-size:16px!important;
    text-align:center!important;
  }

  #todayCambodiaBtn,
  #scanBtn,
  #resetBtn{
    min-height:48px!important;
    white-space:normal!important;
  }

  #status{
    min-height:48px!important;
    padding:11px 12px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
  }

  .pro-toolbar{
    width:100%!important;
    max-width:100%!important;
    padding:10px!important;
  }

  .pro-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }

  .pro-actions > *{
    min-width:0!important;
    max-width:100%!important;
  }

  .pro-actions button{
    width:100%!important;
    min-height:44px!important;
    padding:8px 6px!important;
    font-size:12px!important;
    white-space:normal!important;
    line-height:1.25!important;
  }

  .layout,
  .panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .layout{
    display:block!important;
  }

  .panel{
    padding:10px!important;
    margin-bottom:10px!important;
  }

  .preview-box{
    width:100%!important;
    max-width:100%!important;
    height:min(55vh,290px)!important;
  }

  img,canvas{
    max-width:100%!important;
    height:auto;
  }
}

@media (max-width:430px){
  .app{padding:6px!important}

  .app>header{
    padding:14px!important;
    border-radius:14px!important;
  }

  .app>header h1{
    font-size:20px!important;
  }

  .toolbar{
    padding:9px!important;
    border-radius:14px!important;
  }

  .pro-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:340px){
  .pro-actions{
    grid-template-columns:1fr!important;
  }
}


/* ===== PHONE UI V3 ===== */
@media (max-width:768px){
  /* Keep the desired visual order */
  .toolbar .upload-btn{order:1!important}
  #pasteZone{order:2!important}
  #daySelect{order:3!important}
  #timeSelect{order:4!important}
  .date-control{order:5!important}
  #scanBtn{order:6!important}
  #resetBtn{order:7!important}
  #status{order:8!important}

  /* iPhone date input overflow fix */
  .date-control{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .date-control input[type="date"],
  #manualDateInput{
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    inline-size:100%!important;
    min-width:0!important;
    min-inline-size:0!important;
    max-width:100%!important;
    max-inline-size:100%!important;
    margin:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #manualDateInput::-webkit-date-and-time-value{
    min-width:0!important;
    text-align:center!important;
  }

  #manualDateInput::-webkit-datetime-edit{
    min-width:0!important;
    padding:0!important;
  }

  #pasteZone{
    min-height:92px!important;
    margin:0!important;
  }

  .toolbar{overflow:hidden!important}
}

@media (max-width:430px){
  #manualDateInput{font-size:16px!important}
}