/* v10.282 - Work Items and Work Materials dialogs on desktop and mobile. */
@media (min-width:801px){
  body.hl2027 #work-items-dialog.transaction-lines-dialog,
  body.hl2027 #materials-dialog.transaction-lines-dialog{box-sizing:border-box!important;width:min(96vw,1280px)!important;max-width:1280px!important;max-height:calc(100vh - 34px)!important;padding:0!important;border:0!important;border-radius:17px!important;background:#f7fafc!important;overflow-x:hidden!important;overflow-y:auto!important}
  body.hl2027 #work-items-dialog>.legacy-transaction-section,
  body.hl2027 #materials-dialog>.legacy-transaction-section{width:100%!important;max-width:100%!important;margin:0!important;padding:0 18px 18px!important;border:0!important;background:#f7fafc!important}
  body.hl2027 #work-items-dialog .dialog-title,
  body.hl2027 #materials-dialog .dialog-title{position:sticky!important;z-index:30!important;top:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0 -18px 16px!important;padding:13px 18px!important;border-bottom:1px solid #d5e2ec!important;background:#fff!important}
  body.hl2027 #work-items-dialog .dialog-title h2,
  body.hl2027 #materials-dialog .dialog-title h2{margin:0!important;font-size:20px!important}
  body.hl2027 #materials-dialog #materials-add-form{display:grid!important;grid-template-columns:minmax(300px,1.7fr) 120px minmax(170px,.8fr) 105px!important;gap:9px!important;align-items:center!important;width:100%!important;margin:0 0 14px!important;padding:12px!important;border:1px solid #d5e2ec!important;border-radius:12px!important;background:#fff!important;overflow:visible!important}
  body.hl2027 #materials-dialog #materials-add-form>*{width:100%!important;min-width:0!important;margin:0!important}
  body.hl2027 #materials-dialog #materials-add-form input,
  body.hl2027 #materials-dialog #materials-add-form>button{height:40px!important;min-height:40px!important}
  body.hl2027 #work-items-dialog .table-wrap,
  body.hl2027 #materials-dialog .table-wrap{width:100%!important;overflow-x:auto!important;border-radius:12px!important}
  body.hl2027 #work-items-dialog table,
  body.hl2027 #materials-dialog table{width:100%!important;min-width:920px!important;table-layout:fixed!important}
  body.hl2027 #work-items-dialog th:nth-child(1),body.hl2027 #work-items-dialog td:nth-child(1){width:16%!important}
  body.hl2027 #work-items-dialog th:nth-child(2),body.hl2027 #work-items-dialog td:nth-child(2){width:42%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body.hl2027 #work-items-dialog th:nth-child(3),body.hl2027 #work-items-dialog td:nth-child(3){width:42%!important}
  body.hl2027 #materials-dialog th:nth-child(1),body.hl2027 #materials-dialog td:nth-child(1){width:15%!important}
  body.hl2027 #materials-dialog th:nth-child(2),body.hl2027 #materials-dialog td:nth-child(2){width:32%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body.hl2027 #materials-dialog th:nth-child(3),body.hl2027 #materials-dialog td:nth-child(3){width:9%!important}
  body.hl2027 #materials-dialog th:nth-child(4),body.hl2027 #materials-dialog td:nth-child(4){width:44%!important}
  body.hl2027 #work-items-dialog .line-row-actions,
  body.hl2027 #materials-dialog .line-row-actions{display:grid!important;grid-template-columns:minmax(0,1fr) 72px!important;gap:7px!important;align-items:center!important;width:100%!important}
  body.hl2027 #work-items-dialog .line-row-actions>form:first-child,
  body.hl2027 #materials-dialog .line-row-actions>form:first-child{display:grid!important;grid-template-columns:82px minmax(120px,1fr) 70px!important;gap:6px!important;align-items:center!important;width:100%!important}
  body.hl2027 #work-items-dialog .line-row-actions>form:last-child,
  body.hl2027 #materials-dialog .line-row-actions>form:last-child{display:block!important;width:72px!important;margin:0!important}
  body.hl2027 #work-items-dialog .line-row-actions input,
  body.hl2027 #materials-dialog .line-row-actions input{width:100%!important;min-width:0!important;height:36px!important;min-height:36px!important;padding:5px 7px!important;font-size:12px!important}
  body.hl2027 #work-items-dialog .line-row-actions button,
  body.hl2027 #materials-dialog .line-row-actions button{width:100%!important;min-width:0!important;height:36px!important;min-height:36px!important;padding:6px 8px!important;font-size:12px!important}
}

/* v10.286 - centered compact desktop dialog instead of full-screen width. */
@media (min-width:801px){
  body.hl2027 #work-items-dialog.transaction-lines-dialog,
  body.hl2027 #materials-dialog.transaction-lines-dialog{
    box-sizing:border-box!important;width:min(92vw,1120px)!important;max-width:1120px!important;
    min-width:0!important;height:auto!important;max-height:calc(100vh - 50px)!important;
    margin:auto!important;border-radius:16px!important
  }
  body.hl2027 #work-items-dialog>.legacy-transaction-section,
  body.hl2027 #materials-dialog>.legacy-transaction-section{padding:0 14px 14px!important}
  body.hl2027 #work-items-dialog .dialog-title,
  body.hl2027 #materials-dialog .dialog-title{margin:0 -14px 12px!important;padding:10px 14px!important}
  body.hl2027 #materials-dialog #materials-add-form{
    grid-template-columns:minmax(280px,1.6fr) 105px minmax(155px,.8fr) 90px!important;
    margin-bottom:11px!important;padding:9px!important;gap:7px!important
  }
  body.hl2027 #materials-dialog #materials-add-form input,
  body.hl2027 #materials-dialog #materials-add-form>button{height:36px!important;min-height:36px!important}
  body.hl2027 #work-items-dialog thead th,
  body.hl2027 #materials-dialog thead th{height:34px!important;padding:6px 7px!important}
}

/* v10.285 - no visible side or horizontal scrollbars on desktop dialogs. */
@media (min-width:801px){
  body.hl2027 #work-items-dialog.transaction-lines-dialog,
  body.hl2027 #materials-dialog.transaction-lines-dialog{
    width:calc(100vw - 28px)!important;max-width:none!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    scrollbar-width:none!important;-ms-overflow-style:none!important
  }
  body.hl2027 #work-items-dialog.transaction-lines-dialog::-webkit-scrollbar,
  body.hl2027 #materials-dialog.transaction-lines-dialog::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  body.hl2027 #work-items-dialog .table-wrap,
  body.hl2027 #materials-dialog .table-wrap{
    width:100%!important;max-width:100%!important;overflow-x:hidden!important;overflow-y:visible!important;
    scrollbar-width:none!important;-ms-overflow-style:none!important
  }
  body.hl2027 #work-items-dialog .table-wrap::-webkit-scrollbar,
  body.hl2027 #materials-dialog .table-wrap::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  body.hl2027 #work-items-dialog table,
  body.hl2027 #materials-dialog table{
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important
  }
  body.hl2027:has(#work-items-dialog[open]) .floating-table-scrollbar,
  body.hl2027:has(#materials-dialog[open]) .floating-table-scrollbar{display:none!important}
}

@media (max-width:800px){
  body.wp-mobile-ready #work-items-dialog.transaction-lines-dialog{
    box-sizing:border-box!important;width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;
    height:auto!important;max-height:calc(100dvh - 16px)!important;margin:auto!important;padding:0!important;
    border:0!important;border-radius:15px!important;background:#f5f8fb!important;overflow-x:hidden!important;overflow-y:auto!important
  }
  body.wp-mobile-ready #work-items-dialog>.legacy-transaction-section{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:0 10px 14px!important;border:0!important;border-radius:15px!important;background:#f5f8fb!important;overflow:visible!important
  }
  body.wp-mobile-ready #work-items-dialog .dialog-title{
    position:sticky!important;z-index:20!important;top:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:10px!important;width:auto!important;margin:0 -10px 12px!important;padding:12px 13px!important;
    border-bottom:1px solid #d7e3ec!important;background:#fff!important;border-radius:15px 15px 0 0!important
  }
  body.wp-mobile-ready #work-items-dialog .dialog-title h2{margin:0!important;font-size:19px!important;color:#123f73!important}
  body.wp-mobile-ready #work-items-dialog .dialog-title button{flex:0 0 auto!important;width:auto!important;min-height:38px!important;padding:7px 12px!important;font-size:13px!important}
  body.wp-mobile-ready #work-items-dialog .table-wrap{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
    overflow:visible!important;border:0!important;background:transparent!important
  }
  body.wp-mobile-ready #work-items-dialog table,
  body.wp-mobile-ready #work-items-dialog tbody{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;background:transparent!important
  }
  body.wp-mobile-ready #work-items-dialog thead{display:none!important}
  body.wp-mobile-ready #work-items-dialog tbody tr{
    box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;max-width:100%!important;min-width:0!important;margin:0 0 10px!important;padding:10px!important;
    border:1px solid #d7e3ec!important;border-radius:13px!important;background:#fff!important;box-shadow:0 3px 10px rgba(18,63,115,.06)!important
  }
  body.wp-mobile-ready #work-items-dialog tbody td{
    box-sizing:border-box!important;display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;align-items:start!important;gap:8px!important;
    width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:38px!important;
    padding:8px 3px!important;border:0!important;border-bottom:1px solid #edf2f6!important;
    color:#173f62!important;font-size:13px!important;line-height:1.5!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:right!important
  }
  body.wp-mobile-ready #work-items-dialog tbody td:last-child{display:block!important;padding:9px 0 0!important;border-bottom:0!important}
  body.wp-mobile-ready #work-items-dialog tbody td:nth-child(1)::before{content:'رقم البند';font-weight:800;color:#61788d}
  body.wp-mobile-ready #work-items-dialog tbody td:nth-child(2)::before{content:'وصف العمل';font-weight:800;color:#61788d}
  body.wp-mobile-ready #work-items-dialog tbody td:nth-child(3)::before{content:'الكمية والملاحظات';display:block;margin-bottom:7px;font-weight:800;color:#61788d}
  body.wp-mobile-ready #work-items-dialog .line-row-actions{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important
  }
  body.wp-mobile-ready #work-items-dialog .line-row-actions>form:first-child{
    display:grid!important;grid-template-columns:90px minmax(0,1fr)!important;gap:7px!important;width:100%!important;max-width:100%!important;min-width:0!important
  }
  body.wp-mobile-ready #work-items-dialog .line-row-actions>form:first-child .line-quantity{grid-column:1!important}
  body.wp-mobile-ready #work-items-dialog .line-row-actions>form:first-child .line-notes{grid-column:2!important}
  body.wp-mobile-ready #work-items-dialog .line-row-actions>form:first-child button{grid-column:1/-1!important}
  body.wp-mobile-ready #work-items-dialog .line-row-actions input{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;font-size:14px!important
  }
  body.wp-mobile-ready #work-items-dialog .line-row-actions button{width:100%!important;min-height:41px!important;margin:0!important}
  body.wp-mobile-ready #work-items-dialog .line-row-actions>form:last-child{display:block!important;width:100%!important}
  body.wp-mobile-ready #work-items-dialog tbody tr:has(td[colspan]) td{
    display:block!important;text-align:center!important;padding:20px 8px!important;border:0!important
  }
  body.wp-mobile-ready #work-items-dialog tbody tr:has(td[colspan]) td::before{display:none!important}
}

@media (max-width:360px){
  body.wp-mobile-ready #work-items-dialog .line-row-actions>form:first-child{grid-template-columns:76px minmax(0,1fr)!important}
  body.wp-mobile-ready #work-items-dialog tbody td{grid-template-columns:82px minmax(0,1fr)!important}
}

/* v10.284 - compact desktop rows and clearly visible action buttons. */
@media (min-width:801px){
  body.hl2027 #work-items-dialog tbody tr,
  body.hl2027 #materials-dialog tbody tr{
    height:52px!important;min-height:52px!important;max-height:52px!important
  }
  body.hl2027 #work-items-dialog tbody td,
  body.hl2027 #materials-dialog tbody td{
    height:52px!important;min-height:52px!important;max-height:52px!important;
    padding:5px 7px!important;vertical-align:middle!important;line-height:1.25!important
  }
  body.hl2027 #work-items-dialog .line-row-actions,
  body.hl2027 #materials-dialog .line-row-actions{
    display:grid!important;grid-template-columns:minmax(0,1fr) 64px!important;
    align-items:center!important;gap:7px!important;height:38px!important;min-height:38px!important;margin:0!important
  }
  body.hl2027 #work-items-dialog .line-row-actions>form:first-child,
  body.hl2027 #materials-dialog .line-row-actions>form:first-child{
    display:grid!important;grid-template-columns:82px minmax(130px,1fr) 64px!important;
    align-items:center!important;gap:6px!important;height:36px!important;min-height:36px!important;margin:0!important
  }
  body.hl2027 #work-items-dialog .line-row-actions>form:last-child,
  body.hl2027 #materials-dialog .line-row-actions>form:last-child{
    display:block!important;width:64px!important;min-width:64px!important;height:36px!important;min-height:36px!important;margin:0!important
  }
  body.hl2027 #work-items-dialog .line-row-actions input,
  body.hl2027 #materials-dialog .line-row-actions input{
    box-sizing:border-box!important;height:34px!important;min-height:34px!important;max-height:34px!important;margin:0!important;padding:4px 7px!important
  }
  body.hl2027 #work-items-dialog .line-row-actions button,
  body.hl2027 #materials-dialog .line-row-actions button{
    box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    height:34px!important;min-height:34px!important;max-height:34px!important;margin:0!important;padding:4px 7px!important;
    border-radius:8px!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important;overflow:visible!important
  }
  body.hl2027 #work-items-dialog .line-row-actions>form:last-child>button,
  body.hl2027 #materials-dialog .line-row-actions>form:last-child>button{
    width:64px!important;min-width:64px!important;max-width:64px!important;
    padding:4px 8px!important;background:#df3543!important;color:#fff!important
  }
  body.hl2027 #work-items-dialog .line-row-actions>form:first-child>button,
  body.hl2027 #materials-dialog .line-row-actions>form:first-child>button{
    width:64px!important;min-width:64px!important;max-width:64px!important
  }
}