/**
 * Zapisy.pro – Wspólne komponenty frontendu publicznego.
 * Jedno źródło dla: enrollment, status, portal, shortcody.
 * Buduje na tokenach z zp-tokens.css. Koniec duplikacji i inline-style.
 * @package ZP_Pro
 */

/* ── Badge (semantyczne warianty, tokenizowane) ───────────────────────────── */
.zp-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--zp-r-pill, 99px);
    font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.zp-badge .zp-icon { margin: 0; }
.zp-badge--success, .zp-badge--green   { background: var(--zp-success-soft); color: var(--zp-green); }
.zp-badge--error,   .zp-badge--danger  { background: var(--zp-danger-soft);  color: var(--zp-red); }
.zp-badge--warning                     { background: var(--zp-warning-soft); color: var(--zp-yellow); }
.zp-badge--info                        { background: var(--zp-info-soft);    color: var(--zp-blue); }
.zp-badge--gray,    .zp-badge--neutral { background: var(--zp-gray-soft);    color: var(--zp-gray); }
.zp-badge--accent                      { background: var(--zp-accent-soft);  color: var(--zp-accent-ink); }

/* ── Karta uniwersalna ────────────────────────────────────────────────────── */
.zp-card {
    background: var(--zp-surface); border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius-lg); box-shadow: var(--zp-shadow-sm);
    padding: 18px 20px; margin-bottom: 16px;
}
.zp-card--hover { transition: box-shadow var(--zp-dur-base) var(--zp-ease), transform var(--zp-dur-base) var(--zp-ease); }
.zp-card--hover:hover { box-shadow: var(--zp-shadow-md); transform: translateY(-2px); }
.zp-card__title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--zp-primary);
    display: inline-flex; align-items: center; gap: 8px; }

/* ── Tabela label:value (dane) ────────────────────────────────────────────── */
.zp-data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.zp-data-table th, .zp-data-table td { text-align: left; vertical-align: top; padding: 10px 0; border-bottom: 1px solid var(--zp-border); }
.zp-data-table th { width: 38%; font-weight: 600; color: var(--zp-text-muted);
    display: inline-flex; align-items: center; gap: 7px; }
.zp-data-table td { color: var(--zp-text-main); }
.zp-data-table tr:last-child th, .zp-data-table tr:last-child td { border-bottom: none; }
@media (max-width: 480px) {
    .zp-data-table, .zp-data-table tbody, .zp-data-table tr, .zp-data-table th, .zp-data-table td { display: block; width: 100%; }
    .zp-data-table th { border: none; padding: 12px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
    .zp-data-table td { padding: 0 0 4px; }
}

/* ── Pasek postępu (z % i godzinami w środku) ─────────────────────────────── */
.zp-progress { margin-bottom: 14px; }
.zp-progress__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.zp-progress__head .zp-progress__label { font-weight: 600; color: var(--zp-text-2); display: inline-flex; align-items: center; gap: 7px; }
.zp-progress__head .zp-progress__val { color: var(--zp-text-muted); font-variant-numeric: tabular-nums; }
.zp-progress__track { position: relative; height: 22px; background: var(--zp-surface-2); border: 1px solid var(--zp-border); border-radius: var(--zp-r-pill, 99px); overflow: hidden; }
.zp-progress__fill { height: 100%; border-radius: var(--zp-r-pill, 99px); background: var(--zp-blue); transition: width var(--zp-dur-slow) var(--zp-ease); min-width: 2px; }
.zp-progress__fill--low { background: var(--zp-warning); }
.zp-progress__fill--full { background: var(--zp-success); }
.zp-progress__pct { position: absolute; top: 0; right: 10px; line-height: 22px; font-size: 11px; font-weight: 700; color: var(--zp-text-2); font-variant-numeric: tabular-nums; }

/* ── Stan pusty (z ikoną + CTA) ───────────────────────────────────────────── */
.zp-empty-state { text-align: center; padding: 44px 24px; color: var(--zp-text-muted); }
.zp-empty-state__icon { color: var(--zp-text-light, var(--zp-text-l)); margin-bottom: 14px; opacity: .9; }
.zp-empty-state__title { margin: 0 0 6px; font-size: 17px; color: var(--zp-primary); }
.zp-empty-state__msg { margin: 0 auto 18px; max-width: 420px; line-height: 1.55; }

/* ── Skeleton (wspólny shimmer) ───────────────────────────────────────────── */
.zp-skel { background: var(--zp-surface-2); border-radius: var(--zp-radius); overflow: hidden; position: relative; }
.zp-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: zp-skel-sweep 1.4s infinite; }
@keyframes zp-skel-sweep { 100% { transform: translateX(100%); } }

/* ── Press-scale na przyciskach (sygnatura) – respektuje reduced-motion ───── */
.zp-frontend-press:active:not(:disabled) { transform: scale(.985); }