/* ═══════════════════════════════════════════════════════════════
   RENEWALS — Timeline calendar with urgency coding
   ═══════════════════════════════════════════════════════════════ */

.urgency-expired   { --urg: var(--error);   --urg-bg: var(--error-muted); }
.urgency-this_week { --urg: var(--orange);  --urg-bg: var(--orange-muted); }
.urgency-this_month { --urg: var(--warning); --urg-bg: var(--warning-muted); }
.urgency-next_month { --urg: var(--success); --urg-bg: var(--success-muted); }
.urgency-later     { --urg: var(--info);    --urg-bg: var(--info-muted); }

.renewals-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.renewals-stat {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-4); text-align: center;
  cursor: pointer; transition: all var(--duration-normal);
  border-left: 3px solid var(--urg, var(--border-subtle));
}
.renewals-stat:hover, .renewals-stat.active {
  border-color: var(--urg, var(--border-default)); background: var(--urg-bg, var(--bg-hover));
  transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.renewals-stat .rs-count { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--urg, var(--text-primary)); }
.renewals-stat .rs-label { font-size: var(--text-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.renewals-stat .rs-premium { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }

.renewals-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.renewals-toolbar .btn-sm.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.renewals-search { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); min-width: 200px; }
.renewals-search:focus { border-color: var(--accent); }

.renewals-timeline { display: flex; flex-direction: column; gap: var(--space-5); }
.renewal-week { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.renewal-week-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--duration-fast);
}
.renewal-week-header:hover { background: var(--bg-hover); }
.renewal-week-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-2); }
.renewal-week-title .week-urgency-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.renewal-week-meta { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); }
.renewal-week-meta .wm-badge { padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.renewal-week-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-2); padding: var(--space-3); }
.renewal-week-body.collapsed { display: none; }

.renewal-card {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); cursor: pointer; transition: all var(--duration-fast);
  border-left: 3px solid var(--urg, var(--border-subtle));
}
.renewal-card:hover { border-color: var(--urg, var(--border-default)); background: var(--bg-hover); transform: translateY(-1px); }
.renewal-card-top { display: flex; justify-content: space-between; margin-bottom: var(--space-2); }
.renewal-card-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.renewal-card-days { font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 1px 7px; border-radius: var(--radius-full);
  color: var(--urg, var(--text-secondary)); background: var(--urg-bg, var(--bg-elevated)); }
.renewal-card-details { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.renewal-card-details span { display: inline-flex; align-items: center; gap: 3px; }
.renewal-card-premium { font-weight: var(--weight-semibold); color: var(--success); }
.renewal-card-expanded { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); display: none; }
.renewal-card.expanded .renewal-card-expanded { display: block; }
.renewal-card-row { display: flex; justify-content: space-between; padding: 3px 0; color: var(--text-secondary); }
.renewal-card-row strong { color: var(--text-primary); }
.renewal-card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.renewals-empty { padding: var(--space-10); text-align: center; color: var(--text-muted); }
.renewals-empty .empty-icon { font-size: 2.5rem; margin-bottom: var(--space-3); }

@media (max-width: 900px) { .renewals-summary { grid-template-columns: repeat(3, 1fr); } .renewal-week-body { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .renewals-summary { grid-template-columns: repeat(2, 1fr); } .renewals-toolbar { flex-direction: column; } }