/* Account Page Styles */

/* ============================================
   Page Layout
   ============================================ */
.account-page {
    padding: 6rem 0 2rem 0;
}

.account-page .container {
    max-width: 1100px;
}

.account-page .profile-columns {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .account-page .profile-columns {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Tab Navigation
   ============================================ */
.account-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(var(--color-border), var(--border-opacity));
    padding-bottom: 0;
}

.tab-btn {
    background: transparent;
    border: none;
    color: rgb(var(--color-text-secondary));
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: rgb(var(--color-text));
    background: rgba(var(--color-overlay), 0.2);
}

.tab-btn.active {
    color: rgb(var(--color-primary));
    border-bottom-color: rgb(var(--color-primary));
}

.tab-content {
    min-height: 400px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .account-tabs {
        flex-wrap: wrap;
    }

    .tab-btn {
        flex: 1;
        text-align: center;
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   Account Sections
   ============================================ */
.account-section {
    background: rgba(var(--color-overlay), 0.3);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.account-section h2 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: rgb(var(--color-text));
}

.account-section .section-description {
    color: rgb(var(--color-text-secondary));
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.sidebar-column .account-section {
    margin-bottom: 0.75rem;
}

/* ============================================
   Profile Header
   ============================================ */
.profile-container {
    background: rgba(var(--color-overlay), 0.3);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--radius-2xl);
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .profile-container {
        padding: 1rem;
        border-radius: var(--radius-xl);
    }
}

.profile-header {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--color-border), var(--border-opacity));
    margin-bottom: 2rem;
    width: 100%;
}

@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* ============================================
   Account Page Sidebar Nav (extends forum.css)
   ============================================ */
.account-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border-top: 1px solid rgba(var(--color-border), 0.2);
}

.sidebar-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: none;
    color: rgb(var(--color-text-secondary));
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
    width: 100%;
}

.sidebar-nav-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-nav-btn:hover {
    color: rgb(var(--color-text));
    background: rgba(var(--color-overlay), 0.3);
}

.sidebar-nav-btn:hover svg {
    opacity: 1;
}

.sidebar-nav-btn.active {
    color: var(--color-primary);
    background: rgba(var(--color-primary), 0.1);
}

.sidebar-nav-btn.active svg {
    opacity: 1;
    stroke: var(--color-primary);
}

/* User details footer in sidebar */
.user-details-footer {
    padding: 1rem;
    border-top: 1px solid rgba(var(--color-border), 0.2);
    font-size: 0.8rem;
}

.user-details-footer p {
    margin: 0.25rem 0;
    color: rgb(var(--color-text-secondary));
}

.user-details-footer .user-email {
    color: rgb(var(--color-text));
    word-break: break-all;
}

.user-details-footer a {
    color: rgb(var(--color-text-secondary));
}

.user-details-footer a:hover {
    color: var(--color-primary);
}

/* Account main content area */
.account-main {
    min-width: 0;
}

/* Larger avatar for account page */
.account-page .user-avatar-wrapper .user-avatar {
    width: 100px;
    height: 100px;
}

/* ============================================
   Profile Picture
   ============================================ */
.profile-picture-container {
    position: relative;
    flex-shrink: 0;
}

.profile-picture {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 4px solid rgba(var(--color-border), var(--border-opacity));
}

@media (max-width: 768px) {
    .profile-picture {
        width: 120px;
        height: 120px;
    }
}

.picture-upload-form {
    margin-top: 1rem;
}

.file-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: black;
    border-radius: var(--radius-default);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.file-upload-label:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

/* ============================================
   Profile Info
   ============================================ */
.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-info h1 {
    margin: 0;
    font-size: 1.75rem;
    color: rgb(var(--color-text));
    word-break: break-word;
    line-height: 1.3;
}

.profile-info p {
    margin: 0;
    line-height: 1.4;
}

.profile-role {
    color: var(--color-primary);
    font-weight: 600;
}

.profile-email {
    color: rgb(var(--color-text-secondary));
    word-break: break-all;
}

.profile-member-since {
    color: rgb(var(--color-text-secondary));
    font-size: 0.875rem;
}

.profile-platform-roles {
    font-size: 0.875rem;
    color: rgb(var(--color-text-secondary));
}

.profile-platform-roles a {
    color: rgb(var(--color-text-secondary));
    text-decoration: none;
}

.profile-platform-roles a:hover {
    color: rgb(var(--color-primary));
    text-decoration: underline;
}

@media (max-width: 768px) {
    .profile-info h1 {
        font-size: 1.5rem;
    }
}

/* ============================================
   Profile Columns & Cards
   ============================================ */
.profile-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

@media (max-width: 900px) {
    .profile-columns {
        grid-template-columns: 1fr;
    }
}

.profile-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.profile-form,
.profile-stats,
.profile-preferences {
    background: rgba(var(--color-overlay), 0.2);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .profile-form,
    .profile-stats,
    .profile-preferences {
        padding: 1rem;
    }
}

.profile-form h3,
.profile-stats h3,
.profile-preferences h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    color: rgb(var(--color-text));
}

/* ============================================
   Stats Grid
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(var(--color-overlay), 0.3);
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
}

.stat-icon {
    font-size: 2rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(var(--color-text));
}

.stat-label {
    font-size: 0.875rem;
    color: rgb(var(--color-text-secondary));
}

.last-activity {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(var(--color-text-secondary));
}

/* ============================================
   Activity Bar
   ============================================ */
.activity-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(var(--color-overlay), 0.2);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.activity-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.activity-icon {
    font-size: 1.5rem;
}

.activity-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.activity-label {
    font-size: 0.85rem;
    color: rgb(var(--color-text-secondary));
}

@media (max-width: 600px) {
    .activity-bar {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .activity-stat {
        flex: 0 0 45%;
        justify-content: center;
    }
}

/* ============================================
   Sidebar Panels
   ============================================ */
.sidebar-panel {
    background: rgba(var(--color-overlay), 0.2);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    padding: 1.25rem;
    border-radius: var(--radius-xl);
}

.sidebar-panel h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    color: rgb(var(--color-text));
}

.sidebar-panel p {
    color: rgb(var(--color-text-secondary));
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.sidebar-panel h4 {
    margin: 1.5rem 0 1rem 0;
    font-size: 1rem;
    color: rgb(var(--color-text));
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--color-border), var(--border-opacity));
}

/* Session panel */
.session-panel {
    text-align: center;
}

.session-panel .logout-btn {
    width: 100%;
}

/* Invite panel */
.invite-panel {
    text-align: center;
}

.invite-stats-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: rgb(var(--color-text-secondary));
    font-size: 0.9rem;
}

.invite-stats-inline .stat-item span {
    font-weight: 600;
    color: var(--color-primary);
}

/* Danger panel */
.danger-panel {
    border-color: rgba(var(--color-error), 0.3);
}

.danger-panel h3 {
    color: rgb(var(--color-error));
}

/* ============================================
   Security & Preferences
   ============================================ */
.security-actions {
    display: flex;
    gap: 1rem;
}

.security-actions .btn {
    flex: 1;
}

.preferences-inline {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--color-border), var(--border-opacity));
}

.preferences-inline h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: rgb(var(--color-text));
    font-weight: 500;
}

/* Send emails toggle */
.send-emails-toggle {
    background: rgba(var(--color-overlay), 0.2);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.send-emails-toggle .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin-bottom: 0;
}

.send-emails-toggle .checkbox-text {
    font-weight: 600;
    color: rgb(var(--color-text));
    font-size: 1rem;
}

.send-emails-toggle .checkbox-description {
    margin-top: 0.75rem;
    padding-left: 1.75rem;
    font-size: 0.875rem;
    color: rgb(var(--color-text-secondary));
    line-height: 1.5;
}

.send-emails-toggle .checkbox-description em {
    display: block;
    margin-top: 0.5rem;
    font-style: italic;
    color: var(--color-primary);
}

/* ============================================
   Logout & Danger Zone
   ============================================ */
.logout-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--color-border), var(--border-opacity));
}

.logout-section h4 {
    margin-bottom: 0.5rem;
    color: rgb(var(--color-text));
}

.logout-section p {
    color: rgb(var(--color-text-secondary));
    margin-bottom: 1rem;
}

.danger-zone {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--color-error), 0.3);
}

.danger-zone h4 {
    color: rgb(var(--color-error));
    margin-bottom: 0.5rem;
}

.danger-zone p {
    color: rgb(var(--color-text-secondary));
    margin-bottom: 1rem;
}

/* ============================================
   Notifications (page-specific positioning)
   ============================================ */
.notifications-container {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 400px;
}

/* ============================================
   API Keys Section
   ============================================ */
.api-keys-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--color-border), var(--border-opacity));
}

.api-keys-section h4 {
    margin-bottom: 0.5rem;
}

.api-keys-section .section-description {
    color: rgb(var(--color-text-secondary));
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.api-key-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.api-key-input-wrapper input {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
}

.key-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-default);
    background: rgba(var(--color-text-secondary), 0.1);
    color: rgb(var(--color-text-secondary));
    white-space: nowrap;
}

.key-status.configured {
    background: rgba(var(--color-success), 0.15);
    color: rgb(var(--color-success));
}

@media (max-width: 768px) {
    .api-key-input-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================
   Connection Type Badges
   ============================================ */
.conn-type-badge {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-default);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    background: rgba(var(--color-text-secondary), 0.15);
    color: rgb(var(--color-text-secondary));
}

/* ============================================
   Utilities
   ============================================ */
.loading {
    text-align: center;
    padding: 3rem;
    color: rgb(var(--color-text-secondary));
}

.sse-hidden {
    display: none;
}

.section-divider {
    border: none;
    border-top: 1px solid rgba(var(--color-border), var(--border-opacity));
    margin: 1.5rem 0;
}

.text-muted {
    color: rgb(var(--color-text-secondary));
    font-style: italic;
}

/* ============================================
   MCP Connection Setup Section
   ============================================ */
.mcp-setup-section h3 {
    margin: 1.5rem 0 1rem 0;
    font-size: 1.1rem;
    color: rgb(var(--color-text));
}

/* Usage Stats Card */
.usage-stats-card {
    background: rgba(var(--color-overlay), 0.2);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.usage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.usage-label {
    font-size: 0.9rem;
    color: rgb(var(--color-text-secondary));
}

.usage-count {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgb(var(--color-text));
}

.usage-count.usage-low {
    color: rgb(var(--color-success));
}

.usage-count.usage-medium {
    color: rgb(var(--color-warning));
}

.usage-count.usage-high {
    color: rgb(var(--color-error));
}

.usage-bar {
    height: 8px;
    background: rgba(var(--color-border), 0.3);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.usage-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--color-success)), rgb(var(--color-warning)));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.usage-remaining {
    font-size: 0.85rem;
    color: rgb(var(--color-text-secondary));
}

.usage-unlimited {
    font-size: 0.9rem;
}

/* MCP Keys Table */
.mcp-keys-section {
    margin-bottom: 1.5rem;
}

.mcp-keys-section .table {
    margin-bottom: 0;
}

.mcp-keys-section .table td {
    vertical-align: middle;
}

.mcp-key-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.empty-state {
    text-align: center;
    padding: 1.5rem;
    font-style: italic;
}

/* Create MCP Key Form */
.create-mcp-key-section .form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.create-mcp-key-section .form-group {
    flex: 1;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .create-mcp-key-section .form-row {
        flex-direction: column;
        align-items: stretch;
    }
    .create-mcp-key-section .form-row .btn {
        width: 100%;
    }
}

/* MCP Key Created Success */
.mcp-key-created {
    margin-top: 1rem;
}

.mcp-key-created .warning-text {
    color: rgb(var(--color-warning));
    font-weight: 500;
}

.key-display-section,
.config-display-section {
    margin: 1rem 0;
}

.key-display-section label,
.config-display-section label {
    display: block;
    font-size: 0.9rem;
    color: rgb(var(--color-text-secondary));
    margin-bottom: 0.5rem;
}

.key-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(var(--color-overlay), 0.3);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
}

.key-display code {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--color-primary);
    word-break: break-all;
}

.config-pre {
    background: rgba(var(--color-overlay), 0.4);
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    overflow-x: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgb(var(--color-text));
    white-space: pre;
    margin-bottom: 0.5rem;
}

/* MCP Instructions */
.mcp-instructions {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(var(--color-overlay), 0.2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

.mcp-instructions h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: rgb(var(--color-text));
}

.mcp-instructions ol,
.mcp-instructions ul {
    margin: 0;
    padding-left: 1.25rem;
    color: rgb(var(--color-text-secondary));
}

.mcp-instructions li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.mcp-instructions code {
    background: rgba(var(--color-overlay), 0.3);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

/* MCP Config Display (for existing keys) */
.mcp-config-display {
    margin-top: 1rem;
}

.mcp-config-display .alert-info {
    margin-bottom: 1rem;
}

.mcp-config-display h4 {
    margin: 0 0 0.5rem 0;
}

/* Copy button feedback */
.copy-btn.btn-success {
    background: rgb(var(--color-success)) !important;
    border-color: rgb(var(--color-success)) !important;
}

/* Loading placeholder */
.loading-placeholder {
    padding: 1rem;
    text-align: center;
    color: rgb(var(--color-text-secondary));
    font-style: italic;
}

/* ============================================
   Token Usage Section
   ============================================ */
.token-usage-content {
    display: grid;
    gap: 1.5rem;
}

/* Balance Card */
.token-balance-card {
    background: rgba(var(--color-surface), 0.5);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.token-balance-card.tokens-warning {
    border-color: rgb(var(--color-warning));
}

.token-balance-card.tokens-critical {
    border-color: rgb(var(--color-error));
}

.token-balance-card.tokens-depleted {
    border-color: rgb(var(--color-error));
    background: rgba(var(--color-error), 0.1);
}

.balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.balance-label {
    font-size: 0.875rem;
    color: rgb(var(--color-text-secondary));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tier-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.tier-badge.tier-free {
    background: rgba(var(--color-text-secondary), 0.2);
    color: rgb(var(--color-text-secondary));
}

.tier-badge.tier-starter {
    background: rgba(var(--color-success), 0.2);
    color: rgb(var(--color-success));
}

.tier-badge.tier-pro {
    background: rgba(var(--color-info), 0.2);
    color: rgb(var(--color-info));
}

.tier-badge.tier-team {
    background: rgba(var(--color-action), 0.2);
    color: rgb(var(--color-action));
}

.tier-badge.tier-enterprise {
    background: rgba(var(--color-warning), 0.2);
    color: rgb(var(--color-warning));
}

.balance-amount {
    margin-bottom: 1rem;
}

.balance-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: rgb(var(--color-text));
}

.balance-value.unlimited {
    color: rgb(var(--color-success));
}

.balance-unit {
    font-size: 1rem;
    color: rgb(var(--color-text-secondary));
    margin-left: 0.5rem;
}

/* Balance Progress Bar */
.balance-bar-container {
    margin-top: 0.5rem;
}

.balance-bar {
    height: 8px;
    background: rgba(var(--color-border), 0.3);
    border-radius: var(--radius-default);
    overflow: hidden;
}

.balance-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--color-primary)), rgb(var(--color-accent)));
    border-radius: var(--radius-default);
    transition: width 0.3s ease;
}

.tokens-warning .balance-fill {
    background: rgb(var(--color-warning));
}

.tokens-critical .balance-fill,
.tokens-depleted .balance-fill {
    background: rgb(var(--color-error));
}

.balance-details {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: rgb(var(--color-text-secondary));
}

/* Tier Info Card */
.tier-info-card {
    background: rgba(var(--color-surface), 0.3);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
}

.tier-info-card h4 {
    margin: 0 0 0.5rem 0;
    color: rgb(var(--color-text));
}

.tier-benefits p {
    margin: 0.25rem 0;
    color: rgb(var(--color-text-secondary));
}

.tier-hint {
    font-size: 0.875rem;
    font-style: italic;
    opacity: 0.7;
}

/* Transactions Section */
.transactions-section {
    background: rgba(var(--color-surface), 0.3);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
}

.transactions-section h4 {
    margin: 0 0 1rem 0;
    color: rgb(var(--color-text));
}

.transactions-table {
    width: 100%;
    margin: 0;
}

.transactions-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgb(var(--color-text-secondary));
    border-bottom: 1px solid rgba(var(--color-border), var(--border-opacity));
}

.transactions-table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(var(--color-border), 0.3);
}

.transaction-row:last-child td {
    border-bottom: none;
}

.tx-date {
    font-size: 0.875rem;
    color: rgb(var(--color-text-secondary));
    white-space: nowrap;
}

.tx-description {
    color: rgb(var(--color-text));
}

.tx-amount {
    font-family: var(--font-mono);
    font-weight: 500;
}

.amount-credit {
    color: rgb(var(--color-success));
}

.amount-debit {
    color: rgb(var(--color-error));
}

.empty-transactions {
    color: rgb(var(--color-text-secondary));
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* ============================================
   API Calls Card (reuses token-balance-card base)
   ============================================ */
.api-calls-card {
    /* Uses same base as token-balance-card - see above */
    background: rgba(var(--color-surface), 0.5);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
}

/* Reuse balance-* classes for API calls display */
.api-calls-card .balance-label { /* reuse */ }
.api-calls-card .balance-value { font-size: 2rem; }
.api-calls-card .balance-unit { /* reuse */ }

/* Progress bar states */
.balance-fill.warning {
    background: rgb(var(--color-warning));
}

.balance-fill.danger {
    background: rgb(var(--color-error));
}

/* ============================================
   Upgrade Section
   ============================================ */
.upgrade-section {
    background: rgba(var(--color-surface), 0.3);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.upgrade-section h4 {
    margin: 0 0 0.5rem 0;
    color: rgb(var(--color-text));
}

.upgrade-description {
    color: rgb(var(--color-text-secondary));
    margin-bottom: 1.25rem;
}

.upgrade-tiers {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.upgrade-tier-card {
    background: rgba(var(--color-overlay), 0.3);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    transition: border-color 0.2s ease;
}

.upgrade-tier-card:hover {
    border-color: var(--color-primary);
}

.upgrade-tier-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.upgrade-tier-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgb(var(--color-text));
}

.upgrade-tier-badge {
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.upgrade-tier-allowance {
    font-size: 0.9rem;
    color: rgb(var(--color-text-secondary));
    margin-bottom: 1rem;
}

.upgrade-tier-allowance .unlimited {
    color: rgb(var(--color-success));
    font-weight: 500;
}

.upgrade-btn {
    width: 100%;
}

#upgrade-result {
    margin-top: 1rem;
}

.upgrade-request-sent {
    text-align: center;
}

.upgrade-request-sent .alert {
    text-align: left;
}

.upgrade-contact {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: rgb(var(--color-text-secondary));
}

/* ============================================
   Collapsible Activity Section
   ============================================ */
.activity-section {
    background: rgba(var(--color-surface), 0.3);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--border-radius);
    overflow: hidden;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.activity-header:hover {
    background: rgba(var(--color-overlay), 0.2);
}

.activity-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(var(--color-text));
}

.activity-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-default);
    background: rgba(var(--color-border), 0.3);
    font-size: 1rem;
    font-weight: 600;
    color: rgb(var(--color-text-secondary));
}

.activity-count {
    font-size: 0.8rem;
    color: rgb(var(--color-text-secondary));
    background: rgba(var(--color-border), 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

.activity-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(var(--color-border), var(--border-opacity));
}

/* Transactions List (inside activity) */
.transactions-list {
    margin-top: 1rem;
}

.transactions-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--color-border), 0.3);
}

.pagination-info {
    font-size: 0.8rem;
    color: rgb(var(--color-text-secondary));
}

.pagination-controls {
    display: flex;
    gap: 0.5rem;
}

/* Event Type Badge in Transactions */
.event-type-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(var(--color-primary), 0.15);
    color: var(--color-primary);
    white-space: nowrap;
}

.event-type-badge.system {
    background: rgba(var(--color-text-secondary), 0.15);
    color: rgb(var(--color-text-secondary));
}

.tx-event {
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .upgrade-tiers {
        grid-template-columns: 1fr;
    }

    .transactions-pagination {
        flex-direction: column;
        gap: 0.75rem;
    }

    .balance-value {
        font-size: 2rem;
    }

    .api-calls-value {
        font-size: 1.5rem;
    }
}

/* ============================================
   Vertical Profile Layout for Sidebar
   ============================================ */
.user-profile-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
    gap: 0.75rem;
}

.user-avatar-centered {
    margin: 0 auto;
}

/* Extra large avatar - full width of sidebar */
.user-avatar-xl {
    width: 100% !important;
    height: auto !important;
    border-radius: var(--radius-lg) !important;
    object-fit: cover;
}

.user-profile-vertical .user-name {
    margin: 0.5rem 0 0.25rem 0;
    font-size: 1.25rem;
}

/* User roles container */
.user-roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
}

/* Role badge styling */
.role-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
    background: rgba(var(--color-primary), 0.15);
    color: var(--color-primary);
}

.role-badge.role-administrator {
    background: rgba(var(--color-error), 0.15);
    color: rgb(var(--color-error));
}

.role-badge.role-moderator {
    background: rgba(var(--color-warning), 0.15);
    color: rgb(var(--color-warning));
}

.role-badge.role-core-member,
.role-badge.role-core_member {
    background: rgba(var(--color-info), 0.15);
    color: rgb(var(--color-info));
}

.role-badge.role-steering-committee,
.role-badge.role-steering_committee {
    background: rgba(var(--color-action), 0.15);
    color: rgb(var(--color-action));
}

/* Member since in profile header */
.user-profile-vertical .user-meta {
    margin: 0;
    font-size: 0.85rem;
    color: rgb(var(--color-text-secondary));
}

/* Menu divider */
.menu-divider {
    width: 100%;
    height: 1px;
    background: rgba(var(--color-border), var(--border-opacity));
    margin: 0.5rem 0;
}

/* Menu section header */
.menu-header {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgb(var(--color-text-tertiary));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    margin-top: 0.25rem;
}

/* Admin-only menu links (hidden by default, shown via JS/OOB) */
.admin-menu-hidden {
    display: none;
}

/* ============================================
   Personal Keys Sections
   ============================================ */
.keys-section {
    margin-bottom: 2rem;
}

.keys-section-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgb(var(--color-text));
}

.keys-section-description {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: rgb(var(--color-text-secondary));
}

/* Key Card */
.key-card {
    background: rgba(var(--color-overlay), 0.2);
    border: 1px solid rgba(var(--color-border), var(--border-opacity));
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.key-card:last-child {
    margin-bottom: 0;
}

.key-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.key-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.key-provider {
    font-weight: 500;
    color: rgb(var(--color-text));
    white-space: nowrap;
}

.key-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Key Form (hidden by default) */
.key-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--color-border), var(--border-opacity));
}

.key-form .form-group {
    margin-bottom: 0.75rem;
}

.key-form .form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

@media (max-width: 600px) {
    .key-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .key-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .key-actions {
        justify-content: flex-end;
    }
}

/* Section Note */
.keys-section-note {
    margin: 0 0 1rem 0;
    font-size: 0.8rem;
    color: rgb(var(--color-text-tertiary));
    font-style: italic;
}

/* Key Cards Grid */
.key-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

/* Compact Key Card (for grid layout) */
.key-card.compact {
    padding: 0.75rem;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.key-card.compact .key-card-header {
    gap: 0.5rem;
}

.key-card.compact .key-provider {
    font-size: 0.9rem;
}

.key-card.compact .key-status {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
}

/* Key Card Actions (separate from header) */
.key-card-actions {
    display: flex;
    gap: 0.5rem;
}

.key-card.compact .key-card-actions .btn {
    flex: 1;
}

/* Key Form in Compact Card */
.key-card.compact .key-form {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.key-card.compact .key-form .form-control {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
}

.key-card.compact .key-form .form-actions {
    margin-top: 0.5rem;
}

/* Key Card Color Tints (for categorization) */
.key-card.tint-yellow {
    background: rgba(255, 200, 50, 0.08);
    border-color: rgba(255, 200, 50, 0.2);
}

.key-card.tint-blue {
    background: rgba(100, 150, 255, 0.08);
    border-color: rgba(100, 150, 255, 0.2);
}

.key-card.tint-purple {
    background: rgba(180, 100, 255, 0.08);
    border-color: rgba(180, 100, 255, 0.2);
}

.key-card.tint-cyan {
    background: rgba(50, 200, 220, 0.08);
    border-color: rgba(50, 200, 220, 0.2);
}

.key-card.tint-green {
    background: rgba(80, 200, 120, 0.08);
    border-color: rgba(80, 200, 120, 0.2);
}

.key-card.tint-orange {
    background: rgba(255, 150, 50, 0.08);
    border-color: rgba(255, 150, 50, 0.2);
}

/* Configured state */
.key-card.configured {
    border-color: rgba(var(--color-success), 0.3);
    background: rgba(var(--color-success), 0.05);
}

.key-card.configured .key-status {
    background: rgba(var(--color-success), 0.15);
    color: rgb(var(--color-success));
}

/* Key Status Variants */
.key-status.not-configured {
    background: rgba(var(--color-text-muted), 0.15);
    color: rgb(var(--color-text-muted));
}

@media (max-width: 600px) {
    .key-cards-grid {
        grid-template-columns: 1fr;
    }
}