/* ==========================================================================
   SMBC Whitelabel Theme (Cleaned, Scoped)
   Scope: add class "theme-smbc" to <html> or <body> to activate
   Version: 1.0.0 (2025-11-05)
   Notes:
   - Palette restricted to SMBC greens + neutrals
   - Accessible contrast and consistent focus styles
   - Minimal !important; specificity comes from scoping
   ========================================================================== */

/* Optional: include brand typeface (adjust URLs to your asset paths) */
@font-face {
  font-family: "APP-FNT";
  src:
    url("../images/smbc/fonts/NotoSansJP-Regular.woff2") format("woff2"),
    url("../images/smbc/fonts/NotoSansJP-Regular.woff") format("woff"),
    url("../images/smbc/fonts/NotoSansJP-Regular.otf") format("opentype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Root Tokens
   -------------------------------------------------------------------------- */
.theme-smbc {
  /* Brand */
  --app-theme-clr: #004831;          /* Trad Green */
  --app-accent-clr: #c4d700;         /* Fresh Green */
  --app-theme-bg-clr: #e8f3e0;       /* Light brand tint */

  /* Neutrals */
  --app-light-clr: #ffffff;
  --app-dark-clr: #111111;
  --app-text-clr: #222222;
  --app-muted-text-clr: #555555;
  --app-border-clr: #e6e6e6;
  --app-bg-soft: #f8f8f8;

  /* Semantics */
  --app-info-clr: #004831;
  --app-success-clr: #0a6d3a;
  --app-warning-clr: #8a7b00;
  --app-error-clr: #9b1c1c;

  /* Controls */
  --app-checkbox-bg-clr: #004831;
  --app-input-txt-color: #222222;
  --app-input-bg-color: #ffffff;
  --app-input-border-color: #ced4da;
  --app-focus-ring: 0 0 0 .2rem rgba(0, 72, 49, .25);

  /* Buttons */
  --app-btn-radius: .5rem;
  --app-card-radius: .75rem;
  --app-btn1-bg-clr: #004831;
  --app-btn1-txt-clr: #ffffff;
  --app-btn1-bg-hvr-clr: #ffffff;
  --app-btn1-hover-txt-clr: #004831;

  --app-btn2-bg-clr: #c4d700;
  --app-btn2-txt-clr: #111111;

  --app-btn3-bg-clr: #004831;
  --app-btn3-hover-bg-clr: #ffffff;
  --app-btn3-hover-txt-clr: #004831;

  --app-btn-disabled: #b8c2b8;
  --app-btn-disabled-hover: #d9ded9;
  --app-disable-clr: #dcdcdc;

  /* Tabs / Pills */
  --app-tab-btn-bg-clr: #ffffff;
  --app-tab-btn-txt-clr: #004831;
  --app-tab-btn-checked-clr: #004831;

  /* Badges */
  --app-badge-bg-clr: #c4d700;
  --app-badge-txt-clr: #004831;

  /* Date Range */
  --app-daterange-bg-select-clr: #c4d700;
  --app-daterange-txt-select-clr: #004831;

  /* Shadows */
  --app-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --app-shadow-md: 0 2px 8px rgba(0,0,0,.08);
  --app-shadow-lg: 0 8px 24px rgba(0,0,0,.12);

  /* Fromm buyer app pickups */
  --app-btn1-hover-txt-clr:#ffffff;
  --app-btn1-hover-bg-clr:#1b5f46;
  --smbc-pearl-white:#f5f6f1;
}

/* --------------------------------------------------------------------------
   Base & Typography
   -------------------------------------------------------------------------- */
.theme-smbc,
.theme-smbc body,
.theme-smbc #wrapper {
  color: var(--app-text-clr);
  background: var(--app-theme-bg-clr) !important;
  font-family: "APP-FNT", "Noto Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.5;
}

/* Ensure main content area uses brand light tint too */
.theme-smbc .content-page,
.theme-smbc #content-page,
.theme-smbc .content,
.theme-smbc .content-page .content {
  background: var(--app-theme-bg-clr) !important;
}

/* Override inline styles set by JavaScript - must be very specific */
.theme-smbc body[style*="background-color"],
.theme-smbc #wrapper[style*="background-color"],
.theme-smbc #content-page[style*="background-color"] {
  background-color: var(--app-theme-bg-clr) !important;
}
.theme-smbc a {
  color: var(--app-theme-clr) !important;
  text-decoration-color: color-mix(in srgb, var(--app-theme-clr) 50%, #ffffff);
}

.theme-smbc a:hover {
  color: var(--app-btn1-hover-bg-clr) !important;
  text-decoration-color: var(--app-btn1-hover-bg-clr) !important;
}

/* Top-right profile toggle (nav-user) - ensure hover background is applied */
.theme-smbc #profileDropdown:hover,
.theme-smbc a.nav-link.nav-user:hover {
  color: var(--app-btn1-hover-bg-clr) !important;
  background-color: var(--smbc-pearl-white) !important;
  /* Some navbar/link rules may override background; this inset fill makes it visible. */
  /* box-shadow: inset 0 0 0 1000px var(--smbc-pearl-white) !important; */
  border: 2px solid var(--app-btn1-hover-bg-clr) !important;
}

/* Icons: line-only, inherit color */
/*.theme-smbc svg { stroke: currentColor; fill: none; }*/

/* Focus (use :focus-visible for keyboard) */
.theme-smbc :where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 0;
  box-shadow: var(--app-focus-ring);
  border-color: var(--app-theme-clr);
}

/* --------------------------------------------------------------------------
   Logos (background-image approach for reliability)
   Apply to an empty <span class="loginLogo"></span> or similar element.
   -------------------------------------------------------------------------- */
.theme-smbc .loginLogo,
.theme-smbc .brand-logo {
  display: inline-block;
  width: 200px;
  height: 48px;
  background: url('../images/smbc/app-logo1.png') center/contain no-repeat;
}

/* Login Page Logos */
/* Hide broken img tags and use background-image on parent anchor tag */
.theme-smbc img.login-logo-dark,
.theme-smbc img.login-logo-light {
  display: none !important;
}

/* Use parent anchor tag (.logo) for logo background */
.theme-smbc .auth-logo .logo,
.theme-smbc .auth-logo a.logo,
.theme-smbc .auth-brand .auth-logo .logo,
.theme-smbc .auth-brand .auth-logo a.logo {
  display: inline-block !important;
  width: 200px !important;
  height: 62px !important;
  min-height: 62px !important;
  background-image: url('../images/smbc/app-logo.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}

.theme-smbc .auth-logo .logo.logo-dark,
.theme-smbc .auth-logo a.logo.logo-dark,
.theme-smbc .auth-brand .auth-logo .logo.logo-dark,
.theme-smbc .auth-brand .auth-logo a.logo.logo-dark {
  background-image: url('../images/smbc/app-logo.png') !important;
}

.theme-smbc .auth-logo .logo.logo-light,
.theme-smbc .auth-logo a.logo.logo-light,
.theme-smbc .auth-brand .auth-logo .logo.logo-light,
.theme-smbc .auth-brand .auth-logo a.logo.logo-light {
  background-image: url('../images/smbc/app-logo.png') !important;
}

/* Ensure auth-logo container properly displays logo */
.theme-smbc .auth-logo,
.theme-smbc .auth-brand .auth-logo {
  display: block !important;
  text-align: center !important;
  margin-bottom: 1.5rem;
}

/* Center auth-brand container */
.theme-smbc .auth-brand {
  text-align: center !important;
}

/* Login page: Show only logo-dark (for white background), hide logo-light */
.theme-smbc .auth-logo .logo.logo-dark,
.theme-smbc .auth-logo a.logo.logo-dark,
.theme-smbc .auth-brand .auth-logo .logo.logo-dark,
.theme-smbc .auth-brand .auth-logo a.logo.logo-dark {
  display: inline-block !important;
  margin: 0 auto !important;
}

.theme-smbc .auth-logo .logo.logo-light,
.theme-smbc .auth-logo a.logo.logo-light,
.theme-smbc .auth-brand .auth-logo .logo.logo-light,
.theme-smbc .auth-brand .auth-logo a.logo.logo-light {
  display: none !important;
}

/* Auth/logout pages: prevent second logo layer from generic .logo-lg background */
.theme-smbc .auth-logo .logo .logo-lg,
.theme-smbc .auth-logo a.logo .logo-lg,
.theme-smbc .auth-brand .auth-logo .logo .logo-lg,
.theme-smbc .auth-brand .auth-logo a.logo .logo-lg {
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Auth Fluid Right - Background Image Container */
.theme-smbc .auth-fluid {
  background: url('../images/smbc/bg-img.jpg') !important;
  background-position: center !important; /* Center the image */
  background-repeat: no-repeat !important; /* Do not repeat the image */
  background-size: 100% 100% !important; /* Stretch image to fill container both vertically and horizontally */
  justify-content: end !important;
  overflow: hidden !important; /* Login page must never scroll, under any circumstance */
}

/* "Don't have an account? Contact Us" line — trailing margin can't fix this once .card-body is
   vertically centered inside an overflow:hidden box: a taller centered block just gets pushed off
   both top AND bottom equally. Fix is to shrink the block itself, not to pad the bottom. Keep this
   negligible, just enough to avoid it looking flush. Mirrors the fix already validated on
   bmo/bankops's bmo-theme.css, scoped to .theme-smbc here instead. */
.theme-smbc footer.text-center p.text-muted:last-of-type {
  margin-bottom: 0.25rem !important;
}

/* The centered card-body wrapper (div.d-flex.align-items-center.h-100) was consuming the box's
   entire height via h-100, pushing the sibling <footer> below the fold where overflow:hidden then
   clipped it. Let it share the box with the footer instead: take only the space the footer doesn't
   need, rather than 100% unconditionally. */
.theme-smbc .auth-fluid-form-box {
  padding: 1.5rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
}

.theme-smbc .auth-fluid-form-box > div.d-flex.h-100 {
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.theme-smbc .auth-fluid-form-box > footer {
  flex: 0 0 auto !important;
}

.theme-smbc .auth-fluid-form-box .auth-brand.mb-4 {
  margin-bottom: 0.75rem !important;
}

.theme-smbc .auth-fluid-form-box p.mb-4 {
  margin-bottom: 0.75rem !important;
}

.theme-smbc .auth-fluid-form-box .form-group.mb-3,
.theme-smbc .auth-fluid-form-box .form-group.mb-2 {
  margin-bottom: 0.5rem !important;
}

.theme-smbc .auth-fluid-form-box .btn.mb-2,
.theme-smbc .auth-fluid-form-box .btn.mb-1 {
  margin-bottom: 0.4rem !important;
}

.theme-smbc .auth-fluid-right {
  background: url('../images/smbc/bg-img.jpg') !important;
  background-position: center !important; /* Center the image */
  background-repeat: no-repeat !important; /* Do not repeat the image */
  background-size: 100% 100% !important; /* Stretch image to fill container both vertically and horizontally */
}

/* Auth User Testimonial - Semi-transparent background for text readability */
.theme-smbc .auth-user-testimonial {
  background-color: rgba(0, 0, 0, 0.4) !important; /* Subtle semi-transparent dark background */
  padding: 1.5rem 2rem !important;
  border-radius: 0.75rem !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.theme-smbc .auth-user-testimonial p.lead,
.theme-smbc .auth-user-testimonial #getMeasurableImprovementMsg {
  background-color: transparent !important; /* Remove background from paragraph since container has it */
  padding: 0 !important; /* Remove padding since container has it */
  border-radius: 0 !important;
  display: block !important;
}

/* SMBC Logo Images - img tags without src attribute */
/* Strategy: Hide broken img and use parent container (span) with background-image */
.theme-smbc .logo-sm img.appSmLogo,
.theme-smbc img.appSmLogo {
  display: none !important;
}

.theme-smbc .logo-lg img.appLgLogo,
.theme-smbc img.appLgLogo {
  display: none !important;
}

/* Default state (expanded sidebar): Show logo-lg, hide logo-sm */
/* Apply to all logo containers (sidebar and navbar) - must be very specific */
.theme-smbc .logo .logo-sm,
.theme-smbc .logo-sm,
.theme-smbc .logo-box .logo .logo-sm,
.theme-smbc .navbar-custom .logo-box .logo .logo-sm,
.theme-smbc .left-side-menu .logo-box .logo .logo-sm {
  display: none !important;
}

.theme-smbc .logo .logo-lg,
.theme-smbc .logo-lg,
.theme-smbc .logo-box .logo .logo-lg,
.theme-smbc .navbar-custom .logo-box .logo .logo-lg,
.theme-smbc .left-side-menu .logo-box .logo .logo-lg {
  display: inline-block !important;
  width: 200px !important;
  height: 48px !important;
  max-width: 200px !important;
  max-height: 48px !important;
  background-image: url('../images/smbc/app-logo1.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 auto;
}

/* Condensed sidebar state: Hide logo-lg, show logo-sm */
/* Apply to all logo containers (sidebar and navbar) - must be very specific */
.theme-smbc body[data-sidebar-size="condensed"] .logo .logo-sm,
.theme-smbc body[data-sidebar-size="condensed"] .logo-sm,
.theme-smbc body[data-sidebar-size=condensed] .logo .logo-sm,
.theme-smbc body[data-sidebar-size=condensed] .logo-sm,
.theme-smbc body[data-sidebar-size="condensed"] .logo-box .logo .logo-sm,
.theme-smbc body[data-sidebar-size="condensed"] .navbar-custom .logo-box .logo .logo-sm,
.theme-smbc body[data-sidebar-size="condensed"] .left-side-menu .logo-box .logo .logo-sm,
.theme-smbc body[data-sidebar-size=condensed] .logo-box .logo .logo-sm,
.theme-smbc body[data-sidebar-size=condensed] .navbar-custom .logo-box .logo .logo-sm,
.theme-smbc body[data-sidebar-size=condensed] .left-side-menu .logo-box .logo .logo-sm {
  display: inline-block !important;
  width: 45px !important;
  height: 45px !important;
  background-image: url('../images/smbc/app_favicon.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 auto;
}

.theme-smbc body[data-sidebar-size="condensed"] .logo .logo-lg,
.theme-smbc body[data-sidebar-size="condensed"] .logo-lg,
.theme-smbc body[data-sidebar-size=condensed] .logo .logo-lg,
.theme-smbc body[data-sidebar-size=condensed] .logo-lg,
.theme-smbc body[data-sidebar-size="condensed"] .logo-box .logo .logo-lg,
.theme-smbc body[data-sidebar-size="condensed"] .navbar-custom .logo-box .logo .logo-lg,
.theme-smbc body[data-sidebar-size="condensed"] .left-side-menu .logo-box .logo .logo-lg,
.theme-smbc body[data-sidebar-size=condensed] .logo-box .logo .logo-lg,
.theme-smbc body[data-sidebar-size=condensed] .navbar-custom .logo-box .logo .logo-lg,
.theme-smbc body[data-sidebar-size=condensed] .left-side-menu .logo-box .logo .logo-lg {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Buttons (generic + mapped utility classes)
   -------------------------------------------------------------------------- */
.theme-smbc .btn,
.theme-smbc button,
.theme-smbc [role="button"] {
  border-radius: var(--app-btn-radius);
  /* border: 2px solid var(--app-btn1-hover-txt-clr); */
  color: var(--smbc-pearl-white) !important;
  background-color: var(--app-btn1-hover-bg-clr) !important;
  /* box-shadow: var(--app-shadow-sm);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; */
}

.theme-smbc .btn:hover,
.theme-smbc button:hover,
.theme-smbc [role="button"]:hover {
  color: var(--app-btn1-hover-bg-clr) !important;
  background-color: var(--smbc-pearl-white) !important;
  border-color: var(--app-btn1-hover-bg-clr) !important;
}

/* Dropdown menu items: keep neutral by default, green only on hover */
.theme-smbc .dropdown-menu .dropdown-item {
  color: var(--app-theme-clr) !important;
  background-color: #ffffff !important;
  border: 0 !important;
}

.theme-smbc .dropdown-menu .dropdown-item:hover,
.theme-smbc .dropdown-menu .dropdown-item:focus,
.theme-smbc .dropdown-menu .dropdown-item.active,
.theme-smbc .dropdown-menu .dropdown-item:active {
  color: #ffffff !important;
  background-color: var(--app-theme-clr) !important;
}

/* Persist green for selected page-size option */
.theme-smbc .dropdown-menu .dropdown-item[aria-current="true"],
.theme-smbc .dropdown-menu .dropdown-item[aria-selected="true"],
.theme-smbc .dropdown-menu .dropdown-item.selected {
  color: #ffffff !important;
  background-color: var(--app-theme-clr) !important;
}

/* Primary */
.theme-smbc .btn-primary,
.theme-smbc .fis-btn,
.theme-smbc .btnLogin {
  border-radius: var(--app-btn-radius);
  color: var(--smbc-pearl-white) !important;
  background-color: var(--app-btn1-hover-bg-clr) !important;
}
.theme-smbc .btn-primary:hover,
.theme-smbc .fis-btn:hover,
.theme-smbc .btnLogin:hover {
  color: var(--app-btn1-hover-bg-clr) !important;
  background-color: var(--smbc-pearl-white) !important;
  border-color: var(--app-btn1-hover-bg-clr) !important;
}
.theme-smbc .btn-primary:active,
.theme-smbc .fis-btn:active,
.theme-smbc .btnLogin:active {
  background: var(--app-btn-disabled-hover);
  border-color: var(--app-btn-disabled);
}
.theme-smbc .btn-primary:disabled,
.theme-smbc .fis-btn:disabled,
.theme-smbc .btnLogin:disabled {
  color: #666;
  background: var(--app-disable-clr);
  border-color: var(--app-disable-clr);
}

/* Accent (Fresh Green) */
.theme-smbc .btn-accent,
.theme-smbc .btn-warning,
.theme-smbc .btn-secondary {
  color: var(--app-btn2-txt-clr);
  background: var(--app-btn2-bg-clr);
  border-color: var(--app-btn2-bg-clr);
}
.theme-smbc .btn-accent:hover,
.theme-smbc .btn-warning:hover,
.theme-smbc .btn-secondary:hover {
  filter: brightness(0.95);
}

/* Outline brand */
.theme-smbc .btn-outline-brand {
  color: var(--app-theme-clr);
  background: transparent;
  border-color: var(--app-theme-clr);
}
.theme-smbc .btn-outline-brand:hover {
  color: var(--app-light-clr);
  background: var(--app-theme-clr);
  border-color: var(--app-theme-clr);
}

/* Destructive */
.theme-smbc .btn-danger {
  color: #ffffff;
  background: var(--app-error-clr);
  border-color: var(--app-error-clr);
}
.theme-smbc .btn-danger:hover { filter: brightness(0.95); }

/* --------------------------------------------------------------------------
   Forms & Inputs
   -------------------------------------------------------------------------- */
.theme-smbc input,
.theme-smbc select,
.theme-smbc textarea {
  color: var(--app-input-txt-color);
  background: var(--app-input-bg-color);
  border: 1px solid var(--app-input-border-color);
  border-radius: .5rem;
  padding: .5rem .75rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.theme-smbc input:focus,
.theme-smbc select:focus,
.theme-smbc textarea:focus { border-color: var(--app-theme-clr); box-shadow: var(--app-focus-ring); }

/* Specific legacy class override (from original file) */
.theme-smbc .loginInputTxt {
  border: 1px solid var(--app-input-border-color);
  border-radius: .5rem;
  padding: .5rem .75rem;
  background: var(--app-input-bg-color);
  color: var(--app-input-txt-color);
}

/* Checkboxes */
.theme-smbc .form-check-input[type="checkbox"] {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--app-input-border-color);
  border-radius: .25rem;
}
.theme-smbc .form-check-input[type="checkbox"]:checked {
  background-color: var(--app-checkbox-bg-clr);
  border-color: var(--app-checkbox-bg-clr);
}
.theme-smbc .form-check-input:focus { box-shadow: var(--app-focus-ring); border-color: var(--app-checkbox-bg-clr); }

/* --------------------------------------------------------------------------
   Navigation Bar / Header
   -------------------------------------------------------------------------- */
.theme-smbc .navbar-custom {
  background-color: var(--app-theme-clr) !important;
  box-shadow: var(--app-shadow-md);
}
/* Hide navbar logo-box - sidebar already has the logo */
.theme-smbc .navbar-custom .logo-box {
  display: none !important;
}
.theme-smbc .navbar-custom .topnav-menu .nav-link {
  color: rgba(255, 255, 255, 0.75);
}
.theme-smbc .navbar-custom .topnav-menu .nav-link:hover {
  color: #ffffff;
}
.theme-smbc .navbar-custom .topnav-menu .nav-link.nav-user:hover,
.theme-smbc .navbar-custom .topnav-menu #profileDropdown:hover {
  color: var(--app-btn1-hover-bg-clr) !important;
  background: var(--smbc-pearl-white) !important;
  background-color: var(--smbc-pearl-white) !important;
  box-shadow: inset 0 0 0 1000px var(--smbc-pearl-white) !important;
  border-color: var(--app-btn1-hover-bg-clr) !important;
}

.theme-smbc .profile-dropdown .dropdown-item:hover,
.theme-smbc .profile-dropdown .dropdown-item:focus {
  color: var(--app-btn1-hover-bg-clr) !important;
  background: var(--smbc-pearl-white) !important;
  background-color: var(--smbc-pearl-white) !important;
}
.theme-smbc .navbar-custom .button-menu-mobile {
  color: var(--smbc-pearl-white) !important;
}

.theme-smbc .navbar-custom .button-menu-mobile:hover {
  color: var(--smbc-pearl-white) !important;
  background: var(--app-btn1-hover-bg-clr) !important;
  background-color: var(--app-btn1-hover-bg-clr) !important;
  border-color: var(--app-btn1-hover-bg-clr) !important;
}
.theme-smbc .navbar-custom .dropdown .nav-link.show {
  background-color: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   Sidebar / Left Menu
   -------------------------------------------------------------------------- */
.theme-smbc .left-side-menu {
  background: var(--app-light-clr) !important;
  box-shadow: var(--app-shadow-md);
}

/* Logo box in sidebar - match navbar background color (dark green) */
/* Must override compiled CSS which sets background-color: #0056c1 */
.theme-smbc .logo-box,
.theme-smbc .left-side-menu .logo-box,
.theme-smbc body .logo-box,
.theme-smbc html .logo-box,
html.theme-smbc .logo-box,
html.theme-smbc body .logo-box,
html.theme-smbc .left-side-menu .logo-box {
  background-color: var(--app-theme-clr) !important;
  background: var(--app-theme-clr) !important;
  /* Center logo both vertically and horizontally */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
}

/* Ensure logo container is centered within logo-box and fills exact height */
.theme-smbc .logo-box .logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  line-height: 70px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.theme-smbc .logo-box .logo .logo-lg-text-dark {
  color: var(--app-light-clr);
}

.theme-smbc .logo-box .logo .logo-lg-text-light {
  color: var(--app-light-clr);
}

/* Sidebar menu items */
.theme-smbc .left-side-menu #sidebar-menu > ul > li > a {
  color: var(--app-text-clr);
  transition: color .15s ease, background-color .15s ease;
}

.theme-smbc .left-side-menu #sidebar-menu > ul > li > a:hover,
.theme-smbc .left-side-menu #sidebar-menu > ul > li > a:focus,
.theme-smbc .left-side-menu #sidebar-menu > ul > li > a:active {
  color: var(--app-theme-clr);
  background-color: var(--app-theme-bg-clr);
}

.theme-smbc .left-side-menu #sidebar-menu > ul > li > a.mm-active,
.theme-smbc .left-side-menu #sidebar-menu .menuitem-active > a {
  color: #ffffff !important;
  font-weight: 600;
  background-color: var(--app-theme-clr) !important;
}

.theme-smbc .left-side-menu #sidebar-menu .menuitem-active .active {
  color: #ffffff !important;
}

.theme-smbc .left-side-menu #sidebar-menu > ul > li > a.mm-active i,
.theme-smbc .left-side-menu #sidebar-menu .menuitem-active > a i,
.theme-smbc .left-side-menu #sidebar-menu .menuitem-active .active i,
.theme-smbc .left-side-menu #sidebar-menu > ul > li ul .active i,
.theme-smbc .left-side-menu #sidebar-menu .nav-second-level li.active > a i,
.theme-smbc .left-side-menu #sidebar-menu > ul > li > a.mm-active svg,
.theme-smbc .left-side-menu #sidebar-menu .menuitem-active > a svg,
.theme-smbc .left-side-menu #sidebar-menu .menuitem-active .active svg,
.theme-smbc .left-side-menu #sidebar-menu > ul > li ul .active svg,
.theme-smbc .left-side-menu #sidebar-menu .nav-second-level li.active > a svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Sidebar expand/collapse arrow color behavior */
.theme-smbc .left-side-menu #sidebar-menu .menu-arrow::before {
  color: var(--app-theme-clr) !important;
}

.theme-smbc .left-side-menu #sidebar-menu > ul > li > a.mm-active .menu-arrow::before,
.theme-smbc .left-side-menu #sidebar-menu .menuitem-active > a .menu-arrow::before,
.theme-smbc .left-side-menu #sidebar-menu > ul > li ul .active > a .menu-arrow::before,
.theme-smbc .left-side-menu #sidebar-menu .nav-second-level li.active > a .menu-arrow::before {
  color: #ffffff !important;
}

.theme-smbc .left-side-menu #sidebar-menu .menu-title {
  color: var(--app-muted-text-clr);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sub-menu items */
.theme-smbc .left-side-menu #sidebar-menu > ul > li ul a {
  color: var(--app-text-clr);
}

.theme-smbc .left-side-menu #sidebar-menu > ul > li ul a:hover,
.theme-smbc .left-side-menu #sidebar-menu > ul > li ul a:active,
.theme-smbc .left-side-menu #sidebar-menu > ul > li ul a:focus {
  color: var(--app-theme-clr);
  background-color: var(--app-theme-bg-clr);
}

.theme-smbc .left-side-menu #sidebar-menu > ul > li ul .active,
.theme-smbc .left-side-menu #sidebar-menu .nav-second-level li.active > a {
  color: #ffffff !important;
  background-color: var(--app-theme-clr) !important;
}

/* --------------------------------------------------------------------------
   Navigation, Tabs, Pills
   -------------------------------------------------------------------------- */
.theme-smbc .nav-pills .nav-link {
  color: var(--app-tab-btn-txt-clr);
  background: var(--app-tab-btn-bg-clr);
  border: 2px solid var(--app-border-clr);
  border-radius: 999px;
}
.theme-smbc .nav-pills .nav-link:hover { border-color: var(--app-tab-btn-checked-clr); }
.theme-smbc .nav-pills .nav-link.active,
.theme-smbc .nav-pills .show > .nav-link {
  color: #ffffff;
  background: var(--app-theme-clr);
  border-color: var(--app-theme-clr);
}

/* Wizard chips */
.theme-smbc .form-wizard-header .nav-item .nav-link {
  color: var(--app-text-clr);
  background: color-mix(in srgb, var(--app-theme-clr) 50%, #ffffff);
  border: 2px solid color-mix(in srgb, var(--app-theme-clr) 50%, #ffffff);
  border-radius: 999px;
}
.theme-smbc .form-wizard-header .nav-item .nav-link .number {
  color: #ffffff;
  background: color-mix(in srgb, var(--app-theme-clr) 40%, #ffffff);
  border-radius: 999px;
  padding: 0 .5rem;
}
.theme-smbc .form-wizard-header .nav-item .nav-link.active,
.theme-smbc .form-wizard-header .nav-item .nav-link.active .number {
  color: #ffffff;
  background: var(--app-theme-clr);
  border-color: var(--app-theme-clr);
}

/* Header tabs (example legacy selectors) */
.theme-smbc .headerTab .headerTitle,
.theme-smbc .headerTab h1,
.theme-smbc .headerTab h2 {
  color: var(--app-theme-clr);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.theme-smbc .page-link { color: var(--app-theme-clr); }
.theme-smbc .page-item.active .page-link {
  color: #ffffff !important;
  background: var(--app-theme-clr);
  border: 2px solid var(--app-theme-clr);
}
.theme-smbc .page-item.active .page-link:hover,
.theme-smbc .page-item.active .page-link:focus,
.theme-smbc .page-item.active .page-link:active {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Badges & Chips
   -------------------------------------------------------------------------- */
.theme-smbc .badge,
.theme-smbc .chip {
  border-radius: var(--app-btn-radius);
  color: var(--smbc-pearl-white) !important;
  background-color: var(--app-btn1-hover-bg-clr) !important;
  border-radius: 999px;
  padding: .125rem .5rem;
  border: 1px solid transparent;
}


.theme-smbc .badge:hover,
.theme-smbc .chip:hover {
  border-radius: var(--app-btn-radius);
  color: var(--app-btn1-hover-bg-clr) !important;
  background-color: var(--smbc-pearl-white) !important;
  border-color: var(--app-btn1-hover-bg-clr) !important;
  border-radius: 999px;
  padding: .125rem .5rem;
  border: 1px solid transparent;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.theme-smbc table {
  border-collapse: separate;
  border-spacing: 0;
}
.theme-smbc th, .theme-smbc td {
  border-bottom: 1px solid var(--app-border-clr);
  padding: .75rem;
}
.theme-smbc thead th {
  color: var(--app-dark-clr);
  background: var(--app-bg-soft);
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.theme-smbc .alert-info    { background: color-mix(in srgb, var(--app-info-clr) 10%, #ffffff);    border-left: 4px solid var(--app-info-clr); }
.theme-smbc .alert.alert-info.sub-heading-alert {
  background: var(--app-light-clr) !important;
  color: var(--app-theme-clr) !important;
  border: 1px solid var(--app-theme-clr) !important;
  border-left: 4px solid var(--app-theme-clr) !important;
}
.theme-smbc .alert.alert-primary.sub-heading-alert {
  background: var(--app-light-clr) !important;
  color: var(--app-theme-clr) !important;
  border: 1px solid var(--app-theme-clr) !important;
  border-left: 4px solid var(--app-theme-clr) !important;
}
.theme-smbc .alert-success { background: color-mix(in srgb, var(--app-success-clr) 10%, #ffffff); border-left: 4px solid var(--app-success-clr); }
.theme-smbc .alert.alert-warning {
  background: var(--app-light-clr);
  color: var(--app-theme-clr);
  border: 1px solid var(--app-theme-clr);
  border-left: 4px solid var(--app-theme-clr);
}
.theme-smbc .alert-danger  { background: color-mix(in srgb, var(--app-error-clr) 10%, #ffffff);   border-left: 4px solid var(--app-error-clr); }

/* --------------------------------------------------------------------------
   Date Range / Calendar (class names from original hints)
   -------------------------------------------------------------------------- */
.theme-smbc .custom-day.range,
.theme-smbc .custom-day:hover {
  color: var(--app-daterange-txt-select-clr);
  background: var(--app-daterange-bg-select-clr);
}

/* --------------------------------------------------------------------------
   Cards & Panels
   -------------------------------------------------------------------------- */
.theme-smbc .card,
.theme-smbc .panel {
  border: 1px solid var(--app-border-clr);
  border-radius: var(--app-card-radius);
  box-shadow: var(--app-shadow-md);
  background: #fff;
}
.theme-smbc .card-header,
.theme-smbc .panel-header {
  color: var(--app-dark-clr);
  background: var(--app-bg-soft);
  border-bottom: 1px solid var(--app-border-clr);
}

/* --------------------------------------------------------------------------
   Utility Helpers
   -------------------------------------------------------------------------- */
.theme-smbc .text-brand { color: var(--app-theme-clr) !important; }
.theme-smbc .bg-brand   { background: var(--app-theme-clr) !important; color: #ffffff !important; }
.theme-smbc .bg-accent  { background: var(--app-theme-clr) !important; color: #111111 !important; }
.theme-smbc .border-brand{ border-color: var(--app-theme-clr) !important; }

/* --------------------------------------------------------------------------
   Responsive Touch-ups
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .theme-smbc .loginLogo,
  .theme-smbc .brand-logo { width: 170px; height: 40px; }
}
@media (max-width: 768px) {
  .theme-smbc .card, .theme-smbc .panel { border-radius: calc(var(--app-card-radius) - .25rem); }
}
@media (max-width: 576px) {
  .theme-smbc .loginLogo,
  .theme-smbc .brand-logo { width: 150px; height: 36px; }
}

/* --------------------------------------------------------------------------
   End
   -------------------------------------------------------------------------- */