/* ============================================================ GROOMSKART · css/gk.css — the ONE master design system. Apple-style neutral palette, glass materials, light + dark theme. Layers, in order: 1. Tokens — palette (light/dark), type, radius, shadow, motion 2. Base — reset, focus, scrollbars, safe-area 3. Bootstrap — re-skin of card, form fields, buttons, modal, dropdown 4. Shared — header, buttons, fields, modals-as-sheets, PIN gate, toast, chalks/chips, order cards, tables, tabs, empty 5. Pages — page-specific rules, added one page at a time as each page is redesigned (nothing here yet — foundation only) THEME CONTRACT — read before editing: carries data-theme="light"|"dark", set by js/theme.js (and, on first paint, by a synchronous inline script in every page's , before this stylesheet is even requested, so there is no flash). Every color a component uses must be one of the tokens below — never a raw hex — or it will not re-theme. LEGACY ALIASES — read before renaming anything: The JS (page-index.js, page-dashboard.js, page-payouts.js, page-tailor.js) builds markup with inline `style="color:var(--gold-hi)"` etc. in ~60 places, and gk.css itself still uses the old names in many selectors below. Renaming a token breaks those call sites silently. The --gold/--cream/--mut/... names are kept forever as aliases onto the real semantic tokens (--accent/--text/--text-2/...) — change what they POINT TO, never their names. ============================================================ */ /* same-origin page-to-page navigation (index.html <-> dashboard.html <-> payouts.html <-> tailor.html) gets a smooth cross-fade instead of the default hard white flash — a declarative browser feature, needs this one rule on both the page you're leaving and the one you're landing on, which "both" is automatic here since every page shares this one stylesheet. No-op, zero risk, on any browser that doesn't support it yet. */ @view-transition{ navigation:auto; } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:var(--dur); animation-timing-function:var(--ease); } /* ---------- 1. tokens ---------- */ :root{ color-scheme: light; /* semantic tokens — light */ --bg:#F2F2F7; --surface:rgba(255,255,255,0.72); --surface-solid:#FFFFFF; --surface-2:#FFFFFF; --fill:rgba(118,118,128,0.12); --fill-strong:rgba(118,118,128,0.20); --text:#1C1C1E; --text-2:rgba(60,60,67,0.60); --text-3:rgba(60,60,67,0.38); --separator:rgba(60,60,67,0.18); --separator-strong:rgba(60,60,67,0.29); --accent:#007AFF; --accent-ink:#FFFFFF; --red:#FF3B30; --green:#34C759; --orange:#FF9500; --shadow-1:0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); --shadow-2:0 8px 30px rgba(0,0,0,0.10); --shadow-3:0 24px 70px rgba(0,0,0,0.18); --glass-highlight:inset 0 1px 0 rgba(255,255,255,0.6); /* legacy aliases — kept so every existing selector and every JS var(--...) reference re-themes for free. See header comment. */ --ink:var(--bg); --panel:var(--surface); --panel-2:var(--surface-2); --line:var(--separator); --stitch:var(--separator); --gold:var(--accent); --gold-hi:var(--text); --cream:var(--text); --mut:var(--text-2); --field:var(--fill); --blue:var(--accent); /* shape */ --r-xs:8px; --r-sm:10px; --r:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* type */ --font-ui:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display:var(--font-ui); --font-mono:ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', Consolas, monospace; /* material */ --blur:blur(20px) saturate(180%); /* motion */ --ease:cubic-bezier(.32,.72,0,1); --dur:.28s; --tap:48px; } :root[data-theme="dark"]{ color-scheme: dark; --bg:#000000; --surface:rgba(28,28,30,0.72); --surface-solid:#1C1C1E; --surface-2:#2C2C2E; --fill:rgba(118,118,128,0.24); --fill-strong:rgba(118,118,128,0.32); --text:#FFFFFF; --text-2:rgba(235,235,245,0.60); --text-3:rgba(235,235,245,0.38); --separator:rgba(84,84,88,0.60); --separator-strong:rgba(84,84,88,0.75); /* dark mode only: gold instead of the light theme's blue — accent-ink flips to a dark ink to go with it, since white text on a light-ish gold background reads as washed out (fails contrast); every spot that puts text on a solid --accent fill needs to use --accent-ink, not a hardcoded #fff, or it silently breaks here (see the THEME CONTRACT note at the top of this file) */ --accent:#D4AF37; --accent-ink:#1C1C1E; --red:#FF453A; --green:#30D158; --orange:#FF9F0A; --shadow-1:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35); --shadow-2:0 8px 30px rgba(0,0,0,0.45); --shadow-3:0 24px 70px rgba(0,0,0,0.6); --glass-highlight:inset 0 1px 0 rgba(255,255,255,0.06); } /* no explicit choice yet (pre-toggle visitors, or JS disabled): follow the system, same values as the dark block above */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ color-scheme: dark; --bg:#000000; --surface:rgba(28,28,30,0.72); --surface-solid:#1C1C1E; --surface-2:#2C2C2E; --fill:rgba(118,118,128,0.24); --fill-strong:rgba(118,118,128,0.32); --text:#FFFFFF; --text-2:rgba(235,235,245,0.60); --text-3:rgba(235,235,245,0.38); --separator:rgba(84,84,88,0.60); --separator-strong:rgba(84,84,88,0.75); --accent:#D4AF37; --accent-ink:#1C1C1E; --red:#FF453A; --green:#30D158; --orange:#FF9F0A; --shadow-1:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35); --shadow-2:0 8px 30px rgba(0,0,0,0.45); --shadow-3:0 24px 70px rgba(0,0,0,0.6); --glass-highlight:inset 0 1px 0 rgba(255,255,255,0.06); } } @supports not (backdrop-filter: blur(1px)){ :root{ --surface:var(--surface-solid); } } /* ---------- 2. base ---------- */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } html, body { max-width:100%; overflow-x:hidden; } body{ background:var(--bg); color:var(--text); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* ambient wash — soft, fixed color blobs behind everything so the app's translucent glass surfaces (cards, modals, menus, KPI tiles) actually have something to blur; without this they just look like plain flat panels since --bg on its own is a single flat color. Screen-only (no reason to print it) and skipped entirely on tailor.html (#tailorApp), which stays deliberately flat/light for weak Android GPUs. */ @media screen{ body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%), radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--green) 16%, transparent), transparent 46%), radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 55%); opacity:.55; } :root[data-theme="dark"] body::before{ opacity:.32; } #tailorApp::before{ content:none; } } .hidden{ display:none !important; } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } html{ scroll-behavior:auto; } } /* thin, unobtrusive scrollbars */ *{ scrollbar-width:thin; scrollbar-color:var(--separator-strong) transparent; } *::-webkit-scrollbar{ width:8px; height:8px; } *::-webkit-scrollbar-track{ background:transparent; } *::-webkit-scrollbar-thumb{ background:var(--separator-strong); border-radius:99px; } /* loading spinner — JS toggles .spinning on the refresh buttons themselves (page-dashboard.js, page-payouts.js), but only the icon span should spin, not the whole "🔄 Reset" row (that looked like the button was rotating) */ .spinning .spin-icon{ animation:gkSpin .7s linear infinite; display:inline-block; } @keyframes gkSpin{ to{ transform:rotate(360deg); } } /* shared entrance motion — every list this app renders (order cards, KPI tiles, balance rows, garment/day chips) is a full innerHTML replace, so a CSS animation on the class itself replays on every re-render for free, no JS involved. transform/opacity only — cheap even on weak GPUs. */ @keyframes gkFadeUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } .oc, .kpi, .pw-row, .gchip, .day{ animation:gkFadeUp .32s var(--ease) both; } /* cascade the first few items in rather than have the whole list pop at once — capped at 5 steps so a long work queue doesn't grow a multi-second delayed tail; everything past that still animates, just together */ .oc:nth-child(2), .kpi:nth-child(2), .pw-row:nth-child(2), .gchip:nth-child(2), .day:nth-child(2){ animation-delay:.03s; } .oc:nth-child(3), .kpi:nth-child(3), .pw-row:nth-child(3), .gchip:nth-child(3), .day:nth-child(3){ animation-delay:.06s; } .oc:nth-child(4), .kpi:nth-child(4), .pw-row:nth-child(4), .gchip:nth-child(4), .day:nth-child(4){ animation-delay:.09s; } .oc:nth-child(n+5), .pw-row:nth-child(n+5), .gchip:nth-child(n+5){ animation-delay:.12s; } /* the ☰ menu / any Bootstrap dropdown gets a soft pop-in instead of snapping open instantly */ .dropdown-menu{ animation:gkPopIn .16s var(--ease) both; transform-origin:top right; } @keyframes gkPopIn{ from{ opacity:0; transform:scale(.94) translateY(-4px); } to{ opacity:1; transform:none; } } /* ---------- 3. bootstrap re-skin ---------- */ .card{ background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--separator); border-radius:var(--r); margin-bottom:16px; box-shadow:var(--shadow-1), var(--glass-highlight); } .card-header{ background:transparent !important; color:var(--text-2) !important; font-family:var(--font-display); font-weight:700 !important; font-size:0.72rem !important; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--separator) !important; padding:14px 18px 12px; } .card-body, .card.p-3{ padding:18px; } label, .form-label{ color:var(--text-2) !important; font-weight:600; font-size:0.72rem !important; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:4px; } .text-warning{ color:var(--accent) !important; } .text-info{ color:var(--accent) !important; } .text-muted{ color:var(--text-2) !important; } .text-success{ color:var(--green) !important; } .bright-label{ color:var(--text) !important; font-weight:700; } .form-control, .form-select{ background:var(--fill) !important; border:1px solid transparent !important; color:var(--text) !important; font-weight:500; border-radius:var(--r-sm); padding:10px 12px; min-height:var(--tap); transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .form-control::placeholder{ color:var(--text-3) !important; opacity:1; font-weight:400; } .form-control:focus, .form-select:focus{ border-color:transparent !important; background:var(--surface-2) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) !important; } .form-control.is-invalid, .form-select.is-invalid{ box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent) !important; } input[type="date"]{ color-scheme:inherit; } /* every number input, app-wide — not just the Pcs counter — loses the browser's own up/down spin control. It's drawn by the OS, not this stylesheet, so it can't be reshaped to match the glass UI; it only shows on hover/focus, which is why it seemed to appear on some fields (whichever you'd last touched) and not others, even though every number field had the same untouched default. */ input[type="number"]{ -moz-appearance:textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } textarea.form-control{ min-height:64px; } input[type="file"].form-control{ padding:9px 12px; } input[type="file"]::file-selector-button{ background:var(--surface-2); color:var(--accent); border:1px solid var(--separator); border-radius:var(--r-xs); padding:4px 10px; margin-right:10px; font-weight:600; } .form-check-input{ background-color:var(--fill); border-color:var(--separator-strong); width:1.35em; height:1.35em; } .form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); } /* native lays its label + the browser's own picker-icon out in a row via its UA default display — but Bootstrap's .form-select forces display:block (it draws its own arrow as a CSS background-image instead), which breaks that row and stacks the two on separate lines. Restore the row, scoped to browsers that actually support the feature so nothing else changes elsewhere. */ @supports selector(::picker(select)){ select.form-select, .form-select{ display:flex !important; align-items:center; justify-content:space-between; gap:8px; background-image:none !important; } } select::picker(select){ appearance:base-select; background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--separator); border-radius:var(--r); box-shadow:var(--shadow-2), var(--glass-highlight); padding:6px; margin-top:6px; } select option{ color:var(--text); border-radius:var(--r-xs); padding:10px 12px; font-weight:500; } select option:hover, select option:focus{ background:var(--fill); } select option:checked{ background:var(--accent); color:var(--accent-ink); } .gk-mono-field{ color:var(--text) !important; font-family:var(--font-mono); font-weight:600; } .btn{ border-radius:var(--r-sm); font-weight:600; letter-spacing:0; transition:transform .15s var(--ease), filter .15s var(--ease), background-color .15s var(--ease); } .btn:active{ transform:scale(.97); } .btn-gold, .btn-primary{ background:var(--accent); color:var(--accent-ink); border:none; font-weight:600; } .btn-gold:hover, .btn-primary:hover{ filter:brightness(1.08); color:var(--accent-ink); } .btn-gold:disabled, .btn-primary:disabled{ filter:grayscale(0.4) brightness(0.85); opacity:.5; color:var(--accent-ink); } .btn-success{ background:var(--green); border:none; color:#fff; } .btn-success:hover{ filter:brightness(1.08); color:#fff; } .btn-outline-light{ border-color:var(--separator); color:var(--text); background:transparent; } .btn-outline-light:hover{ background:var(--fill); border-color:var(--separator-strong); color:var(--text); } .btn-outline-light:disabled{ border-color:var(--separator); color:var(--text-3); } .btn-outline-info{ border-color:var(--separator); color:var(--accent); } .btn-outline-info:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:var(--accent); color:var(--accent); } .btn-outline-danger{ border-color:var(--separator); color:var(--red); } .btn-outline-danger:hover{ background:color-mix(in srgb, var(--red) 12%, transparent); border-color:var(--red); color:var(--red); } .btn-outline-success{ border-color:var(--separator); color:var(--green); } .btn-outline-success:hover{ background:color-mix(in srgb, var(--green) 12%, transparent); border-color:var(--green); color:var(--green); } .btn-outline-secondary{ border-color:var(--separator); color:var(--text-2); } .btn-outline-secondary:hover{ background:var(--fill); border-color:var(--separator-strong); color:var(--text); } .btn-outline-dark{ border-color:var(--separator); color:var(--text); } .btn-outline-dark:hover{ background:var(--fill); color:var(--text); border-color:var(--separator-strong); } .btn-dark{ background:var(--surface-2); border:1px solid var(--separator); color:var(--text); } .btn-dark:hover{ background:var(--fill); } /* segmented radio groups — Apple UISegmentedControl treatment */ .btn-group{ gap:0; background:var(--fill); border-radius:var(--r-sm); padding:2px; } .btn-check + .btn, .btn-check + .btn-outline-gold, .btn-outline-gold{ background:transparent; border:none !important; color:var(--text-2); border-radius:calc(var(--r-sm) - 2px) !important; font-weight:600; font-size:0.86rem; padding:11px 4px; min-height:calc(var(--tap) - 4px); } .btn-check:checked + .btn, .btn-check:checked + .btn-outline-gold{ background:var(--surface-solid) !important; color:var(--text) !important; box-shadow:var(--shadow-1); } .btn-check:focus-visible + .btn{ outline:2px solid var(--accent); outline-offset:2px; } /* dropdown (☰ menu) — Apple action-sheet / popover treatment */ .dropdown-menu{ background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--separator); border-radius:var(--r); box-shadow:var(--shadow-2), var(--glass-highlight); } .dropdown-item{ color:var(--text); } .dropdown-item:hover, .dropdown-item:focus{ background:var(--fill); color:var(--text); } /* modals — sheet on mobile (slides up from the bottom edge), centered glass panel on desktop. No JS or markup changes: Bootstrap's own .modal-dialog transform (used for its fade/slide transition) is simply redirected. */ .modal { z-index: 20000 !important; } .modal-backdrop { z-index: 19000 !important; background:#000; } .modal-backdrop.show{ opacity:.4; } /* replace Bootstrap's own linear-ish modal transition with the app's spring easing, so opening a modal feels like the rest of the UI */ .modal.fade .modal-dialog{ transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .modal-content{ background:var(--surface) !important; color:var(--text) !important; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:none !important; border-radius:var(--r-lg); box-shadow:var(--shadow-3), var(--glass-highlight); } .modal-header{ border-bottom:1px solid var(--separator); padding:18px 20px 14px; } .modal-title{ font-family:var(--font-display); color:var(--text); font-weight:700; letter-spacing:0; } .modal-footer{ border-top:1px solid var(--separator); flex-wrap:wrap; gap:8px; padding:14px 20px 18px; } .modal-header .btn-close{ filter:none; opacity:.5; } :root[data-theme="dark"] .modal-header .btn-close{ filter:invert(1); opacity:.65; } .modal-body{ font-size:1em; font-weight:400; } @media (max-width:700px){ .modal-dialog{ margin:0; position:fixed; left:0; right:0; bottom:0; max-width:none; width:100%; } .modal-dialog-centered{ min-height:0 !important; } .modal.fade .modal-dialog{ transform:translateY(100%); transition:transform var(--dur) var(--ease); } .modal.show .modal-dialog{ transform:translateY(0); } .modal-content{ border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:88vh; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom); } .modal-dialog-scrollable .modal-content{ max-height:88vh; } /* grab handle, the universal sheet affordance */ .modal-content::before{ content:''; display:block; width:36px; height:5px; border-radius:99px; background:var(--separator-strong); margin:10px auto 2px; } } /* ---------- 4. shared components ---------- */ /* header / nav bar */ .gk-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; row-gap:8px; } .gk-logo{ font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--text); letter-spacing:-0.01em; line-height:1; } .gk-logo span{ color:var(--text-2); font-size:0.6em; font-weight:600; letter-spacing:0.14em; margin-left:6px; } .gk-ctx, .gk-sub{ font-family:var(--font-ui); font-size:0.82rem; color:var(--text-2); margin-top:6px; min-height:1.1em; letter-spacing:0; font-weight:500; } .gk-pill{ background:var(--fill); color:var(--text); border:none; padding:9px 14px; border-radius:var(--r-pill); font-weight:600; font-size:0.82rem; text-decoration:none; white-space:nowrap; cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:38px; transition:background-color .15s var(--ease), transform .15s var(--ease); } .gk-pill:active{ transform:scale(.96); } .gk-pill:hover{ color:var(--accent); background:var(--fill-strong); } .gk-pillrow{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; } @media (max-width:560px){ .gk-pill{ padding:7px 11px; font-size:0.74rem; min-height:34px; } } .gk-menu{ background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--separator); border-radius:var(--r); padding:6px; min-width:190px; box-shadow:var(--shadow-2), var(--glass-highlight); z-index:2000; } .gk-menu .dropdown-item{ color:var(--text); font-family:var(--font-ui); font-weight:600; font-size:0.88rem; padding:11px 12px; border-radius:var(--r-xs); display:flex; align-items:center; gap:10px; min-height:var(--tap); transition:background-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease); } .gk-menu .dropdown-item:hover, .gk-menu .dropdown-item:focus{ background:var(--fill); color:var(--accent); } .gk-menu .dropdown-item:active{ transform:scale(.97); } .gk-theme-toggle{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:var(--r-xs); min-height:var(--tap); color:var(--text); font-weight:600; font-size:0.88rem; } .gk-theme-switch{ position:relative; width:46px; height:28px; border-radius:99px; background:var(--fill-strong); border:none; flex:none; cursor:pointer; transition:background-color .2s var(--ease); } .gk-theme-switch::after{ content:''; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s var(--ease); } .gk-theme-switch[aria-pressed="true"]{ background:var(--accent); } .gk-theme-switch[aria-pressed="true"]::after{ transform:translateX(18px); } @media (min-width:900px){ #gkMenuBtn{ display:none; } .gk-pillrow .dropdown{ display:contents; } .gk-menu{ display:flex !important; position:static !important; inset:auto !important; transform:none !important; margin:0 !important; padding:0; gap:8px; background:none; border:none; box-shadow:none; min-width:0; -webkit-backdrop-filter:none; backdrop-filter:none; } .gk-menu .dropdown-item{ display:inline-flex !important; width:auto; align-items:center; gap:6px; background:var(--fill); color:var(--text); border:none; border-radius:var(--r-pill); padding:9px 14px; font-size:0.82rem; font-weight:600; min-height:38px; } .gk-menu .dropdown-item:hover, .gk-menu .dropdown-item:focus{ background:var(--fill-strong); color:var(--accent); } .gk-menu .dropdown-item.gk-theme-toggle{ display:inline-flex; width:auto; background:var(--fill); border-radius:var(--r-pill); padding:5px 12px 5px 14px; min-height:38px; } } /* PIN gate */ #pinLock{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:var(--bg); font-family:var(--font-ui); } .gk-pin-card{ background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--separator); border-radius:var(--r-xl); width:min(340px, 90vw); padding:34px 28px; text-align:center; box-shadow:var(--shadow-3), var(--glass-highlight); } .gk-pin-card .gk-pin-brand{ font-family:var(--font-display); color:var(--text); font-weight:800; font-size:1.3rem; letter-spacing:-0.01em; } .gk-pin-card .gk-pin-brand span{ color:var(--text-2); font-size:0.6em; font-weight:600; letter-spacing:0.14em; } .gk-pin-card p{ color:var(--text-2); font-size:0.85rem; margin:8px 0 0; } #pinInput{ width:100%; padding:12px; font-size:1.4rem; text-align:center; margin:20px 0 12px; border-radius:var(--r-sm); border:none; outline:none; background:var(--fill); color:var(--text); font-family:var(--font-mono); letter-spacing:0.5em; } #pinInput:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } #pinUnlockBtn{ width:100%; padding:13px; font-size:0.95rem; font-weight:700; letter-spacing:0; background:var(--accent); color:var(--accent-ink); border:none; border-radius:var(--r-sm); cursor:pointer; min-height:var(--tap); } #pinError{ color:var(--red); margin-top:12px; display:none; font-weight:600; } /* toast */ #gkToast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--surface); border:1px solid var(--separator); color:var(--text); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border-radius:var(--r); padding:11px 18px; font-weight:600; font-size:0.88rem; box-shadow:var(--shadow-2), var(--glass-highlight); opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index:30000; max-width:90vw; text-align:center; } #gkToast.show{ opacity:1; transform:translateX(-50%) translateY(0); } #gkToast.err{ border-color:var(--red); color:var(--red); } /* chalks & chips (urgency / status) */ .chalk{ display:inline-block; font-weight:700; font-size:0.68rem; letter-spacing:0.02em; border-radius:var(--r-xs); padding:4px 8px; text-transform:uppercase; } .chalk-late{ background:var(--red); color:#fff; } .chalk-today{ background:var(--accent); color:var(--accent-ink); } .chalk-tmrw{ background:var(--orange); color:#fff; } .chalk-soon{ background:var(--fill); color:var(--text-2); } .chalk-held{ background:transparent; color:var(--red); border:1px dashed var(--red); } .status-chip{ display:inline-block; font-size:0.62rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; margin-left:8px; vertical-align:2px; } .status-stitching{ background:var(--fill); color:var(--text-2); } .status-ready{ background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); } .status-alt{ background:color-mix(in srgb, var(--red) 16%, transparent); color:var(--red); } .qty-badge{ background:var(--accent); color:var(--accent-ink); font-family:var(--font-mono); font-size:0.72rem; font-weight:700; padding:2px 6px; border-radius:var(--r-xs); margin-left:6px; vertical-align:middle; display:inline-block; letter-spacing:0; } /* order cards — translucent (tinted by the ambient wash) but deliberately NOT blurred: a dashboard list can hold dozens of these, and a backdrop blur per row is the one property here expensive enough to hurt scroll performance at that count. Chrome/menus/modals (few instances) get the full blurred-glass treatment instead. */ .oc{ background:var(--surface); border:1px solid var(--separator); border-radius:var(--r); padding:14px; margin-bottom:10px; transition:border-color .12s, transform .12s var(--ease); box-shadow:var(--glass-highlight); } .oc:active{ transform:scale(.99); } .oc:hover{ border-color:var(--separator-strong); } .oc.late{ border-left:4px solid var(--red); } .oc.today{ border-left:4px solid var(--accent); background:color-mix(in srgb, var(--accent) 5%, var(--surface)); } .oc.soon{ border-left:4px solid var(--orange); } .oc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .oc-bill{ font-family:var(--font-mono); font-weight:600; color:var(--text); font-size:1rem; } .oc-garment{ color:var(--text); font-weight:700; font-size:0.95rem; } .oc-cust, .oc-wearer{ color:var(--text-2); font-size:0.86rem; margin-top:2px; } .oc-due{ text-align:right; white-space:nowrap; } .oc-date{ color:var(--text-2); font-size:0.78rem; font-family:var(--font-mono); margin-top:5px; } .oc-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } .oc-actions .btn{ min-height:38px; } .btn-contact{ border:1px solid var(--separator); background:var(--fill); color:var(--accent); border-radius:var(--r-xs); font-weight:600; text-decoration:none; font-size:0.82rem; padding:7px 11px; display:inline-flex; align-items:center; gap:5px; } .btn-contact:hover{ background:var(--fill-strong); color:var(--accent); } .btn-wa{ color:var(--green); } .btn-wa:hover{ color:var(--green); } /* detail modal internals */ .d-sec{ color:var(--text-2); font-family:var(--font-display); font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--separator); padding-bottom:5px; margin:16px 0 8px; } .d-sec:first-child{ margin-top:0; } .m-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; } .m-cell{ background:var(--fill); border:none; border-radius:var(--r-xs); padding:7px 8px; text-align:center; } .m-cell .k{ color:var(--text-2); font-size:0.58rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; } .m-cell .v{ font-family:var(--font-mono); font-weight:600; color:var(--text); font-size:1.05rem; margin-top:2px; } .d-kv{ color:var(--text-2); font-size:0.88rem; padding:3px 0; } .d-kv b{ color:var(--text); font-weight:600; } .posture-row{ display:flex; flex-wrap:wrap; gap:6px; } .pchip{ background:var(--fill); border:none; border-radius:var(--r-xs); padding:5px 10px; font-size:0.72rem; color:var(--text-2); font-weight:600; } .pchip b{ color:var(--text); font-weight:700; } /* fabric photo in the detail modal — identical on dashboard.html + tailor.html */ #dPhoto{ max-width:100%; border-radius:var(--r-sm); border:1px solid var(--separator); margin-top:6px; } /* empty states */ .gk-empty{ background:var(--surface); border:1px dashed var(--separator-strong); border-radius:var(--r); padding:28px 16px; text-align:center; color:var(--text-2); } .gk-empty .big{ font-family:var(--font-display); color:var(--text); font-weight:700; font-size:1.05rem; letter-spacing:0; margin-bottom:6px; } /* ghost "Last:" hints */ .ghost{ font-size:0.78em; color:var(--accent) !important; display:block; margin-top:3px; font-weight:600; min-height:15px; letter-spacing:0; } /* shared output table — was defined separately in dashboard/payouts/tailor, consolidated here (one definition, three fewer copies to keep in sync) */ .gk-out-table{ width:100%; border-collapse:collapse; font-size:0.86rem; } .gk-out-table th{ text-align:left; color:var(--text-2); font-weight:700; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; padding:6px 8px; border-bottom:1px solid var(--separator); } .gk-out-table td{ padding:8px; border-bottom:1px solid var(--separator); color:var(--text); } .gk-out-table tr:last-child td{ border-bottom:none; } .pw-amt-pos{ color:var(--green); font-weight:600; } .pw-amt-neg{ color:var(--red); font-weight:600; } /* tabs — was two divergent copies (payouts.html, tailor.html), consolidated into one Apple-style segmented strip. The active pill is one shared ::before that SLIDES between tabs (transform only, cheap even on tailor.html's weak-GPU phones) instead of each tab instantly swapping its own background — translateX(100%)/(200%)/(300%) move it by exactly one indicator-width regardless of how many tabs there are (percentages on transform are relative to the element's own box, not the container), so this works unmodified whether there are 2 tabs (payouts.html) or 3 (tailor.html); only the WIDTH needs a tab-count-specific rule. */ .tabs{ display:flex; gap:2px; background:var(--fill); border-radius:var(--r-sm); padding:3px; margin-bottom:14px; position:relative; } .tabs::before{ content:''; position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 4px); background:var(--surface-solid); border-radius:calc(var(--r-sm) - 3px); box-shadow:var(--shadow-1); transition:transform .32s var(--ease); z-index:0; pointer-events:none; } .tabs:has(> .tab:nth-child(3))::before{ width:calc(33.333% - 4.5px); } .tabs:has(> .tab:nth-child(2).active)::before{ transform:translateX(100%); } .tabs:has(> .tab:nth-child(3).active)::before{ transform:translateX(200%); } .tab{ flex:1; text-align:center; background:transparent; border:none; color:var(--text-2); font-weight:600; font-size:0.82rem; padding:10px 6px; border-radius:calc(var(--r-sm) - 3px); min-height:calc(var(--tap) - 6px); cursor:pointer; position:relative; z-index:1; transition:color .15s var(--ease), transform .15s var(--ease); } .tab:active{ transform:scale(.95); } .tab.active{ color:var(--text); } .tab .n{ font-size:1.05rem; font-weight:700; } /* ============================================================ 5. pages — moved in from each page's own