:root { /* Dark theme (default) */ --bg: #0f1420; --panel: #1a2233; --panel-2: #222d42; --line: #2e3a52; --text: #e8edf6; --muted: #93a0b8; --accent: #d4a23a; --accent-2: #e8b94a; --green: #2ecc71; --red: #e74c3c; --warn: #f39c12; --blue: #3a86ff; --login-bg: radial-gradient(circle at 50% 30%, #1c2740, #0b0f18); --shadow: 0 20px 60px rgba(0,0,0,.5); } /* Light theme — applied when */ :root[data-theme="light"] { --bg: #f4f6fb; --panel: #ffffff; --panel-2: #eef1f7; --line: #d7deea; --text: #1a2233; --muted: #5f6b80; --accent: #c0871f; --accent-2: #a66f12; --green: #1f9d57; --red: #d63a2b; --warn: #c47f0a; --blue: #2f6fe0; --login-bg: radial-gradient(circle at 50% 30%, #e8eef9, #cdd7ea); --shadow: 0 16px 40px rgba(40,60,100,.18); } * { box-sizing: border-box; } html, body { transition: background-color .25s ease, color .25s ease; } body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } .hidden { display: none !important; } .muted { color: var(--muted); } .error { color: var(--red); min-height: 18px; margin-top: 6px; font-size: 14px; } /* Login */ .login-screen { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--login-bg); } .login-card { background: var(--panel); padding: 36px; border-radius: 14px; width: 340px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); } .login-card h1 { margin: 0; font-size: 24px; color: var(--accent); text-align: center; } .login-card p { margin: 0; text-align: center; } .login-card input { padding: 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 16px; } .login-card button { padding: 12px; border: none; border-radius: 8px; background: var(--accent); color: #1a1407; font-weight: 700; font-size: 16px; cursor: pointer; } .hint { font-size: 12px; color: var(--muted); } /* Topbar — inline tabs on wide screens, a ☰ hamburger menu when they don't fit */ .topbar { display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 58px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; } .brand { flex: 0 0 auto; font-weight: 800; font-size: 20px; letter-spacing: 1px; color: var(--accent); white-space: nowrap; } .brand span { color: var(--text); font-weight: 400; } .nav-toggle { display: none; flex: 0 0 auto; width: 42px; height: 38px; align-items: center; justify-content: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 20px; line-height: 1; border-radius: 8px; cursor: pointer; } .nav-toggle:hover { border-color: var(--accent); } .tabs { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; } .tabs button { flex: 0 0 auto; white-space: nowrap; background: transparent; border: none; color: var(--muted); padding: 8px 13px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; } .tabs button:hover { background: var(--panel-2); color: var(--text); } .tabs button.active { background: var(--accent); color: #1a1407; } .topbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } .user-label { color: var(--text); font-size: 14px; white-space: nowrap; } /* When tabs won't fit: hide them, show the ☰ button; tabs become a dropdown menu */ @media (max-width: 1100px) { .nav-toggle { display: inline-flex; } .topbar-right { margin-left: auto; } .tabs { position: absolute; top: 58px; left: 0; right: 0; display: none; flex-direction: column; gap: 2px; padding: 8px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 16px 36px rgba(0,0,0,.35); z-index: 40; } .tabs.open { display: flex; } .tabs button { width: 100%; text-align: left; padding: 13px 16px; font-size: 15px; } } @media (max-width: 820px) { .topbar { gap: 10px; padding: 0 12px; } .user-label, .drawer-status { display: none; } } @media (max-width: 560px) { .brand span { display: none; } .topbar-right { gap: 6px; } } .drawer-status { font-size: 13px; padding: 4px 10px; border-radius: 20px; background: var(--panel-2); } .drawer-status.open { color: var(--green); } .drawer-status.closed { color: var(--red); } .badge { padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; } .badge-warn { background: var(--warn); color: #2a1c00; } .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 7px 12px; border-radius: 8px; cursor: pointer; } .btn-ghost:hover { color: var(--text); } /* Buttons */ .btn-primary { background: var(--accent); color: #1a1407; border: none; padding: 10px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 15px; } .btn-secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); padding: 10px 16px; border-radius: 8px; cursor: pointer; } .btn-danger { background: var(--red); color: #fff; border: none; padding: 7px 12px; border-radius: 8px; cursor: pointer; } .btn-green { background: var(--green); color: #07210f; border: none; padding: 10px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; } /* Layout */ .view { padding: 18px; max-width: 1400px; margin: 0 auto; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 18px; } .panel h2 { margin: 0 0 14px; font-size: 18px; } .row { display: flex; gap: 18px; flex-wrap: wrap; } .col { flex: 1; min-width: 280px; } input, select, textarea { padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 14px; width: 100%; } label { display: block; font-size: 13px; color: var(--muted); margin: 8px 0 4px; } /* Tables */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; } tr.low td { background: rgba(243,156,18,.08); } .num { text-align: right; font-variant-numeric: tabular-nums; } .tag { padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; } .tag-low { background: var(--warn); color: #2a1c00; } .tag-ok { background: rgba(46,204,113,.15); color: var(--green); } /* SELL screen */ .sell-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; } .scan-box input { font-size: 20px; padding: 16px; } .cart-list { max-height: 50vh; overflow-y: auto; margin-top: 6px; } /* Right column holds the search/quick-access card and the checkout card, stacked */ .sell-right-col { display: flex; flex-direction: column; gap: 18px; align-self: start; } .sell-right-col .panel { margin-bottom: 0; } .checkout-panel .pay-strip { margin-top: 14px; } /* Big total hero (modernized, echoes the Access green-on-dark total) */ .total-hero { background: linear-gradient(135deg, #0c1322, #16203a); border: 1px solid var(--line); border-radius: 14px; padding: 16px 22px; margin: 4px 0 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.25); } .total-hero .th-label { font-size: 12px; letter-spacing: 2px; color: var(--muted); font-weight: 700; } .total-hero .th-value { font-size: 44px; font-weight: 800; line-height: 1.1; color: var(--green); font-variant-numeric: tabular-nums; } .total-hero .th-count { font-size: 12px; color: var(--muted); margin-top: 2px; } .total-hero.refund .th-value { color: var(--red); } /* Items grid (cart) */ .cart-row { display: grid; grid-template-columns: 1fr 96px 140px 88px 54px; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); } .cart-head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border-bottom: 1px solid var(--line); } .cart-row .ci-name { line-height: 1.25; } .cart-price-input { width: 96px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--accent-2); font-weight: 700; } .cart-price-input:focus { outline: none; border-color: var(--accent); } .cart-line-total { color: var(--text); } /* Cart quantity steppers + remove — large touch targets */ .cart-row .qty { display: flex; align-items: center; justify-content: center; gap: 10px; } .cart-row .qty button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 26px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .cart-row .qty button:hover { border-color: var(--accent); background: var(--panel); } .cart-row .qty button:active { transform: scale(.94); } .cart-row .qty > span { min-width: 26px; text-align: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .cart-row .rm { background: transparent; border: none; color: var(--red); cursor: pointer; font-size: 30px; line-height: 1; width: 46px; height: 46px; border-radius: 10px; padding: 0; } .cart-row .rm:hover { background: rgba(231,76,60,.12); } .cart-row .rm:active { transform: scale(.94); } /* Cash Out button — big, stays right below the items */ .btn-checkout { flex: 1; font-size: 18px; padding: 14px; font-weight: 800; } /* Inline payment strip (denominations + change, no popup) */ .pay-strip { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .pay-strip-rows { display: flex; gap: 10px; margin-bottom: 10px; } .pay-line { flex: 1; display: flex; justify-content: space-between; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; font-size: 14px; } .pay-line span { color: var(--muted); } .pay-line strong { font-variant-numeric: tabular-nums; } .pay-line.change strong { color: var(--green); font-size: 18px; } .denoms-inline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .denoms-inline button { padding: 14px 6px; font-size: 16px; font-weight: 700; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; } .denoms-inline button:hover { border-color: var(--accent); } .denoms-inline button:active { transform: scale(.96); } .denom-actions { display: flex; gap: 8px; margin-top: 8px; } .denom-actions button { flex: 1; } /* USD calculator (converts to IQD tendered; not a payment currency) */ .usd-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; font-size: 12px; } .usd-denoms button { border-color: rgba(46,204,113,.5); color: var(--green); font-weight: 700; } .usd-denoms button:hover { border-color: var(--green); background: rgba(46,204,113,.10); } /* Quick Access (admin-configured, up to 5) */ .quick-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; } .quick-access { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 9px; } .qa-btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 14px 10px; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 4px; transition: background .12s, border-color .12s, transform .08s; } .qa-btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .qa-btn:hover .qa-name, .qa-btn:hover .qa-price { color: #1a1407; } .qa-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; } .qa-price { font-size: 12px; color: var(--accent-2); font-weight: 600; } /* Quick-product editor slots */ .qe-slot { display: flex; align-items: center; justify-content: space-between; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; } .qe-slot .rm { background: transparent; border: none; color: var(--red); cursor: pointer; font-size: 18px; } /* Quick-access product buttons */ .quick-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; } .quick-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 7px; max-height: 48vh; overflow-y: auto; padding-right: 2px; } .quick-btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 8px; cursor: pointer; text-align: center; transition: background .12s, border-color .12s, transform .08s; display: flex; flex-direction: column; gap: 3px; } .quick-btn:hover:not(.qb-oos) { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); } .quick-btn:hover:not(.qb-oos) .qb-name, .quick-btn:hover:not(.qb-oos) .qb-price { color: #1a1407; } .quick-btn.qb-oos { opacity: .38; cursor: not-allowed; } .qb-name { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; } .qb-price { font-size: 11px; color: var(--muted); } .qb-stock { font-size: 10px; color: var(--muted); opacity: .8; } .qb-stock-neg { color: var(--red); opacity: 1; font-weight: 700; } /* Sell header: mode toggle (left) + receipt-nav arrows (right) */ .sale-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .receipt-nav { display: flex; align-items: center; gap: 8px; } .rn-label { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 84px; text-align: right; } .rn-arrow { width: 38px; height: 38px; border-radius: 9px; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 16px; font-weight: 800; transition: background .12s, border-color .12s, transform .08s; } .rn-arrow:hover { background: var(--accent); border-color: var(--accent); color: #1a1407; } .rn-arrow:active { transform: scale(.94); } /* Editing-an-old-receipt accent */ .sell-left.editing { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; } .sell-left.editing .rn-label { color: var(--blue); } .total-hero.editing .th-value { color: var(--blue); } /* Sell / Refund mode toggle */ .mode-toggle { display: inline-flex; gap: 4px; margin-bottom: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; } .mode-btn { background: transparent; border: none; color: var(--muted); padding: 7px 18px; border-radius: 7px; cursor: pointer; font-size: 14px; font-weight: 700; } .mode-btn.active { background: var(--accent); color: #1a1407; } .mode-btn.mode-refund.active { background: var(--red); color: #fff; } /* Refund mode panel accent */ .refund-panel { border-color: var(--red); box-shadow: 0 0 0 1px rgba(231,76,60,.25) inset; } .cart-total.refund-total { color: var(--red); } /* Negative stock in inventory */ .stock-neg { color: var(--red); font-weight: 800; } tr.neg td { background: rgba(231,76,60,.07); } /* Warning toast */ .toast.warn { border-color: var(--warn); } .cart-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); } .cart-item .qty { display: flex; align-items: center; gap: 6px; } .cart-item .qty button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 16px; } .cart-item .rm { background: transparent; border: none; color: var(--red); cursor: pointer; font-size: 18px; } .cart-total { font-size: 30px; font-weight: 800; text-align: right; margin: 12px 0; color: var(--accent-2); } .search-results { max-height: 30vh; overflow-y: auto; margin-top: 8px; } .search-results .pr { display: flex; justify-content: space-between; padding: 8px; cursor: pointer; border-radius: 6px; } .search-results .pr:hover { background: var(--panel-2); } /* Stat cards */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; } .stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; } .stat .label { color: var(--muted); font-size: 13px; } .stat .value { font-size: 24px; font-weight: 800; margin-top: 4px; } .stat.good .value { color: var(--green); } .stat.cost .value { color: var(--accent-2); } .stat.bad .value { color: var(--red); } /* Pay modal */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; } .modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; width: 480px; max-width: 95vw; } .pay-total { font-size: 20px; margin-bottom: 16px; } .pay-total strong { color: var(--accent-2); } .denoms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .denoms button { padding: 18px 8px; font-size: 17px; font-weight: 700; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; } .denoms button:active { transform: scale(.96); } .pay-rows { margin: 16px 0; font-size: 18px; } .pay-row.change strong { color: var(--green); font-size: 24px; } .pay-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } /* Toast */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); padding: 14px 22px; border-radius: 10px; z-index: 100; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.4); } .toast.ok { border-color: var(--green); } .toast.err { border-color: var(--red); } .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .toolbar input, .toolbar select { width: auto; } .spacer { flex: 1; } @media (max-width: 900px) { .sell-grid { grid-template-columns: 1fr; } } /* Compact table (bill entry line items) */ .compact-table { font-size: 11px; } .compact-table th, .compact-table td { padding: 3px 6px; } .compact-table .rm { font-size: 11px; padding: 0 4px; } /* Negative total in receipts */ .refund-neg { color: var(--red); } /* Receipt modal — primary actions row */ .receipt-main-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } /* Receipt modal — isolated refund zone */ .receipt-refund-zone { margin-top: 16px; padding-top: 14px; border-top: 2px dashed rgba(231,76,60,.4); display: flex; flex-direction: column; align-items: center; gap: 6px; } .receipt-refund-zone::before { content: '⚠ Destructive action — cannot be undone'; font-size: 11px; color: var(--red); opacity: .7; letter-spacing: .3px; } /* Safe refund button: dimmed until armed, grows on arm */ .btn-refund-safe { background: transparent; border: 1px solid var(--red); color: var(--red); padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; opacity: .55; transition: opacity .15s, background .15s, transform .1s; letter-spacing: .3px; } .btn-refund-safe:hover { opacity: .85; } .btn-refund-safe.armed { background: var(--red); color: #fff; opacity: 1; font-weight: 700; transform: scale(1.04); animation: refund-pulse 0.6s ease infinite alternate; } @keyframes refund-pulse { from { box-shadow: 0 0 0 0 rgba(231,76,60,.5); } to { box-shadow: 0 0 0 6px rgba(231,76,60,.0); } } /* Theme toggle */ .theme-toggle { width: 38px; height: 38px; padding: 0; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform .15s ease, background .15s ease; } .theme-toggle:hover { transform: rotate(-15deg); background: var(--panel-2); } /* Status pills (e.g. refunded sale) */ .tag-refunded { background: rgba(231,76,60,.18); color: var(--red); } tr.refunded td { opacity: .62; } .row-link { cursor: pointer; } /* Totals row in tables */ tr.total-row td { border-top: 2px solid var(--line); font-weight: 800; background: var(--panel-2); } .row-link:hover td { background: var(--panel-2); } /* Receipt detail modal */ .receipt-card { width: 600px; max-width: 96vw; } .receipt-paper { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 20px; font-variant-numeric: tabular-nums; } .receipt-paper h3 { margin: 0; text-align: center; font-size: 18px; color: var(--accent); } .receipt-paper .sub { text-align: center; color: var(--muted); font-size: 12px; margin: 2px 0 12px; } .receipt-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 10px; } .receipt-line { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; } .receipt-line .qtyname { flex: 1; } .receipt-sep { border-top: 1px dashed var(--line); margin: 10px 0; } .receipt-grand { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; } .receipt-grand strong { color: var(--accent-2); } /* Invoice Editor — editable receipt lines */ .receipt-edit-line { display: grid; grid-template-columns: minmax(140px,1fr) auto 92px 110px 24px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); } .receipt-edit-line .rel-name { font-size: 14px; line-height: 1.3; } .receipt-edit-line .rel-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; } .receipt-edit-line .qty button { width: 24px; height: 24px; } .receipt-edit-line .rm { background: transparent; border: none; color: var(--red); cursor: pointer; font-size: 16px; } .receipt-refunded-stamp { margin-top: 12px; text-align: center; color: var(--red); font-weight: 800; border: 2px solid var(--red); border-radius: 8px; padding: 6px; letter-spacing: 2px; } /* Recent receipts slide-in drawer (Sell page) */ .recent-drawer { position: fixed; top: 58px; right: 0; bottom: 0; width: 340px; max-width: 88vw; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.3); z-index: 40; transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; } .recent-drawer.open { transform: translateX(0); } .recent-handle { position: absolute; left: -34px; top: 14px; width: 34px; height: 64px; background: var(--accent); color: #1a1407; border: none; cursor: pointer; border-radius: 10px 0 0 10px; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: -4px 0 14px rgba(0,0,0,.25); } .recent-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .recent-drawer-head h3 { margin: 0; font-size: 16px; } .recent-list { overflow-y: auto; padding: 6px; flex: 1; } .recent-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; } .recent-item:hover { background: var(--panel-2); border-color: var(--line); } .recent-item .ri-main { display: flex; flex-direction: column; } .recent-item .ri-id { font-weight: 700; } .recent-item .ri-time { font-size: 12px; color: var(--muted); } .recent-item .ri-total { font-weight: 700; color: var(--accent-2); } /* Cash Drawer page (Highlight-style) */ .drawer-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .drawer-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 18px; align-items: start; } .drawer-grid .panel { margin-bottom: 0; } .shift-summary { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .shift-summary .ss-head { display: flex; justify-content: space-between; padding: 8px 14px; color: var(--muted); font-size: 12px; background: var(--panel-2); } .shift-summary .ss-row { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; } .shift-summary .ss-row strong { font-variant-numeric: tabular-nums; } .shift-summary .ss-total { background: rgba(58,134,255,.10); font-weight: 800; font-size: 15px; } .tx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .tx-badge { padding: 3px 10px; border-radius: 14px; font-size: 11px; font-weight: 700; } .tx-receipt { background: rgba(46,204,113,.15); color: var(--green); } .tx-refund { background: rgba(231,76,60,.16); color: var(--red); } .tx-expense { background: rgba(243,156,18,.16); color: var(--warn); } .tx-cashout { background: rgba(58,134,255,.16); color: var(--blue); } .tx-actions { display: flex; gap: 4px; } .tx-btn { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 13px; } .tx-btn:hover { border-color: var(--accent); } .tx-btn.tx-del:hover { border-color: var(--red); color: var(--red); } @media (max-width: 900px) { .drawer-grid { grid-template-columns: 1fr; } } /* Licensing */ .device-id { font-family: "Courier New", monospace; font-size: 18px; font-weight: 700; letter-spacing: 1px; background: var(--panel-2); border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px; color: var(--accent-2); word-break: break-all; } .lic-status { padding: 10px 14px; border-radius: 8px; font-weight: 700; } .lic-status.lic-bad { background: rgba(231,76,60,.14); color: var(--red); } .license-banner { display: flex; align-items: center; gap: 10px; justify-content: center; background: rgba(243,156,18,.15); color: var(--warn); border-bottom: 1px solid var(--line); padding: 8px 14px; font-size: 13px; font-weight: 600; } .license-banner.grace, .license-banner.urgent { background: rgba(231,76,60,.18); color: var(--red); } .license-banner.warn { background: rgba(243,156,18,.20); color: var(--warn); } /* License renewal reminder dialog */ .lic-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; } .lic-modal { background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: 14px; padding: 22px 24px; max-width: 460px; width: 90%; box-shadow: 0 16px 50px rgba(0,0,0,.45); } .lic-modal.warn { border-top-color: var(--warn); } .lic-modal.urgent { border-top-color: var(--red); } .lic-modal h3 { margin: 0 0 10px; color: var(--accent); } .lic-modal.warn h3 { color: var(--warn); } .lic-modal.urgent h3 { color: var(--red); } .lic-modal p { margin: 0 0 18px; line-height: 1.55; color: var(--text); } .lic-modal-actions { display: flex; gap: 10px; justify-content: flex-end; } /* Store details logo */ .store-logo-preview { max-width: 180px; max-height: 100px; display: block; margin: 6px 0 12px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; object-fit: contain; } .receipt-logo { display: block; max-width: 120px; max-height: 70px; margin: 0 auto 6px; object-fit: contain; } .pd-logo { display: block; max-width: 170px; max-height: 95px; margin: 0 auto 8px; object-fit: contain; } .pd-contact { text-align: center; font-size: 12px; color: #444; margin-bottom: 6px; } /* Report sub-tabs */ .report-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .report-tab { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); padding: 10px 20px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 14px; } .report-tab:hover { color: var(--text); } .report-tab.active { background: var(--accent); color: #1a1407; border-color: var(--accent); } /* Monthly report receipt blocks */ .month-receipt { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-top: 10px; } .mr-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; } /* Print surface — hidden on screen; shown only while printing */ #print-area { display: none; } .print-receipt-doc { width: 72mm; margin: 0 auto; font-family: "Courier New", monospace; color: #000; } .print-invoice-doc { width: 100%; color: #000; } .pd-title { text-align: center; font-weight: 800; font-size: 17px; } .pd-sub { text-align: center; font-size: 12px; margin: 2px 0 8px; letter-spacing: 1px; } .pd-meta { display: flex; justify-content: space-between; font-size: 11px; margin: 1px 0; } .pd-lines { margin: 8px 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 6px 0; } .pd-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; } .pd-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 15px; margin-top: 8px; } .pd-foot { text-align: center; margin-top: 12px; font-size: 11px; } .pd-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .pd-table th, .pd-table td { border-bottom: 1px solid #ccc; padding: 5px 7px; text-align: left; font-size: 12px; } .pd-table .num { text-align: right; } .pd-month-head { font-weight: 700; margin-top: 12px; font-size: 12px; border-top: 2px solid #000; padding-top: 6px; } @media print { body.printing-receipt *, body.printing-invoice * { visibility: hidden; } body.printing-receipt #print-area, body.printing-receipt #print-area *, body.printing-invoice #print-area, body.printing-invoice #print-area * { visibility: visible; } #print-area { display: block; position: absolute; inset: 0; background: #fff; color: #000; padding: 6mm; } @page { size: auto; margin: 8mm; } }