/* ============================================================
   Публичное расписание — светлая тема
   ============================================================ */

:root{
    --bg:         #f4f6fb;
    --bg-soft:    #ffffff;
    --bg-soft-2:  #f8fafc;
    --card:       #ffffff;
    --card-hi:    #f1f5f9;
    --border:     #e2e8f0;
    --border-2:   #cbd5e1;
    --text:       #1e293b;
    --text-2:     #475569;
    --muted:      #94a3b8;
    --accent:     #3b82f6;
    --accent-2:   #6366f1;
    --green:      #10b981;
    --red:        #ef4444;
    --radius:     12px;
    --shadow-sm:  0 1px 2px rgba(15,23,42,.04);
    --shadow:     0 4px 16px rgba(15,23,42,.06);
    --shadow-lg:  0 12px 32px rgba(15,23,42,.10);
}

*{box-sizing:border-box;margin:0;padding:0;}

html, body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size:15px;
    line-height:1.5;
    min-height:100%;
}

body{
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.08), transparent 60%),
        radial-gradient(1000px 500px at 100% 0%, rgba(99,102,241,.06), transparent 55%),
        var(--bg);
    padding-bottom:40px;
}

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(12px);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:50;
}
.topbar-inner{
    max-width:1400px;
    margin:0 auto;
    padding:16px 24px;
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px;}
.brand-logo{
    font-size:24px;
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border-radius:12px;
    color:#fff;
    box-shadow:0 6px 16px rgba(59,130,246,.28);
}
.brand-title{font-size:17px;font-weight:700;letter-spacing:.2px;}
.brand-sub{font-size:13px;color:var(--muted);}

.week-switch{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:12px;
}
.btn-week{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 16px;
    background:var(--card);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:10px;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    transition:.15s;
    box-shadow:var(--shadow-sm);
}
.btn-week:hover{
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:var(--shadow);
}
.week-label{
    font-size:13px;
    font-weight:600;
    padding:6px 12px;
    border-radius:8px;
    letter-spacing:.3px;
}
.week-label-current{
    background:rgba(16,185,129,.12);
    color:var(--green);
}
.week-label-next{
    background:rgba(59,130,246,.12);
    color:var(--accent);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container{
    max-width:1400px;
    margin:24px auto;
    padding:0 24px;
}

/* ============================================================
   TABS
   ============================================================ */
.tabs{
    display:inline-flex;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:5px;
    margin-bottom:20px;
    box-shadow:var(--shadow-sm);
}
.tab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 20px;
    border-radius:9px;
    color:var(--text-2);
    text-decoration:none;
    font-weight:500;
    font-size:14px;
    transition:.18s;
}
.tab:hover{color:var(--text);background:var(--card-hi);}
.tab.active{
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;
    box-shadow:0 4px 12px rgba(59,130,246,.28);
}

/* ============================================================
   FILTERS
   ============================================================ */
.filters{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px 20px;
    margin-bottom:22px;
    box-shadow:var(--shadow-sm);
}
.filters label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.6px;
    font-weight:600;
    min-width:260px;
}
.filters label.wide{flex:1;max-width:640px;}
.filters select{
    appearance:none;
    background:var(--bg-soft-2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:9px;
    padding:11px 40px 11px 14px;
    font-size:14px;
    font-family:inherit;
    cursor:pointer;
    transition:.15s;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
        linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
    background-size:5px 5px;
    background-repeat:no-repeat;
}
.filters select:hover{border-color:var(--border-2);}
.filters select:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

/* ============================================================
   PLACEHOLDER
   ============================================================ */
.placeholder{
    padding:60px 24px;
    text-align:center;
    color:var(--muted);
    background:var(--card);
    border:1px dashed var(--border-2);
    border-radius:var(--radius);
    font-size:15px;
}

/* ============================================================
   WEEK CARD
   ============================================================ */
.week-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.week-head{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 22px;
    background:linear-gradient(135deg, rgba(59,130,246,.06), rgba(99,102,241,.06));
    border-bottom:1px solid var(--border);
}
.week-title{
    font-size:15px;
    font-weight:700;
    letter-spacing:.2px;
}
.week-dates{
    color:var(--text-2);
    font-size:14px;
}
.empty-week{
    padding:50px 22px;
    text-align:center;
    color:var(--muted);
    font-style:italic;
    font-size:14px;
}

/* ============================================================
   DESKTOP GRID
   ============================================================ */
.grid-scroll{
    overflow-x:auto;
}

.week-grid{
    border-collapse:separate;
    border-spacing:0;
    width:100%;
    table-layout:fixed;
}
.week-grid thead th{
    padding:12px 14px;
    background:var(--card-hi);
    color:var(--text-2);
    font-weight:600;
    font-size:13px;
    text-align:center;
    border-bottom:2px solid var(--border);
    border-right:1px solid var(--border);
    white-space:nowrap;
}
.week-grid thead th.wg-day{
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.6px;
    background:#eef2f7;
    width:170px;
    color:var(--muted);
}
.week-grid thead th.wg-group{
    color:var(--text);
    font-weight:700;
    letter-spacing:.2px;
    min-width:240px;
}

.week-grid tbody td{
    border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
    vertical-align:middle;
    padding:10px 12px;
    background:var(--card);
    font-size:13px;
}
.week-grid tbody tr:last-child td{border-bottom:none;}

.wg-day-cell{
    background:#f8fafc;
    text-align:center;
    vertical-align:middle;
    padding:10px 12px;
    border-right:2px solid var(--border);
}
.wg-day-date{
    font-size:13px;
    font-weight:600;
    color:var(--text);
    margin-bottom:3px;
}
.wg-day-name{
    font-size:12px;
    color:var(--muted);
}

.wg-pair{
    text-align:center;
    font-weight:700;
    font-size:15px;
    color:var(--accent);
    background:#f8fafc;
    width:60px;
}

.wg-cell{ text-align:center; transition:.12s; }
.wg-cell.empty{ background:#fbfcfe; }
.wg-cell.filled{ background:#fff; }

.wg-subject{
    font-weight:600;
    color:var(--text);
    font-size:13px;
    line-height:1.3;
    margin-bottom:2px;
}
.wg-teacher{
    color:var(--text-2);
    font-size:12px;
    line-height:1.3;
}
.wg-room{
    color:var(--accent);
    font-size:11px;
    font-weight:600;
    font-family:'Courier New',monospace;
    margin-top:3px;
    letter-spacing:.3px;
}
.wg-dash{color:#cbd5e1;}

.wg-split{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.wg-split .wg-subgroup{
    text-align:left;
    padding-top:6px;
    border-top:1px dashed var(--border);
}
.wg-split .wg-subgroup:first-child{
    padding-top:0;
    border-top:none;
}

.wg-subgroup-tag{
    display:inline-block;
    padding:1px 7px;
    margin-bottom:4px;
    background:rgba(99,102,241,.12);
    color:var(--accent-2);
    font-size:10px;
    font-weight:600;
    border-radius:8px;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.row-weekend .wg-day-cell,
.row-weekend .wg-cell,
.row-weekend .wg-pair{
    background:#f7f8fc;
}

tr.day-start td{border-top:2px solid var(--border);}
tr.day-start:first-child td{border-top:none;}

/* ============================================================
   TEACHER LIST
   ============================================================ */
.days{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.day-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}
.day-title{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:11px 18px;
    background:var(--card-hi);
    border-bottom:1px solid var(--border);
}
.day-name{font-weight:600;font-size:14px;}
.day-date{color:var(--muted);font-size:13px;}

.pair-card{
    display:flex;
    gap:16px;
    padding:14px 18px;
    border-top:1px solid var(--border);
}
.pair-card:first-of-type{border-top:none;}
.pair-no{
    flex:0 0 80px;
    align-self:flex-start;
    text-align:center;
    padding:8px 0;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;
    font-size:12px;
    font-weight:600;
    border-radius:9px;
    letter-spacing:.3px;
    box-shadow:0 4px 12px rgba(59,130,246,.25);
}
.pair-body{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.subject{font-size:14px;font-weight:500;color:var(--text);line-height:1.35;}
.room{
    font-size:12px;
    color:var(--accent);
    font-weight:600;
    font-family:'Courier New',monospace;
    letter-spacing:.3px;
}
.group-badge{
    display:inline-block;
    align-self:flex-start;
    padding:3px 10px;
    background:rgba(99,102,241,.10);
    color:var(--accent-2);
    font-size:11px;
    font-weight:600;
    border-radius:8px;
    letter-spacing:.3px;
    margin-bottom:4px;
}
.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.split-col{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding-left:10px;
    border-left:2px solid var(--border);
}
.split-col:first-child{border-left:none;padding-left:0;}
.tag{
    display:inline-block;
    align-self:flex-start;
    padding:1px 8px;
    background:rgba(99,102,241,.14);
    color:var(--accent-2);
    font-size:10px;
    font-weight:600;
    border-radius:8px;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:2px;
}

/* ============================================================
   MOBILE CARDS (students)
   ============================================================ */
.mobile-cards{ display:none; }

.m-day-card{
    border-top:1px solid var(--border);
}
.m-day-card:first-child{ border-top:none; }
.m-day-card.is-weekend{
    background:#f7f8fc;
}

.m-day-head{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:12px 16px;
    background:var(--card-hi);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:1;
}
.m-day-card.is-weekend .m-day-head{
    background:#eef2f7;
}
.m-day-title{
    font-size:14px;
    font-weight:700;
    color:var(--text);
    text-transform:capitalize;
}
.m-day-date{
    font-size:13px;
    color:var(--muted);
}

.m-day-body{
    display:flex;
    flex-direction:column;
}

.m-pair{
    padding:12px 14px;
    border-top:1px solid var(--border);
}
.m-pair:first-child{ border-top:none; }

.m-pair-no{
    display:inline-block;
    padding:3px 10px;
    margin-bottom:10px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;
    font-size:11px;
    font-weight:600;
    border-radius:8px;
    letter-spacing:.3px;
    box-shadow:0 3px 8px rgba(59,130,246,.22);
}

.m-pair-groups{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.m-group{
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
}

.m-group-name{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
    font-weight:700;
    color:var(--accent-2);
    margin-bottom:6px;
    padding-bottom:6px;
    border-bottom:1px dashed var(--border);
}
.m-group-course{
    font-size:11px;
    font-weight:500;
    color:var(--muted);
}

.m-subject{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    line-height:1.35;
    margin-bottom:2px;
}
.m-teacher{
    font-size:12px;
    color:var(--text-2);
    line-height:1.35;
}
.m-room{
    display:inline-block;
    margin-top:4px;
    padding:2px 8px;
    background:rgba(59,130,246,.10);
    color:var(--accent);
    font-size:11px;
    font-weight:600;
    font-family:'Courier New',monospace;
    border-radius:6px;
    letter-spacing:.3px;
}

.m-group-split{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.m-subgroup{
    padding-top:8px;
    border-top:1px dashed var(--border);
}
.m-subgroup:first-child{
    padding-top:0;
    border-top:none;
}
.m-subgroup-tag{
    display:inline-block;
    padding:1px 7px;
    margin-bottom:4px;
    background:rgba(99,102,241,.14);
    color:var(--accent-2);
    font-size:10px;
    font-weight:600;
    border-radius:8px;
    text-transform:uppercase;
    letter-spacing:.4px;
}

/* ============================================================
   NOTES & ANNOUNCEMENTS
   ============================================================ */

/* Примечание под предметом — мелкое, отдельной строкой */
.wg-note,
.m-note{
    font-size:12px;
    line-height:1.35;
    margin-top:2px;
    color:var(--text-2);
    white-space:normal;
    text-align:left;
}
.m-note{font-size:12px;}

/* Объявление — оранжевая плашка */
.wg-announcement{
    font-size:13px;
    font-weight:600;
    color:#b45309;
    background:rgba(245,158,11,.10);
    border:1px dashed rgba(245,158,11,.5);
    border-radius:8px;
    padding:6px 8px;
    line-height:1.35;
    text-align:left;
}
.m-announcement{
    font-size:13px;
    font-weight:600;
    color:#b45309;
    background:rgba(245,158,11,.10);
    border:1px dashed rgba(245,158,11,.5);
    border-radius:8px;
    padding:8px 10px;
    line-height:1.4;
    margin-bottom:4px;
}

/* Если ячейка/карточка покрашены — сохраняем рамку */
.wg-cell[style*="background"]{
    background-clip:padding-box;
}
.m-group[style*="background"]{
    border-color:rgba(0,0,0,.08);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
    max-width:1400px;
    margin:40px auto 0;
    padding:16px 24px;
    color:var(--muted);
    font-size:12px;
    text-align:center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Планшеты */
@media (max-width:900px){
    .topbar-inner{padding:14px 16px;}
    .container{padding:0 14px;}
    .filters label{min-width:0;width:100%;}
    .tab{padding:8px 14px;}

    /* Скрываем таблицу, показываем карточки */
    .desktop-only{ display:none !important; }
    .mobile-cards{ display:block; }
}

/* Телефоны */
@media (max-width:640px){
    .brand-title{font-size:15px;}
    .brand-sub{font-size:12px;}
    .week-switch{width:100%;justify-content:space-between;gap:8px;}

    .week-head{padding:12px 14px;flex-wrap:wrap;}
    .week-title{font-size:14px;}
    .week-dates{font-size:13px;}

    .pair-card{flex-direction:column;gap:8px;}
    .pair-no{flex:none;align-self:flex-start;padding:6px 12px;}
    .split{grid-template-columns:1fr;}
    .split-col{padding-left:0;border-left:none;border-top:1px dashed var(--border);padding-top:8px;}
    .split-col:first-child{border-top:none;padding-top:0;}

    .m-pair{padding:10px 12px;}
    .m-group{padding:9px 10px;}
    .m-subject{font-size:13px;}
}

/* ============================================================
   ТИП ЗАНЯТИЯ
   ============================================================ */
.wg-lesson-type,
.m-lesson-type{
    color:var(--muted);
    font-weight:400;
    font-size:0.92em;
    white-space:nowrap;
}