/* bVPN skin for Django admin — overrides the admin's CSS variables.
   bvpn.com palette (blue #00b5f9 / #007fae).

   Type comes from design/css/tokens.css, which base_site.html loads first. That
   replaced a bare `Inter` family name: Inter is not self-hosted anywhere in this
   project, so the admin rendered in whatever the operating system happened to
   have. --body is the same self-hosted IBM Plex Sans the portal uses.

   The PALETTE is still the pre-rebrand cyan and does not match the portal's bVPN
   blue — see DECISIONS.md §6, "resync pending". Deliberately left alone here:
   this change was about sharing assets, not about restyling the admin. */

:root {
  --font-family-primary: var(--body);
  --admin-header-h: 48px;   /* shared by the header and the rail's blue band */

  --primary: #007fae;
  --secondary: #007fae;          /* header bg derives from this */
  --accent: #00b5f9;
  --primary-fg: #ffffff;

  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: #007fae;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #e7f5fc;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #00b5f9;

  --link-fg: #007fae;
  --link-hover-color: #005e82;
  --link-selected-fg: #005e82;

  --button-bg: #00b5f9;
  --button-fg: #ffffff;
  --button-hover-bg: #0399d6;
  --default-button-bg: #007fae;
  --default-button-hover-bg: #005e82;
  --object-tools-bg: #007fae;
  --object-tools-hover-bg: #005e82;

  --selected-bg: #eaf5fb;
  --selected-row: #f3f9fd;
}

/* --- Custom left nav rail (Django's built-in nav sidebar is disabled) ---
   Uses the admin's own .module/h2 styling + CSS variables so it matches theme. */
/* Pin the header to a fixed height so the rail's blue band lines up with it. */
#header { height: var(--admin-header-h); padding-top: 0; padding-bottom: 0; }

#brand-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 0 0 24px;
  background: var(--body-bg);
  z-index: 100;
}
/* Blue band on top of the rail — same height + colour as the header, so the two
   separate components read as one continuous blue bar across the top. Holds the
   "VPN Service" title in bold yellow. */
.brand-nav-header {
  height: var(--admin-header-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  margin-bottom: 12px;
  background: var(--header-bg);
  color: #ffd500;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
/* Make room for the rail only when it's actually rendered (not on the login page).
   Pad the BODY (not #container, which is width:100% + min-width:980px — a margin
   there would overflow the viewport by 240px). */
body:has(#brand-nav) { padding-left: 240px; }

#brand-nav .module { margin: 0 10px 12px; }
#brand-nav ul { list-style: none; margin: 0; padding: 4px 0; }
#brand-nav li { list-style: none; margin: 0; }   /* beat base.css `ul > li { list-style-type: square }` */
#brand-nav li a {
  display: block;
  padding: 7px 14px;
  font-size: 0.8125rem;
  color: var(--link-fg);
  text-decoration: none;
}
#brand-nav li a:hover { background: var(--selected-bg); color: var(--link-hover-color); }
/* current page — keep the hover-gray persistent to show what's selected */
#brand-nav li.selected a { background: var(--selected-bg); color: var(--link-hover-color); font-weight: 600; }

/* --- Changelist: drop the redundant "Select X to change" title (the rail already
   shows the current section), which also lets the search + filters rise up. --- */
body.change-list #content > h1 { display: none; }

/* Top row: search (left) aligned with the ADD button (right); Filters drop below
   the ADD in the right column. (Default admin floats ADD up via margin-top:-48px,
   which is wrong once the title is hidden.) */
body.change-list #content-main { position: relative; }
body.change-list .object-tools {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  float: none;
}
body.change-list #changelist-filter { margin-top: 52px; }   /* clear the ADD button */

/* Keep the brand accents consistent in the admin's dark mode (backgrounds
   stay dark; only the blue accents are pinned). */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #0aa1dc;
    --secondary: #0b1b24;
    --accent: #2fbefe;
    --link-fg: #4cc3f7;
    --link-hover-color: #7ed4fa;
    --button-bg: #0399d6;
    --button-hover-bg: #12bdff;
    --default-button-bg: #0399d6;
    --object-tools-bg: #0399d6;
  }
}