.kpi-calendar { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
.kpi-calendar-header,
.kpi-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; }
.kpi-calendar-header-day { min-width: 0; text-align: center; color: #607286; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.kpi-calendar-day { box-sizing: border-box; width: 100%; min-width: 0; min-height: 72px; padding: 8px; border: 1px solid #d7e1ec; border-radius: 14px; background: #fcfdff; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 6px; overflow: visible; text-align: left; color: #0f172a; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.kpi-calendar-day:not(:disabled):hover { border-color: #c1cedd; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08); }
.kpi-calendar-day:focus-visible { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14); }
.kpi-calendar-day:disabled { cursor: default; }
.kpi-calendar-day:active { border-color: #aabacc; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1); }
.kpi-calendar-day--empty { background: #fbfdff; }
.kpi-calendar-day--zero { background: #fff7f2; border-color: #ead6c7; }
.kpi-calendar-day--partial { background: #fffaf0; border-color: #e9dcc0; }
.kpi-calendar-day--full { background: #f5fbf7; border-color: #d1e5d8; }
.kpi-calendar-day--weekend { background: #f6f8fb; border-color: #dde4ee; }
.kpi-calendar-day--outside { background: #f8fafc; border-color: #e2e8f0; color: #97a3b5; opacity: 1; }
.kpi-calendar-day--today { border-color: #8cb6ea; box-shadow: inset 0 0 0 1px #5c88d6; }
.kpi-calendar-day-number,
.kpi-calendar-day-hours,
.kpi-calendar-day-amount { display: block; max-width: 100%; line-height: 1.15; overflow: visible; white-space: normal; }
.kpi-calendar-day-number { color: #0f172a; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.kpi-calendar-day-hours { color: #334155; font-size: 12px; font-weight: 600; }
.kpi-calendar-day-amount { color: #6b7b8d; font-size: 10px; }
.kpi-calendar-day--outside .kpi-calendar-day-number { color: #97a3b5; }
.kpi-calendar-day--outside .kpi-calendar-day-hours,
.kpi-calendar-day--outside .kpi-calendar-day-amount { color: #aab4c2; }
.kpi-calendar-day--weekend .kpi-calendar-day-amount { color: #7b8794; }
@media (min-width: 721px) {
  .kpi-calendar-header,
  .kpi-calendar-grid { gap: 8px; }
  .kpi-calendar-day { min-height: 84px; padding: 8px; }
  .kpi-calendar-day-number { font-size: 18px; }
}