@charset "UTF-8";
/* ============================================================ */
/* Lorenza Risk Solutions — brand override                      */
/* Palette = "Color Palette 01" from the 2026-07 brand doc      */
/* (Lorenza_Logo Color.pdf, rendered to sRGB — confirm official */
/* web hex with designer if any).                               */
/* Type: Open Sans (chosen 2026-07-02).                         */
/* 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=Open+Sans:wght@300;400;500;600;700&display=swap');

/* ============================================================ */
/* Tokens                                                       */
/* ============================================================ */
:root {
  /* Brand */
  --cl-primary:        #499C91;  /* brand teal */
  --cl-secondary:      #8AADAF;  /* slate teal */
  --cl-complementary:  #ACD747;  /* lime (logo arrow accent) */
  --cl-rollover:       #92BC33;  /* lime, darkened for hover */
  --cl-light:          #ACD747;  /* light accent (login links, active nav) */

  /* Neutrals */
  --cl-dark:           #284346;  /* deep teal (wordmark) */
  --cl-text:           #284346;
  --cl-gray:           #CBCAC6;  /* brand warm gray */
  --cl-background:     #EBEBE9;  /* brand light gray */
  --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: 'Open Sans', 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 — Open Sans 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); }

/* ============================================================ */
/* Sidebar — brand the chrome                                   */
/* The theme ships a navy sidebar (#14213d) and a warm-gray     */
/* submenu panel (#58595b); with the teal palette both read as  */
/* foreign, so re-base them on the brand dark token.            */
/* ============================================================ */
#sidebar,
.sidebar {
  background-color: var(--cl-dark) !important;
}
.sidebar-nav > li ul {
  background-color: color-mix(in srgb, var(--cl-dark) 80%, #000) !important;
}

/* ============================================================ */
/* Sidebar logo placement                                       */
/* The extracted wordmark SVG has a tight bounding box (no      */
/* internal padding like the EverStrong PNGs), so give it       */
/* breathing room and center it; the collapsed rail shows just  */
/* the lime arrow, centered.                                    */
/* ============================================================ */
#sidebar header.logo {
  height: auto;
  line-height: 1;
  margin: 0 0 1.5rem;
  padding: 1.5rem 1.5rem 0.5rem !important; /* replaces .p-3 */
}
#sidebar .logo-img-wrapper {
  text-align: center;
  padding: 0;
}
#sidebar .logo-img-wrapper .fullLogo {
  width: 100%;
  max-width: 160px;
}
/* Collapsed rail (50px wide): arrow mark only, centered.
   No display rule here — the theme JS toggles .hide (display:none)
   between fullLogo/smallLogo and must keep winning. */
#sidebar .logo-img-wrapper .smallLogo {
  height: 26px !important;
  width: auto !important;
  margin-top: 2px;
}
.nav-collapsed #sidebar header.logo {
  padding: 1.25rem 0 0.5rem !important;
}

/* Active sidebar item: the theme ships an amber accent (#ffc247,
   also its --warning color — only the sidebar rules are overridden
   here). Use the lime brand accent: lime text + lime icon badge
   with a deep-teal glyph (white-on-lime would be unreadable). */
.sidebar-nav>.active>a,
.sidebar-nav>.active>a:hover {
  color: var(--cl-light) !important;
  /* the theme's active-row bg renders as a warm gray on the dark
     sidebar — use a subtle lighten of the dark bg instead */
  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 Lorenza teal                     */
/* ============================================================ */
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 = teal, UPPERCASE bold               */
/* ============================================================ */
.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 TEAL, uppercase,
   bold. btn-success (Submit/Save/Generate/Add/Edit/View, ~400 uses) is
   unified with btn-primary so every primary action reads as "go" and
   stands out from the deep-teal 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) 80%, #000) !important;
  border-color: color-mix(in srgb, var(--cl-primary) 80%, #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 dark */
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 the brand deep teal                     */
/* ============================================================ */
/* Links on the dark card must be light to read (the default
   text-primary is too low-contrast on the dark card). */
.widget-login .text-primary,
.widget-login a.text-primary,
.widget-login .forgot-password-wrapper a {
  color: var(--cl-light) !important; /* lime accent, readable on the dark card */
}
.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. */
/* Card uses the brand dark token. */
.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;
  /* The theme hardcodes background:#14213D on this wrapper (invisible on
     EverStrong's navy card, a clashing navy box on ours) — let the card
     color show through instead. */
  background: transparent !important;
}
.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;
}