@charset "UTF-8";
/* =====================================================================
   app.css — dark-brand skin for the non-public SPK pages
   Owner: this stylesheet only touches pages wrapped in .app-page
   (auth screens, personal cabinet, management panel, spk_forms).
   It is loaded AFTER styles.css and never redeclares the public
   header/footer/home/events rules that belong to that file.

   Wrapper classes (added in the owned templates):
     .app-page.auth  — login / register / security-verify
     .app-page.cab   — cabinet_base.html and its children
     .app-page.mng   — manage_base.html and its children (incl. spk_forms)

   Strategy: the surrounding <main> has no width constraint, so each
   .app-page wrapper is a full-bleed block that owns the dark
   background. We do NOT blanket-set color:#fff on .app-page, because
   most content still lives inside the existing light "cards"
   (.panel, .metric-card, .table-wrap, .club-card, …) whose dark navy
   text already reads fine there — we only recolor the text that sits
   directly on the dark background (bare headings, sidebar nav, bare
   list headings, pagination, …).
   ===================================================================== */

:root{
  --spk-bg:#1d1e42;             /* тёмный фон страницы */
  --spk-footer:#15162f;         /* самый тёмный (для справки) */
  --spk-navy:#25264f;           /* тёмно-синий бренда */
  --spk-blue:#4e59b7;           /* синий бренда */
  --spk-yellow:#fdca00;         /* жёлтый акцент */
  --spk-line:#d8d8e4;           /* линия полей форм */
  --spk-line-soft:#ececf2;      /* линия в таблицах/карточках */
  --spk-on-dark:rgba(255,255,255,.86);
  --spk-on-dark-muted:rgba(255,255,255,.7);
  --spk-on-dark-line:rgba(255,255,255,.16);
}

/* Full-bleed dark shell. Safe, defensive: prevents any accidental
   horizontal scrollbar from full-width wrapper math on some browsers. */
html{overflow-x:hidden}

.app-page{
  background:var(--spk-bg);
  width:100%;
}

/* ---------------------------------------------------------------------
   1. Auth screens (login / register / security-verify)
   --------------------------------------------------------------------- */
.app-page.auth{padding:0}
.app-page.auth .auth-section{background:transparent}
.app-page.auth .auth-intro{background:var(--spk-navy)}
.app-page.auth .auth-dashes span:nth-child(2){background:var(--spk-blue)} /* brand: no red in UI */
.app-page.auth .auth-panel{background:#fff}
.app-page.auth .auth-panel .button-yellow{width:100%}
/* Error states keep the site's existing red — the brief allows red for
   destructive/error feedback, it's only decorative red we avoid. */

/* ---------------------------------------------------------------------
   2. Cabinet + Manage shared shell (sidebar layout)
   --------------------------------------------------------------------- */
.app-page.cab,
.app-page.mng{
  padding-top:8px;
  padding-bottom:24px;
}
.app-page.cab .workspace,
.app-page.mng .workspace{
  padding-block:32px 96px;
}

/* Sidebar sits bare on the dark shell — recolor every bit of it. */
.app-page .sidebar{border-right-color:var(--spk-on-dark-line)}
.app-page .sidebar-home{color:#fff;border-bottom-color:var(--spk-on-dark-line)}
.app-page .sidebar-home small{color:var(--spk-on-dark-muted)}
.app-page .nav-label{color:var(--spk-on-dark-muted)}
.app-page .side-nav>a{color:var(--spk-on-dark)}
.app-page .side-nav>a>span{color:var(--spk-on-dark-muted)}
.app-page .side-nav>a:hover{background:rgba(255,255,255,.08);color:#fff}
.app-page .side-nav>a[aria-current=page]{background:var(--spk-yellow);color:var(--spk-navy)}
.app-page .side-nav>a[aria-current=page]>span{color:var(--spk-navy)}
.app-page .scope-note strong{color:var(--spk-navy)}

/* Brand rule: no red in the interface. styles.css defaults .eyebrow to
   --red; inside .app-page every eyebrow is blue by default (reads fine
   on the light cards/panels it normally sits in) except the few bare
   ones directly on the dark shell, which go yellow. */
.app-page .eyebrow{color:var(--spk-blue)}
.app-page .workspace-heading .eyebrow,
.app-page .auth-intro .eyebrow{color:var(--spk-yellow)}
/* These already ship an explicit yellow eyebrow in styles.css on their
   own dark card backgrounds (attendance-summary / notification-teaser);
   restate it here at matching specificity so app.css's later source
   order can't flip it back to blue. */
.app-page .attendance-points .eyebrow,
.app-page .notification-teaser .eyebrow{color:var(--spk-yellow)}
.app-page .sidebar-bottom{border-top-color:var(--spk-on-dark-line)}
.app-page .sidebar-bottom .text-link{color:var(--spk-yellow);border-color:var(--spk-yellow)}
.app-page .sidebar-bottom .text-link:hover{color:#fff;border-color:#fff}
.app-page .plain-button{color:var(--spk-on-dark-muted)}
.app-page .plain-button:hover{color:var(--spk-yellow)}

/* Mobile sidebar (pills row, styles.css turns it horizontal <700px) */
@media(max-width:700px){
  .app-page .sidebar{border-bottom-color:var(--spk-on-dark-line)}
  .app-page .side-nav>a{border-color:var(--spk-on-dark-line);background:rgba(255,255,255,.05)}
  .app-page .side-nav>a[aria-current=page]{border-color:var(--spk-yellow)}
}

/* Page headings + bare back-links sitting directly on the dark shell */
.app-page .workspace-heading h1{color:#fff}
.app-page .workspace-heading>p:not(.eyebrow),
.app-page .workspace-heading .section-top>div>p{color:var(--spk-on-dark-muted)}
.app-page .back-link{color:var(--spk-on-dark-muted)}
.app-page .back-link:hover{color:var(--spk-yellow)}

/* Bare list-heading (outside any card) → white heading + yellow link.
   When list-heading is nested inside a light card (.panel / .dashboard-bottom)
   these rules are overridden back to the original dark-on-white palette. */
.app-page .list-heading h2{color:#fff}
.app-page .list-heading>.muted{color:var(--spk-on-dark-muted)}
.app-page .list-heading .text-link{color:var(--spk-yellow);border-color:var(--spk-yellow)}
.app-page .list-heading .text-link:hover{color:#fff;border-color:#fff}
.app-page .panel .list-heading h2,
.app-page .dashboard-bottom .list-heading h2{color:var(--spk-navy)}
.app-page .panel .list-heading>.muted,
.app-page .dashboard-bottom .list-heading>.muted{color:var(--muted)}
.app-page .panel .list-heading .text-link,
.app-page .dashboard-bottom .list-heading .text-link{color:var(--spk-blue);border-color:var(--spk-yellow)}
.app-page .panel .list-heading .text-link:hover,
.app-page .dashboard-bottom .list-heading .text-link:hover{color:var(--red,#e82e27);border-color:var(--red,#e82e27)}

/* Pagination is bare on the dark shell */
.app-page .pagination>span{color:var(--spk-on-dark-muted)}

/* .button-outline (border + transparent bg) is unreadable when it sits
   bare on the dark shell (pagination, standalone .form-actions blocks
   like the CSV-import summary). Default it to a light outline there,
   then hand it back its original dark-on-white look whenever it is
   nested inside a light card, where the original styles.css rule was
   designed to work. */
.app-page .button-outline{border-color:rgba(255,255,255,.5);color:#fff}
.app-page .button-outline:hover{background:#fff;color:var(--spk-navy);border-color:#fff}
.app-page .panel .button-outline,
.app-page .table-wrap .button-outline,
.app-page .dashboard-bottom .button-outline,
.app-page .attendance-table .button-outline{border-color:var(--spk-navy);color:var(--spk-navy)}
.app-page .panel .button-outline:hover,
.app-page .table-wrap .button-outline:hover,
.app-page .dashboard-bottom .button-outline:hover,
.app-page .attendance-table .button-outline:hover{background:var(--spk-navy);color:#fff;border-color:var(--spk-navy)}

/* Bare empty-state variant used directly on the dark shell keeps its own
   light card look already (background:var(--soft) from styles.css);
   just soften the dashed border so it doesn't disappear on dark. */
.app-page .empty-state{border-color:#d8d8e4}

/* ---------------------------------------------------------------------
   3. Small, page-specific accents
   --------------------------------------------------------------------- */
/* Access-panel / leadership-panel / club-form-panel / review-panel top
   accent bars: keep them on-brand (blue/yellow only, no red bleed). */
.app-page .access-panel{border-top-color:var(--spk-yellow)}
.app-page .leadership-panel{border-top-color:var(--spk-blue)}
.app-page .club-form-panel,
.app-page .review-panel{border-top-color:var(--spk-yellow)}

/* Attendance / balance / metric-dark / notification-teaser already ship
   their own dark treatment in styles.css — nothing to override there. */

/* ---------------------------------------------------------------------
   4. Manage-panel generic tables/forms — make sure imported spk_forms
   pages (which reuse the exact same classes) stay covered automatically
   by the rules above since they extend manage_base.html.
   --------------------------------------------------------------------- */
.app-page .forms-card{background:#fff}

/* ---------------------------------------------------------------------
   5. Focus visibility on dark backgrounds (accessibility)
   --------------------------------------------------------------------- */
.app-page a:focus-visible,
.app-page button:focus-visible,
.app-page input:focus-visible,
.app-page select:focus-visible,
.app-page textarea:focus-visible{
  outline:3px solid var(--spk-yellow);
  outline-offset:3px;
}

/* ---------------------------------------------------------------------
   6. Adaptive tweaks specific to the dark shell (390 / 768 / 1440 already
   inherit the base breakpoints from styles.css: 1100 / 850 / 700 / 440).
   --------------------------------------------------------------------- */
@media(max-width:440px){
  .app-page .workspace-heading h1{font-size:clamp(24px,7vw,32px)}
}

/* Счётчики «Требуют решения» в боковом меню и на обзоре команды */
.nav-badge{display:inline-block;min-width:20px;margin-left:8px;padding:0 6px;border-radius:10px;background:var(--spk-yellow);color:var(--spk-navy);font-size:11px;font-weight:700;line-height:20px;text-align:center}
.app-page .side-nav>a[aria-current=page] .nav-badge{background:var(--spk-navy);color:var(--spk-yellow)}
.decision-list{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.decision-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--spk-line,rgba(0,0,0,.15));text-decoration:none;color:inherit}
.decision-list a strong{min-width:28px;text-align:center}

/* Пустое состояние в кабинете: сплошная светлая карточка без пунктирной рамки —
   на масштабе ≠100% пунктир с прозрачными зазорами и скруглением выглядел как «швы»
   поверх тёмной подложки. Фон непрозрачный, рамка сплошная, слой изолирован. */
.app-page .empty-state{background:#fff;border:1px solid #c9c9d8;background-clip:padding-box;isolation:isolate;position:relative}
/* Паттерн в тёмных карточках кабинета: один некрутящийся слой на всю карточку (cover),
   а не плитка 540px со смещением — у PNG края не стыкуются бесшовно, на зуме были видны разрывы. */
.app-page .notification-teaser .pattern-layer,.app-page .metric-dark .pattern-layer,.app-page .auth-intro .pattern-layer{animation:none;background-repeat:no-repeat;background-position:center;background-size:cover}

/* Поиск вуза по вариантам названия */
.university-search{position:relative}
.university-search-results{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:280px;overflow-y:auto;background:#fff;color:#25264f;border:1px solid #d7d8e4;border-radius:8px;box-shadow:0 14px 32px rgba(23,23,47,.18)}
.university-search-option{padding:11px 14px;cursor:pointer;line-height:1.3}
.university-search-option:hover,.university-search-option[aria-selected=true]{background:#eef0fa}
.university-search-empty{margin:0;padding:12px 14px;color:#6e6f8c}