/* * NEXTSYSTEM Global Visual Language — shared foundation. * Single source of truth for design tokens, brand accent and * reusable component classes. Additive only — loaded after the * legacy stylesheets/inline theme block, never edits them. * Ref: NEXTSYSTEM Design System — Final Verdict. */ /* ---------- Fonts (self-hosted) ---------- */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nextsystem/IBMPlexSans-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/nextsystem/IBMPlexSans-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/nextsystem/IBMPlexSans-700.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nextsystem/IBMPlexSansArabic-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/nextsystem/IBMPlexSansArabic-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/nextsystem/IBMPlexSansArabic-700.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nextsystem/IBMPlexMono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/nextsystem/IBMPlexMono-600.woff2') format('woff2'); } /* ---------- Design tokens ---------- */ :root { /* surfaces */ --nx-canvas: #F7F6F3; --nx-surface: #FFFFFF; --nx-surface-elevated: #FFFFFF; --nx-surface-interactive: #F4F2EE; /* borders */ --nx-border: #E4E2DC; --nx-border-faint: #EDEBE6; --nx-border-strong: #CFCCC3; /* text */ --nx-text-primary: #1A1917; --nx-text-secondary: #5C5A55; --nx-text-tertiary: #6B6862; --nx-text-disabled: #B8B5AE; /* Neutral solid-fill button background — deliberately NOT redefined in the dark-mode blocks below. .tw-dw-btn-neutral (the "Secondary" solid button role, e.g. every "إغلاق/Close" button) used to read its background from --nx-text-primary, which is correct in light mode (near-black, pairs with the rule's #fff text) but flips to near-white in dark mode (--nx-text-primary becomes #F2F1EE there), leaving white text on a near-white pill. This token pins that button role to the same ink color in both themes instead — same NEXTSYSTEM identity, no new hue, no per-modal patching. */ --nx-neutral-solid: #1A1917; --nx-neutral-solid-hover: #3A3833; /* brand accent — CONSOLIDATED (Design System Unification pass): --nx-accent is now an alias of --nx-primary (Indigo), not a second color. Historically --nx-accent was a fixed NEXTSYSTEM emerald/teal, kept deliberately separate from the newer --nx-primary Indigo introduced for "master redesign" pages (.nxu-btn-*) — that split left ~18 "frozen" views (Users/Roles/ Contacts/Purchases/Stock/Expenses/Payment Accounts/...) and every shared primitive that reads --nx-accent (focus rings, tabs, checkboxes, table-row selection, badges, KPI icons, toolbar — ~90 rules in this file alone) rendering teal/green right next to Indigo CTAs on the very same screen. Confirmed live on Contacts: an Indigo "Add" button beside a teal filter-icon badge. Resolved by making both tokens resolve to the same Indigo values below — every one of those ~90 --nx-accent rules updates automatically, with zero per-page edits. Do not reintroduce a second brand hue. */ --nx-accent: #4F46E5; --nx-accent-strong: #4338CA; --nx-accent-soft: rgba(79, 70, 229, .10); --nx-accent-border: rgba(79, 70, 229, .32); --nx-primary: #4F46E5; --nx-primary-hover: #4338CA; --nx-primary-active: #3730A3; --nx-primary-soft: rgba(79, 70, 229, .10); /* semantic */ --nx-success: #15803D; --nx-success-soft: rgba(21, 128, 61, .10); --nx-warning: #B45309; --nx-warning-soft: rgba(180, 83, 9, .10); --nx-danger: #B42318; --nx-danger-soft: rgba(180, 35, 24, .10); --nx-info: #0B4A6F; --nx-info-soft: rgba(11, 74, 111, .10); /* radius — tight, architectural */ --nx-radius-sm: 4px; --nx-radius-md: 8px; --nx-radius-lg: 12px; /* elevation */ --nx-shadow-1: 0 1px 2px rgba(26, 25, 23, .05); --nx-shadow-2: 0 4px 14px rgba(26, 25, 23, .08); --nx-shadow-3: 0 16px 40px rgba(26, 25, 23, .16); /* Dashboard card system — the approved NEXTSYSTEM Dashboard (2026-08-03 baseline) is the master design-system reference for the whole app; every new/redesigned screen inherits this exact radius + shadow recipe for its cards/panels/modals instead of re-deriving its own. Corrected to match the real value in resources/views/home/ index.blade.php's own .nxd-card rule (literal 12px there — this token had drifted to 16px, silently rounding every card in the redesigned modules 4px softer than the frozen Dashboard actually is, one of the "doesn't feel like the same product" gaps). */ --nxd-radius: 12px; --nxd-radius-sm: 9px; --nxd-shadow: 0 1px 2px rgba(16,24,20,.04), 0 8px 24px rgba(16,24,20,.06); /* type */ --nx-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --nx-font-sans-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --nx-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } @media (prefers-color-scheme: dark) { :root { --nx-canvas: #16151A; --nx-surface: #1D1C22; --nx-surface-elevated: #242229; --nx-surface-interactive: #28262D; --nx-border: #2B2A31; --nx-border-faint: #232227; --nx-border-strong: #3B3942; --nx-text-primary: #F2F1EE; --nx-text-secondary: #A8A6A0; --nx-text-tertiary: #969289; --nx-text-disabled: #4E4C48; --nx-accent: #6366F1; --nx-accent-strong: #818CF8; --nx-accent-soft: rgba(99, 102, 241, .16); --nx-accent-border: rgba(99, 102, 241, .4); --nx-primary: #6366F1; --nx-primary-hover: #818CF8; --nx-primary-active: #A5B4FC; --nx-primary-soft: rgba(99, 102, 241, .16); --nx-success: #4ADE80; --nx-success-soft: rgba(74, 222, 128, .12); --nx-warning: #FBBF24; --nx-warning-soft: rgba(251, 191, 36, .12); --nx-danger: #F87171; --nx-danger-soft: rgba(248, 113, 113, .12); --nx-info: #7DD3FC; --nx-info-soft: rgba(125, 211, 252, .12); --nx-shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --nx-shadow-2: 0 4px 16px rgba(0, 0, 0, .4); --nx-shadow-3: 0 20px 48px rgba(0, 0, 0, .55); --nxd-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.35); } } /* Manual theme-toggle override (stamps data-theme on the root element). The attribute selector below is more specific than the bare `:root` used inside the prefers-color-scheme media query above, so it always wins — in both directions — regardless of the OS-level preference. Previously only --nxd-shadow had this treatment; every other color token only had a media-query value, so explicitly picking Light while the OS was dark (or Dark while the OS was light) silently did nothing to surfaces/borders/text/accent/semantic colors. This mirrors the full dark token set from the media query above, plus the light defaults, under explicit [data-theme] selectors. */ :root[data-theme="dark"] { --nx-canvas: #16151A; --nx-surface: #1D1C22; --nx-surface-elevated: #242229; --nx-surface-interactive: #28262D; --nx-border: #2B2A31; --nx-border-faint: #232227; --nx-border-strong: #3B3942; --nx-text-primary: #F2F1EE; --nx-text-secondary: #A8A6A0; --nx-text-tertiary: #969289; --nx-text-disabled: #4E4C48; --nx-accent: #6366F1; --nx-accent-strong: #818CF8; --nx-accent-soft: rgba(99, 102, 241, .16); --nx-accent-border: rgba(99, 102, 241, .4); --nx-primary: #6366F1; --nx-primary-hover: #818CF8; --nx-primary-active: #A5B4FC; --nx-primary-soft: rgba(99, 102, 241, .16); --nx-success: #4ADE80; --nx-success-soft: rgba(74, 222, 128, .12); --nx-warning: #FBBF24; --nx-warning-soft: rgba(251, 191, 36, .12); --nx-danger: #F87171; --nx-danger-soft: rgba(248, 113, 113, .12); --nx-info: #7DD3FC; --nx-info-soft: rgba(125, 211, 252, .12); --nx-shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --nx-shadow-2: 0 4px 16px rgba(0, 0, 0, .4); --nx-shadow-3: 0 20px 48px rgba(0, 0, 0, .55); --nxd-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.35); } /* Dark-theme canvas fix — html/body carry hardcoded Tailwind utility classes (tw-bg-white, tw-bg-gray-100) that are never touched by the dark token overrides above, since those only redefine CSS custom properties. That left the root canvas white/light-gray even with data-theme="dark" set, visible as a light sliver past the app's own dark-styled content (e.g. behind the RTL scrollbar track, or on any viewport taller than the page content). Element+attribute selector specificity here already beats the plain utility classes, so no !important is needed. Light theme is untouched — no selector below matches without [data-theme="dark"]. */ html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] main { background-color: var(--nx-canvas, #16151A); } html[data-theme="dark"] { scrollbar-color: var(--nx-border-strong, #3B3942) var(--nx-canvas, #16151A); } html[data-theme="dark"]::-webkit-scrollbar-track { background-color: var(--nx-canvas, #16151A); } html[data-theme="dark"]::-webkit-scrollbar-thumb { background-color: var(--nx-border-strong, #3B3942); border-radius: 999px; } /* Sidebar menu scrollbar (Final UI Polish). The sidebar's own scrollable menu list (#side-bar) is genuinely taller than its viewport and does need to scroll — this isn't a fake/removable element. But the sidebar itself stays permanently dark regardless of the app's light/dark theme, while the global dark-scrollbar rule above only kicks in under [data-theme="dark"]. In light theme, that left the chunky default OS scrollbar (light-gray track + thumb) rendering unstyled against the dark sidebar, right next to the sidebar's real border-left separator — reading as stray/duplicated vertical marks. Themed here unconditionally, since the sidebar's own background never changes. */ #side-bar { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; scrollbar-width: thin; } #side-bar::-webkit-scrollbar { width: 6px; } #side-bar::-webkit-scrollbar-track { background-color: transparent; } #side-bar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.18); border-radius: 999px; } :root[data-theme="light"] { --nx-canvas: #F7F6F3; --nx-surface: #FFFFFF; --nx-surface-elevated: #FFFFFF; --nx-surface-interactive: #F4F2EE; --nx-border: #E4E2DC; --nx-border-faint: #EDEBE6; --nx-border-strong: #CFCCC3; --nx-text-primary: #1A1917; --nx-text-secondary: #5C5A55; --nx-text-tertiary: #6B6862; --nx-text-disabled: #B8B5AE; --nx-accent: #4F46E5; --nx-accent-strong: #4338CA; --nx-accent-soft: rgba(79, 70, 229, .10); --nx-accent-border: rgba(79, 70, 229, .32); --nx-primary: #4F46E5; --nx-primary-hover: #4338CA; --nx-primary-active: #3730A3; --nx-primary-soft: rgba(79, 70, 229, .10); --nx-success: #15803D; --nx-success-soft: rgba(21, 128, 61, .10); --nx-warning: #B45309; --nx-warning-soft: rgba(180, 83, 9, .10); --nx-danger: #B42318; --nx-danger-soft: rgba(180, 35, 24, .10); --nx-info: #0B4A6F; --nx-info-soft: rgba(11, 74, 111, .10); --nx-shadow-1: 0 1px 2px rgba(26, 25, 23, .05); --nx-shadow-2: 0 4px 14px rgba(26, 25, 23, .08); --nx-shadow-3: 0 16px 40px rgba(26, 25, 23, .16); --nxd-shadow: 0 1px 2px rgba(16,24,20,.04), 0 8px 24px rgba(16,24,20,.06); } /* Typography/Contrast Fix (Phase 2). Bootstrap's own .text-muted — used for hint/description text across the legacy 108+ pages that predate the nx-* token system — carries a hardcoded, un-themed color:#999 from vendor.css (the later of two .text-muted rules there, so it's the one that actually wins the cascade). Measured contrast: 2.85:1 against a white surface, well under WCAG AA's 4.5:1 floor for body text — this is the single biggest source of "faded text" across the app in Light mode (in Dark mode #999 against the dark surfaces happens to read fine by coincidence, ~5.9:1, which is why the complaint reads as Light-specific even though the rule itself has no theme awareness at all). Overriding here to the newly-corrected --nx-text-tertiary token both fixes the contrast (~5.5:1 Light / ~5.3:1 Dark, verified) and makes it theme-aware for free, with one rule instead of touching every page that uses the class. */ .text-muted { color: var(--nx-text-tertiary) !important; } /* * Design System v1, Phase 1 — additional tokens. * Typography scale, grid, motion — filling real gaps against the * existing token set above (colors/spacing/radius/shadows already * exist and are untouched here). Additive only: nothing below is * consumed by any existing rule yet, so this introduces zero visual * change on its own. Traced to the frozen Visual Vocabulary: * type scale = discrete steps, not a fluid slide (an Interval must * have namable stops); motion tokens formalize that Hold (Threshold * Law's externally-blocked regime) has no token because it has no * motion — silence is the correct rendering, not a slow transition. */ :root { /* type scale — the sizes already in ad hoc use across nx-* / nxc-* components above, named so future components reference one scale instead of picking a new px value each time */ --nx-text-2xs: 10px; /* labels, eyebrows, table headers */ --nx-text-xs: 11px; /* help text, badges */ --nx-text-sm: 12.5px; /* secondary/meta text */ --nx-text-base: 13.5px; /* body copy, inputs, buttons */ --nx-text-md: 15px; /* card/modal headings */ --nx-text-lg: 20px; /* section headers */ --nx-text-xl: 30px; /* hero figures — matches .fin-hero */ /* grid — container + breakpoints, not yet referenced anywhere */ --nx-container-max: 1440px; --nx-grid-gutter: var(--nxc-sp-4); --nx-breakpoint-sm: 640px; --nx-breakpoint-md: 1024px; --nx-breakpoint-lg: 1280px; /* motion — named aliases for the Terminal-marking durations already in use (.nx-resolve), plus the snap timing shared by buttons/ inputs/tables. There is deliberately no --nx-motion-hold: a Hold state (Threshold Law, externally-blocked regime) renders with no transition at all, never a slow one — motion always implies an Interval is actively closing, so a Hold must stay visually still. */ --nx-motion-snap: var(--nxc-duration); --nx-motion-ease: var(--nxc-ease); --nx-motion-resolve: 500ms; } /* * Brand architecture (Final Verdict §04, updated by Design System * Unification pass): NEXTSYSTEM Indigo is the fixed Global Brand Accent, * independent of the per-tenant business.theme_color picker. This * overrides --theme-700/800/900 (set inline further up the page by * layouts/partials/css.blade.php from the theme_color session value) via * normal cascade order — this file loads after that inline block. * business.theme_color itself, its DB column, its Settings control and * app/Http usage are untouched; only the resulting chrome color is * overridden here. Values now match --nx-accent/--nx-primary's light * register (base/hover/active) instead of the retired teal. * * Fixed light-register values on purpose (not var(--nx-accent), which * shifts under prefers-color-scheme): the sidebar/header/icon-buttons * this feeds have no existing dark-mode awareness, and this pass must not * introduce new dark-mode behavior to chrome that never had it. */ :root { --theme-700: #4F46E5; --theme-800: #4338CA; --theme-900: #3730A3; } /* * App-wide type application. `.tw-font-sans` is the Tailwind utility class * already present on (see layouts/app.blade.php) — matched here at * equal specificity so normal cascade order (this file loads last) wins, * same reasoning as the --theme-700 override above. This is what makes the * font system active on every screen, not just the Dashboard. */ html, body, .tw-font-sans { font-family: var(--nx-font-sans); } html[dir="rtl"], html[dir="rtl"] body, html[dir="rtl"] .tw-font-sans { font-family: var(--nx-font-sans-ar); } /* Raw h1-h4 (Bootstrap 3 defaults, no color of their own) never had a dark-mode treatment — legible in light mode by accident (near-black default), unreadable/washed-out in dark mode wherever a page still uses a plain heading tag instead of an nx-* component (first seen on location_settings' "Receipt Settings" tab heading). */ h1, h2, h3, h4, h5, h6 { color: var(--nx-text-primary, #1A1917); } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: var(--nx-text-secondary, #5C5A55); } /* layouts/app.blade.php hardcodes html.tw-bg-white, body.tw-bg-gray-100, AND the
content wrapper (tw-bg-gray-100) — three separate, static Tailwind utilities, none themed.
is the one that actually matters visually: it's the full-height sibling of the sidebar and covers the entire content area, so every screen built from the standard page_header + .nx-shell recipe (i.e. everything except the Dashboard's fully bespoke .nxd-* markup) shows this as a light band behind/around those components in dark mode. html/body are covered too since they're the outermost fallback. Matched at equal specificity so cascade order (this file loads last) wins, same technique as the font-family rule above. */ @media (prefers-color-scheme: dark) { html.tw-bg-white, body.tw-bg-gray-100, main.tw-bg-gray-100 { background-color: var(--nx-canvas) !important; } } html.tw-bg-white[data-theme="dark"], html[data-theme="dark"] body.tw-bg-gray-100, html[data-theme="dark"] main.tw-bg-gray-100 { background-color: var(--nx-canvas) !important; } /* ---------- Component language ---------- */ /* Cards — Phase 2 migration to Shared Edge (frozen as the canonical geometry): clip-path notch instead of border-radius, hairline border only, no shadow — cards must never depend on elevation for identity. */ .nx-card { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: 0; clip-path: polygon(var(--nxc-notch-md) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nxc-notch-md)); box-shadow: none; } [dir="rtl"] .nx-card { clip-path: polygon(0 0, calc(100% - var(--nxc-notch-md)) 0, 100% var(--nxc-notch-md), 100% 100%, 0 100%); } /* Workspace — approved final Art Direction: "White Enterprise Workspace" replaces the earlier "gray canvas → floating white card" pattern. One white surface per page (hairline border, --nxd-radius, no/near-no shadow) IS the page's content, not a card sitting inside it. Internal sections are separated by a divider + heading, not by nesting another card. Full available width — simple management pages (Units/Brands/...) use the real workspace width rather than being artificially narrowed to hide empty space. */ .nx-workspace { background: var(--nx-surface, #fff); border: 1px solid var(--nx-border, #E4E2DC); border-radius: var(--nxd-radius, 12px); box-shadow: none; overflow: hidden; } .nx-workspace-section { padding: 22px 24px; } .nx-workspace-section + .nx-workspace-section { border-top: 1px solid var(--nx-border-faint, #EDEBE6); } .nx-workspace-section-title { font-size: 13px; font-weight: 700; color: var(--nx-text-primary, #1A1917); margin: 0 0 16px; } .nx-workspace .table-responsive { margin: 0; } .nx-workspace .nx-table { margin: 0; } .nx-workspace .nx-table thead th { padding-top: 16px; } .nx-workspace .nx-table tbody tr:last-child td { padding-bottom: 16px; } /* Rich text editor (TinyMCE, oxide skin) — the JS side already swaps between the oxide/oxide-dark skins to match the current theme (see public/js/product.js); this just aligns the outer shell's border/ radius with the rest of the NEXTSYSTEM form system so it doesn't read as a third-party widget dropped onto the page. */ .tox-tinymce { border-color: var(--nx-border, #E4E2DC) !important; border-radius: var(--nxd-radius, 12px) !important; overflow: hidden; } /* Krajee bootstrap-fileinput widget — real NEXTSYSTEM Image Upload skin over the plugin's existing DOM/behavior (preview, remove, progress — all untouched, same classes the plugin already toggles). Global, not scoped to Products: this widget is used app-wide (see public/js/ app.js, login.js) wherever a real image upload+preview is needed. */ .file-input { display: flex; flex-direction: column; gap: 10px; } .file-input .file-preview { border: 1px dashed var(--nx-border-strong, #CFCCC3); border-radius: var(--nxd-radius, 12px); background: var(--nx-surface, #fff); padding: 14px; margin: 0; box-shadow: none; width: auto; } .file-input .file-preview:empty, .file-input .file-preview:has(.file-preview-thumbnails:empty) { display: none; } .file-input .file-preview-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; } .file-input .file-preview-frame { border: 1px solid var(--nx-border, #E4E2DC) !important; border-radius: var(--nx-radius-md, 10px) !important; box-shadow: none !important; padding: 4px !important; margin: 0 !important; } .file-input .kv-file-content img, .file-input .file-preview-image { border-radius: var(--nx-radius-sm, 6px); } .file-input .file-caption-main { display: flex; align-items: stretch; gap: 8px; } .file-input .file-caption.kv-fileinput-caption { flex: 1; display: flex; align-items: center; height: 42px; border: 1px solid var(--nx-border, #E4E2DC) !important; border-radius: var(--nx-radius-md, 10px) !important; background: var(--nx-surface, #fff) !important; color: var(--nx-text-tertiary, #8B887F) !important; box-shadow: none !important; font-size: 13px; } /* Bootstrap 3 gives .input-group-btn { width: 1% } so its table-cell layout collapses the cell to the button. Inside this flex row that 1% resolves to ~2px, the Browse button overflows its own wrapper, and the overflow lands outside the field — to the left under RTL, which is exactly how it read as "detached" from the input. Size the wrapper to its content and let the caption (flex:1 1 0 with min-width:0 below) absorb the remaining width. */ .file-input .input-group-btn { display: flex; gap: 6px; width: auto !important; flex: 0 0 auto; } .file-input .btn.btn-file { display: inline-flex !important; align-items: center; height: 42px; background: var(--nx-surface-interactive, #F4F2EE) !important; color: var(--nx-text-secondary, #5C5A55) !important; border: 1px solid var(--nx-border, #E4E2DC) !important; border-radius: var(--nx-radius-md, 10px) !important; box-shadow: none !important; font-weight: 600; font-size: 12.5px; flex: 0 0 auto; white-space: nowrap; } .file-input .file-caption.kv-fileinput-caption { min-width: 0; } .file-input .btn.btn-file:hover { border-color: var(--nx-primary, #4F46E5) !important; color: var(--nx-primary, #4F46E5) !important; } .file-input .btn.fileinput-remove-button, .file-input .btn.fileinput-cancel-button { height: 42px; background: var(--nx-surface, #fff) !important; color: var(--nx-danger, #B42318) !important; border: 1px solid var(--nx-border, #E4E2DC) !important; border-radius: var(--nx-radius-md, 10px) !important; box-shadow: none !important; font-size: 12.5px; } .file-input .btn.fileinput-remove-button:hover { border-color: var(--nx-danger, #B42318) !important; background: var(--nx-danger-soft, rgba(180,35,24,.08)) !important; } .file-input .kv-upload-progress .progress { border-radius: 999px; overflow: hidden; background: var(--nx-surface-interactive, #F4F2EE); } .file-input .kv-upload-progress .progress-bar { background-color: var(--nx-primary, #4F46E5) !important; } /* Compact quick-add "+" trigger next to Unit/Brand selects on the Product form — was a plain Bootstrap .btn-default, now a small neutral, bordered icon action that only picks up the Indigo accent on hover/focus rather than sitting there permanently colored. */ .nx-quickadd-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--nx-surface-interactive, #F4F2EE) !important; color: var(--nx-text-secondary, #5C5A55) !important; border: 1px solid var(--nx-border, #E4E2DC) !important; border-radius: var(--nx-radius-md, 10px) !important; box-shadow: none !important; } .nx-quickadd-btn:hover, .nx-quickadd-btn:focus { border-color: var(--nx-primary, #4F46E5) !important; color: var(--nx-primary, #4F46E5) !important; } .nx-quickadd-btn:disabled { opacity: .5; } /* Upload / Dropzone — wraps a real native (Laravel Collective's Form::file() output, unchanged name/id/accept/required attributes) so drag-and-drop and click-to-browse both keep working natively; only the visual chrome is new. The input is stretched invisibly over the whole box (position:absolute, opacity:0) so both click and native OS drag-drop land on it. See .nx-upload-dropzone- input's change handler in public/js/app.js for the filename preview. */ .nx-upload-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 28px 20px; border: 1.5px dashed var(--nx-border-strong, #CFCCC3); border-radius: var(--nxd-radius, 12px); background: var(--nx-surface, #fff); cursor: pointer; transition: border-color 130ms ease, background-color 130ms ease; } .nx-upload-dropzone:hover, .nx-upload-dropzone.is-dragover { border-color: var(--nx-primary, #4F46E5); background: var(--nx-primary-soft, rgba(79,70,229,.06)); } .nx-upload-dropzone.has-file { border-style: solid; border-color: var(--nx-success, #15803D); } .nx-upload-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .nx-upload-dropzone-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--nx-primary-soft, rgba(79,70,229,.10)); color: var(--nx-primary, #4F46E5); margin-bottom: 4px; } .nx-upload-dropzone-text { font-size: 13.5px; color: var(--nx-text-primary, #1A1917); } .nx-upload-dropzone-text strong { color: var(--nx-primary, #4F46E5); font-weight: 700; } .nx-upload-dropzone-hint { font-size: 11.5px; color: var(--nx-text-tertiary, #8B887F); } .nx-upload-dropzone-filename { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--nx-success, #15803D); } .nx-upload-dropzone-filename:empty { display: none; } /* Compact variant — per-variation-row image upload inside a narrow table cell doesn't have room for the full-size dropzone padding/icon. */ .nx-upload-dropzone.is-compact { padding: 10px 8px; gap: 2px; } .nx-upload-dropzone.is-compact .nx-upload-dropzone-icon { width: 26px; height: 26px; margin-bottom: 0; } .nx-upload-dropzone.is-compact .nx-upload-dropzone-icon svg { width: 14px; height: 14px; } .nx-upload-dropzone.is-compact .nx-upload-dropzone-text { font-size: 11.5px; } .nx-upload-dropzone.is-compact .nx-upload-dropzone-hint { display: none; } /* Content padding rhythm — the legacy AdminLTE base (public/css/app.css) gives
a flat 15px on every side; the real Dashboard's own wrapper (.sbx-content-shell + its inner .nxd div, shared by every page including this one) already contributes 24px of top padding before the page's own content starts, and uses 20px horizontal. Stacking the legacy 15px on top of that shared 24px was producing an extra ~39px dead gap under the page header that the Dashboard doesn't have. Scoped to .nx-shell only — pages that haven't opted into the redesign keep the old AdminLTE spacing untouched. */ .content.nx-shell { padding: 0 20px 20px; } /* .nx-simple-card intentionally removed — superseded by .nx-workspace below (same idea, but no shadow, per the approved final Art Direction: the primary content surface sits flush against the canvas with a hairline border only, not "floating"). */ /* .nx-narrow-list-card intentionally removed — superseded by the approved final Art Direction: simple management pages use the real workspace width (.nx-workspace) rather than being narrowed to hide empty space. See .nx-workspace below. */ /* Buttons — five roles, one accent */ .nx-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--nx-font-sans); font-size: 13.5px; font-weight: 600; line-height: 1.2; border-radius: var(--nx-radius-sm); padding: 9px 16px; border: 1px solid transparent; cursor: pointer; } .nx-btn-primary { background: var(--nx-accent); color: #fff; } .nx-btn-primary:hover { background: var(--nx-accent-strong); } .nx-btn-secondary { background: var(--nx-surface); color: var(--nx-text-primary); border-color: var(--nx-border-strong); } .nx-btn-secondary:hover { background: var(--nx-surface-interactive); } .nx-btn-tertiary { background: transparent; color: var(--nx-accent); border: none; padding-inline-start: 0; padding-inline-end: 0; } .nx-btn-destructive { background: transparent; color: var(--nx-danger); border-color: var(--nx-danger-soft); } .nx-btn-disabled, .nx-btn:disabled { background: var(--nx-surface-interactive); color: var(--nx-text-disabled); border-color: var(--nx-border); cursor: not-allowed; } /* Inputs & Select */ .nx-input-wrap { display: flex; flex-direction: column; gap: 6px; } .nx-label { font-family: var(--nx-font-sans); font-size: 12.5px; font-weight: 600; color: var(--nx-text-primary); } .nx-label .req { color: var(--nx-danger); } .nx-input, .nx-select { background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); padding: 9px 12px; font-size: 13.5px; font-family: var(--nx-font-sans); color: var(--nx-text-primary); } .nx-input::placeholder { color: var(--nx-text-tertiary); } .nx-input:focus, .nx-input-focus { outline: none; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); } .nx-input-error { border-color: var(--nx-danger); } .nx-help { font-size: 11.5px; color: var(--nx-text-tertiary); } .nx-help-error { color: var(--nx-danger); } /* Tables — hairline, monospace numerics, edge-accent selection */ .nx-table { width: 100%; border-collapse: collapse; font-family: var(--nx-font-sans); font-size: 13px; } /* Bootstrap's own .table .table rule hardcodes a white nested-table background (its light-theme default for tables inside tables) — invisible in light mode but shows as a stray white box once a .nx-table is nested inside a legacy .table in a dark-themed page. */ .table .nx-table, .table .table.nx-table { background-color: transparent; } .nx-table thead th { text-align: start; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--nx-text-tertiary); padding: 0 12px 10px; border-bottom: 1px solid var(--nx-border-strong); } .nx-table tbody td { padding: 12px; border-bottom: 1px solid var(--nx-border-faint); color: var(--nx-text-primary); } .nx-table tbody tr:last-child td { border-bottom: none; } .nx-table tbody tr:hover td { background: var(--nx-surface-interactive); } .nx-table .num { text-align: end; font-variant-numeric: tabular-nums; font-family: var(--nx-font-mono); font-size: 12.5px; } .nx-table .sec { color: var(--nx-text-secondary); font-size: 12px; } .nx-table tr.selected td { background: var(--nx-accent-soft); border-inline-start: 2px solid var(--nx-accent); } .nx-table tr.selected td:first-child { padding-inline-start: 10px; } /* Tabs — underline, not boxed */ .nx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--nx-border); font-family: var(--nx-font-sans); } .nx-tab { padding: 10px 4px; font-size: 13px; font-weight: 600; color: var(--nx-text-secondary); border-bottom: 2px solid transparent; margin-inline-end: 20px; } .nx-tab.active { color: var(--nx-accent); border-color: var(--nx-accent); } /* Filters */ .nx-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; background: var(--nx-surface); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); padding: 12px 14px; } .nx-filter-chip { font-size: 12px; background: var(--nx-surface-interactive); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); padding: 5px 12px; color: var(--nx-text-secondary); } /* Modals */ .nx-modal { background: var(--nx-surface-elevated); border-radius: var(--nx-radius-lg); box-shadow: var(--nx-shadow-3); overflow: hidden; } .nx-modal-head { padding: 16px 18px; border-bottom: 1px solid var(--nx-border-faint); font-family: var(--nx-font-sans); } /* Bootstrap's own native .modal-* (used by the app's many legacy modals, e.g. payment/edit-status dialogs) never had theme-token coverage — it was hardcoded to Bootstrap's default white, so every such modal showed as a stark white box in Dark Mode regardless of the rest of the page. Scoped override only, no markup/behavior change. */ .modal-content { background-color: var(--nx-surface-elevated) !important; color: var(--nx-text-primary) !important; border-color: var(--nx-border) !important; } .modal-header, .modal-footer { border-color: var(--nx-border-faint) !important; } .modal-title { color: var(--nx-text-primary) !important; } .modal .close { color: var(--nx-text-primary) !important; text-shadow: none !important; opacity: .6; } .modal .close:hover { opacity: 1; } .nx-modal-head h1, .nx-modal-head h2, .nx-modal-head h3, .nx-modal-head h4, .nx-modal-head h5 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--nx-text-primary); } .nx-modal-head p { margin: 0; font-size: 12px; color: var(--nx-text-tertiary); } .nx-modal-body { padding: 16px 18px; } .nx-modal-foot { padding: 14px 18px; border-top: 1px solid var(--nx-border-faint); display: flex; gap: 8px; justify-content: flex-end; } /* Alerts */ .nx-alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--nx-radius-md); font-family: var(--nx-font-sans); font-size: 13px; color: var(--nx-text-primary); background: var(--nx-surface); border: 1px solid var(--nx-border); border-inline-start: 3px solid transparent; } .nx-alert-danger { border-inline-start-color: var(--nx-danger); } .nx-alert-success { border-inline-start-color: var(--nx-success); } .nx-alert-warning { border-inline-start-color: var(--nx-warning); } .nx-alert-info { border-inline-start-color: var(--nx-info); } /* Empty states — icon + title + description + optional action, the one shared pattern for "no data yet" anywhere in the app. */ .nx-empty { text-align: center; padding: 56px 24px; font-family: var(--nx-font-sans); } .nx-empty .ic { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 14px; background: var(--nx-accent-soft); color: var(--nx-accent); display: flex; align-items: center; justify-content: center; } .nx-empty .ic svg { width: 28px; height: 28px; } .nx-empty .t { font-size: 15px; font-weight: 700; color: var(--nx-text-primary); margin-bottom: 6px; } .nx-empty .d { font-size: 13px; color: var(--nx-text-secondary); max-width: 380px; margin: 0 auto; line-height: 1.65; } .nx-empty .a { margin-top: 20px; display: inline-flex; } /* Disclosure — secondary/advanced info that shouldn't compete with the main content (e.g. a cron command, a raw id, a technical setting). */ .nx-disclosure { border: 1px solid var(--nx-border); border-radius: var(--nxd-radius-sm, 10px); background: var(--nx-surface-interactive); overflow: hidden; } .nx-disclosure > summary { padding: 12px 16px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--nx-text-secondary); display: flex; align-items: center; justify-content: space-between; list-style: none; gap: 8px; } .nx-disclosure > summary::-webkit-details-marker { display: none; } .nx-disclosure > summary .chev { width: 16px; height: 16px; flex-shrink: 0; transition: transform 150ms ease; color: var(--nx-text-tertiary); } .nx-disclosure[open] > summary .chev { transform: rotate(180deg); } .nx-disclosure-body { padding: 0 16px 16px; font-size: 12.5px; color: var(--nx-text-secondary); border-top: 1px solid var(--nx-border); padding-top: 12px; } .nx-disclosure-body code { display: inline-block; background: var(--nx-surface) !important; color: var(--nx-text-primary) !important; font-family: var(--nx-font-mono, monospace); font-size: 12.5px; padding: 6px 10px; border-radius: var(--nxd-radius-sm, 8px); border: 1px solid var(--nx-border); } /* Status — quiet dot by default; pill reserved for page-level alert counts */ .nx-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--nx-font-sans); font-size: 12.5px; color: var(--nx-text-primary); } .nx-status .sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .nx-status-success .sdot { background: var(--nx-success); } .nx-status-warning .sdot { background: var(--nx-warning); } .nx-status-danger .sdot { background: var(--nx-danger); } .nx-status-neutral .sdot { background: var(--nx-text-tertiary); } .nx-badge-pill { display: inline-flex; align-items: center; font-family: var(--nx-font-sans); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--nx-danger-soft); color: var(--nx-danger); } /* Financial numerics — IBM Plex Mono everywhere digits line up */ .fin-figure { font-family: var(--nx-font-mono); font-variant-numeric: tabular-nums; } .fin-hero { font-size: 30px; font-weight: 600; color: var(--nx-accent); } .fin-positive { color: var(--nx-success); } .fin-negative { color: var(--nx-danger); } /* ================================================================ MODULAR CONSOLE — the NEXTSYSTEM product identity system. Teal (--nx-accent) and Plex (--nx-font-*) above are fixed inputs; everything below is new: one shape rule (a clipped panel edge), one structural mark (a registration tick), one motion principle (snap, not fade). Every module — POS, Sales, Inventory, CRM, HR, Finance, Reports — is "a panel keyed into the same rack," so this layer is deliberately NOT named after any one module's content. Namespaced "nxc-*" (NEXTSYSTEM Console) rather than reusing the existing "nx-btn"/"nx-card"/"nx-table"/etc. classes above: those are already live in resources/views/account_reports/link_account_modal.blade.php and resources/views/report/table_report.blade.php — redefining them in place would silently reskin already-shipped screens outside this phase's scope. New system, new names, zero collision. ================================================================ */ :root { /* spacing rhythm — one modular scale, replacing ad hoc utility spacing */ --nxc-sp-1: 4px; --nxc-sp-2: 8px; --nxc-sp-3: 12px; --nxc-sp-4: 20px; --nxc-sp-5: 32px; --nxc-sp-6: 52px; /* shape — the one clipped corner, three sizes */ --nxc-notch-lg: 16px; --nxc-notch-md: 11px; --nxc-notch-sm: 7px; /* motion — Product DNA Law 11: one curve, exactly two durations, nothing else. Short = direct manipulation (hover/press). Slow = state change (confirm/resolve). No third timing exists anywhere. */ --nxc-ease: cubic-bezier(.16, .84, .32, 1); --nxc-duration: 130ms; --nxc-duration-slow: 200ms; } .nxc-shape-lg { clip-path: polygon(var(--nxc-notch-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nxc-notch-lg)); } .nxc-shape-md { clip-path: polygon(var(--nxc-notch-md) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nxc-notch-md)); } .nxc-shape-sm { clip-path: polygon(var(--nxc-notch-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nxc-notch-sm)); } [dir="rtl"] .nxc-shape-lg { clip-path: polygon(0 0, calc(100% - var(--nxc-notch-lg)) 0, 100% var(--nxc-notch-lg), 100% 100%, 0 100%); } [dir="rtl"] .nxc-shape-md { clip-path: polygon(0 0, calc(100% - var(--nxc-notch-md)) 0, 100% var(--nxc-notch-md), 100% 100%, 0 100%); } [dir="rtl"] .nxc-shape-sm { clip-path: polygon(0 0, calc(100% - var(--nxc-notch-sm)) 0, 100% var(--nxc-notch-sm), 100% 100%, 0 100%); } /* Registration tick — marks a structural joint, one per joint, never decorative */ .nxc-tick { position: relative; } .nxc-tick::before { content: ""; position: absolute; top: -1px; inset-inline-start: -1px; width: 9px; height: 9px; border-top: 1.5px solid var(--nx-accent); border-inline-start: 1.5px solid var(--nx-accent); } /* Tracked label voice — every eyebrow/section-marker/table-header/form-label in the system speaks this one voice, not per-component styling */ .nxc-label { font-family: var(--nx-font-sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--nx-text-tertiary); } /* Buttons — outlined at rest, fill earned on hover/press via a sweep from the clipped corner, never a resting filled/gradient block */ .nxc-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: var(--nx-font-sans); font-size: 13px; font-weight: 600; padding: 9px 16px; border: 1.5px solid var(--nx-accent); color: var(--nx-accent); background: var(--nx-surface); cursor: pointer; overflow: hidden; isolation: isolate; transition: color var(--nxc-duration) var(--nxc-ease); } .nxc-btn::after { content: ""; position: absolute; inset: 0; background: var(--nx-accent); z-index: -1; transform: translateX(-100%); transition: transform var(--nxc-duration) var(--nxc-ease); } [dir="rtl"] .nxc-btn::after { transform: translateX(100%); } .nxc-btn:hover { color: #fff; } .nxc-btn:hover::after { transform: translateX(0); } .nxc-btn--quiet { border-color: var(--nx-border-strong); color: var(--nx-text-secondary); } .nxc-btn--quiet::after { background: var(--nx-text-primary); } .nxc-btn--danger { border-color: var(--nx-danger); color: var(--nx-danger); } .nxc-btn--danger::after { background: var(--nx-danger); } .nxc-btn--icon { padding: 8px; } /* Fields — clipped-corner cells, tracked label above, focus = thin outline offset outward, never a glow/shadow ring */ .nxc-field { display: flex; flex-direction: column; gap: 6px; } .nxc-field input, .nxc-field select { font-family: var(--nx-font-mono); font-size: 13.5px; color: var(--nx-text-primary); border: 1px solid var(--nx-border-strong); background: var(--nx-surface); padding: 9px 12px; } .nxc-field input:focus, .nxc-field select:focus { outline: 1.5px solid var(--nx-accent); outline-offset: 2px; border-color: var(--nx-accent); } /* Panels — the clipped-corner sheet, one hairline border, a registration tick at the top-start joint, no shadow at rest */ .nxc-panel { background: var(--nx-surface); border: 1px solid var(--nx-border); padding: var(--nxc-sp-4); position: relative; } /* Data rows — no header fill, no zebra. Row identity on hover is a single accent edge-tick, not a full-row background fill */ .nxc-rows { width: 100%; border-collapse: collapse; font-family: var(--nx-font-sans); font-size: 13px; } .nxc-rows thead th { text-align: start; padding: 0 10px 10px; border-bottom: 1.5px solid var(--nx-text-primary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--nx-text-tertiary); } .nxc-rows tbody td { padding: 11px 10px; border-bottom: 1px solid var(--nx-border); color: var(--nx-text-primary); } .nxc-rows tbody tr { position: relative; transition: background-color .1s var(--nxc-ease); } .nxc-rows tbody tr:hover { background: var(--nx-accent-soft); } .nxc-rows tbody tr::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 0; background: var(--nx-accent); transition: width .12s var(--nxc-ease); } .nxc-rows tbody tr:hover::before { width: 3px; } .nxc-rows td.num { font-family: var(--nx-font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext; font-weight: 600; } /* ================================================================ Buttons stage, part 2 — full system coverage, not DataTables only. Audited via `grep -rho 'class="..."' resources/views` for every real button class family actually in use across the app (398+ tw-dw-btn, 126+ legacy Bootstrap .btn). Two systems coexist in this codebase (newer Tailwind/DaisyUI tw-dw-btn-*, older Bootstrap btn-*) — both get the same shape/motion language so no button anywhere still reads as the old UltimatePOS chrome. All additive CSS overrides of existing shared utility classes; no PHP/JS/markup touched anywhere, so this reaches every module in one pass. Role taxonomy (both systems mapped onto the same 5 roles): Primary (solid accent) / Secondary (solid neutral) / Outline (outline-first, fills on hover — done above) / Danger (solid, immediately legible as destructive) / Success/Info/Warning (solid semantic, same shape language). Every rule below also defines :disabled, :focus-visible and :active so the five required states exist for every role, not just Outline. ---- */ .tw-dw-btn, .btn { border-radius: 0 !important; font-family: var(--nx-font-sans); font-weight: 600; transition: color var(--nxc-duration) var(--nxc-ease), background-color var(--nxc-duration) var(--nxc-ease), border-color var(--nxc-duration) var(--nxc-ease), opacity var(--nxc-duration) var(--nxc-ease), transform var(--nxc-duration) var(--nxc-ease); } /* Buttons/Spacing Fix (Phase 3). DaisyUI's compiled .tw-dw-btn base rule (public/css/tailwind/app.css) sets height/min-height: 3rem (48px) for the size-less/"default" tier — used bare (no -xs/-sm/-lg modifier) on 271 buttons app-wide (page-level Add/Save/Submit CTAs, modal actions), confirmed via grep. 48px reads oversized for a dense SaaS UI next to DaisyUI's own -sm (32px) and -xs (24px) tiers already in real use for table row actions, leaving a big, inconsistent jump between "page action" and "table action" instead of a coherent size ladder. Scoped with :not() so DaisyUI's own -xs/-sm/-lg tiers (and anything that sets its own explicit tw-h-* / tw-min-h-* utility, which always wins by being later/more specific) are completely unaffected — only the bare/default tier shrinks, on top of the app's existing clip-path corner + border radius, both left untouched. */ .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.tw-dw-btn-lg) { height: 40px !important; min-height: 40px !important; } .tw-dw-btn, .tw-dw-btn-xs, .btn { clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); } .tw-dw-btn-lg { clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); } [dir="rtl"] .tw-dw-btn, [dir="rtl"] .btn { clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); } [dir="rtl"] .tw-dw-btn-lg { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); } /* Active — a tactile "press," matching the snap motion elsewhere */ .tw-dw-btn:active, .btn:active { transform: scale(.97); } /* Focus-visible — required per role, one consistent ring, keyboard-only */ .tw-dw-btn:focus-visible, .btn:focus-visible { outline: 2px solid var(--nx-accent) !important; outline-offset: 2px; } /* Disabled — required per role, flattened + desaturated, no hover/press */ .tw-dw-btn:disabled, .tw-dw-btn.tw-dw-btn-disabled, .tw-dw-btn[disabled], .btn:disabled, .btn.disabled { opacity: .45 !important; filter: grayscale(.3); pointer-events: none; transform: none !important; } /* Outline (already-verified role) */ .tw-dw-btn.tw-dw-btn-outline { border: 1.5px solid var(--nx-border-strong) !important; background: transparent !important; color: var(--nx-text-secondary) !important; } .tw-dw-btn.tw-dw-btn-outline:hover { background: var(--nx-text-primary) !important; border-color: var(--nx-text-primary) !important; color: #fff !important; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-accent { border-color: var(--nx-accent) !important; color: var(--nx-accent) !important; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-accent:hover { background: var(--nx-accent) !important; border-color: var(--nx-accent) !important; color: #fff !important; } /* .tw-dw-btn-neutral alone is a solid fill (see "Secondary" below) using --nx-text-primary as its background — correct for a solid button, but --nx-text-primary is a light/near-white color in dark mode, so without this combined selector, .tw-dw-btn-outline.tw-dw-btn-neutral (equal specificity, .tw-dw-btn-neutral sits later in this file) rendered as a solid off-white block instead of a transparent outline button. */ .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-neutral { background: transparent !important; border-color: var(--nx-border-strong) !important; color: var(--nx-text-secondary) !important; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-neutral:hover { background: var(--nx-surface-interactive) !important; border-color: var(--nx-text-primary) !important; color: var(--nx-text-primary) !important; } /* Primary — solid accent, the main-action role */ .tw-dw-btn.tw-dw-btn-primary, .btn.btn-primary { background: var(--nx-accent) !important; border: 1.5px solid var(--nx-accent) !important; color: #fff !important; } .tw-dw-btn.tw-dw-btn-primary:hover, .btn.btn-primary:hover { background: var(--nx-accent-strong) !important; border-color: var(--nx-accent-strong) !important; color: #fff !important; } /* Secondary — solid neutral, for the second action in a pair. Uses --nx-neutral-solid (fixed ink color, see token comment above) instead of --nx-text-primary so this role stays readable — white text on a solid dark pill — in both Light and Dark mode. */ .tw-dw-btn.tw-dw-btn-neutral, .btn.btn-default, .btn.btn-flat { background: var(--nx-neutral-solid) !important; border: 1.5px solid var(--nx-neutral-solid) !important; color: #fff !important; } .tw-dw-btn.tw-dw-btn-neutral:hover, .btn.btn-default:hover, .btn.btn-flat:hover { background: var(--nx-neutral-solid-hover) !important; border-color: var(--nx-neutral-solid-hover) !important; color: #fff !important; } /* Legacy adjunct buttons that ship with .bg-white — the small "+ add" and search affordances pinned to an input-group in the Sell / POS / booking forms — declare themselves as light-surface controls in their own markup. The solid-ink neutral role above repainted them near-black, which is what made them read as leftovers from the old theme sitting inside an otherwise light NEXTSYSTEM form. Give them the quiet bordered treatment already used for .file-input .btn-file rather than a new look. Higher specificity (three classes) so it wins without weakening the neutral role for everything else. */ .btn.btn-default.bg-white, .btn.btn-flat.bg-white { background: var(--nx-surface-interactive, #F4F2EE) !important; border: 1px solid var(--nx-border, #E4E2DC) !important; color: var(--nx-text-secondary, #5C5A55) !important; } .btn.btn-default.bg-white:hover, .btn.btn-flat.bg-white:hover { background: var(--nx-surface-interactive, #F4F2EE) !important; border-color: var(--nx-primary, #4F46E5) !important; color: var(--nx-primary, #4F46E5) !important; } /* The icons inside them inherit the button's ink instead of keeping the old hardcoded bright blue that only worked against a dark fill. */ .btn.btn-default.bg-white i, .btn.btn-flat.bg-white i, .btn.btn-default.bg-white svg, .btn.btn-flat.bg-white svg { color: inherit !important; } /* Danger — solid, immediately legible as destructive */ .tw-dw-btn.tw-dw-btn-error, .btn.btn-danger { background: var(--nx-danger) !important; border: 1.5px solid var(--nx-danger) !important; color: #fff !important; } .tw-dw-btn.tw-dw-btn-error:hover, .btn.btn-danger:hover { filter: brightness(.9); color: #fff !important; } /* Success / Info / Warning — same shape language, semantic fill */ .tw-dw-btn.tw-dw-btn-success, .btn.btn-success { background: var(--nx-success) !important; border: 1.5px solid var(--nx-success) !important; color: #fff !important; } .tw-dw-btn.tw-dw-btn-info, .btn.btn-info { background: var(--nx-info) !important; border: 1.5px solid var(--nx-info) !important; color: #fff !important; } .tw-dw-btn.tw-dw-btn-warning, .btn.btn-warning { background: var(--nx-warning) !important; border: 1.5px solid var(--nx-warning) !important; color: #fff !important; } .tw-dw-btn.tw-dw-btn-success:hover, .btn.btn-success:hover, .tw-dw-btn.tw-dw-btn-info:hover, .btn.btn-info:hover, .tw-dw-btn.tw-dw-btn-warning:hover, .btn.btn-warning:hover { filter: brightness(.92); color: #fff !important; } /* Link — text-only, no container to notch, underline is the affordance */ .btn.btn-link { clip-path: none !important; background: transparent !important; border: none !important; color: var(--nx-accent) !important; text-decoration: none; } .btn.btn-link:hover { text-decoration: underline; } /* ================================================================ Inputs stage — the one real class family in use: `.form-control` (141 occurrences, `grep -rho`), used for text/number/textarea AND as the base class under select2 (`.form-control.select2`). select2 replaces the native control's visible markup with its own `.select2-selection`, so that needs its own rule to carry the same shape/focus language — styling `.form-control` alone would miss every select2 dropdown in the app. No height/padding touched, so no layout regression risk to existing forms. ================================================================ */ .form-control { border-radius: 0 !important; clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); border: 1px solid var(--nx-border-strong) !important; background-color: var(--nx-surface) !important; color: var(--nx-text-primary) !important; box-shadow: none !important; transition: border-color var(--nxc-duration) var(--nxc-ease), outline-color var(--nxc-duration) var(--nxc-ease); } [dir="rtl"] .form-control { clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); } .form-control:focus { outline: 1.5px solid var(--nx-accent) !important; outline-offset: 2px; border-color: var(--nx-accent) !important; box-shadow: none !important; } .form-control:disabled, .form-control[readonly] { background-color: var(--nx-surface-interactive) !important; color: var(--nx-text-tertiary) !important; cursor: not-allowed; } .form-control::placeholder { color: var(--nx-text-tertiary); opacity: 1; } /* select2 — same shape + focus language as .form-control above */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border-radius: 0 !important; clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); border: 1px solid var(--nx-border-strong) !important; background-color: var(--nx-surface) !important; } [dir="rtl"] .select2-container--default .select2-selection--single, [dir="rtl"] .select2-container--default .select2-selection--multiple { clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple { outline: 1.5px solid var(--nx-accent) !important; outline-offset: 2px; border-color: var(--nx-accent) !important; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: var(--nx-surface-interactive) !important; } .select2-selection__rendered { color: var(--nx-text-primary) !important; } .select2-selection__placeholder { color: var(--nx-text-tertiary) !important; } .select2-selection__arrow b { border-color: var(--nx-text-tertiary) transparent transparent transparent !important; } /* The closed selection box above was already themed, but the floating OPEN dropdown panel (select2 renders it appended to , not inside the select2-container) had no token coverage at all — a stark white panel with black text over an otherwise-dark page. */ .select2-dropdown { background-color: var(--nx-surface-elevated) !important; border-color: var(--nx-border-strong) !important; color: var(--nx-text-primary) !important; } .select2-search--dropdown .select2-search__field { background-color: var(--nx-surface) !important; border-color: var(--nx-border) !important; color: var(--nx-text-primary) !important; } .select2-results__option { color: var(--nx-text-primary) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--nx-accent-soft) !important; color: var(--nx-text-primary) !important; } .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--nx-surface-interactive) !important; } /* ================================================================ Tables stage — the real shared table language, app-wide. Every DataTable/plain table uses `table.table` (281 occurrences, grep), often combined with `.table-bordered`/`.table-striped` (Bootstrap). Same principle as the button/input stages: one global override on the real shared class, not a new component nobody uses. Structural chrome only (header fill, zebra, borders, row identity) — cell CONTENT (status badges, links, icons) is untouched so nothing inside any already-tuned module's table visually breaks. ================================================================ */ table.table { border-color: var(--nx-border-faint) !important; } table.table.table-bordered, table.table.table-bordered > thead > tr > th, table.table.table-bordered > tbody > tr > td { border-color: var(--nx-border-faint) !important; } table.table > thead > tr > th { background: transparent !important; border-top: none !important; border-bottom: 1.5px solid var(--nx-text-primary) !important; color: var(--nx-text-tertiary) !important; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } table.table.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent !important; } table.table > tbody > tr { transition: background-color var(--nxc-duration) var(--nxc-ease); } table.table > tbody > tr:hover { background-color: var(--nx-accent-soft) !important; } table.table > tbody > tr > td { border-color: var(--nx-border-faint) !important; } /* ================================================================ Panels stage — the real, live card/panel class: `.box` (403 occurrences, grep), the AdminLTE container almost every screen in this app is built from. `.nx-card` above is a not-yet-adopted component name with zero current usage; `.box` is where the actual Shared Edge / no-shadow migration (Decisions 1–2) has real effect. Removes the legacy colored top-accent-bar, the rounded corner, and the drop shadow; adds the same clip-path notch already carried by buttons/inputs/tables so a `.box` reads as the same family. Header loses its gray fill in favor of the transparent/hairline-rule language already used for table headers. Content (box-body) is untouched — only the container chrome changes. ================================================================ */ .box { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-top: 1px solid var(--nx-border) !important; border-radius: 0 !important; clip-path: polygon(var(--nxc-notch-md) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nxc-notch-md)); box-shadow: none !important; } [dir="rtl"] .box { clip-path: polygon(0 0, calc(100% - var(--nxc-notch-md)) 0, 100% var(--nxc-notch-md), 100% 100%, 0 100%); } .box-header { background: transparent !important; color: var(--nx-text-primary) !important; border-bottom: 1px solid var(--nx-border-faint); padding: 14px 16px; } .box-title { font-family: var(--nx-font-sans); font-size: var(--nx-text-md); font-weight: 700; color: var(--nx-text-primary); } /* ================================================================ Toasts stage — toastr's real container/state classes (targeted by the existing Resolve mark injection in public/js/common.js). No dedicated toastr stylesheet exists in this app; this is the first NEXTSYSTEM treatment of it. Shape converges to Shared Edge; shadow is kept — a toast is exactly the "temporary layer above the interface" Decision 2 names as the sanctioned exception. ================================================================ */ #toast-container > div { border-radius: 0 !important; clip-path: polygon(var(--nxc-notch-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nxc-notch-sm)); box-shadow: var(--nx-shadow-2) !important; opacity: 1 !important; font-family: var(--nx-font-sans); } [dir="rtl"] #toast-container > div { clip-path: polygon(0 0, calc(100% - var(--nxc-notch-sm)) 0, 100% var(--nxc-notch-sm), 100% 100%, 0 100%); } #toast-container .toast-title { font-size: var(--nx-text-sm); font-weight: 700; } #toast-container .toast-message { font-size: var(--nx-text-sm); } #toast-container .toast-success { background-color: var(--nx-success) !important; } #toast-container .toast-error { background-color: var(--nx-danger) !important; } #toast-container .toast-warning { background-color: var(--nx-warning) !important; } #toast-container .toast-info { background-color: var(--nx-info) !important; } /* ================================================================ Dropdowns stage — the real, shared Bootstrap `.dropdown-menu` class (row-action menus, user menu, notifications). Shadow is *kept* here on purpose — Decision 2 names Dropdown explicitly as a sanctioned "temporary layer above the interface" exception, same as Modal/Toast. Several real instances (notifications-menu) force their own `!tw-rounded-lg !tw-shadow-lg !tw-bg-white` utilities directly in markup; `!important` here is required to actually win against those, not stylistic preference. ================================================================ */ .dropdown-menu { background: var(--nx-surface-elevated, var(--nx-surface)) !important; border: 1px solid var(--nx-border) !important; border-radius: var(--nx-radius-md, 8px) !important; clip-path: none !important; box-shadow: var(--nx-shadow-2) !important; font-family: var(--nx-font-sans); padding: 6px; } .dropdown-menu > li > a, .dropdown-menu .dropdown-item { color: var(--nx-text-primary) !important; font-size: var(--nx-text-sm); border-radius: var(--nx-radius-sm, 4px) !important; padding: 8px 10px; display: flex; align-items: center; gap: 8px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: var(--nx-surface-interactive) !important; color: var(--nx-text-primary) !important; } .dropdown-menu .divider { background: var(--nx-border-faint); margin: 4px 0; } /* ================================================================ Badges / Labels stage — the real, shared Bootstrap `.label` (63 uses, grep) and `.badge` (23 uses) classes, used app-wide for status/type tags and counters. Same clip amount as buttons/inputs (5px) — proportionally correct at this size, not a new token. ================================================================ */ .label, .badge { display: inline-flex; align-items: center; font-family: var(--nx-font-sans); font-weight: 600; font-size: 11px; line-height: 1.7; padding: 1px 9px; border-radius: 999px !important; clip-path: none !important; } /* Status/type tags — solid saturated rectangles with a notch corner (the old "Shared Edge" language) read as a stock Bootstrap label, not a NEXTSYSTEM one. Soft-tint pill + colored text matches the Dashboard's own status language (KPI deltas, alert rows) instead of inventing a third visual system for badges specifically. */ .label-default, .badge { background-color: var(--nx-surface-interactive) !important; color: var(--nx-text-secondary) !important; } .label-primary { background-color: var(--nx-accent-soft) !important; color: var(--nx-accent) !important; } .label-success { background-color: var(--nx-success-soft) !important; color: var(--nx-success) !important; } .label-info { background-color: var(--nx-info-soft) !important; color: var(--nx-info) !important; } .label-warning { background-color: var(--nx-warning-soft) !important; color: var(--nx-warning) !important; } .label-danger { background-color: var(--nx-danger-soft) !important; color: var(--nx-danger) !important; } /* ================================================================ Alerts stage — the real `.alert` class (23 uses), rendered by the app-wide validation-error partial (layouts/partials/error.blade.php) and scattered inline success/info notices. Language ported over from the unused `.nx-alert` definition above rather than inventing a second one: soft surface, hairline border, left accent edge — no filled color block, no radius, no shadow. ================================================================ */ .alert { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-inline-start: 3px solid var(--nx-text-tertiary) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--nx-text-primary) !important; font-family: var(--nx-font-sans); font-size: var(--nx-text-base); padding: 12px 14px; } .alert a { color: inherit; text-decoration: underline; } .alert ul { margin: 4px 0 0; padding-inline-start: 18px; } .alert-danger, .alert-error { border-inline-start-color: var(--nx-danger) !important; } .alert-success { border-inline-start-color: var(--nx-success) !important; } .alert-warning { border-inline-start-color: var(--nx-warning) !important; } .alert-info { border-inline-start-color: var(--nx-info) !important; } .alert .close { color: var(--nx-text-tertiary); opacity: 1; text-shadow: none; } /* ================================================================ Pagination stage — two real, coexisting patterns: Bootstrap `.pagination` (6 uses, grep) and DataTables' own `.dataTables_paginate .paginate_button` (the actual control on every list screen in the app, confirmed in the bundled DataTables source). Both get the same language: hairline buttons, no fill at rest, accent fill only for the current page. ================================================================ */ .pagination > li > a, .pagination > li > span, .dataTables_paginate .paginate_button { font-family: var(--nx-font-sans); font-size: var(--nx-text-sm); color: var(--nx-text-secondary) !important; background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: 0 !important; margin-inline-start: -1px; padding: 6px 11px; } .pagination > li:first-child > a, .pagination > li:first-child > span, .dataTables_paginate .paginate_button:first-child { margin-inline-start: 0; } .pagination > li > a:hover, .pagination > li > span:hover, .dataTables_paginate .paginate_button:hover { background: var(--nx-surface-interactive) !important; color: var(--nx-text-primary) !important; } .pagination > .active > a, .pagination > .active > span, .dataTables_paginate .paginate_button.current { /* Active pagination is a genuine interaction/selected state, so it uses the Indigo interaction accent (--nx-primary) rather than the app's teal brand accent (--nx-accent) — per the approved final Art Direction: "Indigo for primary CTA/selected/active/focus states, not decoration." Global on purpose: pagination should read the same way everywhere. */ background: var(--nx-primary, #4F46E5) !important; border-color: var(--nx-primary, #4F46E5) !important; color: #fff !important; } .pagination > .disabled > a, .pagination > .disabled > span, .dataTables_paginate .paginate_button.disabled { color: var(--nx-text-disabled) !important; background: var(--nx-surface) !important; cursor: not-allowed; } .dataTables_paginate .ellipsis { color: var(--nx-text-tertiary); padding: 6px 4px; } /* ================================================================ Tabs stage — the real `.nav-tabs` class (17 files, grep). Language ported over from the unused `.nx-tabs`/`.nx-tab` definitions above: underline, not boxed — no per-tab border/fill, active tab marked by an accent underline only. ================================================================ */ .nav-tabs { border-bottom: 1px solid var(--nx-border) !important; font-family: var(--nx-font-sans); } .nav-tabs > li > a { border: none !important; border-radius: 0 !important; background: transparent !important; color: var(--nx-text-secondary) !important; font-size: var(--nx-text-base); font-weight: 600; padding: 10px 4px; margin-inline-end: 20px; margin-bottom: -1px; border-bottom: 2px solid transparent !important; } .nav-tabs > li > a:hover { background: transparent !important; color: var(--nx-text-primary) !important; border-bottom-color: var(--nx-border-strong) !important; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: transparent !important; color: var(--nx-accent) !important; border-bottom-color: var(--nx-accent) !important; box-shadow: none !important; } /* ================================================================ Empty / Loading states stage — DataTables' own real classes (`.dataTables_empty`, `.dataTables_processing`; both confirmed in the bundled DataTables source, sRowEmpty/sProcessing), the actual "no records" and "loading" surface on every list screen in the app. `.nx-empty` above is defined but has zero adoption — this is the real fix. Loading intentionally has no spin/rotation: per the frozen Behavior Physics (No-Residual-Energy), continuous rotation implies force with nothing driving it. A quiet pulse on the text itself is the compliant substitute — motion only while genuinely waiting, and it stops the instant content arrives. ================================================================ */ td.dataTables_empty { padding: 40px 20px !important; text-align: center; color: var(--nx-text-tertiary) !important; font-family: var(--nx-font-sans); font-size: var(--nx-text-sm); } .dataTables_processing { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: 0 !important; box-shadow: var(--nx-shadow-2) !important; color: var(--nx-text-primary) !important; font-family: var(--nx-font-sans); font-size: var(--nx-text-sm); animation: nxLoadingPulse 1.1s ease-in-out infinite; } @keyframes nxLoadingPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .fa-spinner, .spinner-border { color: var(--nx-accent); } /* ================================================================ Consistency Pass — Priority 1: eliminate the second dropdown language. `.tw-dw-dropdown-content` (DaisyUI) coexists with the Bootstrap `.dropdown-menu` already styled above — both are real, both render on every page (header notifications, language switch). Same treatment, verbatim, so there is only one dropdown language in the app, not two. ================================================================ */ .tw-dw-dropdown-content { background: var(--nx-surface) !important; border: 1px solid var(--nx-border) !important; border-radius: 0 !important; clip-path: polygon(var(--nxc-notch-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--nxc-notch-sm)); box-shadow: var(--nx-shadow-2) !important; } [dir="rtl"] .tw-dw-dropdown-content { clip-path: polygon(0 0, calc(100% - var(--nxc-notch-sm)) 0, 100% var(--nxc-notch-sm), 100% 100%, 0 100%); } .tw-dw-dropdown-content li > a, .tw-dw-dropdown-content li > button { border-radius: 0 !important; color: var(--nx-text-primary) !important; } .tw-dw-dropdown-content li > a:hover, .tw-dw-dropdown-content li > button:hover { background: var(--nx-accent-soft) !important; } /* ================================================================ Consistency Pass — Priority 2: every gradient "Add" CTA button, one shared fix. Copy-pasted (not a shared partial) across 34 real files with per-module class suffixes (nx-purchase-cta-primary, nx-st-cta-primary, etc.) — the class list itself is identical everywhere, so one selector on that exact combination reaches all 34 without editing 34 files. Forces it into the existing Primary button role instead of inventing a new one. ================================================================ */ .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600 { background-image: none !important; background-color: var(--nx-accent) !important; border-color: var(--nx-accent) !important; } .tw-dw-btn.tw-bg-gradient-to-r.tw-from-indigo-600:hover { background-color: var(--nx-accent-strong) !important; border-color: var(--nx-accent-strong) !important; } /* ================================================================ Consistency Pass — Priority 4: status pills carrying a second, ad hoc color-utility system (`bg-light-green`, `bg-green`, `bg-light-blue`, `bg-red`, `bg-orange`) alongside `.label`, instead of the semantic `.label-success`/`.label-danger`/etc. system already fixed. Scoped to `.label`/`.badge` specifically — these same bg-* classes are also used elsewhere as plain structural backgrounds (panels, tables) and must not be touched there. ================================================================ */ .label.bg-light-green, .label.bg-green, .badge.bg-light-green, .badge.bg-green { background-color: var(--nx-success) !important; color: #fff !important; } .label.bg-red, .badge.bg-red { background-color: var(--nx-danger) !important; color: #fff !important; } .label.bg-yellow, .label.bg-orange, .badge.bg-yellow, .badge.bg-orange { background-color: var(--nx-warning) !important; color: #fff !important; } .label.bg-light-blue, .label.bg-blue, .label.bg-light-blue-active, .badge.bg-light-blue, .badge.bg-blue { background-color: var(--nx-info) !important; color: #fff !important; } .label.bg-light-gray, .label.bg-gray, .badge.bg-light-gray, .badge.bg-gray { background-color: var(--nx-surface-interactive) !important; color: var(--nx-text-secondary) !important; } /* ================================================================ Icons stage — one construction rule, applied globally: 1.5px stroke, no exceptions. Audited via grep: 57 real files already use the `stroke="currentColor"` inline-SVG icon convention (not Font Awesome — this app's chrome icons are already outline SVGs), but stroke-width is inconsistent (2 / 1.5 / 1.75 / 3.5 / 2.25 / 2.5 / 2.2 / 1.6 / 0 all found in real use). This single rule normalizes every one of them app-wide — no markup touched, CSS overrides the presentation attribute at the svg root, children inherit it. ================================================================ */ svg[stroke="currentColor"] { stroke-width: 1.5 !important; } /* ================================================================ Product Signature — Behavior pillar ("Resolve"). Approved motion: scattered dots (unordered) snap into one aligned row (order) + a brief ring pulse. Triggered from the existing global toastr onShown hook in public/js/common.js on every real toast-success — no new AJAX/business logic, no change to when/why a toast fires, purely a visual mark inserted into the already-shown message. ================================================================ */ .nx-resolve { position:relative; display:inline-flex; width:26px; height:16px; flex-shrink:0; margin-inline-end:8px; vertical-align:middle; } .nx-resolve .d { position:absolute; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.55; transition: transform var(--nxc-duration-slow) var(--nxc-ease), opacity var(--nxc-duration-slow) var(--nxc-ease); } .nx-resolve .d1 { transform: translate(1px,1px); } .nx-resolve .d2 { transform: translate(13px,6px); } .nx-resolve .d3 { transform: translate(21px,0px); } .nx-resolve .d4 { transform: translate(6px,11px); } .nx-resolve.resolved .d { opacity:1; } .nx-resolve.resolved .d1 { transform: translate(2px,6px); } .nx-resolve.resolved .d2 { transform: translate(9px,6px); } .nx-resolve.resolved .d3 { transform: translate(16px,6px); } .nx-resolve.resolved .d4 { transform: translate(23px,6px); } .nx-resolve .ring { position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border:1.2px solid currentColor; border-radius:50%; opacity:0; } .nx-resolve.pulse .ring { animation: nxRingPulse var(--nxc-duration-slow) var(--nxc-ease); } @keyframes nxRingPulse { 0% { opacity:.8; transform:scale(1); } 100% { opacity:0; transform:scale(4); } } /* ================================================================ M3 — THE ONE SHARED CARD/TABLE/BUTTON/FORM COMPONENT ("nx-shell") Previously an opt-in override living in a Blade partial (components/nx_shell_styles.blade.php) that had to be manually @include'd per page — which is exactly how the app ended up with parallel visual systems (60 pages invented their own bespoke CSS instead of remembering to opt in). Moved here, always loaded, and components/widget.blade.php now always renders the .nx-shell class on every card — there is no opt-in left. Any page, module, or future module using @component('components.widget', ...) gets this automatically because it uses the same component, not because of a route or module check. Ref: NEXTSYSTEM Design System — one shared system, no module-specific scope, 2026-08-07. ================================================================ */ .nx-shell.nx-report-widget, .nx-shell.box { border-radius: var(--nxd-radius, 16px) !important; clip-path: none !important; box-shadow: var(--nxd-shadow, 0 1px 2px rgba(16,24,20,.04), 0 8px 24px rgba(16,24,20,.06)) !important; border: 1px solid var(--nx-border, #E4E2DC) !important; background: var(--nx-surface, #fff) !important; } [dir="rtl"] .nx-shell.nx-report-widget, [dir="rtl"] .nx-shell.box { clip-path: none !important; } .nx-shell .box-header, .nx-shell.box > .box-header { padding: 16px 18px; margin-bottom: 0 !important; border-bottom: 1px solid var(--nx-border, #E4E2DC); background: transparent !important; color: var(--nx-text-primary, #1A1917) !important; } .nx-shell.box > .box-body { color: var(--nx-text-primary, #1A1917); } /* Tabs — AdminLTE's .nav-tabs-custom panel (own hardcoded 3px radius + flat shadow), promoted to a bare default like the card: every one of its 15 current usages renders unstyled AdminLTE default today (only 2 had manually opted into .nx-shell), so there is no deliberate existing tab design anywhere in the app to preserve. */ .nav-tabs-custom { border-radius: var(--nxd-radius, 16px) !important; box-shadow: var(--nxd-shadow, 0 1px 2px rgba(16,24,20,.04), 0 8px 24px rgba(16,24,20,.06)) !important; background: var(--nx-surface, #fff) !important; overflow: hidden; border: none !important; } .nav-tabs-custom > .nav-tabs { border-bottom-color: var(--nx-border, #E4E2DC) !important; border-top-right-radius: var(--nxd-radius, 16px) !important; border-top-left-radius: var(--nxd-radius, 16px) !important; background: var(--nx-surface-interactive, #F4F2EE) !important; margin: 0 !important; } .nav-tabs-custom > .nav-tabs > li.active > a { background: var(--nx-surface, #fff) !important; color: var(--nx-accent, #065F46) !important; border-top-color: var(--nx-accent, #065F46) !important; border-color: transparent !important; } .nav-tabs-custom > .nav-tabs > li > a { color: var(--nx-text-secondary, #5C5A55) !important; background: transparent !important; } .nav-tabs-custom > .tab-content { background: var(--nx-surface, #fff) !important; color: var(--nx-text-primary, #1A1917); padding: 16px 18px; } .nx-shell .box-title { font-size: 15px; font-weight: 700; } .nx-shell .box-tools { display: flex; align-items: center; gap: 8px; } .nx-shell code { background: var(--nx-surface-interactive, #F4F2EE) !important; color: var(--nx-text-primary, #1A1917) !important; font-family: var(--nx-font-mono, monospace); font-size: 12.5px; padding: 3px 8px; border-radius: var(--nxd-radius-sm, 8px); border: 1px solid var(--nx-border, #E4E2DC); } .nx-shell table.table > thead > tr > th { background: transparent !important; border-top: none !important; border-bottom: 1px solid var(--nx-border, #E4E2DC) !important; color: var(--nx-text-tertiary, #8B887F) !important; font-size: 11px; font-weight: 600; padding: 10px 12px !important; } .nx-shell table.table.table-bordered > thead > tr > th, .nx-shell table.table.table-bordered > tbody > tr > td { border-inline-start: none !important; border-inline-end: none !important; } .nx-shell table.table > tbody > tr > td { border-color: var(--nx-border, #E4E2DC) !important; padding: 10px 12px !important; color: var(--nx-text-primary, #1A1917); } .nx-shell table.table.table-striped > tbody > tr:nth-of-type(odd), .nx-shell table.table-stripped > tbody > tr:nth-of-type(odd) { background-color: transparent !important; } .nx-shell .form-control, .nx-shell .select2-container--default .select2-selection--single { border-radius: var(--nxd-radius-sm, 10px) !important; clip-path: none !important; border: 1px solid var(--nx-border, #E4E2DC) !important; } .nx-shell .form-control:focus { border-color: var(--nx-accent, #065F46) !important; box-shadow: 0 0 0 3px var(--nx-accent-soft, rgba(6,95,70,.10)) !important; outline: none !important; } .nx-shell .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--nx-accent, #065F46) !important; box-shadow: 0 0 0 3px var(--nx-accent-soft, rgba(6,95,70,.10)) !important; } /* Dark Mode input border contrast fix — proven system-wide, not confined to Integration settings (reproduced identically on /superadmin/packages/create and /expense-categories). Root cause: two competing !important rules exist for .form-control's border - the base rule (line ~1333 below) correctly uses --nx-border-strong, but this higher-specificity .nx-shell .form-control rule above, and the input.form-control/select.form-control/textarea.form-control rule further down, both use the plain --nx-border token instead. In light mode --nx-border (#E4E2DC) still reads as a visible line against white; in dark mode --nx-border (#2B2A31) sits almost on top of --nx-surface (#1D1C22) - contrast ratio 1.19, the "border barely visible" symptom. Restoring --nx-border-strong (already the intended token per the base rule; not a new color) raises it to 1.49 - a real, measured improvement - without touching light mode: scoped to [data-theme="dark"] (both the explicit-choice and prefers-color-scheme forms, same dual guard used throughout this file/app) so the light-mode cascade above is completely unaffected. Targets the generic .form-control class itself (specificity 0,2,0 with the :root[data-theme="dark"] prefix) so it wins over all three competing dark-mode rules everywhere in the app, instead of patching each one individually. */ :root[data-theme="dark"] .form-control { border-color: var(--nx-border-strong) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-control { border-color: var(--nx-border-strong) !important; } } .nx-shell-btn-primary { background: var(--nx-accent, #065F46) !important; color: #fff !important; border: none !important; border-radius: var(--nxd-radius-sm, 10px) !important; clip-path: none !important; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; height: 40px !important; min-height: 40px !important; box-sizing: border-box; transition: background-color 130ms ease; } .nx-shell-btn-primary:hover { background: var(--nx-accent-strong, #064E3B) !important; color: #fff !important; text-decoration: none; } .nx-shell-btn-primary svg { width: 18px; height: 18px; } /* NEXTSYSTEM master-redesign Primary button — identical shape to .nx-shell-btn-primary above, but Indigo (--nx-primary) instead of the app-wide teal --nx-accent. A new class rather than recoloring .nx-shell-btn-primary itself: that class already ships on ~18 already-frozen views (Users/Roles/Contacts/Purchases/Stock/ Expenses/Payment Accounts/...) and must stay teal until/unless a separate migration is explicitly approved. Use .nxu-btn-primary only on pages redesigned under the new master directive. */ .nxu-btn-primary { background: var(--nx-primary, #4F46E5) !important; color: #fff !important; border: none !important; border-radius: var(--nxd-radius-sm, 10px) !important; clip-path: none !important; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; transition: background-color 130ms ease; } .nxu-btn-primary:hover { background: var(--nx-primary-hover, #4338CA) !important; color: #fff !important; text-decoration: none; } .nxu-btn-primary:active { background: var(--nx-primary-active, #3730A3) !important; } .nxu-btn-primary svg { width: 18px; height: 18px; } .nx-shell-btn-secondary { background: var(--nx-surface, #fff) !important; color: var(--nx-text-secondary, #5C5A55) !important; border: 1px solid var(--nx-border, #E4E2DC) !important; border-radius: var(--nxd-radius-sm, 10px) !important; clip-path: none !important; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; transition: background-color 130ms ease, color 130ms ease; } .nx-shell-btn-secondary:hover { background: var(--nx-surface-interactive, #F4F2EE) !important; color: var(--nx-text-primary, #1A1917) !important; text-decoration: none; } /* Row-action buttons (edit/view/delete/actions-menu) rendered server-side (raw PHP strings in Controllers, not Blade) use the shared tw-dw-btn (DaisyUI) outline classes. Un-scoped from .nx-shell — several tables (e.g. Products' product_table, rendered inside .nx-tabs rather than a components.widget .nx-shell) never had that ancestor, so the earlier .nx-shell-scoped version silently never applied and these buttons fell back to tw-dw-btn-info's solid-fill base style (a plain, un-outlined, alarm-colored Bootstrap button — exactly the "still looks like Bootstrap" fingerprint). */ .tw-dw-btn.tw-dw-btn-xs { border-radius: 6px !important; font-weight: 600; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary { background: transparent !important; color: var(--nx-accent, #065F46) !important; border-color: var(--nx-accent, #065F46) !important; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary:hover { background: var(--nx-accent, #065F46) !important; color: #fff !important; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info { background: transparent !important; color: var(--nx-info, #0B4A6F) !important; border-color: var(--nx-info, #0B4A6F) !important; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info:hover { background: var(--nx-info, #0B4A6F) !important; color: #fff !important; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-error { background: transparent !important; color: var(--nx-danger, #B42318) !important; border-color: var(--nx-danger, #B42318) !important; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-error:hover { background: var(--nx-danger, #B42318) !important; color: #fff !important; } /* The multi-action ".dropdown-toggle" trigger (e.g. Products' "Actions" menu with Labels/Edit/Delete/etc inside) is a menu, not a single colored action — gets the same neutral chip language as the Export/Column-visibility toolbar buttons instead of an alarm-colored outline, so a whole column of them reads calm, not like a wall of blue Bootstrap buttons. */ .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle { background: var(--nx-surface, #fff) !important; color: var(--nx-text-secondary, #5C5A55) !important; border-color: var(--nx-border, #E4E2DC) !important; } .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle:hover, .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info.dropdown-toggle[aria-expanded="true"] { background: var(--nx-surface-interactive, #F4F2EE) !important; color: var(--nx-text-primary, #1A1917) !important; border-color: var(--nx-border, #E4E2DC) !important; } .tw-dw-btn.dropdown-toggle .caret { border-top-color: currentColor; margin-inline-start: 4px; } /* Pagination — un-scoped from .nx-shell for the same reason as the row-action buttons above (several tables render outside any .nx-shell ancestor). Redesigned from individually-boxed Bootstrap rectangles (each
  • its own bordered square, sitting flush against its neighbors) into a single rounded, evenly-spaced group — the numbered-page-button wall is one of the most recognizable default-DataTables/Bootstrap tells. */ .pagination { display: flex !important; gap: 4px; flex-wrap: wrap; } .pagination > li > a, .pagination > li > span { background-color: var(--nx-surface, #fff) !important; color: var(--nx-text-secondary, #5C5A55) !important; border: 1px solid var(--nx-border, #E4E2DC) !important; border-radius: var(--nx-radius-sm, 4px) !important; min-width: 30px; text-align: center; font-size: 12.5px; font-weight: 600; margin: 0 !important; } .pagination > li > a:hover { background-color: var(--nx-surface-interactive, #F4F2EE) !important; color: var(--nx-text-primary, #1A1917) !important; } .pagination > li.disabled > a, .pagination > li.disabled > span { color: var(--nx-text-disabled, #B8B5AE) !important; background-color: var(--nx-surface, #fff) !important; border-color: var(--nx-border, #E4E2DC) !important; } /* Row-select checkboxes (Products/Contacts/etc "select all" + per-row) — plain unstyled native checkboxes by default; accent-color is enough to bring them onto the same brand color + reasonable size without a bespoke checkbox component. */ table.table thead input[type="checkbox"], table.table tbody input[type="checkbox"] { accent-color: var(--nx-accent, #065F46); width: 15px; height: 15px; cursor: pointer; vertical-align: middle; } /* Real empty state — DataTables' bare "No data available in table" text row, replaced (in common.js's emptyTable/zeroRecords language strings) with an icon + message, centered with real vertical breathing room instead of one cramped line the height of a normal row. */ .nx-dt-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--nx-text-tertiary, #8B887F); } .nx-dt-empty svg { width: 34px; height: 34px; opacity: .6; } .nx-dt-empty span { font-size: 13px; font-weight: 500; } /* Row action menu — replaces the "Actions ▾" labeled dropdown button (Products/Purchases/Contacts/Purchase Order/Purchase Requisition/ Expense controllers, server-rendered HTML) with an icon-only kebab trigger, matching the row-menu pattern of any modern data table (Notion/Linear/Airtable-style) instead of a colored Bootstrap dropdown button repeated down an entire column. Menu items underneath (hrefs, permission checks, icons) are untouched — only the trigger's markup changed. */ .nx-row-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0 !important; border: none !important; background: transparent !important; border-radius: var(--nx-radius-sm, 6px) !important; color: var(--nx-text-tertiary, #8B887F) !important; cursor: pointer; box-shadow: none !important; transition: background-color 130ms ease, color 130ms ease; } .nx-row-menu-btn:hover, .nx-row-menu-btn:focus, .nx-row-menu-btn[aria-expanded="true"] { background: var(--nx-surface-interactive, #F4F2EE) !important; color: var(--nx-text-primary, #1A1917) !important; } .nx-row-menu-btn svg { width: 17px; height: 17px; pointer-events: none; } .nx-row-menu-list { min-width: 180px; } .nx-row-menu-list > li > a { white-space: nowrap; } .nx-row-menu-list > li > a i, .nx-row-menu-list > li > a svg { width: 14px; color: var(--nx-text-tertiary, #8B887F); } /* Some legacy CRUD tables (Units/Brands/Categories/...) trigger their edit/delete via AJAX-loaded-modal