/* Каркас портала: боковая панель разделов слева (тёмная) + верхняя строка (поиск, трекер, уведомления, профиль).
   На телефоне панель выезжает по кнопке ☰. Верхняя строка подключается и в «Настройках» (админке Django). */
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("fonts/Roboto-Regular.d593c979ce19.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("fonts/Roboto-Medium.9adf1992b165.woff2") format("woff2"); }

:root { --side-w: 248px; --top-h: 60px; --z: 1; }

/* у body из общих стилей min-height: 100vh — при увеличении страницы (4K) это больше экрана: лишняя прокрутка
   и пустая полоса под боковой панелью */
body.staff { min-height: calc(100vh / var(--z)); }
.app { display: flex; align-items: stretch; min-height: calc(100vh / var(--z)); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main > main.container { flex: 1; }

/* --- боковая панель --- */
.side { width: var(--side-w); flex: none; background: #0A0850; color: #fff; position: sticky; top: 0;
  height: calc(100vh / var(--z)); overflow-y: auto; display: flex; flex-direction: column; padding: 18px 12px 20px;
  font: 400 14.5px/1.3 Roboto, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent; z-index: 900; }
.side-logo { display: block; padding: 2px 10px 20px; }
.side-logo img { display: block; width: 100%; max-width: 200px; height: auto; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side .icon { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-link, .side-more summary { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 9px;
  color: rgba(255, 255, 255, .74); text-decoration: none; cursor: pointer; }
.side-link:hover, .side-more summary:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.side-link.active { color: #fff; background: rgba(255, 255, 255, .16); font-weight: 500; }
.side-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-aux { font-size: 12.5px; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
.side-sep { height: 1px; background: rgba(255, 255, 255, .14); margin: 10px 10px; }
.side-more summary { list-style: none; }
.side-more summary::-webkit-details-marker { display: none; }
.side-caret { font-size: 11px; opacity: .7; transition: transform .15s; }
.side-more[open] .side-caret { transform: rotate(180deg); }
.side-sub { display: block; padding: 8px 12px 8px 43px; border-radius: 8px; color: rgba(255, 255, 255, .7); text-decoration: none; font-size: 14px; }
.side-sub:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.side-sub.active { color: #fff; background: rgba(255, 255, 255, .14); }
.side-back { display: none; }

/* счётчики-«таблетки» */
.snav-n { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; box-sizing: border-box; text-align: center;
  font: 700 11px/16px Roboto, sans-serif; }
.snav-n.late { background: #E5484D; color: #fff; }
.snav-n.new { background: #fff; color: #0A0850; }
.snav-n.soft { background: rgba(255, 255, 255, .2); color: #fff; }
.snav-n[hidden] { display: none; }

/* --- верхняя строка --- */
.topbar { position: sticky; top: 0; z-index: 800; height: var(--top-h); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border-bottom: 1px solid #E4E4EC; display: flex; align-items: center; gap: 16px; padding: 0 28px;
  font: 400 14px/1.3 Roboto, "Segoe UI", system-ui, sans-serif; color: #1C1C2E; -webkit-font-smoothing: antialiased; }
.topbar .icon { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar .topbar-burger, .topbar .topbar-logo, .topbar .topbar-search-btn { display: none; }
.topbar-burger { width: 40px; height: 40px; border: 0; border-radius: 9px; background: transparent; color: #1C1C2E; cursor: pointer;
  align-items: center; justify-content: center; padding: 0; }
.topbar-logo img { display: block; width: 32px; height: 32px; }
.topbar-search { flex: 1 1 auto; max-width: 520px; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; margin: 0;
  border-radius: 10px; background: #F1F1F6; color: #6F6F85; border: 1px solid transparent; box-sizing: border-box; }
.topbar-search:focus-within { background: #fff; border-color: #0F02BE; box-shadow: 0 0 0 3px rgba(15, 2, 190, .10); color: #1C1C2E; }
.topbar .topbar-search input { flex: 1; min-width: 0; height: 38px; border: 0; outline: none; background: transparent; color: #1C1C2E;
  font: 400 14.5px Roboto, "Segoe UI", sans-serif; padding: 0; margin: 0; box-shadow: none; border-radius: 0; }
.topbar-search input::placeholder { color: #8A8AA0; }
.topbar-user { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
.topbar-clock { display: flex; align-items: baseline; gap: 7px; padding: 0 6px; white-space: nowrap; color: #44445A; }
.topbar-clock b { font-size: 16px; font-weight: 500; color: #0B0A2E; font-variant-numeric: tabular-nums; }
.topbar-tz { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: #8A8AA0; }
.topbar-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; color: #44445A; text-decoration: none; }
.topbar-icon:hover { background: #F1F1F6; color: #0B0A2E; }
.topbar-bell span { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  box-sizing: border-box; background: #E5484D; color: #fff; font: 700 10px/16px Roboto, sans-serif; text-align: center; }
.topbar-me { position: relative; flex: none; }
.topbar-me summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px 0 4px;
  border-radius: 20px; }
.topbar-me summary::-webkit-details-marker { display: none; }
.topbar-me summary:hover, .topbar-me[open] summary { background: #F1F1F6; }
.topbar-ava { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #E6E5FA; color: #0F02BE; font: 500 12.5px/1 Roboto, sans-serif; }
img.topbar-ava { object-fit: cover; flex: none; }  /* фото из профиля вместо инициалов */
.topbar-name { font-weight: 500; color: #1C1C2E; white-space: nowrap; }
.topbar-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 240px; display: grid; padding: 6px;
  background: #fff; border: 1px solid #E4E4EC; border-radius: 12px; box-shadow: 0 16px 36px -14px rgba(11, 10, 46, .35); }
.topbar-menu-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; border-bottom: 1px solid #EFEFF4; margin-bottom: 4px; }
.topbar-menu-head b { font-weight: 500; } .topbar-menu-head span { color: #6F6F85; font-size: 12.5px; }
.topbar-menu a { color: #1C1C2E; text-decoration: none; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.topbar-menu a:hover { background: #F0F0FB; }
.topbar-menu form { margin: 0; }
.topbar .topbar-menu-btn { width: 100%; text-align: left; font: inherit; color: #A8321E; background: none; border: 0;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; height: auto; }
.topbar .topbar-menu-btn:hover { background: #FBEDEA; }
/* в «Настройках» (админке) боковой панели нет — логотип в верхней строке */
.topbar-admin .topbar-logo { display: flex !important; }
.topbar-admin .topbar-burger { display: none !important; }

/* --- экраны поуже --- */
@media (max-width: 1280px) { .topbar-name { display: none; } .topbar { padding: 0 20px; } }
@media (max-width: 1100px) { .topbar-date { display: none; } }
@media (max-width: 960px) {
  .side { position: fixed; left: 0; top: 0; bottom: 0; height: auto; transform: translateX(-102%); transition: transform .2s ease;
    z-index: 1200; }
  body.side-open .side { transform: none; box-shadow: 12px 0 40px -20px rgba(0, 0, 0, .5); }   /* у закрытого тень торчала полосой слева */
  body.side-open .side-back { display: block; position: fixed; inset: 0; z-index: 1150; border: 0; background: rgba(10, 8, 40, .45); }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar .topbar-burger, .topbar .topbar-logo { display: flex; }
}
@media (max-width: 680px) {
  .topbar-search { display: none; }
  .topbar .topbar-search-btn { display: flex; }
  .topbar-clock { display: none; }
  .topbar-user { gap: 4px; }
}

/* --- 4K: при маленьком системном масштабе всё крупнее (высоты в vh делятся на --z) --- */
/* 4K с масштабом Windows 150 % (≈2560 px) — чуть крупнее, чтобы текст был как на Full HD;
   с масштабом 100–125 % (3000–3840 px) — заметно крупнее */
@media (min-width: 2300px) { :root { --z: 1.15; } html { zoom: 1.15; } }
@media (min-width: 2900px) { :root { --z: 1.35; } html { zoom: 1.35; } }
@media (min-width: 3500px) { :root { --z: 1.6; } html { zoom: 1.6; } }