/* =========================================================
   Routine Card
   ========================================================= */

.routine-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}

.routine-card{
  background:var(--bg-1);
  border:1px solid var(--border);
  border-left:4px solid var(--card-color, var(--accent-gold));
  border-radius:var(--radius-md);
  padding:16px;
  cursor:grab;
  box-shadow:var(--shadow-1);
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), opacity .2s;
  animation:cardIn .4s ease both;
  display:flex; flex-direction:column; gap:10px;
}
.routine-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.routine-card.dragging{ opacity:.4; }
.routine-card.drag-over{ border-top:2px dashed var(--accent-gold); }
.routine-card.archived{ opacity:.55; }

@keyframes cardIn{
  from{ opacity:0; transform:translateY(10px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.rc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.rc-icon{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--card-color, var(--accent-gold)) 18%, transparent);
  color:var(--card-color, var(--accent-gold));
  font-size:16px; flex-shrink:0;
}
.rc-title{ font-size:15px; font-weight:700; color:var(--text-1); line-height:1.3; }
.rc-time{ font-family:var(--font-mono); font-size:12px; color:var(--text-3); }

.rc-status{
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.rc-status.pending{ background:rgba(232,176,84,.14); color:var(--accent-gold); }
.rc-status.completed{ background:rgba(79,209,197,.14); color:var(--accent-teal); }
.rc-status.missed{ background:rgba(232,99,111,.14); color:var(--accent-rose); }

.rc-progress-bar{
  height:6px; border-radius:4px; background:var(--bg-3); overflow:hidden;
}
.rc-progress-fill{
  height:100%; border-radius:4px;
  background:var(--card-color, var(--accent-gold));
  transition:width .5s ease;
}

.rc-meta{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-3); }
.rc-streak{ display:flex; align-items:center; gap:5px; color:var(--accent-gold); font-weight:600; }

.rc-week{ display:flex; gap:4px; }
.rc-week span{
  width:8px; height:8px; border-radius:50%; background:var(--bg-3);
}
.rc-week span.ok{ background:var(--accent-teal); }
.rc-week span.miss{ background:var(--accent-rose); }

.rc-actions{ display:flex; gap:8px; margin-top:2px; }
.rc-actions button{
  flex:1; padding:7px; font-size:12px; font-weight:600;
  border-radius:8px; border:1px solid var(--border);
  background:var(--bg-2); color:var(--text-2); cursor:pointer;
  transition:all var(--transition-fast);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.rc-actions button:hover{ background:var(--bg-3); color:var(--text-1); }
.rc-actions .rc-start:hover{ color:var(--accent-teal); border-color:var(--accent-teal); }
.rc-actions .rc-edit:hover{ color:var(--accent-gold); border-color:var(--accent-gold); }
.rc-actions .rc-delete:hover{ color:var(--accent-rose); border-color:var(--accent-rose); }
.rc-actions .rc-more:hover{ color:var(--accent-violet); border-color:var(--accent-violet); }