/* metrics-admin.css — Admin metrics editor view
   Uses design token variables from variables.css */

/* ── View shell ──────────────────────────────────────────────────────────── */
.ma-view {
    padding: var(--space-6) var(--space-8);
    max-width: 960px;
}

.ma-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.ma-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.ma-title {
    font-size: var(--text-xl, 1.25rem);
    font-weight: var(--weight-bold);
    color: var(--fg-primary);
    margin: 0;
}

.ma-subheading {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    margin: 0 0 var(--space-6);
    line-height: 1.6;
}

/* ── State messages ──────────────────────────────────────────────────────── */
.ma-loading,
.ma-empty {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    padding: var(--space-6) 0;
}

.ma-error {
    font-size: var(--text-sm);
    color: var(--color-danger, #c0392b);
    padding: var(--space-4) 0;
}

/* ── Category sections ───────────────────────────────────────────────────── */
.ma-section {
    margin-bottom: var(--space-8);
}

.ma-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.ma-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--fg-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.ma-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.ma-th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid var(--border-default);
    white-space: nowrap;
}

.ma-td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle, #eef0f3);
    color: var(--fg-primary);
    vertical-align: middle;
}

.ma-td--center {
    text-align: center;
}

.ma-row--inactive td,
.ma-row--inactive .ma-td {
    opacity: 0.45;
}

/* ── Inline name editor ──────────────────────────────────────────────────── */
.ma-name-text {
    cursor: default;
}

.ma-name-input {
    width: 100%;
    font-size: var(--text-sm);
}

.ma-edit-hint {
    display: block;
    font-size: 0.65rem;
    color: var(--fg-tertiary, #aaa);
    margin-top: 2px;
}

/* ── Priority badge ──────────────────────────────────────────────────────── */
.ma-priority {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    border: 1px solid transparent;
}

.ma-priority--high {
    background: #fff0f0;
    color: #c0392b;
    border-color: #f5c0bb;
}

.ma-priority--medium {
    background: #fff7f0;
    color: #d35400;
    border-color: #f5d5b0;
}

.ma-priority--low {
    background: #f0fff4;
    color: #1a7a3a;
    border-color: #b0d8b8;
}

.ma-priority--none {
    background: var(--bg-subtle, #f5f6f8);
    color: var(--fg-muted, #888);
    border-color: var(--border-subtle, #eef0f3);
}

/* ── Active toggle ───────────────────────────────────────────────────────── */
.ma-toggle {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary-600, #4f46e5);
    cursor: pointer;
}

/* ── Add-metric modal ────────────────────────────────────────────────────── */
.ma-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: var(--space-4);
}

.ma-modal {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.ma-modal-title {
    font-size: var(--text-md, 1rem);
    font-weight: var(--weight-bold);
    color: var(--fg-primary);
    margin: 0 0 var(--space-5);
}

/* ── Form inside modal ───────────────────────────────────────────────────── */
.ma-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ma-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ma-form-label {
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    color: var(--fg-secondary);
}

.ma-form-error {
    font-size: 0.75rem;
    color: var(--color-danger, #c0392b);
    margin: 0;
}

.ma-options-wrap textarea {
    resize: vertical;
    min-height: 70px;
}

.ma-modal-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding-top: var(--space-2);
}

/* ── Badge (count pill) ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle, #f5f6f8);
    color: var(--fg-muted, #666);
    border: 1px solid var(--border-default);
    min-width: 20px;
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .ma-priority--high   { background: #3a0a0a; color: #f87171; border-color: #7f1d1d; }
    .ma-priority--medium { background: #2a1500; color: #fb923c; border-color: #7c2d12; }
    .ma-priority--low    { background: #0a2a10; color: #4ade80; border-color: #166534; }
}

:root[data-theme="dark"] .ma-priority--high   { background: #3a0a0a; color: #f87171; border-color: #7f1d1d; }
:root[data-theme="dark"] .ma-priority--medium { background: #2a1500; color: #fb923c; border-color: #7c2d12; }
:root[data-theme="dark"] .ma-priority--low    { background: #0a2a10; color: #4ade80; border-color: #166534; }

:root[data-theme="light"] .ma-priority--high   { background: #fff0f0; color: #c0392b; border-color: #f5c0bb; }
:root[data-theme="light"] .ma-priority--medium { background: #fff7f0; color: #d35400; border-color: #f5d5b0; }
:root[data-theme="light"] .ma-priority--low    { background: #f0fff4; color: #1a7a3a; border-color: #b0d8b8; }