/* ═══════════════════════════════════════════════════════════════════
   УчОл — Module 3 shell layer (loaded last, after ui_refinements.css)
   Covers: skip-link, primary navigation, active state, topbar/messages,
   mini-profile and the accessible mobile navigation.
   Business logic and routes are untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* Skip link — visible only on keyboard focus */
.skip-link {
  position: fixed;
  top: -64px;
  left: 12px;
  z-index: var(--z-skip-link, 80);
  padding: 10px 16px;
  border-radius: var(--radius-sm, 10px);
  background: var(--color-brand, #0071E3);
  color: var(--color-text-on-brand, #fff);
  font: 700 14px/1.2 var(--font-sans, sans-serif);
  text-decoration: none;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .12));
  transition: top var(--motion-fast, 120ms) var(--ease-standard, ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid var(--color-focus, #007AFF);
  outline-offset: 2px;
}
#main-content:focus-visible {
  outline: 3px solid var(--color-focus, #007AFF);
  outline-offset: -3px;
}

/* Primary navigation: active state is not colour-only (dot + weight + bar) */
.sidebar .side-nav .nav-link { position: relative; min-width: 0; overflow-wrap: anywhere; }
.sidebar .side-nav .nav-link.active { font-weight: 800; }
.sidebar .side-nav .nav-link.active::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.sidebar .side-nav .nav-link:focus-visible,
.sidebar .nav-toggle:focus-visible,
.shell-actions .nav-link:focus-visible {
  outline: 3px solid var(--color-focus, #007AFF);
  outline-offset: 2px;
}

/* Topbar: quiet surface, predictable spacing, date cannot squeeze breadcrumbs */
.main-area > .topbar { gap: 16px; align-items: center; }
.main-area > .topbar .breadcrumb { min-width: 0; }
.main-area > .topbar .breadcrumb > * { min-width: 0; }
.main-area > .topbar .today-label { flex: none; white-space: nowrap; }

/* Django messages: readable, wrapping, not colour-only, visible without JS */
.messages .message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-wrap: anywhere;
}
.messages .message::before {
  flex: none;
  font-weight: 800;
  line-height: 1.35;
}
.messages .message-success { background: var(--color-success-bg, #E8F9ED); border-color: var(--color-success-border, #BFE8CB); color: var(--color-success-text, #1E7B34); }
.messages .message-success::before { content: "✓"; }
.messages .message-info { background: var(--color-info-bg, #E6F0FF); border-color: var(--color-info-border, #B8D6FF); color: var(--color-info-text, #0055B3); }
.messages .message-info::before { content: "i"; }
.messages .message-warning::before,
.messages .message-error::before { content: "!"; }
.messages .message-debug { background: var(--color-neutral-bg, #F2F2F7); border-color: var(--color-neutral-border, #E5E5EA); color: var(--color-neutral-text, #48484A); }
.messages .message-debug::before { content: "·"; }

/* Mini profile: long names must not break the header */
.sidebar .profile-mini { min-width: 0; }
.sidebar .profile-info { min-width: 0; }
.sidebar .profile-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .avatar { flex: none; }

/* Account links group outside <nav> — keep them readable and aligned */
.shell-actions { display: flex; flex-wrap: wrap; gap: 4px; }

/* Footer polish only (structure unchanged) */
.site-footer { color: var(--muted, #5F5F64); }

/* ── Mobile navigation (non-modal expandable panel) ──────────────────
   Chosen deliberately: no focus trap, no scroll lock, no overlay drawer.
   The panel pushes content down, so the background cannot scroll "under" it
   and keyboard focus order stays natural. */
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 12px;
    margin-left: auto;
    border: 1px solid var(--color-border-strong, #D1D1D6);
    border-radius: var(--radius-sm, 10px);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #1D1D1F);
    font: 700 13px/1 var(--font-sans, sans-serif);
    cursor: pointer;
    transition: background var(--motion-fast, 120ms) var(--ease-standard, ease),
                border-color var(--motion-fast, 120ms) var(--ease-standard, ease);
  }
  .nav-toggle:hover { background: var(--color-brand-soft, #E8F1FF); border-color: var(--color-brand-border, #B8D6FF); }
  .nav-toggle[aria-expanded="true"] { background: var(--color-brand-soft, #E8F1FF); color: var(--color-brand-strong, #005BB5); }
  .nav-toggle-icon { font-size: 16px; line-height: 1; }

  .sidebar .side-nav { display: none; }
  .sidebar.is-nav-open .side-nav {
    display: grid;
    flex: 0 0 100%;
    order: 3;
    width: 100%;
    gap: 2px;
    padding: 8px 0 4px;
    overflow: visible;
  }
  .sidebar.is-nav-open .side-nav .nav-link {
    width: 100%;
    min-height: 44px;
    white-space: normal;
    text-align: left;
  }
  .shell-actions { margin-left: auto; }
}

@media (max-width: 420px) {
  .nav-toggle-label { display: none; }
  .nav-toggle { padding: 0 10px; }
}

/* ── Icon system: nav masks keep existing DOM/test contract ───────── */
.sidebar .nav-link .nav-icon {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
  font-size: 0;
  line-height: 0;
  background-color: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}
.sidebar .nav-link[href="/"] .nav-icon,
.sidebar .nav-link[href="/student/"] .nav-icon,
.sidebar .nav-link[href="/moderator/"] .nav-icon,
.sidebar .nav-link[href="/parent/"] .nav-icon { --nav-icon: url("../images/icons/home.svg"); }
.sidebar .nav-link[href="/calendar/"] .nav-icon,
.sidebar .nav-link[href="/public/catalog/"] .nav-icon { --nav-icon: url("../images/icons/grid.svg"); }
.sidebar .nav-link[href="/calendar/full/"] .nav-icon,
.sidebar .nav-link[href="/#full-calendar"] .nav-icon { --nav-icon: url("../images/icons/calendar.svg"); }
.sidebar .nav-link[href="/evidence/new/"] .nav-icon { --nav-icon: url("../images/icons/upload.svg"); }
.sidebar .nav-link[href="/moderator/#review-queue"] .nav-icon { --nav-icon: url("../images/icons/check.svg"); }
.sidebar .nav-link[href="/moderator/#review-moderation"] .nav-icon { --nav-icon: url("../images/icons/star.svg"); }
.sidebar .nav-link[href="/analytics/"] .nav-icon { --nav-icon: url("../images/icons/chart.svg"); }
.sidebar .nav-link[href="/admin/"] .nav-icon { --nav-icon: url("../images/icons/settings.svg"); }