/* Shared design system for Instrumenta auth + user-management surfaces
   and the directory-listing chrome. Theme follows the device/OS color
   scheme only (prefers-color-scheme) - no manual toggle. */

:root {
    color-scheme: dark;
    --auth-bg: #0f172a;
    --auth-card: #111827;
    --auth-surface: #1a2035;
    --auth-border: #1f2937;
    --auth-accent: #3b82f6;
    --auth-accent-hover: #60a5fa;
    --auth-text: #e5e7eb;
    --auth-muted: #9ca3af;
    --auth-error: #ef4444;
    --auth-success: #22c55e;
    --auth-shadow: rgba(0, 0, 0, .4);
    --auth-input-bg: #020617;
    --auth-border-strong: #2d3651;
    --auth-hover-tint: rgba(255, 255, 255, 0.03);
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --auth-bg: #f1f5f9;
        --auth-card: #ffffff;
        --auth-surface: #f1f5f9;
        --auth-border: #e2e8f0;
        --auth-accent: #2563eb;
        --auth-accent-hover: #1d4ed8;
        --auth-text: #0f172a;
        --auth-muted: #64748b;
        --auth-error: #dc2626;
        --auth-success: #16a34a;
        --auth-shadow: rgba(15, 23, 42, .12);
        --auth-input-bg: #f8fafc;
        --auth-border-strong: #cbd5e1;
        --auth-hover-tint: rgba(15, 23, 42, 0.03);
    }
}

.auth-card,
.auth-modal,
.login-card {
    background: var(--auth-card);
    color: var(--auth-text);
    border-radius: 14px;
    box-shadow: 0 20px 40px var(--auth-shadow);
}

.auth-card *,
.auth-modal *,
.login-card * {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.auth-card h1, .auth-modal h1, .login-card h1 { margin: 0 0 4px; font-size: 1.5rem; }
.auth-modal h2 { margin: 0 0 14px; font-size: 1.25rem; }
.auth-modal h3 { margin: 22px 0 8px; font-size: 1rem; color: var(--auth-text); }

.auth-subtitle, .auth-modal .auth-hint-text {
    margin: 0 0 20px;
    color: var(--auth-muted);
    font-size: 0.9rem;
}

.auth-card label, .auth-modal label, .login-card label {
    font-size: 0.85rem;
    color: var(--auth-muted);
    display: block;
    margin-bottom: 6px;
}

.auth-card input, .auth-modal input, .auth-modal select, .login-card input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--auth-border);
    margin-bottom: 14px;
    font-size: 1rem;
    background: var(--auth-input-bg);
    color: var(--auth-text);
    outline: none;
}

.auth-card input:focus, .auth-modal input:focus, .auth-modal select:focus, .login-card input:focus {
    outline: 2px solid var(--auth-accent);
}

.auth-btn {
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
}

.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-btn-primary, .auth-card button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: var(--auth-accent);
    color: white;
}
.auth-btn-primary:hover, .auth-card button[type="submit"]:hover { background: var(--auth-accent-hover); }

.auth-btn-secondary {
    background: var(--auth-surface);
    color: var(--auth-text);
    border: 1px solid var(--auth-border-strong);
}
.auth-btn-secondary:hover { background: var(--auth-border); }

.auth-btn-danger {
    background: transparent;
    color: var(--auth-error);
    border: 1px solid var(--auth-error);
}
.auth-btn-danger:hover { background: rgba(239, 68, 68, 0.12); }

.auth-btn-sm { padding: 5px 10px; font-size: 0.78rem; border-radius: 6px; }

.auth-error, .auth-success,
.auth-modal .error, .auth-modal .success {
    font-size: 0.85rem;
    margin-top: 10px;
    display: none;
}
.auth-error, .auth-modal .error { color: var(--auth-error); }
.auth-success, .auth-modal .success { color: var(--auth-success); }

.auth-toggle-link {
    text-align: center;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--auth-accent);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    width: 100%;
    display: block;
}
.auth-toggle-link:hover { color: var(--auth-accent-hover); }

.auth-hint {
    font-size: 0.75rem;
    color: var(--auth-muted);
    margin-top: -10px;
    margin-bottom: 14px;
}

.auth-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.auth-badge-admin { background: rgba(59, 130, 246, 0.18); color: var(--auth-accent-hover); }
.auth-badge-user { background: rgba(148, 163, 184, 0.18); color: var(--auth-muted); }
.auth-badge-verified { background: rgba(34, 197, 94, 0.18); color: var(--auth-success); }
.auth-badge-unverified { background: rgba(239, 68, 68, 0.18); color: var(--auth-error); }

.auth-table-wrap { overflow-x: auto; }
table.auth-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.auth-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--auth-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--auth-border);
}
table.auth-table td {
    padding: 10px;
    border-bottom: 1px solid var(--auth-border);
    vertical-align: middle;
}
table.auth-table tr:last-child td { border-bottom: none; }
.auth-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.auth-empty-note { color: var(--auth-muted); font-size: 0.8rem; padding: 10px 0; }

.auth-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--auth-border);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}
.auth-checkbox-list label {
    display: block;
    margin-bottom: 6px;
    color: var(--auth-text);
    font-size: 0.85rem;
}
.auth-checkbox-list label input { width: auto; margin: 0 6px 0 0; }

.auth-token-item {
    font-size: 0.8rem;
    margin-bottom: 6px;
    padding: 8px 10px;
    background: var(--auth-surface);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.auth-token-item code { font-size: 0.75rem; color: var(--auth-muted); }
.auth-token-status-active { color: var(--auth-success); }
.auth-token-status-used { color: var(--auth-error); }

.auth-actions-row {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.auth-inline-label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--auth-text); font-size: 0.9rem; }
.auth-inline-label input { width: auto; margin: 0; }

/* Shared brand lockup: logo + "Instrumenta.cc" wordmark, used as a home link
   in headers/mastheads (index page, mobile login card). The `a.` prefix and
   explicit :visited/:hover rules exist to out-specificity index.css's
   ".root a" link styling (blue + underline) that would otherwise bleed in. */
a.auth-brand, a.auth-brand:visited, a.auth-brand:hover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--auth-text);
}
.auth-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: block;
}
.auth-brand-text {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.auth-brand:hover .auth-brand-text { color: var(--auth-accent); }