@media screen {
  html,body{font-size:16px;line-height:1.5}
  main{min-width:0;max-width:none;padding:22px}
  main label,.authbox label,.modalbox label{font-size:15px;line-height:1.45;margin-bottom:7px;font-weight:700}
  main input,main select,main textarea,.authbox input,.modalbox input,.modalbox select,.modalbox textarea{font-size:16px;line-height:1.5;min-height:46px;padding:10px 12px;border-color:#aab4c3;max-width:100%;min-width:0}
  main select{appearance:auto}
  main select[multiple]{min-height:132px}
  main textarea{min-height:110px}
  main input[type=checkbox],main input[type=radio]{min-height:22px;width:22px;min-width:22px;vertical-align:middle;accent-color:#8a6207}
  main input:focus,main select:focus,main textarea:focus{outline:3px solid #c4dcff;outline-offset:1px;border-color:#175cd3}
  main input::placeholder{color:#667085;opacity:1}
  main .vp-form,main .g3,main .g4,main .g5{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
  main .vp-form>label:has(textarea){grid-column:1/-1}
  main .vp-form>label{min-width:0}
  main .btn,.modalbox .btn,.authbox .btn{font-size:15px;min-height:44px;padding:10px 16px}
  main .card{padding:20px;margin-bottom:16px}
  main h1{font-size:26px}main h2{font-size:20px}
  main .muted,main .small,main .note,main .info,main .msg{font-size:14px;line-height:1.6}
  main p[role=status]{font-size:16px;font-weight:600;white-space:pre-wrap}
  main table{font-size:15px}main th,main td{font-size:15px;padding:11px 10px}
  main .vp-table-editor input,main .vp-table-editor select{min-width:160px}
  main .vp-table-editor textarea{min-width:260px}
  main summary{font-size:18px;font-weight:700;cursor:pointer;padding:4px 0 12px}
  main .row{gap:10px}
  #ops-kind{min-width:280px}
  #ops-edit{margin-top:18px}
  #sp-map label{border:1px solid #d8dde6;padding:12px;border-radius:8px}
  .sp-confirm{display:flex;align-items:flex-start;gap:12px;margin:20px 0}
  .sp-confirm input{flex:0 0 22px}
  .userbox{font-size:13px}.nav-group{font-size:12px}
  @media(min-width:1750px){main .vp-form{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:850px){main{padding:14px}main .vp-form,main .g2,main .g3,main .g4,main .g5{grid-template-columns:minmax(0,1fr)}main .vp-form>label{grid-column:auto}main th,main td{font-size:14px}#ops-kind{min-width:0}}
}

@media screen{.money-invalid{border-color:#b42318!important}#importRowEditor{border:2px solid #8a6207}#importPanel select{min-height:46px}#count-worksheet input{min-width:150px}#importPreview td.wrap{max-width:420px;white-space:normal}}

/* V4: grouped compact forms, readable controls */
@media screen{
 main{max-width:1720px;padding:20px}
 main .card{padding:16px;margin-bottom:12px}
 main .vp-form,main .g3,main .g4,main .g5{gap:12px 16px}
 main label{margin-bottom:4px;font-size:15px;line-height:1.35}
 main textarea{min-height:76px}
 main .vp-form>label:has(textarea){grid-column:auto}
 main .vp-form>label:has(textarea){grid-column:span 2}
 main h1{font-size:25px;margin-bottom:12px}main h2{font-size:20px;margin-bottom:10px}
 main .toolbar h1,main .toolbar h2{margin:0}
 main [hidden]{display:none!important}
 #svc-msg:empty{display:none}
 #svc-search{max-width:640px;margin-bottom:12px}
 #svc-case-list .list-card{padding:14px 0;border-bottom:1px solid #e4e7ec}
 #svc-case-fields>.vp-form{margin-top:0}
 .svc-tabs{margin-bottom:12px;gap:6px!important}
 .svc-tabs .btn{flex:0 0 auto}
 .svc-sticky{position:sticky;top:0;background:#f4f5f7;z-index:5;padding:10px 0}
 .svc-statusbar{display:flex;gap:5px;overflow:auto;margin:10px 0 14px;padding-bottom:4px}
 .svc-statusbar span{flex:1;min-width:100px;padding:7px 8px;background:#eaecf0;border-radius:6px;text-align:center;font-size:13px;white-space:nowrap}
 .svc-statusbar .current{background:#8a6207;color:white;font-weight:700}
 #svc-device-summary{padding:8px 0}#svc-items-area{margin-top:16px}
 #svc-doc-area{margin-top:12px}
 #svc-doc-area summary{font-size:18px}
 #svc-case-fields label:has([data-f=notes]){grid-column:1/-1}
 #svc-case-lines input[type=checkbox]{min-width:22px}
 #svc-case-lines input[data-f=qty],#svc-case-lines input[data-f=warranty_months]{min-width:80px;width:90px}
 #svc-case-lines select{min-width:240px}
 #svc-view-sales .vp-form>label:has(textarea){grid-column:span 2}
 @media(min-width:1200px){main .vp-form,main .g3,main .g4{grid-template-columns:repeat(3,minmax(0,1fr))}}
 @media(min-width:1600px){main .g4,#svc-case-fields .svc-fields{grid-template-columns:repeat(4,minmax(0,1fr))}}
 @media(max-width:850px){main{padding:12px}main .vp-form,main .g3,main .g4{grid-template-columns:minmax(0,1fr)}main .vp-form>label:has(textarea),#svc-view-sales .vp-form>label:has(textarea){grid-column:auto}.svc-sticky{position:static}.svc-view-tabs{width:100%}.svc-view-tabs button{flex:1}#svc-case-lines select{min-width:200px}}
}

@media screen{
 #svc-case-fields .svc-fields{display:block}
 #svc-case-fields .svc-core{grid-template-columns:repeat(3,minmax(0,1fr))}
 #svc-case-fields .svc-notes,#svc-doc-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 #svc-case-fields .svc-notes>label:has(textarea),#svc-doc-fields>label:has(textarea){grid-column:auto}
 .svc-extra{grid-column:1/-1;margin-top:8px}
 main .svc-extra summary{font-size:15px;color:#475467;padding:8px 0}
 #svc-case-fields label:has([data-f=notes]){grid-column:1/-1}
 #svc-doc-fields .svc-extra .vp-form{grid-template-columns:repeat(2,minmax(0,1fr))}
 #svc-doc-fields .svc-extra label:has(textarea){grid-column:auto}
 #svc-case-fields .svc-notes>label:has([data-f=accessories]){grid-column:auto}
 #svc-items-area:not(.svc-expanded) :is(th,td):nth-child(5),#svc-items-area:not(.svc-expanded) :is(th,td):nth-child(8),#svc-items-area:not(.svc-expanded) :is(th,td):nth-child(9){display:none}
 #svc-case-lines select{min-width:170px}
 #svc-case-lines input[data-f=description]{min-width:180px}
 #svc-case-lines input[data-f=unit_price_vnd]{min-width:140px}
 .svc-extra-toggle{font-size:14px;display:flex;align-items:center;gap:8px;font-weight:400}
 #svc-case-lines th{font-size:14px}
 @media(min-width:1600px){#svc-case-fields .svc-core{grid-template-columns:repeat(4,minmax(0,1fr))}}
 @media(max-width:850px){#svc-case-fields .svc-core,#svc-case-fields .svc-notes,#svc-doc-fields,#svc-doc-fields .svc-extra .vp-form{grid-template-columns:minmax(0,1fr)}}
}
