/* =====================================================
   ROOT VARIABLES
===================================================== */
:root {
    --slm-bg: #f8fafc;
    --slm-card: #ffffff;
    --slm-border: #e2e8f0;
    --slm-text: #0f172a;
    --slm-muted: #64748b;

    --slm-green: #16a34a;
    --slm-green-bg: #dcfce7;

    --slm-blue: #2563eb;
    --slm-blue-bg: #dbeafe;

    --slm-yellow: #ca8a04;
    --slm-yellow-bg: #fef9c3;

    --slm-red: #dc2626;
    --slm-red-bg: #fee2e2;

    --slm-purple: #7c3aed;
    --slm-purple-bg: #f3e8ff;
}

/* =====================================================
   GLOBAL CONTAINER (🔥 FIXED – FULL WIDTH)
===================================================== */
#slm-live-container {
    background: var(--slm-bg);
    padding: 24px;
    border-radius: 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont;
    color: var(--slm-text);

    /* 🔥 KEY FIX */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* =====================================================
   MAIN TITLE
===================================================== */
.slm-main-title {
    font-size: 26px;
    font-weight: 650;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =====================================================
   SECTION HEADERS
===================================================== */
.slm-section-title {
    font-size: 20px;
    font-weight: 700;
    margin: 12px 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.slm-section-title span {
    font-size: 14px;
    color: var(--slm-muted);
}

/* =====================================================
   GRID LAYOUT
===================================================== */
.slm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

/* =====================================================
   CLASS CARD
===================================================== */
.slm-class-card {
    background: var(--slm-card);
    border: 1px solid var(--slm-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slm-class-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* =====================================================
   CLASS HEADER
===================================================== */
.slm-class-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slm-class-name {
    font-size: 17px;
    font-weight: 700;
}

.slm-section-name {
    font-size: 13px;
    color: var(--slm-muted);
}

/* =====================================================
   PERIOD INFO
===================================================== */
.slm-period {
    font-size: 14px;
    font-weight: 600;
    color: var(--slm-blue);
}

.slm-period span {
    font-weight: 400;
    color: var(--slm-muted);
}

/* =====================================================
   SUBJECT
===================================================== */
.slm-subject {
    font-size: 15px;
    font-weight: 600;
}

/* =====================================================
   TEACHER ROW
===================================================== */
.slm-teacher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.slm-teacher-name {
    font-size: 14px;
    font-weight: 600;
}

/* =====================================================
   STATUS BADGES
===================================================== */
.slm-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.slm-teaching {
    background: var(--slm-green-bg);
    color: var(--slm-green);
}

.slm-proxy {
    background: #ffedd5;
    color: #9a3412;
}

.slm-free {
    background: var(--slm-yellow-bg);
    color: var(--slm-yellow);
}

.slm-break {
    background: var(--slm-blue-bg);
    color: var(--slm-blue);
}

.slm-absent {
    background: var(--slm-red-bg);
    color: var(--slm-red);
}

.slm-leave {
    background: var(--slm-purple-bg);
    color: var(--slm-purple);
}

/* =====================================================
   ACADEMIC CONTROL PANEL TABLE (🔥 FIXED)
===================================================== */
.slm-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    background: var(--slm-card);
    border: 1px solid var(--slm-border);
    border-radius: 16px;
}

/* 🔥 IMPORTANT FIX */
.slm-academic-table {
    width: 100%;
    border-collapse: collapse;

    /* allow full expansion */
    min-width: 100%;
    table-layout: auto;
}

.slm-academic-table th {
    background: #f1f5f9;
    color: var(--slm-text);
    font-size: 14px;
    font-weight: 700;
    padding: 14px;
    text-align: left;
    border-bottom: 1px solid var(--slm-border);
}

.slm-academic-table td {
    padding: 14px;
    font-size: 14px;
    border-bottom: 1px solid var(--slm-border);
    vertical-align: middle;
}

.slm-academic-table tr:hover {
    background: #f8fafc;
}

/* =====================================================
   EMPTY STATE
===================================================== */
.slm-empty {
    background: var(--slm-card);
    border: 1px dashed var(--slm-border);
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    color: var(--slm-muted);
    font-size: 15px;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 640px) {
    #slm-live-container {
        padding: 16px;
    }

    .slm-main-title {
        font-size: 22px;
    }

    .slm-section-title {
        font-size: 18px;
    }

    .slm-academic-table {
        min-width: 720px;
    }
}