/* ================= AFFILIATION NUMBER STYLES ================= */
/* ================= AFFILIATION & BOARD STYLES ================= */

/* Main affiliation badge */
.school-affiliation-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 8px;
    padding: 8px 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #3498db;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(52, 152, 219, 0.15);
}

/* Board name styling */
.board-name {
    display: flex;
    align-items: center;
    color: #2c3e50;
    font-size: 0.9rem;
}

    .board-name i {
        color: #3498db;
        font-size: 1rem;
    }

    .board-name strong {
        font-weight: 600;
        color: #2c3e50;
    }

/* Affiliation number styling */
.affiliation-number {
    display: flex;
    align-items: center;
    background: white;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    font-size: 0.85rem;
}

    .affiliation-number i {
        color: #f39c12;
        margin-right: 6px;
    }

.affiliation-label {
    color: #7f8c8d;
    margin-right: 5px;
    font-weight: 500;
}

.affiliation-value {
    color: #e74c3c;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

/* Established year styling */
.established-year {
    display: flex;
    align-items: center;
    color: #27ae60;
    font-size: 0.85rem;
    background: rgba(39, 174, 96, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
}

    .established-year i {
        margin-right: 5px;
    }

/* Header style specific adjustments */
.header-classic .school-affiliation-badge {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.header-classic .board-name {
    color: white;
}

    .header-classic .board-name strong {
        color: white;
    }

.header-classic .affiliation-number {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.header-classic .affiliation-label {
    color: rgba(255, 255, 255, 0.8);
}

.header-classic .affiliation-value {
    color: #ffd54f;
}

.header-classic .established-year {
    background: rgba(255, 255, 255, 0.1);
    color: #a5d6a7;
}

/* Compact layout for smaller screens */
@media (max-width: 768px) {
    .school-affiliation-badge {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px;
    }

    .board-name,
    .affiliation-number,
    .established-year {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .affiliation-number {
        justify-content: flex-start;
    }
}

/* For very small screens */
@media (max-width: 576px) {
    .school-affiliation-badge {
        font-size: 0.8rem;
    }

    .board-name,
    .affiliation-number,
    .established-year {
        flex-wrap: wrap;
    }

    .affiliation-label {
        display: block;
        width: 100%;
        margin-bottom: 2px;
    }
}
/* Standalone established year (when no board/affiliation) */
.established-year-standalone {
    display: flex;
    align-items: center;
    margin-top: 8px;
    color: #27ae60;
    font-size: 0.9rem;
    padding: 4px 12px;
    background: rgba(39, 174, 96, 0.1);
    border-radius: 4px;
    border-left: 3px solid #27ae60;
}

    .established-year-standalone i {
        margin-right: 8px;
        color: #27ae60;
    }

/* For classic header */
.header-classic .established-year-standalone {
    background: rgba(255, 255, 255, 0.1);
    color: #a5d6a7;
    border-left-color: #a5d6a7;
}
    .footer-affiliation {
        margin: 3px 0;
    }

        .footer-affiliation small {
            font-size: 0.8rem;
            color: #ffd54f !important; /* Golden color for visibility */
        }

        .footer-affiliation i {
            color: #ffd54f;
        }


/* Print Styles - Ensure affiliation shows when printing */
@media print {
    .school-affiliation-badge,
    .affiliation-badge {
        background: white !important;
        border: 2px solid #000 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .affiliation-number {
        background: white !important;
        border: 1px solid #000 !important;
        color: #000 !important;
    }
}