/* ===========================================================================
   PHARMENTA · ПУБЛИЧНА ЧАСТ — дизайн система
   ---------------------------------------------------------------------------
   Изградена по образеца на съвременните учебни платформи: приложението
   „плава" като бяло заоблено платно върху светъл неутрален фон, вляво стои
   тясна лента с иконки, до нея — колона с навигация, а съдържанието е в
   просторни карти.

   Три решения носят облика:

   1. ВЪЗДУХ. Разстоянията са щедри, ъглите заоблени, сенките едва доловими.
      Това е екран, в който студентът престоява — не таблица, която се сканира.
      (Администрацията е точно обратното и затова има свой отделен стил.)

   2. ЦВЯТ ЗА РАЗПОЗНАВАНЕ. Всеки модул има собствен цвят, който го следва
      навсякъде: в иконката, в плочката, в менюто. Окото намира „Обучение"
      по цвета, преди да е прочело думата.

   3. СТАТУС ПРЕЗ ФОРМА, НЕ САМО ЧРЕЗ ЦВЯТ. Напредъкът е пръстен, присъствието
      е точка, срокът е значка. Работи и при далтонизъм, и на черно-бял печат.

   Шрифтът е Roboto нарочно. По-модерните геометрични шрифтове носят
   българските ръкописни форми на буквите и ги включват сами при lang="bg" —
   „т" става „m", „д" става „g". В интерфейс изглежда несериозно. Затова
   по-долу изрично се гаси и самата OpenType функция „locl".
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --bg:          #E9E9EC;
    --panel:       #FFFFFF;
    --surface:     #FFFFFF;
    --surface-2:   #F7F8F9;
    --rail:        #FFFFFF;
    --nav:         #FCFCFD;

    --line:        #ECECEF;
    --line-soft:   #F2F2F4;

    --text:        #16181D;
    --muted:       #6B7280;
    --faint:       #9AA1AC;

    /* Основен цвят — зелено, защото платформата е фармацевтична.
       За индигото от образеца се сменят само тези пет реда. */
    --primary:      #0F7A66;
    --primary-dark: #0B6152;
    --primary-soft: #E8F4F1;
    --primary-ring: rgba(15, 122, 102, .18);
    --on-primary:   #FFFFFF;

    /* Цвят на всеки модул + бледа подложка към него */
    --m-subjects:   #3B6FE0;  --m-subjects-bg:  #EAF0FD;
    --m-knowledge:  #7A5AF0;  --m-knowledge-bg: #F0EDFE;
    --m-pharmacy:   #E0663B;  --m-pharmacy-bg:  #FDEFEA;
    --m-surveys:    #C8952A;  --m-surveys-bg:   #FBF3E2;
    --m-pateki:     #12A594;  --m-pateki-bg:    #E4F6F3;
    --m-resources:  #8A6D3B;  --m-resources-bg: #F6F1E6;

    --ok:      #17835B;  --ok-bg:      #E6F5EE;
    --warn:    #B7791F;  --warn-bg:    #FBF2E0;
    --danger:  #C0392B;  --danger-bg:  #FBEBE9;
    --info:    #2A6FBF;  --info-bg:    #E8F1FB;

    --r-lg: 16px;
    --r-md: 12px;
    --r-sm: 9px;

    --shadow-panel: 0 1px 2px rgba(20,24,32,.04), 0 12px 40px rgba(20,24,32,.08);
    --shadow-card:  0 1px 2px rgba(20,24,32,.04);
    --shadow-pop:   0 8px 30px rgba(20,24,32,.14);

    --sans: Roboto, 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 14.5px/1.6 var(--sans);
    font-feature-settings: 'tnum' 1, 'locl' 0;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 12px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 15.5px; }
p  { margin: 0 0 12px; }

/* ══════════════════════════════════════════════════════ ПЛАВАЩО ПЛАТНО ══
   Платното е висок колкото екрана. Лентата НЕ се скролва заедно със
   съдържанието — затова долната ѝ част (изгледът, изходът, профилът) стои
   винаги пред очите, а не най-долу в дълга страница. */

:root {
    --side-w: 258px;
    /* Ширина на четимата колона. При дълъг текст редът не бива да е безкраен —
       окото се губи при връщането на нов ред. Затова има таван. */
    --content-max: 1180px;
}
/* Свита лента: платното вече не се дели с менюто, значи съдържанието взима
   целия екран. Иначе отдясно остава празна ивица и свиването не печели нищо. */
html.side-collapsed { --side-w: 74px; --content-max: none; }

/* Скролва се САМАТА СТРАНИЦА, не кутия вътре в нея.
   Вътрешният скрол изглежда добре на голям екран, но чупи навика: колелцето
   понякога движи страницата, понякога кутията, лентата на браузъра се появява
   и изчезва, а на лаптоп съдържанието се смалява до тясна ивица.
   --bar-h е височината на лента над платното („Виж като"), ако има такава. */
html { scroll-behavior: smooth; }

.app {
    display: grid;
    grid-template-columns: var(--side-w) 1fr;
    min-height: calc(100vh - 36px - var(--bar-h, 0px));
    margin: 18px;
    background: var(--panel);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-panel);
    /* clip, не hidden. `overflow: hidden` прави от панела превъртаща се
       кутия, а `position: sticky` се лепи за НАЙ-БЛИЗКАТА такава кутия. Тя
       обаче не се превърта — превърта се страницата — затова лентата вляво
       нямаше за какво да се хване и си отиваше нагоре заедно с текста.

       `overflow: clip` отрязва точно по същия начин (заоблените ъгли си
       остават), но НЕ прави превъртаща се кутия. Така лепенето се хваща за
       прозореца и долната част на лентата стои на дъното на екрана. */
    overflow: clip;
    /* Плавно преоразмеряване при свиване на менюто. Анимира се решетката, не
       ширината на лентата: така дясната част се намества ЗАЕДНО с нея, а не
       подскача след нея.
       Спирането при „намалено движение" идва от общото правило в края на
       файла, което гаси всички преходи. */
    transition: grid-template-columns .2s ease;
}
/* Съдържанието е колона, за да може долната лента да се закове за дъното.
   Без това при кратка страница тя увисва в средата, точно под последната
   карта, и изглежда като част от съдържанието. */
.main {
    padding: 26px 30px 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* Децата не се свиват: в колона по подразбиране те биха се сплескали,
   когато съдържанието е по-високо от екрана. */
.main > * { flex-shrink: 0; }
/* Лентата за чекиране стои най-отгоре в съдържанието и се лепи там. */
.main > #att-reminder {
    position: sticky; top: 0; z-index: 12;
    margin: -26px -30px 20px; border-radius: 0;
}

/* ── Лентата ───────────────────────────────────────────────────────────── */
/* Лентата се лепи: страницата се скролва под нея, а менюто остава пред
   очите. Собствената ѝ височина е колкото екрана, за да стои и долната част
   на дъното. */
.side {
    background: var(--nav);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    /* top: 18px — колкото е и полето около панела. При top: 0 лентата се
       залепваше за самия ръб на прозореца и отдолу ѝ оставаше двойно поле. */
    position: sticky; top: 18px; align-self: start;
    height: calc(100vh - 36px - var(--bar-h, 0px));
    overflow: hidden;
}
.side__top {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 14px; min-height: 62px;
}
.side__logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.side__brand { font-size: 18px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.side__toggle {
    margin-left: auto; width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; border-radius: 8px; color: var(--faint); cursor: pointer;
}
.side__toggle:hover { background: #F0F1F3; color: var(--text); }
.side__toggle svg { width: 17px; height: 17px; transition: transform .18s; }

/* Само списъкът се скролва, ако модулите станат много. */
.side__nav { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; }

.side__group {
    font-size: 11.5px; color: var(--faint); font-weight: 500;
    padding: 0 10px; margin: 16px 0 6px;
}
.side__item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 10px; border-radius: var(--r-sm); margin-bottom: 2px;
    color: var(--muted); text-decoration: none; font: 400 14px var(--sans);
    background: none; border: 0; cursor: pointer; text-align: left;
}
.side__item:hover { background: #F0F1F3; color: var(--text); text-decoration: none; }
.side__item.is-active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 500; }
.side__ico {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.side__ico svg { width: 15px; height: 15px; }
.side__label { white-space: nowrap; overflow: hidden; }

/* ── Долната част — закована за дъното на лентата ─────────────────────── */
.side__bottom { padding: 10px 12px 12px; border-top: 1px solid var(--line); flex-shrink: 0; }
.side__act { font-size: 13.5px; }
.side__user {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px; padding: 9px 10px; border-radius: var(--r-sm);
    text-decoration: none; color: inherit;
}
.side__user:hover { background: #F0F1F3; text-decoration: none; }
/* Инициали ИЛИ снимка — едно и също място, за да не подскача редът,
   когато човек си качи снимка. */
.side__avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: 13px;
    object-fit: cover;
}
.side__who { display: flex; flex-direction: column; overflow: hidden; }
.side__who b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__who i { font-size: 12px; font-style: normal; color: var(--muted); white-space: nowrap; }

/* ── Свито състояние ───────────────────────────────────────────────────── */
html.side-collapsed .side__brand,
html.side-collapsed .side__label,
html.side-collapsed .side__group,
html.side-collapsed .side__who { display: none; }
html.side-collapsed .side__top { justify-content: center; padding: 16px 8px; }
html.side-collapsed .side__logo { display: none; }
html.side-collapsed .side__toggle { margin: 0; }
html.side-collapsed .side__toggle svg { transform: rotate(180deg); }
html.side-collapsed .side__item,
html.side-collapsed .side__user { justify-content: center; padding-left: 0; padding-right: 0; }
html.side-collapsed .side__nav,
html.side-collapsed .side__bottom { padding-left: 8px; padding-right: 8px; }

/* Цветовете на модулите — в лентата и в плочките */
.ico-subjects  { background: var(--m-subjects-bg);  color: var(--m-subjects); }
.ico-knowledge { background: var(--m-knowledge-bg); color: var(--m-knowledge); }
.ico-pharmacy  { background: var(--m-pharmacy-bg);  color: var(--m-pharmacy); }
.ico-surveys   { background: var(--m-surveys-bg);   color: var(--m-surveys); }
.ico-pateki    { background: var(--m-pateki-bg);    color: var(--m-pateki); }
.ico-resources { background: var(--m-resources-bg); color: var(--m-resources); }
.ico-default   { background: var(--primary-soft);   color: var(--primary); }

/* Слънце и луна стоят едно върху друго и се сменят от стиловете —
   така няма примигване и не се пише JavaScript за рисуването им. */
#theme-toggle .side__ico svg:nth-child(2) { display: none; }
html[data-theme="dark"] #theme-toggle .side__ico svg:nth-child(1) { display: none; }
html[data-theme="dark"] #theme-toggle .side__ico svg:nth-child(2) { display: block; }
html[data-theme="dark"] #theme-toggle .side__label::after { content: ' (вкл.)'; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); margin-top: 5px; font-size: 14px; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tab { padding: 0 0 11px; background: none; border: 0; cursor: pointer; font: 400 14.5px var(--sans); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); font-weight: 500; border-bottom-color: var(--text); }

/* ═══════════════════════════════════════════════════════════════ КАРТИ ══ */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-card); margin-bottom: 18px; overflow: hidden; }
.card__head { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card__head h2, .card__head h3 { margin: 0; font-size: 15px; font-weight: 500; }
.card__body { padding: 18px; }
.card__body > *:first-child { margin-top: 0; }
.card__body > *:last-child { margin-bottom: 0; }
.card__foot { padding: 14px 18px; border-top: 1px solid var(--line-soft); background: var(--surface-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
/* 65 на 35, през цялата ширина. minmax(0,…) е задължително: без него
   дълга дума в колоната я разширява отвъд дела ѝ и при свиване на менюто
   двете колони спират да са в съотношение. */
.grid-main { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); align-items: start; }
.col-main, .col-side { min-width: 0; }

/* ═════════════════════════════════════════════════════ ПЛОЧКИ НА МОДУЛИ ══ */

.tiles, .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.tile {
    display: block; padding: 18px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.tile:hover { box-shadow: 0 4px 18px rgba(20,24,32,.10); transform: translateY(-1px); border-color: #DFE1E5; text-decoration: none; }
.tile__ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.tile__ico svg { width: 21px; height: 21px; }
.tile__name { font-weight: 500; font-size: 15px; margin-bottom: 4px; }
.tile__desc { color: var(--muted); font-size: 13px; line-height: 1.5; }
.tile--off { opacity: .55; }

/* ══════════════════════════════════════════════════════════════ БУТОНИ ══ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: var(--surface); color: var(--text); font: 500 14px var(--sans); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--surface-2); border-color: #DFE1E5; text-decoration: none; }
.btn-primary, .btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover, .btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-ghost { background: transparent; }
.btn-danger, .btn--danger { color: var(--danger); border-color: #EFCFCB; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm, .btn--sm { padding: 6px 13px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════ ФОРМИ ══ */

label { display: block; font-weight: 500; font-size: 13.5px; margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], input[type=time],
input:not([type]), select, textarea {
    width: 100%; padding: 11px 13px; border: 1px solid #E1E3E7; border-radius: var(--r-sm);
    font: 400 14.5px var(--sans); background: var(--surface); color: var(--text);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--primary); }
.pw-hint, .hint, small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.checkbox-row label { margin: 0; font-weight: 400; font-size: 13.5px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 170px; }

/* ═════════════════════════════════════════════════════════════ ТАБЛИЦИ ══ */

table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
.table-wrap { overflow-x: auto; border-radius: var(--r-md); }

/* ════════════════════════════════════════════════════ ЗНАЧКИ И СЪСТОЯНИЯ ══ */

.badge, .pill, .tag {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px;
    font-size: 12.5px; font-weight: 500; white-space: nowrap;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.badge-green, .pill--green, .badge-teal { background: var(--ok-bg);     color: var(--ok);     border-color: #CCE7DA; }
.badge-amber, .pill--yellow             { background: var(--warn-bg);   color: var(--warn);   border-color: #EEDDB8; }
.badge-red,   .pill--red                { background: var(--danger-bg); color: var(--danger); border-color: #EFCFCB; }
.pill--blue, .badge-blue, .tag-mail      { background: var(--info-bg);   color: var(--info);   border-color: #CCE0F5; }
.badge-gray                              { background: var(--surface-2); color: var(--muted); }
.tag-author { background: var(--primary-soft); color: var(--primary-dark); border-color: #C8E4DD; }

.ring { --p: 0; --c: var(--primary); width: 42px; height: 42px; position: relative; flex-shrink: 0; }
.ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), #EDEEF1 0); }
.ring::after  { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.ring > span  { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 500; z-index: 1; }

.bar { height: 7px; border-radius: 100px; background: #EDEEF1; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 100px; background: var(--primary); }

/* ═══════════════════════════════════════════════════════════ СЪОБЩЕНИЯ ══ */

.alert { padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 18px; font-size: 13.5px; border: 1px solid var(--line); }
.alert-ok    { background: var(--ok-bg);     color: #126546; border-color: #CCE7DA; }
.alert-error { background: var(--danger-bg); color: #96281B; border-color: #EFCFCB; }
.alert-info  { background: var(--info-bg);   color: #1F5590; border-color: #CCE0F5; }

.empty { padding: 46px 20px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--text); font-size: 15.5px; font-weight: 500; margin-bottom: 6px; }

/* ══════════════════════════════════════════════════════════════ ДИАЛОГ ══ */

.modal-bg { position: fixed; inset: 0; z-index: 200; background: rgba(16,20,26,.45); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.modal { background: var(--surface); border-radius: var(--r-lg); padding: 26px 28px; max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-pop); }
/* ── Лента с раздели ───────────────────────────────────────────────────────
   Един и същ елемент на няколко екрана: занятие, предмет, „Ресурси".
   Затова стои тук, а не в стила на един модул — иначе екранът, който не
   зарежда онзи файл, показва голи бутони. */
.ses-tabs {
    display: flex; gap: 4px; margin-bottom: 18px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 6px; overflow-x: auto;
}
.ses-tab {
    display: flex; align-items: center; gap: 9px; white-space: nowrap;
    padding: 9px 14px; border-radius: var(--r-sm);
    border: 0; background: none; cursor: pointer;
    font: 400 14px var(--sans); color: var(--muted);
}
.ses-tab:hover { background: var(--surface-2); color: var(--text); }
.ses-tab.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 500; }
.ses-tab svg { width: 16px; height: 16px; }
.ses-tab__n {
    font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 100px;
    background: var(--surface-2); color: var(--muted);
}
.ses-tab.active .ses-tab__n { background: var(--surface); color: var(--primary); }

/* Широкият диалог е за избор от списък — кутийките трябва да се четат, без
   да се скролва на всеки ред. */
.modal--wide { max-width: 980px; }
.modal h3 { margin: 0 0 18px; font-size: 18px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }

/* ═════════════════════════════════════════════════════════════ ВХОДЪТ ══ */

.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 18px; }
/* Входът и изборът НЕ са платно — там страницата трябва да може да се
   скролва, ако формата не се побира (регистрацията е дълга). */
/* Екраните за вход и без това нямат платно. */
.auth__box { width: 100%; max-width: 440px; background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); padding: 34px 34px 30px; }
.auth__brand { text-align: center; margin-bottom: 24px; }
.auth__brand img { width: 54px; height: auto; }
.auth__brand .ttl { font-size: 21px; font-weight: 500; margin-top: 12px; letter-spacing: -.02em; }
.auth__brand .uni { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.45; }
.auth__switch { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════ ДРЕБНИ ══ */

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.right { text-align: right; }
/* `display` на класа бие вграденото правило на браузъра за [hidden], затова
   скритият бутон си оставаше видим: `.btn { display: inline-flex }` е
   по-силно от `[hidden] { display: none }`. Това важи за всеки елемент с
   зададен display — затова правилото е тук, а не при бутоните. */
/* ══════════════════════════════════════════════════ ЛЕНТА „ЗАРЕЖДА СЕ" ══
   Тънка черта най-горе, през целия прозорец — включително над лентата
   вляво. Един сигнал на едно място вместо шейсет и пет надписа „Зареждане…"
   из екраните.

   ЗАЩО 90% И ЗАБАВЯНЕ ОТ 8 СЕКУНДИ
   Колко още остава не се знае. Лентата расте бързо в началото и все
   по-бавно после (cubic-bezier с рязко начало), без никога да стигне края.
   Запълва се докрай чак когато отговорът дойде. Така движението показва
   „работи се", а не измислен напредък.

   ЗАЩО НЕ ЗАКРИВА НИЩО
   Три пиксела височина и pointer-events: none. Работата по екрана не спира
   заради нея — може да се щракне друг раздел, докато текущият още се
   зарежда.

   top следва лентата „Виж като", когато я има: закована на нула тя щеше да
   лежи върху надписа ѝ. */
.uiload {
    position: fixed; top: var(--bar-h, 0px); left: 0; right: 0;
    height: 3px; z-index: 300; pointer-events: none;
    opacity: 0; transition: opacity .15s linear;
}
.uiload.is-on { opacity: 1; }
/* Изгасването е по-бавно от паленето: рязко изчезване изглежда като
   премигване, а плавното се чете като „готово". */
.uiload.is-done { opacity: 0; transition: opacity .3s ease .05s; }

.uiload__fill {
    display: block; height: 100%; width: 0;
    background: var(--primary);
    /* Малко сияние вдясно — така движението се усеща и при тънка черта. */
    box-shadow: 0 0 8px var(--primary), 0 0 3px var(--primary);
    transition: width 8s cubic-bezier(.08, .82, .17, 1);
}
.uiload.is-done .uiload__fill { transition: width .2s ease-out; }

/* При „намалено движение" лентата не пълзи, а стои и пулсира слабо:
   движението е точно това, от което тази настройка пази. */
@media (prefers-reduced-motion: reduce) {
    .uiload__fill { transition: none; width: 100% !important; opacity: .45; }
    .uiload.is-on .uiload__fill { animation: uiload-pulse 1.2s ease-in-out infinite; }
    @keyframes uiload-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
}

[hidden] { display: none !important; }
.hidden { display: none !important; }
.mt0 { margin-top: 0 !important; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 18px; }
.flex { display: flex; align-items: center; }
.gap8 { gap: 8px; }
.gap12 { gap: 12px; }
/* Обвивка на съдържанието. Ширината идва от --content-max: при свита лента
   тя отпада и екранът се ползва целият.
   .page е за страници вътре в платното (то вече слага отстъп);
   .wrap е за стари екрани, които сами си слагат отстъп. */
.page { max-width: var(--content-max); margin: 0 auto; }
/* Табла и списъци, които печелят от цялата ширина: тук таванът за четимост
   не важи, защото няма дълъг текст за четене — има карти и таблици. */
.page--wide { max-width: none; margin: 0; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 26px 20px 60px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* На екраните за вход платното го няма — лентата стои направо в страницата
   и се нуждае от собствени отстъпи, за да не залепне за краищата. */
body.auth-page .app-footer,
body.auth .app-footer {
    margin: 0; padding: 14px 24px; max-width: var(--content-max);
    margin-left: auto; margin-right: auto; border-top: 0;
}

/* Долната лента е в края на съдържанието, не под платното, и се лепи за
   дъното: margin-top:auto изяжда останалото празно място. */
.app-footer {
    margin: 34px -30px 0; padding: 14px 30px;
    margin-top: auto;
    border-top: 1px solid var(--line-soft);
    color: var(--faint); font-size: 12.5px;
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

#att-reminder { background: var(--warn); color: #fff; }
.att-rem-inner { padding: 10px 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.att-rem-label { font-weight: 500; font-size: 13.5px; }
.att-rem-list { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.att-rem-item { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.2); border-radius: var(--r-sm); padding: 5px 11px; color: #fff; text-decoration: none; font-size: 13px; }
.att-rem-item:hover { background: rgba(255,255,255,.32); text-decoration: none; }
.att-rem-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* ===========================================================================
   СЪВМЕСТИМОСТ СЪС СТАРАТА РАЗМЕТКА
   ---------------------------------------------------------------------------
   Екраните на модулите се рисуват от собствените си скриптове и ползват
   старите имена на класове. Вместо да се пренаписват хиляди редове, тук им
   се дава новият облик — така и всеки бъдещ модул изглежда правилно.
   =========================================================================== */

.topbar { background: var(--panel); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: var(--content-max); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 14px; }
.topbar-inner .uni { color: var(--muted); font-size: 12.5px; }
.topbar-inner .ttl { font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13.5px; }
.topbar-right a, .topbar-right a:visited { color: var(--muted) !important; }
.topbar-right a:hover { color: var(--text) !important; }
.logo-box img { width: 38px; height: auto; }
.home-grid { display: grid; gap: 18px; }

.card > h1, .card > h2, .card > h3, .card > p, .card > label,
.card > input, .card > select, .card > textarea, .card > .row,
.card > .flex, .card > button, .card > .btn,
.card > div:not(.card__head):not(.card__body):not(.card__foot):not(.table-wrap) { margin-left: 18px; margin-right: 18px; }
.card > *:first-child { margin-top: 18px; }
.card > *:last-child { margin-bottom: 18px; }
.card > .card__head, .card > .card__body, .card > .card__foot,
.card > .table-wrap, .card > table { margin: 0 !important; }

/* ══════════════════════════════════════════════════════════════ ТЕЛЕФОН ══ */

@media (max-width: 1000px) {
    .app { grid-template-columns: 1fr; margin: 0; border-radius: 0;
           min-height: calc(100vh - var(--bar-h, 0px)); grid-template-rows: auto 1fr; }
    /* На телефон лентата не се лепи: тя е хоризонтална ивица отгоре. */
    .side { position: static; height: auto; }
    .rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; gap: 8px; }
    .rail__logo { margin: 0 8px 0 0; }
    .nav { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; flex-direction: row; overflow-x: auto; gap: 6px; }
    .nav__title, .nav__group, .nav__foot { display: none; }
    .nav__item { white-space: nowrap; margin: 0; }
    .main { padding: 18px 16px 0; }
    .main > #att-reminder { top: -18px; margin: -18px -16px 16px; }
    .app-footer { margin: 28px -16px 0; padding: 14px 16px; }
    .grid-2, .grid-3, .grid-main { grid-template-columns: 1fr; }
    .att-rem-inner, .app-footer { padding-left: 16px; padding-right: 16px; }
    .modal { padding: 20px 18px; }
    .modal-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print {
    .rail, .nav, .app-footer, #att-reminder, .page-head__actions { display: none; }
    body { background: #fff; }
    .app { display: block; margin: 0; box-shadow: none; border-radius: 0; }
}

/* ===========================================================================
   ВЪНШНИТЕ БИБЛИОТЕКИ ПОД НАШИЯ ОБЛИК
   ---------------------------------------------------------------------------
   flatpickr и tom-select идват със свои стилове. Тук се привеждат към същите
   цветове, радиуси и шрифт, за да не личи, че са отвън.
   =========================================================================== */

.flatpickr-calendar {
    border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-pop); font-family: var(--sans); font-size: 14px;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--line); }
.flatpickr-months .flatpickr-month { color: var(--text); fill: var(--text); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 500; }
.flatpickr-weekday { color: var(--muted); font-weight: 500; font-size: 12px; }
.flatpickr-day { border-radius: var(--r-sm); color: var(--text); }
.flatpickr-day:hover { background: var(--surface-2); border-color: var(--surface-2); }
.flatpickr-day.today { border-color: var(--primary); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--faint); }
.flatpickr-time input { border: 0 !important; box-shadow: none !important; }
.numInputWrapper:hover { background: var(--surface-2); }

.ts-wrapper { font-family: var(--sans); font-size: 14.5px; }
.ts-wrapper.single .ts-control,
.ts-wrapper .ts-control {
    border: 1px solid #E1E3E7; border-radius: var(--r-sm);
    padding: 10px 13px; background: var(--surface); box-shadow: none; min-height: 44px;
}
.ts-wrapper.focus .ts-control { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.ts-dropdown {
    border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-pop); margin-top: 6px; overflow: hidden;
}
.ts-dropdown .option { padding: 10px 13px; }
.ts-dropdown .active { background: var(--primary-soft); color: var(--primary-dark); }
.ts-dropdown .no-results { padding: 12px 13px; color: var(--muted); }
.ts-control input::placeholder { color: var(--faint); }

/* ===========================================================================
   ТЪМЕН ИЗГЛЕД
   ---------------------------------------------------------------------------
   Фонът не е черен, а много тъмно синьо-зелено: чисто черно с бял текст
   блести и уморява при дълго четене.
   Изгледът се прилага от PHP още при изписването на страницата (по бисквитка),
   за да няма примигване в бяло при всяко отваряне.
   =========================================================================== */

html[data-theme="dark"] {
    --bg:        #0C0F12;
    --panel:     #14181C;
    --surface:   #14181C;
    --surface-2: #1A1F24;
    --rail:      #14181C;
    --nav:       #171C21;

    --line:      #262D34;
    --line-soft: #1F252B;

    --text:      #E4E8EC;
    --muted:     #97A1AC;
    --faint:     #6B7580;

    --primary:      #2FB89A;
    --primary-dark: #46CBAD;
    --primary-soft: #14312B;
    --primary-ring: rgba(47, 184, 154, .22);
    --on-primary:   #06231D;

    /* Цветовете се изсветляват — наситените тонове изчезват върху тъмно. */
    --m-subjects:  #7AA2F7;  --m-subjects-bg:  #17233A;
    --m-knowledge: #A98BFF;  --m-knowledge-bg: #241E3A;
    --m-pharmacy:  #F0885C;  --m-pharmacy-bg:  #33201A;
    --m-surveys:   #E0B44E;  --m-surveys-bg:   #33291344;
    --m-pateki:    #3DD6BE;  --m-pateki-bg:    #123029;
    --m-resources: #D3B172;  --m-resources-bg: #2B2518;

    --ok:     #4ED08F;  --ok-bg:     #122B20;
    --warn:   #DFAE4E;  --warn-bg:   #302512;
    --danger: #EB6F62;  --danger-bg: #331A18;
    --info:   #6BA8E8;  --info-bg:   #15263A;

    --shadow-panel: 0 1px 2px rgba(0,0,0,.5), 0 12px 40px rgba(0,0,0,.45);
    --shadow-card:  0 1px 2px rgba(0,0,0,.35);
    --shadow-pop:   0 8px 30px rgba(0,0,0,.55);

    color-scheme: dark;
}

html[data-theme="dark"] .side__item:hover,
html[data-theme="dark"] .side__user:hover,
html[data-theme="dark"] .side__toggle:hover { background: var(--surface-2); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
    background: var(--surface-2); color: var(--text); border-color: var(--line);
}
html[data-theme="dark"] .btn { background: var(--surface-2); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] .btn:hover { background: var(--line-soft); border-color: var(--faint); }
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn--primary {
    background: var(--primary); border-color: var(--primary); color: var(--on-primary);
}
html[data-theme="dark"] .bar, html[data-theme="dark"] .ring::before { background: #232A31; }
html[data-theme="dark"] .ring::before { background: conic-gradient(var(--c) calc(var(--p) * 1%), #232A31 0); }
html[data-theme="dark"] .badge, html[data-theme="dark"] .pill, html[data-theme="dark"] .tag { background: var(--surface-2); }
html[data-theme="dark"] .flatpickr-calendar { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .flatpickr-day { color: var(--text); }
html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] .flatpickr-monthDropdown-months { color: var(--text); fill: var(--text); background: var(--surface); }
html[data-theme="dark"] .ts-control, html[data-theme="dark"] .ts-dropdown {
    background: var(--surface-2); color: var(--text); border-color: var(--line);
}

/* ===========================================================================
   ДЕЛИКАТЕН ФОН · меки цветни петна
   ---------------------------------------------------------------------------
   Три големи размити петна, които се движат много бавно. Няма нито една
   линия — затова фонът никога не се бие с текста и остава на нивото на
   „екранът не е плосък“, без да привлича вниманието.

   Три правила:
     • непрозрачност под 10% — фонът не се състезава със съдържанието
     • цикъл 34–52 секунди, разминат за трите петна, за да няма усещане
       за повторение
     • при системната настройка „намалено движение“ спира напълно; за хора
       с вестибуларни оплаквания движещият се фон е физически неприятен

   Тежест: под 1 КБ, без картинки и без библиотеки.
   =========================================================================== */

.softfx {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none; overflow: hidden;
}
.softfx i {
    position: absolute; display: block;
    border-radius: 50%;
    filter: blur(46px);
    will-change: transform;
}
.softfx .a {
    width: 340px; height: 340px; left: -90px; top: -140px;
    background: rgba(15, 122, 102, .16);
    animation: softfx-a 34s ease-in-out infinite;
}
.softfx .b {
    width: 300px; height: 300px; right: -70px; top: -90px;
    background: rgba(59, 111, 224, .12);
    animation: softfx-b 44s ease-in-out infinite;
}
.softfx .c {
    width: 260px; height: 260px; left: 42%; bottom: -160px;
    background: rgba(18, 165, 148, .13);
    animation: softfx-c 52s ease-in-out infinite;
}
@keyframes softfx-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, 26px); } }
@keyframes softfx-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-34px, 30px); } }
@keyframes softfx-c { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, -24px); } }

/* Съдържанието стои НАД фона. */
.hero { position: relative; overflow: hidden; }
.hero > *:not(.softfx) { position: relative; z-index: 1; }

/* Върху екрана за вход петната са малко по-големи и по-разлети —
   там има място и няма текст за четене. */
.auth .softfx { position: fixed; }
.auth .softfx i { filter: blur(60px); }
.auth .softfx .a { width: 460px; height: 460px; left: -140px; top: -160px; }
.auth .softfx .b { width: 420px; height: 420px; right: -130px; top: 8%; }
.auth .softfx .c { width: 380px; height: 380px; left: 38%; bottom: -220px; }
.auth__box { position: relative; z-index: 1; }

/* На тъмно същите петна светят твърде силно — приглушават се и се
   изместват към студените тонове, за да не изглеждат като петна светлина. */
html[data-theme="dark"] .softfx .a { background: rgba(47, 184, 154, .12); }
html[data-theme="dark"] .softfx .b { background: rgba(122, 162, 247, .09); }
html[data-theme="dark"] .softfx .c { background: rgba(61, 214, 190, .10); }

@media (prefers-reduced-motion: reduce) {
    .softfx i { animation: none !important; }
}
@media print { .softfx { display: none; } }

/* ── Екранът за вход на конкретен университет ──────────────────────────────
   Цветовете идват като inline променливи от PHP (university_style), затова
   тук няма нищо твърдо зададено — само устройството. */
.auth__facname { color: var(--muted); font-size: 13px; margin-top: 8px; }
.auth__fac { margin-top: 14px; text-align: left; }
.auth__fac label { font-size: 12.5px; color: var(--muted); font-weight: 400; margin: 0 0 5px; }
.auth__fac select { padding: 9px 12px; font-size: 14px; }
.auth__plat {
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft);
    font-size: 12px; color: var(--faint); letter-spacing: .02em;
}
/* Петната поемат цвета на университета, ако е зададен. */
.auth .softfx .a { background: var(--uni-a, rgba(15,122,102,.16)); }
.auth .softfx .b { background: var(--uni-b, rgba(59,111,224,.12)); }

/* ── Изборът на университет · САМАТА начална страница ──────────────────────
   Не отделен адрес с пренасочване: който отвори сайта, вижда списъка
   веднага. Затова живее в index.php, заедно с формата за вход.

   Името и редът с града са на ОТДЕЛНИ редове. Ако са в един поток, при
   дълго име градът се залепя за него и се чете като част от името. */
.pick { width: 100%; max-width: 620px; position: relative; z-index: 1; }
.pick__head { text-align: center; margin-bottom: 28px; }
.pick__head h1 { font-size: 27px; margin: 0 0 8px; }
.pick__head p { margin: 0; font-size: 14.5px; }

.pick__list { display: flex; flex-direction: column; gap: 11px; }
.pick__item {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--u-color, var(--primary));
    border-radius: var(--r-md); box-shadow: var(--shadow-card);
    text-decoration: none; color: inherit;
}
.pick__item:hover {
    border-color: var(--u-color, var(--primary));
    box-shadow: 0 4px 18px rgba(20, 24, 32, .10);
    text-decoration: none;
}
.pick__logo {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--u-soft, var(--primary-soft));
    color: var(--u-color, var(--primary));
    font-weight: 500; font-size: 15px; letter-spacing: .02em;
}
.pick__logo img { width: 100%; height: 100%; object-fit: contain; }
.pick__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pick__name { font-weight: 500; font-size: 15.5px; line-height: 1.35; }
.pick__meta { color: var(--muted); font-size: 13px; }
.pick__go {
    margin-left: auto; flex-shrink: 0; font-weight: 500;
    color: var(--u-color, var(--primary)); white-space: nowrap;
}
@media (max-width: 560px) {
    .pick__item { padding: 14px 15px; gap: 13px; }
    .pick__go { display: none; }
}

/* ===========================================================================
   ТАБЛО НА СТУДЕНТА
   ---------------------------------------------------------------------------
   Информация, не навигация. Модулите ги има в лентата вляво — тук стои това,
   което се променя всеки ден: занятия, срокове, новини, присъствие.
   =========================================================================== */

/* Лентата „изисква вниманието Ви". Показва се САМО когато има какво —
   ако винаги стои там, спира да се забелязва. */
.att-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 18px; }
.att-item {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px; border-radius: var(--r-md);
    border: 1px solid var(--line);
}
.att-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
           display: flex; align-items: center; justify-content: center; }
.att-ico svg { width: 16px; height: 16px; }
.att-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.att-txt b { font-weight: 500; font-size: 13.5px; }
.att-txt span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-item .btn { flex-shrink: 0; }

.att-warn   { background: var(--warn-bg);   border-color: #EEDDB8; }
.att-warn   .att-ico { background: rgba(255,255,255,.6); color: var(--warn); }
.att-warn   .att-txt b, .att-warn .att-txt span { color: var(--warn); }
.att-danger { background: var(--danger-bg); border-color: #EFCFCB; }
.att-danger .att-ico { background: rgba(255,255,255,.6); color: var(--danger); }
.att-danger .att-txt b, .att-danger .att-txt span { color: var(--danger); }
.att-ok     { background: var(--ok-bg);     border-color: #CCE7DA; }
.att-ok     .att-ico { background: rgba(255,255,255,.6); color: var(--ok); }
.att-ok     .att-txt b, .att-ok .att-txt span { color: var(--ok); }

/* Ред на занятие или срок */
.ses {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
}
.ses:last-child { border-bottom: 0; }
.ses--off { opacity: .55; }
.ses__time, .ses__day {
    display: flex; flex-direction: column; align-items: center;
    min-width: 44px; flex-shrink: 0;
}
.ses__time b, .ses__day b { font-size: 15px; font-weight: 500; line-height: 1.2; }
.ses__time span, .ses__day span { font-size: 11.5px; color: var(--faint); }
.ses__what { min-width: 0; flex: 1; }
.ses__name { font-size: 14px; font-weight: 500; }
.ses__meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ── Ред „задание към мен" ────────────────────────────────────────────────
   Три етажа вместо един ред: заглавие със срока вдясно, упражнението отдолу
   като връзка и бутоните най-отдолу. Срокът е ЕТИКЕТ, не дата в текста —
   две дати една до друга не се различават с един поглед. */
.asgm { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.asgm:last-child { border-bottom: 0; }
.asgm__t { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.asgm__name {
    font-size: 14.5px; font-weight: 500; color: var(--text);
    text-decoration: none; line-height: 1.4;
}
.asgm__name:hover { color: var(--primary-dark); }
.asgm__t .badge { flex: none; white-space: nowrap; }
.asgm__sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* Самото упражнение: цялата ивица е връзка, защото точно натам се тръгва. */
.asgm__ses {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    padding: 7px 10px; border-radius: 8px; background: var(--surface-2);
    font-size: 12.5px; color: var(--text); text-decoration: none; line-height: 1.4;
}
.asgm__ses:hover { background: var(--primary-soft); color: var(--primary-dark); }
.asgm__ses svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.asgm__ses:hover svg { color: var(--primary-dark); }
.asgm__act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Предмет с лента за присъствие */
.subj { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.subj:last-child { border-bottom: 0; }
.subj__name { font-size: 13.5px; margin-bottom: 6px; }
.subj__meta { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

/* Измерител: име — лента — число. Трите колони се подреждат една под друга
   при няколко реда и така лентите се сравняват с един поглед. */
.meter {
    display: grid; grid-template-columns: 82px 1fr auto;
    align-items: center; gap: 10px; margin-top: 7px;
    font-size: 11.5px; color: var(--muted);
}
.meter__k { white-space: nowrap; }
.meter__v { white-space: nowrap; font-variant-numeric: tabular-nums; }
.meter--sum { font-size: 12px; color: var(--text); }
.meter--sum .meter__k { font-weight: 500; }
@media (max-width: 420px) {
    .meter { grid-template-columns: 70px 1fr; }
    .meter__v { grid-column: 2; text-align: right; }
}

@media (max-width: 1000px) {
    .att-strip { grid-template-columns: 1fr; }
    .ses { padding: 11px 14px; }
    .subj { padding: 11px 14px; }
}

/* Ред от новина: цялата ивица е бутон, за да е ясно, че се отваря. */
.ses--click {
    width: 100%; text-align: left; background: none; border: 0;
    border-bottom: 1px solid var(--line-soft); cursor: pointer; font: inherit; color: inherit;
}
.ses--click:last-child { border-bottom: 0; }
.ses--click:hover { background: var(--surface-2); }
.ses__excerpt { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.ses__go { color: var(--faint); flex-shrink: 0; display: flex; }
.ses__go svg { width: 17px; height: 17px; }
.ses--click:hover .ses__go { color: var(--primary); }
/* Текстът на новината в прозореца — по-широк ред за четене. */
.news-body { font-size: 14.5px; line-height: 1.75; max-height: 55vh; overflow-y: auto; }

/* ── „N потребителя онлайн" в долната лента ────────────────────────────────
   Стои между авторския ред и часовника. Пулсацията е бавна и слаба: това е
   фонова информация, не известие. Три секунди цикъл, а не половин — бърза
   пулсация в периферното зрение дърпа погледа през цялото време. */
/* [hidden] трябва да победи display:flex — иначе тирето и точката се
   виждат и на екрана за вход, където няма кой да бъде онлайн. */
.footer-online[hidden] { display: none !important; }
.footer-online {
    display: flex; align-items: center; gap: 9px;
    color: var(--muted); white-space: nowrap;
    padding: 2px 8px; border-radius: 100px;
}
.footer-pulse {
    position: relative; flex-shrink: 0;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok);
}
/* Разлива се навън и избледнява — вълничка, не мигане. */
.footer-pulse::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: var(--ok); animation: online-pulse 3s ease-out infinite;
}
@keyframes online-pulse {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(3);   opacity: 0; }
    100% { transform: scale(3);   opacity: 0; }
}
/* Кратко просветване, когато числото се смени. */
.footer-online.is-changed { animation: online-flash 1.2s ease-out; }
@keyframes online-flash {
    0%   { background: var(--ok-bg); color: var(--ok); }
    100% { background: transparent;  color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
    .footer-pulse::after { animation: none; opacity: .35; }
    .footer-online.is-changed { animation: none; }
}
@media (max-width: 600px) {
    .footer-online { order: 3; width: 100%; }
}

/* ── Лентата „Виж като" ────────────────────────────────────────────────────
   В нормален поток, над платното. Ако беше закована отгоре, щеше да покрива
   първия ред на приложението — логото и заглавието изчезваха под нея. */
.view-as-bar {
    background: #8A3F12; color: #fff;
    font: 500 13px/1.4 var(--sans);
    padding: 9px 22px;
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.view-as-bar b { font-weight: 600; }
.view-as-btn {
    background: #fff; color: #8A3F12; border: 0;
    border-radius: var(--r-sm); padding: 6px 14px;
    font: 500 13px var(--sans); cursor: pointer;
}
.view-as-btn:hover { background: #F3E7E0; }
@media (max-width: 700px) {
    .view-as-bar { padding: 9px 14px; }
    .view-as-btn { width: 100%; }
}

/* ── Малък календар ───────────────────────────────────────────────────────
   Само числа и точка под деня със събитие. Без имена — те са в списъка под
   него. Целта е един поглед да каже „кога съм зает". */
.mc__head { justify-content: space-between; }
.mc__head b { font-weight: 500; font-size: 14px; }
.mc__nav {
    width: 28px; height: 28px; border: 0; background: none; cursor: pointer;
    border-radius: var(--r-sm); color: var(--muted);
    display: flex; align-items: center; justify-content: center;
}
.mc__nav:hover { background: var(--surface-2); color: var(--text); }
.mc__nav svg { width: 16px; height: 16px; }
.mc__grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px; padding: 12px 14px 16px;
}
.mc-wd { font-size: 11px; color: var(--faint); text-align: center; padding-bottom: 6px; }
.mc-day {
    position: relative; aspect-ratio: 1; min-height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; border-radius: var(--r-sm); color: var(--text);
}
.mc-out { color: transparent; }
.mc-today { background: var(--primary); color: var(--on-primary); font-weight: 500; }
/* Точката стои ПОД числото, не върху него — иначе се чете като част от него. */
.mc-dot {
    position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}
.mc-today .mc-dot { background: var(--on-primary); }

/* Ред за краен срок в списъка с предстоящи */
.ses--due .ses__day b { color: var(--warn); }

@media (max-width: 1000px) {
    .mc__grid { padding: 10px 12px 14px; }
}

/* ════════════════════════════════════════════════════════ КЛЮЧ ВКЛ./ИЗКЛ. ══
   За способност или изглед, който се прилага веднага, без „Запази".
   Квадратчето за отметка обещава обратното — че ще бъде записано по-късно
   заедно с формата.

   Самото квадратче остава в разметката (клавиатура и четци на екран работят
   с него), но се скрива визуално. */
/* Обвивката: самото квадратче остава в разметката (клавиатура и четци на
   екран работят с него), но се скрива визуално над пистата. */
.switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .switch__track { opacity: .5; }

.switch__track {
    width: 36px; height: 21px; border-radius: 100px; padding: 2px;
    background: var(--surface-2); border: 1px solid var(--line);
    display: inline-flex; align-items: center; flex-shrink: 0;
    transition: background .18s ease, border-color .18s ease;
}
.switch__dot {
    width: 15px; height: 15px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .18s ease;
}
input:checked + .switch__track { background: var(--primary); border-color: var(--primary); }
input:checked + .switch__track .switch__dot { transform: translateX(15px); }
input:focus-visible + .switch__track { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════ ФИЛТРИ НАД КАЛЕНДАРА ══
   Лента с падащи менюта над мрежата. Полетата са според ролята — вижте
   modules/subjects/ui/cal-filter.js. */
.calf {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.calf__ico { color: var(--faint); display: flex; align-self: center; margin-top: 8px; }
.calf__ico svg { width: 16px; height: 16px; }
.calf__f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calf__f > span { font-size: 11.5px; color: var(--muted); }
/* Менюто не бива да се разтяга до дължината на най-дългото име на предмет —
   „Социална фармация и фармацевтично законодателство – II част" би изяло
   цялата лента. */
.calf__f select { min-width: 130px; max-width: 230px; padding: 6px 9px; font-size: 13px; }

.calf__sw {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 13px; color: var(--text); padding-bottom: 6px; position: relative;
}
.calf__sw input { position: absolute; opacity: 0; width: 36px; height: 21px; margin: 0; cursor: pointer; }

.calf__clear {
    margin-left: auto; align-self: flex-end; margin-bottom: 5px;
    border: 0; background: none; cursor: pointer; padding: 4px 2px;
    color: var(--primary-dark); font: 400 13px var(--sans); text-decoration: underline;
}
.calf__clear:hover { color: var(--primary); }

.calf__none {
    padding: 40px 20px; text-align: center;
    color: var(--muted); font-size: 13.5px;
    border: 1px dashed var(--line); border-radius: var(--r-md);
}

@media (max-width: 620px) {
    .calf { gap: 8px 10px; }
    .calf__f { flex: 1 1 140px; }
    .calf__f select { min-width: 0; max-width: none; width: 100%; }
    .calf__clear { margin-left: 0; }
}

/* ═══════════════════════════════════════════ РЕЖИМ НА РАБОТА И ФАКУЛТЕТ ══
   Един контрол за двата въпроса „в коя шапка съм" и „къде съм". Стои точно
   над профила в долната част на лентата — там, където погледът търси „кой
   съм аз".

   Менюто излиза НАГОРЕ, защото чипът е на дъното на екрана. */
.mode { position: relative; margin-bottom: 6px; }
.mode__btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--surface);
    cursor: pointer; text-align: left; font: 400 13px var(--sans); color: var(--text);
}
.mode__btn:hover { border-color: var(--primary); }
.mode__btn[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-soft); }
.mode__ico {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-soft); color: var(--primary-dark);
}
/* Преподавателският режим е с цвета на модул „Обучение" — същият, с който е
   оцветен и модулът в менюто. Така смяната се вижда, без да се чете. */
.mode__ico.is-teach { background: var(--m-subjects-bg); color: var(--m-subjects); }
.mode__ico svg { width: 15px; height: 15px; }
.mode__txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mode__txt b { font-weight: 500; font-size: 12.5px; line-height: 1.25;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode__txt i { font-style: normal; font-size: 11.5px; color: var(--muted);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode__caret { color: var(--faint); display: flex; flex-shrink: 0; }
.mode__caret svg { width: 14px; height: 14px; }
.mode__btn[aria-expanded="true"] .mode__caret svg { transform: rotate(180deg); }

.mode__pop {
    position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    min-width: 248px; max-height: 60vh; overflow-y: auto; padding: 6px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.mode__pop[hidden] { display: none; }
.mode__grp { font-size: 11px; color: var(--faint); padding: 7px 10px 4px; letter-spacing: .02em; }
.mode__sep { height: 1px; background: var(--line); margin: 5px 4px; }
.mode__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--r-sm);
    background: none; cursor: pointer; text-align: left;
    color: var(--text); text-decoration: none; font: 400 13px var(--sans);
}
.mode__item:hover { background: var(--surface-2); text-decoration: none; }
.mode__item.is-on { background: var(--primary-soft); }
.mode__item--quiet { color: var(--muted); }
.mode__iico { width: 22px; height: 22px; flex-shrink: 0; display: flex;
              align-items: center; justify-content: center; color: var(--muted); }
.mode__iico svg { width: 15px; height: 15px; }
.mode__lbl { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mode__lbl b { font-weight: 500; font-size: 13px; line-height: 1.3; }
.mode__lbl i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.mode__tick { color: var(--primary); display: flex; flex-shrink: 0; }
.mode__tick svg { width: 15px; height: 15px; }
.mode__load { padding: 14px 12px; color: var(--muted); font-size: 12.5px; }

/* Свита лента: остава само иконката, менюто излиза встрани от нея. */
html.side-collapsed .mode__txt,
html.side-collapsed .mode__caret { display: none; }
html.side-collapsed .mode__btn { justify-content: center; padding: 8px 4px; }
html.side-collapsed .mode__pop { left: 0; right: auto; width: 262px; }

/* ── Ред с ключ и обяснение ───────────────────────────────────────────────
   „Също и преподавател" само по себе си не казва какво се променя, затова
   обяснението е част от реда, а не подсказка при посочване. */
.role-box {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 15px; margin: 12px 0 0;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface-2);
}
.role-box__txt { min-width: 0; flex: 1; }
.role-box__txt b { display: block; font-size: 14px; }
.role-box__txt small { display: block; color: var(--muted); line-height: 1.45; margin-top: 2px; }
/* Чип без избор: същият вид, но не обещава щракване. */
.mode__btn--static { cursor: default; background: var(--surface-2); }
.mode__btn--static:hover { border-color: var(--line); }

/* ═══════════════════════════════════════════════════════════════════════════
   СЪОБЩЕНИЯ: иконката до името и кръгчето в лентата
   ───────────────────────────────────────────────────────────────────────────
   Тези две неща се виждат на ВСЯКА страница, затова са тук, а не в
   messages.css: той се зарежда чак при първото отваряне на разговор, а
   дотогава иконката би стояла като гол бутон.
   ═══════════════════════════════════════════════════════════════════════════ */
.mg-write {
    all: unset; cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; width: 24px; height: 24px; border-radius: 7px;
    color: var(--muted); vertical-align: -6px; margin-left: 4px;
    transition: background .14s, color .14s;
}
.mg-write:hover { background: var(--m-subjects-bg); color: var(--m-subjects); }
.mg-write:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.mg-write svg { width: 15px; height: 15px; }

/* ── Кръгчето в лентата ─────────────────────────────────────────────────── */
.side__item { position: relative; }
.side__badge {
    position: absolute; left: 27px; top: 6px;
    min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
    border-radius: 100px; background: var(--danger); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
    border: 2px solid var(--surface);
}
/* Мига, докато има непрочетени — и спира, щом няма. Мигащо кръгче без
   причина е дразнител, не известие. */
.side__badge.is-live { animation: mgPulse 1.8s ease-in-out infinite; }
@keyframes mgPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.55); }
    50%      { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}
@media (prefers-reduced-motion: reduce) { .side__badge.is-live { animation: none } }

/* ═══════════════════════════════════════════════════════════════════════════
   ПОЛЕ ЗА ТЕЛЕФОН С КОД НА ДЪРЖАВАТА
   ───────────────────────────────────────────────────────────────────────────
   Трите части изглеждат като едно поле: знаменце, код и номер в обща рамка.
   Три отделни кутийки биха изглеждали като три въпроса, а въпросът е един.
   ═══════════════════════════════════════════════════════════════════════════ */
.tel { position: relative; }
.tel__box {
    display: flex; align-items: center; gap: 0;
    border: 1px solid #E1E3E7; border-radius: var(--r-sm); background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}
.tel__box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
html[data-theme="dark"] .tel__box { background: var(--surface-2); border-color: var(--line); }

.tel__pick {
    all: unset; cursor: pointer; display: flex; align-items: center; gap: 5px;
    padding: 11px 8px 11px 12px; color: var(--muted); border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.tel__pick:hover { background: var(--surface-2); }
.tel__pick:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tel__flag { font-size: 19px; line-height: 1; }
.tel__caret { font-size: 10px; }
/* Кодът не се пише — той е избран. Затова изглежда като текст, не като поле. */
.tel__dial {
    padding-right: 6px; color: var(--text); font-size: 14.5px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tel__num {
    flex: 1; min-width: 0; margin: 0 !important; border: 0 !important; background: none !important;
    padding: 11px 12px 11px 0 !important; box-shadow: none !important; font-size: 14.5px;
}
.tel__num:focus { outline: none; box-shadow: none !important; }

.tel__menu {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: 0 14px 34px rgba(0,0,0,.14); overflow: hidden;
}
.tel__search { padding: 10px 10px 8px; border-bottom: 1px solid var(--line-soft); }
.tel__search input { margin: 0; padding: 8px 11px; font-size: 13.5px; border-radius: 100px; }
.tel__opts { max-height: 250px; overflow-y: auto; padding: 6px; }
.tel__opt {
    all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: var(--r-sm); font-size: 14px;
}
.tel__opt:hover, .tel__opt:focus-visible { background: var(--surface-2); }
.tel__opt.on { background: var(--primary-soft); }
.tel__name { flex: 1; min-width: 0; }
.tel__code { color: var(--muted); font-variant-numeric: tabular-nums; }
.tel__tick { color: var(--primary); }
.tel__none { margin: 0; padding: 14px 10px; color: var(--muted); font-size: 13.5px; }