/* ══════════════════════════════════════════════════════════
   dr.ps — Shared UI components
   ─────────────────────────────
   Built on the tokens in design-tokens.css. Purely additive:
   these classes are new and safe to use anywhere — nothing
   existing is overridden by loading this file.
══════════════════════════════════════════════════════════ */

/* ─────────────── Buttons ─────────────── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-fs-base);
    font-weight: var(--ds-fw-bold);
    line-height: 1;
    padding: var(--ds-space-3) var(--ds-space-5);
    border-radius: var(--ds-r-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background var(--ds-t-fast), border-color var(--ds-t-fast), filter var(--ds-t-fast);
    text-decoration: none;
    white-space: nowrap;
}
.ds-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

.ds-btn-primary   { background: var(--ds-accent); color: #fff; }
.ds-btn-primary:hover   { background: var(--ds-accent-d); color: #fff; }
.ds-btn-secondary { background: transparent; color: var(--ds-accent); border-color: var(--ds-accent); }
.ds-btn-secondary:hover { background: var(--ds-accent-l); }
.ds-btn-ghost     { background: transparent; color: var(--ds-ink-2); }
.ds-btn-ghost:hover      { background: var(--ds-border); }
.ds-btn-danger    { background: transparent; color: var(--ds-danger); border-color: var(--ds-danger-bd); }
.ds-btn-danger:hover     { background: var(--ds-danger-bg); }

.ds-btn:disabled, .ds-btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.ds-btn.is-loading { position: relative; color: transparent !important; }
.ds-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.5);
    border-top-color: #fff;
    animation: ds-spin .7s linear infinite;
}
.ds-btn-secondary.is-loading::after, .ds-btn-ghost.is-loading::after {
    border-color: rgba(29,78,216,.25);
    border-top-color: var(--ds-accent);
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ds-btn.is-loading::after { animation-duration: 1.4s; }
}

.ds-btn-sm { padding: var(--ds-space-2) var(--ds-space-4); font-size: var(--ds-fs-sm); }
.ds-btn-lg { padding: var(--ds-space-4) var(--ds-space-6); font-size: var(--ds-fs-md); }

/* ─────────────── Status pill (signature element) ───────────────
   One consistent shape for "status" everywhere it appears:
   reservation state, payment state, radiology queue, nuclear-
   medicine case state. Icon + dot + label — never color alone. */
.ds-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-bold);
    padding: 4px var(--ds-space-3);
    border-radius: var(--ds-r-pill);
    border: 1px solid;
    line-height: 1.4;
    white-space: nowrap;
}
.ds-status-pill .ds-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.ds-status-pending   { background: var(--ds-warning-bg); color: var(--ds-warning); border-color: var(--ds-warning-bd); }
.ds-status-confirmed { background: var(--ds-success-bg); color: var(--ds-success); border-color: var(--ds-success-bd); }
.ds-status-cancelled { background: var(--ds-danger-bg);  color: var(--ds-danger);  border-color: var(--ds-danger-bd); }
.ds-status-progress  { background: var(--ds-accent-l);   color: var(--ds-accent-d); border-color: var(--ds-accent); }
.ds-status-neutral   { background: var(--ds-bg);         color: var(--ds-ink-2);   border-color: var(--ds-border); }

/* ─────────────── Card ─────────────── */
.ds-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-sh-sm);
    padding: var(--ds-space-6);
}
.ds-card-hoverable { transition: box-shadow var(--ds-t-fast), transform var(--ds-t-fast); }
.ds-card-hoverable:hover { box-shadow: var(--ds-sh-md); }

/* ─────────────── Input ─────────────── */
.ds-input {
    display: block;
    width: 100%;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-fs-base);
    color: var(--ds-ink);
    background: var(--ds-surface);
    border: 1.5px solid var(--ds-border);
    border-radius: var(--ds-r-sm);
    padding: var(--ds-space-3) var(--ds-space-4);
    min-height: 44px; /* touch target */
    transition: border-color var(--ds-t-fast), box-shadow var(--ds-t-fast);
}
.ds-input:focus {
    outline: none;
    border-color: var(--ds-accent);
    box-shadow: var(--ds-sh-focus);
}
.ds-input.is-invalid { border-color: var(--ds-danger); }
.ds-input-error { font-size: var(--ds-fs-sm); color: var(--ds-danger); margin-top: var(--ds-space-1); }

/* ─────────────── Toast ─────────────── */
.ds-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-3);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-fs-base);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-inline-start: 4px solid var(--ds-accent);
    border-radius: var(--ds-r-md);
    box-shadow: var(--ds-sh-lg);
    padding: var(--ds-space-4) var(--ds-space-5);
}
.ds-toast-success { border-inline-start-color: var(--ds-success); }
.ds-toast-danger  { border-inline-start-color: var(--ds-danger); }
.ds-toast-warning { border-inline-start-color: var(--ds-warning); }

/* ─────────────── Empty state ─────────────── */
.ds-empty {
    text-align: center;
    padding: var(--ds-space-12) var(--ds-space-6);
    color: var(--ds-ink-2);
}
.ds-empty .ds-empty-icon { font-size: 32px; color: var(--ds-border); margin-bottom: var(--ds-space-4); }
.ds-empty .ds-empty-title { font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); color: var(--ds-ink); margin-bottom: var(--ds-space-2); }
.ds-empty .ds-empty-text { font-size: var(--ds-fs-sm); max-width: 42ch; margin: 0 auto var(--ds-space-5); }

/* ─────────────── Skeleton loader ─────────────── */
.ds-skeleton {
    background: linear-gradient(90deg, var(--ds-border) 25%, var(--ds-bg) 37%, var(--ds-border) 63%);
    background-size: 400% 100%;
    animation: ds-shimmer 1.4s ease infinite;
    border-radius: var(--ds-r-xs);
}
@keyframes ds-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-skeleton { animation: none; background: var(--ds-border); }
}