/* ACCGEN batch generation responsive presentation v18.13.40. Scoped to the batch generator. No changes to controls, values or action contracts. */ #user-generate-panel-batch{min-width:0} #user-generate-panel-batch .accgen-service-card, #user-generate-panel-batch .accgen-service-row, #user-generate-panel-batch .accgen-service-row-fields, #user-generate-panel-batch .accgen-service-field{box-sizing:border-box;min-width:0;max-width:100%} #user-generate-panel-batch .accgen-service-row-fields{display:grid;gap:10px;align-items:start;padding:0 2px 11px} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field, #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-row-words-field{grid-column:auto;min-width:0;margin:0;font-size:12.5px;font-weight:600;line-height:1.4;color:#4d6378} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-row-warning{grid-column:1/-1} #user-generate-panel-batch .accgen-service-row-fields :is(input,select), #user-generate-panel-batch #accgen-service-batch-common :is(input,select){font-family:inherit;font-size:16px;font-weight:400!important;letter-spacing:normal} #user-generate-panel-batch .accgen-service-row-fields .accgen-service-row-words, #user-generate-panel-batch #accgen-service-batch-common .accgen-service-words{min-height:44px;font-size:15px;font-weight:400;line-height:1.45;color:#41566d} #user-generate-panel-batch #accgen-service-batch-common .accgen-service-field{font-size:12.5px;font-weight:600;color:#4d6378} #user-generate-panel-batch #accgen-service-batch-common .accgen-service-card-help{font-size:12px;font-weight:400} #user-generate-panel-batch .accgen-service-row{container-name:accgenBatchServices;container-type:inline-size;margin:9px 0 0;padding:0 10px;border-color:#d8e5f0;border-radius:9px;background:#fff} #user-generate-panel-batch .accgen-service-row>summary{min-height:35px;padding:10px 2px;color:#245c83;font-size:12.5px;font-weight:650;line-height:1.35} #user-generate-panel-batch .accgen-service-row[open]>summary{margin-bottom:7px;border-bottom:1px solid #edf2f6} #user-generate-panel-batch #templates-batch-table .accgen-batch-record-name{display:inline;min-width:0;margin-right:8px;color:#173f58;font-size:13px;font-weight:700;line-height:1.4;overflow-wrap:anywhere} #user-generate-panel-batch #templates-batch-table .accgen-batch-record-detail{display:inline;min-width:0;margin:0;color:#637b8f;font-size:12px;font-weight:400;line-height:1.4;overflow-wrap:anywhere} #user-generate-panel-batch #templates-batch-table td:nth-child(3){font-weight:400!important;vertical-align:top} #user-generate-panel-batch #templates-batch-table td:nth-child(5){vertical-align:top} #user-generate-panel-batch #templates-batch-table tbody tr:has(.template-batch-record-checkbox:checked){background:#f3faff!important} #user-generate-panel-batch #templates-batch-table td:nth-child(1), #user-generate-panel-batch #templates-batch-table td:nth-child(2){vertical-align:top} #user-generate-panel-batch .accgen-service-row-fields .accgen-service-money{align-items:center} /* Container-aware desktop layout: four columns only when the record cell actually has enough width (including desktop sidebars and split views). */ @media(min-width:1024px){ #user-generate-panel-batch .accgen-service-row-fields{grid-template-columns:repeat(2,minmax(0,1fr))} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(2), #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(3), #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-row-words-field{grid-column:auto} @container accgenBatchServices (min-width:780px){ #user-generate-panel-batch .accgen-service-row-fields{grid-template-columns:minmax(105px,.9fr) minmax(150px,1.3fr) minmax(125px,1.1fr) minmax(180px,1.65fr)} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(1), #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(2), #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(3), #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-row-words-field{grid-column:auto} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-row-warning{grid-column:1/-1} } } @media(min-width:1024px){ #user-generate-panel-batch .batch-range-card{display:grid!important;grid-template-columns:155px minmax(0,1fr);align-items:center;column-gap:14px;row-gap:4px;padding:12px 14px!important;margin:14px 0 12px!important} #user-generate-panel-batch .batch-range-label{grid-column:1;grid-row:1;margin:0!important} #user-generate-panel-batch .batch-range-row{grid-column:2;grid-row:1;max-width:540px} #user-generate-panel-batch .batch-range-help{grid-column:2;grid-row:2;margin:0!important} #user-generate-panel-batch #templates-batch-scroll{max-height:64vh!important} #user-generate-panel-batch #templates-batch-table td{padding:12px 10px} #user-generate-panel-batch #templates-batch-table .template-batch-sequence{min-height:40px} } /* Tablet and mobile: actual record cards, not a compressed desktop table. */ @media(max-width:1023px){ #view-main-layout #view-templates #templates-user-state #templates-batch-scroll{max-height:none!important;height:auto!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important} #view-main-layout #view-templates #templates-user-state #templates-batch-table{display:block!important;width:100%!important;min-width:0!important;table-layout:auto!important;border-collapse:separate!important;background:transparent!important} #user-generate-panel-batch #templates-batch-table thead{display:none!important} #user-generate-panel-batch #templates-batch-table tbody{display:grid;gap:10px;min-width:0} #user-generate-panel-batch #templates-batch-table tbody tr{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 10px;box-sizing:border-box;width:100%;min-width:0;margin:0!important;padding:10px 12px!important;border:1px solid #dae5ee;border-radius:11px;background:#fff;box-shadow:0 1px 4px rgba(24,64,97,.04)} #user-generate-panel-batch #templates-batch-table tbody tr:hover{background:#fbfdff} #user-generate-panel-batch #templates-batch-table tbody td{display:block!important;box-sizing:border-box;min-width:0;max-width:100%;margin:0;padding:0!important;border:0!important;text-align:left!important;color:#344f66;vertical-align:middle} #user-generate-panel-batch #templates-batch-table tbody td::before{float:none!important} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(1){grid-column:1;grid-row:1;align-self:center} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(1)::before{display:none!important} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(2){grid-column:3;grid-row:1;display:flex!important;align-items:center;justify-content:flex-end;gap:6px} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(2)::before{content:"Chọn"!important;display:inline!important;margin:0;color:#62778b;font-size:12px;font-weight:600} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(2) input[type=checkbox]{flex:none;width:21px;height:21px;margin:0} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(3){grid-column:1/-1;grid-row:2;font-size:14px!important;line-height:1.4!important;overflow-wrap:anywhere} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(3)::before{display:none!important} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(4){display:none!important} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(5){grid-column:2;grid-row:1;display:flex!important;align-items:center;justify-content:flex-end;gap:6px;margin:0!important;padding:0!important;border:0!important} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(5)::before{content:"STT"!important;display:inline!important;flex:none;margin:0;color:#62778b;font-size:12px;font-weight:600;white-space:nowrap} #user-generate-panel-batch #templates-batch-table .template-batch-sequence{flex:0 0 96px!important;box-sizing:border-box;width:96px!important;min-width:0!important;max-width:96px!important;height:42px!important;min-height:42px!important;padding:7px 9px!important;font-size:16px!important} #user-generate-panel-batch .accgen-service-row{margin-top:9px;padding:0 9px} #user-generate-panel-batch .accgen-service-row-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(2), #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(3), #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-row-words-field{grid-column:auto} #user-generate-panel-batch .accgen-service-row-fields :is(input,select){min-width:0;width:100%;font-size:16px!important} #user-generate-panel-batch .accgen-service-row-fields .accgen-service-row-words{font-size:15px;min-height:44px} #user-generate-panel-batch .batch-list-toolbar{margin:0 0 10px!important;padding:10px!important} #user-generate-panel-batch .batch-range-card{margin:10px 0!important;padding:10px!important} } /* Phone: compact first row; put service type and fee beside each other when width permits. */ @media(max-width:767px){ #user-generate-panel-batch #templates-batch-table tbody tr{gap:7px 8px;padding:10px!important} #user-generate-panel-batch .accgen-service-row-fields{grid-template-columns:minmax(0,1fr);gap:8px} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(2), #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(3), #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-row-words-field{grid-column:1} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(1){grid-row:1} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(2){grid-row:2} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field:nth-child(3){grid-row:3} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-row-words-field{grid-row:4} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-row-warning{grid-row:5} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field{font-size:12.5px;font-weight:600} #user-generate-panel-batch .accgen-service-row-fields .accgen-service-row-words{font-size:15px} #user-generate-panel-batch #accgen-service-batch-common .accgen-service-card-title{font-size:13.5px} #user-generate-panel-batch #accgen-service-batch-common .accgen-service-card-help{font-size:11.5px;line-height:1.4} #user-generate-panel-batch #accgen-service-batch-common .accgen-service-grid{gap:9px;margin-top:10px} #user-generate-panel-batch .batch-list-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px!important} #user-generate-panel-batch .batch-selection-compact{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;order:1} #user-generate-panel-batch .batch-selection-summary{justify-content:space-between!important;font-size:12.5px} #user-generate-panel-batch .batch-selection-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} #user-generate-panel-batch .batch-selection-buttons>.btn{width:100%!important;min-width:0!important;min-height:41px!important;font-size:12px!important} #user-generate-panel-batch .batch-pagination-compact{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;order:2} #user-generate-panel-batch .batch-page-nav-compact{gap:5px!important} #user-generate-panel-batch #user-batch-page-info{font-size:12px} #user-generate-panel-batch .batch-range-help{font-size:11px;line-height:1.4} #user-generate-panel-batch #templates-batch-table .template-batch-sequence{flex-basis:78px!important;width:78px!important;max-width:78px!important} } @media(max-width:359px){ #user-generate-panel-batch #templates-batch-table tbody tr{grid-template-columns:auto minmax(0,1fr) auto} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(5)::before{font-size:11px} #user-generate-panel-batch #templates-batch-table .template-batch-sequence{flex-basis:67px!important;width:67px!important;max-width:67px!important} #user-generate-panel-batch #templates-batch-table tbody td:nth-child(2)::before{font-size:11px} } /* Keep the pager usable at the narrowest supported widths. */ @media(max-width:359px){ #user-generate-panel-batch .batch-pagination-compact{display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:space-between;gap:6px!important} #user-generate-panel-batch .batch-page-size-compact{display:flex!important;flex:0 0 auto;min-width:0!important} #user-generate-panel-batch .batch-page-size-compact>span{display:none!important} #user-generate-panel-batch #user-batch-page-size{box-sizing:border-box;flex:0 0 65px!important;width:65px!important;min-width:65px!important;max-width:65px!important;padding:7px 6px!important} #user-generate-panel-batch .batch-page-nav-compact{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:4px!important} #user-generate-panel-batch #btn-user-batch-prev,#user-generate-panel-batch #btn-user-batch-next{box-sizing:border-box;min-width:39px!important;width:39px!important;min-height:40px;padding:7px 8px!important} #user-generate-panel-batch #user-batch-page-info{flex:none;font-size:11.5px;white-space:nowrap} } /* v18.13.41: Compact batch top controls on desktop/tablet only. */ @media(min-width:768px){ #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-range-card{display:grid!important;grid-template-columns:155px minmax(0,1fr);align-items:center;column-gap:12px;row-gap:3px;padding:10px 13px!important;margin:12px 0!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-range-label{grid-column:1;grid-row:1;align-self:center;margin:0!important;font-size:12.5px;line-height:1.4} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-range-row{display:grid!important;grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px!important;flex-wrap:nowrap!important;width:min(100%,620px);min-width:0;max-width:620px} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-range-row>input{box-sizing:border-box;flex:1 1 auto!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:40px!important;height:40px!important;margin:0!important;padding:7px 11px!important;font-size:14px!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-range-row>.btn{box-sizing:border-box;min-height:40px!important;height:40px!important;margin:0!important;padding:8px 13px!important;white-space:nowrap!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-range-help{grid-column:2;grid-row:2;max-width:620px;margin:0!important;color:#6d8495;font-size:11px;line-height:1.35} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-list-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;column-gap:14px!important;row-gap:8px!important;margin-bottom:11px!important;padding:10px 13px!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-pagination-compact{display:flex!important;flex:1 1 395px!important;align-items:center;justify-content:flex-start!important;flex-wrap:wrap!important;gap:7px 12px!important;min-width:0} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-page-size-compact{display:flex!important;flex:0 0 auto!important;align-items:center;flex-wrap:nowrap!important;gap:6px!important;white-space:nowrap!important;font-size:12px;line-height:1.4} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch #user-batch-page-size{flex:0 0 auto!important;min-width:72px!important;width:72px!important;max-width:72px!important;min-height:38px!important;height:38px!important;padding:6px 10px!important;font-size:13px!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-page-nav-compact{display:flex!important;flex:0 0 auto;align-items:center;flex-wrap:nowrap!important;gap:7px!important;white-space:nowrap!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-selection-compact:not(.accgen-context-sticky--pinned){display:flex!important;flex:0 1 auto!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:7px 10px!important;min-width:0!important;width:auto!important;max-width:100%!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-selection-compact:not(.accgen-context-sticky--pinned) .batch-selection-buttons{display:flex!important;flex:0 1 auto!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:6px!important;width:auto!important;max-width:100%!important;grid-template-columns:none!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-selection-compact:not(.accgen-context-sticky--pinned) .batch-selection-buttons>.btn{grid-column:auto!important;flex:0 0 auto!important;width:auto!important;min-height:37px!important;margin:0!important;padding:7px 11px!important;font-size:12px!important;white-space:nowrap!important} } /* Tablet: two compact, intentional toolbar rows rather than uneven wrapping. */ @media(min-width:768px) and (max-width:1023px){ #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-range-card{grid-template-columns:145px minmax(0,1fr)} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-list-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-pagination-compact{width:100%!important;justify-content:flex-start!important} #view-main-layout #view-templates #templates-user-state #user-generate-panel-batch .batch-selection-compact:not(.accgen-context-sticky--pinned){justify-content:space-between!important;width:100%!important;max-width:100%!important;gap:8px!important} } /* Tablet/mobile service typography; do not alter the frozen fee input logic. */ @media(max-width:1023px){ #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field, #user-generate-panel-batch #accgen-service-batch-common .accgen-service-field{font-size:12px!important;font-weight:600!important;line-height:1.4} #user-generate-panel-batch .accgen-service-row-fields :is(input,select), #user-generate-panel-batch #accgen-service-batch-common :is(input,select){font-family:inherit;font-size:15px!important;font-weight:400!important;line-height:1.4!important;letter-spacing:normal!important} #view-main-layout #user-generate-panel-batch .accgen-service-money>.accgen-service-fee-control>input[data-accgen-no-clear], #view-main-layout #user-generate-panel-batch .accgen-service-money>.accgen-service-fee-control>input[data-accgen-no-clear]:focus, #view-main-layout #user-generate-panel-batch .accgen-service-money>.accgen-service-fee-control>input[data-accgen-no-clear]:focus-visible{font-size:15px!important;font-weight:400!important} #user-generate-panel-batch .accgen-service-fee-control.accgen-service-fee-composing::after{font-size:15px!important;font-weight:400!important} #user-generate-panel-batch .accgen-service-row-fields .accgen-service-row-words, #user-generate-panel-batch #accgen-service-batch-common .accgen-service-words{font-size:13.5px!important;font-weight:400!important;line-height:1.45} #user-generate-panel-batch .accgen-service-money-unit{font-size:12.5px!important;font-weight:400!important} } /* Phone STT: reduce height first; adjust width only enough to maintain proportion. */ @media(max-width:767px){ #view-main-layout #user-generate-panel-batch #templates-batch-table td:nth-child(5) .template-batch-sequence{flex:0 0 76px!important;box-sizing:border-box;width:76px!important;max-width:76px!important;min-width:0!important;height:36px!important;min-height:36px!important;padding:5px 8px!important;font-size:14px!important;line-height:1.35!important} #user-generate-panel-batch .accgen-service-row-fields>.accgen-service-field, #user-generate-panel-batch #accgen-service-batch-common .accgen-service-field{font-size:12px!important} } @media(max-width:359px){ #view-main-layout #user-generate-panel-batch #templates-batch-table td:nth-child(5) .template-batch-sequence{flex-basis:64px!important;width:64px!important;max-width:64px!important} } /* iOS Safari zooms focused text fields under 16px; keep the native editing controls at 16px there while retaining compact labels and readback text. */ @supports (-webkit-touch-callout:none){ @media(max-width:1023px){ #user-generate-panel-batch .accgen-service-row-fields :is(input,select), #user-generate-panel-batch #accgen-service-batch-common :is(input,select), #view-main-layout #user-generate-panel-batch .accgen-service-money>.accgen-service-fee-control>input[data-accgen-no-clear], #view-main-layout #user-generate-panel-batch .accgen-service-money>.accgen-service-fee-control>input[data-accgen-no-clear]:focus, #view-main-layout #user-generate-panel-batch .accgen-service-money>.accgen-service-fee-control>input[data-accgen-no-clear]:focus-visible{font-size:16px!important} #user-generate-panel-batch .accgen-service-fee-control.accgen-service-fee-composing::after{font-size:16px!important} } } /* v18.13.42 — Batch service mobile select proxy typography. mobile-select.js inserts a visible button next to the hidden native