/**
 * Inspiration Sidebar - Light & Airy with Navy Accents
 */

/* ========================================
   Dashboard Layout with Sidebar
   ======================================== */

.dashboard-with-sidebar {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.dashboard-main-content {
    flex: 1;
    min-width: 0;
}

/* ========================================
   Inspiration Sidebar - Light Theme
   ======================================== */

.inspiration-sidebar {
    width: 260px;
    min-width: 260px;
    position: sticky;
    top: 80px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e8eef3;
    box-shadow: 0 2px 12px rgba(15, 90, 126, 0.08);
}

/* Line art decoration - navy on white */
.inspiration-sidebar__decor {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.04;
    background-position: bottom right;
    background-repeat: no-repeat;
}

/* Header - navy accent bar */
.inspiration-sidebar__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #0F5A7E;
}

.inspiration-sidebar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
}

.inspiration-sidebar__icon i {
    font-size: 18px;
    color: #fff;
}

.inspiration-sidebar__title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Content - white with navy text */
.inspiration-sidebar__content {
    position: relative;
    padding: 20px 18px;
    z-index: 1;
}

/* Quote marks for quotes type */
.inspiration-sidebar--quotes .inspiration-sidebar__content::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 40px;
    font-family: Georgia, serif;
    color: rgba(15, 90, 126, 0.08);
    line-height: 1;
}

.inspiration-sidebar__text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: #2c3e50;
    margin: 0;
}

.inspiration-sidebar__author {
    display: block;
    font-size: 12px;
    color: #0F5A7E;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e8eef3;
    font-style: italic;
}

.inspiration-sidebar__category {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    background: #f0f7fa;
    border-radius: 3px;
    color: #0F5A7E;
    margin-top: 12px;
}

/* Reveal button for riddles */
.inspiration-sidebar__reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    background: #f0f7fa;
    border: 1px solid #d0e3ed;
    border-radius: 4px;
    color: #0F5A7E;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 14px;
}

.inspiration-sidebar__reveal-btn:hover {
    background: #e0eef5;
}

.inspiration-sidebar__reveal-btn.revealed {
    background: #0F5A7E;
    color: #fff;
    border-color: #0F5A7E;
}

/* Footer - subtle */
.inspiration-sidebar__footer {
    padding: 10px 18px;
    background: #f8fafb;
    border-top: 1px solid #e8eef3;
}

.inspiration-sidebar__tagline {
    font-size: 9px;
    color: #9ab;
    text-align: center;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ========================================
   Line Art Icons (Navy on White)
   ======================================== */

/* Light bulb for tips */
.inspiration-sidebar--tips .inspiration-sidebar__decor {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='80' viewBox='0 0 60 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 C15 5 5 18 5 30 C5 42 15 48 20 55 L20 65 L40 65 L40 55 C45 48 55 42 55 30 C55 18 45 5 30 5 Z' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3Cline x1='20' y1='70' x2='40' y2='70' stroke='%230F5A7E' stroke-width='1.5'/%3E%3Cline x1='22' y1='75' x2='38' y2='75' stroke='%230F5A7E' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 45px;
}

/* Brain for growth/riddles */
.inspiration-sidebar--growth .inspiration-sidebar__decor,
.inspiration-sidebar--riddles .inspiration-sidebar__decor {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10 Q55 10 60 25 Q70 30 65 45 Q70 55 60 65 Q50 75 40 70 Q30 75 20 65 Q10 55 15 45 Q10 30 20 25 Q25 10 40 10' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3Cpath d='M40 20 Q40 40 40 60' stroke='%230F5A7E' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-size: 60px;
}

/* Trophy for encouragement */
.inspiration-sidebar--encouragement .inspiration-sidebar__decor {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='80' viewBox='0 0 60 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 10 L45 10 L45 35 Q45 50 30 55 Q15 50 15 35 Z' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3Cpath d='M15 15 Q5 15 5 25 Q5 35 15 35' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3Cpath d='M45 15 Q55 15 55 25 Q55 35 45 35' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3Crect x='25' y='55' width='10' height='10' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3Crect x='20' y='65' width='20' height='5' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-size: 50px;
}

/* Book for facts */
.inspiration-sidebar--facts .inspiration-sidebar__decor {
    background-image: url("data:image/svg+xml,%3Csvg width='70' height='60' viewBox='0 0 70 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 10 L35 55' stroke='%230F5A7E' stroke-width='1.5'/%3E%3Cpath d='M35 10 Q20 5 5 10 L5 50 Q20 45 35 50' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3Cpath d='M35 10 Q50 5 65 10 L65 50 Q50 45 35 50' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-size: 55px;
}

/* Quote marks for quotes */
.inspiration-sidebar--quotes .inspiration-sidebar__decor {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='50' viewBox='0 0 60 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 30 Q5 10 25 10 L25 15 Q15 15 15 25 L25 25 L25 40 L5 40 Z' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3Cpath d='M35 30 Q35 10 55 10 L55 15 Q45 15 45 25 L55 25 L55 40 L35 40 Z' stroke='%230F5A7E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-size: 50px;
}

/* ========================================
   Responsive - Hide on smaller screens
   ======================================== */

@media (max-width: 1100px) {
    .inspiration-sidebar {
        display: none;
    }

    .dashboard-with-sidebar {
        display: block;
    }
}

/* ========================================
   Polish for dashboard content
   ======================================== */

.dashboard-with-sidebar .student-table,
.dashboard-with-sidebar .striped {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dashboard-with-sidebar .collapsible {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dashboard-with-sidebar .collapsible-header {
    background: #fff;
    font-weight: 500;
    color: #0F5A7E;
}

.dashboard-with-sidebar .collapsible-header:hover {
    background: #f8f9fa;
}

.dashboard-with-sidebar .well,
.dashboard-with-sidebar .dashboard-well {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: none;
}