@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root{ /* Text */ --ink:#EDEFF5; --ink-soft:#9AA1B5; --ink-faint:#5D637A; /* Surfaces */ --bg:#0B0D13; --surface:#12141C; --surface-alt:#1A1D28; --surface-raised:#1E212D; --border:#232633; --border-strong:#333748; /* Accent */ --accent:#6C7CFF; --accent-ink:#B7C0FF; --accent-soft:#20223F; --accent-solid-hover:#7D8CFF; /* Status */ --danger:#F1554A; --danger-soft:#33191A; --danger-ink:#FF9A92; --warn:#F2A73B; --warn-soft:#332507; --warn-ink:#FBCB78; --success:#2FD180; --success-soft:#0E2B1E; --success-ink:#7CE8AC; /* Sidebar (slightly deeper than the app background for a layered feel) */ --sidebar-bg:#08090E; --sidebar-line:#1B1D26; --sidebar-ink:#8890A4; --sidebar-ink-active:#FFFFFF; /* The logo art is a dark mark; inverting it makes it read as light against the dark sidebar. The light theme below turns this off so the logo shows its natural dark colour against a light sidebar instead. */ --logo-filter:invert(1) brightness(1.6); --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA1B5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --radius:10px; --radius-sm:7px; --radius-md:10px; --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 24px 60px rgba(0,0,0,.55); --hover-tint:rgba(108,124,255,.07); } /* ---------- light theme ---------- Toggled by adding .theme-light to (see the inline script in header.php that applies this before first paint, and the sidebar switch that flips it on click). Every colour in the app is drawn from the custom properties above, so overriding them here is the entire theme — no other rule needs to know which theme is active. */ html.theme-light{ --ink:#1A1D29; --ink-soft:#5B6178; --ink-faint:#8A8FA3; --bg:#F4F5F9; --surface:#FFFFFF; --surface-alt:#F0F1F6; --surface-raised:#FFFFFF; --border:#E3E5EF; --border-strong:#D3D6E3; --accent:#5D64E8; --accent-ink:#4750D8; --accent-soft:#EEF0FE; --accent-solid-hover:#4A51D9; --danger:#E0392E; --danger-soft:#FCEBEA; --danger-ink:#C22A21; --warn:#DB8B0B; --warn-soft:#FEF3E0; --warn-ink:#A8690A; --success:#1FA35C; --success-soft:#E4F8ED; --success-ink:#157A44; --sidebar-bg:#FFFFFF; --sidebar-line:#EBECF3; --sidebar-ink:#6B7085; --sidebar-ink-active:#1A1D29; --logo-filter:none; --select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6178' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --shadow-1:0 1px 2px rgba(20,22,46,.06); --shadow-2:0 20px 50px rgba(20,22,46,.14); --hover-tint:rgba(93,100,232,.06); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:var(--font-ui); background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:var(--accent);text-decoration:none;} a:hover{text-decoration:underline;} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;} .icon{width:18px;height:18px;display:block;flex:0 0 auto;} /* ---------- layout shell ---------- */ .app-shell{display:flex;min-height:100vh;} .sidebar{ width:240px;flex:0 0 240px; background:var(--sidebar-bg); color:var(--sidebar-ink); display:flex;flex-direction:column; position:sticky;top:0;height:100vh; border-right:1px solid var(--sidebar-line); } .sidebar-brand{ display:flex;align-items:center;gap:10px; padding:22px 20px 18px; border-bottom:1px solid var(--sidebar-line); } .sidebar-brand img{height:20px;width:auto;filter:var(--logo-filter);display:block;} .sidebar-brand .tag{ font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint);margin-top:2px; } .sidebar-brand-text{display:flex;flex-direction:column;gap:1px;} .sidebar-nav{flex:1;padding:14px 10px;overflow-y:auto;} .sidebar-nav-label{ font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-faint);padding:14px 12px 6px; } .sidebar-nav a{ display:flex;align-items:center;gap:10px; color:var(--sidebar-ink); padding:9px 12px;margin-bottom:2px; border-radius:var(--radius-sm); font-size:13.5px;font-weight:500; text-decoration:none; transition:background .12s ease, color .12s ease; } .sidebar-nav a:hover{background:var(--surface-alt);color:var(--ink);text-decoration:none;} .sidebar-nav a.active{background:var(--accent-soft);color:var(--sidebar-ink-active);position:relative;} .sidebar-nav a.active::before{ content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%); width:3px;height:18px;border-radius:2px;background:var(--accent); } .sidebar-nav .icon{width:16px;height:16px;flex:0 0 16px;opacity:.9;} .sidebar-foot{ padding:14px 18px 18px;border-top:1px solid var(--sidebar-line); font-size:12.5px; } .sidebar-foot .who{color:var(--sidebar-ink-active);font-weight:600;font-size:13px;} .sidebar-foot .role{color:var(--ink-faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;} .sidebar-foot a{color:var(--sidebar-ink);font-size:12.5px;} .sidebar-foot a:hover{color:var(--sidebar-ink-active);text-decoration:none;} .main{flex:1;min-width:0;display:flex;flex-direction:column;} .topbar{ display:flex;align-items:center;justify-content:space-between; padding:18px 28px;background:var(--bg); border-bottom:1px solid var(--border); position:sticky;top:0;z-index:5; } .topbar h1{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em;color:var(--ink);} .topbar .sub{color:var(--ink-soft);font-size:12.5px;margin-top:3px;} .content{padding:24px 28px 60px;flex:1;} /* ---------- lang switch ---------- */ .lang-switch{display:flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;width:max-content;} .lang-switch a{ padding:5px 12px;font-size:12px;font-weight:600;color:var(--ink-soft); text-decoration:none; } .lang-switch a.active{background:var(--accent);color:#fff;} .lang-switch-sidebar{border-color:var(--sidebar-line);margin-bottom:12px;} .lang-switch-sidebar a{color:var(--sidebar-ink);} .lang-switch-sidebar a.active{background:var(--accent);color:#fff;} /* ---------- theme switch (sidebar) ---------- */ .theme-switch-row{ display:flex;align-items:center;justify-content:space-between;gap:8px; margin-bottom:12px;padding:0 2px; } .theme-switch-label{font-size:11.5px;color:var(--sidebar-ink);font-weight:600;} .theme-toggle{ position:relative;display:inline-flex;align-items:center; width:46px;height:25px;border-radius:999px;cursor:pointer; background:var(--surface-alt);border:1px solid var(--border-strong); transition:background .18s ease,border-color .18s ease; flex:0 0 auto; } .theme-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;} .theme-toggle .thumb{ position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%; background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff; transition:transform .18s cubic-bezier(.4,0,.2,1),background .18s ease; box-shadow:0 1px 3px rgba(0,0,0,.3); } .theme-toggle .thumb svg{width:11px;height:11px;} .theme-toggle.is-light .thumb{transform:translateX(21px);background:var(--warn);} .theme-toggle .track-icon{ position:absolute;top:50%;transform:translateY(-50%);color:var(--ink-faint); pointer-events:none; } .theme-toggle .track-icon svg{width:11px;height:11px;display:block;} .theme-toggle .track-icon.sun{left:5px;} .theme-toggle .track-icon.moon{right:5px;} /* ---------- cards / panels ---------- */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); } .card-head{ display:flex;align-items:center;justify-content:space-between; padding:16px 18px;border-bottom:1px solid var(--border); gap:12px;flex-wrap:wrap; } .card-head h2{font-size:14.5px;font-weight:700;margin:0;color:var(--ink);} .card-body{padding:18px;} .stat-row{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap;} .stat-card{ flex:1;min-width:190px;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:16px 18px; } .stat-icon{ width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center; margin-bottom:12px; } .stat-icon.c-accent{background:var(--accent-soft);color:var(--accent-ink);} .stat-icon.c-success{background:var(--success-soft);color:var(--success-ink);} .stat-icon.c-danger{background:var(--danger-soft);color:var(--danger-ink);} .stat-icon.c-warn{background:var(--warn-soft);color:var(--warn-ink);} .stat-card .label{font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:600;} .stat-card .num{font-family:var(--font-mono);font-size:23px;font-weight:700;margin-top:6px;color:var(--ink);} .stat-card.danger .num{color:var(--danger-ink);} .stat-card.accent .num{color:var(--accent-ink);} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:var(--radius-sm); font-size:13px;font-weight:600;cursor:pointer; border:1px solid var(--border-strong);background:var(--surface-alt);color:var(--ink); transition:all .12s ease;text-decoration:none; line-height:1.2; } .btn:hover{border-color:var(--ink-faint);background:var(--surface-raised);text-decoration:none;} .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;} .btn-primary:hover{background:var(--accent-solid-hover);border-color:var(--accent-solid-hover);} .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;} .btn-danger:hover{filter:brightness(1.1);} .btn-ghost{background:transparent;border-color:transparent;color:var(--ink-soft);} .btn-ghost:hover{background:var(--surface-alt);color:var(--ink);} .btn-sm{padding:5px 10px;font-size:12px;} .btn-sm .icon{width:14px;height:14px;} .btn[disabled]{opacity:.5;cursor:not-allowed;} /* ---------- forms ---------- */ .field{margin-bottom:14px;} .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;} .field .req{color:var(--danger-ink);} input[type=text],input[type=password],input[type=number],input[type=date],input[type=email], select,textarea{ width:100%;padding:9px 11px;border:1px solid var(--border-strong);border-radius:var(--radius-sm); font-family:var(--font-ui);font-size:13.5px;color:var(--ink);background:var(--bg); } input.mono,input[type=number]{font-family:var(--font-mono);} input::placeholder,textarea::placeholder{color:var(--ink-faint);} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent);} textarea{resize:vertical;min-height:64px;} select{ appearance:none; background-image:var(--select-chevron); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px;} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;} .form-grid .full{grid-column:1/-1;} .checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;} .checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);} input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;} /* ---------- tables ---------- */ .table-wrap{overflow-x:auto;} table{width:100%;border-collapse:collapse;font-size:13px;} thead th{ text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--ink-soft);font-weight:700;padding:12px 14px; border-bottom:1px solid var(--border-strong);white-space:nowrap;background:var(--surface-alt); position:sticky;top:0; } thead th.num{text-align:right;} tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--ink);} tbody td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;} tbody tr:hover td{background:var(--hover-tint);} tbody tr:last-child td{border-bottom:none;} .cell-danger{color:var(--danger-ink);font-weight:700;} .cell-warn{color:var(--warn-ink);font-weight:700;} .cell-muted{color:var(--ink-faint);} /* Stock table: calm zebra striping + a left accent flag (not a full loud fill) so shortage/low rows are easy to scan without overwhelming the eye. */ .stock-table tbody tr.stock-row:nth-child(even) td{background:var(--surface-alt);} .stock-table tbody tr.stock-row td:first-child{border-left:3px solid transparent;padding-left:12px;} .stock-table tbody tr.row-danger td{background:var(--danger-soft);} .stock-table tbody tr.row-danger td:first-child{border-left:3px solid var(--danger);} .stock-table tbody tr.row-warn td{background:var(--warn-soft);} .stock-table tbody tr.row-warn td:first-child{border-left:3px solid var(--warn);} .stock-table tbody tr.stock-row:hover td{background:var(--hover-tint);} .stock-table tbody td{padding:12px 14px;} .stock-table thead th{background:var(--surface-raised);} .reserved-link{ background:none;border:none;padding:2px 6px;margin:-2px -6px; font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px; color:var(--accent-ink);font-weight:700;cursor:pointer;border-radius:4px; text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px; } .reserved-link:hover{background:var(--accent-soft);text-decoration-style:solid;} .reserved-link.cell-warn{color:var(--warn-ink);} .reserved-link.cell-danger{color:var(--danger-ink);} .badge{ display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px; font-size:11.5px;font-weight:700;white-space:nowrap; } .badge-danger{background:var(--danger-soft);color:var(--danger-ink);} .badge-warn{background:var(--warn-soft);color:var(--warn-ink);} .badge-success{background:var(--success-soft);color:var(--success-ink);} .badge-info{background:var(--accent-soft);color:var(--accent-ink);} .badge-neutral{background:var(--surface-alt);color:var(--ink-soft);border:1px solid var(--border-strong);} .inline-icon{width:14px;height:14px;display:inline-block;vertical-align:-2px;} .legend{display:flex;gap:18px;align-items:center;font-size:12px;color:var(--ink-soft);flex-wrap:wrap;} .legend .dot{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;} .legend .dot.danger{background:var(--danger);} .legend .dot.warn{background:var(--warn);} .legend .dot.success{background:var(--success);} /* ---------- columns popover (replaces the old bare checkbox row) ---------- */ .col-popover-wrap{position:relative;display:inline-block;} .col-popover-panel{ position:absolute;top:calc(100% + 8px);right:0;z-index:20; background:var(--surface-raised);border:1px solid var(--border-strong); border-radius:var(--radius);box-shadow:var(--shadow-2); width:260px;padding:6px;display:none; } .col-popover-panel.open{display:block;} .col-popover-title{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; color:var(--ink-faint);padding:8px 10px 6px; } .col-popover-list{max-height:320px;overflow-y:auto;} .col-popover-item{ display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--radius-sm); font-size:13px;color:var(--ink);cursor:pointer; } .col-popover-item:hover{background:var(--surface-alt);} .col-popover-foot{ display:flex;justify-content:space-between;gap:8px;padding:8px 8px 4px; border-top:1px solid var(--border);margin-top:4px; } .col-popover-foot button{ background:none;border:none;color:var(--accent-ink);font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px; } .col-popover-foot button:hover{text-decoration:underline;} /* ---------- modal ---------- */ .modal-overlay{ position:fixed;inset:0;background:rgba(4,5,8,.72); display:none;align-items:flex-start;justify-content:center; padding:40px 16px;overflow-y:auto;z-index:50; } .modal-overlay.open{display:flex;} .modal{ background:var(--surface-raised);border-radius:12px;max-width:640px;width:100%; box-shadow:var(--shadow-2);border:1px solid var(--border-strong); animation:modal-in .14s ease; } @keyframes modal-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);} .modal-head h3{margin:0;font-size:15px;font-weight:700;color:var(--ink);} .modal-body{padding:20px;max-height:70vh;overflow-y:auto;} .modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;} .modal-close{background:none;border:none;font-size:20px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:2px;} .modal-close:hover{color:var(--ink);} .flash{ padding:11px 16px;border-radius:var(--radius-sm);margin-bottom:16px; font-size:13px;font-weight:600; } .flash-success{background:var(--success-soft);color:var(--success-ink);} .flash-error{background:var(--danger-soft);color:var(--danger-ink);} .receipt-line{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center;} .receipt-line .amt{font-family:var(--font-mono);text-align:right;padding-right:8px;color:var(--ink-soft);} .line-remove{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:16px;} .line-remove:hover{color:var(--danger-ink);} .empty-state{text-align:center;padding:50px 20px;color:var(--ink-soft);} .empty-state .big{font-size:32px;margin-bottom:8px;} /* login/setup */ .auth-wrap{ min-height:100vh;display:flex;align-items:center;justify-content:center; background:var(--sidebar-bg);padding:20px; background-image:radial-gradient(circle at 20% 20%, rgba(108,124,255,.08), transparent 45%); } .auth-card{ background:var(--surface);border-radius:14px;padding:36px 32px;width:100%;max-width:380px; box-shadow:var(--shadow-2);border:1px solid var(--border); } .auth-card img{height:22px;filter:var(--logo-filter);margin-bottom:22px;} .auth-card h1{font-size:17px;margin:0 0 4px;color:var(--ink);} .auth-card p.sub{color:var(--ink-soft);font-size:13px;margin:0 0 22px;} .auth-card .btn{width:100%;justify-content:center;padding:10px;} /* tabs (dashboard stock/testing/ordered) */ .tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border);} .tab-btn{ background:none;border:none;padding:10px 16px;font-size:13px;font-weight:600;color:var(--ink-soft); cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px; } .tab-btn:hover{color:var(--ink);} .tab-btn.active{color:var(--accent-ink);border-bottom-color:var(--accent);} .order-detail-row{display:none;} .order-detail-row.open-row{display:table-row;} .order-detail-row > td > div{background:var(--surface-alt) !important;} @media (max-width: 860px){ .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .18s ease;z-index:40;} .sidebar.open{transform:translateX(0);} .form-grid,.checkbox-grid{grid-template-columns:1fr;} .content{padding:16px;} .topbar{padding:12px 16px;} .col-popover-panel{right:auto;left:0;} }