/* ========================================================================== NovaPOS — base.css Design tokens, reset, app shell layout, typography and utilities. Light and dark themes are driven by [data-theme] on . ========================================================================== */ /* ---------------------------------------------------------------- tokens */ :root { color-scheme: light; /* brand */ --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-200: #c7d2fe; --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #6366f1; --brand-600: #4f46e5; --brand-700: #4338ca; --brand-800: #3730a3; --brand-900: #312e81; --accent-500: #0d9488; --accent-600: #0f766e; /* surfaces */ --bg: #f4f5fb; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f8f9fc; --surface-3: #eef0f6; --surface-hover: #f2f4fa; --sidebar-bg: #10142b; --sidebar-fg: #c9cee6; --sidebar-hover: #1b2142; --sidebar-active:#232a55; /* text */ --text: #141726; --text-muted: #5c6479; --text-subtle: #828a9e; --text-invert: #ffffff; /* lines */ --border: #dfe3ee; --border-strong: #c6cbdb; --border-soft: #eceef5; /* semantic */ --ok: #15803d; --ok-bg: #dcfce7; --ok-border: #bbf7d0; --warn: #b45309; --warn-bg: #fef3c7; --warn-border: #fde68a; --danger: #b91c1c; --danger-bg: #fee2e2; --danger-border: #fecaca; --info: #1d4ed8; --info-bg: #dbeafe; --info-border: #bfdbfe; --neutral-bg: #eef0f6; /* focus */ --focus-ring: 0 0 0 3px rgba(79, 70, 229, .35); /* radii */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* elevation */ --sh-1: 0 1px 2px rgba(16, 20, 43, .06), 0 1px 3px rgba(16, 20, 43, .08); --sh-2: 0 4px 12px rgba(16, 20, 43, .10); --sh-3: 0 12px 32px rgba(16, 20, 43, .16); --sh-4: 0 24px 60px rgba(16, 20, 43, .24); /* spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; /* type */ --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-base: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; /* shell metrics */ --sidebar-w: 244px; --sidebar-w-collapsed: 68px; --topbar-h: 60px; --touch: 44px; /* motion */ --t-fast: 110ms cubic-bezier(.4, 0, .2, 1); --t-med: 200ms cubic-bezier(.4, 0, .2, 1); } [data-theme="dark"] { color-scheme: dark; --bg: #0b1020; --bg-elevated: #121a30; --surface: #131b31; --surface-2: #17203a; --surface-3: #1d2743; --surface-hover: #1b2540; --sidebar-bg: #0a0f1f; --sidebar-fg: #b9c1dd; --sidebar-hover: #151d36; --sidebar-active:#1e2847; --text: #e8ebf6; --text-muted: #a2aac4; --text-subtle: #7d86a3; --text-invert: #0b1020; --border: #26304f; --border-strong: #35416a; --border-soft: #1e2741; --ok: #4ade80; --ok-bg: #12301f; --ok-border: #1d4d31; --warn: #fbbf24; --warn-bg: #33270c; --warn-border: #57420f; --danger: #f87171; --danger-bg: #35171a; --danger-border: #5c2226; --info: #93c5fd; --info-bg: #14243f; --info-border: #1e3a63; --neutral-bg: #1d2743; --brand-500: #818cf8; --brand-600: #6366f1; --brand-700: #4f46e5; --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 4px 14px rgba(0, 0, 0, .45); --sh-3: 0 14px 36px rgba(0, 0, 0, .55); --sh-4: 0 26px 64px rgba(0, 0, 0, .6); --focus-ring: 0 0 0 3px rgba(129, 140, 248, .4); } /* ----------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; overscroll-behavior-y: none; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; } h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-base); } p { margin: 0 0 var(--s3); } p:last-child { margin-bottom: 0; } a { color: var(--brand-600); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } ::selection { background: var(--brand-200); color: var(--brand-900); } [data-theme="dark"] ::selection { background: var(--brand-700); color: #fff; } /* scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: content-box; } /* ------------------------------------------------------------ typography */ .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .small { font-size: var(--fs-sm); } .xsmall { font-size: var(--fs-xs); } .large { font-size: var(--fs-lg); } .strong { font-weight: 650; } .bolder { font-weight: 750; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; text-align: right; } .upper { text-transform: uppercase; letter-spacing: .07em; font-size: var(--fs-xs); font-weight: 650; } .center { text-align: center; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pos-value { color: var(--ok); } .neg-value { color: var(--danger); } .section-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--text-subtle); margin: 0 0 var(--s3); } /* ----------------------------------------------------------------- boot */ .boot { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); background: var(--bg); color: var(--text); } .boot[hidden] { display: none; } .boot__mark { color: var(--brand-600); animation: bootPulse 1.6s ease-in-out infinite; } .boot__mark img { width: 88px; height: 88px; object-fit: contain; } .boot__label { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); } .boot__bar { width: 180px; height: 3px; border-radius: var(--r-full); background: var(--border); overflow: hidden; } .boot__bar span { display: block; width: 40%; height: 100%; background: var(--brand-600); animation: bootSlide 1.1s ease-in-out infinite; } @keyframes bootPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.96); } } @keyframes bootSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } } .noscript { position: fixed; inset: 0; display: grid; place-content: center; padding: var(--s7); background: var(--bg); color: var(--text); text-align: center; font-size: var(--fs-lg); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: var(--s3) var(--s5); background: var(--brand-600); color: #fff; border-radius: 0 0 var(--r-md) 0; } .skip-link:focus { left: 0; text-decoration: none; } /* ------------------------------------------------------------ app shell */ .app { display: flex; min-height: 100dvh; } .app[hidden] { display: none; } .sidebar { position: sticky; top: 0; align-self: flex-start; width: var(--sidebar-w); height: 100dvh; flex: 0 0 var(--sidebar-w); display: flex; flex-direction: column; background: var(--sidebar-bg); color: var(--sidebar-fg); transition: width .18s ease, flex-basis .18s ease; border-right: 1px solid rgba(255, 255, 255, .06); z-index: 40; } .sidebar__brand { display: flex; align-items: center; gap: var(--s3); height: var(--topbar-h); padding: 0 var(--s4); flex: 0 0 auto; border-bottom: 1px solid rgba(255, 255, 255, .07); } .sidebar__mark { display: grid; place-items: center; width: 40px; height: 40px; } .sidebar__mark img { width: 38px; height: 38px; object-fit: contain; } .sidebar__title { font-weight: 800; letter-spacing: -.02em; color: #fff; font-size: var(--fs-xl); } .sidebar__close { margin-left: auto; color: var(--sidebar-fg); } .nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: var(--s3) var(--s2) var(--s5); } .nav__group + .nav__group { margin-top: var(--s4); } .nav__label { padding: var(--s2) var(--s3) var(--s1); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(201, 206, 230, .45); } .nav-item { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--touch); padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--sidebar-fg); text-align: left; cursor: pointer; font-size: var(--fs-md); font-weight: 500; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); } .nav-item:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; } .nav-item.is-active { background: var(--sidebar-active); color: #fff; font-weight: 650; box-shadow: inset 3px 0 0 var(--brand-500); } .nav-item__icon { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; opacity: .9; } .nav-item__icon svg { width: 20px; height: 20px; } .nav-item__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item__badge { min-width: 20px; padding: 1px 6px; border-radius: var(--r-full); background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; text-align: center; } .nav-item--plain { color: rgba(201, 206, 230, .8); } .sidebar__foot { flex: 0 0 auto; padding: var(--s3) var(--s2); border-top: 1px solid rgba(255, 255, 255, .07); } .sync-state { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); font-size: var(--fs-sm); color: rgba(201, 206, 230, .75); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-subtle); flex: 0 0 8px; } .dot--ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); } .dot--warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); } .dot--bad { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); } /* ========================================================================== Collapsible sidebar — the topbar button toggles body.sidebar-collapsed, shrinking the sidebar to an icon rail on desktop. State is persisted. ========================================================================== */ .topbar__collapse { display: none; } @media (min-width: 901px) { .topbar__collapse { display: inline-flex; } body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); flex: 0 0 var(--sidebar-w-collapsed); } body.sidebar-collapsed .sidebar__title, body.sidebar-collapsed .sidebar__close, body.sidebar-collapsed .nav__label, body.sidebar-collapsed .nav-item__label, body.sidebar-collapsed .nav-item__badge, body.sidebar-collapsed .sync-state__label { display: none; } body.sidebar-collapsed .sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .nav { padding-left: var(--s1); padding-right: var(--s1); } body.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .sync-state { justify-content: center; padding-left: 0; padding-right: 0; } } .sidebar__scrim { position: fixed; inset: 0; background: rgba(6, 9, 20, .55); z-index: 39; backdrop-filter: blur(2px); } .sidebar__scrim[hidden] { display: none; } .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s3); min-height: var(--topbar-h); padding: var(--s2) var(--s5); background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .topbar__title { min-width: 0; } .topbar__title h1 { font-size: var(--fs-lg); } .topbar__title p { margin: 0; } .topbar__spacer { flex: 1 1 auto; } .topbar__burger { display: none; } .view { flex: 1 1 auto; padding: var(--s5); min-width: 0; } .view:focus { outline: none; } /* store switcher */ .store-switch { position: relative; } .store-switch__btn { display: flex; align-items: center; gap: var(--s2); min-height: 38px; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; max-width: 210px; } .store-switch__btn:hover { background: var(--surface-hover); } .store-switch__btn span.label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* user menu */ .usermenu { position: relative; } .usermenu__trigger { display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: var(--s1) var(--s2) var(--s1) var(--s1); border: 1px solid transparent; border-radius: var(--r-full); background: transparent; cursor: pointer; } .usermenu__trigger:hover { background: var(--surface-hover); border-color: var(--border); } .usermenu__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; } .usermenu__name { font-size: var(--fs-sm); font-weight: 650; } .usermenu__role { font-size: 11px; color: var(--text-subtle); } .avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-600); color: #fff; font-size: var(--fs-sm); font-weight: 700; flex: 0 0 32px; } .avatar--lg { width: 48px; height: 48px; font-size: var(--fs-lg); flex-basis: 48px; } .avatar--sm { width: 26px; height: 26px; font-size: 11px; flex-basis: 26px; } .caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--text-subtle); margin-top: 3px; } .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 232px; padding: var(--s2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3); } .menu[hidden] { display: none; } .menu--left { right: auto; left: 0; } .menu__item { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 38px; padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-md); text-decoration: none; } .menu__item:hover { background: var(--surface-hover); text-decoration: none; } .menu__item--danger { color: var(--danger); } .menu__item svg, .menu__item [data-icon] { width: 18px; height: 18px; flex: 0 0 18px; opacity: .8; } .menu__sep { height: 1px; background: var(--border); margin: var(--s2) 0; } .menu__head { padding: var(--s2) var(--s3) var(--s1); } .menu__head .name { font-weight: 650; } .menu__head .sub { font-size: var(--fs-xs); color: var(--text-subtle); } /* offline bar */ .offline-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--warn-bg); color: var(--warn); border-top: 1px solid var(--warn-border); font-size: var(--fs-sm); font-weight: 600; } .offline-bar[hidden] { display: none; } .offline-bar--error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } /* ------------------------------------------------------------- utilities */ .row { display: flex; align-items: center; gap: var(--s3); } .row--wrap { flex-wrap: wrap; } .row--top { align-items: flex-start; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .row--tight { gap: var(--s2); } .row--loose { gap: var(--s5); } .col { display: flex; flex-direction: column; gap: var(--s3); } .col--tight { gap: var(--s1); } .grow { flex: 1 1 auto; min-width: 0; } .spacer { flex: 1 1 auto; } .wrap { flex-wrap: wrap; } .grid { display: grid; gap: var(--s4); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .grid--cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid--form { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .stack > * + * { margin-top: var(--s4); } .mt0 { margin-top: 0; } .mt1 { margin-top: var(--s1); } .mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); } .mt6 { margin-top: var(--s6); } .mt7 { margin-top: var(--s7); } .mb0 { margin-bottom: 0; } .mb2 { margin-bottom: var(--s2); } .mb3 { margin-bottom: var(--s3); } .mb4 { margin-bottom: var(--s4); } .mb5 { margin-bottom: var(--s5); } .page { max-width: 1600px; margin: 0 auto; } .page-head { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); } .page-head__text { min-width: 0; } .page-head__text h2 { font-size: var(--fs-2xl); } .page-head__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-left: auto; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------- responsive */ @media (max-width: 1180px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .usermenu__meta { display: none; } } @media (max-width: 900px) { :root { --sidebar-w: 264px; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh; transform: translateX(-102%); transition: transform var(--t-med); box-shadow: var(--sh-4); } body.nav-open .sidebar { transform: translateX(0); } body.nav-open { overflow: hidden; } .sidebar__close { display: grid; } .topbar__burger { display: grid; } .view { padding: var(--s4); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .store-switch__btn { max-width: 140px; } #pos-launch span:last-child { display: none; } } @media (max-width: 640px) { .topbar { padding: var(--s2) var(--s3); gap: var(--s2); } .topbar__title h1 { font-size: var(--fs-base); } .topbar__title p { display: none; } .view { padding: var(--s3); } .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } .page-head__actions { width: 100%; margin-left: 0; } .page-head__actions .btn { flex: 1 1 auto; justify-content: center; } .store-switch__btn span.label { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media print { .sidebar, .topbar, .offline-bar, .toasts, .modal-root, .drawer-root, .page-head__actions { display: none !important; } .view { padding: 0; } body { background: #fff; color: #000; } } /* ------------------------------------------------- utility extras (shared) */ .gap0 { gap: 0; } .gap1 { gap: var(--s1); } .gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); } .gap4 { gap: var(--s4); } .gap5 { gap: var(--s5); } .p1 { padding: var(--s1); } .p2 { padding: var(--s2); } .p3 { padding: var(--s3); } .p4 { padding: var(--s4); } .p5 { padding: var(--s5); } .py2 { padding-top: var(--s2); padding-bottom: var(--s2); } .py3 { padding-top: var(--s3); padding-bottom: var(--s3); } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .w-full { width: 100%; } .h4 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; } .h5 { font-size: var(--fs-base); font-weight: 700; line-height: 1.35; } .h6 { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); } .strike { text-decoration: line-through; } .link { color: var(--brand-600); background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .link:hover { color: var(--brand-500); } .bare, ul.bare, ol.bare { list-style: none; margin: 0; padding: 0; } .nowrap-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi-row { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .kpi-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kpi-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .grid--3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .chip-stat { padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); min-width: 118px; } .callout--ok { border-left-color: var(--ok); background: var(--ok-bg); } .callout--warn { border-left-color: var(--warn); background: var(--warn-bg); } .callout--danger { border-left-color: var(--danger); background: var(--danger-bg); } .callout--info { border-left-color: var(--info); background: var(--info-bg); } .callout--brand { border-left-color: var(--brand-600); } .receipt-dialog { max-height: 68vh; overflow: auto; } .popover-wrap { position: relative; display: inline-flex; } .btn--pos-launch { gap: var(--s2); font-weight: 700; } .sync-state__label { white-space: nowrap; } @media (max-width: 1180px) { .kpi-row--5, .kpi-row--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .kpi-row--4, .kpi-row--5, .kpi-row--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--2-1, .grid--1-2, .grid--3-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .kpi-row--2, .kpi-row--3, .kpi-row--4 { grid-template-columns: minmax(0, 1fr); } .receipt-dialog { max-height: 60vh; } } /* The HTML hidden attribute must win over component display rules. */ [hidden] { display: none !important; } /* ========================================================================== Till mode — cashiers see the POS full-screen, with no sidebar or burger. ========================================================================== */ body.mode-till .sidebar, body.mode-till .sidebar__scrim, body.mode-till .topbar__burger, body.mode-till .topbar__collapse, body.mode-till #bell { display: none !important; } body.mode-till .view { padding: 0; } body.mode-till .view > .page { padding: var(--s5); } @media (max-width: 900px) { body.mode-till .view > .page { padding: var(--s3); } }