/* * ERP cosmetic re-theme — override layer (ClickUp-inspired). * See docs/task-plans/ERP-THEME-BRIEF.md + ERP-THEME-P1-FONT-NAV.md. * * Phase 1 scope: (1) body font -> Inter + kill text shadows, * (2) flatten the left nav (single #202020 tone, brand-purple active). * * CSS-only, additive. Loaded AFTER the SmartAdmin theme via a dedicated * stylesheet_link_tag in application.html.erb, and gated by ENV['ERP_RETHEME'] * (set ERP_RETHEME=off + restart to fully revert — no code change). * * Do NOT add font-family rules that touch .fa / FontAwesome / .glyphicon * selectors — icons carry their own icon font and must keep it. * * Brand and semantic colours come from --erp-* custom properties defined in * config/tailwind.config.js and emitted into :root by tailwind.css, which the * layout links unconditionally and ahead of this file. Change a colour there, * not here, and re-run `rails tailwindcss:build`. The slate greys below are * stock Tailwind values used only by this file, so they stay as literals. */ /* Design tokens * ink var(--erp-ink) (primary text / ClickUp near-black, also nav base) * brand purple var(--erp-brand-500) (links, active nav, accents) * nav submenu #1a1a1a * nav link #9a9fa8 hover/active text #ffffff */ /* Inter variable font — self-hosted, copied from application.tailwind.css so this layer is self-contained (doesn't depend on Tailwind being present). */ @font-face { font-family: "Inter var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/Inter-roman.latin.var.woff2) format("woff2"); } @font-face { font-family: "Inter var"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/Inter-italic.latin.var.woff2) format("woff2"); } /* ===================================================================== * ITEM 1 — Body font -> Inter; kill SmartAdmin font stack + text shadows * ===================================================================== */ body { font-family: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Elements that declare their own (Open Sans / Trebuchet / Arial) font stack — nav text and most content inherit from so they're not listed here. Form controls are listed because browsers reset their font to the OS default. */ h1, h2, h3, h4, h5, h6, .page-title, .page-title span, .menu-item-parent, button, input, select, textarea, .btn, .form-control { font-family: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important; } /* Kill SmartAdmin's 1px bevel text-shadows (the "2013" embossed look). Scoped broadly across the chrome; text-shadow is purely cosmetic. */ body, h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, label, .btn, button, input, select, textarea, #header, #header *, nav, nav *, .ribbon, .breadcrumb, .breadcrumb *, .page-title, .page-title * { text-shadow: none !important; } /* ===================================================================== * ITEM 2 — Left nav: flatten to a single dark tone (var(--erp-ink)), * brand-purple active state, remove gradient/bevel. * Rules are prefixed with #left-panel to outrank SmartAdmin's * `nav ... !important` base declarations. * ===================================================================== */ /* Flat panel — drop the left->right gradient + data-URL texture + shadow */ aside, #left-panel { background: var(--erp-ink) !important; box-shadow: none !important; } /* Nav links: muted slate, flat, no inset bevels */ #left-panel nav ul li a { color: #9a9fa8 !important; text-shadow: none !important; box-shadow: none !important; border-radius: 0 !important; } /* Hover / focus: brighten + faint flat wash (no gradient) */ #left-panel nav ul li a:hover, #left-panel nav ul li a:focus { color: #ffffff !important; background: rgba(255, 255, 255, 0.05) !important; } /* Active / selected item: brand-purple accent bar + tinted wash + light text */ #left-panel nav ul .active > a, #left-panel nav ul li.active > a { color: #ffffff !important; background: rgba(123, 104, 238, 0.16) !important; box-shadow: inset 3px 0 0 var(--erp-brand-500) !important; } /* Retire the FontAwesome caret indicator on the active row (flatter look) */ #left-panel nav ul li.active > a:before, #left-panel nav ul li.active.open > a:before { display: none !important; } /* :active (mouse-down) shouldn't flash the old highlight colour */ #left-panel nav ul li a:active { background: rgba(123, 104, 238, 0.16) !important; } /* Nested/opened submenus: flat, SAME tone as the panel so they blend (SmartAdmin default was a translucent grey that didn't match). */ #left-panel nav ul ul { background: var(--erp-ink) !important; } #left-panel nav ul ul li > a:hover { background: rgba(255, 255, 255, 0.05) !important; } #left-panel nav > ul > li > ul::before, #left-panel nav > ul > li > ul > li::before { border-color: transparent !important; } /* Minified (icon-rail) nav flyout. SmartAdmin paints the flyout background on the LI rather than the UL (`rgba(69,69,69,.9)`), so the UL rule above can't reach it — that's the grey panel. It also uses a light #ccc border and a whitesmoke hover label, both of which clash with the dark rail. */ .minified #left-panel nav > ul > li > ul, .minified #left-panel nav > ul > li > ul > li, .minified #left-panel nav > ul > li > ul > li > ul > li { background-color: var(--erp-ink) !important; } .minified #left-panel nav > ul > li > ul, .minified #left-panel nav > ul > li > a > .menu-item-parent { border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; } /* Hover label beside the icon: dark chip instead of the whitesmoke box */ .minified #left-panel nav > ul > li > a > .menu-item-parent { background-color: var(--erp-ink) !important; color: #ffffff !important; } /* Flat rail: drop the light 1px separators between icon rows */ .minified #left-panel nav > ul > li { border-top-color: transparent !important; border-bottom-color: transparent !important; } /* Login-info block (avatar/name at the top of the nav) — keep legible on var(--erp-ink) */ #left-panel .login-info a, #left-panel .login-info a span, #left-panel .login-info strong { color: #e6e6e6 !important; } /* ===================================================================== * ITEM 3 — Buttons: flat, consistent 8px radius, ClickUp palette. * Matches the in-app "New Ticket" reference (var(--erp-ink), r8, weight 500). * NOTE: radius is intentionally NOT !important so Bootstrap's * higher-specificity `.btn-group`/`.input-group` rules keep grouped * buttons joined (only the flatten props use !important). * ===================================================================== */ .btn { border-radius: 8px; background-image: none !important; text-shadow: none !important; box-shadow: none !important; font-weight: 500; } .btn:active, .btn.active, .btn:focus, .btn:active:focus { box-shadow: none !important; outline: 0 !important; } /* primary -> ink solid */ .btn-primary { background-color: var(--erp-ink) !important; border-color: var(--erp-ink) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-color: #383838 !important; border-color: #383838 !important; color: #fff !important; } /* danger -> cu-red */ .btn-danger { background-color: var(--erp-red) !important; border-color: var(--erp-red) !important; color: #fff !important; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background-color: var(--erp-red-text) !important; border-color: var(--erp-red-text) !important; color: #fff !important; } /* default -> ghost secondary (white, slate border, ink text) */ .btn-default { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: var(--erp-ink) !important; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; color: var(--erp-ink) !important; } /* success -> emerald (brief: keep the emerald family); warning -> cu-yellow (ink text) */ .btn-success { background-color: #10b981 !important; border-color: #10b981 !important; color: #fff !important; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active { background-color: #059669 !important; border-color: #059669 !important; color: #fff !important; } .btn-warning { background-color: var(--erp-yellow) !important; border-color: var(--erp-yellow) !important; color: var(--erp-ink) !important; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active { background-color: #f5b400 !important; border-color: #f5b400 !important; color: var(--erp-ink) !important; } .btn-info { background-color: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fff !important; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background-color: #0284c7 !important; border-color: #0284c7 !important; color: #fff !important; } /* ===================================================================== * ITEM 4 — Ribbon / breadcrumb / page headers: flatten (kept dark). * The ribbon stays DARK for contrast against the light content and so * the (white) order-search box is visible — just flattened to a single * var(--erp-ink) tone (cohesive with the nav), gradient/shadow removed. * ===================================================================== */ #ribbon { background: var(--erp-ink) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } /* Breadcrumb: muted light, current crumb white */ #ribbon .breadcrumb, #ribbon .breadcrumb a { color: #9a9fa8 !important; } #ribbon .breadcrumb > .active, #ribbon .breadcrumb li:last-child { color: #ffffff !important; } /* Refresh button + search controls on the dark ribbon */ #ribbon #refresh, #ribbon #refresh i, #ribbon .btn-ribbon { color: #9a9fa8 !important; background: transparent !important; } #ribbon .header-search > input[type="text"] { border-color: rgba(255, 255, 255, 0.15) !important; border-radius: 8px !important; } #ribbon .header-search > button { color: #9a9fa8 !important; } /* Page title (in the light content area) -> ink */ .page-title span { color: var(--erp-ink) !important; } /* ===================================================================== * ITEM 5 — Tables (DataTables & Bootstrap tables OUTSIDE the tickets * module): slate borders, uppercase slate headers, zebra removal, row * hover, ClickUp density. * * Anchored on `#content:not(:has(.internal-tickets))` so the Internal * Tickets module is never touched: its content wrapper is * `.internal-tickets`, and the always-on ticket widget lives OUTSIDE * `#content` (so it can't disable these rules on other pages). If a * browser lacks :has(), the whole rule is dropped -> tables keep the * original SmartAdmin look (safe no-op). * ===================================================================== */ #content:not(:has(.internal-tickets)) .table { border-color: #e2e8f0; } /* Header: flatten (kill gradient) + uppercase slate caption */ #content:not(:has(.internal-tickets)) .table > thead > tr, #content:not(:has(.internal-tickets)) .table thead tr { background: #f8fafc; background-image: none; } #content:not(:has(.internal-tickets)) .table > thead > tr > th, #content:not(:has(.internal-tickets)) .table thead tr th { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; font-weight: 600; color: #475569; border-bottom: 1px solid #e2e8f0; border-color: #e2e8f0; } /* Sortable headers wrap their caption in , which otherwise picks up Bootstrap's link blue and breaks the header colour. Sort state is already conveyed by the caret icon, so inherit instead. */ #content:not(:has(.internal-tickets)) .table > thead > tr > th a, #content:not(:has(.internal-tickets)) .table thead tr th a { color: inherit; } /* Cells: slate borders + ClickUp-ish density. 14px matches body text (SmartAdmin dropped table cells to 13px). */ #content:not(:has(.internal-tickets)) .table > tbody > tr > td, #content:not(:has(.internal-tickets)) .table > tbody > tr > th { border-top: 1px solid #eef2f6; border-color: #eef2f6; padding: 8px 12px; vertical-align: middle; font-size: 14px; } /* Zebra removal */ #content:not(:has(.internal-tickets)) .table-striped > tbody > tr:nth-of-type(odd) > td, #content:not(:has(.internal-tickets)) .table-striped > tbody > tr:nth-of-type(odd) > th { background: transparent; } /* Row hover */ #content:not(:has(.internal-tickets)) .table-hover > tbody > tr:hover > td, #content:not(:has(.internal-tickets)) .table-hover > tbody > tr:hover > th { background: #f8fafc; } /* Contextual row coloring must SURVIVE the zebra-removal and row-hover rules above. Those two out-specify Bootstrap's `tr.success > td` etc., which broke worklists that color-code rows — warehouse outbound lost its multi-part-order green on every odd row, and hovering repainted colored rows slate (reported by the NJ warehouse 2026-08-21). Colors stay identical on hover: on a color-coded worklist a hover repaint reads as a data change, not a highlight. */ #content:not(:has(.internal-tickets)) .table > tbody > tr.success > td, #content:not(:has(.internal-tickets)) .table-hover > tbody > tr.success:hover > td { background: #dff0d8; } #content:not(:has(.internal-tickets)) .table > tbody > tr.warning > td, #content:not(:has(.internal-tickets)) .table-hover > tbody > tr.warning:hover > td { background: #fcf8e3; } #content:not(:has(.internal-tickets)) .table > tbody > tr.danger > td, #content:not(:has(.internal-tickets)) .table-hover > tbody > tr.danger:hover > td { background: #f2dede; } #content:not(:has(.internal-tickets)) .table > tbody > tr.info > td, #content:not(:has(.internal-tickets)) .table-hover > tbody > tr.info:hover > td { background: #d9edf7; } /* Rows colored at the level (inline styles like outbound's PRIORITY gold, or per-page classes like .globegistics) paint through transparent cells; the hover rule was covering them with slate tds. Restore see-through on hover. */ #content:not(:has(.internal-tickets)) .table-hover > tbody > tr[style*="background"]:hover > td, #content:not(:has(.internal-tickets)) .table-hover > tbody > tr.globegistics:hover > td, #content:not(:has(.internal-tickets)) .table-hover > tbody > tr.dhlexpress:hover > td, #content:not(:has(.internal-tickets)) .table-hover > tbody > tr.aramex:hover > td { background: transparent; } /* Bordered variant -> slate */ #content:not(:has(.internal-tickets)) .table-bordered, #content:not(:has(.internal-tickets)) .table-bordered > thead > tr > th, #content:not(:has(.internal-tickets)) .table-bordered > thead > tr > td, #content:not(:has(.internal-tickets)) .table-bordered > tbody > tr > th, #content:not(:has(.internal-tickets)) .table-bordered > tbody > tr > td { border-color: #e2e8f0; } /* ===================================================================== * ITEM 6 — Badges / labels / alerts -> soft-bg + colored-text pattern. * IMPORTANT: target only the `.label-*` variants. Bare `.label` is a * SmartAdmin smart-form FIELD label (a