/* PULSE Employee — consumes the SAME shared/design/ tokens+components as PULSE B2B and PULSE Booking (see index.html tags). This file no longer hardcodes color values — everything below is either a direct alias onto shared/design/tokens.css variables (so a palette change there propagates here automatically, same as it does for Booking) or an Employee-only token (spacing/radius/animation timing) that the shared system doesn't define. Mobile-first/touch-first/action-first layout stays local to this file — only the visual language (color, buttons, cards, inputs, badges) is shared. See pulse-employee/README.md. */ :root { /* ---- Aliases onto shared/design/tokens.css (dark theme, set via in index.html — Employee is dark-only, the nightlife-shift context this app is built for). Legacy Employee names kept so the rest of this file didn't need a full rewrite. ---- */ --elevated-surface: var(--surfaceElevated); --surface-1: color-mix(in srgb, var(--foreground) 3%, transparent); --surface-2: color-mix(in srgb, var(--foreground) 5%, transparent); --surface-3: color-mix(in srgb, var(--foreground) 8%, transparent); --overlay: color-mix(in srgb, var(--background) 70%, transparent); --text-primary: var(--foreground); --text-secondary: var(--mutedForeground); --text-muted: var(--subtleForeground); --text-faint: color-mix(in srgb, var(--foreground) 50%, transparent); --text-on-accent: var(--accentForeground); --pulse-primary: var(--accent); --pulse-primary-strong: var(--accentHover); --pulse-primary-contrast: var(--accentForeground); --success: var(--success-tx); --warning: var(--warning-tx); --danger: var(--danger-tx); --danger-base: var(--danger-bg); --border-weak: var(--borderSubtle); --border-strong: color-mix(in srgb, var(--foreground) 18%, var(--border)); /* ---- Employee-only tokens (not part of the shared system) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; /* --- Brand-lockup / hamburgermeny / dock — samma tokens som B2B --- */ --logo-cycle: 2450ms; --letter-stagger: 150ms; --hamburger-size: 46px; --drawer-width: 300px; --drawer-duration: 980ms; --dock-icon-size: 48px; --dock-svg-size: 22px; } * { box-sizing: border-box; } html, body { height: 100%; } /* Same rule B2B's own stylesheet uses: without it, an author class that sets its own `display` (e.g. .quick-tile { display: flex }) beats the UA [hidden] default and the element stays visible despite `hidden`. */ [hidden] { display: none !important; } /* font-family/background/color already set by shared/design/tokens.css's own `body {}` rule — this just adds the mobile-app-specific bits. */ body { margin: 0; overscroll-behavior-y: none; } button { font-family: inherit; } textarea, input { font-family: inherit; } .app-shell { max-width: 560px; margin: 0 auto; min-height: 100vh; position: relative; display: flex; flex-direction: column; background: var(--background); } .view { display: flex; flex-direction: column; min-height: 100vh; } .view[hidden] { display: none; } /* ---------- Buttons ---------- .btn/.btn-primary/.btn-ghost/.btn-block colors, hover and disabled states all come from shared/design/components.css now (same button PULSE B2B and Booking use). This only widens the tap target for a touch/mobile app — B2B's own .btn is sized for a mouse-driven desktop dashboard. */ .btn { padding: 16px 20px; font-size: 16px; font-weight: 600; width: auto; } .btn-block { width: 100%; justify-content: center; } .btn-link { background: none; border: none; color: var(--text-secondary); font-size: 14px; cursor: pointer; padding: var(--space-2); } /* ---------- Auth ---------- */ .view-auth { justify-content: center; padding: var(--space-6); } .auth-card { display: flex; flex-direction: column; gap: var(--space-4); } .brand-mark { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-primary); text-align: center; margin-bottom: var(--space-3); } .brand-mark span { color: var(--pulse-primary); font-weight: 500; margin-left: 6px; } .brand-mark.small { font-size: 15px; margin-bottom: 0; } .auth-tagline { text-align: center; color: var(--text-secondary); margin-bottom: var(--space-4); } .auth-fineprint { text-align: center; color: var(--text-muted); font-size: 12px; margin-top: var(--space-4); } /* ---------- Context / venue switch ---------- */ .view-context { padding: var(--space-5); } .context-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); } .context-title { font-size: 26px; margin: 0 0 var(--space-1); } .context-sub { color: var(--text-secondary); margin: 0 0 var(--space-5); } .context-list { display: flex; flex-direction: column; gap: var(--space-3); } .context-card { border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius-lg); padding: var(--space-4); cursor: pointer; display: flex; flex-direction: column; gap: 2px; } .context-card:active { background: var(--surface-2); } .context-card .venue-name { font-size: 18px; font-weight: 600; } .context-card .venue-role { color: var(--pulse-primary); font-size: 14px; } /* ---------- Brand-lockup (samma keyframes/timing som B2B/Booking) ---------- */ .brand-lockup { position: fixed; top: 14px; left: 50%; z-index: 20; display: flex; align-items: baseline; justify-content: center; gap: 6px; line-height: 1; transform: translateX(-50%); pointer-events: none; user-select: none; -webkit-user-select: none; } .brand-pulse { display: flex; align-items: center; gap: 2px; color: #777777; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; animation: logo-breath 4200ms ease-in-out infinite; } .brand-pulse span { animation: pulse-logo-sweep var(--logo-cycle) linear infinite; animation-delay: calc(var(--i) * var(--letter-stagger)); will-change: color; } .brand-on { font-size: 14px; color: var(--text-secondary); font-weight: 400; margin-left: 2px; } /* Same brand-lockup markup/animation, used inline (auth/context screens) instead of fixed-to-viewport (main app header). */ .brand-lockup-inline { position: static; transform: none; justify-content: center; margin: 0 auto var(--space-4); } .brand-lockup-inline .brand-pulse { font-size: 26px; } .brand-lockup-inline .brand-on { font-size: 16px; } .context-header .brand-lockup-inline { margin: 0; } @keyframes pulse-logo-sweep { 0%, 100% { color: #777777; } 16% { color: var(--pulse-primary); } 68% { color: #777777; } } @keyframes logo-breath { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } } /* ---------- Hamburgermeny (samma cirkel/position-språk som B2B) ---------- */ .hamburger-button { position: fixed; top: 10px; left: 14px; z-index: 21; width: var(--hamburger-size); height: var(--hamburger-size); display: grid; place-content: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); background: var(--shell-surface, var(--surface-2)); cursor: pointer; transition: background 260ms ease, border-color 260ms ease, transform 260ms ease; } .hamburger-button:hover { border-color: var(--pulse-primary); transform: translateY(-1px); } .hamburger-button span { width: 18px; height: 2px; border-radius: 999px; background: currentColor; } /* ---------- Meny-drawer (samma slide/timing-språk som B2B .business-drawer) ---------- */ .drawer-backdrop { position: fixed; inset: 0; z-index: 30; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity 400ms ease; } .employee-drawer { position: fixed; inset: 0 auto 0 0; z-index: 31; width: min(var(--drawer-width), calc(100vw - 40px)); max-width: 560px; padding: 24px; border-right: 1px solid var(--border); background: rgba(7, 8, 13, 0.98); transform: translateX(-104%); transition: transform var(--drawer-duration) cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; overflow-y: auto; } body.drawer-open #drawer-backdrop { opacity: 1; pointer-events: auto; } body.drawer-open #employee-drawer { transform: translateX(0); } .drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: var(--space-5); } .drawer-eyebrow { margin: 0 0 4px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .drawer-header h2 { margin: 0; font-size: 22px; font-weight: 700; } .drawer-close { width: 36px; height: 36px; position: relative; border: 1px solid var(--border); border-radius: 999px; background: var(--elevated-surface); cursor: pointer; flex: none; } .drawer-close span { position: absolute; top: 17px; left: 9px; width: 16px; height: 2px; border-radius: 999px; background: var(--text-primary); } .drawer-close span:first-child { transform: rotate(45deg); } .drawer-close span:last-child { transform: rotate(-45deg); } .venue-summary { display: grid; gap: 4px; margin-bottom: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--surface); } .venue-summary strong { font-size: 15px; } .venue-summary span { color: var(--text-secondary); font-size: 13px; } .drawer-nav { display: grid; gap: var(--space-5); } .drawer-nav-section h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 700; } .drawer-nav-section { display: grid; gap: 4px; } .drawer-nav button, .drawer-nav a { display: block; width: 100%; text-align: left; border: 1px solid transparent; border-radius: var(--radius-md); padding: 12px 13px; color: var(--text-secondary); background: transparent; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .drawer-nav button:hover, .drawer-nav a:hover { color: var(--text-primary); border-color: var(--border); background: var(--surface-2); } .drawer-link-danger { color: var(--danger) !important; } /* ---------- Notisklocka + högerpanel (återanvänder drawer-språket, från höger) ---------- */ .notif-bell { position: fixed; top: 10px; right: 14px; z-index: 21; width: var(--hamburger-size); height: var(--hamburger-size); display: grid; place-content: center; border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); background: var(--shell-surface, var(--surface-2)); cursor: pointer; } .notif-bell svg { width: 20px; height: 20px; } .notif-badge { position: absolute; top: 4px; right: 4px; background: var(--pulse-primary); color: var(--pulse-primary-contrast); font-size: 10px; font-weight: 700; border-radius: var(--radius-pill); min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .notif-panel { inset: 0 0 0 auto; border-right: none; border-left: 1px solid var(--border); transform: translateX(104%); } body.notif-open #notif-backdrop { opacity: 1; pointer-events: auto; } body.notif-open .notif-panel { transform: translateX(0); } .notif-row { align-items: flex-start; flex-direction: column; gap: 4px; } .notif-row-top { display: flex; justify-content: space-between; width: 100%; gap: 8px; } .notif-row.is-unread { border-color: var(--pulse-primary-border, var(--pulse-primary)); } .notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pulse-primary); display: inline-block; margin-right: 6px; flex: none; } /* ---------- Sub-bar (venue pill under the fixed brand header) ---------- */ .subbar { display: flex; justify-content: center; padding: calc(var(--hamburger-size) + 14px) var(--space-4) var(--space-2); } .venue-pill { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 44px; } .venue-pill-caret { color: var(--text-muted); } /* ---------- Main pane ---------- */ .view-main { padding-bottom: 108px; } .pane { padding: 0 var(--space-4) var(--space-6); } .pane-title { font-size: 22px; margin: var(--space-4) 0 var(--space-4); } .hero-shift { background: linear-gradient(160deg, var(--elevated-surface), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); } .hero-eyebrow { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin: 0; } .hero-venue { font-size: 24px; margin: 4px 0 0; } .hero-role { color: var(--pulse-primary); font-weight: 600; margin: 2px 0 0; } .hero-time { color: var(--text-secondary); margin: 2px 0 var(--space-4); font-family: var(--font-mono); } .hero-actions { display: flex; gap: var(--space-2); } .operational-status { margin: 0 0 var(--space-3); padding: 10px 12px; border: 1px solid var(--border-weak); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--surface-1); font-size: 13px; } .operational-status[data-status="error"] { color: var(--danger); border-color: var(--danger); } .operational-status[data-status="reconnecting"] { color: var(--warning); border-color: var(--warning); } .station-context { display: grid; gap: 6px; margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid var(--border-weak); border-radius: var(--radius-lg); background: var(--surface-1); } .station-context-label, .station-ack-state { color: var(--text-secondary); font-size: 13px; } .station-context strong { font-size: 20px; } .quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); } .quick-tile { position: relative; background: var(--surface-1); border: 1px solid var(--border-weak); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-primary); cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; } .quick-tile:active { background: var(--surface-2); } .quick-icon { font-size: 22px; } .quick-badge { position: absolute; top: 10px; right: 10px; background: var(--pulse-primary); color: var(--pulse-primary-contrast); font-size: 11px; font-weight: 700; border-radius: var(--radius-pill); min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .section-block { margin-bottom: var(--space-6); } .section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: var(--space-3); } .list { display: flex; flex-direction: column; gap: var(--space-2); } .list-muted { opacity: 0.85; } .list-row { background: var(--surface-1); border: 1px solid var(--border-weak); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .list-row .row-title { font-weight: 600; } .list-row .row-sub { color: var(--text-secondary); font-size: 13px; } .list-row .row-meta { color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); text-align: right; } .empty-hint { color: var(--text-muted); font-size: 14px; } .task-row { display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .task-row-top { display: flex; justify-content: space-between; align-items: center; } .task-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); } /* .chip base styling (border/color/hover/active) comes from shared components.css — these are just Employee-specific extra states it doesn't define (a quick task action that's already done/blocked). */ .chip.chip-done { border-color: var(--success); color: var(--success); } .chip.chip-problem { border-color: var(--danger); color: var(--danger); } /* Task/venue status now uses shared components.css's .badge/.badge-* — see app.js statusClass() and index.html "Aktiv" tag. */ /* ---------- Schema: veckorutnät (strukturellt speglar B2B:s kalendervy) ---------- */ .week-grid { display: flex; flex-direction: column; gap: var(--space-3); } .week-day { border: 1px solid var(--border-weak); border-radius: var(--radius-md); background: var(--surface-1); overflow: hidden; } .week-day-header { display: flex; justify-content: space-between; align-items: baseline; padding: 10px var(--space-4); background: var(--surface-2); font-size: 13px; font-weight: 700; text-transform: capitalize; } .week-day-header.is-today { color: var(--pulse-primary); } .week-day-shifts { display: flex; flex-direction: column; } .week-day-shifts .list-row { border: none; border-top: 1px solid var(--border-weak); border-radius: 0; background: transparent; } .week-day-empty { padding: 10px var(--space-4); color: var(--text-muted); font-size: 13px; } /* ---------- Team / Matrix-chatt (samma API som B2B:s matrixChat.js) ---------- */ .team-rooms { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); overflow-x: auto; } .team-room-tab { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none; } .team-room-tab.is-active { border-color: var(--pulse-primary); color: var(--pulse-primary); background: var(--surface-2); } .team-thread { display: flex; flex-direction: column; gap: var(--space-3); min-height: 160px; margin-bottom: var(--space-4); } .team-msg { max-width: 86%; } .team-msg-meta { display: flex; gap: 6px; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; } .team-msg-body { background: var(--surface-1); border: 1px solid var(--border-weak); border-radius: var(--radius-md); padding: 10px 12px; font-size: 14px; } .team-msg.is-mine { margin-left: auto; } .team-msg.is-mine .team-msg-body { background: color-mix(in srgb, var(--pulse-primary) 16%, var(--surface-1)); border-color: var(--pulse-primary-border, var(--pulse-primary)); } .team-composer { display: flex; gap: var(--space-2); } .team-composer .input { flex: 1; padding: 12px 14px; border-radius: var(--radius-pill); font-size: 14px; } .team-composer button { border: none; background: var(--pulse-primary); color: var(--pulse-primary-contrast); border-radius: 50%; width: 42px; height: 42px; font-size: 16px; cursor: pointer; flex: none; } .team-offline { padding: var(--space-4); text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-md); font-size: 13px; } .briefing-body { display: flex; flex-direction: column; gap: var(--space-3); } .briefing-stat { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--surface-1); border: 1px solid var(--border-weak); border-radius: var(--radius-md); } .briefing-stat .stat-value { font-family: var(--font-mono); color: var(--pulse-primary); font-weight: 700; } .profile-card { text-align: center; padding: var(--space-6) 0 var(--space-4); } .profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto var(--space-3); } .profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .profile-name { font-size: 18px; font-weight: 600; margin: 0; } .profile-email { color: var(--text-muted); margin: 2px 0 0; font-size: 13px; } .profile-fineprint { color: var(--text-muted); font-size: 12px; text-align: center; margin-top: var(--space-4); } .section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .section-title-row .section-title { margin-bottom: 0; } .profile-view { display: flex; flex-direction: column; gap: var(--space-3); } .profile-field { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-weak); border-radius: var(--radius-md); background: var(--surface-1); } .profile-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .profile-field-value { color: var(--text-primary); font-size: 15px; white-space: pre-wrap; } /* .input/.textarea coloring comes from shared components.css — only layout spacing is Employee-specific here. */ .profile-edit-form { display: flex; flex-direction: column; gap: var(--space-2); } .profile-edit-form .field-label { font-size: 12px; color: var(--text-secondary); margin-top: var(--space-2); } .profile-edit-form .textarea { min-height: 90px; } .profile-edit-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); } /* ---------- Dock (samma visuella språk som B2B .macos-dock/.items/.item) ---------- */ .macos-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-top: 1px solid var(--border); border-radius: var(--dock-radius, 0px) var(--dock-radius, 0px) 0 0; padding: 10px max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)); background: var(--shell-surface-strong, rgba(16, 33, 38, 0.96)); backdrop-filter: blur(12px); } .macos-dock .items { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); width: min(94vw, 520px); border: 1px solid var(--border-weak); border-radius: 9999px; padding: 6px 10px; background: var(--shell-surface, var(--surface-1)); } .macos-dock .item { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: transparent; cursor: pointer; padding: 6px 4px 4px; color: var(--text-muted); } .macos-dock .dock-icon { width: var(--dock-icon-size); height: var(--dock-icon-size); display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(28, 28, 32, 0.35); color: inherit; transition: transform 120ms ease-out, background 180ms ease, border-color 180ms ease; } .macos-dock .dock-icon svg { width: var(--dock-svg-size); height: var(--dock-svg-size); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .macos-dock .dock-label { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; } .macos-dock .item[aria-current="page"] { color: color-mix(in srgb, var(--pulse-primary) 100%, transparent); } .macos-dock .item[aria-current="page"] .dock-icon { background: color-mix(in srgb, var(--pulse-primary-strong) 22%, transparent); border-color: color-mix(in srgb, var(--pulse-primary) 30%, transparent); } .macos-dock .item:active .dock-icon { transform: scale(0.92); } .macos-dock .dock-badge { position: absolute; top: 2px; right: 6px; background: var(--pulse-primary); color: var(--pulse-primary-contrast); font-size: 10px; font-weight: 700; border-radius: var(--radius-pill); min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* ---------- Door Mode ---------- */ .view-door { background: #0a181b; color: #f7ebd8; height: 100vh; } .door-topbar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-4) var(--space-2); } .door-exit, .door-scan-toggle { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary); min-width: 44px; min-height: 44px; border-radius: 50%; font-size: 16px; cursor: pointer; } .door-scan-toggle { width: auto; border-radius: var(--radius-pill); padding: 0 16px; font-weight: 700; } .door-title { font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; color: var(--text-muted); } .door-capacity { text-align: center; margin: var(--space-4) 0; font-family: var(--font-mono); } .door-capacity span:first-child, #door-inside { font-size: 48px; font-weight: 700; color: var(--pulse-primary); } .door-capacity-sep { font-size: 32px; color: var(--text-muted); margin: 0 4px; } #door-capacity-max { font-size: 32px; color: var(--text-secondary); } .door-capacity-label { display: block; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; } .door-sync-status { display: block; margin-top: 8px; color: var(--text-muted); font: 12px/1.4 var(--font-sans, inherit); } .door-scanner { padding: 0 var(--space-5); margin-bottom: var(--space-3); } .door-scanner-frame { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; color: var(--text-muted); margin-bottom: var(--space-3); } .door-scan-input { padding: 14px 16px; font-size: 16px; } .door-result { margin: var(--space-3) var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); text-align: center; font-size: 22px; font-weight: 700; } .door-result.ok { background: rgba(191, 224, 204, 0.15); color: var(--success); border: 1px solid var(--success); } .door-result.warn { background: rgba(240, 205, 163, 0.15); color: var(--warning); border: 1px solid var(--warning); } .door-result.bad { background: rgba(232, 188, 196, 0.15); color: var(--danger); border: 1px solid var(--danger); } .door-buttons { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: var(--space-3) 0; } .door-btn { border: none; font-size: 40px; font-weight: 800; letter-spacing: 2px; cursor: pointer; color: var(--text-on-accent); min-height: 220px; } .door-btn-in { background: var(--success); } .door-btn-out { background: var(--danger); } .door-btn:active { filter: brightness(0.85); } .door-incident-btn { margin: var(--space-4); padding: 16px; border-radius: var(--radius-md); background: var(--danger-base); color: var(--danger); border: 1px solid var(--danger); font-weight: 700; cursor: pointer; } /* ---------- Incident ---------- */ .view-incident { padding: 0 var(--space-4) var(--space-5); } .incident-title { font-weight: 700; } .incident-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: var(--space-4) 0; } .incident-chip { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); border-radius: var(--radius-md); padding: var(--space-4) var(--space-2); text-align: center; font-weight: 600; cursor: pointer; font-size: 14px; } .incident-chip.is-selected { border-color: var(--pulse-primary); color: var(--pulse-primary); background: var(--surface-2); } .incident-desc { min-height: 90px; margin-bottom: var(--space-4); } .incident-severity-label { display: block; color: var(--text-secondary); font-size: 13px; margin-bottom: 6px; } .incident-severity { width: 100%; min-height: 44px; margin-bottom: var(--space-3); } .incident-confirm { text-align: center; color: var(--success); margin-top: var(--space-4); font-weight: 600; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--elevated-surface); border: 1px solid var(--border); color: var(--text-primary); padding: 10px 18px; border-radius: var(--radius-pill); font-size: 13px; z-index: 999; max-width: 90%; text-align: center; } /* ---------- Canonical B2B shell integration ---------- */ .app-shell { width: 100%; max-width: none; } .view-main { min-height: 100vh; padding-bottom: 0; } .preview-banner { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 0 28px; padding: 8px 14px; border: 1px solid var(--borderSubtle); border-radius: 12px; background: var(--warning-bg); color: var(--warning-tx); font-size: 13px; } .preview-banner a { color: inherit; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; } .workspace-context-row { display: flex; justify-content: center; margin-bottom: 18px; } .view-main .pane { width: min(100%, 1280px); margin: 0 auto; padding: 0 0 var(--space-6); } #pane-home:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 20px; } #pane-home .hero-shift { grid-column: 1; } #pane-home .quick-grid { grid-column: 1; } #pane-home .section-block { grid-column: 2; margin: 0; } #pane-home .section-block + .section-block { align-self: start; } #employee-drawer.employee-drawer { inset: 0 auto 0 -360px; padding: 22px 16px; border-right: 1px solid var(--border); background: var(--surface); transform: none; transition: left 280ms ease; } #employee-drawer.employee-drawer.open { left: 0; } #employee-drawer .drawer-nav { gap: 20px; } #employee-drawer .drawer-nav-section { gap: 2px; } #employee-drawer .drawer-nav-section h3 { padding: 0 10px; } #employee-drawer .drawer-nav button { min-height: 44px; padding: 9px 10px; font-weight: 400; } .employee-dock-cust { position: fixed; bottom: 92px; left: 50%; z-index: 60; transform: translateX(-50%); } @media (max-width: 760px) { .preview-banner { align-items: flex-start; margin: 0 16px; flex-wrap: wrap; justify-content: flex-start; } #pane-home:not([hidden]) { grid-template-columns: 1fr; } #pane-home .hero-shift, #pane-home .quick-grid, #pane-home .section-block { grid-column: 1; } .top-actions .btn-round:first-child { display: none; } }