/* ========================================
   CENTRALIZED CEFR SYSTEM
   Consistent colors and blob shapes across the entire app
   Based on learning network standards
   ======================================== */

/* CEFR Level Colors - Official System */
:root {
    --cefr-pre-a1: #FFB6C1;
    --cefr-a1: #FFA07A;
    --cefr-a2: #FF9A9E;
    --cefr-b1: #98FB98;
    --cefr-b2: #87CEEB;
    --cefr-c1: #DDA0DD;
    --cefr-c2: #F0A0A0;
}

/* CEFR Blob Base Styling */
.cefr-blob {
    display: inline-block;
    width: 12px;
    height: 14px;
    border-radius: 6px 8px 6px 4px;
    margin-left: 8px;
    margin-right: 0;
    flex-shrink: 0;
    vertical-align: middle;
    position: relative;
    z-index: 10;
}

/* CEFR Level Colors */
.cefr-blob.pre-a1, .cefr-blob.prea1 { background-color: var(--cefr-pre-a1); }
.cefr-blob.a1 { background-color: var(--cefr-a1); }
.cefr-blob.a2 { background-color: var(--cefr-a2); }
.cefr-blob.b1 { background-color: var(--cefr-b1); }
.cefr-blob.b2 { background-color: var(--cefr-b2); }
.cefr-blob.c1 { background-color: var(--cefr-c1); }
.cefr-blob.c2 { background-color: var(--cefr-c2); }

/* CEFR Range Gradients */
.cefr-blob.pre-a1-to-a1 { background: linear-gradient(45deg, var(--cefr-pre-a1) 50%, var(--cefr-a1) 50%); }
.cefr-blob.a1-to-a2 { background: linear-gradient(45deg, var(--cefr-a1) 50%, var(--cefr-a2) 50%); }
.cefr-blob.a2-to-b1 { background: linear-gradient(45deg, var(--cefr-a2) 50%, var(--cefr-b1) 50%); }
.cefr-blob.b1-to-b2 { background: linear-gradient(45deg, var(--cefr-b1) 50%, var(--cefr-b2) 50%); }
.cefr-blob.b2-to-c1 { background: linear-gradient(45deg, var(--cefr-b2) 50%, var(--cefr-c1) 50%); }
.cefr-blob.c1-to-c2 { background: linear-gradient(45deg, var(--cefr-c1) 50%, var(--cefr-c2) 50%); }

/* CEFR Level Badge Styling */
.cefr-level {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #855CF8;
    background: #F3EFFF;
    padding: 0.4rem 0.8rem;
    border-radius: 25px;
    border: 1px solid #DCD1FF;
    margin-left: 0.5rem;
    vertical-align: middle;
    position: relative;
    z-index: 10;
}

/* Force Visibility for All CEFR Elements */
.cefr-level,
.cefr-blob,
#student-cefr-level,
#student-cefr-blob {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Large CEFR Blobs (for learning network) */
.cefr-blob.large {
    width: 16px;
    height: 20px;
    border-radius: 8px 10px 8px 6px;
}

/* Program Card CEFR Blobs */
.program-cefr-blob {
    width: 12px;
    height: 12px;
    border-radius: 6px 8px 6px 4px;
    display: inline-block;
    flex-shrink: 0;
}

.program-cefr-blob.pre-a1 { background-color: var(--cefr-pre-a1); }
.program-cefr-blob.a1 { background-color: var(--cefr-a1); }
.program-cefr-blob.a2 { background-color: var(--cefr-a2); }
.program-cefr-blob.b1 { background-color: var(--cefr-b1); }
.program-cefr-blob.b2 { background-color: var(--cefr-b2); }
.program-cefr-blob.c1 { background-color: var(--cefr-c1); }
.program-cefr-blob.c2 { background-color: var(--cefr-c2); }

/* Route Legend CEFR Blobs */
.route-legend-blob {
    width: 12px;
    height: 14px;
    border-radius: 6px 8px 6px 4px;
    flex-shrink: 0;
}

.route-cefr-pre-a1 { background-color: var(--cefr-pre-a1); }
.route-cefr-a1 { background-color: var(--cefr-a1); }
.route-cefr-a2 { background-color: var(--cefr-a2); }
.route-cefr-b1 { background-color: var(--cefr-b1); }
.route-cefr-b2 { background-color: var(--cefr-b2); }
.route-cefr-c1 { background-color: var(--cefr-c1); }
.route-cefr-c2 { background-color: var(--cefr-c2); }

/* Station CEFR Blobs */
.station-cefr-blob {
    width: 10px;
    height: 12px;
    border-radius: 4px 6px 4px 3px;
    position: absolute;
    top: 8px;
    right: -13px;
    opacity: 0.9;
    flex-shrink: 0;
}

/* Level Names with Blobs */
.level-name::before {
    content: '';
    width: 16px;
    height: 20px;
    border-radius: 8px 10px 8px 6px;
    flex-shrink: 0;
}

.level-name.pre-a1::before { background-color: var(--cefr-pre-a1); }
.level-name.a1::before { background-color: var(--cefr-a1); }
.level-name.a2::before { background-color: var(--cefr-a2); }
.level-name.b1::before { background-color: var(--cefr-b1); }
.level-name.b2::before { background-color: var(--cefr-b2); }
.level-name.c1::before { background-color: var(--cefr-c1); }
.level-name.c2::before { background-color: var(--cefr-c2); }