/*
 * Utility CSS classes
 * Replaces inline style= attributes for CSP compliance.
 * Allows removal of 'unsafe-inline' from style-src directive.
 */

/* ---- Payment lock (form starts locked until access verified) ---- */
.payment-locked   { opacity: 0.3; pointer-events: none; }

/* ---- Download gate (dim until user downloads file) ---- */
.download-gate    { opacity: 0.35; pointer-events: none; filter: grayscale(0.5); transition: opacity 0.3s, filter 0.3s; }

/* ---- "Process Another" → depleted state (gold outline button) ---- */
.process-another-locked {
    background: transparent !important;
    border: 2px solid rgb(206, 186, 76) !important;
    color: rgb(206, 186, 76) !important;
}

/* ---- Display ---- */
.d-none           { display: none; }
.d-block          { display: block; }
.d-inline-block   { display: inline-block; }
.d-flex           { display: flex; }
.d-inline-flex    { display: inline-flex; align-items: center; }

/* ---- Text alignment ---- */
.text-center      { text-align: center; }
.text-left        { text-align: left; }

/* ---- Text colors (theme) ---- */
.text-gold        { color: #CEBA4C; }
.text-navy        { color: #0D2849; }
.text-white       { color: #f2f2f2; }
.text-muted       { color: #aaa; }
.text-muted-dark  { color: #888; }
.text-muted-darker { color: #666; }
.text-light       { color: #ccc; }
.text-success     { color: #4CAF50; }
.text-warning     { color: #ff9800; }
.text-danger      { color: #ff6b6b; }

/* ---- Revenue/payment colors (analytics) ---- */
.text-sol         { color: #9945FF; font-weight: 500; }
.text-usdc        { color: #2775CA; font-weight: 500; }
.text-stripe-green { color: #1a8a4a; font-weight: 500; }

/* ---- Confidence colors (labeler/FAQ) ---- */
.confidence-high       { color: #90EE90; }
.confidence-medium     { color: #FFFF99; }
.confidence-low        { color: #FFD699; }
.confidence-low-alt    { color: #FFCC80; }
.confidence-ai         { color: #ADD8E6; }
.confidence-review     { color: #FF9999; }
.confidence-correction { color: #E6E6FA; }

/* ---- Font sizes ---- */
.fs-xs         { font-size: 0.7rem; }
.fs-sm         { font-size: 0.75rem; }
.fs-caption    { font-size: 0.8rem; }
.fs-body-sm    { font-size: 0.85rem; }
.fs-body       { font-size: 0.9rem; }
.fs-body-lg    { font-size: 0.95rem; }
.fs-display    { font-size: 2rem; }
.fs-hero       { font-size: 3rem; }

/* ---- Font weight ---- */
.fw-bold       { font-weight: bold; }
.fw-500        { font-weight: 500; }

/* ---- Margins (top) ---- */
.mt-0          { margin-top: 0; }
.mt-1          { margin-top: 0.25rem; }
.mt-2          { margin-top: 0.5rem; }
.mt-3          { margin-top: 1rem; }
.mt-4          { margin-top: 1.5rem; }

/* ---- Margins (bottom) ---- */
.mb-0          { margin-bottom: 0; }
.mb-1          { margin-bottom: 0.25rem; }
.mb-2          { margin-bottom: 0.5rem; }
.mb-3          { margin-bottom: 1rem; }
.mb-4          { margin-bottom: 1.5rem; }
.mb-5          { margin-bottom: 2rem; }

/* ---- Margins (right) ---- */
.mr-2          { margin-right: 0.5rem; }

/* ---- Padding ---- */
.pt-5          { padding-top: 4rem; }

/* ---- Widths ---- */
.w-full        { width: 100%; }

/* ---- Layout helpers ---- */
.mx-auto       { margin-left: auto; margin-right: auto; }
.max-w-500     { max-width: 500px; }
.max-h-250     { max-height: 250px; }
.gap-2         { gap: 0.5rem; }
.gap-3         { gap: 1rem; }
.justify-center { justify-content: center; }
.flex-wrap     { flex-wrap: wrap; }

/* ---- Specific component classes ---- */

/* Payment result page layout */
.payment-result-page {
    text-align: center;
    padding-top: 4rem;
}

.payment-result-box {
    max-width: 500px;
    margin: 0 auto;
}

.payment-result-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.payment-result-title {
    color: #CEBA4C;
    margin-bottom: 1rem;
}

.payment-result-message {
    color: #aaa;
    margin-bottom: 2rem;
}

.payment-result-submessage {
    color: #888;
    font-size: 0.9rem;
}

.payment-result-link {
    display: inline-block;
    text-decoration: none;
    padding: 0.75rem 2rem;
}

/* Manual payment hint text */
.manual-hint {
    color: #aaa;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Cancel processing button (shared by labeler + tis) */
.cancel-processing-btn {
    margin-top: 1.5rem;
    padding: 0.6rem 1.5rem;
    background: transparent;
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.cancel-processing-btn:hover {
    background: rgba(255, 107, 107, 0.1);
}

/* Admin sub-section headings */
.admin-sub-heading {
    color: #0D2849;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

/* Labeler-specific: accent checkbox */
.accent-gold {
    accent-color: rgb(206, 186, 76);
}

/* Labeler: template download link */
.template-download-link {
    color: rgb(206, 186, 76);
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Labeler: loading progress section */
.loading-progress {
    margin-top: 1.5rem;
    text-align: center;
    min-width: 300px;
}

.loading-timer {
    font-size: 2rem;
    color: rgb(206, 186, 76);
    font-weight: bold;
    margin-bottom: 1rem;
}

.loading-status {
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.loading-info-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 8px;
    text-align: left;
}

.loading-info-label {
    color: #888;
    font-size: 0.8rem;
    margin: 0 0 0.5rem 0;
}

.loading-info-list {
    color: #aaa;
    font-size: 0.8rem;
    margin: 0;
    padding-left: 1.25rem;
}

.loading-estimate {
    color: #666;
    font-size: 0.75rem;
    margin-top: 1rem;
}

/* TIS: analytics link button styling */
.analytics-link-btn {
    background: linear-gradient(135deg, rgb(13, 40, 73) 0%, rgb(38, 62, 116) 100%);
    color: #f2f2f2;
}

/* Labeler: result action button (TIS link) */
.labeler-tis-link {
    border-color: rgb(206, 186, 76);
    color: rgb(206, 186, 76);
    background-color: rgba(206, 186, 76, 0.1);
}

/* Labeler: sources grid 5-column */
.sources-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* Labeler: vendor hint */
.vendor-hint-text {
    margin-top: 0.25rem;
}

/* Labeler: label/checkbox row */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ccc;
    font-size: 0.85rem;
}

/* Labeler: threshold hint */
.threshold-hint {
    color: #aaa;
    font-size: 0.8rem;
}

/* Labeler: file upload hint */
.upload-hint {
    font-size: 0.75rem;
    color: #666;
}

/* Labeler: config section grid top margin */
.config-section {
    margin-top: 1rem;
}

/* Labeler: upload grid margin */
.upload-section-margin {
    margin-bottom: 1rem;
}

/* Labeler: template section */
.template-section {
    margin-bottom: 1rem;
    text-align: center;
}

.template-hint {
    font-size: 0.7rem;
    color: #888;
    margin-top: 0.25rem;
}

/* Labeler: fill-only-empty section */
.fill-empty-section {
    margin-bottom: 1rem;
}

/* Labeler: results action row */
.results-action-row {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---- Page sponsor banner (shown in upload sections) ---- */
.page-sponsor {
    margin-top: 2rem;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, rgba(206, 186, 76, 0.12) 0%, rgba(206, 186, 76, 0.04) 100%);
    border: 1px solid rgba(206, 186, 76, 0.3);
    border-radius: 10px;
    color: #CEBA4C;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
}

.page-sponsor:empty {
    display: none;
}