/* Thrice Theta skin for django-helpdesk.
 *
 * `helpdesk/helpdesk-extend.css` is upstream's own extension point: base-head.html loads it last,
 * and STATICFILES_DIRS is searched before app directories, so this file replaces the empty one in
 * the package without copying a single template. Keep it to variables and a handful of selectors
 * so a helpdesk upgrade cannot silently break the layout.
 *
 * `tokens-light.css`, not `tokens.css`: the helpdesk UI is a vendored Bootstrap admin theme with
 * exactly one palette, so it cannot follow the reader's dark-mode preference. With the themed
 * token file it followed it halfway - `--tt-color-text` became a near-white in dark mode and the
 * sidebar, which uses it as a background, turned light grey while upstream's own rule kept the
 * links white on top of it. The light-only file has no dark blocks at all, so every colour on the
 * page agrees.
 */
@import url("../tt/tokens-light.css");
@import url("../tt/fonts.css");

:root {
  /* Belt and braces: also stops the browser painting form controls and scrollbars dark. */
  color-scheme: light;

  --bs-primary: var(--tt-color-accent);
  --bs-primary-rgb: 47, 91, 234;
  --bs-link-color: var(--tt-color-accent);
  --bs-link-hover-color: var(--tt-color-accent-hover);
  --bs-body-font-family: var(--tt-font-sans);
}

body,
.sidebar,
.navbar {
  font-family: var(--tt-font-sans);
}

/* The dark navbar and sidebar are the brand's, not Bootstrap's default near-black. Upstream's
 * link colours are white at 50%/75% opacity, which only reads against a dark ground - so the
 * background and the text on it are set together, never one without the other. */
.navbar.bg-dark,
.sidebar,
#bg-dark .sidebar {
  background-color: var(--tt-color-text) !important;
}

.sidebar .nav-item .nav-link,
.sidebar .nav-item .nav-link span {
  color: rgba(255, 255, 255, 0.78);
}

.sidebar .nav-item .nav-link:active,
.sidebar .nav-item .nav-link:focus,
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link {
  color: #ffffff;
}

/* Anyone but an agent gets no sidebar: theirs only held Homepage, New Ticket, My Tickets and the
 * knowledge base, all of which now redirect or are the page they are on, and on a phone it covered
 * the form. `tt-bar--public` comes from custom_navigation_header.html. */
body:has(.tt-bar--public) .sidebar,
body:has(.tt-bar--public) #sidebarToggle {
  display: none !important;
}

/* The knowledge base redirects to the docs site (config/urls_support.py), so agents lose its
 * entry too. Matched by its link, the one stable thing about it. */
.sidebar .nav-item:has(> .nav-link[href$="/kb/"]) {
  display: none;
}

.navbar-brand {
  font-weight: var(--tt-weight-semibold);
  letter-spacing: 0.01em;
}

.btn-primary {
  background-color: var(--tt-color-accent);
  border-color: var(--tt-color-accent);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--tt-color-accent-hover);
  border-color: var(--tt-color-accent-hover);
}

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

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

.card {
  border-radius: var(--tt-radius-md);
  border-color: var(--tt-color-border);
}

/* The new-ticket form (`card-register`, upstream's public and staff create pages). Upstream sets
 * the card title and the field labels at body size and weight, so the form read as one grey
 * block; the title and every field label stand out from the inputs here. Option labels
 * (`form-check-label`) stay normal: they are answers, not questions. */
.card-register .card-header {
  font-size: var(--tt-text-xl);
  font-weight: var(--tt-weight-bold);
}

.card-register .form-label {
  font-weight: var(--tt-weight-bold);
}

/* The thin brand bar from custom_navigation_header.html. */
.tt-bar {
  display: flex;
  align-items: center;
  gap: var(--tt-space-3);
  padding: var(--tt-space-2) var(--tt-space-4);
  background: var(--tt-color-bg);
  border-bottom: 1px solid var(--tt-color-border);
  font-size: var(--tt-text-sm);
}

.tt-bar img {
  height: 22px;
  width: auto;
}

.tt-bar .tt-bar-spacer {
  margin-left: auto;
}

.tt-bar a {
  color: var(--tt-color-text-muted);
  text-decoration: none;
}

.tt-bar a:hover {
  color: var(--tt-color-accent);
  text-decoration: underline;
}