/* ============================================================ INTSOL Uniform Portal Corporate dark UI — teal & aubergine drawn from the INTSOL brand ============================================================ */ /* ---- THEME --------------------------------------------------- Light is the default. Dark mode = . The sidebar and the login screen stay dark in BOTH themes — they re-declare the dark variables for their own subtree. -------------------------------------------------------------- */ :root{ /* light theme (default) */ --bg-0:#f4f3f8; --bg-1:#ebe9f2; --panel:#ffffff; --panel-2:#ffffff; --stroke:rgba(28,20,52,.10); --stroke-2:rgba(28,20,52,.17); --txt-0:#1d1830; --txt-1:#544e68; --txt-2:#8a849c; --teal:#1c9483; --teal-d:#16786a; --teal-soft:rgba(28,148,131,.12); --aubergine:#7a3d6d; --aubergine-li:#854a78; --aubergine-soft:rgba(122,61,109,.12); --green:#2f9268; --amber:#b07d2a; --red:#c0445a; --blue:#4a6cbf; --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace; --radius:12px; } :root[data-theme="dark"], .sidebar, .auth-wrap{ /* dark theme — and always applied to the sidebar + login screen */ --bg-0:#0c0a0f; --bg-1:#13111a; --panel:#181620; --panel-2:#1f1c29; --stroke:rgba(160,150,185,.13); --stroke-2:rgba(160,150,185,.22); --txt-0:#ece9f2; --txt-1:#a9a3bb; --txt-2:#6f6982; --teal:#23a892; --teal-d:#1c8c79; --teal-soft:rgba(35,168,146,.12); --aubergine:#7a3d6d; --aubergine-li:#a76699; --aubergine-soft:rgba(122,61,109,.18); --green:#3fae7d; --amber:#c79038; --red:#c5566a; --blue:#5b7fc4; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--font);background:var(--bg-0);color:var(--txt-0); overflow:hidden;-webkit-font-smoothing:antialiased;font-size:15.5px; } /* subtle, static backdrop — no nightclub glow ---------------- */ .bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(900px 600px at 12% -5%, rgba(122,61,109,.16), transparent 70%), radial-gradient(900px 600px at 100% 110%, rgba(35,168,146,.10), transparent 70%);} .bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(160,150,185,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(160,150,185,.035) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%);} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(160,150,185,.2);border-radius:6px} ::-webkit-scrollbar-thumb:hover{background:rgba(160,150,185,.35)} /* ============================================================ AUTH (login / register / pending) ============================================================ */ #login{display:block} .auth-wrap{position:fixed;inset:0;z-index:2;display:flex;background:var(--bg-0); color:var(--txt-0);align-items:center;justify-content:center;padding:24px} .auth-card{ width:min(460px,94vw);background:var(--panel); border:1px solid var(--stroke-2);border-radius:16px;padding:38px 36px 32px; box-shadow:0 30px 80px -24px rgba(0,0,0,.7); animation:rise .45s cubic-bezier(.2,.8,.2,1); } @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .auth-logos{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:26px} .auth-logos img{width:auto;object-fit:contain} .auth-logos .l-intsol{height:62px;filter:brightness(0) invert(1)} .auth-logos .l-ck{height:48px} .auth-logos .x{color:var(--txt-2);font-size:18px} .auth-card h1{font-size:23px;font-weight:700;letter-spacing:-.3px} .auth-card .sub{color:var(--txt-2);font-size:13.5px;margin-top:6px;margin-bottom:24px} .field{margin-bottom:15px} .field label{display:block;font-size:12.5px;color:var(--txt-1);font-weight:600; letter-spacing:.3px;margin-bottom:6px} .field input,.field select,.field textarea{ width:100%;background:var(--bg-1);border:1px solid var(--stroke-2);border-radius:9px; padding:12px 14px;color:var(--txt-0);font-size:15px;font-family:var(--font);transition:.15s} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)} .field input::placeholder{color:var(--txt-2)} .field .hint{font-size:12px;color:var(--txt-2);margin-top:5px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .btn{ width:100%;border:none;border-radius:9px;padding:13px;font-size:15px;font-weight:600; cursor:pointer;font-family:var(--font);transition:.15s; background:var(--teal);color:#04130f; } .btn:hover{background:var(--teal-d)} .btn:active{transform:translateY(1px)} .btn.ghost{background:transparent;color:var(--txt-0);border:1px solid var(--stroke-2)} .btn.ghost:hover{background:rgba(160,150,185,.06);border-color:var(--stroke-2)} .btn.sm{width:auto;padding:9px 16px;font-size:13.5px} .btn.aub{background:var(--aubergine);color:#fff} .btn.aub:hover{background:var(--aubergine-li)} .btn.danger{background:transparent;color:var(--red);border:1px solid rgba(197,86,106,.4)} .btn.danger:hover{background:rgba(197,86,106,.1)} .btn.tiny{width:auto;padding:7px 12px;font-size:12.5px;border-radius:7px} .btn[disabled]{opacity:.4;cursor:not-allowed} .auth-foot{margin-top:18px;text-align:center;font-size:13px;color:var(--txt-2)} .auth-foot a{color:var(--teal);cursor:pointer;font-weight:600} .auth-hint{margin-top:16px;background:var(--bg-1);border:1px solid var(--stroke); border-radius:9px;padding:12px 14px;font-size:12px;color:var(--txt-2);line-height:1.7} .auth-hint code{color:var(--teal);font-family:var(--mono)} .auth-hint b{color:var(--txt-1)} .auth-powered{margin-top:20px;padding-top:16px;border-top:1px solid var(--stroke); display:flex;flex-direction:column;align-items:center;gap:7px} .auth-powered span{font-size:9.5px;text-transform:uppercase;letter-spacing:1.6px;color:var(--txt-2)} .auth-powered img{height:20px;width:auto;opacity:.75} .pending-badge{width:56px;height:56px;border-radius:50%;background:var(--aubergine-soft); border:1px solid var(--stroke-2);display:flex;align-items:center;justify-content:center; font-size:26px;margin:0 auto 16px} /* ============================================================ APP SHELL ============================================================ */ #app{position:relative;z-index:2;height:100vh;display:none;grid-template-columns:260px 1fr} #app.show{display:grid} .sidebar{ background:var(--bg-1);border-right:1px solid var(--stroke);color:var(--txt-0); display:flex;flex-direction:column;padding:22px 15px; } .brand{display:flex;align-items:center;gap:11px;padding:2px 6px 18px; border-bottom:1px solid var(--stroke);margin-bottom:6px} .brand .brand-logo{width:auto;display:block} .brand .brand-logo.l-intsol{height:32px;filter:brightness(0) invert(1)} .brand .brand-logo.l-ck{height:28px} .brand .tt{font-weight:700;font-size:13px;line-height:1.3} .brand .tt span{display:block;font-size:10.5px;color:var(--txt-2);font-weight:500} .nav{display:flex;flex-direction:column;gap:2px;margin-top:8px} .nav a{ display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:8px; color:var(--txt-1);font-size:14.5px;font-weight:500;cursor:pointer;transition:.13s; border-left:2px solid transparent; } .nav a .ic{width:18px;text-align:center;font-size:14px;opacity:.85} .nav a:hover{background:rgba(160,150,185,.05);color:var(--txt-0)} .nav a.active{background:var(--teal-soft);color:var(--txt-0);border-left-color:var(--teal)} .nav a .badge{margin-left:auto;background:var(--aubergine);color:#fff;font-size:11px; font-weight:700;min-width:19px;text-align:center;padding:2px 7px;border-radius:10px} .nav a.active .badge,.nav a:hover .badge{background:var(--aubergine-li)} .nav-sep{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--txt-2); padding:18px 12px 6px;font-weight:700} .side-foot{margin-top:auto;border-top:1px solid var(--stroke);padding-top:14px} .who{display:flex;align-items:center;gap:10px;padding:4px 6px} .who .av{width:36px;height:36px;border-radius:8px;background:var(--aubergine-soft); border:1px solid var(--stroke-2);display:flex;align-items:center;justify-content:center; font-weight:700;font-size:13px;color:var(--aubergine-li)} .who .nm{font-size:13.5px;font-weight:600} .who .rl{font-size:11px;color:var(--txt-2)} .side-foot .btn{margin-top:10px;padding:9px;font-size:13px} .theme-row{display:flex;align-items:center;justify-content:space-between; margin-top:12px;padding:3px 6px;font-size:13.5px;color:var(--txt-1);font-weight:500} .switch{width:38px;height:21px;border-radius:11px;background:var(--stroke-2);border:none; cursor:pointer;position:relative;transition:.15s;flex-shrink:0;padding:0} .switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px; border-radius:50%;background:var(--txt-1);transition:.15s} .switch.on{background:var(--teal)} .switch.on::after{left:19.5px;background:#fff} .main{overflow-y:auto;padding:26px 34px 60px} .topbar{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px} .topbar h2{font-size:25px;font-weight:700;letter-spacing:-.4px} .topbar .crumb{font-size:12.5px;color:var(--txt-2);margin-bottom:3px;font-weight:500} .topbar .actions{display:flex;gap:9px} /* cards ------------------------------------------------------- */ .card{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius); padding:20px 22px} .card h3{font-size:14.5px;font-weight:700;margin-bottom:15px;display:flex;align-items:center; gap:8px;letter-spacing:-.1px} .card h3 .dot{width:7px;height:7px;border-radius:2px;background:var(--teal)} .card h3 .dot.aub{background:var(--aubergine-li)} .card h3 .dot.amber{background:var(--amber)} .grid{display:grid;gap:16px} .g-4{grid-template-columns:repeat(4,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-2{grid-template-columns:1fr 1fr} .g-23{grid-template-columns:1.65fr 1fr} @media(max-width:1140px){.g-4{grid-template-columns:1fr 1fr}.g-3,.g-2,.g-23{grid-template-columns:1fr}} /* stat tiles -------------------------------------------------- */ .stat{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius); padding:18px 20px} .stat .lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--txt-2); font-weight:600} .stat .val{font-size:31px;font-weight:700;margin-top:9px;letter-spacing:-.8px} .stat .val.teal{color:var(--teal)} .stat .val.aub{color:var(--aubergine-li)} .stat .meta{font-size:12px;color:var(--txt-2);margin-top:5px} .stat .meta b{color:var(--green);font-weight:600} .stat .meta b.warn{color:var(--amber)} .stat .meta b.bad{color:var(--red)} /* tables ------------------------------------------------------ */ .tbl{width:100%;border-collapse:collapse;font-size:13.5px} .tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px; color:var(--txt-2);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--stroke)} .tbl td{padding:12px 12px;border-bottom:1px solid rgba(160,150,185,.06);color:var(--txt-1); vertical-align:top} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:rgba(160,150,185,.03)} .tbl td b{color:var(--txt-0);font-weight:600} .tbl .mono{font-family:var(--mono);font-size:12.5px;color:var(--teal)} .tbl .right{text-align:right} .tbl input.cell{width:70px;background:var(--bg-1);border:1px solid var(--stroke-2); border-radius:6px;padding:6px 8px;color:var(--txt-0);font-size:13px;font-family:var(--mono)} .tbl input.cell:focus{outline:none;border-color:var(--teal)} /* pills ------------------------------------------------------- */ .pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600; padding:4px 10px;border-radius:6px;letter-spacing:.1px;white-space:nowrap} .pill::before{content:"";width:5px;height:5px;border-radius:1px;background:currentColor} .pill.green{color:var(--green);background:rgba(63,174,125,.12)} .pill.amber{color:var(--amber);background:rgba(199,144,56,.13)} .pill.teal{color:var(--teal);background:var(--teal-soft)} .pill.aub{color:var(--aubergine-li);background:var(--aubergine-soft)} .pill.red{color:var(--red);background:rgba(197,86,106,.13)} .pill.grey{color:var(--txt-2);background:rgba(160,150,185,.08)} .pill.blue{color:var(--blue);background:rgba(91,127,196,.13)} /* stock bar --------------------------------------------------- */ .sbar{height:6px;border-radius:3px;background:rgba(160,150,185,.12);overflow:hidden} .sbar i{display:block;height:100%;border-radius:3px} .sbar i.ok{background:var(--teal)} .sbar i.low{background:var(--amber)} .sbar i.out{background:var(--red)} /* catalogue --------------------------------------------------- */ .cat-head{font-size:11.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--txt-2); margin:18px 0 9px;display:flex;align-items:center;gap:8px;font-weight:700} .cat-head::after{content:"";flex:1;height:1px;background:var(--stroke)} .cat-head:first-child{margin-top:0} .size-row{display:flex;flex-wrap:wrap;gap:8px} .size-chip{position:relative;border:1px solid var(--stroke-2);border-radius:9px; padding:9px 12px;min-width:80px;cursor:pointer;transition:.13s;background:var(--bg-1)} .size-chip:hover{border-color:var(--teal)} .size-chip.picked{border-color:var(--teal);background:var(--teal-soft)} .size-chip.oos{opacity:.38;cursor:not-allowed} .size-chip.oos:hover{border-color:var(--stroke-2)} .size-chip .sz{font-weight:700;font-size:13.5px} .size-chip .av{font-size:11px;color:var(--txt-2);margin-top:2px} .size-chip .av b{color:var(--txt-1)} .size-chip .av b.lo{color:var(--amber)} .size-chip .qbubble{position:absolute;top:-8px;right:-8px;min-width:21px;height:21px; border-radius:11px;background:var(--aubergine);color:#fff;font-size:11.5px;font-weight:700; display:flex;align-items:center;justify-content:center;padding:0 5px} /* basket / lines ---------------------------------------------- */ .basket-line{display:flex;align-items:center;gap:10px;padding:9px 0; border-bottom:1px solid rgba(160,150,185,.07)} .basket-line:last-child{border-bottom:none} .basket-line .nm{flex:1;font-size:13.5px} .basket-line .nm small{display:block;color:var(--txt-2);font-family:var(--mono);font-size:11px} .qty{display:flex;align-items:center;border:1px solid var(--stroke-2);border-radius:7px;overflow:hidden} .qty button{background:var(--bg-1);border:none;color:var(--txt-0);width:27px;height:29px; cursor:pointer;font-size:15px} .qty button:hover{background:var(--teal-soft)} .qty span{width:32px;text-align:center;font-size:13.5px;font-weight:700} /* recipient cards --------------------------------------------- */ .rcard{border:1px solid var(--stroke);border-radius:10px;padding:14px 16px;margin-bottom:10px; background:var(--bg-1);position:relative} .rcard .rx{position:absolute;top:10px;right:12px;cursor:pointer;color:var(--txt-2);font-size:15px} .rcard .rx:hover{color:var(--red)} .rcard .rn{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px} .rcard .ra{font-size:12.5px;color:var(--txt-2);margin-top:4px} .rcard .rl{margin-top:9px;display:flex;flex-wrap:wrap;gap:5px} /* timeline ---------------------------------------------------- */ .timeline{position:relative;padding-left:24px} .timeline::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px; background:var(--stroke-2)} .tl-step{position:relative;padding:0 0 17px} .tl-step:last-child{padding-bottom:0} .tl-step::before{content:"";position:absolute;left:-21px;top:2px;width:12px;height:12px; border-radius:50%;background:var(--bg-1);border:2px solid var(--txt-2)} .tl-step.done::before{background:var(--teal);border-color:var(--teal)} .tl-step.active::before{background:var(--teal);border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-soft)} .tl-step .t{font-weight:600;font-size:13.5px} .tl-step .d{font-size:12px;color:var(--txt-2);margin-top:2px} /* modal ------------------------------------------------------- */ .modal-bg{position:fixed;inset:0;z-index:50;background:rgba(6,5,9,.74); backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:24px} .modal-bg.show{display:flex;animation:fade .15s} @keyframes fade{from{opacity:0}to{opacity:1}} .modal{width:min(560px,96vw);max-height:88vh;overflow-y:auto;background:var(--panel-2); border:1px solid var(--stroke-2);border-radius:14px;padding:26px 28px; box-shadow:0 40px 100px -20px rgba(0,0,0,.8);animation:rise .25s} .modal.wide{width:min(700px,96vw)} .modal h3{font-size:18px;font-weight:700;margin-bottom:3px} .modal .msub{font-size:13px;color:var(--txt-2);margin-bottom:18px} .modal-x{float:right;cursor:pointer;color:var(--txt-2);font-size:19px;line-height:1} .modal-x:hover{color:var(--red)} /* royal mail label ------------------------------------------- */ .rm-label{background:#fff;color:#111;border-radius:8px;padding:14px;font-family:var(--mono); font-size:10.5px;line-height:1.5} .rm-label .rm-top{display:flex;justify-content:space-between;align-items:center; border-bottom:2px solid #111;padding-bottom:7px;margin-bottom:7px} .rm-label .rm-top b{font-family:var(--font);font-size:13px;font-weight:800} .rm-label .rm-svc{background:#111;color:#fff;padding:2px 7px;border-radius:3px;font-weight:700; font-family:var(--font);font-size:9px} .rm-label .rm-to{font-size:12px;line-height:1.55} .rm-label .rm-bc{margin-top:9px;height:42px;border-radius:2px; background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 9px)} .rm-label .rm-trk{text-align:center;font-weight:800;letter-spacing:2px;margin-top:5px;font-size:12px} .rm-label .rm-meta{display:flex;justify-content:space-between;margin-top:6px;color:#555;font-size:9.5px} /* xero output ------------------------------------------------- */ .xero-box{background:var(--bg-1);border:1px solid var(--stroke-2);border-radius:9px; padding:14px 16px;font-size:13.5px} .xero-box .xrow{display:flex;justify-content:space-between;padding:7px 0; border-bottom:1px dashed var(--stroke);gap:14px} .xero-box .xrow:last-child{border-bottom:none} .xero-box .xrow .k{color:var(--txt-2)} .xero-box .xrow .v{font-weight:600;text-align:right} .xero-line{background:var(--panel);border:1px solid var(--stroke);border-radius:8px; padding:12px 14px;margin-bottom:8px} .xero-line .xt{font-weight:700;font-size:13px;margin-bottom:6px;color:var(--teal)} /* misc -------------------------------------------------------- */ .muted{color:var(--txt-2)} .flex{display:flex;align-items:center;gap:10px} .between{justify-content:space-between} .wrap{flex-wrap:wrap} .mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px} .mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px} .tabs{display:flex;gap:3px;background:var(--bg-1);border:1px solid var(--stroke); border-radius:9px;padding:4px;width:fit-content;margin-bottom:20px} .tabs button{background:transparent;border:none;color:var(--txt-1);padding:8px 17px; border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font)} .tabs button.active{background:var(--teal-soft);color:var(--txt-0)} .empty{text-align:center;padding:40px 20px;color:var(--txt-2);font-size:13.5px} .empty .ic{font-size:30px;opacity:.5;margin-bottom:8px} .kv{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0; border-bottom:1px solid rgba(160,150,185,.06)} .kv .k{color:var(--txt-2)}.kv .v{font-weight:600} .kv.tot{border-bottom:none;font-size:16px;margin-top:4px;padding-top:9px; border-top:1px solid var(--stroke-2)} .kv.tot .v{color:var(--teal);font-weight:700} .note{font-size:12.5px;color:var(--txt-1);background:var(--bg-1); border:1px solid var(--stroke);border-left:2px solid var(--teal); border-radius:7px;padding:10px 12px;line-height:1.6} .note.aub{border-left-color:var(--aubergine-li)} .note.amber{border-left-color:var(--amber)} .note b{color:var(--txt-0)} /* toast ------------------------------------------------------- */ #toast-wrap{position:fixed;bottom:22px;right:22px;z-index:80;display:flex; flex-direction:column;gap:9px} .toast{background:var(--panel-2);border:1px solid var(--stroke-2);border-radius:10px; padding:13px 16px;min-width:290px;box-shadow:0 20px 50px -14px rgba(0,0,0,.7); animation:slidein .3s cubic-bezier(.2,.8,.2,1);display:flex;gap:10px;align-items:flex-start; border-left:2px solid var(--teal)} @keyframes slidein{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}} .toast .ti{font-size:16px} .toast .tt{font-size:13.5px;font-weight:700} .toast .td{font-size:12px;color:var(--txt-2);margin-top:2px} .toast.aub{border-left-color:var(--aubergine-li)} .toast.amber{border-left-color:var(--amber)} .toast.red{border-left-color:var(--red)} .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--teal); border-radius:50%;display:inline-block;animation:rot .7s linear infinite;vertical-align:-3px} @keyframes rot{to{transform:rotate(360deg)}} /* spinner sitting on a solid teal button — dark so it's visible */ .btn .spin{border-color:rgba(0,0,0,.18);border-top-color:#04130f;margin-right:4px} /* email / inbox ----------------------------------------------- */ .email{border:1px solid var(--stroke);border-radius:10px;padding:14px 16px;margin-bottom:10px; background:var(--bg-1);border-left:2px solid var(--stroke-2)} .email.unread{border-left-color:var(--teal);background:var(--panel)} .email .e-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline} .email .e-subj{font-weight:700;font-size:14px} .email .e-subj .udot{display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--teal);margin-right:6px;vertical-align:1px} .email .e-time{font-size:11.5px;color:var(--txt-2);white-space:nowrap} .email .e-meta{font-size:11.5px;color:var(--txt-2);margin-top:3px;font-family:var(--mono)} .email .e-body{font-size:13px;color:var(--txt-1);margin-top:8px;line-height:1.6;white-space:pre-line}