/* @import MUST stay first — pulls in the Inter brand font (design sheet:
"Inter · Clean. Modern. Professional."). Applied app-wide below,
scoped to the modern themes (any non-default data-dashboard-theme). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* ============================================================
Modern theme — global overrides
Loaded on EVERY page ONLY when AppSettings:DashboardTheme is a
non-default value (e.g. "efms", "inmotus_Studio") — see the
conditional in _Layout.cshtml.
When the flag is "default", this file is not loaded at all,
so the default theme renders exactly as before — zero changes.
============================================================ */
/* -----------------------------------------------------------
Navbar profile avatar — per-theme brand colour.
Keyed off so each theme gets
its own avatar: default -> Bootstrap blue (this file isn't even
loaded), efms -> green, inmotus_Studio -> navy/orange.
(#profileDropdown gives id-level specificity to beat the
.bg-primary utility, which itself uses !important.)
----------------------------------------------------------- */
/* Base (all modern themes): white initials, fs-6 size. Background is
set per theme below. */
#profileDropdown .bg-primary {
color: #fff !important;
font-size: 1rem !important; /* fs-6 (overrides the markup's fs-5) */
}
/* eFMS theme -> green gradient + green open-ring */
html[data-dashboard-theme="efms" i] #profileDropdown .bg-primary {
background: linear-gradient(135deg, #12a37d, #0e7d60) !important;
}
html[data-dashboard-theme="efms" i] #profileDropdown.show,
html[data-dashboard-theme="efms" i] #profileDropdown[aria-expanded="true"] {
border-color: #0e7d60 !important;
box-shadow: 0 0 0 2px rgba(18, 163, 125, 0.35) !important;
}
/* inmotus_Studio theme -> navy/orange gradient (sampled from logo) + orange open-ring */
html[data-dashboard-theme="inmotus_Studio" i] #profileDropdown .bg-primary {
background: linear-gradient(135deg, #0c1e5e 0%, #0c1e5e 45%, #f69a1e 135%) !important;
}
html[data-dashboard-theme="inmotus_Studio" i] #profileDropdown.show,
html[data-dashboard-theme="inmotus_Studio" i] #profileDropdown[aria-expanded="true"] {
border-color: #f69a1e !important;
box-shadow: 0 0 0 2px rgba(246, 154, 30, 0.40) !important;
}
/* No lingering ring: on plain focus/active (dropdown closed) show
nothing. The per-theme .show rules above are more specific, so they
win while the dropdown is open. */
#profileDropdown:focus,
#profileDropdown:focus-visible,
#profileDropdown:active {
outline: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* -----------------------------------------------------------
Legacy "index" cards (.s-dashboard-card-sm)
These list-style landing pages (Settings, Reports, Tax, Fee,
Exams, Events, Workflows, Help ...) each define an inline grey
(#bdc3c7) card. Re-theme them to match the eFMS dashboard look,
theme-aware via Bootstrap --bs-* tokens.
The `body[id$="Page"]` prefix raises specificity above the
pages' own bare `.s-dashboard-card-sm` rules so this wins
without touching each page's markup or using !important.
----------------------------------------------------------- */
body[id$="Page"] .s-dashboard-card-sm {
height: auto;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
padding: 24px;
color: var(--bs-body-color);
transition: all 0.2s ease;
}
body[id$="Page"] .s-dashboard-card-sm:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(16, 24, 40, .08), 0 12px 30px rgba(16, 24, 40, .08);
color: var(--bs-body-color);
text-decoration: none;
}
body[id$="Page"] .s-dashboard-card-sm .card-body {
padding: 0;
margin: 0;
}
body[id$="Page"] .s-dashboard-card-sm h3 {
font-size: 18px;
font-weight: 600;
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--bs-border-color);
color: var(--bs-emphasis-color, var(--bs-body-color));
white-space: normal;
}
body[id$="Page"] .s-dashboard-card-sm ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
body[id$="Page"] .s-dashboard-card-sm li a {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: 8px;
color: var(--bs-body-color);
text-decoration: none;
transition: all 0.15s ease;
}
/* Leading arrow on every list item (mirrors .dashboard-card__arrow). */
body[id$="Page"] .s-dashboard-card-sm li a::before {
content: "\f061"; /* fa-arrow-right */
font-family: "Font Awesome 6 Pro";
font-weight: 900;
font-size: 11px;
line-height: 1;
flex: 0 0 auto;
color: var(--bs-secondary-color, #9CA3AF);
transition: transform 0.15s ease, color 0.15s ease;
}
body[id$="Page"] .s-dashboard-card-sm li a:hover {
background: var(--bs-tertiary-bg, rgba(37, 99, 235, .08));
color: var(--bs-primary, #2563EB);
}
body[id$="Page"] .s-dashboard-card-sm li a:hover::before {
color: var(--bs-primary, #2563EB);
transform: translateX(2px);
}
/* ============================================================
INMOTUS STUDIO — brand design tokens & component theme
Scoped to html[data-dashboard-theme="inmotus_Studio"] so the
efms/default themes are never affected. Palette sampled from
the Inmotus Studio logo sheet:
Primary (orange) #FF9800 · Navy #0D1B4C · Secondary #1E3A8A
Secondary-light #E8EBFF · Background #F7F8FC · Muted #6B7280
The base erie theme hardcodes .btn-* colours (it does NOT read
--bs-primary), so buttons are re-tokenised explicitly below.
============================================================ */
html[data-dashboard-theme="inmotus_Studio" i] {
/* brand tokens (reusable) */
--theme-primary: #FF9800;
--theme-primary-rgb: 255, 152, 0;
--theme-primary-hover: #E67E00;
--theme-primary-active: #CC7000;
--theme-primary-soft: #FFF3E0;
--theme-dark: #0D1B4C;
--theme-dark-rgb: 13, 27, 76;
--theme-dark-active: #0A1540;
--theme-secondary: #1E3A8A;
--theme-secondary-light: #E8EBFF;
--theme-bg: #F7F8FC;
--theme-muted: #6B7280;
--theme-text: #1F2937; /* spec: Text Primary */
--theme-border: #E5E7EB; /* spec: Border */
--theme-radius: 12px; /* spec: Card radius */
--theme-modal-radius: 16px; /* spec: Modal radius */
--theme-input-h: 40px; /* spec: Input height */
--theme-card-shadow: 0 1px 2px rgba(13, 27, 76, .04), 0 8px 24px rgba(13, 27, 76, .06);
/* semantic tokens (spec) — also remap Bootstrap's success/warning/danger so
alert/text/bg utilities follow the brand */
--theme-success: #22C55E;
--theme-warning: #F59E0B;
--theme-danger: #EF4444;
--bs-success: #22C55E; --bs-success-rgb: 34, 197, 94;
--bs-warning: #F59E0B; --bs-warning-rgb: 245, 158, 11;
--bs-danger: #EF4444; --bs-danger-rgb: 239, 68, 68;
/* remap Bootstrap "primary" -> brand orange
(drives .text-primary, .bg-primary, .border-primary, links, focus rings) */
--bs-primary: #FF9800;
--bs-primary-rgb: 255, 152, 0;
--bs-primary-text: #CC7000;
--bs-primary-bg-subtle: #FFF3E0;
--bs-primary-border-subtle: #FFD8A8;
/* LINK TEXT uses a deeper amber than the #FF9800 brand orange: orange text on
white is only ~2.16:1 contrast (fails WCAG AA). #B45309 reads clearly (5.02:1,
passes AA) while staying in the warm brand family. The bright orange stays for
buttons/accents/fills where contrast is fine. Hover goes a shade darker. */
--bs-link-color: #B45309;
--bs-link-color-rgb: 180, 83, 9;
--bs-link-hover-color: #92400E;
--bs-link-hover-color-rgb: 146, 64, 14;
}
/* ============================================================
eFMS — brand design tokens
Green/teal palette derived from the eFMS logo.
Primary (teal) #12A37D · Dark #14332A (deep forest green)
============================================================ */
html[data-dashboard-theme="efms" i] {
--theme-primary: #12A37D;
--theme-primary-rgb: 18, 163, 125;
--theme-primary-hover: #0E8A6A;
--theme-primary-active: #0B7559;
--theme-primary-soft: #E6F7F2;
--theme-dark: #14332A;
--theme-dark-rgb: 20, 51, 42;
--theme-dark-active: #0B2B22;
--theme-secondary: #1A6B55;
--theme-secondary-light: #DCF0EA;
--theme-bg: #F5FAF8;
--theme-muted: #6B7280;
--theme-text: #1F2937;
--theme-border: #E5E7EB;
--theme-radius: 12px;
--theme-modal-radius: 16px;
--theme-input-h: 40px;
--theme-card-shadow: 0 1px 2px rgba(20, 51, 42, .04), 0 8px 24px rgba(20, 51, 42, .06);
--theme-success: #22C55E;
--theme-warning: #F59E0B;
--theme-danger: #EF4444;
--bs-success: #22C55E; --bs-success-rgb: 34, 197, 94;
--bs-warning: #F59E0B; --bs-warning-rgb: 245, 158, 11;
--bs-danger: #EF4444; --bs-danger-rgb: 239, 68, 68;
--bs-primary: #12A37D;
--bs-primary-rgb: 18, 163, 125;
--bs-primary-text: #0B7559;
--bs-primary-bg-subtle: #E6F7F2;
--bs-primary-border-subtle: #A3E0CE;
--bs-link-color: #0B7559;
--bs-link-color-rgb: 11, 117, 89;
--bs-link-hover-color: #0E8A6A;
--bs-link-hover-color-rgb: 14, 138, 106;
}
/* ---- Page background: soft light-gray ---- */
html[data-dashboard-theme] body {
background-color: var(--theme-bg);
}
/* ---- PRIMARY button -> primary colour ---- */
html[data-dashboard-theme] .btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--theme-primary);
--bs-btn-border-color: var(--theme-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--theme-primary-hover);
--bs-btn-hover-border-color: var(--theme-primary-hover);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--theme-primary-active);
--bs-btn-active-border-color: var(--theme-primary-active);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: var(--theme-primary);
--bs-btn-disabled-border-color: var(--theme-primary);
--bs-btn-focus-shadow-rgb: var(--theme-primary-rgb);
}
/* ---- SECONDARY button -> brand-dark (hover brightens to secondary) ---- */
html[data-dashboard-theme] .btn-secondary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--theme-dark);
--bs-btn-border-color: var(--theme-dark);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--theme-secondary);
--bs-btn-hover-border-color: var(--theme-secondary);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--theme-dark-active);
--bs-btn-active-border-color: var(--theme-dark-active);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: var(--theme-dark);
--bs-btn-disabled-border-color: var(--theme-dark);
--bs-btn-focus-shadow-rgb: var(--theme-dark-rgb);
}
/* ---- OUTLINE button -> primary border/text, soft fill on hover ---- */
html[data-dashboard-theme] .btn-outline-primary {
--bs-btn-color: var(--theme-primary);
--bs-btn-border-color: var(--theme-primary);
--bs-btn-hover-color: var(--theme-primary-active);
--bs-btn-hover-bg: var(--theme-primary-soft);
--bs-btn-hover-border-color: var(--theme-primary);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--theme-primary);
--bs-btn-active-border-color: var(--theme-primary);
--bs-btn-focus-shadow-rgb: var(--theme-primary-rgb);
}
/* ---- GHOST button (utility, opt-in via .btn-ghost) -> subtle gray, dark text ---- */
html[data-dashboard-theme] .btn-ghost {
--bs-btn-color: var(--theme-dark);
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-hover-color: var(--theme-dark);
--bs-btn-hover-bg: var(--theme-secondary-light);
--bs-btn-hover-border-color: var(--theme-secondary-light);
--bs-btn-active-color: var(--theme-dark);
--bs-btn-active-bg: var(--theme-secondary-light);
--bs-btn-active-border-color: var(--theme-secondary-light);
--bs-btn-focus-shadow-rgb: var(--theme-dark-rgb);
}
/* ---- Cards: white, rounded 10px, subtle shadow ---- */
html[data-dashboard-theme] .card {
border-radius: var(--theme-radius);
border-color: var(--theme-border);
box-shadow: var(--theme-card-shadow);
}
/* ---- Forms: rounded inputs, primary focus ring ---- */
html[data-dashboard-theme] .form-control,
html[data-dashboard-theme] .form-select {
border-radius: 8px;
}
html[data-dashboard-theme] .form-control:focus,
html[data-dashboard-theme] .form-select:focus {
border-color: var(--theme-primary);
box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb), .20);
}
html[data-dashboard-theme] .form-check-input:checked {
background-color: var(--theme-primary);
border-color: var(--theme-primary);
}
html[data-dashboard-theme] .form-check-input:focus {
border-color: var(--theme-primary);
box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb), .20);
}
/* ---- Tables: muted header, subtle row hover ---- */
html[data-dashboard-theme] .table > thead th {
color: var(--theme-muted);
font-weight: 600;
text-transform: none;
}
html[data-dashboard-theme] .table-hover > tbody > tr:hover > * {
background-color: rgba(var(--theme-primary-rgb), .05);
}
/* ---- Badges: soft palette (primary / secondary tint / warning tint, plus success/danger) ---- */
html[data-dashboard-theme] .badge.bg-primary {
background-color: var(--theme-primary) !important;
}
html[data-dashboard-theme] .badge.bg-secondary {
background-color: var(--theme-secondary-light) !important;
color: var(--theme-secondary) !important;
}
html[data-dashboard-theme] .badge.bg-warning {
background-color: var(--theme-primary-soft) !important;
color: var(--theme-primary-active) !important;
}
/* ---- Muted / secondary text ---- */
html[data-dashboard-theme] .text-muted,
html[data-dashboard-theme] .text-secondary {
color: var(--theme-muted) !important;
}
/* ---- Nav / active states pick up the brand primary ---- */
html[data-dashboard-theme] .nav-pills .nav-link.active,
html[data-dashboard-theme] .nav-pills .show > .nav-link {
background-color: var(--theme-primary);
color: #fff;
}
/* ---- Top menu bar: hover / open / active menu items -> primary ---- */
html[data-dashboard-theme] .navbar-nav .nav-link:hover,
html[data-dashboard-theme] .navbar-nav .nav-link:focus,
html[data-dashboard-theme] .navbar-nav .nav-link.show,
html[data-dashboard-theme] .navbar-nav .nav-item.show > .nav-link,
html[data-dashboard-theme] .navbar-nav .nav-link.active {
color: var(--theme-primary) !important;
}
/* ---- Modern dashboard (dashboard.css): its interactive accent is a hardcoded
blue (--primary-blue #2563EB) used for card-arrow hover, active borders, etc.
Remap that one token to the brand primary for the modern dashboard. The multi-
colour --accent-* icon tiles are intentional and left untouched. ---- */
html[data-dashboard-theme] #s-DashboardPage {
--primary-blue: var(--theme-primary);
}
/* two hardcoded blue literals in dashboard.css that the var remap can't reach */
html[data-dashboard-theme] #s-DashboardPage .dashboard__select:focus {
box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), .18) !important;
}
html[data-dashboard-theme] #s-DashboardPage .btn-dash--primary:hover {
background: var(--theme-primary-hover) !important;
}
/* ============================================================
MODERN THEME — SERENITY ADMIN components
The Serenity grid/dialog UI does NOT read --bs-primary; it uses
its own bootstrap, jQuery-UI and select2 styling with hardcoded
blue accents (#0d6efd / #5f83b9 / select2 blue). This file loads
AFTER those bundles, so these overrides win. Convention:
PRIMARY (--theme-primary) = selected accents · DARK (--theme-dark) = menu/calendar highlights.
============================================================ */
/* ---- Bootstrap dropdown menus (grid column picker, export, row menus, top-nav
submenus) ---- */
html[data-dashboard-theme] .dropdown-menu {
--bs-dropdown-link-active-bg: var(--theme-primary);
--bs-dropdown-link-active-color: #fff;
--bs-dropdown-link-hover-bg: var(--theme-primary-soft);
--bs-dropdown-link-hover-color: var(--theme-primary-active);
}
/* menu item text was 16.875px (0.9375rem against the 18px root) — bigger than the
14px top-nav labels + body. Pin to 14px so menus read consistently. */
html[data-dashboard-theme] .dropdown-menu .dropdown-item,
html[data-dashboard-theme] .dropdown-menu > li > a {
font-size: 14px;
}
/* ---- Serenity grid toolbar: flat modern buttons + brand hover.
(Button icons are baked-in colour PNG sprites, so we keep them and
restyle the button chrome rather than fill it solid.) ---- */
html[data-dashboard-theme] div.s-Toolbar .tool-button {
background: #fff;
border: 1px solid var(--theme-border);
border-radius: 8px;
color: var(--theme-dark);
}
html[data-dashboard-theme] div.s-Toolbar .tool-button .button-outer {
border-color: transparent;
}
html[data-dashboard-theme] div.s-Toolbar .tool-button:hover,
html[data-dashboard-theme] div.s-Toolbar .tool-button:hover .button-outer {
background-color: var(--theme-primary-soft);
border-color: var(--theme-primary);
color: var(--theme-primary-active);
}
html[data-dashboard-theme] div.s-Toolbar .tool-button.pressed {
background: var(--theme-primary-soft);
border-color: var(--theme-primary);
}
/* Create/New button -> primary left accent (keeps the green "+" sprite legible) */
html[data-dashboard-theme] div.s-Toolbar .tool-button.add-button {
border-left: 3px solid var(--theme-primary);
}
/* Include-deleted toggle pressed state (was yellow #fe7) */
html[data-dashboard-theme] .s-ToggleButton.pressed a {
background-color: var(--theme-primary-soft) !important;
}
/* ---- jQuery-UI: autocomplete menus, datepicker, buttons (dark highlight) ---- */
html[data-dashboard-theme] .ui-menu .ui-menu-item a.ui-state-focus,
html[data-dashboard-theme] .ui-menu .ui-menu-item a.ui-state-hover,
html[data-dashboard-theme] .ui-menu .ui-menu-item a.ui-state-active,
html[data-dashboard-theme] .ui-datepicker table .ui-state-hover,
html[data-dashboard-theme] .ui-datepicker-calendar .ui-state-active {
background: var(--theme-dark) !important;
border-color: var(--theme-dark) !important;
color: #fff !important;
text-shadow: none !important;
}
html[data-dashboard-theme] .ui-datepicker table .ui-state-highlight {
border-color: var(--theme-primary) !important;
color: var(--theme-primary-active) !important;
}
html[data-dashboard-theme] button.ui-state-active,
html[data-dashboard-theme] .ui-button.ui-state-active,
html[data-dashboard-theme] .ui-button.ui-state-focus,
html[data-dashboard-theme] .ui-buttonset .ui-button.ui-state-active {
background: var(--theme-secondary-light) !important;
border-color: var(--theme-secondary) !important;
color: var(--theme-dark) !important;
}
/* ---- select2 dropdowns (highlighted option -> dark, focus border -> primary) ---- */
html[data-dashboard-theme] .select2-results .select2-highlighted,
html[data-dashboard-theme] .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--theme-dark) !important;
color: #fff !important;
}
html[data-dashboard-theme] .select2-container-active .select2-choice,
html[data-dashboard-theme] .select2-drop-active,
html[data-dashboard-theme] .select2-container--focus .select2-selection {
border-color: var(--theme-primary) !important;
}
/* ---- Bootstrap nav-tabs (dialog/property-grid tabs): primary underline, dark text.
Force transparent bg + dark text so the active tab stays readable even in dark
mode (bootstrap otherwise gives the active tab a dark fill -> dark text vanishes). ---- */
html[data-dashboard-theme] .nav-tabs .nav-link.active {
color: var(--theme-dark) !important;
background-color: transparent !important;
border-bottom: 2px solid var(--theme-primary);
}
html[data-dashboard-theme] .nav-tabs .nav-link:hover {
color: var(--theme-primary);
}
/* ---- SlickGrid: selected/active row & sorted header ---- */
html[data-dashboard-theme] .slick-row.active .slick-cell,
html[data-dashboard-theme] .slick-cell.selected,
html[data-dashboard-theme] .slick-row.odd .slick-cell.selected,
html[data-dashboard-theme] .slick-row.selected .slick-cell {
background-color: rgba(var(--theme-primary-rgb), .10) !important;
}
html[data-dashboard-theme] .slick-header-column-sorted {
color: var(--theme-dark);
}
/* header column hover / active — was light blue #c8e8f8 -> soft primary */
html[data-dashboard-theme] .slick-header-column:hover,
html[data-dashboard-theme] .slick-header-column-active,
html[data-dashboard-theme] .slick-header-column-active.ui-state-default {
background: var(--theme-primary-soft) !important;
}
/* sorted column underline + sort arrow — was cyan #5bc0de -> primary */
html[data-dashboard-theme] .slick-header-column-sorted,
html[data-dashboard-theme] .slick-header-column-sorted.ui-state-default {
border-bottom-color: var(--theme-primary) !important;
}
html[data-dashboard-theme] .slick-sort-indicator-asc {
border-bottom-color: var(--theme-primary) !important;
}
html[data-dashboard-theme] .slick-sort-indicator-desc {
border-top-color: var(--theme-primary) !important;
}
/* ---- Pagination: active page -> primary, links -> dark ---- */
html[data-dashboard-theme] .pagination .page-item.active .page-link {
background-color: var(--theme-primary);
border-color: var(--theme-primary);
color: #fff;
}
html[data-dashboard-theme] .pagination .page-link {
color: var(--theme-dark);
}
/* ---- Category titles (property grid section headers) -> dark ---- */
html[data-dashboard-theme] .s-PropertyGrid .category-title,
html[data-dashboard-theme] .flex-layout .category-title {
color: var(--theme-dark);
}
/* ============================================================
MODERN THEME — A-to-Z admin retheme (dialogs, panels, tabs,
category links, quick-search/filter). Replaces the leftover
Serenity blue accents (#1f7dce/#0090d9/#3c8dbc/#7380C4/slateblue
/#0661FF) with the brand palette (--theme-dark + --theme-primary).
============================================================ */
/* ---- jQuery-UI DIALOG (Serenity edit dialogs) ---- */
html[data-dashboard-theme] .ui-dialog {
border-radius: var(--theme-radius);
overflow: hidden;
box-shadow: 0 10px 40px rgba(var(--theme-dark-rgb), .35);
}
html[data-dashboard-theme] .ui-dialog .ui-dialog-titlebar {
background-color: var(--theme-dark);
color: #fff;
}
html[data-dashboard-theme] .ui-dialog .ui-button:hover {
background-color: var(--theme-secondary);
}
/* keep the close (X) hover red — standard destructive affordance */
html[data-dashboard-theme] .ui-dialog .ui-dialog-titlebar-close:hover {
background-color: #d6293e;
}
html[data-dashboard-theme] .ui-dialog .ui-dialog-buttonpane {
border-top: 1px solid var(--bs-border-color, #e7e7e7);
padding: 10px 14px !important;
}
/* message-dialog (Alert/Confirm) buttons are bare