/* ============================================================================= NAZAKA SKIN — soft-card design language, themes, density, Majorant ----------------------------------------------------------------------------- Loaded AFTER style.css. Everything is scoped to body.nz-skin, so removing the class (Settings toggle, or ?classic in the URL) restores the classic look with zero code changes. This file never hides, removes or reorders any control. ============================================================================= */ /* ---------------------------------------------------------------- tokens ---- */ body.nz-skin{ --border:#E4E9F2; --bg:#F0F3F9; --card:#FFFFFF; --headbg:#F7F9FC; --glow:rgba(31,56,100,.08); --radius:26px; --radius-sm:12px; --font:'Majorant',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --sidebar-w:232px; --header-h:62px; /* density */ --padY:14px; --fs:14.5px; --headY:16px; --fst:12.6px; --padX:8px; /* sidebar */ --sidebg:#132B52; --sidetext:#D3DEEF; --sidemuted:#7590BC; --sidebrand:#9FB3D4; --sideline:rgba(255,255,255,.09); --sidehov:rgba(255,255,255,.06); --sideact:rgba(255,255,255,.12); --sideactx:#fff; --accent:#6FA8F5; /* --phosphor: the bright "glow-in-the-dark" colour stock-availability bars are drawn in (see stockBar() in app.js) whenever there's no health signal (reorder level) to show instead. Deliberately its own dedicated colour per theme rather than derived from --dark/--accent — a derived colour kept landing near the same pink/navy tone on several themes and read as "the same bar everywhere"; a hand-picked neon per theme actually looks distinct theme to theme. Not used for the ok/warn/hot health-state bars, which stay fixed semantic colours (green/amber/red) on every theme so they keep meaning the same thing regardless of which look is active. */ --phosphor:#29B6FF; } /* ------------------------------------------------------- themes (7) -------- */ /* --red is set per theme too — a fixed red across every theme read as an afterthought bolted onto whichever palette was actually chosen. Each value below is picked to sit comfortably in that theme's own temperature (warm terracotta for Warm, a cooler crimson for Charcoal, and so on) while still unmistakably reading as "red/danger" next to that theme's own accent and success-green — no two themes share the same hex, including Obsidian's existing light pink-red further down, which was already theme-specific. --accent got the same treatment for the same reason: Warm, Charcoal, Plum and Light (plus the Navy default above) were all sharing one hardcoded pink (#C9186E), so every gradient built from it — primary buttons, the sidebar, modal headers, toasts, the warehouse-summary chevron — looked identical across five of the eight themes. Each now has its own colour, picked as a soft/light shade to sit comfortably in that theme's temperature. Emerald's gold and Ocean's amber were already theme-specific and are unchanged. */ body.nz-skin[data-t="warm"]{--bg:#F6F3EE;--headbg:#FAF7F2;--border:#E8E1D6;--glow:rgba(120,90,50,.10); --dark:#5C4630;--dark-2:#43331F;--accent:#E8A46B;--red:#B3402B;--phosphor:#D7FF3D; --sidebg:#3B2E20;--sidetext:#E6DBCB;--sidemuted:#B39B7C;--sidebrand:#C9B294; --sideline:rgba(255,255,255,.10)} body.nz-skin[data-t="charcoal"]{--bg:#F2F3F5;--headbg:#F8F9FB;--border:#E2E5EA;--glow:rgba(30,35,45,.08); --dark:#2E3440;--dark-2:#20242E;--accent:#5ED4C7;--red:#B3261E;--phosphor:#29FFC6; --sidebg:#242833;--sidetext:#D6DAE2;--sidemuted:#8A92A3;--sidebrand:#A9B1C1; --sideline:rgba(255,255,255,.09)} body.nz-skin[data-t="emerald"]{--bg:#F0F5F1;--headbg:#F6FAF7;--border:#DCE7DE;--glow:rgba(20,70,45,.09); --dark:#1F6B3B;--dark-2:#155029;--accent:#C9A227;--red:#C0432B;--phosphor:#C6FF29; --sidebg:#123D26;--sidetext:#D2E6D8;--sidemuted:#7FA891;--sidebrand:#9CC3AB; --sideline:rgba(255,255,255,.10)} body.nz-skin[data-t="plum"]{--bg:#F5F1F6;--headbg:#FAF7FB;--border:#E7DEEA;--glow:rgba(80,30,80,.09); --dark:#5B2A63;--dark-2:#431E4A;--accent:#BD8AEB;--red:#B3294B;--phosphor:#FF3DE0; --sidebg:#3A1B42;--sidetext:#E5D8E9;--sidemuted:#A886B0;--sidebrand:#C3A6C9; --sideline:rgba(255,255,255,.11)} body.nz-skin[data-t="ocean"]{--bg:#EFF5F6;--headbg:#F6FAFB;--border:#DBE7E9;--glow:rgba(15,70,80,.09); --dark:#14606B;--dark-2:#0D4650;--accent:#C55A11;--red:#C1442D;--phosphor:#29FFE0; --sidebg:#0E3B44;--sidetext:#CFE4E7;--sidemuted:#79A3AA;--sidebrand:#9CC2C8; --sideline:rgba(255,255,255,.10)} body.nz-skin[data-t="light"]{--bg:#F0F3F9;--headbg:#F7F9FC;--border:#E4E9F2;--glow:rgba(31,56,100,.08); --dark:#1F3864;--dark-2:#162a4e;--accent:#F0919E;--red:#C0392B;--phosphor:#7C4DFF; --sidebg:#FFFFFF;--sidetext:#42506B;--sidemuted:#8E9AB2;--sidebrand:#8E9AB2; --sideline:#E4E9F2;--sidehov:#F0F3F9;--sideact:#EAF0FA;--sideactx:#1F3864} /* ------------------------------------------------------------- density ----- */ body.nz-skin.roomy {--padY:14px;--fs:14.5px;--headY:16px;--fst:12.6px} body.nz-skin.balanced{--padY:10px;--fs:14px; --headY:13px;--fst:12.6px} body.nz-skin.compact {--padY:7px; --fs:13px; --headY:11px;--fst:12.2px} /* --------------------------------------------------------------- base ------ */ body.nz-skin{ font-family:var(--font); /* A soft diagonal gradient instead of a flat fill — built from each theme's own --bg blended toward its --accent, so every theme gets its own subtle tint with no new colour tokens. Kept deliberately light (8% accent) since this sits behind every card and table on every page — a strong gradient here would fight with the content instead of just adding depth. */ background:linear-gradient(160deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, var(--accent) 12%) 100%); font-size:var(--fs); -webkit-font-smoothing:antialiased; } body.nz-skin ::-webkit-scrollbar{width:10px;height:10px} body.nz-skin ::-webkit-scrollbar-thumb{background:#C8D2E4;border-radius:8px;border:3px solid transparent;background-clip:content-box} body.nz-skin ::-webkit-scrollbar-thumb:hover{background:#A9B7D0;background-clip:content-box;border:3px solid transparent} /* -------------------------------------------------------------- sidebar ---- */ /* Dark navy (or whichever theme's sidebar colour) at the top, blending down into a warm mix of that colour and the theme's own --accent by the bottom of the nav list — built entirely from tokens each theme already defines, so it carries across all 8 themes automatically. The stop is at 100% (not further out) specifically so the whole transition stays inside the visible sidebar rather than getting cut off before it's noticeable. */ body.nz-skin .sidebar{background:linear-gradient(200deg, var(--sidebg) 0%, color-mix(in srgb, var(--sidebg) 72%, black 28%) 100%);color:var(--sidetext)} /* Light theme has a near-white sidebar with dark text (inverted vs every other theme) — any darkening gradient here just muddies a white sidebar for no benefit, so it stays flat. */ body.nz-skin[data-t="light"] .sidebar{background:var(--sidebg)} body.nz-skin .sidebar-brand{border-bottom:1px solid var(--sideline);padding:20px 18px 14px} body.nz-skin .brand-name{color:var(--sideactx);font-weight:700;font-size:15px;letter-spacing:.4px} body.nz-skin .brand-sub{color:var(--sidebrand);font-size:10.8px;letter-spacing:.9px;margin-top:3px;font-weight:300} body.nz-skin .brand-pink{color:var(--accent)} body.nz-skin .nav-section-label{color:var(--sidemuted);font-size:9.5px;letter-spacing:1.5px;padding:15px 20px 6px;font-weight:500} body.nz-skin .nav-item{color:var(--sidetext);font-size:13.2px;padding:8.5px 20px;gap:9px; border-left:3px solid transparent;font-weight:400;transition:.13s} body.nz-skin .nav-item:hover{background:var(--sidehov);color:var(--sideactx)} body.nz-skin .nav-item.active{background:var(--sideact);color:var(--sideactx);border-left-color:var(--accent);font-weight:500} body.nz-skin .nav-item .icon{font-size:13px;width:17px;flex:0 0 17px} body.nz-skin .sidebar-footer{border-top:1px solid var(--sideline);color:var(--sidemuted)} body.nz-skin .sidebar::-webkit-scrollbar{width:6px} body.nz-skin .sidebar::-webkit-scrollbar-thumb{background:var(--sideact);border:none} /* --------------------------------------------------------------- topbar ---- */ body.nz-skin .topbar{padding:0 24px;gap:14px;border-bottom:1px solid var(--border);background:linear-gradient(90deg, var(--card) 0%, var(--bg) 100%)} body.nz-skin .topbar-title{font-size:17.5px;font-weight:500;letter-spacing:.1px;color:var(--text)} body.nz-skin .content{padding:22px 24px 90px;background:var(--bg)} /* ------------------------------------------------- theme + density pill ---- */ .nz-tpill{display:flex;align-items:center;gap:9px;height:36px;padding:0 12px 0 10px;border-radius:12px; border:1px solid var(--border);background:#fff;cursor:pointer;font:inherit;font-size:13px;color:var(--text); transition:.13s;flex:0 0 auto} .nz-tpill:hover{background:var(--headbg);transform:translateY(-1px)} .nz-tpill .nz-tsw{display:inline-flex;flex:0 0 auto} .nz-tpill .nz-tsw i{width:15px;height:15px;border-radius:50%;display:inline-block; box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(31,56,100,.14)} .nz-tpill .nz-tsw i+i{margin-left:-5px} .nz-tpill .nz-tnm{font-weight:500} .nz-tpill .nz-tcv{color:var(--text-2);font-size:11px;transform:translateY(-1px)} .nz-pop{position:fixed;z-index:1400;background:#fff;border:1px solid var(--border);border-radius:20px; box-shadow:0 26px 70px rgba(12,22,45,.20);width:330px;overflow:hidden;display:none; /* Last-resort guard for a short window: the panel is eight themes plus the row height section, and on a laptop it can be taller than the space available however it is placed. Scrolling inside it beats cutting the bottom off. */ max-height:calc(100vh - 20px);overflow-y:auto;overscroll-behavior:contain} .nz-pop.show{display:block;animation:nzpopin .16s ease-out} @keyframes nzpopin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .nz-pop .nz-ph{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--headbg); font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-2);font-weight:500} .nz-pop .nz-psec{padding:12px 16px 14px;border-top:1px solid var(--border)} .nz-pop .nz-psec>b{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--text-2);font-weight:500;margin-bottom:9px} .nz-dpills{display:flex;gap:7px} .nz-dpill{flex:1;padding:8px 0;border-radius:11px;border:1px solid var(--border);background:#fff; font:inherit;font-size:12.8px;color:var(--text);cursor:pointer;transition:.13s} .nz-dpill:hover{background:var(--headbg)} .nz-dpill.on{background:var(--dark);border-color:var(--dark);color:#fff} .nz-throw{display:flex;align-items:center;gap:14px;padding:10px 14px;cursor:pointer; border-bottom:1px solid var(--border);transition:.13s;background:#fff} .nz-throw:last-of-type{border-bottom:0} .nz-throw:hover,.nz-throw.on{background:var(--headbg)} .nz-thsw{display:inline-flex;flex:0 0 auto} .nz-thsw i{width:20px;height:20px;border-radius:50%;display:inline-block; box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(31,56,100,.13)} .nz-thsw i+i{margin-left:-7px} .nz-thtx{flex:1;min-width:0} .nz-thtx b{display:block;font-weight:500;font-size:13.4px} .nz-thtx span{display:block;font-size:11.6px;color:var(--text-2);font-weight:300;margin-top:2px} .nz-thtick{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);color:transparent; font-size:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .nz-throw.on .nz-thtick{background:var(--dark);border-color:var(--dark);color:#fff} /* ---------------------------------------------------------------- cards ---- */ /* Soft white-to-page-background gradient instead of flat white — enough to read as a rounded surface with depth, subtle enough not to compete with the numbers/tables inside. Uses --card and --bg, both already defined per theme, so no new tokens. */ body.nz-skin .card{ border-radius:var(--radius); box-shadow:0 18px 50px var(--glow); border:1px solid rgba(228,233,242,.7); padding:22px 24px; background:linear-gradient(165deg, var(--card) 0%, var(--bg) 100%); } body.nz-skin .card-title{font-size:13px;font-weight:500;letter-spacing:.9px;color:var(--text-2)} body.nz-skin .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px;margin-bottom:20px} body.nz-skin .kpi-card{ border-radius:20px;padding:16px 18px; box-shadow:0 12px 34px var(--glow); border:1px solid rgba(228,233,242,.7); transition:.15s; background:linear-gradient(165deg, var(--card) 0%, var(--bg) 100%); } body.nz-skin .kpi-card:hover{transform:translateY(-2px);box-shadow:0 18px 44px var(--glow)} /* Two lines are reserved for the caption whether or not it needs them, so a card whose title wraps ("Pending Consignment", "Received Profit (before overheads)") keeps its number on the same baseline as the cards beside it. */ body.nz-skin .kpi-label{font-size:10.2px;letter-spacing:1.05px;font-weight:500;line-height:1.5;min-height:31px} body.nz-skin .kpi-value{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.3px} body.nz-skin .kpi-sub{font-size:11.4px;font-weight:300} body.nz-skin .kpi-icon{opacity:.45;font-size:15px} /* -------------------------------------------------------------- buttons ---- */ body.nz-skin .btn{ border-radius:999px;padding:8px 16px;font-size:13px;font-weight:500; border:1px solid var(--border);background:#fff;color:var(--text);transition:.14s;white-space:nowrap } body.nz-skin .btn:hover{background:var(--headbg);transform:translateY(-1px)} /* Primary buttons: dark-to-accent gradient, same recipe as the sidebar and the warehouse-summary chevron circle, so the whole app reads as one consistent look instead of several one-off treatments. */ body.nz-skin .btn-primary{background:linear-gradient(135deg, var(--dark) 0%, var(--accent) 100%);border-color:transparent;color:#fff} body.nz-skin .btn-primary:hover{background:linear-gradient(135deg, var(--dark-2) 0%, var(--accent) 100%)} body.nz-skin .btn-success{background:linear-gradient(135deg, color-mix(in srgb, var(--green) 55%, black) 0%, var(--green) 100%);border-color:transparent;color:#fff} /* Explicit background (not just opacity) on hover — otherwise the generic "body.nz-skin .btn:hover{background:var(--headbg)}" rule above replaces the green gradient with an off-white fill while the text stays white, making the button read as blank/invisible on hover. The selector is deliberately ".btn.btn-success:hover" (repeating .btn), not just ".btn-success:hover" — at equal specificity this would only win because it's declared AFTER the generic rule above; the extra .btn class makes it genuinely more specific so it wins regardless of source order (e.g. if this block ever gets moved earlier in the file during a future edit). */ body.nz-skin .btn.btn-success:hover{background:linear-gradient(135deg, color-mix(in srgb, var(--green) 55%, black) 0%, var(--green) 100%);opacity:.9} body.nz-skin .btn-danger{background:linear-gradient(135deg, color-mix(in srgb, var(--red) 55%, black) 0%, var(--red) 100%);border-color:transparent;color:#fff} /* Same fix as .btn-success:hover above — restore the red gradient explicitly, with the same genuinely-higher-specificity ".btn.btn-danger:hover" selector. */ body.nz-skin .btn.btn-danger:hover{background:linear-gradient(135deg, color-mix(in srgb, var(--red) 55%, black) 0%, var(--red) 100%);opacity:.9} body.nz-skin .btn-outline{background:linear-gradient(135deg, var(--card) 0%, var(--bg) 100%);color:var(--dark);border-color:var(--border)} body.nz-skin .btn-outline:hover{border-color:var(--dark);background:var(--headbg)} body.nz-skin .btn-sm{padding:5px 11px;font-size:12px} body.nz-skin .btn-icon{padding:6px 9px;border-radius:10px} /* --------------------------------------------------------------- badges ---- */ /* A faint white-to-transparent sheen layered on top of each badge's own solid colour (background-image sits above background-color, so every existing badge-* variant below keeps its own colour and just gains the highlight — no need to touch each one individually). */ body.nz-skin .badge{border-radius:999px;padding:3px 10px;font-size:11.2px;font-weight:500;line-height:1.5;background-image:linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%)} body.nz-skin .badge-green {background:#E7F6EC;color:#1B7F4C} body.nz-skin .badge-blue {background:#E8EEF7;color:var(--dark)} body.nz-skin .badge-amber {background:#FEF3E7;color:#B45309} body.nz-skin .badge-red {background:#FDECEA;color:#C00000} body.nz-skin .badge-grey {background:#EEF1F6;color:#5C6B85} body.nz-skin .badge-purple{background:#F0EAFB;color:#6B3FA0} body.nz-skin .badge-teal {background:#E4F5F3;color:#137A6E} /* --------------------------------------------------------------- tables ---- */ body.nz-skin .table-wrap{ border-radius:var(--radius); border:1px solid rgba(228,233,242,.7); box-shadow:0 18px 50px var(--glow); background:var(--card); } body.nz-skin table{font-size:var(--fst)} body.nz-skin thead tr{background:var(--headbg)} body.nz-skin thead th{ background:var(--headbg); padding:var(--headY) var(--padX); font-size:10.4px;letter-spacing:.75px;font-weight:500; color:var(--text-2); border-bottom:1px solid var(--border); } body.nz-skin .table-wrap table thead th:last-child{background:var(--headbg)} body.nz-skin tbody tr{border-bottom:none} body.nz-skin tbody tr:nth-child(even){background:transparent} body.nz-skin tbody td{ padding:var(--padY) var(--padX); border-bottom:1px solid #F0F3F8; line-height:1.4; font-size:var(--fst); } body.nz-skin tbody tr:last-child td{border-bottom:0} body.nz-skin tbody tr:hover{background:var(--headbg)} body.nz-skin .table-wrap table tbody td:last-child{background:var(--card)} body.nz-skin .table-wrap table tbody tr:nth-child(even) td:last-child{background:var(--card)} body.nz-skin .table-wrap table tbody tr:hover td:last-child{background:var(--headbg)} body.nz-skin tfoot td{background:var(--headbg)} body.nz-skin .mono,body.nz-skin tbody td.mono{font-family:var(--mono)} /* ---------------------------------------------------------------- forms ---- */ body.nz-skin .form-control{ border:1px solid var(--border);border-radius:var(--radius-sm); padding:9px 12px;font-size:13.4px;font-family:var(--font); background:linear-gradient(180deg, var(--card) 0%, var(--bg) 100%) } body.nz-skin .form-control:focus{border-color:#9FB4D8;box-shadow:0 0 0 3px rgba(31,56,100,.07)} body.nz-skin .form-label{font-size:11.8px;font-weight:500;letter-spacing:.2px;color:var(--text-2)} body.nz-skin .search-box{border:1px solid var(--border);border-radius:999px;padding:7px 15px;background:var(--headbg)} body.nz-skin .search-box input{background:transparent;font-family:var(--font)} /* --------------------------------------------------------------- modals ---- */ /* Backdrop: v1078 tinted this toward each theme's --dark/--accent for a "branded moment" effect, but that read as an unwanted pink/purple wash behind every popup. Reverted to a plain neutral dark scrim, with a deeper blur than the original pre-1078 version for a stronger frosted-glass feel (chosen as "Option B" from a live preview). The modal header keeps its own dark-to-accent gradient band — only the backdrop behind the modal changed. */ body.nz-skin .modal-overlay{background:rgba(0,0,0,.45);backdrop-filter:blur(9px)} /* Entrance: a plain fade (no scale/slide — chosen over two other options after a live preview) so a popup opening feels like it's arriving rather than snapping into place. Runs once, on the overlay and the modal box together, whenever a fresh (non-hidden) modal is inserted into the DOM. */ body.nz-skin .modal-overlay:not(.hidden){animation:nzOverlayFade .18s ease-out} body.nz-skin .modal-overlay:not(.hidden) .modal{animation:nzModalFadeIn .22s ease-out} @keyframes nzOverlayFade{from{opacity:0}to{opacity:1}} @keyframes nzModalFadeIn{from{opacity:0}to{opacity:1}} body.nz-skin .modal{border-radius:24px;box-shadow:0 30px 80px rgba(12,22,45,.32)} body.nz-skin .modal-header{ background:linear-gradient(135deg, var(--dark) 0%, var(--accent) 100%);border-radius:24px 24px 0 0; padding:19px 24px;border-bottom:1px solid var(--border) } body.nz-skin .modal-title{font-size:15px;font-weight:500;color:#fff} /* The Sales & Consignments mobile-layout switch link sits in the modal header, which this skin paints as a dark-to-accent gradient band (not the plain white header the base style.css link colour assumes) — needs its own light, semi-transparent colour to stay readable on every theme's gradient rather than disappearing at var(--text-2)'s dark-on-light value. */ body.nz-skin .modal-header .so-layout-switch a{color:rgba(255,255,255,.85)} body.nz-skin .modal-header .so-layout-switch a:hover{color:#fff} /* Same gradient-header problem as so-layout-switch just above, just discovered later — the invoice wizard's progress bar (v1745) was added after that fix already existed and never got the same treatment. Ali: "the text color in the Create/edit invoice for the Details Customer Delivery Pricing.... is not barely visible" — confirmed live: .so-wiz-label (color:var(--text-2)) and the current step's label (color:var(--dark), which is the SAME colour as this gradient's own 0% stop, so the active step's own label was nearly invisible too) and .so-wiz-exit a (color:var(--text-2), the "Show full form instead" link) all assume a plain white card background, not this dark-to- accent gradient band. Same fix: explicit light/white colours instead of the theme tokens that were only ever meant for text-on-white. */ body.nz-skin .modal-header .so-wiz-label{color:rgba(255,255,255,.72)} body.nz-skin .modal-header .so-wiz-step.so-wiz-current .so-wiz-label{color:#fff} body.nz-skin .modal-header .so-wiz-exit a{color:rgba(255,255,255,.8)} body.nz-skin .modal-header .so-wiz-exit a:hover{color:#fff} body.nz-skin .modal-close{font-size:19px;border-radius:8px;padding:3px 7px;color:#fff} body.nz-skin .modal-close:hover{background:rgba(255,255,255,.18);color:#fff} body.nz-skin .modal-body{padding:22px 24px} body.nz-skin .modal-footer{background:var(--headbg);border-radius:0 0 24px 24px;padding:16px 24px} body.nz-skin .modal-more-menu{border-radius:14px;box-shadow:0 14px 40px rgba(12,22,45,.18)} body.nz-skin .modal-more-menu .item{font-weight:400} /* ---------------------------------------------------------------- misc ----- */ /* Toasts: same dark-to-accent gradient as buttons/sidebar/modal header for the plain/default toast; success and error keep their own semantic colour (green/ red — same rule as the ok/warn/hot stock-bar colours: these mean something specific and stay fixed regardless of theme) but get the matching gradient treatment built from their own colour instead of --accent. base .toast in style.css sets background:var(--dark) / .success→var(--green) / .error→ var(--red) as flat fallbacks; these override with the gradient version. */ body.nz-skin .toast{border-radius:14px;padding:13px 20px;font-size:13.4px;font-weight:400; box-shadow:0 14px 36px rgba(12,22,45,.3);max-width:360px;line-height:1.5; background:linear-gradient(135deg, var(--dark) 0%, var(--accent) 100%)} body.nz-skin .toast.success{background:linear-gradient(135deg, color-mix(in srgb, var(--green) 55%, black) 0%, var(--green) 100%)} body.nz-skin .toast.error{background:linear-gradient(135deg, color-mix(in srgb, var(--red) 55%, black) 0%, var(--red) 100%)} /* Mobile Home (v1377) FAB — same dark-to-accent recipe as the toast/button/ modal-header gradients above, so it carries the active theme's own accent (pink for Navy, gold for Emerald, amber for Ocean, ...) instead of the base app's hardcoded --pink on every theme. Obsidian gets its own correction further down, since it redefines --dark as a light colour. */ body.nz-skin .mh-tab-fab{background:linear-gradient(135deg, var(--dark) 0%, var(--accent) 100%)} body.nz-skin .empty-state{padding:64px 20px} body.nz-skin .empty-state .icon{font-size:40px;opacity:.5} body.nz-skin .nz-tpill,body.nz-skin .topbar-actions .btn{flex:0 0 auto} /* Row action popup (#am-menu in app.js) is built with an inline style, so an !important is needed here to layer the same soft card gradient on top of its inline background:#fff. */ body.nz-skin #am-menu{background:linear-gradient(165deg, var(--card) 0%, var(--bg) 100%) !important} /* The theme picker's home: the top bar's action slot, opposite the page title and hard against the right edge — on the Dashboard, and on no other page. Just a wrapper; the top bar supplies the alignment and the spacing. */ .nz-theme-host:empty{display:none} .nz-theme-host{display:flex;align-items:center} /* ============================================================================= MOBILE LAYER — enhances the app's existing responsive rules, never replaces them. style.css already restacks .table-wrap rows into cards via data-label and already ships the drawer (#menu-toggle / .sidebar-backdrop / .sidebar.open). ============================================================================= */ @media (max-width:768px){ body.nz-skin{--radius:22px;--padY:12px;--fs:14px;--headY:14px;--fst:12.6px;--padX:8px} /* This block restates --padY for the phone, which silently cancelled Roomy and Balanced (only Compact was re-stated below it). All three are re-stated now so the Row height pills behave the same on a phone as on the desktop. */ body.nz-skin {--mrowY:9px; --mfs:13.5px;--mlh:1.45} body.nz-skin.roomy {--padY:12px;--fs:14px; --fst:12.6px;--mrowY:9px; --mfs:13.5px;--mlh:1.45} body.nz-skin.balanced{--padY:9px; --fs:13.5px;--fst:12.4px;--mrowY:6.5px;--mfs:13.1px;--mlh:1.4} body.nz-skin.compact {--padY:7px; --fs:13px; --fst:12.2px;--mrowY:4.5px;--mfs:12.6px;--mlh:1.35} body.nz-skin .content{padding:14px 12px 90px} /* style.css gives the phone top bar padding:10px 14px, but this rule used to say `padding:0 12px` and wins on specificity — so the wrapped row of action buttons finished 1px above the bottom border and read as if it were resting on the line. The vertical padding is restated here, with a little more under the buttons than over the title. */ body.nz-skin .topbar{padding:10px 12px 13px;gap:8px} body.nz-skin .topbar-title{font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.nz-skin .card{padding:16px 14px;border-radius:22px} body.nz-skin .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} body.nz-skin .kpi-card{padding:13px 14px;border-radius:18px} body.nz-skin .kpi-value{font-size:19px} body.nz-skin .table-wrap{border-radius:22px} body.nz-skin .modal{border-radius:22px 22px 0 0;width:100%;max-width:none; max-height:94vh;margin-top:auto;align-self:flex-end} body.nz-skin .modal-overlay{align-items:flex-end;padding:0} body.nz-skin .modal-header{border-radius:22px 22px 0 0;padding:16px 18px;position:sticky;top:0;z-index:3} body.nz-skin .modal-body{padding:18px} body.nz-skin .modal-footer{border-radius:0;padding:14px 18px;position:sticky;bottom:0;z-index:3} body.nz-skin .modal-footer .btn{flex:1;justify-content:center} body.nz-skin .nz-pop{width:auto;left:10px!important;right:10px!important;border-radius:22px} body.nz-skin .nz-tpill{padding:0 8px;gap:6px;height:34px} /* On a phone .topbar-actions is width:100%, so anything in it wraps onto a row of its own beneath the title. The theme picker is the one thing that should sit BESIDE the title instead — it is a single small control, and a whole row is a lot to spend on it when the screen is 780px tall. The marker class is set by the Dashboard alone, so every other page's Search and action buttons keep their full-width row exactly as before. */ .topbar-actions.nz-acts-theme{width:auto;flex:0 0 auto;margin-left:auto} /* Only on the page that carries the picker. The top bar is justify-content: space-between, so with a third item on the row the title would drift into the middle; letting it grow pins it to the left of the picker, matching the desktop. Scoped to .nz-tb-theme so no other page's title moves. */ body.nz-skin .topbar.nz-tb-theme .topbar-title{flex:1 1 auto;text-align:left} /* The stacked-card note chip carries its own cream literals in style.css. */ body.nz-skin[data-t="obsidian"] .table-wrap table.so5 tbody tr.so5row .s5note{ background:#17130B;border-color:#2E2716;color:#CFC3A5} body.nz-skin[data-t="obsidian"] .table-wrap table.so5 tbody tr.so5row .s5note .s5ntick{ background:#0E0E12;border-color:#6B5A2A} body.nz-skin .nz-tpill .nz-tnm,body.nz-skin .nz-tpill .nz-tcv{display:none} body.nz-skin .search-box input{width:100%;min-width:0} body.nz-skin .search-box{min-width:0} body.nz-skin .toast{left:12px;right:12px;bottom:12px;max-width:none} } @media (max-width:420px){ body.nz-skin .content{padding:12px 9px 90px} body.nz-skin .card{padding:14px 12px} body.nz-skin .kpi-grid{grid-template-columns:1fr 1fr} } /* ============================================================================= LOGIN PAGE — same design language. Every step (auto, manual, forgot, reset, set-password, 2FA) and both message banners are covered; nothing is hidden. ============================================================================= */ body.nz-skin.nz-login{background:var(--bg)} body.nz-skin.nz-login .wrap{max-width:420px} body.nz-skin.nz-login .brand-name{font-size:26px;font-weight:700;letter-spacing:.4px;color:var(--dark)} body.nz-skin.nz-login .brand-name span{color:var(--accent)} body.nz-skin.nz-login .brand-sub{font-size:12.5px;letter-spacing:.4px;color:var(--text-2);font-weight:300;margin-top:5px} body.nz-skin.nz-login .card{ border-radius:26px;padding:34px 30px; border:1px solid rgba(228,233,242,.7); box-shadow:0 18px 50px var(--glow); } body.nz-skin.nz-login .card-title{ font-size:12.5px;letter-spacing:.3px;font-weight:500; color:var(--text-2);text-align:center;margin-bottom:18px } body.nz-skin.nz-login .form-control{ border:1px solid var(--border);border-radius:12px;padding:11px 14px;font-size:14px;font-family:var(--font) } body.nz-skin.nz-login .form-control:focus{border-color:#9FB4D8;box-shadow:0 0 0 3px rgba(31,56,100,.07)} body.nz-skin.nz-login .form-control.otp{border-radius:14px;letter-spacing:8px} body.nz-skin.nz-login .form-label{font-size:11.8px;font-weight:500;letter-spacing:.2px;color:var(--text-2)} body.nz-skin.nz-login .btn-login{ border-radius:999px;padding:12px;font-size:13.5px;font-weight:500;font-family:var(--font); background:var(--dark);border:1px solid var(--dark);transition:.14s } body.nz-skin.nz-login .btn-login:hover:not(:disabled){background:var(--dark-2);transform:translateY(-1px)} body.nz-skin.nz-login .btn-admin{ border-radius:999px;padding:10px;font-size:13px;font-family:var(--font); border:1px solid var(--border);transition:.14s } body.nz-skin.nz-login .btn-admin:hover{border-color:var(--dark);background:var(--headbg);transform:translateY(-1px)} body.nz-skin.nz-login .error-msg, body.nz-skin.nz-login .ok-msg{border-radius:14px;padding:12px 16px;font-size:13px;line-height:1.5} body.nz-skin.nz-login .spinner-ring{border-top-color:var(--dark)} body.nz-skin.nz-login .footer-note{font-size:11.5px;color:var(--text-2);font-weight:300;margin-top:22px} body.nz-skin.nz-login .divider{font-size:11.5px;color:var(--text-2)} body.nz-skin.nz-login .pw-eye{border-radius:8px} @media (max-width:420px){ body.nz-skin.nz-login .card{padding:26px 20px;border-radius:22px} } /* =========================================================================== TABLES (v1029) — the accepted preview's table look --------------------------------------------------------------------------- One contained white card per table, a grey header band, hairline row separators, roomy rows at a readable size. The preview shows every table this way including Sales & Consignments, so Style 5 is brought into line with it rather than kept as a separate look. Columns share the window and wrap so tables normally fit; if one genuinely cannot, it scrolls. It is never crushed to unreadable metrics. =========================================================================== */ @media (min-width:769px){ body.nz-skin{--tpadX:10px;--trowY:13px;--tfs:13.5px;--theadY:13px;--trowLH:1.5} /* Row height, driven by the Roomy / Balanced / Compact pills. This table layer sets its own --trowY/--tfs and its rules outrank the generic --padY/--fst ones above, so the density pills only take effect on a real table if they are re-stated HERE. Header padding and line-height move with them, otherwise Compact leaves a tall header on short rows. */ body.nz-skin.roomy {--trowY:13px; --tfs:13.5px; --theadY:13px; --trowLH:1.5} body.nz-skin.balanced{--trowY:8.5px;--tfs:13px; --theadY:10px; --trowLH:1.45} body.nz-skin.compact {--trowY:5px; --tfs:12.3px; --theadY:8px; --trowLH:1.35} body.nz-skin .table-wrap, body.nz-skin .table-wrap.so5-wrap{ border:1px solid var(--border);border-radius:16px;background:#fff; box-shadow:0 1px 2px rgba(20,30,60,.04);padding:0;overflow:auto; } body.nz-skin .table-wrap table, body.nz-skin .table-wrap table.so5{ border-collapse:collapse;border-spacing:0;width:100%;min-width:0; table-layout:auto;font-size:var(--tfs); } /* header band */ body.nz-skin .table-wrap thead tr{background:transparent} body.nz-skin .table-wrap thead th, body.nz-skin .table-wrap table.so5 thead th{ background:var(--headbg);color:var(--text-2); font-size:10.5px;letter-spacing:.6px;font-weight:600;text-transform:uppercase; padding:var(--theadY) var(--tpadX);border-bottom:1px solid var(--border); white-space:normal;line-height:1.35;position:static;border-radius:0; } /* rows: hairline separated, not floating cards */ body.nz-skin .table-wrap tbody tr, body.nz-skin .table-wrap table.so5 tbody tr{ background:#fff;box-shadow:none;transform:none; border-bottom:1px solid #EEF1F7;transition:background .12s; } body.nz-skin .table-wrap tbody tr:nth-child(even){background:#fff} body.nz-skin .table-wrap tbody tr:last-child{border-bottom:none} body.nz-skin .table-wrap tbody tr:hover, body.nz-skin .table-wrap table.so5 tbody tr:hover{ background:#F8FAFD;transform:none;box-shadow:none; } body.nz-skin .table-wrap tbody td, body.nz-skin .table-wrap table.so5 tbody td{ padding:var(--trowY) var(--tpadX);vertical-align:middle;border:none; white-space:normal;overflow-wrap:normal;word-break:normal;line-height:var(--trowLH); font-size:var(--tfs);border-radius:0;position:static;background:transparent; } /* Actions column stays reachable when a wide table scrolls sideways — the app's own desktop behaviour, extended to Style 5 because the skin lets that table scroll too. */ body.nz-skin .table-wrap table thead th:last-child, body.nz-skin .table-wrap table.so5 thead th:last-child{ position:sticky;right:0;z-index:2;background:var(--headbg); } body.nz-skin .table-wrap table tbody td:last-child, body.nz-skin .table-wrap table.so5 tbody td:last-child{ position:sticky;right:0;z-index:1;background:#fff; } /* This block's own sticky last column resets border-radius to 0 (line 510, from the shared "header band"/row rules above), so its plain rectangular background squared off this .table-wrap's own 16px rounded corner instead of following it — a sliver of the page behind showed through at the exact top-right (and, on the table's last row, bottom-right) corner. Only rounding it on the row that's actually at that edge, same fix style.css already carries for the non-skin table look. */ body.nz-skin .table-wrap table thead tr:first-child th:last-child, body.nz-skin .table-wrap table.so5 thead tr:first-child th:last-child{ border-top-right-radius:15px; } body.nz-skin .table-wrap table tbody tr:last-child td:last-child, body.nz-skin .table-wrap table.so5 tbody tr:last-child td:last-child{ border-bottom-right-radius:15px; } body.nz-skin .table-wrap tbody tr:nth-child(even) td:last-child{background:#fff} body.nz-skin .table-wrap tbody tr:hover td:last-child, body.nz-skin .table-wrap table.so5 tbody tr:hover td:last-child{background:#F8FAFD} /* long names get a wider cap and still ellipsis rather than breaking a row into four lines; numbers, codes and prices never break */ body.nz-skin .table-wrap tbody td.truncate, body.nz-skin .table-wrap tbody td.fw-600.truncate, body.nz-skin .table-wrap table.so5 tbody td.truncate{ max-width:210px;overflow:visible;text-overflow:clip;white-space:normal; } /* codes, prices and figures must never break mid-token */ body.nz-skin .table-wrap tbody td.mono, body.nz-skin .table-wrap tbody td.num, body.nz-skin .table-wrap tbody td.right, body.nz-skin .table-wrap table.so5 tbody td.mono, body.nz-skin .table-wrap table.so5 tbody td.num, body.nz-skin .table-wrap table.so5 tbody td.right, body.nz-skin .table-wrap tfoot td{white-space:nowrap} body.nz-skin .table-wrap tbody td.mono, body.nz-skin .table-wrap table.so5 tbody td.mono{font-size:12.2px} /* tfoot totals sit on the header tint */ body.nz-skin .table-wrap tfoot td{ background:var(--headbg);border-top:1px solid var(--border); padding:var(--trowY) var(--tpadX);font-size:var(--tfs); } } /* ============================================================================= WIDE TABLES (v1031) ----------------------------------------------------------------------------- Two tables carry sixteen columns — Purchases and Purchase Returns — and at the normal 10px cell padding their content is wider than the card, so the whole table scrolled sideways and several columns were squeezed until their contents stacked. Sixteen columns pay that padding thirty-two times, so trimming it to 5px per side buys back ~160px, which is more than the overflow on either table on either tenant. Nothing is dropped or hidden: every column that was there is still there, just breathing a little less. .dt is the date cell. A date is a single unbreakable fact, so it should either fit on one line or make the column wider — never wrap into "1" / "October" / "2025". The nowrap forces the column to claim the width it actually needs, and the wide tables pair it with fmtDateS ("1 Oct 2025") so that claim stays small. The table.so5 twin is required: `.table-wrap table.so5 tbody td` is more specific than `.table-wrap tbody td.dt`, so without it the Sales table would silently ignore this. ========================================================================== */ @media (min-width:769px){ body.nz-skin .table-wrap table.tbl-dense{--tpadX:5px} body.nz-skin .table-wrap table.tbl-dense tbody td, body.nz-skin .table-wrap table.tbl-dense thead th{padding-left:5px;padding-right:5px} } /* .clip1 — a cell holding a single code-like value (an invoice number, a reference) that should occupy exactly one line and trail off rather than break across two. Applied per cell, NOT to every .truncate in the table: prose columns such as Notes and Supplier read better wrapped, and forcing those to one line made them demand their full width and pushed the table back over the edge — measured at +29px. The full value stays on the cell's hover title. The table.so5 twin is required for the specificity reason noted above. */ body.nz-skin .table-wrap tbody td.clip1, body.nz-skin .table-wrap table.so5 tbody td.clip1, .table-wrap td.clip1{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; overflow-wrap:normal;word-break:normal; } @media (max-width:768px){ /* full width in the phone's row cards — nothing to clip against */ body.nz-skin .table-wrap tbody td.clip1, body.nz-skin .table-wrap table.so5 tbody td.clip1{white-space:normal;overflow:visible;max-width:none} } body.nz-skin .table-wrap tbody td.dt, body.nz-skin .table-wrap table.so5 tbody td.dt, body.nz-skin .table-wrap thead th.dt, body.nz-skin .table-wrap table.so5 thead th.dt{white-space:nowrap} /* Same guarantee when the skin is switched off, so a date never stacks there either. */ .table-wrap td.dt,.table-wrap th.dt{white-space:nowrap} @media (max-width:768px){ /* The phone restacks each row into a card, where a cell is full-width and nowrap would only risk overflowing the card. Let it behave normally. */ body.nz-skin .table-wrap tbody td.dt, body.nz-skin .table-wrap table.so5 tbody td.dt{white-space:normal} } /* Narrower windows: ease off gently. Never crush — scroll instead. */ @media (min-width:769px) and (max-width:1360px){ body.nz-skin{--tpadX:6px;--trowY:12px;--tfs:13px} body.nz-skin .table-wrap tbody td.mono, body.nz-skin .table-wrap table.so5 tbody td.mono{font-size:11.8px} } @media (min-width:769px) and (max-width:1180px){ body.nz-skin{--tpadX:7px;--trowY:11px;--tfs:12.5px} body.nz-skin .table-wrap, body.nz-skin .table-wrap.so5-wrap{overflow-x:auto} } /* ============================================================================= PHONE ROW CARDS (v1028) ----------------------------------------------------------------------------- The app already restacks every table into one card per row below 768px. This brings that card into the same language as the new desktop tables and the Sales & Consignments reference: a soft tinted field inside the panel, with the row itself a white card that floats on it. Borderless, shadowed, rounded — identical to the desktop row card, just stacked. It deliberately covers .so5-wrap too, so Sales & Consignments matches. ============================================================================= */ @media (max-width:768px){ body.nz-skin .table-wrap, body.nz-skin .table-wrap.so5-wrap{ border:none;box-shadow:none;overflow-x:visible; background:#F2F5FA;border-radius:18px;padding:10px 10px 2px; } body.nz-skin .table-wrap table{border-collapse:separate;border-spacing:0;width:100%;min-width:0} body.nz-skin .table-wrap tbody tr{ background:#fff!important;border:none;border-radius:14px;margin-bottom:10px; box-shadow:0 1px 2px rgba(20,30,60,.06),0 3px 9px rgba(20,30,60,.05); overflow:hidden;transform:none; } body.nz-skin .table-wrap tbody tr:active{ box-shadow:0 2px 5px rgba(20,30,60,.10),0 8px 20px rgba(20,30,60,.10); } body.nz-skin .table-wrap tbody td{ padding:var(--mrowY) 14px;border-bottom:1px solid #F3F5FA; font-size:var(--mfs);line-height:var(--mlh); } body.nz-skin .table-wrap tbody td:last-child{border-bottom:none} body.nz-skin .table-wrap tbody td::before{ font-size:9.5px;letter-spacing:.55px;font-weight:600;color:var(--text-2); margin-bottom:3px; } body.nz-skin .table-wrap tfoot tr{ border:none;border-radius:14px;margin-bottom:10px; box-shadow:0 1px 2px rgba(20,30,60,.06),0 3px 9px rgba(20,30,60,.05); } body.nz-skin .table-wrap tfoot td{border-bottom:1px solid #EDF0F6;padding:9px 14px} body.nz-skin .table-wrap tfoot td::before{ font-size:9.5px;letter-spacing:.55px;font-weight:600;color:var(--text-2);margin-bottom:3px; } } /* Print: always fall back to plain ink on white. */ @media print{ body.nz-skin .card,body.nz-skin .kpi-card,body.nz-skin .table-wrap{box-shadow:none;border-radius:0} } /* ============================================================================= OBSIDIAN — true black theme (v1034) ----------------------------------------------------------------------------- The other seven themes only restyle the sidebar, the page background and the accent; the cards, tables and controls stay white underneath them. A real dark theme has to invert those too, so Obsidian is the only theme with a layer of its own. Everything here is scoped to [data-t="obsidian"], so switching back to any other theme restores exactly what was there before. Three parts: 1. tokens — the variables the rest of the design already reads 2. hard overrides — the light literals baked into style.css / skin.css 3. inline layer — generated separately, see the block that follows ============================================================================= */ /* ------------------------------------------------------------ 1. tokens ---- */ body.nz-skin[data-t="obsidian"]{ --bg:#000000; --card:#0C0C0E; --headbg:#0A0A0C; --border:#26262B; --white:#0C0C0E; --text:#F2F3F5; --text-2:#9298A2; /* --dark is the design's "ink" colour: it is text far more often than it is a surface, so on black it has to become light. The handful of places that use it as a solid background are corrected by hand further down. */ --dark:#E9EAEE; --dark-2:#FFFFFF; /* fallback names a few components ask for by hand, e.g. var(--navy,#1F3864) */ --navy:#E9EAEE; --wh-ink:#B9C4DA; --pink:#FF4D88; --green:#4FE0A8; --red:#FF7F97; --mono:'Consolas','SF Mono',ui-monospace,Menlo,monospace; --glow:rgba(0,0,0,.55); /* Classic CRT-phosphor green — the one theme where the name isn't just a colour pick, it's on-brand: true black card, glowing green line. */ --phosphor:#39FF14; --sidebg:#000000; --sidetext:#D5D8DE; --sidemuted:#767C86; --sidebrand:#8C929C; --sideline:#1D1D21; --sidehov:#141418; --sideact:#1C1C21; --sideactx:#FFFFFF; --accent:#FF4D88; color-scheme:dark; } @media screen{ /* --------------------------------------------------- 2. hard overrides ---- */ /* page + chrome */ body.nz-skin[data-t="obsidian"]{background:#000;color:var(--text)} body.nz-skin[data-t="obsidian"] .main-content, body.nz-skin[data-t="obsidian"] .content-area, body.nz-skin[data-t="obsidian"] .page-content{background:#000} body.nz-skin[data-t="obsidian"] .topbar{background:#0A0A0C;border-bottom-color:#1D1D21} /* The new app-wide gradient treatment is deliberately NOT applied here — this theme's whole point is true-black, high-contrast, no colour bleed, and a dark-to-accent gradient sidebar/toast would undercut exactly that. Restores the flat colours the base rules used before gradients were introduced. */ body.nz-skin[data-t="obsidian"] .sidebar{background:var(--sidebg)} /* base .toast in style.css is background:var(--dark);color:#fff — --dark is flipped to near-white on this theme (it's mostly text elsewhere), so a plain neutral toast was rendering as white text on a near-white pill. Give it its own dark surface instead of reusing --dark as a background here. */ body.nz-skin[data-t="obsidian"] .toast{background:#1C1C22;color:#F2F3F5} body.nz-skin[data-t="obsidian"] .toast.success{background:var(--green)} body.nz-skin[data-t="obsidian"] .toast.error{background:var(--red)} body.nz-skin[data-t="obsidian"] .brand-name{color:#F2F3F5} body.nz-skin[data-t="obsidian"] .nav-item:hover{background:#141418;color:#fff} body.nz-skin[data-t="obsidian"] .nav-item.active{background:#1C1C21;color:#fff} /* scrollbars */ body.nz-skin[data-t="obsidian"] ::-webkit-scrollbar-thumb{background:#2E2E35} body.nz-skin[data-t="obsidian"] ::-webkit-scrollbar-thumb:hover{background:#43434C} body.nz-skin[data-t="obsidian"] .table-wrap::-webkit-scrollbar-track{background:#141418} body.nz-skin[data-t="obsidian"] .table-wrap::-webkit-scrollbar-thumb{background:#2E2E35;border-color:#141418} body.nz-skin[data-t="obsidian"] .table-wrap::-webkit-scrollbar-thumb:hover{background:#43434C} /* theme pill + popover — these hard-code #fff so the picker itself stays legible */ body.nz-skin[data-t="obsidian"] .nz-tpill{background:#131317;color:#EDEEF1;border-color:#2A2A30} body.nz-skin[data-t="obsidian"] .nz-tpill:hover{background:#1A1A20} body.nz-skin[data-t="obsidian"] .nz-tsw i, body.nz-skin[data-t="obsidian"] .nz-thsw i{box-shadow:0 0 0 1.5px #131317,0 0 0 2.5px rgba(255,255,255,.16)} body.nz-skin[data-t="obsidian"] .nz-pop{background:#0F0F13;border-color:#2A2A30; box-shadow:0 18px 46px rgba(0,0,0,.72)} body.nz-skin[data-t="obsidian"] .nz-ph, body.nz-skin[data-t="obsidian"] .nz-psec b{color:#8E949E} body.nz-skin[data-t="obsidian"] .nz-throw{background:#0F0F13;border-bottom-color:#1D1D21} body.nz-skin[data-t="obsidian"] .nz-throw:hover{background:#17171D} body.nz-skin[data-t="obsidian"] .nz-thtx b{color:#F2F3F5} body.nz-skin[data-t="obsidian"] .nz-thtx span{color:#868C96} body.nz-skin[data-t="obsidian"] .nz-throw.on .nz-thtick{background:#F2F3F5;border-color:#F2F3F5;color:#0C0C0E} body.nz-skin[data-t="obsidian"] .nz-dpill{background:#131317;border-color:#2A2A30;color:#C7CBD2} body.nz-skin[data-t="obsidian"] .nz-dpill:hover{background:#1A1A20} body.nz-skin[data-t="obsidian"] .nz-dpill.on{background:#F2F3F5;border-color:#F2F3F5;color:#0C0C0E} /* cards */ body.nz-skin[data-t="obsidian"] .card, body.nz-skin[data-t="obsidian"] .kpi-card, body.nz-skin[data-t="obsidian"] .stat-card, body.nz-skin[data-t="obsidian"] .nz-busy-card, body.nz-skin[data-t="obsidian"] .rpt-card{background:#0C0C0E;border-color:#22222A} /* Recipients directory + report schedule cards (Email → Alerts & Reports) use .rpt-card, a CSS class rather than an inline style="background:#fff" — so it falls outside the attribute-selector sweep below and needs its own rule here, same as .card above. */ body.nz-skin[data-t="obsidian"] table.rpt-rec th{color:#8E949E;border-color:#22222A} body.nz-skin[data-t="obsidian"] table.rpt-rec td{border-color:#1B1B20} body.nz-skin[data-t="obsidian"] .rpt-group-hdr th{color:#6A707A} /* buttons — .btn-primary/.btn-success/.btn-danger all hard-code color:#fff, and --dark is now light, so the ink has to flip with them. */ body.nz-skin[data-t="obsidian"] .btn{background:#131317;color:#E7E9ED;border-color:#2A2A30} body.nz-skin[data-t="obsidian"] .btn:hover{background:#1C1C22} body.nz-skin[data-t="obsidian"] .btn-primary{background:#F2F3F5;border-color:#F2F3F5;color:#0C0C0E} body.nz-skin[data-t="obsidian"] .btn-primary:hover{background:#FFFFFF;border-color:#FFFFFF;color:#0C0C0E} body.nz-skin[data-t="obsidian"] .btn-success{background:#4FE0A8;border-color:#4FE0A8;color:#062016} /* Without this, the generic .btn:hover rule above wins (it's declared after these overrides in source and, without the repeated .btn class below, would be equal specificity) and swaps the background to #1C1C22 while the dark text color stays — unreadable. Same class-repeated-for-specificity fix as the light theme's .btn.btn-success:hover above, mirrors .btn-outline:hover's existing pattern of overriding per-theme. */ body.nz-skin[data-t="obsidian"] .btn.btn-success:hover{background:#4FE0A8} body.nz-skin[data-t="obsidian"] .btn-danger{background:#FF7F97;border-color:#FF7F97;color:#28060D} body.nz-skin[data-t="obsidian"] .btn.btn-danger:hover{background:#FF7F97} body.nz-skin[data-t="obsidian"] .btn-outline{background:transparent;color:#E7E9ED;border-color:#33333B} body.nz-skin[data-t="obsidian"] .btn-outline:hover{background:#17171D} /* Stock Out's segmented toggles (discount mode, delivery-address type, address input style) hard-code background:#fff;color:var(--dark) at rest and background:var(--dark);color:#fff when selected. --dark is near-white on this theme, so both states were low-contrast — light text on white at rest, white text on a near-white pill when selected. Give both states the same dark-surface / light-surface treatment the rest of the theme's buttons use. */ body.nz-skin[data-t="obsidian"] .so-disc-mode-btn, body.nz-skin[data-t="obsidian"] .so-addr-type-btn, body.nz-skin[data-t="obsidian"] .so-addr-mode-btn{background:#131317;color:#E7E9ED} body.nz-skin[data-t="obsidian"] .so-disc-mode-btn.on, body.nz-skin[data-t="obsidian"] .so-addr-type-btn.on, body.nz-skin[data-t="obsidian"] .so-addr-mode-btn.on{background:#F2F3F5;color:#0C0C0E} /* Sales & Consignments mobile layout (new v1376 accordion) — the section card/border/body already ride var(--card)/var(--border)/var(--dark), which this theme redefines, so they invert for free. Only the two spots that use a literal light hex (matching badge-green's own obsidian override, and the Extra Charges pink card's existing #fff7fb→#29121d remap above, which only covers that block's inline style, not this class-based mobile card) need a hand correction here. */ body.nz-skin[data-t="obsidian"] .so-section.so-section-open .so-section-num{background:#0F2A20;color:#4FE0A8} body.nz-skin[data-t="obsidian"] .stockout-modal-mobile .so-extra-charge-row{background:#29121D;border-color:#4A2233} /* Mobile Home (v1377) FAB — the other themes gradient var(--dark)→var(--pink)/ var(--accent), but Obsidian redefines --dark as a LIGHT ink colour (it's text far more often than a surface — see the token block's own comment on this), so that recipe would fade to near-white instead of staying a dark corner. Same hand correction as the modal-header/sidebar gradients get. */ body.nz-skin[data-t="obsidian"] .mh-tab-fab{background:linear-gradient(135deg,#1C1C22,var(--pink))} /* Filter pills and chips that app.js paints inline as "solid token behind white ink". Those tokens are light on Obsidian, so only the ink has to flip. */ body.nz-skin[data-t="obsidian"] [style*="background:var(--dark)"], body.nz-skin[data-t="obsidian"] [style*="background:var(--dark-2)"], body.nz-skin[data-t="obsidian"] [style*="background:var(--navy"]{color:#0C0C0E!important} body.nz-skin[data-t="obsidian"] [style*="background:var(--green)"], body.nz-skin[data-t="obsidian"] [style*="background:var(--red)"], body.nz-skin[data-t="obsidian"] [style*="background:var(--pink)"]{color:#140810!important} /* Stock Out modal — "+ Add Customer" button and the Requires Delivery / delivery-mode boxes. These use the same background:var(--dark)+white-text and hardcoded-light-box+color:var(--dark) patterns as above, but the [style*=...] substring rules above don't reliably catch them (the browser re-serializes inline color values it has touched via JS, e.g. rgb(...) instead of the literal var()/hex text, so the substring match can miss). Targeted by ID instead, which doesn't depend on the attribute's exact text. */ body.nz-skin[data-t="obsidian"] #so-new-cust-btn{background:#F2F3F5!important;color:#0C0C0E!important} body.nz-skin[data-t="obsidian"] #so-delivery-row, body.nz-skin[data-t="obsidian"] #so-delivery-mode-wrap{background:#131317!important} body.nz-skin[data-t="obsidian"] #so-delivery-row label, body.nz-skin[data-t="obsidian"] #so-delivery-mode-wrap label{color:#E7E9ED!important} /* small blocks that carry their own literal inside an app.js