/* ==========================================================================
   FJHX Bank — "Expert Sans" look & feel
   --------------------------------------------------------------------------
   Design language taken from the Barclays ROLB / authlogin design system
   (the supplied authlogin-bdl.css + rolb-theme-2-0.css), distilled into the
   typeface and palette this site actually uses.

   This file is loaded LAST on every page so that it overrides the template
   defaults. Sections:
     1. Expert Sans @font-face
     2. Design tokens (CSS custom properties)
     3. Base typography & links
     4. App chrome: navbar, side menu, footer
     5. Cards, buttons, forms, tables, badges, alerts, progress
     6. Legacy dashboard/ template bridge
     7. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Expert Sans
   The three supplied weights are declared under the exact family names the
   design-system CSS expects ("Expert Sans Regular/Light/Bold") so those rules
   resolve, plus a plain "Expert Sans" family with real weights.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Expert Sans Regular";
  src: url("../fonts/expert-sans/expert-sans-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Expert Sans Light";
  src: url("../fonts/expert-sans/expert-sans-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Expert Sans Bold";
  src: url("../fonts/expert-sans/expert-sans-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Plain family with real weights (handy for new markup). */
@font-face {
  font-family: "Expert Sans";
  src: url("../fonts/expert-sans/expert-sans-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Expert Sans";
  src: url("../fonts/expert-sans/expert-sans-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Expert Sans";
  src: url("../fonts/expert-sans/expert-sans-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --ex-navy: #00395d;
  --ex-navy-900: #011932;
  --ex-navy-700: #005b8d;
  --ex-blue: #0076b6;
  --ex-blue-dark: #005b8d;
  --ex-cyan: #00aeef;
  --ex-tint: #f2fbfe;
  --ex-tint-2: #f2f8fb;
  --ex-border: #e5ebee;
  --ex-border-2: #d9d9d9;
  --ex-grey: #666666;
  --ex-ink: #333333;
  --ex-muted: #7f7f7f;
  --ex-danger: #e00000;
  --ex-warn: #eb8000;
  --ex-success: #0076b6;
  --ex-radius: 8px;
  --ex-radius-sm: 4px;
  --ex-font: "Expert Sans Regular", Verdana, sans-serif;
  --ex-font-light: "Expert Sans Light", Verdana, sans-serif;
  --ex-font-bold: "Expert Sans Bold", "Expert Sans Regular", Verdana, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Base typography & links
   -------------------------------------------------------------------------- */
html,
body {
  font-family: var(--ex-font);
  color: var(--ex-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background-color: #eef3f6;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ex-font-light);
  color: var(--ex-navy);
  letter-spacing: 0;
}
h1, .h1 { font-weight: 300; }
h2, .h2, h3, .h3 { font-weight: 300; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 400; }
strong, b { font-family: var(--ex-font-bold); font-weight: 700; }
p, span, li, td, th, label, input, select, textarea, button {
  font-family: var(--ex-font);
}
small, .small { color: var(--ex-grey); }

a { color: var(--ex-blue); }
a:hover,
a:focus { color: var(--ex-navy); }

.text-muted, .text-muted a { color: var(--ex-grey) !important; }
.text-bold-700 { font-family: var(--ex-font-bold); font-weight: 700; }

::selection { background: var(--ex-cyan); color: #fff; }

/* --------------------------------------------------------------------------
   4. App chrome — top navbar, side menu, footer
   -------------------------------------------------------------------------- */

/* Top navbar — white bar, navy type, hairline border (Barclays header style). */
.header-navbar.navbar-bg-color,
.navbar-bg-color {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--ex-border);
  box-shadow: 0 1px 2px rgba(0, 57, 93, 0.06);
}
.header-navbar .navbar-container,
.header-navbar .navbar-header {
  background-color: transparent !important;
}
.header-navbar .nav-link,
.header-navbar .navbar-brand,
.header-navbar a {
  color: var(--ex-navy) !important;
}
.header-navbar .nav-link:hover,
.header-navbar .nav-link:focus {
  color: var(--ex-blue) !important;
}
.header-navbar .user-name { color: var(--ex-navy) !important; font-family: var(--ex-font-bold); }
.header-navbar .nav-search .input { border-color: var(--ex-border); }
.header-navbar .nav-search .input::placeholder { color: var(--ex-muted); }

/* Side menu — navy panel, white type, blue active state. */
.main-menu.menu-dark,
.menu-dark .main-menu-content,
.main-menu.menu-bg-default {
  background-color: var(--ex-navy) !important;
}
.main-menu.menu-shadow { box-shadow: 2px 0 8px rgba(0, 57, 93, 0.15); }
.navigation.navigation-main > li > a {
  color: #d7e3ec !important;
  font-size: 0.95rem;
}
.navigation.navigation-main > li > a i,
.navigation.navigation-main > li > a .menu-title { color: inherit !important; }
.navigation.navigation-main > li > a:hover,
.navigation.navigation-main > li:hover > a {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.navigation.navigation-main > li.active > a,
.navigation.navigation-main > li.active > a:hover {
  color: #ffffff !important;
  background-color: var(--ex-blue) !important;
  border-right: 3px solid var(--ex-cyan);
}
.navigation .navigation-header,
.navigation-header {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--ex-font-bold);
}
.main-menu .navigation-brand { color: #fff !important; }

/* Footer */
.footer,
.footer.footer-transparent {
  background: transparent !important;
  border-top: 1px solid var(--ex-border);
  color: var(--ex-grey);
}
.footer p { color: var(--ex-grey); font-size: 0.85rem; }
.footer a { color: var(--ex-blue) !important; }

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Cards */
.card {
  background-color: #ffffff;
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius);
  box-shadow: 0 1px 3px rgba(0, 57, 93, 0.06);
}
.card .card-header {
  border-bottom: 1px solid var(--ex-border);
  background-color: transparent;
  border-top-left-radius: var(--ex-radius);
  border-top-right-radius: var(--ex-radius);
}
.card .card-title { color: var(--ex-navy); font-family: var(--ex-font-light); }
.card .card-text { color: var(--ex-ink); }

/* Buttons — flat, blue, matching the design system */
.btn {
  font-family: var(--ex-font);
  border-radius: var(--ex-radius-sm);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}
.btn-primary,
.btn-gradient-primary,
.btn-gradient-primary.btn-round,
a.btn-gradient-primary {
  background: var(--ex-blue) !important;
  background-image: none !important;
  border: 1px solid var(--ex-blue) !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-gradient-primary:hover,
.btn-gradient-primary:focus,
.btn-gradient-primary:active {
  background: var(--ex-navy) !important;
  background-image: none !important;
  border-color: var(--ex-navy) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.btn-secondary,
.btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--ex-blue) !important;
  color: var(--ex-blue) !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: var(--ex-blue) !important;
  color: #ffffff !important;
}

/* Forms */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  font-family: var(--ex-font);
  color: var(--ex-ink);
  background-color: #ffffff;
  border: 1px solid var(--ex-border-2);
  border-radius: var(--ex-radius-sm);
  box-shadow: none;
}
.form-control:focus {
  border-color: var(--ex-blue);
  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.15);
}
.form-control::placeholder { color: var(--ex-muted); }
label { color: var(--ex-navy); }
legend { color: var(--ex-navy); border-bottom: 1px solid var(--ex-border); }

/* Tables */
.table { background-color: #ffffff; }
.table thead th {
  color: var(--ex-navy);
  font-family: var(--ex-font-bold);
  border-bottom: 1px solid var(--ex-border);
  border-top: 0;
}
.table td,
.table th { border-color: var(--ex-border); }
.table td { color: var(--ex-ink); }
.table-hover tbody tr:hover { background-color: var(--ex-tint); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--ex-tint-2); }
.table a { color: var(--ex-blue); }

/* Badges, alerts, progress */
.badge-primary { background-color: var(--ex-blue); }
.badge-success, .badge-success.bg-success { background-color: var(--ex-blue); }
.alert { border-radius: var(--ex-radius-sm); }
.alert-info { background-color: var(--ex-tint); border-color: var(--ex-border); color: var(--ex-navy); }
.alert-success { background-color: #eef8fd; border-color: var(--ex-border); color: var(--ex-navy); }
.alert-danger { color: #8a0000; }
.progress { background-color: var(--ex-border); }
.progress-bar,
.progress-bar.bg-success { background-color: var(--ex-cyan) !important; }

/* Dropdowns */
.dropdown-menu {
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 57, 93, 0.12);
}
.dropdown-item { color: var(--ex-ink); }
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--ex-tint); color: var(--ex-navy); }
.dropdown-divider { border-top-color: var(--ex-border); }

/* Pagination, tabs, nav */
.pagination .page-link { color: var(--ex-blue); border-color: var(--ex-border); }
.pagination .page-item.active .page-link {
  background-color: var(--ex-blue);
  border-color: var(--ex-blue);
  color: #fff;
}
.nav-tabs .nav-link.active { color: var(--ex-navy); }
.nav-tabs { border-bottom-color: var(--ex-border); }

/* Keep the template's progress accent on-brand */
.bg-success { background-color: var(--ex-blue) !important; }

/* --------------------------------------------------------------------------
   6. Legacy dashboard/ template bridge (Poppins-based admin.css)
   -------------------------------------------------------------------------- */
.dashboard-shell, .page-wrapper { font-family: var(--ex-font); }
.page-wrapper .page-header { border-bottom: 1px solid var(--ex-border); }
.sidebar .sidebar-inner,
.sidebar { background-color: var(--ex-navy); }
.sidebar a { color: #d7e3ec; }
.sidebar a:hover, .sidebar a.active { color: #ffffff; }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .header-navbar .navbar-header { background-color: #ffffff !important; }
}
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.75rem; }
  .card { border-radius: var(--ex-radius); }
}