/* * Invexa ERP — premium theme layer on top of Tabler. * * Every colour is a token. Accent palettes ([data-accent] on ) give a * light shade and a dark shade; [data-bs-theme="light" | "dark"] maps them * onto warm, low-glare neutrals (light) or graphite (dark). public/js/theme.js * sets both attributes before first paint (light / dark / system + accent). */ /* ------------------------------------------------------- accent palettes */ :root, [data-accent="teal"] { /* Lagoon — default */ --acc: #0f766e; --acc-strong: #115e59; --acc-rgb: 15, 118, 110; --acc-d: #2dd4bf; --acc-d-strong: #5eead4; --acc-d-rgb: 45, 212, 191; --acc2: #0e7490; --acc2-rgb: 14, 116, 144; --acc2-d: #22d3ee; --acc2-d-rgb: 34, 211, 238; } [data-accent="indigo"] { /* Iris */ --acc: #4f46e5; --acc-strong: #4338ca; --acc-rgb: 79, 70, 229; --acc-d: #818cf8; --acc-d-strong: #a5b4fc; --acc-d-rgb: 129, 140, 248; --acc2: #7c3aed; --acc2-rgb: 124, 58, 237; --acc2-d: #a78bfa; --acc2-d-rgb: 167, 139, 250; } [data-accent="violet"] { /* Orchid */ --acc: #7c3aed; --acc-strong: #6d28d9; --acc-rgb: 124, 58, 237; --acc-d: #a78bfa; --acc-d-strong: #c4b5fd; --acc-d-rgb: 167, 139, 250; --acc2: #c026d3; --acc2-rgb: 192, 38, 211; --acc2-d: #e879f9; --acc2-d-rgb: 232, 121, 249; } [data-accent="blue"] { /* Ocean */ --acc: #2563eb; --acc-strong: #1d4ed8; --acc-rgb: 37, 99, 235; --acc-d: #60a5fa; --acc-d-strong: #93c5fd; --acc-d-rgb: 96, 165, 250; --acc2: #0891b2; --acc2-rgb: 8, 145, 178; --acc2-d: #22d3ee; --acc2-d-rgb: 34, 211, 238; } [data-accent="emerald"] { /* Jade */ --acc: #047857; --acc-strong: #065f46; --acc-rgb: 4, 120, 87; --acc-d: #34d399; --acc-d-strong: #6ee7b7; --acc-d-rgb: 52, 211, 153; --acc2: #0d9488; --acc2-rgb: 13, 148, 136; --acc2-d: #2dd4bf; --acc2-d-rgb: 45, 212, 191; } [data-accent="rose"] { /* Ruby */ --acc: #e11d48; --acc-strong: #be123c; --acc-rgb: 225, 29, 72; --acc-d: #fb7185; --acc-d-strong: #fda4af; --acc-d-rgb: 251, 113, 133; --acc2: #ea580c; --acc2-rgb: 234, 88, 12; --acc2-d: #fb923c; --acc2-d-rgb: 251, 146, 60; } /* ------------------------------------------------------------ light theme */ :root, [data-bs-theme="light"] { color-scheme: light; --erp-primary: var(--acc); --erp-primary-strong: var(--acc-strong); --erp-primary-rgb: var(--acc-rgb); --erp-primary-2: var(--acc2); --erp-primary-2-rgb: var(--acc2-rgb); --erp-on-primary: #ffffff; --erp-bg: #f5f5f1; --erp-surface: #ffffff; --erp-surface-2: #fafaf7; --erp-glass: rgba(255, 255, 255, .82); --erp-border: #e9e7e1; --erp-border-strong: #dad7cf; --erp-border-hover: #c6c2b8; --erp-ink: #191b1d; --erp-text: #3c4146; --erp-muted: #6f757c; --erp-placeholder: #a5a9ae; --erp-tint: rgba(var(--erp-primary-rgb), .09); --erp-tint-strong: rgba(var(--erp-primary-rgb), .15); --erp-tint-border: rgba(var(--erp-primary-rgb), .22); --erp-grad: linear-gradient(135deg, var(--erp-primary) 0%, var(--erp-primary-2) 100%); --erp-grad-soft: linear-gradient(135deg, rgba(var(--erp-primary-rgb), .10) 0%, rgba(var(--erp-primary-2-rgb), .06) 100%); --erp-hero-grad: radial-gradient(120% 140% at 0% 0%, rgba(var(--erp-primary-rgb), .13) 0%, transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(var(--erp-primary-2-rgb), .10) 0%, transparent 60%), linear-gradient(135deg, #fbfbf8 0%, #f6f5f0 100%); --erp-shadow-sm: 0 1px 2px rgba(28, 25, 23, .05); --erp-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 10px 28px -14px rgba(28, 25, 23, .14); --erp-shadow-lg: 0 28px 56px -22px rgba(28, 25, 23, .28); --erp-backdrop: rgba(25, 27, 29, .30); --erp-radius: 14px; --erp-radius-sm: 9px; --erp-sidebar-w: 16.5rem; --erp-side-bg: #fbfbf9; --erp-side-border: #ebe9e3; --erp-side-ink: #4a4f55; --erp-side-strong: #191b1d; --erp-side-muted: #979ba0; --erp-side-hover: rgba(25, 27, 29, .045); --erp-side-active: rgba(var(--erp-primary-rgb), .10); --erp-side-icon: #f1f0eb; --erp-success: #047857; --erp-danger: #dc2626; --erp-warning: #b45309; --erp-info: #0369a1; --erp-chart-1: var(--erp-primary); --erp-chart-2: var(--erp-primary-2); --erp-chart-3: #f59e0b; --erp-chart-4: #10b981; --erp-chart-5: #ec4899; --erp-chart-6: #0ea5e9; --erp-chart-7: #8b5cf6; --erp-chart-8: #78716c; --erp-chart-grid: #ecebe6; --erp-chart-fg: #6f757c; --erp-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tblr-body-bg: var(--erp-bg); --tblr-bg-surface: var(--erp-surface); --tblr-bg-surface-secondary: var(--erp-surface-2); --tblr-bg-surface-tertiary: var(--erp-bg); --tblr-border-color: var(--erp-border); --tblr-border-color-translucent: rgba(28, 25, 23, .08); --tblr-body-color: var(--erp-text); --tblr-emphasis-color: var(--erp-ink); --tblr-secondary: var(--erp-muted); --tblr-muted: var(--erp-muted); --tblr-border-radius: var(--erp-radius-sm); } /* ------------------------------------------------------------- dark theme */ [data-bs-theme="dark"] { color-scheme: dark; --erp-primary: var(--acc-d); --erp-primary-strong: var(--acc-d-strong); --erp-primary-rgb: var(--acc-d-rgb); --erp-primary-2: var(--acc2-d); --erp-primary-2-rgb: var(--acc2-d-rgb); --erp-on-primary: #0a0e10; --erp-bg: #0b0e10; --erp-surface: #13171a; --erp-surface-2: #0f1316; --erp-glass: rgba(11, 14, 16, .78); --erp-border: #222a2e; --erp-border-strong: #2d363b; --erp-border-hover: #3b464c; --erp-ink: #eef2f3; --erp-text: #c3cbce; --erp-muted: #8a959a; --erp-placeholder: #5d686d; --erp-tint: rgba(var(--erp-primary-rgb), .13); --erp-tint-strong: rgba(var(--erp-primary-rgb), .20); --erp-tint-border: rgba(var(--erp-primary-rgb), .28); --erp-grad-soft: linear-gradient(135deg, rgba(var(--erp-primary-rgb), .14) 0%, rgba(var(--erp-primary-2-rgb), .08) 100%); --erp-hero-grad: radial-gradient(120% 140% at 0% 0%, rgba(var(--erp-primary-rgb), .18) 0%, transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(var(--erp-primary-2-rgb), .12) 0%, transparent 60%), linear-gradient(135deg, #12171a 0%, #0e1215 100%); --erp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --erp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -14px rgba(0, 0, 0, .7); --erp-shadow-lg: 0 28px 56px -22px rgba(0, 0, 0, .85); --erp-backdrop: rgba(0, 0, 0, .58); --erp-side-bg: #0e1214; --erp-side-border: #1d2427; --erp-side-ink: #aab3b7; --erp-side-strong: #eef2f3; --erp-side-muted: #6a757a; --erp-side-hover: rgba(255, 255, 255, .045); --erp-side-active: rgba(var(--erp-primary-rgb), .14); --erp-side-icon: #182024; --erp-success: #34d399; --erp-danger: #f87171; --erp-warning: #fbbf24; --erp-info: #38bdf8; --erp-chart-3: #fbbf24; --erp-chart-4: #34d399; --erp-chart-5: #f472b6; --erp-chart-6: #38bdf8; --erp-chart-7: #a78bfa; --erp-chart-8: #a8a29e; --erp-chart-grid: #1f272b; --erp-chart-fg: #8a959a; --tblr-body-bg: var(--erp-bg); --tblr-bg-surface: var(--erp-surface); --tblr-bg-surface-secondary: var(--erp-surface-2); --tblr-bg-surface-tertiary: var(--erp-bg); --tblr-border-color: var(--erp-border); --tblr-border-color-translucent: rgba(255, 255, 255, .07); --tblr-body-color: var(--erp-text); --tblr-emphasis-color: var(--erp-ink); --tblr-secondary: var(--erp-muted); --tblr-muted: var(--erp-muted); } /* Tabler's own primary follows the active accent in both themes. */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --tblr-primary: var(--erp-primary); --tblr-primary-rgb: var(--erp-primary-rgb); --tblr-primary-fg: var(--erp-on-primary); --tblr-primary-darken: var(--erp-primary-strong); --tblr-primary-lt: var(--erp-tint); --tblr-primary-text-emphasis: var(--erp-primary-strong); --tblr-primary-bg-subtle: var(--erp-tint); --tblr-primary-border-subtle: var(--erp-tint-border); --tblr-link-color: var(--erp-primary-strong); --tblr-link-color-rgb: var(--erp-primary-rgb); --tblr-link-hover-color: var(--erp-primary); --tblr-focus-ring-color: rgba(var(--erp-primary-rgb), .25); } [data-bs-theme="dark"] { --tblr-link-color: var(--erp-primary); --tblr-link-hover-color: var(--erp-primary-strong); } [x-cloak] { display: none !important; } [hidden] { display: none !important; } /* Show an element only in one theme. (Tabler's .hide-theme-* read 's attribute; ours is on , so use these instead.) */ [data-bs-theme="dark"] .erp-when-light, [data-bs-theme="light"] .erp-when-dark { display: none !important; } [data-bs-theme="dark"] .hide-theme-dark, [data-bs-theme="light"] .hide-theme-light { display: none !important; } /* -------------------------------------------------------------------- base */ html { scroll-behavior: smooth; } body { font-family: var(--tblr-font-sans-serif); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; background: var(--erp-bg); color: var(--erp-text); -webkit-font-smoothing: antialiased; letter-spacing: -.003em; } body, .card, .erp-sidebar, .erp-topbar, .form-control, .form-select, .dropdown-menu, .modal-content { transition: background-color .25s ease, border-color .25s ease, color .2s ease; } a { color: var(--tblr-link-color); } ::selection { background: rgba(var(--erp-primary-rgb), .22); } * { scrollbar-width: thin; scrollbar-color: rgba(120, 113, 108, .35) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: rgba(120, 113, 108, .3); border-radius: 8px; } *::-webkit-scrollbar-track { background: transparent; } .erp-container { max-width: 1580px; padding-left: 1.5rem; padding-right: 1.5rem; } @media (max-width: 575.98px) { .erp-container { padding-left: 1rem; padding-right: 1rem; } } .table, .text-end, .erp-num, .h1, .h2, .h3 { font-variant-numeric: tabular-nums; } .min-w-0 { min-width: 0; } .text-primary { color: var(--erp-primary-strong) !important; } [data-bs-theme="dark"] .text-primary { color: var(--erp-primary) !important; } .erp-kbd, kbd.erp-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.3rem; padding: 0 .35rem; font: 600 .68rem/1 var(--tblr-font-sans-serif); color: var(--erp-muted); background: var(--erp-surface); border: 1px solid var(--erp-border-strong); border-bottom-width: 2px; border-radius: 6px; box-shadow: none; letter-spacing: 0; } /* ----------------------------------------------------------------- sidebar */ .erp-sidebar { background: var(--erp-side-bg) !important; border-right: 1px solid var(--erp-side-border); box-shadow: none !important; color: var(--erp-side-ink); } @media (min-width: 992px) { .navbar-vertical.navbar-expand-lg.erp-sidebar { width: var(--erp-sidebar-w); overflow-y: auto; } .navbar-vertical.navbar-expand-lg.erp-sidebar ~ .page-wrapper, .navbar-vertical.navbar-expand-lg.erp-sidebar ~ .navbar { margin-left: var(--erp-sidebar-w); } .erp-sidebar > .container-fluid { min-height: 100%; align-items: stretch; } .erp-sidebar .navbar-collapse { display: flex !important; flex-direction: column; min-height: calc(100vh - 5rem); } } .erp-sidebar > .container-fluid { padding: 0; } .erp-sidebar .navbar-toggler { color: var(--erp-side-ink); border-color: var(--erp-border); } .erp-brand { display: flex; align-items: center; gap: .75rem; padding: 1.15rem 1.25rem; text-decoration: none !important; } .erp-brand-logo { width: 38px; height: 38px; border-radius: 11px; flex: none; background: var(--erp-grad); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 .92rem/1 var(--erp-font-display); letter-spacing: .02em; box-shadow: 0 8px 18px -8px rgba(var(--erp-primary-rgb), .65), inset 0 1px 0 rgba(255, 255, 255, .22); } .erp-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .erp-brand-text strong { color: var(--erp-side-strong); font-family: var(--erp-font-display); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .erp-brand-text small { color: var(--erp-side-muted); font-size: .66rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; } .erp-nav-search { position: relative; margin: .1rem 1rem .75rem; } .erp-nav-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--erp-side-muted); font-size: 1rem; pointer-events: none; } .erp-nav-search input { width: 100%; height: 2.25rem; padding: 0 .75rem 0 2.1rem; background: var(--erp-surface); color: var(--erp-side-strong); border: 1px solid var(--erp-side-border); border-radius: 10px; font-size: .8125rem; outline: none; transition: border-color .15s, background .15s, box-shadow .15s; } .erp-nav-search input::placeholder { color: var(--erp-side-muted); } .erp-nav-search input:focus { border-color: var(--erp-tint-border); box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb), .12); } .erp-nav { padding: 0 .75rem 1rem !important; gap: 1px; } .erp-sidebar .erp-nav .nav-link { display: flex; align-items: center; gap: .6rem; padding: .48rem .65rem; margin: 1px 0; border-radius: 9px; color: var(--erp-side-ink); font-size: .845rem; font-weight: 500; transition: background .15s, color .15s; } .erp-sidebar .erp-nav .nav-link:hover { background: var(--erp-side-hover); color: var(--erp-side-strong); } .erp-sidebar .erp-nav .nav-link-icon { width: 1.75rem; height: 1.75rem; margin: 0; flex: none; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 8px; background: var(--erp-side-icon); color: var(--erp-side-ink); font-size: 1.05rem; opacity: 1; transition: background .15s, color .15s; } .erp-sidebar .erp-nav .nav-link-title { font-size: inherit; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .erp-sidebar .erp-nav .erp-chevron { font-size: .9rem; opacity: .45; transition: transform .2s; } .erp-sidebar .erp-nav .nav-link:not(.collapsed) > .erp-chevron { transform: rotate(90deg); opacity: .8; } .erp-sidebar .erp-nav .erp-group-root > .nav-link:not(.collapsed) { color: var(--erp-side-strong); font-weight: 600; } .erp-sidebar .erp-nav .erp-group-root > .nav-link:not(.collapsed) .nav-link-icon { background: var(--erp-grad); color: #fff; box-shadow: 0 4px 10px -5px rgba(var(--erp-primary-rgb), .7); } .erp-sidebar .erp-subnav { margin: 2px 0 4px 1.55rem; padding-left: .6rem; border-left: 1px solid var(--erp-side-border); } .erp-sidebar .erp-subnav .nav-link { padding: .36rem .6rem; font-size: .81rem; } .erp-sidebar .erp-subnav .erp-subgroup > .nav-link { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-side-muted); padding-top: .55rem; } .erp-sidebar .erp-subnav .erp-subnav { margin-left: .15rem; } .erp-sidebar .erp-nav .nav-link.active { background: var(--erp-side-active) !important; color: var(--erp-primary-strong) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--erp-primary); } [data-bs-theme="dark"] .erp-sidebar .erp-nav .nav-link.active { color: var(--erp-primary) !important; } .erp-sidebar .erp-nav .nav-link.active .nav-link-icon { background: var(--erp-surface); color: var(--erp-primary-strong); } .erp-sidebar .erp-nav .nav-link.disabled { opacity: .45; cursor: not-allowed; } .erp-sidebar .erp-nav .nav-link.disabled .badge { font-size: .6rem; background: var(--erp-side-icon) !important; color: var(--erp-side-muted) !important; } .erp-sidebar-foot { margin: auto .75rem .9rem; padding: .7rem; display: flex; align-items: center; gap: .65rem; background: var(--erp-surface); border: 1px solid var(--erp-side-border); border-radius: 12px; } .erp-sidebar-foot .avatar { background: var(--erp-grad); color: #fff; font-weight: 700; } .erp-sidebar-foot .erp-foot-name { color: var(--erp-side-strong); font-weight: 600; font-size: .82rem; line-height: 1.2; } .erp-sidebar-foot .erp-foot-role { color: var(--erp-side-muted); font-size: .7rem; } .erp-sidebar-foot button { color: var(--erp-side-muted); } .erp-sidebar-foot button:hover { color: var(--erp-danger); background: rgba(239, 68, 68, .1); } @media (max-width: 991.98px) { .erp-sidebar .navbar-toggler { margin-right: 1rem; } .erp-sidebar > .container-fluid { flex-wrap: wrap; } .erp-sidebar-foot { margin-top: .5rem; } } /* ------------------------------------------------------------------ topbar */ .erp-topbar { position: sticky; top: 0; z-index: 1020; min-height: 4rem; padding: .6rem 0; background: var(--erp-glass) !important; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--erp-border) !important; box-shadow: none !important; } .erp-topbar > .container-fluid { display: flex; align-items: center; gap: .75rem; flex-wrap: nowrap; } .erp-search-trigger { display: flex; align-items: center; gap: .6rem; width: min(440px, 100%); height: 2.5rem; padding: 0 .55rem 0 .85rem; background: var(--erp-surface); color: var(--erp-muted); border: 1px solid var(--erp-border); border-radius: 11px; font-size: .85rem; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; } .erp-search-trigger:hover { border-color: var(--erp-tint-border); box-shadow: 0 0 0 4px rgba(var(--erp-primary-rgb), .08); } .erp-search-trigger span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .erp-search-trigger i { font-size: 1.1rem; } .erp-topbar .btn-icon { width: 2.5rem; height: 2.5rem; border-radius: 11px; } .erp-topbar .erp-user-btn { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem .25rem .25rem; border-radius: 12px; text-decoration: none; color: inherit; } .erp-topbar .erp-user-btn:hover { background: var(--erp-surface); } .erp-topbar .erp-user-btn .avatar { background: var(--erp-grad); color: #fff; font-weight: 700; border-radius: 10px; } .erp-ws-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 99px; background: var(--erp-tint); color: var(--erp-primary-strong); font-size: .75rem; font-weight: 600; white-space: nowrap; } [data-bs-theme="dark"] .erp-ws-chip { color: var(--erp-primary); } .erp-quick-menu { min-width: 17rem; padding: .4rem; } .erp-quick-menu .dropdown-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 9px; font-weight: 500; } .erp-quick-icon { width: 2rem; height: 2rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex: none; } /* Appearance menu */ .erp-appearance { width: 17.5rem; padding: .5rem; } .erp-appearance .dropdown-header { padding: .35rem .4rem; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-muted); } .erp-appearance-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: 0 .25rem .35rem; } .erp-appearance-modes button { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .55rem .25rem; border: 1px solid var(--erp-border); border-radius: 10px; background: var(--erp-surface-2); color: var(--erp-text); font-size: .74rem; font-weight: 600; cursor: pointer; transition: all .15s; } .erp-appearance-modes button i { font-size: 1.15rem; } .erp-appearance-modes button:hover { border-color: var(--erp-tint-border); } .erp-appearance-modes button.active { border-color: var(--erp-primary); background: var(--erp-tint); color: var(--erp-primary-strong); box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb), .12); } [data-bs-theme="dark"] .erp-appearance-modes button.active { color: var(--erp-primary); } .erp-appearance-accents { display: flex; flex-wrap: wrap; gap: .45rem; padding: .15rem .35rem .5rem; } .erp-swatch { width: 1.85rem; height: 1.85rem; border-radius: 50%; border: 0; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .95rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .15s, box-shadow .15s; } .erp-swatch i { opacity: 0; transition: opacity .15s; } .erp-swatch:hover { transform: scale(1.08); } .erp-swatch.active { box-shadow: 0 0 0 2px var(--erp-surface), 0 0 0 4px currentColor; } .erp-swatch.active i { opacity: 1; } .erp-swatch-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); color: #0f766e; } .erp-swatch-indigo { background: linear-gradient(135deg, #818cf8, #4f46e5); color: #4f46e5; } .erp-swatch-violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #7c3aed; } .erp-swatch-blue { background: linear-gradient(135deg, #60a5fa, #2563eb); color: #2563eb; } .erp-swatch-emerald { background: linear-gradient(135deg, #34d399, #047857); color: #047857; } .erp-swatch-rose { background: linear-gradient(135deg, #fb7185, #e11d48); color: #e11d48; } .erp-swatch i { color: #fff; } .erp-appearance-hint { display: flex; align-items: center; gap: .25rem; padding: .45rem .45rem .15rem; border-top: 1px dashed var(--erp-border); font-size: .72rem; color: var(--erp-muted); } /* ------------------------------------------------------------- page header */ .page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .page-header { margin: 1.6rem 0 0; } .page-title { font-family: var(--erp-font-display); font-size: 1.55rem; font-weight: 750; letter-spacing: -.025em; color: var(--erp-ink); } .page-subtitle { color: var(--erp-muted); font-size: .875rem; margin-top: .25rem; } .breadcrumb { font-size: .78rem; margin-bottom: .3rem; } .breadcrumb a { color: var(--erp-muted); } .breadcrumb a:hover { color: var(--erp-primary-strong); } .breadcrumb-item.active { color: var(--erp-ink); font-weight: 500; } .page-body { margin-top: 1.25rem; margin-bottom: 2rem; flex: 1; } .footer { border-top: 1px solid var(--erp-border); padding: 1rem 0; font-size: .8rem; } /* ------------------------------------------------------------------- cards */ .card { border: 1px solid var(--erp-border); border-radius: var(--erp-radius); box-shadow: var(--erp-shadow-sm); background: var(--erp-surface); } .card > .table-responsive:last-child, .card > .card-footer:last-child { border-bottom-left-radius: var(--erp-radius); border-bottom-right-radius: var(--erp-radius); } .card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--erp-border); background: transparent; } .card-header:first-child { border-radius: var(--erp-radius) var(--erp-radius) 0 0; } .card-title { font-size: .975rem; font-weight: 650; color: var(--erp-ink); letter-spacing: -.01em; } .card-body { padding: 1.25rem; } .card-footer { background: var(--erp-surface-2); border-top: 1px solid var(--erp-border); padding: .8rem 1.25rem; } .card-body.border-bottom { background: var(--erp-surface-2); } .row-cards { --tblr-gutter-y: 1.25rem; --tblr-gutter-x: 1.25rem; } .card-hover { transition: transform .18s, box-shadow .18s, border-color .18s; } .card-hover:hover { transform: translateY(-2px); box-shadow: var(--erp-shadow); border-color: var(--erp-tint-border); } /* ------------------------------------------------------------------ tables */ .table { --tblr-table-bg: transparent; --tblr-table-hover-bg: rgba(var(--erp-primary-rgb), .045); --tblr-table-striped-bg: rgba(120, 113, 108, .03); --tblr-table-color: var(--erp-text); color: var(--erp-text); } .table > :not(caption) > * > * { padding: .72rem 1rem; border-bottom-color: var(--erp-border); } .table thead th { background: var(--erp-surface-2); font-size: .68rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--erp-muted); padding-top: .7rem; padding-bottom: .7rem; white-space: nowrap; } .table thead th a { color: inherit !important; } .table tbody tr { transition: background-color .12s; } .table tfoot th, .table tfoot td { background: var(--erp-surface-2); font-weight: 700; color: var(--erp-ink); } .card-table tr td:first-child, .card-table tr th:first-child { padding-left: 1.25rem; } .card-table tr td:last-child, .card-table tr th:last-child { padding-right: 1.25rem; } .table-sm > :not(caption) > * > * { padding: .45rem .75rem; } .table-danger > td { background: rgba(239, 68, 68, .07) !important; } /* ------------------------------------------------------------------- forms */ .form-label { font-size: .8rem; font-weight: 600; color: var(--erp-ink); margin-bottom: .4rem; } .form-label.required::after { color: var(--erp-danger); } .form-hint { font-size: .75rem; color: var(--erp-muted); } .form-control, .form-select { border-radius: var(--erp-radius-sm); border-color: var(--erp-border-strong); background-color: var(--erp-surface); color: var(--erp-ink); font-size: .875rem; transition: border-color .15s, box-shadow .15s, background-color .15s; } .form-control::placeholder { color: var(--erp-placeholder); } .form-control:hover:not(:focus):not([readonly]):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: var(--erp-border-hover); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--erp-primary); box-shadow: 0 0 0 4px rgba(var(--erp-primary-rgb), .15); } .form-control:disabled, .form-select:disabled { background-color: var(--erp-surface-2); color: var(--erp-muted); } .form-control-sm, .form-select-sm { border-radius: 8px; font-size: .82rem; } .form-control-lg { border-radius: 12px; } .form-control[readonly] { background: var(--erp-surface-2); } .form-check-input { border-color: var(--erp-border-strong); background-color: var(--erp-surface); } .form-check-input:checked { background-color: var(--erp-primary); border-color: var(--erp-primary); } .input-group > .input-group-text { border-color: var(--erp-border-strong); background: var(--erp-surface-2); color: var(--erp-muted); } .input-icon-addon { color: var(--erp-muted); } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: .35; } [data-bs-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.8); } .is-invalid { animation: erp-shake .3s; } @keyframes erp-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* Filter bars: compact uppercase labels */ .card-body.border-bottom .form-label.small, .erp-filter .form-label { font-size: .68rem !important; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--erp-muted) !important; margin-bottom: .35rem !important; } .erp-filter { background: var(--erp-surface); } /* List toolbar */ .erp-toolbar-search { position: relative; width: min(380px, 100%); } .erp-toolbar-search .form-control { padding-right: 2.3rem; } .erp-toolbar-search .erp-kbd { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); pointer-events: none; } /* Active data-entry row highlight */ .erp-entry-table tbody tr:focus-within > td { background: rgba(var(--erp-primary-rgb), .05); } .erp-entry-table tbody tr:focus-within > td:first-child { box-shadow: inset 3px 0 0 var(--erp-primary); } .erp-entry-table .form-control-sm, .erp-entry-table .form-select-sm { height: 2.15rem; font-weight: 500; } .erp-entry-table td { vertical-align: middle; } /* ----------------------------------------------------------------- buttons */ .btn { border-radius: var(--erp-radius-sm); font-weight: 600; letter-spacing: -.005em; transition: transform .12s, box-shadow .15s, background .15s, filter .15s; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn-primary { background-color: var(--erp-primary) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%) !important; border: 0 !important; color: var(--erp-on-primary) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px -8px rgba(var(--erp-primary-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .2); } .btn-primary:hover:not(:disabled) { filter: brightness(1.06) saturate(1.05); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 22px -10px rgba(var(--erp-primary-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .2); } .btn-primary:disabled, .btn-primary.disabled { opacity: .45; box-shadow: none; } .btn-lg { border-radius: 12px; padding: .7rem 1.25rem; } .btn-outline-secondary { border-color: var(--erp-border-strong); color: var(--erp-text); background: var(--erp-surface); } .btn-outline-secondary:hover { background: var(--erp-surface-2); color: var(--erp-ink); border-color: var(--erp-border-hover); } .btn-ghost-primary { color: var(--erp-primary-strong); } .btn-ghost-primary:hover { background: var(--erp-tint); color: var(--erp-primary-strong); } [data-bs-theme="dark"] .btn-ghost-primary, [data-bs-theme="dark"] .btn-ghost-primary:hover { color: var(--erp-primary); } .btn-ghost-secondary { color: var(--erp-muted); } .btn-ghost-secondary:hover { background: var(--erp-surface-2); color: var(--erp-ink); } .btn-soft { background: var(--erp-tint); color: var(--erp-primary-strong); border: 0; } .btn-soft:hover { background: var(--erp-tint-strong); color: var(--erp-primary-strong); } [data-bs-theme="dark"] .btn-soft, [data-bs-theme="dark"] .btn-soft:hover { color: var(--erp-primary); } .btn-sm { border-radius: 8px; } .btn-list { gap: .5rem; } /* segmented radio */ .erp-segment { display: flex; padding: 4px; gap: 4px; background: var(--erp-surface-2); border: 1px solid var(--erp-border); border-radius: 12px; } .erp-segment .btn { flex: 1; border: 0 !important; background: transparent; color: var(--erp-muted); box-shadow: none; } .erp-segment .btn-check:checked + .btn, .erp-segment .btn.active { background: var(--erp-surface) !important; color: var(--erp-primary-strong) !important; box-shadow: var(--erp-shadow-sm), 0 0 0 1px var(--erp-border); } [data-bs-theme="dark"] .erp-segment .btn-check:checked + .btn, [data-bs-theme="dark"] .erp-segment .btn.active { color: var(--erp-primary) !important; } .erp-segment .btn-check:focus-visible + .btn { box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb), .3); } /* ------------------------------------------------------------------ badges */ .badge { font-weight: 600; border-radius: 7px; padding: .32em .62em; letter-spacing: .01em; } .bg-primary-lt { background: var(--erp-tint) !important; color: var(--erp-primary-strong) !important; } [data-bs-theme="dark"] .bg-primary-lt { color: var(--erp-primary) !important; } .bg-primary { background-color: var(--erp-primary) !important; color: var(--erp-on-primary) !important; } /* -------------------------------------------------------------- pagination */ .pagination { gap: 4px; margin: 0; } .page-link { border-radius: 8px !important; border: 1px solid var(--erp-border); min-width: 2rem; text-align: center; font-weight: 500; color: var(--erp-text); background: var(--erp-surface); } .page-link:hover { background: var(--erp-surface-2); color: var(--erp-ink); border-color: var(--erp-border-hover); } .page-item.active .page-link { background: var(--erp-primary); border-color: transparent; color: var(--erp-on-primary); box-shadow: 0 4px 10px -4px rgba(var(--erp-primary-rgb), .7); } .page-item.disabled .page-link { background: transparent; color: var(--erp-placeholder); } /* -------------------------------------------------------- modals / dropdown */ .modal-backdrop.show { opacity: 1; background: var(--erp-backdrop); backdrop-filter: blur(3px); } .modal-content { border: 1px solid var(--erp-border); border-radius: 18px; box-shadow: var(--erp-shadow-lg); overflow: hidden; background: var(--erp-surface); } .modal-header { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--erp-border); } .modal-title { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; color: var(--erp-ink); } .modal-body { padding: 1.4rem; } .modal-footer { padding: .9rem 1.4rem; background: var(--erp-surface-2); border-top: 1px solid var(--erp-border); } .modal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform .2s ease-out; } .modal.show .modal-dialog { transform: none; } .erp-modal-icon { width: 2rem; height: 2rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; margin-right: .6rem; background: var(--erp-tint); color: var(--erp-primary-strong); font-size: 1.05rem; } .dropdown-menu { border: 1px solid var(--erp-border); border-radius: 12px; box-shadow: var(--erp-shadow-lg); padding: .35rem; background: var(--erp-surface); color: var(--erp-text); } .dropdown-item { border-radius: 8px; padding: .5rem .7rem; color: var(--erp-text); } .dropdown-item:hover, .dropdown-item:focus { background: var(--erp-surface-2); color: var(--erp-ink); } .dropdown-item:active { background: var(--erp-tint); color: inherit; } .dropdown-divider { border-color: var(--erp-border); } .dropdown-header { color: var(--erp-muted); } /* Autocomplete result lists */ .list-group.shadow { border: 1px solid var(--erp-border); border-radius: 12px !important; box-shadow: var(--erp-shadow-lg) !important; overflow: auto; margin-top: 6px; padding: 4px; } .list-group.shadow.bg-body { background: var(--erp-surface) !important; } .list-group.shadow .list-group-item { border: 0; border-radius: 8px !important; padding: .55rem .75rem; margin: 1px 0; background: transparent; color: var(--erp-text); } .list-group.shadow .list-group-item:hover, .list-group.shadow .list-group-item.active { background: var(--erp-tint); color: var(--erp-ink); } .list-group.shadow .list-group-item.active { box-shadow: inset 3px 0 0 var(--erp-primary); } /* ------------------------------------------------------------------ toasts */ .toast-container { z-index: 1090; } .toast { border: 1px solid var(--erp-border) !important; border-radius: 13px; background: var(--erp-surface); box-shadow: var(--erp-shadow-lg); overflow: hidden; min-width: 300px; animation: erp-toast-in .25s cubic-bezier(.2, .9, .3, 1.2); } .toast .toast-body { font-weight: 500; color: var(--erp-ink) !important; display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem; } .toast .toast-body i { font-size: 1.25rem; } .erp-toast-success { box-shadow: inset 4px 0 0 #10b981, var(--erp-shadow-lg); } .erp-toast-success .toast-body i { color: #10b981; } .erp-toast-error { box-shadow: inset 4px 0 0 #ef4444, var(--erp-shadow-lg); } .erp-toast-error .toast-body i { color: #ef4444; } .erp-toast-warning { box-shadow: inset 4px 0 0 #f59e0b, var(--erp-shadow-lg); } .erp-toast-warning .toast-body i { color: #f59e0b; } .erp-toast-info { box-shadow: inset 4px 0 0 var(--erp-primary), var(--erp-shadow-lg); } .erp-toast-info .toast-body i { color: var(--erp-primary); } @keyframes erp-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ alerts */ .alert { border-radius: 12px; border: 1px solid var(--erp-border); box-shadow: none; } .alert-danger { background: #fef4f3; border-color: #fbd3cf; color: #9b1c1c; } .alert-info { background: rgba(var(--erp-primary-rgb), .07); border-color: var(--erp-tint-border); color: var(--erp-primary-strong); } .alert-warning { background: #fffaeb; border-color: #fce4a3; color: #8a4b08; } .alert-success { background: #effcf6; border-color: #c2eedb; color: #046c4e; } [data-bs-theme="dark"] .alert-danger { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .3); color: #fca5a5; } [data-bs-theme="dark"] .alert-info { color: var(--erp-primary); } [data-bs-theme="dark"] .alert-warning { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); color: #fcd34d; } [data-bs-theme="dark"] .alert-success { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); color: #6ee7b7; } /* ------------------------------------------------------------- empty state */ .empty { padding: 2.5rem 1rem !important; } .empty-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--erp-grad-soft); border: 1px solid var(--erp-tint-border); } .empty-icon i { color: var(--erp-primary) !important; font-size: 1.8rem !important; } .empty-title { font-weight: 700; color: var(--erp-ink); } /* -------------------------------------------------------- datagrid / misc */ .datagrid-title { font-size: .68rem; letter-spacing: .07em; font-weight: 650; color: var(--erp-muted); } .avatar { border-radius: 10px; } .progress { border-radius: 99px; background: var(--erp-surface-2); box-shadow: inset 0 0 0 1px var(--erp-border); } .progress-bar { border-radius: 99px; background: var(--erp-grad); } .text-green { color: var(--erp-success) !important; } .text-red { color: var(--erp-danger) !important; } .text-orange { color: var(--erp-warning) !important; } .text-secondary { color: var(--erp-muted) !important; } .border-bottom, .border-top, .border-end, .border-start { border-color: var(--erp-border) !important; } /* ------------------------------------------------------- command palette */ .erp-palette { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; } .erp-palette-backdrop { position: absolute; inset: 0; background: var(--erp-backdrop); backdrop-filter: blur(4px); animation: erp-fade .15s; } .erp-palette-panel { position: relative; width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 18px; box-shadow: var(--erp-shadow-lg); overflow: hidden; animation: erp-pop .18s cubic-bezier(.2, .9, .3, 1.15); } .erp-palette-search { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--erp-border); } .erp-palette-search i { font-size: 1.3rem; color: var(--erp-primary); } .erp-palette-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1.05rem; color: var(--erp-ink); } .erp-palette-list { overflow-y: auto; padding: .4rem; } .erp-palette-group { padding: .6rem .75rem .3rem; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-muted); } .erp-palette-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .75rem; border: 0; border-radius: 10px; background: transparent; color: var(--erp-ink); text-align: left; cursor: pointer; } .erp-palette-item .erp-pi-icon { width: 2rem; height: 2rem; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--erp-surface-2); border: 1px solid var(--erp-border); color: var(--erp-muted); flex: none; } .erp-palette-item .erp-pi-label { flex: 1; font-weight: 500; } .erp-palette-item .erp-pi-trail { font-size: .75rem; color: var(--erp-muted); } .erp-palette-item.active { background: var(--erp-tint); } .erp-palette-item.active .erp-pi-icon { background: var(--erp-primary); color: var(--erp-on-primary); border-color: transparent; } .erp-palette-empty { padding: 2rem; text-align: center; color: var(--erp-muted); } .erp-palette-foot { display: flex; gap: 1.1rem; padding: .6rem 1.1rem; border-top: 1px solid var(--erp-border); background: var(--erp-surface-2); font-size: .72rem; color: var(--erp-muted); } .erp-palette-foot span { display: inline-flex; align-items: center; gap: .3rem; } @keyframes erp-fade { from { opacity: 0; } } @keyframes erp-pop { from { opacity: 0; transform: translateY(-10px) scale(.98); } } .erp-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.5rem; } .erp-shortcuts div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--erp-border); font-size: .85rem; } .erp-shortcuts div span:last-child { display: inline-flex; gap: 3px; } @media (max-width: 575.98px) { .erp-shortcuts { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- dashboard */ .erp-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 1.75rem 1.75rem 1.5rem; color: var(--erp-ink); background: var(--erp-hero-grad); border: 1px solid var(--erp-border); box-shadow: var(--erp-shadow-sm); } .erp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(var(--erp-primary-rgb), .16) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(90deg, transparent 35%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); } .erp-hero > * { position: relative; z-index: 1; } .erp-hero h1 { font-family: var(--erp-font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; margin: 0; color: var(--erp-ink); } .erp-hero .erp-hero-sub { color: var(--erp-muted); } .erp-hero-stat { padding: .85rem 1rem; border-radius: 14px; background: var(--erp-glass); border: 1px solid var(--erp-border); box-shadow: var(--erp-shadow-sm); backdrop-filter: blur(6px); } .erp-hero-stat .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--erp-muted); font-weight: 600; } .erp-hero-stat .val { font-family: var(--erp-font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--erp-ink); } .erp-hero .btn-hero { background: var(--erp-primary); background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); color: var(--erp-on-primary); border: 0; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(var(--erp-primary-rgb), .9); } .erp-hero .btn-hero:hover { filter: brightness(1.06); color: var(--erp-on-primary); } .erp-hero .btn-hero-ghost { background: var(--erp-glass); color: var(--erp-ink); border: 1px solid var(--erp-border); } .erp-hero .btn-hero-ghost:hover { background: var(--erp-surface); color: var(--erp-ink); border-color: var(--erp-border-hover); } .erp-hero .btn-hero .erp-kbd { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .35); color: inherit; } .erp-kpi { position: relative; overflow: hidden; } .erp-kpi .card-body { padding: 1.15rem 1.25rem .5rem; } .erp-kpi-icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .erp-kpi-label { font-size: .75rem; font-weight: 600; color: var(--erp-muted); text-transform: uppercase; letter-spacing: .06em; } .erp-kpi-value { font-family: var(--erp-font-display); font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; color: var(--erp-ink); line-height: 1.15; } .erp-kpi-spark { margin: 0 -.25rem -.35rem; height: 48px; } .erp-tile { display: flex; align-items: center; gap: .85rem; padding: 1rem; border-radius: 14px; border: 1px solid var(--erp-border); background: var(--erp-surface); color: inherit; text-decoration: none !important; transition: all .18s; } .erp-tile:hover { border-color: var(--erp-tint-border); box-shadow: var(--erp-shadow); transform: translateY(-2px); } .erp-tile .erp-quick-icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; font-size: 1.3rem; } .erp-tile strong { display: block; font-weight: 650; color: var(--erp-ink); } .erp-tile small { color: var(--erp-muted); } .erp-stat-mini { padding: 1rem; border-radius: 12px; background: var(--erp-surface-2); border: 1px solid var(--erp-border); } .erp-stat-mini .val { font-family: var(--erp-font-display); font-size: 1.3rem; font-weight: 800; color: var(--erp-ink); letter-spacing: -.02em; } .erp-stat-mini .lbl { font-size: .75rem; color: var(--erp-muted); display: flex; align-items: center; gap: .35rem; } .erp-rank { width: 1.6rem; height: 1.6rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; background: var(--erp-surface-2); border: 1px solid var(--erp-border); color: var(--erp-muted); } .erp-rank-1 { background: var(--erp-grad); color: #fff; border-color: transparent; } /* ----------------------------------------------------- stat tiles (strips) */ .erp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; } .erp-stat { display: flex; align-items: center; gap: .9rem; min-width: 0; padding: 1rem 1.1rem; background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius); box-shadow: var(--erp-shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s; } .erp-stat:hover { transform: translateY(-1px); box-shadow: var(--erp-shadow); } .erp-stat-icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex: none; } .erp-stat-label { font-size: .7rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--erp-muted); } .erp-stat-value { font-family: var(--erp-font-display); font-size: 1.38rem; font-weight: 800; letter-spacing: -.02em; color: var(--erp-ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .erp-stat-hint { font-size: .75rem; color: var(--erp-muted); } .erp-stat-featured { position: relative; overflow: hidden; background: var(--erp-grad-soft), var(--erp-surface); border-color: var(--erp-tint-border); } .erp-stat-featured::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--erp-grad); } .erp-stat-featured .erp-stat-value { color: var(--erp-primary-strong); } [data-bs-theme="dark"] .erp-stat-featured .erp-stat-value { color: var(--erp-primary); } .erp-stat-featured .erp-stat-icon { background: var(--erp-grad) !important; color: #fff !important; box-shadow: 0 6px 14px -8px rgba(var(--erp-primary-rgb), .8); } /* ------------------------------------------- avatars, doc numbers, codes */ .erp-avatar { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 750; letter-spacing: .02em; flex: none; } .erp-avatar-lg { width: 3rem; height: 3rem; border-radius: 14px; font-size: 1rem; } .erp-doc-no { display: inline-flex; align-items: center; padding: .16rem .5rem; border-radius: 7px; background: var(--erp-tint); color: var(--erp-primary-strong); font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none !important; } [data-bs-theme="dark"] .erp-doc-no { color: var(--erp-primary); } a.erp-doc-no:hover { background: var(--erp-tint-strong); } .erp-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; padding: .12rem .45rem; border-radius: 6px; background: var(--erp-surface-2); border: 1px solid var(--erp-border); color: var(--erp-muted); white-space: nowrap; } .erp-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; margin-right: .4rem; background: currentColor; vertical-align: middle; } /* --------------------------------------------------- document header */ .erp-doc-head { overflow: hidden; position: relative; } .erp-doc-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--erp-grad); } .erp-doc-icon { width: 3.25rem; height: 3.25rem; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--erp-primary-strong); background: var(--erp-tint); border: 1px solid var(--erp-tint-border); flex: none; } [data-bs-theme="dark"] .erp-doc-icon { color: var(--erp-primary); } .erp-doc-type { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--erp-muted); } .erp-doc-number { font-family: var(--erp-font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--erp-ink); line-height: 1.15; } .erp-doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem 1.5rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--erp-border); } .erp-doc-meta .lbl { font-size: .68rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--erp-muted); margin-bottom: .15rem; } .erp-doc-meta .val { font-weight: 600; color: var(--erp-ink); } /* --------------------------------------------------- transaction entry */ .erp-summary { position: sticky; top: 5rem; } .erp-total-box { border-radius: 14px; padding: 1rem 1.15rem; background: var(--erp-grad-soft), var(--erp-surface); border: 1px solid var(--erp-tint-border); color: var(--erp-ink); } .erp-total-box .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--erp-muted); font-weight: 650; } .erp-total-box .val { font-family: var(--erp-font-display); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--erp-primary-strong); } [data-bs-theme="dark"] .erp-total-box .val { color: var(--erp-primary); } .erp-total-box .opacity-75 { color: var(--erp-muted); opacity: 1 !important; } .erp-sum-row { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; font-size: .875rem; } .erp-sum-row span:first-child { color: var(--erp-muted); } .erp-sum-row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; } .erp-product-search .form-control { height: 2.75rem; padding-left: 2.6rem; font-size: .95rem; border-radius: 12px; } .erp-product-search .input-icon-addon { width: 2.6rem; } .erp-product-search .erp-kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); pointer-events: none; } .erp-line-no { width: 1.6rem; height: 1.6rem; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; background: var(--erp-surface-2); color: var(--erp-muted); border: 1px solid var(--erp-border); } .erp-flash-row > td { animation: erp-flash 1s ease-out; } @keyframes erp-flash { from { background: rgba(var(--erp-primary-rgb), .16); } } .erp-hint { font-size: .75rem; color: var(--erp-muted); display: flex; flex-wrap: wrap; gap: .35rem .9rem; } .erp-hint span { display: inline-flex; align-items: center; gap: .3rem; } .erp-mode-banner { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: 12px; background: var(--erp-tint); border: 1px solid var(--erp-tint-border); color: var(--erp-primary-strong); font-size: .85rem; } [data-bs-theme="dark"] .erp-mode-banner { color: var(--erp-primary); } .erp-mode-banner i { font-size: 1.25rem; } .erp-progress-cell { min-width: 120px; } .erp-progress-cell .progress { height: 6px; } /* Profit & loss statement */ .erp-statement td { padding-top: .85rem !important; padding-bottom: .85rem !important; } .erp-statement .erp-st-sub td:first-child { padding-left: 2.25rem !important; color: var(--erp-muted); } .erp-statement .erp-st-total td { background: var(--erp-surface-2); font-weight: 700; color: var(--erp-ink); } .erp-statement .erp-st-grand td { background: var(--erp-tint); font-weight: 800; font-size: 1.05rem; color: var(--erp-ink); } .erp-ledger-opening > td { background: var(--erp-surface-2) !important; font-weight: 600; color: var(--erp-ink); } /* Permission picker */ .erp-perm { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem 1.25rem; border-top: 1px solid var(--erp-border); cursor: pointer; transition: background .12s; margin: 0; } .erp-perm:hover { background: rgba(var(--erp-primary-rgb), .045); } .erp-perm .form-check-input { margin-top: .2rem; flex: none; } .erp-perm small { display: block; color: var(--erp-muted); font-family: ui-monospace, monospace; font-size: .72rem; } /* Sticky save bar */ .erp-save-bar { position: sticky; bottom: 1rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--erp-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--erp-border); border-radius: 14px; box-shadow: var(--erp-shadow-lg); } /* ------------------------------------------ configuration option cards */ .erp-option { position: relative; display: block; height: 100%; margin: 0; cursor: pointer; } .erp-option input { position: absolute; opacity: 0; pointer-events: none; } .erp-option .erp-option-body { display: flex; gap: .75rem; height: 100%; padding: .9rem 1rem; border: 1px solid var(--erp-border-strong); border-radius: 12px; background: var(--erp-surface); transition: border-color .15s, box-shadow .15s, background .15s; } .erp-option:hover .erp-option-body { border-color: var(--erp-tint-border); } .erp-option input:checked + .erp-option-body { border-color: var(--erp-primary); background: var(--erp-tint); box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb), .12); } .erp-option input:focus-visible + .erp-option-body { box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb), .3); } .erp-option .erp-option-radio { width: 1.1rem; height: 1.1rem; margin-top: .1rem; border-radius: 50%; border: 2px solid var(--erp-border-strong); flex: none; transition: all .15s; } .erp-option input[type=checkbox] + .erp-option-body .erp-option-radio { border-radius: 5px; } .erp-option input:checked + .erp-option-body .erp-option-radio { border-color: var(--erp-primary); background: var(--erp-primary); box-shadow: inset 0 0 0 3px var(--erp-surface); } .erp-option strong { display: block; color: var(--erp-ink); font-weight: 650; font-size: .875rem; } .erp-option small { display: block; color: var(--erp-muted); font-size: .78rem; line-height: 1.4; margin-top: .15rem; } .erp-feature-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .erp-feature-head .erp-quick-icon { background: var(--erp-tint); color: var(--erp-primary-strong); } .erp-feature-head strong { color: var(--erp-ink); } /* ------------------------------------------------------ platform console */ .erp-platform-bar { position: sticky; top: 0; z-index: 1020; background: var(--erp-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--erp-border); } .erp-platform-bar .nav-link { color: var(--erp-muted); font-weight: 600; border-radius: 9px; padding: .45rem .8rem; } .erp-platform-bar .nav-link.active, .erp-platform-bar .nav-link:hover { color: var(--erp-primary-strong); background: var(--erp-tint); } [data-bs-theme="dark"] .erp-platform-bar .nav-link.active, [data-bs-theme="dark"] .erp-platform-bar .nav-link:hover { color: var(--erp-primary); } .erp-status { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 99px; font-size: .74rem; font-weight: 650; } .erp-status-active { background: #e6f6ef; color: #047857; } .erp-status-suspended { background: #fff3e6; color: #b45309; } .erp-status-provisioning { background: var(--erp-tint); color: var(--erp-primary-strong); } [data-bs-theme="dark"] .erp-status-active { background: rgba(16, 185, 129, .15); color: #6ee7b7; } [data-bs-theme="dark"] .erp-status-suspended { background: rgba(245, 158, 11, .15); color: #fcd34d; } /* ---------------------------------------------------------------- print */ @media print { :root, [data-bs-theme] { color-scheme: light; --erp-bg: #fff; --erp-surface: #fff; --erp-surface-2: #f7f7f5; --erp-glass: #fff; --erp-border: #e2e0da; --erp-border-strong: #d0cdc5; --erp-ink: #111; --erp-text: #333; --erp-muted: #666; --erp-primary: var(--acc); --erp-primary-strong: var(--acc-strong); --erp-primary-rgb: var(--acc-rgb); --tblr-body-bg: #fff; --tblr-bg-surface: #fff; --tblr-body-color: #333; } .erp-sidebar, .erp-topbar, .erp-platform-bar, .footer, .no-print { display: none !important; } .page-wrapper { margin-left: 0 !important; } .card { box-shadow: none; } body { background: #fff; } } /* ===================================================================== Entry forms — responsive on every screen size Totals / checkout panel sits beside the lines only when there's room (≥1500px); otherwise it follows the lines, laid out in two columns. ===================================================================== */ .row > .erp-form-main, .row > .erp-form-side { min-width: 0; } .erp-form-main { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 1500px) { .row > .erp-form-main { flex: 1 1 0; width: auto; } .row > .erp-form-side { flex: 0 0 340px; width: 340px; } } @media (max-width: 1499.98px) { .erp-summary { position: static; } } @media (min-width: 768px) and (max-width: 1499.98px) { .erp-summary .card-body { column-count: 2; column-gap: 2.5rem; } .erp-summary .card-body > * { break-inside: avoid; } .erp-summary .card-body > hr { display: none; } } .row > *, .card, .card-body { min-width: 0; } /* Number boxes: no tiny spinner arrows eating the space; values stay readable. */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } /* Line-entry tables: inputs never collapse below a usable width; the table scrolls sideways inside its card when needed. */ .erp-entry-table > :not(caption) > * > * { padding-left: .45rem; padding-right: .45rem; } .erp-entry-table > :not(caption) > * > *:first-child { padding-left: .9rem; } .erp-entry-table > thead > tr > th { width: auto !important; white-space: nowrap; } .erp-entry-table .form-select-sm, .erp-entry-table .form-select { min-width: 7.5rem; } .erp-entry-table input[type=number] { min-width: 5rem; } .erp-entry-table input[type=text], .erp-entry-table input[type=date] { min-width: 8rem; } .table-responsive { -webkit-overflow-scrolling: touch; } .table-responsive::-webkit-scrollbar { height: 10px; } .table-responsive::-webkit-scrollbar-thumb { background: var(--erp-border-strong, #cbd5e1); border-radius: 10px; } /* Step 2 of fitting a table (erp.js): tighter, optional columns and button labels hidden. */ .table.erp-compact > :not(caption) > * > * { padding-left: .5rem; padding-right: .5rem; } .table.erp-compact .erp-optional, .table.erp-compact .erp-btn-label { display: none !important; } .table.erp-compact .btn .ti.me-1 { margin-right: 0 !important; } .table.erp-stacked .erp-optional { display: block !important; } .table.erp-stacked .erp-btn-label { display: inline !important; } .table.erp-stacked .btn .ti.me-1 { margin-right: .25rem !important; } .table.erp-stacked:not(.erp-entry-table) tbody td.erp-cell-action { position: static; grid-column: 1 / -1; display: flex !important; justify-content: flex-end; } /* Not enough room for the columns (phone, tablet, small laptop with the sidebar open): every line becomes a card. erp.js adds .erp-stacked only when a table really doesn't fit its card, so wide screens keep the fast grid. Labels come from the column headers. */ .table.erp-stacked thead { display: none; } .table.erp-stacked, .table.erp-stacked tbody, .table.erp-stacked tfoot { display: block; width: 100%; } .table.erp-stacked tbody tr, .table.erp-stacked tfoot tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--erp-border); position: relative; } .table.erp-stacked tbody tr[style*="display: none"], .table.erp-stacked tfoot[style*="display: none"] { display: none !important; } .table.erp-stacked tbody td, .table.erp-stacked tfoot th, .table.erp-stacked tfoot td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; background: transparent !important; box-shadow: none !important; } .table.erp-stacked td[data-label]:not([data-label=""])::before, .table.erp-stacked tfoot th[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--erp-muted); } .table.erp-stacked .erp-cell-wide, .table.erp-stacked td[colspan] { grid-column: 1 / -1; padding-right: 2.75rem !important; } .table.erp-stacked td[colspan] { padding-right: 0 !important; } .table.erp-stacked .erp-cell-no { display: none !important; } .table.erp-stacked .erp-cell-action { position: absolute; top: .7rem; right: .6rem; } .table.erp-stacked tfoot th:empty, .table.erp-stacked tfoot td:empty { display: none !important; } .table.erp-stacked .form-control, .table.erp-stacked .form-select { width: 100%; min-width: 0 !important; height: 2.5rem; } .table.erp-stacked tbody tr:focus-within > td:first-child { box-shadow: none; } .table.erp-stacked tbody tr:focus-within { box-shadow: inset 3px 0 0 var(--erp-primary); } /* Phones */ @media (max-width: 767.98px) { /* Forms: comfortable touch targets, no iOS zoom-on-focus. */ .form-control, .form-select { font-size: 16px; } .page-header .btn-list { flex-wrap: wrap; } .erp-hint { display: none !important; } } /* Topbar never wider than the screen: the search box shrinks, and on phones becomes an icon. */ .erp-search-trigger { flex: 0 1 440px; min-width: 0; } @media (max-width: 575.98px) { .erp-topbar > .container-fluid { gap: .4rem; } .erp-search-trigger { flex: 0 0 2.5rem; width: 2.5rem; padding: 0; justify-content: center; } .erp-search-trigger span, .erp-search-trigger kbd { display: none !important; } .erp-topbar .erp-user-btn { padding: .2rem; } } @media (max-width: 575.98px) { .card-header { flex-wrap: wrap; gap: .5rem; } .card-header .card-actions { margin-left: 0; max-width: 100%; } .erp-segment { flex-wrap: wrap; } } /* Totals in the page header of entry forms (erp.js mirrors the checkout panel into it) whenever the checkout panel sits below the lines. Compact, one line, no extra height. */ .erp-totals-strip { display: none; } @media (max-width: 1499.98px) { .erp-totals-strip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem 1.25rem; padding: .4rem .9rem; border-radius: 12px; background: var(--erp-grad-soft), var(--erp-surface); border: 1px solid var(--erp-tint-border); } body.erp-has-totals .page-header .erp-hint { display: none !important; } .erp-summary.has-strip .erp-total-box, .erp-summary.has-strip .erp-sum-row { display: none !important; } } .erp-ts-main { display: flex; align-items: baseline; gap: .5rem; white-space: nowrap; } .erp-ts-main .lbl { font-size: .66rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--erp-muted); } .erp-ts-main .val { font-family: var(--erp-font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--erp-primary-strong); font-variant-numeric: tabular-nums; } [data-bs-theme="dark"] .erp-ts-main .val { color: var(--erp-primary); } .erp-ts-main .sub { font-size: .75rem; color: var(--erp-muted); } .erp-ts-items { display: flex; flex-wrap: wrap; gap: .25rem 1rem; } .erp-ts-items:empty { display: none; } .erp-ts-item { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; font-size: .8rem; } .erp-ts-item span { color: var(--erp-muted); } .erp-ts-item strong { font-weight: 650; color: var(--erp-ink); font-variant-numeric: tabular-nums; } @media (max-width: 767.98px) { .page-header .erp-totals-strip { width: 100%; } .erp-ts-main .sub { display: none; } } .erp-totals-strip.is-compact .erp-ts-items, .erp-totals-strip.is-compact .sub { display: none !important; } /* Interface language: scripts that need their own font (config/locales.php loads it) and the topbar switcher. */ html[lang="bn"] { --erp-font-display: 'Noto Sans Bengali', 'Plus Jakarta Sans', 'Inter', sans-serif; --tblr-font-sans-serif: 'Noto Sans Bengali', 'Inter', sans-serif; } html[lang="bn"] body { letter-spacing: 0; } html[lang="bn"] .page-title, html[lang="bn"] .auth-headline { letter-spacing: -.01em; } .erp-lang-btn .erp-lang-short { font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }