/* ═══════════════════════════════════════════════
   schedule.css — MD3 · Blue palette
   schedule.ewrazi4.ru
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&family=Google+Sans+Display:wght@400&family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');

/* ── Tokens: Light ── */
:root {
    --bg:           #F6F8FF;
    --surface:      #FEFBFF;
    --on-surface:   #1A1C22;
    --surf-var:     #DDE3F0;
    --on-surf-var:  #41484D;
    --shadow:       rgba(0,0,0,0.10);
    --shadow-md:    rgba(0,0,0,0.18);
    --tint:         rgba(0,99,176,0.04);
    --primary:      #0063B0;
    --on-primary:   #FFFFFF;
    --pri-con:      #D1E4FF;
    --on-pri-con:   #001D36;
    --outline:      #72787E;
    --outline-var:  #C1C7CE;
    --err:          #BA1A1A;
    --err-con:      #FFDAD6;
    --on-err-con:   #410002;
    --added-bg:   #D6F5E3; --added-on:   #0D3D22; --added-stripe:   #2E7D32;
    --removed-bg: #FFDAD6; --removed-on: #410002; --removed-stripe: #BA1A1A;
    --changed-bg: #FFF0CC; --changed-on: #3D2800; --changed-stripe: #C07000;
}

/* ── Tokens: Dark ── */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:           #1A1C22;
        --surface:      #22242B;
        --on-surface:   #E2E2E9;
        --surf-var:     #3A3D47;
        --on-surf-var:  #BEC5CC;
        --shadow:       rgba(0,0,0,0.40);
        --shadow-md:    rgba(0,0,0,0.60);
        --tint:         rgba(160,201,255,0.04);
        --primary:      #A0C9FF;
        --on-primary:   #003258;
        --pri-con:      #004A80;
        --on-pri-con:   #D1E4FF;
        --outline:      #8B9198;
        --outline-var:  #3A3D47;
        --err:          #FFB4AB;
        --err-con:      #93000A;
        --on-err-con:   #FFDAD6;
        --added-bg:   #0D3D22; --added-on:   #A8E6BF; --added-stripe:   #4CAF72;
        --removed-bg: #5C1A17; --removed-on: #FFCDD2; --removed-stripe: #E53935;
        --changed-bg: #3D2800; --changed-on: #FFD680; --changed-stripe: #D4900A;
    }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Roboto', sans-serif;
    background: var(--bg);
    color: var(--on-surface);
    min-height: 100vh;
}

/* Material Symbols */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 24px; line-height: 1;
    display: inline-block; user-select: none; vertical-align: middle;
}
.fill-1 { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ═══════════════════════════════════════
   LAYOUT — desktop rail + content
═══════════════════════════════════════ */
.layout {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: 64px 1fr;
    min-height: 100vh;
}
.app-bar  { grid-column: 1 / -1; }
.side-nav { grid-row: 2; }
.main-area { grid-row: 2; overflow-y: auto; }

@media (max-width: 719px) {
    .layout { grid-template-columns: 1fr; }
    .side-nav { display: none !important; }
    .main-area { padding-bottom: 80px; }
}

/* ═══════════════════════════════════════
   APP BAR
═══════════════════════════════════════ */
.app-bar {
    position: sticky; top: 0; z-index: 10;
    height: 64px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    background-image: linear-gradient(var(--tint), var(--tint));
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 1px 2px var(--shadow), 0 2px 6px var(--shadow);
    display: flex; align-items: center;
    padding: 0 16px 0 8px; gap: 4px;
}
.app-bar-title {
    font-family: 'Google Sans Display', sans-serif;
    font-size: 22px; font-weight: 400;
    color: var(--on-surface); flex: 1;
}
.icon-btn {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 50%; border: none; background: transparent;
    cursor: pointer; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--on-surf-var); position: relative;
}
.icon-btn::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: currentColor; opacity: 0; transition: opacity .2s;
}
.icon-btn:hover::before  { opacity: .08; }
.icon-btn:active::before { opacity: .14; }
.icon-btn .material-symbols-rounded { position: relative; z-index: 1; }

/* ═══════════════════════════════════════
   SIDE NAV (desktop)
═══════════════════════════════════════ */
.side-nav {
    display: flex; flex-direction: column;
    align-items: center; padding: 12px 0; gap: 4px;
    background: var(--surface);
    border-right: 1px solid var(--outline-var);
}
.side-nav-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 8px 0; width: 72px;
    border-radius: 16px; text-decoration: none;
    color: var(--on-surf-var); font-size: 11px;
    cursor: pointer; transition: background .15s, color .15s;
}
.side-nav-item:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.side-nav-item.active { background: var(--pri-con); color: var(--on-pri-con); }
.side-nav-item.active .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ═══════════════════════════════════════
   BOTTOM NAV (mobile)
═══════════════════════════════════════ */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
    height: 72px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--outline-var);
    align-items: center; justify-content: space-around;
}
@media (max-width: 719px) { .bottom-nav { display: flex; } }

.bottom-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 3px; padding: 6px 0;
    text-decoration: none; color: var(--on-surf-var); font-size: 11px;
}
.bnav-pill {
    width: 56px; height: 28px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.bottom-nav-item.active { color: var(--on-pri-con); }
.bottom-nav-item.active .bnav-pill { background: var(--pri-con); }
.bottom-nav-item.active .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ═══════════════════════════════════════
   PAGE CONTENT
═══════════════════════════════════════ */
.page {
    max-width: 680px; margin: 0 auto;
    padding: 20px 16px; display: flex; flex-direction: column; gap: 12px;
}
@media (max-width: 420px) { .page { padding: 12px 10px; } }

/* ═══════════════════════════════════════
   CARD
═══════════════════════════════════════ */
.card {
    background: var(--surface);
    background-image: linear-gradient(var(--tint), var(--tint));
    border-radius: 20px;
    box-shadow: 0 1px 3px var(--shadow), 0 2px 6px var(--shadow);
    padding: 16px 16px 16px 20px;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 10px;
    transition: box-shadow .2s, transform .2s;
    animation: fadeUp .3s cubic-bezier(.2,0,0,1) both;
}
.card:hover {
    box-shadow: 0 2px 4px var(--shadow-md), 0 4px 12px var(--shadow-md);
    transform: translateY(-1px);
}
.card::before {
    content: ''; position: absolute;
    left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: 20px 0 0 20px;
    background: var(--card-stripe, var(--primary));
}
.card-flat {
    background: var(--surf-var); border-radius: 16px;
    padding: 12px 14px;
}

/* ═══════════════════════════════════════
   LESSON ROW
═══════════════════════════════════════ */
.lesson-row {
    display: grid; grid-template-columns: 40px 1fr auto;
    gap: 12px; align-items: center;
    padding: 12px 14px 12px 18px;
    background: var(--surface);
    background-image: linear-gradient(var(--tint), var(--tint));
    border-radius: 16px;
    box-shadow: 0 1px 3px var(--shadow);
    position: relative; overflow: hidden;
    animation: fadeUp .28s cubic-bezier(.2,0,0,1) both;
    transition: transform .15s, box-shadow .15s;
}
.lesson-row:hover { transform: translateX(3px); box-shadow: 0 2px 8px var(--shadow-md); }
.lesson-row::before {
    content: ''; position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--ls, var(--primary));
}
.lesson-row.added   { --ls: var(--added-stripe);   }
.lesson-row.removed { --ls: var(--removed-stripe); opacity: .65; }
.lesson-row.changed { --ls: var(--changed-stripe); }

/* Stagger для lesson-row внутри контейнера */
.lesson-list .lesson-row:nth-child(1)  { animation-delay:   0ms; }
.lesson-list .lesson-row:nth-child(2)  { animation-delay:  35ms; }
.lesson-list .lesson-row:nth-child(3)  { animation-delay:  70ms; }
.lesson-list .lesson-row:nth-child(4)  { animation-delay: 105ms; }
.lesson-list .lesson-row:nth-child(5)  { animation-delay: 140ms; }
.lesson-list .lesson-row:nth-child(6)  { animation-delay: 175ms; }
.lesson-list .lesson-row:nth-child(7)  { animation-delay: 210ms; }
.lesson-list .lesson-row:nth-child(8)  { animation-delay: 245ms; }

.lesson-num {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--pri-con); color: var(--on-pri-con);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Google Sans', sans-serif; font-size: 17px; font-weight: 500;
}
.lesson-subject {
    font-family: 'Google Sans', sans-serif;
    font-size: 15px; font-weight: 500; color: var(--on-surface); line-height: 1.3;
}
.lesson-row.removed .lesson-subject { text-decoration: line-through; color: var(--on-surf-var); }
.lesson-meta {
    font-size: 13px; color: var(--on-surf-var);
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px;
}
.lesson-meta .material-symbols-rounded { font-size: 14px; }
.lesson-room {
    flex-shrink: 0; padding: 4px 10px; border-radius: 99px;
    background: var(--surf-var); color: var(--on-surf-var);
    font-size: 13px; font-weight: 500; white-space: nowrap;
}
.change-pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 99px;
    font-size: 11px; font-weight: 500; margin-top: 4px; width: fit-content;
}
.change-pill.added   { background:var(--added-bg);   color:var(--added-on);   }
.change-pill.removed { background:var(--removed-bg); color:var(--removed-on); }
.change-pill.changed { background:var(--changed-bg); color:var(--changed-on); }

/* ═══════════════════════════════════════
   DATE CHIPS
═══════════════════════════════════════ */
.date-strip {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px;
    scrollbar-width: none;
}
.date-strip::-webkit-scrollbar { display: none; }
.date-chip {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
    padding: 8px 14px; border-radius: 14px;
    border: 1px solid var(--outline-var); background: transparent;
    color: var(--on-surf-var); cursor: pointer;
    transition: all .18s cubic-bezier(.2,0,0,1);
}
.date-chip:hover { border-color: var(--primary); color: var(--on-surface); }
.date-chip.today { border-color: var(--primary); color: var(--primary); }
.date-chip.selected {
    background: var(--primary); border-color: var(--primary);
    color: var(--on-primary); box-shadow: 0 2px 8px var(--shadow-md);
}
.dc-day { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.dc-num { font-size: 21px; font-weight: 400; line-height: 1.15; }
.dc-mon { font-size: 11px; opacity: .75; }

/* ═══════════════════════════════════════
   MISC COMPONENTS
═══════════════════════════════════════ */
.section-label {
    font-size: 11px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .7px; color: var(--on-surf-var); padding: 8px 0 4px;
}
.info-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--pri-con); color: var(--on-pri-con);
    border-radius: 14px; font-family: 'Google Sans',sans-serif;
    font-size: 14px; font-weight: 500;
}
.info-chip .material-symbols-rounded { font-size: 18px; }
.info-chip a { margin-left: auto; color: var(--primary); font-size: 13px; text-decoration: none; }
.info-chip a:hover { text-decoration: underline; }

.changes-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--changed-bg);
    color: var(--changed-on); border-radius: 14px; font-size: 13px; font-weight: 500;
}

/* Skeleton */
.skel {
    border-radius: 16px; height: 68px;
    background: linear-gradient(90deg,
        var(--surf-var) 25%,
        color-mix(in srgb, var(--surf-var) 60%, var(--surface)) 50%,
        var(--surf-var) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* Buttons */
.btn-filled {
    height: 44px; padding: 0 24px; border-radius: 100px; border: none;
    background: var(--primary); color: var(--on-primary);
    font-family: 'Google Sans',sans-serif; font-size: 15px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
    transition: box-shadow .2s; user-select: none;
}
.btn-filled::after { content:''; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .15s; }
.btn-filled:hover  { box-shadow: 0 2px 8px var(--shadow-md); }
.btn-filled:hover::after  { opacity:.08; }
.btn-filled:active::after { opacity:.14; }
.btn-filled:disabled { opacity:.38; pointer-events:none; }

.btn-tonal {
    height: 40px; padding: 0 20px; border-radius: 100px; border: none;
    background: var(--pri-con); color: var(--on-pri-con);
    font-family: 'Google Sans',sans-serif; font-size: 14px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
}
.btn-tonal::after  { content:''; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .15s; }
.btn-tonal:hover::after  { opacity:.08; }
.btn-tonal:active::after { opacity:.14; }

.btn-text {
    height: 36px; padding: 0 12px; border-radius: 100px; border: none;
    background: transparent; color: var(--primary);
    font-family: 'Google Sans',sans-serif; font-size: 14px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
}
.btn-text::after  { content:''; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .15s; }
.btn-text:hover::after  { opacity:.08; }
.btn-text:active::after { opacity:.12; }

/* Settings components */
.role-row { display: flex; gap: 10px; }
.role-btn {
    flex: 1; height: 52px; border-radius: 16px;
    border: 1.5px solid var(--outline-var); background: transparent;
    color: var(--on-surf-var); font-family: 'Google Sans',sans-serif;
    font-size: 14px; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: all .18s;
}
.role-btn .material-symbols-rounded { font-size: 20px; }
.role-btn.active { background:var(--pri-con); color:var(--on-pri-con); border-color:var(--primary); }

.class-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.class-chip {
    width: 62px; height: 44px; border-radius: 12px;
    border: 1px solid var(--outline-var); background: transparent;
    color: var(--on-surf-var); font-family: 'Google Sans',sans-serif;
    font-size: 15px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s;
}
.class-chip:hover { border-color: var(--primary); color: var(--on-surface); }
.class-chip.sel   { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.teacher-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 8px;
    border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--on-surface);
    transition: background .15s;
}
.teacher-item:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.teacher-item.sel   { background: var(--pri-con); color: var(--on-pri-con); }
.t-check {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid var(--outline-var);
    display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.teacher-item.sel .t-check { background:var(--primary); border-color:var(--primary); }

.search-field {
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px; height: 48px; border-radius: 12px;
    border: 1px solid var(--outline-var); background: var(--bg);
    transition: border-color .2s, box-shadow .2s;
}
.search-field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.search-field .material-symbols-rounded { color:var(--on-surf-var); font-size:20px; }
.search-field input {
    flex:1; border:none; background:transparent;
    font-family:'Roboto',sans-serif; font-size:15px; color:var(--on-surface); outline:none;
}
.search-field input::placeholder { color:var(--outline); }

.empty-state {
    display: flex; flex-direction: column; align-items: center;
    padding: 64px 24px; text-align: center; gap: 12px;
}
.empty-state .material-symbols-rounded { font-size: 56px; color: var(--outline); }
.empty-title { font-family:'Google Sans',sans-serif; font-size:18px; font-weight:500; color:var(--on-surface); }
.empty-sub   { font-size:14px; color:var(--on-surf-var); line-height:1.6; max-width:260px; }

.hidden { display: none !important; }

.snackbar {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #1F2937; color: #F3F4F6;
    padding: 14px 20px; border-radius: 4px; font-size: 14px;
    box-shadow: 0 3px 8px rgba(0,0,0,.4);
    z-index: 999; white-space: nowrap;
    transition: transform .25s cubic-bezier(.2,0,0,1), opacity .25s;
    opacity: 0; pointer-events: none;
}
.snackbar.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }