/* ========================================================================================== OPTION 2 · MODERN — chosen by the owner (27 Sep 2026), revision 2 Sidebar open by default with a click-only collapse button (remembered); the page moves over, nothing is covered. Headline page titles, bento cards, orders as a clean list, two-column forms. Cool neutral canvas, Plus Jakarta Sans. Scoped under html[data-opt="2"]. CSS only, no libraries. ========================================================================================== */ html[data-opt="2"]{ --bg:#F2F3F5; --card:#FFFFFF; --text:#16141A; --text-muted:#56545C; --border:#E6E7EB; --accent:#C24F70; --accent-dk:#9C3957; --accent-soft:#FCE8EE; --sidebar:#FFFFFF; --sidebar-hover:#F4F4F6; --sidebar-text:#46444C; --sidebar-border:#ECECF0; --o2-ease:cubic-bezier(.2,.8,.2,1); --o2-open:252px; --o2-closed:76px; } html[data-opt="2"] body{ font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; background:var(--bg); } html[data-opt="2"] :is(.kpi-num,.stat-card .num,.oc-meta,.donut-center .n){ font-variant-numeric:tabular-nums; } /* ---- Sidebar: open by default; collapses to an icon bar only when the button is clicked. It stays in the page flow, so the content area narrows/widens smoothly instead of being covered. ---- */ html[data-opt="2"] .sidebar{ width:var(--o2-open); border-right:1px solid var(--sidebar-border); transition:width .3s var(--o2-ease); } html[data-opt="2"].rail-collapsed .sidebar{ width:var(--o2-closed); } html[data-opt="2"] .sidebar-brand{ padding:18px 16px 16px 19px; border-bottom:none; position:relative; } html[data-opt="2"] .sidebar-brand > div:nth-child(2){ white-space:nowrap; overflow:hidden; } html[data-opt="2"] .nb-rail-toggle{ display:flex; margin-left:auto; flex-shrink:0; width:30px; height:30px; border-radius:9px; border:1px solid var(--sidebar-border); background:#fff; color:var(--sidebar-text); align-items:center; justify-content:center; cursor:pointer; transition:background .2s, color .2s, transform .3s var(--o2-ease); } html[data-opt="2"] .nb-rail-toggle:hover{ background:var(--accent-soft); color:var(--accent-dk); border-color:transparent; } html[data-opt="2"] .nb-rail-toggle svg{ width:16px; height:16px; transition:transform .3s var(--o2-ease); } html[data-opt="2"].rail-collapsed .nb-rail-toggle svg{ transform:rotate(180deg); } .nb-rail-toggle{ display:none; } html[data-opt="2"].rail-collapsed .sidebar-brand{ flex-direction:column; gap:12px; padding:18px 0 12px; align-items:center; } html[data-opt="2"].rail-collapsed .nb-rail-toggle{ margin-left:0; } html[data-opt="2"].rail-collapsed .sidebar-brand > div:nth-child(2){ display:none; } html[data-opt="2"] :is(.sidebar-brand > div:nth-child(2), .nav-item span, .sidebar-footer .user > div:last-child){ transition:opacity .2s .08s; } html[data-opt="2"].rail-collapsed :is(.sidebar-brand > div:nth-child(2), .nav-item span, .sidebar-footer .user > div:last-child){ opacity:0; width:0; overflow:hidden; transition:opacity .12s; } html[data-opt="2"] .nav-item span{ white-space:nowrap; } html[data-opt="2"] .sidebar > div[style*="padding:10px 12px 0"]{ padding:4px 12px 0 !important; } html[data-opt="2"] .sidebar-scroll{ padding:4px 12px; scrollbar-width:thin; overflow-x:hidden; } html[data-opt="2"] .sidebar-scroll::-webkit-scrollbar{ width:4px; } html[data-opt="2"] .nav-group-label{ font-size:10.5px; letter-spacing:1.1px; border:none; padding:14px 10px 5px; margin:0; white-space:nowrap; overflow:hidden; } html[data-opt="2"].rail-collapsed .nav-group-label{ height:1px; padding:0; margin:12px 14px; background:var(--sidebar-border); color:transparent; } html[data-opt="2"] .nav-item{ padding:8px 15px; gap:14px; border-radius:10px; font-size:13px; } html[data-opt="2"] .nav-item .icon{ opacity:1; width:19px; height:19px; } html[data-opt="2"] .nav-group:has(.grp-0) .icon{ color:#A8677A; } html[data-opt="2"] .nav-group:has(.grp-1) .icon{ color:#4E8A83; } html[data-opt="2"] .nav-group:has(.grp-2) .icon{ color:#B08535; } html[data-opt="2"] .nav-group:has(.grp-3) .icon{ color:#5D74A6; } html[data-opt="2"] .nav-group:has(.grp-4) .icon{ color:#6B8F52; } html[data-opt="2"] .nav-group:has(.grp-5) .icon{ color:#3F7F96; } html[data-opt="2"] .nav-group:has(.grp-6) .icon{ color:#BD6A44; } html[data-opt="2"] .nav-group:has(.grp-7) .icon{ color:#5A7085; } html[data-opt="2"] .nav-pill{ border-radius:10px; background:var(--sidebar-hover); } html[data-opt="2"] .nav-item.active .nav-pill{ background:var(--accent-soft); } html[data-opt="2"] .nav-item.active{ color:var(--accent-dk); } html[data-opt="2"] .nav-item.active::before{ display:none; } html[data-opt="2"] .sidebar-footer{ padding:14px 18px; border-top:1px solid var(--sidebar-border); } html[data-opt="2"].rail-collapsed .sidebar-footer{ flex-direction:column; gap:10px; padding:14px 0; } html[data-opt="2"] .sidebar-footer .avatar{ background:var(--accent); color:#fff; } /* name label shown next to an icon when the sidebar is collapsed */ .nb-rail-tip{ position:fixed; z-index:600; pointer-events:none; opacity:0; transform:translateX(-4px); background:#16141A; color:#fff; font:600 12px/1 'Plus Jakarta Sans','Segoe UI',sans-serif; padding:8px 11px; border-radius:8px; white-space:nowrap; box-shadow:0 8px 20px -8px rgba(22,20,26,.5); transition:opacity .12s, transform .15s var(--o2-ease, ease); } .nb-rail-tip.on{ opacity:1; transform:none; } .nb-rail-tip::before{ content:''; position:absolute; left:-4px; top:50%; width:8px; height:8px; background:#16141A; transform:translateY(-50%) rotate(45deg); border-radius:1px; } /* ---- Page: slim top bar + headline titles ---- */ html[data-opt="2"] .panel-emblem{ display:none !important; } html[data-opt="2"] .panel-inner{ max-width:1240px; padding:0 44px 10px; } html[data-opt="2"] .breadcrumb{ position:sticky; top:0; z-index:10; margin:0 -44px 26px; padding:16px 44px; background:rgba(242,243,245,.94); border-bottom:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--text-muted); } html[data-opt="2"] #view-home{ padding-top:34px; } html[data-opt="2"] .section-banner, html[data-opt="2"] .panel-header{ background:transparent !important; padding:0 !important; margin-bottom:26px; border-radius:0; } html[data-opt="2"] .section-banner h1, html[data-opt="2"] .panel-header h1{ font-size:30px !important; font-weight:800; letter-spacing:-.9px; } html[data-opt="2"] .section-banner .date, html[data-opt="2"] .panel-header .date{ font-size:13.5px; margin-top:4px; } html[data-opt="2"] .welcome-strip{ background:radial-gradient(460px 260px at 92% -10%, #FBD9E3, rgba(251,217,227,0) 70%), radial-gradient(360px 220px at 70% 120%, #E3EFEE, rgba(227,239,238,0) 70%), #fff; color:var(--text); border-radius:24px; padding:34px 36px; box-shadow:0 1px 2px rgba(22,20,26,.04); } html[data-opt="2"] .welcome-strip::before{ display:none; } html[data-opt="2"] .welcome-strip h1{ font-size:32px; font-weight:800; letter-spacing:-1px; } html[data-opt="2"] .welcome-strip .sub{ color:var(--text-muted); font-size:14px; } /* ---- Bento cards ---- */ html[data-opt="2"] :is(.card,.stat-card,.kpi-card,.porder-card){ border:none; border-radius:22px; box-shadow:0 1px 2px rgba(22,20,26,.04); transition:transform .25s var(--o2-ease), box-shadow .25s; } html[data-opt="2"] :is(.stat-card,.kpi-card):hover, html[data-opt="2"] .card[style*="cursor:pointer"]:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(22,20,26,.18); } html[data-opt="2"] .view .card[style*="background"]{ background:#fff !important; border-color:transparent !important; } html[data-opt="2"] .view [style*="background:#fff; border-radius:8px"]{ background:#F4F5F7 !important; border-radius:12px !important; } html[data-opt="2"] .kpi-grid, html[data-opt="2"] .stat-grid{ gap:16px; } html[data-opt="2"] .kpi-card{ flex-direction:column; align-items:flex-start; gap:18px; padding:22px !important; } html[data-opt="2"] .kpi-icon{ width:40px !important; height:40px !important; border-radius:12px; } html[data-opt="2"] .kpi-num{ font-size:28px !important; font-weight:800; letter-spacing:-.8px; } html[data-opt="2"] .kpi-lbl{ font-size:13px; margin-top:4px; } html[data-opt="2"] .stat-card{ padding:24px; } html[data-opt="2"] .stat-card .lbl{ color:var(--text-muted); font-size:12.5px; font-weight:600; text-transform:none; letter-spacing:0; } html[data-opt="2"] .stat-card .num{ font-size:34px; font-weight:800; letter-spacing:-1.2px; margin-top:12px; } html[data-opt="2"] .stat-card .hint{ font-size:12px; } html[data-opt="2"] .card{ padding:26px 28px; } html[data-opt="2"] .card h2{ font-size:16px !important; font-weight:700; letter-spacing:-.3px; } html[data-opt="2"] .home-grid{ gap:12px; } html[data-opt="2"] .home-dept{ background:#F6F6F8; border-radius:16px; padding:18px; display:grid; grid-template-columns:38px 1fr; column-gap:14px; align-items:center; transition:background .2s, transform .25s var(--o2-ease); } html[data-opt="2"] .home-dept:hover{ background:var(--ds); transform:translateY(-2px); box-shadow:none; } html[data-opt="2"] .home-dept .hd-icon{ grid-row:span 2; margin:0; width:38px; height:38px; border-radius:12px; } html[data-opt="2"] .home-dept .hd-name{ font-weight:700; } html[data-opt="2"] .home-dept .hd-count{ font-size:12px; } /* ---- Readability: small grey text is a little bigger and darker ---- */ html[data-opt="2"] .view [style*="font-size:8.5px"]{ font-size:11.5px !important; color:var(--text-muted) !important; } html[data-opt="2"] .view [style*="font-size:9px"]{ font-size:11.5px !important; } html[data-opt="2"] .view [style*="font-size:9.5px"]{ font-size:12px !important; } html[data-opt="2"] .view [style*="font-size:10px"]{ font-size:12px !important; } html[data-opt="2"] .view [style*="font-size:10.5px"]{ font-size:12.5px !important; } html[data-opt="2"] .view [style*="font-size:11px"]{ font-size:12.5px !important; } html[data-opt="2"] .view [style*="color:var(--text-muted)"]{ color:var(--text-muted) !important; } html[data-opt="2"] :is(.list-row .rs, .oc-meta, .oc-sub, .global-footer){ color:var(--text-muted); } html[data-opt="2"] .global-footer{ font-size:12px; } /* ---- Orders as a data list ---- */ html[data-opt="2"] .order-grid{ grid-template-columns:1fr; gap:0; background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 1px 2px rgba(22,20,26,.04); } html[data-opt="2"] .order-card{ display:grid; grid-template-columns:minmax(240px,2.2fr) 130px minmax(120px,1.3fr) 190px; column-gap:28px; align-items:center; background:#fff !important; border:none; border-bottom:1px solid #F0F1F3; border-radius:0; padding:16px 26px; transition:background .15s; } html[data-opt="2"] .order-card:last-child{ border-bottom:none; } html[data-opt="2"] .order-card:hover{ background:#FAFAFB !important; transform:none; box-shadow:inset 3px 0 0 var(--card-accent); } html[data-opt="2"] .order-card .oc-top{ align-items:center; } html[data-opt="2"] .order-card .oc-id{ font-size:14px; font-weight:800; } html[data-opt="2"] .order-card .oc-sub{ margin-top:3px; font-size:12.5px; } html[data-opt="2"] .order-card .badge-v2{ background:#F4F5F7 !important; font-weight:600; font-size:11.5px; } html[data-opt="2"] .order-card .stage-pill-v2{ margin-top:0 !important; justify-self:start; background:var(--card-soft); font-size:11.5px; } html[data-opt="2"] .order-card .oc-track{ margin:0; height:6px; background:#EEF0F2; } html[data-opt="2"] .order-card .oc-meta{ font-size:12.5px; gap:14px; } /* ---- Controls ---- */ html[data-opt="2"] .filter-bar input[type=text]{ border-radius:999px; padding:12px 18px 12px 42px; border:1px solid transparent; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A98A0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.2' y2='16.2'/%3E%3C/svg%3E") no-repeat 16px 50%/16px; } html[data-opt="2"] .filter-bar select{ border-radius:999px; border:1px solid transparent; padding:11px 16px; } html[data-opt="2"] .stage-tabs{ background:transparent; padding:0; gap:22px; border-bottom:1px solid var(--border); border-radius:0; display:flex; } html[data-opt="2"] .stage-tab{ padding:10px 2px; border-radius:0; font-size:13px; color:var(--text-muted); } html[data-opt="2"] .stage-tab.active{ background:transparent; box-shadow:inset 0 -2px 0 var(--accent); color:var(--text); } html[data-opt="2"] #clientsDrillArea > .card{ display:grid; grid-template-columns:1fr 1fr; column-gap:22px; grid-auto-flow:dense; } html[data-opt="2"] #clientsDrillArea > .card > *{ grid-column:1 / -1; } html[data-opt="2"] #clientsDrillArea > .card > .field{ grid-column:auto; } html[data-opt="2"] #clientsDrillArea > .card > .field:has(.stage-tabs){ grid-column:1 / -1; } html[data-opt="2"] .field label{ font-size:12.5px; font-weight:600; color:var(--text-muted); } html[data-opt="2"] :is(.field input, #clientsDrillArea .filter-bar input){ border:1px solid transparent; background:#F4F5F7; padding:13px 15px; border-radius:12px; transition:background .2s, border-color .2s, box-shadow .2s; } html[data-opt="2"] :is(.field input,.filter-bar input[type=text],.filter-bar select):focus{ outline:none; background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,79,112,.14); } html[data-opt="2"] .field .stage-tabs{ border-bottom:none; gap:8px; } html[data-opt="2"] .field .stage-tab{ border:1px solid var(--border); border-radius:999px; padding:8px 18px; } html[data-opt="2"] .field .stage-tab.active{ box-shadow:none; background:var(--accent-soft); border-color:var(--accent); color:var(--accent-dk); } html[data-opt="2"] .login-btn{ border-radius:12px; font-weight:700; transition:transform .2s var(--o2-ease), box-shadow .2s; } html[data-opt="2"] .login-btn:not([style*="background:var(--card)"]){ background:#9C3957 !important; } html[data-opt="2"] .login-btn:not([style*="background:var(--card)"]):hover{ background:var(--accent-dk) !important; box-shadow:0 10px 22px -10px rgba(156,57,87,.7); transform:translateY(-1px); } html[data-opt="2"] .login-btn[style*="background:var(--card)"]{ background:#fff !important; border-color:var(--border) !important; border-radius:12px; } html[data-opt="2"] .global-footer{ max-width:1240px; padding:12px 44px 18px; } /* Shared: logo fallback monogram, used until Logo.png is in the folder */ .nb-mono{ display:none; width:100%; height:100%; border-radius:10px; align-items:center; justify-content:center; font-weight:700; font-size:17px; color:#fff; background:linear-gradient(135deg,#8C5266,#3E2F38); } .nb-logo-missing > img{ display:none !important; } .nb-logo-missing > .nb-mono{ display:flex; } @media (prefers-reduced-motion: reduce){ html[data-opt] *, html[data-opt] *::before, html[data-opt] *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ========================================================================================== REVISION 3 (owner review, 27 Sep 2026): screens 1–5 1 Login: full page with information about the software 3 Order dashboard: a line links the pipeline stages 4 Sample orders: the current layout (compact top cards, card grid) with fewer colours 5 Sample detail: no pale gold; compact action buttons; Authorize button vertically centred ========================================================================================== */ /* ---- 1. Login: full page ---- */ .nb-li{ display:none; } html[data-opt="2"] #loginScreen{ background:#fff; } html[data-opt="2"] .login-card{ width:100%; height:100%; min-height:100vh; border-radius:0; box-shadow:none; animation:none; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(400px,1fr); } html[data-opt="2"] .login-brand-panel{ width:auto; padding:0; display:block; text-align:left; background:radial-gradient(900px 520px at 105% -10%, rgba(194,79,112,.42), rgba(194,79,112,0) 60%), radial-gradient(700px 520px at -10% 110%, rgba(78,138,131,.22), rgba(78,138,131,0) 60%), linear-gradient(155deg,#1D161B 0%,#2E2128 55%,#4A2C3A 100%); } html[data-opt="2"] .login-brand-panel::before{ opacity:.3; } html[data-opt="2"] .login-brand-panel > :not(.nb-li){ display:none !important; } html[data-opt="2"] .nb-li{ display:flex; flex-direction:column; justify-content:space-between; position:relative; z-index:1; height:100%; min-height:100vh; padding:40px 56px 32px; color:#fff; } html[data-opt="2"] .nb-li-top{ display:flex; align-items:center; gap:12px; } html[data-opt="2"] .nb-li-mark{ width:44px; height:44px; border-radius:12px; background:#F7F1F0; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; } html[data-opt="2"] .nb-li-mark img{ width:34px; height:34px; object-fit:contain; } html[data-opt="2"] .nb-li-name{ font-weight:700; font-size:16px; } html[data-opt="2"] .nb-li-role{ font-size:12.5px; color:rgba(255,255,255,.62); margin-top:1px; } html[data-opt="2"] .nb-li-main{ max-width:640px; margin:36px 0; animation:nbLiIn .6s var(--o2-ease) both; } @keyframes nbLiIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } html[data-opt="2"] .nb-li-eyebrow{ font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#F2A7BC; } html[data-opt="2"] .nb-li-head{ font-size:clamp(28px,3.1vw,42px); font-weight:800; letter-spacing:-1px; line-height:1.12; margin:12px 0 14px; color:#fff; } html[data-opt="2"] .nb-li-text{ font-size:15px; line-height:1.65; color:rgba(255,255,255,.78); max-width:560px; } html[data-opt="2"] .nb-li-stages{ display:flex; margin:30px 0 28px; max-width:600px; } html[data-opt="2"] .nb-li-st{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; font-size:12px; color:rgba(255,255,255,.78); } html[data-opt="2"] .nb-li-st span{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.12); position:relative; z-index:1; } html[data-opt="2"] .nb-li-st:not(:first-child)::before{ content:''; position:absolute; right:50%; top:5px; width:100%; height:2px; background:rgba(255,255,255,.22); } html[data-opt="2"] .nb-li-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } html[data-opt="2"] .nb-li-f{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); } html[data-opt="2"] .nb-li-fi{ width:34px; height:34px; border-radius:10px; background:rgba(242,167,188,.14); color:#F2A7BC; display:flex; align-items:center; justify-content:center; flex-shrink:0; } html[data-opt="2"] .nb-li-fi svg{ width:17px; height:17px; } html[data-opt="2"] .nb-li-ft{ font-size:13.5px; font-weight:700; } html[data-opt="2"] .nb-li-fd{ font-size:12.5px; color:rgba(255,255,255,.68); margin-top:3px; line-height:1.45; } html[data-opt="2"] .nb-li-foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.58); } html[data-opt="2"] .login-form-panel{ padding:48px clamp(32px,6vw,96px); background:#fff; } html[data-opt="2"] .login-form-panel > *{ width:100%; max-width:400px; margin-left:auto; margin-right:auto; } html[data-opt="2"] .login-form-panel .eyebrow{ color:var(--accent); font-size:12px; letter-spacing:1px; } html[data-opt="2"] .login-form-panel h1{ font-size:30px; font-weight:800; letter-spacing:-.8px; margin-bottom:8px; } html[data-opt="2"] .login-form-panel .sub{ font-size:14px; color:var(--text-muted); margin-bottom:32px; } html[data-opt="2"] .login-form-panel .field label{ font-size:13px; color:var(--text); } html[data-opt="2"] .login-form-panel .login-btn{ padding:14px; font-size:14.5px; margin-top:12px; } html[data-opt="2"] .login-trust{ font-size:12.5px; color:var(--text-muted); margin-top:22px; } html[data-opt="2"] .login-hint{ display:none; } @media (max-width:900px){ html[data-opt="2"] .login-card{ grid-template-columns:1fr; height:auto; } html[data-opt="2"] .nb-li{ min-height:0; padding:28px 22px; } html[data-opt="2"] .nb-li-grid{ grid-template-columns:1fr; } html[data-opt="2"] .login-form-panel{ padding:36px 22px; } } /* ---- 3. Order dashboard: a line links the pipeline stages (grey → amber → teal → green) ---- */ html[data-opt="2"] .view div[style*="left:6%; right:6%; top:9px; height:2px; background:#fff"]{ background:linear-gradient(90deg,#8B9099 0%,#B98A4A 20%,#4E8A83 40%,#4E8A83 80%,#3D8B5F 100%) !important; height:3px !important; top:8px !important; left:calc(6px + (100% - 12px) / 14) !important; right:calc(6px + (100% - 12px) / 14) !important; border-radius:3px; opacity:.6; } /* ---- 4. Sample orders: current layout, fewer colours ---- */ html[data-opt="2"] .view:has(#sampleGrid) .section-banner{ background:#fff !important; padding:20px 24px !important; border-radius:18px; margin-bottom:22px; box-shadow:0 1px 2px rgba(22,20,26,.04); } html[data-opt="2"] .view:has(#sampleGrid) .section-banner h1{ font-size:20px !important; font-weight:700; letter-spacing:-.3px; } html[data-opt="2"] .view:has(#sampleGrid) .section-banner .date{ font-size:12.5px; margin-top:3px; } html[data-opt="2"] .view:has(#sampleGrid) .kpi-grid{ gap:14px; margin-bottom:22px; } html[data-opt="2"] .view:has(#sampleGrid) .kpi-card{ flex-direction:row; align-items:center; gap:13px; padding:16px 18px !important; border-radius:16px; } html[data-opt="2"] .view:has(#sampleGrid) .kpi-icon{ width:38px !important; height:38px !important; border-radius:10px; background:var(--accent-soft) !important; color:var(--accent-dk) !important; } html[data-opt="2"] .view:has(#sampleGrid) .kpi-num{ font-size:20px !important; letter-spacing:-.3px; } html[data-opt="2"] .view:has(#sampleGrid) .kpi-lbl{ font-size:12px; margin-top:2px; } html[data-opt="2"] #sampleGrid.order-grid{ grid-template-columns:repeat(3,1fr); gap:14px; background:transparent; border-radius:0; overflow:visible; box-shadow:none; } html[data-opt="2"] #sampleGrid .order-card{ display:block; background:#fff !important; border:1px solid var(--border); border-radius:16px; padding:17px 18px; box-shadow:0 1px 2px rgba(22,20,26,.04); transition:transform .25s var(--o2-ease), box-shadow .25s; } html[data-opt="2"] #sampleGrid .order-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px -12px rgba(22,20,26,.18); background:#fff !important; } html[data-opt="2"] #sampleGrid .order-card .oc-sub br{ display:inline; } html[data-opt="2"] #sampleGrid .order-card .badge-v2{ background:#F4F5F7 !important; } html[data-opt="2"] #sampleGrid .order-card .stage-pill-v2{ margin-top:11px !important; background:#F4F5F7; } html[data-opt="2"] #sampleGrid .order-card .oc-track{ margin:13px 0 10px; } html[data-opt="2"] #sampleGrid .order-card[style*="--card-accent:#B98A4A"]{ --card-accent:var(--accent) !important; } html[data-opt="2"] #sampleGrid .badge-v2.pending{ color:var(--accent-dk); } /* ---- 5. Sample detail: no pale gold; compact actions; Authorize button centred ---- */ html[data-opt="2"] .view:has(.detail-2col):has([onclick="goTo('order-sample')"]) [style*="background:#FBF3E4"]{ background:#F4F5F7 !important; } html[data-opt="2"] .view:has(.detail-2col):has([onclick="goTo('order-sample')"]) [style*="color:#B98A4A"]{ color:var(--accent-dk) !important; } html[data-opt="2"] .view:has(.detail-2col):has([onclick="goTo('order-sample')"]) [style*="border:1.5px solid #B98A4A"]{ border-color:var(--accent) !important; } html[data-opt="2"] .view:has(.detail-2col):has([onclick="goTo('order-sample')"]) .card[style*="border-color:#B98A4A"]{ border-color:transparent !important; box-shadow:inset 3px 0 0 var(--accent), 0 1px 2px rgba(22,20,26,.04) !important; padding:14px 18px !important; } html[data-opt="2"] .view:has(.detail-2col):has([onclick="goTo('order-sample')"]) button[style*="background:#B98A4A"]{ background:#9C3957 !important; } html[data-opt="2"] .card[style*="display:flex"] > .login-btn{ margin-top:0 !important; align-self:center; } html[data-opt="2"] .card[style*="display:flex"] > p{ margin:0; line-height:1.5; } html[data-opt="2"] .action-grid{ display:flex !important; flex-wrap:wrap; gap:8px; width:auto !important; } html[data-opt="2"] .action-btn{ flex-direction:row; gap:7px; height:38px; padding:0 14px; border-radius:10px; font-size:12.5px; font-weight:600; background:#fff; border:1px solid var(--border); box-shadow:none; } html[data-opt="2"] .action-btn:hover{ transform:none; border-color:var(--accent); background:#fff; } html[data-opt="2"] .action-btn.danger:hover{ border-color:var(--loss); } html[data-opt="2"] .action-btn .icon{ width:15px; height:15px; } /* ========================================================================================== REVISION 4 (owner review of screens 1–20, 27 Sep 2026) - KPI cards are compact everywhere (icon beside the number) - No pale gold anywhere: Cutting is indigo, Accounts department is ocean blue - One uniform format: the same text boxes, drop-downs and buttons on every screen - Sample orders + Production orders: current layout with soft colour tints (not pure white) - Client list (one state), New client, Edit client, New order: current layout in the uniform format ========================================================================================== */ html[data-opt="2"]{ --cut:#5A64B8; --cut-soft:#ECEEF9; --cut-border:#D7DBF1; --acc:#2B7A9B; --acc-soft:#E4F0F5; } /* ---- Compact KPI cards ---- */ html[data-opt="2"] .kpi-grid{ gap:14px; margin-bottom:22px; } html[data-opt="2"] .kpi-card{ flex-direction:row; align-items:center; gap:14px; padding:14px 18px !important; border-radius:16px; } html[data-opt="2"] .kpi-icon{ width:40px !important; height:40px !important; border-radius:12px; flex-shrink:0; } html[data-opt="2"] .kpi-num{ font-size:22px !important; letter-spacing:-.4px; line-height:1.15; } html[data-opt="2"] .kpi-lbl{ font-size:12.5px; margin-top:2px; } html[data-opt="2"] .view:not(#view-home) .stat-card{ padding:16px 20px; border-radius:16px; } html[data-opt="2"] .view:not(#view-home) .stat-card .num{ font-size:24px; margin-top:6px; letter-spacing:-.5px; } /* ---- No pale gold: Cutting becomes indigo ---- */ html[data-opt="2"] [style*="--card-accent:#B98A4A"]{ --card-accent:var(--cut) !important; --card-soft:var(--cut-soft) !important; --card-border:var(--cut-border) !important; } html[data-opt="2"] .view [style*="background:#B98A4A"]{ background:var(--cut) !important; } html[data-opt="2"] .view [style*="color:#B98A4A"]{ color:var(--cut) !important; } html[data-opt="2"] .view [style*="solid #B98A4A"]{ border-color:var(--cut) !important; } html[data-opt="2"] .view [style*="2px #B98A4A"]{ box-shadow:0 0 0 2px var(--cut) !important; } html[data-opt="2"] .view [style*="background:#FBF3E4"]{ background:var(--cut-soft) !important; } html[data-opt="2"] .view [style*="color:#8C6A1E"]{ color:#3F479A !important; } html[data-opt="2"] .badge-v2.pending{ color:var(--accent-dk); } html[data-opt="2"] .pulse-amber{ animation-name:nbPulseCut; } @keyframes nbPulseCut{ 0%,100%{ box-shadow:0 0 0 0 rgba(90,100,184,.5); } 50%{ box-shadow:0 0 0 7px rgba(90,100,184,0); } } html[data-opt="2"] .view div[style*="left:6%; right:6%; top:9px; height:2px; background:#fff"]{ background:linear-gradient(90deg,#8B9099 0%,#5A64B8 20%,#4E8A83 40%,#4E8A83 80%,#3D8B5F 100%) !important; } /* Accounts department colour: ocean blue instead of gold */ html[data-opt="2"] .grp-2{ color:var(--acc); } html[data-opt="2"] .nav-group:has(.grp-2) .icon{ color:var(--acc); } html[data-opt="2"] [style*="--dc:#B08535"]{ --dc:var(--acc) !important; --ds:var(--acc-soft) !important; } /* ---- One uniform format for text boxes and drop-downs (inside the app) ---- */ html[data-opt="2"] #app :is(.field input, .field select, .field textarea, .filter-bar input[type=text], .filter-bar select){ background-color:#fff; border:1px solid #E1E2E7; border-radius:12px; padding:0 14px; height:46px; font-family:inherit; font-size:13.5px; color:var(--text); box-sizing:border-box; transition:border-color .2s, box-shadow .2s; } html[data-opt="2"] #app .field textarea{ height:auto; padding:12px 14px; } html[data-opt="2"] #app .field input[type=checkbox]{ height:auto; } html[data-opt="2"] #app .filter-bar input[type=text]{ padding-left:42px; } html[data-opt="2"] #app .filter-bar input[type=text]:not([id$="Search"]){ padding-left:14px; background-image:none; } html[data-opt="2"] #app :is(.field select, .filter-bar select){ width:100%; appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356545C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:15px; cursor:pointer; } html[data-opt="2"] #app .filter-bar select{ width:auto; min-width:150px; } html[data-opt="2"] #app :is(.field input, .field select, .filter-bar input[type=text], .filter-bar select):hover{ border-color:#CFD1D8; } html[data-opt="2"] #app :is(.field input, .field select, .field textarea, .filter-bar input[type=text], .filter-bar select):focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,79,112,.14); } html[data-opt="2"] #app ::placeholder{ color:#9A98A0; } html[data-opt="2"] #app .field label{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:7px; } html[data-opt="2"] #app .field{ margin-bottom:16px; } /* ---- Forms in the current layout (single column), uniform format ---- */ html[data-opt="2"] #clientsDrillArea > .card:not(:has(input[type=password])){ display:block; } html[data-opt="2"] .view .card:has(> .field){ border:1px solid var(--border); border-radius:18px; padding:24px 26px; box-shadow:0 1px 2px rgba(22,20,26,.04); } html[data-opt="2"] .view .card:has(> .field) > h2{ font-size:17px !important; font-weight:700; margin-bottom:18px; } html[data-opt="2"] .view .card:has(> .field) > .filter-bar{ margin-bottom:16px; } html[data-opt="2"] .view .card:has(> .field) > p{ font-size:12.5px; color:var(--text-muted); } html[data-opt="2"] .view .card:has(> .field) .login-btn{ height:46px; padding:0 20px; } /* ---- Client list (one state): current card style ---- */ html[data-opt="2"] .card[id^="clientCard-"]{ border:1px solid var(--border); border-radius:16px; padding:20px 22px; box-shadow:none; background:#fff; } html[data-opt="2"] .card[id^="clientCard-"] .login-btn{ height:38px; padding:0 16px !important; font-size:12.5px !important; } /* ---- Sample orders + Production orders: current layout with soft tints ---- */ html[data-opt="2"] .view:is(:has(#sampleGrid), :has(#ordersGrid)) .section-banner{ display:flex !important; justify-content:space-between; align-items:center; background:linear-gradient(120deg,#FCEEF2 0%,#F1F6F8 55%,#EEF3F6 100%) !important; padding:20px 24px !important; border-radius:18px; margin-bottom:22px; border:1px solid #F1E3E8; box-shadow:none; } html[data-opt="2"] .view:is(:has(#sampleGrid), :has(#ordersGrid)) .section-banner h1{ font-size:20px !important; font-weight:700; letter-spacing:-.3px; } html[data-opt="2"] .view:is(:has(#sampleGrid), :has(#ordersGrid)) .kpi-grid > :nth-child(1) .kpi-icon{ background:#FCE8EE !important; color:#9C3957 !important; } html[data-opt="2"] .view:is(:has(#sampleGrid), :has(#ordersGrid)) .kpi-grid > :nth-child(2) .kpi-icon{ background:var(--cut-soft) !important; color:#3F479A !important; } html[data-opt="2"] .view:is(:has(#sampleGrid), :has(#ordersGrid)) .kpi-grid > :nth-child(3) .kpi-icon{ background:#E6F2F0 !important; color:#3F7A73 !important; } html[data-opt="2"] .view:is(:has(#sampleGrid), :has(#ordersGrid)) .kpi-grid > :nth-child(4) .kpi-icon{ background:#E5F1E8 !important; color:#3D6B4C !important; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid).order-grid{ grid-template-columns:repeat(3,1fr); gap:16px; background:transparent; border-radius:0; overflow:visible; box-shadow:none; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card{ display:block; position:relative; overflow:hidden; background:linear-gradient(180deg, var(--card-soft) 0%, #FFFFFF 80%) !important; border:1px solid var(--card-border); border-radius:18px; padding:20px 20px 16px; box-shadow:0 1px 2px rgba(22,20,26,.04); transition:transform .25s var(--o2-ease), box-shadow .25s; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--card-accent); opacity:.85; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -14px rgba(22,20,26,.22); background:linear-gradient(180deg, var(--card-soft) 0%, #FFFFFF 80%) !important; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card .oc-id{ font-size:15px; font-weight:800; letter-spacing:-.2px; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card .oc-sub{ font-size:12.5px; line-height:1.5; margin-top:3px; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card .oc-sub br{ display:inline; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card .badge-v2{ background:rgba(255,255,255,.9) !important; border:1px solid var(--card-border); font-size:11.5px; font-weight:600; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card .stage-pill-v2{ margin-top:12px !important; background:#fff; border:1px solid var(--card-border); color:var(--card-accent); } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card .oc-track{ height:6px; margin:14px 0 10px; background:rgba(22,20,26,.06); } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card .oc-meta{ font-size:12.5px; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card .oc-meta span:first-child{ font-weight:600; color:var(--text); } html[data-opt="2"] #sampleGrid .order-card[style*="--card-accent:#B98A4A"]{ --card-accent:var(--accent) !important; --card-soft:#FCEEF2 !important; --card-border:#F3D3DD !important; } /* ---- Sample detail: plain authorization card (no coloured stripe), shorter buttons ---- */ html[data-opt="2"] .view:has(.detail-2col):has([onclick="goTo('order-sample')"]) .card[style*="border-color:#B98A4A"]{ border-color:transparent !important; background:#fff !important; box-shadow:0 1px 2px rgba(22,20,26,.04) !important; padding:12px 18px !important; } html[data-opt="2"] .action-btn{ height:34px; padding:0 12px; font-size:12.5px; } html[data-opt="2"] .action-btn .icon{ width:14px; height:14px; } /* ---- Order sheet (document look) and its preview ---- */ .nb-sheet-tools{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 16px; } .nb-sheet-tools .login-btn{ width:auto !important; height:42px; padding:0 18px !important; margin:0 !important; display:inline-flex; align-items:center; gap:8px; font-size:13px !important; } .nb-sheet-tools .login-btn svg{ width:16px; height:16px; } .nb-sheet{ background:#fff; color:#16141A; border:1px solid #E6E7EB; border-radius:14px; box-shadow:0 10px 30px -18px rgba(22,20,26,.35); max-width:820px; margin:0 auto 24px; padding:34px 38px; font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; font-size:12.5px; } .nb-sheet-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:18px; border-bottom:2px solid #16141A; } .nb-sheet-brand{ display:flex; gap:12px; align-items:center; } .nb-sheet-logo{ width:46px; height:46px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#F7F1F0; } .nb-sheet-logo img{ width:38px; height:38px; object-fit:contain; } .nb-sheet-co{ font-size:15px; font-weight:800; } .nb-sheet-co-sub{ font-size:11.5px; color:#56545C; margin-top:2px; } .nb-sheet-doc{ text-align:right; } .nb-sheet-doc .t{ font-size:11px; font-weight:700; letter-spacing:1.4px; color:#9C3957; text-transform:uppercase; } .nb-sheet-doc .id{ font-size:24px; font-weight:800; letter-spacing:-.5px; margin-top:2px; } .nb-sheet-doc .st{ display:inline-block; margin-top:6px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; background:#E5F1E8; color:#2F5A46; } .nb-sheet-doc .st.pending{ background:#FCE8EE; color:#9C3957; } .nb-sheet-info{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:18px 0 22px; border:1px solid #E6E7EB; border-radius:10px; overflow:hidden; } .nb-sheet-info div{ padding:10px 12px; border-right:1px solid #E6E7EB; border-bottom:1px solid #E6E7EB; } .nb-sheet-info div:nth-child(4n){ border-right:none; } .nb-sheet-info div:nth-last-child(-n+4){ border-bottom:none; } .nb-sheet-info span{ display:block; font-size:10.5px; font-weight:600; color:#56545C; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; } .nb-sheet-info b{ font-size:13px; } .nb-sheet h4{ font-size:11.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#56545C; margin:20px 0 8px; } .nb-sheet table{ width:100%; border-collapse:collapse; } .nb-sheet th{ text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#56545C; background:#F4F5F7; padding:9px 10px; border-bottom:1px solid #E6E7EB; } .nb-sheet td{ padding:10px; border-bottom:1px solid #EEF0F2; vertical-align:top; } .nb-sheet td.num, .nb-sheet th.num{ text-align:right; font-variant-numeric:tabular-nums; } .nb-sheet tfoot td{ font-weight:800; border-bottom:none; border-top:2px solid #16141A; } .nb-sheet-spec{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; } .nb-sheet-spec div{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed #E1E2E7; } .nb-sheet-spec span{ color:#56545C; } .nb-sheet-sign{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; } .nb-sheet-sign div{ border-top:1px solid #16141A; padding-top:6px; font-size:11.5px; color:#56545C; } .nb-sheet-sign b{ display:block; color:#16141A; font-size:12px; margin-bottom:2px; } .nb-sheet-foot{ display:flex; justify-content:space-between; margin-top:24px; font-size:10.5px; color:#8A8890; } .nb-sheet-draft{ margin-bottom:14px; padding:9px 12px; border-radius:10px; background:#FCE8EE; color:#9C3957; font-weight:600; font-size:12px; } .nb-overlay{ position:fixed; inset:0; z-index:800; background:rgba(22,20,26,.55); display:flex; flex-direction:column; align-items:center; overflow:auto; padding:24px 16px 40px; animation:nbFade .2s ease; } @keyframes nbFade{ from{ opacity:0; } to{ opacity:1; } } .nb-overlay-bar{ width:100%; max-width:820px; display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; color:#fff; font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; } .nb-overlay-bar .t{ font-weight:700; font-size:14px; } .nb-overlay-bar .b{ display:flex; gap:8px; } .nb-overlay-bar button{ font:inherit; font-size:13px; font-weight:600; height:38px; padding:0 14px; border-radius:10px; border:none; cursor:pointer; background:#fff; color:#16141A; } .nb-overlay-bar button.close{ background:rgba(255,255,255,.14); color:#fff; } .nb-overlay .nb-sheet{ width:100%; margin:0; border:none; border-radius:4px; box-shadow:0 20px 50px rgba(0,0,0,.35); min-height:1060px; } .nb-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:900; background:#16141A; color:#fff; font:600 13px/1.4 'Plus Jakarta Sans','Segoe UI',sans-serif; padding:12px 16px; border-radius:12px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); max-width:min(520px, calc(100vw - 32px)); animation:nbFade .2s ease; } #nbPrintRoot{ display:none; } @media print{ body.nb-print > *:not(#nbPrintRoot){ display:none !important; } body.nb-print{ overflow:visible !important; height:auto !important; background:#fff !important; } body.nb-print #nbPrintRoot{ display:block !important; } body.nb-print #nbPrintRoot .nb-sheet{ border:none; box-shadow:none; border-radius:0; max-width:none; margin:0; padding:0; min-height:0; } @page{ size:A4; margin:14mm; } } /* rev 4 fixes: colours rewritten by the page's own entrance animation use the rgb() form */ html[data-opt="2"] .view [style*="background: rgb(185, 138, 74)"]{ background:var(--cut) !important; } html[data-opt="2"] .view [style*="rgb(185, 138, 74) 0px 0px 0px 2px"]{ box-shadow:0 0 0 2px var(--cut) !important; } html[data-opt="2"] #app .filter-bar select{ flex-shrink:0; } html[data-opt="2"] #app .filter-bar select{ padding-right:44px; background-position:right 16px center; } /* ========================================================================================== REVISION 5 (owner review of screens 7–25, 28 Sep 2026) - Cutting colour: soft mauve (from the page-header gradient) instead of blue - Every main page uses the same header: the soft gradient header card - Edit order, New order, Suppliers (main, list, new, edit), Delivery, Production dashboard: richer layouts - Reports: current layout (segmented tabs) in the new colours ========================================================================================== */ html[data-opt="2"]{ --cut:#4A8499; --cut-soft:#E7F1F4; --cut-border:#CFE2E8; } html[data-opt="2"] .view [style*="color:#8C6A1E"]{ color:#2F6F86 !important; } html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card{ background:linear-gradient(160deg, var(--card-soft) 0%, #FFFFFF 78%) !important; } html[data-opt="2"] #ordersGrid .order-card[style*="--card-accent:#B98A4A"]{ background:linear-gradient(135deg,#FCEEF2 0%,#E7F1F4 45%,#FFFFFF 85%) !important; } html[data-opt="2"] .view:is(:has(#sampleGrid), :has(#ordersGrid)) .kpi-grid > :nth-child(2) .kpi-icon{ background:var(--cut-soft) !important; color:#2F6F86 !important; } @keyframes nbPulseCut{ 0%,100%{ box-shadow:0 0 0 0 rgba(74,132,153,.5); } 50%{ box-shadow:0 0 0 7px rgba(74,132,153,0); } } /* ---- One header format on every main page ---- */ html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header){ display:flex !important; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; background:linear-gradient(120deg,#FCEEF2 0%,#F1F6F8 55%,#EEF3F6 100%) !important; padding:20px 24px !important; border-radius:18px; margin-bottom:22px; border:1px solid #F1E3E8; box-shadow:none; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) h1{ font-size:22px !important; font-weight:800; letter-spacing:-.4px; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) .date{ font-size:12.5px; margin-top:3px; color:var(--text-muted); } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) .login-btn{ width:auto; height:42px; padding:0 18px !important; margin:0; } /* ---- Shared pieces for the richer forms ---- */ html[data-opt="2"] .nb-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; } html[data-opt="2"] .nb-layout > .nb-side{ position:sticky; top:70px; } @media (max-width:1100px){ html[data-opt="2"] .nb-layout{ grid-template-columns:1fr; } html[data-opt="2"] .nb-layout > .nb-side{ position:static; } } html[data-opt="2"] .nb-sec{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px 24px; margin-bottom:16px; } html[data-opt="2"] .nb-sec-h{ display:flex; align-items:center; gap:12px; margin-bottom:18px; } html[data-opt="2"] .nb-step{ width:30px; height:30px; border-radius:10px; background:var(--accent-soft); color:var(--accent-dk); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } html[data-opt="2"] .nb-step svg{ width:16px; height:16px; } html[data-opt="2"] .nb-sec-t{ font-size:15px; font-weight:700; } html[data-opt="2"] .nb-sec-s{ font-size:12.5px; color:var(--text-muted); margin-top:1px; } html[data-opt="2"] .nb-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } html[data-opt="2"] .nb-grid2 .nb-span2{ grid-column:1 / -1; } @media (max-width:700px){ html[data-opt="2"] .nb-grid2{ grid-template-columns:1fr; } } html[data-opt="2"] .nb-suffix{ position:relative; } html[data-opt="2"] .nb-suffix span{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12.5px; color:var(--text-muted); font-weight:600; } html[data-opt="2"] .nb-suffix input{ padding-right:48px !important; } html[data-opt="2"] .nb-locked{ position:relative; } html[data-opt="2"] .nb-locked svg{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-muted); } html[data-opt="2"] #app .nb-locked input{ background-color:#F6F7F9 !important; color:var(--text-muted); } html[data-opt="2"] .nb-hint{ font-size:12px; color:var(--text-muted); margin-top:6px; } html[data-opt="2"] .nb-note{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:#F1F6F8; color:#2D5566; font-size:12.5px; line-height:1.5; } html[data-opt="2"] .nb-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; } html[data-opt="2"] .nb-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; } html[data-opt="2"] .nb-actions .login-btn{ width:auto; min-width:130px; height:44px; padding:0 20px !important; margin:0; } html[data-opt="2"] .nb-side{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:20px 22px; } html[data-opt="2"] .nb-side h3{ font-size:14px; font-weight:700; margin-bottom:12px; } html[data-opt="2"] .nb-kv{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #F0F1F3; font-size:13px; } html[data-opt="2"] .nb-kv span{ color:var(--text-muted); } html[data-opt="2"] .nb-kv b{ text-align:right; font-weight:600; } html[data-opt="2"] .nb-total{ margin:14px 0 4px; padding:14px 16px; border-radius:14px; background:linear-gradient(120deg,#FCEEF2,#E7F1F4); } html[data-opt="2"] .nb-total span{ display:block; font-size:12px; color:var(--text-muted); } html[data-opt="2"] .nb-total b{ font-size:22px; font-weight:800; letter-spacing:-.4px; } html[data-opt="2"] .nb-side .login-btn{ height:44px; margin-top:10px; } html[data-opt="2"] .nb-chips{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; } @media (max-width:900px){ html[data-opt="2"] .nb-chips{ grid-template-columns:repeat(2, minmax(0,1fr)); } } html[data-opt="2"] .nb-chip{ position:relative; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; cursor:pointer; background:#fff; font-size:13px; font-weight:600; transition:border-color .2s, background .2s; } html[data-opt="2"] .nb-chip input{ position:absolute; opacity:0; pointer-events:none; } html[data-opt="2"] .nb-chip .ci{ width:32px; height:32px; border-radius:10px; background:#F4F5F7; color:var(--text-muted); display:flex; align-items:center; justify-content:center; } html[data-opt="2"] .nb-chip .ci svg{ width:16px; height:16px; } html[data-opt="2"] .nb-chip .tick{ margin-left:auto; width:18px; height:18px; border-radius:6px; border:1.5px solid #CFD1D8; } html[data-opt="2"] .nb-chip:has(input:checked){ border-color:var(--accent); background:#FFF7F9; } html[data-opt="2"] .nb-chip:has(input:checked) .ci{ background:var(--accent-soft); color:var(--accent-dk); } html[data-opt="2"] .nb-chip:has(input:checked) .tick{ background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; border-color:var(--accent); } html[data-opt="2"] .nb-chip:has(input:disabled){ cursor:default; } html[data-opt="2"] .nb-sum-empty{ color:var(--text-muted); font-weight:400 !important; } /* ---- Suppliers ---- */ html[data-opt="2"] .card:has(> .stat-grid) > h2{ font-size:15px !important; margin-bottom:14px; } html[data-opt="2"] .card:has(> .stat-grid) .stat-card{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); box-shadow:none; background:#FCFCFD; } html[data-opt="2"] .card:has(> .stat-grid) .stat-card::before{ content:''; width:38px; height:38px; border-radius:11px; flex-shrink:0; background-position:center; background-repeat:no-repeat; background-size:18px; } html[data-opt="2"] .card:has(> .stat-grid) .stat-card:nth-child(1)::before{ background-color:#FCE8EE; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C3957' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E"); } html[data-opt="2"] .card:has(> .stat-grid) .stat-card:nth-child(2)::before{ background-color:#E7F1F4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cline x1='20' y1='4' x2='8.12' y2='15.88'/%3E%3Cline x1='14.47' y1='14.48' x2='20' y2='20'/%3E%3Cline x1='8.12' y1='8.12' x2='12' y2='12'/%3E%3C/svg%3E"); } html[data-opt="2"] .card:has(> .stat-grid) .stat-card:nth-child(3)::before{ background-color:#E6F2F0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3C/svg%3E"); } html[data-opt="2"] .card:has(> .stat-grid) .stat-card:nth-child(4)::before{ background-color:#E5F1E8; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6B4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6L16 3l-4 2-4-2-4.8 1.6L2 10l3 1v10h14V11l3-1z'/%3E%3C/svg%3E"); } html[data-opt="2"] .card:has(> .stat-grid) .stat-card .lbl{ order:2; font-size:12.5px; color:var(--text-muted); font-weight:600; text-transform:none; letter-spacing:0; } html[data-opt="2"] .card:has(> .stat-grid) .stat-card .num{ order:1; font-size:22px !important; margin:0 6px 0 0 !important; } html[data-opt="2"] #suppliersDrillArea > .card:has(.donut-wrap){ display:grid; grid-template-columns:230px 1fr; column-gap:32px; align-items:center; } html[data-opt="2"] #suppliersDrillArea > .card:has(.donut-wrap) > h2{ grid-column:1 / -1; } html[data-opt="2"] #suppliersDrillArea > .card:has(.donut-wrap) > .donut-wrap{ grid-column:1; grid-row:2 / span 30; padding:0; } html[data-opt="2"] #suppliersDrillArea > .card:has(.donut-wrap) > .donut-legend-row{ grid-column:2; } html[data-opt="2"] .nb-sup-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } @media (max-width:1000px){ html[data-opt="2"] .nb-sup-grid{ grid-template-columns:1fr; } } html[data-opt="2"] .nb-sup{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px 20px; transition:box-shadow .25s, transform .25s var(--o2-ease); } html[data-opt="2"] .nb-sup:hover{ box-shadow:0 14px 28px -16px rgba(22,20,26,.25); transform:translateY(-2px); } html[data-opt="2"] .nb-sup-top{ display:flex; gap:12px; align-items:center; } html[data-opt="2"] .nb-av{ width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,#FCE8EE,#E7F1F4); color:var(--accent-dk); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } html[data-opt="2"] .nb-sup-name{ font-size:15px; font-weight:700; } html[data-opt="2"] .nb-sup-id{ font-size:12.5px; color:var(--text-muted); margin-top:2px; } html[data-opt="2"] .nb-sup-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; } html[data-opt="2"] .nb-sup-chips span{ font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; background:#F4F5F7; color:var(--text); } html[data-opt="2"] .nb-sup-chips span.c1{ background:#FCE8EE; color:#9C3957; } html[data-opt="2"] .nb-sup-chips span.c2{ background:#E7F1F4; color:#2F6F86; } html[data-opt="2"] .nb-sup-chips span.c3{ background:#E6F2F0; color:#3F7A73; } html[data-opt="2"] .nb-sup-chips span.c4{ background:#E5F1E8; color:#3D6B4C; } html[data-opt="2"] .nb-sup-meta{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; font-size:12.5px; padding-top:12px; border-top:1px solid #F0F1F3; } html[data-opt="2"] .nb-sup-meta div{ display:flex; gap:8px; align-items:center; min-width:0; } html[data-opt="2"] .nb-sup-meta svg{ width:14px; height:14px; color:var(--text-muted); flex-shrink:0; } html[data-opt="2"] .nb-sup-meta span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html[data-opt="2"] .nb-sup-btns{ display:flex; gap:8px; margin-left:auto; } html[data-opt="2"] .nb-sup-btns button{ font:inherit; font-size:12.5px; font-weight:600; height:34px; padding:0 12px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:6px; } html[data-opt="2"] .nb-sup-btns button svg{ width:14px; height:14px; } html[data-opt="2"] .nb-sup-btns button:hover{ border-color:var(--accent); } html[data-opt="2"] .nb-sup-btns button.del{ color:var(--loss); } html[data-opt="2"] .nb-sup-btns button.del:hover{ border-color:var(--loss); } html[data-opt="2"] .nb-crumb{ font-size:12.5px; margin-bottom:10px; } html[data-opt="2"] .nb-crumb a{ color:var(--accent-dk); cursor:pointer; } html[data-opt="2"] .nb-count{ font-size:12.5px; color:var(--text-muted); margin-bottom:12px; } /* ---- Delivery ---- */ html[data-opt="2"] .view:has(#packingPendingBody) .kpi-grid + .card > h2{ display:flex; align-items:center; gap:12px; } html[data-opt="2"] .view:has(#packingPendingBody) :is(.kpi-grid + .card > h2, .list-row > div:first-child)::before{ content:''; width:38px; height:38px; border-radius:12px; flex-shrink:0; background-position:center; background-repeat:no-repeat; background-size:18px; } html[data-opt="2"] .view:has(#packingPendingBody) .kpi-grid + .card > h2::before{ background-color:#E5F1E8; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6B4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); } html[data-opt="2"] .view:has(#packingPendingBody) .kpi-grid + .card > p:last-child{ margin-top:14px !important; padding:22px; border:1px dashed #DADCE2; border-radius:14px; background:#FAFAFB; text-align:center; font-size:13px !important; } html[data-opt="2"] .view:has(#packingPendingBody) .card:has(> .list-row){ padding:0 !important; } html[data-opt="2"] .view:has(#packingPendingBody) .list-row{ border:none; border-radius:0; margin:0; padding:18px 22px; } html[data-opt="2"] .view:has(#packingPendingBody) .list-row > div:first-child{ display:flex; align-items:center; gap:14px; } html[data-opt="2"] .view:has(#packingPendingBody) .list-row[onclick*="packingPending"] > div:first-child::before{ background-color:#E6F2F0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3C/svg%3E"); } html[data-opt="2"] .view:has(#packingPendingBody) .list-row[onclick*="deliveryHistory"] > div:first-child::before{ background-color:#FCE8EE; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C3957' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); } html[data-opt="2"] .view:has(#packingPendingBody) .list-row .rt{ font-size:15px; font-weight:700; } html[data-opt="2"] .view:has(#packingPendingBody) .list-row .chev{ font-size:12.5px; font-weight:600; color:var(--accent-dk); background:var(--accent-soft); padding:6px 12px; border-radius:999px; } html[data-opt="2"] .view:has(#packingPendingBody) :is(#packingPendingBody, #deliveryHistoryBody){ padding:0 22px 18px !important; border-top:1px solid #F0F1F3; } html[data-opt="2"] .view:has(#packingPendingBody) :is(#packingPendingBody, #deliveryHistoryBody) .order-card{ border:1px solid #F0F1F3; border-radius:14px; margin-top:12px; } /* ---- Reports: current layout in the new colours ---- */ html[data-opt="2"] .view:has(.bar-chart) .stage-tabs{ display:inline-flex; gap:2px; padding:4px; background:#ECEEF1; border-radius:12px; border-bottom:none; margin:0 10px 16px 0; } html[data-opt="2"] .view:has(.bar-chart) .stage-tab{ padding:8px 18px; border-radius:9px; font-size:13px; box-shadow:none; } html[data-opt="2"] .view:has(.bar-chart) .stage-tab.active{ background:#fff; color:var(--accent-dk); box-shadow:0 1px 2px rgba(22,20,26,.06), 0 4px 10px -4px rgba(22,20,26,.18); } html[data-opt="2"] .view:has(.bar-chart) .list-row{ border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; background:#fff; } html[data-opt="2"] .view:has(.bar-chart) .list-row:hover{ border-color:var(--accent); background:#FFF7F9; } html[data-opt="2"] .view:has(.bar-chart) .bar-chart{ height:200px; gap:18px; padding:14px 8px 0; border-bottom:1px solid #EEF0F2; } html[data-opt="2"] .view:has(.bar-chart) .bar-col .bv{ max-width:44px; border-radius:8px 8px 3px 3px; } html[data-opt="2"] .view:has(.bar-chart) .bar-col .bl{ font-size:12px; color:var(--text-muted); margin-top:8px; line-height:1.4; } /* ---- Production dashboard ---- */ html[data-opt="2"] .pipe-row{ gap:16px; margin-bottom:14px; } html[data-opt="2"] .pipe-label{ width:84px; font-size:13px; font-weight:600; color:var(--text); } html[data-opt="2"] .pipe-track{ height:12px; background:#EEF0F2; border-radius:8px; } html[data-opt="2"] .pipe-fill{ border-radius:8px; } html[data-opt="2"] .card > .pipe-row:nth-child(2) .pipe-fill{ background:linear-gradient(90deg,#9CC3D0,#4A8499); } html[data-opt="2"] .card > .pipe-row:nth-child(3) .pipe-fill{ background:linear-gradient(90deg,#8FC2BB,#4E8A83); } html[data-opt="2"] .card > .pipe-row:nth-child(4) .pipe-fill{ background:linear-gradient(90deg,#9CC9C3,#5A9A92); } html[data-opt="2"] .card > .pipe-row:nth-child(5) .pipe-fill{ background:linear-gradient(90deg,#A7CFC8,#63A39A); } html[data-opt="2"] .card > .pipe-row:nth-child(6) .pipe-fill{ background:linear-gradient(90deg,#9DCBAE,#3D8B5F); } html[data-opt="2"] .pipe-count{ width:34px; font-size:15px; font-weight:800; } html[data-opt="2"] .view:has(.prod-fill) .card:has(> .list-row){ padding:22px 24px; } html[data-opt="2"] .view:has(.prod-fill) .list-row{ border:1px solid var(--border); border-radius:14px; padding:14px 16px; justify-content:flex-start; gap:14px; } html[data-opt="2"] .view:has(.prod-fill) .list-row .chev{ margin-left:auto; } html[data-opt="2"] .view:has(.prod-fill) .list-row:hover{ border-color:var(--accent); background:#FFF7F9; } html[data-opt="2"] .view:has(.prod-fill) .list-row::before{ content:''; width:40px; height:40px; border-radius:12px; flex-shrink:0; background-position:center; background-repeat:no-repeat; background-size:18px; background-color:#F4F5F7; } html[data-opt="2"] .view:has(.prod-fill) .list-row[onclick*="prod-cutting"]::before{ background-color:#E7F1F4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cline x1='20' y1='4' x2='8.12' y2='15.88'/%3E%3Cline x1='14.47' y1='14.48' x2='20' y2='20'/%3E%3Cline x1='8.12' y1='8.12' x2='12' y2='12'/%3E%3C/svg%3E"); } html[data-opt="2"] .view:has(.prod-fill) .list-row[onclick*="prod-sewing"]::before{ background-color:#E6F2F0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l6-6 3 3-6 6M9 11l-4 4M9 11l3 3M5 15l4 4M5 15l-1 5 5-1'/%3E%3C/svg%3E"); } html[data-opt="2"] .view:has(.prod-fill) .list-row[onclick*="prod-iron"]::before{ background-color:#E6F2F0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18v-5a5 5 0 0 0-5-5H10a7 7 0 0 0-7 7z'/%3E%3Cpath d='M9 8V6.5A1.5 1.5 0 0 1 10.5 5H17'/%3E%3C/svg%3E"); } html[data-opt="2"] .view:has(.prod-fill) .list-row[onclick*="prod-qc"]::before{ background-color:#E6F2F0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16' y2='16'/%3E%3Cpolyline points='8 11 10.3 13.3 14 9.5'/%3E%3C/svg%3E"); } html[data-opt="2"] .view:has(.prod-fill) .list-row[onclick*="prod-packing"]::before{ background-color:#E5F1E8; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6B4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3C/svg%3E"); } /* rev 5 fixes */ html[data-opt="2"] #app .filter-bar select, html[data-opt="2"] #app .field select{ padding-right:44px !important; background-position:right 16px center; } html[data-opt="2"] .card > .stat-grid{ margin-bottom:0; } html[data-opt="2"] .kpi-num{ white-space:nowrap; } html[data-opt="2"] .view:has(#packingPendingBody) .list-row > div:first-child{ display:grid; grid-template-columns:38px 1fr; column-gap:14px; row-gap:2px; align-items:center; } html[data-opt="2"] .view:has(#packingPendingBody) .list-row > div:first-child::before{ grid-row:1 / span 2; } html[data-opt="2"] .view:has(#packingPendingBody) .list-row .rs{ margin-top:0; } html[data-opt="2"] .view:has(#packingPendingBody) .order-card{ grid-template-columns:minmax(220px,2fr) 110px 120px 240px; } html[data-opt="2"] .order-card .oc-meta span{ white-space:nowrap; } /* ========================================================================================== REVISION 6 (owner review of screens 26–35, 28 Sep 2026) Production sections (Cutting/Sewing/Iron/QC/Packing) and the Accounts department: dashboard, receivable, payable, P&L (both tabs), banking — more professional layouts. ========================================================================================== */ html[data-opt="2"] .nb-2col{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:18px; align-items:start; } html[data-opt="2"] .nb-2eq{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } @media (max-width:1100px){ html[data-opt="2"] :is(.nb-2col, .nb-2eq){ grid-template-columns:1fr; } } html[data-opt="2"] .nb-card{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:20px 22px; margin-bottom:18px; } html[data-opt="2"] .nb-card-h{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; } html[data-opt="2"] .nb-card-h h3{ font-size:15px; font-weight:700; } html[data-opt="2"] .nb-card-h .sub{ font-size:12.5px; color:var(--text-muted); } html[data-opt="2"] .nb-pill{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:#F4F5F7; color:var(--text-muted); white-space:nowrap; } html[data-opt="2"] .nb-pill.ok{ background:#E5F1E8; color:#2F6A45; } html[data-opt="2"] .nb-pill.warn{ background:#FCE8EE; color:#9C3957; } html[data-opt="2"] .nb-pill.info{ background:#E7F1F4; color:#2F6F86; } html[data-opt="2"] .nb-hbadge{ display:flex; align-items:center; gap:14px; } html[data-opt="2"] .nb-hicon{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fff; box-shadow:0 1px 2px rgba(22,20,26,.06); } html[data-opt="2"] .nb-hicon svg{ width:22px; height:22px; } /* stage flow strip in the section header */ html[data-opt="2"] .nb-flow{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } html[data-opt="2"] .nb-flow span{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.75); color:var(--text-muted); border:1px solid rgba(22,20,26,.06); } html[data-opt="2"] .nb-flow span.on{ background:var(--st); color:#fff; border-color:var(--st); } html[data-opt="2"] .nb-flow i{ width:10px; height:1px; background:#CFD1D8; } /* running-orders rows */ html[data-opt="2"] .nb-orow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; align-items:center; padding:16px 0; border-top:1px solid #F0F1F3; } html[data-opt="2"] .nb-orow:first-of-type{ border-top:none; padding-top:4px; } html[data-opt="2"] .nb-orow-id{ font-size:14px; font-weight:800; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } html[data-opt="2"] .nb-orow-sub{ font-size:12.5px; color:var(--text-muted); margin-top:3px; } html[data-opt="2"] .nb-ready{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12.5px; font-weight:600; } html[data-opt="2"] .nb-ready.ok{ color:#2F6A45; } html[data-opt="2"] .nb-ready.no{ color:var(--text-muted); } html[data-opt="2"] .nb-ready .bar{ width:120px; height:6px; border-radius:6px; background:#EEF0F2; overflow:hidden; } html[data-opt="2"] .nb-ready .bar i{ display:block; height:100%; background:var(--st); border-radius:6px; } html[data-opt="2"] .nb-approve{ font:inherit; font-size:12.5px; font-weight:700; height:38px; padding:0 16px; border-radius:10px; border:none; white-space:nowrap; } html[data-opt="2"] .nb-approve.ready{ background:#9C3957; color:#fff; cursor:pointer; } html[data-opt="2"] .nb-approve.ready:hover{ background:#2F6A45; } html[data-opt="2"] .nb-approve.disabled{ background:#F1F2F4; color:#9A98A0; cursor:not-allowed; } /* tool tiles */ html[data-opt="2"] .nb-tiles{ display:grid; grid-template-columns:repeat(var(--cols,2), minmax(0,1fr)); gap:12px; } @media (max-width:900px){ html[data-opt="2"] .nb-tiles{ grid-template-columns:1fr; } } html[data-opt="2"] .nb-tile{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:#fff; cursor:pointer; transition:border-color .2s, background .2s, transform .25s var(--o2-ease); } html[data-opt="2"] .nb-tile:hover{ border-color:var(--accent); background:#FFF7F9; transform:translateY(-2px); } html[data-opt="2"] .nb-tile .ti{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--tb,#F4F5F7); color:var(--tc,var(--text)); } html[data-opt="2"] .nb-tile .ti svg{ width:18px; height:18px; } html[data-opt="2"] .nb-tile .tt{ font-size:13.5px; font-weight:700; } html[data-opt="2"] .nb-tile .td{ font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.45; } html[data-opt="2"] .nb-tile .tv{ font-size:13px; font-weight:700; margin-top:6px; } html[data-opt="2"] .nb-rule{ display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:12px; background:#E7F1F4; color:#24404C; font-size:11.5px; line-height:1.55; margin-top:14px; } html[data-opt="2"] .nb-rule svg{ width:19px; height:19px; flex-shrink:0; margin-top:-1px; } html[data-opt="2"] .nb-rule svg circle{ fill:#2F6F86; stroke:#2F6F86; } html[data-opt="2"] .nb-rule svg line{ stroke:#fff; stroke-width:2.6; } /* 21 Oct 2026: filled icon, white i */ /* compact summary grid (3 columns) */ html[data-opt="2"] .nb-sum3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } @media (max-width:900px){ html[data-opt="2"] .nb-sum3{ grid-template-columns:1fr 1fr; } } html[data-opt="2"] .nb-sum3 div{ padding:12px 14px; border-radius:12px; background:#F7F8FA; border:1px solid #F0F1F3; } html[data-opt="2"] .nb-sum3 span{ display:block; font-size:12px; color:var(--text-muted); } html[data-opt="2"] .nb-sum3 b{ display:block; font-size:16px; font-weight:800; margin-top:3px; letter-spacing:-.2px; } html[data-opt="2"] .nb-sum3 em{ font-style:normal; font-size:11.5px; font-weight:600; color:#2F6A45; margin-left:6px; } /* statements */ html[data-opt="2"] .nb-stmt{ width:100%; border-collapse:collapse; font-size:13px; } html[data-opt="2"] .nb-stmt td{ padding:10px 0; border-bottom:1px solid #F0F1F3; } html[data-opt="2"] .nb-stmt td.v{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; } html[data-opt="2"] .nb-stmt td.pct{ width:120px; padding-left:16px; } html[data-opt="2"] .nb-stmt td.pct i{ display:block; height:6px; border-radius:6px; background:linear-gradient(90deg,#E4B4C2,#C24F70); } html[data-opt="2"] .nb-stmt tr.sec td{ font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); padding-top:18px; border-bottom:1px solid #E6E7EB; } html[data-opt="2"] .nb-stmt tr.sub td{ color:var(--text-muted); padding-left:14px; } html[data-opt="2"] .nb-stmt tr.tot td{ font-weight:800; border-bottom:2px solid var(--text); } html[data-opt="2"] .nb-stmt tr.net td{ font-size:15px; font-weight:800; border-bottom:none; padding-top:14px; } html[data-opt="2"] .neg{ color:var(--loss) !important; } html[data-opt="2"] .pos{ color:#2F6A45 !important; } html[data-opt="2"] .nb-cmp{ display:grid; gap:10px; } html[data-opt="2"] .nb-cmp div{ display:grid; grid-template-columns:90px 1fr 130px; gap:12px; align-items:center; font-size:13px; } html[data-opt="2"] .nb-cmp .tr{ height:10px; border-radius:8px; background:#EEF0F2; overflow:hidden; } html[data-opt="2"] .nb-cmp .tr i{ display:block; height:100%; border-radius:8px; } html[data-opt="2"] .nb-cmp b{ text-align:right; font-variant-numeric:tabular-nums; } /* alerts */ html[data-opt="2"] .nb-alert{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:#FDF1F3; border:1px solid #F6D6DE; color:#7E2A45; font-size:13px; line-height:1.5; margin-bottom:10px; } html[data-opt="2"] .nb-alert.soft{ background:#F7F8FA; border-color:#EEF0F2; color:var(--text); } html[data-opt="2"] .nb-alert svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; } html[data-opt="2"] .nb-alert b{ font-weight:700; } /* toolbar / statement row */ html[data-opt="2"] .nb-toolbar{ display:grid; grid-template-columns:minmax(0,2fr) 170px 150px auto; gap:10px; align-items:end; } @media (max-width:900px){ html[data-opt="2"] .nb-toolbar{ grid-template-columns:1fr 1fr; } } html[data-opt="2"] .nb-toolbar .field{ margin-bottom:0 !important; } html[data-opt="2"] .nb-toolbar .login-btn{ width:auto; height:46px; padding:0 20px !important; margin:0; white-space:nowrap; } html[data-opt="2"] .nb-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:16px; } html[data-opt="2"] .nb-table th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); background:#F7F8FA; padding:10px 12px; border-bottom:1px solid #EEF0F2; } html[data-opt="2"] .nb-table th:first-child{ border-radius:10px 0 0 0; } html[data-opt="2"] .nb-table th:last-child{ border-radius:0 10px 0 0; } html[data-opt="2"] .nb-empty{ text-align:center; padding:26px 16px; color:var(--text-muted); font-size:13px; border:1px dashed #DADCE2; border-top:none; border-radius:0 0 12px 12px; } html[data-opt="2"] .nb-empty b{ display:block; color:var(--text); font-size:14px; margin-bottom:3px; } /* bank account cards */ html[data-opt="2"] .nb-banks{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } @media (max-width:900px){ html[data-opt="2"] .nb-banks{ grid-template-columns:1fr; } } html[data-opt="2"] .nb-bank{ border-radius:18px; padding:18px 20px; color:#fff; position:relative; overflow:hidden; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; } html[data-opt="2"] .nb-bank::after{ content:''; position:absolute; width:180px; height:180px; right:-50px; top:-70px; border-radius:50%; background:rgba(255,255,255,.1); } html[data-opt="2"] .nb-bank .bn{ font-size:14px; font-weight:700; } html[data-opt="2"] .nb-bank .ac{ font-size:12.5px; opacity:.8; margin-top:3px; letter-spacing:.5px; } html[data-opt="2"] .nb-bank .bb{ font-size:24px; font-weight:800; letter-spacing:-.4px; margin-top:14px; } html[data-opt="2"] .nb-bank .sh{ font-size:12px; opacity:.85; margin-top:4px; } /* segmented tabs used on P&L */ html[data-opt="2"] .nb-seg{ display:inline-flex; gap:2px; padding:4px; background:#ECEEF1; border-radius:12px; margin-bottom:18px; } html[data-opt="2"] .nb-seg button{ font:inherit; font-size:13px; font-weight:600; border:none; background:transparent; color:var(--text-muted); padding:9px 18px; border-radius:9px; cursor:pointer; } html[data-opt="2"] .nb-seg button.on{ background:#fff; color:var(--accent-dk); box-shadow:0 1px 2px rgba(22,20,26,.06), 0 4px 10px -4px rgba(22,20,26,.18); } /* rev 6 fixes: KPI cards share the width equally; money KPIs on Accounts pages use a slightly smaller number */ html[data-opt="2"] .kpi-grid > *{ min-width:0; } html[data-opt="2"] .kpi-card > div:last-child{ min-width:0; } html[data-opt="2"] .kpi-num{ overflow:hidden; text-overflow:ellipsis; } html[data-opt="2"] .kpi-grid.nb-money .kpi-num{ font-size:18.5px !important; } html[data-opt="2"] .nb-2eq .nb-stmt td.pct{ width:70px; } /* money KPIs: never cut an amount; small "AED" label, full number */ html[data-opt="2"] .kpi-num{ overflow:visible; text-overflow:clip; } html[data-opt="2"] .kpi-grid.nb-money .kpi-num{ font-size:20px !important; white-space:nowrap; } html[data-opt="2"] .kpi-num small.cur{ font-size:11px; font-weight:700; color:var(--text-muted); margin-right:4px; letter-spacing:.3px; vertical-align:2px; } /* ========================================================================================== REVISION 7 (owner review of screens 36–50, 29 Sep 2026) Inventory, HR and Sales rebuilt in the house style; modern visuals instead of donuts and row bars. Every screen: the sidebar's bottom line sits level with the page footer line, and the sidebar's top line sits level with the page's top bar line. ========================================================================================== */ /* ---- Lines level on every screen ---- */ html[data-opt="2"]{ --line:#E6E7EB; --bar-h:56px; --foot-h:52px; } html[data-opt="2"] .breadcrumb{ height:var(--bar-h); display:flex; align-items:center; padding:0 44px !important; border-bottom:1px solid var(--line); } html[data-opt="2"] .sidebar-brand{ height:var(--bar-h); padding:0 14px 0 18px !important; border-bottom:1px solid var(--line) !important; gap:10px; } html[data-opt="2"] .sidebar-brand .mark{ width:32px; height:32px; } html[data-opt="2"] .sidebar-brand .name{ font-size:12.5px; } html[data-opt="2"] .sidebar-brand .role{ font-size:10.5px; } html[data-opt="2"] .nb-rail-toggle{ width:28px; height:28px; } html[data-opt="2"].rail-collapsed .sidebar-brand{ flex-direction:row !important; justify-content:center; padding:0 !important; gap:0; } html[data-opt="2"].rail-collapsed .sidebar-brand .mark{ display:none; } html[data-opt="2"] .global-footer{ height:var(--foot-h); padding:0 44px !important; align-items:center; flex-wrap:nowrap; border-top:1px solid var(--line); } html[data-opt="2"] .sidebar-footer{ height:var(--foot-h); padding:0 14px 0 18px !important; border-top:1px solid var(--line) !important; flex-direction:row !important; } html[data-opt="2"] .sidebar-footer .avatar{ width:26px; height:26px; font-size:10.5px; } html[data-opt="2"] .sidebar-footer .uname{ font-size:12px; } html[data-opt="2"] .sidebar-footer .urole{ font-size:10.5px; } html[data-opt="2"] .sidebar-footer .logout-btn{ padding:5px; } html[data-opt="2"] .sidebar-footer .logout-btn .icon{ width:16px; height:16px; } html[data-opt="2"].rail-collapsed .sidebar-footer{ justify-content:center; gap:6px; padding:0 !important; } /* ---- Composition strip (replaces donut charts) ---- */ html[data-opt="2"] .nb-comp{ display:flex; height:12px; border-radius:999px; overflow:hidden; gap:3px; } html[data-opt="2"] .nb-comp i{ display:block; height:100%; border-radius:3px; } html[data-opt="2"] .nb-legend{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:8px; margin-top:14px; } html[data-opt="2"] .nb-legend div{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:12px; background:#F7F8FA; font-size:12.5px; min-width:0; } html[data-opt="2"] .nb-legend .dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; } html[data-opt="2"] .nb-legend span:not(.dot){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html[data-opt="2"] .nb-legend b{ margin-left:auto; font-weight:800; } html[data-opt="2"] .nb-legend em{ font-style:normal; color:var(--text-muted); font-size:11.5px; font-weight:600; } /* ---- Stock health tiles ---- */ html[data-opt="2"] .nb-health{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } html[data-opt="2"] .nb-health > div{ padding:14px 16px; border-radius:14px; border:1px solid; display:flex; align-items:center; gap:12px; } html[data-opt="2"] .nb-health .hi{ width:36px; height:36px; border-radius:11px; background:rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center; font-weight:800; } html[data-opt="2"] .nb-health span{ display:block; font-size:12px; font-weight:600; opacity:.9; } html[data-opt="2"] .nb-health b{ font-size:22px; font-weight:800; line-height:1.1; } html[data-opt="2"] .nb-health .low{ background:#FDF1F3; border-color:#F6D6DE; color:#9C3957; } html[data-opt="2"] .nb-health .med{ background:#E7F1F4; border-color:#CFE2E8; color:#2F6F86; } html[data-opt="2"] .nb-health .high{ background:#EEF6F0; border-color:#D6E9DC; color:#2F6A45; } /* ---- Category tiles (stay inside their card) ---- */ html[data-opt="2"] .nb-cats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } html[data-opt="2"] .nb-cat{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:4px 12px; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:#fff; cursor:pointer; transition:border-color .2s, transform .25s var(--o2-ease); min-width:0; } html[data-opt="2"] .nb-cat:hover{ border-color:var(--accent); transform:translateY(-2px); } html[data-opt="2"] .nb-cat .ci{ grid-row:span 2; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--cb); color:var(--cc); } html[data-opt="2"] .nb-cat .ci svg{ width:18px; height:18px; } html[data-opt="2"] .nb-cat .ct{ font-size:14px; font-weight:700; } html[data-opt="2"] .nb-cat .cd{ font-size:12px; color:var(--text-muted); display:flex; gap:10px; flex-wrap:wrap; } html[data-opt="2"] .nb-cat .cd b{ color:var(--text); } /* ---- Data tables ---- */ html[data-opt="2"] .nb-tablewrap{ overflow-x:auto; margin-top:4px; } html[data-opt="2"] .nb-table td{ padding:12px; border-bottom:1px solid #F0F1F3; font-size:13px; vertical-align:middle; } html[data-opt="2"] .nb-table tr:last-child td{ border-bottom:none; } html[data-opt="2"] .nb-table tbody tr:hover td{ background:#FAFAFB; } html[data-opt="2"] .nb-table td.r, html[data-opt="2"] .nb-table th.r{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } html[data-opt="2"] .nb-table .muted{ color:var(--text-muted); font-size:12px; } html[data-opt="2"] .nb-person{ display:flex; align-items:center; gap:10px; min-width:0; } html[data-opt="2"] .nb-avs{ width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,#FCE8EE,#E7F1F4); color:var(--accent-dk); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } html[data-opt="2"] .nb-person b{ font-weight:700; } html[data-opt="2"] .nb-person .muted{ display:block; } html[data-opt="2"] .nb-chipset{ display:flex; flex-wrap:wrap; gap:5px; } html[data-opt="2"] .nb-chipset span{ font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:#F4F5F7; } html[data-opt="2"] .nb-chipset span.low{ background:#FDF1F3; color:#9C3957; } html[data-opt="2"] .nb-chipset span.high{ background:#EEF6F0; color:#2F6A45; } html[data-opt="2"] .nb-chipset span.med{ background:#E7F1F4; color:#2F6F86; } /* ---- Flow cards (sales pipeline, invoice pipeline) ---- */ html[data-opt="2"] .nb-flowcards{ display:flex; align-items:stretch; } html[data-opt="2"] .nb-fc{ flex:1; min-width:0; border:1px solid var(--border); border-radius:16px; padding:16px; background:#fff; } html[data-opt="2"] .nb-fc .fi{ width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--fb); color:var(--fcol); margin-bottom:12px; } html[data-opt="2"] .nb-fc .fi svg{ width:17px; height:17px; } html[data-opt="2"] .nb-fc b{ display:block; font-size:24px; font-weight:800; letter-spacing:-.4px; line-height:1.1; } html[data-opt="2"] .nb-fc span{ display:block; font-size:12.5px; color:var(--text-muted); margin-top:3px; } html[data-opt="2"] .nb-fx{ width:52px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--text-muted); font-size:11.5px; font-weight:700; } html[data-opt="2"] .nb-fx svg{ width:16px; height:16px; } @media (max-width:1000px){ html[data-opt="2"] .nb-flowcards{ flex-direction:column; } html[data-opt="2"] .nb-fx{ width:auto; flex-direction:row; padding:6px 0; } } /* ---- Timeline ---- */ html[data-opt="2"] .nb-tl .it{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid #F0F1F3; } html[data-opt="2"] .nb-tl .it:first-child{ border-top:none; padding-top:2px; } html[data-opt="2"] .nb-tl .ii{ width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--ib,#F4F5F7); color:var(--ic,var(--text)); } html[data-opt="2"] .nb-tl .ii svg{ width:16px; height:16px; } html[data-opt="2"] .nb-tl .t{ font-size:13px; font-weight:600; } html[data-opt="2"] .nb-tl .s{ font-size:12px; color:var(--text-muted); margin-top:2px; } html[data-opt="2"] .nb-tl .d{ font-size:12px; color:var(--text-muted); white-space:nowrap; } /* ---- Ranked list (replaces row bars) ---- */ html[data-opt="2"] .nb-rank .it{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #F0F1F3; font-size:13px; } html[data-opt="2"] .nb-rank .it:first-child{ border-top:none; padding-top:2px; } html[data-opt="2"] .nb-rank .n{ width:26px; height:26px; border-radius:8px; background:var(--accent-soft); color:var(--accent-dk); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } html[data-opt="2"] .nb-rank .v{ margin-left:auto; font-weight:800; } html[data-opt="2"] .nb-rank .p{ font-size:11.5px; font-weight:700; color:var(--text-muted); background:#F4F5F7; padding:3px 8px; border-radius:999px; } /* ---- Big empty state ---- */ html[data-opt="2"] .nb-bigempty{ text-align:center; padding:30px 20px 26px; border:1px dashed #DADCE2; border-radius:16px; background:#FAFAFB; } html[data-opt="2"] .nb-bigempty .ei{ width:52px; height:52px; border-radius:16px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-dk); } html[data-opt="2"] .nb-bigempty .ei svg{ width:22px; height:22px; } html[data-opt="2"] .nb-bigempty b{ display:block; font-size:15px; } html[data-opt="2"] .nb-bigempty p{ font-size:13px; color:var(--text-muted); margin:6px auto 14px; max-width:460px; line-height:1.55; } html[data-opt="2"] .nb-bigempty .login-btn{ width:auto; height:42px; padding:0 18px !important; margin:0; } /* ---- Compact buttons row and small helpers ---- */ html[data-opt="2"] .nb-btnrow{ display:flex; gap:8px; flex-wrap:wrap; } html[data-opt="2"] .nb-btnrow .login-btn{ width:auto; height:40px; padding:0 14px !important; margin:0; font-size:12.5px; } html[data-opt="2"] .nb-mini{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:10px; } html[data-opt="2"] .nb-mini div{ text-align:center; padding:8px 6px; border-radius:10px; background:#F7F8FA; } html[data-opt="2"] .nb-mini b{ display:block; font-size:15px; font-weight:800; } html[data-opt="2"] .nb-mini span{ font-size:11px; color:var(--text-muted); } html[data-opt="2"] .nb-docs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } @media (max-width:900px){ html[data-opt="2"] :is(.nb-docs, .nb-cats, .nb-health){ grid-template-columns:1fr; } } html[data-opt="2"] .nb-doc{ border:1px solid var(--border); border-radius:14px; padding:14px 16px; } html[data-opt="2"] .nb-doc-h{ display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:700; } html[data-opt="2"] .nb-hero{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:20px 22px; border-radius:18px; margin-bottom:18px; background:linear-gradient(120deg,#2B1F26 0%,#4A2C3A 60%,#6B3A4E 100%); color:#fff; } html[data-opt="2"] .nb-hero span{ font-size:12.5px; opacity:.75; } html[data-opt="2"] .nb-hero b{ display:block; font-size:28px; font-weight:800; letter-spacing:-.6px; margin-top:4px; } html[data-opt="2"] .nb-hero .hs{ display:flex; gap:22px; } html[data-opt="2"] .nb-hero .hs div b{ font-size:18px; } html[data-opt="2"] .nb-hero .login-btn{ background:#fff !important; color:#16141A !important; width:auto; height:42px; padding:0 18px !important; margin:0; } /* rev 7 fixes */ html[data-opt="2"] .breadcrumb{ gap:6px; } /* page footer stays pinned to the bottom of the window, level with the sidebar's bottom line */ html[data-opt="2"] .global-footer{ position:sticky; bottom:0; z-index:15; background:var(--bg); margin-top:auto; } html[data-opt="2"] .nb-doc .nb-chipset{ margin-top:10px; } html[data-opt="2"] .nb-doc .nb-chipset span{ background:#F7F8FA; color:var(--text-muted); font-weight:600; } html[data-opt="2"] .nb-doc .nb-chipset span b{ color:var(--text); margin-right:3px; } html[data-opt="2"] .nb-table td:first-child, html[data-opt="2"] .nb-table td:first-child .muted{ white-space:nowrap; } /* ========================================================================================== REVISION 8 (owner review of screens 40–55, 29 Sep 2026) Tidy equal-card grids, compact flow cards, no coloured left lines anywhere, and new layouts for Feedback, To-do, User accounts, Client portal and Backup. ========================================================================================== */ /* no coloured left lines anywhere */ html[data-opt="2"] .order-card:hover{ box-shadow:0 10px 24px -14px rgba(22,20,26,.25) !important; } html[data-opt="2"] .card[style*="border-left"]{ border-left:1px solid var(--border) !important; } /* equal-height card grids */ html[data-opt="2"] .nb-grid3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; align-items:stretch; margin-bottom:18px; } html[data-opt="2"] .nb-grid2e{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; align-items:stretch; margin-bottom:18px; } html[data-opt="2"] :is(.nb-grid3, .nb-grid2e) > .nb-card{ margin-bottom:0; height:100%; } @media (max-width:1100px){ html[data-opt="2"] .nb-grid3{ grid-template-columns:1fr 1fr; } } @media (max-width:800px){ html[data-opt="2"] :is(.nb-grid3, .nb-grid2e){ grid-template-columns:1fr; } } html[data-opt="2"] .nb-grid3 .nb-legend, html[data-opt="2"] .nb-grid2e .nb-legend{ grid-template-columns:1fr; } html[data-opt="2"] .nb-rowlist .it{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #F0F1F3; font-size:13px; min-width:0; } html[data-opt="2"] .nb-rowlist .it:first-child{ border-top:none; padding-top:2px; } html[data-opt="2"] .nb-rowlist .it .t{ font-weight:600; } html[data-opt="2"] .nb-rowlist .it .s{ font-size:12px; color:var(--text-muted); } html[data-opt="2"] .nb-rowlist .it .r{ margin-left:auto; text-align:right; white-space:nowrap; } html[data-opt="2"] .nb-tiles4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; } @media (max-width:1100px){ html[data-opt="2"] .nb-tiles4{ grid-template-columns:1fr 1fr; } } html[data-opt="2"] .nb-tiles4 .nb-tile{ height:100%; } /* compact flow cards (sales pipeline, invoice flow) */ html[data-opt="2"] .nb-fc{ display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:12px; align-items:center; padding:12px 14px; } html[data-opt="2"] .nb-fc .fi{ grid-row:span 2; margin:0; } html[data-opt="2"] .nb-fc b{ font-size:20px; } html[data-opt="2"] .nb-fc span{ margin-top:1px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-opt="2"] .nb-fx{ width:34px; } /* grouped action buttons (statements) */ html[data-opt="2"] .nb-actbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding-top:14px; margin-top:6px; border-top:1px solid #F0F1F3; } html[data-opt="2"] .nb-bgroup{ display:flex; align-items:center; gap:8px; } html[data-opt="2"] .nb-bgroup > span{ font-size:12px; font-weight:700; color:var(--text-muted); margin-right:2px; white-space:nowrap; } html[data-opt="2"] .nb-bgroup button{ font:inherit; font-size:12.5px; font-weight:600; height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } html[data-opt="2"] .nb-bgroup button svg{ width:14px; height:14px; } html[data-opt="2"] .nb-bgroup button:hover{ border-color:var(--accent); } html[data-opt="2"] .nb-bgroup button.primary{ background:#9C3957; color:#fff; border-color:#9C3957; } html[data-opt="2"] .nb-balance{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:4px; } html[data-opt="2"] .nb-balance div{ padding:12px 14px; border-radius:12px; background:#F7F8FA; } html[data-opt="2"] .nb-balance div.main{ background:linear-gradient(120deg,#FCEEF2,#E7F1F4); } html[data-opt="2"] .nb-balance span{ display:block; font-size:12px; color:var(--text-muted); } html[data-opt="2"] .nb-balance b{ display:block; font-size:18px; font-weight:800; margin-top:3px; } html[data-opt="2"] .nb-who{ display:flex; align-items:center; gap:10px; margin:6px 0 12px; font-size:13px; } /* checks panel (invoice "nothing missed") */ html[data-opt="2"] .nb-checks .it{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #F0F1F3; font-size:13px; } html[data-opt="2"] .nb-checks .it:first-child{ border-top:none; padding-top:2px; } html[data-opt="2"] .nb-checks .ok{ width:26px; height:26px; border-radius:8px; background:#EEF6F0; color:#2F6A45; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; } html[data-opt="2"] .nb-checks .warn{ width:26px; height:26px; border-radius:8px; background:#FDF1F3; color:#B3413C; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; } html[data-opt="2"] .nb-checks .info{ width:26px; height:26px; border-radius:8px; background:#E7F1F4; color:#2F6F86; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; } html[data-opt="2"] .nb-checks b{ margin-left:auto; } /* feedback */ html[data-opt="2"] .nb-stars{ color:#C24F70; letter-spacing:1px; font-size:14px; white-space:nowrap; } html[data-opt="2"] .nb-stars i{ color:#D9DAE0; font-style:normal; } html[data-opt="2"] .nb-senti{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:18px; } @media (max-width:1000px){ html[data-opt="2"] .nb-senti{ grid-template-columns:1fr; } } html[data-opt="2"] .nb-senti > div{ border-radius:18px; padding:18px 20px; border:1px solid; display:flex; flex-direction:column; gap:10px; } html[data-opt="2"] .nb-senti .good{ background:#F1F8F3; border-color:#D6E9DC; } html[data-opt="2"] .nb-senti .avg{ background:#F3F7F9; border-color:#CFE2E8; } html[data-opt="2"] .nb-senti .poor{ background:#FDF3F5; border-color:#F6D6DE; } html[data-opt="2"] .nb-senti .sh{ display:flex; align-items:center; justify-content:space-between; } html[data-opt="2"] .nb-senti .sh b{ font-size:15px; } html[data-opt="2"] .nb-senti .sh span{ font-size:26px; font-weight:800; } html[data-opt="2"] .nb-senti .good .sh{ color:#2F6A45; } html[data-opt="2"] .nb-senti .avg .sh{ color:#2F6F86; } html[data-opt="2"] .nb-senti .poor .sh{ color:#9C3957; } html[data-opt="2"] .nb-senti .sub{ font-size:12px; color:var(--text-muted); margin-top:-6px; } html[data-opt="2"] .nb-quote{ background:rgba(255,255,255,.8); border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.5; } html[data-opt="2"] .nb-quote .qm{ font-size:12px; color:var(--text-muted); margin-top:6px; } html[data-opt="2"] .nb-reply{ border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin-bottom:12px; } html[data-opt="2"] .nb-reply:last-child{ margin-bottom:0; } html[data-opt="2"] .nb-reply-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } html[data-opt="2"] .nb-reply textarea{ width:100%; min-height:64px; margin-top:12px; border:1px solid #E1E2E7; border-radius:12px; padding:10px 12px; font:inherit; font-size:13px; resize:vertical; } html[data-opt="2"] .nb-reply textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(194,79,112,.14); } /* to-do */ html[data-opt="2"] .nb-todo-bar{ display:flex; align-items:center; gap:8px; } html[data-opt="2"] .nb-todo-bar button.nav{ width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:16px; } html[data-opt="2"] .nb-todo-bar .day{ height:38px; padding:0 14px; border-radius:10px; border:1px solid var(--border); background:#fff; display:flex; align-items:center; font-weight:700; font-size:13px; } html[data-opt="2"] .nb-urgent{ border-radius:18px; padding:16px 18px; margin-bottom:18px; background:linear-gradient(120deg,#FDF1F3,#FBEFF6); border:1px solid #F6D6DE; } html[data-opt="2"] .nb-urgent-h{ display:flex; align-items:center; gap:10px; color:#9C3957; font-weight:800; font-size:14px; margin-bottom:10px; } html[data-opt="2"] .nb-urgent-h svg{ width:18px; height:18px; } html[data-opt="2"] .nb-urgent .nb-task{ background:rgba(255,255,255,.85); border-color:transparent; } html[data-opt="2"] .nb-deptchips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } html[data-opt="2"] .nb-deptchips button{ font:inherit; font-size:12.5px; font-weight:600; height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:8px; } html[data-opt="2"] .nb-deptchips button em{ font-style:normal; font-size:11.5px; font-weight:700; padding:1px 7px; border-radius:999px; background:#F4F5F7; color:var(--text-muted); } html[data-opt="2"] .nb-deptchips button.on{ background:#9C3957; color:#fff; border-color:#9C3957; } html[data-opt="2"] .nb-deptchips button.on em{ background:rgba(255,255,255,.2); color:#fff; } html[data-opt="2"] .nb-task{ display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid #EEF0F2; border-radius:14px; background:#fff; margin-bottom:8px; } html[data-opt="2"] .nb-task:last-child{ margin-bottom:0; } html[data-opt="2"] .nb-task input[type=checkbox]{ width:18px; height:18px; margin-top:2px; accent-color:#2F6A45; cursor:pointer; } html[data-opt="2"] .nb-task .tt{ font-size:13px; font-weight:600; line-height:1.4; } html[data-opt="2"] .nb-task .ts{ font-size:12px; color:var(--text-muted); margin-top:3px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } html[data-opt="2"] .nb-task.done .tt{ text-decoration:line-through; color:var(--text-muted); } html[data-opt="2"] .nb-task .tr{ display:flex; gap:6px; align-items:center; } html[data-opt="2"] .nb-task .tr button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); } html[data-opt="2"] .nb-task .tr button svg{ width:14px; height:14px; } html[data-opt="2"] .nb-task .tr button:hover{ border-color:var(--accent); color:var(--accent-dk); } html[data-opt="2"] .nb-prio{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; } html[data-opt="2"] .nb-prio.urgent{ background:#FDF1F3; color:#B3413C; } html[data-opt="2"] .nb-prio.high{ background:#E7F1F4; color:#2F6F86; } html[data-opt="2"] .nb-prio.normal{ background:#F4F5F7; color:var(--text-muted); } html[data-opt="2"] .nb-src{ font-size:11px; font-weight:600; color:var(--text-muted); } html[data-opt="2"] .nb-dept-h{ display:flex; align-items:center; gap:10px; } html[data-opt="2"] .nb-dept-h .di{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--db); color:var(--dc2); } html[data-opt="2"] .nb-dept-h .di svg{ width:16px; height:16px; } html[data-opt="2"] .nb-addtask{ display:grid; grid-template-columns:minmax(0,2fr) repeat(3, minmax(0,1fr)) auto; gap:10px; align-items:end; } @media (max-width:1100px){ html[data-opt="2"] .nb-addtask{ grid-template-columns:1fr 1fr; } } html[data-opt="2"] .nb-addtask .field{ margin:0 !important; } html[data-opt="2"] .nb-addtask .login-btn{ width:auto; height:46px; padding:0 18px !important; margin:0; } html[data-opt="2"] .nb-undo{ position:fixed; left:50%; bottom:70px; transform:translateX(-50%); z-index:900; background:#16141A; color:#fff; font:600 13px/1 'Plus Jakarta Sans','Segoe UI',sans-serif; padding:10px 10px 10px 16px; border-radius:12px; display:flex; align-items:center; gap:14px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); } html[data-opt="2"] .nb-undo button{ font:inherit; background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; } /* user accounts / access */ html[data-opt="2"] .nb-access{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } @media (max-width:1000px){ html[data-opt="2"] .nb-access{ grid-template-columns:1fr; } } html[data-opt="2"] .nb-agroup{ border:1px solid var(--border); border-radius:14px; padding:12px 14px; } html[data-opt="2"] .nb-agroup-h{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:8px; } html[data-opt="2"] .nb-agroup-h label{ display:flex; align-items:center; gap:8px; cursor:pointer; } html[data-opt="2"] .nb-agroup-h em{ font-style:normal; font-size:11.5px; font-weight:600; color:var(--text-muted); } html[data-opt="2"] .nb-agroup .items{ display:flex; flex-wrap:wrap; gap:6px; } html[data-opt="2"] .nb-agroup .items label{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:6px 10px; border-radius:999px; border:1px solid var(--border); cursor:pointer; background:#fff; } html[data-opt="2"] .nb-agroup .items label:has(input:checked){ background:#FFF3F6; border-color:var(--accent); color:var(--accent-dk); } html[data-opt="2"] .nb-agroup input{ accent-color:var(--accent); } html[data-opt="2"] .nb-panel{ border:1px solid var(--accent); border-radius:18px; padding:20px 22px; margin-bottom:18px; background:#fff; box-shadow:0 12px 30px -20px rgba(156,57,87,.45); } /* client portal */ html[data-opt="2"] .nb-portals{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } @media (max-width:1000px){ html[data-opt="2"] .nb-portals{ grid-template-columns:1fr; } } html[data-opt="2"] .nb-portal{ border:1px solid var(--border); border-radius:18px; padding:18px 20px; background:#fff; display:flex; flex-direction:column; gap:14px; } html[data-opt="2"] .nb-portal-h{ display:flex; align-items:center; gap:12px; } html[data-opt="2"] .nb-portal-h .nb-av{ width:44px; height:44px; border-radius:14px; } html[data-opt="2"] .nb-portal .stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } html[data-opt="2"] .nb-portal .stats div{ padding:10px 12px; border-radius:12px; background:#F7F8FA; } html[data-opt="2"] .nb-portal .stats span{ display:block; font-size:11.5px; color:var(--text-muted); } html[data-opt="2"] .nb-portal .stats b{ font-size:16px; font-weight:800; } html[data-opt="2"] .nb-portal .foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; } html[data-opt="2"] .nb-portal .login-btn{ width:auto; height:40px; padding:0 16px !important; margin:0; font-size:12.5px; } /* backup */ html[data-opt="2"] .nb-status{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; padding:22px 24px; border-radius:20px; margin-bottom:18px; background:linear-gradient(120deg,#2B1F26 0%,#4A2C3A 60%,#6B3A4E 100%); color:#fff; } html[data-opt="2"] .nb-status .si{ width:56px; height:56px; border-radius:18px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; } html[data-opt="2"] .nb-status .si svg{ width:26px; height:26px; } html[data-opt="2"] .nb-status b{ display:block; font-size:20px; font-weight:800; } html[data-opt="2"] .nb-status span{ font-size:13px; opacity:.8; } html[data-opt="2"] .nb-status .login-btn{ background:#fff !important; color:#16141A !important; width:auto; height:44px; padding:0 20px !important; margin:0; } html[data-opt="2"] .nb-dz{ border:1.5px dashed #CCDDE3; border-radius:16px; padding:22px; text-align:center; background:#FAF9FC; } html[data-opt="2"] .nb-dz .ei{ width:46px; height:46px; border-radius:14px; margin:0 auto 10px; background:#E7F1F4; color:#2F6F86; display:flex; align-items:center; justify-content:center; } html[data-opt="2"] .nb-dz .ei svg{ width:20px; height:20px; } html[data-opt="2"] .nb-dz b{ display:block; font-size:14px; } html[data-opt="2"] .nb-dz p{ font-size:12.5px; color:var(--text-muted); margin:4px 0 12px; } html[data-opt="2"] .nb-dz .login-btn{ width:auto; height:40px; padding:0 16px !important; margin:0; } html[data-opt="2"] .nb-tick{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; font-size:13px; border-top:1px solid #F0F1F3; } html[data-opt="2"] .nb-tick:first-child{ border-top:none; padding-top:0; } html[data-opt="2"] .nb-tick i{ width:22px; height:22px; border-radius:7px; background:#EEF6F0; color:#2F6A45; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:12px; flex-shrink:0; } /* rev8: confirm box, form error */ html[data-opt="2"] .nb-modal{ position:fixed; inset:0; z-index:1000; background:rgba(22,20,26,.45); display:flex; align-items:center; justify-content:center; padding:20px; } html[data-opt="2"] .nb-modal-card{ background:#fff; border-radius:20px; padding:24px; width:min(420px,100%); text-align:center; box-shadow:0 30px 60px -20px rgba(0,0,0,.45); font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; } html[data-opt="2"] .nb-modal-i{ width:48px; height:48px; border-radius:16px; margin:0 auto 12px; background:#FDF1F3; color:#B3413C; display:flex; align-items:center; justify-content:center; } html[data-opt="2"] .nb-modal-i svg{ width:22px; height:22px; } html[data-opt="2"] .nb-modal-card b{ display:block; font-size:16px; } html[data-opt="2"] .nb-modal-card p{ font-size:13px; color:var(--text-muted); margin:6px 0 18px; line-height:1.5; } html[data-opt="2"] .nb-modal-b{ display:flex; gap:10px; justify-content:center; } html[data-opt="2"] .nb-modal-b .login-btn{ width:auto; height:42px; padding:0 18px !important; margin:0; } html[data-opt="2"] .login-btn.danger{ background:#B3413C !important; border-color:#B3413C !important; color:#fff !important; } html[data-opt="2"] .nb-err{ margin-top:12px; padding:10px 14px; border-radius:12px; background:#FDF1F3; color:#9C3957; font-size:13px; font-weight:600; } html[data-opt="2"] .nb-task .tr .login-btn, html[data-opt="2"] td .nb-btnrow .login-btn{ height:34px; padding:0 12px !important; font-size:12.5px; width:auto; margin:0; } html[data-opt="2"] .nb-actbar{ flex-wrap:nowrap; gap:14px; overflow-x:auto; } html[data-opt="2"] .nb-vsep{ width:1px; align-self:stretch; background:var(--border); flex-shrink:0; } html[data-opt="2"] .nb-card-h > .login-btn, html[data-opt="2"] .nb-panel .nb-card-h > .login-btn{ width:auto !important; flex:0 0 auto; height:38px; padding:0 16px !important; margin:0; } html[data-opt="2"] td .login-btn{ width:auto !important; height:34px; padding:0 12px !important; font-size:12.5px; margin:0; white-space:nowrap; } html[data-opt="2"] td .nb-btnrow{ flex-wrap:nowrap; gap:6px; } html[data-opt="2"] .nb-reply .nb-person span.muted{ display:block; font-size:12.5px; } html[data-opt="2"] .nb-addtask{ grid-template-columns:minmax(0,2fr) minmax(170px,1.2fr) minmax(0,1fr) minmax(0,1fr) auto; } html[data-opt="2"] .nb-fc span{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; } /* ========================================================================================== REVISION 9 — footer fix: the page footer was squeezed to 16px by the flex layout, so its text was cut and its top line sat lower than the sidebar footer line. Both are now 52px and their top lines meet in one straight line. ========================================================================================== */ html[data-opt="2"] .global-footer{ flex-shrink:0; height:var(--foot-h) !important; min-height:var(--foot-h); max-width:none !important; box-sizing:border-box; } html[data-opt="2"] .breadcrumb{ flex-shrink:0; box-sizing:border-box; } html[data-opt="2"] .sidebar-footer, html[data-opt="2"] .sidebar-brand{ flex-shrink:0; box-sizing:border-box; } /* ========================================================================================== REVISION 10 — owner's pick (29 Sep): bars "C · Blush", page header "7 · Deep wine". Top bar and footer are blush bands across the full width; a thin line still marks where the left menu ends and the page begins. Dark banners that sat under the new dark header (salary / sales hero, backup status) move to a light gradient so the two never look alike. ========================================================================================== */ html[data-opt="2"]{ --blushA:#FBEEF2; --blushB:#F6EAF3; --blushLine:#EFD9E1; --blushDiv:#E6CAD5; --blushSoft:#6A5560; --blushCur:#9C3957; } /* top band */ html[data-opt="2"] .sidebar-brand{ background:var(--blushA) !important; border-bottom-color:var(--blushLine) !important; } html[data-opt="2"] .breadcrumb{ background:linear-gradient(90deg,var(--blushA),var(--blushB)) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-bottom-color:var(--blushLine) !important; color:var(--blushSoft) !important; box-shadow:none !important; } html[data-opt="2"] .breadcrumb :is(.chev, span:not(.cur)){ color:var(--blushSoft) !important; } html[data-opt="2"] .breadcrumb .cur{ color:var(--blushCur) !important; font-weight:700; } html[data-opt="2"] .sidebar-brand button{ background:#fff !important; border-color:var(--blushLine) !important; } /* bottom band */ html[data-opt="2"] .sidebar-footer{ background:var(--blushA) !important; border-top-color:var(--blushLine) !important; } html[data-opt="2"] .global-footer{ background:linear-gradient(90deg,var(--blushA),var(--blushB)) !important; border-top-color:var(--blushLine) !important; color:var(--blushSoft) !important; } html[data-opt="2"] .global-footer *{ color:inherit !important; } html[data-opt="2"] .global-footer #footerUserName{ color:var(--text) !important; font-weight:700; } html[data-opt="2"] .sidebar-footer .urole{ color:var(--blushSoft) !important; } /* the thin divider between the left menu and the page, top to bottom (through both bands) */ html[data-opt="2"] .sidebar{ border-right:1px solid var(--blushDiv) !important; } /* page header: deep wine */ html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header){ background:linear-gradient(120deg,#2B1F26 0%,#4A2C3A 55%,#6B3A4E 100%) !important; border-color:transparent !important; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) h1{ color:#fff !important; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) :is(.date, .sub, p){ color:rgba(255,255,255,.75) !important; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) .login-btn{ background:#fff !important; color:#16141A !important; border-color:#fff !important; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) .login-btn[style*="background:var(--card)"]{ background:rgba(255,255,255,.12) !important; color:#fff !important; border-color:rgba(255,255,255,.32) !important; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) :is(.nb-todo-bar button.nav, .nb-todo-bar .day){ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.32); } /* banners under the header: light rose → lilac → sky, dark text (never the same as the header) */ html[data-opt="2"] :is(.nb-hero, .nb-status){ background:radial-gradient(circle at 0% 0%,#F9D6E2 0,transparent 45%), radial-gradient(circle at 60% -30%,#D9EAF0 0,transparent 50%), radial-gradient(circle at 100% 130%,#D6E6F8 0,transparent 55%), #FBF8FB !important; color:var(--text) !important; border:1px solid #EEE3EC; } html[data-opt="2"] .nb-hero span{ opacity:1; color:var(--text-muted); } html[data-opt="2"] .nb-hero > div:first-child b{ color:#7E2F4A; } html[data-opt="2"] .nb-hero .hs{ padding-left:22px; border-left:1px solid #E7D9E3; } html[data-opt="2"] .nb-hero .login-btn, html[data-opt="2"] .nb-status .login-btn{ background:#9C3957 !important; color:#fff !important; } html[data-opt="2"] .nb-status span{ opacity:1; color:var(--text-muted); } html[data-opt="2"] .nb-status .si{ background:#fff; color:#9C3957; box-shadow:0 6px 16px -8px rgba(156,57,87,.35); } /* ========================================================================================== REVISION 11 — no gaps next to the bars. · The left menu's scrollbar sat right beside the divider and showed as a grey strip: it is now hidden until the mouse is over the menu, and thin when it shows. · The page scrollbar cut the blush bars short on the right: it is now thin, and the blush bands continue underneath it at the top and bottom. · Home gets the same blush top bar as every other page. ========================================================================================== */ html[data-opt="2"] #navScroll{ scrollbar-width:thin; scrollbar-color:transparent transparent; } html[data-opt="2"] #navScroll:hover{ scrollbar-color:#D9C2CC transparent; } html[data-opt="2"] #navScroll::-webkit-scrollbar{ width:6px; } html[data-opt="2"] #navScroll::-webkit-scrollbar-thumb{ background:transparent; border-radius:6px; } html[data-opt="2"] #navScroll:hover::-webkit-scrollbar-thumb{ background:#D9C2CC; } html[data-opt="2"] .panel{ scrollbar-width:thin; scrollbar-color:#D9C2CC transparent; background:linear-gradient(to bottom, var(--blushB) 0, var(--blushB) 55px, var(--blushLine) 55px, var(--blushLine) 56px, var(--bg) 56px, var(--bg) calc(100% - 52px), var(--blushLine) calc(100% - 52px), var(--blushB) calc(100% - 51px), var(--blushB) 100%) !important; } /* Home: blush top bar */ html[data-opt="2"] #view-home{ padding-top:0 !important; } html[data-opt="2"] #view-home::before{ content:'Home'; position:sticky; top:0; z-index:10; display:flex; align-items:center; height:var(--bar-h); box-sizing:border-box; margin:0 -44px 34px; padding:0 44px; background:linear-gradient(90deg,var(--blushA),var(--blushB)); border-bottom:1px solid var(--blushLine); color:var(--blushCur); font-weight:700; font-size:13.5px; } /* ========================================================================================== REVISION 12 — no colour break next to the menu when the menu opens/closes or a page loads. The page used to fade and slide in as one piece, top bar included; for that moment the top bar was see-through and a different shade showed next to the menu header. Now only the page content fades in — the top bar stays solid — and the colour behind the bars is the exact same blush sweep, so nothing different can ever show through. ========================================================================================== */ html[data-opt="2"] .view.active{ animation:none !important; } html[data-opt="2"] .view.active > :not(.breadcrumb){ animation:nbPanelIn .32s cubic-bezier(.2,.8,.2,1); } html[data-opt="2"] #view-home.active::before{ animation:none; } @keyframes nbPanelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } html[data-opt="2"] .panel{ background: linear-gradient(90deg,var(--blushA),var(--blushB)) top / 100% 55px no-repeat, linear-gradient(var(--blushLine),var(--blushLine)) 0 55px / 100% 1px no-repeat, linear-gradient(90deg,var(--blushA),var(--blushB)) bottom / 100% 51px no-repeat, linear-gradient(var(--blushLine),var(--blushLine)) 0 calc(100% - 51px) / 100% 1px no-repeat, var(--bg) !important; } /* ========================================================================================== REVISION 13 — production section tools (New entry, Today's items, History, Report). ========================================================================================== */ html[data-opt="2"] .nb-tiles .nb-tile.on{ border-color:var(--tc); box-shadow:0 0 0 3px color-mix(in srgb, var(--tc) 16%, transparent); } html[data-opt="2"] .nb-tool{ scroll-margin-top:72px; } html[data-opt="2"] .nb-tool .nb-card-h .nb-btnrow .login-btn{ width:auto; height:38px; padding:0 14px !important; margin:0; } html[data-opt="2"] .nb-itabs{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px; } html[data-opt="2"] .nb-itabs button{ font:inherit; font-size:12.5px; font-weight:600; height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:8px; } html[data-opt="2"] .nb-itabs button i{ width:8px; height:8px; border-radius:50%; background:#C24F70; flex-shrink:0; } html[data-opt="2"] .nb-itabs button.done i{ background:#3D8B5F; } html[data-opt="2"] .nb-itabs button.editing i{ background:#4A8499; } html[data-opt="2"] .nb-itabs button.on{ border-color:var(--text); box-shadow:0 0 0 3px rgba(22,20,26,.08); font-weight:700; } html[data-opt="2"] .nb-itabs-legend{ display:flex; gap:14px; font-size:11.5px; color:var(--text-muted); margin:-6px 0 14px; } html[data-opt="2"] .nb-itabs-legend span{ display:inline-flex; align-items:center; gap:6px; } html[data-opt="2"] .nb-itabs-legend i{ width:8px; height:8px; border-radius:50%; } html[data-opt="2"] .nb-lockbox{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:#EEF6F0; border:1px solid #D6E9DC; margin-bottom:14px; } html[data-opt="2"] .nb-lockbox .li{ width:36px; height:36px; border-radius:11px; background:#fff; color:#2F6A45; display:flex; align-items:center; justify-content:center; flex-shrink:0; } html[data-opt="2"] .nb-lockbox .li svg{ width:17px; height:17px; } html[data-opt="2"] .nb-lockbox b{ display:block; font-size:13.5px; color:#2F6A45; } html[data-opt="2"] .nb-lockbox span{ font-size:12.5px; color:var(--text-muted); } html[data-opt="2"] .nb-lockbox .login-btn{ margin-left:auto !important; width:auto; height:38px; padding:0 14px !important; } html[data-opt="2"] .nb-grid4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 14px; } @media (max-width:1000px){ html[data-opt="2"] .nb-grid4{ grid-template-columns:1fr 1fr; } } html[data-opt="2"] .nb-unit{ display:inline-flex; gap:3px; padding:3px; border-radius:10px; background:#F2F3F5; margin-left:8px; vertical-align:middle; } html[data-opt="2"] .nb-unit button{ font:inherit; font-size:11.5px; font-weight:700; border:none; background:transparent; padding:3px 9px; border-radius:7px; cursor:pointer; color:var(--text-muted); } html[data-opt="2"] .nb-unit button.on{ background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(22,20,26,.12); } html[data-opt="2"] .nb-calc{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:12px; background:#E7F1F4; font-size:12.5px; color:#2F6F86; margin:4px 0 14px; } html[data-opt="2"] .nb-calc b{ font-size:15px; color:#1F4D5E; } html[data-opt="2"] .nb-subh{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin:6px 0 10px; } html[data-opt="2"] td .nb-rowbtns{ display:flex; gap:6px; justify-content:flex-end; } html[data-opt="2"] td .nb-rowbtns button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); } html[data-opt="2"] td .nb-rowbtns button svg{ width:14px; height:14px; } html[data-opt="2"] td .nb-rowbtns button:hover{ border-color:var(--accent); color:var(--accent-dk); } html[data-opt="2"] .nb-rtotal{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-radius:12px; background:#F7F8FA; margin-top:12px; font-size:13px; } html[data-opt="2"] .nb-rtotal b{ font-size:16px; } html[data-opt="2"] .nb-lockbox .nb-btnrow .login-btn{ margin:0 !important; } /* ========================================================================================== REVISION 14 — Accounts tools (receipts, vendors, bills, vouchers, petty cash, other expenses, bank accounts, cheques, cheque print, bank statement). ========================================================================================== */ html[data-opt="2"] .nb-cheque{ position:relative; max-width:560px; aspect-ratio:2.3/1; border-radius:14px; padding:20px 24px; background:linear-gradient(135deg,#FBF6EE 0%,#EAF2F5 100%); border:1px solid #E7DCE4; font-size:13px; color:#16141A; display:flex; flex-direction:column; gap:12px; box-shadow:0 10px 30px -18px rgba(22,20,26,.35); } html[data-opt="2"] .nb-cheque .h{ display:flex; justify-content:space-between; align-items:center; } html[data-opt="2"] .nb-cheque .h b{ font-size:15px; } html[data-opt="2"] .nb-cheque .h span{ font-size:12px; color:var(--text-muted); } html[data-opt="2"] .nb-cheque .h span b{ font-size:13px; color:var(--text); } html[data-opt="2"] .nb-cheque .l{ display:flex; gap:10px; align-items:baseline; border-bottom:1px solid #D9CBD5; padding-bottom:6px; } html[data-opt="2"] .nb-cheque .l span{ color:var(--text-muted); font-size:12px; } html[data-opt="2"] .nb-cheque .l b{ font-size:15px; } html[data-opt="2"] .nb-cheque .w{ font-style:italic; min-height:18px; border-bottom:1px solid #D9CBD5; padding-bottom:6px; } html[data-opt="2"] .nb-cheque .f{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; } html[data-opt="2"] .nb-cheque .f span{ font-size:12px; color:var(--text-muted); } html[data-opt="2"] .nb-cheque .f .amt{ font-size:16px; font-weight:800; color:var(--text); border:1.5px solid #16141A; border-radius:8px; padding:4px 10px; } html[data-opt="2"] .nb-cheque .m{ font-size:12px; color:var(--text-muted); } html[data-opt="2"] .nb-cheque .s{ position:absolute; right:24px; bottom:-26px; font-size:11px; color:var(--text-muted); } html[data-opt="2"] .nb-sheet .nb-cheque{ margin:20px auto 40px; } html[data-opt="2"] #nbAccCard .nb-chips{ display:flex; flex-wrap:wrap; gap:8px; } html[data-opt="2"] #nbAccCard .nb-chip{ font-size:12.5px; } html[data-opt="2"] #nbAccCard .nb-accform{ padding:16px 18px 18px; border-radius:16px; background:#FAF9FC; border:1px solid #EFEAF2; margin:4px 0 20px; } html[data-opt="2"] #nbAccCard .nb-accform .nb-grid2{ grid-template-columns:repeat(4, minmax(0,1fr)); } html[data-opt="2"] #nbAccCard .nb-accform .nb-span2{ grid-column:span 2; } @media (max-width:1000px){ html[data-opt="2"] #nbAccCard .nb-accform .nb-grid2{ grid-template-columns:1fr 1fr; } } html[data-opt="2"] .nb-cheque .s{ position:static; text-align:right; margin-top:-6px; } /* ========================================================================================== REVISION 16 — HR tools (employee form, salary with day-by-day overtime grid). ========================================================================================== */ html[data-opt="2"] .nb-otgrid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; } @media (max-width:1100px){ html[data-opt="2"] .nb-otgrid{ grid-template-columns:repeat(4, minmax(0,1fr)); } } html[data-opt="2"] .nb-otgrid .d{ border:1px solid var(--border); border-radius:10px; padding:5px 6px 6px; background:#fff; } html[data-opt="2"] .nb-otgrid .d.sun{ background:#F3F7F9; border-color:#CFE2E8; } html[data-opt="2"] .nb-otgrid .d span{ display:block; font-size:11.5px; font-weight:700; margin-bottom:4px; } html[data-opt="2"] .nb-otgrid .d span em{ font-style:normal; font-weight:600; color:var(--text-muted); font-size:10.5px; } html[data-opt="2"] .nb-otgrid .d.sun span em{ color:#2F6F86; } html[data-opt="2"] .nb-otgrid .d div{ display:grid; grid-template-columns:1fr 1fr; gap:4px; } html[data-opt="2"] .nb-otgrid .d input{ width:100%; height:30px; border:1px solid #E1E2E7; border-radius:7px; padding:0 6px; font:inherit; font-size:12.5px; text-align:center; box-sizing:border-box; } html[data-opt="2"] .nb-otgrid .d input:focus{ outline:none; border-color:var(--accent); } html[data-opt="2"] #nbSlipRows .nb-table :is(th, td){ padding-left:8px; padding-right:8px; } html[data-opt="2"] #nbSlipRows .nb-avs{ display:none; } html[data-opt="2"] #nbSlipRows td .nb-rowbtns{ gap:4px; } html[data-opt="2"] #nbSlipRows td .nb-rowbtns button{ width:28px; height:28px; } /* ============ REVISION 17 — Sales tools: item tables inside forms, invoice generation workspace ============ */ html[data-opt="2"] .nb-itemswrap{ overflow-x:auto; margin:0 -4px; } html[data-opt="2"] .nb-items{ width:100%; border-collapse:separate; border-spacing:0 4px; } html[data-opt="2"] .nb-items th{ font-size:11px; font-weight:700; color:var(--text-muted); text-align:left; padding:0 4px 2px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; } html[data-opt="2"] .nb-items td{ padding:0 4px; vertical-align:middle; } html[data-opt="2"] .nb-items td.n{ width:22px; font-weight:700; color:var(--text-muted); text-align:center; } html[data-opt="2"] .nb-items td.amt{ text-align:right; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; } html[data-opt="2"] .nb-items .field.nb-cell{ margin:0; } html[data-opt="2"] #app .nb-items .field.nb-cell :is(input, select){ padding-top:10px; padding-bottom:10px; font-size:13px; } html[data-opt="2"] .nb-items .x{ width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:#fff; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center; } html[data-opt="2"] .nb-items .x:hover{ border-color:var(--accent); color:var(--accent-dk); } html[data-opt="2"] .nb-items .x svg{ width:14px; height:14px; } html[data-opt="2"] .nb-addline{ background:#fff; border:1px dashed #D9C3CD; border-radius:10px; padding:9px 14px; font:inherit; font-size:13px; font-weight:600; color:var(--accent-dk); cursor:pointer; white-space:nowrap; } html[data-opt="2"] .nb-addline:hover{ background:#FCF3F6; border-color:var(--accent); } html[data-opt="2"] .nb-photo{ height:40px; border:1px dashed #D9C3CD; border-radius:10px; display:flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:600; color:var(--text-muted); background:#FBF6F8; cursor:pointer; padding:0 12px; white-space:nowrap; } html[data-opt="2"] .nb-photo svg{ width:15px; height:15px; } html[data-opt="2"] .nb-photo:hover{ border-color:var(--accent); color:var(--accent-dk); } html[data-opt="2"] .nb-wsorder{ border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin-bottom:12px; background:#fff; } html[data-opt="2"] .nb-wsorder-h{ display:flex; align-items:center; gap:16px; } html[data-opt="2"] .nb-wsorder-h > div:first-child{ flex:1; min-width:0; } html[data-opt="2"] .nb-wsorder-h .muted{ font-size:12.5px; color:var(--text-muted); } html[data-opt="2"] .nb-wsorder-v{ text-align:right; } html[data-opt="2"] .nb-wsorder-v span{ display:block; font-size:12px; color:var(--text-muted); } html[data-opt="2"] .nb-wsorder-v b{ font-size:16px; } html[data-opt="2"] .nb-reqform{ background:linear-gradient(120deg,#FCEEF2,#E7F1F4); border-radius:14px; padding:12px 14px 8px; } html[data-opt="2"] .nb-reqform .field{ margin-bottom:6px; } @media (max-width:760px){ html[data-opt="2"] .nb-wsorder-h{ flex-wrap:wrap; } html[data-opt="2"] .nb-reqform .nb-grid4{ grid-template-columns:1fr !important; } }html[data-opt="2"] .nb-linefoot{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-top:6px; } html[data-opt="2"] .nb-totals{ width:340px; max-width:100%; } html[data-opt="2"] .nb-totals .nb-total{ margin-top:8px; } @media (max-width:760px){ html[data-opt="2"] .nb-linefoot{ flex-direction:column; } html[data-opt="2"] .nb-totals{ width:100%; } } html[data-opt="2"] .nb-acttable :is(th, td){ padding-left:8px; padding-right:8px; } html[data-opt="2"] .nb-acttable td .nb-rowbtns{ gap:4px; } html[data-opt="2"] .nb-acttable td .nb-rowbtns button{ width:28px; height:28px; }html[data-opt="2"] .nb-prq{ padding:12px 0; border-bottom:1px solid #F0F1F3; } html[data-opt="2"] .nb-prq:last-child{ border-bottom:none; } html[data-opt="2"] .nb-prq-top{ display:flex; gap:12px; align-items:flex-start; } html[data-opt="2"] .nb-prq-top .t{ font-weight:700; font-size:14px; } html[data-opt="2"] .nb-prq-top .s{ font-size:12.5px; color:var(--text-muted); margin-top:2px; } html[data-opt="2"] .nb-prq-acts{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap; } html[data-opt="2"] .nb-prq-acts .login-btn{ padding:9px 16px; font-size:13px; } /* ============ REVISION 18 — Printed documents: letterhead 2A (owner's choice, 29 Sep 2026) ============ */ .nbd{ width:210mm; min-height:297mm; position:relative; margin:0 auto; background:#fff; color:#1E1A22; font-family:'Plus Jakarta Sans',sans-serif; font-size:9.6pt; line-height:1.45; text-align:left; -webkit-print-color-adjust:exact; print-color-adjust:exact; box-shadow:0 18px 50px -20px rgba(22,20,26,.45); } .nbd *{ box-sizing:border-box; } .nbd .cur{ font-size:.72em; font-weight:600; letter-spacing:.04em; margin-right:3px; opacity:.75; } .nbd table{ border-collapse:collapse; width:100%; border:none; margin:0; background:none; } .nbd-frame > thead > tr > td, .nbd-frame > tbody > tr > td, .nbd-frame > tfoot > tr > td{ padding:0; border:none; background:none; } .nbd-footspace{ height:25mm; } .nbd-band{ background:linear-gradient(115deg,#5A2238 0%,#7E3152 50%,#A0476C 100%); color:#fff; padding:10mm 16mm 9mm; display:flex; align-items:center; gap:13px; } .nbd-lg{ width:25mm; height:25mm; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .nbd-lg img{ width:21mm; height:21mm; object-fit:contain; } .nbd-co{ flex:1; min-width:0; } .nbd-name{ display:inline-block; } .nbd-name span{ display:inline-block; white-space:nowrap; } .nbd-name .l1{ font-family:'Cinzel',serif; font-weight:700; font-size:17.5pt; line-height:1.05; } .nbd-name .l2{ font-family:'Cinzel',serif; font-weight:600; font-size:11.8pt; line-height:1.2; margin-top:1.2mm; } .nbd-name .rule{ height:1px; background:currentColor; opacity:.45; margin-top:1.6mm; } .nbd-co .s{ font-size:7.9pt; color:#F6DDE7; margin-top:1.6mm; } .nbd-doc{ text-align:right; } .nbd-doc .t{ font-size:23pt; font-weight:800; letter-spacing:.06em; line-height:1; } .nbd-doc .id{ margin-top:2mm; font-size:10pt; color:#F6DDE7; font-weight:700; } .nbd-strip{ display:grid; background:#FBF3F6; border-bottom:1px solid #F0DDE5; padding:0 16mm; gap:6mm; } .nbd-strip div{ padding:3.2mm 0; } .nbd-strip span{ display:block; font-size:7pt; letter-spacing:.14em; text-transform:uppercase; color:#9C3957; } .nbd-strip b{ font-size:9.6pt; } .nbd-body{ padding:0 16mm; } .nbd-headspace{ height:9mm; } .nbd .h{ margin:0 0 1.5mm; font-size:7.2pt; letter-spacing:.14em; text-transform:uppercase; color:#9C3957; font-weight:700; } .nbd-to{ display:grid; grid-template-columns:1.3fr 1fr; gap:8mm; margin-bottom:7mm; break-inside:avoid; } .nbd-to .nm{ font-size:13pt; font-weight:800; color:#2B1220; } .nbd-to .ln{ color:#4E4652; } .nbd-to .ref > div:not(.h){ display:flex; justify-content:space-between; gap:4mm; padding:1.4mm 0; border-bottom:1px dashed #E6D6DE; } .nbd-to .ref span{ color:#7A707D; } .nbd-items thead th{ color:#9C3957; font-size:7.4pt; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-align:left; padding:0 3mm 2.4mm; border:none; border-bottom:2px solid #7E3152; background:none; } .nbd-items td{ padding:3.4mm 3mm; border:none; border-bottom:1px solid #F0E7EB; vertical-align:top; background:none; font-size:9.6pt; } .nbd-items tr{ break-inside:avoid; } .nbd-items tbody tr:nth-child(even) td{ background:#FCF8FA; } .nbd-items .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .nbd-items thead th.num{ text-align:right; } .nbd-items .d{ font-weight:600; } .nbd-items .o{ font-weight:800; color:#9C3957; font-size:11pt; } .nbd-sum{ display:grid; grid-template-columns:1fr 78mm; gap:8mm; margin-top:6mm; break-inside:avoid; } .nbd-terms{ background:#FBF3F6; border:1px solid #F0DDE5; border-radius:3mm; padding:4mm 5mm; } .nbd-terms > div:not(.h){ display:grid; grid-template-columns:26mm 1fr; gap:3mm; padding:1.2mm 0; font-size:8.6pt; } .nbd-terms span{ color:#7A707D; } .nbd-terms b{ font-weight:600; } .nbd-totals{ border:1px solid #EAD9E0; border-radius:3mm; overflow:hidden; } .nbd-totals div{ display:flex; justify-content:space-between; gap:4mm; padding:2.6mm 4.5mm; } .nbd-totals div + div{ border-top:1px solid #F0E7EB; } .nbd-totals span{ color:#6E6470; } .nbd-totals .gt{ background:linear-gradient(115deg,#6A2842,#A0476C); color:#fff; font-size:12pt; } .nbd-totals .gt span{ color:#F6DDE7; font-size:9pt; align-self:center; } .nbd-totals .gt b{ font-weight:800; } .nbd-words{ margin-top:3mm; font-size:8.4pt; color:#4E4652; } .nbd-words b{ color:#2B1220; } .nbd-sign{ display:grid; grid-template-columns:repeat(3,1fr); gap:10mm; margin-top:15mm; break-inside:avoid; } .nbd-sign div{ border-top:1.5px solid #7E3152; padding-top:2mm; font-size:8.4pt; } .nbd-sign b{ display:block; } .nbd-sign span{ color:#7A707D; } .nbd-foot{ position:absolute; left:0; right:0; bottom:0; } .nbd-foot .f1{ padding:3.5mm 16mm; display:flex; justify-content:space-between; font-size:7.8pt; color:#6E6470; background:#fff; } .nbd-foot .f2{ background:linear-gradient(115deg,#5A2238 0%,#7E3152 50%,#A0476C 100%); color:#F6DDE7; padding:3.5mm 16mm; display:flex; justify-content:space-between; gap:6mm; font-size:7.8pt; } .nbd-foot .f2 b{ color:#fff; font-family:'Cinzel',serif; font-weight:700; letter-spacing:.02em; } .nb-overlay > .nbd{ flex-shrink:0; } /* print: edge-to-edge colour; the table's head and foot spacers keep room at the top and bottom of every page, and the footer repeats on every page */ @page nbdoc{ size:A4; margin:0; } body.nb-print #nbPrintRoot .nbd{ page:nbdoc; box-shadow:none; min-height:0; width:auto; margin:0; } body.nb-print #nbPrintRoot .nbd-foot{ position:fixed; }/* quotation: price per option (options are alternatives) */ .nbd-totals .hd{ background:#FBF3F6; font-size:7pt; letter-spacing:.14em; text-transform:uppercase; color:#9C3957; font-weight:700; padding:2.2mm 4.5mm; } .nbd-totals .hd span{ color:#9C3957; } .nbd-totals .opt span em{ display:block; font-style:normal; font-size:7.6pt; color:#8A7B85; margin-top:.4mm; } .nbd-totals .opt b{ font-weight:800; color:#5A2238; align-self:center; }.nbd-items td.tot b{ color:#5A2238; } .nbd-items thead th:last-child{ white-space:nowrap; } .nbd-totals .note{ display:block; padding:3mm 4.5mm; font-size:8.6pt; color:#4E4652; line-height:1.5; } /* ============ REVISION 19 — Settings page ============ */ html[data-opt="2"] .nb-set-tabs{ flex-wrap:wrap; } html[data-opt="2"] .nb-set-tick{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; cursor:pointer; } html[data-opt="2"] .nb-set-tick input{ width:18px; height:18px; accent-color:#9C3957; } html[data-opt="2"] .nb-set-ticks{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:6px; } html[data-opt="2"] .nb-set-next{ display:inline-block; font-weight:800; color:#5A2238; background:#FBF3F6; border:1px solid #F0DDE5; border-radius:9px; padding:5px 10px; font-variant-numeric:tabular-nums; } html[data-opt="2"] .nb-set-num td{ vertical-align:middle; } html[data-opt="2"] .nb-set-chips{ display:flex; flex-wrap:wrap; gap:8px; } html[data-opt="2"] .nb-set-chips > span{ display:inline-flex; align-items:center; gap:6px; background:#F6F1F4; border:1px solid #EADCE3; border-radius:999px; padding:6px 8px 6px 14px; font-size:13px; font-weight:600; } html[data-opt="2"] .nb-set-chips > span button{ width:22px; height:22px; border-radius:50%; border:none; background:#fff; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; } html[data-opt="2"] .nb-set-chips > span button svg{ width:12px; height:12px; } html[data-opt="2"] .nb-set-chips > span button:hover{ color:#9C3957; } html[data-opt="2"] .nb-set-chips > span.add{ background:#fff; border-style:dashed; padding:4px 4px 4px 12px; } html[data-opt="2"] .nb-set-chips > span.add input{ border:none; outline:none; font:inherit; font-size:13px; width:150px; background:transparent; } html[data-opt="2"] .nb-set-chips > span.add button{ width:auto; height:28px; border-radius:999px; padding:0 12px; background:#9C3957; color:#fff; font:inherit; font-size:12px; font-weight:700; } html[data-opt="2"] .nb-set-logo{ display:flex; align-items:center; gap:16px; } html[data-opt="2"] .nb-set-logo img{ width:74px; height:74px; object-fit:contain; border:1px solid var(--border); border-radius:50%; background:#fff; padding:6px; } html[data-opt="2"] .nb-set-logo b{ display:block; } html[data-opt="2"] .nb-set-logo span{ display:block; color:var(--text-muted); font-size:13px; margin:2px 0 8px; }html[data-opt="2"] .nb-set-num{ table-layout:fixed; } html[data-opt="2"] .nb-set-num th:first-child{ width:30%; } html[data-opt="2"] .nb-set-later{ display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700; color:#0B5F86; background:#E3F0F5; border-radius:999px; padding:1px 8px; vertical-align:1px; } /* ============ REVISION 20 — Tax invoice letterhead A2 (owner, 29 Sep 2026) — ONLY for the tax invoice ============ White header with a wine line: logo + name + Tel · e-mail · web on the left, TAX INVOICE + TRN on the right (10 mm from the edges); footer: address left, tagline right; "thank you" follows the content; signatures at the bottom. Other documents keep their own look. */ .nbd.nbd-inv{ --ink:#4A1D2E; --soft:#7A6470; --acc:#9C3957; --rule:#9C3957; --line:#7E3152; --pale:#EADCE3; --pale2:#E6D6DE; } .nbd.nbd-inv .nbd-band{ background:#fff; color:var(--ink); border-bottom:3px solid var(--line); padding:6mm 10mm 5mm; } .nbd.nbd-inv .nbd-lg{ box-shadow:0 0 0 1.5px #D9C3CD; } .nbd.nbd-inv .nbd-co .c{ font-size:8pt; color:var(--soft); margin-top:1.8mm; } .nbd.nbd-inv .nbd-co .c i{ font-style:normal; margin:0 1.6mm; opacity:.7; } .nbd.nbd-inv .nbd-doc .trn{ margin-top:2mm; font-size:9pt; font-weight:700; color:var(--soft); letter-spacing:.03em; } .nbd.nbd-inv .nbd-strip{ background:#fff; border-bottom:1px solid var(--pale); } .nbd.nbd-inv .nbd-strip span{ color:var(--acc); } .nbd.nbd-inv .h, .nbd.nbd-inv .nbd-items thead th, .nbd.nbd-inv .nbd-items .o{ color:var(--acc); } .nbd.nbd-inv .nbd-items thead th{ border-bottom-color:var(--rule); } .nbd.nbd-inv .nbd-totals .gt{ background:#fff; color:var(--ink); border-top:2px solid var(--line); } .nbd.nbd-inv .nbd-totals .gt span{ color:#7A4A5E; } .nbd.nbd-inv .nbd-totals .gt b{ color:var(--ink); } .nbd.nbd-inv .nbd-foot .f2{ background:#fff; color:var(--ink); border-top:2px solid var(--line); padding:3mm 10mm; justify-content:space-between; gap:8mm; align-items:center; min-height:9mm; } .nbd.nbd-inv .nbd-foot .f2 .tag{ text-align:right; white-space:nowrap; } .nbd.nbd-inv .nbd-footspace{ height:16mm; } .nbd.nbd-inv .nbd-headspace{ height:7mm; } .nbd.nbd-inv .nbd-thanks{ margin-top:7mm; font-size:9.2pt; font-weight:600; color:#4E4652; break-inside:avoid; } .nbd.nbd-inv .nbd-end{ margin-top:10mm; break-inside:avoid; } .nbd.nbd-inv .nbd-end .nbd-sign{ margin-top:0; padding-top:12mm; } .nbd.nbd-inv .nbd-sign div{ border-top-color:var(--rule); } .nbd-inv .nbd-inv-to{ grid-template-columns:1.55fr 1fr; gap:7mm; } /* 21 Oct 2026: Bill to wider, invoice details narrower */ .nbd-inv .nbd-kv > div:not(.h){ align-items:center; } .nbd-inv .nbd-kv b{ text-align:right; } .nbd-inv .nbd-kv .one span, .nbd-inv .nbd-kv .one b{ white-space:nowrap; } .nbd-inv .nbd-kv .one b{ font-size:8.4pt; } .nbd-inv .nbd-inv-t td.d b{ display:block; font-weight:700; } .nbd-inv .nbd-inv-t td.d span{ color:#7A707D; font-size:8.4pt; } .nbd-inv .nbd-inv-foot{ display:grid; grid-template-columns:1fr 80mm; gap:8mm; margin-top:6mm; align-items:start; break-inside:avoid; } .nbd-inv .nbd-bank{ background:#fff; border:1px solid var(--pale2); border-radius:3mm; padding:3.5mm 5mm; margin-top:3mm; } .nbd-inv .nbd-bank .h{ margin-bottom:1.5mm; } .nbd-inv .nbd-bank .g{ display:grid; grid-template-columns:24mm 1fr; gap:1mm 3mm; font-size:8.4pt; } .nbd-inv .nbd-bank span{ color:#7A707D; } /* preview window: optional tick box next to Print / Save as PDF (e.g. Include bank details) */ .nb-overlay-bar .nb-ov-tick{ display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:13px; font-weight:600; margin-right:8px; cursor:pointer; white-space:nowrap; } .nb-overlay-bar .nb-ov-tick input{ width:16px; height:16px; accent-color:#C24F70; } /* ============ REVISION 23 — letterhead A2 refined; now used by the TAX INVOICE and the QUOTATION (owner, 30 Sep 2026) ============ - the two name lines sit close together; the rule and Tel · e-mail · web move up, with equal small gaps - Tel · e-mail · web is spread to exactly the width of the name and the rule (nbDocFit makes it smaller if it is longer) - logo without the round circle - signatures: name on the line, the label just under the line (small gap); the third label stays on one line */ .nbd.nbd-inv .nbd-band{ padding:5mm 10mm 4.5mm; } .nbd.nbd-inv .nbd-lg{ width:auto; height:auto; border-radius:0; background:none; box-shadow:none; } .nbd.nbd-inv .nbd-lg img{ width:24mm; height:24mm; } .nbd.nbd-inv .nbd-name .l1{ line-height:1; } .nbd.nbd-inv .nbd-name .l2{ line-height:1; margin-top:1mm; } .nbd.nbd-inv .nbd-name .rule{ margin-top:1.6mm; opacity:.55; } .nbd.nbd-inv .nbd-name .c{ display:flex; justify-content:space-between; align-items:baseline; width:0; min-width:100%; margin-top:1.6mm; font-size:8pt; line-height:1.1; color:var(--soft); white-space:nowrap; } .nbd.nbd-inv .nbd-name .c span, .nbd.nbd-inv .nbd-name .c i{ flex-shrink:0; } .nbd.nbd-inv .nbd-name .c i{ font-style:normal; margin:0 1mm; opacity:.7; } .nbd.nbd-inv .nbd-end .nbd-sign.nbd-sign2{ padding-top:12mm; grid-template-columns:1fr 1fr 1.3fr; gap:9mm; } .nbd.nbd-inv .nbd-sign2 > div{ border-top:none; padding-top:0; } .nbd.nbd-inv .nbd-sign2 b{ display:block; min-height:1.35em; padding-bottom:.6mm; font-size:8.6pt; } .nbd.nbd-inv .nbd-sign2 i{ display:block; border-top:1.2px solid var(--rule); } .nbd.nbd-inv .nbd-sign2 span{ display:block; margin-top:1.2mm; white-space:nowrap; } .nbd.nbd-inv .nbd-terms{ background:#fff; border-color:var(--pale2); } .nbd-notes{ margin-top:5mm; border:1px solid #E6D6DE; border-radius:3mm; padding:3.5mm 5mm; font-size:8.8pt; color:#3E3640; break-inside:avoid; } .nbd-notes .tx{ line-height:1.5; } /* ============ REVISION 24 — supplier purchase order (owner chose option C, revised 30 Sep 2026) + short signature lines ============ */ /* short signature lines on every A2-letterhead document (tax invoice, quotation, purchase order): first on the left, last on the right */ .nbd.nbd-inv .nbd-end .nbd-sign.nbd-sign2{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:48mm; column-gap:0; justify-content:space-between; } /* the last signature sits at the right edge: right-aligned, so a long label (e.g. "Accepted by client · signature & stamp") stays on one line under a short line */ .nbd.nbd-inv .nbd-sign2 > div:last-child:not(:first-child){ justify-self:end; width:max-content; min-width:48mm; text-align:right; } .nbd.nbd-inv .nbd-sign2 > div:last-child:not(:first-child) i{ width:48mm; margin-left:auto; } /* purchase order: strip = PO date (left) · PO no. (centre) · Prepared by (right) */ .nbd-po .nbd-strip div:nth-child(2){ text-align:center; } .nbd-po .nbd-strip div:nth-child(3){ text-align:right; } .nbd-po .nbd-items td{ padding:3mm 3mm; } .nbd-po .nbd-items td.d b{ display:block; font-weight:700; } .nbd-po .nbd-items td.d span{ display:block; color:#7A707D; font-size:8.4pt; margin-top:.4mm; } .nbd-po .po-cards{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:5mm; margin-bottom:6mm; break-inside:avoid; } .nbd-po .po-card{ border:1px solid #E6D6DE; border-radius:3mm; padding:3.5mm 4.5mm; font-size:8.8pt; line-height:1.45; } .nbd-po .po-card .nm{ font-size:10.6pt; font-weight:800; color:#2B1220; margin-bottom:.8mm; line-height:1.25; } .nbd-po .po-card .ln{ color:#4E4652; } .nbd-po .po-card .kv{ display:flex; justify-content:space-between; align-items:baseline; gap:3mm; padding:1.1mm 0; border-bottom:1px dashed #E6D6DE; } .nbd-po .po-card .kv:last-child{ border-bottom:none; } .nbd-po .po-card .kv span{ color:#7A707D; white-space:nowrap; } .nbd-po .po-card .kv b{ font-weight:700; color:#2B1220; white-space:nowrap; } .nbd-po .po-foot{ display:grid; grid-template-columns:1fr 70mm; gap:8mm; margin-top:5mm; align-items:start; break-inside:avoid; } .nbd-po .po-foot .nbd-words{ margin-top:0; } .nbd-po .po-foot .nbd-words + .nbd-words{ margin-top:2mm; } .nbd-po .po-last{ display:grid; grid-template-columns:1fr 1fr; gap:6mm; margin-top:6mm; align-items:stretch; break-inside:avoid; } .nbd-po .po-terms{ border:1px solid #E6D6DE; border-radius:3mm; padding:3.5mm 4.5mm; } .nbd-po .po-terms > div:not(.h){ display:grid; grid-template-columns:24mm 1fr; gap:2.5mm; padding:1.1mm 0; font-size:8.2pt; border-bottom:1px dashed #EFE3E8; } .nbd-po .po-terms > div:last-child{ border-bottom:none; } .nbd-po .po-terms span{ color:#7A707D; white-space:nowrap; } .nbd-po .po-terms b{ font-weight:600; color:#2B1220; } .nbd-po .po-conf{ border:1.2px solid #9C3957; border-radius:3mm; padding:3.5mm 4.5mm; display:flex; flex-direction:column; } .nbd-po .po-conf p{ margin:0 0 1mm; font-size:8.4pt; color:#4E4652; } .nbd-po .po-conf .row{ display:grid; grid-template-columns:27mm 1fr; align-items:end; gap:2mm; font-size:8.2pt; color:#7A707D; white-space:nowrap; } .nbd-po .po-conf .row i{ display:block; border-bottom:1px solid #C9AEBB; } .nbd-po .po-conf .row.nm{ height:10mm; } .nbd-po .po-conf .row.sg{ height:17mm; } .nbd-po .po-conf .row.dt{ height:10mm; } .nbd.nbd-po .nbd-end{ margin-top:4mm; }/* the document number in the first box of the strip stays on one line (e.g. RC-Q-0001-2026) */ .nbd.nbd-inv .nbd-strip div:first-child b{ white-space:nowrap; }/* proforma invoice (30 Sep 2026): the advance row under the totals stands out — it is the amount the client pays now */ .nbd.nbd-inv .nbd-totals .adv{ background:#FBF3F6; border-top:1px solid #EAD9E0; } .nbd.nbd-inv .nbd-totals .adv span{ color:#4A1D2E; font-weight:600; } .nbd.nbd-inv .nbd-totals .adv b{ font-weight:800; color:#4A1D2E; } /* ============ REVISION 25 — delivery note (owner merged options B and C, approved 30 Sep 2026) ============ */ .nbd-dn .nbd-items td.d b{ display:block; font-weight:700; } .nbd-dn .nbd-items td.d span{ display:block; color:#7A707D; font-size:8.4pt; margin-top:.4mm; } .nbd-dn .dn-top{ display:grid; grid-template-columns:1.25fr 1fr; gap:6mm; margin-bottom:6mm; break-inside:avoid; } .nbd-dn .dn-card{ border:1px solid #E6D6DE; border-radius:3mm; padding:3.5mm 4.5mm; font-size:8.8pt; } .nbd-dn .dn-card .nm{ font-size:12.5pt; font-weight:800; color:#2B1220; margin-bottom:.6mm; } .nbd-dn .dn-card .ln{ color:#4E4652; } .nbd-dn .dn-kv > div:not(.h){ display:flex; justify-content:space-between; gap:4mm; padding:1.3mm 0; border-bottom:1px dashed #E6D6DE; } .nbd-dn .dn-kv > div:last-child{ border-bottom:none; } .nbd-dn .dn-kv span{ color:#7A707D; } .nbd-dn .dn-kv b{ text-align:right; } .nbd-dn .dn-prog{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #E6D6DE; border-radius:3mm; margin-bottom:6mm; overflow:hidden; break-inside:avoid; } .nbd-dn .dn-prog div{ padding:3mm 4mm; } .nbd-dn .dn-prog div + div{ border-left:1px solid #EFE3E8; } .nbd-dn .dn-prog span{ display:block; font-size:7pt; letter-spacing:.12em; text-transform:uppercase; color:#9C3957; font-weight:700; } .nbd-dn .dn-prog b{ font-size:12pt; font-weight:800; color:#2B1220; } .nbd-dn .dn-prog .now{ background:#FBF3F6; } .nbd-dn .dn-note{ margin-top:5mm; border:1px solid #E6D6DE; border-radius:3mm; padding:3mm 4.5mm; font-size:8.4pt; color:#3E3640; line-height:1.45; break-inside:avoid; } .nbd-dn .dn-note ul{ margin:0; padding-left:4mm; } .nbd-dn .dn-note li{ margin:.3mm 0; } .nbd-dn .dn-last{ display:grid; grid-template-columns:1fr 1fr; gap:6mm; margin-top:5mm; break-inside:avoid; } .nbd-dn .dn-rcv{ border:1.2px solid #9C3957; border-radius:3mm; padding:3.5mm 4.5mm; } .nbd-dn .dn-rcv.us{ border-color:#D9C3CD; } .nbd-dn .dn-rcv .row{ display:grid; grid-template-columns:27mm 1fr; align-items:end; gap:2mm; font-size:8.2pt; color:#7A707D; white-space:nowrap; } .nbd-dn .dn-rcv .row i{ display:block; border-bottom:1px solid #C9AEBB; } .nbd-dn .dn-rcv .row.nm{ height:10mm; } .nbd-dn .dn-rcv .row.sg{ height:16mm; } .nbd-dn .dn-rcv .row.dt{ height:10mm; } /* 13 Oct 2026 (owner): delivery note — "Delivery method" box, sizes as a small table in size order, total row, names on the signature lines */ .nbd-dn .dn-way{ font-size:11pt; font-weight:800; color:#2B1220; margin:-.4mm 0 1.4mm; } .nbd-dn .dn-szg{ display:inline-flex; flex-wrap:wrap; margin-top:2mm; border:1px solid #E6D6DE; border-radius:2mm; overflow:hidden; } .nbd-dn .dn-szg > div{ min-width:11mm; text-align:center; border-left:1px solid #EFE3E8; } .nbd-dn .dn-szg > div:first-child{ border-left:none; } .nbd-dn .dn-szg em{ display:block; font-style:normal; font-size:7.4pt; font-weight:700; color:#9C3957; background:#FBF6F8; padding:1mm 2mm; border-bottom:1px solid #EFE3E8; } .nbd-dn .dn-szg b{ display:block !important; font-weight:800 !important; font-size:9.4pt; color:#2B1220; padding:1.2mm 2mm; font-variant-numeric:tabular-nums; } .nbd-dn .dn-szg .lb em, .nbd-dn .dn-szg .lb b{ text-align:left; color:#7A707D; font-weight:700 !important; font-size:7.4pt; } .nbd-dn .nbd-items td.d span.dn-over{ color:#9C3957; font-weight:700; margin-top:1.4mm; } .nbd-dn .nbd-items tr.dn-tot td{ border-top:2px solid #7E3152; border-bottom:none; font-weight:800; padding-top:3mm; color:#2B1220; } .nbd-dn .dn-rcv .row i{ font-style:normal; color:#2B1220; font-weight:700; font-size:9pt; padding-bottom:.6mm; } .nbd-dn .dn-rcv{ padding:2.6mm 4.5mm 3mm; } .nbd-dn .dn-rcv .row.nm{ height:7.5mm; } .nbd-dn .dn-rcv .row.sg{ height:11mm; } .nbd-dn .dn-rcv .row.dt{ height:7.5mm; } /* lower signature boxes (owner, 13 Oct 2026) */ .nbd-dn .nbd-items td.d span.dn-style{ color:#4E4652; } .nbd-dn .nbd-items td.d span.dn-style strong{ color:#2B1220; font-weight:800; } .nbd.nbd-dn .nbd-end{ margin-top:4mm; } /* ============ REVISION 26 — Order Management → Delivery: issue delivery orders (owner approved 30 Sep 2026; the Accounts form look for #nbDvCard) ============ */ html[data-opt="2"] #nbDvCard .nb-accform{ padding:16px 18px 18px; border-radius:16px; background:#FAF9FC; border:1px solid #EFEAF2; margin:4px 0 20px; } html[data-opt="2"] #nbDvCard .nb-accform .nb-grid2{ grid-template-columns:repeat(4, minmax(0,1fr)); } html[data-opt="2"] #nbDvCard .nb-accform .nb-span2{ grid-column:span 2; } @media (max-width:1000px){ html[data-opt="2"] #nbDvCard .nb-accform .nb-grid2{ grid-template-columns:1fr 1fr; } } html[data-opt="2"] .nb-dv-sum{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:10px; margin:4px 0 14px; } html[data-opt="2"] .nb-dv-sum > div{ background:#fff; border:1px solid #EFEAF2; border-radius:12px; padding:10px 14px; min-width:0; } html[data-opt="2"] .nb-dv-sum > div.now{ background:#FFF7F9; border-color:#F2D9E2; } html[data-opt="2"] .nb-dv-sum span{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } html[data-opt="2"] .nb-dv-sum b{ display:block; font-size:18px; font-weight:800; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-opt="2"] .nb-dv-sum b em, html[data-opt="2"] .nb-dv-sum i em{ font-style:normal; font-size:12px; font-weight:600; color:var(--text-muted); } html[data-opt="2"] .nb-dv-sum i{ display:block; font-style:normal; font-size:12px; color:var(--text-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-opt="2"] .nb-lbl-unit .nb-unit{ margin-left:6px; } html[data-opt="2"] .nb-lbl-unit .nb-unit button{ font-size:11px; padding:2px 8px; } @media (max-width:900px){ html[data-opt="2"] .nb-dv-sum{ grid-template-columns:1fr 1fr; } } /* ============ REVISION 27 — receipt / payment voucher (owner approved round 3, 1 Oct 2026): 9 × 6.5 in landscape, voucher-book lines, no TRN ============ */ @page nbvoucher{ size:9in 6.5in; margin:0; } body.nb-print #nbPrintRoot .nbd.nbd-v{ page:nbvoucher; } .nbd.nbd-v{ width:9in; min-height:6.5in; font-size:9pt; } .nbd.nbd-v .nbd-band{ padding:3.5mm 9mm 3mm; } .nbd.nbd-v .nbd-lg img{ width:16mm; height:16mm; } .nbd.nbd-v .nbd-name .l1{ font-size:14pt; } .nbd.nbd-v .nbd-name .l2{ font-size:9.5pt; margin-top:.8mm; } .nbd.nbd-v .nbd-name .rule{ margin-top:1.2mm; } .nbd.nbd-v .nbd-name .c{ margin-top:1.2mm; font-size:7.2pt; } .nbd.nbd-v .nbd-doc .t{ font-size:18pt; } .nbd.nbd-v .nbd-body{ padding:0 12mm; } .nbd.nbd-v .nbd-headspace{ height:0; } .nbd.nbd-v .nbd-footspace{ height:10mm; } .nbd.nbd-v .nbd-foot .f2{ padding:2mm 9mm; min-height:7mm; font-size:7.2pt; } .nbd.nbd-v .nbd-end{ margin-top:2mm; } .nbd.nbd-v .nbd-end .nbd-sign.nbd-sign2{ padding-top:10mm; grid-auto-columns:52mm; } /* top row: voucher number · date · AMOUNT (the amount is the big figure, once) */ .nbd.nbd-v .nbd-strip{ padding:0 12mm; align-items:center; grid-template-columns:auto auto 1fr !important; gap:0; background:#FCF8FA; border-bottom:1px solid #EADCE3; } .nbd.nbd-v .nbd-strip div{ padding:2.2mm 9mm 2.2mm 0; } .nbd.nbd-v .nbd-strip b{ font-size:10.5pt; } /* voucher no. and date: two neat fields with a thin divider between them */ .nbd.nbd-v .nbd-strip div:nth-child(2){ padding-left:9mm; border-left:1px solid #E6D6DE; } .nbd.nbd-v .nbd-strip div:first-child b{ font-size:12.5pt; font-weight:800; color:#4A1D2E; letter-spacing:.02em; } .nbd.nbd-v .nbd-strip span{ font-size:6.8pt; } .nbd.nbd-v .nbd-strip div:last-child{ justify-self:end; text-align:right; border:1.5px solid #7E3152; border-radius:2.5mm; padding:1.6mm 4mm; margin:1.6mm 0; background:#fff; } .nbd.nbd-v .nbd-strip div:last-child b{ font-size:16pt; font-weight:800; color:#4A1D2E; line-height:1.1; } .nbd.nbd-v .nbd-strip b .cur{ display:inline; letter-spacing:.04em; text-transform:none; color:inherit; font-weight:600; opacity:.75; font-size:.6em; } /* the voucher book: full-width ruled lines */ .nbd-v .vb{ padding-top:2mm; display:flex; flex-direction:column; justify-content:space-around; min-height:80mm; } /* the six lines sit in the middle between the top row and the signatures */ /* cheque details: No. short on the left, Bank with the most room, Dated on the right */ .nbd-v .vb .chq{ display:grid; grid-template-columns:30mm 1fr 42mm; gap:5mm; align-items:end; } /* a long bank name may take two lines; No. and Dated stay on its last line */ .nbd-v .vb .chq span{ display:flex; gap:2mm; align-items:baseline; min-width:0; } .nbd-v .vb .chq em{ font-style:normal; color:#7A707D; font-weight:400; font-size:8.8pt; white-space:nowrap; } /* even round dots under each line (drawn, not the browser's uneven dotted border) */ .nbd-v .vb .ln{ display:grid; grid-template-columns:46mm 1fr; align-items:end; gap:3mm; padding:3.2mm 0 1.8mm; background-image:radial-gradient(circle, #B99AA8 0.55px, transparent 0.9px); background-size:5px 3px; background-repeat:repeat-x; background-position:0 100%; } .nbd-v .vb .ln > span{ color:#7A707D; font-size:8.8pt; white-space:nowrap; } .nbd-v .vb .ln > b{ font-weight:600; color:#2B1220; font-size:10pt; } .nbd-v .vb .ln.words > b{ font-size:9.6pt; } .nbd-v .vb .mode{ display:flex; align-items:center; gap:5mm; flex-wrap:wrap; } .nbd-v .vb .box{ display:inline-flex; align-items:center; gap:1.6mm; font-weight:600; color:#2B1220; } .nbd-v .vb .box i{ width:3.6mm; height:3.6mm; border:1.2px solid #9C3957; border-radius:.8mm; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:8pt; line-height:1; color:#9C3957; } .nbd-v .vb .mode em{ font-style:normal; color:#7A707D; font-weight:400; margin-right:1mm; } .nbd-v .vb .mode .sep{ color:#D9C3CD; } /* ============ REVISION 28 — option 1 (owner, 1 Oct 2026): proforma without VAT; the tax invoice deducts the advance received ============ */ .nbd.nbd-inv .nbd-totals .less span em{ display:block; font-style:normal; font-size:7.6pt; color:#8A7B85; margin-top:.3mm; } .nbd.nbd-inv .nbd-totals .less b{ font-weight:700; color:#4A1D2E; } /* ============ REVISION 29 — salary slips (owner approved option A in BLACK, 1 Oct 2026): 4 per A4 page, normal size, dotted cut lines with ✂ ============ */ .nbs .nbs-sheet{ width:210mm; height:297mm; padding:8mm; display:grid; grid-template-columns:1fr; grid-template-rows:repeat(4, 1fr); gap:8mm; position:relative; background:#fff; margin:0 auto 6mm; font-family:'Plus Jakarta Sans',sans-serif; color:#111; text-align:left; box-sizing:border-box; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .nbs *{ box-sizing:border-box; } body.nb-print #nbPrintRoot .nbs .nbs-sheet{ page:nbdoc; margin:0; break-after:page; } body.nb-print #nbPrintRoot .nbs .nbs-sheet:last-child{ break-after:auto; } .nbs .cut{ position:absolute; left:2mm; right:2mm; height:3px; pointer-events:none; background-image:radial-gradient(circle, #8A8A8A 1.15px, transparent 1.45px); background-size:7px 3px; background-repeat:repeat-x; } .nbs .cut::before{ content:'✂'; position:absolute; left:-1mm; top:50%; transform:translateY(-52%); font-size:9pt; line-height:1; color:#6E6E6E; background:#fff; padding:0 1mm; } .nbs .slip{ border:1px solid #BDBDBD; border-radius:2.5mm; padding:3mm 4mm 2.6mm; display:flex; flex-direction:column; gap:1.7mm; overflow:hidden; font-size:8.6pt; line-height:1.3; } .nbs .slip > *{ flex-shrink:0; } .nbs .sh{ display:flex; align-items:center; gap:2.5mm; padding-bottom:1.4mm; border-bottom:1.5px solid #1A1A1A; } .nbs .sh img{ width:9mm; height:9mm; object-fit:contain; filter:grayscale(1); } .nbs .sh .co{ flex:1; line-height:1.1; } .nbs .sh .co b{ display:block; font-family:'Cinzel',serif; font-size:10pt; color:#111; } .nbs .sh .co span{ font-family:'Cinzel',serif; font-size:7.2pt; color:#111; } .nbs .sh .tt{ text-align:right; line-height:1.15; } .nbs .sh .tt b{ display:block; font-size:10pt; font-weight:800; letter-spacing:.06em; color:#111; } .nbs .sh .tt span{ font-size:8pt; color:#555; font-weight:600; } .nbs .ab{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.15fr); gap:5mm; align-items:start; } .nbs .em{ display:grid; grid-template-columns:1fr 1fr; gap:1mm 3mm; } .nbs .em span, .nbs .fx span{ display:block; font-size:6.8pt; letter-spacing:.08em; text-transform:uppercase; color:#555; font-weight:700; } .nbs .em b{ font-size:8.8pt; } .nbs .fx{ display:grid; grid-template-columns:1fr 1fr; gap:1mm 3mm; background:#EDEDED; border-radius:1.5mm; padding:1.4mm 2mm; margin-top:1.5mm; } .nbs .fx b{ font-size:8.4pt; font-weight:600; } .nbs .t{ width:100%; border-collapse:collapse; } .nbs .t th{ text-align:left; font-size:6.8pt; letter-spacing:.08em; text-transform:uppercase; color:#555; padding:0 0 .8mm; border-bottom:1px solid #9E9E9E; } .nbs .t td{ padding:.4mm 0; border-bottom:1px dashed #E0E0E0; } .nbs .t td:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .nbs .t tr.tot td{ font-weight:800; border-bottom:none; border-top:1px solid #9E9E9E; } .nbs .nt{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0 2mm; border:1.5px solid #1A1A1A; border-radius:1.8mm; padding:1.2mm 2.5mm; margin-top:1.6mm; } .nbs .nt > span{ font-weight:700; color:#111; white-space:nowrap; } .nbs .nt b{ font-size:11pt; font-weight:800; color:#111; white-space:nowrap; } .nbs .nt .cur{ font-size:.62em; font-weight:600; margin-right:1mm; opacity:.75; } .nbs .sg{ display:grid; grid-template-columns:repeat(3, 1fr); gap:5mm; margin-top:auto; padding-top:4mm; } .nbs .sg div{ border-top:1px solid #444; padding-top:.8mm; font-size:7.4pt; color:#555; } .nb-overlay > .nbs{ flex-shrink:0; } /* salary slip: the signatures sit under Earnings / Deductions, beside the employee box, so a 2-line name never pushes them out (owner, 8 Oct 2026) */ .nbs .ab{ grid-template-rows:auto 1fr; } .nbs .ab > :first-child{ grid-row:1 / span 2; } /* owner, 10 Oct 2026: a very long name (4–5 words) uses the full width of the employee box, so the slip stays in one frame with the signatures */ .nbs .em .nm{ grid-column:1 / -1; } .nbs .em .nm.lg b{ font-size:8pt; line-height:1.2; } .nbs .ab .em{ gap:.6mm 3mm; } .nbs .ab .fx{ margin-top:1mm; } .nbs .ab > .sg{ grid-column:2 / span 2; grid-row:2; align-self:end; margin-top:0; padding-top:5mm; } .nbs .t td{ padding:.2mm 0; } .nbs .t th{ padding-bottom:.5mm; } .nbs .nt{ margin-top:1.2mm; padding:.9mm 2.5mm; } /* ============ REVISION 30 — client statement of account (owner approved option A, round 3, 1 Oct 2026) ============ */ .nbd-soa .soa .nbd-items td{ padding:2.4mm 3mm; } .nbd-soa .soa .nbd-items td.p{ color:#4E4652; font-size:8.8pt; } .nbd-soa .soa .nbd-items tr.op td{ background:#FCF8FA; font-weight:600; } .nbd-soa .soa .nbd-items td:nth-child(1), .nbd-soa .soa .nbd-items td:nth-child(2){ white-space:nowrap; } .nbd-soa .soa .nbd-items tfoot td{ padding:2.6mm 3mm; border:none; border-top:2px solid #7E3152; font-weight:800; } .nbd-soa .soa .sumrow{ display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid #E6D6DE; border-radius:3mm; overflow:hidden; margin-bottom:6mm; break-inside:avoid; } .nbd-soa .soa .sumrow div{ padding:2.6mm 4mm; } .nbd-soa .soa .sumrow div + div{ border-left:1px solid #EFE3E8; } .nbd-soa .soa .sumrow .due{ background:#FBF3F6; } .nbd-soa .soa .sumrow span{ display:block; font-size:7pt; letter-spacing:.12em; text-transform:uppercase; color:#9C3957; font-weight:700; } .nbd-soa .soa .sumrow b{ font-size:10.5pt; white-space:nowrap; } .nbd-soa .soa .sumrow b .cur, .nbd-soa .nbd-strip b .cur{ display:inline; letter-spacing:.04em; text-transform:none; color:inherit; font-weight:600; opacity:.75; } .nbd-soa .nbd-strip b{ white-space:nowrap; } .nbd-soa .nbd-strip div:last-child{ text-align:right; } .nbd-soa .soa .nbd-to .rt{ text-align:right; } .nbd-soa .soa .endr{ margin-top:5mm; text-align:left; break-inside:avoid; } .nbd-soa .soa .endr .nbd-words{ margin-top:0; } .nbd-soa .soa .endr .note{ margin-top:2.2mm; font-size:7.8pt; line-height:1.45; color:#0B5F86; } .nbd-soa .soa .endr .note b{ font-weight:800; } /* ============ REVISION 31 — vouchers on A4 (owner, 1 Oct 2026): ORIGINAL (top) + COPY (bottom), dotted ✂ cut line; receipt, payment, petty cash ============ */ .nbv-sheet{ width:210mm; height:297mm; position:relative; background:#fff; margin:0 auto 6mm; display:grid; grid-template-rows:148.5mm 148.5mm; box-shadow:0 18px 50px -20px rgba(22,20,26,.45); } body.nb-print #nbPrintRoot .nbv-sheet{ page:nbdoc; margin:0; box-shadow:none; break-after:page; } body.nb-print #nbPrintRoot .nbv-sheet:last-child{ break-after:auto; } .nbv-sheet .nbd.nbd-v.nbd-vh{ width:210mm; height:148.5mm; min-height:0; overflow:hidden; box-shadow:none; margin:0; } body.nb-print #nbPrintRoot .nbv-sheet .nbd.nbd-v.nbd-vh{ page:auto; width:210mm; height:148.5mm; } body.nb-print #nbPrintRoot .nbv-sheet .nbd-foot{ position:absolute; } .nbv-sheet .cut{ position:absolute; left:2mm; right:2mm; top:calc(148.5mm - 1.5px); height:3px; pointer-events:none; background-image:radial-gradient(circle, #8A8A8A 1.15px, transparent 1.45px); background-size:7px 3px; background-repeat:repeat-x; } .nbv-sheet .cut::before{ content:'✂'; position:absolute; left:-1mm; top:50%; transform:translateY(-52%); font-size:9pt; line-height:1; color:#6E6E6E; background:#fff; padding:0 1mm; } /* half-page voucher: the same design, a little tighter */ .nbd.nbd-vh .nbd-band{ padding:3mm 8mm 2.4mm; } .nbd.nbd-vh .nbd-lg img{ width:14mm; height:14mm; } .nbd.nbd-vh .nbd-name .l1{ font-size:13pt; } .nbd.nbd-vh .nbd-name .l2{ font-size:8.8pt; } .nbd.nbd-vh .nbd-doc .t{ font-size:16pt; } .nbd.nbd-vh .nbd-doc .cp{ display:inline-block; margin-top:1.2mm; font-size:6.8pt; letter-spacing:.18em; font-weight:800; color:#9C3957; border:1px solid #E6D6DE; border-radius:99px; padding:.3mm 2.6mm; } .nbd.nbd-vh .nbd-doc{ text-align:right; } .nbd.nbd-vh .nbd-strip{ padding:0 10mm; } .nbd.nbd-vh .nbd-strip div{ padding:1.6mm 8mm 1.6mm 0; } .nbd.nbd-vh .nbd-strip div:nth-child(2){ padding-left:8mm; } .nbd.nbd-vh .nbd-strip div:first-child b{ font-size:11pt; } .nbd.nbd-vh .nbd-strip div:last-child{ padding:1.2mm 3.5mm; margin:1.2mm 0; } .nbd.nbd-vh .nbd-strip div:last-child b{ font-size:14pt; } .nbd.nbd-vh .nbd-body{ padding:0 10mm; } .nbd.nbd-vh .nbd-footspace{ height:9mm; } .nbd.nbd-vh .nbd-foot .f2{ padding:1.6mm 8mm; min-height:6mm; font-size:6.8pt; } .nbd-vh .vb{ min-height:72mm; padding-top:1mm; } .nbd-vh .vb.vb5{ min-height:68mm; } /* the lines fill the half page (no gap above the signatures) */ .nbd-vh .vb .ln{ padding:2.2mm 0 1.4mm; } .nbd-vh .vb .ln > b{ font-size:9.4pt; } .nbd-vh .vb .ln > span{ font-size:8.4pt; } .nbd.nbd-vh .nbd-end{ margin-top:1mm; } .nbd.nbd-vh .nbd-end .nbd-sign.nbd-sign2{ padding-top:7mm; } /* ===== REVISION 32 (1 Oct 2026) — cheque print onto the Janata Bank leaf, 180 × 90 mm (nbDoc.cheque) ===== */ @page nbcheque{ size:180mm 90mm; margin:0; } .nbq{ position:relative; width:180mm; height:90mm; overflow:hidden; background:#fff; color:#111; font-family:'Plus Jakarta Sans',sans-serif; box-sizing:border-box; } .nbq .f{ position:absolute; white-space:nowrap; line-height:1; transform:translateY(-100%); } /* left/top = start of the text on the line it sits on */ .nbq .f.d{ font-size:11pt; font-weight:700; letter-spacing:.06em; } .nbq .f.p{ font-size:11pt; font-weight:700; letter-spacing:.04em; } .nbq .f.w{ font-size:10pt; font-weight:600; } .nbq .f.a{ font-size:12pt; font-weight:800; } .nbq .x{ position:absolute; width:25mm; transform:rotate(-11deg); transform-origin:left top; border-top:.35mm solid #111; border-bottom:.35mm solid #111; padding:.7mm 0; text-align:center; line-height:1.1; } .nbq .x span{ font-size:6.8pt; font-weight:800; letter-spacing:.05em; white-space:nowrap; } .nbq .tpl i{ position:absolute; font-style:normal; } .nbq .tpl .t{ border-bottom:.3mm solid #BDBDBD; } .nbq .tpl .tb{ border:.3mm solid #BDBDBD; } .nbq .tpl .tl{ font:7pt Arial,sans-serif; color:#9A9A9A; transform:translateY(-100%); } .nbq.nbq-test{ outline:.2mm dashed #C8C8C8; outline-offset:-.2mm; } .nbq.nbq-screen{ background:linear-gradient(135deg,#F3F8FB 0%,#EEF4F4 100%); border:1px solid #D7E2E6; border-radius:6px; box-shadow:0 10px 30px -18px rgba(22,20,26,.35); } .nbq-zoom{ overflow:hidden; } /* the panel shrinks the leaf to fit (zoom set by the panel) */ body.nb-print #nbPrintRoot .nbq{ page:nbcheque; margin:0; outline-offset:-.2mm; } html[data-opt="2"] .nb-unit.nb-unit-field{ display:flex; height:46px; margin:0; box-sizing:border-box; border-radius:12px; padding:4px; } html[data-opt="2"] .nb-unit.nb-unit-field button{ flex:1; font-size:13px; border-radius:9px; } /* a two-way choice the size of an input (cheque crossing) */ /* ===== REVISION 33 (1 Oct 2026, approved) — cheque layouts: any bank's cheque, ruler sheet (nbChq) ===== */ .nbq .tpl .t, .nbq .tpl .tb, .nbq .tpl .tl{ position:absolute; font-style:normal; } .nbq.nbq-ruler{ outline:none; } .nbq.nbq-ruler svg{ display:block; } html[data-opt="2"] .nbcd-steps{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } html[data-opt="2"] .nbcd-steps span{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:99px; background:#F2F3F5; color:var(--text-muted); font-size:12.5px; font-weight:700; } html[data-opt="2"] .nbcd-steps span b{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#fff; font-size:11.5px; } html[data-opt="2"] .nbcd-steps span.on{ background:#E3F1EF; color:#0F5F58; } html[data-opt="2"] .nbcd-steps span.on b{ background:#0F766E; color:#fff; } html[data-opt="2"] .nbcd-steps span.done{ color:var(--text); } html[data-opt="2"] .nbcd-steps span.done b{ background:#0F766E; color:#fff; } html[data-opt="2"] .nbcd-top{ grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); } html[data-opt="2"] .nbcd-span2{ grid-column:auto; } html[data-opt="2"] .nbcd-photo{ display:flex; align-items:center; gap:14px; margin:4px 0 18px; font-size:12.5px; color:var(--text-muted); line-height:1.5; } html[data-opt="2"] .nbcd-up{ width:auto !important; flex:none; cursor:pointer; display:inline-flex; align-items:center; padding:0 18px; } html[data-opt="2"] .nbcd-2{ width:auto !important; background:var(--card) !important; color:var(--text) !important; border:1px solid var(--border) !important; } html[data-opt="2"] .nbcd-rawwrap{ background:#1E1A22; border-radius:12px; padding:14px; } html[data-opt="2"] .nbcd-raw{ position:relative; max-width:900px; margin:0 auto; touch-action:none; user-select:none; } html[data-opt="2"] .nbcd-raw img{ display:block; width:100%; } html[data-opt="2"] .nbcd-raw svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } html[data-opt="2"] .nbcd-raw polygon{ fill:rgba(15,118,110,.12); stroke:#2DD4BF; stroke-width:.35; vector-effect:non-scaling-stroke; } html[data-opt="2"] .nbcd-dot{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:#fff; border:4px solid #0F766E; box-shadow:0 2px 8px rgba(0,0,0,.4); cursor:grab; touch-action:none; } html[data-opt="2"] .nbcd-place{ display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:20px; align-items:start; } @media (max-width:1180px){ html[data-opt="2"] .nbcd-place{ grid-template-columns:1fr; } } html[data-opt="2"] .nbcd-leafwrap{ overflow:hidden; } html[data-opt="2"] .nbcd-leaf{ position:relative; background:#F3F8FB center / 100% 100% no-repeat; border:1px solid #D7E2E6; border-radius:4px; font-family:'Plus Jakarta Sans',sans-serif; color:#0B4F4A; touch-action:none; user-select:none; } html[data-opt="2"] .nbcd-leaf.empty{ background-image:repeating-linear-gradient(0deg,transparent 0 9.5mm,#DCE7EA 9.5mm 10mm),repeating-linear-gradient(90deg,transparent 0 9.5mm,#DCE7EA 9.5mm 10mm); } html[data-opt="2"] .nbcd-f{ position:absolute; transform:translateY(-100%); border-bottom:.45mm dashed #0F766E; cursor:move; white-space:nowrap; line-height:1; padding-bottom:.4mm; } html[data-opt="2"] .nbcd-f .f{ position:static; transform:none; color:#0B4F4A; background:rgba(255,255,255,.55); } html[data-opt="2"] .nbcd-f .f.d{ font-size:11pt; font-weight:700; letter-spacing:.06em; } html[data-opt="2"] .nbcd-f .f.p{ font-size:11pt; font-weight:700; letter-spacing:.04em; } html[data-opt="2"] .nbcd-f .f.w{ font-size:10pt; font-weight:600; } html[data-opt="2"] .nbcd-f .f.a{ font-size:12pt; font-weight:800; } html[data-opt="2"] .nbcd-f.on{ border-bottom-style:solid; background:rgba(15,118,110,.10); outline:1px solid rgba(15,118,110,.35); } html[data-opt="2"] .nbcd-w{ position:absolute; right:-2mm; bottom:-2mm; width:4mm; height:4mm; border-radius:50%; background:#0F766E; border:2px solid #fff; cursor:ew-resize; display:none; } html[data-opt="2"] .nbcd-f.on .nbcd-w{ display:block; } html[data-opt="2"] .nbcd-x{ transform:none; border:none; padding:0; } html[data-opt="2"] .nbcd-x .x{ position:relative; width:25mm; transform:rotate(-11deg); transform-origin:left top; border-top:.35mm solid #0F766E; border-bottom:.35mm solid #0F766E; padding:.7mm 0; text-align:center; line-height:1.1; background:rgba(255,255,255,.55); } html[data-opt="2"] .nbcd-x .x span{ font-size:6.8pt; font-weight:800; letter-spacing:.05em; white-space:nowrap; } html[data-opt="2"] .nbcd-x.on .x{ outline:1px solid rgba(15,118,110,.45); background:rgba(15,118,110,.10); } html[data-opt="2"] .nbcd-tbl td, html[data-opt="2"] .nbcd-tbl th{ padding:8px 8px; } html[data-opt="2"] .nbcd-tbl tr{ cursor:pointer; } html[data-opt="2"] .nbcd-tbl tr.on td{ background:#E3F1EF; } html[data-opt="2"] .nbcd-tbl td b{ font-size:12.5px; } html[data-opt="2"] .nbcd-tbl input{ width:70px; height:34px; padding:0 8px; border:1px solid #E1E2E7; border-radius:8px; font:inherit; font-size:12.5px; } html[data-opt="2"] .nbcd-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; } html[data-opt="2"] .nbcd .nb-err{ display:none; margin-top:10px; color:#B3413C; font-size:13px; font-weight:600; } /* ===== REVISION 34 (2 Oct 2026, owner approved round 3) — bank statement (nbDoc.bankStatement) ===== */ .nbd-bst .nbd-strip b{ white-space:nowrap; } .nbd-bst .nbd-strip div:nth-child(2){ text-align:center; } .nbd-bst .nbd-strip div:last-child{ text-align:right; } .bst .nbd-items td{ padding:1.7mm 2.2mm; } .bst .nbd-items th{ padding-left:2.2mm; padding-right:2.2mm; } .bst .nbd-items td.p{ color:#4E4652; font-size:8.8pt; } .bst .nbd-items td:nth-child(1), .bst .nbd-items td:nth-child(2){ white-space:nowrap; } .bst .nbd-items tfoot td{ padding:2.6mm 3mm; border-top:2px solid #7E3152; font-weight:800; } .bst .nbd-items.white tbody tr td{ background:#fff !important; } .bst .nbd-items.white tbody tr.op td{ font-weight:700; } .bst .nbd-items.white tbody tr.mh td{ background:#F4ECF0 !important; font-weight:800; font-size:8.4pt; letter-spacing:.06em; text-transform:uppercase; color:#7E3152; padding:1.3mm 2.2mm; } /* only the week lines carry colour */ .bst .top2{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:6mm; margin-bottom:5mm; align-items:stretch; } .bst .bcard{ border:1px solid #E6D6DE; border-radius:3mm; padding:3.4mm 4.5mm 3.6mm; } .bst .bcard > .h{ font-size:7.2pt; letter-spacing:.14em; text-transform:uppercase; color:#9C3957; font-weight:700; margin-bottom:1.6mm; } .bst .bcard .nm{ font-size:12pt; font-weight:800; color:#2B1220; line-height:1.3; } .bst .bcard .br{ font-size:9.5pt; font-weight:600; color:#4E4652; } .bst .bcard .ln{ font-size:9pt; color:#4E4652; line-height:1.55; } .bst .bcard .det{ display:grid; grid-template-columns:24mm 1fr; row-gap:.8mm; margin-top:2.6mm; padding-top:2.4mm; border-top:1px solid #EFE3E8; font-size:9pt; } .bst .bcard .det span{ font-size:7pt; letter-spacing:.12em; text-transform:uppercase; color:#9C3957; font-weight:700; align-self:center; } .bst .bcard .det b{ font-weight:700; white-space:nowrap; } .bst .recon2 div{ display:flex; justify-content:space-between; gap:3mm; font-size:9.4pt; line-height:1.85; white-space:nowrap; } .bst .recon2 span{ color:#4E4652; } .bst .recon2 div.t{ border-top:1px solid #E6D6DE; margin-top:1.2mm; padding-top:1.2mm; font-weight:800; font-size:10.5pt; } .bst .recon2 div.t span{ color:#2B1220; } .bst .recon2 .cur, .bst .tot4 .cur{ display:inline; letter-spacing:.04em; font-weight:600; opacity:.75; } .bst .waitblock{ break-inside:avoid; } .bst .waitblock.bcard{ margin-top:5mm; padding-bottom:3mm; } .bst .waitblock .nbd-items{ margin:0; } .bst .wait td{ padding:1.5mm 2.2mm; font-size:9pt; } .bst .tot4{ display:grid; grid-template-columns:repeat(4, auto); justify-content:space-between; column-gap:6mm; margin-top:3mm; padding-top:2.6mm; border-top:1.5px solid #7E3152; } .bst .tot4 span{ display:block; font-size:8pt; color:#7A7280; font-weight:600; white-space:nowrap; } .bst .tot4 b{ display:block; font-size:10.5pt; font-weight:800; white-space:nowrap; margin-top:.4mm; } .bst .tot4 .end{ text-align:right; } .bst .tot4 .end span{ color:#9C3957; } .bst .tot4 .end b{ color:#4A1D2E; } /* ===== REVISION 35 (2 Oct 2026, owner approved option B) — production section report (nbDoc.productionReport) ===== */ .prr .nbd-items{ width:100%; table-layout:fixed; } .prr .nbd-items td{ padding:1.7mm 2mm; vertical-align:top; } .prr .nbd-items td.c1{ width:20mm; white-space:nowrap; } .prr .nbd-items td.c3{ width:27mm; white-space:nowrap; } .prr .nbd-items td.c4{ width:24mm; white-space:nowrap; } .prr .nbd-items td.c5{ width:33mm; white-space:nowrap; color:#4E4652; font-size:8.6pt; } .prr .nbd-items td.c6{ width:17mm; } .prr .white tbody tr td{ background:#fff !important; } .prr .sumrow{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border:1px solid #E6D6DE; border-radius:3mm; overflow:hidden; margin-bottom:5mm; } .prr .sumrow div{ padding:2.6mm 3.5mm; } .prr .sumrow div + div{ border-left:1px solid #EFE3E8; } .prr .sumrow span{ display:block; font-size:7pt; letter-spacing:.12em; text-transform:uppercase; color:#9C3957; font-weight:700; white-space:nowrap; } .prr .sumrow b{ font-size:11pt; white-space:nowrap; } .prr .sumrow .end{ background:#FBF3F6; } .prr .h2{ margin:5mm 0 1.5mm; font-size:7.2pt; letter-spacing:.14em; text-transform:uppercase; color:#9C3957; font-weight:700; } .prr .og{ break-inside:avoid; margin-bottom:3mm; } .prr .og .oh{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1.5px solid #7E3152; padding:0 0 1.2mm; margin-bottom:.5mm; } .prr .og .oh b{ font-size:10.5pt; color:#2B1220; } .prr .og .oh span{ font-size:8.6pt; color:#4E4652; } .prr .og .oh i{ font-style:normal; font-weight:800; font-size:10pt; color:#4A1D2E; } .prr .mini{ width:100%; border-collapse:collapse; break-inside:avoid; } .prr .mini td{ padding:1mm 0; font-size:9pt; border-bottom:1px solid #F1E8EC; } .prr .mini td:last-child{ text-align:right; font-weight:700; } .prr .none{ padding:6mm 0; color:#7A7280; } .nbd-prr .nbd-strip b{ white-space:nowrap; } .nbd-prr .nbd-strip div:last-child{ text-align:right; } /* ===== REVISION 36 (2 Oct 2026, owner approved Phase 1) — new / edit order with items and sizes, authorization card (rev17) ===== */ html[data-opt="2"] .nbo-item{ border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin-bottom:14px; background:#fff; } html[data-opt="2"] .nbo-item-h{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; } html[data-opt="2"] .nbo-item-h > b{ font-size:14px; } html[data-opt="2"] .nbo-item-r{ display:flex; align-items:center; gap:14px; } html[data-opt="2"] .nbo-item-r .tot{ font-size:13px; color:var(--text-muted); white-space:nowrap; } html[data-opt="2"] .nbo-item-r .tot b{ color:var(--text); font-size:14px; } html[data-opt="2"] .nbo-seg{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:12px; background:#F2F3F5; margin:6px 0 12px; } html[data-opt="2"] .nbo-seg button{ border:none; background:transparent; font:inherit; font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:9px; color:var(--text-muted); cursor:pointer; } html[data-opt="2"] .nbo-seg button.on{ background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(22,20,26,.12); } html[data-opt="2"] .nbo-sizes{ display:grid; gap:6px; } html[data-opt="2"] .nbo-sizes div{ text-align:center; min-width:0; } html[data-opt="2"] .nbo-sizes label{ display:block; font-size:11.5px; font-weight:700; color:var(--text-muted); margin-bottom:4px; white-space:nowrap; } html[data-opt="2"] .nbo-sizes input{ width:100%; height:40px; border:1px solid #E1E2E7; border-radius:10px; text-align:center; font:inherit; font-size:13px; padding:0 2px; box-sizing:border-box; background:#fff; } html[data-opt="2"] .nbo-sizes input.has{ border-color:#9CC9C3; background:#F5FAF9; font-weight:700; } html[data-opt="2"] .nbo-dimrow{ display:flex; align-items:center; gap:8px; margin-bottom:8px; } html[data-opt="2"] .nbo-dimrow input{ width:110px; height:40px; border:1px solid #E1E2E7; border-radius:10px; padding:0 10px; font:inherit; font-size:13px; } html[data-opt="2"] .nbo-dimrow input.q{ width:130px; } html[data-opt="2"] .nbo-dimrow span{ font-size:12.5px; color:var(--text-muted); } html[data-opt="2"] .nbo-add{ width:100%; border:1.5px dashed #C9CDD3; background:transparent; border-radius:14px; height:46px; font:inherit; font-weight:700; color:var(--text-muted); cursor:pointer; } html[data-opt="2"] .nbo-add.small{ width:auto; height:38px; padding:0 16px; font-size:12.5px; } html[data-opt="2"] .nbo-target{ display:flex; justify-content:space-between; align-items:center; background:#E8F3F1; border-radius:12px; padding:12px 16px; margin-top:6px; font-size:13px; color:#0B4F4A; } html[data-opt="2"] .nbo-target b{ font-size:16px; } html[data-opt="2"] .nbo-chips{ display:flex; flex-wrap:wrap; gap:8px; } html[data-opt="2"] .nbo-chips button{ border:1px solid var(--border); background:#fff; border-radius:99px; padding:8px 14px; font:inherit; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; } html[data-opt="2"] .nbo-chips button.on{ border-color:#0F766E; background:#E8F3F1; color:#0B4F4A; } html[data-opt="2"] .nbo-sl{ font-size:12px; font-weight:700; color:var(--text-muted); letter-spacing:.04em; text-transform:uppercase; margin:12px 0 8px; } html[data-opt="2"] .nbo-spec .nbo-sl:first-child{ margin-top:0; } html[data-opt="2"] .nbo-appr{ border:1px solid var(--border); border-radius:16px; padding:16px 20px; background:#fff; margin:0 0 14px; } html[data-opt="2"] .nbo-appr .row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; } html[data-opt="2"] .nbo-appr .k{ font-size:12px; font-weight:700; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; } html[data-opt="2"] .nbo-appr .t{ font-size:16px; font-weight:800; margin-top:4px; } html[data-opt="2"] .nbo-appr .s{ font-size:13px; color:var(--text-muted); margin-top:2px; } html[data-opt="2"] .nbo-appr .b{ display:flex; align-items:center; gap:12px; } html[data-opt="2"] .nbo-appr .b .login-btn{ width:auto; height:42px; padding:0 20px; margin:0; } html[data-opt="2"] .nbo-pill{ display:inline-block; padding:4px 12px; border-radius:99px; font-size:12px; font-weight:700; } html[data-opt="2"] .nbo-pill.wait{ background:#F6EEF3; color:#7E3152; } /* ===== REVISION 37 (2 Oct 2026, owner approved Phase 2) — production with real quantities: daily entries, section lists, sign-off note, finishing overview, gain / loss ===== */ html[data-opt="2"] .p2-bar{ height:8px; border-radius:99px; background:#EEF0F2; overflow:hidden; min-width:70px; } html[data-opt="2"] .p2-bar i{ display:block; height:100%; border-radius:99px; background:#0F766E; } html[data-opt="2"] .p2-sum{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin:4px 0 16px; } html[data-opt="2"] .p2-sum div{ padding:12px 16px; } html[data-opt="2"] .p2-sum div + div{ border-left:1px solid var(--border); } html[data-opt="2"] .p2-sum span{ display:block; font-size:11.5px; font-weight:700; color:var(--text-muted); letter-spacing:.04em; text-transform:uppercase; } html[data-opt="2"] .p2-sum b{ display:block; font-size:20px; margin-top:4px; } html[data-opt="2"] .p2-sum small{ display:block; font-size:12px; color:var(--text-muted); margin-top:2px; } html[data-opt="2"] .p2-sum .bal{ background:#E8F3F1; } html[data-opt="2"] .p2-sum .bal b{ color:#0B4F4A; } html[data-opt="2"] .p2-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; } html[data-opt="2"] .p2-tab{ border:1px solid var(--border); border-radius:12px; padding:10px 14px; min-width:220px; background:#fff; text-align:left; font:inherit; cursor:pointer; } html[data-opt="2"] .p2-tab.on{ border-color:#0F766E; box-shadow:0 0 0 2px rgba(15,118,110,.15); } html[data-opt="2"] .p2-tab b{ display:block; font-size:13.5px; margin-bottom:6px; } html[data-opt="2"] .p2-tab span{ display:block; font-size:12px; color:var(--text-muted); margin-top:5px; } html[data-opt="2"] .p2-today{ border:1px dashed #9CC9C3; background:#F5FAF9; border-radius:14px; padding:14px 16px 12px; margin-bottom:16px; } html[data-opt="2"] .p2-today h4{ margin:0 0 10px; font-size:13px; color:#0B4F4A; } html[data-opt="2"] .p2-sz{ width:100%; border-collapse:separate; border-spacing:0; } html[data-opt="2"] .p2-sz th{ font-size:11.5px; font-weight:700; color:var(--text-muted); text-align:center; padding:0 4px 6px; } html[data-opt="2"] .p2-sz th:first-child{ text-align:left; } html[data-opt="2"] .p2-sz td{ text-align:center; padding:4px; font-size:13px; } html[data-opt="2"] .p2-sz td:first-child{ text-align:left; font-weight:700; color:var(--text-muted); font-size:12px; white-space:nowrap; padding-right:10px; } html[data-opt="2"] .p2-sz input{ width:100%; max-width:84px; height:38px; border:1px solid #C9D9D6; border-radius:10px; text-align:center; font:inherit; font-weight:700; background:#fff; box-sizing:border-box; } html[data-opt="2"] .p2-sz input.has{ border-color:#0F766E; } html[data-opt="2"] .p2-sz tr.tot td{ border-top:1px solid #DDE7E5; font-weight:800; } html[data-opt="2"] .p2-sz td.bal{ color:#0B4F4A; font-weight:800; } html[data-opt="2"] .p2-pill{ display:inline-block; padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap; } html[data-opt="2"] .p2-pill.ok{ background:#E3F1EF; color:#0B4F4A; } html[data-opt="2"] .p2-pill.run{ background:#F2F3F5; color:#4E4652; } html[data-opt="2"] .p2-pill.short{ background:#F6EEF3; color:#7E3152; } html[data-opt="2"] .p2-pill.wait{ background:#fff; border:1px dashed #C9CDD3; color:#8A8790; } html[data-opt="2"] .p2-btn{ width:auto !important; height:36px; padding:0 14px !important; margin:0 !important; font-size:12.5px !important; white-space:nowrap; } html[data-opt="2"] .p2-btn.sec{ background:var(--card) !important; color:var(--text) !important; border:1px solid var(--border) !important; } html[data-opt="2"] .p2-btn.off, html[data-opt="2"] .p2-btn[disabled]{ opacity:.45; cursor:not-allowed; } html[data-opt="2"] .p2-mut{ display:block; font-size:12px; color:var(--text-muted); font-weight:500; margin-top:2px; } html[data-opt="2"] .p2-gl td.up, html[data-opt="2"] .p2-gl .p2-pc.up{ color:#0B4F4A; font-weight:700; } html[data-opt="2"] .p2-gl td.dn, html[data-opt="2"] .p2-gl .p2-pc.dn{ color:#9C3957; font-weight:700; } html[data-opt="2"] .p2-gl tfoot td{ font-weight:800; } html[data-opt="2"] .p2-pc{ display:block; font-size:11.5px; margin-top:1px; } html[data-opt="2"] .p2-noteline{ font-size:13px; padding:6px 0; border-bottom:1px solid var(--border); } html[data-opt="2"] .p2-noteline b{ color:#7E3152; } html[data-opt="2"] .nb-row-edit td{ background:#F5FAF9 !important; } html[data-opt="2"] .nb-modal-card.p2-note{ width:min(520px,100%); text-align:left; } html[data-opt="2"] .nb-modal-card.p2-note p{ margin:6px 0 14px; color:var(--text-muted); font-size:13px; line-height:1.5; } html[data-opt="2"] .nb-2col.p2-wide{ grid-template-columns:1fr !important; } html[data-opt="2"] .nb-2col.p2-wide .nb-tiles{ --cols:3 !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; } /* Phase 2: section order list full width, tools below */ /* ===== REVISION 38 (2 Oct 2026, owner approved Phase 3) — delivery from packed pieces: item / size lines, over-order warning, order page Deliveries card ===== */ html[data-opt="2"] .nb-dv-sum.p3-5{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } html[data-opt="2"] .p3-dv{ width:100%; border-collapse:separate; border-spacing:0; } html[data-opt="2"] .p3-dv th{ font-size:11.5px; font-weight:700; color:var(--text-muted); text-align:right; padding:8px 10px; border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; } html[data-opt="2"] .p3-dv th:first-child{ text-align:left; } html[data-opt="2"] .p3-dv td{ padding:7px 10px; text-align:right; font-size:13px; border-bottom:1px solid #F0F1F3; } html[data-opt="2"] .p3-dv td:first-child{ text-align:left; } html[data-opt="2"] .p3-dv tr.ih td{ background:#F5FAF9; font-weight:800; color:#0B4F4A; border-bottom:1px solid #DDE7E5; } html[data-opt="2"] .p3-dv tr.ih td span{ font-weight:600; color:var(--text-muted); font-size:12px; } html[data-opt="2"] .p3-dv input{ width:96px; height:36px; border:1px solid #C9D9D6; border-radius:9px; text-align:center; font:inherit; font-weight:700; background:#fff; } html[data-opt="2"] .p3-dv input.has{ border-color:#0F766E; } html[data-opt="2"] .p3-dv input.bad{ border-color:#9C3957; background:#FBF3F6; } html[data-opt="2"] .p3-dv td.zero, html[data-opt="2"] .p3-dv .zero{ color:#B0B0B6; } html[data-opt="2"] .p3-dv td.over{ color:#7E3152; font-weight:800; } html[data-opt="2"] .p3-dv tr.tot td{ font-weight:800; border-top:2px solid var(--border); } html[data-opt="2"] .p3-warn{ display:flex; gap:12px; align-items:flex-start; background:#F6EEF3; border:1px solid #E6D6DE; border-radius:12px; padding:12px 14px; margin:12px 0; font-size:13px; color:#4A1D2E; } html[data-opt="2"] .p3-warn .icon{ flex:none; width:18px; height:18px; color:#9C3957; } html[data-opt="2"] .p3-warn label{ display:flex; gap:8px; align-items:center; margin-top:8px; font-weight:700; } html[data-opt="2"] .p3-warn input{ width:18px; height:18px; } html[data-opt="2"] .p3-kp{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:12px; } html[data-opt="2"] .p3-kp div{ padding:10px 12px; } html[data-opt="2"] .p3-kp div + div{ border-left:1px solid var(--border); } html[data-opt="2"] .p3-kp span{ display:block; font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; } html[data-opt="2"] .p3-kp b{ display:block; font-size:17px; margin-top:3px; } html[data-opt="2"] .p3-kp small{ display:block; font-size:11.5px; color:var(--text-muted); } html[data-opt="2"] .p3-kp .hl{ background:#E8F3F1; } html[data-opt="2"] .p3-kp .hl b{ color:#0B4F4A; } html[data-opt="2"] .p3-hist{ display:flex; flex-direction:column; gap:8px; } html[data-opt="2"] .p3-hist .r{ display:grid; grid-template-columns:96px minmax(0,1fr) 90px 130px; gap:10px; align-items:center; padding:9px 12px; border:1px solid var(--border); border-radius:12px; font-size:12.5px; } html[data-opt="2"] .p3-hist .r .q{ text-align:right; font-weight:800; } /* ===== REVISION 39 · Phase 4 invoicing (owner approved 2 Oct 2026): waiting delivery notes with tick boxes, invoice draft, advance used invoice by invoice; the tax invoice prints simple — white item rows (no colour background) ===== */ html[data-opt="2"] .p4-t{ width:100%; border-collapse:separate; border-spacing:0; } html[data-opt="2"] .p4-t th{ font-size:11.5px; font-weight:700; color:var(--text-muted); text-align:right; padding:8px 10px; border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; } html[data-opt="2"] .p4-t th.l, html[data-opt="2"] .p4-t td.l{ text-align:left; } html[data-opt="2"] .p4-t td{ padding:9px 10px; text-align:right; font-size:13px; border-bottom:1px solid #F0F1F3; vertical-align:middle; } html[data-opt="2"] .p4-t tr.gh td{ background:#F5FAF9; color:#0B4F4A; border-bottom:1px solid #DDE7E5; text-align:left; } html[data-opt="2"] .p4-t tr.gh td .p4-gl{ font-weight:800; } html[data-opt="2"] .p4-t tr.gh td span{ font-weight:600; color:var(--text-muted); font-size:12px; } html[data-opt="2"] .p4-t tr.gh td .p4-gl{ color:#0B4F4A; font-size:13px; } html[data-opt="2"] .p4-all{ float:right; border:1px solid #9CC9C3; background:#fff; color:#0B4F4A; border-radius:8px; padding:3px 10px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; } html[data-opt="2"] .p4-t tr.on td{ background:#FBFDFC; } html[data-opt="2"] .p4-t input[type=checkbox]{ width:18px; height:18px; accent-color:#0F766E; vertical-align:middle; cursor:pointer; } html[data-opt="2"] .p4-t td small{ display:block; color:var(--text-muted); font-size:11.5px; font-weight:500; } html[data-opt="2"] .p4-t tr.tot td{ font-weight:800; border-top:2px solid var(--border); } html[data-opt="2"] .p4-days{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:700; background:#EEF2F1; color:#3D4F4C; white-space:nowrap; } html[data-opt="2"] .p4-days.late{ background:#F6EEF3; color:#7E3152; } html[data-opt="2"] .p4-bar{ display:flex; align-items:center; gap:14px; background:#0B4F4A; color:#fff; border-radius:14px; padding:12px 16px; margin-top:14px; } html[data-opt="2"] .p4-bar b{ font-size:16px; } html[data-opt="2"] .p4-bar span{ opacity:.85; font-size:13px; } html[data-opt="2"] .p4-bar button{ margin-left:auto; background:#fff; color:#0B4F4A; border:0; border-radius:10px; padding:10px 16px; font:inherit; font-weight:800; cursor:pointer; } html[data-opt="2"] .p4-sum{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; margin-top:14px; align-items:start; } html[data-opt="2"] .p4-tot{ border:1px solid var(--border); border-radius:14px; overflow:hidden; } html[data-opt="2"] .p4-tot div{ display:flex; justify-content:space-between; gap:10px; padding:9px 14px; font-size:13.5px; } html[data-opt="2"] .p4-tot div + div{ border-top:1px solid #F0F1F3; } html[data-opt="2"] .p4-tot .gt{ font-weight:800; } html[data-opt="2"] .p4-tot .less{ color:#0B4F4A; } html[data-opt="2"] .p4-tot .less small{ display:block; color:var(--text-muted); font-size:11.5px; } html[data-opt="2"] .p4-tot .due{ background:#E8F3F1; font-weight:800; font-size:15px; color:#0B4F4A; } html[data-opt="2"] .p4-adv{ border:1px solid var(--border); border-radius:14px; padding:12px 14px; font-size:13px; } html[data-opt="2"] .p4-adv h4{ margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); } html[data-opt="2"] .p4-adv .row{ display:flex; justify-content:space-between; padding:4px 0; } html[data-opt="2"] .p4-adv .row b{ font-weight:800; } html[data-opt="2"] .p4-track{ height:12px; border-radius:8px; background:#EEF2F1; overflow:hidden; display:flex; margin:10px 0 6px; } html[data-opt="2"] .p4-track i{ display:block; height:100%; } html[data-opt="2"] .p4-track .a{ background:#0F766E; } html[data-opt="2"] .p4-track .b{ background:#5FB3A9; } html[data-opt="2"] .p4-leg{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); } html[data-opt="2"] .p4-leg i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; } html[data-opt="2"] .p4-frz{ background:#F5FAF9; border:1px solid #DDE7E5; border-radius:12px; padding:11px 14px; font-size:13px; color:#0B4F4A; margin-top:14px; } html[data-opt="2"] .p4-ul{ margin:0 0 12px; padding-left:18px; font-size:13px; line-height:1.6; } html[data-opt="2"] .p3-kp b em.p4-aed{ font-style:normal; font-size:11px; font-weight:700; color:var(--text-muted); margin-right:3px; } @media (max-width:900px){ html[data-opt="2"] .p4-sum{ grid-template-columns:1fr; } } /* the printed tax invoice: plain white item rows (owner, 2 Oct 2026) */ .nbd-items.nbd-plain tbody tr:nth-child(even) td{ background:transparent; } /* ===== REVISION 40 · HR statement (C), employee list (B + documents), production order (B + sign-off) — owner approved 2 Oct 2026 ===== */ .nbx .h{ font-size:7.2pt; letter-spacing:.14em; text-transform:uppercase; color:#9C3957; font-weight:700; margin-bottom:1.4mm; } .nbx .xcard{ border:1px solid #E6D6DE; border-radius:3mm; padding:3.4mm 4.5mm 3.6mm; background:#fff; } .nbx .nm{ font-size:12pt; font-weight:800; color:#2B1220; line-height:1.3; } .nbx .ln{ font-size:9pt; color:#4E4652; line-height:1.55; } .nbx .two{ display:grid; gap:6mm; margin-bottom:5mm; align-items:stretch; } .nbx .pair{ display:grid; grid-template-columns:1fr 1fr; gap:6mm; align-items:start; } .nbx .bal div{ display:flex; justify-content:space-between; gap:3mm; font-size:9.4pt; line-height:1.85; white-space:nowrap; } .nbx .bal span{ color:#4E4652; } .nbx .bal div.t{ border-top:1px solid #E6D6DE; margin-top:1.2mm; padding-top:1.2mm; font-weight:800; font-size:10.5pt; } .nbx .bal div.t span{ color:#2B1220; } .nbx .cur{ display:inline; letter-spacing:.04em; font-weight:600; opacity:.75; font-size:.82em; margin-right:.6mm; } .nbx .nbd-items td{ padding:1.8mm 2.2mm; } .nbx .nbd-items th{ padding-left:2.2mm; padding-right:2.2mm; } .nbx .nbd-items tbody tr td{ background:#fff !important; } .nbx .nbd-items tr.gh td{ background:#F4ECF0 !important; font-weight:800; font-size:8.4pt; letter-spacing:.06em; text-transform:uppercase; color:#7E3152; padding:1.3mm 2.2mm; } .nbx .nbd-items tr.gh td span{ text-transform:none; letter-spacing:0; font-weight:600; color:#6B6070; } .nbx .nbd-items tfoot td, .nbx .nbd-items tr.tot td{ padding:2.4mm 2.2mm; border-top:2px solid #7E3152; font-weight:800; } .nbx .nbd-items td.p{ color:#4E4652; } .nbx .nbd-items td.nw{ white-space:nowrap; } .nbx .nbd-items tbody.keep{ break-inside:avoid; page-break-inside:avoid; } .nbx .muted{ color:#7A7280; font-size:8.2pt; } .nbx .h2{ margin:5mm 0 1.6mm; font-size:7.2pt; letter-spacing:.14em; text-transform:uppercase; color:#9C3957; font-weight:700; } .nbx .late{ color:#7E3152; font-weight:800; } .nbx .sumd{ display:grid; border:1px solid #E6D6DE; border-radius:3mm; overflow:hidden; margin-bottom:5mm; } .nbx .sumd div{ padding:2.6mm 3.6mm; } .nbx .sumd div + div{ border-left:1px solid #EFE3E8; } .nbx .sumd span{ display:block; font-size:7pt; letter-spacing:.12em; text-transform:uppercase; color:#9C3957; font-weight:700; } .nbx .sumd b{ display:block; font-size:10.8pt; font-weight:800; color:#2B1220; margin-top:.5mm; } .nbx .sumd b i{ font-style:normal; font-size:8.5pt; color:#7A7280; font-weight:600; } .nbx .sizes th, .nbx .sizes td{ text-align:right; } .nbx .sizes th:first-child, .nbx .sizes td:first-child{ text-align:left; } .nbx .sizes tr.cutrow td{ color:#0B4F4A; font-size:8.6pt; } .nbx .spec{ display:grid; grid-template-columns:1fr 1fr; gap:0 8mm; } .nbx .spec div{ display:grid; grid-template-columns:25mm 1fr; gap:2.5mm; padding:1.7mm 0; border-bottom:1px dashed #E6D6DE; font-size:9pt; } .nbx .spec span{ font-size:7pt; letter-spacing:.12em; text-transform:uppercase; color:#9C3957; font-weight:700; padding-top:.5mm; } .nbx .spec b{ font-weight:600; line-height:1.4; } .nbx .itemcard{ border:1px solid #E6D6DE; border-radius:3mm; padding:2.4mm 3.6mm; margin-bottom:3mm; break-inside:avoid; } .nbx .itemcard .nbd-items{ margin:0; } .nbx .itemcard .nbd-items td{ padding:1.5mm 2.2mm; } .nbx .sizes th.itm{ text-transform:none; letter-spacing:0; font-size:10.5pt; font-weight:800; } .nbx .target{ display:flex; justify-content:space-between; align-items:center; background:#EEF6F4; border-radius:3mm; padding:2.6mm 4mm; margin:0 0 5mm; font-size:9.6pt; color:#0B4F4A; } .nbx .target b{ font-size:10.5pt; } .nbx .floor td{ height:8.5mm; } .nbx .floor td.sec{ font-weight:800; color:#2B1220; } .nbx .floor{ break-inside:avoid; } /* ===== REVISION 41 · attachments: photos and document scans (owner approved 2 Oct 2026) ===== */ .nbu{ display:flex; flex-wrap:wrap; gap:10px; } .nbu .t{ position:relative; width:92px; height:92px; border-radius:12px; border:1px solid var(--border); background:#fff; overflow:hidden; cursor:pointer; flex:none; } .nbu .t img{ width:100%; height:100%; object-fit:cover; display:block; } .nbu .t .pdf{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; background:#F6EEF3; color:#7E3152; font-weight:800; font-size:13px; gap:3px; padding:0 4px; text-align:center; } .nbu .t .pdf small{ font-weight:600; font-size:10px; color:#6B6070; line-height:1.15; word-break:break-all; } .nbu .t .cap{ position:absolute; left:0; right:0; bottom:0; padding:3px 6px; background:#2B1220b3; color:#fff; font-size:10.5px; font-weight:700; } .nbu .add{ width:92px; height:92px; border-radius:12px; border:1.5px dashed #9CC9C3; background:#F5FAF9; color:#0B4F4A; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; gap:2px; cursor:pointer; text-align:center; line-height:1.2; flex:none; } .nbu .add b{ font-size:22px; line-height:1; } .nbu .t:hover, .nbu .add:hover{ border-color:#0F766E; } .nbu.sm{ gap:6px; flex-wrap:nowrap; } .nbu.sm .t, .nbu.sm .add{ width:64px; height:46px; border-radius:8px; font-size:11px; } .nbu.sm .add b{ font-size:16px; } .nbu.sm .t .pdf{ font-size:11px; } .nbu.sm .t .pdf small{ display:none; } .nbu-btn{ display:inline-flex; align-items:center; gap:3px; height:30px; min-width:30px; padding:0 7px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text-muted); cursor:pointer; font:inherit; font-size:12px; font-weight:700; } .nbu-btn svg{ width:15px; height:15px; } .nbu-btn.has{ color:#0B4F4A; border-color:#9CC9C3; background:#F5FAF9; } .nbu-btn:hover{ border-color:#0F766E; } .nbu-modal .nb-modal-card{ max-width:640px; } .nbu-modal .nb-modal-card > p{ font-size:12.5px; color:var(--text-muted); margin:4px 0 12px; } .nbu-ov{ position:fixed; inset:0; z-index:9999; background:rgba(20,12,18,.72); display:flex; align-items:center; justify-content:center; padding:24px; } .nbu-view{ background:#1E1A22; border-radius:16px; padding:14px; color:#fff; width:min(980px, 100%); max-height:100%; display:flex; flex-direction:column; } .nbu-view .bar{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; } .nbu-view .bar b{ font-size:14px; } .nbu-view .bar span{ opacity:.7; font-size:12.5px; } .nbu-view .bar .bt{ margin-left:auto; display:flex; gap:8px; } .nbu-view .bar .bt a, .nbu-view .bar .bt button{ background:#ffffff1f; color:#fff; border:1px solid #ffffff33; border-radius:9px; padding:7px 12px; font:inherit; font-weight:700; font-size:12.5px; text-decoration:none; cursor:pointer; } .nbu-view .bar .bt .del{ background:#7E3152; border-color:#7E3152; } .nbu-view .pic{ position:relative; background:#2B2530; border-radius:12px; display:flex; align-items:center; justify-content:center; padding:12px; min-height:300px; flex:1; overflow:hidden; } .nbu-view .pic img{ max-width:100%; max-height:70vh; border-radius:6px; } .nbu-view .pic iframe{ width:100%; height:70vh; border:0; border-radius:6px; background:#fff; } .nbu-view .nav{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:0; background:#ffffff26; color:#fff; font-size:22px; cursor:pointer; } .nbu-view .nav.p{ left:10px; } .nbu-view .nav.n{ right:10px; } .nbu-view .strip{ display:flex; gap:8px; margin-top:12px; overflow-x:auto; } .nbu-view .strip img, .nbu-view .strip span{ width:56px; height:56px; flex:none; object-fit:cover; border-radius:8px; opacity:.55; cursor:pointer; } .nbu-view .strip span{ display:flex; align-items:center; justify-content:center; background:#F6EEF3; color:#7E3152; font-weight:800; font-size:12px; } .nbu-view .strip .on{ opacity:1; outline:2px solid #5FB3A9; } .nbu-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:10000; background:#2B1220; color:#fff; padding:11px 16px; border-radius:12px; font-size:13px; box-shadow:0 10px 30px rgba(0,0,0,.2); } .nbu-toast .nbu-undo{ margin-left:10px; background:#fff; color:#0B4F4A; border:0; border-radius:8px; padding:4px 10px; font:inherit; font-weight:800; cursor:pointer; } .nbu-doc{ display:grid; grid-template-columns:140px minmax(0,1fr) minmax(0,150px) 150px; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid #F0F1F3; } .nbu-doc .nm{ font-weight:800; font-size:13px; } .nbu-doc .nm span{ display:block; font-weight:500; font-size:11.5px; color:var(--text-muted); } .nbu-doc .field{ margin:0; } .nbu-photo{ display:flex; gap:16px; align-items:center; margin-bottom:12px; } .nbu-photo .nbu .t, .nbu-photo .nbu .add{ width:84px; height:84px; border-radius:50%; } .nbu-box{ border:1px solid var(--border); border-radius:14px; padding:12px 14px; } .nbu-box h4{ margin:0 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); } .nbu-box p{ margin:0 0 10px; font-size:12.5px; color:var(--text-muted); } .nbu-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; } .nbu-hint{ font-size:12px; color:var(--text-muted); margin-top:6px; } @media (max-width:700px){ .nbu-doc{ grid-template-columns:1fr 1fr; } } html[data-opt="2"] td .nb-rowbtns button.nbu-btn{ width:auto; min-width:30px; padding:0 7px; } html[data-opt="2"] .nb-sup-btns .nbu-btn{ height:auto; } /* rev 41 · the 📎 button keeps room for its count */ html[data-opt="2"] .nbu-doc{ grid-template-columns:140px minmax(0,1fr) 150px minmax(150px, 230px); } .nbu-doc .nbu.sm{ flex-wrap:wrap; } .nbu-modal .nb-modal-b{ margin-top:18px; display:flex; justify-content:flex-end; } .nbu-modal .nb-modal-card > b{ display:block; text-align:left; } /* rev 41 fix */ /* ===== REVISION 42 · quotation → order (owner approved 2 Oct 2026) ===== */ .qo-src{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; background:#F5FAF9; border:1px solid #DDE7E5; border-radius:12px; padding:10px 14px; font-size:13px; color:#0B4F4A; margin-bottom:14px; } .qo-src b{ font-weight:800; } .qo-src a{ color:#0B4F4A; } html[data-opt="2"] .nb-modal-card.qo-card{ width:min(760px,100%); max-width:760px; text-align:left; } .qo-card > b{ display:block; text-align:center; } .qo-card > p{ text-align:center; } .qo-opt .r{ white-space:nowrap; } .qo-card > p{ font-size:12.5px; color:var(--text-muted); margin:4px 0 12px; } .qo-opt{ display:grid; grid-template-columns:24px minmax(0,1fr) 100px 100px 130px; gap:10px; align-items:center; padding:11px 12px; border:1px solid var(--border); border-radius:12px; margin-bottom:8px; font-size:13px; cursor:pointer; } .qo-opt.on{ border-color:#0F766E; background:#F5FAF9; } .qo-opt input, .qo-photos input{ width:18px; height:18px; accent-color:#0F766E; } .qo-opt .r{ text-align:right; } .qo-opt small{ display:block; color:var(--text-muted); font-size:11.5px; font-weight:500; } .qo-photos{ display:flex; gap:8px; align-items:center; margin:12px 0 4px; font-size:13px; font-weight:700; } .qo-card .nb-modal-b{ margin-top:16px; display:flex; justify-content:flex-end; gap:8px; } .qo-left{ display:flex; justify-content:space-between; gap:10px; background:#F6EEF3; color:#7E3152; border-radius:10px; padding:8px 12px; font-size:12.5px; font-weight:700; margin-top:8px; } .qo-left.ok{ background:#E8F3F1; color:#0B4F4A; } html[data-opt="2"] td .nb-rowbtns button.nbqo-btn{ width:auto; padding:0 10px; border-color:#9CC9C3; background:#F5FAF9; color:#0B4F4A; font:inherit; font-size:12px; font-weight:800; white-space:nowrap; } @media (max-width:700px){ .qo-opt{ grid-template-columns:24px 1fr; } .qo-opt .r{ grid-column:2; text-align:left; } } /* ===== CSS revision 43 — Packing step 1 (owner approved 2 Oct 2026): cartons, packing list B, carton label A (black), size-wise sticker B ===== */ /* packing list (letterhead, option B) */ .nbx .sumd b.wrap{ line-height:1.2; } .nbx .sizes td.e{ color:#C9BFC5; } .nbx .itemcard .cap{ font-size:8.2pt; color:#7A7280; margin-top:1.2mm; } .nbx .mix{ display:inline-block; font-size:6.8pt; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#0B4F4A; border:1px solid #9CC9C3; border-radius:1.6mm; padding:0 1.2mm; margin-left:1.5mm; vertical-align:1px; } .nbx .tot4{ display:grid; grid-template-columns:repeat(4, auto); justify-content:space-between; margin-top:3mm; padding-top:2.6mm; border-top:1.5px solid #7E3152; break-inside:avoid; } .nbx .tot4 span{ display:block; font-size:8pt; color:#7A7280; font-weight:600; } .nbx .tot4 b{ display:block; font-size:10.5pt; font-weight:800; margin-top:.4mm; white-space:nowrap; } /* carton label, 4 × 6 in, black only */ @page nblabel{ size:4in 6in; margin:0; } .nbl{ width:4in; height:6in; box-sizing:border-box; padding:4mm; background:#fff; color:#000; font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; margin:0 auto 18px; box-shadow:0 10px 30px -12px rgba(0,0,0,.35); } .nbl .in{ height:100%; box-sizing:border-box; border:1.4px solid #000; border-radius:2.5mm; display:flex; flex-direction:column; overflow:hidden; } .nbl .k{ font-size:6.6pt; letter-spacing:.14em; text-transform:uppercase; font-weight:700; } .nbl .co{ font-family:Cinzel,serif; font-weight:700; letter-spacing:.06em; } .nbl .band{ display:flex; justify-content:space-between; align-items:center; background:#000; color:#fff; padding:2.6mm 3.6mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .nbl .band .co{ font-size:10.5pt; } .nbl .band span{ font-size:8pt; font-weight:700; } .nbl .no{ display:flex; align-items:baseline; gap:3mm; padding:3mm 3.6mm 2mm; border-bottom:1px solid #000; } .nbl .no .v{ font-size:40pt; font-weight:800; line-height:1; } .nbl .no .of{ font-size:11pt; font-weight:700; } .nbl .it{ padding:2.6mm 3.6mm 1mm; } .nbl .it b{ display:block; font-size:12pt; font-weight:800; line-height:1.25; } .nbl .it span{ font-size:9.5pt; font-weight:600; } .nbl .sz{ margin:1mm 3.6mm 0; } .nbl .sz div{ display:flex; justify-content:space-between; font-size:12pt; font-weight:700; padding:1.3mm 0; border-bottom:1px dashed #000; } .nbl .sz div span:last-child{ font-weight:800; } .nbl .sp{ flex:1; } .nbl .tot{ display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1.4px solid #000; } .nbl .tot > div{ padding:2mm 3mm; } .nbl .tot > div + div{ border-left:1px solid #000; } .nbl .tot .v{ font-size:12.5pt; font-weight:800; white-space:nowrap; } .nbl .cli{ border-top:1.4px solid #000; padding:2.4mm 3.6mm; font-size:10pt; font-weight:800; display:flex; justify-content:space-between; gap:3mm; } .nbl .cli span{ font-weight:600; font-size:8.5pt; white-space:nowrap; } body.nb-print #nbPrintRoot .nbl{ page:nblabel; margin:0; box-shadow:none; break-after:page; } body.nb-print #nbPrintRoot .nbl:last-child{ break-after:auto; } /* size-wise polybag sticker (option B), black only; size set when printing (--k scales the 50 × 30 design) */ .nbk{ box-sizing:border-box; padding:calc(1.6mm * var(--k)); overflow:hidden; background:#fff; color:#000; font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; } .nbk .in{ height:100%; box-sizing:border-box; border:.35mm solid #000; border-radius:1.4mm; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; } .nbk .it{ font-size:calc(5.6pt * var(--k)); font-weight:700; max-width:92%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nbk b{ font-size:calc(22pt * var(--k)); font-weight:800; line-height:1; margin:.4mm 0; } .nbk .cl{ font-size:calc(7.6pt * var(--k)); font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .nbk .co{ position:absolute; left:calc(1.6mm * var(--k)); top:calc(1.2mm * var(--k)); font-family:Cinzel,serif; font-weight:700; font-size:calc(4.4pt * var(--k)); } .nbk .po{ position:absolute; right:calc(1.6mm * var(--k)); top:calc(1.2mm * var(--k)); font-size:calc(4.4pt * var(--k)); font-weight:700; } .nbk-sheet{ width:210mm; height:297mm; box-sizing:border-box; display:grid; justify-content:start; align-content:start; background:#fff; margin:0 auto 18px; box-shadow:0 10px 30px -12px rgba(0,0,0,.35); } .nbk-sheet .nbk{ outline:.2mm dashed #C8C8C8; outline-offset:-.1mm; } .nbk-roll{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .nbk-roll .nbk{ box-shadow:0 4px 14px -6px rgba(0,0,0,.35); } body.nb-print #nbPrintRoot .nbk-sheet{ page:nbdoc; margin:0; box-shadow:none; break-after:page; } body.nb-print #nbPrintRoot .nbk-sheet:last-child{ break-after:auto; } body.nb-print #nbPrintRoot .nbk-roll{ display:block; } body.nb-print #nbPrintRoot .nbk-roll .nbk{ page:nbstk; box-shadow:none; break-after:page; } body.nb-print #nbPrintRoot .nbk-roll .nbk:last-child{ break-after:auto; } .nb-overlay .nbl, .nb-overlay .nbk-sheet{ margin-top:18px; } .nb-overlay .nbk-roll{ padding:18px; } /* the Packing page (cartons) */ .pk-k{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-bottom:14px; } .pk-k div{ border:1px solid var(--border); border-radius:12px; padding:10px 14px; } .pk-k span{ display:block; font-size:11.5px; color:var(--text-muted); font-weight:600; } .pk-k b{ font-size:19px; font-weight:800; } .pk-k .on{ background:#F5FAF9; border-color:#9CC9C3; } .pk-k .on b{ color:#0B4F4A; } .pk-k .left{ background:#F6EEF3; border-color:#E6CCD7; } .pk-k .left b{ color:#7E3152; } .pk-quick{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:#F7F5F6; border-radius:12px; padding:10px 14px; font-size:13px; margin-bottom:14px; } .pk-quick .pq{ display:inline-flex; align-items:center; gap:6px; } .pk-quick input{ width:64px; height:34px; border:1px solid var(--border); border-radius:9px; text-align:center; font:inherit; font-weight:700; background:#fff; } .pk-quick .sp{ flex:1; } .pk-quick small{ color:var(--text-muted); font-size:12px; } .pk-btn{ height:34px; padding:0 14px; border-radius:9px; border:1px solid #9CC9C3; background:#F5FAF9; color:#0B4F4A; font:inherit; font-size:13px; font-weight:800; white-space:nowrap; cursor:pointer; } .pk-btn.solid{ background:#0F766E; border-color:#0F766E; color:#fff; } .pk-btn.plain{ border-color:var(--border); background:#fff; color:var(--text); } .pk-btn:disabled{ opacity:.45; cursor:default; } .pk-fill{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:end; } .pk-fill label, .pk-sz label{ display:block; font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:5px; } .pk-fill input, .pk-fill select, .pk-sz input{ display:block; width:100% !important; height:40px !important; border:1px solid var(--border) !important; border-radius:10px !important; padding:0 10px !important; box-sizing:border-box; font:inherit; font-size:14px !important; background:#fff; } .pk-fill .no input{ font-size:17px !important; font-weight:800; text-align:center; } .pk-fill .no .rng{ display:flex; align-items:center; gap:4px; } .pk-fill .no .rng span{ color:var(--text-muted); } .pk-sz{ display:grid; grid-template-columns:repeat(auto-fit, minmax(74px, 1fr)); gap:10px; margin-top:12px; } .pk-sz label{ text-align:center; } .pk-sz input{ text-align:center; font-weight:700; } .pk-sz input.has{ border-color:#0F766E !important; background:#F5FAF9; } .pk-sz small{ display:block; text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:3px; } .pk-sz small.z{ color:#0B4F4A; font-weight:700; } .pk-sz .w input{ font-weight:600; } .pk-sz .d{ grid-column:span 2; } .pk-go{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; } .pk-go .bar{ margin-left:auto; font-size:13px; color:var(--text-muted); } .pk-go .bar b{ color:var(--text); } .pk-sec{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin:18px 0 8px; } .pk-pool{ display:flex; flex-wrap:wrap; gap:6px; } .pk-pool span{ border:1px solid #E6CCD7; background:#FBF6F8; color:#7E3152; border-radius:999px; padding:4px 10px; font-size:12.5px; font-weight:700; } .pk-pool span.ok{ border-color:#CFE5E1; background:#F5FAF9; color:#0B4F4A; } .pk-chips{ display:flex; flex-wrap:wrap; gap:6px; } .pk-chip{ display:inline-flex; align-items:stretch; border:1px solid var(--border); border-radius:10px; overflow:hidden; font-size:12.5px; background:#fff; } .pk-chip button{ border:0; background:none; font:inherit; cursor:pointer; padding:0; display:inline-flex; align-items:stretch; color:inherit; } .pk-chip b{ padding:5px 8px; background:#F7F5F6; font-weight:800; } .pk-chip span{ padding:5px 8px; color:var(--text-muted); } .pk-chip .x{ padding:5px 8px; border-left:1px solid var(--border); color:#9C3957; font-weight:800; } .pk-chip.on{ border-color:#0F766E; } .pk-chip.on b{ background:#0F766E; color:#fff; } .pk-chip.mix span{ color:#0B4F4A; font-weight:700; } .pk-chip.lock{ opacity:.6; } .pk-chip.lock .x{ display:none; } .pk-cur{ margin-top:10px; background:#F5FAF9; border:1px solid #DDE7E5; border-radius:12px; padding:10px 14px; font-size:13px; color:#0B4F4A; display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .pk-cur span{ background:#fff; border:1px solid #CFE5E1; border-radius:8px; padding:3px 8px; font-weight:700; } .pk-cur span button{ border:0; background:none; color:#9C3957; font-weight:800; cursor:pointer; padding:0 0 0 4px; } .pk-cur em{ margin-left:auto; font-style:normal; font-weight:700; } .pk-docs{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; } html[data-opt="2"] td .nb-rowbtns button.pk-rb{ width:auto; padding:0 10px; border-color:#9CC9C3; background:#F5FAF9; color:#0B4F4A; font:inherit; font-size:12px; font-weight:800; white-space:nowrap; } .pk-t{ width:100%; border-collapse:separate; border-spacing:0; } .pk-t th{ font-size:11.5px; font-weight:700; color:var(--text-muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.04em; } .pk-t td{ padding:8px 10px; font-size:13px; border-bottom:1px solid #F0F1F3; vertical-align:middle; } .pk-t .r{ text-align:right; } .pk-t tr.g td{ background:#F7F5F6; font-weight:800; font-size:12.5px; } .pk-t input[type=checkbox]{ width:17px; height:17px; accent-color:#0F766E; } .pk-t .pk-mix{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; color:#0B4F4A; border:1px solid #9CC9C3; border-radius:6px; padding:0 5px; margin-left:6px; } .pk-tot{ display:flex; justify-content:space-between; gap:12px; background:#E8F3F1; color:#0B4F4A; border-radius:10px; padding:9px 14px; font-size:13px; font-weight:700; margin-top:10px; } .pk-opts{ display:grid; gap:12px; } .pk-opts > div{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .pk-opts > div > label{ width:90px; font-size:12px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; } .pk-opts small{ font-size:12px; color:var(--text-muted); } .pk-opts input[type=text]{ width:64px; height:34px; border:1px solid var(--border); border-radius:9px; text-align:center; font:inherit; } .pk-seg{ display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; } .pk-seg button{ border:0; background:#fff; padding:7px 12px; font:inherit; font-size:13px; font-weight:700; color:var(--text-muted); white-space:nowrap; cursor:pointer; } .pk-seg button + button{ border-left:1px solid var(--border); } .pk-seg button.on{ background:#0F766E; color:#fff; } .pk-stk td input{ width:80px; height:32px; border:1px solid var(--border); border-radius:8px; text-align:center; font:inherit; } @media (max-width:900px){ .pk-k{ grid-template-columns:repeat(2, minmax(0,1fr)); } } /* ===== CSS revision 44 — Step 2 measurements (owner approved 2 Oct 2026): A4 landscape letterhead, measurement sheet B, Rizmac cutting sheet, boxed tables ===== */ @page nbland{ size:A4 landscape; margin:0; } .nbd.nbd-land{ width:297mm; min-height:210mm; } body.nb-print #nbPrintRoot .nbd.nbd-land{ page:nbland; } .nbms .nbd-items{ border-collapse:collapse; border:1.2px solid #B99AAA; } .nbms .nbd-items td{ padding:1.4mm 1.6mm; border-left:1px solid #EFE3E8; border-right:1px solid #EFE3E8; vertical-align:middle; } .nbms .nbd-items thead th{ padding:2.2mm 1.6mm; vertical-align:middle; border:1px solid #DCC8D2; border-bottom:2px solid #7E3152; } .nbms .nbd-items tbody tr td{ background:#fff !important; } .nbms .nbd-items th.m, .nbms .nbd-items td.m{ text-align:center; } .nbms .nbd-items td.g{ text-align:center; font-weight:800; color:#0B4F4A; } .nbms .nbd-items td .no{ color:#C9BFC5; } .nbms .nbd-items thead tr:first-child th.it{ text-align:center; text-transform:none; letter-spacing:0; font-size:9pt; font-weight:800; color:#2B1220; border-bottom:1px solid #B99AAA; background:#FBF6F8 !important; padding:1.8mm 1.6mm; } .nbms .nbd-items th.sep, .nbms .nbd-items td.sep{ border-left:1.5px solid #B99AAA; } .nbms .nbd-items tr.gh td{ background:#F4ECF0 !important; font-weight:800; font-size:8.4pt; letter-spacing:.06em; text-transform:uppercase; color:#7E3152; padding:1.2mm 1.6mm; border-left:none; border-right:none; border-top:1px solid #DCC8D2; } .nbms .nbd-items tr.gh td span{ text-transform:none; letter-spacing:0; font-weight:600; color:#6B6070; } .nbms .blank td{ height:8.6mm; } .nbms .blank td.n{ color:#9A929E; } .nbms .note{ font-size:8.4pt; color:#6B6070; margin-top:2.6mm; } .nbms .note b{ color:#2B1220; } .nbms .cut{ display:grid; grid-template-columns:minmax(0,1fr) 72mm; gap:6mm; align-items:start; } .nbms .ct td.cs{ font-weight:800; color:#2B1220; } .nbms .ct tr.gs td{ border-top:1.5px solid #CDB8C3; } .nbms .ct td.mx{ text-align:center; } .nbms .ct tr.ismax td.len{ font-weight:800; color:#0B4F4A; } .nbms .ct .max{ display:inline-block; font-size:7.6pt; font-weight:800; letter-spacing:.08em; color:#fff; background:#0B4F4A; border-radius:1.4mm; padding:.2mm 1.6mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .nbms .qbox{ border:1.2px solid #B99AAA; border-radius:3mm; padding:2.6mm 3.6mm; break-inside:avoid; } .nbms .qbox .hh{ font-size:7pt; letter-spacing:.12em; text-transform:uppercase; color:#9C3957; font-weight:700; margin-bottom:1.6mm; } .nbms .qbox table{ width:100%; border-collapse:collapse; font-size:9pt; } .nbms .qbox th{ font-size:6.8pt; letter-spacing:.1em; text-transform:uppercase; color:#9C3957; font-weight:700; text-align:right; padding:0 0 1.2mm; } .nbms .qbox th:first-child, .nbms .qbox td:first-child{ text-align:left; } .nbms .qbox td{ text-align:right; padding:1.1mm 0; border-bottom:1px dashed #E6D6DE; } .nbms .qbox tr.t td{ border-top:2px solid #7E3152; border-bottom:0; font-weight:800; padding-top:1.6mm; } .nbms .check{ margin-top:3mm; font-size:8.6pt; font-weight:700; color:#0B4F4A; background:#EEF6F4; border-radius:2.4mm; padding:2mm 3mm; } .nbms .check.bad{ color:#7E3152; background:#F6EEF3; } .nbms .rule{ font-size:8.2pt; color:#6B6070; margin-top:2.4mm; line-height:1.5; } .nbms .bd th, .nbms .bd td{ text-align:center; } .nbms .bd th:first-child, .nbms .bd td:first-child{ text-align:left; } /* the order form: how the sizes are given; the sizes that came from the measurement sheet */ .nbo-seg.nbo-by{ margin-bottom:4px; } .nbo-bybox{ border:1px dashed #9CC9C3; background:#F7FBFA; border-radius:12px; padding:10px 12px 12px; margin-top:10px; } .nbo-ro{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .nbo-ro div{ min-width:64px; text-align:center; } .nbo-ro label{ display:block; font-size:11px; font-weight:700; color:var(--text-muted); } .nbo-ro b{ display:block; height:34px; line-height:34px; border:1px solid #CFE5E1; border-radius:9px; background:#fff; color:#0B4F4A; font-weight:800; } /* the Measurements page and the measurement sheet on screen */ .ms-t{ width:100%; border-collapse:separate; border-spacing:0; } .ms-t th{ font-size:11px; font-weight:700; color:var(--text-muted); text-align:left; padding:7px 6px; border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; } .ms-t td{ padding:4px 5px; font-size:13px; border-bottom:1px solid #F0F1F3; vertical-align:middle; } .ms-t .r{ text-align:right; } .ms-t td.c, .ms-t th.c{ text-align:center; } .ms-t th.it{ text-align:center; color:#7E3152; border-left:2px solid var(--border); } .ms-t .sep{ border-left:2px solid var(--border); } .ms-t td input{ width:100%; height:32px; border:1px solid var(--border); border-radius:8px; padding:0 8px; font:inherit; font-size:13px; background:#fff; box-sizing:border-box; } .ms-t td input.c{ text-align:center; min-width:52px; } .ms-t td select{ height:32px; border:1px solid var(--border); border-radius:8px; padding:0 6px; font:inherit; font-size:13px; background:#fff; min-width:64px; } .ms-t td .grp{ display:inline-block; min-width:40px; text-align:center; font-weight:800; color:#0B4F4A; background:#E8F3F1; border-radius:7px; padding:5px 8px; } .ms-t td .miss{ color:#7E3152; font-weight:800; font-size:12px; } .ms-t tr.g td{ background:#F7F5F6; font-weight:800; font-size:12.5px; padding:7px 8px; } .ms-t input[type=checkbox]{ width:16px; height:16px; accent-color:#0F766E; } .ms-tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; } .ms-tools .sp{ flex:1; } .ms-tools input.n{ width:56px; height:34px; border:1px solid var(--border); border-radius:9px; text-align:center; font:inherit; font-weight:700; } .ms-kv{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-bottom:12px; } .ms-kv label{ display:block; font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:5px; } .ms-kv input, .ms-kv select{ width:100%; height:38px; border:1px solid var(--border); border-radius:10px; padding:0 10px; font:inherit; font-size:13.5px; background:#fff; box-sizing:border-box; } .ms-bar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:#E8F3F1; color:#0B4F4A; border-radius:10px; padding:9px 12px; font-size:13px; font-weight:700; margin-top:10px; } .ms-bar span{ background:#fff; border-radius:7px; padding:2px 8px; } .ms-bar em{ margin-left:auto; font-style:normal; } .ms-bar.short{ background:#F6EEF3; color:#7E3152; } .ms-ok{ color:#0B4F4A; font-weight:800; } .ms-wait{ color:#7E3152; font-weight:800; } .ms-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; padding:0 4px; } .ms-map{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } .ms-map label{ display:block; font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:5px; } .ms-map select{ width:100%; height:36px; border:1px solid var(--border); border-radius:9px; padding:0 8px; font:inherit; } .ms-map select.ok{ border-color:#9CC9C3; background:#F5FAF9; } /* ===== CSS revision 45 — Step 3 packing by person (owner approved 2 Oct 2026): schedule B, person cards, person carton label, individual sticker B ===== */ .nbms .box{ display:inline-block; width:4mm; height:4mm; border:.35mm solid #2B1220; border-radius:.7mm; vertical-align:middle; } .nbms .line{ display:inline-block; width:12mm; border-bottom:.3mm solid #2B1220; height:4mm; } .nbpl .ctcard{ margin-bottom:3.4mm; break-inside:avoid; } .nbpl .ctcard .nbd-items{ margin:0; border-collapse:collapse; border:1.2px solid #B99AAA; } .nbpl .ctcard .nbd-items td{ padding:1.6mm 2mm; border-left:1px solid #EFE3E8; border-right:1px solid #EFE3E8; vertical-align:middle; background:#fff !important; } .nbpl .ctcard .nbd-items thead th{ padding:2.2mm 2mm; vertical-align:middle; border:1px solid #DCC8D2; border-bottom:2px solid #7E3152; } .nbpl .ctcard .nbd-items th.m, .nbpl .ctcard .nbd-items td.m{ text-align:center; } .nbpl .ctcard th.itm{ text-align:left; text-transform:none; letter-spacing:0; font-size:10pt; font-weight:800; color:#2B1220; background:#FBF6F8 !important; } .nbpl .ctcard th.itm span{ font-weight:600; color:#7A7280; font-size:8.6pt; } .nbpl .muted{ color:#7A7280; font-size:8.4pt; } .nbpl .sns{ display:flex; flex-wrap:wrap; gap:1mm; } .nbpl .sns span{ border:.25mm solid #2B1220; border-radius:.8mm; padding:0 1.1mm; font-size:8pt; font-weight:700; } .nbl .grp{ padding:2.2mm 3.6mm 1.6mm; border-bottom:1px dashed #000; } .nbl .grp .h{ display:flex; justify-content:space-between; font-size:10pt; font-weight:800; } .nbl .grp .h span + span{ font-weight:600; font-size:9pt; } .nbl .sns{ display:flex; flex-wrap:wrap; gap:1.2mm; margin-top:1.4mm; } .nbl .sns span{ border:1.2px solid #000; border-radius:1mm; padding:.2mm 1.6mm; font-size:10pt; font-weight:800; } .nbl .its{ padding:2mm 3.6mm; font-size:9.6pt; font-weight:700; } .nbl .tot.t2{ grid-template-columns:1fr 1fr; } .nbi{ box-sizing:border-box; padding:calc(1.6mm * var(--k)); overflow:hidden; background:#fff; color:#000; font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; } .nbi .in{ height:100%; box-sizing:border-box; border:.35mm solid #000; border-radius:1.4mm; display:flex; flex-direction:column; padding:calc(2mm * var(--k)) calc(2.6mm * var(--k)); overflow:hidden; } .nbi .top{ display:flex; justify-content:space-between; align-items:baseline; gap:2mm; } .nbi .nm{ font-size:calc(11.5pt * var(--k)); font-weight:800; line-height:1.1; } .nbi .nm.s{ font-size:calc(9.4pt * var(--k)); } .nbi .snb{ font-size:calc(8pt * var(--k)); font-weight:800; white-space:nowrap; border:.3mm solid #000; border-radius:1mm; padding:0 1.2mm; } .nbi .dp{ font-size:calc(6.4pt * var(--k)); font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:.6mm 0 1.2mm; } .nbi table{ border-collapse:collapse; width:100%; } .nbi th{ font-size:calc(4.6pt * var(--k)); letter-spacing:.1em; text-transform:uppercase; text-align:left; border-bottom:.3mm solid #000; padding:.4mm 0; } .nbi td{ font-size:calc(7.6pt * var(--k)); padding:.7mm 0; border-bottom:.2mm dashed #000; } .nbi td b{ font-size:calc(9.4pt * var(--k)); } .nbi .r{ text-align:right; } .nbi .ft{ margin-top:auto; display:flex; justify-content:space-between; gap:2mm; font-size:calc(5.2pt * var(--k)); font-weight:700; padding-top:1mm; } .nbi .ft .co{ font-family:Cinzel,serif; font-weight:700; letter-spacing:.05em; } .nbk-sheet .nbi{ outline:.2mm dashed #C8C8C8; outline-offset:-.1mm; } .nbk-roll .nbi{ box-shadow:0 4px 14px -6px rgba(0,0,0,.35); } body.nb-print #nbPrintRoot .nbk-roll .nbi{ page:nbstk; box-shadow:none; break-after:page; } body.nb-print #nbPrintRoot .nbk-roll .nbi:last-child{ break-after:auto; } .pk-ppl{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:12px; } .pk-ppl label{ display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-size:13px; cursor:pointer; } .pk-ppl label.on{ border-color:#0F766E; background:#F5FAF9; } .pk-ppl input{ width:17px; height:17px; accent-color:#0F766E; } .pk-ppl b{ font-weight:800; } .pk-ppl small{ color:var(--text-muted); font-size:12px; } .pk-ppl em{ margin-left:auto; font-style:normal; color:var(--text-muted); font-size:12px; white-space:nowrap; } .pk-bp{ border:1px solid #CFE5E1; border-radius:14px; padding:12px 14px; margin:4px 0 14px; } .pk-bp > h4{ margin:0 0 10px; font-size:14px; } /* ===== CSS revision 46 — Clients and Suppliers pages, option C (owner approved 2 Oct 2026): no round chart; countries on the left, the list on the right ===== */ .nbcp{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:16px; align-items:start; } .nbcp-cl{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:8px; position:sticky; top:12px; } .nbcp-cl .h{ font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; padding:8px 10px 6px; } .nbcp-cl .it{ display:block; width:100%; text-align:left; border:0; background:none; font:inherit; color:var(--text); padding:10px 12px; border-radius:11px; cursor:pointer; } .nbcp-cl .it + .it{ margin-top:2px; } .nbcp-cl .it:hover{ background:#F5F7F8; } .nbcp-cl .it .t{ display:flex; justify-content:space-between; gap:8px; font-size:13.5px; } .nbcp-cl .it .t b{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nbcp-cl .it .t span{ color:var(--text-muted); font-weight:700; } .nbcp-bar{ height:4px; border-radius:99px; background:#EEF0F2; margin-top:7px; overflow:hidden; } .nbcp-bar i{ display:block; height:100%; background:#0F766E; border-radius:99px; } .nbcp-cl .it.on{ background:#E8F3F1; } .nbcp-cl .it.on .t b, .nbcp-cl .it.on .t span{ color:#0B4F4A; } .nbcp-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px 18px 10px; min-width:0; } .nbcp-hd h3{ margin:0; font-size:16px; } .nbcp-hd .sub{ font-size:12.5px; color:var(--text-muted); margin-top:2px; } .nbcp-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 8px; } .nbcp-chip{ border:0; font:inherit; font-size:12px; font-weight:600; padding:4px 9px; border-radius:8px; background:#F3F4F6; color:var(--text); white-space:nowrap; cursor:pointer; } .nbcp-chip em{ font-style:normal; color:#0B4F4A; font-weight:800; margin-left:4px; } .nbcp-chip.on{ background:#0F766E; color:#fff; } .nbcp-chip.on em{ color:#fff; } .nbcp-cat{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; } .nbcp-cat .l{ font-size:12.5px; font-weight:700; color:var(--text-muted); margin-right:4px; } .nbcp-cat .nbcp-chip{ font-size:12.5px; padding:6px 12px; border-radius:10px; background:#fff; border:1px solid var(--border); } .nbcp-cat .nbcp-chip.on{ border-color:#0F766E; background:#0F766E; color:#fff; } .nbcp-wrap{ overflow-x:auto; } .nbcp-t{ width:100%; border-collapse:collapse; } .nbcp-t th{ font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; } .nbcp-t td{ padding:9px 10px; font-size:13px; border-bottom:1px solid #F0F1F3; vertical-align:middle; } .nbcp-t tr:last-child td{ border-bottom:0; } .nbcp-t td.c, .nbcp-t th.c{ text-align:center; } .nbcp-t .nm{ font-weight:700; } .nbcp-t .id{ font-size:11.5px; color:var(--text-muted); } .nbcp-lg{ display:inline-block; white-space:nowrap; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:7px; } .nbcp-lg.y{ background:#E8F3F1; color:#0B4F4A; } .nbcp-lg.n{ background:#F3F4F6; color:var(--text-muted); } .nbcp-sup{ display:flex; flex-wrap:wrap; gap:4px; } .nbcp-sup span{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:7px; background:#F3F4F6; white-space:nowrap; } .nbcp-act{ display:flex; gap:6px; justify-content:flex-end; align-items:center; } .nbcp-act button.b{ font:inherit; font-size:12px; font-weight:700; padding:5px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); white-space:nowrap; cursor:pointer; } .nbcp-act button.b:hover{ border-color:#9CC9C3; } .nbcp-act button.p{ background:#9C3957; color:#fff; border-color:#9C3957; } .nbcp-act button.d{ color:#B4232A; } .nbcp-act .nbu-btn{ margin:0; } .nbcp-empty{ padding:22px 6px; text-align:center; color:var(--text-muted); font-size:13px; } @media (max-width:900px){ .nbcp{ grid-template-columns:minmax(0,1fr); } .nbcp-cl{ position:static; } } /* ===== CSS revision 47 — Client portal (owner approved 3 Oct 2026, design round 4): the portal a client sees after signing in. Every rule is scoped under #nbPortal. ===== */ #nbPortal{ position:fixed; inset:0; z-index:700; background:#F2F3F5; overflow:hidden; display:none; } #nbPortal.show{ display:block; } #nbPortal, #nbPortal *{ box-sizing:border-box; } #nbPortal, #nbPortal{ margin:0; } #nbPortal{ font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; color:#17141B; background:#F2F3F5; font-size:14px; -webkit-font-smoothing:antialiased; } #nbPortal small{ font-size:.72em; font-weight:700; opacity:.7; margin-right:1px; } #nbPortal .i{ width:18px; height:18px; flex-shrink:0; } #nbPortal .muted{ color:#67636C; } #nbPortal b{ font-weight:800; } #nbPortal .app{ display:grid; grid-template-columns:262px 1fr; min-height:100vh; background:#F2F3F5; } #nbPortal .side{ background:#fff; border-right:1px solid #E6CAD5; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; } #nbPortal .brand{ height:56px; display:flex; align-items:center; gap:11px; padding:0 18px; background:#FBEEF2; border-bottom:1px solid #EFD9E1; flex-shrink:0; } #nbPortal .brand img{ width:34px; height:34px; object-fit:contain; } #nbPortal .brand b{ display:block; font-size:13.5px; color:#16141A; } #nbPortal .brand span{ font-size:11.5px; color:#6A5560; font-weight:600; } #nbPortal .side nav{ padding:16px 12px; display:flex; flex-direction:column; gap:3px; } #nbPortal .side a{ display:flex; align-items:center; gap:13px; padding:10px 14px; border-radius:11px; color:#46444C; font-weight:600; font-size:13.5px; cursor:pointer; text-decoration:none; } #nbPortal .side a:hover{ background:#F4F4F6; } #nbPortal .side a.on{ background:#FCE8EE; color:#9C3957; font-weight:700; } #nbPortal .side a .n{ margin-left:auto; background:#F1F2F4; color:#46444C; font-size:11px; font-weight:700; padding:1px 8px; border-radius:99px; } #nbPortal .side a.on .n{ background:#fff; color:#9C3957; } #nbPortal .am{ margin-top:auto; height:56px; flex-shrink:0; background:#FBEEF2; border-top:1px solid #EFD9E1; padding:0 16px; display:flex; align-items:center; gap:10px; } #nbPortal .am .av{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, #C24F70, #9C3957); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11.5px; flex-shrink:0; } #nbPortal .am .x{ min-width:0; line-height:1.25; } #nbPortal .am .x b{ display:block; font-size:12.5px; color:#16141A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #nbPortal .am .x span{ font-size:11.5px; color:#6A5560; white-space:nowrap; } #nbPortal .top{ height:56px; background:linear-gradient(90deg, #FBEEF2, #F6EAF3); border-bottom:1px solid #EFD9E1; display:flex; align-items:center; justify-content:space-between; padding:0 30px; position:sticky; top:0; z-index:5; } #nbPortal .top .crumb{ font-size:13.5px; color:#6A5560; } #nbPortal .top .crumb b{ color:#9C3957; } #nbPortal .top .who{ display:flex; align-items:center; gap:10px; } #nbPortal .top .who .c{ text-align:right; font-size:12px; color:#6A5560; } #nbPortal .top .who .c b{ display:block; font-size:13.5px; color:#16141A; } #nbPortal .top .who .av{ width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid #EFD9E1; color:#9C3957; display:flex; align-items:center; justify-content:center; font-weight:800; } #nbPortal .top .bell{ width:36px; height:36px; cursor:pointer; border-radius:12px; background:#fff; border:1px solid #EFD9E1; display:flex; align-items:center; justify-content:center; position:relative; color:#6A5560; } #nbPortal .top .bell::after{ content:''; position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:#C24F70; border:2px solid #fff; } #nbPortal .top .btn{ border-color:#EFD9E1; height:34px; } #nbPortal .bellw{ position:relative; } #nbPortal .np{ display:none; position:absolute; right:0; top:46px; width:380px; background:#fff; border:1px solid #E6E7EB; border-radius:18px; box-shadow:0 24px 48px -20px rgba(43,31,38,.35); z-index:20; overflow:hidden; } #nbPortal .bellw.open .np{ display:block; } #nbPortal .np .h{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #F0F1F3; } #nbPortal .np .h b{ font-size:14.5px; } #nbPortal .np .h span{ font-size:12px; font-weight:700; color:#9C3957; } #nbPortal .np .it{ display:flex; gap:11px; padding:12px 16px; border-bottom:1px solid #F4F4F6; font-size:13px; line-height:1.45; } #nbPortal .np .it.new{ background:#FFF7FA; } #nbPortal .np .it .ti{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } #nbPortal .np .it .ti .i{ width:16px; height:16px; } #nbPortal .np .it em{ display:block; font-style:normal; font-size:11.5px; color:#8A8790; margin-top:2px; } #nbPortal .np .it .dot{ width:8px; height:8px; border-radius:50%; background:#C24F70; margin:6px 0 0 auto; flex-shrink:0; } #nbPortal .np .f{ text-align:center; padding:11px; font-size:12.5px; font-weight:700; color:#9C3957; } #nbPortal .top .bell b{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; border-radius:99px; background:#C24F70; color:#fff; font-size:10.5px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff; } #nbPortal .top .bell::after{ display:none; } #nbPortal .main{ padding:26px 30px 30px; min-height:640px; } #nbPortal .banner{ background:linear-gradient(120deg, #2B1F26 0%, #4A2C3A 55%, #6B3A4E 100%); color:#fff; border-radius:20px; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:0; } #nbPortal .banner h1{ margin:0; font-size:26px; font-weight:800; letter-spacing:-.5px; } #nbPortal .banner p{ margin:4px 0 0; color:rgba(255,255,255,.75); font-size:13.5px; } #nbPortal .banner .ro{ display:flex; gap:7px; align-items:center; font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); padding:8px 13px; border-radius:99px; white-space:nowrap; } #nbPortal .banner .ro .i{ width:14px; height:14px; } #nbPortal .tabs{ display:flex; gap:4px; margin:14px 0 20px; border-bottom:1px solid #E6E7EB; } #nbPortal .tabs span{ display:flex; align-items:center; gap:7px; padding:10px 14px 12px; font-weight:700; font-size:13.5px; color:#56545C; border-bottom:3px solid transparent; margin-bottom:-1px; cursor:pointer; } #nbPortal .tabs span.on{ color:#16141A; border-color:#C24F70; } #nbPortal .tabs span em{ font-style:normal; background:#F1F2F4; color:#46444C; font-size:11px; padding:1px 7px; border-radius:99px; } #nbPortal .tabs span.on em{ background:#FCE8EE; color:#9C3957; } #nbPortal .foot{ height:56px; background:linear-gradient(90deg, #FBEEF2, #F6EAF3); border-top:1px solid #EFD9E1; color:#6A5560; padding:0 30px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; position:sticky; bottom:0; z-index:4; } #nbPortal .foot b{ color:#16141A; } #nbPortal .right{ display:flex; flex-direction:column; min-height:100vh; } #nbPortal .right .main{ flex:1; } #nbPortal .info{ margin-top:28px; background:#fff; border:1px solid #E6E7EB; border-radius:20px; padding:22px 24px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:26px; } #nbPortal .info b{ display:block; font-size:13.5px; margin-bottom:9px; } #nbPortal .info p{ margin:0 0 6px; font-size:12.5px; color:#56545C; display:flex; gap:8px; align-items:center; } #nbPortal .info .i{ width:15px; height:15px; color:#9C3957; } #nbPortal .info a{ color:#9C3957; font-weight:700; text-decoration:none; } #nbPortal .info .co{ display:flex; gap:14px; } #nbPortal .info .co img{ width:52px; height:52px; object-fit:contain; } #nbPortal .info .co .n{ font-family:'Cinzel',serif; font-weight:700; font-size:15px; margin-bottom:6px; } #nbPortal .hero{ background:radial-gradient(circle at 0% 0%, #F9D6E2 0, transparent 45%), radial-gradient(circle at 60% -30%, #D9EAF0 0, transparent 50%), radial-gradient(circle at 100% 130%, #D6E6F8 0, transparent 55%), #FBF8FB; border:1px solid #EEE3EC; border-radius:20px; padding:20px 22px; margin-bottom:20px; } #nbPortal .hero .hl h1{ margin:0; font-size:17px; } #nbPortal .hero .hl p{ margin:3px 0 0; color:#56545C; font-size:13px; } #nbPortal .hero .row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:16px; } #nbPortal .hero .row > div{ background:#fff; border:1px solid #EEE3EC; border-radius:16px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 8px 20px -16px rgba(74,44,58,.5); } #nbPortal .hero .row .ti{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } #nbPortal .hero .row span{ font-size:12px; color:#56545C; font-weight:700; } #nbPortal .hero .row b{ display:block; font-size:20px; margin-top:3px; color:#16141A; } #nbPortal .hero .row em{ display:block; font-style:normal; font-size:11.5px; color:#6A6670; margin-top:3px; } #nbPortal .hero .row > div.hot{ border-color:#E8BFCD; background:linear-gradient(180deg, #fff, #FFF6F9); } #nbPortal .hero .row > div.hot b{ color:#7E2F4A; } #nbPortal .card{ background:#fff; border:1px solid #E6E7EB; border-radius:20px; padding:20px 22px; } #nbPortal .card h3{ margin:0; font-size:16px; } #nbPortal .card .sub{ font-size:12.5px; color:#67636C; margin-top:3px; } #nbPortal .hd{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; } #nbPortal .chips{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; } #nbPortal .chips span{ padding:8px 15px; border-radius:99px; background:#fff; border:1px solid #E6E7EB; font-weight:700; font-size:13px; white-space:nowrap; } #nbPortal .chips span.on{ background:#FCE8EE; color:#9C3957; border-color:#E8BFCD; } #nbPortal .tag{ flex-shrink:0; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap; } #nbPortal .tag .i{ width:13px; height:13px; } #nbPortal .t-teal{ background:#E3F2EF; color:#0B5A53; } #nbPortal .t-mauve{ background:#F4E9F1; color:#7A3A66; } #nbPortal .t-grey{ background:#EEF0F2; color:#4A4750; } #nbPortal .t-plum{ background:#17141B; color:#fff; } #nbPortal .btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:11px; border:1px solid #DFE1E6; background:#fff; font:700 13px 'Plus Jakarta Sans',sans-serif; color:#17141B; white-space:nowrap; } #nbPortal .btn .i{ width:15px; height:15px; } #nbPortal .btn.p{ background:#16141A; border-color:#16141A; color:#fff; } #nbPortal .btn.d{ background:#9C3957; border-color:#9C3957; color:#fff; } #nbPortal .bar{ height:8px; background:#EDEEF1; border-radius:99px; overflow:hidden; } #nbPortal .bar i{ display:block; height:100%; background:linear-gradient(90deg, #0F766E, #2BB3A3); border-radius:99px; } #nbPortal .g2{ display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; } #nbPortal .g2b{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; } #nbPortal .trk{ margin-bottom:16px; } #nbPortal .trk .h{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; } #nbPortal .trk .h b.t{ font-size:16px; } #nbPortal .trk .h .m{ display:block; color:#67636C; font-size:12.5px; margin-top:3px; } #nbPortal .trk .big{ display:flex; align-items:baseline; gap:8px; } #nbPortal .trk .big b{ font-size:26px; } #nbPortal .trk .big span{ color:#67636C; font-weight:700; font-size:13px; } #nbPortal .steps{ display:flex; margin:4px 0 2px; } #nbPortal .steps .s{ flex:1; text-align:center; position:relative; font-size:11.5px; font-weight:700; color:#8A8790; } #nbPortal .steps .s .dot{ width:26px; height:26px; border-radius:50%; margin:0 auto 7px; background:#fff; border:2px solid #D9DCE1; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; } #nbPortal .steps .s::before{ content:''; position:absolute; top:12px; left:-50%; width:100%; height:2px; background:#D9DCE1; } #nbPortal .steps .s:first-child::before{ display:none; } #nbPortal .steps .s.ok{ color:#17141B; } #nbPortal .steps .s.ok .dot{ background:#0F766E; border-color:#0F766E; color:#fff; } #nbPortal .steps .s.ok::before, #nbPortal .steps .s.now::before{ background:#0F766E; } #nbPortal .steps .s.now{ color:#0B5A53; } #nbPortal .steps .s.now .dot{ border-color:#0F766E; box-shadow:0 0 0 5px #DDF0EC; } #nbPortal .steps .s.now .dot::after{ content:''; width:10px; height:10px; border-radius:50%; background:#0F766E; } #nbPortal .steps .s .dot .i{ width:14px; height:14px; } #nbPortal .steps .s em{ display:block; font-style:normal; font-weight:600; font-size:11px; color:#8A8790; margin-top:2px; } #nbPortal .secs{ display:grid; gap:10px; margin-top:14px; } #nbPortal .secs div{ background:#F6F7F9; border-radius:13px; padding:10px 12px; } #nbPortal .secs span{ display:block; font-size:11.5px; font-weight:700; color:#67636C; } #nbPortal .secs b{ font-size:18px; } #nbPortal .secs .bar{ height:5px; margin-top:6px; } #nbPortal .tbl{ width:100%; border-collapse:collapse; } #nbPortal .tbl th{ text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#67636C; font-weight:700; padding:9px 10px; border-bottom:1px solid #E6E7EB; white-space:nowrap; } #nbPortal .tbl td{ padding:12px 10px; border-bottom:1px solid #F0F1F3; font-size:13.5px; vertical-align:middle; } #nbPortal .tbl tr:last-child td{ border-bottom:0; } #nbPortal .tbl .r{ text-align:right; } #nbPortal .tbl .c{ text-align:center; } #nbPortal .tbl td .s{ display:block; font-size:12px; color:#67636C; margin-top:2px; } #nbPortal .tbl tr.tot td{ background:#F6F7F9; font-weight:800; } #nbPortal .tbl td b{ white-space:nowrap; } #nbPortal .tbl td:nth-child(2){ white-space:nowrap; } #nbPortal .tbl td.r .btn + .btn{ margin-top:0; } #nbPortal .tbl td.r{ white-space:nowrap; } #nbPortal .list .it{ display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #F0F1F3; } #nbPortal .list .it:last-child{ border-bottom:0; } #nbPortal .list .it .ii{ width:38px; height:38px; border-radius:12px; background:#E3F2EF; color:#0B5A53; display:flex; align-items:center; justify-content:center; flex-shrink:0; } #nbPortal .list .it .ii.m{ background:#F4E9F1; color:#7A3A66; } #nbPortal .list .it .r{ margin-left:auto; text-align:right; } #nbPortal .list .it b{ display:block; font-size:13.5px; } #nbPortal .list .it span.s{ font-size:12.5px; color:#67636C; } #nbPortal .tl{ border-left:2px solid #E6E7EB; margin-left:8px; padding-left:20px; } #nbPortal .tl .e{ position:relative; padding-bottom:15px; } #nbPortal .tl .e::before{ content:''; position:absolute; left:-28px; top:2px; width:14px; height:14px; border-radius:50%; background:#0F766E; border:3px solid #DDF0EC; } #nbPortal .tl .e.f::before{ background:#fff; border-color:#D9DCE1; } #nbPortal .tl .e b{ display:block; font-size:13.5px; } #nbPortal .tl .e span{ font-size:12.5px; color:#67636C; } #nbPortal .st{ color:#0F766E; letter-spacing:2px; font-size:15px; } #nbPortal .st i{ color:#D5D8DD; font-style:normal; } #nbPortal .msg{ display:flex; gap:10px; margin-bottom:12px; } #nbPortal .msg .av{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; } #nbPortal .msg .b{ max-width:76%; border-radius:16px; padding:11px 14px; font-size:13.5px; line-height:1.5; } #nbPortal .msg .b .w{ display:block; font-size:11.5px; font-weight:700; margin-bottom:3px; opacity:.75; } #nbPortal .msg.you{ flex-direction:row-reverse; } #nbPortal .msg.you .b{ background:linear-gradient(135deg, #0F766E, #14907F); color:#fff; border-bottom-right-radius:5px; box-shadow:0 8px 18px -12px rgba(15,118,110,.7); } #nbPortal .msg.you .av{ background:#E6F2F0; color:#3F7A73; } #nbPortal .msg.us .b{ background:#FCF1F5; border:1px solid #F2DCE5; border-bottom-left-radius:5px; } #nbPortal .msg.us .av{ background:linear-gradient(135deg, #C24F70, #9C3957); color:#fff; } #nbPortal .compose{ display:flex; gap:8px; align-items:center; border:1px solid #DFE1E6; border-radius:14px; padding:6px 6px 6px 14px; margin-top:6px; } #nbPortal .compose > span:first-child{ flex:1; color:#9A97A0; font-size:13.5px; } #nbPortal .field{ border:1px solid #DFE1E6; border-radius:12px; padding:10px 12px; color:#9A97A0; font-size:13.5px; background:#fff; } #nbPortal .seg{ display:inline-flex; border:1px solid #DFE1E6; border-radius:11px; overflow:hidden; } #nbPortal .seg span{ padding:8px 14px; font-weight:700; font-size:13px; } #nbPortal .seg span.on{ background:#FCE8EE; color:#9C3957; } #nbPortal .lbl{ display:block; font-size:12px; font-weight:700; color:#67636C; margin:12px 0 6px; } #nbPortal .docs{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; } #nbPortal .docs div{ display:flex; align-items:center; gap:12px; border:1px solid #E6E7EB; border-radius:14px; padding:12px 14px; background:#fff; } #nbPortal .docs .ii{ width:38px; height:38px; border-radius:11px; background:#F4E9F1; color:#7A3A66; display:flex; align-items:center; justify-content:center; } #nbPortal .docs b{ display:block; font-size:13.5px; } #nbPortal .docs span{ font-size:12px; color:#67636C; } #nbPortal .docs .dl{ margin-left:auto; display:flex; gap:6px; } #nbPortal .empty{ text-align:center; color:#67636C; padding:18px; } #nbPortal .hero .row .st{ color:#0F766E; font-size:17px; } #nbPortal .hero .row .st i{ color:#D5D8DD; } #nbPortal .side a{ white-space:nowrap; } #nbPortal .fbsum{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; } #nbPortal .fbsum > div{ background:#fff; border:1px solid #EEE3EC; border-radius:16px; padding:14px 16px; } #nbPortal .fbsum span{ font-size:12px; font-weight:700; color:#56545C; } #nbPortal .fbsum b{ display:block; font-size:22px; margin-top:3px; } #nbPortal .fbsum .st{ font-size:14px; } #nbPortal .ft{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:99px; } #nbPortal .ft.q{ background:#E7F1F4; color:#2F6F86; } #nbPortal .ft.s{ background:#EBEFF6; color:#3E5686; } #nbPortal section[data-s]{ display:none; } #nbPortal section[data-s].show{ display:block; } #nbPortal .side a, #nbPortal .mnav span, #nbPortal .js-go{ cursor:pointer; } @media (max-width:700px){#nbPortal .app{ display:block; } #nbPortal .foot{ position:static; flex-direction:column; justify-content:center; gap:2px; height:auto; padding:10px 14px; text-align:center; } #nbPortal .info{ grid-template-columns:1fr; gap:16px; } #nbPortal .np{ width:310px; right:-60px; } #nbPortal .main{ min-height:0; } #nbPortal .side{ display:none; } #nbPortal .top{ padding:0 14px; } #nbPortal .top .who .c, #nbPortal .top .who .av{ display:none; } #nbPortal .tabs{ overflow:hidden; } #nbPortal .tabs span{ padding:9px 10px 10px; font-size:12.5px; } #nbPortal .banner{ flex-direction:column; align-items:flex-start; padding:18px; } #nbPortal .banner h1{ font-size:21px; } #nbPortal .banner .ro{ white-space:normal; } #nbPortal .main{ padding:14px; } #nbPortal .hero{ padding:20px; border-radius:20px; } #nbPortal .hero .row{ grid-template-columns:1fr 1fr; } #nbPortal .hero .row > div{ padding:12px; } #nbPortal .hero .row .ti{ display:none; } #nbPortal .g2, #nbPortal .g2b{ grid-template-columns:1fr; } #nbPortal .steps .s{ font-size:0; } #nbPortal .steps .s em{ display:none; } #nbPortal .steps .s.now{ font-size:10.5px; } #nbPortal .secs{ grid-template-columns:repeat(3, 1fr) !important; } #nbPortal .foot .cols{ grid-template-columns:1fr; gap:14px; } #nbPortal .foot .bot{ flex-direction:column; gap:6px; } #nbPortal .mnav{ display:grid !important; } } #nbPortal .mnav{ display:none; position:sticky; bottom:0; z-index:6; grid-template-columns:repeat(5, 1fr); background:#fff; border-top:1px solid #E6E7EB; padding:8px 0 10px; } #nbPortal .mnav span{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#8A8790; } #nbPortal .mnav span.on{ color:#9C3957; } #nbPortal .mnav .i{ width:22px; height:22px; } #nbPortal .pt-wrap{ height:100%; overflow:auto; } #nbPortal .pv{ position:sticky; top:0; z-index:30; background:#16141A; color:#fff; display:flex; align-items:center; justify-content:center; gap:14px; height:40px; font-size:13px; font-weight:600; } #nbPortal .pv button{ background:#fff; color:#16141A; border:0; border-radius:9px; height:28px; padding:0 12px; font:700 12.5px 'Plus Jakarta Sans',sans-serif; cursor:pointer; } #nbPortal button.btn{ cursor:pointer; } #nbPortal .btn:disabled{ opacity:.5; cursor:not-allowed; } #nbPortal a.btn{ text-decoration:none; } #nbPortal textarea.field, #nbPortal select.field, #nbPortal input.field{ width:100%; color:#16141A; font:500 13.5px 'Plus Jakarta Sans',sans-serif; outline:none; } #nbPortal textarea.field{ height:96px; resize:vertical; } #nbPortal .field:focus{ border-color:#C24F70; box-shadow:0 0 0 4px rgba(194,79,112,.12); } #nbPortal .compose input{ flex:1; border:0; outline:none; font:500 13.5px 'Plus Jakarta Sans',sans-serif; color:#16141A; background:transparent; min-width:0; } #nbPortal .rate{ display:flex; gap:4px; } #nbPortal .rate button{ border:0; background:none; font-size:28px; line-height:1; color:#D5D8DD; cursor:pointer; padding:0 2px; } #nbPortal .rate button.on{ color:#0F766E; } #nbPortal .seg button{ border:0; background:#fff; padding:8px 14px; font:700 13px 'Plus Jakarta Sans',sans-serif; cursor:pointer; color:#16141A; } #nbPortal .seg button.on{ background:#FCE8EE; color:#9C3957; } #nbPortal .seg button + button{ border-left:1px solid #DFE1E6; } #nbPortal .err{ color:#B4232A; font-size:12.5px; font-weight:700; margin-top:8px; min-height:16px; } #nbPortal .okmsg{ color:#0B5A53; } #nbPortal .np{ max-height:min(520px, calc(100vh - 90px)); overflow:auto; } #nbPortal .np .it{ cursor:pointer; } #nbPortal .np .empty{ padding:26px 16px; } #nbPortal .trk{ cursor:default; } #nbPortal .js-go, #nbPortal [data-go], #nbPortal [data-doc], #nbPortal [data-order]{ cursor:pointer; } #nbPortal .tag.t-wait{ background:#FFF4E5; color:#8A5A12; } #nbPortal .none{ background:#fff; border:1px dashed #E1D4DC; border-radius:20px; padding:34px; text-align:center; color:#6A5560; font-weight:600; } #nbPortal .mtabs{ display:flex; gap:6px; flex-wrap:wrap; } /* ---- revision 47 (continued) — the bell for staff: top right of the header on every page ---- */ #nbBell{ position:fixed; top:10px; right:30px; z-index:650; font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; } #nbBell .nbn-btn{ position:relative; width:36px; height:36px; border-radius:11px; background:#fff; border:1px solid #EFD9E1; color:#6A5560; display:flex; align-items:center; justify-content:center; cursor:pointer; } #nbBell .nbn-btn:hover{ color:#9C3957; border-color:#E2BFCC; } #nbBell .nbn-btn svg{ width:18px; height:18px; } #nbBell .nbn-btn b{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; border-radius:99px; background:#C24F70; color:#fff; font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid #fff; } #nbBell .nbn-p{ position:absolute; right:0; top:46px; width:400px; max-height:min(560px, calc(100vh - 80px)); overflow:auto; background:#fff; border:1px solid #E6E7EB; border-radius:18px; box-shadow:0 24px 48px -20px rgba(43,31,38,.35); } #nbBell .nbn-h{ position:sticky; top:0; background:#fff; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #F0F1F3; z-index:1; } #nbBell .nbn-h b{ font-size:14.5px; color:#16141A; } #nbBell .nbn-h span{ font-size:12px; font-weight:700; color:#9C3957; cursor:pointer; } #nbBell .nbn-it{ display:flex; gap:11px; padding:12px 16px; border-bottom:1px solid #F4F4F6; font-size:13px; line-height:1.45; color:#16141A; cursor:pointer; } #nbBell .nbn-it:hover{ background:#FAFAFB; } #nbBell .nbn-it.new{ background:#FFF7FA; } #nbBell .nbn-ti{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } #nbBell .nbn-ti svg{ width:16px; height:16px; } #nbBell .nbn-it em{ display:block; font-style:normal; font-size:11.5px; color:#8A8790; margin-top:2px; } #nbBell .nbn-dot{ width:8px; height:8px; border-radius:50%; background:#C24F70; margin:6px 0 0 auto; flex-shrink:0; } #nbBell .nbn-empty{ padding:26px 16px; text-align:center; color:#6A5560; font-size:13px; } @media (max-width:700px){ #nbBell{ right:12px; } #nbBell .nbn-p{ width:calc(100vw - 24px); } } /* Feedback page: the conversation with the client */ .nbfb-th{ margin-top:10px; display:flex; flex-direction:column; gap:8px; } .nbfb-th .m{ max-width:80%; border-radius:14px; padding:9px 12px; font-size:13px; line-height:1.5; } .nbfb-th .m.c{ align-self:flex-start; background:#E6F2F0; color:#0B4F4A; border-bottom-left-radius:4px; } .nbfb-th .m.s{ align-self:flex-end; background:#FCF1F5; border:1px solid #F2DCE5; color:#16141A; border-bottom-right-radius:4px; } .nbfb-th .m span{ display:block; font-size:11px; font-weight:700; opacity:.7; margin-bottom:2px; }#nbBell .nbn-sec{ padding:9px 16px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A5A12; background:#FFFBF3; border-bottom:1px solid #F4F4F6; } /* ===== CSS revision 48 — Login page (owner, 3 Oct 2026): the left panel always fits the window (no cards cut by the taskbar on laptops); the logo is shown in white with no box behind it ===== */ html[data-opt="2"] .nb-li{ height:100vh; min-height:0; padding:clamp(18px,4.2vh,40px) clamp(28px,4vw,56px) clamp(14px,3vh,32px); overflow:hidden; } html[data-opt="2"] .nb-li-mark{ width:auto; height:auto; background:none; border-radius:0; overflow:visible; } html[data-opt="2"] .nb-li-mark img{ width:clamp(40px,6.4vh,58px); height:clamp(40px,6.4vh,58px); filter:brightness(0) invert(1); opacity:.96; } html[data-opt="2"] .nb-li-top{ gap:14px; } html[data-opt="2"] .nb-li-main{ margin:clamp(10px,2.6vh,36px) 0; } html[data-opt="2"] .nb-li-head{ font-size:clamp(24px, min(3.1vw, 5.4vh), 42px); margin:clamp(6px,1.2vh,12px) 0 clamp(8px,1.6vh,14px); } html[data-opt="2"] .nb-li-text{ font-size:clamp(13px,1.9vh,15px); line-height:1.55; } html[data-opt="2"] .nb-li-stages{ margin:clamp(12px,2.8vh,30px) 0 clamp(12px,2.6vh,28px); } html[data-opt="2"] .nb-li-grid{ gap:clamp(8px,1.3vh,12px); } html[data-opt="2"] .nb-li-f{ padding:clamp(8px,1.4vh,14px) 16px; } html[data-opt="2"] .nb-li-fd{ font-size:clamp(11.5px,1.6vh,12.5px); } @media (max-height:640px){ html[data-opt="2"] .nb-li-fd{ display:none; } html[data-opt="2"] .nb-li-f{ align-items:center; } html[data-opt="2"] .nb-li-text{ display:none; } } @media (max-width:900px){ html[data-opt="2"] .nb-li{ height:auto; overflow:visible; } } html[data-opt="2"] .login-form-panel{ min-height:100vh; overflow:auto; } /* ===== CSS revision 49 — left menu (owner, 3 Oct 2026): items closer together (27 px instead of 35), slightly smaller menu text and icons, less space above each department heading — more of the menu fits without scrolling ===== */ html[data-opt="2"] .nav-group-label{ padding:10px 10px 3px; font-size:10px; } html[data-opt="2"] .nav-item{ padding:5px 12px; gap:11px; font-size:12.5px; min-height:0; } html[data-opt="2"] .nav-item .icon{ width:17px; height:17px; } html[data-opt="2"] .nav-group{ margin-bottom:2px; } /* Settings › Screen size */ .nb-zoom{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; } .nb-zoom button{ border:1px solid var(--border); background:#fff; border-radius:16px; padding:16px 12px; text-align:left; cursor:pointer; font-family:inherit; color:var(--text); } .nb-zoom button b{ display:block; font-size:15px; } .nb-zoom button span{ display:block; font-size:12.5px; color:var(--text-muted); margin-top:3px; } .nb-zoom button .aa{ font-weight:800; color:#9C3957; margin-bottom:8px; display:block; line-height:1; } .nb-zoom button.on{ border-color:#C24F70; background:#FFF6F9; box-shadow:0 0 0 3px rgba(194,79,112,.12); } @media (max-width:760px){ .nb-zoom{ grid-template-columns:1fr 1fr; } } /* ---------- Revision 50 (3 Oct 2026) · Settings › Numbering: friendly "download the numbering sheet?" question (not the red delete style) ---------- */ html[data-opt="2"] .nb-modal-i.ok{ background:#FCE8EE; color:#9C3957; } html[data-opt="2"] .login-btn.wine{ background:#9C3957 !important; border-color:#9C3957 !important; color:#fff !important; } /* ---------- Revision 51 (3 Oct 2026) · text boxes (e.g. quotation "Additional notes") use the full width of their field ---------- */ html[data-opt="2"] #app .field textarea{ width:100%; resize:vertical; } /* ---------- Revision 52 (3 Oct 2026) · Backup page made live: the banner's white shield tile glows green (working) or blinks red (problem); a small light next to "Backup" in the menu; live numbers; backup history ---------- */ @keyframes nbbPulseG{0%{box-shadow:0 0 0 0 rgba(47,158,98,.55)}70%{box-shadow:0 0 0 10px rgba(47,158,98,0)}100%{box-shadow:0 0 0 0 rgba(47,158,98,0)}} @keyframes nbbPulseR{0%{box-shadow:0 0 0 0 rgba(201,58,58,.6);opacity:1}50%{opacity:.55}70%{box-shadow:0 0 0 12px rgba(201,58,58,0)}100%{box-shadow:0 0 0 0 rgba(201,58,58,0);opacity:1}} @keyframes nbbRingG{0%{box-shadow:0 0 0 0 rgba(47,158,98,.45),0 6px 16px -8px rgba(47,158,98,.5)}70%{box-shadow:0 0 0 14px rgba(47,158,98,0),0 6px 16px -8px rgba(47,158,98,.5)}100%{box-shadow:0 0 0 0 rgba(47,158,98,0),0 6px 16px -8px rgba(47,158,98,.5)}} @keyframes nbbRingR{0%{box-shadow:0 0 0 0 rgba(201,58,58,.55)}60%{box-shadow:0 0 0 16px rgba(201,58,58,0)}100%{box-shadow:0 0 0 0 rgba(201,58,58,0)}} @keyframes nbbBlink{0%,100%{opacity:1}50%{opacity:.25}} html[data-opt="2"] .nbb-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-left:auto; flex:0 0 auto; } html[data-opt="2"] .nbb-dot.ok{ background:#2F9E62; animation:nbbPulseG 2s infinite; } html[data-opt="2"] .nbb-dot.bad{ background:#C93A3A; animation:nbbPulseR 1s infinite; } html[data-opt="2"] .nbb-hero{ grid-template-columns:auto minmax(0,1fr) auto; } html[data-opt="2"] .nbb-hero b{ font-size:21px; } html[data-opt="2"] .nbb-hero span{ display:block; margin-top:3px; font-size:13px; line-height:1.5; } html[data-opt="2"] .nbb-si{ position:relative; width:62px; height:62px; border-radius:20px; background:#fff; } html[data-opt="2"] .nbb-si svg{ width:28px; height:28px; } html[data-opt="2"] .nbb-hero.ok .nbb-si{ color:#2F9E62; animation:nbbRingG 2.2s infinite; } html[data-opt="2"] .nbb-hero.bad .nbb-si{ color:#C93A3A; animation:nbbRingR 1.1s infinite; } html[data-opt="2"] .nbb-pip{ position:absolute; right:-4px; top:-4px; width:16px; height:16px; border-radius:50%; border:3px solid #fff; } html[data-opt="2"] .nbb-hero.ok .nbb-pip{ background:#2F9E62; } html[data-opt="2"] .nbb-hero.bad .nbb-pip{ background:#C93A3A; animation:nbbBlink 1.1s infinite; } html[data-opt="2"] .nbb-hero.bad b{ color:#A32626; } html[data-opt="2"] .nbb-acts{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; } html[data-opt="2"] .nbb-acts .login-btn{ margin:0; height:44px; padding:0 20px !important; white-space:nowrap; } html[data-opt="2"] .nbb-acts .login-btn.nbb-w{ background:#fff !important; color:var(--text) !important; border:1px solid #E6DCE4 !important; } html[data-opt="2"] .nbb-acts .login-btn.nbb-red{ background:#C93A3A !important; border-color:#C93A3A !important; color:#fff !important; } html[data-opt="2"] .nbb-n{ font-weight:800; font-size:16px; color:var(--text); } html[data-opt="2"] .nbb-file{ font-size:12.5px; color:var(--text); } /* the software's own font (owner, 3 Oct 2026) */ html[data-opt="2"] .nbb-ok{ color:#2F6A45; font-weight:700; } html[data-opt="2"] .nbb-bad{ color:#A32626; font-weight:700; } html[data-opt="2"] .nbb-hist tr.bad td{ background:#FDF5F5; } @media (max-width:900px){ html[data-opt="2"] .nbb-hero{ grid-template-columns:auto minmax(0,1fr); } html[data-opt="2"] .nbb-acts{ grid-column:1 / -1; justify-content:flex-start; } } html[data-opt="2"] .nbb-hist tr.nbb-chk td{ color:var(--text-muted); } html[data-opt="2"] .nbb-chkr{ color:var(--text-muted); font-weight:700; } /* rev 52 · a check with nothing changed (grey row) */ /* rev 53 · employee list chosen in the Preview window (owner approved 4 Oct 2026): section line, short + full name, expired tag */ .nbel-secs{ display:flex; flex-wrap:wrap; gap:1.2mm 3mm; margin:0 0 3mm; font-size:8.6pt; color:#6E6268; } .nbel-secs b{ color:#2B1F26; } .nbel-secs i{ font-style:normal; color:#C9B7BF; } .nbel .nbd-items td{ vertical-align:top; } .nbel .nbd-items td.nw{ white-space:nowrap; } .nbel td.nm b{ font-weight:700; } .nbel td.nm small{ display:block; color:#7A6E74; font-size:7.4pt; line-height:1.25; margin-top:.4mm; } .nbel i.xp{ font-style:normal; font-size:6.6pt; font-weight:700; color:#7E3152; background:#FCE8EE; border-radius:6px; padding:0 1.2mm; margin-left:1mm; } .nbel .nbd-items td{ padding:1.5mm 2mm; font-size:9pt; } .nbel .nbd-items th{ font-size:7pt; } .nbel td.nm small{ font-size:7pt; } /* compact rows: more employees per page */ .nbd.nbd-el + .nbd.nbd-el{ break-before:page; page-break-before:always; } /* each company's employee list starts on a new page */ /* salary sheet (owner approved 4 Oct 2026): deductions lightly shaded, net cash bold, section subtotals, signatures */ .nbsal .nbd-items td{ font-size:8.4pt; padding:1.4mm 1.4mm; } .nbsal .nbd-items th{ font-size:6.6pt; vertical-align:bottom; } .nbsal .nbd-items .ded{ background:#FBF6F8; } .nbsal .nbd-items td.net{ font-weight:800; } .nbsal .nbd-items tr.st td{ font-weight:700; color:#5A2A3D; border-bottom:1px solid #E5DADE; } .nbsal td.sg{ width:22mm; } .nbsal-sum{ width:72%; } .nbsal-sum td{ font-size:10pt !important; padding:2.4mm 2.2mm !important; } /* salary sheet (owner, 8 Oct 2026): fixed widths that always fit the paper, a line above the headings, headings on 2 lines, taller rows, room to sign */ .nbsal .nbsal-t{ table-layout:fixed; width:100%; } .nbsal .nbsal-t th{ border-top:1.5px solid #2B1F26; white-space:nowrap !important; text-overflow:clip; letter-spacing:.03em !important; line-height:1.25; padding:1.6mm 1mm; overflow:hidden; } .nbsal .nbsal-t td{ height:var(--rh, 10mm); vertical-align:middle; overflow:hidden; overflow-wrap:break-word; padding-left:1mm !important; padding-right:1mm !important; } .nbsal .nbsal-t td.nw{ white-space:nowrap; font-size:8pt; } .nbsal .nbsal-t td.sg{ width:auto; border-left:1px solid #E5DADE; } .nbsal .nbsal-t tr.gh td, .nbsal .nbsal-t tr.st td, .nbsal .nbsal-t tr.tot td{ height:auto; padding-top:1mm; padding-bottom:1mm; } /* salary sheet page (owner, 8 Oct 2026): header higher and smaller, no footer — more rows on each page */ .nbd.nbd-sal .nbd-band{ padding:3mm 12mm 2.5mm; } .nbd.nbd-sal .nbd-lg img{ width:15mm; height:15mm; } .nbd.nbd-sal .nbd-headspace{ height:3mm; } .nbd.nbd-sal .nbd-strip{ padding:0 12mm; } .nbd.nbd-sal .nbd-strip div{ padding:1.6mm 0; } .nbd.nbd-sal .nbd-body{ padding:0 12mm; } .nbd.nbd-sal .nbd-foot{ display:none !important; } .nbd.nbd-sal .nbd-footspace{ height:3mm; } .nbsal .nbsal-t th[data-k="sig"], .nbsal .nbsal-t td.sg{ border-left:1px solid #B9A9B0 !important; border-right:1px solid #B9A9B0 !important; } /* the signature stays inside its box (owner, 8 Oct 2026) */ .nbd.nbd-sal .nbd-strip span{ white-space:nowrap; letter-spacing:.06em; } .nbd.nbd-sal .nbd-strip{ gap:4mm; } .nbsal .nbsal-t td{ padding-top:.6mm !important; padding-bottom:.6mm !important; line-height:1.2; } .nbsal .nbsal-t tr.gh td{ padding-top:.8mm !important; padding-bottom:.8mm !important; } .nbd.nbd-sal .nbd-strip div{ padding:1.1mm 0; } .nbd.nbd-sal .nbsal-sgn{ margin-top:12mm; } /* room to sign above the lines */ .nbd.nbd-sal .nbsal-t th{ padding-top:1.1mm; padding-bottom:1.1mm; } .nbsal-sgn{ display:grid; grid-template-columns:repeat(3,1fr); gap:12mm; margin-top:10mm; font-size:8pt; color:#6E6268; } .nbsal-sgn div{ border-top:1px solid #9A8C93; padding-top:1.5mm; } /* ============ HR Advance / Expense (owner approved preview, 10 Oct 2026): new entry on one line; "Who still owes" name labels → details below ============ */ .nb-hrline{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) auto; gap:10px; align-items:end; } .nb-hrline .field{ margin:0; } .nb-hrbtns{ display:flex; gap:8px; } .nb-hrbtns .login-btn{ white-space:nowrap; } @media (max-width:900px){ .nb-hrline{ grid-template-columns:1fr 1fr; } .nb-hrline .e, .nb-hrline .p, .nb-hrbtns{ grid-column:1 / -1; } } .nb-owel{ display:flex; flex-wrap:wrap; gap:8px; } .nb-owe{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:99px; padding:5px 12px 5px 5px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .nb-owe .av{ width:26px; height:26px; border-radius:50%; background:#FCE8EE; color:#9C3957; display:grid; place-items:center; font-size:10.5px; font-weight:800; } .nb-owe b{ color:#9C3957; font-weight:800; } .nb-owe:hover{ border-color:#E4C7D3; } .nb-owe.on{ background:#FCE8EE; border-color:#F0C9D6; } .nb-owed{ margin-top:14px; border:1px solid var(--border); border-radius:14px; padding:14px; } .nb-owed .dh{ display:flex; align-items:center; gap:10px; margin-bottom:12px; } .nb-owed .dh .av{ width:36px; height:36px; border-radius:50%; background:#FCE8EE; color:#9C3957; display:grid; place-items:center; font-weight:800; font-size:12px; } .nb-owed .dh b{ display:block; } .nb-owed .dh small{ color:var(--text-muted); font-size:12px; } .nb-owed .dh .x{ margin-left:auto; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:10px; padding:6px 12px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .nb-owed .sum{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:12px; } .nb-owed .sum div{ background:#F7F5F7; border-radius:12px; padding:10px 12px; } .nb-owed .sum span{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; } .nb-owed .sum b{ font-size:17px; } .nb-owed .sum .m{ background:#FCE8EE; } .nb-owed .sum .m b{ color:#9C3957; } /* HR Advance / Expense entries (owner approved preview, 10 Oct 2026): grouped by month, one row each — given (+, wine) / from salary (−, teal) */ .nb-entools{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:4px; } .nb-enseg{ display:flex; background:#F4F2F4; border-radius:12px; padding:3px; } .nb-enseg button{ border:0; background:none; font:inherit; font-size:13px; font-weight:600; padding:7px 12px; border-radius:9px; color:var(--text-muted); cursor:pointer; } .nb-enseg button.on{ background:var(--card); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08); } .nb-ensearch{ height:38px; border:1px solid transparent; background:#F4F5F7; border-radius:12px; padding:0 12px; font:inherit; font-size:13px; width:240px; max-width:100%; color:var(--text); } .nb-ensearch:focus{ outline:none; background:#fff; border-color:var(--accent); } .nb-enmo{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0 8px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } .nb-enmo i{ font-style:normal; letter-spacing:0; text-transform:none; font-weight:600; } .nb-enmo i b{ color:#9C3957; } .nb-enmo i em{ font-style:normal; color:#1F7A72; font-weight:700; } .nb-enit{ display:grid; grid-template-columns:44px minmax(0,1.4fr) minmax(0,1.6fr) 130px 110px; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:14px; margin-bottom:6px; } .nb-enit:hover{ background:#FCFAFB; } .nb-enit .d{ text-align:center; line-height:1.05; } .nb-enit .d b{ display:block; font-size:17px; } .nb-enit .d small{ font-size:10.5px; color:var(--text-muted); font-weight:700; text-transform:uppercase; } .nb-enit .who{ display:flex; align-items:center; gap:10px; min-width:0; } .nb-enit .who .av{ width:32px; height:32px; border-radius:50%; background:#FCE8EE; color:#9C3957; display:grid; place-items:center; font-size:11px; font-weight:800; flex:none; } .nb-enit .who b{ display:block; font-size:14px; } .nb-enit .who small{ display:block; font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nb-enit .pt{ font-size:13.5px; min-width:0; } .nb-enit .tg{ display:inline-block; font-size:11px; font-weight:700; border-radius:99px; padding:2px 8px; margin-left:6px; vertical-align:1px; } .nb-enit .tg.g{ background:#FCE8EE; color:#9C3957; } .nb-enit .tg.s{ background:#E3F3F1; color:#1F7A72; } .nb-enit .am{ text-align:right; font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; } .nb-enit .am.g{ color:#9C3957; } .nb-enit .am.s{ color:#1F7A72; } .nb-enit .am small{ display:block; font-size:11px; color:var(--text-muted); font-weight:600; } .nb-enit .ac{ display:flex; justify-content:flex-end; } .nb-enit .ac .lock{ font-size:11.5px; color:var(--text-muted); } @media (max-width:760px){ .nb-enit{ grid-template-columns:44px 1fr auto; } .nb-enit .pt{ grid-column:2 / -1; grid-row:2; } .nb-enit .am{ grid-column:2 / -1; grid-row:3; text-align:left; } .nb-enit .ac{ grid-column:3; grid-row:1; } } html[data-opt="2"] .nb-enit .nb-rowbtns{ display:flex; gap:6px; justify-content:flex-end; } html[data-opt="2"] .nb-enit .nb-rowbtns button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); padding:0; } html[data-opt="2"] .nb-enit .nb-rowbtns button svg{ width:14px; height:14px; } html[data-opt="2"] .nb-enit .nb-rowbtns button:hover{ border-color:var(--accent); color:var(--accent-dk); } html[data-opt="2"] .nb-enit .nb-rowbtns button.nbu-btn{ width:auto; min-width:30px; padding:0 7px; } /* HR Advance / Expense — compact (owner approved preview, 10 Oct 2026): employees table + own statement; entries with months folded */ .nb-ppl, .nb-ent{ width:100%; border-collapse:collapse; font-size:13.5px; } .nb-ppl th, .nb-ent th{ text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); padding:8px 10px; border-bottom:1px solid var(--border); font-weight:700; } .nb-ppl td, .nb-ent td{ padding:8px 10px; border-bottom:1px solid #F3EFF1; vertical-align:middle; } .nb-ppl .r, .nb-ent .r{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .nb-ppl tr.pr{ cursor:pointer; } .nb-ppl tr.pr:hover td, .nb-ppl tr.open td{ background:#FCFAFB; } .nb-ppl tr.px td{ padding:0 10px 12px; background:#FCFAFB; } .nb-ppl .pp{ display:flex; align-items:center; gap:10px; } .nb-ppl .pp b{ display:block; } .nb-ppl .pp small{ color:var(--text-muted); font-size:12px; } .nb-ppl .av{ width:30px; height:30px; border-radius:50%; background:#FCE8EE; color:#9C3957; display:grid; place-items:center; font-size:10.5px; font-weight:800; flex:none; } .nb-ppl .ar, .nb-mo .ar{ display:inline-block; width:14px; color:var(--text-muted); } .nb-ppl .owe{ font-weight:800; color:#9C3957; } .nb-ppl .zero{ color:var(--text-muted); font-weight:600; } .nb-ppl .inner{ border:1px solid var(--border); border-radius:12px; background:var(--card); overflow:hidden; } .nb-ppl .inner .nb-ent td, .nb-ppl .inner .nb-ent th{ padding:7px 10px; font-size:13px; } .nb-sb{ display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; } .nb-sb button{ border:0; background:var(--card); font:inherit; font-size:12px; font-weight:600; padding:6px 10px; color:var(--text); cursor:pointer; } .nb-sb button + button{ border-left:1px solid var(--border); } .nb-sb button.p{ background:#1B1720; color:#fff; } .nb-sb button:hover:not(.p){ background:#FCF6F8; } .nb-mo{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--border); border-radius:12px; margin-top:8px; font-size:13px; cursor:pointer; } .nb-mo:hover{ background:#FCFAFB; } .nb-mo b{ font-size:13.5px; } .nb-mo i{ font-style:normal; color:var(--text-muted); } .nb-mo .g{ color:#9C3957; font-weight:700; } .nb-mo .s{ color:#1F7A72; font-weight:700; } .nb-mo.open{ border-radius:12px 12px 0 0; background:#FCFAFB; } .nb-mob{ border:1px solid var(--border); border-top:0; border-radius:0 0 12px 12px; overflow:hidden; } .nb-ent .dt{ width:84px; white-space:nowrap; color:var(--text-muted); font-weight:600; } .nb-ent .nm span{ color:var(--text-muted); font-size:12px; } .nb-ent .am{ font-weight:800; } .nb-ent .am.g{ color:#9C3957; } .nb-ent .am.s{ color:#1F7A72; } .nb-ent .am small{ display:block; font-size:11px; color:var(--text-muted); font-weight:600; } .nb-ent .ac{ width:110px; } .nb-ent .lbl{ display:inline-block; font-size:10.5px; font-weight:700; border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:1px; } .nb-ent .lbl.g{ background:#FCE8EE; color:#9C3957; } .nb-ent .lbl.s{ background:#E3F3F1; color:#1F7A72; } .nb-via{ font-size:11.5px; color:var(--text-muted); } .nb-more{ text-align:center; margin-top:10px; } .nb-more button{ border:1px solid var(--border); background:var(--card); border-radius:10px; padding:7px 14px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; color:var(--text); } .nb-mob .nb-ent{ table-layout:fixed; } .nb-mob .nb-ent .dt{ width:84px; } .nb-mob .nb-ent .nm{ width:24%; } .nb-mob .nb-ent .am{ width:130px; } .nb-mob .nb-ent .ac{ width:120px; } .nb-mob .nb-ent td{ overflow:hidden; text-overflow:ellipsis; } html[data-opt="2"] .nb-ppl .inner .nb-ent th{ font-size:10.5px; letter-spacing:.06em; padding:7px 10px; background:#FAF8F9; } /* ============ HR dashboard option D + Employees page 2 × 2 (owner approved, 10 Oct 2026): clean, modern, calm ============ */ .nb-hd-kpis{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:16px; } @media (max-width:1000px){ .nb-hd-kpis{ grid-template-columns:1fr 1fr; } } .nb-hd-k{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px 18px; min-width:0; } .nb-hd-k .l{ font-size:12px; color:var(--text-muted); font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:8px; } .nb-hd-k .v{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin-top:8px; color:var(--text); } .nb-hd-k .v small, .nb-hd-big small{ font-size:12px; color:var(--text-muted); font-weight:600; margin-right:4px; letter-spacing:0; } .nb-hd-k .f{ font-size:12px; color:var(--text-muted); margin-top:4px; } .nb-hd-k .dot, .nb-hd-g .dot{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none; } .nb-hd-k .dot svg, .nb-hd-g .dot svg{ width:16px; height:16px; } .nb-hd-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:99px; white-space:nowrap; } .nb-hd-chip.up{ background:#E6F3EE; color:#23764F; } .nb-hd-chip.dn{ background:#FCEBEF; color:#9C3957; } .nb-hd-chip.gr{ background:#F3F1F4; color:var(--text-muted); } .nb-hd-chip.wa{ background:#FFF4E2; color:#9A6200; } .nb-hd-grid2{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; } .nb-hd-grid22{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } @media (max-width:1000px){ .nb-hd-grid2, .nb-hd-grid22{ grid-template-columns:1fr; } } .nb-hd-card{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:20px; min-width:0; } .nb-hd-ch{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:14px; } .nb-hd-ch h3{ margin:0; font-size:15.5px; color:var(--text); } .nb-hd-ch p{ margin:3px 0 0; font-size:12.5px; color:var(--text-muted); } .nb-hd-tabs{ display:flex; background:#F4F2F5; border-radius:11px; padding:3px; flex:none; } .nb-hd-tabs button{ border:0; background:none; font:inherit; font-size:12px; font-weight:700; padding:6px 11px; border-radius:8px; color:var(--text-muted); cursor:pointer; } .nb-hd-tabs button.on{ background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08); } .nb-hd-big{ font-size:36px; font-weight:800; letter-spacing:-.03em; color:var(--text); } .nb-hd-big small{ font-size:15px; margin-right:6px; } .nb-hd-big.off{ font-size:26px; color:#A29CA8; } .nb-hd-sub{ font-size:12.5px; color:var(--text-muted); margin-top:2px; } .nb-hd-rw{ display:grid; grid-template-columns:110px minmax(0,1fr) 100px; gap:12px; align-items:center; padding:9px 0; font-size:13px; } .nb-hd-rw + .nb-hd-rw{ border-top:1px solid #F4F2F5; } .nb-hd-rw span{ color:var(--text-muted); font-weight:600; } .nb-hd-rw b{ text-align:right; font-variant-numeric:tabular-nums; color:var(--text); } .nb-hd-track{ height:8px; border-radius:99px; background:#F3F1F4; overflow:hidden; } .nb-hd-track i{ display:block; height:100%; border-radius:99px; } .nb-hd-mo{ display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; } .nb-hd-mo + .nb-hd-mo{ border-top:1px solid #F4F2F5; } .nb-hd-mo:hover .x b{ color:#9C3957; } .nb-hd-mo .m{ width:46px; height:46px; border-radius:12px; background:#F7F4F6; display:grid; place-items:center; text-align:center; line-height:1; flex:none; } .nb-hd-mo .m b{ font-size:13.5px; color:var(--text); } .nb-hd-mo .m small{ display:block; font-size:9.5px; color:var(--text-muted); font-weight:700; margin-top:3px; } .nb-hd-mo .x{ flex:1; min-width:0; } .nb-hd-mo .x b{ font-size:14px; color:var(--text); } .nb-hd-mo .x div{ font-size:12px; color:var(--text-muted); margin-top:2px; } .nb-hd-mo .a{ text-align:right; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); } .nb-hd-seg{ height:6px; border-radius:99px; display:flex; overflow:hidden; background:#F3F1F4; margin-top:6px; max-width:220px; } .nb-hd-seg i{ display:block; height:100%; } .nb-hd-go{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:16px; } @media (max-width:1000px){ .nb-hd-go{ grid-template-columns:1fr 1fr; } } .nb-hd-g{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px; display:flex; gap:12px; align-items:center; cursor:pointer; min-width:0; transition:border-color .15s, box-shadow .15s; } .nb-hd-g:hover{ border-color:#E4C7D3; box-shadow:0 6px 18px -10px rgba(156,57,87,.35); } .nb-hd-g b{ display:block; font-size:14px; color:var(--text); } .nb-hd-g span{ font-size:12px; color:var(--text-muted); } .nb-hd-g .ar{ margin-left:auto; font-size:18px; color:#A29CA8; } .nb-hd-bars .r{ display:grid; grid-template-columns:120px minmax(0,1fr) 34px; gap:10px; align-items:center; font-size:13px; padding:7px 0; } .nb-hd-bars .r span{ color:var(--text-muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nb-hd-bars .r b{ text-align:right; color:var(--text); } .nb-hd-donut{ display:flex; gap:20px; align-items:center; } .nb-hd-donut .lg{ font-size:12.5px; display:grid; gap:8px; flex:1; min-width:0; } .nb-hd-donut .lg div{ display:flex; align-items:center; gap:8px; color:var(--text); } .nb-hd-donut .lg i{ width:9px; height:9px; border-radius:3px; flex:none; } .nb-hd-donut .lg b{ margin-left:auto; } .nb-hd-dr{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:13px; } .nb-hd-dr + .nb-hd-dr{ border-top:1px solid #F4F2F5; } .nb-hd-dr .av{ width:32px; height:32px; border-radius:50%; background:#FCE8EE; color:#9C3957; display:grid; place-items:center; font-size:11px; font-weight:800; flex:none; } .nb-hd-dr .x{ flex:1; min-width:0; } .nb-hd-dr .x b{ display:block; color:var(--text); } .nb-hd-dr .x small{ color:var(--text-muted); font-size:12px; } .nb-hd-dr .dt{ font-size:12px; color:var(--text-muted); white-space:nowrap; } .nb-hd-more{ font-size:12px; color:var(--text-muted); padding-top:8px; } .nb-hd-clear{ display:flex; align-items:center; gap:8px; font-size:13px; color:#2F6A45; padding:10px 0; } .nb-hd-clear svg{ width:16px; height:16px; } /* ============ HR "Go to" tiles (taller) + Employees page v4 + employee cards (owner approved, 10 Oct 2026) — calm: grey, wine only where action is needed ============ */ .nb-gt{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:12px; min-height:170px; cursor:pointer; min-width:0; transition:border-color .15s, box-shadow .15s; } .nb-gt:hover{ border-color:#E4C7D3; box-shadow:0 6px 18px -10px rgba(156,57,87,.35); } .nb-gt .top{ display:flex; align-items:center; gap:12px; } .nb-gt .top b{ display:block; font-size:15px; color:var(--text); } .nb-gt .top span{ font-size:12px; color:var(--text-muted); } .nb-gt .ar{ margin-left:auto; font-size:18px; color:#A29CA8; } .nb-gt .dot{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; } .nb-gt .dot svg{ width:17px; height:17px; } .nb-gt .v{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--text); } .nb-gt .v small{ font-size:12px; color:var(--text-muted); font-weight:600; margin-right:4px; letter-spacing:0; } .nb-gt-mini{ height:6px; border-radius:99px; background:#F3F1F4; overflow:hidden; display:flex; } .nb-gt-mini i{ display:block; height:100%; } .nb-gt .ft{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); padding-top:12px; border-top:1px solid #F4F2F5; } .nb-gt .ft b{ color:var(--text); } .nb-ed-lbl{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#A29CA8; } .nb-ed-hero{ display:flex; align-items:baseline; gap:10px; } .nb-ed-hero b{ font-size:34px; letter-spacing:-.03em; color:var(--text); } .nb-ed-hero span{ color:var(--text-muted); font-size:13px; } .nb-ed-dl{ margin-top:14px; border:1px solid #F1EEF2; border-radius:14px; overflow:hidden; } .nb-ed-dr{ display:grid; grid-template-columns:1fr auto 28px 18px; gap:12px; align-items:center; padding:11px 14px; font-size:13.5px; cursor:pointer; color:var(--text); } .nb-ed-dr + .nb-ed-dr, .nb-ed-dx + .nb-ed-dr{ border-top:1px solid #F1EEF2; } .nb-ed-dr:hover{ background:#FBFAFB; } .nb-ed-dr .n{ font-weight:800; text-align:right; } .nb-ed-dr .n.z{ color:#A29CA8; } .nb-ed-dr .ar{ color:#A29CA8; } .nb-ed-dr .pips{ display:flex; gap:3px; } .nb-ed-dr .pips i{ width:7px; height:7px; border-radius:50%; background:#E4E0E6; } .nb-ed-dr .pips i.u{ background:#9C3957; } .nb-ed-dx{ background:#FBFAFB; padding:4px 14px 10px; border-top:1px solid #F1EEF2; } .nb-ed-dx div{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:6px 0; color:var(--text-muted); } .nb-ed-dx b{ color:var(--text); font-weight:600; white-space:nowrap; } .nb-ed-dx b.u{ color:#9C3957; } .nb-ed-act{ margin-top:14px; } .nb-ed-t{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#F6EEF2; font-size:13px; margin-top:8px; color:var(--text); } .nb-ed-t .d{ width:36px; text-align:center; font-weight:800; color:#9C3957; line-height:1; flex:none; } .nb-ed-t .d small{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.05em; margin-top:2px; } .nb-ed-t .x{ flex:1; min-width:0; } .nb-ed-t .x span{ color:var(--text-muted); font-size:12px; display:block; } .nb-ed-t button{ border:1px solid #EBC9D6; background:#fff; color:#9C3957; font:inherit; font-size:12px; font-weight:700; border-radius:9px; padding:6px 10px; cursor:pointer; white-space:nowrap; } .nb-pm{ display:flex; flex-direction:column; } .nb-pm-mv{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } .nb-pm-mv div{ border:1px solid #F1EEF2; border-radius:14px; padding:12px; } .nb-pm-mv b{ font-size:22px; letter-spacing:-.02em; display:block; color:var(--text); } .nb-pm-mv span{ font-size:12px; color:var(--text-muted); } .nb-pm-tl{ margin-top:8px; position:relative; padding-left:18px; } .nb-pm-tl:before{ content:''; position:absolute; left:5px; top:12px; bottom:12px; width:2px; background:#F1EEF2; } .nb-pm-tl .ti{ position:relative; display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; color:var(--text); } .nb-pm-tl .ti:before{ content:''; position:absolute; left:-17px; top:50%; margin-top:-5px; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid #D9D2DC; box-sizing:border-box; } .nb-pm-tl .ti.new:before{ border-color:#9C3957; background:#9C3957; } .nb-pm-tl .av{ width:30px; height:30px; border-radius:50%; background:#F3F1F4; color:var(--text); display:grid; place-items:center; font-size:11px; font-weight:800; flex:none; } .nb-pm-tl .x{ flex:1; min-width:0; } .nb-pm-tl .x span{ display:block; color:var(--text-muted); font-size:12px; } .nb-pm-tl .w{ font-size:12px; color:var(--text-muted); white-space:nowrap; } .nb-wf{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:24px; align-items:start; } @media (max-width:1000px){ .nb-wf{ grid-template-columns:1fr; } } .nb-wf-wall{ display:grid; grid-template-columns:repeat(16, 1fr); gap:4px; } .nb-wf-wall i{ aspect-ratio:1; border-radius:4px; } .nb-wf-leg{ display:flex; gap:6px 14px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); margin-top:12px; } .nb-wf-leg i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:-1px; } .nb-wf-tb{ width:100%; border-collapse:collapse; font-size:13px; } .nb-wf-tb th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#A29CA8; padding:0 8px 8px; } .nb-wf-tb td{ padding:10px 8px; border-top:1px solid #F1EEF2; color:var(--text); } .nb-wf-tb .r{ text-align:right; font-variant-numeric:tabular-nums; } .nb-wf-tb tr{ cursor:pointer; } .nb-wf-tb tbody tr:hover td{ background:#FBFAFB; } .nb-wf-tb tr.on td{ background:#F6EEF2; } .nb-wf-tb td .bar{ display:inline-block; vertical-align:middle; height:6px; border-radius:99px; background:#F1EEF2; overflow:hidden; width:110px; } .nb-wf-tb td .bar i{ display:block; height:100%; background:#BFB6C3; border-radius:99px; } .nb-wf-tb tr.top .bar i{ background:#9C3957; } .nb-wf-tb td small{ margin-left:8px; color:var(--text-muted); font-size:11.5px; } .nb-el-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; } .nb-el-search{ height:40px; border:1px solid var(--border); background:#F7F6F8; border-radius:12px; padding:0 14px; font:inherit; font-size:13px; flex:1; min-width:220px; color:var(--text); } .nb-el-search:focus{ outline:none; background:#fff; border-color:var(--accent); } .nb-el-sel{ height:40px; border:1px solid var(--border); background:#fff; border-radius:12px; padding:0 12px; font:inherit; font-size:13px; color:var(--text); } .nb-el-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .nb-el-chips button{ border:1px solid var(--border); border-radius:99px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600; background:#fff; color:var(--text); cursor:pointer; } .nb-el-chips button.on{ background:#9C3957; color:#fff; border-color:#9C3957; } .nb-el-chips em{ font-style:normal; opacity:.55; margin-left:4px; } .nb-el-cards{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:12px; } @media (max-width:1100px){ .nb-el-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } } .nb-ec{ border:1px solid var(--border); border-radius:16px; padding:14px; position:relative; cursor:pointer; min-width:0; background:#fff; transition:border-color .15s, box-shadow .15s; } .nb-ec:hover{ border-color:#E4C7D3; } .nb-ec.on{ border-color:#9C3957; box-shadow:0 0 0 3px rgba(156,57,87,.10); } .nb-ec .av{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff; font-size:13px; } .nb-ec .flag{ position:absolute; top:12px; right:12px; } .nb-ec .nm{ margin-top:10px; min-width:0; } .nb-ec .nm b{ font-size:14px; color:var(--text); } .nb-ec .nm small{ display:block; font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nb-ec .meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .nb-ec .meta span{ font-size:11px; font-weight:600; background:#F4F2F5; border-radius:6px; padding:2px 7px; color:var(--text-muted); } .nb-ec .bs{ display:flex; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid #F4F2F5; font-size:12px; color:var(--text-muted); } .nb-ec .bs b{ color:var(--text); } .nb-ec-co{ display:inline-block; margin-left:5px; padding:0 7px; border-radius:20px; background:#E3F3F1; color:#1F7A72; font-size:10.5px; font-weight:700; vertical-align:1px; } .nb-el-drawer{ border:1px solid var(--border); border-radius:16px; background:#FCFAFB; padding:16px; margin:0 0 12px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; } .nb-el-drawer .av{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-weight:800; color:#fff; font-size:17px; } .nb-el-drawer .nm{ font-size:15px; color:var(--text); } .nb-el-drawer .info{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px 18px; font-size:12.5px; margin-top:8px; color:var(--text); } .nb-el-drawer .info span{ display:block; color:var(--text-muted); font-size:11px; } .nb-el-drawer .btns{ display:flex; gap:8px; align-items:center; } @media (max-width:900px){ .nb-el-drawer{ grid-template-columns:1fr; } .nb-el-drawer .info{ grid-template-columns:1fr 1fr; } } .nb-el-pg{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; font-size:12.5px; color:var(--text-muted); } .nb-el-pg .p{ display:flex; gap:4px; } .nb-el-pg .p button{ min-width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:#fff; color:var(--text); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .nb-el-pg .p button.on{ background:#9C3957; color:#fff; border-color:#9C3957; } /* Salary slips list — option C (owner, 11 Oct 2026): month cards → the month's slips below */ .nb-sc-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; } .nb-sc-hint{ font-size:12.5px; color:var(--text-muted); } .nb-sc-chip{ display:inline-flex; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:#E6F3EE; color:#23764F; white-space:nowrap; } .nb-sc-chip.g{ background:#F3F1F4; color:var(--text-muted); } .nb-sc-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; } @media (max-width:1000px){ .nb-sc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } } .nb-sc{ border:1px solid var(--border); border-radius:16px; padding:14px; cursor:pointer; background:#fff; min-width:0; transition:border-color .15s, box-shadow .15s; } .nb-sc:hover{ border-color:#E4C7D3; } .nb-sc.on{ border-color:#9C3957; box-shadow:0 0 0 3px rgba(156,57,87,.10); } .nb-sc .t{ display:flex; justify-content:space-between; align-items:center; gap:6px; } .nb-sc .t b{ font-size:14px; color:var(--text); } .nb-sc .v{ font-size:20px; font-weight:800; margin-top:8px; letter-spacing:-.02em; color:var(--text); } .nb-sc .v small{ font-size:11px; color:var(--text-muted); font-weight:600; margin-right:3px; letter-spacing:0; } .nb-sc .s{ font-size:12px; color:var(--text-muted); margin-top:2px; } .nb-sc .bar{ height:5px; border-radius:99px; background:#F1EEF2; margin-top:10px; display:flex; overflow:hidden; } .nb-sc .bar i{ display:block; height:100%; } .nb-sc-panel{ margin-top:16px; border-top:1px solid #F1EEF2; padding-top:16px; } .nb-sc-ph{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .nb-sc-ph h4{ margin:0; font-size:14.5px; color:var(--text); } .nb-sc-tools{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .nb-sc-tools .nb-el-search{ flex:0 1 230px; min-width:180px; height:38px; } .nb-sc-btn{ height:38px; border:1px solid var(--border); background:#fff; border-radius:11px; padding:0 12px; font:inherit; font-size:12.5px; font-weight:700; color:var(--text); cursor:pointer; } .nb-sc-btn:hover{ border-color:#E4C7D3; } .nb-sc-tools{ flex-wrap:nowrap; } .nb-sc-tools .nb-el-search{ flex:0 0 220px; width:220px; min-width:0; } .nb-sc-btn{ white-space:nowrap; } @media (max-width:760px){ .nb-sc-tools{ flex-wrap:wrap; } .nb-sc-tools .nb-el-search{ flex:1 1 100%; width:auto; } } /* ============ Payroll records (owner approved option C v3, 11 Oct 2026): left month list | right panel — same feel as the person list on the Salary page ============ */ .nb-pr-head{ display:flex; align-items:center; gap:12px; margin:22px 0 12px 4px; } .nb-pr-head .ic{ width:36px; height:36px; border-radius:11px; background:#FCE8EE; color:#9C3957; display:grid; place-items:center; flex:none; } .nb-pr-head .ic svg{ width:17px; height:17px; } .nb-pr-head h3{ margin:0; font-size:16px; color:var(--text); } .nb-pr-head p{ margin:1px 0 0; font-size:12.5px; color:var(--text-muted); } .nb-pr{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; align-items:stretch; } @media (max-width:900px){ .nb-pr{ grid-template-columns:1fr; } } .nb-pr-left{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:12px; display:flex; flex-direction:column; min-height:0; } .nb-pr-yr{ display:flex; align-items:center; justify-content:space-between; background:#F7F5F7; border-radius:12px; padding:6px; } .nb-pr-yr b{ font-size:14px; color:var(--text); } .nb-pr-yr button{ width:30px; height:30px; border-radius:9px; border:0; background:#fff; color:var(--text-muted); font:inherit; font-size:14px; box-shadow:0 1px 2px rgba(0,0,0,.06); cursor:pointer; } .nb-pr-yr button:disabled{ opacity:.35; cursor:default; } .nb-pr-ml{ margin-top:10px; border:1px solid var(--border); border-radius:12px; overflow:auto; flex:1 1 0; min-height:220px; scrollbar-width:thin; scrollbar-color:#D9D2DC transparent; } .nb-pr-ml::-webkit-scrollbar{ width:6px; } .nb-pr-ml::-webkit-scrollbar-thumb{ background:#D9D2DC; border-radius:99px; } .nb-pr-mi{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-bottom:1px solid #F1EEF2; cursor:pointer; } .nb-pr-mi:last-child{ border-bottom:0; } .nb-pr-mi:hover{ background:#FCF9FA; } .nb-pr-mi .d{ width:34px; height:34px; border-radius:10px; background:#F4F1F5; display:grid; place-items:center; font-size:10.5px; font-weight:800; color:var(--text-muted); flex:none; } .nb-pr-mi .n{ flex:1; min-width:0; } .nb-pr-mi .n b{ display:block; font-size:13px; color:var(--text); } .nb-pr-mi .n small{ font-size:11.5px; color:var(--text-muted); } .nb-pr-mi .a{ font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); } .nb-pr-mi.on{ background:#FBF2F5; } .nb-pr-mi.on .d{ background:#9C3957; color:#fff; } .nb-pr-mi.yr0 .d{ background:#EEEAF0; color:var(--text); } .nb-pr-mi.yr0.on .d{ background:#9C3957; color:#fff; } .nb-pr-mi.off{ cursor:default; } .nb-pr-mi.off:hover{ background:none; } .nb-pr-mi.off .n b{ color:#A29CA8; } .nb-pr-pill{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:99px; background:#F3F1F4; color:var(--text-muted); white-space:nowrap; } .nb-pr-right{ background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; min-width:0; } .nb-pr-rhd{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 20px; border-bottom:1px solid #F1EEF2; background:#FDFBFC; } .nb-pr-rhd .t{ display:flex; align-items:center; gap:12px; } .nb-pr-rhd .d{ width:44px; height:44px; border-radius:13px; background:#9C3957; color:#fff; display:grid; place-items:center; text-align:center; line-height:1; flex:none; } .nb-pr-rhd .d b{ font-size:13px; } .nb-pr-rhd .d small{ display:block; font-size:9px; opacity:.85; margin-top:2px; } .nb-pr-rhd h4{ margin:0; font-size:15.5px; color:var(--text); } .nb-pr-rhd p{ margin:2px 0 0; font-size:12px; color:var(--text-muted); } .nb-pr-btns{ display:flex; gap:8px; } .nb-pr-btn{ display:inline-flex; align-items:center; gap:7px; height:38px; border:1px solid var(--border); background:#fff; border-radius:11px; padding:0 14px; font:inherit; font-size:12.5px; font-weight:700; color:var(--text); cursor:pointer; white-space:nowrap; } .nb-pr-btn svg{ width:15px; height:15px; color:#9C3957; } .nb-pr-btn:hover{ border-color:#E4C7D3; background:#FCF7F9; } .nb-pr-rb{ padding:18px 20px 16px; } .nb-pr-tiles{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:10px; } @media (max-width:1100px){ .nb-pr-tiles{ grid-template-columns:1fr 1fr; } } .nb-pr-tiles > div{ border:1px solid #F1EEF2; border-radius:14px; padding:12px 14px; min-width:0; } .nb-pr-tiles span{ display:block; font-size:11.5px; color:var(--text-muted); font-weight:600; } .nb-pr-tiles b{ display:block; font-size:17px; margin-top:4px; font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap; } .nb-pr-tiles .main{ background:#FBF2F5; border-color:#F0DCE4; } .nb-pr-tiles .main b{ font-size:22px; letter-spacing:-.02em; } .nb-pr-tiles .main b small{ font-size:11px; color:var(--text-muted); font-weight:600; margin-right:3px; letter-spacing:0; } .nb-pr-tiles .neg b{ color:#9C3957; } .nb-pr-comp{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); margin-top:10px; padding:0 2px; } .nb-pr-comp b{ color:var(--text); font-weight:700; } .nb-pr-lh{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin:20px 0 8px; flex-wrap:wrap; } .nb-pr-lh > b{ font-size:13.5px; color:var(--text); } .nb-pr-fb{ display:flex; gap:8px; flex-wrap:wrap; } .nb-pr-fb .nb-el-sel{ height:36px; } .nb-pr-fb .nb-el-search{ flex:0 0 200px; width:200px; min-width:0; height:36px; } .nb-pr-tb th{ background:#FAF9FA; } /* 13 Oct 2026 (owner): compact delivery note — two or three items fit on one page */ .nbd-dn .dn-top{ gap:4mm; margin-bottom:3.5mm; } .nbd-dn .dn-card{ padding:2.4mm 3.6mm; font-size:8.6pt; } .nbd-dn .dn-card .nm{ font-size:11pt; margin-bottom:.3mm; } .nbd-dn .dn-kv > div:not(.h){ padding:.8mm 0; } .nbd-dn .dn-way{ font-size:10pt; margin:0 0 .6mm; } .nbd-dn .dn-prog{ margin-bottom:3.5mm; } .nbd-dn .dn-prog div{ padding:1.6mm 3.5mm; display:flex; justify-content:space-between; align-items:baseline; gap:2mm; } .nbd-dn .dn-prog b{ font-size:10.5pt; } .nbd-dn .dn-prog span{ font-size:6.6pt; } .nbd-dn .nbd-items td{ padding:2.2mm 2.6mm; } .nbd-dn .nbd-items thead th{ padding-bottom:1.8mm; } .nbd-dn .dn-line{ display:flex; align-items:flex-start; gap:4mm; } .nbd-dn .dn-line .nmc{ flex:0 0 46mm; min-width:0; } .nbd-dn .dn-szg{ flex:1 1 auto; margin-top:0; display:flex; flex-wrap:wrap; max-width:100%; } .nbd-dn .dn-szg > div{ min-width:8.6mm; flex:0 0 auto; } .nbd-dn .dn-szg em{ font-size:6.6pt; padding:.5mm 1.2mm; } .nbd-dn .dn-szg b{ font-size:8.4pt; padding:.7mm 1.2mm; } .nbd-dn .dn-szg .lb em, .nbd-dn .dn-szg .lb b{ font-size:6.6pt; } .nbd-dn .nbd-items tr.dn-tot td{ padding-top:2mm; } .nbd-dn .dn-note{ margin-top:3.5mm; padding:2mm 3.6mm; font-size:8pt; } .nbd-dn .dn-note .h{ margin-bottom:.6mm; } .nbd-dn .dn-note ul{ display:flex; flex-wrap:wrap; gap:0 6mm; } .nbd-dn .dn-note li{ margin:0; } .nbd-dn .dn-last{ margin-top:3.5mm; gap:4mm; } .nbd-dn .dn-rcv{ padding:2mm 3.6mm 2.4mm; } .nbd-dn .dn-rcv .h{ margin-bottom:.4mm; } .nbd-dn .dn-rcv .row.nm{ height:6.5mm; } .nbd-dn .dn-rcv .row.sg{ height:9mm; } .nbd-dn .dn-rcv .row.dt{ height:6.5mm; } .nbd-dn .dn-szg{ display:inline-grid; flex-wrap:nowrap; flex:0 1 auto; } .nbd-dn .dn-szg > div{ min-width:0; } .nbd-dn .dn-szg em, .nbd-dn .dn-szg b{ padding-left:.6mm; padding-right:.6mm; overflow:hidden; text-overflow:clip; } /* all sizes on one line; boxes shrink to fit (13 Oct 2026) */ /* 13 Oct 2026 (owner): delivery note — less space at the top, smaller strip numbers, client name and address on one line each, less gap at the signatures */ .nbd.nbd-dn .nbd-band{ padding:3mm 10mm 2.4mm; } .nbd.nbd-dn .nbd-headspace{ height:3mm; } .nbd.nbd-dn .nbd-footspace{ height:12mm; } .nbd.nbd-dn .nbd-strip div{ padding:1.6mm 0; } .nbd.nbd-dn .nbd-strip span{ font-size:6.2pt; } .nbd.nbd-dn .nbd-strip b{ font-size:8pt; white-space:nowrap; } .nbd.nbd-dn .dn-card .nm{ font-size:9.6pt; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nbd.nbd-dn .dn-card .ln{ font-size:7.6pt; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nbd.nbd-dn .dn-kv{ font-size:7.8pt; } .nbd.nbd-dn .dn-way{ font-size:9.4pt; } .nbd.nbd-dn .nbd-end{ margin-top:3mm; } .nbd.nbd-dn .nbd-end .nbd-sign, .nbd.nbd-dn .nbd-end .nbd-sign.nbd-sign2{ padding-top:7mm; margin-top:0; } .nbd.nbd-dn .dn-card .h b.dn-way{ display:inline; font-size:8.6pt; letter-spacing:0; text-transform:none; color:#2B1220; margin:0; } .nbd.nbd-dn .dn-card .h{ margin-bottom:1mm; } .nbd.nbd-dn .dn-kv > div:not(.h){ padding:.5mm 0; } .nbd.nbd-dn .dn-top{ margin-bottom:3mm; } .nbd.nbd-dn .dn-card{ padding:2mm 3.4mm; } /* shorter top boxes (13 Oct 2026) */ /* Invoice per LPO (owner approved 13 Oct 2026 — "Invoice per LPO - preview") */ html[data-opt="2"] .p4-how{ margin-top:14px; border:1px dashed #EEDDE5; border-radius:14px; padding:14px 16px; background:#FFFBFC; } html[data-opt="2"] .p4-how > b{ display:block; margin-bottom:10px; font-size:14px; } html[data-opt="2"] .p4-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } html[data-opt="2"] .p4-opts button{ display:flex; gap:10px; align-items:flex-start; text-align:left; border:1.5px solid var(--border); background:#fff; border-radius:12px; padding:12px 14px; cursor:pointer; font:inherit; color:var(--text); } html[data-opt="2"] .p4-opts button i{ flex:0 0 auto; width:18px; height:18px; border-radius:50%; border:2px solid #CDBFC6; margin-top:1px; box-sizing:border-box; } html[data-opt="2"] .p4-opts button.on{ border-color:#9C3957; background:#FFF7FA; } html[data-opt="2"] .p4-opts button.on i{ border:6px solid #9C3957; } html[data-opt="2"] .p4-opts button b{ display:block; font-size:13.5px; } html[data-opt="2"] .p4-opts button small{ display:block; color:var(--text-muted); font-size:12px; line-height:1.45; margin-top:2px; } html[data-opt="2"] .p4-part-t{ display:inline-block; margin-top:4px; font-size:11px; } html[data-opt="2"] .p4-splith{ background:#FFF7FA; border:1px solid #F0D3DE; border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:13px; line-height:1.55; } html[data-opt="2"] .p4-part{ border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin-bottom:14px; } html[data-opt="2"] .p4-ph{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; } html[data-opt="2"] .p4-ph b{ font-size:15px; } html[data-opt="2"] .p4-ph span{ display:block; color:var(--text-muted); font-size:12.5px; margin-top:2px; } html[data-opt="2"] .p4-ph .p4-pt{ color:#9C3957; white-space:nowrap; } @media (max-width:700px){ html[data-opt="2"] .p4-opts{ grid-template-columns:1fr; } } /* owner, 14 Oct 2026: no coloured line on top of the order / sample cards, and no coloured edge on hover (no coloured bars on cards) */ html[data-opt="2"] :is(#sampleGrid, #ordersGrid) .order-card::before{ display:none !important; } html[data-opt="2"] .order-card:hover{ box-shadow:0 10px 24px -18px rgba(43,31,38,.45) !important; } /* 16 Oct 2026 · order management check: client/supplier action buttons wrap onto two lines instead of running off the card */ .nbcp-act{ flex-wrap:wrap; row-gap:6px; max-width:360px; margin-left:auto; } .nbcp-t td:first-child{ min-width:170px; } .nbcp-t td .id{ white-space:nowrap; } html[data-opt="2"] .pk-k + .nb-empty{ border-top:1px dashed #DADCE2; border-radius:12px; margin-top:12px; } /* empty box under KPI tiles (Measurements) gets its full frame */ /* ========================================================================================== 17 Oct 2026 · owner approved "Section pages - new hero and entries": the LIGHT slim hero on every working page — the same colours as the dashboards (soft pink → teal on white), dark text, the main button in wine, a white second button. ========================================================================================== */ html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header){ background:radial-gradient(520px 220px at 0% -30%, #F3C6D6, rgba(243,198,214,0) 72%), radial-gradient(600px 260px at 100% 140%, #CFE6E2, rgba(207,230,226,0) 70%), #fff !important; border:1px solid #EAD3DD !important; border-radius:20px; padding:16px 20px !important; margin-bottom:14px; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) h1{ color:#2B1F26 !important; font-size:20px !important; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) :is(.date, .sub, p){ color:var(--text-muted) !important; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) .login-btn{ background:#9C3957 !important; color:#fff !important; border-color:#9C3957 !important; height:40px; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) .login-btn[style*="background:var(--card)"]{ background:#fff !important; color:var(--text) !important; border:1px solid var(--border) !important; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) :is(.nb-todo-bar button.nav, .nb-todo-bar .day){ background:#fff; color:var(--text); border-color:var(--border); } html[data-opt="2"] .view:not(#view-home) .section-banner .nb-hicon{ background:#fff; border:1px solid #F0E3E9; box-shadow:0 6px 14px -10px rgba(43,31,38,.35); } html[data-opt="2"] .nb-hacts{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; } html[data-opt="2"] .nb-hacts .login-btn{ width:auto; margin:0; padding:0 16px !important; } /* the dashboards draw their own big hero; the Order / Production / Home ones are not touched */ @media (max-width:760px){ html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header){ padding:12px 14px !important; } html[data-opt="2"] .view:not(#view-home) :is(.section-banner, .panel-header) h1{ font-size:17px !important; } html[data-opt="2"] .nb-hacts{ margin-left:0; width:100%; } html[data-opt="2"] .nb-hacts .login-btn{ flex:1; } } /* 18 Oct 2026 · owner chose style 2: the section queue as a board by status (option2-screens-rev18.js boardCard) */ html[data-opt="2"] .nbq-sum{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; } html[data-opt="2"] .nbq-sum > div{ background:#FAF7F9; border-radius:12px; padding:9px 12px; } html[data-opt="2"] .nbq-sum span{ font-size:11.5px; font-weight:700; color:var(--text-muted); } html[data-opt="2"] .nbq-sum b{ display:block; font-size:19px; } html[data-opt="2"] .nbq-sum b.w{ color:#9C3957; } html[data-opt="2"] .nbq-sum b.t{ color:#1F7A72; } html[data-opt="2"] .nbq-h{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; } html[data-opt="2"] .nbq-h h3{ margin:0; font-size:15px; } html[data-opt="2"] .nbq-h .sub{ font-size:12px; color:var(--text-muted); } html[data-opt="2"] .nbq-tabs{ display:flex; gap:6px; flex-wrap:wrap; } html[data-opt="2"] .nbq-tabs button{ font:inherit; font-size:12px; font-weight:700; border:1px solid var(--border); border-radius:99px; padding:6px 12px; color:#5B4A53; background:#fff; cursor:pointer; } html[data-opt="2"] .nbq-tabs button em{ font-style:normal; opacity:.7; margin-left:4px; } html[data-opt="2"] .nbq-tabs button.on{ background:#9C3957; border-color:#9C3957; color:#fff; } html[data-opt="2"] .nbq-find{ margin-left:auto; height:36px; border:1px solid var(--border); border-radius:10px; padding:0 12px; width:230px; font:inherit; font-size:13px; } html[data-opt="2"] .nbq-board{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:start; } html[data-opt="2"] .nbq-col{ background:#FAF7F9; border-radius:16px; padding:10px; min-width:0; } html[data-opt="2"] .nbq-col h4{ margin:2px 4px 10px; font-size:13px; display:flex; align-items:center; gap:8px; } html[data-opt="2"] .nbq-col h4 em{ font-style:normal; background:#fff; border-radius:99px; padding:1px 8px; font-size:11px; color:var(--text-muted); } html[data-opt="2"] .nbq-chip{ font-size:11px; font-weight:700; border-radius:99px; padding:3px 9px; } html[data-opt="2"] .nbq-chip.ns{ background:#EFEBEE; color:var(--text-muted); } html[data-opt="2"] .nbq-chip.wk{ background:#E7F1F4; color:#2F6F86; } html[data-opt="2"] .nbq-chip.sh{ background:#FCE8EE; color:#9C3957; } html[data-opt="2"] .nbq-chip.ok{ background:#E6F2F0; color:#1F7A72; } html[data-opt="2"] .nbq-card{ background:#fff; border:1px solid #F1E8ED; border-radius:14px; padding:10px 12px; margin-bottom:8px; transition:border-color .15s; } html[data-opt="2"] .nbq-card:hover{ border-color:#D9B5C4; } html[data-opt="2"] .nbq-top{ display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:8px; align-items:center; cursor:pointer; } html[data-opt="2"] .nbq-w{ min-width:0; } html[data-opt="2"] .nbq-w > b{ font-size:13.5px; } html[data-opt="2"] .nbq-w > span{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-opt="2"] .nbq-w b.lf, html[data-opt="2"] .nbq-w b.late{ color:#9C3957; font-size:11.5px; } html[data-opt="2"] .nbq-prev{ display:inline-block !important; margin-top:5px; font-size:10.5px !important; font-weight:700; border-radius:99px; padding:2px 8px; background:#F3F0F2; color:var(--text-muted) !important; } html[data-opt="2"] .nbq-prev.ok{ background:#E6F2F0; color:#1F7A72 !important; } html[data-opt="2"] .nbq-act{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px; } html[data-opt="2"] .nbq-act .login-btn{ width:auto; margin:0; height:34px; padding:0 12px !important; font-size:12px; } html[data-opt="2"] .nbq-act .login-btn.p2-btn:not(.sec):not(.off){ background:#9C3957 !important; border-color:#9C3957 !important; color:#fff !important; } html[data-opt="2"] .nbq-none{ color:#B6ADB3; font-size:12px; padding:8px 4px; } @media (max-width:1100px){ html[data-opt="2"] .nbq-board{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:760px){ html[data-opt="2"] .nbq-board, html[data-opt="2"] .nbq-sum{ grid-template-columns:1fr 1fr; } html[data-opt="2"] .nbq-find{ width:100%; margin-left:0; } } @media (max-width:520px){ html[data-opt="2"] .nbq-board{ grid-template-columns:1fr; } } html[data-opt="2"] .nbq-w > span.nbq-n{ white-space:normal; } /* done of / left wraps instead of being cut */ /* ===== Screen size (owner, 18 Oct 2026): at 85 % the page fills the width — no big empty space left and right (was max 1240 px) ===== */ html[data-opt="2"] .panel-inner, html[data-opt="2"] .global-footer{ max-width:min(1640px, 100%); } /* ===== Buttons in wine (owner, 18 Oct 2026): every main button wine, second buttons white, Delete red — no black buttons any more ===== */ html[data-opt="2"] .login-btn:not([style*="background:var(--card)"]):not(.nbx-plain):not(.danger):not(.nbb-w):not(.nbb-red):not(.sec):not(.nbu-newbtn), html[data-opt="2"] .nb-hero .login-btn, html[data-opt="2"] .nb-status .login-btn{ background:#9C3957 !important; border-color:#9C3957 !important; color:#fff !important; } html[data-opt="2"] .login-btn:not([style*="background:var(--card)"]):not(.nbx-plain):not(.danger):not(.nbb-w):not(.nbb-red):not(.sec):not(.nbu-newbtn):hover{ background:#86304B !important; border-color:#86304B !important; } html[data-opt="2"] .login-btn.p2-btn.off, html[data-opt="2"] .login-btn[disabled]{ opacity:.45; } html[data-opt="2"] .view:has(.detail-2col):has([onclick="goTo('order-sample')"]) button[style*="background:#B98A4A"], html[data-opt="2"] .nb-bgroup button.primary, .nbcp-act button.p, #nbPortal .btn.p{ background:#9C3957 !important; border-color:#9C3957 !important; color:#fff !important; } html[data-opt="2"] .nb-deptchips button.on, .nb-el-chips button.on, .nb-el-pg .p button.on, html[data-opt="2"] .fu-flt button.on{ background:#9C3957 !important; border-color:#9C3957 !important; color:#fff !important; } html[data-opt="2"] .mo-b:not(.n){ background:#9C3957 !important; border-color:#9C3957 !important; color:#fff !important; } /* ===== Top bar blink (owner, 18 Oct 2026): a page's own "Department › Page" line showed for a split second before the top bar tidied it — now it is hidden from the first moment; only Back, the record name (e.g. "Order management › PO-0006"), a "← Back to …" link and the search show ===== */ #app:has(.sidebar.nbr-on) .breadcrumb{ color:transparent !important; } #app:has(.sidebar.nbr-on) .breadcrumb > :not(.nb-back):not(.nbt-find):not(.nbt-bc):not(.nbt-orig){ display:none !important; } #app:has(.sidebar.nbr-on) .breadcrumb > .nbt-orig, #app:has(.sidebar.nbr-on) .breadcrumb > .nbt-bc{ color:var(--text-muted) !important; } /* ===== Client portal redesign (owner approved 18 Oct 2026 — "Client portal - FINAL preview"): menu like the software, top bar 64 px, bottom left and footer both 46 px and pinned — only the page scrolls; light header; filter under the menu; slim order rows; charts ===== */ #nbPortal .pt-wrap{ display:flex; flex-direction:column; overflow:hidden; } #nbPortal .pt-wrap > .pv{ flex:0 0 auto; position:static; } #nbPortal .app{ flex:1; min-height:0; grid-template-columns:240px minmax(0,1fr); background:#F6F4F6; } #nbPortal .side{ position:static; height:auto; min-height:0; border-right-color:#EEDDE5; } #nbPortal .brand{ height:64px; background:#fff; border-bottom-color:#EEDDE5; padding:0 16px; } #nbPortal .side .menu{ flex:1; min-height:0; overflow:auto; padding:12px 10px; } #nbPortal .side .cap{ font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#7A7380; margin:4px 8px 8px; } #nbPortal .side nav{ padding:0; gap:2px; } #nbPortal .side a{ padding:9px 10px; gap:10px; border-radius:10px; font-size:13px; color:#3A2E35; } #nbPortal .side a .i{ width:17px; height:17px; } #nbPortal .am{ margin-top:0; height:46px; background:#fff; border-top-color:#EEDDE5; padding:0 12px; gap:9px; } #nbPortal .am .av{ width:28px; height:28px; font-size:10.5px; background:#7E3152; } #nbPortal .am .x{ flex:1; line-height:1.2; } #nbPortal .am .x b{ font-size:12px; } #nbPortal .am .x span{ font-size:10.5px; color:#7A7380; } #nbPortal .am .ph{ width:30px; height:30px; border:1px solid #EEDDE5; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#9C3957; cursor:pointer; position:relative; flex:0 0 auto; } #nbPortal .am .ph .i{ width:15px; height:15px; } #nbPortal .am .ph .tip{ display:none; position:absolute; bottom:38px; right:-6px; background:#16141A; color:#fff; border-radius:10px; padding:8px 10px; white-space:nowrap; font-size:11.5px; font-weight:600; z-index:9; } #nbPortal .am .ph:hover .tip{ display:block; } #nbPortal .right{ min-height:0; min-width:0; } #nbPortal .top{ height:64px; flex:0 0 auto; position:static; background:#fff; border-bottom-color:#EEDDE5; padding:0 24px; } #nbPortal .right .main{ flex:1; min-height:0; overflow:auto; padding:20px 24px 24px; } #nbPortal .foot{ height:46px; flex:0 0 auto; position:static; background:#fff; border-top-color:#EEDDE5; padding:0 24px; font-size:12px; color:#7A7380; } #nbPortal .banner{ background:linear-gradient(110deg, #FCE8EE, #F8F2F5 50%, #E6F2F0); color:#18151B; border:1px solid #EEE3E8; border-radius:18px; padding:18px 22px; margin-bottom:14px; } #nbPortal .banner h1{ font-size:22px; letter-spacing:-.3px; } #nbPortal .banner p{ color:#5B4A53; font-size:13px; } #nbPortal .banner .ro{ color:#5B4A53; background:#fff; border-color:#EEE3E8; font-weight:700; } #nbPortal .tabs{ margin:0 0 16px; } #nbPortal .tag.t-wait{ background:#E7F1F4; color:#2F6F86; } /* filter under the menu — this page only */ #nbPortal .pf-line{ height:1px; background:#EEDDE5; margin:14px 4px 12px; } #nbPortal .pf{ border:1px solid #F1E2E9; border-radius:14px; padding:12px; background:linear-gradient(160deg, #FCF3F6, #F7FAFA); } #nbPortal .pf-h{ display:flex; align-items:center; gap:7px; color:#9C3957; } #nbPortal .pf-h .i{ width:13px; height:13px; } #nbPortal .pf-h b{ font-size:11px; letter-spacing:.12em; } #nbPortal .pf-t{ font-size:11.5px; color:#7A7380; margin:3px 0 9px; } #nbPortal .pf-r{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer; color:#4D3F47; } #nbPortal .pf-r:hover{ background:#fff; } #nbPortal .pf-r i{ width:14px; height:14px; border-radius:50%; border:2px solid #D9C3CD; background:#fff; flex:0 0 auto; box-sizing:border-box; } #nbPortal .pf-r.on{ color:#9C3957; background:#fff; box-shadow:0 2px 8px -4px rgba(156,57,87,.35); } #nbPortal .pf-r.on i{ border-color:#9C3957; background:radial-gradient(circle, #9C3957 45%, #fff 50%); } #nbPortal .pf-or{ font-size:11px; color:#9A8F96; margin:8px 2px 5px; } #nbPortal .pf-sel{ display:grid; grid-template-columns:1fr 78px; gap:6px; } #nbPortal .pf-sel select{ height:32px; border:1px solid #EEE3E8; border-radius:9px; font:500 12px 'Plus Jakarta Sans',sans-serif; background:#fff; padding:0 6px; color:#2B1F26; min-width:0; } #nbPortal .pf-now{ margin-top:10px; padding-top:8px; border-top:1px dashed #EAD9E1; font-size:11.5px; color:#7A7380; display:flex; flex-direction:column; align-items:flex-start; gap:7px; } #nbPortal .pf-now span{ white-space:nowrap; } #nbPortal .pf-now b{ color:#2B1F26; } #nbPortal .pf-clr{ border:1px solid #E7B9C8; background:#fff; color:#9C3957; font:700 11px 'Plus Jakarta Sans',sans-serif; border-radius:999px; padding:3px 9px; cursor:pointer; white-space:nowrap; } #nbPortal .pf-clr:hover{ background:#FCE8EE; } /* cards, rows and charts */ #nbPortal .right .main .card{ border-color:#EEE3E8; border-radius:16px; padding:16px 18px; } #nbPortal .card h3{ font-size:14.5px; } #nbPortal .pt-ch2{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; } #nbPortal .pt-ch2 .s{ color:#7A7380; font-size:12px; margin-top:2px; } #nbPortal .pt-lnk{ font-size:12px; font-weight:700; color:#9C3957; white-space:nowrap; cursor:pointer; } #nbPortal .pt-lnk:hover{ text-decoration:underline; } #nbPortal .pt-empty{ color:#7A7380; font-size:12.5px; font-weight:600; padding:14px 0; } #nbPortal .pt-k4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:14px; } #nbPortal .pt-kpi{ display:flex; gap:12px; align-items:center; } #nbPortal .pt-kpi .ic{ width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } #nbPortal .pt-kpi .ic .i{ width:19px; height:19px; } #nbPortal .pt-kpi > div:last-child{ min-width:0; } #nbPortal .pt-kpi span{ display:block; color:#7A7380; font-size:12px; font-weight:600; } #nbPortal .pt-kpi b{ display:block; font-size:21px; font-weight:800; margin:1px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #nbPortal .pt-kpi small{ display:block; color:#7A7380; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #nbPortal .pt-act{ display:flex; gap:10px; align-items:center; background:#fff; border:1px solid #EEE3E8; border-radius:14px; padding:10px 12px; margin-bottom:14px; } #nbPortal .pt-act > div{ flex:1; display:flex; gap:9px; align-items:center; min-width:0; } #nbPortal .pt-act > div > span{ min-width:0; } #nbPortal .pt-act i{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } #nbPortal .pt-act i .i{ width:15px; height:15px; } #nbPortal .pt-act b{ display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #nbPortal .pt-act small{ color:#7A7380; font-size:11px; } #nbPortal .pt-act > .pt-lnk{ padding-left:10px; border-left:1px solid #F1E9ED; } #nbPortal .pt-more{ margin:-6px 0 14px; } #nbPortal .pt-g2{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:14px; margin-bottom:14px; align-items:start; } #nbPortal .pt-g2e{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; align-items:start; } #nbPortal .pt-col{ display:flex; flex-direction:column; gap:14px; min-width:0; } #nbPortal .pt-ord{ display:grid; grid-template-columns:200px minmax(0,1fr) 96px; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid #F4EEF1; } #nbPortal .pt-ord:last-child{ border-bottom:0; } #nbPortal .pt-ord .id b{ display:flex; align-items:center; gap:6px; font-size:13.5px; flex-wrap:wrap; } #nbPortal .pt-ord .id .tag{ font-size:10.5px; padding:2px 8px; } #nbPortal .pt-ord .id .tag .i{ width:11px; height:11px; } #nbPortal .pt-ord .id small{ display:block; color:#7A7380; font-size:11.5px; margin-top:2px; line-height:1.45; } #nbPortal .sgm{ display:flex; gap:3px; } #nbPortal .sgm i{ flex:1; height:8px; border-radius:4px; background:#EEE8EB; } #nbPortal .sgm i.d{ background:#1F7A72; } #nbPortal .sgm i.n{ background:#B5577A; } #nbPortal .sgl{ display:flex; justify-content:space-between; gap:8px; margin-top:5px; font-size:11px; color:#7A7380; } #nbPortal .sgl b{ color:#9C3957; text-align:center; } #nbPortal .pt-ord .pc{ text-align:right; } #nbPortal .pt-ord .pc b{ display:block; font-size:17px; } #nbPortal .pt-ord .pc .pt-lnk{ display:block; font-size:11.5px; margin-top:2px; } #nbPortal .pt-list > div{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #F4EEF1; font-size:13px; } #nbPortal .pt-list > div:last-child{ border-bottom:0; } #nbPortal .pt-list small{ display:block; color:#7A7380; font-size:11px; } #nbPortal .pt-list > div > b{ white-space:nowrap; } #nbPortal .pt-pay{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } #nbPortal .pt-pay > b{ font-size:22px; } #nbPortal .pt-pay .ok{ font-size:11.5px; font-weight:700; color:#1F7A72; background:#E6F2F0; border-radius:999px; padding:3px 10px; } #nbPortal .pt-leg{ display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:#7A7380; } #nbPortal .pt-leg i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:middle; } #nbPortal .pt-big{ display:flex; align-items:baseline; gap:8px; margin:-4px 0 6px; } #nbPortal .pt-big b{ font-size:26px; font-weight:800; } #nbPortal .pt-big span{ color:#7A7380; font-size:12.5px; } #nbPortal .pt-tot{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:10px; } #nbPortal .pt-tot div, #nbPortal .pt-gl div{ background:#FCFAFB; border:1px solid #F1E9ED; border-radius:11px; padding:8px 10px; min-width:0; } #nbPortal .pt-tot span, #nbPortal .pt-gl span{ display:block; font-size:11px; color:#7A7380; font-weight:600; } #nbPortal .pt-tot b{ font-size:15px; } #nbPortal .pt-gl{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; } #nbPortal .pt-gl div{ border-radius:12px; padding:10px 12px; } #nbPortal .pt-gl span{ font-size:11.5px; } #nbPortal .pt-gl b{ font-size:18px; } #nbPortal .pt-gl b.up{ color:#1F7A72; } #nbPortal .pt-stack{ display:flex; height:12px; border-radius:6px; overflow:hidden; margin:2px 0 6px; } #nbPortal .pt-stack i{ display:block; } #nbPortal .pt-ch{ display:block; } #nbPortal .pt-tabs{ display:flex; gap:6px; margin:0 0 12px; flex-wrap:wrap; } #nbPortal .pt-tabs span{ font-weight:700; font-size:12.5px; border:1px solid #EEE3E8; border-radius:999px; padding:6px 12px; background:#fff; cursor:pointer; } #nbPortal .pt-tabs span.on{ background:#9C3957; color:#fff; border-color:#9C3957; } #nbPortal .pt-tabs em{ font-style:normal; opacity:.7; margin-left:4px; } #nbPortal .pt-hb{ display:grid; grid-template-columns:120px 1fr 86px; gap:10px; align-items:center; margin:8px 0; font-size:12.5px; } #nbPortal .pt-hb > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #nbPortal .pt-hb .bar{ height:10px; border-radius:5px; background:#F1ECEF; overflow:hidden; } #nbPortal .pt-hb .bar i{ display:block; height:100%; border-radius:5px; } #nbPortal .pt-hb b{ text-align:right; white-space:nowrap; } #nbPortal .pt-hb small{ color:#7A7380; font-weight:600; } @media (max-width:1100px){ #nbPortal .pt-k4, #nbPortal .pt-gl{ grid-template-columns:1fr 1fr; } #nbPortal .pt-g2, #nbPortal .pt-g2e{ grid-template-columns:1fr; } } @media (max-width:700px){ #nbPortal .pt-wrap{ display:block; overflow:auto; } #nbPortal .right .main{ overflow:visible; padding:14px; } #nbPortal .pt-act{ flex-direction:column; align-items:stretch; } #nbPortal .pt-ord{ grid-template-columns:1fr 70px; } #nbPortal .pt-ord > div:nth-child(2){ grid-column:1 / -1; grid-row:2; } #nbPortal .pt-k4{ grid-template-columns:1fr; } }#nbPortal .pt-kpi b small, #nbPortal .pt-list b small, #nbPortal .pt-pay b small{ display:inline; font-size:.62em; color:#7A7380; font-weight:700; margin:0; } #nbPortal .pt-k4 > .card, #nbPortal .pt-col > .card, #nbPortal .pt-g2 > .card, #nbPortal .pt-g2e > .card{ margin:0; } /* ===== Client portal — Deliveries and Invoices & Payments (owner approved 19 Oct 2026) ===== */ #nbPortal .pt-ob{ margin:10px 0 14px; } #nbPortal .pt-ob .t{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; margin:0 0 5px; } #nbPortal .pt-ob .t + .bar + .t{ margin:4px 0 0; } #nbPortal .pt-ob .t span{ color:#7A7380; font-size:11.5px; } #nbPortal .pt-ob .bar, #nbPortal .pt-paid .bar{ display:flex; height:12px; border-radius:6px; overflow:hidden; background:#EEE8EB; } #nbPortal .pt-ob .bar i{ display:block; } #nbPortal .pt-hb2{ display:grid; grid-template-columns:120px 1fr 110px; gap:10px; align-items:center; margin:12px 0; font-size:12.5px; } #nbPortal .pt-hb2 .bar{ height:12px; border-radius:6px; background:#F1ECEF; overflow:hidden; } #nbPortal .pt-hb2 .bar i{ display:block; height:100%; border-radius:6px; } #nbPortal .pt-hb2 b{ text-align:right; white-space:nowrap; } #nbPortal .pt-hb2 small{ display:block; color:#7A7380; font-size:11px; font-weight:600; } #nbPortal .pt-paid{ border-top:1px dashed #EAD9E1; margin-top:12px; padding-top:12px; } #nbPortal .pt-paid > div:first-child{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; font-size:13px; } #nbPortal .pt-paid .bar i{ display:block; background:#1F7A72; } #nbPortal .pt-pi{ width:34px; height:34px; border-radius:10px; background:#E6F2F0; color:#1F7A72; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } #nbPortal .pt-pi .i{ width:15px; height:15px; } #nbPortal .pt-list > div > .btn{ height:30px; padding:0 10px; font-size:12px; } #nbPortal .pt-q{ width:260px; max-width:100%; height:34px; border:1px solid #EEE3E8; border-radius:10px; padding:0 12px; font:500 12.5px 'Plus Jakarta Sans',sans-serif; color:#2B1F26; outline:none; background:#fff; } #nbPortal .pt-q:focus{ border-color:#C24F70; box-shadow:0 0 0 3px rgba(194,79,112,.12); } #nbPortal .pt-pg{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:12px; font-size:12px; color:#7A7380; } #nbPortal .pt-pg span{ margin-right:auto; } #nbPortal .pt-pg .btn{ height:30px; font-size:12px; } #nbPortal .right .main .tbl .btn{ height:30px; padding:0 10px; font-size:12px; } @media (max-width:700px){ #nbPortal .pt-q{ width:100%; } #nbPortal .pt-ch2{ flex-wrap:wrap; } #nbPortal .pt-hb2{ grid-template-columns:90px 1fr 96px; } } /* ===== Client portal — Statement, Documents and Feedback (owner approved 19 Oct 2026) ===== */ #nbPortal .pt-cr{ color:#1F7A72; } #nbPortal .tbl td.nw{ white-space:nowrap; } #nbPortal .pt-btns{ display:flex; gap:6px; } #nbPortal .pt-btns .btn, #nbPortal .pt-list .btn, #nbPortal .pt-drow .btn, #nbPortal .pt-ch2 > .btn{ height:30px; padding:0 10px; font-size:12px; } #nbPortal .st{ color:#1F7A72; letter-spacing:1px; font-size:13px; white-space:nowrap; } #nbPortal .st i{ color:#D5D8DD; font-style:normal; } #nbPortal .pt-kpi b .st{ font-size:19px; font-weight:400; } #nbPortal .pt-g2f{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:14px; align-items:start; } #nbPortal .pt-g2f .pt-q{ width:100%; margin-bottom:10px; } #nbPortal .pt-crow{ border:1px solid #F1E9ED; border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer; } #nbPortal .pt-crow:hover{ border-color:#E7C9D4; } #nbPortal .pt-crow.on{ border-color:#9C3957; background:#FFF8FA; } #nbPortal .pt-crow .t{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin:2px 0; min-width:0; } #nbPortal .pt-crow small{ color:#7A7380; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #nbPortal .pt-crow .tag{ font-size:10.5px; padding:2px 8px; } #nbPortal .pt-thread{ display:flex; flex-direction:column; gap:12px; margin:4px 0 14px; max-height:460px; overflow:auto; } #nbPortal .pt-tiles{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; margin-bottom:14px; } #nbPortal .pt-tile{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #EEE3E8; border-radius:14px; padding:12px; cursor:pointer; min-width:0; } #nbPortal .pt-tile:hover{ border-color:#E7C9D4; } #nbPortal .pt-tile.on{ border-color:#9C3957; box-shadow:0 0 0 3px rgba(156,57,87,.12); } #nbPortal .pt-tile .ic{ width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } #nbPortal .pt-tile .ic .i{ width:17px; height:17px; } #nbPortal .pt-tile > div:nth-child(2){ min-width:0; } #nbPortal .pt-tile b{ display:block; font-size:13px; } #nbPortal .pt-tile small{ display:block; color:#7A7380; font-size:11px; } #nbPortal .pt-tile em{ margin-left:auto; font-style:normal; font-weight:800; font-size:18px; } #nbPortal .pt-drow{ display:grid; grid-template-columns:36px minmax(0,1fr) 100px auto 70px; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid #F4EEF1; } #nbPortal .pt-drow:last-of-type{ border-bottom:0; } #nbPortal .pt-drow .ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; } #nbPortal .pt-drow .ic .i{ width:16px; height:16px; } #nbPortal .pt-drow small{ display:block; color:#7A7380; font-size:11.5px; } #nbPortal .pt-drow .pill{ justify-self:start; font-size:10.5px; font-weight:700; border-radius:999px; padding:3px 9px; } @media (max-width:1100px){ #nbPortal .pt-g2f{ grid-template-columns:1fr; } #nbPortal .pt-tiles{ grid-template-columns:1fr 1fr; } } @media (max-width:700px){ #nbPortal .pt-drow{ grid-template-columns:36px minmax(0,1fr) auto; } #nbPortal .pt-drow .pill, #nbPortal .pt-drow > :last-child{ display:none; } } /* ===== Client portal — "Contact us" card + bottom fix (owner approved 19 Oct 2026) ===== */ /* the desktop program's top-bar rule made the portal 100vh tall under the dark preview strip, so the footer and the bottom-left row fell off the screen */ html.nb-tb body #nbPortal .app, html.nb-tb body #nbPortal .right{ min-height:0 !important; } html.nb-tb body #nbPortal .side{ height:auto !important; } #nbPortal .side{ position:relative; z-index:6; overflow:visible; } #nbPortal .am{ position:relative; cursor:pointer; } #nbPortal .am:hover, #nbPortal .am.open{ background:#FCF6F8; } #nbPortal .am .x span em{ font-style:normal; color:#9C3957; font-weight:700; } #nbPortal .am .x span{ white-space:nowrap; } #nbPortal .pt-cu{ position:absolute; left:10px; bottom:54px; width:330px; background:#fff; border:1px solid #EEDDE5; border-radius:16px; box-shadow:0 30px 60px -24px rgba(43,31,38,.45); padding:14px; z-index:40; cursor:default; } #nbPortal .pt-cu .h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13.5px; } #nbPortal .pt-cu .h span{ cursor:pointer; color:#7A7380; font-size:15px; padding:0 4px; } #nbPortal .pt-cu .p{ display:flex; gap:10px; align-items:center; background:#FCF6F8; border:1px solid #F1E2E9; border-radius:12px; padding:10px; } #nbPortal .pt-cu .p .av{ width:36px; height:36px; border-radius:50%; background:#7E3152; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex:0 0 auto; } #nbPortal .pt-cu b{ display:block; font-size:12.5px; color:#18151B; } #nbPortal .pt-cu small{ display:block; color:#7A7380; font-size:11px; } #nbPortal .pt-cu .btn.wa{ margin-left:auto; height:28px; padding:0 10px; font-size:11.5px; background:#1F7A72; border-color:#1F7A72; color:#fff; } #nbPortal .pt-cu .cap2{ font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#7A7380; margin:12px 2px 6px; } #nbPortal .pt-cu .r{ display:flex; gap:10px; align-items:flex-start; padding:6px 2px; } #nbPortal .pt-cu .r > .i{ width:16px; height:16px; color:#9C3957; margin-top:2px; } #nbPortal .pt-cu .r a{ color:#18151B; text-decoration:none; } /* ===== Sales New forms in the order-form look (owner approved 19 Oct 2026): step cards + summary panel ===== */ html[data-opt="2"] .nbsf-lay{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start;margin-bottom:14px} html[data-opt="2"] .nbsf-main{min-width:0} html[data-opt="2"] .nbsf-step{background:#fff;border:1px solid #EEE3E8;border-radius:16px;margin-bottom:12px} html[data-opt="2"] .nbsf-step.ok{border-color:#CFE5E1} html[data-opt="2"] .nbsf-sh{display:flex;align-items:center;gap:12px;padding:13px 16px} html[data-opt="2"] .nbsf-n{width:26px;height:26px;border-radius:50%;background:#9C3957;color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 auto} html[data-opt="2"] .nbsf-step.ok .nbsf-n{background:#1F7A72} html[data-opt="2"] .nbsf-sh h4{margin:0;font-size:14px;color:#2B1F26} html[data-opt="2"] .nbsf-sh p{margin:2px 0 0;color:#7A7380;font-size:12px} html[data-opt="2"] .nbsf-tag{margin-left:auto;font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 9px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} html[data-opt="2"] .nbsf-tag.req{background:#FCE8EE;color:#9C3957} html[data-opt="2"] .nbsf-tag.opt{background:#F1ECEF;color:#7A7380} html[data-opt="2"] .nbsf-sb{padding:0 16px 16px 54px} html[data-opt="2"] .nbsf-sb .nb-grid2,html[data-opt="2"] .nbsf-g3{display:grid;grid-template-columns:1fr 1fr;gap:12px} html[data-opt="2"] .nbsf-g3{grid-template-columns:repeat(3,minmax(0,1fr))} html[data-opt="2"] .nbsf-sb .field{margin:0} html[data-opt="2"] .nbsf-sb .nb-itemswrap{border:1px solid #F1E9ED;border-radius:12px} html[data-opt="2"] .nbsf-sb .nbx-addlink{margin-left:6px} html[data-opt="2"] .nbsf-side{position:sticky;top:70px;background:#fff;border:1px solid #EEE3E8;border-radius:16px;overflow:hidden} html[data-opt="2"] .nbsf-hd{background:linear-gradient(135deg,#9C3957,#B5577A);color:#fff;padding:14px 16px} html[data-opt="2"] .nbsf-hd span{font-size:10.5px;font-weight:800;letter-spacing:.08em;opacity:.85} html[data-opt="2"] .nbsf-hd b{display:block;font-size:16px;margin-top:2px} html[data-opt="2"] .nbsf-hd small{opacity:.85;font-size:12px} html[data-opt="2"] .nbsf-prog{padding:12px 16px 4px;display:flex;align-items:center;gap:10px} html[data-opt="2"] .nbsf-prog>i{flex:1;height:6px;border-radius:3px;background:#F1ECEF;overflow:hidden} html[data-opt="2"] .nbsf-prog>i>i{display:block;height:100%;width:0;background:#1F7A72;transition:width .2s} html[data-opt="2"] .nbsf-prog b{font-size:12px;white-space:nowrap} html[data-opt="2"] .nbsf-chk{padding:4px 16px 10px} html[data-opt="2"] .nbsf-chk div{display:flex;gap:8px;align-items:center;padding:4px 0;color:#5B4A53;font-size:12.5px} html[data-opt="2"] .nbsf-chk i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;border:1.5px solid #E7B9C8;color:#9C3957;flex:0 0 auto} html[data-opt="2"] .nbsf-chk .ok i{background:#1F7A72;border-color:#1F7A72;color:#fff} html[data-opt="2"] .nbsf-tot{margin:0 16px 12px;background:linear-gradient(110deg,#FCE8EE,#F8F2F5 50%,#E6F2F0);border:1px solid #EEE3E8;border-radius:14px;padding:12px 14px} html[data-opt="2"] .nbsf-tot .nb-kv{display:flex;justify-content:space-between;gap:8px;color:#5B4A53;font-size:12px;padding:2px 0;border:0} html[data-opt="2"] .nbsf-tot .nb-total{display:flex;flex-direction:column;gap:2px;margin:6px 0 2px;padding:0;border:0;background:none} html[data-opt="2"] .nbsf-tot .nb-total span{color:#7A7380;font-size:11.5px} html[data-opt="2"] .nbsf-tot .nb-total b{font-size:22px;color:#2B1F26} html[data-opt="2"] .nbsf-tot .nb-hint{margin:4px 0 0;font-size:11.5px} html[data-opt="2"] .nbsf-ft{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px} html[data-opt="2"] .nbsf-ft .login-btn{width:100%;height:40px;margin:0} html[data-opt="2"] .nbsf-ft .nb-err{margin:0} html[data-opt="2"] .nbsf-hint{text-align:center;color:#7A7380;font-size:11.5px;line-height:1.5} @media (max-width:1100px){html[data-opt="2"] .nbsf-lay{grid-template-columns:1fr}.nbsf-side{position:static}.nbsf-sb{padding-left:16px}} @media (max-width:700px){html[data-opt="2"] .nbsf-sb .nb-grid2,html[data-opt="2"] .nbsf-g3{grid-template-columns:1fr}} /* + Add new partner on the order form (owner approved 19 Oct 2026) */ html[data-opt="2"] .nbo-pmask{position:fixed;inset:0;background:rgba(43,31,38,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:9999} html[data-opt="2"] .nbo-pop{background:#fff;border-radius:18px;width:480px;max-width:100%;padding:18px 20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)} html[data-opt="2"] .nbo-pop h3{margin:0;font-size:16px;color:#2B1F26} html[data-opt="2"] .nbo-pop .s{color:#7A7380;font-size:12px;margin:3px 0 14px} html[data-opt="2"] .nbo-pg{display:grid;grid-template-columns:1fr 1fr;gap:12px} html[data-opt="2"] .nbo-pf span{display:block;font-size:11.5px;font-weight:700;color:#5B4A53;margin-bottom:5px} html[data-opt="2"] .nbo-pf input{width:100%;height:38px;border:1.5px solid #ECE3E8;border-radius:10px;padding:0 10px;font:inherit;background:#fff;margin:0} html[data-opt="2"] .nbo-pop .nb-err{margin-top:10px} html[data-opt="2"] .nbo-pbtn{display:flex;gap:8px;justify-content:flex-end;margin-top:16px} html[data-opt="2"] .nbo-pbtn .login-btn{width:auto;margin:0;padding:0 16px;height:38px} @media (max-width:600px){html[data-opt="2"] .nbo-pg{grid-template-columns:1fr}} /* label fixes (owner approved 20 Oct 2026) */ html[data-opt="2"] .stage-pill-v2.nb-wait{ color:#9C3957 !important; background:#FCE8EE !important; border-color:#E7B9C8 !important; } html[data-opt="2"] .stage-pill-v2.nb-wait::before{ background:#9C3957 !important; } html[data-opt="2"] .kpi-card .nbq-left{ font-size:11px; color:#7A7380; font-weight:600; margin-top:1px; } /* running order value pill on Home and the Orders dashboard (owner approved 20 Oct 2026) — money only for logins that may see prices */ html[data-opt="2"] .nbh-facts .nbh-rv{ border:1.5px solid #1F7A72 !important; background:#F2FAF8 !important; color:#1F7A72 !important; cursor:pointer; } html[data-opt="2"] .nbh-facts .nbh-rv b{ color:#1F7A72 !important; } html[data-opt="2"] .facts .nbod-rv{ border:1.5px solid #1F7A72 !important; background:#F2FAF8 !important; color:#1F7A72 !important; cursor:pointer; } html[data-opt="2"] .facts .nbod-rv b{ color:#1F7A72 !important; } /* 21 Oct 2026 — no black buttons or selected labels: they use the main colour (and follow the colour palette) */ /* 21 Oct 2026 - tax invoice: company name and TAX INVOICE in the main colour (follows the colour palette); Bill to: one-line name, labelled lines */ .nbd.nbd-inv .nbd-name, .nbd.nbd-inv .nbd-doc .t{ color:#9C3957; } .nbd.nbd-inv .nbd-inv-to .nm{ white-space:nowrap; overflow:hidden; } .nbd.nbd-inv .nbd-inv-to .ln .k{ color:var(--soft); font-weight:600; } /* 21 Oct 2026 (owner): Time card banner buttons were white on the light banner (made for the old wine banner) — same look as every other switch */ html[data-opt="2"] .section-banner .tc-seg{ background:#F1EDEF; } html[data-opt="2"] .section-banner .tc-seg button{ color:#5B4A53; opacity:1; } html[data-opt="2"] .section-banner .tc-seg button.on{ background:#fff; color:#9C3957; box-shadow:0 1px 3px rgba(0,0,0,.08); } /* 21 Oct 2026 (owner): a salary paid before the pay day — on the salary sheet and the slip */ .nbsal .nm small.pe{ display:block; color:#2E7D4F; font-weight:700; } .slip .pdn{ margin-top:1.5mm; font-size:7.5pt; font-weight:700; color:#2E7D4F; text-align:right; } /* 21 Oct 2026 (owner): Employees › Working / Former employees */ html[data-opt="2"] .nb-emp-tabs{ display:inline-flex; margin-bottom:12px; } html[data-opt="2"] .nb-emp-tabs em{ font-style:normal; font-size:11px; margin-left:4px; opacity:.75; } html[data-opt="2"] .nb-fm-open{ height:32px; border-radius:9px; border:1px solid #EEDDE5; background:#fff; color:#9C3957; font:inherit; font-weight:700; font-size:12.5px; padding:0 14px; cursor:pointer; } html[data-opt="2"] tr.nb-fm-d > td{ background:#FBF9FA; padding:12px; } html[data-opt="2"] .nb-fm-left{ display:flex; align-items:center; gap:12px; background:#F6F4F5; border:1px solid #EAE4E7; border-radius:14px; padding:11px 14px; margin-bottom:10px; } html[data-opt="2"] .nb-fm-left b{ display:block; } html[data-opt="2"] .nb-fm-left span:not(.nb-hd-chip){ color:var(--text-muted); font-size:12px; } html[data-opt="2"] .nb-fm-left button{ margin-left:auto; height:32px; border-radius:9px; border:1px solid #EEDDE5; background:#fff; font:inherit; font-weight:700; padding:0 12px; cursor:pointer; } /* 21 Oct 2026: Former employees drawer buttons + work history in the record */ html[data-opt="2"] .nb-fm-b{ margin-left:auto; display:flex; gap:6px; } html[data-opt="2"] .nb-fm-left .nb-fm-b button{ margin-left:0; } html[data-opt="2"] .nb-fm-left button.t{ color:#fff; background:#1F7A72; border-color:#1F7A72; } html[data-opt="2"] .nb-el-hist{ grid-column:1 / -1; } html[data-opt="2"] .nb-el-hist .ex-row{ display:flex; gap:8px; justify-content:flex-end; } html[data-opt="2"] .nb-el-hist .ex-row:empty{ display:none; } /* 21 Oct 2026 (owner): the attachment / edit / delete icons in the details panel in one neat row; list rows open the details */ html[data-opt="2"] .nb-el-drawer .nb-rowbtns{ display:flex; gap:6px; align-items:center; } html[data-opt="2"] .nb-el-drawer .nb-rowbtns button{ width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); padding:0; } html[data-opt="2"] .nb-el-drawer .nb-rowbtns button.nbu-btn{ width:auto; min-width:36px; padding:0 8px; } html[data-opt="2"] .nb-el-drawer .nb-rowbtns button svg{ width:15px; height:15px; } html[data-opt="2"] .nb-el-drawer .nb-rowbtns button:hover{ border-color:var(--accent); color:var(--accent-dk); } html[data-opt="2"] .nb-el-drawer .btns .login-btn{ height:36px; padding:0 18px; } html[data-opt="2"] tr.nb-el-tr{ cursor:pointer; } html[data-opt="2"] tr.nb-el-tr:hover td, html[data-opt="2"] tr.nb-el-tr.on td{ background:#FCF7F9; } html[data-opt="2"] tr.nb-el-dtr > td{ padding:6px 0 12px !important; background:#fff !important; } html[data-opt="2"] tr.nb-el-dtr .nb-el-drawer{ margin:0; } /* 23 Oct 2026 (owner): the client's LPO and our order as pairs on the delivery note and tax invoice — "Delivery note LPO and signature (preview)" */ .nbd-refs{ border:1px solid #EAE3E7; border-radius:2mm; margin:0 0 3.5mm; font-size:8.6pt; break-inside:avoid; } .nbd-refs .h, .nbd-refs .r{ display:grid; grid-template-columns:1fr 1fr 22mm; gap:3mm; padding:1.2mm 3mm; } .nbd-refs .h{ background:#FBF7F9; font-size:7.2pt; font-weight:800; color:#6E6876; text-transform:uppercase; letter-spacing:.05em; border-radius:2mm 2mm 0 0; } .nbd-refs .r{ border-top:1px solid #F1ECEF; } .nbd-refs .num{ text-align:right; } .nbd-rf{ display:inline-flex; align-items:center; gap:1.5mm; margin-right:4mm; } .nbd-rf i{ font-style:normal; font-size:7pt; font-weight:800; color:#6E6876; text-transform:uppercase; letter-spacing:.04em; } .nbd-rf b{ border-radius:1.2mm; padding:.2mm 2mm; font-size:8.4pt; } .nbd-rf.c2 b{ background:#FCE8EE; color:#9C3957; } .nbd-rf.c1 b{ background:#E7F1F4; color:#1D4A5C; } /* 23 Oct 2026: delivery note signed on the screen — the client's box shows the name, the signature and the time */ .nbd-dn .dn-signed .row.sg{ align-items:end; } .nbd-dn .dn-signed .row.sg i{ height:8.6mm; padding:0; display:flex; align-items:flex-end; overflow:hidden; } .nbd-dn .dn-signed .row.sg img{ height:8.4mm; max-width:100%; object-fit:contain; object-position:left bottom; } .nbd-dn .dn-signed .h .dn-ok{ float:right; font-size:7.4pt; color:#1F7A72; letter-spacing:0; text-transform:none; } .nbd-dn .dn-signed .dn-chk{ margin-top:1.2mm; font-size:7.6pt; color:#5B4A53; } /* 23 Oct 2026: delivery note — "Issued by … · date, time" on a thin line above the wine footer (option A), on every printed page; room kept for it */ .nbd-foot .f1.nbd-f1s{ padding:1.3mm 10mm; font-size:7.4pt; } .nbd-foot .f1.nbd-f1s b{ color:#2B1220; } .nbd.nbd-dn:has(.nbd-f1s) .nbd-footspace{ height:19mm; } /* 23 Oct 2026: several orders on one delivery note — each group line shows ordered · before · this delivery · balance */ .nbd-dn .dn-gf{ float:right; font-size:7.6pt; color:#6E6876; font-weight:500; } .nbd-dn .dn-gf b{ color:#2B1220; } .nbd-dn .dn-gf b.bal{ color:#9C3957; } .nbd-dn .dn-gf b.ok{ color:#1F7A72; } /* 23 Oct 2026 (owner): delivery note — "Page 1 of 2" when it runs over a page; printed in a thin strip under the footer */ @page nbdn{ size:A4; margin:0 0 15mm 0; @bottom-left{ font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; font-size:7.4pt; font-weight:600; color:#6E6876; white-space:pre; line-height:6mm; vertical-align:top; padding-top:1.5mm; background:linear-gradient(to bottom, transparent calc(50% - .5px), #7E3152 calc(50% - .5px), #7E3152 calc(50% + 1px), transparent calc(50% + 1px)); padding-left:10mm; text-align:left; } @bottom-center{ content:" "; font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; font-size:7.4pt; font-weight:600; color:#6E6876; white-space:pre; line-height:6mm; vertical-align:top; padding-top:1.5mm; background:linear-gradient(to bottom, transparent calc(50% - .5px), #7E3152 calc(50% - .5px), #7E3152 calc(50% + 1px), transparent calc(50% + 1px)); } @bottom-right{ font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; font-size:7.4pt; font-weight:600; color:#6E6876; white-space:pre; line-height:6mm; vertical-align:top; padding-top:1.5mm; background:linear-gradient(to bottom, transparent calc(50% - .5px), #7E3152 calc(50% - .5px), #7E3152 calc(50% + 1px), transparent calc(50% + 1px)); padding-right:10mm; text-align:right; } } body.nb-print #nbPrintRoot .nbd.nbd-dn .nbd-foot{ display:none; } body.nb-print #nbPrintRoot .nbd.nbd-dn .nbd-footspace{ height:3mm; } /* printed: the line is under the footer instead */ body.nb-print #nbPrintRoot .nbd.nbd-dn{ page:nbdn; } /* 23 Oct 2026: delivery note top line — the date always on the right */ .nbd.nbd-dn .nbd-strip > div:last-child{ text-align:right; }