/**
 * Portal Component Overrides
 * Extracted from inline styles for CSP compliance and maintainability.
 * Used by: api-tokens, asset-management, login, signup, dashboard,
 *          upgrade-plan, executive-dashboard, plan-usage, pricing,
 *          scans, users, vulnerabilities, role-permissions
 */

/* ── Spacing utilities ────────────────────────────────────────────── */
.m-0 { margin: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.ml-6 { margin-left: 6px; }
.my-section { margin: 15px 0 10px; }


/* ── Layout utilities ─────────────────────────────────────────────── */
.flex-row { display: flex; align-items: center; gap: 10px; }
.flex-row-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flex-row-sm { display: flex; gap: 6px; }
.ml-auto { margin-left: auto; }
.text-center { text-align: center; }
.pos-relative { position: relative; }

/* ── Code / Pre blocks ────────────────────────────────────────────── */
.code-block {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
}

/* ── Token display ────────────────────────────────────────────────── */
.token-display {
    margin-top: 10px;
    padding: 10px;
    background: #2d2d2d;
    border-radius: 4px;
    font-family: monospace;
    color: #f8f8f2;
    word-break: break-all;
}

.token-hint {
    margin-top: 10px;
    font-size: 12px;
}

/* ── Empty state ──────────────────────────────────────────────────── */
.empty-state-cell {
    text-align: center;
    padding: 40px;
}

.empty-state-icon {
    font-size: 48px;
    color: #bdc3c7;
    margin-bottom: 15px;
}

/* ── API Docs section ─────────────────────────────────────────────── */
.api-docs-section {
    margin-bottom: 20px;
    padding: 20px;
}

.api-docs-table {
    font-size: 12px;
}

/* ── Status indicator icons ───────────────────────────────────────── */
.status-icon-active { color: #2ecc71; }
.status-icon-inactive { color: #95a5a6; }

/* ── Password toggle button ───────────────────────────────────────── */
.btn-toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: #7f8c8d;
}

.input-password-toggle {
    padding-right: 40px;
}

/* ── Hidden by default (JS toggle) ────────────────────────────────── */
.hidden-message {
    display: none;
}

/* ── Plan card highlights ─────────────────────────────────────────── */
.plan-highlight {
    border: 2px solid var(--accent-primary, #3498db);
    transform: scale(1.02);
}

.plan-badge-popular {
    position: absolute;
    top: -12px;
    right: 20px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* ── Inline form display (action buttons in table cells) ──────────── */
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* ── Popup content widths ─────────────────────────────────────────── */
.popup-narrow { max-width: 500px; }
.popup-medium { max-width: 550px; }

/* ── Cursor pointer (clickable elements without href) ─────────────── */
.cursor-pointer { cursor: pointer; }

/* ── Admin error message ──────────────────────────────────────────── */
.admin-error-msg {
    background: #fee;
    color: #c00;
    padding: 12px 15px;
    margin: 20px 30px 0;
    border-radius: 6px;
    border-left: 4px solid #c00;
    font-size: 14px;
}

/* ── Field hint text ──────────────────────────────────────────────── */
.field-hint {
    color: #95a5a6;
    font-size: 11px;
}

/* ── Confirm popup helper text ────────────────────────────────────── */
.mt-16 { margin-top: 16px; }
.field-char-hint {
    display: block;
    margin-top: 8px;
    font-size: 13px;
}
.field-char-hint i { color: #d32f2f; }

/* ── Signup secondary button ──────────────────────────────────────── */
.btn-signup-secondary {
    display: inline-block;
    padding: 12px 30px;
    background: #ecf0f1;
    color: #2c3e50;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}