/* ── Schedules footer: save bar, status states, skeleton loading
   Prefix: sched-
   Tokens: Academic Curator Design System (colors_and_type.css)
─────────────────────────────────────────────────────────── */

/* ── Footer (save bar) ───────────────────────────────────── */
.sched-footer {
  flex-shrink: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
  z-index: 10;
}

.sched-save-btn {
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg-on-primary);
  background: var(--color-primary-700);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: var(--transition-base);
  white-space: nowrap;
}

.sched-save-btn:hover {
  background: var(--color-primary-800);
}

.sched-save-btn:active {
  transform: scale(0.98);
}

.sched-save-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sched-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-danger-light);
  border: 1px solid #fca5a5;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-danger);
  font-weight: var(--weight-medium);
  flex: 1;
  animation: sched-slide-in 0.15s ease;
}

/* Prevent display:flex from overriding hidden attribute */
.sched-error[hidden] { display: none; }

.sched-success {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-success-light, #dcfce7);
  border: 1px solid #86efac;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-success, #16a34a);
  font-weight: var(--weight-medium);
  flex: 1;
  animation: sched-slide-in 0.15s ease;
}

.sched-success[hidden] { display: none; }

@keyframes sched-slide-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton loading states ─────────────────────────────── */
@keyframes sched-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.sched-skel-line {
  display: block;
  height: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-200) 50%,
    var(--color-neutral-100) 100%
  );
  background-size: 200% 100%;
  animation: sched-shimmer 1.4s ease-in-out infinite;
}

/* Neutral-toned day-group header shown during skeleton load.
   Intentionally uses neutral palette (not primary blue) so it reads
   as "placeholder", not real content. */
.sched-skel-day-header {
  background: var(--color-neutral-50);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-2) var(--space-3);
}

/* Mirrors .sched-row layout; grid columns come from the companion
   recurring-cols / makeup-cols class applied alongside it. */
.sched-skel-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  align-items: center;
}

.sched-skel-row:last-child {
  border-bottom: none;
}

/* ── Save button loading/saved states ────────────────────── */
@keyframes sched-spin {
  to { transform: rotate(360deg); }
}

.sched-save-btn--saving {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.75;
  cursor: not-allowed;
  pointer-events: none;
}

.sched-save-btn--saving::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--fg-on-primary);
  border-radius: 50%;
  animation: sched-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.sched-save-btn--saved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-success, #16a34a);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Responsive: footer full-width on mobile ─────────────── */
@media (max-width: 767px) {
  .sched-footer {
    padding: var(--space-3) var(--space-4);
  }

  .sched-save-btn {
    flex: 1;
    text-align: center;
    padding: var(--space-4);
    font-size: var(--text-body);
    min-height: 48px;
  }
}