/* ==========================================================================
   Versigent Brand Theme — override layer
   Load AFTER argon.css and custom.css. Does not edit either file, so this
   theme can be disabled by removing/commenting a single <link> tag.
   Brand ref: docs/Versigent_BrandOnAPage_v05.pdf (v1.2 Jan 2026)
   ========================================================================== */

:root {
  /* Brand palette */
  --vg-copper: #CD7925;
  --vg-copper-dark: #A9611C;
  --vg-molten-gold: #F7A900;
  --vg-packard-blue: #16283F;
  --vg-electric-blue: #0857C3;
  --vg-sky-blue: #74D2E7;
  --vg-neon-green: #79DD05;
  --vg-forest-green: #004624;
  --vg-light-sienna: #CB9552;
  --vg-aluminum-1: #F1F1F1;
  --vg-aluminum-2: #888B8D;
  --vg-warm-white: #FBFAF6;

  --vg-gradient-copper: linear-gradient(87deg, var(--vg-copper) 0, var(--vg-molten-gold) 100%);
  --vg-gradient-silver: linear-gradient(87deg, var(--vg-aluminum-2) 0, var(--vg-aluminum-1) 100%);

  /* Typography: Inter for body, Aeonik for headline (falls back to Inter
     until a licensed Aeonik font file is added — see assets/css/Aeonik.css). */
  --vg-font-body: 'Inter', 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  --vg-font-display: 'Aeonik', 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* Non-semantic Bootstrap/Argon variables re-pointed to brand colors.
     NOTE: kept for components that reference var(--warning) etc. directly;
     status-meaning colors (success/danger) are intentionally left as-is
     (see selector overrides below). */
  --default: var(--vg-packard-blue);
}

/* --------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------- */
body,
.btn,
.form-control,
.navbar,
input,
select,
textarea {
  font-family: var(--vg-font-body);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.navbar-brand {
  font-family: var(--vg-font-display);
}

/* --------------------------------------------------------------------
   Brand-facing accents that were previously hardcoded orange
   (#f79257 / #fa6741 in assets/css/custom.css) — re-pointed to
   Versigent Copper. These are decorative/interactive accents, not
   status-meaning colors, so it's safe to rebrand them directly.
   -------------------------------------------------------------------- */
table.dataTable tbody > tr.selected,
.mytable-fixed tr.selected td {
  background-color: var(--vg-copper) !important;
}

.page-item.active .page-link {
  border-color: var(--vg-copper);
  background-color: var(--vg-copper);
}

.focused .form-control {
  border-color: var(--vg-copper);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--vg-copper);
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--vg-copper);
  background-color: var(--vg-copper);
}

.nav-ceisa .nav-link:hover {
  color: var(--vg-copper);
}

.nav-ceisa .nav-link.active {
  background: var(--vg-gradient-copper);
  box-shadow: 0 -2px 8px rgba(205, 121, 37, 0.35);
}

/* --------------------------------------------------------------------
   Brand chrome: TopNav / login gradients
   Argon's own .bg-gradient-warning / .bg-gradient-orange are the exact
   classes used for the brand-orange look in TopNav.php and auth pages —
   safe to repoint since they are not used elsewhere as a generic
   "warning" status indicator (that role is played by .badge-warning /
   .alert-warning, left untouched here).
   -------------------------------------------------------------------- */
.bg-gradient-warning,
.bg-gradient-orange {
  background: var(--vg-gradient-copper) !important;
}

/* --------------------------------------------------------------------
   Sidebar — kept light per brand direction; copper used only as accent
   -------------------------------------------------------------------- */
#sidenav-main .sidenav-header {
  height: 88px;
  border-bottom: 2px solid var(--vg-copper);
}

/* Logo: Argon's default (max-height 2rem inside 1.5rem padding all around)
   renders the Versigent wordmark far too small. Give it a prominent size,
   but reserve the toggler's own space first (flex-shrink: 0) so a larger
   logo scales within what's left instead of pushing/overlapping it. */
#sidenav-main .navbar-brand {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 0.75rem 0.5rem 0.75rem 1.25rem;
}

#sidenav-main .sidenav-header > .ml-auto {
  flex-shrink: 0;
}

#sidenav-main .navbar-brand-img {
  max-height: 3rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

#sidenav-main {
  background-color: var(--vg-packard-blue) !important;
}

#sidenav-main .navbar-nav .nav-link,
#sidenav-main .navbar-nav .nav-link span,
#sidenav-main .navbar-nav .nav-link .parent-nav,
#sidenav-main .navbar-nav .nav-link .nav-link-text {
  color: #fff !important;
}

#sidenav-main .navbar-nav i,
#sidenav-main .navbar-nav .nav-link i,
#sidenav-main .navbar-nav .nav-link[data-toggle='collapse']:after {
  color: #fff !important;
}

#sidenav-main .navbar-nav .nav-link:hover,
#sidenav-main .navbar-nav .nav-link:hover span,
#sidenav-main .navbar-nav .nav-link:hover .parent-nav,
#sidenav-main .navbar-nav .nav-link[aria-expanded="true"],
#sidenav-main .navbar-nav .nav-link[aria-expanded="true"] span,
#sidenav-main .navbar-nav .nav-link[aria-expanded="true"] .parent-nav,
#sidenav-main .navbar-nav > .nav-item > .nav-link.active,
#sidenav-main .navbar-nav > .nav-item > .nav-link.active span,
#sidenav-main .navbar-nav > .nav-item > .nav-link.active .parent-nav {
  color: var(--vg-copper) !important;
}

/* --------------------------------------------------------------------
   Buttons — new brand-accent utility, separate from semantic btn-warning
   -------------------------------------------------------------------- */
.btn-copper {
  color: #fff;
  background: var(--vg-gradient-copper);
  border-color: var(--vg-copper);
}

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

.text-copper {
  color: var(--vg-copper) !important;
}

.bg-navy {
  background-color: var(--vg-packard-blue) !important;
}

/* --------------------------------------------------------------------
   Pattern utilities — apply manually to high-impact elements only
   (auth pages hero, dashboard banner). Not applied globally.
   -------------------------------------------------------------------- */
.bg-versigent-pattern {
  background-color: var(--vg-packard-blue);
  background-image: url('../img/versigent/pattern-sweeping-cables.svg');
  background-size: cover;
  background-position: center;
}

.bg-versigent-gradient {
  background: var(--vg-gradient-copper) !important;
}

/* --------------------------------------------------------------------
   SweetAlert2 — confirm buttons already reuse btn btn-{type}, so brand
   colors cascade automatically; only the icon/border accents need a
   direct touch here.
   -------------------------------------------------------------------- */
.swal2-icon.swal2-warning {
  border-color: var(--vg-copper);
  color: var(--vg-copper);
}

/* --------------------------------------------------------------------
   Preloader — spinner accent (assets/css/preloader.css)
   -------------------------------------------------------------------- */
.preloader-animation {
  border-top-color: var(--vg-copper) !important;
}

.preloader-animation:before {
  border-top-color: var(--vg-molten-gold) !important;
}

.preloader-animation:after {
  border-top-color: var(--vg-packard-blue) !important;
}