/* ===================================================================== Tappy Admin — Light / Dark theme layer --------------------------------------------------------------------- Mirrors the Tappy Client theme system: • toggled via data-theme="dark" on • light values in :root, dark values in [data-theme="dark"] • reuses the Client's --tap-* semantic variables (aligned values) • exposes --admin-* semantic aliases for Admin-specific usage • overrides Metronic/Bootstrap --bs-* variables in dark so the compiled style.bundle.css components flip without editing it Loaded AFTER style.bundle.css and admin-aside.css. ===================================================================== */ /* --------------------------------------------------------------------- LIGHT (default) — semantic aliases. The concrete --tap-* light values already live in admin-aside.css / the Client palette; here we only add the --admin-* semantic layer so pages can theme against stable names. --------------------------------------------------------------------- */ :root { color-scheme: light; /* native scrollbars / form controls follow the theme */ /* Match the Client: Inter everywhere (overrides Metronic's Poppins) */ --bs-font-sans-serif: 'Inter', sans-serif; --admin-bg: #ffffff; /* page backdrop (--tap-bg-accent) */ --admin-surface: #ffffff; /* cards / panels / windows (--tap-bg) */ --admin-surface-secondary: #f5f8fa; --admin-border: #e6ebf2; --admin-text-primary: #1b254b; /* (--tap-body-text) */ --admin-text-secondary: #5a6a85; --admin-muted: #8a94a6; --admin-icon: #5a6a85; --admin-hover: rgba(0, 120, 255, .08); --admin-accent: #0078ff; /* (--tap-blue) */ --admin-input-bg: #ffffff; --admin-scrollbar: rgba(16, 42, 90, .18); --admin-scrollbar-hover: rgba(16, 42, 90, .38); --admin-scrollbar-active: rgba(16, 42, 90, .55); --admin-loader-overlay: rgba(255, 255, 255, .8); /* section-loader backdrop */ /* Client variable — soft inset "glow" (light) */ --tap-inputfield-focus-box-shadow: inset 0px 0px 10px #ddf0ff; /* Client button gradient + shadow (light) */ --tap-gradibutts-before-background: linear-gradient(170deg, #ffffff, #e0f4ff); --tap-gradibutts-before-box-shadow: 1px 1px 10px #e5f0ff; /* Brand tokens — mirrored here so pages that don't load admin-aside.css (Login, ForgotPassword, ChangePassword, AgencySignUp) still resolve them */ --tap-blue: #0078ff; --tap-grad: linear-gradient(28deg, #0078ff, #0097ff, #00a5ff, #00cdff); } /* --------------------------------------------------------------------- DARK --------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; /* dark native scrollbars & form controls */ /* Admin semantic tokens */ --admin-bg: #000616; --admin-surface: #0c1f3d; --admin-surface-secondary: #12294f; --admin-border: #1e3557; --admin-text-primary: #e7eef7; --admin-text-secondary: #9db0c9; --admin-muted: #7d8ba3; --admin-icon: #b7c4d6; --admin-hover: rgba(255, 255, 255, .06); --admin-accent: #2f9bff; --admin-input-bg: #12294f; --admin-scrollbar: rgba(120, 140, 175, .28); --admin-scrollbar-hover: rgba(150, 170, 205, .5); --admin-scrollbar-active: rgba(175, 195, 230, .68); --admin-loader-overlay: rgba(0, 6, 22, .8); /* section-loader backdrop */ /* Client variable — soft inset "glow" (dark) */ --tap-inputfield-focus-box-shadow: inset 0px 0px 8px #07182d; /* Client button gradient + shadow (dark) */ --tap-gradibutts-before-background: linear-gradient(145deg, #000319, #20536f); --tap-gradibutts-before-box-shadow: 0px 0px 12px #07182d; /* Reused Client (--tap-*) tokens — dark values (also used by the sidebar) */ --tap-bg: var(--admin-surface); --tap-bg-accent: var(--admin-bg); --tap-body-text: var(--admin-text-primary); --tap-ink: var(--admin-text-primary); --tap-ink-soft: var(--admin-icon); --tap-muted: var(--admin-text-secondary); --tap-nav-text: #ffffff; /* nav labels — full white in dark */ --tap-divider: rgba(255, 255, 255, .08); --tap-hover-bg: rgba(47, 155, 255, .14); --tap-active-bg: rgba(47, 155, 255, .20); --tap-glass-bg: rgba(18, 41, 79, .55); --tap-glass-border-color: rgba(255, 255, 255, .12); --tap-avatar-border-color: rgba(255, 255, 255, .16); --tap-avatar-shadow: 0 2px 8px rgba(0, 0, 0, .35); /* Metronic / Bootstrap variable overrides — flips most components */ --bs-body-bg: var(--admin-bg); --bs-body-color: var(--admin-text-primary); --bs-border-color: var(--admin-border); --bs-secondary-bg: var(--admin-surface-secondary); --bs-tertiary-bg: var(--admin-surface-secondary); --bs-light: var(--admin-surface-secondary); --bs-gray-100: var(--admin-surface-secondary); --bs-gray-200: #16305a; --bs-gray-300: #1e3557; --bs-heading-color: var(--admin-text-primary); } /* --------------------------------------------------------------------- DARK — component patches for Metronic rules that hardcode light colours (style.bundle.css uses many literal hex values, not variables). --------------------------------------------------------------------- */ [data-theme="dark"] body { background-color: var(--admin-bg) !important; color: var(--admin-text-primary); } /* Overlays: dropdowns, modals, menus, popovers — keep a lighter surface so they stand out above the page */ [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .menu-sub-dropdown, [data-theme="dark"] .offcanvas, [data-theme="dark"] .popover { background-color: var(--admin-surface) !important; color: var(--admin-text-primary); border-color: var(--admin-border) !important; } /* Cards / panels — background = page colour with an inset depth shadow (matches the Client's dark card treatment) */ [data-theme="dark"] .card, [data-theme="dark"] .block-card, [data-theme="dark"] .chart-container-card, [data-theme="dark"] .vertical-period-card, [data-theme="dark"] .summary-card { background: var(--admin-bg) !important; color: var(--admin-text-primary); border-color: var(--admin-border) !important; box-shadow: var(--tap-inputfield-focus-box-shadow) !important; } /* Cards that contain a table (list-page containers) keep the flat surface without the inset depth shadow */ [data-theme="dark"] .card:has(table) { box-shadow: none !important; } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--admin-border) !important; } /* Text colour utilities */ [data-theme="dark"] .text-dark, [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-body { color: var(--admin-text-primary) !important; } [data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-gray-500 { color: var(--admin-text-secondary) !important; } [data-theme="dark"] .text-muted, [data-theme="dark"] .text-gray-400 { color: var(--admin-muted) !important; } /* Background utilities */ [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-body { background-color: var(--admin-surface) !important; } [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-gray-100, [data-theme="dark"] .bg-gray-200 { background-color: var(--admin-surface-secondary) !important; } /* Tables */ [data-theme="dark"] .table { --bs-table-color: var(--admin-text-primary); --bs-table-bg: transparent; --bs-table-border-color: var(--admin-border); --bs-table-striped-color: var(--admin-text-primary); --bs-table-striped-bg: rgba(255, 255, 255, .03); color: var(--admin-text-primary); border-color: var(--admin-border); } [data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--admin-border); } [data-theme="dark"] .table-row-dashed tr { border-bottom-color: var(--admin-border) !important; } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .form-control-solid, [data-theme="dark"] .form-select-solid { background-color: var(--admin-input-bg) !important; color: var(--admin-text-primary) !important; border-color: var(--admin-border) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--admin-muted); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { border-color: var(--admin-accent) !important; box-shadow: 0 0 0 .2rem rgba(47, 155, 255, .18); } /* Browser autofill — Chrome/Edge paint a fixed background over autofilled inputs, which ignores the themed input colour and makes filled fields look different from empty ones. Force the theme's input background + text colour. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, select:-webkit-autofill, textarea:-webkit-autofill { -webkit-text-fill-color: var(--admin-text-primary) !important; -webkit-box-shadow: 0 0 0 1000px var(--admin-input-bg) inset !important; box-shadow: 0 0 0 1000px var(--admin-input-bg) inset !important; caret-color: var(--admin-text-primary); transition: background-color 9999s ease-in-out 0s; } /* Form labels — override the bundle's hardcoded #3f4254 so they follow the theme */ .col-form-label, .form-label { color: var(--admin-text-primary); } /* Separators / dividers / borders */ [data-theme="dark"] .separator, [data-theme="dark"] hr { border-color: var(--admin-border) !important; color: var(--admin-border) !important; } /* Pagination */ [data-theme="dark"] .page-link { background-color: var(--admin-surface) !important; color: var(--admin-text-primary) !important; border-color: var(--admin-border) !important; } [data-theme="dark"] .page-item.disabled .page-link { color: var(--admin-muted) !important; } [data-theme="dark"] .page-item.active .page-link { background-color: var(--admin-accent) !important; border-color: var(--admin-accent) !important; color: #fff !important; } /* Menu / nav hover states (Metronic menus outside the aside) */ [data-theme="dark"] .menu-state-bg .menu-item .menu-link.active, [data-theme="dark"] .menu-state-bg .menu-item .menu-link:hover { background-color: var(--admin-hover) !important; } /* --------------------------------------------------------------------- Scrollbars — consistent across every page, driven by theme variables so they work in both light and dark, with hover / active states. --------------------------------------------------------------------- */ html { scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--admin-scrollbar) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--admin-scrollbar); border-radius: 8px; transition: background .15s ease; } ::-webkit-scrollbar-thumb:hover { background: var(--admin-scrollbar-hover); } ::-webkit-scrollbar-thumb:active { background: var(--admin-scrollbar-active); } /* Inputs' autofill + select2 (used across filters) */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-dropdown { background-color: var(--admin-input-bg) !important; border-color: var(--admin-border) !important; color: var(--admin-text-primary) !important; } [data-theme="dark"] .select2-results__option { color: var(--admin-text-primary); } /* --------------------------------------------------------------------- Theme toggle button (sidebar user card) --------------------------------------------------------------------- */ .admin-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; padding: 0; flex: 0 0 34px; transition: background-color 160ms ease, transform 160ms ease; } .admin-theme-toggle:hover { background: var(--admin-hover); } .admin-theme-toggle:active { transform: scale(.92); } .admin-theme-toggle:focus-visible { outline: 2px solid var(--admin-accent); outline-offset: 2px; } .admin-theme-toggle img { width: 24px; height: 24px; object-fit: contain; transition: opacity 220ms ease, transform 220ms ease; } /* --------------------------------------------------------------------- Login / Sign-up (standalone, AdminLTE) — match the admin card styling (background, inset-glow shadow, border, radius) in BOTH themes. --------------------------------------------------------------------- */ .login-page, .register-page { background-color: var(--admin-bg) !important; } /* The .login-box is the solid card (bg + border + inset glow). The inner card/header/body are transparent so the glow shows through on ALL sides instead of only the corners. */ .login-box, .register-box { background: var(--admin-bg); border-color: var(--admin-border) !important; border-radius: 12px; box-shadow: var(--tap-inputfield-focus-box-shadow) !important; overflow: hidden; } .login-box .card, .register-box .card { background: transparent !important; color: var(--admin-text-primary); border: 0 !important; box-shadow: none !important; } .login-box .card-header, .register-box .card-header { background: transparent !important; /* was inline black — let the glow show */ border-bottom: 0; } .login-box .card-body, .register-box .card-body { background: transparent !important; } .login-box .login-box-msg, .register-box .register-box-msg { color: var(--admin-text-secondary); } .login-box .input-group-text, .register-box .input-group-text { background: var(--admin-surface-secondary); border: 1px solid var(--admin-border); color: var(--admin-text-secondary); } .login-box .form-control, .register-box .form-control { background: var(--admin-input-bg); border: 1px solid var(--admin-border); color: var(--admin-text-primary); } /* Client-style solid-blue buttons (matches Tappy Client's .button.button-primary) — used for Forgot Password / Agency Sign Up on the login page */ .login-box .btn.client-btn, .register-box .btn.client-btn { width: 100%; padding: 12px 10px 10px 10px; border: 0; border-radius: 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: #ffffff !important; background: var(--tap-blue) !important; box-shadow: inset 3px 3px 6px #4779ff, inset -3px -3px 6px #0091dc !important; transition: all 0.25s ease; } .login-box .btn.client-btn:hover, .login-box .btn.client-btn:focus, .login-box .btn.client-btn:active, .register-box .btn.client-btn:hover, .register-box .btn.client-btn:focus, .register-box .btn.client-btn:active { background: #0d6efd !important; color: #ffffff !important; } [data-theme="dark"] .login-page, [data-theme="dark"] .register-page { background-color: var(--admin-bg) !important; } [data-theme="dark"] .login-box .card, [data-theme="dark"] .register-box .card { background: transparent !important; /* keep transparent so the box's inset glow shows */ color: var(--admin-text-primary); } [data-theme="dark"] .login-box .card .login-box-msg, [data-theme="dark"] .login-box .card label, [data-theme="dark"] .register-box .card .register-box-msg, [data-theme="dark"] .register-box .card label { color: var(--admin-text-secondary) !important; } [data-theme="dark"] .login-box .input-group-text, [data-theme="dark"] .register-box .input-group-text { background: var(--admin-surface-secondary) !important; border-color: var(--admin-border) !important; color: var(--admin-text-secondary) !important; } /* Form fields inside the AdminLTE auth cards follow the theme */ [data-theme="dark"] .login-box .form-control, [data-theme="dark"] .register-box .form-control { background: var(--admin-input-bg) !important; border-color: var(--admin-border) !important; color: var(--admin-text-primary) !important; } /* The login "Sign in" button uses AdminLTE's base .btn (different radius, padding, size and full-width .btn-block). Match the Metronic btn-primary buttons (e.g. "Add Inventory") used across the rest of the admin exactly. */ .login-page .btn.btn-primary, .login-page .btn.btn-primary.btn-block, .register-page .btn.btn-primary, .register-page .btn.btn-primary.btn-block { display: inline-block !important; width: auto !important; /* not full-width like btn-block */ white-space: nowrap !important; /* keep "Sign in" on one line */ border-radius: 0.475rem !important; /* Metronic default .btn radius */ padding: 0.775rem 1.5rem !important; /* Metronic default .btn padding */ font-family: 'Inter', sans-serif !important; font-size: 1.1rem !important; /* Metronic default .btn font-size */ font-weight: 500 !important; /* Metronic default .btn weight */ line-height: 1.5 !important; text-align: center; /* Rest state — same as the app's btn-primary (blue text on the soft gradient); defined explicitly in case AdminLTE tries to override. */ background: var(--tap-gradibutts-before-background) !important; color: var(--tap-blue) !important; border: 0 !important; box-shadow: var(--tap-gradibutts-before-box-shadow) !important; } /* Hover/focus/active — brand-blue gradient with white text, like the app */ .login-page .btn.btn-primary:hover, .login-page .btn.btn-primary:focus, .login-page .btn.btn-primary:active, .register-page .btn.btn-primary:hover, .register-page .btn.btn-primary:focus, .register-page .btn.btn-primary:active { background: var(--tap-grad) !important; color: #ffffff !important; box-shadow: var(--tap-gradibutts-before-box-shadow) !important; } /* --------------------------------------------------------------------- Buttons — Client-style, theme-driven (variables switch per theme, so they work in both light and dark). Not theme-scoped. --------------------------------------------------------------------- */ .btn.btn-primary { background: var(--tap-gradibutts-before-background) !important; color: var(--tap-blue) !important; border: 0 !important; box-shadow: var(--tap-gradibutts-before-box-shadow) !important; transition: transform .15s ease, box-shadow .15s ease, background .1s ease, color .1s ease; } .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active, .btn-check:checked + .btn.btn-primary { background: var(--tap-grad) !important; /* brand blue gradient */ color: #ffffff !important; box-shadow: var(--tap-gradibutts-before-box-shadow) !important; } /* Icons inside btn-primary follow the button's text color (blue at rest, white on hover) — matches "Sign in" text and the other buttons. */ .btn.btn-primary i, .btn.btn-primary .fa, .btn.btn-primary .fas, .btn.btn-primary .far, .btn.btn-primary [class*="fa-"], .btn.btn-primary .svg-icon { color: inherit !important; } .btn.btn-primary .svg-icon svg [fill]:not([fill="none"]) { fill: currentColor !important; } .btn.btn-secondary { background: var(--admin-surface-secondary) !important; color: var(--admin-text-primary) !important; border: 1px solid var(--admin-border) !important; box-shadow: none !important; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn.btn-secondary:hover, .btn.btn-secondary:focus, .btn.btn-secondary:active { background: var(--admin-hover) !important; color: var(--admin-text-primary) !important; border-color: var(--admin-border) !important; } /* --------------------------------------------------------------------- DARK — Quill rich-text editor (Alerts) + checkboxes --------------------------------------------------------------------- */ [data-theme="dark"] #quill-editor, [data-theme="dark"] .ql-container, [data-theme="dark"] .ql-editor { background: var(--admin-input-bg) !important; color: var(--admin-text-primary) !important; } [data-theme="dark"] .ql-editor.ql-blank::before { color: var(--admin-muted) !important; } [data-theme="dark"] .ql-toolbar { background: var(--admin-surface-secondary) !important; border-color: var(--admin-border) !important; } [data-theme="dark"] .ql-container, [data-theme="dark"] .ql-toolbar { border-color: var(--admin-border) !important; } [data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--admin-icon) !important; } [data-theme="dark"] .ql-snow .ql-fill { fill: var(--admin-icon) !important; } [data-theme="dark"] .ql-snow .ql-picker { color: var(--admin-text-secondary) !important; } [data-theme="dark"] .ql-snow .ql-picker-options { background: var(--admin-surface) !important; border-color: var(--admin-border) !important; } /* Checkboxes / radios — dark surface when unchecked, accent when checked (matches the Client's blue-accent controls) */ [data-theme="dark"] .form-check-input { background-color: var(--admin-input-bg) !important; border-color: var(--admin-border) !important; } [data-theme="dark"] .form-check-input:checked { background-color: var(--admin-accent) !important; border-color: var(--admin-accent) !important; } [data-theme="dark"] .form-check-input:focus { border-color: var(--admin-accent) !important; box-shadow: 0 0 0 .2rem rgba(47, 155, 255, .18) !important; } /* --------------------------------------------------------------------- Typography — Inter across the whole Admin (same as the Client). Overrides Metronic's hardcoded `body, html { font-family: Poppins }`. --------------------------------------------------------------------- */ body, html { font-family: 'Inter', sans-serif !important; }