/* Palette taken from securitylab.ru: slate-blue primary (#485967), a red
   accent (#e0132f) used sparingly for links/highlights/danger states, and a
   white/light-gray surface — extracted from the site's own template CSS.
   Buttons use the slate primary instead of the red accent so calls to
   action read as part of the site's own branding rather than a warning. */
:root {
  --color-primary: #485967;
  --color-primary-dark: #333f49;
  --color-accent: #e0132f;
  --color-accent-dark: #b10f25;
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-gray: #6c757d;
  --color-gray-light: #e9ecef;
  --color-text: #212529;

  --color-success: #28a745;
  --color-warning: #ffc107;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #333f49;
    --color-primary-dark: #1c242b;
    --color-accent: #ff5468;
    --color-accent-dark: #e0132f;
    --color-bg: #14181c;
    --color-bg-alt: #1b2127;
    --color-gray: #9aa4ab;
    --color-gray-light: #2a323a;
    --color-text: #e9ecef;
  }
}

html, body {
  height: 100%;
}

body {
  font-family: "Roboto", "Open Sans", Arial, sans-serif;
  /* Same gradient as the auth card, but with a wider light band — on a
     tall content page (unlike the short auth card) a 50/50 split would
     put a lot of body text in the dark zone while scrolling. Fixed
     attachment anchors it to the viewport so it reads as a vignette
     around whatever's currently visible, not stretched to page length. */
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-bg-alt) 25%, var(--color-bg-alt) 75%, var(--color-primary-dark) 100%);
  background-attachment: fixed;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Sticky footer: main grows to fill leftover space so the footer always
   sits at the bottom of the viewport on short pages, and simply follows
   the content on tall ones — it never overlaps or floats mid-page. */
main {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-accent);
}

h1, h2, h3 {
  color: var(--color-primary);
  font-weight: 700;
}

.navbar-brand {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.site-header {
  background-color: var(--color-primary);
}

.site-header .nav-link,
.site-header .navbar-brand {
  color: #ffffff;
}

.site-header .nav-link:hover {
  color: var(--color-accent);
}

.site-header .nav-link {
  white-space: nowrap;
}

.site-header .navbar-brand {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-form {
  flex: 1 1 220px;
  min-width: 160px;
  max-width: 280px;
}

.search-form .form-control {
  width: 100%;
}

/* Primary call-to-action style, unified with the auth pages' submit
   button: bold primary-colored button is the one consistent "do the main
   thing here" signal across the whole site. */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.btn-outline-dark {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-dark:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Secondary "add" action (+ Добавить запись/документ/новость) — blends
   into the page background instead of competing with the bolder
   primary CTAs (Войти, Сохранить, Читать далее...) for attention. */
.btn-subtle {
  background-color: var(--color-bg-alt);
  border-color: var(--color-gray-light);
  color: var(--color-primary);
}

.btn-subtle:hover,
.btn-subtle:focus {
  background-color: var(--color-gray-light);
  border-color: var(--color-gray-light);
  color: var(--color-primary-dark);
}

.entity-card {
  background: var(--color-bg);
  border: 1px solid var(--color-gray-light);
  border-radius: 0.5rem;
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.entity-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0.25rem 0.75rem rgba(72, 89, 103, 0.15);
}

.badge-access-public { background-color: var(--color-success); }
.badge-access-registered { background-color: var(--color-warning); color: #212529; }
.badge-access-private { background-color: var(--color-accent); }

.wiki-link-missing {
  color: var(--color-gray);
  border-bottom: 1px dashed var(--color-gray);
  cursor: help;
}

.site-footer {
  background-color: var(--color-primary-dark);
  color: var(--color-gray-light);
}

.site-footer a {
  color: #ffffff;
}

.site-footer a:hover {
  color: var(--color-accent);
}

#search-suggestions {
  position: absolute;
  z-index: 1050;
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-gray-light);
  border-top: none;
  max-height: 320px;
  overflow-y: auto;
}

#search-suggestions a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--color-text);
  text-decoration: none;
}

#search-suggestions a:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-accent);
}

.hero-slide {
  background: var(--color-bg);
  border-radius: 0.5rem;
  border: 1px solid var(--color-gray-light);
  border-top: 3px solid var(--color-accent);
  padding-left: 3.5rem !important;
  padding-right: 3.5rem !important;
}

/* Bootstrap's default control width is 15% of the carousel, which on wide
   slides overlaps slide text; narrow it to a small fixed hit area. */
.carousel-control-prev,
.carousel-control-next {
  width: 3rem;
}

.breadcrumb-item.active {
  color: var(--color-accent);
}

.graph-container {
  background: var(--color-bg);
  border: 1px solid var(--color-gray-light);
  border-radius: 0.5rem;
  overflow: hidden;
}

.notes-graph-node text {
  fill: var(--color-text);
  paint-order: stroke;
  stroke: var(--color-bg);
  stroke-width: 3px;
}

.notes-graph-node {
  cursor: pointer;
}

.notes-graph-legend .badge {
  font-weight: 400;
}

.library-viewer {
  background: var(--color-bg);
  border: 1px solid var(--color-gray-light);
  border-radius: 0.5rem;
  min-height: 640px;
}

#library-preview-frame {
  height: 640px;
  border: 0;
  border-radius: 0.5rem;
}

.library-doc-link.active {
  border-color: var(--color-accent);
  background-color: var(--color-bg-alt);
}

.library-txt {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
}

/* Site-wide underline-style text input. Two ways in: the `.site-input`
   class (applied by BootstrapFormMixin, catalog/forms.py, to every
   catalog/library form field) and plain `input`/`select`/`textarea`
   inside `.auth-field` (allauth's login/signup forms render fields with
   no class hook we control, so the auth templates rely on this wrapper
   instead) — both get the identical look. */
.site-input,
.auth-field input,
.auth-field select,
.auth-field textarea {
  border: none !important;
  border-bottom: 1px solid var(--color-gray-light) !important;
  border-radius: 0 !important;
  padding: 0.4rem 0.1rem !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100%;
  font-size: 1rem;
  color: var(--color-text);
}

.site-input:focus,
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent) !important;
  box-shadow: none !important;
  background-color: var(--color-bg-alt) !important;
}

.is-invalid.site-input,
.auth-field.has-error input {
  border-bottom-color: var(--color-accent) !important;
}

/* Checkbox-group fields (CheckboxSelectMultiple/RadioSelect, e.g. "Тип
   братства"). Django applies the `checklist-input` class to *both* the
   wrapping <div> around the whole option group and to each <input> —
   these rules are written so each tag gets sensible sizing instead of
   the div being squashed to one checkbox's height. */
.checklist-input {
  height: auto;
  overflow: visible;
}

.checklist-input > div {
  margin-bottom: 0.35rem;
}

input.checklist-input {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.checklist-input label {
  font-weight: 400;
  display: inline;
}

/* Card wrapper for full-width data-entry forms (catalog/library create &
   edit) — same rounded/shadowed card language as the auth card, just
   without its narrow centered width since these forms carry many fields. */
.form-card {
  background: var(--color-bg);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

/* Auth pages (login/signup/pending-approval) — centered card with
   underline-style fields, modeled after a Delta.com-style login screen.
   The gradient backdrop is the site-wide `body` background now; this
   page just needs `main` to vertically center its single card. */
body.minimal-page main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-page {
  display: flex;
  justify-content: center;
}

.auth-card {
  background: var(--color-bg);
  border-radius: 0.5rem;
  box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.2);
  padding: 2.5rem 2.5rem 0;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.auth-card h1 {
  color: var(--color-primary);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.auth-subtitle {
  color: var(--color-gray);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}

.auth-field {
  margin-bottom: 1.75rem;
}

.auth-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-gray);
  margin-bottom: 0.35rem;
}

.auth-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.auth-check input {
  width: 1rem;
  height: 1rem;
}

.auth-check label {
  font-size: 0.9rem;
  margin: 0;
}

.auth-links {
  text-align: center;
  font-size: 0.85rem;
  margin: 1.25rem 0 2rem;
}

.auth-card-footer {
  background: var(--color-bg-alt);
  margin: 0 -2.5rem;
  padding: 1rem 2.5rem;
  text-align: center;
  border-top: 1px solid var(--color-gray-light);
}