/* Isolated composition UI. Fields and calculation contracts stay unchanged. */
#composition{--line-border:#ccd5d2;--line-radius:10px;padding:20px;overflow:visible}
#composition .panel-head{margin-bottom:16px}
#composition .composition-wrap{overflow:visible}
#composition .line-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}
#composition .line-table th,#composition .line-table td{padding:12px 8px!important;vertical-align:top;min-width:0!important}
#composition .line-table th{font-size:12px;font-weight:600;color:var(--secondary)}
#composition .line-table th:first-child,#composition .line-table td:first-child,#composition .line-table th:nth-child(3),#composition .line-table td:nth-child(3),#composition .line-table th:nth-child(4),#composition .line-table td:nth-child(4){display:none!important}
#composition .line-table th:nth-child(2){width:auto}
#composition .line-table th:nth-child(5){width:142px}
#composition .line-table th:nth-child(6){width:158px}
#composition .line-table th:nth-child(7){width:124px}
#composition .line-table th:nth-child(8){width:148px}
#composition .line-table .choose-model{display:block;width:100%;max-width:none;min-height:44px;height:auto;background:#f7faf9;border:1px solid var(--line-border);border-radius:var(--line-radius);padding:10px 12px!important;font-size:14px;line-height:1.5;text-align:left!important;color:var(--text);white-space:normal;overflow-wrap:anywhere;word-break:normal;font-weight:600}
#composition .selected-sku{display:block;padding:5px 2px 0;font-size:12px;color:var(--secondary);overflow-wrap:anywhere;text-align:left}
#composition input:not(.product-native){height:44px;min-height:44px;border:1px solid var(--line-border);border-radius:var(--line-radius);font-size:14px;box-shadow:none;font-variant-numeric:tabular-nums;box-sizing:border-box}
#composition input[type=number]{appearance:textfield;-moz-appearance:textfield}
#composition input::-webkit-inner-spin-button,#composition input::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}
#composition .edit-price,#composition .edit-discount{display:none}
#composition .money-field{position:relative;display:block;min-width:0}
#composition .money-field:after{content:'₽';position:absolute;right:10px;top:12px;color:var(--secondary);font-size:14px;pointer-events:none}
#composition .money-field input{display:block!important;width:100%!important;max-width:none!important;text-align:right;padding:8px 28px 8px 6px!important}
#composition .quantity-control{display:grid!important;grid-template-columns:44px minmax(5ch,1fr) 44px;width:100%!important;min-width:0!important;max-width:none!important;gap:0;border:1px solid var(--line-border);border-radius:var(--line-radius);height:44px;overflow:visible;background:white}
#composition .quantity-control button{min-width:44px!important;width:44px;height:42px;min-height:42px;padding:0!important;border:0;background:transparent;font-size:20px;line-height:1;border-radius:9px;color:#176b58}
#composition .quantity-control input{width:100%!important;max-width:none!important;min-width:5ch!important;height:42px;min-height:42px;border:0;border-radius:0;text-align:center;padding:8px 0!important;font-size:14px;white-space:nowrap}
#composition .quantity-note:empty{display:none}
#composition .quantity-note{font-size:12px;text-align:left}
#composition .row-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;justify-content:flex-start!important}
#composition .row-actions button{min-height:44px!important;padding:8px 10px!important;font-size:12px;border-radius:9px}
#composition .show-devices{background:#eef7f3!important;border:1px solid #c9dfd5!important;color:#165747!important}
#composition .remove-line{background:white!important;border:1px solid #ead0d0!important;color:#a52c2c!important}
#composition .line-total{display:block;min-width:0!important;max-width:none!important;white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:44px;font-variant-numeric:tabular-nums}
#composition .discount-row{display:flex;justify-content:flex-end;padding:12px 0!important;margin:0}
#composition .discount-row label{display:flex;align-items:center;gap:12px;font-size:13px}
#composition .discount-row .money-field{width:140px}
#composition .totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;background:#f5f9f7;border-radius:12px;padding:14px 16px;margin:0;line-height:1.5}
#composition .totals>div{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--secondary);min-width:0}
#composition .totals strong{color:var(--text);font-size:16px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#composition .totals .grand{margin:0;padding:0;border:0;color:#176b58}
#composition :is(input,button):focus-visible,#product-dialog :is(input,button):focus-visible{outline:3px solid #187c66;outline-offset:3px}
#product-dialog{border-radius:16px;max-width:620px;width:calc(100% - 24px);padding:20px}
#product-dialog input{min-height:44px;border-radius:10px;border:1px solid #ccd5d2}
#product-options .product-result{min-height:60px;white-space:normal;overflow-wrap:anywhere;border-radius:10px;text-align:left;margin:6px 0;padding:12px;line-height:1.5;background:#f7faf9;border:1px solid #d8e1dd}
@media(max-width:1250px){
#composition .line-table thead{display:none}
#composition .line-table,#composition .line-table tbody{display:block}
#composition .line-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:16px!important;margin:0 0 12px;border:1px solid #d8e1dd;border-radius:12px;background:white}
#composition .line-table td{display:flex!important;flex-direction:column;gap:5px;padding:0!important;width:auto!important;border:0;min-width:0!important}
#composition .line-table td:before{content:attr(data-label);display:block;font-size:12px;color:var(--secondary);text-align:left}
#composition .line-table td:first-child,#composition .line-table td:nth-child(3),#composition .line-table td:nth-child(4){display:none!important}
#composition .line-table td:nth-child(2){grid-column:1/-1;display:block!important;margin:0;padding:0!important;border:0}
#composition .line-table td:nth-child(2):before{display:none}
#composition .quantity-control{max-width:158px!important}
#composition .line-total{line-height:44px;text-align:right}
#composition .totals{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:480px){
#composition{padding:12px}
#composition .panel-head{align-items:center;gap:8px}#composition h2{font-size:17px}
#composition .line-table tr{padding:12px!important;gap:12px;grid-template-columns:minmax(0,1fr)}
#composition .line-table td:nth-child(2){grid-column:auto}
#composition .quantity-control{width:158px!important}
#composition .discount-row label{flex-direction:column;align-items:flex-end;gap:6px}
#composition .totals strong{font-size:14px}
}
#composition .totals{width:100%;max-width:620px;margin-left:auto;box-sizing:border-box}
@media(min-width:1251px){
#composition .line-table thead{display:table-header-group}#composition .line-table tbody{display:table-row-group}#composition .line-table tr{display:table-row}#composition .line-table td{display:table-cell!important;grid-column:auto!important;grid-row:auto!important}#composition .line-table td:nth-child(2){display:table-cell!important}#composition .line-table td:before{display:none!important}
#composition .line-table td:first-child,#composition .line-table td:nth-child(3),#composition .line-table td:nth-child(4){display:none!important}
}
@media(max-width:1250px){#composition .line-table td{grid-column:auto!important;grid-row:auto!important}#composition .line-table td:nth-child(2){grid-column:1/-1!important}}
@media(max-width:480px){#composition .line-table td:nth-child(2){grid-column:auto!important}}
#composition .remove-reason{display:block;text-align:left;font-size:12px;color:var(--secondary);margin-top:4px}#composition .remove-reason:empty{display:none}
/* Safari desktop: earlier !important grid rule must not survive table mode. */
@media(min-width:1251px){#composition .line-table{display:table!important}#composition .line-table tbody{display:table-row-group!important}#composition .line-table tbody tr{display:table-row!important;grid-template-columns:none!important}#composition .line-table thead{display:table-header-group!important}}
/* Revision 2: one table contract on desktop; cards exclusively below 768px. */
#composition .composition-wrap{overflow-x:auto;overscroll-behavior-x:contain}
#composition .totals{display:flex;flex-direction:column;gap:8px;width:340px;max-width:100%;padding:12px 0;background:transparent;border-radius:0}
#composition .totals>div{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px}
#composition .totals .grand{border-top:1px solid #dce4df;padding-top:10px;margin-top:4px;font-size:16px}
#composition .totals strong{font-size:14px;text-align:right;white-space:nowrap}
#composition .totals .grand strong{font-size:18px}
@media(min-width:768px){
 #composition .line-table{display:table!important;table-layout:fixed;min-width:850px!important;width:100%!important}
 #composition .line-table thead{display:table-header-group!important}
 #composition .line-table tbody{display:table-row-group!important;width:auto!important}
 #composition .line-table tbody tr,#composition .line-table thead tr{display:table-row!important;height:auto!important;border:0;padding:0!important;grid-template-columns:none!important}
 #composition .line-table td,#composition .line-table th{display:table-cell!important;grid-column:auto!important;grid-row:auto!important;padding:12px 8px!important;border-bottom:1px solid #e1e7e3;text-align:left}
 #composition .line-table td:before{display:none!important}
 #composition .line-table th:nth-child(3),#composition .line-table td:nth-child(3),#composition .line-table th:nth-child(4),#composition .line-table td:nth-child(4){display:none!important}
 #composition .line-table th:first-child,#composition .line-table td:first-child{display:table-cell!important;width:28px!important;color:var(--secondary)}
 #composition .line-table th:nth-child(2){width:auto!important}
 #composition .line-table th:nth-child(5){width:126px!important}
 #composition .line-table th:nth-child(6){width:158px!important}
 #composition .line-table th:nth-child(7){width:110px!important}
 #composition .line-table th:nth-child(8){width:148px!important}
 #composition .line-table td:nth-child(8){text-align:right}
 #composition .line-table td:nth-child(8) .row-actions{justify-content:flex-end!important}
 #composition .line-table td:nth-child(2){margin:0!important;padding-bottom:12px!important}
}
@media(max-width:767.98px){
 #composition .line-table,#composition .line-table tbody{display:block!important;min-width:0!important;width:100%!important}
 #composition .line-table thead{display:none!important}
 #composition .line-table tbody tr{display:grid!important;grid-template-columns:minmax(0,1fr)!important;padding:12px!important;border:1px solid #d8e1dd;border-radius:10px;margin:0 0 12px;gap:12px}
 #composition .line-table td{display:flex!important;flex-direction:column;grid-column:auto!important;grid-row:auto!important;padding:0!important;width:auto!important;border:0;margin:0!important}
 #composition .line-table td:before{display:block!important;content:attr(data-label);font-size:12px;color:var(--secondary)}
 #composition .line-table td:nth-child(2){display:block!important;grid-column:auto!important}
 #composition .line-table td:nth-child(2):before{display:block!important;content:'Товар / модель'!important;margin-bottom:6px}
 #composition .line-table td:first-child,#composition .line-table td:nth-child(3),#composition .line-table td:nth-child(4){display:none!important}
}
#composition .remove-reason{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
/* Density revision: preserve 44px input and action hit areas. */
#composition{padding:14px 20px}
#composition .panel-head{padding:0 0 10px;margin:0 0 8px;min-height:44px}
#composition .panel-head h2{margin:0;font-size:16px}
#composition .line-table .choose-model[data-selected=true]{background:transparent;border:0;border-radius:4px;padding:0!important;margin:0!important;color:#176c55;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:500;line-height:1.4;min-height:44px;display:flex;align-items:flex-start;justify-content:flex-start}
#composition .selected-sku{padding:2px 0 0;line-height:1.35}
#composition .row-actions{margin-top:2px;gap:4px}
#composition .row-actions button{padding:6px 4px!important;border:0!important;border-radius:4px;background:transparent!important;text-decoration:underline;text-underline-offset:3px;min-height:44px!important}
#composition .row-actions button:hover{background:#f0f6f2!important}
#composition .line-total{line-height:44px;margin:0;padding:0!important;min-height:44px}
#composition .remove-reason{margin:0;font-size:11px}
#composition .discount-row{padding:6px 0 2px!important}
#composition .totals{padding:4px 0 0;gap:2px;margin-top:0;line-height:1.4}
#composition .totals>div{padding:2px 0}
#composition .totals .grand{padding-top:6px;margin-top:2px}
@media(min-width:768px){#composition .line-table td{padding:8px!important;vertical-align:top}#composition .line-table th{padding:8px!important;vertical-align:middle}#composition .line-table td:nth-child(2){padding-bottom:8px!important}}
@media(max-width:767.98px){#composition{padding:12px}#composition .line-table tbody tr{gap:8px}#composition .line-table td{padding:0!important}.line-table .row-actions{margin-top:0}}