/* ===== RESET & BASE ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* =========================================================================== Theme tokens. These five carry the whole UI, and their names describe where they came from rather than what they do: --white the surface things sit ON (cards, sidebar, header) --lanexis-grey the ground behind those surfaces (page background) --lanexis-grey-border every hairline --lanexis-grey-text secondary / muted text --lanexis-dark primary text Dark mode redefines those five roles rather than renaming them. Hundreds of rules across the app and a dozen page templates already reference them, so the whole product flips from one block. The names stay literal-sounding in dark mode ("--white" is not white) — worth knowing, but renaming them would touch every file for no visual gain. Role-named aliases are provided below for anything written from here on. =========================================================================== */ :root { --lanexis-red: #C8102E; --lanexis-red-dark: #A00D24; --lanexis-red-light: #F5E6E8; --lanexis-grey: #F4F6F9; --lanexis-grey-border: #E2E6EE; --lanexis-grey-text: #6B7A8F; --lanexis-dark: #1A2634; --white: #FFFFFF; --shadow: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.10); --radius: 12px; --transition: 0.2s ease; --sidebar-width: 240px; --header-height: 64px; /* Role-named aliases — prefer these in new code. */ --surface: var(--white); --surface-sunk: var(--lanexis-grey); --border: var(--lanexis-grey-border); --text: var(--lanexis-dark); --text-muted: var(--lanexis-grey-text); /* Semantic states. Held as tokens so dark mode can lift them off a dark ground without every status pill in the app having to be revisited. */ --ok-bg: #ECF9F4; --ok-fg: #0E7A48; --warn-bg: #FEF5E2; --warn-fg: #8A5A00; --bad-bg: #FDEEF0; --bad-fg: #A00D24; --info-bg: #EAF2FD; --info-fg: #1A4F8A; /* Tint used for hover rows and subtle fills. */ --hover-tint: rgba(26, 38, 52, .035); --scrollbar-thumb: #cfd6e4; --scrollbar-track: #eef1f6; /* Brand used as a FILL, and the text that sits on it. Kept apart from --lanexis-red so dark mode can lighten the accent for legibility on a dark ground without washing out button labels. */ --brand-fill: var(--lanexis-red); --brand-fill-hover: var(--lanexis-red-dark); --on-brand: #FFFFFF; color-scheme: light; } /* ── Dark mode ──────────────────────────────────────────────────────────── Applied by [data-theme="dark"] on , set by theme.js from the saved preference or the OS setting. The attribute is written before first paint so the page never flashes light on the way to dark. The dark ground is a desaturated navy rather than pure black: the brand red sits badly on #000, and large fields of true black make thin type look thinner than it is. */ :root[data-theme="dark"] { --lanexis-red: #FF5C74; --lanexis-red-dark: #E23E58; --lanexis-red-light: #3A1A21; --lanexis-grey: #10151C; /* page ground */ --lanexis-grey-border: #2A323D; /* hairlines */ --lanexis-grey-text: #93A1B3; /* muted text */ --lanexis-dark: #E4EAF1; /* primary text */ --white: #171D26; /* card surface */ --shadow: 0 2px 12px rgba(0, 0, 0, .45); --shadow-hover: 0 4px 20px rgba(0, 0, 0, .55); --ok-bg: #10352A; --ok-fg: #5FD3A6; --warn-bg: #35290F; --warn-fg: #E9B75C; --bad-bg: #3A1A21; --bad-fg: #FF8FA1; --info-bg: #16273F; --info-fg: #8AB6F0; --hover-tint: rgba(255, 255, 255, .045); --scrollbar-thumb: #333D4A; --scrollbar-track: #1B222C; /* The fill keeps close to the real brand red — white label text still reads on it — while --lanexis-red above lightens for use as accent text and icons against the dark ground. */ --brand-fill: #C8102E; --brand-fill-hover: #A00D24; --on-brand: #FFFFFF; color-scheme: dark; } /* ── Logo switching ─────────────────────────────────────────────────────── Default (no data-theme attribute = light mode): show light logo. Explicit data-theme="dark": show dark logo. theme.js sets data-theme="dark" or removes the attribute entirely — it never sets data-theme="light" — so the selector must key on dark. */ .logo-light { display: block; } .logo-dark { display: none; } :root[data-theme="dark"] .logo-dark { display: block; } :root[data-theme="dark"] .logo-light { display: none; } /* Visually hidden but read aloud — the toggle's icon carries no text. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Ease the surfaces across a theme switch. Scoped to the few properties that actually change, and to structural elements — a blanket `transition: all` here makes every hover and dropdown in the app feel sluggish. */ body, .sidebar, .navbar, .card, .stat-widget, .modal-box { transition: background-color .18s ease, border-color .18s ease, color .18s ease; } @media (prefers-reduced-motion: reduce) { body, .sidebar, .header, .card, .stat-widget, .modal-box { transition: none; } } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--lanexis-grey); color: var(--lanexis-dark); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: inherit; border: none; background: none; } /* ===== SCROLLBAR ===== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--lanexis-grey); } ::-webkit-scrollbar-thumb { background: var(--lanexis-grey-border); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb); } /* ===== LAYOUT ===== */ .app { display: flex; flex-direction: column; min-height: 100vh; } .app-body { flex: 1; display: flex; min-height: 0; } /* ===== SIDEBAR ===== */ .sidebar { width: var(--sidebar-width); background: var(--white); border-right: 1px solid var(--lanexis-grey-border); height: calc(100vh - var(--header-height)); position: sticky; top: var(--header-height); display: flex; flex-direction: column; transition: transform 0.3s ease; z-index: 100; overflow: hidden; flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; justify-content: flex-end; padding: 8px 12px; border-bottom: 1px solid var(--lanexis-grey-border); min-height: 48px; flex-shrink: 0; } .sidebar-brand .area-badge { display: none; } /* ===== SIDEBAR COLLAPSE BUTTON ===== */ .sidebar-collapse-btn { flex-shrink: 0; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lanexis-grey-text); font-size: 13px; cursor: pointer; border: none; background: transparent; padding: 0; transition: background-color var(--transition), color var(--transition); } .sidebar-collapse-btn:hover { background: var(--hover-tint); color: var(--lanexis-dark); } .sidebar-collapse-btn i { transition: transform 0.25s ease; } /* Mobile: hamburger opens the drawer; collapse btn is desktop-only */ @media (max-width: 768px) { .sidebar-collapse-btn { display: none; } } .sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 12px 20px; } .sidebar-nav .nav-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--lanexis-grey-text); padding: 8px 12px 6px; } .sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; color: var(--lanexis-grey-text); font-size: 14px; font-weight: 500; transition: var(--transition); margin-bottom: 2px; } .sidebar-nav a i { width: 20px; text-align: center; font-size: 16px; } .sidebar-nav a:hover { background: var(--lanexis-grey); color: var(--lanexis-dark); } .sidebar-nav a.active { background: var(--lanexis-red-light); color: var(--lanexis-red); font-weight: 600; } .sidebar-nav a.active i { color: var(--lanexis-red); } .sidebar-footer { padding: 14px 20px; border-top: 1px solid var(--lanexis-grey-border); font-size: 13px; color: var(--lanexis-grey-text); display: flex; align-items: center; gap: 10px; } a.sidebar-footer { transition: var(--transition); cursor: pointer; } a.sidebar-footer:hover { background: var(--lanexis-grey); } .sidebar-footer .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--lanexis-red-light); color: var(--lanexis-red); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; overflow: hidden; } .sidebar-footer .avatar.has-photo { background-size: cover; background-position: center; font-size: 0; color: transparent; } /* ===== DESKTOP SIDEBAR COLLAPSE ===== Width transition is separate from the mobile transform so each animation only fires in the scenario that needs it. */ .sidebar { transition: width 0.25s ease, transform 0.3s ease; } /* Only apply collapsed layout on real desktop — not inside the mobile off-canvas drawer (where the sidebar width is irrelevant because the element is fixed and off-screen). */ @media (min-width: 769px) { html[data-sidebar-collapsed="true"] .sidebar { width: 80px; } html[data-sidebar-collapsed="true"] .sidebar-brand { justify-content: center; padding: 8px; } html[data-sidebar-collapsed="true"] .sidebar-collapse-btn { margin-left: 0; width: 28px; height: 28px; } /* Chevron flips to point right when collapsed */ html[data-sidebar-collapsed="true"] .sidebar-collapse-btn i { transform: rotate(180deg); } html[data-sidebar-collapsed="true"] .sidebar-nav .nav-label { display: none; } html[data-sidebar-collapsed="true"] .sidebar-nav a { justify-content: center; padding: 10px; } html[data-sidebar-collapsed="true"] .sidebar-nav a i { width: auto; font-size: 18px; } html[data-sidebar-collapsed="true"] .sidebar-nav a .nav-text { display: none; } html[data-sidebar-collapsed="true"] .sidebar-nav a .nav-soon { display: none; } html[data-sidebar-collapsed="true"] .sidebar-footer { justify-content: center; padding: 14px 12px; } html[data-sidebar-collapsed="true"] .sidebar-footer > div:last-child { display: none; } } /* ===== MAIN CONTENT ===== */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ===== GLOBAL NAVBAR ===== */ .navbar { height: var(--header-height); background: var(--white); border-bottom: 1px solid var(--lanexis-grey-border); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 200; flex-shrink: 0; } .header-left { display: flex; align-items: center; gap: 16px; } .header-left .logo { display: flex; align-items: center; } .header-left .logo img { height: 32px; width: auto; max-width: 160px; object-fit: contain; filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.6)); } .header-left .hamburger { display: block; font-size: 20px; color: var(--lanexis-grey-text); padding: 4px; background: none; border: none; cursor: pointer; line-height: 1; } /* Desktop: hamburger hidden; sidebar collapse btn handles toggling */ @media (min-width: 769px) { .header-left .hamburger { display: none; } } .header-right { display: flex; align-items: center; gap: 12px; } .header-right .icon-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lanexis-grey-text); font-size: 18px; transition: var(--transition); position: relative; cursor: pointer; background: transparent; border: none; padding: 0; z-index: 9999; pointer-events: auto; } .header-right .icon-btn:hover { background: var(--lanexis-grey); } /* Unread badge. An 8px dot said only "something happened" — it carried no count, was easy to miss against the bell, and gave no reason to click. It now shows the number, and pulses once when that number goes up. */ .header-right .icon-btn .notif-badge { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; background: var(--brand-fill); color: var(--on-brand); border-radius: 9px; border: 2px solid var(--surface); font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 0 rgba(200, 16, 46, .55); } .header-right .icon-btn .notif-badge[hidden] { display: none; } /* Fires only when the count increases, so a page load with existing unread notifications does not animate for no reason. */ .header-right .icon-btn .notif-badge.is-new { animation: notifPulse 1.4s ease-out 2; } @keyframes notifPulse { 0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .55); } 70% { box-shadow: 0 0 0 9px rgba(200, 16, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); } } @media (prefers-reduced-motion: reduce) { .header-right .icon-btn .notif-badge.is-new { animation: none; } } /* The bell itself leans in when there is something to read. */ .header-right .icon-btn.has-unread i { color: var(--lanexis-red); } .header-right .user-info { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--lanexis-grey-border); } .header-right .user-info .name { font-size: 14px; font-weight: 500; } .header-right .user-info .role { font-size: 12px; color: var(--lanexis-grey-text); } .header-right .user-info .avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-fill); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; overflow: hidden; } .header-right .user-info .avatar-sm.has-photo { background-size: cover; background-position: center; font-size: 0; color: transparent; } /* ===== PAGE CONTENT ===== */ .page-content { padding: 24px 28px 40px; flex: 1; } /* ===== PAGE SECTIONS (show/hide) ===== */ .page { display: none; animation: fadeUp 0.3s ease; } .page.active { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ===== CARDS & WIDGETS ===== */ .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--lanexis-grey-border); transition: var(--transition); } .card:hover { box-shadow: var(--shadow-hover); } .card-header { padding: 18px 22px; border-bottom: 1px solid var(--lanexis-grey-border); display: flex; align-items: center; justify-content: space-between; } .card-header h3 { font-size: 16px; font-weight: 600; } .card-body { padding: 20px 22px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* ===== DASHBOARD WIDGETS ===== */ .stat-widget { padding: 18px 20px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--lanexis-grey-border); box-shadow: var(--shadow); transition: var(--transition); } .stat-widget:hover { box-shadow: var(--shadow-hover); } .stat-widget .label { font-size: 13px; color: var(--lanexis-grey-text); font-weight: 500; display: flex; align-items: center; gap: 6px; } .stat-widget .value { font-size: 28px; font-weight: 700; margin-top: 4px; } .stat-widget .sub { font-size: 13px; color: var(--lanexis-grey-text); margin-top: 2px; } .stat-widget .icon-circle { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; } .stat-widget .top-row { display: flex; justify-content: space-between; align-items: flex-start; } .stat-widget .badge-status { font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 20px; } .badge-status.overdue { background: var(--bad-bg); color: var(--bad-fg); } .badge-status.due { background: var(--warn-bg); color: var(--warn-fg); } .badge-status.paid { background: var(--ok-bg); color: var(--ok-fg); } .badge-status.active { background: var(--info-bg); color: var(--info-fg); } .badge-status.won { background: var(--ok-bg); color: var(--ok-fg); } .badge-status.lost { background: var(--bad-bg); color: var(--bad-fg); } .badge-status.on-hold { background: var(--warn-bg); color: var(--warn-fg); } .stat-widget.red-accent { border-left: 4px solid var(--lanexis-red); } .stat-widget.grey-accent { border-left: 4px solid var(--lanexis-grey-border); } /* ===== TABLES ===== */ .table-wrap { overflow-x: auto; margin-top: 4px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } table th { text-align: left; padding: 12px 14px; background: var(--lanexis-grey); font-weight: 600; color: var(--lanexis-grey-text); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--lanexis-grey-border); } table td { padding: 12px 14px; border-bottom: 1px solid var(--lanexis-grey-border); vertical-align: middle; } table tr:hover td { background: var(--surface-sunk); } .actions-cell { display: flex; gap: 6px; flex-wrap: wrap; } .actions-cell .btn-icon { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--lanexis-grey-text); transition: var(--transition); font-size: 14px; } .actions-cell .btn-icon:hover { background: var(--lanexis-grey); color: var(--lanexis-dark); } .actions-cell .btn-icon.download:hover { color: var(--lanexis-red); } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 8px; font-weight: 500; font-size: 14px; transition: var(--transition); border: 1px solid transparent; } .btn-primary { background: var(--brand-fill); color: var(--on-brand); } .btn-primary:hover { background: var(--brand-fill-hover); } .btn-outline { background: transparent; border-color: var(--lanexis-grey-border); color: var(--lanexis-dark); } .btn-outline:hover { background: var(--lanexis-grey); } .btn-ghost { color: var(--lanexis-grey-text); } .btn-ghost:hover { color: var(--lanexis-dark); background: var(--lanexis-grey); } .btn-sm { padding: 5px 12px; font-size: 13px; } .btn-xs { padding: 3px 10px; font-size: 12px; border-radius: 6px; } /* ===== FORMS ===== */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 4px; } .form-group label .required { color: var(--lanexis-red); } .form-control { width: 100%; padding: 10px 14px; border: 1px solid var(--lanexis-grey-border); border-radius: 8px; font-size: 14px; font-family: inherit; transition: var(--transition); background: var(--white); } .form-control:focus { outline: none; border-color: var(--lanexis-red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.10); } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7A8F' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ===== FILTER BAR ===== */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 18px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--lanexis-grey-border); } .filter-bar .filter-group { display: flex; align-items: center; gap: 8px; } .filter-bar .filter-group label { font-size: 13px; font-weight: 500; color: var(--lanexis-grey-text); } .filter-bar .filter-group select, .filter-bar .filter-group input { padding: 6px 12px; border: 1px solid var(--lanexis-grey-border); border-radius: 6px; font-size: 13px; background: var(--white); } .filter-bar .filter-group select:focus, .filter-bar .filter-group input:focus { outline: none; border-color: var(--lanexis-red); } .filter-bar .spacer { flex: 1; } /* ===== SEARCH ===== */ .search-box { display: flex; align-items: center; background: var(--white); border: 1px solid var(--lanexis-grey-border); border-radius: 8px; padding: 0 14px; transition: var(--transition); min-width: 200px; } .search-box:focus-within { border-color: var(--lanexis-red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.08); } .search-box input { border: none; padding: 8px 10px; font-size: 14px; flex: 1; background: transparent; font-family: inherit; } .search-box input:focus { outline: none; } .search-box i { color: var(--lanexis-grey-text); font-size: 16px; } /* ===== TABS ===== */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lanexis-grey-border); margin-bottom: 20px; flex-wrap: wrap; } .tabs .tab { padding: 10px 18px; font-weight: 500; font-size: 14px; color: var(--lanexis-grey-text); border-bottom: 2px transparent solid; transition: var(--transition); cursor: pointer; } .tabs .tab:hover { color: var(--lanexis-dark); } .tabs .tab.active { color: var(--lanexis-red); border-bottom-color: var(--lanexis-red); } /* ===== EMPTY STATE ===== */ .empty-state { text-align: center; padding: 48px 20px; color: var(--lanexis-grey-text); } .empty-state i { font-size: 48px; color: var(--lanexis-grey-border); margin-bottom: 12px; } .empty-state h4 { font-size: 18px; color: var(--lanexis-dark); margin-bottom: 4px; } /* ===== PDF PREVIEW PLACEHOLDER ===== */ .pdf-preview { background: var(--lanexis-grey); border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 16px; border: 1px dashed var(--lanexis-grey-border); } .pdf-preview i { font-size: 36px; color: var(--lanexis-red); } .pdf-preview .info { flex: 1; } .pdf-preview .info .title { font-weight: 500; } .pdf-preview .info .meta { font-size: 13px; color: var(--lanexis-grey-text); } /* ===== TECH REQUEST FORM ===== */ .request-type-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .request-type-selector .type-btn { padding: 6px 16px; border-radius: 20px; border: 1px solid var(--lanexis-grey-border); font-size: 13px; font-weight: 500; transition: var(--transition); background: var(--white); } .request-type-selector .type-btn:hover { border-color: var(--lanexis-red); color: var(--lanexis-red); } .request-type-selector .type-btn.active { background: var(--brand-fill); color: var(--on-brand); border-color: var(--lanexis-red); } /* ===== PRODUCT CARD ===== */ .product-card { background: var(--white); border: 1px solid var(--lanexis-grey-border); border-radius: var(--radius); padding: 18px 20px; transition: var(--transition); } .product-card:hover { box-shadow: var(--shadow-hover); } .product-card .name { font-weight: 600; font-size: 15px; } .product-card .desc { font-size: 13px; color: var(--lanexis-grey-text); margin: 4px 0 10px; } .product-card .tags { display: flex; flex-wrap: wrap; gap: 4px; } .product-card .tags span { font-size: 11px; background: var(--lanexis-grey); padding: 2px 10px; border-radius: 12px; color: var(--lanexis-grey-text); } .product-card .actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } /* ===== NOTIFICATION DROPDOWN (demo) ===== */ .notif-dropdown { position: absolute; top: 48px; right: 0; width: 340px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-hover); border: 1px solid var(--lanexis-grey-border); display: none; overflow: hidden; z-index: 200; } .notif-dropdown.open { display: block; } .notif-dropdown .notif-header { padding: 12px 18px; border-bottom: 1px solid var(--lanexis-grey-border); font-weight: 600; display: flex; justify-content: space-between; } .notif-dropdown .notif-list { max-height: 380px; overflow-y: auto; } .notif-dropdown .notif-item { padding: 14px 18px; border-bottom: 1px solid var(--lanexis-grey-border); font-size: 13px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: var(--transition); } .notif-dropdown .notif-item:last-child { border-bottom: none; } .notif-dropdown .notif-item:hover { background: var(--lanexis-grey); } .notif-dropdown .notif-item--unread { background: rgba(200, 16, 46, 0.04); } .notif-dropdown .notif-item--unread .notif-item-title { color: var(--lanexis-red); font-weight: 600; } .notif-dropdown .notif-item-title { font-weight: 500; color: var(--lanexis-dark); } .notif-dropdown .notif-item-msg { color: var(--lanexis-grey-text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; } .notif-dropdown .notif-empty { padding: 40px 20px; text-align: center; color: var(--lanexis-grey-text); } .notif-dropdown .notif-empty i { font-size: 32px; margin-bottom: 12px; opacity: 0.3; display: block; } .notif-dropdown .notif-footer { padding: 12px; border-top: 1px solid var(--lanexis-grey-border); text-align: center; background: var(--surface); } .notif-dropdown .notif-mark-all-btn { background: transparent; border: none; font-size: 13px; font-weight: 500; color: var(--lanexis-dark); cursor: pointer; transition: var(--transition); } .notif-dropdown .notif-mark-all-btn:hover { color: var(--lanexis-red); text-decoration: underline; } /* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .sidebar { position: fixed; top: var(--header-height); left: 0; bottom: 0; transform: translateX(-100%); width: 280px; z-index: 999; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08); } .sidebar.open { transform: translateX(0); } .overlay { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.25); z-index: 998; } .overlay.open { display: block; } .navbar { padding: 0 16px; } .page-content { padding: 16px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-bar .filter-group { flex-wrap: wrap; } .filter-bar .spacer { display: none; } .search-box { min-width: unset; } .header-right .user-info .name { display: none; } .header-right .user-info .role { display: none; } .notif-dropdown { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; } } @media (max-width: 480px) { .stat-widget .value { font-size: 22px; } table { font-size: 13px; } table th, table td { padding: 8px 10px; } .card-header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; } .card-body { padding: 14px 16px; } } /* ============================================================ TOM SELECT — dark mode overrides Tom Select ships its own light-only CSS; these rules re-theme every element it renders so the dropdown matches the portal. ============================================================ */ :root[data-theme="dark"] .ts-wrapper .ts-control, :root[data-theme="dark"] .ts-wrapper.single.input-active .ts-control { background: var(--white) !important; border-color: var(--lanexis-grey-border) !important; color: var(--lanexis-dark) !important; box-shadow: none !important; } :root[data-theme="dark"] .ts-wrapper .ts-control input { color: var(--lanexis-dark) !important; } :root[data-theme="dark"] .ts-wrapper .ts-control input::placeholder { color: var(--lanexis-grey-text) !important; } :root[data-theme="dark"] .ts-wrapper .ts-control .item { color: var(--lanexis-dark) !important; } :root[data-theme="dark"] .ts-wrapper .ts-control .remove { border-color: var(--lanexis-grey-border) !important; color: var(--lanexis-grey-text) !important; } :root[data-theme="dark"] .ts-dropdown { background: var(--white) !important; border-color: var(--lanexis-grey-border) !important; color: var(--lanexis-dark) !important; box-shadow: var(--shadow-hover) !important; } :root[data-theme="dark"] .ts-dropdown .option { color: var(--lanexis-dark) !important; } :root[data-theme="dark"] .ts-dropdown .option:hover, :root[data-theme="dark"] .ts-dropdown .option.active { background: var(--lanexis-grey) !important; color: var(--lanexis-dark) !important; } :root[data-theme="dark"] .ts-dropdown .no-results, :root[data-theme="dark"] .ts-dropdown .create { background: var(--white) !important; color: var(--lanexis-grey-text) !important; } :root[data-theme="dark"] .ts-dropdown .create:hover { background: var(--lanexis-grey) !important; color: var(--lanexis-dark) !important; } :root[data-theme="dark"] .ts-dropdown-header { background: var(--lanexis-grey) !important; border-color: var(--lanexis-grey-border) !important; } /* ============================================================ FLATPICKR — dark mode overrides Flatpickr's calendar is appended to and uses its own hard-coded colours; override every surface to match the theme. ============================================================ */ :root[data-theme="dark"] .flatpickr-calendar { background: var(--white) !important; border-color: var(--lanexis-grey-border) !important; box-shadow: var(--shadow-hover) !important; color: var(--lanexis-dark) !important; } :root[data-theme="dark"] .flatpickr-months, :root[data-theme="dark"] .flatpickr-month { background: var(--white) !important; color: var(--lanexis-dark) !important; fill: var(--lanexis-dark) !important; } :root[data-theme="dark"] .flatpickr-weekdays, :root[data-theme="dark"] .flatpickr-weekday { background: var(--white) !important; color: var(--lanexis-grey-text) !important; } :root[data-theme="dark"] .flatpickr-days { border-color: var(--lanexis-grey-border) !important; } :root[data-theme="dark"] .flatpickr-day { color: var(--lanexis-dark) !important; } :root[data-theme="dark"] .flatpickr-day:hover, :root[data-theme="dark"] .flatpickr-day:focus { background: var(--lanexis-grey) !important; border-color: var(--lanexis-grey-border) !important; } :root[data-theme="dark"] .flatpickr-day.selected, :root[data-theme="dark"] .flatpickr-day.startRange, :root[data-theme="dark"] .flatpickr-day.endRange { background: var(--brand-fill) !important; border-color: var(--brand-fill) !important; color: var(--on-brand) !important; } :root[data-theme="dark"] .flatpickr-day.today:not(.selected) { border-color: var(--lanexis-red) !important; color: var(--lanexis-red) !important; } :root[data-theme="dark"] .flatpickr-day.flatpickr-disabled, :root[data-theme="dark"] .flatpickr-day.prevMonthDay, :root[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--lanexis-grey-text) !important; opacity: 0.45; } :root[data-theme="dark"] .numInputWrapper span { border-color: var(--lanexis-grey-border) !important; } :root[data-theme="dark"] .numInputWrapper span svg { fill: var(--lanexis-grey-text) !important; } :root[data-theme="dark"] .numInput, :root[data-theme="dark"] .flatpickr-current-month .cur-year, :root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--lanexis-dark) !important; background: transparent !important; } :root[data-theme="dark"] .flatpickr-prev-month svg, :root[data-theme="dark"] .flatpickr-next-month svg { fill: var(--lanexis-dark) !important; } :root[data-theme="dark"] .flatpickr-prev-month:hover svg, :root[data-theme="dark"] .flatpickr-next-month:hover svg { fill: var(--lanexis-red) !important; } :root[data-theme="dark"] .flatpickr-time { background: var(--white) !important; border-color: var(--lanexis-grey-border) !important; color: var(--lanexis-dark) !important; } /* ===== ADMIN SIDEBAR STYLING ===== */ .admin-badge { background: var(--brand-fill); color: var(--on-brand); font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 12px; margin-left: auto; } /* ===== MISC ===== */ .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-2 { gap: 8px; } .gap-4 { gap: 16px; } .mt-4 { margin-top: 16px; } .mb-4 { margin-bottom: 16px; } .text-muted { color: var(--lanexis-grey-text); font-size: 13px; } .text-red { color: var(--lanexis-red); } .fw-600 { font-weight: 600; } .w-full { width: 100%; } /* ===== QUOTE TRACKER STATUS BADGES ===== */ .status-badge { display: inline-block; padding: 2px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; } .status-badge.active { background: var(--info-bg); color: var(--info-fg); } .status-badge.won { background: var(--ok-bg); color: var(--ok-fg); } .status-badge.lost { background: var(--bad-bg); color: var(--bad-fg); } .status-badge.on-hold { background: var(--warn-bg); color: var(--warn-fg); } .status-badge.paid { background: var(--ok-bg); color: var(--ok-fg); } .status-badge.due { background: var(--warn-bg); color: var(--warn-fg); } .status-badge.overdue { background: var(--bad-bg); color: var(--bad-fg); } .status-badge.partial { background: var(--warn-bg); color: var(--warn-fg); } /* utility */ .text-truncate { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; } .clickable-row { cursor: pointer; } .clickable-row:hover td { background: var(--surface-sunk); } /* login page simulation */ .login-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(6px); align-items: center; justify-content: center; } .login-overlay.open { display: flex; } .login-box { background: var(--white); border-radius: var(--radius); padding: 40px 44px; max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } .login-box .logo { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 6px; } .login-box .logo span { color: var(--lanexis-red); } .login-box .sub { text-align: center; color: var(--lanexis-grey-text); margin-bottom: 24px; font-size: 14px; } .login-box .form-group { margin-bottom: 18px; } .login-box .btn-primary { width: 100%; justify-content: center; padding: 12px; } .login-box .footer-links { display: flex; justify-content: space-between; font-size: 13px; margin-top: 12px; } .login-box .footer-links a { color: var(--lanexis-red); font-weight: 500; } .login-box .footer-links a:hover { text-decoration: underline; } .login-box .demo-note { background: var(--lanexis-grey); border-radius: 8px; padding: 12px 16px; font-size: 13px; margin-top: 16px; color: var(--lanexis-grey-text); text-align: center; } .login-box .demo-note strong { color: var(--lanexis-dark); } /* ============================================================ PAGE HEADER (page title + subtitle + right-aligned page actions) ============================================================ */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .page-title { font-size: 20px; font-weight: 600; color: var(--lanexis-dark); margin: 0 0 2px; line-height: 1.25; } .page-header .page-subtitle { font-size: 14px; color: var(--lanexis-grey-text); margin: 0; } .page-header .page-actions { display: flex; align-items: center; gap: 10px; padding-top: 4px; } /* ============================================================ MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(26, 38, 52, 0.45); backdrop-filter: blur(2px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; } .modal-overlay.open { display: flex; } .modal-box { background: var(--white); border-radius: var(--radius); width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-hover); overflow: hidden; } /* A

wrapping header/body/footer must itself become the flex column, otherwise it grows past max-height, .modal-body never scrolls, and the footer (Save/Cancel) is pushed below the viewport. min-height:0 lets the body actually shrink instead of being floored at its content height. */ .modal-box > form { display: flex; flex-direction: column; min-height: 0; flex: 1; } /* Wider variant for form-heavy modals (e.g. the user + permissions matrix). */ .modal-box--wide { max-width: 900px; } .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--lanexis-grey-border); display: flex; justify-content: space-between; align-items: center; background: var(--lanexis-grey); flex-shrink: 0; } .modal-header h3 { font-size: 16px; font-weight: 600; color: var(--lanexis-dark); margin: 0; } .modal-body { padding: 20px; overflow-y: auto; min-height: 0; flex: 1; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--lanexis-grey-border); background: var(--white); flex-shrink: 0; } /* ============================================================ PERMISSION MATRIX (accordion inside the user modal) ============================================================ */ .perm-section { margin-top: 8px; } .perm-section > label { display: block; font-size: 13px; font-weight: 600; color: var(--lanexis-dark); padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--lanexis-grey-border); } .perm-list { display: flex; flex-direction: column; gap: 10px; } .perm-app { border: 1px solid var(--lanexis-grey-border); border-radius: 8px; overflow: hidden; } .perm-app-header { background: var(--lanexis-grey); padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--lanexis-dark); cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; } .perm-app-header .chevron { margin-left: auto; transition: transform var(--transition); font-size: 12px; color: var(--lanexis-grey-text); } .perm-app.open .perm-app-header .chevron { transform: rotate(180deg); } .perm-app-body { padding: 12px; display: none; background: var(--white); } .perm-app.open .perm-app-body { display: block; } .perm-tab { margin-bottom: 12px; } .perm-tab:last-child { margin-bottom: 0; } .perm-tab strong { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--lanexis-grey-text); text-transform: uppercase; letter-spacing: 0.03em; } .perm-actions { display: flex; flex-wrap: wrap; gap: 10px; } .perm-actions label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; text-transform: capitalize; cursor: pointer; padding: 4px 10px; border: 1px solid var(--lanexis-grey-border); border-radius: 999px; transition: var(--transition); } .perm-actions label:hover { border-color: var(--lanexis-red); } .perm-actions input[type="checkbox"] { accent-color: var(--lanexis-red); width: 14px; height: 14px; margin: 0; } /* Inline checkbox row (e.g. "Active Account") */ .check-row { display: flex; align-items: center; gap: 8px; } .check-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--lanexis-red); margin: 0; } .check-row label { margin: 0; font-size: 14px; } /* ============================================================ CREDENTIALS PANEL (shown after a user is created) ============================================================ */ .cred-panel { text-align: left; border: 1px solid var(--lanexis-grey-border); border-radius: 8px; overflow: hidden; } .cred-row { padding: 12px 14px; border-bottom: 1px solid var(--lanexis-grey-border); } .cred-row:last-child { border-bottom: none; } .cred-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lanexis-grey-text); margin-bottom: 4px; } .cred-value { font-size: 14px; color: var(--lanexis-dark); word-break: break-all; } .cred-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--lanexis-grey); border: 1px solid var(--lanexis-grey-border); border-radius: 6px; padding: 8px 10px; letter-spacing: 0.5px; } /* ============================================================ SWEETALERT2 — match the Lanexis theme Both regular dialogs and toasts share .swal2-popup, so the surface and text color rules repair all SweetAlert2 surfaces in one place. ============================================================ */ /* Popup surface — the previous block only set border-radius, leaving SweetAlert2's own hardcoded white background intact in dark mode. Adding background + color here fixes white-on-white and invisible- input-text in dark mode for every popup variant (dialog and toast). */ .swal2-popup { border-radius: var(--radius) !important; font-family: 'Inter', sans-serif !important; background: var(--white) !important; color: var(--lanexis-dark) !important; transition: background-color .18s ease, color .18s ease !important; } .swal2-title { font-size: 18px !important; font-weight: 600 !important; color: var(--lanexis-dark) !important; } .swal2-html-container { font-size: 14px !important; color: var(--lanexis-grey-text) !important; } /* Close button — override SweetAlert2's internal color so it reads against the themed popup surface in both light and dark mode. */ .swal2-close { color: var(--lanexis-grey-text) !important; } .swal2-close:hover { color: var(--lanexis-dark) !important; background: var(--lanexis-grey) !important; } /* Confirm button */ .swal2-styled.swal2-confirm { background: var(--brand-fill) !important; border-radius: 8px !important; font-weight: 500 !important; box-shadow: none !important; } .swal2-styled.swal2-confirm:hover { background: var(--brand-fill-hover) !important; } /* Cancel button — the --white token flips to a dark surface in dark mode, making this read as an outlined/ghost button against the popup. A hover state is added to provide interactive feedback in both modes. */ .swal2-styled.swal2-cancel { background: var(--white) !important; color: var(--lanexis-dark) !important; border: 1px solid var(--lanexis-grey-border) !important; border-radius: 8px !important; font-weight: 500 !important; } .swal2-styled.swal2-cancel:hover { background: var(--lanexis-grey) !important; } /* Inputs — styled to match .form-control conventions. Covers both the input:'text' SweetAlert2 prop and manually injected elements in the html prop. */ .swal2-input, .swal2-select, .swal2-textarea { background: var(--lanexis-grey) !important; color: var(--lanexis-dark) !important; border: 1px solid var(--lanexis-grey-border) !important; border-radius: 8px !important; font-family: inherit !important; font-size: 14px !important; box-shadow: none !important; } .swal2-input::placeholder, .swal2-select::placeholder, .swal2-textarea::placeholder { color: var(--lanexis-grey-text) !important; opacity: 1 !important; } .swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus { border-color: var(--lanexis-red) !important; box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.10) !important; outline: none !important; } /* Validation message rendered below the input field. */ .swal2-validation-message { background: var(--lanexis-red-light) !important; color: var(--lanexis-red) !important; font-size: 13px !important; border-radius: 6px !important; } .swal2-validation-message::before { color: var(--lanexis-red) !important; } /* Toast shadow. */ .swal2-toast { box-shadow: var(--shadow-hover) !important; } /* Validation feedback on form fields */ .form-control.is-invalid { border-color: var(--lanexis-red) !important; background: var(--lanexis-red-light); } .field-error { display: block; color: var(--lanexis-red); font-size: 12px; margin-top: 4px; } /* ============================================================ ROLE AREAS — sidebar states, area badges, route spinner ============================================================ */ /* Badge next to the logo identifying which area you are in. */ .area-badge { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .area-badge--admin { background: rgba(200, 16, 46, 0.15); color: var(--bad-fg); } .area-badge--customer { background: rgba(37, 99, 235, 0.18); color: var(--info-fg); } .area-badge--staff { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); } /* Modules that exist in the registry but have no page yet. */ .sidebar-nav a.nav-disabled { opacity: 0.45; cursor: default; pointer-events: none; } .sidebar-nav .nav-soon { margin-left: auto; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); } /* Shown to a user whose permissions grant them nothing. */ .nav-empty { padding: 24px 16px; text-align: center; color: rgba(255, 255, 255, 0.55); } .nav-empty i { font-size: 20px; margin-bottom: 8px; display: block; } .nav-empty p { font-size: 13px; font-weight: 500; margin: 0 0 4px; color: rgba(255, 255, 255, 0.8); } .nav-empty span { font-size: 12px; line-height: 1.4; } /* Placeholder bars while the navigation request is in flight. */ .nav-skeleton { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; } .nav-skeleton span { display: block; height: 34px; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.06) 63%); background-size: 400% 100%; animation: nav-shimmer 1.3s ease-in-out infinite; } @keyframes nav-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .route-spinner { width: 34px; height: 34px; margin: 0 auto; border: 3px solid var(--lanexis-grey-border); border-top-color: var(--lanexis-red); border-radius: 50%; animation: route-spin 0.7s linear infinite; } @keyframes route-spin { to { transform: rotate(360deg); } } /* ============================================================ SPLIT MODAL LAYOUT On a roomy viewport the user form splits into two columns — details on the left, the permission matrix on the right — so the whole form fits without scrolling past the footer. This is opt-in via .modal-box--split, NOT a side effect of .modal-box--wide. Wide is only about max-width; most wide modals (order detail, source detail, schema editor) hold full-width sections and tables that a two-column grid would slice in half. ============================================================ */ @media (min-width: 860px) { .modal-box--split .modal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; } /* Left column: identity/role fields stack normally. */ .modal-box--split .modal-body-left { grid-column: 1; } /* Right column: permissions get the full height of the dialog. */ .modal-box--split .modal-body > .perm-section { grid-column: 2; grid-row: 1 / -1; margin-top: 0; align-self: stretch; } /* Two permission cards per row inside their column once there's space. */ .modal-box--split .perm-list { padding-right: 4px; } } /* ============================================================ PRODUCT CATALOGUE Customer flow: Catalogue -> Category -> Product -> Industry -> Industry content. One page, five steps, driven by the hash route so Back works and links are shareable. ============================================================ */ /* --- Breadcrumb ------------------------------------------- */ .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--lanexis-grey-text); margin-bottom: 18px; } .crumbs a { color: var(--lanexis-grey-text); transition: color var(--transition); } .crumbs a:hover { color: var(--lanexis-red); } .crumbs .sep { opacity: 0.5; font-size: 10px; } .crumbs .current { color: var(--lanexis-dark); font-weight: 500; } /* --- Card grids ------------------------------------------- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .cat-card { background: var(--white); border: 1px solid var(--lanexis-grey-border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; } .cat-card:hover { box-shadow: var(--shadow-hover); border-color: var(--scrollbar-thumb); transform: translateY(-2px); } .cat-card .thumb { height: 140px; background: var(--lanexis-grey); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cat-card .thumb img { width: 100%; height: 100%; object-fit: cover; } /* Lettered fallback so a category without artwork is still a real card rather than a broken-image box. */ .cat-card .thumb .letter { font-size: 34px; font-weight: 700; color: var(--lanexis-red); opacity: 0.35; letter-spacing: -1px; } .cat-card .body { padding: 14px 16px; flex: 1; } .cat-card .title { font-weight: 600; font-size: 15px; color: var(--lanexis-dark); margin-bottom: 4px; } .cat-card .sub { font-size: 12.5px; color: var(--lanexis-grey-text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cat-card .count { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lanexis-red); padding: 0 16px 14px; } /* --- Product list (category page) ------------------------- */ .prod-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .prod-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--white); border: 1px solid var(--lanexis-grey-border); border-radius: 10px; cursor: pointer; transition: var(--transition); } .prod-item:hover { border-color: var(--lanexis-red); box-shadow: var(--shadow); } .prod-item .thumb { width: 52px; height: 52px; border-radius: 8px; background: var(--lanexis-grey); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--lanexis-grey-text); } .prod-item .thumb img { width: 100%; height: 100%; object-fit: cover; } .prod-item .name { font-weight: 500; font-size: 14px; color: var(--lanexis-dark); } .prod-item .meta { font-size: 12px; color: var(--lanexis-grey-text); margin-top: 2px; } /* --- Product detail (step 3) ------------------------------ */ .pd-hero { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; } @media (max-width: 720px) { .pd-hero { grid-template-columns: 1fr; } } .pd-image { background: var(--lanexis-grey); border: 1px solid var(--lanexis-grey-border); border-radius: var(--radius); height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pd-image img { width: 100%; height: 100%; object-fit: cover; } .pd-image i { font-size: 40px; color: var(--text-muted); } .pd-title { font-size: 24px; font-weight: 700; color: var(--lanexis-dark); margin-bottom: 8px; } .pd-desc { font-size: 14px; color: var(--lanexis-grey-text); line-height: 1.6; } .section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lanexis-grey-text); margin: 26px 0 12px; } .section-title .note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--lanexis-grey-text); opacity: 0.85; } /* Common documents - the PDS/SDS pair that never varies by industry. */ .doc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .doc-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--lanexis-grey-border); border-radius: 10px; } .doc-card i.doc-icon { font-size: 22px; color: var(--lanexis-red); flex-shrink: 0; } .doc-card .info { flex: 1; min-width: 0; } .doc-card .info .title { font-size: 13.5px; font-weight: 500; color: var(--lanexis-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-card .info .meta { font-size: 11.5px; color: var(--lanexis-grey-text); } .doc-card.missing { opacity: 0.6; border-style: dashed; } .doc-card.missing i.doc-icon { color: var(--lanexis-grey-text); } /* --- Industry picker (step 4) ----------------------------- */ .ind-list { display: flex; flex-direction: column; gap: 8px; } .ind-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--white); border: 1px solid var(--lanexis-grey-border); border-radius: 10px; cursor: pointer; transition: var(--transition); } .ind-row:hover { border-color: var(--lanexis-red); background: var(--surface-sunk); } .ind-row .ind-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--lanexis-red-light); color: var(--lanexis-red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .ind-row .ind-name { font-weight: 500; font-size: 14px; color: var(--lanexis-dark); flex: 1; } .ind-row .ind-meta { font-size: 12px; color: var(--lanexis-grey-text); } .ind-row .chev { color: var(--lanexis-grey-text); font-size: 12px; } .ind-row.is-empty { opacity: 0.72; } .ind-row.is-empty .ind-icon { background: var(--lanexis-grey); color: var(--lanexis-grey-text); } /* --- Industry content (step 5) ---------------------------- */ .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .video-card { background: var(--white); border: 1px solid var(--lanexis-grey-border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: var(--transition); } .video-card:hover { box-shadow: var(--shadow-hover); } .video-card .frame { position: relative; height: 130px; background: var(--lanexis-dark); display: flex; align-items: center; justify-content: center; overflow: hidden; } .video-card .frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .video-card .play { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--lanexis-red); display: flex; align-items: center; justify-content: center; font-size: 14px; padding-left: 3px; } .video-card .cap { padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--lanexis-dark); } .flyer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } /* Inline video player overlay */ .video-modal .modal-box { max-width: 860px; } .video-modal video, .video-modal iframe { width: 100%; aspect-ratio: 16 / 9; border: none; background: #000; display: block; } /* --- Empty states ----------------------------------------- */ .cat-empty { text-align: center; padding: 44px 20px; color: var(--lanexis-grey-text); background: var(--white); border: 1px dashed var(--lanexis-grey-border); border-radius: var(--radius); } .cat-empty i { font-size: 26px; opacity: 0.45; margin-bottom: 10px; display: block; } .cat-empty h4 { font-size: 15px; font-weight: 600; color: var(--lanexis-dark); margin-bottom: 4px; } .cat-empty p { font-size: 13px; margin: 0; } /* Skeleton shimmer while a step is loading. */ .cat-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .cat-skeleton span { display: block; height: 190px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--surface) 37%, var(--surface-sunk) 63%); background-size: 400% 100%; animation: cat-shimmer 1.3s ease-in-out infinite; } @keyframes cat-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ============================================================ CATALOGUE ADMIN WORKFLOW Four ordered steps; each one gated on the previous. ============================================================ */ .wf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; } .wf-step { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--white); border: 1px solid var(--lanexis-grey-border); border-radius: 10px; cursor: pointer; transition: var(--transition); text-align: left; width: 100%; } .wf-step:hover { border-color: var(--scrollbar-thumb); box-shadow: var(--shadow); } .wf-step.active { border-color: var(--lanexis-red); box-shadow: 0 0 0 1px var(--lanexis-red) inset; } .wf-step .num { width: 24px; height: 24px; border-radius: 50%; background: var(--lanexis-grey); color: var(--lanexis-grey-text); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wf-step.active .num { background: var(--brand-fill); color: var(--on-brand); } .wf-step.done .num { background: var(--ok-bg); color: var(--ok-fg); } .wf-step .label { font-size: 13.5px; font-weight: 600; color: var(--lanexis-dark); } .wf-step .desc { font-size: 11.5px; color: var(--lanexis-grey-text); margin-top: 2px; line-height: 1.4; } /* Explains a disabled step instead of leaving a dead control. */ .wf-gate { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-bg); border: 1px solid var(--warn-fg); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--warn-fg); margin-bottom: 16px; } .wf-gate i { margin-top: 2px; } .wf-panel { display: none; } .wf-panel.active { display: block; } .mini-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .mini-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lanexis-grey-text); padding: 10px 12px; border-bottom: 1px solid var(--lanexis-grey-border); white-space: nowrap; } .mini-table td { padding: 11px 12px; border-bottom: 1px solid var(--lanexis-grey-border); vertical-align: middle; } .mini-table tr:last-child td { border-bottom: none; } .mini-table tbody tr:hover { background: var(--hover-tint); } .mini-table .row-actions { display: flex; gap: 4px; justify-content: flex-end; } .mini-table .btn-ghost { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--lanexis-grey-text); } .mini-table .btn-ghost:hover { background: var(--lanexis-grey); color: var(--lanexis-dark); } .mini-table .btn-ghost.danger:hover { background: var(--lanexis-red-light); color: var(--lanexis-red); } .doc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; } .doc-pill.have { background: var(--ok-bg); color: var(--ok-fg); } .doc-pill.missing { background: var(--lanexis-grey); color: var(--lanexis-grey-text); } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--lanexis-grey); color: var(--lanexis-grey-text); white-space: nowrap; } /* Multi-select industry picker in the product form. */ .pick-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 170px; overflow-y: auto; padding: 10px; border: 1px solid var(--lanexis-grey-border); border-radius: 8px; background: var(--white); } .pick-list label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px; border: 1px solid var(--lanexis-grey-border); border-radius: 999px; cursor: pointer; transition: var(--transition); margin: 0; font-weight: 400; } .pick-list label:hover { border-color: var(--lanexis-red); } .pick-list input[type="checkbox"] { accent-color: var(--lanexis-red); width: 14px; height: 14px; margin: 0; } .pick-list .none { font-size: 12.5px; color: var(--lanexis-grey-text); } .file-input { width: 100%; font-size: 13px; padding: 9px 10px; border: 1px dashed var(--lanexis-grey-border); border-radius: 8px; background: var(--white); color: var(--lanexis-grey-text); } .file-input::file-selector-button { border: 1px solid var(--lanexis-grey-border); background: var(--lanexis-grey); color: var(--lanexis-dark); border-radius: 6px; padding: 4px 10px; margin-right: 10px; font-family: inherit; font-size: 12.5px; cursor: pointer; } .seg { display: inline-flex; border: 1px solid var(--lanexis-grey-border); border-radius: 8px; overflow: hidden; } .seg button { padding: 6px 14px; font-size: 13px; background: var(--white); color: var(--lanexis-grey-text); border-right: 1px solid var(--lanexis-grey-border); } .seg button:last-child { border-right: none; } .seg button.active { background: var(--brand-fill); color: var(--on-brand); font-weight: 500; } /* ============================================================ ORDERS — DATA FEEDS Shared by the Orders & Shipments console list and the per-source detail page. Named `feed-*` because the operator facing these screens thinks in terms of "the feed from a customer's spreadsheet", not "an ExternalDataSource row". ============================================================ */ /* --- Generic panel states (loading / empty / locked / error) --- */ .feed-state { text-align: center; padding: 52px 24px; color: var(--lanexis-grey-text); } .feed-state i.state-icon { font-size: 34px; margin-bottom: 14px; display: block; opacity: .55; } .feed-state h4 { font-size: 16px; color: var(--lanexis-dark); margin-bottom: 8px; } .feed-state p { font-size: 13px; max-width: 380px; margin: 0 auto; line-height: 1.6; } .feed-state .state-action { margin-top: 18px; } @keyframes feed-spin { to { transform: rotate(360deg); } } .spin { animation: feed-spin .8s linear infinite; } /* --- Status pills ------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1.5; } .pill i { font-size: 9px; } .pill--ok { background: var(--ok-bg); color: var(--ok-fg); } .pill--bad { background: var(--bad-bg); color: var(--bad-fg); } .pill--warn { background: var(--warn-bg); color: var(--warn-fg); } .pill--neutral { background: var(--hover-tint); color: var(--lanexis-grey-text); } /* --- Feed list rows ----------------------------------------- */ .feed-row-name { font-weight: 600; color: var(--lanexis-dark); display: block; } .feed-row-sub { font-size: 12px; color: var(--lanexis-grey-text); margin-top: 2px; display: block; } tr.feed-row { cursor: pointer; transition: background var(--transition); } tr.feed-row:hover { background: var(--lanexis-grey); } .row-actions { display: flex; gap: 4px; justify-content: flex-end; } .row-actions .btn-ghost { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--lanexis-grey-text); cursor: pointer; border: none; background: transparent; } .row-actions .btn-ghost:hover { background: var(--lanexis-grey-border); color: var(--lanexis-dark); } .row-actions .btn-ghost:disabled { opacity: .35; cursor: not-allowed; } .row-actions .btn-ghost:disabled:hover { background: transparent; color: var(--lanexis-grey-text); } /* --- Detail page header ------------------------------------- */ .detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .detail-head .detail-id h2 { font-size: 21px; font-weight: 600; color: var(--lanexis-dark); margin: 0 0 7px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .detail-head .detail-id .detail-meta { font-size: 13px; color: var(--lanexis-grey-text); } .detail-head .detail-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } /* --- Banner (feed health / guidance) ------------------------ */ .feed-banner { display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; border-radius: 10px; margin-bottom: 20px; font-size: 13.5px; line-height: 1.6; } .feed-banner > i { font-size: 17px; margin-top: 1px; flex-shrink: 0; } .feed-banner .banner-body { flex: 1; min-width: 0; } .feed-banner strong { display: block; font-size: 14px; margin-bottom: 3px; } .feed-banner .banner-actions { margin-top: 11px; } .feed-banner--bad { background: var(--bad-bg); border: 1px solid var(--bad-fg); color: var(--bad-fg); } .feed-banner--bad > i, .feed-banner--bad strong { color: var(--bad-fg); } .feed-banner--warn { background: var(--warn-bg); border: 1px solid var(--warn-fg); color: var(--warn-fg); } .feed-banner--warn > i, .feed-banner--warn strong { color: var(--warn-fg); } .feed-banner--ok { background: var(--ok-bg); border: 1px solid var(--ok-fg); color: var(--ok-fg); } .feed-banner--ok > i, .feed-banner--ok strong { color: var(--ok-fg); } .feed-banner--info { background: var(--lanexis-grey); border: 1px solid var(--lanexis-grey-border); color: var(--lanexis-grey-text); } .feed-banner--info > i, .feed-banner--info strong { color: var(--lanexis-dark); } /* --- Key/value fact grid ------------------------------------ */ .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .fact { background: var(--lanexis-grey); border-radius: 8px; padding: 11px 14px; min-width: 0; } .fact .k { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--lanexis-grey-text); margin-bottom: 5px; } .fact .v { font-size: 14px; font-weight: 500; color: var(--lanexis-dark); line-height: 1.4; word-break: break-word; } .fact .v.mono { font-family: monospace; font-size: 12px; } .fact .v .muted { color: var(--lanexis-grey-text); font-weight: 400; font-style: italic; } .fact--full { grid-column: 1 / -1; } /* --- Section heading inside a card --------------------------- */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .section-head .section-title { font-size: 15px; font-weight: 600; color: var(--lanexis-dark); margin: 0; display: flex; align-items: center; gap: 8px; } .section-head .section-note { font-size: 12.5px; color: var(--lanexis-grey-text); margin: 4px 0 0; font-weight: 400; line-height: 1.55; } .section-head .section-tools { display: flex; gap: 8px; flex-wrap: wrap; } /* ============================================================ COLUMN MAPPING EDITOR One card per domain field, in plain English. The operator answers "which column in my sheet holds this?" and never sees the internal field name unless they open Advanced. ============================================================ */ .map-group { margin-bottom: 26px; } .map-group:last-child { margin-bottom: 0; } .map-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 9px; margin-bottom: 14px; border-bottom: 1px solid var(--lanexis-grey-border); } .map-group-head h4 { font-size: 13px; font-weight: 600; color: var(--lanexis-dark); margin: 0; text-transform: uppercase; letter-spacing: .04em; } .map-group-head .group-hint { font-size: 12.5px; color: var(--lanexis-grey-text); } .map-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap: 12px; } .map-field { border: 1px solid var(--lanexis-grey-border); border-radius: 10px; padding: 13px 15px; background: var(--white); transition: border-color var(--transition), background var(--transition); min-width: 0; } .map-field:focus-within { border-color: var(--lanexis-red); } .map-field.is-mapped { border-color: var(--ok-fg); background: var(--ok-bg); } .map-field.is-missing-required { border-color: var(--bad-fg); background: var(--bad-bg); } .map-field .mf-label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--lanexis-dark); margin-bottom: 3px; } .map-field .mf-label .req-star { color: var(--lanexis-red); font-weight: 700; } .map-field .mf-label .mf-tick { margin-left: auto; font-size: 12px; color: var(--ok-fg); } .map-field .mf-help { font-size: 12px; color: var(--lanexis-grey-text); line-height: 1.5; margin-bottom: 9px; } .map-field select.form-control, .map-field input.form-control { padding: 7px 10px; font-size: 13px; } .map-field .mf-sample { font-size: 11.5px; color: var(--lanexis-grey-text); margin-top: 7px; font-family: monospace; line-height: 1.5; word-break: break-word; min-height: 17px; } .map-field .mf-sample .sample-tag { text-transform: uppercase; letter-spacing: .05em; font-family: inherit; font-size: 9.5px; font-weight: 600; opacity: .7; margin-right: 5px; } /* Advanced (data type / carry-down) — collapsed by default. */ .map-field .mf-adv { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--lanexis-grey-border); display: none; gap: 10px; align-items: center; flex-wrap: wrap; } .map-field.show-adv .mf-adv { display: flex; } .map-field .mf-adv label { font-size: 11.5px; color: var(--lanexis-grey-text); display: inline-flex; align-items: center; gap: 6px; margin: 0; } .map-field .mf-adv select.form-control { padding: 4px 8px; font-size: 11.5px; width: auto; } .map-field .mf-adv input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; } /* Mapping toolbar — auto-match, advanced toggle, progress. */ .map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 15px; background: var(--lanexis-grey); border: 1px solid var(--lanexis-grey-border); border-radius: 10px; margin-bottom: 20px; } .map-toolbar .map-progress { font-size: 13px; color: var(--lanexis-grey-text); } .map-toolbar .map-progress strong { color: var(--lanexis-dark); } .map-toolbar .map-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .map-error { display: none; font-size: 13px; margin-bottom: 16px; padding: 11px 15px; border-radius: 8px; background: var(--bad-bg); border: 1px solid var(--bad-fg); color: var(--bad-fg); line-height: 1.55; } .map-error i { margin-right: 7px; } /* Sticky save bar — the mapping list is long; the operator must be able to save without scrolling back to a header button. */ .map-savebar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 0 2px; margin-top: 20px; background: linear-gradient(to bottom, transparent, var(--white) 26%); } .map-savebar .save-note { margin-right: auto; font-size: 12.5px; color: var(--lanexis-grey-text); } /* --- Horizontal scroll container for wide tables ------------- */ .scroll-x { overflow-x: auto; } .scroll-x table { min-width: 700px; } .mono-chip { display: inline-block; font-family: monospace; font-size: 11.5px; background: var(--lanexis-grey); border: 1px solid var(--lanexis-grey-border); padding: 1px 6px; border-radius: 4px; color: var(--lanexis-grey-text); } tr.line-stale td { opacity: .55; } @media (max-width: 640px) { .map-list { grid-template-columns: 1fr; } .detail-head .detail-actions { width: 100%; } }