/* CSP-Safe Styles - Replaces inline styles to avoid CSP violations */

/* Chart containers */
.chart-container {
    margin-bottom: 20px;
    height: auto;
}

.chart-container canvas,
.chart-container div[id*="Chart"] {
    width: 100% !important;
    min-height: 300px;
    height: auto;
}

/* Flex layouts for reports */
.report-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.report-flex-item {
    flex: 1;
    min-width: 300px;
}

.report-flex-item-small {
    flex: 1;
    min-width: 250px;
}

.contribution-box {
    flex: 1;
    min-width: 250px;
}

/* Chart centering */
.chart-center {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

/* Alert styles with proper colors */
.alert-premarital-note {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 8px;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.alert-important-note {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px;
    border-radius: 3px;
    margin-top: 10px;
}

/* Report section dividers */
.report-divider {
    border-top: 1px solid #ddd;
    margin: 30px 0;
}

/* Badge styles */
.badge-manual-payment {
    background-color: #ffc107;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8em;
}

.badge-gift {
    background-color: #dc3545;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8em;
}

/* Gift text styling */
.gift-text {
    color: #6c757d;
    font-size: 0.85em;
    display: block;
}

/* Table footer styling */
.table-footer-row {
    background-color: #e9ecef;
}

/* Hidden sections */
.hidden-section {
    display: none;
}

/* Form sticky positioning */
.form-sticky {
    position: sticky;
    top: 0.5rem;
}

/* 2FA input styling */
.two-factor-input {
    font-size: 2rem;
    letter-spacing: 0.5rem;
}

.verification-input {
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
}

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

/* Inline form styling */
.inline-form {
    display: inline;
}

/* Pre-formatted code blocks */
.code-block {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
}

/* Remodel claim sections */
.claim-type-section,
.claim-type-info,
.reimbursement-info,
.marvin-info,
.quantum-meruit-info,
.after-marriage-notice,
.after-separation-notice {
    display: none;
}

/* Title changes and force separate container */
.title-changes-section,
.title-change-fields,
.force-separate-container {
    display: none;
}

/* Claim details box */
.claim-details-box {
    flex: 1;
    min-width: 300px;
    margin: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* Email styling */
.email-button-center {
    text-align: center;
}

.email-url-break {
    word-break: break-all;
    font-size: 12px;
}

/* Dark mode overrides for CSP-safe styles */
@media (prefers-color-scheme: dark) {
    .claim-details-box {
        background-color: #2d2d2d;
        border-color: #444;
        color: #e9ecef;
    }
    
    .code-block {
        background-color: #2d2d2d;
        color: #e9ecef;
    }
    
    .alert-premarital-note {
        background-color: #664d03;
        color: #fff;
    }
    
    .alert-important-note {
        background-color: #721c24;
        border-color: #a02633;
        color: #f5c6cb;
    }
}

/* User theme specific overrides (will be applied when dark theme is selected) */
body.dark-theme .claim-details-box {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e9ecef;
}

body.dark-theme .code-block {
    background-color: #2d2d2d;
    color: #e9ecef;
}

body.dark-theme .alert-premarital-note {
    background-color: #664d03;
    color: #fff;
}

body.dark-theme .alert-important-note {
    background-color: #721c24;
    border-color: #a02633;
    color: #f5c6cb;
}

body.dark-theme .table-footer-row {
    background-color: #3d3d3d;
}