/* * ASENTRA SMART PARKING — mobile-browser demo * M00 PART 04 · mobile app shell layout. * Structure: .shell → .shell__bar / .shell__main (scrolls) / .shell__nav. * Safe areas: bar clamps top inset, nav clamps bottom inset via PART 02 tokens. * Tokens only — no literal colors/sizes (media-query breakpoints are the sole * exception; CSS vars cannot be used in @media selectors). */ .shell { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 0; background-color: var(--color-surface-page); } /* ============================================================ Top app bar CR-M08-UI-REFRESH-01 · PART 02C — presentation refresh only. Composition seam stays: the status chips (.ui-netbar from js/ui/networkBanner.js and .ui-pendq from js/ui/pendingQueue.js) are appended to this header by the composition root (js/app.js) AFTER the shell mounts, so the DOM order here is brand → identity → status chips. Flexbox places brand + identity as a left cluster and pushes the chips to the far right; on very narrow widths the chips wrap as their own right-aligned status row beneath the identity. Nothing is clipped or overlapped and no status is hidden. ============================================================ */ .shell__bar { position: relative; flex: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--space-2); column-gap: var(--space-3); min-height: calc(var(--shell-bar-height) - var(--space-2)); /* compact (48px), token-derived */ padding: var(--gutter-safe-top) var(--gutter-safe-right) var(--space-2) var(--gutter-safe-left); background-color: var(--color-surface-raised); border-bottom: var(--border-width-thin) solid var(--color-border-strong); } .shell__brand { flex: none; display: inline-flex; align-items: center; } /* Official logo: fixed height, auto width, contained — aspect ratio never distorted. */ .shell__logo { display: block; height: var(--shell-logo-height); width: auto; max-width: var(--shell-logo-max-width); object-fit: contain; } .shell__brand-fallback { font-size: var(--font-size-400); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); line-height: var(--line-height-tight); color: var(--color-text-primary); } /* Compact app identity: primary product name next to the brand, left side. Shrinks/wraps only when truly needed; never clipped. */ .shell__bar-titles { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .shell__bar-name { max-width: 100%; font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); line-height: var(--line-height-tight); color: var(--color-text-primary); overflow-wrap: anywhere; } /* Build tag: kept in the DOM for operational traceability (the machine trace is ) but removed from the visual app-bar hierarchy so it no longer competes with the product identity. Token-free clip hide: zero layout impact, invisible, still present for AT. */ .shell__bar-build { position: absolute; clip-path: inset(50%); font-family: var(--font-family-mono); font-size: var(--font-size-100); color: var(--color-text-faint); } /* Status cluster placement: the two app.js-mounted chips are pushed to the far right (auto start margin). When the queue chip is present and the identity is wide, the chips wrap together beneath as a right-aligned status row — compact, never overlapping the brand/identity. */ .shell__bar .ui-netbar, .shell__bar .ui-pendq { margin-inline-start: auto; } /* ============================================================ Main region (scrolls) */ .shell__main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .shell__main:focus-visible { outline: none; } .shell__page-title { margin: 0; font-size: var(--font-size-500); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text-primary); } .shell__page-note { margin: 0; font-size: var(--font-size-200); color: var(--color-text-secondary); } .shell__row { display: flex; flex-wrap: wrap; gap: var(--space-2); } .shell__skeleton-stack { gap: var(--space-2); } /* ============================================================ Bottom nav (in-shell) */ .shell__nav { flex: none; display: flex; justify-content: space-evenly; align-items: stretch; padding: var(--space-1) 0 var(--space-2); padding-bottom: var(--gutter-safe-bottom); background-color: var(--color-surface-raised); border-top: var(--border-width-thin) solid var(--color-border); } .shell__nav-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--shell-nav-item-height); padding: 0 var(--space-1); border: none; background-color: transparent; font-family: var(--font-family-base); font-size: var(--font-size-100); font-weight: var(--font-weight-medium); color: var(--color-text-faint); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--easing-standard); } .shell__nav-item:hover { color: var(--color-text-secondary); } .shell__nav-item:focus-visible { outline: var(--border-width-medium) solid var(--color-accent); outline-offset: calc(var(--space-1) * -1); } /* Glyph slot: a full-radius chip *box* (transparent unless active) holding the inline SVG. Icons inherit currentColor and stay at the shell glyph size; no square placeholder, no CSS-drawn fallback, no icon enlargement. */ .shell__nav-glyph { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); } .shell__nav-glyph svg { display: block; width: var(--shell-nav-glyph-size); height: var(--shell-nav-glyph-size); } .shell__nav-label { max-width: 100%; line-height: var(--line-height-tight); overflow-wrap: anywhere; } .shell__nav-item--active { color: var(--color-accent); font-weight: var(--font-weight-semibold); } /* Subtle static chip behind the active icon only — :not(:empty) keeps it off label-only items (e.g. tenant "Visitor"), which never draw an icon chip. */ .shell__nav-item--active .shell__nav-glyph:not(:empty) { background-color: var(--color-accent-soft); } .shell__nav-item--active:hover { color: var(--color-accent); } /* ============================================================ Tablet/desktop preview framing */ @media (min-width: 520px) { .app-root { border-inline: var(--border-width-thin) solid var(--color-border); box-shadow: var(--shadow-float); } } /* ============================================================ CR-M08-AUTH-MOBILE-UI-01 · PART 01 — phone-range auth placement. Presentation only. The >=520px framing rule above is untouched; this is the deliberate counterpart *below* that seam, scoped to the auth surface so no other screen's layout changes. The login card itself is styled in css/components.css. ============================================================ */ @media (max-width: 519.98px) { /* Auth is a single-surface screen: give it the full scroll region and settle it optically rather than pinning it to the top edge. Safe horizontal gutters stay owned by .shell__main padding. */ .shell__main > .login-screen { margin-block: auto; } /* Slightly tighter vertical gutter than the generic content padding so a tall auth form stays comfortably inside a 360px-class viewport without introducing horizontal overflow. */ .shell__main:has(> .login-screen) { padding-block: var(--space-3); justify-content: center; } } @media (prefers-reduced-motion: reduce) { .shell__nav-item { transition: none; } } /* ============================================================ M02 PART 01 · Ops home */ .ops-home { display: grid; gap: var(--space-3); } .ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-block: var(--space-2); } .ops-tile { display: flex; flex-direction: column; gap: var(--space-05); padding: var(--space-3); background: var(--color-surface-raised); border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-md); } .ops-tile__value { font-size: var(--font-size-600); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text-primary); } .ops-tile__value--danger { color: var(--color-danger); } .ops-tile__value--warning { color: var(--color-warning); } .ops-tile__label { font-size: var(--font-size-100); color: var(--color-text-secondary); } .ops-health, .ops-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); } .ops-health__label { flex-basis: 100%; font-size: var(--font-size-100); letter-spacing: var(--letter-spacing-wide); color: var(--color-text-secondary); } @media (min-width: 520px) { .ops-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ============================================================ M02 PART 02 · Live gate list */ .gate-list { display: grid; gap: var(--space-3); margin-block-start: var(--space-2); } .gate-card { display: flex; flex-direction: column; gap: var(--space-2); } .gate-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .gate-card__name { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); overflow-wrap: anywhere; } .gate-card__status, .gate-card__event { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .gate-card__event { padding-block-start: var(--space-2); border-top: var(--border-width-thin) solid var(--color-border); } .gate-card__plate { font-family: var(--font-family-mono); font-weight: var(--font-weight-medium); } .gate-card__time { font-size: var(--font-size-100); color: var(--color-text-secondary); } /* ============================================================ M02 PART 03 · Gate detail */ .gate-detail__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-block-start: var(--space-2); } .gate-detail__name { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); overflow-wrap: anywhere; } .gate-detail__body { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-2); } .gate-detail__kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .gate-detail__kv-label { font-size: var(--font-size-100); color: var(--color-text-secondary); } .gate-detail__kv-value { font-weight: var(--font-weight-medium); color: var(--color-text-primary); overflow-wrap: anywhere; text-align: right; } .gate-detail__kv-value--mono { font-family: var(--font-family-mono); } .gate-detail__camera { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-2); } .gate-detail__snapshot { border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; min-height: 96px; display: flex; align-items: center; justify-content: center; background: var(--color-surface-muted); } .gate-detail__snapshot-img { width: 100%; height: auto; display: block; } .gate-detail__snapshot-fallback { font-size: var(--font-size-100); letter-spacing: var(--letter-spacing-wide); color: var(--color-text-secondary); padding: var(--space-3); } .gate-detail__cam-meta { font-weight: var(--font-weight-medium); color: var(--color-text-primary); } .gate-detail__cam-time { font-size: var(--font-size-100); color: var(--color-text-secondary); } /* ============================================================ M02 PART 04 · Operator actions */ .ops-action { display: flex; flex-direction: column; gap: var(--space-2); } .ops-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); } .ops-action__warn { font-weight: var(--font-weight-semibold); color: var(--color-danger); font-size: var(--font-size-100); } .ops-action__error { color: var(--color-danger); font-size: var(--font-size-200); } .ops-action__result { border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); background: var(--color-surface-muted); } .ops-action__result .shell__page-note { margin: 0; } /* ============================================================ M02 PART 05 · Plate lookup */ .lookup-search { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-2); } .lookup-search .ui-button { align-self: flex-start; } /* ============================================================ M02 PART 06 · Mismatch review */ .ops-action--review { border-color: var(--color-warning); color: var(--color-warning); } /* ============================================================ M02 PART 07 · Alerts & Incidents */ .alert-card { display: flex; flex-direction: column; gap: var(--space-2); } .alert-card .gate-card__name { overflow-wrap: anywhere; } /* ============================================================ M03 PART 01 · Tenant home */ .tenant-home { display: grid; gap: var(--space-3); } .tenant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-block: var(--space-2); } .tenant-tile { display: flex; flex-direction: column; gap: var(--space-05); padding: var(--space-3); background: var(--color-surface-raised); border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-md); } .tenant-tile__value { font-size: var(--font-size-500); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text-primary); overflow-wrap: anywhere; } .tenant-tile__label { font-size: var(--font-size-100); color: var(--color-text-secondary); } .tenant-kv { display: grid; gap: var(--space-1); margin-block: var(--space-2); } .tenant-kv__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); } .tenant-kv__label { color: var(--color-text-secondary); font-size: var(--font-size-100); } .tenant-kv__value { color: var(--color-text-primary); font-weight: var(--font-weight-medium); text-align: end; } .tenant-plan { font-size: var(--font-size-500); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .tenant-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); } .tenant-activity { display: grid; gap: var(--space-2); margin-block: var(--space-2); } .tenant-activity__item { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--color-surface-raised); border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-md); } .tenant-activity__line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .tenant-activity__plate { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .tenant-activity__meta { font-size: var(--font-size-100); color: var(--color-text-secondary); } .tenant-activity .tenant-note { margin-block-start: 0; } /* ============================================================ M03 PART 02 · My Vehicles */ .vehicle-list { display: grid; gap: var(--space-3); } .vehicle-card { display: grid; gap: var(--space-2); } .vehicle-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .vehicle-card__plate { font-size: var(--font-size-500); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text-primary); } .vehicle-card__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); } .vehicle-card__meta { font-size: var(--font-size-200); color: var(--color-text-secondary); } /* ============================================================ M03 PART 03 · Vehicle Detail */ .vehicle-card--selectable { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--duration-fast) var(--easing-standard); } .vehicle-card--selectable:hover { border-color: var(--color-accent); } .vehicle-card--selectable:focus-visible { outline: var(--border-width-medium) solid var(--color-accent); outline-offset: calc(var(--space-1) * -1); } /* ============================================================ M03 PART 06 · Visitor Vehicle */ .visitor-list { display: grid; gap: var(--space-2); margin-block: var(--space-2); } .visitor-card { display: grid; gap: var(--space-1); } .visitor-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .visitor-card__name { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .visitor-card__meta { font-size: var(--font-size-100); color: var(--color-text-secondary); } .visitor-form { display: grid; gap: var(--space-3); margin-block-start: var(--space-2); } .visitor-form .ui-button { justify-self: start; } .visitor-form__message { margin: 0; font-size: var(--font-size-200); color: var(--color-text-secondary); } /* ============================================================ M04 PART 01 · Merchant home */ .merchant-home { display: grid; gap: var(--space-3); } .merchant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-block: var(--space-2); } .merchant-tile { display: flex; flex-direction: column; gap: var(--space-05); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); } .merchant-tile__value { font-size: var(--font-size-400); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); overflow-wrap: anywhere; } .merchant-tile__label { font-size: var(--font-size-100); color: var(--color-text-secondary); } .merchant-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); } .merchant-activity { display: grid; gap: var(--space-2); margin-block: var(--space-2); } .merchant-activity__item { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); } .merchant-activity__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); } .merchant-activity__plate { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .merchant-activity__meta { font-size: var(--font-size-100); color: var(--color-text-secondary); overflow-wrap: anywhere; } .merchant-activity .merchant-note { margin-block-start: 0; } /* ============================================================ M05 PART 01 · Customer Home */ .customer-home { display: grid; gap: var(--space-3); } .customer-kv { display: grid; gap: var(--space-1); } .customer-kv__row { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-1); border-bottom: var(--border-width-thin) solid var(--color-border); } .customer-kv__row:last-child { border-bottom: 0; } .customer-kv__label { color: var(--color-text-secondary); } .customer-kv__value { color: var(--color-text-primary); font-weight: var(--font-weight-medium); text-align: right; overflow-wrap: anywhere; } .customer-history-preview { display: grid; gap: var(--space-2); } .customer-history-preview__item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-2); align-items: center; padding: var(--space-3); border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); } .customer-history-preview__plate { color: var(--color-text-primary); } .customer-history-preview__meta { color: var(--color-text-secondary); font-size: var(--font-size-100); overflow-wrap: anywhere; } .customer-history-preview__item .ui-badge { grid-column: 2; grid-row: 1 / span 2; } /* ============================================================ M05 PART 04 · Customer History */ .customer-history { display: grid; gap: var(--space-3); } .customer-history-card { display: grid; gap: var(--space-1); } .customer-history-card__heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .customer-history-card__plate { color: var(--color-text-primary); font-size: var(--font-size-300); } /* ============================================================ M05 PART 05 · Receipt and selectable history */ .customer-history-card { cursor: pointer; } .customer-history-card:focus-visible { outline: var(--border-width-medium) solid var(--color-accent); outline-offset: var(--space-1); } .parking-receipt { display: grid; gap: var(--space-3); } .parking-receipt .shell__row { margin-block-start: var(--space-1); }