.operation-section {
    display: grid;
    gap: 10px;
}

.operation-section-header {
    align-items: center;
    margin-top: 28px;
}

.operation-summary {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0;
}

.operation-summary div {
    min-width: 92px;
    padding: 5px 8px;
    border: 1px solid #e3eaf1;
    border-radius: 4px;
    background: #f8fbfd;
}

.operation-summary dt {
    margin: 0 0 3px;
    color: #6b7c8f;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
}

.operation-summary dd {
    margin: 0;
    color: #1f2933;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

.operation-block,
.operation-detail-panel {
    min-width: 0;
    padding: 10px;
    border: 1px solid #dbe3ec;
    border-radius: 6px;
    background: #fff;
}

.operation-block-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.operation-block-header h3 {
    margin: 0;
    color: #1f2933;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
}

.operation-block-header span {
    display: block;
    margin-top: 3px;
    color: #6b7c8f;
    font-size: 11px;
    line-height: 14px;
}

.operation-table-wrap {
    max-width: 100%;
}

.operation-table {
    font-size: 11px;
}

.operation-table th,
.operation-table td {
    padding: 5px 6px;
    border-right: 1px solid #dbe5ef;
}

.operation-table th {
    background: #e7f2fb;
    text-transform: none;
}

.operation-table th:last-child,
.operation-table td:last-child {
    border-right: 0;
}

.operation-table strong {
    display: block;
    color: #1f2933;
    font-size: 11px;
    line-height: 14px;
}

.operation-table small {
    display: block;
    margin-top: 2px;
    color: #6b7c8f;
    font-size: 10px;
    line-height: 13px;
}

.operation-table tr.is-selected td {
    background: #f2f8fd;
}

.operation-table tr.is-meter-period-active td {
    background: #fbfdff;
}

.operation-table tr.is-meter-period-active td:first-child {
    box-shadow: inset 3px 0 0 #b8d8ef;
}

.operation-table tr.is-meter-period-active:hover td {
    background: #f3f9fe;
}

.counters-table {
    min-width: 1360px;
}

.payments-table {
    min-width: 1320px;
}

.recalculations-table {
    min-width: 1420px;
}

.history-table {
    min-width: 1240px;
}

.meter-history-table,
.payment-detail-table,
.recalculation-detail-table {
    min-width: 620px;
}

.recalculation-detail-table {
    min-width: 860px;
}

.operation-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: #52616b;
    font-size: 11px;
    line-height: 14px;
}

.operation-pagination > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.operation-pagination strong {
    color: #1f2933;
    white-space: nowrap;
}

.operation-empty-note {
    margin: 0;
    color: #52616b;
    font-size: 12px;
    line-height: 18px;
}

.operation-table .operation-empty-note {
    padding: 14px;
    text-align: center;
}

.operation-input-cell {
    min-width: 116px;
}

.operation-input-cell input,
.operation-form-grid input,
.operation-money-input,
.operation-inline-input,
.operation-form-grid select,
.operation-form-grid textarea,
.operation-inline-textarea,
.history-filters select {
    width: 100%;
    border: 1px solid #c6d3df;
    border-radius: 4px;
    background: #fff;
    color: #1f2933;
    font-size: 12px;
    line-height: 16px;
}

.operation-input-cell input {
    height: 28px;
    padding: 4px 6px;
}

.operation-form-grid input,
.operation-form-grid select {
    height: 30px;
    padding: 5px 7px;
}

.operation-inline-input {
    height: 28px;
    padding: 4px 6px;
}

.operation-money-input {
    min-width: 92px;
    max-width: 118px;
    height: 28px;
    margin-left: auto;
    padding: 4px 6px;
    text-align: right;
}

.operation-form-grid textarea {
    min-height: 70px;
    padding: 6px 7px;
    resize: vertical;
}

.operation-inline-textarea {
    min-height: 58px;
    padding: 6px 7px;
    resize: vertical;
}

.operation-input-cell input:focus,
.operation-form-grid input:focus,
.operation-money-input:focus,
.operation-inline-input:focus,
.operation-form-grid select:focus,
.operation-form-grid textarea:focus,
.operation-inline-textarea:focus,
.history-filters select:focus {
    border-color: #0063B0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 99, 176, 0.14);
}

.operation-input-cell input.is-invalid,
.operation-form-grid input.is-invalid {
    border-color: #d93025;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}

.operation-error {
    display: block;
    max-width: 150px;
    margin-top: 3px;
    color: #b42318;
    font-size: 10px;
    line-height: 12px;
}

.operation-action-cell {
    white-space: nowrap;
}

.operation-action-cell .workplace-icon-action {
    margin: 0 2px;
}

.operation-icon-secondary {
    background: #0063B0;
}

.operation-icon-danger {
    background: #d93025;
}

.operation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 20px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e4f7f5;
    color: #0f6f67;
    font-size: 10px;
    font-weight: 700;
}

.operation-badge_muted {
    background: #eef3f7;
    color: #52616b;
}

.operation-note-cell {
    max-width: 240px;
    color: #334e68;
    line-height: 15px;
}

.operation-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
    align-items: start;
}

.operation-detail-layout_payment {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.operation-detail-layout_recalculation {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.operation-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.operation-form-grid_four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.operation-form-wide {
    grid-column: 1 / -1;
}

.operation-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
    color: #52616b;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
}

.operation-definition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.operation-definition-grid_single {
    grid-template-columns: 1fr;
}

.operation-definition-grid div {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #e3eaf1;
    border-radius: 4px;
    background: #f8fbfd;
}

.operation-definition-wide {
    grid-column: 1 / -1;
}

.operation-definition-grid dt {
    margin: 0 0 3px;
    color: #6b7c8f;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
}

.operation-definition-grid dd {
    margin: 0;
    color: #1f2933;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.operation-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 10px;
    align-items: start;
}

.operation-detail-panel {
    position: sticky;
    top: calc(var(--workplace-demo-header-height) + var(--workplace-account-header-height) + 10px);
}

.operation-filter-bar,
.history-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.operation-filter-bar button {
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid #c6d3df;
    border-radius: 4px;
    background: #fff;
    color: #334e68;
    font-size: 11px;
    font-weight: 700;
}

.operation-filter-bar button.is-active {
    border-color: #0063B0;
    background: #e7f2fb;
    color: #0063B0;
}

.history-filters label {
    display: grid;
    grid-template-columns: auto 132px;
    gap: 5px;
    align-items: center;
    margin: 0;
    color: #52616b;
    font-size: 11px;
    font-weight: 700;
}

.history-filters select {
    height: 28px;
    padding: 4px 6px;
}

.operation-empty-state {
    margin-top: 10px;
    padding: 26px 18px;
}