/* =========================================================================== TechMint — v2 dark theme (2026-07-19) · SANDBOX ONLY, do not ship to prod Master-designer dark UI in the spirit of Linear / Vercel / Stripe / Raycast: layered near-black neutrals (never flat #000), hairline borders, one luminous mint accent, generous rounding, restrained depth. A single override layer loaded LAST over CoreUI 2 + Bootstrap 5 (app) and MDB/Bootstrap (auth). Touches color/typography/radius/shadow/spacing only — no layout changes. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); :root { /* ---- Layered dark neutrals (cool, low-chroma) ---- */ --tm-canvas: #0d0f14; /* app background */ --tm-surface: #14171f; /* header, sidebar, footer */ --tm-card: #171b24; /* cards, tables, modals */ --tm-elev: #1d222d; /* inputs, hovers, elevated */ --tm-elev-2: #232935; /* active rows, popovers */ --tm-border: rgba(255,255,255,.07); --tm-border-strong: rgba(255,255,255,.13); --tm-text: #e8ebf1; /* primary text (not pure white) */ --tm-muted: #99a3b4; /* secondary */ --tm-faint: #626c7d; /* labels, placeholders */ /* ---- Brand green — EXACT TechMint logo green (#18A74A) ---- */ --tm-primary: #18a74a; /* sampled from the logo (rgb 24,167,74) */ --tm-primary-400: #22c95c; /* lighter — hover fills + accent text on dark */ --tm-primary-600: #12833a; /* darker — pressed */ --tm-primary-soft: rgba(24,167,74,.15); --tm-ring: rgba(24,167,74,.38); --tm-on-primary: #ffffff; /* text on a green fill */ --tm-danger: #f87171; --tm-warning: #fbbf24; --tm-info: #60a5fa; --tm-radius: 16px; /* cards, modals */ --tm-radius-md: 14px; /* tables */ --tm-radius-sm: 10px; /* buttons, inputs */ --tm-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 20px rgba(0,0,0,.35); --tm-shadow-md: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 40px rgba(0,0,0,.5); --tm-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color-scheme: dark; } /* ============================================================================ LIGHT MODE — activated by (header toggle; saved to localStorage). Default (no attr) stays the dark theme above, so existing users are unaffected. Mostly a CSS-variable flip; the rules below cover the handful of spots that hardcode dark-assuming values (white overlays, the near-white toggler icon, light labels) plus the white->black logo swap. ========================================================================== */ :root[data-theme="light"] { --tm-canvas: #f2f4f8; --tm-surface: #ffffff; --tm-card: #ffffff; --tm-elev: #eef1f5; --tm-elev-2: #e2e7ee; --tm-border: rgba(16,24,40,.10); --tm-border-strong: rgba(16,24,40,.17); --tm-text: #1a2233; --tm-muted: #57627a; --tm-faint: #8892a4; --tm-primary-400: #12833a; --tm-primary-soft: rgba(24,167,74,.12); --tm-ring: rgba(24,167,74,.30); --tm-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.07); --tm-shadow-md: 0 2px 8px rgba(16,24,40,.08), 0 16px 40px rgba(16,24,40,.14); color-scheme: light; } :root[data-theme="light"] label, :root[data-theme="light"] .col-form-label { color: #3a4457; } :root[data-theme="light"] .table thead th, :root[data-theme="light"] table.dataTable thead th { background: rgba(16,24,40,.035); } :root[data-theme="light"] .table-hover tbody tr:hover, :root[data-theme="light"] table.dataTable.hover tbody tr:hover { background: rgba(16,24,40,.04); } :root[data-theme="light"] table.dataTable { --dt-row-hover: rgba(16,24,40,.05); --dt-row-stripe: rgba(16,24,40,.022); } :root[data-theme="light"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(16,24,40,.022); } :root[data-theme="light"] .sidebar .nav-dropdown-items { background: rgba(16,24,40,.05); } :root[data-theme="light"] .sidebar-minimizer { background: rgba(16,24,40,.03) !important; } :root[data-theme="light"] .app-header .navbar-toggler img { filter: brightness(0) invert(0.18) !important; } :root[data-theme="light"] .app-header .navbar-toggler:hover img { filter: brightness(0) invert(0) !important; } :root[data-theme="light"] * { scrollbar-color: #c3cad6 transparent; } :root[data-theme="light"] *::-webkit-scrollbar-thumb { background: #c3cad6; background-clip: content-box; } :root[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: #aab3c2; background-clip: content-box; } :root[data-theme="light"] .alert-info { color: #1e40af; } :root[data-theme="light"] .alert-warning { color: #92600a; } :root[data-theme="light"] .alert-danger { color: #991b1b; } /* logo: hide the white logo, show the black one on the light header */ .navbar-brand .tm-logo-light { display: none; } :root[data-theme="light"] .navbar-brand-full.tm-logo-dark { display: none !important; } :root[data-theme="light"] .navbar-brand-full.tm-logo-light { display: inline-block; } /* header theme-toggle button */ #tm-theme-toggle { cursor: pointer; } #tm-theme-toggle i { font-size: 1.05rem; } /* ---- Typography -------------------------------------------------------- */ html, body, .app, .page-wrapper, input, select, textarea, button, .btn, .form-control, .nav, .navbar, table, .table, .select2-container, .dataTables_wrapper, .modal, .dropdown-menu { font-family: var(--tm-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { color: var(--tm-text); background: var(--tm-canvas) !important; letter-spacing: .1px; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.card-title { color: var(--tm-text); font-weight: 700; letter-spacing: -.3px; } a { color: var(--tm-primary); } a:hover { color: var(--tm-primary-400); } .text-muted { color: var(--tm-muted) !important; } .text-dark, .text-black, .text-body { color: var(--tm-text) !important; } /* Page/section titles used CoreUI's blue (.text-primary / .text-info). Nolan: simple black/white, high contrast — recolor them to clean near-white. Mint stays reserved for interactive accents (buttons, active nav, focus). */ .text-primary, .text-info { color: var(--tm-text) !important; } /* Some pages use blue fills as surfaces — neutralize to a dark card tone. */ .bg-primary, .bg-info { background-color: var(--tm-card) !important; color: var(--tm-text) !important; } /* .bg-secondary was a LIGHT gray panel (e.g. the asset "Display Unit" card) — make it a dark elevated surface so labels read with contrast. */ .bg-secondary { background-color: var(--tm-elev) !important; color: var(--tm-text) !important; } /* Bootstrap's default light hairline -> our subtle dark border. */ .border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--tm-border) !important; } /* Every green on the site -> the exact logo green (Nolan). */ .bg-success { background-color: var(--tm-primary) !important; color: var(--tm-on-primary) !important; } .text-success { color: var(--tm-primary-400) !important; } .badge-success { background: var(--tm-primary) !important; color: var(--tm-on-primary) !important; } .btn-outline-success { color: var(--tm-primary-400); border-color: var(--tm-border-strong); background: transparent; } .btn-outline-success:hover { background: var(--tm-primary-soft); border-color: var(--tm-primary); color: var(--tm-primary-400); } small, .small { color: var(--tm-muted); } hr { border-color: var(--tm-border); } /* Flip common light utility surfaces to dark */ .bg-white, .bg-light, .bg-body { background: var(--tm-card) !important; } /* ---- App shell: canvas + header + sidebar ------------------------------ */ .app, .app-body, .main, .c-app { background: var(--tm-canvas) !important; } .main .container-fluid, .container-fluid { background: transparent; } .app-header.navbar { background: var(--tm-surface) !important; border-bottom: 1px solid var(--tm-border) !important; box-shadow: none; } .app-header .navbar-brand, .app-header .navbar-brand:hover { color: var(--tm-text) !important; } .navbar-brand-full, .navbar-brand-minimized { font-weight: 900; letter-spacing: .4px; color: var(--tm-text); } .navbar-brand .text-white { color: var(--tm-primary) !important; } /* "TECH" -> mint */ .app-header .nav-link { color: var(--tm-muted) !important; } .app-header .nav-link:hover { color: var(--tm-text) !important; } /* Sidebar hamburger toggler: CoreUI absolutely-centers .navbar-brand by default, which collides with our wide horizontal logo behind the toggler icon. Pin the brand in normal flex flow (left, after the togglers) instead, and recolor the toggler icon off its baked-in CoreUI blue to match the theme (same muted-gray -> bright-on-hover treatment as the other header icons/links). */ body.header-fixed .app-header.navbar .navbar-brand { position: static !important; top: auto !important; left: auto !important; margin: 0 0 0 6px !important; transform: none !important; width: auto !important; justify-content: flex-start !important; } body.header-fixed .app-header.navbar { display: flex !important; align-items: center !important; } .app-header .navbar-toggler.mr-auto { margin-right: 0 !important; } .app-header .navbar-toggler { background: transparent !important; border: none !important; flex: 0 0 auto; } .app-header .navbar-toggler img { filter: brightness(0) invert(0.88); opacity: .85; transition: opacity .15s ease; } .app-header .navbar-toggler:hover img { opacity: 1; filter: brightness(0) invert(1); } .sidebar { background: var(--tm-surface) !important; border-right: 1px solid var(--tm-border); } /* Sidebar ~10% wider (CoreUI default 200px -> 220px) so 'Vendor Returns' fits one line. Must also shift the main content + header brand to match, and the hidden/off-canvas offset so the wider bar tucks fully away on mobile. */ .sidebar { width: 220px !important; } .sidebar .sidebar-nav, .sidebar .nav { width: 220px !important; } /* match sidebar so the scrollbar sits flush, no dead gap */ html:not([dir=rtl]) .sidebar { margin-left: -220px; } @media (min-width: 992px) { html:not([dir=rtl]) .sidebar-lg-show.sidebar-fixed .main, html:not([dir=rtl]) .sidebar-show.sidebar-fixed .main { margin-left: 220px !important; } } .sidebar .nav-link { color: var(--tm-muted) !important; border-radius: var(--tm-radius-sm); margin: 2px 12px; padding: 10px 14px; transition: background .16s ease, color .16s ease; } .sidebar .nav-link:hover { background: var(--tm-elev) !important; color: var(--tm-text) !important; } .sidebar .nav-link.active, .sidebar .nav-item.open > .nav-link { background: var(--tm-primary-soft) !important; color: var(--tm-primary-400) !important; box-shadow: inset 0 0 0 1px rgba(52,211,153,.22); } .sidebar .nav-link .nav-icon { color: inherit !important; } .sidebar .nav-dropdown-items { background: rgba(0,0,0,.18); border-radius: var(--tm-radius-sm); margin: 0 12px; } .sidebar .nav-dropdown-items .nav-link { padding-left: 26px; font-size: .9rem; margin: 1px 4px; } .sidebar-minimizer { background: rgba(255,255,255,.02) !important; } /* ---- Cards ------------------------------------------------------------- */ .card { background: var(--tm-card); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow); color: var(--tm-text); } .card-header { background: transparent; border-bottom: 1px solid var(--tm-border); font-weight: 600; letter-spacing: -.1px; color: var(--tm-text); padding: 1rem 1.25rem; border-radius: var(--tm-radius) var(--tm-radius) 0 0; } .card-body { padding: 1.25rem; } .card-footer { background: transparent; border-top: 1px solid var(--tm-border); } /* ---- Buttons ----------------------------------------------------------- */ .btn { border-radius: var(--tm-radius-sm); font-weight: 600; letter-spacing: .1px; padding: .5rem 1rem; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } .btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--tm-ring) !important; } .btn-primary, .btn-success { background: var(--tm-primary); border-color: var(--tm-primary); color: var(--tm-on-primary); } .btn-primary:hover, .btn-success:hover { background: var(--tm-primary-400); border-color: var(--tm-primary-400); color: var(--tm-on-primary); } .btn-outline-primary { color: var(--tm-primary); border-color: var(--tm-border-strong); background: transparent; } .btn-outline-primary:hover { background: var(--tm-primary-soft); border-color: var(--tm-primary); color: var(--tm-primary-400); } .btn-secondary, .btn-light, .btn-default { background: var(--tm-elev); border-color: var(--tm-border-strong); color: var(--tm-text); } .btn-secondary:hover, .btn-light:hover, .btn-default:hover { background: var(--tm-elev-2); border-color: var(--tm-border-strong); color: var(--tm-text); } .btn-danger { background: var(--tm-danger); border-color: var(--tm-danger); color: #1a0808; } /* Section-header secondary action buttons — dark-mode NEUTRAL (was orange). Subtle elevated fill + border so they read as buttons on the dark header without a bright accent; same .btn font (Manrope 600) as Update/Submit. */ .btn-tm-orange { background: var(--tm-elev) !important; border: 1px solid var(--tm-border-strong) !important; color: var(--tm-text) !important; font-weight: 500 !important; } .btn-tm-orange:hover { background: var(--tm-elev-2) !important; border-color: var(--tm-border-strong) !important; color: var(--tm-text) !important; } .btn-tm-orange:focus, .btn-tm-orange.focus { box-shadow: 0 0 0 3px var(--tm-ring) !important; } .btn-link { color: var(--tm-primary); } /* ---- Form controls ----------------------------------------------------- */ .form-control, .custom-select, textarea, select, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], .dataTables_filter input, .dataTables_length select { background: var(--tm-elev) !important; border: 1px solid var(--tm-border-strong) !important; border-radius: var(--tm-radius-sm) !important; color: var(--tm-text) !important; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } .form-control:focus, .custom-select:focus, textarea:focus, select:focus, .dataTables_filter input:focus { background: var(--tm-elev) !important; border-color: var(--tm-primary) !important; box-shadow: 0 0 0 3px var(--tm-ring) !important; color: var(--tm-text) !important; outline: none; } .form-control::placeholder, input::placeholder { color: var(--tm-faint) !important; } /* Brighter labels — muted gray was blending into panels (Nolan: better contrast). */ label, .col-form-label { color: #ccd3e0; font-weight: 500; } .input-group-text { background: var(--tm-elev-2); border-color: var(--tm-border-strong); color: var(--tm-muted); border-radius: var(--tm-radius-sm); } /* select2 */ .select2-container--default .select2-selection--single { background: var(--tm-elev) !important; border: 1px solid var(--tm-border-strong) !important; border-radius: var(--tm-radius-sm) !important; height: calc(1.5em + .8rem + 2px); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tm-text) !important; line-height: calc(1.5em + .8rem); } .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--tm-primary) !important; box-shadow: 0 0 0 3px var(--tm-ring); } .select2-dropdown { background: var(--tm-elev) !important; border: 1px solid var(--tm-border-strong) !important; border-radius: var(--tm-radius-sm); } .select2-results__option { color: var(--tm-text); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--tm-primary) !important; color: var(--tm-on-primary); } .select2-search__field { background: var(--tm-card) !important; color: var(--tm-text) !important; border-color: var(--tm-border-strong) !important; } /* ---- Tables (rounded corners) + DataTables ----------------------------- */ .table, table.dataTable { color: var(--tm-text); background: var(--tm-card); border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid var(--tm-border); border-radius: var(--tm-radius-md); overflow: hidden; } .table thead th, table.dataTable thead th { text-transform: uppercase; font-size: .7rem; letter-spacing: .7px; color: var(--tm-muted); font-weight: 600; background: rgba(255,255,255,.025); border-top: none !important; border-bottom: 1px solid var(--tm-border-strong) !important; } .table td, .table th, table.dataTable td, table.dataTable th { border-top: none !important; border-bottom: 1px solid var(--tm-border) !important; vertical-align: middle; } .table tbody tr:last-child td, table.dataTable tbody tr:last-child td { border-bottom: none !important; } /* round the four corner cells */ .table thead th:first-child, table.dataTable thead th:first-child { border-top-left-radius: var(--tm-radius-md); } .table thead th:last-child, table.dataTable thead th:last-child { border-top-right-radius: var(--tm-radius-md); } .table tbody tr:last-child td:first-child, table.dataTable tbody tr:last-child td:first-child { border-bottom-left-radius: var(--tm-radius-md); } .table tbody tr:last-child td:last-child, table.dataTable tbody tr:last-child td:last-child { border-bottom-right-radius: var(--tm-radius-md); } .table-hover tbody tr:hover, table.dataTable.hover tbody tr:hover { background: rgba(255,255,255,.028); } /* DataTables' default hover/stripe are DARK overlays (rgba(0,0,0,...)) that paint a near-black bar over the row on the dark theme + dim the text. Flip to light overlays so the row highlights but stays readable. */ table.dataTable { --dt-row-hover: rgba(255,255,255,.06); --dt-row-stripe: rgba(255,255,255,.02); --dt-row-selected: 24,167,74; --dt-row-selected-text: 255,255,255; } table.dataTable > tbody > tr:hover > *, table.dataTable.hover > tbody > tr:hover > *, .table-hover tbody tr:hover td { color: var(--tm-text) !important; } .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.015); } .dataTables_wrapper { color: var(--tm-muted); } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--tm-muted); } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--tm-radius-sm) !important; border: 1px solid var(--tm-border) !important; color: var(--tm-muted) !important; background: transparent !important; padding: .3em .85em; margin: 0 2px; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--tm-primary) !important; border-color: var(--tm-primary) !important; color: var(--tm-on-primary) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--tm-primary-soft) !important; border-color: var(--tm-border-strong) !important; color: var(--tm-primary-400) !important; } /* ---- Badges, alerts, dropdowns, modals, misc -------------------------- */ .badge { border-radius: 7px; font-weight: 600; letter-spacing: .2px; padding: .38em .62em; } .badge-primary, .badge-success { background: var(--tm-primary); color: var(--tm-on-primary); } .badge-secondary { background: var(--tm-elev-2); color: var(--tm-muted); } .alert { border-radius: var(--tm-radius-sm); border: 1px solid transparent; } .alert-info { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.28); color: #bfdbfe; } .alert-success { background: var(--tm-primary-soft); border-color: rgba(52,211,153,.3); color: var(--tm-primary-400); } .alert-warning { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.28); color: #fde68a; } .alert-danger { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.28); color: #fecaca; } .modal-content { background: var(--tm-card); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow-md); color: var(--tm-text); } .modal-header, .modal-footer { border-color: var(--tm-border); } .close, .btn-close { color: var(--tm-text); text-shadow: none; opacity: .7; } .close:hover { color: var(--tm-text); opacity: 1; } .dropdown-menu { background: var(--tm-elev); border: 1px solid var(--tm-border-strong); border-radius: var(--tm-radius-sm); box-shadow: var(--tm-shadow-md); padding: 6px; } .dropdown-item { border-radius: 7px; padding: .5rem .75rem; color: var(--tm-text); } .dropdown-item:hover { background: var(--tm-primary-soft); color: var(--tm-primary-400); } .dropdown-divider { border-color: var(--tm-border); } .list-group-item { background: var(--tm-card); border-color: var(--tm-border); color: var(--tm-text); } .breadcrumb { background: transparent; padding-left: 0; } .breadcrumb-item, .breadcrumb-item a { color: var(--tm-muted); } .app-footer { background: var(--tm-surface); border-top: 1px solid var(--tm-border); color: var(--tm-muted); } .nav-tabs { border-bottom: 1px solid var(--tm-border); } .nav-tabs .nav-link { color: var(--tm-muted); border: none; } .nav-tabs .nav-link.active { color: var(--tm-primary-400); background: transparent; border-bottom: 2px solid var(--tm-primary); } /* ---- Subtle modern scrollbars ----------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: #2c333f transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #2c333f; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #3a4250; background-clip: content-box; } /* ---- Auth / login (prod shows this; SSO fronts it on sandbox) ---------- */ .page-wrapper.chiller-theme, body.auth-page { background: var(--tm-canvas); } .page-content .card { background: var(--tm-card); box-shadow: var(--tm-shadow-md); border-radius: var(--tm-radius); }