/* ─────────────────────────────────────────────────────────────
 * components.css — Phase 65
 *
 * Reusable visual components built on the design tokens from
 * _vars.css. Touch-target safe; mobile-first; AJAX-friendly
 * (no hover-only affordances).
 * ─────────────────────────────────────────────────────────── */

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 18px;
    border-radius: var(--radius-1);
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.2;
    transition: background-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
    user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}
.btn-primary {
    background: var(--color-ok);
    color: #fff;
    box-shadow: var(--shadow-1);
}
.btn-primary:hover { background: #6fa844; }
.btn-secondary {
    background: var(--bg-card);
    color: var(--text-1);
    border: 1px solid var(--border-1);
}
.btn-secondary:hover { background: #f8fafc; }
.btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.btn-danger:hover { background: #d31313; }
.btn-ghost {
    background: transparent;
    color: var(--text-1);
}
.btn-ghost:hover { background: rgba(20, 30, 50, 0.05); }
.btn-sm { padding: 6px 12px; font-size: 0.8125rem; min-height: 36px; min-width: 36px; }

/* ── Inputs ──────────────────────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
}
.field-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-2);
}
.input, .select, .textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-1);
    background: var(--bg-card);
    color: var(--text-1);
    font-size: 0.9375rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    min-height: 44px;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--color-ok);
    box-shadow: 0 0 0 3px rgba(135, 194, 83, 0.15);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
}
.input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(251, 23, 23, 0.15);
}
.field-error {
    font-size: 0.8125rem;
    color: var(--color-danger);
    margin-top: 4px;
}
.textarea { min-height: 96px; resize: vertical; }

/* ── Card ────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    padding: var(--space-4);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-1);
}
.card-header h3 { margin: 0; }
.card-body {}
.card-footer {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-1);
}

/* ── Badge (status pill) — uses FROZEN status colors ────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.badge-success  { background: rgba(135, 194, 83, 0.15); color: #4f7e2d; }
.badge-warning  { background: rgba(251, 194, 23, 0.15); color: #8a6500; }
.badge-danger   { background: rgba(251, 23, 23, 0.12);  color: #b40d0d; }
.badge-disable  { background: rgba(180, 184, 192, 0.25); color: #5d6878; }
.badge-off      { background: rgba(33, 150, 243, 0.15); color: #1565c0; }

/* ── Table ──────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    background: var(--bg-card);
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.table thead th {
    text-align: left;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-1);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-2);
    white-space: nowrap;
}
.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-1);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fbfcfe; }

/* ── Modal ───────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 50, 0.5);
    display: grid;
    place-items: center;
    padding: var(--space-3);
    z-index: 100;
}
.modal {
    background: var(--bg-card);
    border-radius: var(--radius-2);
    box-shadow: 0 24px 60px rgba(20, 30, 50, 0.25);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 2 * var(--space-3));
    overflow-y: auto;
    padding: var(--space-4);
}
.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.modal-close {
    color: var(--text-2);
    padding: 4px 8px;
    min-height: 36px;
    min-width: 36px;
    border-radius: var(--radius-1);
}
.modal-close:hover { background: rgba(20, 30, 50, 0.05); }

/* ── Toast / inline alert ──────────────────────────────── */
.alert {
    display: flex;
    gap: var(--space-3);
    padding: 12px 16px;
    border-radius: var(--radius-1);
    border-left: 4px solid currentColor;
    font-size: 0.9375rem;
    margin-bottom: var(--space-3);
}
.alert-success { color: #4f7e2d; background: rgba(135, 194, 83, 0.10); }
.alert-warning { color: #8a6500; background: rgba(251, 194, 23, 0.10); }
.alert-danger  { color: #b40d0d; background: rgba(251, 23, 23, 0.08); }
.alert-info    { color: #1565c0; background: rgba(33, 150, 243, 0.10); }

/* ── Skeleton (loading state) ──────────────────────────── */
.skeleton {
    display: inline-block;
    background: linear-gradient(90deg,
        rgba(180, 184, 192, 0.15) 0%,
        rgba(180, 184, 192, 0.30) 50%,
        rgba(180, 184, 192, 0.15) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-1);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    height: 16px;
    width: 100%;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty state ───────────────────────────────────────── */
.empty {
    display: grid;
    place-items: center;
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--text-2);
}
.empty-title { font-size: 1.125rem; font-weight: 600; color: var(--text-1); margin-bottom: var(--space-2); }