/**
 * client/packages/components/states.css
 * ---------------------------------------
 * Kang (Nature Basket) — the standard states catalog (UI/UX §0.4).
 * Pairs with states.js (KangStates.*). Requires theme.css loaded first.
 *
 * Every later phase's listing/detail/form page renders these instead of
 * inventing its own empty/loading/error markup.
 */

/* ---------------------------------------------------------------------
 * Empty / No-results / Permission-denied — shared centered-panel shell
 * ------------------------------------------------------------------- */
.kang-state-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-5);
  gap: var(--space-3);
  background: var(--paper-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin: var(--space-4) 0;
}

.kang-state-icon {
  font-size: 48px;
  color: var(--basket-orange);
  opacity: 0.85;
}
.kang-state-panel--denied .kang-state-icon {
  color: var(--charcoal-ink-muted); /* calm, non-alarming — never rust */
}

.kang-state-message {
  font-size: var(--text-md);
  color: var(--charcoal-ink);
  max-width: 42ch;
}

.kang-state-cta {
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------
 * Loading — skeletons (matching real layout shape), not generic spinners
 * ------------------------------------------------------------------- */
@keyframes kang-skeleton-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.kang-skeleton {
  background: linear-gradient(90deg, var(--border-subtle) 25%, #F5E9DC 37%, var(--border-subtle) 63%);
  background-size: 400px 100%;
  animation: kang-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.kang-skeleton-row {
  height: 56px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.kang-skeleton-card {
  height: 140px;
  border-radius: var(--radius-lg);
}

.kang-skeleton-text {
  height: 14px;
  width: 60%;
  margin-bottom: var(--space-2);
}

/* Inline sub-second loading — button spinner replacing its label */
.kang-btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: var(--radius-circle);
  animation: kang-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes kang-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
 * Error — inline banner, rust-red left accent bar
 * ------------------------------------------------------------------- */
.kang-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--rust-alert);
  background: var(--rust-alert-tint);
  color: var(--charcoal-ink);
}
.kang-banner--warning { border-left-color: var(--amber-caution); background: var(--amber-caution-tint); }
.kang-banner--info    { border-left-color: var(--basket-orange); background: var(--basket-orange-tint); }
.kang-banner--success { border-left-color: var(--leaf-green); background: var(--leaf-green-tint); }

.kang-banner-icon { font-size: 18px; color: var(--rust-alert); flex-shrink: 0; }
.kang-banner--warning .kang-banner-icon { color: var(--amber-caution); }
.kang-banner--info .kang-banner-icon    { color: var(--basket-orange-deep); }
.kang-banner--success .kang-banner-icon { color: var(--leaf-green); }

.kang-banner-text { flex: 1; font-size: var(--text-sm); }

.kang-banner-retry {
  border: none;
  background: var(--paper-white);
  color: var(--rust-alert);
  font-weight: var(--font-weight-label);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------
 * No internet — persistent top banner, non-blocking
 * ------------------------------------------------------------------- */
.kang-offline-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--charcoal-ink);
  color: var(--husk-cream);
  font-size: var(--text-sm);
  text-align: center;
}

/* ---------------------------------------------------------------------
 * Slow network — subtle top progress bar, brand gradient
 * ------------------------------------------------------------------- */
.kang-progress-bar {
  position: sticky;
  top: 0;
  z-index: 41;
  height: 3px;
  width: 100%;
  overflow: hidden;
  background: transparent;
}
.kang-progress-bar-fill {
  height: 100%;
  width: 40%;
  background: var(--kang-gradient-hero);
  animation: kang-progress-slide 1.1s ease-in-out infinite;
}
@keyframes kang-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.kang-slow-note {
  font-size: var(--text-xs);
  color: var(--charcoal-ink-muted);
  text-align: center;
  padding: var(--space-1) 0;
}

/* ---------------------------------------------------------------------
 * Session expired — re-auth modal overlaying current screen
 * ------------------------------------------------------------------- */
.kang-modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.kang-modal {
  background: var(--paper-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-width: 420px;
  width: calc(100% - var(--space-6));
}
.kang-modal-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.kang-modal-body { color: var(--charcoal-ink-muted); margin-bottom: var(--space-5); }

/* ---------------------------------------------------------------------
 * In-app confirmation dialog (KangStates.confirm) — same scrim/modal
 * shell as the re-auth modal above, sized down and with a two-button
 * action row instead of a form.
 * ------------------------------------------------------------------- */
.kang-modal--confirm { max-width: 380px; }
.kang-modal--confirm .kang-modal-body { margin-bottom: var(--space-6); }
.kang-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}
.kang-modal-actions .kang-btn-primary,
.kang-modal-actions .kang-btn-secondary {
  min-width: 96px;
}
.kang-btn-primary--danger {
  background: var(--rust-alert);
  box-shadow: none;
}
.kang-btn-primary--danger:hover { background: var(--rust-alert); box-shadow: var(--shadow-md); }
.kang-btn-primary--danger:active { background: var(--rust-alert); }
.kang-modal--confirm .kang-field input {
  border-radius: var(--radius-sm);
}
.kang-modal--confirm .kang-field input.kang-field--invalid-input {
  border-color: var(--rust-alert);
}

/* ---------------------------------------------------------------------
 * Form validation — inline, per-field, on blur
 * ------------------------------------------------------------------- */
.kang-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); min-width: 0; }
.kang-field input,
.kang-field select,
.kang-field textarea {
  /* Without border-box, any field styled width:100% (e.g. .kang-catalog-search)
     added its border + padding ON TOP of that 100%, pushing the input past
     its .kang-card edge — the "kang-field extends beyond the card" bug. */
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--paper-white);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.kang-field input:focus,
.kang-field select:focus,
.kang-field textarea:focus {
  outline: none;
  border-color: var(--basket-orange);
  box-shadow: var(--shadow-focus-ring);
}
.kang-field--invalid input,
.kang-field--invalid select,
.kang-field--invalid textarea {
  border-color: var(--rust-alert);
}
.kang-field-message {
  font-size: var(--text-xs);
  color: var(--rust-alert);
}
.kang-field--valid input {
  border-color: var(--leaf-green);
}
.kang-field-check {
  color: var(--leaf-green);
  font-size: var(--text-sm);
}

/* Toast (submit success / transient notifications) */
.kang-toast-region {
  position: fixed;
  top: calc(var(--topbar-height, 56px) + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}
.kang-toast {
  background: var(--leaf-green);
  color: var(--paper-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-weight: var(--font-weight-label);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: kang-toast-in var(--duration-base) var(--ease-standard);
}
.kang-toast--error { background: var(--rust-alert); }
@keyframes kang-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  .kang-state-panel { padding: var(--space-8) var(--space-4); }
  .kang-state-icon { font-size: 40px; }
}