/**
 * Inline Style Fixes - CSP Compliant
 * Replaces inline style attributes with CSS classes to eliminate CSP violations
 */

/* Navigation styles */
.nav-debug-hidden {
    display: none !important;
}

.wallet-disconnected {
    display: none;
}

.wallet-connected {
    display: none;
}

.wallet-not-available {
    display: none;
}

.truncate-address {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icon sizes */
.icon-medium {
    font-size: 1.5rem !important;
}

.icon-large-2 {
    font-size: 2rem !important;
}

.icon-large {
    font-size: 3rem !important;
}

.icon-xlarge {
    font-size: 4rem !important;
}

.icon-massive {
    font-size: 10rem !important;
    opacity: 0.8;
}

/* Status indicators */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Form and input styles */
.textarea-medium {
    height: 80px;
}

.textarea-large {
    height: 100px;
}

.letter-spaced {
    letter-spacing: 0.5em;
    font-family: monospace;
}

/* Display utilities */
.hidden {
    display: none !important;
}

.inline-display {
    display: inline !important;
}

/* Specific component display states */
.auth-navigation-visible {
    display: block !important;
}

.status-message-hidden {
    display: none;
}

.unsupported-message-hidden {
    display: none;
}

.setup-form-hidden {
    display: none;
}

.error-display-hidden {
    display: none;
}

.success-display-hidden {
    display: none;
}

.incompatible-display-hidden {
    display: none;
}

.current-passkeys-card-hidden {
    display: none;
}

.totp-method-hidden {
    display: none;
}

.passkey-method-hidden {
    display: none;
}

.totp-form-hidden {
    display: none;
}

.join-org-spinner-hidden {
    display: none;
}

.settings-spinner-hidden {
    display: none;
}

.load-more-contracts-hidden {
    display: none;
}

.deployment-alert-hidden {
    display: none;
}

.template-config-hidden {
    display: none;
}

.abi-paste-section-hidden {
    display: none;
}

.contract-info-hidden {
    display: none;
}

.functions-section-hidden {
    display: none;
}

.results-section-hidden {
    display: none;
}

.view-projects-btn-hidden {
    display: none;
}

/* Layout and positioning */
.dropdown-wide {
    width: 300px;
}

.notification-badge {
    font-size: 0.75rem;
}

/* Factory status styles */
.factory-status-text {
    color: #333;
    font-weight: normal;
}

/* Loading and spinner styles */
.spinner-inline {
    display: none;
    width: 1rem;
    height: 1rem;
}

/* Contract and deployment styles */
.contract-section {
    display: none;
}

.deployment-result {
    display: none;
}

.contract-details {
    display: none;
}

.result-display {
    display: none;
}

/* Project status colors - dynamically set via data attributes */
.activity-icon[data-color] {
    background-color: var(--activity-color, #e5e7eb);
}

/* Activity icon color variations - replaces inline styles */
.activity-icon-color-gray {
    --activity-color: #e5e7eb;
    background-color: var(--activity-color);
}

.activity-icon-color-blue {
    --activity-color: #3b82f6;
    background-color: var(--activity-color);
}

.activity-icon-color-green {
    --activity-color: #10b981;
    background-color: var(--activity-color);
}

.activity-icon-color-yellow {
    --activity-color: #f59e0b;
    background-color: var(--activity-color);
}

.activity-icon-color-red {
    --activity-color: #ef4444;
    background-color: var(--activity-color);
}

.activity-icon-color-purple {
    --activity-color: #8b5cf6;
    background-color: var(--activity-color);
}

/* File input hidden */
.file-input-hidden {
    display: none !important;
}

/* Authentication styles */
.auth-method-hidden {
    display: none;
}

.status-message-hidden {
    display: none;
}

.form-section-hidden {
    display: none;
}

/* QR Code styling */
.qr-code-img {
    max-width: 200px;
}

/* Responsive button and element spacing */
.btn-load-more {
    display: none;
}

.card-section-hidden {
    display: none;
}