#detailPage.balance-container {
    min-height: 100vh;
    padding: 18px 22px 32px;
    background: #f5f8f6;
}

#detailPage .detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

#detailPage .breadcrumb-text {
    margin: 0 0 5px;
    color: #708078;
    font-size: 12px;
}

#detailPage h1 {
    margin: 0;
    color: var(--green-dark);
    font-size: 24px;
    font-weight: 700;
}

#detailPage .detail-subtitle {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
}

#detailPage .status {
    display: inline-flex;
    min-width: 92px;
    justify-content: center;
    margin-top: 21px;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

#detailPage .status.drafting { border-color: #f2b45c; background: #fff8eb; color: #b65309; }
#detailPage .status.cancelled { border-color: #c8d0cb; background: #f1f3f2; color: #5d6962; }
#detailPage .status.approved { border-color: #79bf92; background: #edf8f1; color: var(--green); }

#detailPage .card {
    margin: 0 0 16px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 52, 35, .03);
}

#detailPage .detail-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
}

#detailPage .field-date { grid-column: span 2; }
#detailPage .field-unit-filter { grid-column: span 2; }
#detailPage .field-shift { grid-column: span 2; }
#detailPage .field-menu { grid-column: span 3; }
#detailPage .field-eaters { grid-column: span 2; }
#detailPage .field-btn { grid-column: span 1; }

#detailPage .field-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

#detailPage .field-item label {
    margin: 0;
    color: #405047;
    font-size: 12px;
    font-weight: 700;
}

#detailPage .form-note {
    display: block;
    overflow: hidden;
    margin-top: 8px;
    color: #748179;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#detailPage .required { color: #c5221f; }

#detailPage .form-control {
    width: 100%;
    height: 38px;
    padding: 7px 10px;
    border: 1px solid #c7d2cb;
    border-radius: 6px;
    background: #fff;
    color: #26372e;
    box-shadow: none;
    font: inherit;
}

#detailPage .form-control[readonly] {
    background: #f5f7f6;
    color: #5c6961;
}

#detailPage .k-datepicker,
#detailPage .k-dropdown {
    box-sizing: border-box !important;
    width: 100%;
    height: 38px;
    border: 1px solid #c7d2cb;
    border-radius: 6px;
    background: #fff;
}

#detailPage .k-datepicker .k-picker-wrap,
#detailPage .k-dropdown .k-dropdown-wrap {
    height: 36px;
    border: 0;
    border-radius: 5px;
    background: #fff;
}

#detailPage .k-datepicker .k-input,
#detailPage .k-dropdown .k-input {
    height: 36px;
    padding: 0 10px;
    border: 0;
    color: #26372e;
    line-height: 36px;
}

#detailPage .k-datepicker .k-select,
#detailPage .k-dropdown .k-select {
    display: flex;
    width: 34px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #d6dfd9;
    line-height: normal;
}

#detailPage .k-datepicker.k-state-focused,
#detailPage .k-dropdown.k-state-focused,
#detailPage .k-datepicker:focus-within,
#detailPage .k-dropdown:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(8, 123, 57, .1);
}

#detailPage .k-datepicker .k-icon,
#detailPage .k-dropdown .k-icon {
    overflow: hidden;
    background-image: none;
    font-size: 0;
    text-indent: 0;
}

#detailPage .k-datepicker .k-icon::before,
#detailPage .k-dropdown .k-icon::before {
    display: block;
    font-family: "Glyphicons Halflings";
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

#detailPage .k-i-calendar::before { content: "\e109"; }
#detailPage .k-i-arrow-s::before { content: "\e114"; }
#detailPage .k-state-disabled { background: #f5f7f6; opacity: 1; }
#detailPage .k-state-disabled .k-input { color: #5c6961; }

#detailPage .field-btn .btn { width: 100%; min-width: 96px; }

#detailPage .card-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

#detailPage .card-headline h2 {
    margin: 0;
    color: #26372e;
    font-size: 17px;
    font-weight: 700;
}

#detailPage .card-headline p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
}

#detailPage .headline-tools {
    display: flex;
    align-items: center;
    gap: 24px;
}

#detailPage .toggle-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #405047;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

#detailPage .switch-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
}

#detailPage .switch-toggle input { width: 0; height: 0; opacity: 0; }

#detailPage .slider-round {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: #9ca49f;
    cursor: pointer;
    transition: .2s;
}

#detailPage .slider-round::before {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    content: "";
    transition: .2s;
}

#detailPage .switch-toggle input:checked + .slider-round { background: var(--green); }
#detailPage .switch-toggle input:checked + .slider-round::before { transform: translateX(16px); }
#detailPage .switch-toggle input:disabled + .slider-round { cursor: not-allowed; opacity: .58; }

#detailPage .formula-caption { color: #56645c; font-size: 12px; font-style: italic; }

#detailPage .balance-table-card { padding: 16px 18px 0; }
#detailPage .balance-table-wrap { position: relative; border: 1px solid var(--border); border-radius: 7px; overflow: auto; }
#detailPage .table-balance { width: 100%; min-width: 1260px; margin: 0; border-collapse: collapse; background: #fff; }

#detailPage .table-balance th {
    padding: 10px 8px;
    border-right: 1px solid #d7e2d9;
    border-bottom: 1px solid #cbdacb;
    background: #eaf4e8;
    color: #34443a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    vertical-align: middle;
}

#detailPage .table-balance td {
    padding: 9px 10px;
    border-right: 1px solid #edf1ee;
    border-bottom: 1px solid #e4eae6;
    color: #27362d;
    font-size: 13px;
    vertical-align: middle;
}

#detailPage .table-balance th:last-child,
#detailPage .table-balance td:last-child { border-right: 0; }
#detailPage .table-balance tbody tr:hover { background: #f8fbf9; }
#detailPage .table-balance tfoot td { border-bottom: 0; background: #fbfcfb; }

#detailPage .col-stt { width: 50px; }
#detailPage .col-dish { width: 180px; }
#detailPage .col-ingredient { min-width: 250px; }
#detailPage .col-unit { width: 105px; }
#detailPage .col-norm { width: 130px; }
#detailPage .col-eaters { width: 105px; }
#detailPage .col-suggested { width: 135px; }
#detailPage .col-purchase-unit { width: 105px; }
#detailPage .col-price { width: 135px; }
#detailPage .col-amount { width: 145px; }
#detailPage .unit-sub { color: #647269; font-size: 10px; font-weight: 500; }

#detailPage .row-center { text-align: center; }
#detailPage .row-right { text-align: right; }
#detailPage .row-ingredient { color: #4f5e55; }
#detailPage .row-unit { color: #5d6c63; text-align: center; }

#detailPage .reference-value {
    display: block;
    width: 100%;
    min-width: 76px;
    padding: 6px 8px;
    color: #27362d;
    text-align: right;
}

#detailPage .row-unit .reference-value { text-align: center; }

#detailPage .number-input {
    width: 100%;
    min-width: 92px;
    height: 34px;
    padding: 5px 8px;
    border: 1px solid #bdcbc2;
    border-radius: 5px;
    outline: 0;
    background: #fff;
    text-align: right;
}

#detailPage .unit-input {
    width: 100%;
    min-width: 76px;
    height: 34px;
    padding: 5px 25px 5px 8px;
    border: 1px solid #bdcbc2;
    border-radius: 5px;
    outline: 0;
    background: #fff;
    color: #27362d;
}

#detailPage .unit-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(8, 123, 57, .1);
}

#detailPage .unit-input:disabled {
    border-color: transparent;
    background: transparent;
    color: #27362d;
    opacity: 1;
}

#detailPage .number-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(8, 123, 57, .1);
}

#detailPage .number-input:disabled {
    border-color: transparent;
    background: transparent;
    color: #27362d;
}

#detailPage .balance-summary-row td { padding: 14px; }
#detailPage .summary-total-col { text-align: center; }
#detailPage .summary-per-portion-col { border-left: 1px solid #d8e0da; text-align: right; }
#detailPage .total-title { margin-right: 8px; color: var(--green-dark); font-size: 13px; font-weight: 700; }
#detailPage .total-number { color: var(--green-dark); font-size: 19px; font-weight: 800; }
#detailPage .per-portion-number { color: #27362d; font-size: 15px; font-weight: 700; }

#detailPage .detail-empty {
    display: flex;
    min-height: 185px;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: #fff;
}

#detailPage .detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding-top: 2px;
}

#detailPage .detail-actions .btn { min-width: 122px; }

#detailPage .revoke-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url('/images/revoke.svg?v=1') center / contain no-repeat;
}

#detailPage.is-busy { pointer-events: none; opacity: .72; }

@media (max-width: 1180px) {
    #detailPage .detail-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #detailPage .field-date,
    #detailPage .field-unit-filter,
    #detailPage .field-shift { grid-column: span 2; }
    #detailPage .field-menu { grid-column: span 3; }
    #detailPage .field-eaters { grid-column: span 2; }
    #detailPage .field-btn { grid-column: span 1; }
}

@media (max-width: 760px) {
    #detailPage.balance-container { padding: 14px 12px 24px; }
    #detailPage .detail-header, #detailPage .card-headline, #detailPage .headline-tools { align-items: flex-start; flex-direction: column; }
    #detailPage .detail-header { gap: 4px; }
    #detailPage .status { margin-top: 4px; }
    #detailPage .detail-form-grid { grid-template-columns: 1fr; }
    #detailPage .field-date,
    #detailPage .field-unit-filter,
    #detailPage .field-shift,
    #detailPage .field-menu,
    #detailPage .field-eaters,
    #detailPage .field-btn { grid-column: auto; }
    #detailPage .headline-tools { gap: 10px; }
    #detailPage .detail-actions { flex-direction: column; }
    #detailPage .detail-actions .btn { width: 100%; }
}