:root{--green:#007c43;--border:#dce2e7;--muted:#6b7d91}*{box-sizing:border-box}body{margin:0;background:#fff;color:#152233;font:14px 'Segoe UI',Arial,sans-serif}.content{padding:24px;max-width:1800px;margin:auto}h1{font-size:24px;font-weight:700;margin:0 0 8px}h2{font-size:17px;font-weight:600;margin:0 0 18px}p{margin:0 0 12px}a{color:var(--green)}.title-row,.actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.title-row{margin-bottom:18px}.actions{justify-content:flex-end;flex-wrap:wrap}.muted,small{color:var(--muted);font-size:12px}.card{border:1px solid var(--border);border-radius:8px;padding:20px;background:white;box-shadow:0 1px 3px #172d4510;margin-bottom:16px}.summary{display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:12px}.summary small{display:block;margin-bottom:5px}.summary strong{font-size:23px;display:block;color:#142031}.summary .badge{margin:2px 0 5px}.badge{display:inline-block;border-radius:16px;padding:5px 9px;font-size:12px;font-weight:500}.draft{background:#fff6e3;color:#aa6500;border:1px solid #f4d692}.active{background:#e8f7ed;color:#007b43;border:1px solid #b6e4c6}.stopped{background:#f0f2f5;color:#617082;border:1px solid #dfe3e8}button{background:#fff;border:1px solid #b8c9c2;border-radius:5px;padding:9px 14px;color:#08683f;cursor:pointer;white-space:nowrap;font:inherit}button:hover{background:#edf6f1}button.primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}button:disabled{opacity:.5;cursor:wait}input,select,textarea{font:inherit;border:1px solid #ced5dd;border-radius:5px;padding:8px 10px;background:white;color:#172233;width:100%;min-width:0}input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid #68b897;outline-offset:1px}label{font-weight:400;display:block;margin:0}label>input,label>select,label>textarea{margin-top:6px}textarea{resize:vertical;min-height:66px}.filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.filters label{font-size:12px;color:#43576d;min-width:115px}.filters .grow{flex:1;min-width:180px}.list-card{padding:0;overflow:hidden}#filterForm{padding:18px}#filterForm h2{font-size:14px}.k-grid{border-left:0;border-right:0;border-color:var(--border)}.k-grid-header th.k-header{background:#f6f8fa;font-weight:600}.k-grid td{padding:10px 8px;border-color:#e6ebf0}.k-grid .row-actions{display:flex;gap:4px}.row-actions button{padding:5px 8px;font-size:12px}.danger{color:#d52c3b;border-color:#efb4bc}.message:empty{display:none}.message{padding:12px 16px;margin-bottom:15px;border-radius:5px;background:#e8f7ed;color:#146536}.message.error{background:#fff0ee;color:#a62727}.detail-layout{display:flex;align-items:stretch;gap:16px}.detail-main{flex:1;min-width:0}.header-fields{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:16px 24px}.header-fields .badge{width:max-content;display:block;margin-top:6px}.note-field{grid-column:span 3}.cost-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.cost-summary .card{display:flex;align-items:center;gap:16px;padding:18px 14px}.cost-summary strong small{display:inline;font-size:15px;color:inherit;font-weight:400}.cost-icon{font-size:32px;flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center}.food{background:#fff2e8;color:#ee8a33}.operation{background:#eef4ff;color:#2f72bd}.total{background:#eaf7e9;color:#399853}#operationCost{font-size:23px;font-weight:600;padding:0 4px;max-width:160px}.detail-table{border-collapse:collapse;width:100%;font-size:13px}.detail-table td,.detail-table th{border:1px solid #d9dedc;padding:9px;text-align:center}.detail-table td:nth-child(2),.detail-table td:nth-child(3){text-align:left}.detail-table th{background:#fcf7f2}.detail-table .group td,.detail-table .group th{background:#fcebdc;font-weight:600}.detail-table .total-row>*{background:#e5f3e4;font-weight:700}.detail-table tr.selected td{background:#ebf7e4}.detail-table button{padding:3px 6px;border:0}.table-scroll{overflow:auto}.line-editor{flex:0 0 265px;background:#f8f9fb;align-self:stretch}.line-editor h2{font-size:17px}.line-editor label{margin-top:20px}.range{display:flex;gap:10px;align-items:center;margin-top:8px}.line-editor .primary{width:100%;margin-top:22px}.line-editor textarea{min-height:80px}#detailSearch{max-width:350px}.footnote{padding:3px 12px}.breadcrumb-line{font-size:13px;color:#617082;margin-bottom:20px}#copySource{margin:14px 0}#copySearch{width:70%}[hidden]{display:none!important}@media(max-width:1100px){.content{padding:16px}.detail-layout{flex-wrap:wrap}.line-editor{flex:1 1 100%}.line-editor form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cost-summary .card{gap:8px}.cost-icon{width:40px;height:40px;font-size:24px}}@media(max-width:700px){.summary,.header-fields{grid-template-columns:1fr}.note-field{grid-column:auto}.title-row{align-items:flex-start;flex-direction:column}.actions{justify-content:flex-start}.summary .card{margin-bottom:0}.summary{margin-bottom:16px}.filters label{flex:1 1 40%}.line-editor form{display:block}h1{font-size:21px}.detail-table{min-width:820px}}
/* Căn giữa toàn bộ giá trị tiền và tỷ lệ, kể cả các dòng có colspan. */
#price, #linePrice, #operationCost,
#operationFooter, #operationPercent, #totalFooter, #totalPercent { text-align: center; }
.cost-summary .card > div { flex: 1; min-width: 0; text-align: center; }
#operationCost { display: block; margin: 4px auto; }

.detail-bottom-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-start; padding-top: 4px; }
.list-bottom-actions { display: flex; justify-content: flex-start; padding-top: 4px; }
.list-bottom-actions #btnAdd { min-width: 180px; }
button > .button-icon { margin-right: 7px; font-size: 13px; pointer-events: none; }
.message { position: fixed; top: 20px; left: 50%; z-index: 2000; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 12px 42px 12px 16px; transform: translateX(-50%); box-shadow: 0 4px 16px #172d4533; }
.message-close { position: absolute; top: 50%; right: 8px; min-width: 24px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 21px; line-height: 1; transform: translateY(-50%); }
.message-close:hover { background: transparent; opacity: .7; }
#grid .k-grid-content td { padding-top: 5px; padding-bottom: 5px; }
#grid .k-grid-content tbody tr:last-child > td { border-bottom: 1px solid #e6ebf0; }
.detail-table .action-icon { min-width: 14px; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 3px; background: transparent; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.detail-table .action-icon:hover { background: #edf6f1; }
.detail-table tbody tr[data-index] { cursor: pointer; }
.detail-table .action-icon .glyphicon { pointer-events: none; line-height: 1; }
.detail-table .btn-line-delete { color: #d52c3b; }
.detail-table .action-icon:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Đồng bộ DatePicker và phân trang với các màn hình danh mục. */
.filters label { display: flex; flex-direction: column; gap: 6px; }
.filters label > input, .filters label > select { margin-top: 0; }
.filters .k-datepicker { width: 100%; height: 38px; margin-top: 0; }
.filters .k-datepicker .k-picker-wrap { height: 38px; box-sizing: border-box; }
.filters .k-datepicker .k-input { height: 36px; padding: 8px 10px; }
.filters .k-datepicker .k-select { height: 36px; line-height: 36px; }

#grid .k-pager-wrap .k-icon,
.filters .k-dropdown .k-icon,
.filters .k-datepicker .k-icon,
.header-fields .k-datepicker .k-icon { background-image: none; text-indent: 0; font-size: 0; overflow: hidden; }
#grid .k-pager-wrap .k-icon::before,
.filters .k-dropdown .k-icon::before,
.filters .k-datepicker .k-icon::before,
.header-fields .k-datepicker .k-icon::before { font-family: 'Glyphicons Halflings'; font-size: 12px; line-height: 16px; display: block; text-align: center; }
#grid .k-i-seek-w::before { content: "\e069"; }
#grid .k-i-arrow-w::before { content: "\e079"; }
#grid .k-i-arrow-e::before { content: "\e080"; }
#grid .k-i-seek-e::before { content: "\e077"; }
#grid .k-i-arrow-s::before, .filters .k-i-arrow-s::before { content: "\e114"; }
.filters .k-i-calendar::before, .header-fields .k-i-calendar::before { content: "\e109"; }

#grid .row-actions.action-icons { justify-content: center; gap: 2px; }
#grid .row-actions .action-icon { min-width: 14px; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 3px; background: transparent; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
#grid .row-actions .action-icon:hover { background: #edf6f1; }
#grid .row-actions .action-icon .glyphicon { pointer-events: none; line-height: 1; }
#grid .row-actions .btn-approve { color: #087443; }
#grid .row-actions .btn-revoke { color: #d52c3b; }
.revoke-icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; background: url('/images/revoke.svg?v=1') center / contain no-repeat; pointer-events: none; }
#grid .row-actions .btn-delete { color: #d52c3b; }
#grid .badge { padding: 0; border: 0; border-radius: 0; background: transparent; }

/* Nhãn phải nằm trên control, kể cả sau khi Kendo thay input bằng DatePicker. */
.header-fields label { display: flex; flex-direction: column; gap: 6px; }
.header-fields label > input, .header-fields label > select, .header-fields label > textarea { margin-top: 0; }
.header-fields .k-datepicker { display: block; width: 100%; height: 38px; margin-top: 0; }
.header-fields .k-datepicker .k-picker-wrap { height: 38px; box-sizing: border-box; }
.header-fields .k-datepicker .k-input { height: 36px; padding: 8px 10px; }
.header-fields .k-datepicker .k-select { height: 36px; line-height: 36px; }

/* Giữ toàn bộ form chi tiết trong chiều cao iframe; bảng tự cuộn khi vượt quá không gian. */
body.detail-open { overflow: hidden; }
body.detail-open .content { height: 100vh; max-width: none; padding: 12px 16px; overflow: hidden; display: flex; flex-direction: column; }
body.detail-open #detailPage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.detail-open .detail-heading { margin-bottom: 8px; flex: none; }
body.detail-open h1 { font-size: 21px; margin-bottom: 2px; }
body.detail-open .breadcrumb-line { margin-bottom: 5px; }
body.detail-open .detail-layout { flex: 1; min-height: 0; gap: 12px; }
body.detail-open .detail-main { min-height: 0; display: flex; flex-direction: column; }
body.detail-open .card { padding: 12px; margin-bottom: 8px; }
body.detail-open .card h2 { margin-bottom: 10px; }
body.detail-open .header-fields { gap: 8px 18px; }
body.detail-open .header-fields { gap: 6px 18px; }
body.detail-open .header-fields label { gap: 3px; line-height: 16px; }
body.detail-open .header-fields textarea { min-height: 34px; height: 42px; }
body.detail-open .cost-summary { flex: none; margin-bottom: 8px; }
body.detail-open .cost-summary .card { padding: 6px 10px; }
body.detail-open .cost-icon { width: 52px; height: 52px; font-size: 30px; }
body.detail-open .cost-summary strong { font-size: 18px; }
body.detail-open .detail-main > .card:last-of-type { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.detail-open .detail-main > .card:last-of-type .table-scroll { flex: 1; min-height: 0; overflow: auto; }
body.detail-open .detail-table td, body.detail-open .detail-table th { padding: 5px 7px; }
body.detail-open .line-editor { min-height: 0; overflow: auto; }
body.detail-open .line-editor label { margin-top: 9px; }
body.detail-open .line-editor textarea { min-height: 44px; }
body.detail-open .line-editor .primary { margin-top: 10px; }
body.detail-open .footnote { margin: 0; padding: 2px 0; }
body.detail-open .detail-bottom-actions { flex: none; padding-top: 6px; }

/* Kendo dùng khung .k-picker-wrap; đặt border tại đây để không mất cạnh dưới. */
.filters select, .filters input, .filters .k-datepicker,
.header-fields select, .header-fields input, .header-fields .k-datepicker { height: 34px; }
.filters .k-datepicker, .header-fields .k-datepicker {
    box-sizing: border-box;
    vertical-align: bottom;
    border: 1px solid #ced5dd !important;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
}
.filters .k-datepicker .k-picker-wrap, .header-fields .k-datepicker .k-picker-wrap {
    display: flex;
    width: 100%;
    height: 32px;
    border: 0 !important;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
}
.filters .k-datepicker .k-input, .header-fields .k-datepicker .k-input {
    height: 32px;
    min-height: 32px;
    border: 0;
    box-shadow: none;
    text-align: center;
    line-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
}
.filters .k-datepicker .k-select, .header-fields .k-datepicker .k-select {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    line-height: normal;
    border-left: 1px solid #ced5dd;
}

/* Popup sao chép luôn nằm gọn trong khung hiển thị. */
.copy-dialog-window { max-height: calc(100vh - 24px) !important; }
.copy-dialog-window .k-window-content { max-height: calc(100vh - 68px); overflow: hidden !important; padding: 14px 16px; }
#copyDialog p { margin-bottom: 10px; }
#copySearch { width: calc(100% - 120px); margin: 0; vertical-align: middle; }
#btnFindCopy { margin-left: 6px; padding: 8px 10px; vertical-align: middle; }
#copySource { display: block; width: 100%; height: 132px; max-height: calc(100vh - 235px); margin: 10px 0; }
#btnConfirmCopy { display: block; margin-left: auto; }
.copy-dialog-window .k-window-titlebar .k-window-action { color: #d52c3b; }
.copy-dialog-window .k-window-titlebar .k-i-close { background-image: none; text-indent: 0; font-size: 0; }
.copy-dialog-window .k-window-titlebar .k-i-close::before { content: "\e014"; display: block; font-family: 'Glyphicons Halflings'; font-size: 14px; line-height: 18px; text-align: center; }

@media (max-width: 1100px), (max-height: 720px) {
    body.detail-open { overflow: auto; }
    body.detail-open .content { height: auto; min-height: 100vh; overflow: visible; }
    body.detail-open #detailPage, body.detail-open .detail-layout, body.detail-open .detail-main { display: block; }
    body.detail-open .line-editor { overflow: visible; }
}

/* Danh sách định mức dùng khung chung /css/qlna-list-page.css. */
body:not(.detail-open) .content { max-width: none; padding: 0; }
#listPage #filterForm { padding: 0; }
#listPage .quota-filter-grid {
    grid-template-columns: minmax(120px, .55fr) repeat(2, minmax(140px, .65fr)) minmax(150px, .7fr) minmax(220px, 1.15fr) auto;
}
#listPage .qlna-list-filter-actions { white-space: nowrap; }
#listPage .qlna-list-filter-actions .qlna-list-btn { min-width: 92px; }
#listPage .qlna-list-bottom-actions #btnAdd { min-width: 180px; }
#grid .k-grid-content tr:not(.kendo-empty-row) { cursor: pointer; }
#listPage #grid .k-grid-content td { height: 48px; padding: var(--qlna-list-cell-padding); }
#grid .cell-right { text-align: right !important; }

#grid .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}
#grid .badge::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; content: ""; }
#grid .badge.draft { background: #fff4df; color: #9d5d00; }
#grid .badge.active { background: #e8f6ed; color: #087538; }
#grid .badge.stopped { background: red; color: white; }

#grid .row-actions.action-icons { align-items: center; justify-content: center; gap: 4px; }
#grid .row-actions .action-icon {
    display: inline-flex;
    width: 28px;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d5dae0;
    border-radius: 5px;
    background: #fff;
    line-height: 1;
}
#grid .row-actions .action-icon:hover { border-color: var(--green); background: #edf6f1; }

@media (max-width: 1250px) {
    #listPage .quota-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #listPage .quota-search-field { grid-column: span 2; }
    #listPage .qlna-list-filter-actions { grid-column: span 2; justify-content: flex-end; }
}

@media (max-width: 767px) {
    #listPage .quota-filter-grid { grid-template-columns: 1fr; }
    #listPage .quota-search-field,
    #listPage .qlna-list-filter-actions { grid-column: auto; }
    #listPage .qlna-list-filter-actions { justify-content: stretch; }
    #listPage .qlna-list-filter-actions .qlna-list-btn { min-width: 0; }
    #grid .badge { padding: 4px 6px; font-size: 10px; }
    #grid .row-actions .action-icon { width: 27px; min-width: 27px; height: 27px; }
}