/* ── CONARTIST — MAIN LAYOUT & DESIGN SYSTEM ── */ :root { --bg: #F7F5F0; --bg-card: #FFFFFF; --bg-sidebar: #FDFCF9; --accent: #C27B5A; --accent-light: #F2E8E1; --accent-dark: #9E5E40; --text-primary: #1C1917; --text-secondary: #6B6560; --text-muted: #A8A29E; --border: #E8E3DC; --border-strong: #D4CEC6; /* Danger / destructive palette — shared by .btn-danger, delete/clear buttons, low-stock badges, archived-view banner. Keep as tokens so future dark-mode / branding swaps land in one place. */ --danger: #B91C1C; --danger-border: #FCA5A5; --danger-bg: #FEF2F2; --sidebar-width: 220px; --tab-bar-height: 72px; --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif; --font-body: 'DM Sans', -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* Ensure text selection works — double-click to select word / triple-click to select line. Why the broad selector: browser UA styles set user-select:none on buttons by default and some flex/inline-block layouts confuse the word-boundary detector if the inherited value is "auto". Forcing "text" on anything that holds visible content makes double-click reliable. */ body, p, div, span, td, th, li, h1, h2, h3, h4, h5, h6, label, pre, code, small, strong, em, b, i, a, mark, time, abbr { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } input, textarea, [contenteditable] { -webkit-user-select: text !important; user-select: text !important; } html, body { height: 100%; font-family: var(--font-body); background: var(--bg); color: var(--text-primary); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── APP SHELL ── */ #app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } /* ── DESKTOP: sidebar layout ── Why 1280px (not 1024px): the 12.9"/13" iPad Pro is 1366×1024 in landscape, which was hitting min-width:1024 and showing the desktop sidebar even on tablet. 1280px keeps every iPad on bottom-nav while still catching real desktop monitors. */ @media (min-width: 1280px) { #app { flex-direction: row; } #sidebar { display: flex; } #bottom-nav { display: none; } #main { margin-left: var(--sidebar-width); padding-bottom: 0; } } /* ── IPAD/MOBILE: bottom tab layout ── */ @media (max-width: 1279px) { #sidebar { display: none; } #bottom-nav { display: flex; } #main { padding-bottom: var(--tab-bar-height); } } /* POS-only nav minimise — the cashier toggles it from a small handle on the POS screen. The class is applied to so it can hide both #sidebar and #bottom-nav without media-query gymnastics; switchTab() strips it whenever POS is no longer the active screen so other tabs always show nav. */ body.pos-nav-hidden #sidebar, body.pos-nav-hidden #bottom-nav { display: none !important; } body.pos-nav-hidden #main { margin-left: 0 !important; padding-bottom: 0 !important; } /* POS nav-toggle handle. Positioned flush against the inner edge of whichever nav surface is showing, so it visually "connects" to the menu instead of floating in space. When nav is hidden it slides to the screen edge. Two vertical lines inside read as a drag-handle. */ .pos-nav-toggle { position: fixed; z-index: 9990; border: none; padding: 0; cursor: pointer; background: #2C2927; color: #A8A29E; box-shadow: 1px 0 4px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; transition: left 0.15s, bottom 0.15s, background 0.15s; } .pos-nav-toggle:hover { background: #3C3936; } .pos-nav-toggle-lines { display: flex; gap: 3px; align-items: center; justify-content: center; line-height: 0; } /* Desktop: handle is a thin vertical bar attached to the right edge of #sidebar. 16px wide × 48px tall — small, doesn't compete with content. Lines inside are vertical (||) since the bar itself is vertical. When nav is hidden it pins to the left edge of the viewport so the user can re-open it. */ @media (min-width: 1280px) { .pos-nav-toggle { width: 16px; height: 48px; top: 50%; transform: translateY(-50%); left: var(--sidebar-width); border-radius: 0 6px 6px 0; } .pos-nav-toggle-lines { flex-direction: row; } .pos-nav-toggle-lines span { width: 2px; height: 18px; background: #A8A29E; border-radius: 1px; display: block; } body.pos-nav-hidden .pos-nav-toggle { left: 0; } } /* iPad/mobile: handle sits flush above #bottom-nav. The bar itself is horizontal (56px wide × 16px tall) and the lines inside are horizontal (=) so they read as a drag-up handle. When nav is hidden it pins to the bottom edge. */ @media (max-width: 1279px) { .pos-nav-toggle { width: 56px; height: 16px; left: 50%; transform: translateX(-50%); bottom: var(--tab-bar-height); border-radius: 6px 6px 0 0; box-shadow: 0 -1px 4px rgba(0,0,0,0.25); } .pos-nav-toggle-lines { flex-direction: column; } .pos-nav-toggle-lines span { height: 2px; width: 18px; background: #A8A29E; border-radius: 1px; display: block; } body.pos-nav-hidden .pos-nav-toggle { bottom: 0; } } /* ── SIDEBAR ── */ #sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--bg-sidebar); border-right: 1px solid var(--border); flex-direction: column; z-index: 100; padding: 0; } .sidebar-header { padding: 28px 24px 20px; border-bottom: 1px solid var(--border); } /* When a logo image is uploaded, the store-name tagline sits directly below the logo and centers — looks more like a brand block. Without a logo, the default left-aligned layout pairs better with the "ConArtist" wordmark. */ .sidebar-header.sidebar-header--with-logo { text-align: center; } .sidebar-header.sidebar-header--with-logo .sidebar-logo { display: flex; justify-content: center; } .sidebar-logo { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.3px; } .sidebar-logo span { color: var(--accent); } .sidebar-tagline { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 300; letter-spacing: 0.5px; text-transform: uppercase; } .sidebar-nav { padding: 16px 12px; flex: 1; display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s ease; border: none; background: none; width: 100%; text-align: left; color: var(--text-secondary); font-family: var(--font-body); font-size: 14px; font-weight: 400; text-decoration: none; position: relative; } .nav-item:hover { background: var(--accent-light); color: var(--text-primary); } .nav-item.active { background: var(--accent-light); color: var(--accent-dark); font-weight: 500; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; } .nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; } .nav-label { font-size: 14px; } .sidebar-footer { padding: 16px 24px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); letter-spacing: 0.3px; } /* ── CHANNEL CATEGORY DRAG & DROP ── */ .cat-drop-active { background: var(--accent-light) !important; border-color: var(--accent) !important; border-style: dashed !important; } .channel-drag-handle:hover { color: var(--accent) !important; } .channel-drag-handle:active { cursor: grabbing !important; } /* ── FIELD ERRORS ── Themed via --error-color so users can re-tint validation red from Theme settings. The actual error message is now a positioned tooltip (shared/tooltip.js) — these rules just style the input ring so the field reads as invalid at a glance. */ .field-error { border-color: var(--error-color, #B91C1C) !important; background: color-mix(in oklab, var(--error-color, #B91C1C) 6%, transparent) !important; } .field-error:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--error-color, #B91C1C) 12%, transparent) !important; } /* ── PRINT MEDIA — hide app, show only print-receipt ── */ @media print { @page { size: A4; margin: 10mm; } html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; width: auto !important; min-height: 0 !important; height: auto !important; } body > *:not(#print-receipt) { display: none !important; } #print-receipt { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; } /* Reset spacing on the slip's outer container so it starts flush with the @page margin. Anything inside the template still controls its own internal padding. */ #print-receipt > * { margin-top: 0 !important; padding-top: 0 !important; } /* Browser default heading margins were the "huge gap" culprit — h1/h2/h3 normally come with ~0.67em top margin which adds invisible space at the top of the print. */ #print-receipt h1, #print-receipt h2, #print-receipt h3, #print-receipt h4 { margin-top: 0 !important; padding-top: 0 !important; page-break-after: avoid; } #print-receipt img { max-width: 100% !important; } /* Pagination — let tables flow naturally, but keep a row from splitting in half. */ #print-receipt table { page-break-inside: auto; } #print-receipt tr { page-break-inside: avoid; page-break-after: auto; } #app { display: none !important; } /* Strip shadows so they don't render as ghost rectangles */ * { box-shadow: none !important; } } /* ── SIDEBAR ACCOUNT CHIP ── */ .sidebar-account { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 8px; border-radius: var(--radius-md); cursor: pointer; transition: background 0.12s ease; border-top: 1px solid var(--border); margin-top: auto; min-width: 0; } .sidebar-account:hover { background: var(--accent-light); } .sidebar-account-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; overflow: hidden; } .sidebar-account-avatar img { width: 100%; height: 100%; object-fit: cover; } .sidebar-account-info { flex: 1; min-width: 0; } .sidebar-account-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-account-email { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .sidebar-account-caret { color: var(--text-muted); font-size: 16px; flex-shrink: 0; letter-spacing: 1px; } .sidebar-account-menu { position: fixed; bottom: 72px; left: 12px; width: calc(var(--sidebar-width) - 24px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 6px; z-index: 200; animation: fadeIn 0.12s ease; } .sidebar-account-menu button { width: 100%; padding: 9px 12px; border: none; background: none; text-align: left; font-family: inherit; font-size: 13px; color: var(--text-primary); cursor: pointer; border-radius: 6px; } .sidebar-account-menu button:hover { background: var(--accent-light); color: var(--accent-dark); } /* ── BOTTOM TAB BAR ── */ #bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--tab-bar-height); background: rgba(253, 252, 249, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); z-index: 100; align-items: stretch; padding-bottom: env(safe-area-inset-bottom, 0px); } .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; border: none; background: none; color: var(--text-muted); font-family: var(--font-body); transition: color 0.15s ease; padding: 8px 4px; min-height: 44px; } .tab-item.active { color: var(--accent); } .tab-item .tab-icon { font-size: 20px; line-height: 1; } .tab-item .tab-label { font-size: 10px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; } /* ── MAIN CONTENT ── */ #main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; } @media (min-width: 1280px) { #main { margin-left: var(--sidebar-width); } } /* ── SCREENS ── */ .screen { display: none; min-height: 100%; } .screen.active { display: block; } /* ── PAGE HEADER ── */ .page-header { padding: 32px 28px 20px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 10; } @media (max-width: 1279px) { .page-header { padding: 24px 20px 16px; } } .page-title { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.5px; } .page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-weight: 300; } /* ── SCREEN BODY ── */ .screen-body { padding: 28px; } @media (max-width: 1279px) { .screen-body { padding: 20px; } } /* ── PLACEHOLDER CARDS ── */ .placeholder-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; box-shadow: var(--shadow-sm); } .placeholder-icon { font-size: 40px; margin-bottom: 16px; display: block; opacity: 0.6; } .placeholder-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; } .placeholder-desc { font-size: 14px; color: var(--text-muted); max-width: 340px; margin: 0 auto; line-height: 1.6; font-weight: 300; } .coming-soon-badge { display: inline-block; margin-top: 16px; padding: 4px 12px; background: var(--accent-light); color: var(--accent-dark); border-radius: 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } /* ── STATS ROW (placeholder) ── */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-sm); } .stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; margin-bottom: 6px; } .stat-value { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--text-primary); } .stat-value.accent { color: var(--accent); } /* ── CHANNEL PILLS ── */ .channel-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .channel-pill { padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; border: 1px solid; } .channel-pill.shopify { background: #EDF7EE; color: #2D6A30; border-color: #B8DFB9; } .channel-pill.etsy { background: #FEF0E8; color: #C8431A; border-color: #F9C8AA; } .channel-pill.con { background: var(--accent-light); color: var(--accent-dark); border-color: #E8C8B5; } .channel-pill.other { background: #F0EFFF; color: #4A47A3; border-color: #C8C7F0; } /* ── POS SCREEN DISTINCTION ── */ #screen-pos .page-header { background: #1C1917; border-bottom-color: #2C2927; } #screen-pos .page-title { color: #F7F5F0; } #screen-pos .page-subtitle { color: #6B6560; } #screen-pos .screen-body { background: #1C1917; min-height: calc(100dvh - 80px); } .pos-placeholder { background: #2C2927; border: 1px solid #3C3936; border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; } .pos-placeholder .placeholder-title { color: #F7F5F0; } .pos-placeholder .placeholder-desc { color: #6B6560; } /* ── FADE IN ANIMATION ── */ .screen.active { animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── SCROLLBAR ── */ #main::-webkit-scrollbar { width: 4px; } #main::-webkit-scrollbar-track { background: transparent; } #main::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }