/* Drivers On Click B2C brand override for the Jazzmin (AdminLTE4/Bootstrap5)
   admin theme.

   A restrained two-color system on purpose: one dominant navy (header,
   sidebar, buttons, links) plus a single muted gold accent used sparingly
   (active nav indicator only) -- rather than the earlier navy+green+cyan
   mix, which fought both itself and flatly's own default teal link/accent
   colors and read as unprofessional.

   Selectors match Jazzmin 3.x's actual markup (app-header/app-sidebar/
   sidebar-menu) -- NOT the older AdminLTE3 main-header/main-sidebar/
   nav-sidebar classes used by Jazzmin 2.x, which this version doesn't
   render. */

:root {
  --doc-navy: #1c3654;
  --doc-navy-dark: #122238;
  --doc-navy-light: #2f5680;
  --doc-gold: #c9a227;

  /* Bootstrap 5.3 themes generic `a { color }` off these vars -- retint
     content-area links to navy instead of flatly's default teal (#18bc9c),
     which was clashing with the header/sidebar/button colors. Sidebar nav
     links are unaffected: AdminLTE gives .nav-link its own explicit color. */
  --bs-link-color-rgb: 28, 54, 84;
  --bs-link-hover-color-rgb: 18, 34, 56;

  /* django.contrib.admin's own theme variables (base.css) are a second,
     independent color system Jazzmin doesn't fully replace -- the
     dashboard's module/caption boxes, breadcrumbs and default object-tool
     links all still read off these, stock-blue/gold, unless retinted here
     too. Overriding the variables (rather than fighting selector
     specificity) makes every native-admin element follow the same navy
     system automatically. */
  --primary: var(--doc-navy);
  --secondary: var(--doc-navy-dark);
  --accent: var(--doc-gold);
  --primary-fg: #fff;
  --header-bg: var(--doc-navy-dark);
  --header-color: #fff;
  --header-link-color: #fff;
  --breadcrumbs-bg: var(--doc-navy-dark);
  --breadcrumbs-fg: rgba(255, 255, 255, 0.85);
  --breadcrumbs-link-fg: #fff;
  --link-fg: var(--doc-navy);
  --link-hover-color: var(--doc-navy-dark);
  --link-selected-fg: var(--doc-navy);
}

.app-header {
  background-color: var(--doc-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.app-sidebar,
.brand-link {
  background-color: var(--doc-navy-dark) !important;
}

.brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  justify-content: center;
  /* Hiding brand-image/brand-text below removes the only content that
     used to give this flex box its height -- set one explicitly or the
     background-image has a 0-height box to paint into. */
  height: 56px;
  width: 100%;
  background-image: url("logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px auto;
}

/* Sidebar header: logo mark only (brand/logo.svg via background-image
   above); the login screen still shows site_logo + site_brand. */
.brand-link .brand-image,
.brand-link .brand-text {
  display: none !important;
}

.sidebar-menu .nav-link {
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease-in-out;
}

.sidebar-menu .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.sidebar-menu .nav-link.active {
  background-color: var(--doc-navy-light) !important;
  border-left-color: var(--doc-gold) !important;
  color: #fff !important;
  font-weight: 600;
}

.btn-primary,
a.btn-primary {
  background-color: var(--doc-navy) !important;
  border-color: var(--doc-navy) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:hover {
  background-color: var(--doc-navy-light) !important;
  border-color: var(--doc-navy-light) !important;
}

/* Dashboard "Add" / "Change" object-tool buttons default to flatly's stock
   success-teal / info-blue -- swapped for the same navy family so the
   dashboard reads as one palette instead of teal+blue+navy. */
.btn-success,
a.btn-success {
  background-color: var(--doc-navy-light) !important;
  border-color: var(--doc-navy-light) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
a.btn-success:hover {
  background-color: var(--doc-navy) !important;
  border-color: var(--doc-navy) !important;
}

.btn-info,
a.btn-info {
  background-color: var(--doc-navy) !important;
  border-color: var(--doc-navy) !important;
  color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
a.btn-info:hover {
  background-color: var(--doc-navy-dark) !important;
  border-color: var(--doc-navy-dark) !important;
}

.card.card-primary > .card-header {
  border-top-color: var(--doc-navy) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--doc-navy) !important;
  border-color: var(--doc-navy) !important;
}

.badge.bg-primary,
.badge-primary {
  background-color: var(--doc-navy) !important;
}

a:not(.btn):hover {
  color: var(--doc-navy-dark) !important;
}

/* Per-model row counts on the dashboard cards (e.g. "Leads (22063)"),
   replacing the separate active-row counts table that used to sit above
   them. */
.card .table-sm td .badge {
  margin-left: 6px;
  font-weight: 500;
  vertical-align: middle;
}

/* Changelist tables with long titles (Reports, Articles, ...) had no cap on
   the "name" column, so on narrower screens -- where the column has less
   width to work with -- long titles wrapped to 8-10 lines per row instead
   of 1-3, tripling the page's scroll length versus desktop. Django admin
   auto-classes this column `field-name`; clamp it to 2 lines everywhere so
   row height stays consistent regardless of viewport width. Full title is
   still one click away on the change page. */
.field-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}

/* Below the mobile breakpoint, results tables (Reports especially) have
   more columns than fit -- let them scroll horizontally inside their own
   box instead of squeezing every column down to near-zero width. */
@media (max-width: 767px) {
  .field-name a {
    max-width: 60vw;
  }

  #changelist .results {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #changelist table {
    min-width: 700px;
  }
}