/* Payment calendar: a calmer month overview with optional full detail. */
.debt-calendar-head {
 align-items:center !important;
}

.debt-calendar-density {
 flex:0 0 auto;
}

.debt-calendar-density button {
 min-width:174px;
 min-height:40px;
 padding:0 15px;
 border:1px solid var(--border);
 border-radius:9px;
 background:var(--bg-surface);
 color:var(--text-primary);
 font:inherit;
 font-size:12px;
 font-weight:700;
 cursor:pointer;
 box-shadow:0 1px 2px rgba(23, 23, 23,.05);
 transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}

.debt-calendar-density button:hover {
 border-color:var(--text-muted);
 background:var(--bg-surface-2);
 box-shadow:0 2px 5px rgba(23, 23, 23,.08);
}

.debt-calendar-density button:focus-visible {
 outline:2px solid var(--accent);
 outline-offset:2px;
}

.debt-calendar-day {
 position:relative;
 min-height:116px !important;
 gap:4px !important;
 padding:8px 9px !important;
}

.debt-calendar-day-head {
 display:flex;
 min-width:0;
 align-items:center;
 justify-content:space-between;
 gap:8px;
}

.debt-calendar-day-total {
 min-height:0 !important;
 overflow:hidden;
 color:var(--text-secondary) !important;
 font-size:11px !important;
 font-variant-numeric:tabular-nums;
 text-overflow:ellipsis;
 white-space:nowrap;
}

.debt-calendar-day-meta {
 display:none;
 min-height:16px;
 overflow:hidden;
 color:var(--text-muted);
 font-size:10px;
 font-weight:600;
 line-height:16px;
 text-overflow:ellipsis;
 white-space:nowrap;
}

.density-overview .debt-calendar-day-meta {
 display:block;
}

.debt-calendar-day.is-heavy:not(.is-muted) {
 background:linear-gradient(135deg,rgba(245,158,11,.075),var(--bg-surface) 48%) !important;
}

.debt-calendar-day.is-heavy:not(.is-muted) .debt-calendar-day-total {
 color:#b45309 !important;
}

.debt-calendar-day.has-overdue:not(.is-muted)::after {
 content:"";
 position:absolute;
 top:7px;
 right:7px;
 width:6px;
 height:6px;
 border-radius:999px;
 background:#dc2626;
 box-shadow:0 0 0 3px rgba(220,38,38,.10);
}

.debt-calendar-day.has-overdue:not(.is-muted) .debt-calendar-day-total {
 padding-right:12px;
}

.debt-calendar-events {
 gap:5px !important;
}

.debt-calendar-event {
 min-height:30px !important;
 padding:5px 8px !important;
 border-radius:7px !important;
 box-shadow:none !important;
 font-size:12px !important;
 line-height:1.3 !important;
}

.debt-calendar-event b,
.debt-calendar-event em {
 font-size:12px !important;
 line-height:1.3 !important;
}

.density-overview .debt-calendar-event.is-paid {
 opacity:.56;
}

.density-overview .debt-calendar-event:not(.is-paid) {
 box-shadow:0 1px 2px rgba(23, 23, 23,.07) !important;
}

.density-detailed .debt-calendar-day {
 min-height:146px !important;
}

.density-detailed .debt-calendar-event {
 min-height:26px !important;
 padding:4px 7px !important;
}

.debt-calendar-more {
 display:flex !important;
 width:100% !important;
 min-height:28px;
 align-items:center;
 justify-content:center;
 box-sizing:border-box;
 border-style:dashed !important;
 background:transparent !important;
 color:var(--text-muted) !important;
 font-size:10px !important;
 font-weight:700 !important;
}

.debt-calendar-more:hover {
 background:var(--bg-surface-2) !important;
 color:var(--text-primary) !important;
}

body.dark .debt-calendar-density button {
 border-color:#444444;
 background:#232323;
 color:#fafafa;
 box-shadow:0 1px 3px rgba(0,0,0,.20);
}

body.dark .debt-calendar-density button:hover {
 border-color:#727272;
 background:#303030;
}

body.dark .debt-calendar-day.is-heavy:not(.is-muted) {
 background:linear-gradient(135deg,rgba(245,158,11,.13),#1c1c1c 50%) !important;
}

body.dark .debt-calendar-day.is-heavy:not(.is-muted) .debt-calendar-day-total {
 color:#fbbf24 !important;
}

/* Day details use symmetric side tracks so the payment label is centered
   against the whole card, regardless of the amount width. */
.debt-day-payment-row {
 display:grid !important;
 grid-template-columns:minmax(72px,96px) minmax(0,1fr) minmax(72px,96px);
 align-items:center;
 column-gap:12px;
}

.debt-day-payment-row .debt-calendar-pay-state {
 justify-self:start;
}

.debt-day-payment-row .debt-day-payment-main {
 width:100%;
 align-items:center;
 text-align:center;
}

.debt-day-payment-row > strong {
 justify-self:end;
 text-align:right;
}

@media (max-width: 760px) {
 .debt-calendar-head {
  align-items:stretch !important;
 }

 .debt-calendar-density {
  width:100%;
 }

 .debt-calendar-density button {
  width:100%;
  height:44px;
 }

 .debt-calendar-event {
  min-height:36px !important;
 }

 .debt-day-payment-row {
  grid-template-columns:64px minmax(0,1fr) 64px;
  column-gap:8px;
 }
}