/* Recurring household bills: drawer "Recurring bill" block, fixed-costs rules list, ledger Fixed tag. Owner: recurring-bills workers. */

/* ---------- drawer: #bill-block (same box in every state: fixed-height lines, reserved error, hidden button keeps its box) ---------- */
.sheet .bill-block { border: 0; border-top: 1px solid var(--ink); margin: 22px 0 18px; padding: 12px 0 0; min-width: 0; }
.sheet .bill-legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font: 500 var(--t-xs)/16px var(--f-mono); color: var(--ink); }
.sheet .bill-state {
  clear: both; height: 32px; margin: 0 0 6px; font: 400 var(--t-xs)/16px var(--f-mono); color: var(--grey-t);
  overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.sheet .bill-modes { display: grid; border-top: 1px solid var(--hair); }
.sheet .bill-mode, .sheet .bill-merchant { display: flex; align-items: center; gap: 10px; font: 400 var(--t-sm)/16px var(--f-display); color: var(--ink); cursor: pointer; min-width: 0; }
.sheet .bill-mode { height: 36px; border-bottom: 1px solid var(--hair); }
.sheet .bill-merchant { height: 48px; border-bottom: 1px solid var(--hair); }
.sheet .bill-merchant span { overflow: hidden; overflow-wrap: anywhere; max-height: 32px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sheet .bill-mode input, .sheet .bill-merchant input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; cursor: inherit; }
.sheet .bill-mode input:focus-visible, .sheet .bill-merchant input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sheet .bill-block.off .bill-mode, .sheet .bill-block.off .bill-merchant,
.sheet .bill-merchant:has(input:disabled) { color: var(--grey-t); cursor: default; }
.sheet .bill-actions { display: flex; align-items: center; gap: 20px; height: 40px; margin-top: 12px; }
.sheet .bill-apply { width: 104px; padding: 0; flex: none; }
.sheet .bill-block[aria-busy="true"] .bill-apply { cursor: progress; }
.sheet #bill-original[hidden] { display: inline-block; visibility: hidden; }
.sheet .bill-error { height: 32px; margin: 8px 0 0; font: 400 var(--t-xs)/16px var(--f-mono); color: var(--red-t); overflow-y: auto; overflow-wrap: anywhere; }

/* ---------- Fixed costs dialog: "Rules for individual bills" ---------- */
#modal-content .fixed-rules { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--ink); }
#modal-content .fixed-rules h3 { margin: 0; font: 600 var(--t-md)/20px var(--f-display); }
#modal-content .fixed-rules .form-note { line-height: 1.5; }
/* fixed height (5 rows of 40px): adding or removing rules scrolls inside, the dialog never grows */
#modal-content .fixed-rules-list {
  list-style: none; margin: 12px 0 0; padding: 0; height: 202px; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair);
}
#modal-content .fixed-rule, #modal-content .fixed-rule-add { display: grid; grid-template-columns: minmax(0, 1fr) 132px auto; gap: 14px; align-items: center; }
#modal-content .fixed-rule { height: 40px; border-bottom: 1px solid var(--hair); }
#modal-content .fixed-rule-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-sm) var(--f-display); }
#modal-content .fixed-rules select { height: 32px; margin: 0; padding: 0 2px; font: 400 var(--t-xs) var(--f-mono); }
#modal-content .fixed-rules-empty { height: 40px; line-height: 40px; font: 400 var(--t-xs)/40px var(--f-mono); color: var(--grey-t); }
#modal-content .fixed-rule-add { margin-top: 14px; align-items: end; }
#modal-content .fixed-rule-add label { margin: 0; min-width: 0; }
#modal-content .fixed-rule-add .btn-line { height: 32px; }
#modal-content .fixed-rules-error { height: 32px; margin: 6px 0 0; font: 400 var(--t-xs)/16px var(--f-mono); color: var(--red-t); overflow-y: auto; overflow-wrap: anywhere; }
#modal-content .fixed-rules-tx { display: flex; justify-content: space-between; align-items: center; gap: 14px; height: 40px; border-top: 1px solid var(--hair); font: 400 var(--t-xs)/16px var(--f-mono); color: var(--grey-t); }
#modal-content .fixed-rules-tx .btn-line { flex: none; }
@media (max-width: 560px) {
  #modal-content .fixed-rule, #modal-content .fixed-rule-add { grid-template-columns: minmax(0, 1fr) 128px auto; gap: 8px; }
}