@charset "UTF-8";
/* ============================================================ */
/* EverStrong Assurance — Brand override layer                  */
/* Maps the EverStrong Design System onto the admin theme.      */
/* Loaded AFTER application.css + custom.css so it wins.        */
/* Source of truth: resources/design-system/tokens/*.css        */
/* ------------------------------------------------------------ */
/* This file is iterated against the running CMS. High-impact   */
/* brand surfaces first (color, type, buttons, cards).          */
/* ============================================================ */

/* ---- Web font ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================ */
/* Tokens                                                       */
/* ============================================================ */
:root {
  /* Brand */
  --cl-primary:        #005CB9;
  --cl-secondary:      #00b3ff;
  --cl-complementary:  #e04403;
  --cl-rollover:       #e02803;
  --cl-light:          #9ae0ff;

  /* Neutrals */
  --cl-dark:           #14213c;
  --cl-text:           #14213c;
  --cl-gray:           #7f91a4;
  --cl-background:     #dcdfe3;
  --cl-black:          #191919;
  --cl-white:          #ffffff;

  /* System */
  --cl-error-100:   #C00000;
  --cl-warning-100: #F76800;
  --cl-success-100: #00A29B;
  --cl-info-100:    #0076CF;

  /* Action */
  --action-bg:       var(--cl-complementary);
  --action-bg-hover: var(--cl-rollover);
  --action-fg:       var(--cl-white);

  /* Type */
  --ff-primary: 'Inter', Arial, Helvetica, sans-serif;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;

  /* Radius */
  --br-xl: 2rem; --br-m: 1rem; --br-s: 0.5rem; --br-xs: 0.25rem;
  --br-card: var(--br-m) var(--br-m) var(--br-m) 0; /* signature bracket-cut */

  /* Motion */
  --transition: all 200ms ease-in-out;
}

/* ============================================================ */
/* Typography — Inter everywhere                                */
/* ============================================================ */
body,
.btn,
button,
input,
select,
textarea,
.form-control,
h1, h2, h3, h4, h5, h6,
.navbar,
.card {
  font-family: var(--ff-primary);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: var(--fw-medium); }

/* Active sidebar item: the theme ships an amber accent (#ffc247,
   also its --warning color — only the sidebar rules are overridden
   here). Use the pale brand blue: light text + light icon badge
   with a dark navy glyph, over a subtle lighten of the navy row. */
.sidebar-nav>.active>a,
.sidebar-nav>.active>a:hover {
  color: var(--cl-light) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
}
.sidebar-nav>.active>a .icon {
  background-color: var(--cl-light) !important;
}
.sidebar-nav>.active>a .icon .fa,
.sidebar-nav>.active>a .icon .glyphicon,
.sidebar-nav>.active>a .icon .fi,
.sidebar-nav>.active>a .icon .la {
  color: var(--cl-dark) !important;
}

/* ============================================================ */
/* Color — links & accents to EverStrong blue                  */
/* ============================================================ */
a { color: var(--cl-primary); }
a:hover, a:focus { color: color-mix(in srgb, var(--cl-primary) 82%, #000); }

::selection { background: var(--cl-primary); color: var(--cl-white); }

/* ============================================================ */
/* Buttons — brand primary = blue, UPPERCASE bold               */
/* (Orange reads as a stop/danger action in a system UI, so the */
/*  primary action uses the brand blue instead.)                */
/* ============================================================ */
.btn {
  font-family: var(--ff-primary);
  font-weight: var(--fw-medium);
  transition: var(--transition);
}

/* One modest, consistent radius for ACTION buttons — in line with the
   text inputs and dropdown toggles (no pills in a system UI). Applied
   to the variants, not the .btn base, since dropdown toggles also
   carry the .btn class (e.g. bootstrap-select btn-light). */
.btn-primary,
.btn-success,
.btn-secondary,
.btn-outline-primary,
.btn-outline-light {
  border-radius: var(--br-xs);
}

/* Dropdown toggles (selectpicker / bootstrap-select / split buttons):
   keep a subtle radius in line with the text inputs, never a pill. */
.btn.dropdown-toggle,
.bootstrap-select > .dropdown-toggle {
  border-radius: var(--br-xs);
}

/* Match bootstrap-select toggle height to .form-control text fields.
   The theme leaves a large top padding (~21px, vs ~5px bottom) which
   makes dropdowns taller than inputs and pushes the label up. Make the
   vertical padding symmetric to match the inputs; bootstrap-select's
   own (absolutely positioned) text element inherits this padding and
   centers correctly. */
.bootstrap-select > .dropdown-toggle.btn-light,
.bootstrap-select > .dropdown-toggle {
  height: 34px !important;
  padding-top: 5.25px !important;
  padding-bottom: 5.25px !important;
}

/* Floating-label forms place an absolute label (label.form-control-label)
   over the control, so every dropdown in that form-group needs the tall
   top padding to clear the label — exactly like the text inputs that add
   `.pt-4`. Scope on the form-group so it covers ALL the structural
   variants seen in the app: the select directly after the label, the
   select nested in an .input-group (edit forms), and companion "unit"
   selects in an .input-group-append. Static-label forms have a plain
   <label> (no .form-control-label) and keep the 34px height above. */
.form-group:has(label.form-control-label) .bootstrap-select > .dropdown-toggle {
  height: auto !important;
  padding-top: 21px !important;
  padding-bottom: 5.25px !important;
}

/* Primary + affirmative actions share one look: brand blue, uppercase,
   bold. btn-success (Submit/Save/Generate/Add/Edit/View, ~400 uses) is
   unified with btn-primary so every primary action is blue and stands
   out from navy Cancel/Close/Back (btn-inverse). */
.btn-primary,
.btn-success {
  background-color: var(--cl-primary) !important;
  border-color: var(--cl-primary) !important;
  color: var(--cl-white) !important;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: color-mix(in srgb, var(--cl-primary) 82%, #000) !important;
  border-color: color-mix(in srgb, var(--cl-primary) 82%, #000) !important;
  color: var(--cl-white) !important;
}

/* Secondary / outline mapped to brand blue */
.btn-secondary {
  background-color: var(--cl-dark);
  border-color: var(--cl-dark);
  color: var(--cl-white);
}
.btn-outline-primary {
  color: var(--cl-primary);
  border-color: var(--cl-primary);
}
.btn-outline-primary:hover {
  background-color: var(--cl-primary);
  border-color: var(--cl-primary);
  color: var(--cl-white);
}

/* ============================================================ */
/* Cards / panels — signature asymmetric "bracket-cut" radius  */
/* ============================================================ */
.card {
  border-radius: var(--br-card);
}

/* ============================================================ */
/* Page title — brand convention (already started in custom.css)*/
/* ============================================================ */
.page-title {
  font-family: var(--ff-primary);
  font-weight: var(--fw-medium);
  color: var(--cl-primary);
  text-transform: uppercase;
}

/* ============================================================ */
/* Status & accent color normalization                          */
/* The vendor theme ships an old accent (#547fff periwinkle) and */
/* an old "UIG" success green (#3abf94). Remap the semantic       */
/* helpers to the brand blue and design-system success teal so    */
/* badges, labels, pills and alerts read consistently brand-wide. */
/* ============================================================ */

/* Primary accent -> brand blue (was #547fff) */
.badge-primary,
.bg-primary,
.label-primary {
  background-color: var(--cl-primary) !important;
}
.text-primary { color: var(--cl-primary) !important; }
.border-primary { border-color: var(--cl-primary) !important; }

/* Success -> design-system success teal (was old green #3abf94) */
.badge-success,
.bg-success,
.label-success {
  background-color: var(--cl-success-100) !important;
}
.text-success { color: var(--cl-success-100) !important; }
.border-success { border-color: var(--cl-success-100) !important; }
.alert-success {
  background-color: color-mix(in srgb, var(--cl-success-100) 14%, #fff) !important;
  border-color: color-mix(in srgb, var(--cl-success-100) 45%, transparent) !important;
  color: color-mix(in srgb, var(--cl-success-100) 55%, #000) !important;
}

/* Old pale-green table header (custom.css .vertical_head) -> brand wash */
.vertical_head tr th {
  background-color: color-mix(in srgb, var(--cl-primary) 10%, #fff) !important;
}

/* Pace.js page-load bar + spinner -> brand blue (was periwinkle #547fff) */
.pace .pace-progress { background: var(--cl-primary) !important; }
.pace .pace-activity {
  border-top-color: var(--cl-primary) !important;
  border-left-color: var(--cl-primary) !important;
}

/* Reports / accounting sub-tabs (.submenu-item) were old green (#3EC096).
   Inactive -> neutral light; active -> brand blue. */
.submenu-item {
  background-color: #e9ecef !important;
}
.submenu-item.active {
  background-color: var(--cl-primary) !important;
}
.submenu-item.active,
.submenu-item.active a {
  color: var(--cl-white) !important;
}

/* Theme styled <hr> dividers as a green accent bar -> neutral brand
   divider (light gray hairline) on light content surfaces. */
hr {
  background-color: var(--cl-background) !important;
  border-color: color-mix(in srgb, var(--cl-gray) 30%, transparent) !important;
}
/* Sidebar (navy): hide the section dividers entirely — the spacing
   alone groups the sections. */
#sidebar hr {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* DataTables totals/footer row (.dt_footer) was old green -> brand navy */
tr.dt_footer,
.dt_footer,
tr.dt_footer td,
.dt_footer td {
  background-color: var(--cl-dark) !important;
  color: var(--cl-white) !important;
}

/* ============================================================ */
/* Login card — sits on dark navy                               */
/* ============================================================ */
/* Links on the dark card must be light to read (the default
   text-primary brand blue is too dark on navy). */
.widget-login .text-primary,
.widget-login a.text-primary,
.widget-login .forgot-password-wrapper a {
  color: var(--cl-light) !important; /* pale blue, readable on navy */
}
.widget-login .forgot-password-wrapper a:hover,
.widget-login a.text-primary:hover {
  color: var(--cl-white) !important;
}

/* Vertically center the logo and the "Login to…" heading. The header
   flex-centers the two wrappers, but the logo image was pushed ~5px low
   by an asymmetric top padding on its wrapper — zero it so the logo and
   heading share a true center line. */
/* Use the exact brand navy (theme ships #14213d; brand is #14213c). */
.widget-login {
  background-color: var(--cl-dark) !important;
}
.widget-login header {
  align-items: center !important;
  padding-top: 1.625rem !important; /* top breathing room, matched to the
                                       gap below the Login button (~24px) */
}
.widget-login .login-logo-wrapper {
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.widget-login .login-heading-wrapper {
  margin: 0 !important;
}
.widget-login .login-heading-wrapper h4 {
  margin: 0;
  line-height: 1.2;
}

/* ============================================================ */
/* Report filter rows — Generate Report + Export Excel buttons   */
/* ============================================================ */
/* The two buttons live in a narrow col-lg-2 that clips/wraps them
   (worse now that primary buttons are uppercase). Let that column size
   to its content so both buttons sit side by side whenever the row has
   room. Targets the column by the buttons it contains (:has), so all
   ~20 report pages are fixed by this one rule. */
[class*="col-"]:has(> button[onclick="loadReport()"]) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap;
}