/* Coreon Insights — design tokens and base shell. Theme is switched by the data-cor-theme attribute on . */ html, body { margin: 0; padding: 0; height: 100%; } [data-cor-theme="light"] { --bg:#F3F4F7; --card:#FFFFFF; --chip:#EBEDF2; --line:#E4E7EE; --ink:#12141C; --ink2:#565D6E; --ink3:#8B92A3; --accent:#2E5BFF; --accent-soft:#E9EEFF; --pos:#0F9D6B; --pos-soft:#E1F4EC; --pos-ink:#0A7A52; --warn:#E08A00; --warn-soft:#FBF0DC; --warn-ink:#A15E00; --warn-bd:#F2DDB4; --danger:#C63B3B; --shadow:0 1px 2px rgba(18,20,28,.04); } [data-cor-theme="dark"] { --bg:#0D0F15; --card:#171A23; --chip:#232734; --line:#262B39; --ink:#EEF0F6; --ink2:#A7ADBD; --ink3:#6C7382; --accent:#6E8CFF; --accent-soft:#222B4C; --pos:#3BC490; --pos-soft:#12291F; --pos-ink:#4FD8A4; --warn:#F0A63C; --warn-soft:#2E2410; --warn-ink:#F2B45D; --warn-bd:#463617; --danger:#F07373; --shadow:0 1px 2px rgba(0,0,0,.3); } body { background: var(--bg); color: var(--ink); font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } a { color: var(--accent); text-decoration: none; } input::placeholder { color: #9BA1B0; font-weight: 600; } .cor-input { width: 100%; box-sizing: border-box; background: var(--card); border: 1.5px solid var(--line); border-radius: 13px; padding: 13px 14px; font-size: 15px; font-weight: 600; color: var(--ink); font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } .cor-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .cor-input--pw { padding-right: 46px; } .cor-face-btn:hover { border-color: var(--accent); } .cor-num { font-family: 'Space Grotesk', 'Manrope', sans-serif; font-variant-numeric: tabular-nums; } /* Full-width filter trigger: icon · label · right-aligned summary · chevron. Shared by the Receipts, Products and Shifts filter sheets. */ .cor-filter-btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left; } .cor-filter-btn.active { border-color: var(--accent-soft); background: var(--accent-soft); } .cor-filter-icon { font-size: 15.5px; flex: none; line-height: 1; color: var(--ink); } .cor-filter-btn.active .cor-filter-icon { color: var(--accent); } .cor-filter-label { font-size: 15px; font-weight: 800; flex: none; color: var(--ink); } .cor-filter-btn.active .cor-filter-label { color: var(--accent); } .cor-filter-summary { font-size: 14.5px; font-weight: 600; color: var(--ink3); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; } .cor-filter-btn.active .cor-filter-summary { color: var(--accent); } .cor-filter-chev { font-size: 15px; flex: none; color: var(--ink3); line-height: 1; } .cor-filter-btn.active .cor-filter-chev { color: var(--accent); } /* Vertical single-select option list inside a filter sheet (e.g. the store picker). */ .cor-optlist { display: flex; flex-direction: column; gap: 6px; max-height: 186px; overflow-y: auto; } .cor-optrow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 10px 12px; text-decoration: none; } .cor-optrow.active { border-color: var(--accent-soft); background: var(--accent-soft); } .cor-optrow-label { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cor-optrow.active .cor-optrow-label { color: var(--accent); } .cor-optrow-mark { flex: none; font-size: 15px; font-weight: 800; color: var(--accent); width: 14px; text-align: center; } [data-cor-scroll] { scrollbar-width: none; -webkit-overflow-scrolling: touch; } [data-cor-scroll]::-webkit-scrollbar { display: none; } /* Enhanced-nav page transition: coreon.js hides the content area the moment a page change starts (the header and tab bar stay put), morphs and scrolls out of sight, then replays the slide-in on the new content. The hidden state itself is toggled via a constructed stylesheet in coreon.js — DOM morphing would strip a class. */ [data-cor-refresh], .cor-app.shell > [data-cor-scroll] { transition: opacity .12s ease; } /* Full-height phone shell */ .cor-app { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); position: relative; overflow: hidden; } .cor-safe-top { padding-top: calc(env(safe-area-inset-top, 0px) + 18px); } .cor-safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); } button { font-family: inherit; } /* Enhanced navigation programmatically focuses the page

(FocusOnNavigate gives it tabindex="-1") for screen readers; that focus must not paint a ring. A tabindex="-1" element is never keyboard-reachable, so clearing its outline is safe. Real interactive elements keep their keyboard outline via :focus-visible. */ [tabindex="-1"]:focus { outline: none; } :focus:not(:focus-visible) { outline: none; } /* Thin top progress bar shown while an enhanced navigation is in flight (>200 ms). */ #cor-navbusy { position: fixed; top: 0; left: 0; height: 2.5px; z-index: 999; background: var(--accent); animation: corNavBusy 1.4s cubic-bezier(.2, .6, .3, 1) forwards; } @keyframes corNavBusy { from { width: 0; } to { width: 82%; } } @keyframes corShim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes corSpin { to { transform: rotate(360deg); } } @keyframes corSlide { from { transform: translateX(56px); opacity: 0; } } @keyframes corUp { from { transform: translateY(100%); } } @keyframes corFade { from { opacity: 0; } } .cor-spinning { animation: corSpin .8s linear infinite; } .cor-skel { background: linear-gradient(100deg, var(--chip) 35%, var(--line) 50%, var(--chip) 65%); background-size: 220% 100%; animation: corShim 1.3s linear infinite; }