.production-consumption-dialog {
    width: min(1060px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #fff;
    color: #183a5c;
    box-shadow: 0 24px 80px rgba(14, 39, 67, .28);
}

.production-consumption-dialog::backdrop {
    background: rgba(12, 29, 47, .58);
}

.production-consumption-dialog form {
    padding: 22px;
}

.consumption-header,
.consumption-controls,
.consumption-actions,
.consumption-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.consumption-header h2 { margin: 3px 0 2px; }

.consumption-controls {
    justify-content: flex-start;
    margin: 18px 0 12px;
}

.consumption-controls label { min-width: 230px; }

.consumption-controls select,
.consumption-note input,
.consumption-quantity-control input {
    height: 42px;
}

.consumption-table-wrap {
    overflow: auto;
    max-height: 42vh;
    border: 1px solid #dfe7ef;
    border-radius: 13px;
}

.consumption-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.consumption-table th,
.consumption-table td {
    padding: 10px;
    border-bottom: 1px solid #e7edf3;
    text-align: left;
    vertical-align: middle;
}

.consumption-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f5f8fb;
    color: #657586;
    font-size: 11px;
    text-transform: uppercase;
}

.consumption-material { min-width: 220px; }
.consumption-material strong,
.consumption-material span { display: block; }
.consumption-material span { margin-top: 3px; color: #718092; font-size: 11px; }

.consumption-quantity-control {
    display: grid;
    grid-template-columns: minmax(95px, 1fr) auto;
    gap: 6px;
    min-width: 190px;
}

.consumption-quantity-control button { padding: 7px 9px; }
.consumption-negative td { background: #fff4ef; }

.consumption-warning,
.consumption-success {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
}

.consumption-warning { background: #fff0e9; color: #954020; }
.consumption-success { background: #e9f6ef; color: #176b57; }
.consumption-note { display: block; margin-top: 14px; }
.consumption-note input { width: 100%; margin-top: 6px; }

.consumption-history-section { margin-top: 18px; }
.consumption-history-section h3 { margin: 0 0 9px; font-size: 15px; }
#consumption-history { max-height: 150px; overflow: auto; }

.consumption-history-item {
    padding: 8px 2px;
    border-bottom: 1px solid #e7edf3;
    font-size: 12px;
}

.consumption-history-item strong,
.consumption-history-item span { display: block; }
.consumption-history-item span,
.consumption-history-item small { color: #718092; }

.consumption-actions {
    justify-content: flex-end;
    margin-top: 16px;
}

.consumption-open-button { margin-right: auto; }

@media (max-width: 720px) {
    .production-consumption-dialog form { padding: 15px; }
    .consumption-controls { align-items: stretch; flex-direction: column; }
    .consumption-controls label { min-width: 0; }
    .consumption-table-wrap { max-height: 50vh; }
    .consumption-table { min-width: 830px; }
    .consumption-actions button { flex: 1; }
}


/* PROUZ CONSUMPTION COMPACT UI V2 */

.production-consumption-dialog {
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    border-radius: 16px;
}

.production-consumption-dialog form {
    padding: 18px 20px;
}

.production-consumption-dialog .consumption-header {
    align-items: flex-start;
}

.production-consumption-dialog .consumption-header h2 {
    margin: 2px 0;
    font-size: 26px;
    line-height: 1.1;
}

.production-consumption-dialog .consumption-header .eyebrow {
    margin: 0 0 5px;
    font-size: 11px;
    letter-spacing: .14em;
}

.production-consumption-dialog .consumption-header .muted {
    margin: 4px 0 0;
    font-size: 13px;
}

.production-consumption-dialog .consumption-header .icon-button {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 24px;
}

.production-consumption-dialog .consumption-controls {
    display: grid;
    grid-template-columns: minmax(210px, 260px) auto;
    align-items: end;
    justify-content: start;
    gap: 10px;
    margin: 14px 0 10px;
}

.production-consumption-dialog .consumption-controls label {
    min-width: 0;
    margin: 0;
    font-size: 12px;
}

.production-consumption-dialog .consumption-controls select {
    height: 38px;
    margin-top: 5px;
    padding: 6px 34px 6px 11px;
    font-size: 14px;
}

.production-consumption-dialog #consumption-fill {
    min-height: 38px;
    height: 38px;
    padding: 7px 13px;
    font-size: 13px;
    white-space: nowrap;
}

.production-consumption-dialog .consumption-table-wrap {
    max-height: 39vh;
    border-radius: 11px;
}

.production-consumption-dialog .consumption-table {
    table-layout: fixed;
    font-size: 13px;
}

.production-consumption-dialog .consumption-table th,
.production-consumption-dialog .consumption-table td {
    padding: 9px 8px;
}

.production-consumption-dialog .consumption-table th {
    font-size: 10px;
    letter-spacing: .055em;
    white-space: nowrap;
}

.production-consumption-dialog .consumption-table th:nth-child(1) {
    width: 31%;
}

.production-consumption-dialog .consumption-table th:nth-child(2),
.production-consumption-dialog .consumption-table th:nth-child(3),
.production-consumption-dialog .consumption-table th:nth-child(4),
.production-consumption-dialog .consumption-table th:nth-child(5) {
    width: 10%;
}

.production-consumption-dialog .consumption-table th:nth-child(6) {
    width: 29%;
}

.production-consumption-dialog .consumption-material {
    min-width: 0;
}

.production-consumption-dialog .consumption-material strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-consumption-dialog .consumption-material span {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-consumption-dialog .consumption-quantity-control {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) 70px;
    gap: 5px;
    min-width: 0;
}

.production-consumption-dialog .consumption-quantity-control input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 6px 9px;
    font-size: 14px;
}

.production-consumption-dialog .consumption-quantity-control button {
    width: 70px;
    min-height: 36px;
    height: 36px;
    padding: 5px 6px;
    font-size: 11px;
}

.production-consumption-dialog .consumption-note {
    margin-top: 10px;
    font-size: 12px;
}

.production-consumption-dialog .consumption-note input {
    height: 38px;
    margin-top: 4px;
    padding: 7px 11px;
    font-size: 13px;
}

.production-consumption-dialog .consumption-history-section {
    margin-top: 13px;
}

.production-consumption-dialog .consumption-history-section h3 {
    margin-bottom: 5px;
    font-size: 14px;
}

.production-consumption-dialog #consumption-history {
    max-height: 105px;
}

.production-consumption-dialog .consumption-actions {
    position: sticky;
    bottom: -18px;
    z-index: 2;
    margin: 12px -20px -18px;
    padding: 12px 20px;
    border-top: 1px solid #e3eaf1;
    background: rgba(255, 255, 255, .97);
}

.production-consumption-dialog .consumption-actions button {
    min-height: 38px;
    padding: 7px 14px;
    font-size: 13px;
}

@media (max-width: 720px) {
    .production-consumption-dialog {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        border-radius: 13px;
    }

    .production-consumption-dialog form {
        padding: 14px;
    }

    .production-consumption-dialog .consumption-controls {
        grid-template-columns: 1fr;
    }

    .production-consumption-dialog #consumption-fill {
        width: 100%;
    }

    .production-consumption-dialog .consumption-table {
        min-width: 760px;
    }

    .production-consumption-dialog .consumption-actions {
        bottom: -14px;
        margin: 10px -14px -14px;
        padding: 10px 14px;
    }
}