/* V50 - Màu / Chất liệu / Size: truly one-screen at current data volume */

@media(max-width:600px){
  /* exact modal fit */
  #modal .sheet:has(.attrsMaster41){
    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;
    overflow:hidden!important;
    border-radius:12px!important;
  }

  #modal .sheet:has(.attrsMaster41) .sheetHead{
    height:31px!important;
    min-height:31px!important;
    max-height:31px!important;
    padding:0 0 2px!important;
    margin:0!important;
  }
  #modal .sheet:has(.attrsMaster41) .sheetHead h3{
    font-size:14px!important;
    line-height:1!important;
    margin:0!important;
  }
  #modal .sheet:has(.attrsMaster41) .sheetHead button{
    width:27px!important;
    height:27px!important;
    min-height:27px!important;
    font-size:14px!important;
  }

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

  .attrsMaster41{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:25px minmax(0,1fr) minmax(0,1fr) minmax(0,1.12fr) 16px 35px!important;
    gap:3px!important;
    overflow:hidden!important;
    margin:0!important;
  }

  /* "Thuộc tính món đồ" becomes a thin compact strip */
  .attrsMaster41 .hero41{
    height:25px!important;
    min-height:25px!important;
    max-height:25px!important;
    padding:2px 5px!important;
    margin:0!important;
    border-radius:7px!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  .attrsMaster41 .hero41>span{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    flex-basis:21px!important;
    font-size:12px!important;
    border-radius:6px!important;
  }
  .attrsMaster41 .hero41 b{
    font-size:8.5px!important;
    line-height:1!important;
  }
  .attrsMaster41 .hero41 small{
    display:none!important;
  }

  /* groups closer together */
  .attrsMaster41 .attrGroup{
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:4px 6px!important;
    border-radius:9px!important;
    display:grid!important;
    grid-template-rows:14px minmax(20px,1fr) 30px!important;
    gap:2px!important;
    overflow:hidden!important;
  }

  .attrsMaster41 .attrGroup h4{
    height:14px!important;
    min-height:14px!important;
    line-height:14px!important;
    font-size:9px!important;
    margin:0!important;
    padding:0!important;
  }

  .attrsMaster41 .attrTags{
    min-height:20px!important;
    max-height:45px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-content:flex-start!important;
    gap:2px 3px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .attrsMaster41 .attrTags>span{
    height:19px!important;
    min-height:19px!important;
    padding:1px 6px!important;
    margin:0!important;
    font-size:7.5px!important;
    line-height:15px!important;
    border-radius:999px!important;
  }

  .attrsMaster41 .attrTags>span button{
    width:13px!important;
    height:13px!important;
    min-height:13px!important;
    padding:0!important;
    margin-left:2px!important;
    font-size:8px!important;
    line-height:11px!important;
  }

  .attrsMaster41 .attrAddLine{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 76px!important;
    gap:4px!important;
    margin:0!important;
    padding:0!important;
  }

  .attrsMaster41 .attrAddLine input{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    padding:3px 7px!important;
    margin:0!important;
    font-size:9px!important;
    border-radius:7px!important;
  }

  .attrsMaster41 .attrAddLine button{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    padding:2px 5px!important;
    margin:0!important;
    font-size:9px!important;
    border-radius:7px!important;
  }

  .attrsMaster41 .saveHint41{
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    padding:2px 5px!important;
    margin:0!important;
    font-size:6.5px!important;
    line-height:10px!important;
    border-radius:6px!important;
    overflow:hidden!important;
  }

  .attrsMaster41 .footerActions41{
    position:static!important;
    height:35px!important;
    min-height:35px!important;
    max-height:35px!important;
    display:grid!important;
    grid-template-columns:1fr 1.35fr!important;
    gap:4px!important;
    padding:2px 0 0!important;
    margin:0!important;
    border-top:1px solid #eee!important;
    background:#fff!important;
  }

  .attrsMaster41 .footerActions41 button{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    padding:2px 4px!important;
    margin:0!important;
    font-size:8.5px!important;
    border-radius:7px!important;
    white-space:nowrap!important;
  }

  /* Current data: no scrollbar. Only future overflow inside tags is allowed. */
  #modal .sheet:has(.attrsMaster41),
  #modal .sheet:has(.attrsMaster41) #modalBody,
  .attrsMaster41{
    scrollbar-width:none!important;
  }
  #modal .sheet:has(.attrsMaster41)::-webkit-scrollbar,
  #modal .sheet:has(.attrsMaster41) #modalBody::-webkit-scrollbar,
  .attrsMaster41::-webkit-scrollbar{
    display:none!important;
  }
}

/* If user later adds many tags, only the tag area can scroll, not the whole modal */
@media(max-width:600px){
  .attrsMaster41 .attrTags.attrOverflow50{
    overflow-y:auto!important;
    scrollbar-width:thin!important;
  }
}