/* V51 - Supplier form: fit current fields in one phone viewport with no page scrollbar */

@media(max-width:600px){
  #modal .sheet:has(#supId),
  #modal .sheet:has(#supName){
    width:calc(100vw - 8px)!important;
    max-width:calc(100vw - 8px)!important;
    height:calc(100dvh - 8px)!important;
    max-height:calc(100dvh - 8px)!important;
    min-height:0!important;
    margin:4px auto!important;
    padding:5px 7px!important;
    border-radius:12px!important;
    overflow:hidden!important;
  }

  #modal .sheet:has(#supId) .sheetHead,
  #modal .sheet:has(#supName) .sheetHead{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    padding:0 0 2px!important;
    margin:0!important;
  }

  #modal .sheet:has(#supId) .sheetHead h3,
  #modal .sheet:has(#supName) .sheetHead h3{
    font-size:13px!important;
    line-height:1!important;
    margin:0!important;
  }

  #modal .sheet:has(#supId) .sheetHead button,
  #modal .sheet:has(#supName) .sheetHead button{
    width:26px!important;
    height:26px!important;
    min-height:26px!important;
    font-size:13px!important;
  }

  #modal .sheet:has(#supId) #modalBody,
  #modal .sheet:has(#supName) #modalBody{
    height:calc(100% - 31px)!important;
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  #modal .sheet:has(#supId) .masterSheet41,
  #modal .sheet:has(#supName) .masterSheet41,
  #modal .sheet:has(#supId) .sheet41,
  #modal .sheet:has(#supName) .sheet41{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:24px minmax(0,1fr) minmax(0,.95fr) 27px 34px!important;
    gap:3px!important;
    overflow:hidden!important;
    margin:0!important;
  }

  /* compact "Thêm nhà cung cấp" intro */
  #modal .sheet:has(#supId) .hero41,
  #modal .sheet:has(#supName) .hero41{
    height:24px!important;
    min-height:24px!important;
    max-height:24px!important;
    padding:2px 5px!important;
    margin:0!important;
    border-radius:7px!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  #modal .sheet:has(#supId) .hero41>span,
  #modal .sheet:has(#supName) .hero41>span{
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    flex-basis:20px!important;
    font-size:12px!important;
    border-radius:5px!important;
  }
  #modal .sheet:has(#supId) .hero41 b,
  #modal .sheet:has(#supName) .hero41 b{
    font-size:8px!important;
    line-height:1!important;
  }
  #modal .sheet:has(#supId) .hero41 small,
  #modal .sheet:has(#supName) .hero41 small{
    display:none!important;
  }

  /* two data sections */
  #modal .sheet:has(#supId) .sectionBox41,
  #modal .sheet:has(#supName) .sectionBox41,
  #modal .sheet:has(#supId) .box41,
  #modal .sheet:has(#supName) .box41{
    min-height:0!important;
    max-height:none!important;
    padding:4px 5px!important;
    margin:0!important;
    border-radius:8px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }

  #modal .sheet:has(#supId) .sectionBox41 h4,
  #modal .sheet:has(#supName) .sectionBox41 h4,
  #modal .sheet:has(#supId) .box41 h4,
  #modal .sheet:has(#supName) .box41 h4{
    height:12px!important;
    min-height:12px!important;
    line-height:12px!important;
    margin:0 0 3px!important;
    padding:0!important;
    font-size:7.5px!important;
  }

  #modal .sheet:has(#supId) .twoCol41,
  #modal .sheet:has(#supName) .twoCol41,
  #modal .sheet:has(#supId) .cols41,
  #modal .sheet:has(#supName) .cols41{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    gap:3px 5px!important;
    align-content:stretch!important;
  }

  #modal .sheet:has(#supId) label,
  #modal .sheet:has(#supName) label{
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    font-size:7px!important;
    line-height:1!important;
    overflow:hidden!important;
  }

  #modal .sheet:has(#supId) label>input,
  #modal .sheet:has(#supName) label>input,
  #modal .sheet:has(#supId) label>select,
  #modal .sheet:has(#supName) label>select{
    height:25px!important;
    min-height:25px!important;
    max-height:25px!important;
    margin:2px 0 0!important;
    padding:2px 5px!important;
    border-radius:6px!important;
    font-size:8px!important;
  }

  #modal .sheet:has(#supId) label>textarea,
  #modal .sheet:has(#supName) label>textarea{
    height:25px!important;
    min-height:25px!important;
    max-height:25px!important;
    margin:2px 0 0!important;
    padding:3px 5px!important;
    border-radius:6px!important;
    font-size:8px!important;
    resize:none!important;
  }

  /* Active toggle very thin */
  #modal .sheet:has(#supId) .toggleRow41,
  #modal .sheet:has(#supName) .toggleRow41,
  #modal .sheet:has(#supId) .toggle41,
  #modal .sheet:has(#supName) .toggle41{
    height:27px!important;
    min-height:27px!important;
    max-height:27px!important;
    margin:0!important;
    padding:3px 6px!important;
    border-radius:7px!important;
  }
  #modal .sheet:has(#supId) .toggleRow41 span b,
  #modal .sheet:has(#supName) .toggleRow41 span b,
  #modal .sheet:has(#supId) .toggle41 span b,
  #modal .sheet:has(#supName) .toggle41 span b{
    font-size:7.5px!important;
    line-height:1!important;
  }
  #modal .sheet:has(#supId) .toggleRow41 span small,
  #modal .sheet:has(#supName) .toggleRow41 span small,
  #modal .sheet:has(#supId) .toggle41 span small,
  #modal .sheet:has(#supName) .toggle41 span small{
    display:none!important;
  }
  #modal .sheet:has(#supId) .toggleRow41 input,
  #modal .sheet:has(#supName) .toggleRow41 input,
  #modal .sheet:has(#supId) .toggle41 input,
  #modal .sheet:has(#supName) .toggle41 input{
    width:16px!important;
    height:16px!important;
    min-height:16px!important;
  }

  /* Footer always visible and compact */
  #modal .sheet:has(#supId) .footerActions41,
  #modal .sheet:has(#supName) .footerActions41,
  #modal .sheet:has(#supId) .footer41,
  #modal .sheet:has(#supName) .footer41{
    position:static!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    display:grid!important;
    grid-template-columns:1fr 1.4fr!important;
    gap:4px!important;
    padding:2px 0 0!important;
    margin:0!important;
    background:#fff!important;
    border-top:1px solid #eee!important;
  }
  #modal .sheet:has(#supId) .footerActions41 button,
  #modal .sheet:has(#supName) .footerActions41 button,
  #modal .sheet:has(#supId) .footer41 button,
  #modal .sheet:has(#supName) .footer41 button{
    height:31px!important;
    min-height:31px!important;
    max-height:31px!important;
    padding:2px 4px!important;
    margin:0!important;
    font-size:7.8px!important;
    border-radius:7px!important;
    white-space:nowrap!important;
  }

  /* Current form has no scrollbar */
  #modal .sheet:has(#supId),
  #modal .sheet:has(#supName),
  #modal .sheet:has(#supId) #modalBody,
  #modal .sheet:has(#supName) #modalBody{
    scrollbar-width:none!important;
  }
  #modal .sheet:has(#supId)::-webkit-scrollbar,
  #modal .sheet:has(#supName)::-webkit-scrollbar,
  #modal .sheet:has(#supId) #modalBody::-webkit-scrollbar,
  #modal .sheet:has(#supName) #modalBody::-webkit-scrollbar{
    display:none!important;
  }
}

/* On very short phones, remove the redundant intro bar entirely */
@media(max-height:680px) and (max-width:600px){
  #modal .sheet:has(#supId) .hero41,
  #modal .sheet:has(#supName) .hero41{
    display:none!important;
  }
  #modal .sheet:has(#supId) .masterSheet41,
  #modal .sheet:has(#supName) .masterSheet41,
  #modal .sheet:has(#supId) .sheet41,
  #modal .sheet:has(#supName) .sheet41{
    grid-template-rows:minmax(0,1fr) minmax(0,.95fr) 27px 34px!important;
  }
}