/* ========================================================================== SMBC Whitelabel Theme (Cleaned, Scoped) Scope: add class "theme-smbc" to or 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 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; } .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 -------------------------------------------------------------------------- */