/* * ================================================================ * JT NEXUS -- platform-wide UI/UX system * ================================================================ * Loaded LAST in every role's head_.php, after jt-accent-theme.css and * jt-modern.css, so it is the final word on every visual decision it * makes. Those two files are deliberately left in place rather than * deleted: between them they carry a large amount of structural * plumbing (collapse-rail behavior, table/DataTables fixes, print * rules) that is still correct and still wanted -- this file replaces * the *visual language* on top of that, and overrides the parts of it * that clash. * * The design language here is a light, high-clarity operations console: * a pure-black sidebar, white surfaces on a near-white page, one orange * accent (already Kerildbert's own brand orange), hairline borders * instead of drop shadows, and a single consistent radius scale. The * previous look -- purple gradients, pastel status chips, a white brand * strip layered on top of a dark sidebar, and a tiled doodle background * behind everything -- is fully replaced. * * Sidebar width is the one change with knock-on effects worth calling * out: the theme shipped 150px, which is far too narrow for this app's * own labels ("Commercial Module", "Consignment Values") and forced * every one of them to wrap onto two lines. Widened to 264px so every * label in every role's sidebar sits on exactly one line. */ /* ================================================================ 1. Tokens ================================================================ */ :root { /* Surfaces */ --nx-page: #F6F7F9; --nx-surface: #FFFFFF; --nx-surface-2: #FAFBFC; /* Hairlines */ --nx-border: #E7E9EE; --nx-border-strong: #D9DDE4; /* Text -- a grayish black rather than near-black. #14161A against a white card is close to maximum contrast, which on a screen full of dense tabular data reads as harsh and makes every cell shout equally. Softening the primary tone lets weight and size do the ranking. */ --nx-text: #2A2F36; --nx-text-1: #2A2F36; --nx-text-2: #667085; --nx-text-3: #98A1AE; /* Accent: Kerildbert orange */ --nx-accent: #F26A1B; --nx-accent-hover: #DC5A0F; --nx-accent-press: #C24E0B; --nx-accent-tint: #FFF3EB; --nx-accent-tint-border: #FBD6BB; /* Semantic */ --nx-green: #12A150; --nx-green-tint: #E9F9F0; --nx-red: #E5484D; --nx-red-tint: #FDECEC; --nx-amber: #E0900A; --nx-amber-tint: #FFF6E5; --nx-blue: #2E6BE6; --nx-blue-tint: #EDF3FF; /* Sidebar */ --nx-side: #000000; --nx-side-hover: #141518; --nx-side-line: rgba(255, 255, 255, 0.08); --nx-side-text: #9BA1AC; --nx-side-text-active: #FFFFFF; --nx-side-w: 264px; --nx-side-w-min: 76px; /* Shape */ --nx-r-sm: 6px; --nx-r: 8px; --nx-r-lg: 12px; --nx-r-xl: 14px; /* Elevation: near-flat by design */ --nx-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); --nx-shadow-md: 0 4px 16px rgba(16, 24, 40, 0.06); } /* ================================================================ 2. Base ================================================================ */ body { background-color: var(--nx-page) !important; color: var(--nx-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.006em; } /* The tiled logistics doodle behind all content is removed -- the reference language is clean, flat surfaces, and the pattern read as noise underneath dense tables. */ #kt_content::before, .login-aside::before { display: none !important; content: none !important; } #kt_content { background-color: var(--nx-page); } a { color: var(--nx-accent); } a:hover { color: var(--nx-accent-hover); } /* ================================================================ 3. Sidebar ================================================================ */ @media (min-width: 992px) { .aside, #kt_aside { width: var(--nx-side-w) !important; } .aside-fixed .wrapper { padding-left: var(--nx-side-w) !important; } body.aside-minimize #kt_aside { width: var(--nx-side-w-min) !important; } body.aside-minimize.aside-fixed .wrapper { padding-left: var(--nx-side-w-min) !important; } } #kt_aside { background: var(--nx-side) !important; box-shadow: none !important; border-right: 1px solid rgba(255, 255, 255, 0.06); } /* ---- Brand row: logo mark + wordmark on the left, collapse toggle on the right, both inside the black sidebar. The previous build put a full-width WHITE strip here on top of a dark sidebar, which is what made the sidebar look like two mismatched layers stacked on top of each other. */ #kt_brand, .jt-aside__brand { background: transparent !important; border-bottom: 1px solid var(--nx-side-line) !important; box-shadow: none !important; height: 64px; min-height: 64px; flex: 0 0 64px; padding: 0 16px !important; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; } .jt-brand, #kt_brand .brand-logo { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none !important; } /* The shipped logo is a JPG (opaque white/navy plate) -- it cannot sit on black without showing its own background box. Replaced with a composed mark: an orange rounded tile carrying the app glyph, plus a white wordmark, which is also what the reference design does. */ #kt_brand .brand-logo img { display: none !important; } .jt-brand-mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; background: var(--nx-accent); display: flex; align-items: center; justify-content: center; color: #fff; } .jt-brand-mark svg { width: 17px; height: 17px; display: block; } .jt-brand-name { color: #fff; font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; } /* Collapse toggle */ #kt_brand .jt-aside-toggle-btn, .jt-aside-toggle-btn { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--nx-r-sm); background: transparent !important; border: none !important; color: var(--nx-side-text) !important; transition: background-color .14s ease, color .14s ease; } .jt-aside-toggle-btn:hover { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; } .jt-aside-toggle-btn .svg-icon svg, .jt-aside-toggle-btn svg { width: 18px; height: 18px; fill: currentColor; } /* ---- Nav (own markup -- see jt_sidebar.php) ---- */ .jt-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 10px 8px; min-height: 0; } .jt-nav__label { color: #63697A; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 14px 10px 6px; } .jt-nav__label:first-child { padding-top: 4px; } .jt-nav__item { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 10px; margin: 1px 0; border-radius: var(--nx-r); color: var(--nx-side-text); text-decoration: none !important; transition: background-color .14s ease, color .14s ease; } .jt-nav__item:hover { background: var(--nx-side-hover); color: #fff; } .jt-nav__icon { flex: 0 0 18px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: inherit; } .jt-nav__icon svg { width: 18px; height: 18px; display: block; } .jt-nav__text { flex: 1 1 auto; min-width: 0; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; color: inherit; /* Single line, always -- the width this sidebar now has is chosen so that every label in every role fits without wrapping. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jt-nav__item.is-active { background: rgba(242, 106, 27, 0.14); color: var(--nx-accent); } .jt-nav__item.is-active .jt-nav__text { font-weight: 550; } /* Collapsed rail */ body.aside-minimize .jt-nav { padding: 12px 8px 8px; } body.aside-minimize .jt-nav__label { display: none; } body.aside-minimize .jt-nav__item { justify-content: center; padding: 0; gap: 0; } body.aside-minimize .jt-nav__text { display: none; } #kt_aside .menu-nav { padding: 0 !important; } /* The markup carried literal
tags between submenu items for spacing. They are neutralised here rather than hunted through five role sidebars, and real spacing comes from margins below. */ #kt_aside .menu-nav br { display: none !important; } /* ---- Top-level item ---- */ #kt_aside .menu-nav > .menu-item { margin: 2px 0; } #kt_aside .menu-nav > .menu-item > .menu-link { height: 40px; padding: 0 10px !important; border-radius: var(--nx-r) !important; display: flex; align-items: center; gap: 10px; background: transparent !important; transition: background-color .14s ease, color .14s ease; } #kt_aside .menu-nav > .menu-item > .menu-link:hover { background: var(--nx-side-hover) !important; } #kt_aside .menu-nav > .menu-item > .menu-link .menu-icon, #kt_aside .menu-nav > .menu-item > .menu-link .menu-icon.flaticon-graphic-2, #kt_aside .menu-nav > .menu-item > .menu-link .menu-icon i { width: 18px; min-width: 18px; margin: 0 !important; flex: 0 0 18px; font-size: 1.0625rem; color: var(--nx-side-text) !important; text-align: center; transition: color .14s ease; } #kt_aside .menu-nav > .menu-item > .menu-link .menu-text { color: var(--nx-side-text) !important; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; /* One line, always. The 150px sidebar this replaces wrapped almost every label in this app onto two lines. */ white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; text-align: left !important; flex: 1 1 auto; min-width: 0; transition: color .14s ease; } #kt_aside .menu-nav > .menu-item > .menu-link .menu-arrow { color: #5C616B !important; font-size: 0.625rem; flex: 0 0 auto; margin-left: 4px; } #kt_aside .menu-nav > .menu-item > .menu-link .menu-arrow:before { content: "\f105"; } #kt_aside .menu-nav > .menu-item > .menu-link:hover .menu-text, #kt_aside .menu-nav > .menu-item > .menu-link:hover .menu-icon, #kt_aside .menu-nav > .menu-item > .menu-link:hover .menu-icon i { color: #fff !important; } /* Active top-level item: orange tint plate + orange glyph/label, the same treatment the reference uses for its selected nav row. */ #kt_aside .menu-nav > .menu-item.menu-item-open > .menu-link, #kt_aside .menu-nav > .menu-item.jt-side-current > .menu-link { background: rgba(242, 106, 27, 0.14) !important; } #kt_aside .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text, #kt_aside .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon, #kt_aside .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon i, #kt_aside .menu-nav > .menu-item.jt-side-current > .menu-link .menu-text, #kt_aside .menu-nav > .menu-item.jt-side-current > .menu-link .menu-icon, #kt_aside .menu-nav > .menu-item.jt-side-current > .menu-link .menu-icon i { color: var(--nx-accent) !important; } /* ---- Submenu ---- */ #kt_aside .menu-nav .menu-submenu { background: transparent !important; padding: 2px 0 6px !important; margin: 0 !important; } #kt_aside .menu-nav .menu-submenu > .menu-arrow { display: none !important; } #kt_aside .menu-nav .menu-subnav { padding: 0 !important; margin: 0 0 0 13px !important; border-left: 1px solid var(--nx-side-line); } /* The theme repeats the parent's own name as the first submenu row. With the parent row directly above it, that is pure duplication. */ #kt_aside .menu-nav .menu-item-parent { display: none !important; } #kt_aside .menu-nav .menu-subnav > .menu-item { margin: 1px 0; } #kt_aside .menu-nav .menu-subnav > .menu-item > .menu-link { height: 34px; padding: 0 10px 0 12px !important; margin-left: 6px; border-radius: var(--nx-r-sm) !important; display: flex; align-items: center; gap: 8px; background: transparent !important; } #kt_aside .menu-nav .menu-subnav > .menu-item > .menu-link:hover { background: var(--nx-side-hover) !important; } #kt_aside .menu-nav .menu-subnav .menu-bullet { display: none !important; } #kt_aside .menu-nav .menu-subnav > .menu-item > .menu-link .menu-text { color: #868C97 !important; font-size: 0.8125rem; font-weight: 450; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; text-align: left !important; } #kt_aside .menu-nav .menu-subnav > .menu-item > .menu-link:hover .menu-text { color: #fff !important; } #kt_aside .menu-nav .menu-subnav > .menu-item.jt-side-current > .menu-link { background: rgba(242, 106, 27, 0.12) !important; } #kt_aside .menu-nav .menu-subnav > .menu-item.jt-side-current > .menu-link .menu-text { color: var(--nx-accent) !important; font-weight: 550; } /* ---- Collapsed rail ---- */ body.aside-minimize #kt_brand { justify-content: center; padding: 0 !important; } body.aside-minimize .jt-brand-name { display: none; } body.aside-minimize #kt_aside .menu-nav > .menu-item > .menu-link { justify-content: center; padding: 0 !important; } body.aside-minimize #kt_aside .menu-nav > .menu-item > .menu-link .menu-text, body.aside-minimize #kt_aside .menu-nav > .menu-item > .menu-link .menu-arrow { display: none !important; } body.aside-minimize .jt-side-foot { display: none !important; } /* ---- Live-data footer, pinned to the bottom of the sidebar ---- */ .jt-side-foot { margin-top: auto; padding: 14px 16px 16px; border-top: 1px solid var(--nx-side-line); } .jt-side-foot__head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; } .jt-side-foot__dot { width: 6px; height: 6px; border-radius: 50%; background: #21C063; box-shadow: 0 0 0 3px rgba(33, 192, 99, 0.18); flex: 0 0 6px; } .jt-side-foot__title { color: #6E7480; font-size: 0.625rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; } .jt-side-foot__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; } .jt-side-foot__label { color: #7C828D; font-size: 0.75rem; font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jt-side-foot__value { color: #fff; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; } /* ================================================================ 4. Topbar ================================================================ */ #kt_header, .header.header-fixed { background: var(--nx-surface) !important; border-bottom: 1px solid var(--nx-border); box-shadow: none !important; height: 64px !important; min-height: 64px !important; } #kt_header .container-fluid { padding: 0 24px; height: 100%; } /* ---- Fixed-layout geometry ----------------------------------------- Both the header and the subheader are position:fixed and were offset for the theme's original 150px sidebar (`.aside-enabled .header .header-fixed { left: 150px }`, and a subheader pinned at `left: 0` outright). With the wider sidebar they have to be re-offset, or the sidebar paints over the left end of the search field and the profile chip pushes off the right edge -- both of which it did, confirmed on screen before this block existed. Heights are restated here too so the header/subheader stack and the content's top padding agree on one set of numbers rather than the theme's 65px/54px. */ @media (min-width: 992px) { .aside-enabled .header.header-fixed, .header.header-fixed { left: var(--nx-side-w) !important; right: 0 !important; } .header-fixed.subheader-fixed .subheader { left: var(--nx-side-w) !important; right: 0 !important; top: 64px !important; height: 60px !important; } body.aside-minimize .header.header-fixed, body.aside-minimize.aside-enabled .header.header-fixed { left: var(--nx-side-w-min) !important; } body.aside-minimize.header-fixed.subheader-fixed .subheader { left: var(--nx-side-w-min) !important; } } .header-fixed.subheader-fixed.subheader-enabled .wrapper, .header-fixed.subheader-fixed .wrapper { padding-top: 124px !important; /* 64 header + 60 subheader */ } .header-fixed .wrapper { padding-top: 64px; } /* The topbar's left slot carried a single orange "Open Help Desk Ticket" nav pill. It becomes the job search field -- the reference design's most prominent topbar element, and something this app never had at all. The help-desk link moves to an icon button on the right. */ .jt-topbar-left { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; } .jt-topbar-back { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px 0 8px; border: 1px solid var(--nx-border); border-radius: var(--nx-r); background: var(--nx-surface); color: var(--nx-text-2) !important; font-size: 0.8125rem; font-weight: 500; text-decoration: none !important; white-space: nowrap; transition: background-color .14s ease, color .14s ease; } .jt-topbar-back:hover { background: var(--nx-surface-2); color: var(--nx-text) !important; } .jt-topbar-back svg { width: 15px; height: 15px; } .jt-search { position: relative; max-width: 420px; width: 100%; } .jt-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--nx-text-3); pointer-events: none; display: flex; } .jt-search__icon svg { width: 15px; height: 15px; } .jt-search input { width: 100%; height: 38px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface-2); padding: 0 62px 0 34px; font-size: 0.8125rem; color: var(--nx-text); transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease; } .jt-search input::placeholder { color: var(--nx-text-3); } .jt-search input:focus { outline: none; background: var(--nx-surface); border-color: var(--nx-accent); box-shadow: 0 0 0 3px rgba(242, 106, 27, 0.12); } .jt-search__kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 1px; height: 22px; padding: 0 7px; border: 1px solid var(--nx-border); border-radius: var(--nx-r-sm); background: var(--nx-surface); color: var(--nx-text-3); font-size: 0.6875rem; font-weight: 500; pointer-events: none; } /* Right cluster */ #kt_header .topbar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* The icon buttons in the header are fixed 36px squares. The user chip shares .btn-icon but is not an icon button -- it holds an avatar, a name and a caret -- so it is excluded here rather than fighting this rule later with a more specific one. Its name was overflowing the 36px box and colliding with the bell to its left. */ #kt_header .topbar .btn.btn-icon:not(.jt-user-chip), #kt_header .topbar .btn-dropdown, .jt-top-icon { width: 36px !important; height: 36px !important; min-width: 36px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--nx-r) !important; border: 1px solid transparent !important; background: transparent !important; color: var(--nx-text-2) !important; margin: 0 !important; padding: 0 !important; transition: background-color .14s ease, border-color .14s ease, color .14s ease; } #kt_header .topbar .btn.btn-icon:hover, #kt_header .topbar .btn-dropdown:hover, .jt-top-icon:hover { background: var(--nx-surface-2) !important; border-color: var(--nx-border) !important; color: var(--nx-text) !important; } .jt-top-icon svg { width: 17px; height: 17px; } #kt_header .topbar .btn.btn-icon i, .jt-top-icon i { font-size: 1.0625rem; color: inherit !important; } /* The theme's pulsing ring on the KPI bell is replaced by a small static dot -- same "there is something here" signal, without the animation pulling the eye away from the page content. */ #kt_header .topbar .pulse-ring { display: none !important; } .jt-top-icon--dot { position: relative; } .jt-top-icon--dot::after { content: ""; position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--nx-accent); border: 2px solid var(--nx-surface); } /* Alerts dropdown */ .dropdown-menu.jt-alerts { min-width: 292px; padding: 0; border: 1px solid var(--nx-border); border-radius: var(--nx-r-lg); box-shadow: var(--nx-shadow-md); overflow: hidden; } .jt-alerts__head { padding: 12px 14px; border-bottom: 1px solid var(--nx-border); color: var(--nx-text); font-size: 0.8125rem; font-weight: 600; } .jt-alerts__item { display: flex; align-items: center; gap: 11px; padding: 12px 14px; text-decoration: none !important; transition: background-color .14s ease; } .jt-alerts__item:hover { background: var(--nx-surface-2); } .jt-alerts__icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--nx-r); background: var(--nx-accent-tint); color: var(--nx-accent); display: flex; align-items: center; justify-content: center; } .jt-alerts__icon svg { width: 16px; height: 16px; } .jt-alerts__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .jt-alerts__title { color: var(--nx-text); font-size: 0.8125rem; font-weight: 550; } .jt-alerts__meta { color: var(--nx-text-3); font-size: 0.75rem; } /* Profile chip */ #kt_quick_user_toggle { height: 40px; display: inline-flex !important; align-items: center; gap: 8px; padding: 0 8px 0 6px !important; margin-left: 4px; border-radius: 999px !important; border: 1px solid var(--nx-border) !important; background: var(--nx-surface) !important; transition: background-color .14s ease, border-color .14s ease; } #kt_quick_user_toggle:hover { background: var(--nx-surface-2) !important; border-color: var(--nx-border-strong) !important; } #kt_quick_user_toggle .jt-hi { display: none !important; } #kt_quick_user_toggle .symbol { width: 28px; height: 28px; flex: 0 0 28px; order: -1; } #kt_quick_user_toggle .symbol .symbol-label { width: 28px; height: 28px; border-radius: 50% !important; /* Colour only: the uploaded photo arrives as an inline background-image, which the "background" shorthand used to wipe out (blank orange circle). */ background-color: var(--nx-accent) !important; color: #fff !important; font-size: 0.75rem !important; font-weight: 600 !important; display: flex; align-items: center; justify-content: center; } #kt_quick_user_toggle .jt-user-name { color: var(--nx-text) !important; font-size: 0.8125rem !important; font-weight: 550 !important; margin: 0 !important; white-space: nowrap; } .jt-user-caret { color: var(--nx-text-3); display: inline-flex; flex: 0 0 auto; } .jt-user-caret svg { width: 13px; height: 13px; } /* ================================================================ 5. Breadcrumb bar ================================================================ */ .subheader, #kt_subheader { background: var(--nx-surface) !important; border-bottom: 1px solid var(--nx-border); box-shadow: none !important; padding: 0 !important; height: 60px; min-height: 60px; display: flex; align-items: center; } #kt_subheader .container-fluid { padding: 0 24px; width: 100%; } .subheader .breadcrumb { margin: 0 !important; padding: 0 !important; background: transparent; display: flex; align-items: center; flex-wrap: wrap; gap: 0; } .subheader .breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 450; padding: 0; } .subheader .breadcrumb .breadcrumb-item a, .subheader .breadcrumb .breadcrumb-item a.text-muted { color: var(--nx-text-2) !important; font-weight: 450 !important; text-decoration: none !important; transition: color .14s ease; } .subheader .breadcrumb .breadcrumb-item a:hover { color: var(--nx-text) !important; } /* Chevron separators, replacing the theme's dot separators. */ .subheader .breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 0; } .subheader .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "" !important; display: inline-block; width: 5px; height: 5px; margin: 0 10px; border-right: 1.5px solid var(--nx-text-3); border-bottom: 1.5px solid var(--nx-text-3); transform: rotate(-45deg); background: none !important; border-radius: 0 !important; opacity: 1; } .subheader .breadcrumb .breadcrumb-item.jt-breadcrumb-current, .jt-breadcrumb-current { color: var(--nx-text) !important; font-weight: 600 !important; } .jt-subheader-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .jt-subheader-actions .btn { white-space: nowrap; } .jt-btn-icon-left { display: inline-flex !important; align-items: center; gap: 6px; } .jt-btn-icon-left svg { width: 15px; height: 15px; } /* ================================================================ 6. Buttons ================================================================ */ .btn { border-radius: var(--nx-r) !important; font-size: 0.8125rem !important; font-weight: 550 !important; letter-spacing: -0.005em; padding: 0.6rem 1rem; transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease; } .btn.btn-sm { padding: 0.45rem 0.8rem; font-size: 0.78125rem !important; } .btn.btn-lg { padding: 0.75rem 1.25rem; font-size: 0.875rem !important; } /* Primary + every colored variant the app already uses for a main action, unified onto the single orange accent. */ .btn.btn-primary, .btn-primary, .btn.btn-success, .btn.btn-dark, .btn.btn-info { background-color: var(--nx-accent) !important; border-color: var(--nx-accent) !important; color: #fff !important; box-shadow: none !important; } .btn.btn-primary:hover, .btn-primary:hover, .btn.btn-success:hover, .btn.btn-dark:hover, .btn.btn-info:hover, .btn.btn-primary:focus, .btn-primary:focus, .btn.btn-success:focus, .btn.btn-dark:focus, .btn.btn-info:focus { background-color: var(--nx-accent-hover) !important; border-color: var(--nx-accent-hover) !important; color: #fff !important; box-shadow: none !important; } .btn.btn-primary:active, .btn.btn-success:active, .btn.btn-dark:active { background-color: var(--nx-accent-press) !important; border-color: var(--nx-accent-press) !important; } /* Secondary: outline on white */ .btn.btn-secondary, .btn.btn-light, .btn.btn-light-primary, .btn.btn-white { background-color: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; color: var(--nx-text) !important; box-shadow: none !important; } .btn.btn-secondary:hover, .btn.btn-light:hover, .btn.btn-light-primary:hover, .btn.btn-white:hover { background-color: var(--nx-surface-2) !important; border-color: var(--nx-border-strong) !important; color: var(--nx-text) !important; } .btn.btn-danger { background-color: var(--nx-red) !important; border-color: var(--nx-red) !important; color: #fff !important; } .btn.btn-danger:hover { background-color: #D13A3F !important; border-color: #D13A3F !important; } .btn.btn-shadow, .btn.btn-shadow-hover { box-shadow: none !important; } /* Icon-only action buttons inside tables/rows */ .btn.btn-icon:not(.btn-lg) { width: 32px; height: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } /* ================================================================ 7. Cards ================================================================ */ .card, .card.card-custom { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r-lg) !important; box-shadow: var(--nx-shadow) !important; } .card.card-custom > .card-header, .card > .card-header { background: transparent !important; border-bottom: 1px solid var(--nx-border) !important; min-height: 60px !important; padding: 0 20px !important; } .card.card-custom > .card-header .card-title, .card > .card-header .card-title { margin: 0; align-items: center; } /* One card title size, everywhere. Measured across 22 pages, these were landing at 13px/400, 15px/500, 16.6px/500 and 16.6px/600 depending on whether the markup wrapped the text in a .card-label, used the bare , or leaned on the theme's h3 size -- three different-looking titles on one screen. The bare `.card-title` needs naming explicitly: on most cards in this app it IS the

, so it never matched a descendant selector. */ .card.card-custom > .card-header .card-title .card-label, .card > .card-header .card-title .card-label, .card > .card-header > .card-title, .card.card-custom > .card-header > .card-title, .card > .card-header .card-title > b, .card > .card-header h3, .card > .card-header h4, .card .card-title h3, .card .card-label { color: var(--nx-text) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em; margin: 0 !important; } .card.card-custom > .card-body, .card > .card-body { padding: 20px !important; } .card.card-custom > .card-footer, .card > .card-footer { background: transparent !important; border-top: 1px solid var(--nx-border) !important; padding: 16px 20px !important; } /* The purple gradient hero card is flattened to a normal white card -- it was the single loudest surface on the old dashboard. */ .card.bg-primary, .card.card-custom.bg-primary, .bg-primary.card { background: var(--nx-surface) !important; } .card.bg-primary .card-title .card-label, .card.bg-primary .text-white { color: var(--nx-text) !important; } /* Section label above a group of cards */ .jt-section-label { display: flex; align-items: center; gap: 8px; color: var(--nx-text-3) !important; font-size: 0.6875rem !important; font-weight: 650 !important; letter-spacing: 0.07em !important; text-transform: uppercase; margin: 24px 0 12px !important; padding: 0 !important; background: none !important; border: none !important; } /* The first section in a card/modal body sits right under the header divider already -- no extra gap needed above it there. */ .card-body > .jt-section-label:first-child, .modal-body > .jt-section-label:first-child { margin-top: 0 !important; } .jt-section-label__icon { color: var(--nx-text-3) !important; font-size: 0.875rem; } /* ================================================================ 8. Stat strip ================================================================ One white card, equal columns divided by hairlines: a big tabular figure, a quiet label under it, and a delta line. Replaces the row of pastel-tinted pills the old dashboard used, which gave five different background colors equal visual weight and made none of them readable as more or less important than the others. */ .jt-stats { display: flex; flex-wrap: wrap; background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-r-lg); box-shadow: var(--nx-shadow); overflow: hidden; margin-bottom: 20px; } .jt-stat { flex: 1 1 0; min-width: 168px; padding: 16px 20px; border-right: 1px solid var(--nx-border); text-decoration: none !important; display: block; transition: background-color .14s ease; } .jt-stat:last-child { border-right: none; } .jt-stat:hover { background: var(--nx-surface-2); } .jt-stat__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 0; } /* Value and label share one baseline ("7 In Preclearing"), with the delta on its own line underneath -- the reference's arrangement. */ .jt-stat__value { color: var(--nx-text); font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .jt-stat__label { color: var(--nx-text-2); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; } .jt-stat__delta { display: flex; align-items: center; gap: 4px; margin-top: 7px; font-size: 0.75rem; font-weight: 500; color: var(--nx-text-3); white-space: nowrap; } .jt-stat__delta--up { color: var(--nx-green); } .jt-stat__delta--down { color: var(--nx-red); } .jt-stat__delta--warn { color: var(--nx-amber); } .jt-stat__delta svg { width: 12px; height: 12px; flex: 0 0 12px; } .jt-stat__delta-note { color: var(--nx-text-3); font-weight: 450; } .jt-stat--alert .jt-stat__value { color: var(--nx-red); } /* ================================================================ 9. Tables ================================================================ */ .table { color: var(--nx-text); margin: 0; } .table thead th, .table.table-head-custom thead th { background: var(--nx-surface-2) !important; border-top: none !important; border-bottom: 1px solid var(--nx-border) !important; color: var(--nx-text-2) !important; /* px, for the reason given in the TYPOGRAPHY block: this theme's root font-size is 13px, so 0.6875rem rendered at 8.9px -- smaller than the caption text under it. */ font-size: var(--jt-fs-micro) !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; padding: 11px 14px !important; white-space: nowrap; vertical-align: middle; } .table tbody td { border-top: none !important; border-bottom: 1px solid var(--nx-border) !important; padding: 12px 14px !important; font-size: 0.8125rem; color: var(--nx-text); vertical-align: middle; } .table tbody tr:hover > td { background: var(--nx-surface-2); } .table tbody tr:last-child > td { border-bottom: none !important; } /* DataTables chrome */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r) !important; height: 36px; padding: 0 10px; font-size: 0.8125rem; background: var(--nx-surface); color: var(--nx-text); } .dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--nx-accent) !important; box-shadow: 0 0 0 3px rgba(242, 106, 27, 0.1); } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--nx-text-2); font-size: 0.8125rem; } .dataTables_wrapper .pagination .page-link { border-radius: var(--nx-r-sm) !important; border: 1px solid transparent; color: var(--nx-text-2); font-size: 0.8125rem; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; } .dataTables_wrapper .pagination .page-item.active .page-link { background: var(--nx-accent) !important; border-color: var(--nx-accent) !important; color: #fff !important; } .dataTables_wrapper .pagination .page-link:hover { background: var(--nx-surface-2); color: var(--nx-text); } /* ================================================================ 10. Forms ================================================================ */ .form-control, .form-control.form-control-solid, .custom-select { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r) !important; color: var(--nx-text) !important; font-size: 0.8125rem !important; min-height: 40px; padding: 0.55rem 0.75rem; box-shadow: none !important; transition: border-color .14s ease, box-shadow .14s ease; } textarea.form-control { min-height: 76px; } .form-control:focus, .form-control.form-control-solid:focus { background: var(--nx-surface) !important; border-color: var(--nx-accent) !important; box-shadow: 0 0 0 3px rgba(242, 106, 27, 0.12) !important; color: var(--nx-text) !important; } .form-control::placeholder { color: var(--nx-text-3) !important; } label, .form-group > label { color: var(--nx-text) !important; font-size: 0.8125rem !important; font-weight: 550 !important; margin-bottom: 6px; } .form-text.text-muted { color: var(--nx-text-3) !important; font-size: 0.75rem !important; } /* bootstrap-select, used across this app for searchable dropdowns */ .bootstrap-select > .dropdown-toggle, .bootstrap-select.form-control > .dropdown-toggle { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r) !important; color: var(--nx-text) !important; font-size: 0.8125rem !important; min-height: 40px; box-shadow: none !important; } .bootstrap-select .dropdown-menu { border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r) !important; box-shadow: var(--nx-shadow-md) !important; font-size: 0.8125rem; } .bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item:active { background: var(--nx-accent-tint) !important; color: var(--nx-accent) !important; } /* ================================================================ 11. Badges / labels / alerts ================================================================ */ .label, .badge { border-radius: 999px !important; font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.01em; padding: 0 9px; height: 22px; display: inline-flex; align-items: center; } .label.label-light-success, .badge-light-success { background: var(--nx-green-tint) !important; color: var(--nx-green) !important; } .label.label-light-danger, .badge-light-danger { background: var(--nx-red-tint) !important; color: var(--nx-red) !important; } .label.label-light-warning, .badge-light-warning { background: var(--nx-amber-tint) !important; color: var(--nx-amber) !important; } .label.label-light-primary, .badge-light-primary { background: var(--nx-accent-tint) !important; color: var(--nx-accent) !important; } .label.label-light-info, .badge-light-info { background: var(--nx-blue-tint) !important; color: var(--nx-blue) !important; } .alert.alert-custom { border-radius: var(--nx-r-lg) !important; border: 1px solid var(--nx-border) !important; background: var(--nx-surface) !important; box-shadow: none !important; padding: 14px 18px !important; } .alert.alert-custom .alert-text { color: var(--nx-text) !important; font-size: 0.8125rem; } /* Modals */ .modal-content { border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r-lg) !important; box-shadow: var(--nx-shadow-md) !important; } .modal-header { border-bottom: 1px solid var(--nx-border) !important; padding: 18px 20px !important; } .modal-header .modal-title { font-size: 0.9375rem; font-weight: 600; color: var(--nx-text); } .modal-body { padding: 20px !important; font-size: 0.875rem; } .modal-footer { border-top: 1px solid var(--nx-border) !important; padding: 14px 20px !important; } /* Toasts keep their own geometry, just re-tinted to this system. */ .jt-toast { border-radius: var(--nx-r-lg) !important; border: 1px solid var(--nx-border) !important; box-shadow: var(--nx-shadow-md) !important; } /* ================================================================ 12. Content rhythm ================================================================ */ #kt_content .container, #kt_content .container-fluid { padding-left: 24px; padding-right: 24px; } #kt_content .d-flex.flex-column-fluid { padding-top: 20px; padding-bottom: 24px; } .card + .card, .row + .row { margin-top: 0; } #kt_content .gutter-b { margin-bottom: 20px !important; } /* Footer */ .footer { background: var(--nx-surface) !important; border-top: 1px solid var(--nx-border); box-shadow: none !important; } .footer .text-dark-75, .footer a { font-size: 0.8125rem; } /* Scrollbars, to match the flat surfaces */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #D6DAE1; border-radius: 999px; border: 3px solid var(--nx-page); } ::-webkit-scrollbar-thumb:hover { background: #BFC5CE; } #kt_aside ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-color: transparent; } /* ================================================================ 13. Dashboard widget details ================================================================ */ /* Payment amounts. These were ten arbitrary pill colors (success, danger, primary, info, ...) assigned per row with no meaning behind the choice, which made a list of figures read as a status board. One quiet, tabular treatment instead. */ .jt-amount { background: transparent !important; color: var(--nx-text) !important; font-size: 0.8125rem !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; padding: 0 !important; height: auto !important; border-radius: 0 !important; } /* The pastel icon tiles beside the haulage figures, retinted from five different pastels onto the one accent. */ .symbol.symbol-50 > .symbol-label, .symbol.symbol-45 > .symbol-label, .symbol.symbol-40 > .symbol-label { border-radius: var(--nx-r) !important; background: var(--nx-accent-tint) !important; color: var(--nx-accent) !important; } .symbol.symbol-light-success > .symbol-label, .symbol.symbol-light-primary > .symbol-label, .symbol.symbol-light-info > .symbol-label, .symbol.symbol-light-warning > .symbol-label, .symbol.symbol-light-danger > .symbol-label { background: var(--nx-accent-tint) !important; color: var(--nx-accent) !important; } .symbol .symbol-label i, .symbol .symbol-label .svg-icon svg [fill] { color: var(--nx-accent) !important; } /* Figures that sit next to those tiles */ .font-size-h4, .font-size-h5, .font-size-h6 { letter-spacing: -0.02em; } .text-dark-75, .text-dark-50, .text-dark { color: var(--nx-text) !important; } .text-muted { color: var(--nx-text-2) !important; } /* Dashboard chart cards: even heights, chart flush to the card edges */ .card.card-stretch { height: auto; } /* ---- Charts ------------------------------------------------------- Most theme charts read their colors from KTAppSettings (retinted in each role's foot_.php), but a few in assets/js/pages/widgets.min.js carry a hardcoded literal instead -- kt_mixed_widget_2_chart's line is `var o = "#287ED7"`, a blue that survived every settings change. Rather than patch a minified vendor bundle, these override the rendered SVG: CSS properties beat SVG presentation attributes, so a `stroke` here wins over the attribute ApexCharts wrote inline. The dropShadow filter that bundle also applies is dropped, since it was tinted to the same blue. */ #kt_mixed_widget_2_chart .apexcharts-series path, #kt_mixed_widget_2_chart .apexcharts-line, .apexcharts-canvas .apexcharts-series path[stroke="#287ED7"] { stroke: var(--nx-accent) !important; filter: none !important; } #kt_mixed_widget_2_chart .apexcharts-series, #kt_mixed_widget_2_chart svg { filter: none !important; } .apexcharts-tooltip { border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r) !important; box-shadow: var(--nx-shadow-md) !important; font-family: 'Inter', sans-serif !important; } .apexcharts-tooltip .apexcharts-tooltip-title { background: var(--nx-surface-2) !important; border-bottom: 1px solid var(--nx-border) !important; font-weight: 600 !important; } /* ================================================================ 14. Table row actions ================================================================ Row action buttons in this app are .btn-success / .btn-primary with white glyphs, which under section 6's unified accent turned every list into a wall of solid orange -- two filled buttons on every row, competing with the data. Inside a table cell they become quiet bordered icon buttons that only pick up the accent on hover. */ .table td .btn, .table td .btn.btn-primary, .table td .btn.btn-success, .table td .btn.btn-info, .table td .btn.btn-danger, .table td .btn.btn-dark { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; color: var(--nx-text-2) !important; /* Bug fix: this used to force every .btn in a table cell to a 32x32 square with zero padding. That is right for the icon-only row actions it was written for, and wrong for every text button that shares the selector -- on admin/user_approvals "Resend Email" and "Verify Manually" were squashed into 32px boxes and their labels overlapped each other. Text buttons now size to their content; the square is applied below, only to buttons that really are just an icon. */ min-height: 32px; padding: 5px 12px !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: none !important; } /* The icon-only case: a button whose entire content is one . :has() is the only way to tell them apart without touching the markup in every list in the app. Where it is unsupported these simply stay text-width, which is harmless. */ .table td .btn.jt-icon-only, .table td .btn.jt-icon-only.jt-icon-only { width: 32px; padding: 0 !important; } .table td .btn + .btn { margin-left: 4px; } .table td .btn i, .table td .btn i.text-light, .table td .btn .svg-icon svg [fill] { color: var(--nx-text-2) !important; font-size: 0.9375rem; } .table td .btn:hover { background: var(--nx-accent-tint) !important; border-color: var(--nx-accent-tint-border) !important; color: var(--nx-accent) !important; } .table td .btn:hover i, .table td .btn:hover i.text-light { color: var(--nx-accent) !important; } /* A genuinely destructive row action stays legible as destructive. */ .table td .btn.btn-danger:hover { background: var(--nx-red-tint) !important; border-color: #F7CFD0 !important; color: var(--nx-red) !important; } .table td .btn.btn-danger:hover i { color: var(--nx-red) !important; } /* Each action sits in its own
, which would otherwise stack them vertically and double every row's height. */ .table td form { display: inline-block; margin: 0; } /* ...except the spaced action groups, which are flex rows on purpose. */ .table td form.jt-row-actions, .table td .jt-row-actions { display: flex !important; } /* Data cells hold job numbers, dates and codes -- none of which should wrap mid-value. These tables already scroll horizontally. */ .table tbody td, .table thead th { white-space: nowrap; } .table tbody td { padding: 10px 14px !important; } /* Card-header glyphs were inheriting the old brand purple. */ .card-header .card-title i, .card-title > i { color: var(--nx-text-3) !important; font-size: 1rem; margin-right: 8px; } /* Progress meter used in the job lists */ .progress { background: var(--nx-border) !important; border-radius: 999px !important; height: 5px !important; } .progress-bar { background: var(--nx-accent) !important; border-radius: 999px !important; } /* ================================================================ 15. Master-data tiles (admin dashboard) ================================================================ These were six color variants (--purple/--slate/--teal/--blue/ --orange/--pink) applied round-robin to what is one kind of thing: a count of rows in a master-data table. One treatment for all of them, with the figure as the loudest element instead of the tile. */ .jt-tile-grid { display: grid; /* auto-fill packed six across on a wide screen, which left the admin dashboard's ten master-data tiles as a row of six and a row of four with two empty slots trailing -- it read as two tiles having gone missing rather than as a grid. Five across gives two even rows for ten; auto-fit keeps other counts and narrower widths sensible. */ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* Equal rows: one tile carrying a supporting line made its whole row taller than the row beneath it. */ grid-auto-rows: 1fr; gap: 12px; } @media (min-width: 1200px) { .jt-tile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .jt-tile, .jt-tile.jt-tile--purple, .jt-tile.jt-tile--slate, .jt-tile.jt-tile--teal, .jt-tile.jt-tile--blue, .jt-tile.jt-tile--orange, .jt-tile.jt-tile--pink { /* Markup order is icon, label, value. Grid areas put the figure first and the icon alongside, so a tile reads the same way as a .jt-stat or a .jt-fig instead of label-then-number. */ display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "icon value" "icon label" "icon meta"; column-gap: 12px; align-content: center; background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-r-lg) !important; box-shadow: var(--nx-shadow) !important; padding: 14px 16px !important; text-decoration: none !important; transition: border-color .14s ease, box-shadow .14s ease; } .jt-tile:hover { border-color: var(--nx-accent-tint-border) !important; box-shadow: var(--nx-shadow-md) !important; } .jt-tile__icon { grid-area: icon; align-self: center; width: 42px; height: 42px; border-radius: 12px; background: var(--nx-accent-tint) !important; color: var(--nx-accent) !important; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0; } .jt-tile__icon i { color: var(--nx-accent) !important; font-size: 1.0625rem; } .jt-tile__label { grid-area: label; color: var(--nx-text-2) !important; font-size: 0.8125rem !important; font-weight: 500 !important; margin: 2px 0 0 !important; line-height: 1.3; } .jt-tile__meta { grid-area: meta; margin-top: 3px; font-size: 0.75rem; font-weight: 500; color: var(--nx-text-3); } .jt-tile__value { grid-area: value; color: var(--nx-text) !important; font-size: 1.375rem !important; font-weight: 680 !important; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; } /* Sidebar: the live-data panel is pinned, and the nav above it scrolls independently. Padding-bottom keeps the last item from ending flush against the panel's border when the list is long enough to scroll (admin's is). */ .jt-nav { padding-bottom: 14px; } .jt-side-foot { flex: 0 0 auto; background: var(--nx-side); } /* ================================================================ 16. Auth pages ================================================================ login / signup / recoverpw / reset_password / set_password use their own jt-auth-* component system (see jt-modern.css). It was built around the old brand purple, which after this change was the only purple left anywhere in the product -- the front door didn't match the app behind it. Retinted onto the same tokens as everything else by redefining the variables it already reads, so no auth markup or component rule has to change. */ :root { --jt-auth-accent: #F26A1B; --jt-auth-accent-hover: #DC5A0F; --jt-auth-accent-bg: #FFF3EB; --jt-auth-accent-bdr: #FBD6BB; --jt-auth-border: #E7E9EE; --jt-auth-border-light: #EFF1F4; --jt-auth-text: #14161A; --jt-auth-text-sec: #6B7280; --jt-auth-text-mut: #9AA1AC; --jt-auth-radius-sm: 8px; --jt-auth-radius-md: 12px; } .jt-auth-submit { height: 42px; font-size: 0.875rem !important; font-weight: 550 !important; } .jt-auth-card { border-radius: var(--nx-r-lg) !important; box-shadow: var(--nx-shadow-md) !important; } .jt-auth-input-wrap input { min-height: 40px; } /* The auth pages' own submit button is not a .btn, so section 6 doesn't reach it; and where they DO use .btn (reset_password's dark button), the accent rules there already apply. */ /* ================================================================ 17. Choice cards ================================================================ The reference design's "Select Transport Mode" pattern, used on Create Job for the Process and Mode decisions. Selected state is an accent border + accent title + a filled check in the corner. See assets/js/custom/jt-choice.js for the wiring to the real selects. */ .jt-choice-block { margin-bottom: 26px; } .jt-choice-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; } .jt-choice-step { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--nx-accent); color: #fff; font-size: 0.75rem; font-weight: 650; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .jt-choice-title { color: var(--nx-text); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; } .jt-choice-sub { color: var(--nx-text-2); font-size: 0.8125rem; margin-top: 1px; } .jt-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .jt-choice { display: flex; flex-direction: column; gap: 7px; text-align: left; padding: 15px 16px; background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-r-lg); cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease; } .jt-choice:hover { border-color: var(--nx-border-strong); box-shadow: var(--nx-shadow-md); } .jt-choice__top { display: flex; align-items: center; gap: 9px; } .jt-choice__icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--nx-r-sm); background: var(--nx-surface-2); border: 1px solid var(--nx-border); color: var(--nx-text-2); display: flex; align-items: center; justify-content: center; } .jt-choice__icon svg { width: 15px; height: 15px; } .jt-choice__name { flex: 1 1 auto; color: var(--nx-text); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; } .jt-choice__check { width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; background: var(--nx-accent); color: #fff; display: none; align-items: center; justify-content: center; } .jt-choice__check svg { width: 11px; height: 11px; } .jt-choice__desc { color: var(--nx-text-2); font-size: 0.8125rem; line-height: 1.45; } .jt-choice__meta { display: inline-flex; align-self: flex-start; align-items: center; height: 21px; padding: 0 8px; border-radius: var(--nx-r-sm); background: var(--nx-surface-2); border: 1px solid var(--nx-border); color: var(--nx-text-3); font-size: 0.6875rem; font-weight: 550; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .jt-choice.is-selected { border-color: var(--nx-accent); background: #FFFCFA; box-shadow: 0 0 0 1px var(--nx-accent) inset; } .jt-choice.is-selected .jt-choice__name { color: var(--nx-accent); } .jt-choice.is-selected .jt-choice__icon { background: var(--nx-accent-tint); border-color: var(--nx-accent-tint-border); color: var(--nx-accent); } .jt-choice.is-selected .jt-choice__check { display: flex; } /* The real selects these cards drive stay in the DOM (and stay submitted) but are taken out of the visual flow. */ .jt-choice-driven { display: none !important; } /* Form rhythm: the Create Job form's label/field rows sat ~26px apart with a col-3 label column, which on a fifteen-field form pushed the submit button well below the fold. */ #kt_form .form-group.row { margin-bottom: 14px; align-items: center; } #kt_form .form-group.row > label.col-3 { padding-top: 0; margin-bottom: 0; } /* Card header with a supporting line under the title (reference's "New Shipment / Create Shipment in under 90 seconds" pattern). */ .jt-card-sub { color: var(--nx-text-2); font-size: 0.8125rem; font-weight: 450; margin-top: 3px; letter-spacing: -0.005em; } /* Scoped to the stacked (title + supporting line) variant only. On most cards in this app `.card-title` IS the

itself rather than a wrapper around one, so making it a column flex container top-aligned the heading against the header's 60px box instead of centring it -- confirmed on screen before this was scoped. */ .card > .card-header .card-title.jt-title-stack { flex-direction: column; align-items: flex-start; justify-content: center; } .card > .card-header { align-items: center; } /* ================================================================ 18. DataTables chrome, continued ================================================================ */ /* "Search:" as a real search field with room for an icon, rather than a bare label + input pair. The icon is drawn on the label so no markup change is needed in the ~20 pages that build these tables. */ .dataTables_filter { margin: 0; } /* The literal "Search:" text node is removed by assets/js/custom/jt-tables.js; this only has to lay out the input and place the icon inside it. */ .dataTables_filter label { position: relative; display: inline-flex; align-items: center; margin: 0; } .dataTables_filter label::before { content: ""; position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); background: no-repeat center/15px 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1AC' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; } .dataTables_filter label input[type="search"], .dataTables_filter input { margin: 0 !important; width: 268px; max-width: 100%; height: 38px !important; padding: 0 12px 0 32px !important; font-size: 0.8125rem !important; color: var(--nx-text) !important; border-radius: var(--nx-r) !important; } .dataTables_filter input::placeholder { color: var(--nx-text-3) !important; } /* Column headers are labels, not controls. Lists come from the server 15 rows at a time, so a header click only re-sorted the rows on screen -- of no use, and misleading. No pointer, no hover change, no arrows, no clicks (jt-tables.js also takes them out of the keyboard order). */ .table thead th.sorting, .table thead th.sorting_asc, .table thead th.sorting_desc, .table thead th.sorting_disabled { cursor: default !important; pointer-events: none; padding-right: 0.75rem !important; } .table thead th.sorting::before, .table thead th.sorting::after, .table thead th.sorting_asc::before, .table thead th.sorting_asc::after, .table thead th.sorting_desc::before, .table thead th.sorting_desc::after { display: none !important; } /* A header that holds a real control (a select-all checkbox) stays usable. */ .table thead th input, .table thead th label, .table thead th button, .table thead th a { pointer-events: auto; } /* Empty state: an empty table body was rendering as a bare stretch of white with no explanation. */ .table td.dataTables_empty, .table td.jt-empty { padding: 46px 20px !important; text-align: center !important; color: var(--nx-text-3) !important; font-size: 0.875rem !important; white-space: normal !important; } .dataTables_wrapper .dataTables_paginate { padding-top: 12px; } .dataTables_wrapper .row { align-items: center; } /* ================================================================ 19. Focus visibility ================================================================ The theme removes focus outlines broadly. These restore a visible, consistent keyboard focus ring on everything interactive, which the product needs regardless of how it looks. */ a:focus-visible, button:focus-visible, .btn:focus-visible, .jt-nav__item:focus-visible, .jt-choice:focus-visible, .jt-stat:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--nx-accent) !important; outline-offset: 2px !important; border-radius: var(--nx-r-sm); } #kt_aside a:focus-visible, .jt-nav__item:focus-visible { outline-color: #fff !important; outline-offset: -2px !important; } /* ================================================================ 20. Stat strip when it wraps ================================================================ Six columns at a 168px floor wrap to a second row below ~1180px. The right-hand border of whichever tile lands last in a row would otherwise dangle, and the wrapped row needs a top hairline. */ .jt-stats { row-gap: 0; } .jt-stat { border-bottom: 1px solid var(--nx-border); } .jt-stats > .jt-stat:last-child { border-right: none; } @media (min-width: 1181px) { .jt-stat { border-bottom: none; } } /* ================================================================ 21. Card header geometry + last purple holdouts ================================================================ */ /* The theme only makes `.card.card-custom > .card-header` a flex row; a plain `.card > .card-header` stays display:block, so vertical centring silently did nothing there and the title sat against the top of the 60px header (measured -23px off centre on all_client / agent_stat / all_transporter). Same geometry for both now. */ .card > .card-header, .card.card-custom > .card-header { display: flex !important; align-items: center !important; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; } .card > .card-header > .card-title, .card > .card-header > .card-toolbar { margin: 0 !important; } /* Remaining old-brand purple (#29156e). These come from jt-accent-theme.css (the generated accent layer); found by walking computed styles across every page rather than by reading that 108KB file. */ .text-primary, .text-primary i, i.text-primary, th.sorting_asc, th.sorting_desc, .table thead th.sorting_asc, .table thead th.sorting_desc { color: var(--nx-accent) !important; } th.sorting_asc, th.sorting_desc, .table thead th.sorting_asc, .table thead th.sorting_desc { border-color: var(--nx-border) !important; } /* Scroll-to-top button */ .scrolltop { background: var(--nx-accent) !important; border-radius: var(--nx-r) !important; box-shadow: var(--nx-shadow-md) !important; width: 36px !important; height: 36px !important; } .scrolltop:hover { background: var(--nx-accent-hover) !important; } .scrolltop .svg-icon svg [fill], .scrolltop i { color: #fff !important; fill: #fff !important; } .bg-primary, .btn.btn-primary.bg-primary { background-color: var(--nx-accent) !important; } .label.label-primary, .badge-primary { background-color: var(--nx-accent) !important; color: #fff !important; } .border-primary { border-color: var(--nx-accent) !important; } /* ================================================================ 22. Analytics charts ================================================================ See assets/js/custom/jt-charts.js and jt_chart_data.php. Replaces the axis-less sparklines the dashboards used to draw from the theme's hardcoded demo series. */ .jt-chart { position: relative; } .jt-chart__canvas { margin: 0 -4px; } .jt-chart__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--nx-border); } .jt-chart__delta { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--nx-surface-2); border: 1px solid var(--nx-border); color: var(--nx-text-2); font-size: 0.75rem; font-weight: 550; white-space: nowrap; } .jt-chart__delta svg { width: 12px; height: 12px; } .jt-chart__delta.is-up { background: var(--nx-green-tint); border-color: #CDEEDC; color: var(--nx-green); } .jt-chart__delta.is-down { background: var(--nx-red-tint); border-color: #F7CFD0; color: var(--nx-red); } .jt-chart__headline { margin-left: auto; display: flex; align-items: baseline; gap: 7px; color: var(--nx-text); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; } .jt-chart__headline-sub { color: var(--nx-text-2); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; } /* An empty chart is the shared empty state (jt-empty-state), centred in whatever height its card has -- side-by-side cards stretch to match, so it sits in the middle rather than at the top of a blank area. */ .jt-chart.is-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .jt-chart__empty { min-height: 220px; } .card-body:has(> .jt-chart.is-empty), .card-body:has(> div > .jt-chart.is-empty) { display: flex; flex-direction: column; } .card-body:has(> div > .jt-chart.is-empty) > div:has(> .jt-chart.is-empty) { flex: 1 1 auto; display: flex; flex-direction: column; } /* ApexCharts internals */ .apexcharts-legend-text { color: var(--nx-text-2) !important; font-family: 'Inter', sans-serif !important; } .apexcharts-tooltip.apexcharts-theme-dark { background: #14161A !important; border: none !important; border-radius: var(--nx-r) !important; box-shadow: 0 8px 24px rgba(0,0,0,.22) !important; } .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { background: rgba(255,255,255,.06) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; font-weight: 600 !important; font-size: 0.75rem !important; } .apexcharts-gridline { stroke: var(--nx-border) !important; } /* ---- Figure strip --------------------------------------------------- The four haulage counters used to sit two-to-a-row in the theme's .row/.col markup. In a full-width card that left most of the width empty and wrapped every label onto three lines. Four across, one line each, with the value leading. */ .jt-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--nx-border); } .jt-fig { display: flex; align-items: center; gap: 12px; min-width: 0; } .jt-fig__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; font-size: 17px; } .jt-fig__icon i { line-height: 1; } .jt-fig__icon.is-accent { background: rgba(242, 106, 27, .11); color: var(--nx-accent); } .jt-fig__icon.is-blue { background: rgba(46, 107, 230, .11); color: var(--nx-blue, #2E6BE6); } .jt-fig__icon.is-green { background: rgba(23, 162, 118, .11); color: #17A276; } .jt-fig__icon.is-violet { background: rgba(124, 92, 232, .11); color: #7C5CE8; } .jt-fig__body { min-width: 0; } .jt-fig__value { font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--nx-text-1, #14181F); font-variant-numeric: tabular-nums; } .jt-fig__label { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--nx-text-2, #6B7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1399px) { .jt-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .jt-figs { grid-template-columns: 1fr; } } /* The chart footer sat flush against the bottom edge of its card. */ .card > .card-body > .jt-chart:last-child .jt-chart__foot { padding-bottom: 2px; } .jt-chart__foot { margin-bottom: 0; } /* An empty chart should not reserve the space a populated one needs -- jt-charts.js clears the inline min-height on the container when it renders the empty state, and the state itself stays compact. */ .jt-chart.is-empty { min-height: 0 !important; } /* Tables that render no rows showed a header and then a blank card body, which reads as a failed load. jt-tables.js appends this. */ .jt-empty-row td { padding: 34px 16px !important; text-align: center; border-top: 0 !important; } .jt-empty-row__title { font-size: 0.875rem; font-weight: 600; color: var(--nx-text-2); } .jt-empty-row__sub { margin-top: 3px; font-size: 0.8125rem; font-weight: 400; color: var(--nx-text-3); } /* ---- Scroll caps ---------------------------------------------------- Panels that list rows grow without bound as data accumulates: the dashboard's attention lists, the client and agent tables, the transporter stats. Several pages already capped theirs with an inline `max-height: 420px; overflow-y: auto`, which is why the same card scrolled on one page and pushed the footer off-screen on another. This is that cap as a class, with a scrollbar that does not look like a 2009 desktop widget. */ .jt-scroll, .card > .card-body > [style*="overflow-y"] { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--nx-border-strong, #D3D7DE) transparent; } .jt-scroll--sm { max-height: 300px; } .jt-scroll::-webkit-scrollbar, .card > .card-body > [style*="overflow-y"]::-webkit-scrollbar { width: 8px; height: 8px; } .jt-scroll::-webkit-scrollbar-track, .card > .card-body > [style*="overflow-y"]::-webkit-scrollbar-track { background: transparent; } .jt-scroll::-webkit-scrollbar-thumb, .card > .card-body > [style*="overflow-y"]::-webkit-scrollbar-thumb { background: #D3D7DE; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } .jt-scroll:hover::-webkit-scrollbar-thumb, .card > .card-body > [style*="overflow-y"]:hover::-webkit-scrollbar-thumb { background: #B9BFC9; background-clip: content-box; } /* A sticky header keeps the column names in view while the body of a capped table scrolls under them. */ .jt-scroll > table > thead th, .jt-scroll table.table > thead th { position: sticky; top: 0; z-index: 2; background: var(--nx-surface); } /* ---- Type scale ----------------------------------------------------- The theme's display sizes (font-size-h1..h3, 22.75px divs) were sized for a marketing page, not for figures sitting in a 300px-wide card. Brought down one step each so a number reads as a number rather than as a headline. */ .content .font-size-h1 { font-size: 24px !important; } .content .font-size-h2 { font-size: 20px !important; } .content .font-size-h3 { font-size: 18px !important; } .content .font-size-h4 { font-size: 16px !important; } .content .font-size-h5 { font-size: 15px !important; } .content .font-size-h6 { font-size: 14px !important; } .content h1 { font-size: 24px !important; } .content h2 { font-size: 20px !important; } .content h3:not(.card-title) { font-size: 17px !important; } .content h4:not(.card-title) { font-size: 15px !important; } .content h5:not(.card-title) { font-size: 14px !important; } .content .display-1, .content .display-2, .content .display-3, .content .display-4 { font-size: 28px !important; letter-spacing: -0.03em; } .jt-tile__value { font-size: 20px !important; } .jt-fig__value { font-size: 18px; } /* ---- Vertical rhythm ------------------------------------------------ The theme sprinkles mb-10/mt-10/py-10 (40px) and stray
runs between blocks inside cards, which on a dense operations screen reads as the layout having come apart. Inside a card body, cap the largest steps. */ .card > .card-body .mb-10 { margin-bottom: 1.5rem !important; } .card > .card-body .mt-10 { margin-top: 1.5rem !important; } .card > .card-body .my-10 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .card > .card-body .py-10 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .card > .card-body br + br { display: none; } /* Every table panel scrolls once it outgrows its card, instead of stretching the card until the page footer is pushed off-screen. The theme's .table-responsive only ever handled the horizontal axis. */ .card > .card-body .table-responsive { max-height: 460px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #D3D7DE transparent; } .card > .card-body .table-responsive > table > thead th, .card > .card-body .table-responsive > table > thead td { position: sticky; top: 0; z-index: 2; background: var(--nx-surface); box-shadow: inset 0 -1px 0 var(--nx-border); } .card > .card-body .table-responsive::-webkit-scrollbar { width: 8px; height: 8px; } .card > .card-body .table-responsive::-webkit-scrollbar-track { background: transparent; } .card > .card-body .table-responsive::-webkit-scrollbar-thumb { background: #D3D7DE; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } .card > .card-body .table-responsive:hover::-webkit-scrollbar-thumb { background: #B9BFC9; background-clip: content-box; } /* ---- Progress cell -------------------------------------------------- Was: a percentage and the literal word "Progress" pushed to opposite ends of a ~90px table column (so the word wrapped under the number), with a red bar beneath it at every value -- a job at 96% looked as alarming as one at 3%. Now one line: bar, then figure, coloured by how far along the job actually is. */ .jt-progress { display: flex; align-items: center; gap: 8px; min-width: 96px; } .jt-progress__track { flex: 1 1 auto; height: 6px; min-width: 44px; border-radius: 999px; background: var(--nx-border); overflow: hidden; } .jt-progress__bar { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; } .jt-progress__bar.is-low { background: #E5484D; } .jt-progress__bar.is-mid { background: var(--nx-accent); } .jt-progress__bar.is-high { background: #17A276; } .jt-progress__value { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--nx-text-2); font-variant-numeric: tabular-nums; } /* ---- DataTables footer ---------------------------------------------- The length control renders as the bare text "Show", a