@import"https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&family=Roboto+Mono:wght@400;500;700&display=swap";:root{--bg-primary: #0f1216;--bg-secondary: #151920;--bg-card: #1a1f27;--bg-hover: #232a35;--border: #2b3340;--border-light: #222833;--accent: #4f6ef7;--accent-hover: #6b85f9;--accent-soft: rgba(79,110,247,.16);--accent-deep: #3b53c4;--success: #4bdda4;--success-soft: rgba(52,201,142,.14);--warning: #f7bb63;--warning-soft: rgba(240,165,60,.14);--info: #7cbcff;--info-soft: rgba(88,166,255,.14);--text-primary: #eef1f6;--text-secondary: #a8b1c0;--text-muted: #8d97a8;--shadow: 0 4px 24px rgba(0,0,0,.5);--shadow-sm: 0 2px 8px rgba(0,0,0,.4);--sidebar-gradient: linear-gradient(180deg, #161b23 0%, #10141a 55%, #0c0f14 100%);--main-gradient: radial-gradient(1200px 600px at 80% -10%, rgba(79,110,247,.05), transparent 60%), linear-gradient(160deg, #12151b 0%, #0e1116 100%);--gold-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);--radius: 12px;--radius-sm: 8px;--radius-lg: 16px;--font-display: "Syne", sans-serif;--font-body: "DM Sans", sans-serif;--font-mono: "Roboto Mono", "Courier New", monospace;--sidebar-w: 240px}[data-theme=light]{--bg-primary: #f4f6f9;--bg-secondary: #ffffff;--bg-card: #ffffff;--bg-hover: #eef1f6;--border: #e2e7ef;--border-light: #edf0f5;--accent: #3b5bdb;--accent-hover: #2f49b0;--accent-soft: rgba(59,91,219,.12);--accent-deep: #2a3f96;--success: #0c7a51;--success-soft: rgba(25,158,109,.12);--warning: #a35a04;--warning-soft: rgba(217,119,6,.12);--info: #2f6fd0;--info-soft: rgba(47,111,208,.12);--text-primary: #1b2330;--text-secondary: #4e5a6b;--text-muted: #66748a;--shadow: 0 4px 24px rgba(30,40,60,.10);--shadow-sm: 0 2px 8px rgba(30,40,60,.07);--sidebar-gradient: linear-gradient(180deg, #1b2330 0%, #141b26 100%);--main-gradient: radial-gradient(1200px 600px at 80% -10%, rgba(59,91,219,.04), transparent 60%), linear-gradient(160deg, #f6f8fb 0%, #eff2f7 100%);--gold-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);font-size:14px;line-height:1.6;overflow-x:hidden}#root{height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.2}.loading-screen{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg-primary)}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-layout{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-w);min-height:100vh;background:var(--sidebar-gradient);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:100;transition:transform .3s ease}.sidebar:before{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--accent-deep),transparent);opacity:.5}.sidebar-logo{padding:24px 20px 20px;border-bottom:1px solid var(--border)}.sidebar-logo h1{font-size:20px;color:#eef1f6;letter-spacing:-.5px}.sidebar-logo h1 span{background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}.sidebar-logo p{font-size:11px;color:var(--text-muted);margin-top:2px}.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto}.nav-section{margin-bottom:24px}.nav-section-label{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(168,177,192,.85);padding:0 8px;margin-bottom:8px}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:#a8b1c0;text-decoration:none;font-size:13.5px;font-weight:500;transition:all .2s;cursor:pointer;border:none;background:none;width:100%;text-align:left}.nav-item:hover{background:rgba(255,255,255,.06);color:#eef1f6}.nav-item.active{background:var(--accent-soft);color:#ffffff;box-shadow:inset 3px 0 0 var(--accent)}.nav-item .nav-icon{width:18px;height:18px;flex-shrink:0}.nav-badge{margin-left:auto;background:var(--gold-gradient);color:#ffffff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}.sidebar-user{padding:16px;border-top:1px solid var(--border)}.sidebar-user-info{display:flex;align-items:center;gap:10px}.user-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;color:#ffffff;font-size:13px;flex-shrink:0}.user-name{font-size:13px;font-weight:600;line-height:1.2;color:#eef1f6}.user-role{font-size:11.5px;color:#98a2b3}.main-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;overflow:hidden;height:100vh;background:var(--main-gradient)}.topbar{height:60px;background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0}.topbar-title{font-family:var(--font-display);font-size:18px;font-weight:700}.topbar-actions{display:flex;align-items:center;gap:12px}.page-content{flex:1;overflow-y:auto;padding:24px}.page-sticky-bar{position:sticky;top:-24px;z-index:30;margin:-24px -24px 16px;padding:24px 24px 14px;background:var(--main-gradient);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}[data-theme=light] .page-sticky-bar{background:var(--bg-primary)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.card-title{font-family:var(--font-display);font-size:15px;font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px}.stat-card.accent:before{background:var(--accent)}.stat-card.success:before{background:var(--success)}.stat-card.warning:before{background:var(--warning)}.stat-card.info:before{background:var(--info)}.stat-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.stat-value{font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1}.stat-sub{font-size:12px;color:var(--text-secondary);margin-top:6px}.stat-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);opacity:.08;color:var(--text-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13.5px;font-weight:600;border:none;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap;user-select:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-soft)}.btn-secondary{background:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border)}.btn-success{background:var(--success);color:var(--bg-primary)}.btn-success:hover:not(:disabled){opacity:.9}.btn-danger{background:#ef444426;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.btn-danger:hover:not(:disabled){background:#ef444440}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.btn-sm{padding:6px 12px;font-size:12px}.btn-lg{padding:12px 28px;font-size:15px}.btn-icon{padding:8px;border-radius:var(--radius-sm)}.form-group{margin-bottom:16px}.form-label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.form-control{width:100%;padding:10px 14px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:14px;transition:border-color .2s}.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.form-control::placeholder{color:var(--text-muted)}select.form-control{cursor:pointer}textarea.form-control{resize:vertical;min-height:80px}.table-container{overflow-x:auto}.table{width:100%;border-collapse:collapse}.table th{padding:12px 16px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}.table td{padding:12px 16px;border-bottom:1px solid var(--border-light);font-size:13.5px;vertical-align:middle}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:var(--bg-hover)}.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-secondary{background:var(--bg-secondary);color:var(--text-muted);border:1px solid var(--border)}.badge-success{background:var(--success-soft);color:var(--success)}.badge-danger{background:#ef44441f;color:#ef4444} [data-theme=light] .badge-danger{color:#b91c1c} [data-theme=light] .text-danger{color:#b91c1c}.badge-warning{background:var(--warning-soft);color:var(--warning)}.badge-info{background:var(--info-soft);color:var(--info)}.badge-muted{background:#ffffff0f;color:var(--text-secondary)}.badge-accent{background:var(--accent-soft);color:var(--accent)}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(4px);animation:fadeIn .15s ease}.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;animation:slideUp .2s ease}.modal-lg{max-width:760px}.modal-xl{max-width:1000px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;margin-bottom:20px}.modal-title{font-family:var(--font-display);font-size:18px;font-weight:700}.modal-body{padding:0 24px}.modal-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:20px 24px;border-top:1px solid var(--border);margin-top:20px}.modal-footer .btn,.modal-footer button{max-width:100%;white-space:nowrap}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.pos-layout{display:grid;grid-template-columns:1fr 380px;gap:0;height:100%;overflow:hidden}.pos-products{padding:20px;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;min-height:0}.pos-toolbar{flex-shrink:0}.pos-scroll{flex:1 1 auto;overflow-y:auto;min-height:0;padding-right:4px}.pos-cart{display:flex;flex-direction:column;background:var(--bg-secondary);height:100%;min-height:0;overflow:hidden}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px}.product-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;transition:all .2s;text-align:center;position:relative}.product-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.product-card.out-of-stock{opacity:.5;cursor:not-allowed}.product-card .price{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--accent)}.product-card .name{font-size:12px;margin-top:4px;color:var(--text-secondary)}.product-card .stock{font-size:11.5px;color:var(--text-secondary);margin-top:2px}.cart-header{padding:16px 20px;border-bottom:1px solid var(--border);font-family:var(--font-display);font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center}.cart-items{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:12px;min-height:48px;-webkit-overflow-scrolling:touch}.cart-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-sm);margin-bottom:6px}.cart-item-name{flex:1;font-size:13px;font-weight:500}.cart-item-price{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}.qty-ctrl{display:flex;align-items:center;gap:6px}.qty-btn{width:26px;height:26px;border-radius:50%;background:var(--bg-hover);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .15s}.qty-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}.qty-display{font-size:14px;font-weight:700;min-width:24px;text-align:center}.qty-input{width:44px;padding:4px 2px;background:var(--bg-input, var(--bg-card));border:1px solid var(--border);border-radius:6px;color:var(--text-primary);-moz-appearance:textfield}.qty-input:focus{outline:none;border-color:var(--accent)}.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cart-summary{padding:14px 18px;border-top:1px solid var(--border);background:var(--bg-card);flex-shrink:0}.cart-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px;color:var(--text-secondary)}.cart-row.total{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text-primary);margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.cart-row.profit{color:var(--success);font-weight:600}@media print{.no-print{display:none!important}.print-only{display:block!important}body{background:#fff;color:#000;font-size:12px}.receipt{max-width:80mm;margin:0 auto}}.print-only{display:none}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-gap{display:flex;gap:12px;align-items:center}.flex-wrap{display:flex;flex-wrap:wrap;gap:8px}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.text-right{text-align:right}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-danger{color:#ef4444}.text-accent{color:var(--accent)}.text-sm{font-size:12px}.fw-700{font-weight:700}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}.empty-state svg{width:48px;height:48px;margin-bottom:16px;opacity:.4}.empty-state h3{font-size:16px;margin-bottom:8px;color:var(--text-secondary)}.search-wrap{position:relative}.search-wrap input{padding-left:36px}.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}/* Wrapping, because a row that cannot wrap silently drops whatever does not fit off the right-hand edge. Settings has ten tabs, and at 1366px the last two — including System Check — could not be reached at all. */ .tabs{display:flex;flex-wrap:wrap;gap:4px;background:var(--bg-secondary);padding:4px;border-radius:var(--radius-sm)}.tab{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;border:none;background:none;color:var(--text-muted)}.tab.active{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-sm)}@media(max-width:1024px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0);z-index:600}.menu-toggle{display:inline-flex!important}.sidebar-backdrop{display:block!important;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:590}.main-content{margin-left:0}} /* Tablet (769-1024px): keep the two-pane POS but slim the cart so products get real space */ @media(min-width:769px) and (max-width:1024px){.pos-layout{grid-template-columns:minmax(0,1fr) 320px!important}.pos-products,.pos-cart{min-width:0}.table th{padding:10px 10px}.table td{padding:10px 10px}} @media(max-width:768px){.pos-layout{grid-template-columns:1fr;height:auto!important;overflow:visible!important}.pos-cart{height:auto;overflow:visible;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important}.stats-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{grid-template-columns:1fr}}.table-compact td,.table-compact th{padding:5px 10px!important;font-size:12px}.table-compact td div{margin:0!important} /* ═══════════════════════════════════════════════════════════════ PRO LIQUID GLASS THEME (active when theme_mode = 'light') Professional admin look + frosted glass materials. Every highlight uses var(--accent), injected at runtime from the brand settings — change the colour, everything follows. ═══════════════════════════════════════════════════════════════ */ [data-theme=light]{ --bg-primary:#eef1f6; --bg-secondary:#ffffff; --bg-card:#ffffff; --bg-hover:#f2f4f9; --border:#e4e8ef; --border-light:#eef1f6; /* Darkened until each reads at 4.5:1 against its own 12% tint, which is the surface these colours are almost always used on — a badge. */ --success:#0c7a51; --success-soft:rgba(22,163,74,.12); --warning:#a35a04; --warning-soft:rgba(217,119,6,.12); --info:#4b5b70; --info-soft:rgba(100,116,139,.12); --text-primary:#151a26; --text-secondary:#5a6577; --text-muted:#66748a; --shadow:0 10px 32px rgba(23,32,63,.10); --shadow-sm:0 2px 10px rgba(23,32,63,.06); --sidebar-gradient:linear-gradient(180deg,#171d33 0%,#121728 60%,#0e1220 100%); --main-gradient:linear-gradient(160deg,#f4f6fa 0%,#eaeef5 100%); --font-display:'Inter','DM Sans',sans-serif; } [data-theme=light] body{ font-family:'Inter','DM Sans',sans-serif; background: radial-gradient(1000px 620px at 88% -12%,var(--accent-soft),transparent 62%), radial-gradient(760px 540px at -6% 32%,var(--accent-soft),transparent 58%), radial-gradient(900px 640px at 55% 118%,rgba(110,125,160,.12),transparent 62%), linear-gradient(160deg,#f2f4f9 0%,#e8ecf3 100%); background-attachment:fixed; } /* ── GLASS MATERIALS ─────────────────────────────────────────── */ [data-theme=light] .card, [data-theme=light] .stat-card, [data-theme=light] .product-card, [data-theme=light] .modal, [data-theme=light] .tabs{ background:rgba(255,255,255,.66); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border:1px solid rgba(255,255,255,.78); border-radius:16px; box-shadow:0 8px 28px rgba(23,32,63,.08); } [data-theme=light] .stat-card{transition:transform .18s ease, box-shadow .18s ease} [data-theme=light] .stat-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,32,63,.13)} [data-theme=light] .topbar{ background:rgba(255,255,255,.62); backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6); border-bottom:1px solid rgba(255,255,255,.8); box-shadow:0 1px 0 rgba(23,32,63,.04); } [data-theme=light] .sidebar{ background:rgba(17,22,40,.90); backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4); border-right:1px solid rgba(255,255,255,.06); } [data-theme=light] .pos-cart, [data-theme=light] .cart-summary, [data-theme=light] .page-sticky-bar{ background:rgba(255,255,255,.6); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); } [data-theme=light] .cart-item{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.8);border-radius:12px} [data-theme=light] .modal-overlay{background:rgba(18,24,45,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} /* ── SIDEBAR: pro navy + accent highlights ───────────────────── */ [data-theme=light] .sidebar-logo h1{color:#f6f8fc;font-family:'Inter',sans-serif;letter-spacing:-.4px} [data-theme=light] .nav-section-label{color:rgba(160,170,195,.55);letter-spacing:1.4px} [data-theme=light] .nav-item{color:#a7b0c5;border-radius:10px;margin:2px 10px;transition:background .15s,color .15s} [data-theme=light] .nav-item:hover{background:rgba(255,255,255,.07);color:#ffffff} [data-theme=light] .nav-item.active{ background:var(--accent-soft); color:#ffffff; box-shadow:inset 3px 0 0 var(--accent); } [data-theme=light] .nav-badge{color:#fff} [data-theme=light] .user-avatar{background:var(--accent);color:#fff} [data-theme=light] .user-name{color:#f6f8fc} [data-theme=light] .user-role{color:#7f889d} /* ── CONTROLS ────────────────────────────────────────────────── */ [data-theme=light] .btn{border-radius:11px;font-family:'Inter',sans-serif} [data-theme=light] .btn-primary{ color:#fff; background:linear-gradient(150deg,var(--accent-hover),var(--accent)); border:none; box-shadow:0 8px 20px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.32); } [data-theme=light] .btn-primary:hover:not(:disabled){box-shadow:0 10px 26px var(--accent-soft);filter:brightness(1.05)} [data-theme=light] .btn-secondary{ background:rgba(255,255,255,.72); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.85); color:var(--text-primary); } [data-theme=light] .btn-secondary:hover:not(:disabled){background:rgba(255,255,255,.95)} [data-theme=light] .form-control{ background:rgba(255,255,255,.74); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:11px; } [data-theme=light] .form-control:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} [data-theme=light] .tab{border-radius:10px} [data-theme=light] .tab.active{background:#fff;box-shadow:0 2px 8px rgba(23,32,63,.10);color:var(--accent)} [data-theme=light] .badge-muted{background:rgba(23,32,63,.06);color:var(--text-secondary)} [data-theme=light] .table th{color:var(--text-muted);letter-spacing:.8px;font-size:11px} [data-theme=light] .table tr:hover td{background:rgba(255,255,255,.55)} /* ── CHARTS: recolour ONLY the old gold series to the brand ──── */ [data-theme=light] path[stroke="#4f6ef7"],[data-theme=light] line[stroke="#4f6ef7"]{stroke:var(--accent)!important} [data-theme=light] path[fill="#4f6ef7"],[data-theme=light] rect[fill="#4f6ef7"],[data-theme=light] circle[fill="#4f6ef7"]{fill:var(--accent)!important} [data-theme=light] path[stroke="#9c7f54"],[data-theme=light] line[stroke="#9c7f54"]{stroke:var(--accent-deep)!important} [data-theme=light] path[fill="#9c7f54"],[data-theme=light] rect[fill="#9c7f54"]{fill:var(--accent-deep)!important} [data-theme=light] path[fill="#e6cb9b"],[data-theme=light] rect[fill="#e6cb9b"]{fill:var(--accent-hover)!important} /* ═══════════════════════════════════════════════════════════════ LOGIN — one card, every install ─────────────────────────────────────────────────────────────── A dark panel that carries the brand, joined to a light panel that carries the form. It does not read the app theme: a shop running the dark theme inside still gets this front door, because the card IS the design and the theme only ever decided what shade of grey the app chrome was. Its palette lives in the tokens below; the one thing that comes from outside is the brand accent. ═══════════════════════════════════════════════════════════════ */ .t4u-login-page, div:has(> .login-left-panel){ --lg-left-1:#1f2742; --lg-left-2:#111729; --lg-right-1:#f6f8fb; --lg-right-2:#e8ecf3; --lg-field:#ffffff; --lg-ink:#161d2b; /* text on the light panel */ --lg-ink-2:#4a5769; /* muted text on the light panel */ --lg-ink-3:#6d7b8e; /* placeholders */ --lg-line:#d5dce7; /* hairlines on the light panel */ --lg-lite:#eef2f9; /* text on the dark panel */ --lg-lite-2:#9dabc4; /* muted text on the dark panel */ --lg-edge:rgba(255,255,255,.09); min-height:100vh; position:relative; padding:28px; display:grid; grid-auto-flow:column; justify-content:center; align-content:center; background: radial-gradient(950px 600px at 78% -8%, var(--accent-soft), transparent 60%), radial-gradient(720px 520px at 6% 108%, var(--accent-soft), transparent 58%), linear-gradient(155deg,#141a2c 0%,#0f1424 55%,#0b0f1c 100%); } /* Both halves are cells of one grid row, so the row is as tall as the taller of them and each fills it. With flex they sized themselves separately, and the moment one grew — the factory-password warning does exactly that — the card became two rectangles with a visible step between them. */ .login-left-panel{ width:560px; max-width:560px; min-height:660px; padding:48px 44px 26px; border-radius:26px 0 0 26px; position:relative; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(165deg, var(--lg-left-1), var(--lg-left-2)); border:1px solid var(--lg-edge); border-right:none; box-shadow:0 30px 80px rgba(5,8,20,.55); } .login-left-panel + div, .t4u-login-aside{ width:430px; min-height:660px; padding:42px 38px 26px; border-radius:0 26px 26px 0; display:flex; flex-direction:column; background:linear-gradient(180deg, var(--lg-right-1), var(--lg-right-2)); border:1px solid rgba(255,255,255,.6); border-left:none; box-shadow:0 30px 80px rgba(5,8,20,.35); color:var(--lg-ink); } .t4u-login-aside-body{ flex:1; display:flex; flex-direction:column; justify-content:center; width:100%; min-height:0; } /* ── The brand half ───────────────────────────────────────────────────── Held in a column of its own rather than stretched to the panel width. */ .t4u-login-hero{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; max-width:340px; margin:0 auto; text-align:center; z-index:1; } /* White, not accent-tinted: a client's logo is usually dark ink on white and has to stay legible. The brand colour is the frame, not the ground. */ .t4u-login-logo{ width:82px; height:82px; border-radius:22px; flex:none; display:flex; align-items:center; justify-content:center; font-size:38px; background:#fff; border:2px solid var(--accent); box-shadow:0 10px 34px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.04); margin-bottom:22px; } .t4u-login-logo img{width:56px; height:56px; object-fit:contain; border-radius:12px} .t4u-login-title{ font-family:var(--font-display, sans-serif); font-size:38px; font-weight:900; letter-spacing:-1.4px; line-height:1.05; margin:0 0 6px; color:var(--lg-lite); overflow-wrap:anywhere; } .t4u-login-title span{color:var(--accent)} .t4u-login-tagline{font-size:13.5px; color:var(--lg-lite-2); margin:0} .t4u-feat{width:100%; margin-top:28px; display:flex; flex-direction:column; gap:10px} .t4u-feat-row{ display:flex; align-items:center; gap:11px; padding:11px 16px; border-radius:11px; text-align:left; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); } .t4u-feat-tick{color:var(--accent); font-weight:800; font-size:13px; flex:none; line-height:1} .t4u-feat-label{font-size:13px; color:var(--lg-lite); opacity:.92} /* ── Footers, in normal flow ──────────────────────────────────────────── .t4u-support and .t4u-login-credit used to be positioned absolutely against the whole PAGE while the left panel positioned its tip box absolutely against ITSELF. All three landed in the same 30px strip and printed on top of one another — the fault in the bug report. Nothing here is positioned any more. The tip belongs to the brand half; the support number, version and credit to the form half, so they all survive on a phone where the brand half is hidden entirely. */ .t4u-login-foot{z-index:1; padding-top:22px} .t4u-login-tip{ margin:0 auto; max-width:430px; font-size:11.5px; line-height:1.55; color:var(--lg-lite-2); text-align:center; padding:11px 15px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); border-radius:11px; } .t4u-login-aside-foot{flex:none; padding-top:22px; text-align:center} .t4u-support{position:static; font-size:11.5px; color:var(--lg-ink-2); margin-bottom:7px} .t4u-support a{color:var(--accent); text-decoration:none; font-weight:700} .t4u-support a:hover{text-decoration:underline} .t4u-login-version{ position:static; font-size:11px; letter-spacing:.3px; color:var(--lg-ink-3); font-family:ui-monospace, monospace; margin-bottom:5px; } .t4u-login-credit{position:static; font-size:11px; letter-spacing:.3px; color:var(--lg-ink-3)} .t4u-login-credit strong{font-weight:700; color:var(--lg-ink-2)} /* ── The form half ────────────────────────────────────────────────────── These controls are inside a light panel while the app around them may be running the dark theme, so they cannot inherit the app's form colours — they would come out dark-on-light. Everything the form needs is stated. */ .t4u-login-greet{ align-self:stretch; margin-bottom:26px; padding:12px 15px; border-radius:12px; background:var(--accent-soft); border:1px solid rgba(0,0,0,.05); display:flex; align-items:center; gap:11px; } .t4u-login-greet > div > div:first-child{color:var(--lg-ink) !important} .t4u-login-greet > div > div:last-child{color:var(--lg-ink-2) !important} .t4u-login-aside h2{color:var(--lg-ink) !important; letter-spacing:-.4px} .t4u-login-aside p{color:var(--lg-ink-2) !important} .t4u-login-aside .form-label{color:var(--lg-ink-2) !important; font-weight:700} .t4u-login-aside .form-control{ background:var(--lg-field) !important; color:var(--lg-ink) !important; border:1px solid var(--lg-line) !important; border-radius:10px !important; padding-top:12px !important; padding-bottom:12px !important; padding-right:14px !important; font-size:14.5px !important; box-shadow:0 1px 2px rgba(16,24,40,.04); } .t4u-login-aside .form-control::placeholder{color:var(--lg-ink-3) !important; opacity:1} /* A visible ring, not just a tinted border — the form has to be usable from the keyboard, and a 1px colour change is not an indicator. */ .t4u-login-aside .form-control:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; outline:none !important; } .t4u-login-aside .btn-primary{ width:100%; padding:13px !important; font-size:15px !important; border-radius:11px; background:linear-gradient(135deg, var(--accent), var(--accent-deep)) !important; color:#fff !important; box-shadow:0 8px 22px rgba(5,8,20,.22); } .t4u-login-aside .btn-primary:hover:not(:disabled){filter:brightness(1.07); transform:translateY(-1px)} .t4u-login-aside .btn-secondary{ background:#fff !important; color:var(--lg-ink) !important; border:1px solid var(--lg-line) !important; } .t4u-login-aside a, .t4u-login-aside button.btn-ghost{color:var(--accent) !important} .t4u-login-aside .form-group span[style*="absolute"]{color:var(--lg-ink-3) !important} .t4u-login-aside svg{color:inherit} .t4u-login-aside :focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* ── Factory passwords ────────────────────────────────────────────────── Shown only while an account still holds one AND nobody has ever signed in (GET /auth/login-hint). A warning rather than a friendly hint, because it is telling the shop to go and fix something — and it takes itself down once they have, with nothing to switch off. */ .t4u-login-defaults{ margin-top:24px; padding:13px 15px; border-radius:12px; text-align:center; background:#fff7e8; border:1px solid #e6b45c; } .t4u-login-defaults-head{font-size:12.5px; font-weight:800; color:#7a4a06; margin-bottom:7px} .t4u-login-defaults-body{font-size:12.5px; color:var(--lg-ink-2)} .t4u-login-defaults-body code{color:#9a3412; font-weight:700; font-family:var(--font-mono, monospace)} .t4u-login-defaults-note{font-size:11px; color:var(--lg-ink-2); margin-top:8px; line-height:1.55} /* ── Narrow screens ───────────────────────────────────────────────────── The brand half goes and the form half becomes the whole card. One breakpoint: the stylesheet said 980 and the component said 768, so between those two widths the panel was on screen but had already given up its geometry. */ @media (max-width: 980px){ .login-left-panel{display:none !important} .login-left-panel + div, .t4u-login-aside{ width:min(440px,100%) !important; min-height:auto !important; border-radius:26px !important; border-left:1px solid rgba(255,255,255,.6) !important; } } @media (max-width: 430px){ .t4u-login-page, div:has(> .login-left-panel){padding:0 !important} .login-left-panel + div, .t4u-login-aside{ width:100% !important; min-height:100vh !important; border-radius:0 !important; padding:26px 20px 18px !important; border:none !important; box-shadow:none !important; } /* Packed to the top rather than centred: on a handset the card IS the screen, so centring buys dead space above and pushes the footer off. */ .t4u-login-aside-body{justify-content:flex-start; padding-top:6px} .t4u-login-greet{margin-bottom:18px; padding:10px 13px} .t4u-login-aside-foot{padding-top:16px} } @media (prefers-reduced-motion: reduce){ .t4u-login-aside .btn-primary:hover:not(:disabled){transform:none} } @media print{ [data-theme=light] .card,[data-theme=light] .modal,[data-theme=light] .topbar{ backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;box-shadow:none } } /* ═══ GLASS v2 — deeper liquid glass + cleanup ═══ */ /* Floating decorative icons: gone in EVERY theme */ .float-icon{display:none!important} /* Checkmark feature rows on the login (clean, no chip boxes) */ /* Edge-light: a thin bright line along the top of glass surfaces */ [data-theme=light] .card,[data-theme=light] .stat-card,[data-theme=light] .modal{ position:relative; background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.58)); backdrop-filter:blur(26px) saturate(1.8); -webkit-backdrop-filter:blur(26px) saturate(1.8); box-shadow:0 10px 34px rgba(23,32,63,.10), inset 0 1px 0 rgba(255,255,255,.95); } [data-theme=light] .topbar{ background:linear-gradient(180deg,rgba(248,250,253,.97),rgba(244,246,249,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(23,32,63,.05); } [data-theme=light] .pos-cart{ background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.48)); backdrop-filter:blur(26px) saturate(1.7); -webkit-backdrop-filter:blur(26px) saturate(1.7); border-left:1px solid rgba(255,255,255,.85); } /* Selects & dropdown menus become glass too */ [data-theme=light] select.form-control, [data-theme=light] .dropdown-menu{ background:rgba(255,255,255,.8); backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6); border:1px solid rgba(255,255,255,.9); border-radius:12px; } /* Glass scrollbars */ [data-theme=light] ::-webkit-scrollbar{width:10px;height:10px} [data-theme=light] ::-webkit-scrollbar-track{background:transparent} [data-theme=light] ::-webkit-scrollbar-thumb{ background:rgba(120,132,160,.35); border-radius:8px;border:2px solid transparent;background-clip:padding-box; } [data-theme=light] ::-webkit-scrollbar-thumb:hover{background:rgba(120,132,160,.55);background-clip:padding-box;border:2px solid transparent} /* The login card no longer varies by theme, so the light-only overrides that used to re-skin the form half are gone. Everything it needs is declared once in the LOGIN block above. */ /* Soft ambient drift behind everything (respects reduced motion) */ @media (prefers-reduced-motion: no-preference){ [data-theme=light] body{animation:t4uAmbient 26s ease-in-out infinite alternate} @keyframes t4uAmbient{ from{background-position:0% 0%,100% 100%,50% 50%,0 0} to{background-position:6% 4%,94% 92%,46% 55%,0 0} } } @media (prefers-reduced-motion: reduce){ [data-theme=light] .stat-card{transition:none} } /* ═══ FIX: dropdowns must float ABOVE the glass cards ═══ backdrop-filter creates stacking contexts, so the topbar (which contains the user & notification panels) must sit above the page content — and below modals (z-index 1000). */ .topbar{position:relative;z-index:500} [data-theme=light]{--panel-glass:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78))} [data-theme=light] .topbar .notif-btn ~ div, [data-theme=light] .user-menu-trigger ~ div{ border:1px solid rgba(255,255,255,.9)!important; box-shadow:0 24px 60px rgba(23,32,63,.22), inset 0 1px 0 rgba(255,255,255,.95)!important; } /* ═══ THERMAL RECEIPT PRINTING (80mm default, 58mm supported) ═══ */ @media print{ @page{size:80mm auto;margin:0} html,body{width:80mm;background:#fff!important;color:#000!important; -webkit-print-color-adjust:exact;print-color-adjust:exact} body{animation:none!important} .sidebar,.topbar,.no-print,#t4u-net-banner{display:none!important} .main-content{margin:0!important;height:auto!important;overflow:visible!important} .receipt{ width:72mm;max-width:72mm;margin:0 auto;padding:2mm 0 6mm; font-family:'Roboto Mono','Courier New',monospace!important; font-size:11px;line-height:1.45;color:#000!important; } .receipt *{color:#000!important;background:transparent!important; box-shadow:none!important;border-color:#000!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .receipt h1,.receipt h2,.receipt h3{font-family:'Roboto Mono',monospace!important;font-size:14px;text-align:center} .receipt img{max-width:22mm;max-height:22mm;display:block;margin:0 auto 2mm;filter:grayscale(1) contrast(1.2)} .receipt table{width:100%;border-collapse:collapse} .receipt td,.receipt th{padding:1px 0;font-size:10.5px} .receipt hr{border:none;border-top:1px dashed #000;margin:2mm 0} .receipt .total,.receipt .cart-row.total{font-size:13px;font-weight:800} .receipt,.receipt tr,.receipt td{page-break-inside:avoid} } /* 58mm printers: add class "receipt-58" alongside "receipt" */ @media print{ .receipt.receipt-58{width:50mm;max-width:50mm;font-size:10px} } /* ═══ OFFLINE BANNER ═══ */ #t4u-net-banner{ position:fixed;top:12px;left:50%;transform:translateX(-50%) translateY(-72px); z-index:2000;display:flex;align-items:center;gap:10px; padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600; color:#fff;background:rgba(24,28,44,.88); backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5); border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 40px rgba(5,8,20,.45); transition:transform .35s cubic-bezier(.2,.9,.3,1.2); } #t4u-net-banner.show{transform:translateX(-50%) translateY(0)} #t4u-net-banner .dot{width:9px;height:9px;border-radius:50%;background:#f43f5e;box-shadow:0 0 10px #f43f5e} #t4u-net-banner.online .dot{background:#22c55e;box-shadow:0 0 10px #22c55e} .menu-toggle{display:none} .sidebar-backdrop{display:none} /* v2.9.1 mobile safety guards: prevent any residual horizontal pan from long unbroken text (URLs, barcodes) */ @media(max-width:768px){body{overflow-x:hidden}.card,.main-content{overflow-wrap:anywhere}img,svg,canvas,video{max-width:100%}} /* ── v2.9.2 mobile fixes ─────────────────────────────────────── */ /* Offline pill: compact by default, tappable, never wider than the screen */ #t4u-net-banner{cursor:pointer;max-width:calc(100vw - 24px);flex-wrap:nowrap} #t4u-net-banner .dot{flex:0 0 auto} #t4u-net-banner #t4u-net-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #t4u-net-banner.expanded{border-radius:16px;padding:12px 16px;width:min(480px,calc(100vw - 24px))} #t4u-net-banner.expanded #t4u-net-text{white-space:normal;overflow:visible;line-height:1.5;text-align:left} /* Floating go-to-cart button: mobile POS only */ .pos-cart-fab{display:none} @media(max-width:768px){ /* POS "stack head": search/scan/sort toolbar stays pinned under the topbar while you scroll products. position:sticky only works if NO ancestor between the toolbar and the scroll container (.page-content) hides overflow — so on mobile the products column and list flow normally and the page does the scrolling. */ /* Grid blowout fix: 1fr implies min-width:auto, letting wide content push the column past the screen edge. minmax(0,1fr) lets the column actually shrink to fit. */ .pos-layout{grid-template-columns:minmax(0,1fr)!important} .pos-products,.pos-cart{min-width:0;max-width:100%} .pos-products{overflow:visible!important;min-height:0} .pos-scroll{overflow:visible!important;min-width:0} .pos-toolbar>div{min-width:0} .pos-toolbar{position:sticky;top:-1px;z-index:80;background:var(--bg-secondary);padding-top:8px;border-bottom:1px solid var(--border);margin:0 -20px;padding-left:20px;padding-right:20px} /* Tables on phones: compact, one-line cells (no vertical letter-stacking), name column wraps, and anything wider than the screen scrolls smoothly INSIDE its card. */ .card{overflow-x:auto;-webkit-overflow-scrolling:touch} .table th{padding:8px 8px;font-size:10px;letter-spacing:.4px} .table td{padding:9px 8px;font-size:12.5px;white-space:nowrap} .table td:first-child{white-space:normal;min-width:120px;overflow-wrap:anywhere} /* status pills & role badges stay on one line */ .table td span{white-space:nowrap} /* the offline/online pill sits below the topbar instead of covering the page title */ #t4u-net-banner{top:70px} /* Floating cart button with live item count */ .pos-cart-fab{display:flex;align-items:center;justify-content:center;position:fixed;right:14px;bottom:20px;touch-action:none;width:54px;height:54px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:22px;z-index:400;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer} .pos-cart-fab-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#fff;color:var(--accent);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 6px rgba(0,0,0,.3)} /* Topbar: title never wraps mid-word; hide the date to give it room */ .topbar{padding:0 12px} .topbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw;font-size:17px} .topbar-actions>span:first-child{display:none} } /* ── v2.9.4 professional polish ─────────────────────────────── */ @media(max-width:768px){ /* iOS zooms the page when focusing inputs under 16px — keep inputs at 16px so focus never zooms */ input.form-control,select.form-control,textarea.form-control{font-size:16px} /* comfortable thumb targets */ .btn{min-height:40px} .btn-sm{min-height:34px} /* keep the floating cart button clear of iPhone home bar */ .pos-cart-fab{bottom:calc(20px + env(safe-area-inset-bottom,0px))} /* depth cue when the POS toolbar is pinned */ .pos-toolbar{box-shadow:0 6px 16px -10px rgba(0,0,0,.35)} /* smoother momentum scrolling on iOS */ .page-content,.pos-scroll,.cart-items{-webkit-overflow-scrolling:touch} } /* v2.9.8: table action icons must be visibly tappable on phones (ghost buttons were invisible) */ @media(max-width:768px){ .table .btn-ghost.btn-icon{border:1px solid var(--border);background:var(--bg-secondary)} .table .flex-gap{gap:6px;flex-wrap:nowrap} } /* v3.3.3: topbar must not create a containing block, or modals opened from the profile menu (Change Password) get trapped and render off-screen. */ .topbar,[data-theme=light] .topbar,[data-theme=dark] .topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;filter:none!important;perspective:none!important;will-change:auto!important} /* v3.3.3 cart overflow fallback (desktop/two-column only): never clip checkout buttons. Mobile stacked mode keeps its own fixed footer, so scope this above 768px. */ @media(min-width:769px){.pos-cart{overflow-y:auto}.cart-summary{position:sticky;bottom:0}} /* ── v3.8.3 New Purchase items grid ────────────────────────────────────── The Sell price cell carries an input, a margin note and a "keep my margin" action. At the shared control sizes those three pieces made the cell much taller than Qty and Unit cost, and .table td is vertical-align:middle, so the Total drifted to the middle of a tall row while the inputs sat at the top. Everything below is scoped to this one table. */ .purchase-items td,.purchase-items th{vertical-align:top} .purchase-items thead th{white-space:nowrap} .purchase-items .form-control{padding:7px 10px;font-size:13px;line-height:1.35} .purchase-items .num .form-control{text-align:right;font-variant-numeric:tabular-nums} /* number spinners eat width and are no use on a touch till */ .purchase-items input[type=number]{-moz-appearance:textfield;appearance:textfield} .purchase-items input[type=number]::-webkit-outer-spin-button, .purchase-items input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .purchase-items .cell-note{font-size:10px;line-height:1.4;margin-top:4px;text-align:right;white-space:normal} .purchase-items .cell-name{white-space:normal;min-width:150px} /* nudge the total down so it reads level with the inputs beside it */ .purchase-items .cell-total{padding-top:15px!important;text-align:right;font-weight:700; font-variant-numeric:tabular-nums;white-space:nowrap} .purchase-items .cell-x{padding-top:11px!important;text-align:center} .purchase-items .margin-link{display:block;width:100%;margin-top:5px;padding:0;border:0;background:none; min-height:0;font-size:10.5px;font-weight:700;color:var(--accent);cursor:pointer;text-align:right} .purchase-items .margin-link:hover{text-decoration:underline} .purchase-items .form-control:disabled{opacity:.55;cursor:not-allowed} @media(max-width:768px){ /* let it scroll rather than crush the columns; keep 16px so iOS never zooms */ .purchase-items{min-width:640px} .purchase-items .form-control{font-size:16px;padding:8px 10px} } /* ── v3.9.6 sticky table headers ─────────────────────────────────────── For long lists inside a scrolling box: the header row stays put so you can still tell which column you are reading halfway down. The z-index keeps it above the rows; the background stops rows showing through. */ .table-sticky thead th{ position:sticky; top:0; z-index:3; background:var(--bg-card,#fff); box-shadow:inset 0 -1px 0 var(--border); } /* ── v3.9.8 clickable dashboard tiles ───────────────────────────────── Every tile now leads somewhere, so it needs to look like it does. The hint line stays quiet until you hover, to keep the numbers the loudest thing on the screen. */ .stat-card[role="button"]{transition:transform .12s ease, box-shadow .12s ease;} .stat-card[role="button"]:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10);} .stat-card[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .stat-card .stat-go{ margin-top:6px;font-size:10.5px;font-weight:600;color:var(--text-muted); opacity:0;transition:opacity .12s ease;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; } .stat-card[role="button"]:hover .stat-go, .stat-card[role="button"]:focus-visible .stat-go{opacity:1;} @media(max-width:768px){ .stat-card .stat-go{opacity:1;} } /* ── v3.10.0 chart interaction ──────────────────────────────────────── The chart component is a small SVG shim, not Recharts, so there are no recharts-* classes to hook. It draws a per bar and a per slice, each now wrapped in a with a class and a native . The browser shows the title on hover with no JavaScript at all, which is why this works where passing tooltip props did not. */ .t4u-ch-bar rect, .t4u-ch-slice path{ transition:opacity .13s ease, filter .13s ease, transform .13s ease; cursor:pointer; } /* dim the rest so the one under the pointer stands out */ svg:hover .t4u-ch-bar rect, svg:hover .t4u-ch-slice path{opacity:.45;} .t4u-ch-bar:hover rect, .t4u-ch-slice:hover path{ opacity:1; filter:brightness(1.15) drop-shadow(0 2px 6px rgba(0,0,0,.35)); } /* slices grow slightly from the centre of the chart */ .t4u-ch-slice{transform-box:fill-box;transform-origin:center;} .t4u-ch-slice:hover{transform:scale(1.04);} /* one quiet fade-in when a chart first paints */ .t4u-ch-bar,.t4u-ch-slice{animation:t4uChIn .34s ease-out both;} @keyframes t4uChIn{from{opacity:0}to{opacity:1}} /* cards holding a chart lift a little, so they read as more than a panel */ .card:has(svg) .card-title{transition:color .13s ease;} .card:has(svg):hover .card-title{color:var(--accent);} /* tiles fade up in sequence on first paint */ .stats-grid > .stat-card{animation:t4uRise .32s ease-out both;} .stats-grid > .stat-card:nth-child(2){animation-delay:.04s} .stats-grid > .stat-card:nth-child(3){animation-delay:.08s} .stats-grid > .stat-card:nth-child(4){animation-delay:.12s} .stats-grid > .stat-card:nth-child(5){animation-delay:.16s} .stats-grid > .stat-card:nth-child(6){animation-delay:.20s} @keyframes t4uRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ .t4u-ch-bar,.t4u-ch-slice,.stats-grid > .stat-card{animation:none;} .t4u-ch-bar rect,.t4u-ch-slice path,.t4u-ch-slice{transition:none;transform:none;} } /* ── v3.13.0 staff chat ─────────────────────────────────────────────── The panel is fixed-position and dragged by its header. On a phone it takes the whole screen, because a draggable box on a 5-inch display is worse than a full-screen one. */ .t4u-chat-fab{ position:fixed; right:18px; bottom:18px; z-index:900; width:56px; height:56px; border-radius:50%; border:0; cursor:grab; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.28); touch-action:none; transition:transform .12s ease, box-shadow .12s ease; } .t4u-chat-fab:hover{transform:scale(1.06);box-shadow:0 8px 26px rgba(0,0,0,.34);} .t4u-chat-fab:active{cursor:grabbing;} .t4u-chat-badge{ position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--danger); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-card); } .t4u-chat-badge.sm{position:static;border:0;min-width:18px;height:18px;font-size:10px;} .t4u-chat-panel{ position:fixed; z-index:900; width:340px; max-width:calc(100vw - 24px); height:520px; max-height:calc(100vh - 40px); display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.30); overflow:hidden; backdrop-filter:none; opacity:1; } .t4u-chat-panel.folded{height:auto;} .t4u-chat-head{ display:flex; align-items:center; justify-content:space-between; gap:8; padding:10px 12px; background:var(--accent); color:#fff; cursor:grab; user-select:none; touch-action:none; font-size:14px; } .t4u-chat-head:active{cursor:grabbing;} .t4u-chat-sub{font-size:10.5px;opacity:.9;font-weight:400;white-space:nowrap;} .t4u-chat-icon{ background:rgba(255,255,255,.16); border:0; color:inherit; cursor:pointer; width:26px; height:26px; border-radius:6px; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center; } .t4u-chat-icon:hover{background:rgba(255,255,255,.3);} .t4u-chat-body{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--bg-card);} .t4u-chat-err{padding:7px 12px;background:rgba(239,68,68,.10);color:var(--danger);font-size:11.5px;} .t4u-chat-list{flex:1;overflow-y:auto;padding:8px;background:var(--bg-card);} .t4u-chat-search{ width:100%; padding:8px 10px; margin-bottom:8px; font-size:13px; border:1px solid var(--border); border-radius:8px; background:var(--bg-secondary); color:var(--text-primary); } .t4u-chat-person{ width:100%; display:flex; align-items:center; gap:9px; padding:9px 10px; border:0; background:none; cursor:pointer; border-radius:8px; color:var(--text-primary); } .t4u-chat-person:hover{background:var(--bg-secondary);} .t4u-chat-dot{width:9px;height:9px;border-radius:50%;background:var(--text-muted);flex:none;} .t4u-chat-dot.on{background:var(--success);box-shadow:0 0 0 3px rgba(0,212,170,.18);} .t4u-chat-role{font-size:10px;color:var(--text-muted);font-weight:500;margin-left:6px;} .t4u-chat-prev{ font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:210px; } .t4u-chat-empty{padding:22px 14px;text-align:center;color:var(--text-muted);font-size:12.5px;} .t4u-chat-msgs{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:7px;background:var(--bg-primary);} .t4u-chat-row{display:flex;} .t4u-chat-row.mine{justify-content:flex-end;} .t4u-chat-bubble{ max-width:78%; padding:7px 10px; border-radius:12px; font-size:13px; line-height:1.42; background:var(--bg-secondary); color:var(--text-primary); border-bottom-left-radius:4px; } .t4u-chat-row.mine .t4u-chat-bubble{ background:var(--accent); color:#fff; border-bottom-left-radius:12px; border-bottom-right-radius:4px; } .t4u-chat-meta{font-size:9.5px;opacity:.72;margin-top:3px;display:flex;gap:5px;justify-content:flex-end;} .t4u-chat-tick{font-weight:700;} .t4u-chat-tick.read{color:#4fc3f7;} .t4u-chat-img{max-width:100%;border-radius:8px;display:block;} .t4u-chat-file{ display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px; background:rgba(255,255,255,.14);color:inherit;text-decoration:none;max-width:220px; } .t4u-chat-row:not(.mine) .t4u-chat-file{background:rgba(0,0,0,.06);} .t4u-chat-bubble.typing{display:flex;gap:4px;padding:10px 12px;} .t4u-chat-tdot{ width:6px;height:6px;border-radius:50%;background:var(--text-muted); animation:t4uTyping 1.2s infinite; } .t4u-chat-tdot:nth-child(2){animation-delay:.18s} .t4u-chat-tdot:nth-child(3){animation-delay:.36s} @keyframes t4uTyping{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .t4u-chat-input{ display:flex; align-items:flex-end; gap:6px; padding:8px; border-top:1px solid var(--border); background:var(--bg-card); } .t4u-chat-input .t4u-chat-icon{background:var(--bg-secondary);color:var(--text-primary);flex:none;} .t4u-chat-ta{ flex:1; resize:none; max-height:90px; padding:8px 10px; font-size:13px; font-family:inherit; border:1px solid var(--border); border-radius:9px; background:var(--bg-secondary); color:var(--text-primary); } .t4u-chat-send{ flex:none; width:34px; height:34px; border:0; border-radius:9px; cursor:pointer; background:var(--accent); color:#fff; font-size:14px; } .t4u-chat-send:disabled{opacity:.45;cursor:not-allowed;} /* On a phone the panel takes the screen — a draggable box on a small display is harder to use, not easier. */ @media(max-width:600px){ .t4u-chat-panel{ left:0!important; top:0!important; right:0; bottom:0; width:100vw; max-width:100vw; height:100vh; max-height:100vh; border-radius:0; } .t4u-chat-panel.folded{height:auto;bottom:auto;} .t4u-chat-ta{font-size:16px;} /* stops iOS zooming on focus */ .t4u-chat-prev{max-width:60vw;} } @media (prefers-reduced-motion: reduce){ .t4u-chat-fab{transition:none;} .t4u-chat-tdot{animation:none;opacity:.6;} } /* Chat is inherently live, so it is deliberately NOT cached: showing stale messages, or an unread badge that cannot clear, would be worse than saying plainly that there is no connection. */ .t4u-chat-offline{ padding:7px 12px; background:rgba(245,158,11,.14); color:var(--text-primary); font-size:11.5px; border-bottom:1px solid var(--warning); } /* Version on the login screen. Deliberately quiet, but always visible — the first question when something behaves oddly is "which build is this server actually running?", and this answers it without signing in. */ /* (the version now sits in the form column footer, in flow) */ /* ── Variable aliases ───────────────────────────────────────────────── Parts of the app were written against --card-bg, --danger, --bg-input and --danger-soft, but the theme defines --bg-card, --error and so on. A mis-typed custom property resolves to nothing rather than erroring, so those panels rendered with NO background at all and whatever was behind them showed through — which is exactly what happened to the chat window. Aliasing them is safer than editing every use site. */ :root{ --card-bg: var(--bg-card); --bg-input: var(--bg-secondary); --danger: #ef4444; --danger-soft: rgba(239,68,68,.12); --success-soft: rgba(0,212,170,.12); --warning-soft: rgba(245,158,11,.14); --info-soft: rgba(59,130,246,.12); } /* Credit line on the login screen. Centred at the foot of the page and kept quiet, so it reads as a signature rather than competing with the sign-in form. The version sits in the corner, separately. */ /* (the credit now sits in the form column footer, in flow) */ /* ── v3.14.0 calls ────────────────────────────────────────────────────── */ .t4u-call-overlay{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.72); backdrop-filter:blur(3px); padding:16px; } .t4u-call-box{ width:100%; max-width:420px; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); display:flex; flex-direction:column; } .t4u-call-who{padding:16px 18px 10px;text-align:center;} .t4u-call-name{font-size:19px;font-weight:800;color:var(--text-primary);} .t4u-call-state{font-size:12.5px;color:var(--text-muted);margin-top:3px;} .t4u-call-video{position:relative;background:#000;aspect-ratio:4/3;width:100%;} .t4u-call-video.audio-only{aspect-ratio:auto;height:150px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);} .t4u-call-remote{width:100%;height:100%;object-fit:cover;display:block;background:#000;} .t4u-call-video.audio-only .t4u-call-remote{display:none;} .t4u-call-local{ position:absolute;right:10px;bottom:10px;width:88px;height:66px;object-fit:cover; border-radius:8px;border:2px solid rgba(255,255,255,.8);background:#000; } .t4u-call-avatar{font-size:52px;opacity:.85;} .t4u-call-err{padding:9px 14px;background:rgba(239,68,68,.12);color:var(--danger);font-size:12px;} .t4u-call-btns{display:flex;gap:14px;justify-content:center;padding:16px;} .t4u-call-btn{ width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;font-size:19px; background:var(--bg-secondary); color:var(--text-primary); display:flex;align-items:center;justify-content:center; transition:transform .12s ease, background .12s ease; } .t4u-call-btn:hover{transform:scale(1.07);} .t4u-call-btn.off{background:var(--text-muted);color:#fff;} .t4u-call-btn.go{background:var(--success);color:#fff;} .t4u-call-btn.end{background:var(--danger);color:#fff;} /* When calls are not possible the reason is shown here rather than in an alert, so it can be read and acted on. */ .t4u-call-toast{ position:fixed; z-index:1200; left:50%; transform:translateX(-50%); bottom:22px; max-width:440px; width:calc(100% - 32px); display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:10px; font-size:12.5px; line-height:1.5; background:var(--bg-card); color:var(--text-primary); border:1px solid var(--warning); box-shadow:0 10px 30px rgba(0,0,0,.3); } .t4u-call-x{background:none;border:0;color:inherit;cursor:pointer;font-size:14px;opacity:.6;} /* Call buttons in the chat header */ .t4u-chat-head .t4u-chat-icon.callbtn{background:rgba(255,255,255,.22);} @media(max-width:600px){ .t4u-call-box{max-width:100%;height:100%;border-radius:0;justify-content:center;} .t4u-call-video{aspect-ratio:3/4;} } @media (prefers-reduced-motion: reduce){ .t4u-call-btn{transition:none;} } .t4u-chat-crash{ position:fixed; right:20px; bottom:20px; z-index:900; max-width:280px; padding:12px 14px; border-radius:10px; font-size:13px; background:var(--bg-card); color:var(--text-primary); border:1px solid var(--danger); box-shadow:0 8px 24px rgba(0,0,0,.28); } /* Support contact. On the login screen it sits just above the credit line, because someone who cannot get in is exactly who needs it. */ /* (the support line now sits in the form column footer, in flow) */ .t4u-support-box{ margin-top:22px; padding:14px 16px; border-radius:10px; background:var(--bg-secondary); border:1px solid var(--border); } /* Connected calls shrink to this bar. The overlay is only for a call that is still ringing and needs an answer — blocking a till while somebody talks would stop the shop selling. */ .t4u-call-mini{ position:fixed; z-index:1200; right:20px; bottom:88px; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:30px; font-size:13px; background:var(--bg-card); color:var(--text-primary); border:1px solid var(--success); box-shadow:0 8px 26px rgba(0,0,0,.28); max-width:min(320px, calc(100vw - 40px)); } .t4u-call-live{ width:9px; height:9px; border-radius:50%; background:var(--success); flex:none; animation:t4uLive 1.6s ease-in-out infinite; } @keyframes t4uLive{0%,100%{opacity:1}50%{opacity:.25}} .t4u-call-mini-btn{ width:30px; height:30px; border-radius:50%; border:0; cursor:pointer; flex:none; background:var(--bg-secondary); color:var(--text-primary); font-size:13px; display:flex; align-items:center; justify-content:center; } .t4u-call-mini-btn.off{background:var(--text-muted);color:#fff;} .t4u-call-mini-btn.end{background:var(--danger);color:#fff;} .t4u-call-min{ position:absolute; top:10px; right:12px; z-index:2; width:30px; height:30px; border-radius:8px; border:0; cursor:pointer; background:var(--bg-secondary); color:var(--text-primary); font-size:17px; line-height:1; } @media(max-width:600px){ .t4u-call-mini{right:12px; left:12px; bottom:80px; max-width:none;} } @media (prefers-reduced-motion: reduce){ .t4u-call-live{animation:none;} } /* ── v3.16.0 mobile chat placement ──────────────────────────────────── The POS page already has a floating cart button at bottom-right on a phone, and the chat button was landing on top of it at a higher z-index — so on the POS page the cart was unreachable, and the chat looked like it was in the wrong place. On phones the chat button moves to the LEFT, clear of the cart, and gets a saved position of its own rather than inheriting a drag position set on a desktop screen. */ @media(max-width:768px){ .t4u-chat-fab{ left:auto !important; right:14px !important; top:auto !important; bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important; width:50px; height:50px; z-index:401; /* above the page, below the cart panel */ } /* Give the cart button back its place. */ .pos-cart-fab{z-index:402;} /* The mini call bar sits above both, clear of either button. */ .t4u-call-mini{bottom:84px !important;} } /* On a small screen the chat is easier to use full-screen than as a floating box, so the panel already takes the whole viewport. Make sure nothing is trapped behind the phone's own bars. */ @media(max-width:600px){ .t4u-chat-panel{ height:100dvh; max-height:100dvh; padding-bottom:env(safe-area-inset-bottom, 0px); } .t4u-chat-head{padding:12px 12px;} .t4u-chat-icon{width:32px;height:32px;font-size:15px;} /* thumb-sized */ .t4u-chat-input{padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px));} .t4u-chat-send{width:40px;height:40px;} .t4u-chat-person{padding:12px 10px;} } /* Calls on a phone: full height, big buttons, and the controls kept above the home indicator so they are not half off the screen. */ @media(max-width:600px){ .t4u-call-box{ height:100dvh; max-height:100dvh; border-radius:0; padding-bottom:env(safe-area-inset-bottom, 0px); } .t4u-call-video{flex:1;aspect-ratio:auto;min-height:0;} .t4u-call-btns{padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));gap:20px;} .t4u-call-btn{width:62px;height:62px;font-size:23px;} /* easy to hit while moving */ .t4u-call-local{width:76px;height:100px;} .t4u-call-min{width:36px;height:36px;font-size:20px;} } /* ── v3.16.0 report + section tabs ──────────────────────────────────── Tabs were plain primary/secondary buttons, so an inactive tab looked like an action button and nothing responded to the pointer. These read as a tab strip: a quiet rail, a clear active tab, and a hover state so it is obvious they can be clicked. */ .t4u-tabs{ display:inline-flex; gap:2px; padding:4px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; flex-wrap:wrap; } .t4u-tab{ position:relative; border:0; cursor:pointer; padding:8px 16px; border-radius:7px; font-family:inherit; font-size:13px; font-weight:600; color:var(--text-muted); background:transparent; transition:color .15s ease, background .15s ease, box-shadow .15s ease; white-space:nowrap; } .t4u-tab:hover:not(.active){ color:var(--text-primary); background:var(--bg-hover); } .t4u-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .t4u-tab.active{ color:#fff; background:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.16); } /* a thin underline under the active tab, which reads as a tab rather than just a highlighted button */ .t4u-tab.active::after{ content:""; position:absolute; left:22%; right:22%; bottom:3px; height:2px; border-radius:2px; background:rgba(255,255,255,.75); } .t4u-tab .t4u-tab-count{ margin-left:7px; padding:1px 7px; border-radius:9px; font-size:10.5px; font-weight:800; background:var(--bg-card); color:var(--text-muted); } .t4u-tab.active .t4u-tab-count{ background:rgba(255,255,255,.24); color:#fff; } /* Report cards: make the header feel like something you can open. */ .card > button:first-child{ transition:background .15s ease; } .card > button:first-child:hover{ background:var(--bg-hover) !important; } @media(max-width:600px){ .t4u-tabs{display:flex;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;} .t4u-tab{flex:1 0 auto;padding:9px 13px;font-size:12.5px;} } /* ── v3.19.0 Reports page ───────────────────────────────────────────── Seven collapsible cards in a row read as a stack of identical boxes. Grouping them under quiet headings turns the page into sections you can scan, without changing how any report works. */ .rp-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:2px 0 20px; padding-bottom:14px; border-bottom:1px solid var(--border); } .rp-title{ margin:0; font-family:var(--font-display, inherit); font-size:24px; font-weight:800; letter-spacing:-.4px; color:var(--text-primary); } .rp-sub{margin:4px 0 0; font-size:12.5px; color:var(--text-muted);} .rp-count{ font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); background:var(--bg-secondary); border:1px solid var(--border); border-radius:20px; padding:5px 12px; white-space:nowrap; } .rp-group{display:flex; align-items:baseline; gap:10px; margin:26px 0 10px; flex-wrap:wrap;} .rp-group-t{ font-size:11px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:var(--accent); } .rp-group-s{font-size:11.5px; color:var(--text-muted);} /* a hairline running from the heading to the edge, so groups read apart */ .rp-group::after{content:"";flex:1;height:1px;background:var(--border);min-width:20px;} .rp-page .card{transition:border-color .15s ease, box-shadow .15s ease;} .rp-page .card:hover{border-color:var(--accent); box-shadow:0 4px 16px rgba(0,0,0,.08);} .rp-page .card > button:first-child:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;} @media(max-width:600px){ .rp-title{font-size:20px;} .rp-head{margin-bottom:14px;} .rp-group{margin:20px 0 8px;} } @media (prefers-reduced-motion: reduce){ .rp-page .card{transition:none;} } /* ── v3.19.1 Report cards ───────────────────────────────────────────── The seven cards had their styling written inline, seven times over. Classed once, they stay consistent instead of drifting apart the next time one of them is edited. */ .rp-card{ padding:0; overflow:hidden; border:1px solid var(--border); border-radius:12px; margin-bottom:14px; transition:border-color .15s ease, box-shadow .15s ease; } .rp-card:hover{border-color:var(--accent); box-shadow:0 4px 18px rgba(0,0,0,.09);} /* an open card should look open, not just taller */ .rp-card:has(.rp-toggle[aria-expanded="true"]){ border-color:var(--accent); box-shadow:0 6px 22px rgba(0,0,0,.10); } .rp-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; text-align:left; background:none; border:0; cursor:pointer; color:var(--text-primary); font-family:var(--font-display, inherit); font-weight:700; font-size:14.5px; letter-spacing:-.2px; transition:background .13s ease; } .rp-toggle:hover{background:var(--bg-hover);} .rp-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;} /* a coloured rail on the open card, so the eye finds it when scrolling back */ .rp-toggle[aria-expanded="true"]{ background:var(--bg-secondary); box-shadow:inset 3px 0 0 var(--accent); border-bottom:1px solid var(--border); } /* View / Hide reads as a control rather than a label */ .rp-chev{ flex:none; font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--border); border-radius:20px; padding:4px 11px; transition:color .13s ease, border-color .13s ease, background .13s ease; } .rp-toggle:hover .rp-chev{color:var(--accent); border-color:var(--accent);} .rp-toggle[aria-expanded="true"] .rp-chev{ color:#fff; background:var(--accent); border-color:var(--accent); } .rp-body{padding:16px 18px 20px;} /* The From / To / Run row, aligned on one baseline so the controls line up instead of stepping. */ .rp-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:16px; padding:12px 14px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:9px; } .rp-filters .form-label{ display:block; margin-bottom:4px; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted); } .rp-filters .form-control{padding:7px 10px; font-size:13px;} .rp-filters input[type="date"]{min-width:140px;} .rp-filters .btn{padding:8px 16px;} /* Figures line up when they are tabular */ .rp-body .stat-value, .rp-body td[style*="right"], .rp-body th[style*="right"]{font-variant-numeric:tabular-nums;} /* Totals rows should read as totals */ .rp-body tfoot td{ border-top:2px solid var(--border); background:var(--bg-secondary); font-variant-numeric:tabular-nums; } @media(max-width:600px){ .rp-toggle{padding:13px 14px; font-size:13.5px;} .rp-body{padding:12px 12px 16px;} .rp-filters{padding:10px; gap:8px;} .rp-filters .form-control{font-size:16px;} /* stops iOS zooming on focus */ .rp-filters > div{flex:1 1 44%;} .rp-filters .btn{flex:1 1 100%;} } @media (prefers-reduced-motion: reduce){ .rp-card,.rp-toggle,.rp-chev{transition:none;} } /* ── v3.21.5 · the till on a phone ────────────────────────────────────── The checkout panel was position:fixed to the bottom of the screen with a max-height of 75vh. On a 390x844 handset that is a permanent 400px slab over the products a cashier is trying to tap — and both floating buttons, chat and go-to-cart, sat on top of "Complete Sale" inside it. The single most important button in the product, on the device most of these shops actually use, was unreliable to press. It now sticks to the bottom of the CART rather than the screen: products are never covered, the totals follow you while you are in the cart, and the floating cart button (which already carries a live item count) is how you get down there. Nothing floats over the till while a sale is being rung up. */ @media(max-width:768px){ /* NOT sticky. position:sticky offsets an element while leaving it in flow, so it is free to ride up over its own siblings — which is exactly what it did to the cart header and the customer box on a short cart. A panel that covers the buttons above it is the same fault 3.21.5 set out to fix, one row further up. It sits at the end of the cart instead. */ .cart-summary{ position:static; max-height:none; overflow:visible; border-top:1px solid var(--border); padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); } .pos-cart{padding-bottom:20px} .cart-items{max-height:none} /* The staff chat button is hidden on the till screen only. Everywhere else it stays where it is; here it was competing with Complete Sale. */ /* (the rule below covers every width now) */ /* Clear of the iPhone home bar — and gone entirely once the checkout panel is on screen, because at that point it is only a circle sitting on top of Complete Sale. */ .pos-cart-fab{bottom:calc(20px + env(safe-area-inset-bottom,0px)); transition:opacity .18s ease, transform .18s ease} body.t4u-cart-near .pos-cart-fab{ opacity:0; transform:scale(.75); pointer-events:none; } } /* A floating button should never be the thing covering a page's last line of text, on any page. A little breathing room at the end of every scroller. */ /* Room at the foot of every scroller for the floating button, so it is never the thing covering a page's last row. */ .page-content{padding-bottom:84px} @media(max-width:768px){ .page-content{padding-bottom:88px} } /* The till screen has no room for a floating chat bubble: on a phone it sat on Complete Sale, and on a desktop on Hold. Nothing floats over a sale being rung up, at any width. */ body:has(.pos-layout) .t4u-chat-fab{display:none !important} /* On a phone every form field is full width, so a button in the bottom-right corner will always clip the end of whichever field happens to be there. The only moment that matters is while somebody is using the field — so it steps aside for exactly that long, and comes back when they are done. */ body:has(input:focus, textarea:focus, select:focus) .t4u-chat-fab, body:has(input:focus, textarea:focus, select:focus) .pos-cart-fab{ opacity:0; pointer-events:none; } /* ── v3.21.7 · icons that had been squeezed to nothing ────────────────── Reported from a phone: every table's ACTIONS column showed three empty outlines. The icons were there and visible — 0 pixels wide. A .btn is an inline-flex container, and a flex item shrinks below its own size by default. In a narrow ACTIONS cell the three buttons were squashed to 18px, their 8px padding took 16 of that, and the 14px SVG inside was given the 2px that remained. An SVG with width="14" as an ATTRIBUTE has no say in the matter: the attribute is its intrinsic size, not a floor. An icon is the whole content of an icon button, so it never shrinks. */ .btn svg, .btn-icon svg, .nav-item svg, .t4u-chat-icon svg{flex:0 0 auto} /* And the buttons themselves keep a real target. 18x34 was under half the 44px a finger actually needs; these sit in a row a cashier taps all day. */ .table .btn-icon, .table .btn.btn-sm{flex:0 0 auto; min-width:34px} .table .flex-gap{flex-wrap:nowrap} @media(max-width:768px){ .table .btn-icon, .table .btn.btn-sm{min-width:38px; min-height:38px} /* The column stops being the one that gives way when space runs short. */ .table td:last-child, .table th:last-child{white-space:nowrap; width:1%} } /* Thumb-sized on a phone. 24px is the accessibility floor; a thumb wants ~40, and table action buttons are already 38 here. These five are styled inline in the markup, which is the only reason for !important — it is scoped to one class so it reaches nothing else. Two of them are how a shop chases a debt. */ @media(max-width:768px){ .t4u-tap{min-height:40px!important;min-width:40px!important} } /* ── The till's checkout panel (3.21.9) ─────────────────────────────── On a tablet this panel took 402px of a ~700px column and left the cart a 160px slot that showed one item at a time. Sale date, discount and extra fee are occasional, so they sit behind one line — which states what is applied even while closed, so a discount is never hidden from the cashier. The spacing lives here rather than in the markup so it can tighten on a short screen; inline styles are why it could not before. */ .t4u-adjust{margin:6px 0 8px;border:1px dashed var(--border);border-radius:8px;padding:0 10px} .t4u-adjust>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center; gap:4px 8px;min-height:38px;padding:6px 0;font-size:12.5px;color:var(--text-secondary)} .t4u-adjust>summary::-webkit-details-marker{display:none} .t4u-adjust>summary::before{content:"+";font-weight:800;color:var(--accent);width:14px;text-align:center} .t4u-adjust[open]>summary::before{content:"\2212"} .t4u-adjust[open]{padding-bottom:10px} .t4u-adjust-on{font-weight:700;color:var(--warning)} .t4u-adjust>.cart-row,.t4u-adjust .t4u-fee-row{margin-top:8px} .t4u-pay-row{display:flex;gap:8px;margin-top:10px;align-items:flex-start} .t4u-pay-row>*{flex:1 1 0;min-width:0} .t4u-hold-row{margin-top:10px} .t4u-complete{margin-top:10px} /* Every tablet in landscape is under 900px tall. */ @media (min-width:769px) and (max-height:1000px){ .cart-header{padding:10px 16px} .cart-items{padding:8px} .cart-item{padding:6px 8px;margin-bottom:4px} .cart-summary{padding:10px 14px} .cart-summary .cart-row{margin-bottom:4px} .cart-row.total{margin-top:6px;padding-top:8px;font-size:18px} .t4u-hold-row{margin-top:8px} .t4u-hold-row .btn{padding-top:6px;padding-bottom:6px} .t4u-complete{margin-top:8px} } /* The cart list scrolls on its own without dragging the page with it. */ .cart-items{overscroll-behavior:contain} /* The line that was just added or bumped, so the cashier sees it land. */ @keyframes t4uFlash{0%{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent)}100%{}} .cart-item.t4u-flash{animation:t4uFlash .9s ease-out} @media (prefers-reduced-motion:reduce){.cart-item.t4u-flash{animation:none;outline:2px solid var(--accent)}} /* On the till, a tablet's width belongs to the products and the cart. The menu becomes the same drawer phones and small tablets already use (the menu button opens it). Every other page keeps its sidebar. */ @media (min-width:1025px) and (max-width:1280px){ body:has(.pos-layout) .sidebar{transform:translate(-100%)} body:has(.pos-layout) .sidebar.open{transform:translate(0);z-index:600} body:has(.pos-layout) .main-content{margin-left:0} body:has(.pos-layout) .menu-toggle{display:inline-flex!important} body:has(.pos-layout) .sidebar-backdrop{display:block!important;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:590} } /* Tablet browsers count the space under their own toolbar in 100vh, which hides the bottom of the screen — the bottom of the till. dvh is the space actually visible. Phones already use their own natural-height layout. */ @supports (height:100dvh){ .app-layout,.main-content{height:100dvh} } .main-content>.page-content{min-height:0} /* The till fills the page area edge to edge. This used to be done in the markup with negative margins and a height of "100vh minus a 60px topbar" — which broke the moment anything else (the licence banner) took space in that column, and could not be corrected from here. */ .page-content:has(> .pos-layout){padding:0} @media(max-width:768px){ /* Room under Complete Sale for the floating cart button on a phone. */ .page-content:has(> .pos-layout){padding-bottom:88px} } /* Customer picker and "+ Name & phone" share one row — a row of height given back to the cart. The name/phone form, once opened, takes the full width underneath. */ .t4u-cust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} .t4u-cust>select{flex:1 1 180px;min-width:0} .t4u-cust-extra{flex:0 0 auto} .t4u-cust-extra:has(input){flex:1 1 100%} /* On a phone with a sale in progress, the go-to-cart button follows the cashier to every page — and it sat exactly on top of the staff chat button, so chat could not be reached anywhere. When both are showing, chat stacks above it, and the page leaves room for both. */ @media(max-width:768px){ body:has(.pos-cart-fab) .t4u-chat-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px)) !important} body:has(.pos-cart-fab):not(:has(.pos-layout)) .page-content{padding-bottom:156px} } /* The connection pill on a phone. It is a floating control, so it follows the same rule as the chat and cart buttons: it may sit on a surface, never on text or on a target. As a sentence ("You're offline") it covered the page title at the top and page text at the bottom — wherever it went. So on a phone it is a small status dot in the bottom-left corner, clear of the buttons bottom-right, that opens out to the full message when tapped. The text stays readable to screen readers while folded. It hides the same way it always did: by sliding out of view, so it still goes away once the connection is back. */ @media(max-width:768px){ #t4u-net-banner{top:auto!important;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:14px;right:auto; transform:translateY(160px);width:34px;height:34px;padding:0;gap:0;justify-content:center} #t4u-net-banner.show{transform:none} #t4u-net-banner:not(.expanded) #t4u-net-text{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} #t4u-net-banner.expanded{width:auto;height:auto;max-width:calc(100vw - 28px);padding:12px 16px;gap:10px} } /* 3.22.1 — dashboard date range */ .stat-card.danger:before{background:var(--danger)} .t4u-dash-custom{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} .t4u-dash-custom input[type=date]{width:auto;min-width:140px;padding:6px 10px;font-size:13px;min-height:34px} .t4u-dash-custom span{font-size:13px;color:var(--text-muted)} .t4u-dash-range{margin:-12px 0 16px;font-size:13px;color:var(--text-muted)} .t4u-dash-stale{margin:0 0 16px;padding:10px 14px;border:1px solid var(--warning);border-radius:10px;background:rgba(245,158,11,.08);font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:10px;flex-wrap:wrap} @media (max-width:768px){ .t4u-dash-periods .btn-sm{min-height:40px} .t4u-dash-custom{width:100%} .t4u-dash-custom input[type=date]{flex:1;min-width:0;min-height:40px} } /* 3.22.1 — account form */ .t4u-pw-wrap{position:relative} .t4u-pw-wrap input{padding-right:64px} .t4u-pw-wrap .t4u-pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:30px;min-width:52px;padding:4px 8px;font-size:12px;border:0;background:transparent;color:var(--accent);cursor:pointer;font-weight:600} .t4u-field-note{font-size:12px;margin-top:4px;color:var(--text-muted)} .t4u-field-note.bad{color:var(--danger)} .t4u-field-note.good{color:var(--success)} @media (min-width:1100px){.t4u-dash-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:480px){ .t4u-dash-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%} .t4u-dash-periods .btn-sm{font-size:12px;padding:6px 4px;white-space:normal;line-height:1.15;justify-content:center;text-align:center} .t4u-dash-periods > .t4u-dash-custom,.t4u-dash-periods > select{grid-column:1/-1;width:100%!important} } /* 3.23.0 — scanner, camera, labels */ .t4u-cam-overlay{z-index:1200} .t4u-cam{max-width:480px;width:100%} .t4u-cam-view{position:relative;width:100%;aspect-ratio:4/3;background:#000;border-radius:10px;overflow:hidden} .t4u-cam-view video{width:100%;height:100%;object-fit:cover;display:block} .t4u-cam-frame{position:absolute;left:12%;right:12%;top:30%;bottom:30%;border:3px solid rgba(255,255,255,.9);border-radius:8px;box-shadow:0 0 0 999px rgba(0,0,0,.28);pointer-events:none} .t4u-cam-status{margin-top:10px;font-size:14px;font-weight:600;min-height:20px;text-align:center} .t4u-cam-err{padding:12px 14px;border-radius:8px;background:rgba(239,68,68,.1);border:1px solid #ef4444;font-size:13px;line-height:1.5} .t4u-cam-type{display:flex;gap:8px;margin-top:10px} .t4u-cam-type input{flex:1;min-width:0} .t4u-bc-row{display:flex;gap:6px} .t4u-bc-row input{flex:1;min-width:0} .t4u-bc-row .btn{min-width:44px;min-height:40px} .t4u-scan-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .t4u-scan-opt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--bg-secondary)} .t4u-scan-opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .t4u-scan-opt input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent)} .t4u-scan-opt span{display:flex;flex-direction:column;gap:2px} .t4u-scan-opt small{font-size:12px;color:var(--text-muted)} .t4u-scan-box{padding:14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-secondary)} .t4u-scan-result{margin-top:14px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);font-size:13px;line-height:1.6} .t4u-scan-result.good{border-color:var(--success);background:rgba(16,185,129,.08)} .t4u-scan-result.bad{border-color:#ef4444;background:rgba(239,68,68,.08)} .t4u-label-warn{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:10px 14px;border:1px solid var(--warning);border-radius:10px;background:rgba(245,158,11,.08);font-size:13px} .t4u-label-warn-btns{display:flex;gap:8px;flex-wrap:wrap} .t4u-label-flag{margin-left:6px;font-size:10.5px;white-space:nowrap;vertical-align:middle} @media (max-width:768px){.t4u-scan-opts{grid-template-columns:1fr}.t4u-label-warn .btn{min-height:40px}} /* 3.23.0 — WhatsApp number dialog */ .t4u-wa-overlay{z-index:1300} .t4u-wa{max-width:420px;width:100%} .t4u-wa .modal-footer{flex-wrap:wrap;gap:8px} @media (max-width:480px){.t4u-wa .modal-footer .btn{flex:1 1 100%;min-height:44px}} /* 3.23.0 — automatic backups */ .t4u-bk-panel{padding:16px;border-radius:10px;background:var(--bg-secondary);border:1px solid var(--border);margin-bottom:16px} .t4u-bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px} .t4u-bk-status{margin-top:12px;font-size:13px;line-height:1.7} .t4u-bk-cron{margin-top:12px;font-size:13px} .t4u-bk-cron summary{cursor:pointer;font-weight:600;color:var(--accent);min-height:32px;display:flex;align-items:center} .t4u-bk-cron ol{margin:8px 0 8px 18px;line-height:1.7} .t4u-bk-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .t4u-bk-line code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:11px;padding:8px;border-radius:6px;background:var(--bg-card,rgba(0,0,0,.2));border:1px solid var(--border)} .t4u-bk-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto} .t4u-bk-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg,transparent)} .t4u-bk-acts{display:flex;gap:6px;flex-wrap:wrap} @media (max-width:768px){.t4u-bk-acts .btn,.t4u-bk-line .btn{min-height:40px}} /* the card theme colours every div in a stat card; these must keep their meaning */ .stat-card .t4u-delta.good{color:var(--success)!important} .stat-card .t4u-delta.bad{color:#ef4444!important} .stat-card .t4u-delta.flat,.stat-card .t4u-delta span{color:var(--text-muted)!important} @media (max-width:480px){.stat-card .t4u-delta span{display:none}} /* 3.23.1 — notifications and stock reports */ .t4u-nt-kicker{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:2px;opacity:.9} .t4u-nt-title{font-size:13px;font-weight:700;color:var(--text-primary);line-height:1.3} .t4u-nt-msg{font-size:12.5px;color:var(--text-secondary);line-height:1.45} .t4u-nt-time{font-size:11px;color:var(--text-muted);margin-top:6px} .t4u-sr-chips{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 8px} .t4u-sr-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary)} .t4u-sr-chip.warn{color:#b45309;border-color:rgba(224,169,72,.5);background:rgba(224,169,72,.12)} .t4u-sr-chip.bad{color:#dc2626;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.1)} .t4u-sr-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;overflow:hidden} .t4u-sr-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n q" "m m";gap:0 8px;padding:6px 9px;font-size:12px;border-bottom:1px solid var(--border)} .t4u-sr-row:last-child{border-bottom:0} .t4u-sr-name{grid-area:n;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .t4u-sr-q{grid-area:q;font-weight:700;color:#b45309} .t4u-sr-q.bad{color:#dc2626} .t4u-sr-min{grid-area:m;font-size:11px;color:var(--text-muted)} .t4u-sr-go{margin-top:8px;background:none;border:0;padding:6px 0;min-height:32px;color:var(--accent);font-weight:700;font-size:12px;cursor:pointer} .t4u-sr-settings{max-width:580px;margin-bottom:16px} .t4u-sr-set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)} .t4u-sr-set-row input[type=time]{width:130px;min-height:38px} .t4u-sr-switch{display:flex;gap:10px;align-items:flex-start;cursor:pointer} .t4u-sr-switch input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent)} .t4u-sr-switch span{display:flex;flex-direction:column;gap:2px;font-size:13px} .t4u-sr-switch small{font-size:12px;color:var(--text-muted)} .t4u-sr-where{font-size:12px;color:var(--text-muted);margin-top:10px;line-height:1.5} @media (max-width:480px){.t4u-sr-set-row{flex-wrap:wrap}.t4u-sr-set-row input[type=time]{width:100%}} /* the bell's panel was 360px wide from the bell's right edge: on a phone it ran off the left */ @media (max-width:480px){.t4u-notif-panel{position:fixed!important;left:8px!important;right:8px!important;width:auto!important;top:64px!important;max-height:calc(100dvh - 80px);overflow:auto}} /* 3.23.2 debt reminders */ .t4u-rm-btn{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:4px 10px;border-radius:999px;border:1px solid rgba(37,211,102,.45);background:rgba(37,211,102,.1);color:#128c4a;font-size:11.5px;font-weight:600;cursor:pointer;line-height:1} .t4u-rm-btn:hover{background:rgba(37,211,102,.18)} .t4u-rm-btn:focus-visible{outline:2px solid #25D366;outline-offset:2px} [data-theme=dark] .t4u-rm-btn,.dark .t4u-rm-btn{color:#4ade80} .t4u-rm-when{font-size:11px;color:var(--text-muted);margin-top:2px} .t4u-rm{max-width:560px;width:100%} .t4u-rm .modal-body{max-height:calc(100vh - 190px);overflow:auto} .t4u-rm-who{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:10px 12px;border-radius:10px;background:var(--bg-secondary);margin-bottom:12px;font-size:13px} .t4u-rm-who span{color:var(--text-secondary)} .t4u-rm-who .t4u-rm-last{color:var(--warning);font-weight:600} .t4u-rm-kinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .t4u-rm-kind{border:1px solid var(--border);background:var(--card-bg);color:var(--text-primary);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;min-height:34px} .t4u-rm-kind.active{background:var(--accent);border-color:var(--accent);color:#fff} .t4u-rm-text{font-family:inherit;font-size:13px;line-height:1.5;resize:vertical;min-height:180px;white-space:pre-wrap} .t4u-rm-save{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-top:8px;cursor:pointer} .t4u-rm-save[hidden]{display:none} .t4u-rm .modal-footer{flex-wrap:wrap;gap:8px} .t4u-rm-sp{flex:1} @media (max-width:560px){.t4u-rm-text{min-height:0;height:170px}.t4u-rm .modal-body{max-height:calc(100vh - 250px)}.t4u-rm .modal-footer{padding-top:10px;padding-bottom:10px}.t4u-rm .modal-footer .btn{flex:1 1 calc(50% - 8px)!important;width:auto!important;min-height:44px}.t4u-rm-sp{display:none}.t4u-rm .modal-footer [data-go]{flex-basis:100%!important;order:-1}.t4u-rm .modal-footer [data-pick]{flex-basis:100%!important;order:3;min-height:36px!important;font-size:12.5px}} /* 3.23.2 a link that is really a button (javascript: links are blocked) */ .t4u-linkbtn{background:none;border:0;padding:0 2px;margin:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer;min-height:24px} .t4u-linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} /* 3.24.0 online shop in the POS */ .t4u-sh-navn{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center} .t4u-sh-head{display:flex;flex-direction:column;gap:12px;margin-bottom:14px} .t4u-sh-live{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .t4u-sh-tabs{display:flex;gap:6px;flex-wrap:wrap} .t4u-sh-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .t4u-sh-n{margin-left:6px;background:rgba(0,0,0,.18);border-radius:9px;padding:0 6px;font-size:11px} .t4u-sh-search{display:flex;gap:6px;margin-left:auto;min-width:260px;flex:1;max-width:420px} .t4u-sh-tr{cursor:pointer}.t4u-sh-tr:hover{background:var(--bg-hover)} .t4u-sh-dim{color:var(--text-muted);font-size:12px} .t4u-sh-mini{width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--bg-secondary);display:inline-block;flex-shrink:0} .t4u-sh-modal{max-width:720px;width:100%} .t4u-sh-modal .modal-body{max-height:calc(100vh - 200px);overflow:auto} .t4u-sh-stock{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0} .t4u-sh-stock>div{background:var(--bg-secondary);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column} .t4u-sh-stock span{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px} .t4u-sh-stock strong{font-size:18px} .t4u-sh-stock small{font-size:11px;color:var(--warning)} .t4u-sh-move,.t4u-sh-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:12px;margin:10px 0} .t4u-sh-move-row{display:flex;gap:8px;flex-wrap:wrap}.t4u-sh-move-row .form-control{flex:1;min-width:120px} .t4u-sh-switch{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:10px 0;position:relative} .t4u-sh-switch input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer} .t4u-sh-track{flex:0 0 44px;height:26px;border-radius:13px;background:var(--border);position:relative;transition:background .15s} .t4u-sh-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s} .t4u-sh-switch input:checked+.t4u-sh-track{background:var(--accent)} .t4u-sh-switch input:checked+.t4u-sh-track::after{transform:translateX(18px)} .t4u-sh-switch input:focus-visible+.t4u-sh-track{outline:2px solid var(--accent);outline-offset:2px} .t4u-sh-switch.disabled{opacity:.55;cursor:not-allowed} .t4u-sh-sw-text{display:flex;flex-direction:column}.t4u-sh-sw-text small{color:var(--text-muted);font-size:12px} .t4u-sh-pics{display:flex;gap:8px;flex-wrap:wrap} .t4u-sh-pic{position:relative;width:92px;height:92px;border-radius:10px;overflow:hidden;background:var(--bg-secondary);border:1px solid var(--border)} .t4u-sh-pic.wide{width:220px;height:124px} .t4u-sh-pic img{width:100%;height:100%;object-fit:cover} .t4u-sh-pic-x{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer} .t4u-sh-main{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:1px 6px;border-radius:8px} .t4u-sh-pic-add{display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:600;color:var(--text-secondary);border-style:dashed} .t4u-sh-pic-add input{position:absolute;inset:0;opacity:0;cursor:pointer} .t4u-sh-pic-add.busy{opacity:.6} .t4u-sh-hist{margin-top:12px}.t4u-sh-hist summary{cursor:pointer;font-weight:600;min-height:32px} .t4u-sh-cust{display:grid;grid-template-columns:1fr 1fr;gap:12px} .t4u-sh-k{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px} .t4u-sh-note{margin-top:10px;padding:10px 12px;border-radius:8px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);font-size:13px} .t4u-sh-pay{margin-top:8px;font-size:13px} .t4u-sh-ask{border-color:var(--accent)} .t4u-sh-cancel{margin-top:12px}.t4u-sh-cancel summary{cursor:pointer;color:var(--danger);font-weight:600;min-height:32px} .t4u-sh-ev{list-style:none;padding:0;margin:6px 0 0;font-size:13px}.t4u-sh-ev li{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid var(--border-light)} .t4u-sh-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px} .t4u-sh-open{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:14px;border-radius:12px;margin-bottom:12px} .t4u-sh-open.on{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35)} .t4u-sh-open.off{background:var(--bg-secondary);border:1px solid var(--border)} .t4u-sh-links{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .t4u-sh-sec{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px} .t4u-sh-modes{display:grid;gap:8px;margin-bottom:8px} .t4u-sh-mode{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:10px;cursor:pointer} .t4u-sh-mode.on{border-color:var(--accent);background:var(--accent-soft)} .t4u-sh-mode span{display:flex;flex-direction:column}.t4u-sh-mode small{color:var(--text-muted);font-size:12px} .t4u-sh-inline{display:inline-flex;gap:6px;align-items:center;font-size:13px;min-height:36px} .t4u-sh-zones .form-control{min-width:90px} @media (max-width:640px){.t4u-sh-cust{grid-template-columns:1fr}.t4u-sh-stock{grid-template-columns:1fr 1fr}.t4u-sh-search{margin-left:0;min-width:0;max-width:none}} /* 3.24.0 shop vs online */ .t4u-ch{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;font-size:10.5px;font-weight:700;vertical-align:middle} .t4u-ch-web{background:rgba(44,123,229,.12);color:#2c7be5} .t4u-ch-pos{background:var(--bg-secondary);color:var(--text-muted)} .t4u-dash-ch{width:auto;min-height:32px;padding:4px 10px;font-size:13px} .t4u-chc-row{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-light)} .t4u-chc-row:last-of-type{border-bottom:0} .t4u-chc-name{font-weight:600} .t4u-chc-bar{height:10px;border-radius:5px;background:var(--bg-secondary);overflow:hidden} .t4u-chc-bar span{display:block;height:100%;border-radius:5px} .t4u-chc-bar .pos{background:var(--accent)}.t4u-chc-bar .web{background:#2c7be5} .t4u-chc-fig{text-align:right;display:flex;flex-direction:column}.t4u-chc-fig span{font-size:11.5px;color:var(--text-muted)} .t4u-sh-cashnote{padding:10px 14px;border-radius:10px;background:rgba(44,123,229,.08);border:1px solid rgba(44,123,229,.3);font-size:13px;margin-bottom:14px} @media (max-width:640px){.t4u-chc-row{grid-template-columns:1fr;gap:4px}.t4u-chc-fig{text-align:left}} /* 3.25.0 online shop in the POS */ .t4u-sh-slides{margin:6px 0 10px} .t4u-sh-slide-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px} .t4u-sh-pic.wide{width:240px;height:100px} .t4u-sh-pic.tall{width:80px;height:100px;font-size:11px;text-align:center;padding:4px} .t4u-sh-pic-swap{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;cursor:pointer} .t4u-sh-pic-swap input{position:absolute;inset:0;opacity:0;cursor:pointer} .t4u-sh-upbtn{position:relative;overflow:hidden;margin-top:8px}.t4u-sh-upbtn input{position:absolute;inset:0;opacity:0;cursor:pointer}.t4u-sh-upbtn.busy{opacity:.6} .t4u-sh-link{display:flex;gap:8px;flex-wrap:wrap}.t4u-sh-link .form-control{flex:1;min-width:160px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start} @media (max-width:640px){.grid-3{grid-template-columns:1fr}} .t4u-sh-opts table .form-control{min-width:70px} .t4u-sh-hits{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.18);max-height:260px;overflow:auto} .t4u-sh-hit{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:none;cursor:pointer;color:var(--text-primary);min-height:40px} .t4u-sh-hit:hover,.t4u-sh-hit:focus-visible{background:var(--bg-hover)} .t4u-sh-checks{display:flex;flex-wrap:wrap;gap:4px 14px;margin:-4px 0 10px} .t4u-sh-revs{display:grid;gap:10px} .t4u-sh-rev{padding:14px} .t4u-sh-rev-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .t4u-sh-stars{color:#f59e0b;letter-spacing:1px}.t4u-sh-stars .off{color:var(--border)} .t4u-sh-bulkbar{display:inline-flex;gap:8px;align-items:center;margin-left:auto;padding:4px 6px 4px 12px;border-radius:10px;background:var(--accent-soft,rgba(0,0,0,.05));border:1px solid var(--border)} /* 3.25.0 home page categories */ .t4u-sh-catlist{display:flex;flex-direction:column;gap:6px;margin-top:8px} .t4u-sh-catrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card)} .t4u-sh-catrow.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)} .t4u-sh-catpick{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0;cursor:pointer;min-height:44px} .t4u-sh-catpick input{width:18px;height:18px;flex:none} .t4u-sh-catpick img,.t4u-sh-catph{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:var(--bg-hover)} .t4u-sh-catph{display:grid;place-items:center;font-weight:800;color:var(--text-secondary)} .t4u-sh-catpick strong{display:block;font-size:14px} .t4u-sh-catpick small{display:block;font-size:12px;color:var(--text-secondary)} .t4u-sh-catact{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .t4u-sh-filebtn{position:relative;overflow:hidden;cursor:pointer} .t4u-sh-filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer} .t4u-sh-filebtn:focus-within{outline:2px solid var(--accent);outline-offset:2px} /* 3.26.0 online shop: search engines, colours, category pictures */ .t4u-seo-box{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:12px 0;background:var(--bg-secondary)} .t4u-seo-box>summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center} .t4u-seo-box[open]>summary{margin-bottom:10px} .t4u-seo-prev{background:#fff;color:#202124;border:1px solid #dadce0;border-radius:10px;padding:12px 14px;font-family:arial,sans-serif;max-width:600px;margin:4px 0 12px} .t4u-seo-url{font-size:12px;color:#4d5156;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .t4u-seo-t{font-size:18px;color:#1a0dab;line-height:1.3;margin-bottom:3px} .t4u-seo-d{font-size:13px;color:#4d5156;line-height:1.5} .t4u-seo-ok{color:var(--success)}.t4u-seo-long,.t4u-seo-short{color:var(--warning)} .t4u-colour{margin-bottom:12px} .t4u-colour-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .t4u-colour input[type=color]{width:52px;height:40px;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);cursor:pointer} .t4u-colour code{font-size:13px;color:var(--text-secondary)} .t4u-look{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start} @media (max-width:900px){.t4u-look{grid-template-columns:minmax(0,1fr)}} .t4u-look-prev{border:1px solid var(--border);border-radius:12px;overflow:hidden;position:sticky;top:10px;font-family:system-ui,sans-serif;font-size:14px} .t4u-sh-warn{margin:12px 0;padding:10px 12px;border-radius:10px;border:1px solid var(--warning);color:var(--warning);background:var(--bg-secondary);font-size:13px;display:flex;flex-direction:column;gap:4px} .t4u-ann-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} @media (max-width:700px){.t4u-ann-row{grid-template-columns:minmax(0,1fr)}} .t4u-catweb-top{display:flex;gap:14px;align-items:flex-start} .t4u-catweb-pic{position:relative;flex:0 0 96px;width:96px;height:96px;border-radius:12px;overflow:hidden;background:var(--bg-hover);display:grid;place-items:center;font-size:32px;font-weight:800;color:var(--text-secondary)} .t4u-catweb-pic img{width:100%;height:100%;object-fit:cover} .t4u-catweb-pic small{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:10px;text-align:center;padding:2px} .t4u-catbit{position:relative;width:44px;height:44px;flex:0 0 44px;margin-right:8px;border-radius:8px;border:1px dashed var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:11px;cursor:pointer;overflow:hidden;padding:0;display:grid;place-items:center} .t4u-catbit img{width:100%;height:100%;object-fit:cover} .t4u-catbit.home{border:2px solid var(--accent)} .t4u-catbit i{position:absolute;right:1px;bottom:0;font-style:normal;font-size:11px} .t4u-catbit:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .t4u-sh-pic-mv{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;background:rgba(0,0,0,.45)} .t4u-sh-pic-mv button{width:30px;height:26px;border:0;background:none;color:#fff;font-size:18px;line-height:1;cursor:pointer} .t4u-sh-pic-mv button:disabled{opacity:.3;cursor:default} .t4u-sh-pic-mv button:focus-visible{outline:2px solid #fff;outline-offset:-2px} .t4u-sh-catrow.empty{opacity:.75} .t4u-slidefx{margin-top:6px} /* 3.26.0: a window opened inside a glass card must cover the whole screen. backdrop-filter (the glass) makes a box the frame of every fixed element inside it, so the card around an open window drops its glass meanwhile. Found on Settings › Online shop › Pages › Edit (since 3.24). */ :has(.modal-overlay){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important} /* 3.26.0: online shop windows keep their buttons in view; the middle scrolls */ .t4u-sh-modal{display:flex;flex-direction:column;overflow:hidden} .t4u-sh-modal>.modal-header,.t4u-sh-modal>.modal-footer{flex:0 0 auto} .t4u-sh-modal>.modal-body{flex:1 1 auto;min-height:0;max-height:none;overflow:auto} /* ── Product pictures (3.27.0) ── */ .t4u-pic-field{border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:16px;background:var(--bg-secondary)} .t4u-pic-main{display:flex;gap:14px;align-items:flex-start} .t4u-pic-box{flex:0 0 112px;width:112px;height:112px;border-radius:10px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden} .t4u-pic-box img{width:100%;height:100%;object-fit:contain} .t4u-pic-box.empty{background:var(--bg-hover);font-size:34px;opacity:.7} .t4u-pic-side{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px} .t4u-pic-label{font-weight:700;font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .t4u-pic-btns{display:flex;flex-wrap:wrap;gap:6px} .t4u-pic-btns .btn{min-height:36px} .t4u-pic-btns label.btn{cursor:pointer} .t4u-pic-btns label.btn.disabled{opacity:.55;pointer-events:none} .t4u-pic-credit{word-break:break-word} .t4u-pic-upc{border-left:3px solid var(--warning);padding-left:8px} .t4u-pic-tick{display:flex;gap:8px;align-items:center;font-size:13px;min-height:32px;cursor:pointer} .t4u-pic-tick input{width:18px;height:18px;accent-color:var(--accent)} .t4u-pic-err{background:rgba(239,68,68,.1);border:1px solid #ef4444;border-radius:8px;padding:8px 10px;font-size:12.5px;color:var(--text-primary)} .t4u-pic-ok{background:rgba(34,197,94,.1);border:1px solid var(--success);border-radius:8px;padding:8px 10px;font-size:12.5px;margin:8px 0} .t4u-pic-strip{margin-top:12px} .t4u-pic-strip-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;margin-bottom:6px} .t4u-pic-cands{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch} .t4u-pic-cand{position:relative;flex:0 0 96px;width:96px;padding:0;border:2px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;color:#1b1f27} .t4u-pic-cand img{width:100%;height:78px;object-fit:contain;background:#fff;display:block} .t4u-pic-cand:hover,.t4u-pic-cand:focus-visible{border-color:var(--accent);outline:none} .t4u-pic-cand.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .t4u-pic-cand.broken img{visibility:hidden} .t4u-pic-cand[disabled]{opacity:.6;cursor:default} .t4u-pic-cand-src{font-size:10.5px;line-height:1.2;padding:3px 4px;background:#f1f3f6;color:#394150;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .t4u-pic-cand-src.s-upc{background:#fff4e0;color:#8a5300} .t4u-pic-cand-src.s-library{background:#e8f0ff;color:#1f4fd1} .t4u-pic-cand-src.s-off{background:#e7f6ee;color:#127a47} .t4u-pic-on{position:absolute;top:4px;right:4px;background:var(--accent);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800} .t4u-pic-share{margin-top:8px} .t4u-pic-thumb{border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--border);flex:0 0 auto} .t4u-pic-thumb.t4u-pic-card{width:100%;height:90px;border:0;border-radius:8px} .t4u-pic-namecell{display:flex;gap:10px;align-items:center} .t4u-pic-cam{max-width:560px} .t4u-pic-view{position:relative;width:100%;aspect-ratio:1/1;max-height:60vh;background:#000;border-radius:10px;overflow:hidden;margin:0 auto} .t4u-pic-view video{width:100%;height:100%;object-fit:cover;display:block} .t4u-pic-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px} .t4u-pm{max-width:1100px} .t4u-pm-bar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .t4u-pm-bar input{flex:1 1 220px;min-width:0} .t4u-pm-prog{margin:8px 0} .t4u-pm-prog-t{font-size:12.5px;margin-bottom:4px} .t4u-pm-prog-b{height:8px;border-radius:99px;background:var(--bg-hover);overflow:hidden} .t4u-pm-prog-b span{display:block;height:100%;background:var(--accent);transition:width .2s} .t4u-pm-list{display:flex;flex-direction:column;gap:8px;margin-top:8px} .t4u-pm-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card)} .t4u-pm-row.ok{border-color:var(--success)} .t4u-pm-name{display:flex;flex-direction:column;gap:3px;min-width:0} .t4u-pm-name strong{font-size:13px;overflow-wrap:anywhere} .t4u-pm-name small{font-size:11.5px;color:var(--text-muted);overflow-wrap:anywhere} .t4u-pm-name .badge{align-self:flex-start} .t4u-pm-cands{display:flex;gap:8px;overflow-x:auto;align-items:center;padding-bottom:2px} .t4u-pm-none{font-size:12.5px;color:var(--text-muted)} .t4u-pm-skip{flex:0 0 auto} .t4u-pm-pages{display:flex;gap:10px;align-items:center;justify-content:center;margin:12px 0;font-size:12.5px} .t4u-pics-set{display:flex;flex-direction:column;gap:16px;max-width:760px} .t4u-pics-set .card h3{font-family:var(--font-display);font-size:16px;margin-bottom:8px} .t4u-pics-set .card{display:flex;flex-direction:column;gap:10px} .t4u-pic-urlrow{display:flex;gap:8px;flex-wrap:wrap} .t4u-pic-urlrow input{flex:1 1 260px;min-width:0} .t4u-pic-conn{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .t4u-pic-send{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .t4u-pic-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px} .t4u-pic-stats>div{border:1px solid var(--border);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px} .t4u-pic-stats span{font-size:11.5px;color:var(--text-muted)} .t4u-pic-stats strong{font-size:13px} @media (max-width:560px){ .t4u-pic-main{flex-direction:column} .t4u-pic-box{width:100%;flex-basis:auto;height:180px} .t4u-pic-btns .btn{flex:1 1 calc(50% - 6px)} .t4u-pm-row{grid-template-columns:minmax(0,1fr)} } /* ── 3.28.0 Online shop: statistics, carts, sign-ups, social media ── */ .t4u-st-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px} @media (min-width:1700px){.t4u-st-tiles:not(.three){grid-template-columns:repeat(6,minmax(0,1fr))}} @media (max-width:760px){.t4u-st-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.t4u-st-tiles.three{grid-template-columns:1fr}} .t4u-st-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;min-width:0} .t4u-st-tl{font-size:12.5px;font-weight:600;color:var(--text-muted)} .t4u-st-tv{font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1.2;margin:4px 0 2px;overflow-wrap:anywhere} .t4u-st-tc{font-size:12.5px;font-weight:700}.t4u-st-tc.up{color:var(--success)}.t4u-st-tc.down{color:var(--danger,#dc2626)}.t4u-st-tc.flat{color:var(--text-muted)} .t4u-st-tc .t4u-sh-dim{font-weight:400}.t4u-st-th{font-size:12px;margin-top:2px} .t4u-st-card{margin:0 0 14px;min-width:0}.t4u-st-card h3{font-family:var(--font-display);font-size:16px;margin:0 0 2px}.t4u-st-card>p{margin:0 0 10px;font-size:13px} .t4u-st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:14px;align-items:start}.t4u-st-grid .t4u-st-card{margin:0} .t4u-st-bars{list-style:none;margin:0;padding:0;display:grid;gap:10px} .t4u-st-bar-top{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}.t4u-st-bar-top strong{white-space:nowrap} .t4u-st-bar{height:8px;border-radius:99px;background:var(--bg-hover);overflow:hidden;margin-top:4px} .t4u-st-bar span{display:block;height:100%;border-radius:99px;background:var(--accent)} .t4u-st-bar.funnel{height:14px;border-radius:4px}.t4u-st-bar.funnel span{border-radius:4px} .t4u-st-none{padding:14px 0} .t4u-st-table td,.t4u-st-table th{padding:8px 10px;font-size:13.5px}.t4u-st-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .t4u-st-path{font-size:11.5px;overflow-wrap:anywhere} .t4u-st-chart-read{min-height:22px;font-size:13.5px;margin-bottom:8px} .t4u-st-plot{display:flex;gap:8px;height:190px} .t4u-st-y{display:flex;flex-direction:column;justify-content:space-between;font-size:11.5px;color:var(--text-muted);text-align:right;min-width:22px;font-variant-numeric:tabular-nums} .t4u-st-cols{flex:1;display:flex;align-items:stretch;gap:4px;border-bottom:1px solid var(--border);background:linear-gradient(var(--border),var(--border)) 0 0/100% 1px no-repeat,linear-gradient(var(--border),var(--border)) 0 50%/100% 1px no-repeat;min-width:0} .t4u-st-cols.thin{gap:1px} .t4u-st-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;background:none;border:0;padding:0;cursor:pointer;position:relative;border-radius:4px 4px 0 0} .t4u-st-col:hover,.t4u-st-col.on{background:var(--bg-hover)}.t4u-st-col:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .t4u-st-colbar{display:block;width:100%;max-width:38px;background:var(--accent);border-radius:4px 4px 0 0;opacity:.85}.t4u-st-col.on .t4u-st-colbar{opacity:1} .t4u-st-dot{position:absolute;top:2px;width:7px;height:7px;border-radius:50%;background:var(--success)} .t4u-st-x{display:flex;gap:4px;margin:4px 0 0 30px;font-size:11px;color:var(--text-muted)}.t4u-st-x span{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:visible} .t4u-st-legend{display:flex;gap:16px;margin-top:10px;font-size:12.5px;color:var(--text-muted)}.t4u-st-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--accent);margin-right:4px}.t4u-st-legend .t4u-st-k2{border-radius:50%;background:var(--success)} .t4u-st-how{margin:4px 0 10px;font-size:13.5px}.t4u-st-how summary{cursor:pointer;font-weight:600;padding:8px 0}.t4u-st-how ul{margin:4px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--text-secondary,var(--text-muted))} .t4u-soc-rows{display:grid;gap:10px} .t4u-soc-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap} .t4u-soc-mark,.t4u-soc-badge{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;overflow:hidden} .t4u-soc-mark img,.t4u-soc-badge img{width:100%;height:100%;object-fit:cover} .t4u-soc-main{flex:1 1 240px;min-width:0}.t4u-soc-main .form-label{margin-bottom:4px} .t4u-soc-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .t4u-soc-col input{width:40px;height:40px;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);cursor:pointer} .t4u-soc-prev{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:#111827;border-radius:10px;padding:14px;margin:0 0 8px;min-height:68px} .t4u-soc-prev .t4u-sh-dim{color:#cbd5e1} .t4u-soc-badge.plain{border:1.5px solid #d1d5db;color:#d1d5db} .t4u-sl-more{margin-top:4px}.t4u-sl-more input[type=range]{width:100%;accent-color:var(--accent)} @media (max-width:640px){.t4u-st-tv{font-size:22px}.t4u-st-plot{height:150px}.t4u-st-x{font-size:10px}} .t4u-sh-settings .btn-icon{min-width:28px} /* ── 3.29.0 Settings › Updates ── */ .t4u-up{display:grid;gap:14px}.t4u-up .card{margin:0} .t4u-up-h{font-family:var(--font-display);font-size:16px;margin:0 0 10px} .t4u-up-now{display:flex;gap:28px;flex-wrap:wrap;margin:0 0 12px}.t4u-up-v{font-family:var(--font-display);font-size:22px;font-weight:700} .t4u-up-new{border:1px solid var(--success);background:var(--success-soft);border-radius:12px;padding:14px 16px;margin:0 0 12px} .t4u-up-new .btn{margin-top:10px} .t4u-up-notes{margin:8px 0 2px;padding-left:20px;display:grid;gap:4px;font-size:13.5px} .t4u-up-ok{border:1px solid var(--success);background:var(--success-soft);border-radius:10px;padding:10px 14px;margin:0 0 12px} .t4u-up-bad{border:1px solid var(--danger,#dc2626);background:rgba(220,38,38,.08);border-radius:10px;padding:10px 14px;margin:0 0 12px;overflow-wrap:anywhere} .t4u-up-wait{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin:0 0 12px;font-weight:600} .t4u-up-spin{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:t4uUpSpin .8s linear infinite} @keyframes t4uUpSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.t4u-up-spin{animation:none}} .t4u-up-row{display:flex;gap:8px;flex-wrap:wrap}.t4u-up-row .form-control{flex:1 1 260px;min-width:0} .t4u-up-needs{margin:0;padding-left:20px;display:grid;gap:6px} .t4u-up-bar{height:8px;border-radius:99px;background:var(--bg-hover);overflow:hidden;margin-top:8px;max-width:320px}.t4u-up-bar span{display:block;height:100%;background:var(--accent);transition:width .2s} .t4u-up-ask-body,.t4u-upd-new-body{padding:4px 24px 8px;max-height:62vh;overflow:auto} .t4u-upd-new-t{font-weight:600;margin:0 0 8px} .t4u-up-before{margin:6px 0 12px;padding-left:22px;display:grid;gap:9px;font-size:14px} .t4u-up-auto{font-size:13px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:0 0 12px} .t4u-up-tick{display:flex;gap:10px;align-items:flex-start;font-weight:600;cursor:pointer;padding:6px 0}.t4u-up-tick input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--accent)} .t4u-up-what{font-size:13px;margin-top:4px}.t4u-up-what summary{cursor:pointer;color:var(--text-muted)} .t4u-up-ask .modal-close{min-width:36px;min-height:36px;border:0;background:none;color:inherit;font-size:16px;cursor:pointer;border-radius:8px}.t4u-up-ask .modal-close:hover{background:var(--bg-hover)} .t4u-up-ask .modal-header{display:flex;justify-content:space-between;align-items:center;gap:10px} /* ═══ 3.30.0 ═══ */ /* Orders › Edit: add an item */ .t4u-isr{position:relative} .t4u-isr-list{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px;max-height:280px;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.18)} .t4u-isr-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;min-height:44px;cursor:pointer;border-bottom:1px solid var(--border-light,var(--border))} .t4u-isr-opt:last-child{border-bottom:0} .t4u-isr-opt.on{background:var(--bg-hover);box-shadow:inset 3px 0 0 var(--accent)} .t4u-isr-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0;font-size:13px} .t4u-isr-main small{flex-basis:100%;color:var(--text-muted);font-size:11.5px} .t4u-isr-unit,.t4u-edit-unit{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);margin-left:6px;vertical-align:1px} .t4u-isr-main .t4u-isr-unit{margin-left:0} .t4u-isr-price{font-weight:700;color:var(--accent);white-space:nowrap;font-size:13px} .t4u-isr-note{padding:12px;font-size:13px;color:var(--text-muted)} .t4u-edit-date{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--bg-secondary);max-width:380px} .t4u-edit-date .form-control{max-width:260px} /* Thank-you */ .t4u-thx-btn{white-space:nowrap} .t4u-thx-wa{background:#25D366;color:#fff;border:0;font-weight:700} .t4u-thx-wa:hover{background:#1ebe5b;color:#fff} .t4u-thx-foot{flex-wrap:wrap;gap:8px} .t4u-thx-bad{color:var(--danger,#dc2626)!important} .t4u-thx-set{max-width:600px;margin-top:16px} .t4u-thx-set h3{font-family:var(--font-display);margin-bottom:8px} .t4u-thx-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px} .t4u-thx-tags .btn{font-family:ui-monospace,Menlo,monospace;font-size:12px;min-height:30px} .t4u-thx-prev{margin-top:10px} .t4u-thx-bubble{margin-top:4px;padding:10px 12px;border-radius:12px 12px 12px 4px;background:#dcf8c6;color:#14240d;font-size:13.5px;line-height:1.45;white-space:pre-wrap;max-width:440px} /* Install on a device */ .t4u-inst-steps{padding-left:22px;margin:4px 0 10px;line-height:1.55} .t4u-inst-steps li{margin-bottom:8px} .t4u-inst-card{max-width:600px;margin-bottom:16px} .t4u-inst-card h3{font-family:var(--font-display);margin-bottom:8px} .t4u-inst-bar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:9000;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:13.5px;font-weight:600} .t4u-inst-bar>span{flex:1 1 160px} /* Online shop: stock caps, filter */ .t4u-sh-move-hint{margin-top:6px} .t4u-sh-move-all{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px} .t4u-sh-wf{max-width:200px} /* Pictures: other words, paste, drop */ .t4u-pic-more{margin-top:10px} .t4u-pic-more .t4u-pic-urlrow{display:flex;gap:6px;flex-wrap:wrap} .t4u-pic-more .t4u-pic-urlrow .form-control{flex:1 1 180px;min-width:0} .t4u-pic-cand-t{font-size:10px;line-height:1.2;padding:2px 4px 4px;color:#394150;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;background:#fff} .t4u-pic-cand-src.s-wiki{background:#eef6ee;color:#25632a} .t4u-pic-field.drag{outline:2px dashed var(--accent);outline-offset:4px;border-radius:10px} .t4u-thx-overlay [hidden],.t4u-inst-overlay [hidden]{display:none!important} /* Orders › Edit on a phone: the item table scrolls sideways inside the window instead of being cut off */ .modal-body:has(.t4u-isr)>table.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} /* ═══ 3.31.0 ═══ */ /* Tax & VAT */ .t4u-tax-set{display:grid;gap:16px;max-width:760px} .t4u-tax-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;align-items:end;margin-top:4px} .t4u-tax-total{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:10px;background:var(--bg-secondary);margin-bottom:16px} .t4u-tax-total span{font-size:12px;color:var(--text-muted)}.t4u-tax-total strong{font-size:18px} .t4u-tax-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0} .t4u-tax-bar>input.form-control{flex:1 1 200px;min-width:0} .t4u-tax-bar>select.form-control{width:auto;flex:0 1 auto} .t4u-tax-cls{width:auto;min-width:140px;padding-top:4px;padding-bottom:4px} .t4u-tax-pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:10px} .t4u-tax-month{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-secondary)} .t4u-tax-month input{width:auto} .t4u-tax-totrow td{border-top:2px solid var(--border);font-weight:600} .t4u-tax-prods h3,.t4u-tax-set h3{margin-bottom:6px} .t4u-ti-overlay .modal{max-width:460px} /* Purchases: VAT invoice, batch and expiry */ .t4u-pur-tax{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px 2px;margin:4px 0 10px} .t4u-pur-tax .t4u-pic-tick{min-height:38px} .t4u-pur-split{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--text-secondary);margin-bottom:10px} .t4u-pur-split strong{color:var(--text-primary)} .t4u-pur-batch{display:flex;gap:4px;margin-top:4px;min-width:200px} .t4u-pur-batch .form-control{padding:3px 6px;font-size:12px;height:28px;min-width:0} .t4u-pur-batch .form-control:first-child{flex:1 1 80px}.t4u-pur-batch .form-control[type=date]{flex:0 1 128px} .t4u-ageing .table td,.t4u-ageing .table th{white-space:nowrap} /* Batches and expiry */ .t4u-exp-btn{position:relative;display:inline-flex;align-items:center;gap:6px} .t4u-exp-count{min-width:18px;height:18px;border-radius:9px;padding:0 5px;font-size:11px;font-weight:700;line-height:18px;text-align:center;background:var(--warning);color:#111} .t4u-exp-count.bad{background:var(--danger);color:#fff} .t4u-exp .t4u-tax-bar .t4u-tabs{margin:0} /* Bank & MoMo statements */ .t4u-stmt{margin-bottom:18px} .t4u-stmt-up{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0} .t4u-stmt-up>input.form-control{flex:1 1 240px;min-width:0} .t4u-stmt-up .btn.disabled{opacity:.6;pointer-events:none} .t4u-stmt-map{border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-top:10px} .t4u-stmt-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0 12px} .t4u-stmt-cols label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--text-muted)} .t4u-stmt-lines .t4u-sh-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px} .t4u-stmt-cands{display:grid;gap:6px} .t4u-stmt-cand{display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card,transparent);color:inherit;font:inherit;cursor:pointer;min-height:44px} .t4u-stmt-cand:hover,.t4u-stmt-cand:focus-visible{border-color:var(--accent);background:var(--accent-soft)} @media (max-width:640px){.t4u-tax-rates{grid-template-columns:1fr 1fr}.t4u-stmt-cols{grid-template-columns:1fr 1fr}} /* Purchases: "keep my margin" is a real tap target */ .purchase-items .margin-link{min-height:26px} /* phones: the VAT table and statement lines fit without sideways scrolling */ @media (max-width:640px){ .t4u-vat-table th,.t4u-vat-table td{padding:8px 6px;font-size:12.5px;white-space:nowrap} .t4u-stmt-lines .table thead{display:none} .t4u-stmt-lines .table tbody tr{display:grid;grid-template-columns:auto auto 1fr;gap:4px 12px;padding:10px 2px;border-bottom:1px solid var(--border)} .t4u-stmt-lines .table-container{overflow-x:visible} .t4u-stmt-lines .table tbody td{min-width:0;white-space:normal;overflow-wrap:anywhere} .t4u-stmt-lines .table tbody td:nth-child(5){grid-column:1/-1} .t4u-stmt-lines .table tbody td{border:0;padding:0;text-align:left!important} .t4u-stmt-lines .table tbody td:nth-child(1){grid-column:1/-1;font-size:12px;color:var(--text-muted)} .t4u-stmt-lines .table tbody td:nth-child(2){grid-column:1/-1;font-weight:600} .t4u-stmt-lines .table tbody td:nth-child(3),.t4u-stmt-lines .table tbody td:nth-child(4){font-weight:700} .t4u-stmt-lines .table tbody td:nth-child(6){grid-column:1/-1} .t4u-stmt-lines .table tbody td[colspan]{grid-column:1/-1} } /* ═══ 3.31.1 ═══ */ /* Phones: the cart list is part of the page, never a scroller of its own. It was overflow:auto with overscroll-behavior:contain and sized by its own content. On a real phone the content came out a fraction of a pixel taller than the box (font scaling, device pixel ratio), which made the list a scroller with almost nothing to scroll: every swipe that started on the cart was caught there and not passed on, so a long cart could not be scrolled up or down at all. With overflow visible there is no scroller to catch anything, at any pixel ratio. */ @media(max-width:768px){ .cart-items{overflow:visible!important;overscroll-behavior:auto!important;flex:0 0 auto;max-height:none} .cart-item,.cart-item>*{min-width:0} .cart-item-name{overflow-wrap:anywhere} .pos-cart,.pos-layout,.pos-products,.pos-scroll{overscroll-behavior:auto!important} } /* "↑ Products" in the cart header: phones only (the products sit above the cart there) */ .t4u-cart-up{display:none} @media(max-width:768px){ .cart-header{gap:6px} .t4u-cart-up{display:inline-flex;align-items:center;margin-left:auto;min-height:32px;font-size:12px;font-weight:600} } /* The "Put the POS on your home screen" offer (3.30) sat at z-index 9000 over everything, so on a phone it covered the Save / Cancel buttons of any window opened while it was showing. It now stays under windows, never shows on the till (Complete Sale lives at the bottom there), and pages leave room for it. */ .t4u-inst-bar{z-index:450} body:has(.modal-overlay) .t4u-inst-bar,body:has(.pos-layout) .t4u-inst-bar{display:none!important} body:has(.t4u-inst-bar) .page-content{padding-bottom:150px} @media(max-width:768px){.t4u-cart-pay{margin-left:0!important}} /* ═══ 3.32.0 ═══ */ /* Branch tills */ .t4u-till-at{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:6px 10px;border:1px solid var(--border);border-radius:10px;font-size:13px;background:var(--bg-card)} .t4u-till-at.on{border-color:var(--accent);background:var(--accent-soft)} .t4u-till-at.staff{border-color:var(--accent);background:var(--accent-soft);color:var(--text-primary)} .t4u-till-at>span{font-weight:600;white-space:nowrap} .t4u-till-at select.form-control{width:auto;flex:1 1 160px;min-width:0;padding-top:4px;padding-bottom:4px} .t4u-view-pick{width:auto;max-width:220px} .t4u-view-pick.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .t4u-ch-br{background:rgba(99,102,241,.12);color:#4338ca} [data-theme=dark] .t4u-ch-br{background:rgba(129,140,248,.18);color:#c7d2fe} .t4u-br-bar{position:relative;height:18px;border-radius:9px;background:var(--bg-secondary);overflow:hidden} .t4u-br-bar span{position:absolute;left:0;top:0;bottom:0;background:var(--accent);opacity:.75;border-radius:9px} .t4u-br-bar em{position:relative;font-style:normal;font-size:11px;font-weight:700;padding-left:8px;line-height:18px} /* accountant pack */ .t4u-bk-btns .t4u-bk-dl{ text-decoration:none; } .t4u-bk-sent{ padding:9px 12px; border-radius:8px; border:1px solid var(--success); background:rgba(0,212,170,.08); font-size:13px; margin-bottom:14px; } .t4u-bk-sent.bad{ border-color:var(--warning); background:rgba(245,158,11,.12); font-weight:600; } .t4u-bk-checks{ list-style:none; margin:0; padding:0; display:grid; gap:6px; } .t4u-bk-checks li{ display:flex; gap:8px; font-size:13px; line-height:1.45; } .t4u-bk-checks li > span{ flex:none; width:18px; text-align:center; font-weight:800; } .t4u-bk-checks li.ok > span{ color:var(--success); } .t4u-bk-checks li.bad{ color:var(--danger); } .t4u-bk-checks li.note{ color:var(--text-secondary); } .t4u-bk-help{ margin-top:12px; font-size:13px; } .t4u-bk-help summary{ cursor:pointer; font-weight:600; min-height:32px; display:flex; align-items:center; } .t4u-bk-help ul{ margin:6px 0 0; padding-left:18px; display:grid; gap:6px; color:var(--text-secondary); } .t4u-bk-journal{ padding:0 12px 12px; display:grid; gap:10px; } .t4u-bk-entry{ border:1px solid var(--border); border-radius:8px; overflow:hidden; } .t4u-bk-eh{ display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 10px; background:var(--bg-secondary); font-size:12.5px; } .t4u-bk-memo{ color:var(--text-secondary); } .t4u-bk-entry .table{ margin:0; } .t4u-bk-entry td{ font-size:12.5px; } .t4u-bk-acc input.form-control{ padding:6px 8px; min-height:34px; } .t4u-bk-save{ position:sticky; bottom:0; padding:10px 0; background:var(--bg-primary); display:flex; justify-content:flex-end; } @media (max-width:600px){ .t4u-bk-btns .btn{ flex:1 1 100%; justify-content:center; } .t4u-bk-entry td:first-child{ display:none; } } /* product import check */ .t4u-imp-modal{ max-width:760px; width:100%; } .t4u-imp-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:12px; } .t4u-imp-upd{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:13px; } .t4u-imp-upd input{ width:20px; height:20px; margin-top:1px; flex:none; } .t4u-imp-ex{ margin-top:10px; font-size:13px; } .t4u-imp-ex summary{ cursor:pointer; min-height:30px; display:flex; align-items:center; font-weight:600; } .t4u-imp-ex ul{ max-height:160px; overflow:auto; margin:4px 0 0; padding-left:18px; } .t4u-imp-list{ list-style:none; max-height:280px; overflow:auto; margin:8px 0 0; padding:0; border:1px solid var(--border); border-radius:8px; } .t4u-imp-list li{ padding:8px 12px; border-bottom:1px solid var(--border); font-size:13px; } .t4u-imp-list li:last-child{ border-bottom:0; } .t4u-imp-who{ display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; } .t4u-imp-why{ margin-top:2px; overflow-wrap:anywhere; } .t4u-imp-why.bad{ color:var(--danger); } .t4u-imp-done{ padding:10px 12px; border-radius:8px; border:1px solid var(--success); background:rgba(0,212,170,.08); font-size:13.5px; } @media (max-width:600px){ .t4u-imp-stats{ grid-template-columns:1fr 1fr 1fr; gap:8px; } .t4u-imp-stats .stat-value{ font-size:18px; } .t4u-imp-stats .stat-label{ font-size:10px; } } .t4u-imp-stats .stat-label{ overflow-wrap:anywhere; white-space:normal; } @media (max-width:600px){ .t4u-imp-stats .stat-card{ padding:10px; } } /* leaderboard, margin watch, the day in one message */ .t4u-lb{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .t4u-lb li{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:8px; } .t4u-lb li.me{ background:rgba(59,130,246,.08); outline:1px solid rgba(59,130,246,.35); } .t4u-lb-rank{ flex:none; width:34px; text-align:center; font-size:20px; font-weight:800; color:var(--text-secondary); } .t4u-lb-main{ flex:1; min-width:0; } .t4u-lb-name{ display:flex; align-items:center; flex-wrap:wrap; } .t4u-lb-bar{ height:6px; border-radius:3px; background:var(--bg-secondary); margin:5px 0 4px; overflow:hidden; } .t4u-lb-bar span{ display:block; height:100%; background:var(--accent); border-radius:3px; } .t4u-lb-sub{ font-size:12px; color:var(--text-muted); } .t4u-lb-amt{ flex:none; font-weight:800; font-variant-numeric:tabular-nums; } .t4u-mg-pct{ display:inline-flex; align-items:center; gap:6px; font-size:13px; } .t4u-mg-pct input{ width:72px; padding:6px 8px; min-height:34px; } .t4u-mg-card.ok{ border-left:3px solid var(--success); } .t4u-day-text{ margin:0 0 10px; padding:10px 12px; border-left:3px solid var(--accent); background:var(--bg-secondary); border-radius:6px; font-size:13.5px; line-height:1.5; white-space:pre-wrap; max-height:4.6em; overflow:hidden; cursor:pointer; } .t4u-day-text.open{ max-height:none; } .t4u-wa{ text-decoration:none; } .t4u-day-send{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; } .t4u-check-row{ display:flex; align-items:center; gap:8px; min-height:36px; font-size:13.5px; cursor:pointer; flex-wrap:wrap; } .t4u-check-row input[type="checkbox"]{ width:18px; height:18px; } .t4u-daily-ch{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:6px; } .t4u-mg-btn{ white-space:nowrap; } @media (max-width:600px){ .t4u-lb-rank{ width:28px; font-size:17px; } .t4u-lb li{ padding:6px 4px; gap:8px; } } /* ═══ 3.33.0 ═══ */ /* send many items to/from a branch */ .t4u-bulk-modal{ max-width:820px; width:100%; } .t4u-bulk-dir{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; } .t4u-bulk-opt{ display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:13px; min-height:40px; } .t4u-bulk-opt.on{ border-color:var(--accent); background:rgba(220,38,38,.06); font-weight:600; } .t4u-bulk-src{ padding:10px 0; } .t4u-bulk-row{ display:flex; flex-direction:column; gap:8px; } .t4u-bulk-num{ width:92px !important; display:inline-block; padding:6px 8px; min-height:36px; } .t4u-bulk-found{ list-style:none; margin:8px 0 0; padding:0; max-height:200px; overflow:auto; border:1px solid var(--border); border-radius:8px; } .t4u-bulk-found li{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--border); font-size:13px; } .t4u-bulk-found li:last-child{ border-bottom:0; } .t4u-bulk-lines{ list-style:none; margin:0; padding:0; max-height:300px; overflow:auto; border:1px solid var(--border); border-radius:8px; } .t4u-bulk-lines li{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--border); } .t4u-bulk-lines li:last-child{ border-bottom:0; } .t4u-bulk-lines li.bad{ background:rgba(239,68,68,.08); } .t4u-bulk-name{ flex:1; min-width:0; font-size:13px; overflow-wrap:anywhere; } .t4u-bulk-sum{ margin-top:10px; padding:10px 12px; border-radius:8px; border:1px solid var(--success); background:rgba(0,212,170,.08); font-size:13px; } .t4u-bulk-sum.bad{ border-color:var(--danger); background:rgba(239,68,68,.08); } .t4u-bulk-modal .t4u-check-row{ margin:6px 0; } .t4u-bulk-modal > .modal-body > .form-control{ margin-top:8px; } @media (max-width:600px){ .t4u-bulk-opt{ flex:1 1 100%; } .t4u-bulk-lines li{ flex-wrap:wrap; } .t4u-bulk-name{ flex:1 1 100%; } } /* product pictures at the till */ .t4u-tp{ display:block; object-fit:cover; background:var(--bg-secondary); flex:none; } .t4u-tp-l{ display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; letter-spacing:.5px; } .t4u-tp-tile{ width:100%; aspect-ratio:4/3; max-height:96px; border-radius:8px; margin:0 0 6px; font-size:22px; } .product-card img.t4u-tp-tile{ object-fit:contain; background:#fff; } .t4u-tp-row{ width:40px; height:40px; border-radius:8px; font-size:14px; } .t4u-tp-cart{ width:40px; height:40px; border-radius:8px; font-size:13px; margin-right:10px; align-self:center; } .t4u-tp-search{ width:32px; height:32px; border-radius:6px; font-size:12px; } .cart-item:has(> .t4u-tp-cart){ align-items:center; } .t4u-tp-toggle,.t4u-disp-btn{ white-space:nowrap; } @media (max-width:600px){ .t4u-tp-tile{ max-height:70px; font-size:18px; } .t4u-tp-cart{ width:34px; height:34px; margin-right:8px; } } /* customer screen pairing */ .t4u-disp-modal{ max-width:720px; width:100%; } .t4u-disp-ways{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; } .t4u-disp-way{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:13.5px; } .t4u-disp-way ol{ margin:6px 0 10px; padding-left:18px; line-height:1.6; } .t4u-disp-way code{ overflow-wrap:anywhere; } .t4u-disp-code{ font-size:38px; font-weight:800; letter-spacing:8px; text-align:center; padding:10px; margin:8px 0 2px; border-radius:10px; background:var(--bg-secondary); font-variant-numeric:tabular-nums; } .t4u-disp-ok{ padding:9px 12px; border-radius:8px; border:1px solid var(--success); background:rgba(0,212,170,.08); font-size:13px; margin-bottom:12px; } .t4u-disp-ok.off{ border-color:var(--warning); background:rgba(245,158,11,.1); } .product-card .t4u-tp-tile{ margin-top:8px; } @media (max-width:600px){ .t4u-tb-txt{ display:none; } .t4u-tp-toggle,.t4u-disp-btn{ min-width:40px; min-height:36px; padding:4px 8px; justify-content:center; } } /* VAT & Tax › File with GRA */ .t4u-vf-rem{ padding:10px 14px; border-radius:8px; border:1px solid var(--warning); background:rgba(245,158,11,.12); font-size:13.5px; margin-bottom:14px; } .t4u-vf-list tr.on td{ background:var(--accent-soft, rgba(220,38,38,.06)); } .t4u-vf-rows{ list-style:none; margin:0; padding:4px 0 6px; } .t4u-vf-rows li{ display:flex; align-items:center; gap:10px; padding:6px 16px; border-top:1px solid var(--border); font-size:13.5px; } .t4u-vf-rows li > span{ flex:1; min-width:0; } .t4u-vf-rows li.strong{ font-size:15px; } .t4u-vf-v{ font-variant-numeric:tabular-nums; min-width:96px; text-align:right; } .t4u-vf-forms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; } .t4u-vf-form{ padding:14px 16px; } @media (max-width:600px){ .t4u-vf-rows li{ padding:6px 10px; gap:6px; font-size:13px; } .t4u-vf-v{ min-width:72px; } } /* GRA E-VAT link */ .t4u-evl-state{ padding:10px 14px; border-radius:8px; border:1px solid var(--border); background:var(--bg-secondary); font-size:13.5px; margin-bottom:14px; } .t4u-evl-state.on{ border-color:var(--success); background:rgba(0,212,170,.08); } .t4u-evl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 14px; } .t4u-evl-test{ margin-top:10px; padding:9px 12px; border-radius:8px; font-size:13px; } .t4u-evl-test.ok{ border:1px solid var(--success); background:rgba(0,212,170,.08); } .t4u-evl-test.bad{ border:1px solid var(--danger); background:rgba(239,68,68,.08); } .t4u-evat-qr{ display:flex; justify-content:center; margin:8px 0; } .t4u-evat-qr svg{ background:#fff; padding:4px; border-radius:4px; } .t4u-bk-help ol{ margin:6px 0 0; padding-left:18px; display:grid; gap:6px; color:var(--text-secondary); }