:root { --bg: #111827; --panel: #1f2937; --text: #e5e7eb; --muted: #9ca3af; --accent: #22c55e; --danger: #ef4444; --warn: #f59e0b; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, system-ui, sans-serif; background: var(--bg); color: var(--text); } header { padding: 12px 16px; background: var(--panel); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; } header h1 { font-size: 16px; margin: 0; } #status-badge { font-size: 12px; padding: 4px 8px; border-radius: 999px; } .status-online { background: rgba(34,197,94,0.2); color: var(--accent); } .status-offline { background: rgba(239,68,68,0.2); color: var(--danger); } .status-pending { background: rgba(245,158,11,0.2); color: var(--warn); } main { padding: 12px; max-width: 720px; margin: 0 auto 80px; } .login-box, .card { background: var(--panel); border-radius: 12px; padding: 16px; margin-bottom: 12px; } input, select, button { font-size: 16px; padding: 10px; border-radius: 8px; border: 1px solid #374151; background: #0b1220; color: var(--text); width: 100%; margin-top: 6px; } label { display: block; margin-top: 10px; } label:first-child { margin-top: 0; } .password-field { width: 100%; } /* Stop Chrome/Edge autofill from overriding our dark theme with its own pale background — this is what was making the eye-toggle icon invisible: the icon's light-gray color only has contrast against OUR dark input background, not the browser's autofill white. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #0b1220 inset !important; -webkit-text-fill-color: #e5e7eb !important; caret-color: #e5e7eb !important; transition: background-color 9999s ease-in-out 0s; } button { background: var(--accent); color: #062012; font-weight: 600; border: none; cursor: pointer; } button.secondary { background: #374151; color: var(--text); } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #374151; } th { color: var(--muted); font-weight: 500; } .item-row td:last-child { text-align: right; } .qty-input { width: 60px; padding: 6px; } .pending-tag { font-size: 11px; color: var(--warn); } .discrepancy { color: var(--danger); font-weight: 600; } .reconciled { color: var(--accent); } .hidden { display: none; } /* Opening-stock / restock columns are Owner-Manager-only actions (spec §4: Attendant = sales only). Hidden by default; shown by adding .is-owner-manager to after login, based on the logged-in role — set in app.js, never trust-boundary in itself (the server enforces the real restriction; this is just so attendants don't see controls they can't use). */ .owner-only { display: none; } body.is-owner-manager .owner-only { display: table-cell; } /* Same idea as .owner-only above, but for block-level elements (cards), not table cells — used by the Staff card. */ .owner-only-block { display: none; } body.is-owner-manager .owner-only-block { display: block; } /* Password/PIN show-hide toggle */ .password-field { position: relative; display: flex; align-items: center; } .password-field input { padding-right: 40px; } .eye-toggle { position: absolute; right: 4px; width: auto; padding: 6px 8px; margin-top: 0; background: transparent; border: none; font-size: 18px; cursor: pointer; /* Explicit color override — without this it inherits the global button{color:#062012} rule (meant for the green Sign in/Log buttons), which is nearly invisible against this dark background. That's why the eye icon looked "missing" until clicked — some systems render a monochrome emoji glyph using the surrounding text color. */ color: var(--text); opacity: 0.85; } .eye-toggle:hover { opacity: 1; } .staff-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #374151; } .staff-row:last-child { border-bottom: none; } .staff-row .staff-meta { font-size: 13px; color: var(--muted); } .staff-row button { width: auto; padding: 6px 10px; margin-top: 0; font-size: 12px; } .temp-password-box { background: #0b1220; border: 1px solid var(--accent); border-radius: 8px; padding: 10px; margin-top: 8px; font-size: 13px; } .temp-password-box strong { color: var(--accent); font-size: 16px; letter-spacing: 1px; } .opening-locked { font-size: 12px; color: var(--muted); } .stock-input-cell input { width: 60px; padding: 6px; margin-top: 0; } .stock-input-cell button { width: auto; padding: 6px 8px; margin-top: 4px; font-size: 12px; }