.monthly-control { grid-column: 1 / -1; min-width: 0; padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
.month-control-heading, .month-section-title, .month-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.month-control-heading { margin: 4px 0 16px; }
.month-control-heading h3 { font-size: 1.25rem; }
.month-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.month-flow { min-width: 0; border-top: 3px solid var(--teal); padding: 12px 0; }
.month-expense { border-color: var(--orange); }
.month-flow h4 { margin: 0 0 12px; font-size: 1rem; }
.month-flow dl { margin: 0; }
.month-flow dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 9px 0; }
.month-flow dt { color: var(--muted); font-size: .85rem; }
.month-flow dd { margin: 0; font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.month-flow .month-remaining { display: block; margin: 14px 0 6px; }
.month-remaining dd { margin-top: 4px; font-size: 1.35rem; }
.month-income .month-remaining dd { color: var(--teal-dark); }
.month-expense .month-remaining dd { color: #9a4500; }
.month-flow small { color: var(--muted); font-size: .8rem; }
.month-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.month-balances > div { display: grid; gap: 5px; min-width: 0; }
.month-balances span { font-size: .8rem; color: var(--muted); }
.month-balances strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.month-notices { display: grid; gap: 8px; margin: 12px 0; font-size: .85rem; }
.month-notices button { width: fit-content; background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; cursor: pointer; text-align: left; }
.month-warning { color: #9a4500; }
.month-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.month-toolbar label { display: grid; gap: 5px; min-width: 0; font-size: .8rem; color: var(--muted); }
.month-toolbar select, .month-toolbar input { width: 100%; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: white; padding: 8px; color: var(--ink); font-size: .85rem; }
.month-note { margin: 10px 0 18px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.month-section { margin-top: 20px; }
.month-section-title { padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.month-section-title h4 { margin: 0; font-size: 1rem; }
.month-section-title > span { color: var(--muted); font-size: .8rem; }
.month-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.month-item-heading { align-items: flex-start; }
.month-item-heading > strong { font-size: .9rem; overflow-wrap: anywhere; min-width: 0; }
.month-status { font-size: .73rem; font-weight: 650; color: #965000; flex-shrink: 0; padding: 3px 7px; border-radius: 4px; background: #fff3d7; }
.month-item-complete .month-status { color: var(--teal-dark); background: #e0f0ed; }
.month-item-unplanned .month-status { color: #a23131; background: #fff0ef; }
.month-item-meta { font-size: .77rem; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
.month-item-meta b { color: #a23131; font-weight: 600; }
.month-item-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.month-item-values dt { font-size: .73rem; color: var(--muted); margin-bottom: 5px; }
.month-item-values dd { margin: 0; font-size: .87rem; font-weight: 700; overflow-wrap: anywhere; }
.month-item-values > div:last-child dd { color: #965000; }
.month-item-complete .month-item-values > div:last-child dd { color: var(--teal-dark); }
.month-item-actions { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.month-item-actions details { flex: 1; min-width: 0; }
.month-item-actions details[open] { flex-basis: 100%; }
.month-item-actions summary { cursor: pointer; color: var(--blue); font-size: .82rem; padding: 10px 0; }
.month-item-actions button { min-height: 40px; font-size: .8rem; }
.month-excess { font-size: .8rem; margin: 8px 0; }
.month-transactions { list-style: none; margin: 0; padding: 0; }
.month-transactions li { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: .78rem; }
.month-transactions li > span { min-width: 0; overflow-wrap: anywhere; }
.month-transactions small { display: block; margin-top: 5px; color: var(--muted); }
.month-transactions strong { flex-shrink: 0; }
.month-empty { padding: 16px 0; color: var(--muted); font-size: .85rem; }
@media (max-width: 360px) {
  .month-flow-grid, .month-balances, .month-toolbar { gap: 10px; }
  .month-remaining dd { font-size: 1.15rem; }
  .month-item-values { gap: 5px; }
  .month-item-values dd { font-size: .78rem; }
  .month-status { max-width: 112px; text-align: center; }
}