/* Monthly budget overview, using the focused workspace design tokens. */
#budget-workspace{max-width:1240px;width:100%;margin:0 auto;padding:32px 40px 30px;box-sizing:border-box}
.ct-budget-controls{display:flex;align-items:flex-end;gap:20px}
.budget-filters{display:grid;grid-template-columns:minmax(250px,1.15fr) minmax(140px,.8fr) minmax(180px,1fr);gap:18px;flex:1;min-width:0}
.budget-filters>label,.ct-budget-period-label{display:grid;gap:8px;min-width:0;font-size:12px;color:var(--ct-muted)}
.budget-filters :is(input,select){width:100%;box-sizing:border-box;color:var(--ct-ink);font-size:13px}
.ct-budget-period-control{display:flex;align-items:stretch;border:1px solid var(--ct-line);border-radius:10px;background:white;overflow:hidden}
.ct-budget-period-control:focus-within{outline:3px solid var(--ct-green);outline-offset:3px}
.ct-budget-period-control #budget-period{border:0;min-width:0;border-radius:0;font-weight:650;padding:10px 12px;min-height:46px;outline:none}
.ct-budget-period-control input::-webkit-calendar-picker-indicator{margin:0 3px 0 12px;cursor:pointer}
.ct-budget-period-control button{display:grid;place-items:center;flex:0 0 40px;padding:0;border:0;border-radius:0;color:var(--ct-muted);background:white;min-height:46px}
.ct-budget-period-control button:hover:not(:disabled){background:var(--ct-soft);color:var(--ct-ink)}
.ct-budget-arrow{display:block;width:6px;height:6px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(135deg)}
#budget-next .ct-budget-arrow{transform:rotate(-45deg)}
.ct-budget-refresh{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:46px!important;padding:10px 13px;border:1px solid var(--ct-line);background:white;border-radius:9px;font-size:12px}
.ct-budget-refresh svg{width:15px;height:15px}
.budget-message{margin:14px 0 24px;font-size:11px;color:var(--ct-muted);line-height:1.6}
.budget-message:empty{display:none}
.budget-message[data-stale=true]{padding:13px 16px;background:#fff8e9;color:#805d23;border:1px solid #eddfbf;border-radius:9px;font-size:12px}
#budget-workspace .budget-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 28px}
#budget-workspace .budget-summary>div{min-width:0;padding:21px 20px;border:1px solid var(--ct-line);border-radius:12px;background:white;box-shadow:none;display:flex;flex-direction:column;align-items:flex-start}
.budget-summary>div>span:first-child{font-size:12px;font-weight:550;color:var(--ct-muted)}
#budget-workspace .budget-summary strong{display:block;font-size:clamp(22px,2.2vw,29px);font-weight:750;letter-spacing:-.8px;font-variant-numeric:tabular-nums;margin:9px 0 6px;line-height:1.2;overflow-wrap:anywhere}
#budget-workspace .budget-summary small{font-size:10px;line-height:1.6;color:var(--ct-muted)}
#budget-workspace .budget-summary .ux-budget-remaining{background:var(--ct-green-soft);border-color:#c5e3d4}
#budget-workspace .budget-summary .ux-budget-remaining strong{color:var(--ct-green)}
#budget-workspace .budget-summary .budget-over{background:#fff4f2;border-color:#f0d1cb}
#budget-workspace .budget-summary .budget-over strong,.budget-number.budget-over strong{color:#b33a2e}
.ct-budget-brands{border:1px solid var(--ct-line);border-radius:17px;background:white;overflow:hidden}
.ct-budget-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:27px 28px 18px}
.ct-budget-heading h2{font-size:21px;line-height:1.25;letter-spacing:-.6px;margin:0;font-weight:700}
.ct-budget-heading p{margin:7px 0 0;color:var(--ct-muted);font-size:12px}
.ct-budget-manage{display:inline-flex;align-items:center;justify-content:center;gap:13px;color:var(--ct-ink);background:white;border:1px solid var(--ct-line);border-radius:9px;min-height:42px;padding:9px 13px;box-sizing:border-box;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.ct-budget-manage:hover{background:var(--ct-soft)}
.budget-health{display:flex;align-items:center;gap:8px;margin:0;padding:0 28px 22px;color:var(--ct-green);font-size:11px;line-height:1.6}
.budget-health:empty{display:none}
.budget-health::before{content:"";display:block;flex:0 0 6px;height:6px;border-radius:50%;background:currentColor}
.budget-health[data-pending=true]{color:#89621e}
#budget-workspace .table-scroll{max-height:none;overflow:auto}
.budget-table{border-collapse:collapse;width:100%;min-width:920px;font-size:13px}
.budget-invoice-table{min-width:0;table-layout:fixed}
.budget-table thead th{background:#f8f9fa;color:var(--ct-muted);padding:14px 18px;font-size:11px;font-weight:600;text-align:right;line-height:1.5;border-block:1px solid var(--ct-line);white-space:normal}
.budget-invoice-table thead th:first-child{width:22%;text-align:left;padding-left:28px}
.budget-invoice-table thead th:last-child{width:120px;padding-right:28px}
.budget-table td,.budget-table tbody th{padding:22px 18px;border-top:1px solid var(--ct-line);vertical-align:middle;line-height:1.5}
.budget-table .budget-overview-row>th{font-size:13px;color:var(--ct-ink);font-weight:650;text-align:left;padding-left:28px;background:white;overflow-wrap:anywhere}
.budget-overview-row>th>strong{font-weight:650}
.budget-table .secondary{display:block;color:var(--ct-muted);font-size:11px;font-weight:400;margin-top:4px;line-height:1.6}
.budget-number{text-align:right;font-variant-numeric:tabular-nums}
.budget-number strong{font-weight:600;white-space:nowrap}
.budget-number.budget-remaining strong{font-weight:750;color:var(--ct-green)}
.budget-number.budget-over strong{color:#b33a2e}
.budget-unset{font-size:12px;color:#89621e;font-weight:600}
.budget-detail-action{text-align:right;padding-right:28px!important}
.budget-detail-action button{display:inline-flex;align-items:center;justify-content:flex-end;gap:12px;color:var(--ct-ink);background:white;border:0;font-size:12px;padding:9px 0 9px 8px;white-space:nowrap}
.budget-detail-action button:hover{color:var(--ct-green)}
.budget-detail-chevron{display:block;width:6px;height:6px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg);margin-right:3px;transition:transform .15s}
.budget-detail-action [aria-expanded=true] .budget-detail-chevron{transform:rotate(225deg)}
.budget-sync-badge{display:inline-flex;font-size:10px;font-weight:550;padding:3px 7px;border-radius:5px;margin-top:7px;background:var(--ct-green-soft);color:var(--ct-green)}
.budget-sync-badge.budget-pending{background:#fff6e5;color:#89621e}
.budget-sync-badge.budget-over{background:#fff1ed;color:#b33a2e}
.budget-detail-row>td{background:#fafbfb;padding:26px 28px!important}
.budget-detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.budget-detail-heading h3{font-size:15px;margin:0;font-weight:650}
.budget-detail-heading p{font-size:11px;color:var(--ct-muted);margin:5px 0 0;line-height:1.6}
.budget-detail-heading .budget-sync-badge{margin:0;flex:0 0 auto}
.budget-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:24px}
.budget-detail-grid>div{min-width:0}
.budget-detail-grid h4{font-weight:550;font-size:11px;color:var(--ct-muted);margin:0 0 7px}
.budget-detail-grid strong{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.4;letter-spacing:-.4px}
.budget-detail-grid .secondary{font-size:11px}
.ct-budget-carryover{border-top:1px solid var(--ct-line);padding-top:23px}
.ct-budget-carryover>h4,.ct-budget-allocations>summary{font-size:12px;font-weight:650;margin:0 0 16px;color:var(--ct-ink)}
.ct-budget-carryover .budget-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;margin-bottom:18px}
.ct-budget-detail-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid var(--ct-line);padding-top:18px}
.ct-budget-detail-footer p{font-size:11px;color:var(--ct-muted);margin:0;max-width:65%;line-height:1.7}
.ct-budget-detail-footer :is(button,a){display:inline-flex;gap:10px;align-items:center;min-height:40px;padding:9px 12px;border:1px solid var(--ct-line);border-radius:8px;font-size:12px;font-weight:600;background:white;color:var(--ct-ink);text-decoration:none;box-sizing:border-box}
.ct-budget-allocations{border-top:1px solid var(--ct-line);margin:0 0 22px;padding-top:18px}
.ct-budget-allocations>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:5px 0}
.ct-budget-allocations ul{padding:0!important;margin:12px 0 0;list-style:none;max-width:620px}
.ct-budget-allocations li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:11px 0;border-bottom:1px solid var(--ct-line);font-size:12px;margin:0!important}
.ct-budget-allocations li strong{font-size:13px;white-space:nowrap}
.ct-budget-carryover>button{margin-bottom:22px;font-size:12px;border-color:var(--ct-line);background:white}
.budget-empty{text-align:center;padding:45px 25px!important;color:var(--ct-muted);font-size:13px}
#budget-workspace .budget-guide{margin-top:20px;color:var(--ct-muted);font-size:12px}
#budget-workspace .budget-guide>summary{display:flex;align-items:center;gap:20px;width:fit-content;padding:8px 0;font-weight:550}
.budget-guide>div{max-width:800px;padding:8px 0 0;font-size:11px;line-height:1.8}
.budget-guide p{margin:0 0 8px}
#budget-workspace .ux-budget-tasks{margin:0 0 24px;border-radius:11px;box-shadow:none}
@media(max-width:1100px){
 .ct-budget-controls{gap:12px}.budget-filters{grid-template-columns:minmax(240px,1.15fr) minmax(110px,.7fr) minmax(140px,1fr);gap:12px}
 .ct-budget-refresh{font-size:0;gap:0;width:44px;justify-content:center;padding:10px}.ct-budget-refresh svg{width:17px;height:17px}
 .budget-table thead th,.budget-table td{padding-inline:12px}.budget-invoice-table thead th:first-child,.budget-table .budget-overview-row>th{padding-left:22px}.budget-invoice-table thead th:last-child,.budget-detail-action{padding-right:22px!important}
 #budget-workspace .budget-summary>div{padding:18px 16px}
}
@media(max-width:900px){
 .ct-budget-controls{align-items:stretch}.budget-filters{grid-template-columns:1fr 1fr;gap:16px}.ct-budget-period-label{grid-column:1/-1}.ct-budget-refresh{align-self:flex-end;width:46px}
 .ct-budget-period-control #budget-period{text-align:center}.ct-budget-period-control button{flex-basis:46px}
 #budget-workspace .budget-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .budget-invoice-table{table-layout:auto;min-width:650px}.budget-invoice-table thead th:first-child{width:auto}.budget-invoice-table thead th:last-child{width:auto}
}
@media(max-width:760px){
 #budget-workspace{padding:28px 24px 30px}.ct-budget-heading{padding:23px 22px 17px}.budget-health{padding-inline:22px}
 .budget-invoice-table,.budget-invoice-table tbody,.budget-invoice-table tr,.budget-invoice-table td,.budget-invoice-table th{display:block;min-width:0;width:100%;box-sizing:border-box}
 .budget-invoice-table thead{display:none}
 #budget-workspace .table-scroll{overflow:visible}
 .budget-invoice-table .budget-overview-row{padding:20px 22px;border-top:1px solid var(--ct-line)}
 .budget-table .budget-overview-row>th{border:0;background:none;padding:0 0 15px;font-size:14px}
 .budget-table .budget-overview-row>td{border:0;padding:7px 0!important;background:none}
 .budget-invoice-table .budget-number{display:flex;justify-content:space-between;gap:18px;text-align:right;align-items:baseline}
 .budget-number::before{content:attr(data-label);font-size:12px;color:var(--ct-muted);text-align:left;font-weight:400}
 .budget-number strong{font-size:14px}
 .budget-detail-action{text-align:left;padding:8px 0 0!important}
 .budget-detail-action button{width:100%;justify-content:space-between;padding:9px 0}
 .budget-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.budget-detail-grid strong{font-size:19px}
 .budget-detail-heading{gap:15px;flex-wrap:wrap}.budget-detail-row>td{padding:23px 22px!important}
 .ct-budget-detail-footer p{max-width:100%;flex-basis:100%}
 .ct-budget-detail-footer :is(a,button){width:100%;justify-content:center}
}
@media(max-width:600px){
 #budget-workspace{padding:24px 18px 30px}.ct-budget-controls{gap:10px}.budget-filters{gap:14px 12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .budget-filters :is(input,select){font-size:16px}.ct-budget-refresh{width:44px;min-width:44px;margin-bottom:1px}
 .ct-budget-period-control #budget-period{font-size:15px;padding-inline:8px}.ct-budget-period-control button{flex-basis:36px;min-height:46px!important}
 .ct-budget-period-control input::-webkit-calendar-picker-indicator{margin-left:6px}
 .budget-message{font-size:10px;margin-bottom:21px}
 #budget-workspace .budget-summary{gap:10px;margin-bottom:22px}#budget-workspace .budget-summary>div{padding:16px 13px}.budget-summary>div>span:first-child{font-size:11px}
 #budget-workspace .budget-summary strong{font-size:23px;margin-top:9px}#budget-workspace .budget-summary small{font-size:10px}
 .ct-budget-heading{align-items:flex-start;flex-wrap:wrap;gap:15px;padding:22px 20px 16px}.ct-budget-heading h2{font-size:20px}.ct-budget-heading p{font-size:11px}
 .ct-budget-manage{width:100%;min-height:44px;justify-content:space-between}.budget-health{padding:0 20px 18px}
 .budget-invoice-table .budget-overview-row{padding:20px}.budget-detail-row>td{padding:23px 20px!important}
 .budget-detail-grid,.ct-budget-carryover .budget-detail-grid{grid-template-columns:minmax(0,1fr)}
 .ct-budget-allocations li{gap:16px;font-size:11px}.ct-budget-allocations li span{min-width:0;overflow-wrap:anywhere}
}
/* Keep phone filter labels readable and the refresh action beside the month label. */
@media(max-width:600px){
 .ct-budget-controls{display:block;position:relative}
 .ct-budget-controls .ct-budget-refresh{position:absolute;right:0;top:-9px;width:34px;min-width:34px;min-height:34px!important;padding:8px;border:0;background:white}
 .ct-budget-period-label>label{padding-right:44px}
}
@media(max-width:360px){.budget-filters{grid-template-columns:minmax(0,1fr)}.ct-budget-period-label{grid-column:auto}}