/* stage-73-empty-secondary-states-polish: calm Warm Glass OS empty states, skeletons, and secondary placeholders. */

:root {
  --focus-empty-min-height: 84px;
  --focus-empty-radius: 22px;
  --focus-empty-border: 1px solid color-mix(in srgb, var(--primary, #5678f5) 13%, var(--focus-border-glass, rgba(255,255,255,.22)));
  --focus-empty-bg:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary, #5678f5) 8%, transparent), transparent 8.5rem),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 7%, transparent), transparent 9rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 42%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 74%, transparent));
  --focus-empty-icon-size: 18px;
  --focus-empty-icon-shell: 34px;
  --focus-empty-icon: var(--icon-note);
  --focus-empty-text: color-mix(in srgb, var(--text-primary, #2f2a26) 74%, var(--text-secondary, #6f655e) 26%);
  --focus-skeleton-bg:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 42%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 82%, transparent));
  --focus-skeleton-shimmer:
    linear-gradient(100deg, transparent 0%, color-mix(in srgb, #fff 34%, transparent) 42%, transparent 72%);
}

.empty-state {
  position: relative !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0.58rem !important;
  min-height: var(--focus-empty-min-height) !important;
  margin: 0 !important;
  border: var(--focus-empty-border) !important;
  border-radius: var(--focus-empty-radius) !important;
  background: var(--focus-empty-bg) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 18px 42px color-mix(in srgb, var(--primary, #5678f5) 7%, transparent) !important;
  color: var(--focus-empty-text) !important;
  font-size: 0.9rem !important;
  font-weight: 620 !important;
  line-height: 1.42 !important;
  overflow: hidden !important;
  padding: 1rem 1.1rem !important;
  text-align: center !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.empty-state::before {
  display: inline-grid !important;
  width: var(--focus-empty-icon-size) !important;
  min-width: var(--focus-empty-icon-size) !important;
  height: var(--focus-empty-icon-size) !important;
  min-height: var(--focus-empty-icon-size) !important;
  background: color-mix(in srgb, var(--primary, #5678f5) 60%, var(--text-muted, #9c9187) 40%) !important;
  content: "" !important;
  -webkit-mask: var(--focus-empty-icon, var(--icon-note)) center / contain no-repeat !important;
  mask: var(--focus-empty-icon, var(--icon-note)) center / contain no-repeat !important;
}

.focus-summary-empty {
  --focus-empty-icon: var(--icon-calendar);
}

.focus-task-empty {
  --focus-empty-icon: var(--focus-icon-check-balanced, var(--icon-note));
}

.schedule-empty {
  --focus-empty-icon: var(--icon-calendar);
  display: grid !important;
  place-items: center !important;
  min-height: calc(var(--focus-empty-min-height) + 22px) !important;
  padding: 1.18rem !important;
}

.focus-note-empty {
  --focus-empty-icon: var(--icon-note);
}

.focus-diary-empty {
  --focus-empty-icon: var(--icon-diary, var(--icon-note));
}

:where(.focus-summary-empty, .focus-task-empty) {
  min-height: var(--focus-empty-min-height) !important;
}

.dashboard-rail :where(.focus-summary-empty, .focus-task-empty) {
  min-height: var(--focus-empty-min-height) !important;
  border-radius: 20px !important;
  padding-block: 0.88rem !important;
}

.focus-tasks-card .focus-task-empty {
  min-height: calc(var(--focus-empty-min-height) + 2px) !important;
}

.day-card-modal .empty-state {
  --focus-empty-icon: var(--icon-calendar);
  min-height: 104px !important;
  border-radius: 24px !important;
}

.week-items .empty-state {
  --focus-empty-icon: var(--icon-calendar);
  min-height: 72px !important;
  border-radius: 18px !important;
  font-size: 0.82rem !important;
}

.wizard-step-body .empty-state,
.modal-fields .empty-state,
.records-list .empty-state,
.schedule-list .empty-state {
  min-height: 96px !important;
  border-radius: 22px !important;
  padding: 1.05rem !important;
}

.skeleton-card {
  position: relative !important;
  display: grid !important;
  gap: 0.68rem !important;
  min-height: 84px !important;
  border: var(--focus-empty-border) !important;
  border-radius: var(--focus-empty-radius) !important;
  background: var(--focus-skeleton-bg) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 16px 36px color-mix(in srgb, var(--primary, #5678f5) 5%, transparent) !important;
  overflow: hidden !important;
  padding: 1rem !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.skeleton-card::before {
  position: absolute !important;
  inset: 0 !important;
  background: var(--focus-skeleton-shimmer) !important;
  content: "" !important;
  transform: translateX(-110%) !important;
  animation: focus-skeleton-sheen 1.8s cubic-bezier(.2,.8,.2,1) infinite !important;
}

.skeleton-card span {
  display: block !important;
  width: min(72%, 18rem) !important;
  height: 0.78rem !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--text-muted, #9c9187) 13%, transparent) !important;
}

.skeleton-card span:last-child {
  width: min(46%, 12rem) !important;
}

.skeleton-card.list {
  min-height: 66px !important;
  border-radius: 18px !important;
}

@keyframes focus-skeleton-sheen {
  to {
    transform: translateX(110%);
  }
}

:root[data-theme="dark"] {
  --focus-empty-bg:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary, #6f8cff) 14%, transparent), transparent 8.5rem),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 8%, transparent), transparent 9rem),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  --focus-skeleton-bg:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  --focus-empty-text: color-mix(in srgb, var(--text-primary, #f2f1ee) 82%, var(--text-secondary, #b7bcc9) 18%);
}

@media (max-width: 760px) {
  :root {
    --focus-empty-min-height: 72px;
    --focus-empty-radius: 20px;
    --focus-empty-icon-size: 16px;
  }

  .empty-state {
    font-size: 0.84rem !important;
    padding: 0.9rem !important;
  }

  .schedule-empty,
  .day-card-modal .empty-state {
    min-height: 88px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card::before {
    animation: none !important;
    transform: none !important;
    opacity: 0.36 !important;
  }
}