/* ===========================================================================
* APPLICATION THEME -- navy scheme + typography
*
* Loaded AFTER style.css so it overrides the template's palette without
* touching the 1.5MB generated stylesheet. To revert the whole look, remove
* the single to this file -- nothing else was modified.
*
* The template drives everything from space-separated RGB triplets used as
* rgb(var(--primary) / 0.1), so overriding the triplets recolours buttons,
* links, menus, badges, borders and charts in one place.
*
* Base colour is the reports header navy, #1F4E79.
* ======================================================================== */
/* ---------------------------------------------------------------------------
* 1. TYPOGRAPHY
* Native UI font on every platform: nothing to download, no render flash, and
* it still works on a POS terminal with no internet.
* ------------------------------------------------------------------------ */
:root {
--app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
--app-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
}
/* Applied to text elements only. Icon elements (, ::before glyphs) are
deliberately NOT listed -- Remix, Line Awesome, Tabler, Bootstrap Icons and
Boxicons all set their own font-family on those, and overriding it would
turn every icon in the app into stray letters. */
html, body,
.box, .box-title, .box-body, .box-header,
.form-control, .ti-form-select, .form-label, .ti-btn,
input, select, textarea, button,
table, th, td,
h1, h2, h3, h4, h5, h6, p, label {
font-family: var(--app-font);
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: .005em;
}
/* Money and quantities line up under each other everywhere in the app.
This is the single biggest readability gain for an accounting system. */
table td, table th,
.form-control, input[type="number"], input[type="text"],
.font-mono, .tabular {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.font-mono { font-family: var(--app-font-mono); }
/* ---------------------------------------------------------------------------
* 2. PALETTE -- light
* Status colours are recoloured into the navy scheme but keep their hue
* families, so "paid" still reads green and "overdue" still reads red.
* ------------------------------------------------------------------------ */
:root {
--primary: 31 78 121; /* #1F4E79 reports navy */
--primary-rgb: 31, 78, 121;
--secondary: 74 122 167; /* #4A7AA7 steel blue */
--info: 58 124 165; /* #3A7CA5 cool blue */
--success: 42 127 98; /* #2A7F62 deep teal-green */
--warning: 184 124 34; /* #B87C22 amber, desaturated */
--danger: 178 58 72; /* #B23A48 brick red */
--light: 244 246 250; /* #F4F6FA */
--dark: 18 38 63; /* #12263F reports title navy */
--blue: 31 78 121;
--indigo: 58 82 140;
--teal: 42 127 98;
--cyan: 58 124 165;
--purple: 75 90 140;
--pink: 168 96 122;
--orange: 196 122 42;
--burnt-sienna: 178 90 68;
--red: 178 58 72;
--green: 42 127 98;
--yellow: 196 154 42;
--gray: 120 134 152;
--body-bg: 244 246 250; /* #F4F6FA */
--default-background: 247 249 252; /* #F7F9FC */
--default-border: 227 232 239; /* #E3E8EF */
--bootstrap-card-border:227 232 239;
--input-border: 227 232 239;
--default-text-color: 28 41 61; /* #1C293D */
--text-muted: 107 114 128; /* #6B7280 */
--list-hover-focus-bg: 238 244 255; /* #EEF4FF */
--menu-prime-color: 83 100 133;
--menu-border-color: 227 232 239;
--header-prime-color: 83 100 133;
--header-border-color: 227 232 239;
}
/* ---------------------------------------------------------------------------
* 3. PALETTE -- dark
* ------------------------------------------------------------------------ */
.dark, html.dark {
--primary: 88 145 200; /* lifted so it reads on dark */
--primary-rgb: 88, 145, 200;
--secondary: 116 160 200;
--info: 104 165 205;
--success: 74 176 140;
--warning: 224 168 74;
--danger: 222 106 120;
--body-bg: 15 23 36; /* #0F1724 navy-black */
--dark-bg: 21 31 46;
--light: 30 42 60;
--dark: 234 241 248;
--default-background: 21 31 46;
--default-border: 38 51 71;
--bootstrap-card-border:38 51 71;
--input-border: 44 58 79;
--form-control-bg: 24 35 51;
--default-text-color: 234 241 248;
--text-muted: 148 163 184;
--list-hover-focus-bg: 30 43 62;
--menu-border-color: 38 51 71;
--header-border-color: 38 51 71;
}
/* ---------------------------------------------------------------------------
* 4. THE BRAND ACCENT
* .bg-easy was hard-coded teal (#00A09D) and is used on table headers and
* buttons across 94 files. Point it at the theme so it follows the palette.
* ------------------------------------------------------------------------ */
.bg-easy { background-color: rgb(var(--primary)) !important; }
.text-easy { color: rgb(var(--primary)) !important; }
.border-easy { border-color: rgb(var(--primary)) !important; }
.bg-easy\/10 { background-color: rgb(var(--primary) / .1) !important; }
/* the two hard-coded hexes in custom.css belonged to the old scheme */
.disableBtn:hover { background-color: rgb(var(--primary)) !important; }
.loading { background-color: rgb(var(--primary)) !important; }
/* ---------------------------------------------------------------------------
* 5. SURFACES -- match the reports shell so the app reads as one system
* ------------------------------------------------------------------------ */
.box {
border: 1px solid rgb(var(--default-border));
border-radius: 8px;
box-shadow: 0 1px 2px rgb(18 38 63 / .04);
}
.dark .box { box-shadow: none; }
.box-title {
font-weight: 650;
letter-spacing: .01em;
color: rgb(var(--dark));
}
/* tables everywhere pick up the reports treatment */
table.table > thead th {
font-weight: 600;
font-size: .74rem;
letter-spacing: .03em;
text-transform: uppercase;
}
.form-control:focus,
.ti-form-select:focus {
border-color: rgb(var(--primary) / .55);
box-shadow: 0 0 0 3px rgb(var(--primary) / .12);
}
/* login / POS screens use the same ground */
.authentication { background: rgb(var(--body-bg)); }
/* ---------------------------------------------------------------------------
* 6. CHROME -- navigation bar and header
*
* The template hard-codes the menu teal as rgb(0 156 152) in ten separate
* rules rather than reading a variable, so overriding --primary alone left the
* nav bar green. These force it onto the theme.
* ------------------------------------------------------------------------ */
.app-sidebar,
[data-menu-styles=dark] .app-sidebar,
[data-menu-styles=dark] .app-sidebar .main-sidebar-header,
[data-menu-styles=dark] .app-sidebar .slide.has-sub .slide-menu,
[data-menu-styles=dark] .app-sidebar .main-sidebar-header .slide.has-sub .slide-menu,
[data-menu-styles=dark][data-nav-layout=horizontal] .app-sidebar .slide.has-sub .slide-menu,
[data-menu-styles=dark][data-nav-layout=horizontal] .app-sidebar .slide.has-sub .slide-menu.child2,
[data-menu-styles=dark][data-nav-layout=horizontal] .app-sidebar .slide.has-sub .slide-menu.child3,
[data-header-styles=dark] .app-header {
background-color: rgb(var(--primary)) !important;
border-color: rgb(255 255 255 / .10);
}
/* submenus a shade deeper so they read as a layer above the bar */
[data-menu-styles=dark] .app-sidebar .slide-menu.child1,
[data-menu-styles=dark] .app-sidebar .slide-menu.child2,
[data-menu-styles=dark] .app-sidebar .slide-menu.child3 {
background-color: #17395a !important;
}
/* the active menu item needs to separate from the new ground */
[data-nav-layout=horizontal] .app-sidebar .slide.active > .side-menu__item,
[data-nav-layout=horizontal] .app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item:hover,
.app-sidebar .side-menu__item.active {
background-color: rgb(255 255 255 / .14) !important;
color: #fff !important;
}
/* ---------------------------------------------------------------------------
* 7. ACTION BUTTONS
*
* The app uses the green "success" and teal buttons as its primary call to
* action (Save, Create New, Export) rather than the primary colour, so those
* variants are pointed at the theme. Status TEXT and badges keep their own
* colours below -- a green "Active" and a red "Overdue" still have to be
* distinguishable at a glance.
* ------------------------------------------------------------------------ */
.ti-btn-success-full,
.ti-btn-success,
.ti-btn-teal-full,
.ti-btn-info-full,
.ti-btn.bg-success,
.ti-btn.bg-easy,
button.bg-success,
a.bg-success.ti-btn {
background-color: rgb(var(--primary)) !important;
border-color: rgb(var(--primary)) !important;
color: #fff !important;
}
.ti-btn-success-full:hover,
.ti-btn-teal-full:hover,
.ti-btn-info-full:hover,
.ti-btn.bg-success:hover {
background-color: #17395a !important;
}
.ti-btn-primary-full,
.ti-btn-primary {
background-color: rgb(var(--primary)) !important;
color: #fff !important;
}
/* secondary / outline actions */
.ti-btn-secondary-full {
background-color: rgb(var(--secondary)) !important;
color: #fff !important;
}
/* back-to-top bubble is marked !bg-success in the markup */
.scrollToTop { background-color: rgb(var(--primary)) !important; }
/* Status colours are NOT overridden here -- these keep working:
.text-success .text-danger .text-warning .text-info
.bg-success/10 .bg-danger/10 .bg-warning/10 (badge tints)
tr.bg-warning tr.bg-danger (overdue report rows) */
/* ---------------------------------------------------------------------------
* 8. DASHBOARD
* The KPI icons are decorative, not status -- they were green only because the
* markup reuses .text-success. Scoped to .main-card-icon so a green "Active"
* in a table is untouched.
* ------------------------------------------------------------------------ */
.main-card-icon i,
.main-card-icon .text-success,
.main-card-icon .text-primary,
.main-card-icon .text-info,
.main-card-icon .text-warning {
color: rgb(var(--primary)) !important;
}
/* customer / vendor initial bubbles */
.avatar.bg-success { background-color: rgb(var(--primary)) !important; }
.avatar.bg-info,
.avatar.bg-secondary { background-color: rgb(var(--secondary)) !important; }
/* dotted grid + axis labels in the overview chart */
.apexcharts-gridline { stroke: rgb(var(--default-border)) !important; }