:root { /* Light theme. Not built on pure white: the page is a soft gray-green base and cards/panels are true white on top, so surfaces separate and glare drops (standard light-mode elevation practice - GitHub/Material do the same). */ /* Jeddah Corniche Circuit (light counterpart): cool asphalt-gray page, white cards, timing green deepened for AA contrast on light surfaces. */ --bg:#f0f2f3; --s1:#ffffff; --s2:#e5e9ea; --s3:#eceff0; --in-bg:#ffffff; --green:#008f52; --green-h:#007d48; --green-d:#00713f; --ac-fill:#00b467; --ac-fill-h:#00a25d; /* large fills (buttons); dark overrides desaturate them */ --red:#a33b2e; --orange:#8a5c14; --blue:#2f63ad; --purple:#7a46c2; --text:#0f1215; --muted:#4f565c; --muted-l:#767e85; --border:rgba(15,18,21,.15); color-scheme:light; --accent2:rgba(0,138,80,.36); --warn:rgba(15,18,21,.38); --photo-bg:#ffffff; /* product photos are shot on white */ --line2:rgba(15,18,21,.35); --acink:#04140c; --acsoft:rgba(0,143,82,.1); --foot:#0f1215; --footink:#f2f5f2; --footmut:#9aa1a7; /* rgb-triple helpers so tinted overlays (badges, hovers, borders) stay theme-correct */ --green-rgb:0,143,82; --tint-rgb:15,18,21; --red-rgb:163,59,46; --warn-rgb:138,92,20; --purple-rgb:122,70,194; --blue-rgb:47,99,173; /* Design tokens: 8px spacing grid, radius steps, type scale, neutral elevation, motion */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px; --r-xl:7px; --r-pill:999px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:34px; --sh-1:0 1px 2px rgba(16,19,18,.06); --sh-2:0 3px 10px rgba(16,19,18,.09); --sh-3:0 10px 30px rgba(16,19,18,.15); --ease:cubic-bezier(.2,.8,.2,1); --dur:.18s; --font-body:'Barlow',sans-serif; --font-display:'Barlow Condensed','Barlow',sans-serif; --font-mono:'Chakra Petch','Barlow',sans-serif; } /* Dark theme - toggled via [data-theme="dark"] on */ :root[data-theme="dark"]{ /* Jeddah Corniche Circuit: asphalt page, carbon surfaces, timing-green accent. Brand colors only: green / white / black. */ --bg:#08090b; --s1:#101318; --s2:#161a21; --s3:#1d222b; --in-bg:#161a21; --green:#00e585; --green-h:#2eeb99; --green-d:#00e585; --ac-fill:#00cf78; --ac-fill-h:#0adf85; /* desaturated for big fills: saturated greens vibrate on dark */ --red:#d4705f; --orange:#d4a04c; --blue:#4aa8f8; --purple:#a06af0; --text:#f2f5f2; --muted:#8b939b; --muted-l:#626a72; --border:#232830; color-scheme:dark; --accent2:rgba(0,229,133,.55); --warn:rgba(255,255,255,.55); --photo-bg:var(--s3); /* backdrop behind product photos (shot on dark) */ --line2:rgba(242,245,242,.32); --acink:#04140c; --acsoft:rgba(0,229,133,.1); --foot:#060708; --footink:#f2f5f2; --footmut:#8b939b; --green-rgb:0,229,133; --tint-rgb:242,245,242; --red-rgb:212,112,95; --warn-rgb:212,160,76; --purple-rgb:160,106,240; --blue-rgb:74,168,248; --sh-1:0 1px 2px rgba(16,19,18,.06); --sh-2:0 4px 14px rgba(16,19,18,.08); --sh-3:0 14px 44px rgba(16,19,18,.14); } /* Hero art (hero.webp) is white-on-transparent - keep its dark chip until a real photo replaces it (see design handoff item 5). Topbar uses logo-dark.png instead. */ .landing-hero-card img{background:#0c0e0c;} :root[data-theme="dark"] .landing-hero-card img{background:none;} /* Light theme: topbar + ticket read as elevated white surfaces above the gray page (they use var(--bg) generically, which is now the page gray). Dark is untouched. */ :root:not([data-theme="dark"]) #topbar{background:var(--s1);} :root:not([data-theme="dark"]) .ticket-card{background:var(--s1);} /* Dark elevation ladder (Material dark guidance): higher surfaces get lighter, since shadows are invisible on dark. page bg < topbar/cards (s1) < modals/dialogs (s2). */ :root[data-theme="dark"] #topbar{background:var(--s1);} :root[data-theme="dark"] .modal-box,:root[data-theme="dark"] .auth-box,:root[data-theme="dark"] .pin-box,:root[data-theme="dark"] .booth-popup-box{background:var(--s2);} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;font-size:14px;-webkit-font-smoothing:antialiased; background-image:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--green-rgb),.05), transparent 60%);} :focus-visible{outline:2px solid var(--green);outline-offset:2px;} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;} } #topbar{position:sticky;top:0;z-index:100; background:var(--bg); border-bottom:1px solid var(--border); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;} .topbar-logo{display:flex;align-items:center;gap:12px;text-decoration:none;} .topbar-logo img{height:44px;width:auto;max-width:160px;object-fit:contain;} @media(max-width:767px){.topbar-logo img{height:32px;max-width:110px;}} .topbar-brand{display:flex;flex-direction:column;line-height:1.25;} .topbar-brand-name{font-size:16px;font-weight:700;color:var(--green);letter-spacing:-.2px;} .topbar-brand-sub{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.2px;} .topbar-right{display:flex;align-items:center;gap:10px;} .view-badge{font-size:11px;font-weight:700;padding:5px 12px;border-radius:3px;text-transform:uppercase;letter-spacing:.7px;} .view-badge.staff{background:rgba(var(--green-rgb),.15);color:var(--green);border:1px solid rgba(var(--green-rgb),.35);} .view-badge.customer{background:rgba(var(--green-rgb),.1);color:var(--green);border:1px solid rgba(var(--green-rgb),.25);} .topbar-btn{display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:3px;border:1px solid rgba(var(--tint-rgb),.09);background:rgba(var(--tint-rgb),.04);color:var(--muted-l);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;} .btn-primary.topbar-reserve{padding:9px 20px;font-size:13.5px;} .topbar-btn:hover{border-color:rgba(var(--green-rgb),.4);color:var(--text);background:rgba(var(--green-rgb),.06);} .topbar-btn.danger:hover{border-color:rgba(var(--red-rgb),.5);color:var(--red);background:rgba(var(--red-rgb),.06);} .topbar-btn.undo-btn{color:var(--green);border-color:rgba(var(--green-rgb),.3);} .topbar-btn.undo-btn:hover{border-color:rgba(var(--green-rgb),.55);background:rgba(var(--green-rgb),.08);color:var(--green);} @keyframes undoPulse{0%,100%{opacity:1;}60%{opacity:.72;}} /* opacity-only: stays on the compositor */ .tab-nav{background:var(--s1); border-bottom:1px solid var(--border); padding:0 16px;display:flex;justify-content:center;gap:2px;overflow-x:auto;scrollbar-width:none;} .tab-nav::-webkit-scrollbar{display:none;} .tab-btn{padding:15px 20px;min-height:48px;background:none;border:none;border-bottom:2px solid transparent; color:var(--muted);font-family:var(--font-body);font-size:14px;font-weight:700; cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s; touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .tab-btn:hover{color:rgba(var(--tint-rgb),.75);} .tab-btn.active{color:var(--green);border-bottom-color:var(--green);} #view-landing,#view-customer,#view-staff{display:none;} #view-landing.active,#view-customer.active,#view-staff.active{display:block;} #landing-body{ display:block;width:100%;max-width:1100px;margin:0 auto; padding:56px 40px 64px; background:transparent; } .landing-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;} .landing-hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;} .landing-main-title{font-size:44px;font-weight:600;letter-spacing:-1.4px;line-height:1.08;margin-bottom:18px;color:var(--text);} .landing-main-title span{font-family:var(--font-body);font-weight:700;color:var(--green-d);} .landing-subtitle{font-size:15.5px;color:var(--muted);font-weight:500;text-align:left;margin-bottom:26px;line-height:1.65;max-width:400px;} .landing-hero-card{ width:100%; background:var(--s1); border:1px solid var(--border); border-radius:7px;overflow:hidden;cursor:pointer; transition:border-color .28s; position:relative; padding:0;text-align:left;display:block; } .landing-hero-card:hover{ border-color:var(--green); } .landing-hero-card img{width:100%;height:380px;object-fit:cover;display:block;opacity:.94;transition:opacity .28s;} .landing-hero-card:hover img{opacity:1;} .landing-hero-card-cta{ position:absolute;bottom:0;left:0;right:0; padding:24px 22px 20px; background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 100%); display:flex;align-items:center;justify-content:flex-end; } html[dir="rtl"] .landing-hero-card-cta{justify-content:flex-start;} .landing-hero-cta-btn{ width:44px;height:44px;border-radius:50%; background:var(--ac-fill); display:flex;align-items:center;justify-content:center; color:var(--acink);font-size:18px;font-weight:700; transition:transform .28s cubic-bezier(.2,.8,.2,1); flex-shrink:0; } .landing-hero-card:hover .landing-hero-cta-btn{transform:scale(1.1) translateX(3px);} html[dir="rtl"] .landing-hero-card:hover .landing-hero-cta-btn{transform:scale(1.1) translateX(-3px);} .landing-footer{margin-top:40px;text-align:center;} .staff-access-btn{background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;padding:8px 16px;border-radius:3px;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;opacity:1;} .staff-access-btn:hover{color:var(--green-d);opacity:1;} .mirror-rtl{display:inline-block;} html[dir="rtl"] .mirror-rtl{transform:scaleX(-1);} /* Customer page back (top of .view-main): wizard step back, else the event picker. */ .cust-back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:800;cursor:pointer;padding:0 4px;margin-bottom:14px;transition:color .15s;} .cust-back-btn:hover{color:var(--text);} html[lang="ar"] .cust-back-btn{font-family:'IBM Plex Sans Arabic',sans-serif;} /* Inline field validation: icon + message under the field (never color-only) */ .field-err{display:flex;align-items:center;gap:5px;color:var(--red);font-size:11.5px;font-weight:600;margin-top:6px;line-height:1.4;} input.field-invalid,select.field-invalid{border-color:var(--red)!important;} .auth-box .auth-field input.field-invalid{border-bottom-color:var(--red)!important;} /* Event picker (signed-in landing): clickable cards, no Reserve buttons. */ .landing-auth-cta{margin-top:8px;} .landing-events-title{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:44px 0 14px;} .landing-events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;} .landing-event-card{position:relative;text-align:start;background:var(--s1);border:1px solid var(--line2);border-radius:8px;padding:20px 22px 18px;cursor:pointer;font-family:var(--font-body);color:var(--text);transition:border-color .2s,transform .15s,box-shadow .2s;overflow:hidden;} .landing-event-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--green);} .landing-event-card.community::before{background:#4aa8f8;} .landing-event-card:hover{border-color:rgba(var(--green-rgb),.5);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.25);} .landing-event-card.community:hover{border-color:rgba(74,168,248,.55);} .landing-event-card:active{transform:translateY(0);} .lec-kicker{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--green);margin-bottom:6px;} .landing-event-card.community .lec-kicker{color:#4aa8f8;} .lec-title{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;font-size:22px;letter-spacing:.4px;line-height:1.1;} .lec-meta{font-size:12px;font-weight:700;color:var(--muted);margin-top:7px;} .lec-arrow{position:absolute;bottom:14px;inset-inline-end:16px;font-size:18px;font-weight:900;color:var(--green);opacity:.8;} /* Event artwork: once loaded it becomes the whole card, styled exactly like the JCC hero card - image, bottom gradient, and the circular green arrow CTA. */ .lec-art{display:none;} .landing-event-card.has-art{padding:0;aspect-ratio:6/5;max-height:360px;overflow:hidden;} .landing-event-card.has-art .lec-art{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .landing-event-card.has-art .lec-kicker,.landing-event-card.has-art .lec-title, .landing-event-card.has-art .lec-meta{visibility:hidden;} .landing-event-card.has-art::before{display:none;} .landing-event-card.has-art .lec-arrow{ visibility:visible;position:absolute;bottom:20px;inset-inline-end:22px;opacity:1; width:44px;height:44px;border-radius:50%;background:var(--ac-fill);color:var(--acink); display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700; transition:transform .28s cubic-bezier(.2,.8,.2,1);} .landing-event-card.has-art:hover .lec-arrow{transform:scale(1.1) translateX(3px);} html[dir="rtl"] .landing-event-card.has-art:hover .lec-arrow{transform:scale(1.1) translateX(-3px);} .landing-event-card.has-art::after{content:'';position:absolute;bottom:0;left:0;right:0;height:80px; background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 100%);pointer-events:none;} .landing-events-grid{align-items:stretch;} .landing-event-card{display:flex;flex-direction:column;justify-content:center;} .landing-event-card.community .lec-arrow{color:#4aa8f8;} html[lang="ar"] .landing-event-card{font-family:'IBM Plex Sans Arabic',sans-serif;} html[lang="ar"] .lec-title{font-family:'IBM Plex Sans Arabic',sans-serif;font-style:normal;font-size:19px;} /* Signed-in landing = ONLY the event picker: hero, ghost, stripes and strip hide. */ #landing-body.events-only .landing-hero-grid, #landing-body.events-only .landing-ghost, #landing-body.events-only .sector-stripes, #landing-body.events-only .landing-avail-rows{display:none;} #landing-body.events-only .landing-events-title{margin-top:10px;} /* v2 event cards: flat row - big condensed title + meta on one end, brand logo on the other. */ .lec2{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;padding:26px 28px;border-radius:12px;min-height:132px;} .lec2::before{display:none;} .lec2 .lec-title{font-size:30px;font-style:normal;letter-spacing:.3px;} .lec2 .lec-meta{font-size:13px;margin-top:8px;} .lec2-copy{display:flex;flex-direction:column;min-width:0;} .lec2-logo{height:84px;max-width:180px;object-fit:contain;flex-shrink:0;} .lec2-mm{display:inline-flex;} .lec2-mm img{height:84px;max-width:180px;object-fit:contain;} /* the wordmark half of the logo flips with the theme */ html[data-theme="dark"] .mm-on-light{display:none;} html:not([data-theme="dark"]) .mm-on-dark{display:none;} html[lang="ar"] .lec2 .lec-title{font-size:24px;} @media (max-width:560px){ .lec2{padding:20px;min-height:104px;} .lec2 .lec-title{font-size:22px;} .lec2-logo,.lec2-mm img{height:56px;max-width:112px;} } .landing-avail-rows{width:100%;margin-top:56px;border-top:1px solid var(--line2);} .landing-avail-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 4px;border:none;border-bottom:1px solid var(--border);background:none; font-family:var(--font-body);color:var(--text);cursor:pointer;transition:background .15s;text-align:left;} .landing-avail-row:hover{background:var(--s2);} .landing-avail-row.full{opacity:.45;cursor:not-allowed;} .landing-avail-info{display:flex;align-items:center;gap:12px;min-width:0;flex:1;} .landing-avail-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--green);} .landing-avail-dot.full{background:var(--s2);} .landing-avail-date{font-size:15px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;} .landing-avail-time{font-size:12px;color:var(--muted-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;direction:ltr;unicode-bidi:isolate;} .landing-avail-spots{font-size:12.5px;font-weight:700;color:var(--green-d);white-space:nowrap;flex-shrink:0;} .landing-avail-spots.full{color:var(--muted-l);} .landing-avail-spots.low{color:var(--orange);} .landing-avail-right{display:flex;align-items:center;gap:10px;flex-shrink:0;} .landing-avail-empty{padding:24px 4px;color:var(--muted);font-size:14px;font-weight:600;} .sess-card-right{display:flex;align-items:center;gap:10px;flex-shrink:0;} .spots-low{color:var(--orange);} @keyframes modalFadeIn{from{opacity:0}to{opacity:1}} @keyframes modalSlideUp{from{transform:translateY(28px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}} @keyframes modalSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}} .modal-backdrop{animation:modalFadeIn .22s ease both;} .modal-box{animation:modalSlideUp .28s cubic-bezier(.2,.8,.2,1) both;} @media(max-width:767px){ .modal-box{animation:modalSheetUp .4s cubic-bezier(.32,.72,0,1) both;} /* iOS drawer curve (Ionic) - sheets should glide, not pop */ } .sess-summary-bar{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;} .sess-bar-mobile{display:none;} .sess-summary-chip{ display:flex;align-items:center;gap:10px; background:var(--s1); border:1px solid var(--border);border-radius:6px; padding:10px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;flex:1;min-width:160px;} .sess-summary-chip:hover{border-color:rgba(var(--green-rgb),.35);background:var(--s2);} .sess-summary-chip.active-sess{border-color:rgba(var(--green-rgb),.3);} .sess-chip-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;} .sess-chip-date{font-size:12px;font-weight:700;white-space:nowrap;} .sess-chip-counts{font-size:11px;color:var(--muted);font-weight:700;} .sess-chip-bar{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:6px;} .sess-chip-fill{height:100%;border-radius:2px;background:var(--green);transition:width .25s;} .sess-chip-badge{flex-shrink:0;} /* Community (Saturday Social Ride) sessions read blue at a glance, JCC stays green. */ .sess-summary-chip.community{border-color:rgba(74,168,248,.45);background:rgba(74,168,248,.06);} .sess-summary-chip.community.active-sess{border-color:#4aa8f8;box-shadow:0 0 0 1px rgba(74,168,248,.35);} .sess-chip-event{font-size:10px;font-weight:900;color:#4aa8f8;text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} @media(max-width:767px){.sess-summary-bar{gap:6px;}.sess-summary-chip{min-width:140px;padding:8px 10px;}} .account-stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:28px;border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;background:var(--s1);} .account-stat{background:none;border:none;border-radius:0;padding:16px;text-align:center;} .account-stat:not(:first-child){border-inline-start:1px solid var(--border);} .account-stat-val{font-size:24px;font-weight:700;line-height:1;margin-bottom:4px;font-family:var(--font-body);} .account-stat-lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;} @media(max-width:767px){.account-stats-strip{grid-template-columns:repeat(2,1fr);gap:8px;}} .undo-bar{ display:flex;align-items:center;gap:12px; background:#1e1e1e;border:1px solid rgba(var(--green-rgb),.3);border-radius:7px; padding:12px 16px;pointer-events:all;min-width:260px;max-width:380px; box-shadow:var(--sh-2); position:relative;overflow:hidden;} .undo-bar-text{flex:1;font-size:13px;font-weight:700;color:var(--text);line-height:1.3;} .undo-bar-action{background:var(--ac-fill);color:var(--acink);border:none;border-radius:3px; padding:6px 14px;font-family:var(--font-body);font-size:12px;font-weight:700; cursor:pointer;flex-shrink:0;transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s,opacity .18s;letter-spacing:.2px;} .undo-bar-action:hover{background:var(--ac-fill-h);transform:scale(1.04);} .undo-bar-progress{position:absolute;bottom:0;left:0;height:3px;background:rgba(var(--green-rgb),.4); border-radius:0 0 0 7px;transition:width linear;} /* Write failures: same strip, red, and it stays until dismissed or retried. */ .err-bar{border-color:rgba(var(--red-rgb),.55);background:#2a1414;} .err-bar .undo-bar-action{background:var(--red);color:#fff;} .err-bar .undo-bar-action:hover{background:var(--red);opacity:.88;} .err-bar-detail{display:block;margin-top:4px;font-size:11px;font-weight:600;color:var(--muted-l); word-break:break-word;} .refresh-indicator{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.2px;} .refresh-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} .view-main{max-width:1160px;margin:0 auto;padding:28px 28px;} #view-staff .view-main{max-width:min(1600px,96vw);} body.view-staff #app-footer{display:none;} #app-footer{ background:var(--foot);border-top:1px solid rgba(252,249,244,.07); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;padding:28px 16px 32px;margin-top:48px;} .footer-social{display:flex;align-items:center;justify-content:center;gap:10px;} .footer-social-link{display:flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:4px; color:var(--green);background:rgba(var(--green-rgb),.07); border:1px solid rgba(var(--green-rgb),.2); transition:background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s,opacity .22s;text-decoration:none;flex-shrink:0;} .footer-social-link svg{width:16px;height:16px;} .footer-social-link:hover{background:rgba(var(--green-rgb),.18);border-color:rgba(var(--green-rgb),.55); transform:translateY(-3px);box-shadow:var(--sh-2);} .footer-copy{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.2px;} .tab-panel{display:none;} .tab-panel.active{display:block;} .page-title{font-size:23px;font-weight:700;margin-bottom:4px;letter-spacing:-1.5px;} .page-sub{font-size:13px;color:var(--muted);margin-bottom:24px;line-height:1.5;} .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;} .section-label{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase; color:var(--muted-l);margin:40px 0 16px;display:flex;align-items:center;gap:14px;} .section-label::after{content:'';flex:1;height:1px;background:var(--border);} .label-hint{font-size:11px;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;} .card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-1);} .pin-backdrop{position:fixed;inset:0;background:rgba(16,19,18,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;} .pin-box{background:var(--s1);border:1px solid var(--border);border-radius:7px;padding:36px 32px;width:100%;max-width:340px;text-align:center;box-shadow:0 1px 3px rgba(16,19,18,.06);} .pin-logo{height:72px;width:auto;object-fit:contain;margin-bottom:18px;display:block;margin-left:auto;margin-right:auto;} .pin-title{font-size:20px;font-weight:700;margin-bottom:4px;} .pin-sub{font-size:13px;color:var(--muted);margin-bottom:28px;} .pin-dots{display:flex;justify-content:center;gap:12px;margin-bottom:28px;} .pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s,opacity .15s;} .pin-dot.filled{background:var(--green);border-color:var(--green);} .pin-dot.error{background:var(--red);border-color:var(--red);} .pin-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;} .pin-key{background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:16px;font-size:20px;font-weight:700;color:var(--text);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s,opacity .15s;font-family:var(--font-body);} .pin-key:hover{background:var(--s3);border-color:var(--green);} .pin-key:active{transform:scale(.94);} .pin-key.del{color:var(--muted);font-size:16px;} .pin-key.empty{visibility:hidden;} .pin-error{font-size:13px;color:var(--red);font-weight:700;height:20px;margin-bottom:16px;} .pin-cancel{background:none;border:none;color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;padding:8px;transition:color .2s;} .pin-cancel:hover{color:var(--text);} @keyframes pinShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}} .pin-box.shake{animation:pinShake .35s ease;} .auth-backdrop{position:fixed;inset:0;background:rgba(16,19,18,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;} /* Auth-first: for signed-out visitors the sign in / sign up screen IS the first page, separate from the event picker behind it. The landing hides its content and the auth box presents as a page (no dismiss button; the backdrop is the page background). */ #landing-body.auth-gate .landing-hero-grid,#landing-body.auth-gate .sector-stripes, #landing-body.auth-gate #land-events,#landing-body.auth-gate #land-avail-strip, #landing-body.auth-gate .landing-footer{display:none;} /* Below the topbar (z-100) so language switching and the logo stay usable on the auth page. */ #auth-modal.as-page .auth-backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:90;} #auth-modal.as-page .auth-cancel-btn{display:none;} #auth-modal.as-page .auth-cancel-btn.auth-keep{display:block;} .auth-box{background:var(--s1);border:1px solid var(--border);border-radius:7px;padding:36px 32px;width:100%;max-width:420px;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-shadow:0 1px 3px rgba(16,19,18,.06);margin:auto;} .auth-logo{height:80px;width:auto;object-fit:contain;margin-bottom:20px;display:block;margin-left:auto;margin-right:auto;} .auth-title{font-size:22px;font-weight:700;margin-bottom:4px;letter-spacing:-.3px;} .auth-sub{font-size:13px;color:var(--muted);margin-bottom:28px;line-height:1.5;} /* v2: underline tabs on a hairline rule (no pill toggle) */ .auth-tabs{display:flex;gap:24px;margin-bottom:28px;border-bottom:1px solid var(--border);} .auth-tab{flex:0 0 auto;padding:10px 2px;border:none;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);font-family:var(--font-body);font-size:13.5px;font-weight:700;cursor:pointer;transition:color .2s,border-color .2s;margin-bottom:-1px;} .auth-tab.active{background:none;color:var(--text);border-bottom-color:var(--green);} .auth-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;} /* First name + last name side by side; stack them on very narrow phones. */ .auth-namerow{display:flex;gap:10px;} .auth-namerow .auth-field{flex:1;min-width:0;} @media(max-width:380px){.auth-namerow{display:block;}} .auth-field label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;} /* v2: bottom-border inputs (borderless, hairline underline; green underline on focus). .auth-box prefix outranks the later global input[type=...] recipe. */ .auth-box .auth-field input{background:none;border:none;border-bottom:1px solid var(--line2);border-radius:0;padding:10px 2px;color:var(--text);font-family:var(--font-body);font-size:14.5px;font-weight:600;outline:none;transition:border-color .2s;width:100%;box-shadow:none;} .auth-box .auth-field input:focus{border-bottom-color:var(--green);box-shadow:none;} .btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border-radius:4px;border:1px solid var(--border);background:rgba(var(--tint-rgb),.04);color:var(--text);font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;} .btn-google:hover{background:rgba(var(--tint-rgb),.08);border-color:rgba(var(--tint-rgb),.25);} .btn-google svg{flex-shrink:0;} .auth-or{text-align:center;color:var(--muted);font-size:12px;font-weight:700;margin:10px 0;position:relative;} .auth-or::before,.auth-or::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--border);} .auth-or::before{left:0;}.auth-or::after{right:0;} .auth-submit{width:100%;margin-top:6px;} .auth-err{font-size:13px;color:var(--red);font-weight:700;margin-bottom:10px;min-height:18px;text-align:center;} .auth-cc-row{display:flex;gap:8px;} .auth-cc-row select{background:var(--in-bg);border:1px solid var(--border);border-radius:3px;padding:11px 10px;color:var(--text);font-family:var(--font-body);font-size:14px;font-weight:500;outline:none;width:110px;flex-shrink:0;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:26px;} .auth-cc-row input{flex:1;background:var(--in-bg);border:1px solid var(--border);border-radius:3px;padding:11px 14px;color:var(--text);font-family:var(--font-body);font-size:14px;font-weight:500;outline:none;transition:border-color .2s;} .auth-cc-row input:focus{border-color:var(--green);} .cust-topbar-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;} .cust-topbar-email{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;} .topbar-btn{white-space:nowrap;} .rides-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:24px;border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;background:var(--s1);} @media(max-width:560px){.rides-stat-row{grid-template-columns:repeat(2,1fr);}} .rides-stat-card{background:none;border:none;border-radius:0;padding:16px;min-width:0;} .rides-stat-card:not(:first-child){border-inline-start:1px solid var(--border);} .rides-stat-num{font-size:24px;font-weight:700;margin-bottom:3px;letter-spacing:-.5px;font-family:var(--font-body);} .rides-stat-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;} .rides-empty{background:var(--s1);border:1px dashed var(--border);border-radius:7px;padding:48px;text-align:center;color:var(--muted);font-size:14px;font-weight:600;} /* v2: whole-page empty state for a customer with no rides at all */ .rides-zero{text-align:center;padding:56px 20px 64px;border-top:1px solid var(--line2);margin-top:8px;} .rides-zero-num{font-family:var(--font-body);font-weight:700;font-size:96px;line-height:1;color:var(--s2);} .rides-zero-msg{font-size:14px;color:var(--muted);font-weight:600;margin:16px 0 22px;} /* v2: Account settings as hairline rows */ .acc-set-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 4px;border:none;border-bottom:1px solid var(--border);background:none; font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;transition:background .15s;} .acc-set-row:hover{background:var(--s2);} .acc-set-val{font-size:13px;color:var(--muted);font-weight:600;} html[dir="rtl"] .acc-set-row{text-align:right;} /* v2: booking add-ons as hairline checkbox rows */ .addon-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--border);transition:background .15s;} .addon-row.sel{background:var(--acsoft);} .addon-check{width:22px;height:22px;flex-shrink:0;border-radius:2px;border:1.5px solid var(--line2);background:none;color:var(--acink); font-size:13px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s,opacity .15s;padding:0;} .addon-check:hover{border-color:var(--green);} .addon-check.on{background:var(--green);border-color:var(--green);} .addon-qty{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;} .addon-qty button{width:26px;height:26px;border-radius:2px;border:1px solid var(--line2);background:none;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;line-height:1;padding:0;} .addon-qty button:hover{border-color:var(--green-d);color:var(--green-d);} .addon-qty button:disabled{opacity:.4;cursor:default;} .addon-qty span{min-width:14px;text-align:center;font-weight:700;font-size:13.5px;} .myrides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;margin-top:14px;align-items:start;} .inv-layout{display:flex;gap:16px;align-items:flex-start;margin-top:14px;} .inv-sidebar{flex:0 0 168px;display:flex;flex-direction:column;gap:6px;} .inv-content{flex:1;min-width:0;max-width:100%;} .inv-navbtn{text-align:left;padding:12px 14px;border-radius:5px;border:1px solid var(--border);background:var(--s1);color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s,opacity .15s;display:flex;align-items:center;gap:8px;} .inv-navbtn:hover{border-color:rgba(var(--tint-rgb),.2);color:var(--text);} .inv-navbtn.active{background:rgba(var(--green-rgb),.1);border-color:rgba(var(--green-rgb),.4);color:var(--green);} @media(max-width:640px){.inv-layout{flex-direction:column;}.inv-sidebar{flex:none;flex-direction:row;flex-wrap:wrap;}.inv-navbtn{flex:1;justify-content:center;}} @media(max-width:560px){.myrides-grid{grid-template-columns:1fr;}} .lang-toggle{background:rgba(var(--tint-rgb),.04);border:1px solid rgba(var(--tint-rgb),.1);border-radius:3px;color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:700;line-height:1;padding:7px 12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;display:flex;align-items:center;gap:6px;white-space:nowrap;} .lang-toggle:hover{border-color:rgba(var(--green-rgb),.45);color:var(--green);background:rgba(var(--green-rgb),.06);} .topbar-left{display:flex;align-items:center;gap:14px;} .topbar-social{display:flex;align-items:center;gap:5px;} .social-link{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:3px;color:var(--green);background:rgba(var(--green-rgb),.07);border:1px solid rgba(var(--green-rgb),.18);transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;text-decoration:none;flex-shrink:0;} .social-link svg{width:15px;height:15px;} .social-link:hover{background:rgba(var(--green-rgb),.14);border-color:rgba(var(--green-rgb),.4);transform:translateY(-2px);box-shadow:var(--sh-2);} @media(max-width:767px){.topbar-social{gap:4px;}.social-link{width:28px;height:28px;}.social-link svg{width:13px;height:13px;}} html[dir="rtl"] .phone-row{flex-direction:row-reverse;} html[dir="rtl"] .auth-cc-row{flex-direction:row-reverse;} html[dir="rtl"] .height-row{flex-direction:row-reverse;} html[dir="rtl"] .toggle-group{flex-direction:row-reverse;justify-content:flex-end;} html[dir="rtl"] .form-row{direction:rtl;} html[dir="rtl"] .tab-nav{direction:rtl;} html[dir="rtl"] .filter-row{direction:rtl;} html[dir="rtl"] input,html[dir="rtl"] select{text-align:right;} html[dir="rtl"] th,html[dir="rtl"] td{text-align:right;} html[dir="rtl"] .topbar-logo{flex-direction:row-reverse;} html[dir="rtl"] .cust-topbar-name,html[dir="rtl"] .cust-topbar-email{direction:ltr;text-align:right;} html[dir="rtl"] .section-header{flex-direction:row;} html[dir="rtl"] .actions-cell{flex-direction:row-reverse;} html[dir="rtl"] .stats-row{direction:rtl;} html[dir="rtl"] .next-up-banner{flex-direction:row-reverse;} html[dir="rtl"] .modal-footer{flex-direction:row-reverse;} html[dir="rtl"] .auth-tabs{direction:rtl;} html[dir="rtl"] .filter-bar{direction:rtl;} html[dir="rtl"] .filter-bar-row{direction:rtl;} html[dir="rtl"] .sort-bar{direction:rtl;} html[dir="rtl"] .section-header>div{text-align:right;} html[dir="rtl"] .inline-form{direction:rtl;} html[dir="rtl"] .form-section{direction:rtl;} html[dir="rtl"] .analytics-kpi-grid{direction:rtl;} html[dir="rtl"] .rides-stat-row{direction:rtl;} html[dir="rtl"] .chart-grid-wide,html[dir="rtl"] .chart-grid-2,html[dir="rtl"] .chart-grid-3{direction:rtl;} html[dir="rtl"] .donut-wrap{flex-direction:row-reverse;} html[dir="rtl"] .donut-legend{text-align:right;} html[dir="rtl"] .donut-legend-item{flex-direction:row-reverse;} html[dir="rtl"] .chart-legend{direction:rtl;} html[dir="rtl"] .next-up-details{direction:rtl;} html[dir="rtl"] .search-wrap svg{left:auto;right:10px;} html[dir="rtl"] .search-input{padding-left:12px;padding-right:32px;} html[dir="rtl"] .price-preview{direction:rtl;} html[dir="rtl"] .ticket-grid{direction:rtl;} html[dir="rtl"] .bike-list-row{direction:rtl;} html[dir="rtl"] .bike-list-actions{direction:ltr;} html[dir="rtl"] .modal-box{direction:rtl;} html[dir="rtl"] .auth-box{direction:rtl;} html[dir="rtl"] .auth-field label{text-align:right;} html[dir="rtl"] .pin-box{direction:rtl;} html[dir="rtl"] .pin-numpad{direction:ltr;} html[dir="rtl"] .landing-hero-grid{direction:rtl;} html[dir="rtl"] .landing-hero-copy{text-align:right;align-items:flex-end;} html[dir="rtl"] .landing-subtitle{text-align:right;} html[dir="rtl"] .landing-avail-row{text-align:right;} html[dir="rtl"] .stat-card{direction:rtl;} html[dir="rtl"] .analytics-kpi-card{direction:rtl;} html[dir="rtl"] .analytics-highlight-card{direction:rtl;} html[dir="rtl"] .analytics-bars-card{direction:rtl;} html[dir="rtl"] .chart-card{direction:rtl;} html[dir="rtl"] .analytics-bar-row{direction:rtl;flex-direction:row-reverse;} html[dir="rtl"] .sess-card{direction:rtl;} html[dir="rtl"] .receipt-box{direction:ltr;text-align:left;} html[dir="rtl"] .color-slots{direction:ltr;} html[dir="rtl"] .modal-bikes-grid{direction:rtl;} html[dir="rtl"] .next-up-banner>div{direction:rtl;} html[dir="rtl"] .topbar-right{flex-direction:row-reverse;} html[dir="rtl"] .view-badge{letter-spacing:0;} html[lang="ar"] body{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size:16px; font-weight:500; line-height:1.75; } html[lang="ar"] *{letter-spacing:0!important;} html[lang="ar"] .view-badge, html[lang="ar"] label, html[lang="ar"] .filter-group-label, html[lang="ar"] .sort-label, html[lang="ar"] .analytics-section-title, html[lang="ar"] .analytics-bars-title, html[lang="ar"] .analytics-kpi-label, html[lang="ar"] .analytics-insight-title, html[lang="ar"] .chart-card-title, html[lang="ar"] .analytics-bars-title, html[lang="ar"] .an-range-label, html[lang="ar"] .sess-card-day, html[lang="ar"] .rides-stat-label, html[lang="ar"] .stat-label, html[lang="ar"] .filter-group-label, html[lang="ar"] .auth-field label, html[lang="ar"] .session-picker-label, html[lang="ar"] .sort-label, html[lang="ar"] .hl-label{ text-transform:none!important; } html[lang="ar"] .topbar-brand-name{font-size:16px;font-weight:700;} html[lang="ar"] .topbar-brand-sub{font-size:12px;font-weight:600;} html[lang="ar"] .topbar-btn{font-size:13px;font-weight:700;} html[lang="ar"] .lang-toggle{font-size:13px;font-weight:700;} html[lang="ar"] .view-badge{font-size:12px;font-weight:700;padding:4px 12px;} html[lang="ar"] .tab-btn{font-size:14px;font-weight:700;} html[lang="ar"] .landing-main-title{font-size:38px;font-weight:700;line-height:1.3;text-transform:none;} html[lang="ar"] .staff-access-btn{font-size:13px;font-weight:600;} html[lang="ar"] .page-title{font-size:22px;font-weight:700;} html[lang="ar"] .page-sub{font-size:13px;font-weight:400;line-height:1.7;} html[lang="ar"] .form-title{font-size:16px;font-weight:700;} html[lang="ar"] label{font-size:13px;font-weight:600;} html[lang="ar"] .label-hint{font-size:11px;} html[lang="ar"] .filter-label{font-size:11px;font-weight:700;} html[lang="ar"] .session-picker-label{font-size:13px;font-weight:700;} html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] button, html[lang="ar"] .btn-primary, html[lang="ar"] .btn-secondary, html[lang="ar"] .btn-sm, html[lang="ar"] .toggle-btn, html[lang="ar"] .auth-tab, html[lang="ar"] .filter-select, html[lang="ar"] .pay-toggle{font-family:'IBM Plex Sans Arabic',sans-serif;} html[lang="ar"] .toggle-btn{font-size:13px;font-weight:700;} html[lang="ar"] .btn-primary{font-size:15px;font-weight:700;} html[lang="ar"] .btn-secondary{font-size:13px;font-weight:700;} html[lang="ar"] .btn-sm{font-size:12px;font-weight:700;} html[lang="ar"] .filter-select{font-size:13px;font-weight:600;} html[lang="ar"] .queue-table th{font-size:11px;font-weight:700;} html[lang="ar"] .queue-table td{font-size:14px;font-weight:500;} html[lang="ar"] .rider-name{font-size:14px;font-weight:700;} html[lang="ar"] .rider-sub{font-size:12px;font-weight:500;} html[lang="ar"] .queue-num-cell{font-size:20px;font-weight:700;} html[lang="ar"] .status-badge{font-size:11px;font-weight:700;} html[lang="ar"] .type-badge{font-size:12px;font-weight:700;} html[lang="ar"] .walk-in-badge{font-size:11px;font-weight:700;} html[lang="ar"] .filter-label{font-weight:700;} html[lang="ar"] .stat-num{font-size:28px;font-weight:700;} html[lang="ar"] .stat-label{font-size:11px;font-weight:700;} html[lang="ar"] .rides-stat-num{font-size:24px;font-weight:700;} html[lang="ar"] .rides-stat-label{font-size:11px;font-weight:700;} html[lang="ar"] .analytics-kpi-value{font-size:26px;font-weight:700;} html[lang="ar"] .analytics-kpi-label{font-size:12px;font-weight:700;} html[lang="ar"] .analytics-kpi-sub{font-size:12px;font-weight:500;} html[lang="ar"] .analytics-section-title{font-size:14px;font-weight:700;} html[lang="ar"] .analytics-bars-title{font-size:13px;font-weight:700;} html[lang="ar"] .analytics-bar-label{font-size:12px;font-weight:600;} html[lang="ar"] .analytics-bar-value{font-size:12px;font-weight:700;} html[lang="ar"] .analytics-insight-title{font-size:13px;font-weight:700;} html[lang="ar"] .hl-label{font-size:11px;font-weight:700;} html[lang="ar"] .hl-value{font-size:18px;font-weight:700;} html[lang="ar"] .chart-card-title{font-size:13px;font-weight:700;} html[lang="ar"] .chart-card-sub{font-size:12px;font-weight:400;} html[lang="ar"] .chart-legend-item{font-size:12px;font-weight:600;} html[lang="ar"] .donut-legend-item{font-size:12px;font-weight:600;} html[lang="ar"] .an-range-label{font-size:12px;font-weight:700;} html[lang="ar"] .result-count{font-size:12px;font-weight:600;} html[lang="ar"] .sess-card-day{font-size:10px;font-weight:700;} html[lang="ar"] .sess-card-date{font-size:17px;font-weight:700;} html[lang="ar"] .sess-card-spots{font-size:12px;font-weight:700;} html[lang="ar"] .sess-admin-table th{font-size:12px;font-weight:700;text-transform:none;} html[lang="ar"] .sess-admin-table td{font-size:14px;font-weight:500;} html[lang="ar"] .bike-name,html[lang="ar"] .bike-list-name{font-size:14px;font-weight:700;} html[lang="ar"] .bike-meta,html[lang="ar"] .bike-list-meta{font-size:12px;font-weight:500;} html[lang="ar"] .next-up-label{font-size:12px;font-weight:700;} html[lang="ar"] .next-up-name{font-size:20px;font-weight:700;} html[lang="ar"] .next-up-details{font-size:13px;font-weight:600;} html[lang="ar"] .price-preview-breakdown{font-size:13px;font-weight:600;} html[lang="ar"] .price-preview-total{font-size:20px;font-weight:700;} html[lang="ar"] .ticket-num-label{font-size:10px;font-weight:700;} html[lang="ar"] .ticket-num{font-size:60px;font-weight:700;} html[lang="ar"] .ticket-label{font-size:10px;font-weight:700;} html[lang="ar"] .ticket-value{font-size:13px;font-weight:700;} html[lang="ar"] .auth-title{font-size:22px;font-weight:700;} html[lang="ar"] .auth-sub{font-size:14px;font-weight:400;} html[lang="ar"] .auth-tab{font-size:13px;font-weight:700;} html[lang="ar"] .auth-field input{font-size:15px;font-weight:500;} html[lang="ar"] .auth-submit{font-size:15px;font-weight:700;} html[lang="ar"] .auth-err{font-size:13px;font-weight:700;} html[lang="ar"] .pin-title{font-size:22px;font-weight:700;} html[lang="ar"] .pin-sub{font-size:14.5px;font-weight:500;} html[lang="ar"] .pin-key{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:22px;font-weight:700;} html[lang="ar"] .pin-error{font-size:14px;font-weight:700;} html[lang="ar"] .pin-cancel{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;font-weight:700;} html[lang="ar"] .modal-title{font-size:20px;font-weight:700;} html[lang="ar"] .modal-sub{font-size:14.5px;font-weight:500;} html[lang="ar"] .toast{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14.5px;font-weight:700;} html[lang="ar"] .empty-state{font-size:14.5px;font-weight:600;} html[lang="ar"] .no-sessions-msg{font-size:14.5px;font-weight:600;} html[lang="ar"] .size-chip{font-size:16px;font-weight:700;} html[lang="ar"] .size-chip-label{font-size:11px;font-weight:700;} html[lang="ar"] .analytics-trend-table th{font-size:12px;font-weight:700;} html[lang="ar"] .analytics-trend-table td{font-size:14px;} html[lang="ar"] .cust-topbar-name{font-size:13.5px;font-weight:700;} html[lang="ar"] .cust-topbar-email{font-size:12px;font-weight:600;} html[lang="ar"] .filter-bar-row{gap:8px;} html[lang="ar"] .an-range-bar{gap:8px;} @media(max-width:767px){ html[lang="ar"] body{font-size:15px;font-weight:500;} html[lang="ar"] .page-title{font-size:19px;font-weight:700;} html[lang="ar"] .landing-main-title{font-size:28px;} html[lang="ar"] .tab-btn{font-size:12px;font-weight:700;} html[lang="ar"] .queue-table td{font-size:13px;} html[lang="ar"] .rider-name{font-size:13px;font-weight:700;} } .price-preview{display:flex;align-items:center;justify-content:space-between; background:rgba(var(--green-rgb),.05); border:1px solid rgba(var(--green-rgb),.2);border-radius:6px;padding:16px 20px;margin-bottom:14px;} .price-preview-breakdown{font-size:13px;color:var(--muted);font-weight:600;} .price-preview-total{font-size:22px;font-weight:700;color:var(--green-d);} .reg-row{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border-bottom:1px solid var(--border);} .reg-row-label{font-size:14.5px;font-weight:500;color:var(--text);} .qty-stepper{display:flex;align-items:center;gap:14px;} .qty-btn{width:32px;height:32px;border-radius:2px;border:1px solid var(--line2);background:none;color:var(--text);font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;} .qty-btn:hover{border-color:var(--green-d);color:var(--green-d);} .qty-val{font-size:16px;font-weight:600;min-width:18px;text-align:center;} .reg-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:40px;align-items:start;} .reg-grid-side{position:sticky;top:88px;} .reg-summary-panel{border:1px solid var(--line2);border-radius:var(--r-lg);padding:22px 24px;} .reg-summary-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:8px 0;} .reg-summary-row span:first-child{color:var(--muted);} .reg-summary-row span:last-child{font-weight:600;text-align:right;} .reg-summary-total{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line2);margin-top:10px;padding-top:14px;} .reg-summary-total span:first-child{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;} .reg-summary-total span:last-child{font-size:22px;font-weight:600;letter-spacing:-.5px;color:var(--text);} @media(max-width:900px){.reg-grid{grid-template-columns:1fr;}.reg-grid-side{position:static;}} .session-picker-wrap{margin-bottom:24px;} .session-picker-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.6px;margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid var(--line2);} .session-cards-grid{display:flex;flex-direction:column;} .sess-card{width:100%;background:none;border:none;border-bottom:1px solid var(--border);border-radius:0; padding:16px 4px;cursor:pointer;transition:background .15s;box-shadow:none; display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;font-family:var(--font-body);color:var(--text);} .sess-card:hover:not(.sess-full){background:var(--s2);} .sess-card.sess-selected{background:var(--acsoft);} .sess-card.sess-full{opacity:.6;} .sess-card-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1;} .sess-card-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;border:1.5px solid var(--muted-l);} .sess-card-dot.on{background:var(--green);border-color:var(--green);} .sess-card-date{font-size:15px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;} .sess-card-time{font-size:12px;color:var(--muted-l);min-width:0;direction:ltr;unicode-bidi:isolate;} /* Times must be fully readable on every device: the row wraps instead of truncating to "...". */ .sess-card-left{flex-wrap:wrap;row-gap:2px;} .sess-card-spots{font-size:12.5px;font-weight:700;flex-shrink:0;} /* Saturday Social Ride rows inside the session list: blue identity (#4aa8f8), matching the landing card and the staff session-strip chips. */ .sess-card-comm{border-inline-start:3px solid #4aa8f8;padding-inline-start:12px;} .sess-card-comm .sess-card-dot{border-color:#4aa8f8;} .sess-card-comm .sess-card-dot.on{background:#4aa8f8;border-color:#4aa8f8;} .sess-card-comm.sess-selected{background:rgba(74,168,248,.08);} .sess-card-comm:hover:not(.sess-full){background:rgba(74,168,248,.06);} .sess-comm-chip{font-size:10px;font-weight:900;color:#4aa8f8;border:1px solid rgba(74,168,248,.45);border-radius:2px;padding:2px 8px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;flex-shrink:0;} .spots-green{color:var(--green-d);} .spots-orange{color:var(--muted-l);} .spots-red{color:var(--red);} .no-sessions-msg{background:var(--s1);border:1px dashed var(--border);border-radius:7px;padding:32px;text-align:center;color:var(--muted);font-size:14px;font-weight:600;letter-spacing:.1px;} .sess-admin-table{width:100%;border-collapse:collapse;background:var(--s1);} .sess-admin-table th,.sess-admin-table td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(var(--tint-rgb),.04);font-size:13px;} .sess-admin-table th{font-weight:700;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.7px;background:none;border-bottom:1px solid var(--line2);} .sess-admin-table th.an-sort-th{cursor:pointer;user-select:none;transition:color .15s;white-space:nowrap;} .sess-admin-table th.an-sort-th:hover{color:rgba(var(--tint-rgb),.8);} .sess-admin-table th.an-sort-active{color:var(--green);} .sess-admin-table tbody tr:hover td{background:rgba(var(--tint-rgb),.018);} .badge-open{background:rgba(var(--green-rgb),.12);color:var(--green);border:1px solid rgba(var(--green-rgb),.3);padding:4px 12px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.3px;} .badge-closed{background:rgba(var(--tint-rgb),.05);color:var(--muted-l);border:1px solid rgba(var(--tint-rgb),.1);padding:4px 12px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.3px;} .badge-full{background:rgba(var(--tint-rgb),.05);color:var(--muted-l);border:1px solid rgba(var(--tint-rgb),.1);padding:4px 12px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.3px;} .form-section{background:var(--s1);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-1);} .form-title{font-size:16px;font-weight:700;margin-bottom:22px;letter-spacing:-.2px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} @media(max-width:640px){.form-row{grid-template-columns:1fr;gap:10px;}} /* First / middle / last name row. Double class so it outranks the narrow-width .form-row overrides below, and stacks to one column on phones like every other row. */ .form-row.form-row-3{grid-template-columns:repeat(3,1fr);} @media(max-width:640px){.form-row.form-row-3{grid-template-columns:1fr;}} .form-group{display:flex;flex-direction:column;gap:6px;min-width:0;} .form-group.full{grid-column:1/-1;} label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;} input[type="text"],input[type="tel"],input[type="number"],input[type="email"],input[type="date"],input[type="password"],select,textarea{ background:var(--s3);border:1px solid var(--border);border-radius:4px; padding:11px 14px;color:var(--text);font-family:var(--font-body); font-size:14px;font-weight:500;outline:none;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;width:100%;} input:focus,select:focus,textarea:focus{border-color:var(--green); box-shadow:0 0 0 2px rgba(var(--green-rgb),.12);outline:none;} input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.6);cursor:pointer;} select{appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;} .phone-row{display:flex;gap:8px;} .phone-cc{width:110px!important;flex-shrink:0;} .phone-num{flex:1;} .height-row{display:flex;align-items:center;gap:10px;} .height-row input{flex:1;} .size-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 16px;border-radius:5px;font-size:15px;font-weight:700;background:rgba(var(--green-rgb),.08);color:var(--green);border:1px solid rgba(var(--green-rgb),.3);white-space:nowrap;min-width:82px;} .size-chip-label{font-size:10px;color:var(--green-d);font-weight:700;margin-top:2px;opacity:.85;} .toggle-group{display:flex;gap:8px;flex-wrap:wrap;} .toggle-btn{padding:8px 18px;background:var(--s3);border:1px solid var(--border);border-radius:5px;color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;white-space:nowrap;} .toggle-btn:hover{border-color:rgba(var(--tint-rgb),.2);color:var(--text);} .toggle-btn.active{background:rgba(var(--green-rgb),.08);border-color:var(--green);color:var(--green);} .size-toggle{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 16px;min-width:76px;border-radius:6px;line-height:1;} .size-toggle .size-name{font-size:16px;font-weight:700;} .size-toggle .size-range{font-size:10px;font-weight:600;opacity:.55;transition:opacity .2s;} .size-toggle:hover .size-range{opacity:.8;} .size-toggle.active .size-range{opacity:1;color:rgba(var(--green-rgb),.85);} .btn-primary{background:var(--ac-fill);color:var(--acink);border:none;border-radius:3px;padding:12px 24px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease);letter-spacing:-.1px;} .btn-primary:hover{background:var(--ac-fill-h);color:var(--acink);transform:translateY(-1px);box-shadow:var(--sh-2);} .btn-primary:active{transform:translateY(0);} .btn-secondary{background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:11px 18px;font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease);} .btn-secondary:hover{border-color:rgba(var(--tint-rgb),.25);color:var(--text);} .btn-sm{padding:6px 13px;font-size:12px;font-weight:700;border-radius:3px;cursor:pointer;font-family:var(--font-body);transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s,opacity .18s;line-height:1.4;} .btn-sm:hover{opacity:.88;transform:translateY(-1px);} .btn-sm:active{transform:translateY(0);} .btn-sm:disabled{opacity:.3!important;cursor:not-allowed;transform:none;} .btn-green{background:rgba(var(--green-rgb),.12);color:var(--green);border:1px solid rgba(var(--green-rgb),.3);} .btn-green:hover{background:rgba(var(--green-rgb),.22);border-color:rgba(var(--green-rgb),.5);} .btn-red{background:rgba(var(--red-rgb),.12);color:var(--red);border:1px solid rgba(var(--red-rgb),.3);} .btn-red:hover{background:rgba(var(--red-rgb),.22);border-color:rgba(var(--red-rgb),.5);} .btn-muted{background:rgba(var(--tint-rgb),.04);color:var(--muted);border:1px solid rgba(var(--tint-rgb),.08);} .btn-muted:hover{background:rgba(var(--tint-rgb),.1);} .color-builder{display:flex;flex-direction:column;gap:10px;} .color-preview-bar{height:40px;border-radius:4px;border:1px solid rgba(var(--tint-rgb),.08);transition:background .2s;box-shadow:0 2px 12px rgba(16,19,18,.06);} .color-slots{display:flex;gap:10px;align-items:center;flex-wrap:wrap;} .color-slot{position:relative;} .color-slot input[type="color"]{width:52px;height:52px;border-radius:4px;border:2px solid rgba(var(--tint-rgb),.1);cursor:pointer;padding:3px;background:var(--s3);transition:border-color .2s;} .color-slot input[type="color"]:hover{border-color:rgba(var(--green-rgb),.5);} .color-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--red);border:none;color:#fff;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;box-shadow:0 2px 6px rgba(var(--red-rgb),.3);} .add-color-slot{width:52px;height:52px;border-radius:4px;border:2px dashed rgba(var(--tint-rgb),.12);background:rgba(var(--tint-rgb),.03);color:var(--muted);font-family:var(--font-body);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;text-align:center;line-height:1.2;} .add-color-slot:hover{border-color:rgba(var(--green-rgb),.45);color:var(--green);background:rgba(var(--green-rgb),.05);} .bike-color-strip{height:6px;border-radius:4px;margin-bottom:4px;box-shadow:0 1px 6px rgba(16,19,18,.06);} .ticket-card{ background:var(--bg); border:1px solid var(--line2); border-radius:7px;margin-top:28px; overflow:hidden; } /* v2 ticket: centered queue number + QR over a dashed perforation rule */ .ticket-top{ padding:32px 28px 26px;text-align:center; border-bottom:1px dashed var(--line2); } .ticket-num-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.8px;} .ticket-num{font-family:var(--font-body);font-size:84px;font-weight:700;color:var(--green-d);line-height:1;margin-top:8px;} .ticket-qr-wrap{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:8px;} .ticket-qr-caption{font-size:11px;font-weight:600;color:var(--muted-l);} .ticket-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20px 28px 22px;text-align:center;} .ticket-col{min-width:0;} .ticket-label{font-size:10px;font-weight:600;color:var(--muted-l);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;} .ticket-value{font-size:14px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;} @media(max-width:560px){.ticket-cols{grid-template-columns:repeat(2,1fr);row-gap:16px;}.ticket-num{font-size:64px;}} /* legacy ticket classes kept for renderBookingTicket (my rides card) */ .ticket-header{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px dashed var(--line2);position:relative;} .ticket-num-block{display:flex;flex-direction:column;gap:4px;} .ticket-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;} .ticket-body{padding:22px 24px 20px;} .ticket-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;} .ticket-cell{padding:12px 14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);} .ticket-cell:nth-child(3n){border-right:none;} .ticket-cell:nth-last-child(-n+3){border-bottom:none;} .ticket-notice{margin:0 24px 20px;padding:10px 14px;background:var(--s1);border:1px solid var(--border);border-radius:4px;font-size:11px;font-weight:700;color:var(--muted-l);line-height:1.6;text-align:center;} .stats-row{display:flex;gap:0;margin-bottom:22px;flex-wrap:wrap;border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;background:var(--s1);} .stat-card{background:none;border:none;border-radius:0;padding:18px 20px;flex:1;min-width:0;} .stat-card:not(:first-child){border-inline-start:1px solid var(--border);} .stat-num{font-size:32px;font-weight:700;line-height:1;letter-spacing:-1px;font-family:var(--font-body);} .stat-num.green{color:var(--green-d);} .stat-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin-top:8px;} .filter-pill{padding:7px 16px;background:transparent;border:1px solid var(--border);border-radius:3px;color:var(--muted);font-family:var(--font-body);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;} .filter-pill:hover{border-color:rgba(var(--tint-rgb),.2);color:var(--text);} .filter-pill.active{background:var(--ac-fill);border-color:var(--ac-fill);color:var(--acink);} /* Community > Accounts: tag chips, tag manager rows, per-customer tag picker (staff-only). */ .am-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;border:1px solid;white-space:nowrap;letter-spacing:.2px;} .am-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;} .am-meta{font-size:11px;color:var(--muted);font-weight:600;} .am-tag-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;} .am-cust{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);} .am-picker{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 14px;border-bottom:1px solid var(--border);} .am-pick{font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer;background:transparent;border:1px dashed var(--tc,#00e585);color:var(--tc,#00e585);opacity:.7;transition:opacity .15s,background .15s;font-family:var(--font-body);} .am-pick:hover{opacity:1;} .am-pick.on{opacity:1;border-style:solid;background:color-mix(in srgb, var(--tc,#00e585) 16%, transparent);} html[lang="ar"] .am-pick{font-family:'IBM Plex Sans Arabic',sans-serif;} .filter-select{ height:34px;padding:0 28px 0 10px; background:var(--in-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center; background-size:9px 5px; border:1px solid rgba(var(--tint-rgb),.1);border-radius:3px; color:var(--text);font-family:var(--font-body);font-size:12px;font-weight:700; cursor:pointer;appearance:none;-webkit-appearance:none; transition:border-color .2s;width:auto;min-width:0;flex-shrink:0; } .filter-select:focus{outline:none;border-color:rgba(var(--green-rgb),.5);} .filter-select:hover{border-color:rgba(var(--green-rgb),.35);} html[dir="rtl"] .filter-select{padding:0 10px 0 28px;background-position:left 8px center;} .filter-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-bottom:10px;overflow-x:auto;padding-bottom:2px;} .filter-row::-webkit-scrollbar{height:3px;} .filter-row::-webkit-scrollbar-thumb{background:rgba(var(--tint-rgb),.1);border-radius:2px;} .filter-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;flex-shrink:0;} @media(max-width:767px){.filter-select{font-size:12px;height:36px;}} .filter-spacer{flex:1;} .next-up-banner{ background:rgba(var(--green-rgb),.06); border:1px solid rgba(var(--green-rgb),.2);border-radius:7px;padding:18px 22px;margin-bottom:20px; display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;} .next-up-label{font-size:10px;font-weight:700;color:var(--green-d);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;} .next-up-name{font-size:20px;font-weight:700;color:var(--green);letter-spacing:-.3px;} .next-up-details{font-size:13px;color:var(--muted);margin-top:3px;} .table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:7px;border:1px solid var(--border);} .queue-table{width:100%;border-collapse:collapse;background:var(--s1);} @media(min-width:1024px){ .queue-table-desktop-wrap{overflow:visible;} /* sticky header ONLY inside the queue's overflow:visible wrapper - inside any overflow:auto .table-wrapper (bikes/inventory/sessions) sticky would pin the header 64px down INSIDE the box, on top of the first rows */ .queue-table-desktop-wrap .queue-table th{position:sticky;top:64px;z-index:5;background:var(--s1);} } .queue-table th{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;text-align:left;padding:12px 16px;border-bottom:1px solid var(--line2);white-space:nowrap;background:none;} .queue-table td{padding:14px 16px;border-bottom:1px solid rgba(var(--tint-rgb),.04);vertical-align:top;} .queue-table tbody tr:last-child td{border-bottom:none;} .queue-table tbody tr:hover td{background:rgba(var(--tint-rgb),.018);} .queue-table tbody tr.row-active{background:rgba(var(--green-rgb),.04);} .queue-table tbody tr.row-active:hover td{background:rgba(var(--green-rgb),.06);} .queue-table tbody tr.row-done{opacity:.42;} .queue-table tbody tr.row-noshow-cancel{background:rgba(var(--red-rgb),.06);opacity:.75;} .queue-table tbody tr.row-noshow-cancel td{border-bottom-color:rgba(var(--red-rgb),.12)!important;} .queue-table tbody tr.row-done-paid{background:rgba(var(--green-rgb),.05);} #loading-screen{display:flex;position:fixed;inset:0;background:#111;z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity .4s;} #loading-screen img{height:90px;width:auto;object-fit:contain;} #loading-screen .ld-txt{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.6px;animation:ldpulse 1.4s ease-in-out infinite;} @keyframes ldpulse{0%,100%{opacity:.4;}50%{opacity:1;}} .queue-table tbody tr.sess-group-hdr td{ background:var(--s2);border-top:2px solid rgba(var(--green-rgb),.18);border-bottom:1px solid rgba(var(--tint-rgb),.06); padding:10px 16px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.2px;} .queue-table tbody tr.sess-group-hdr:hover td{background:var(--s2);} .pos-badge{display:inline-block;font-size:10px;font-weight:700;color:var(--green); background:rgba(var(--green-rgb),.12);border:1px solid rgba(var(--green-rgb),.25); padding:1px 6px;border-radius:4px;margin-bottom:3px;white-space:nowrap;} .queue-num-cell{font-size:26px;font-weight:700;color:var(--green);letter-spacing:-.5px;} .rider-name{font-weight:700;font-size:14px;letter-spacing:-.1px;} .rider-sub{font-size:11px;color:var(--muted);margin-top:2px;} .actions-cell{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch;} .actions-cell .btn-sm{flex:1;min-width:72px;text-align:center;justify-content:center;} .walk-in-badge{font-size:10px;font-weight:700;background:rgba(var(--tint-rgb),.09);color:var(--muted-l);padding:1px 7px;border-radius:3px;margin-left:5px;} .pay-cell{display:flex;align-items:center;gap:7px;cursor:pointer;} .pay-cb{display:none;} .pay-toggle{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;min-height:26px;border-radius:3px;border:1.5px solid transparent; font-size:12px;font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s,opacity .18s;background:none;font-family:var(--font-body); white-space:nowrap;} .pay-toggle.paid{color:var(--green-d);border-color:transparent;background:none;padding:6px 4px;} .pay-toggle.paid:hover{opacity:.75;} .pay-toggle.pending{color:var(--orange);border-color:rgba(var(--warn-rgb),.5);background:none;} .pay-toggle.pending:hover{background:rgba(var(--warn-rgb),.1);border-color:rgba(var(--warn-rgb),.8);} .pay-toggle.house{color:var(--purple);border-color:rgba(var(--purple-rgb),.4);background:rgba(var(--purple-rgb),.09);} .pay-toggle.house:hover{background:rgba(var(--purple-rgb),.18);border-color:rgba(var(--purple-rgb),.7);} .pay-menu-opt{display:block;width:100%;padding:8px 12px;text-align:left;background:none;border:none;color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;border-radius:3px;transition:background .1s;} .pay-menu-opt:hover{background:rgba(var(--tint-rgb),.08);} .pay-menu-opt.active{color:var(--green);background:rgba(var(--green-rgb),.08);} .pay-label{font-size:12px;font-weight:700;white-space:nowrap;} .status-badge{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;white-space:nowrap;background:none;border:none;padding:0;} .badge-waiting{color:var(--muted);} .badge-active{color:var(--green-d);} .badge-done{color:var(--muted-l);} .badge-noshow{color:var(--red);} .type-badge{display:inline-block;padding:3px 10px;border-radius:3px;font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:.2px;} .type-road{background:rgba(var(--tint-rgb),.07);color:var(--text);border:1px solid rgba(var(--tint-rgb),.14);} .type-hybrid{background:rgba(var(--green-rgb),.1);color:var(--green);border:1px solid rgba(var(--green-rgb),.22);} .type-mountain{background:rgba(var(--tint-rgb),.07);color:var(--text);border:1px solid rgba(var(--tint-rgb),.14);} .type-gravel{background:rgba(var(--green-rgb),.08);color:var(--green);border:1px solid rgba(var(--green-rgb),.2);} .type-roadcarbon{background:rgba(var(--green-rgb),.14);color:var(--green);border:1px solid rgba(var(--green-rgb),.45);font-weight:800;} .type-any{background:rgba(var(--tint-rgb),.05);color:var(--muted-l);border:1px solid rgba(var(--tint-rgb),.09);} .type-badge{display:inline-flex;align-items:center;gap:5px;} @keyframes ticketIn{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}} .ticket-card{animation:ticketIn .45s cubic-bezier(.2,.8,.2,1) both;} .ticket-qr{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;width:56px;} .ticket-qr-cell{height:11px;border-radius:2px;background:rgba(var(--green-rgb),.18);} .ticket-qr-cell.solid{background:rgba(var(--green-rgb),.65);} .density-toggle{display:flex;gap:3px;align-items:center;} .density-btn{background:var(--s3);border:1px solid var(--border);border-radius:2px;padding:5px 9px;cursor:pointer;color:var(--muted);font-size:11px;font-weight:700;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;font-family:var(--font-body);letter-spacing:.3px;} .density-btn.active{border-color:rgba(var(--green-rgb),.4);color:var(--green);background:rgba(var(--green-rgb),.07);} .queue-table.compact th,.queue-table.compact td{padding:7px 10px;} .queue-table.compact .queue-num-cell{font-size:19px;} .queue-table.compact .rider-name{font-size:12px;} .queue-table.compact .pos-badge{font-size:9px;} .queue-table.compact .pay-toggle{font-size:10px;padding:3px 8px;} .empty-illustration{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;text-align:center;} .empty-illus-icon{margin-bottom:16px;opacity:.45;} .empty-illus-title{font-size:15px;font-weight:700;color:var(--muted);margin-bottom:6px;} .empty-illus-sub{font-size:12px;color:var(--muted);opacity:.7;max-width:260px;line-height:1.6;font-weight:600;} .empty-illus-action{margin-top:18px;} #cust-bottom-nav{ position:fixed;bottom:0;left:0;right:0;z-index:106; background:rgba(25,25,25,.97);border-top:1px solid rgba(252,249,244,.07); backdrop-filter:blur(14px); padding-bottom:env(safe-area-inset-bottom);display:none;} .cust-bnav-grid{display:grid;grid-template-columns:repeat(3,1fr);} .cust-bnav-btn{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;padding:10px 4px;background:none;border:none;cursor:pointer; color:var(--muted);font-family:var(--font-body); font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase; transition:color .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .cust-bnav-btn.active{color:var(--green);} .cust-bnav-btn svg{width:21px;height:21px;transition:transform .2s;} .cust-bnav-btn.active svg{transform:scale(1.1);} @media(max-width:767px){ #cust-bottom-nav{display:block;} #view-customer .view-main{padding-bottom:calc(70px + env(safe-area-inset-bottom));} } .session-spots{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:3px;font-size:12px;font-weight:700;} .spots-green{background:rgba(var(--green-rgb),.15);color:var(--green);} .spots-orange{background:rgba(var(--tint-rgb),.07);color:var(--muted-l);} .spots-red{background:rgba(var(--red-rgb),.15);color:var(--red);} .inline-form{background:var(--s1);border:1px solid var(--border);border-radius:6px;padding:22px;margin-bottom:20px;} .bikes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:14px;} .bikes-list{display:flex;flex-direction:column;gap:10px;} .bike-list-row{display:grid;grid-template-columns:4px 40px 1fr auto auto auto auto;align-items:center;gap:0 16px;padding:14px 18px;background:var(--s1);border:1px solid var(--border);border-radius:7px;transition:background .15s,border-color .15s;position:relative;overflow:hidden;} .bike-list-row:hover{background:var(--s2);border-color:rgba(var(--tint-rgb),.14);} .bike-list-strip{grid-column:1;align-self:stretch;border-radius:4px 0 0 4px;margin:-14px 0 -14px -18px;} .bike-list-dot-col{grid-column:2;display:flex;align-items:center;justify-content:center;} .bike-list-info{grid-column:3;min-width:0;} .bike-list-name{font-size:14px;font-weight:700;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bike-list-meta{display:flex;align-items:center;gap:7px;margin-top:4px;flex-wrap:wrap;} .bike-list-status{grid-column:4;font-size:11px;font-weight:700;white-space:nowrap;} .bike-list-actions{grid-column:5/8;display:flex;gap:6px;flex-shrink:0;} .bike-list-actions .btn-sm{flex:1;text-align:center;white-space:nowrap;} .sort-bar{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap;} .sort-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;} .sort-pill{padding:6px 14px;background:transparent;border:1px solid var(--border);border-radius:3px;color:var(--muted);font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;} .sort-pill:hover{border-color:rgba(var(--tint-rgb),.2);color:var(--text);} .sort-pill.active{background:var(--ac-fill);border-color:var(--ac-fill);color:var(--acink);} .sort-pill .sort-arrow{font-size:10px;margin-left:4px;opacity:.7;} .bike-card{background:var(--s1);border:1px solid var(--border);border-radius:7px;padding:16px;display:flex;flex-direction:column;gap:7px;transition:border-color .2s,transform .2s;} .bike-assign-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:16px;} .bike-assign-card{background:var(--s2);border:1.5px solid var(--border);border-radius:4px;padding:11px 13px;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s,opacity .18s;user-select:none;} .bike-assign-card:hover:not(.busy){border-color:rgba(var(--green-rgb),.5);background:rgba(var(--green-rgb),.05);} .bike-assign-card.selected{border-color:var(--green);background:rgba(var(--green-rgb),.09);} .bike-assign-card.busy{opacity:.45;cursor:not-allowed;} .bike-assign-name{font-size:13px;font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bike-assign-check{font-size:11px;font-weight:700;color:var(--green);margin-top:5px;} .type-count-box{background:var(--s3);border:1px solid var(--border);border-radius:6px;padding:16px 14px;text-align:center;} .type-count-input{width:80px;padding:10px 4px;text-align:center;font-size:28px;font-weight:700;background:var(--in-bg);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:var(--font-body);outline:none;display:block;margin:10px auto 6px;} .type-count-input:focus{border-color:rgba(var(--green-rgb),.5);} @media(max-width:767px){.bike-assign-grid{grid-template-columns:repeat(2,1fr);}} .bike-card:hover{border-color:rgba(var(--tint-rgb),.2);transform:translateY(-2px);} .bike-card-top{display:flex;align-items:center;justify-content:space-between;} .bike-icon{font-size:28px;line-height:1;} @keyframes dotPulse{0%,100%{transform:scale(1);opacity:1;}60%{transform:scale(1.3);opacity:.65;}} /* transform/opacity-only */ .avail-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;} .dot-green{background:var(--green);animation:dotPulse 2.5s ease-in-out infinite;} .dot-orange{background:rgba(var(--tint-rgb),.4);box-shadow:none;} .dot-blue{background:var(--blue);box-shadow:0 0 5px rgba(var(--blue-rgb),.5);} .dot-red{background:var(--red);box-shadow:0 0 4px rgba(var(--red-rgb),.4);} .bike-name{font-size:15px;font-weight:700;letter-spacing:-.1px;} .bike-meta{font-size:12px;color:var(--muted);} .bike-actions{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap;} .modal-backdrop{position:fixed;inset:0;background:rgba(16,19,18,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;} :root[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.85);} :root[data-theme="dark"] .auth-backdrop{background:rgba(0,0,0,.92);} :root[data-theme="dark"] .pin-backdrop{background:rgba(0,0,0,.88);} .modal-box{background:var(--s1);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;width:100%;max-width:580px;max-height:82vh;overflow-y:auto;box-shadow:var(--sh-3);} .modal-title{font-size:18px;font-weight:700;margin-bottom:6px;} .modal-sub{font-size:13px;color:var(--muted);margin-bottom:20px;} .modal-bikes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-bottom:20px;} .modal-bike-card{background:var(--s2);border:1.5px solid var(--border);border-radius:6px;padding:14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;} .modal-bike-card:hover:not(.unavailable){border-color:rgba(var(--green-rgb),.35);} .modal-bike-card.selected{border-color:var(--green);background:rgba(var(--green-rgb),.07);} .modal-bike-card.unavailable{opacity:.32;cursor:not-allowed;} .modal-footer{display:flex;justify-content:flex-end;gap:10px;padding-top:4px;border-top:1px solid rgba(var(--tint-rgb),.05);margin-top:4px;} .receipt-box{background:#111;border-radius:6px;padding:20px;font-family:monospace;font-size:12px;line-height:1.8;white-space:pre-wrap;margin-bottom:20px;color:rgba(var(--green-rgb),.85);border:1px solid rgba(var(--green-rgb),.12);box-shadow:0 0 20px rgba(var(--green-rgb),.05) inset;} #toast-container{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;} .toast{background:var(--s2);border:1px solid var(--border);border-inline-start:3px solid var(--green);border-radius:6px;padding:12px 22px;font-size:13px;font-weight:700;white-space:nowrap;pointer-events:all;box-shadow:0 4px 24px rgba(16,19,18,.14);animation:toastIn .28s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(12px);} .toast.error{border-inline-start-color:var(--red);} .toast.warning{border-inline-start-color:var(--muted-l);} @keyframes toastIn{from{transform:translateY(20px);opacity:0;scale:.96;}to{transform:none;opacity:1;scale:1;}} @keyframes rowFlash_green{0%{background:rgba(var(--green-rgb),.16);}100%{background:transparent;}} @keyframes rowFlash_blue{0%{background:rgba(var(--blue-rgb),.16);}100%{background:transparent;}} @keyframes rowFlash_orange{0%{background:rgba(var(--warn-rgb),.16);}100%{background:transparent;}} .bike-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:24px;} .bike-grid-card{background:var(--s2);border:1.5px solid rgba(var(--tint-rgb),.08);border-radius:7px;padding:14px;transition:border-color .18s;} .bike-grid-card:hover{border-color:rgba(var(--tint-rgb),.18);} .stat-card-clickable{transition:border-color .15s,transform .1s;} .stat-card-clickable:hover{border-color:rgba(var(--warn-rgb),.5);} .stat-card-clickable:active{transform:scale(.99);} .bk-bulk-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(var(--green-rgb),.10),rgba(var(--green-rgb),.04));border:1px solid rgba(var(--green-rgb),.3);border-radius:6px;padding:10px 14px;margin-bottom:16px;} .bk-bulk-count{font-weight:700;font-size:13px;color:var(--green);white-space:nowrap;} .bk-bulk-group{display:flex;align-items:center;gap:6px;} @media(max-width:560px){.bk-bulk-bar{gap:6px;padding:9px 10px;}.bk-bulk-bar .btn-sm{flex:0 0 auto;}} .view-toggle{display:flex;background:var(--s2);border:1px solid rgba(var(--tint-rgb),.08);border-radius:3px;overflow:hidden;} .view-toggle-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:6px 11px;font-size:14px;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s,opacity .15s;} .view-toggle-btn.active{background:rgba(var(--green-rgb),.12);color:var(--green);} .confirm-box{background:var(--s2);border:1px solid rgba(var(--tint-rgb),.1);border-radius:6px;padding:24px;width:min(92vw,420px);animation:modalSlideUp .18s ease;} .empty-state{text-align:center;padding:52px 24px;color:var(--muted);font-size:14px;font-weight:600;letter-spacing:.1px;} /* Skeleton loaders shown while the first data fetch is in flight (reuses the shimmer keyframe) */ .sk-wrap{padding:16px;display:flex;flex-direction:column;gap:10px;} .sk-row{height:54px;border-radius:6px;border:1px solid var(--border);background:linear-gradient(100deg,var(--s1) 30%,var(--s2) 50%,var(--s1) 70%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;} .sk-row.tall{height:74px;} .cashier-grid{display:grid;} @media(max-width:820px){.cashier-grid{grid-template-columns:1fr!important;}} *{-webkit-tap-highlight-color:transparent;} button{touch-action:manipulation;} .table-wrapper{-webkit-overflow-scrolling:touch;} input,select,textarea{-webkit-appearance:none;} ::-webkit-scrollbar{width:3px;height:3px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:rgba(var(--green-rgb),.25);border-radius:4px;} ::-webkit-scrollbar-thumb:hover{background:rgba(var(--green-rgb),.45);} @keyframes tabFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} @keyframes heroFloat{0%,100%{transform:translateY(0) rotate(0deg);}33%{transform:translateY(-9px) rotate(.3deg);}66%{transform:translateY(-4px) rotate(-.2deg);}} @keyframes shimmer{0%{background-position:200% center;}100%{background-position:-200% center;}} .tab-panel.active{animation:tabFadeIn .22s ease;} .sess-dashboard{background:var(--s2);border:1px solid rgba(var(--tint-rgb),.08);border-radius:6px;padding:14px 16px 12px;margin-bottom:16px;} .sess-dash-header{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap;} .sess-dash-stats{display:flex;gap:8px;flex-wrap:wrap;} .sess-dash-chip{background:var(--s3);border:1px solid rgba(var(--tint-rgb),.08);border-radius:4px;padding:9px 14px;min-width:80px;flex:1;} .sess-dash-num{font-size:20px;font-weight:700;line-height:1.1;white-space:nowrap;} .sess-dash-lbl{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.5px;margin-top:3px;text-transform:uppercase;} .queue-mobile-view{display:none;} .q-card{background:var(--s2);border:1px solid rgba(var(--tint-rgb),.08);border-radius:6px;padding:12px 14px;margin-bottom:8px;} .q-card.row-active{background:rgba(var(--green-rgb),.04);border-color:rgba(var(--green-rgb),.15);} .q-card.row-done-paid{background:rgba(var(--green-rgb),.015);} .q-card.row-done{opacity:.85;} .q-card.row-noshow-cancel{opacity:.5;} /* Staff-list picker: the add field doubles as a search over the queue, the waitlist and saved customers, and the browse button lists every addable booking. */ .mw-suggest{max-width:640px;margin-top:6px;background:var(--s2);border:1px solid rgba(var(--tint-rgb),.12);border-radius:6px;overflow:hidden auto;max-height:min(52vh,420px);} .mw-sug-head{padding:8px 12px 5px;background:var(--s3);color:var(--muted);font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;} .mw-sug{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;background:none;border:0;border-top:1px solid rgba(var(--tint-rgb),.06);color:var(--text);font:inherit;text-align:start;cursor:pointer;} .mw-sug:hover{background:rgba(var(--green-rgb),.08);} .mw-sug:focus-visible{background:rgba(var(--green-rgb),.08);outline:2px solid var(--green);outline-offset:-2px;} .mw-sug-tag{flex-shrink:0;min-width:40px;padding:2px 6px;border:1px solid rgba(var(--green-rgb),.4);border-radius:2px;color:var(--green);font-size:10px;font-weight:900;text-align:center;} .mw-sug-tag.wl{border-color:rgba(var(--warn-rgb),.45);color:var(--orange);} .mw-sug-tag.cust{border-color:rgba(var(--blue-rgb),.4);color:var(--blue);} .mw-sug-name{min-width:0;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mw-sug-meta{margin-inline-start:auto;min-width:0;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mw-sug-empty{padding:10px 12px;color:var(--muted);font-size:12px;font-weight:600;} @media(min-width:768px) and (max-width:1023px){ .view-main{padding:20px 20px 36px;} #landing-body{padding:40px 24px;} .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .rides-stat-row{grid-template-columns:repeat(4,1fr);} .session-cards-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));} .bikes-grid{grid-template-columns:repeat(3,1fr);} .modal-bikes-grid{grid-template-columns:repeat(3,1fr);} .hide-mobile{display:table-cell!important;} .queue-table th,.queue-table td{padding:11px 12px;} .sess-admin-table th,.sess-admin-table td{padding:10px 12px;} .modal-box{max-width:560px;padding:24px;} .auth-box{max-width:400px;} .form-section{padding:22px;} } @media(max-width:767px){ html,body{overflow-x:clip;} #view-landing,#view-customer,#view-staff{overflow-x:clip;} *{-webkit-tap-highlight-color:transparent;} #topbar{ padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); } #app-footer{ padding-bottom:max(28px,calc(env(safe-area-inset-bottom)+16px)); padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); } #cust-bottom-nav{ padding-bottom:max(8px,env(safe-area-inset-bottom)); padding-left:max(0px,env(safe-area-inset-left)); padding-right:max(0px,env(safe-area-inset-right)); } #topbar{height:52px;gap:6px;} .topbar-logo{gap:8px;flex-shrink:0;} .topbar-logo img{height:28px;max-width:96px;} .topbar-brand-name{font-size:13px;} .topbar-brand-sub{display:none;} .cust-topbar-email{display:none;} .cust-topbar-name{font-size:12px;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .lang-toggle{padding:6px 9px;font-size:11px;flex-shrink:0;} .topbar-btn{padding:6px 10px;font-size:11px;flex-shrink:0;min-height:36px;} .topbar-right{gap:5px;flex-shrink:0;} .view-badge{font-size:10px;padding:4px 8px;letter-spacing:.3px;} .tab-nav{padding:0 4px;justify-content:stretch;} .tab-btn{padding:12px 10px;font-size:11px;min-height:44px;flex:1;text-align:center;white-space:nowrap;} #customer-tab-nav{display:none;} .view-main{padding:12px 14px 24px;} .page-title{font-size:20px;margin-bottom:3px;} .page-sub{font-size:12px;margin-bottom:12px;line-height:1.4;} .section-header{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:14px;} .section-header > div:first-child{width:100%;} .section-header > button, .section-header > div:last-child:not(:first-child){width:100%;display:flex;gap:8px;flex-wrap:wrap;} .section-header .btn-primary, .section-header .btn-secondary{flex:1;text-align:center;justify-content:center;padding:10px 12px;font-size:13px;} .page-title{font-size:20px;} .page-sub{font-size:12px;line-height:1.4;margin-bottom:4px;} #view-customer .view-main{padding-bottom:calc(74px + env(safe-area-inset-bottom));} #view-staff .view-main{padding-bottom:24px;} #app-footer{padding-bottom:calc(70px + env(safe-area-inset-bottom));} #landing-body{padding:28px 16px 48px;text-align:center;} .landing-hero-grid{grid-template-columns:1fr;gap:28px;} .landing-hero-copy{align-items:center;text-align:center;} .landing-subtitle{text-align:center;margin-left:auto;margin-right:auto;} .landing-main-title{font-size:28px;margin-bottom:18px;line-height:1.1;} .landing-hero-card{border-radius:6px;} .landing-hero-card img{height:220px;} .landing-hero-cta-btn{width:42px;height:42px;font-size:18px;} .landing-avail-rows{margin-top:32px;} .landing-footer{margin-top:20px;} .form-section{padding:16px;border-radius:7px;} .form-title{font-size:15px;margin-bottom:14px;} .form-row{grid-template-columns:1fr;gap:10px;margin-bottom:10px;} .inline-form{padding:16px;border-radius:7px;} .form-group label{font-size:12px;} input[type="text"],input[type="tel"],input[type="number"],input[type="email"], input[type="date"],input[type="time"],input[type="password"],select{ padding:12px 14px;font-size:16px;border-radius:4px;min-height:46px; } .filter-select{height:40px;font-size:13px;min-height:40px;} .stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px;flex-wrap:unset;} .stats-row{gap:6px;margin-bottom:10px;} .stat-card{padding:10px 12px;min-width:0;border-radius:4px;} .stat-num{font-size:22px;line-height:1.1;} .stat-label{font-size:9px;letter-spacing:.3px;margin-top:2px;} .rides-stat-row{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:12px;} .rides-stat-card{padding:10px 12px;} .rides-stat-num{font-size:18px;} .rides-stat-label{font-size:9px;} .session-picker-wrap{margin-bottom:16px;} .session-cards-grid{grid-template-columns:repeat(2,1fr);gap:8px;} .sess-card{padding:12px 10px;} .sess-card-day{font-size:9px;letter-spacing:.3px;} .sess-card-date{font-size:15px;margin-bottom:3px;} .sess-card-spots{font-size:11px;} .sess-bar-desktop{display:none!important;} .sess-bar-mobile{display:block;} .hide-mobile{display:none!important;} .table-wrapper{border-radius:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;} .queue-table{min-width:680px;} .queue-table th{padding:8px 8px;font-size:10px;letter-spacing:0;white-space:nowrap;} .queue-table td{padding:9px 8px;white-space:nowrap;} .queue-num-cell{font-size:18px;} .rider-name{font-size:13px;} .rider-sub{font-size:10px;} .sess-admin-table{min-width:480px;} .sess-admin-table th,.sess-admin-table td{padding:9px 10px;font-size:12px;} .actions-cell{display:flex;gap:4px;flex-wrap:nowrap;align-items:stretch;} .btn-sm{padding:6px 10px;font-size:11px;min-height:34px;white-space:nowrap;} .btn-primary,.btn-secondary{min-height:46px;font-size:14px;} .toggle-group{gap:6px;flex-wrap:wrap;} .toggle-btn{padding:8px 12px;font-size:13px;min-height:40px;min-width:0;} .size-toggle{min-width:60px;padding:8px;border-radius:4px;} .size-toggle .size-name{font-size:14px;} .size-toggle .size-range{font-size:9px;} .qty-stepper{gap:12px;} .qty-btn{width:36px;height:36px;font-size:20px;} .qty-val{font-size:20px;} .hist-action-btns{width:100%;flex-shrink:unset;} .hist-action-btns .btn-secondary{flex:1;text-align:center;padding:9px 10px;font-size:12px;} .filter-row{gap:6px;margin-bottom:10px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;} .filter-row::-webkit-scrollbar{display:none;} .filter-label{font-size:10px;} .search-input{width:110px!important;} .search-wrap{flex-shrink:0;} .next-up-banner{padding:12px 14px;flex-direction:column;align-items:flex-start;gap:10px;} .next-up-banner .btn-primary{width:100%;text-align:center;} .next-up-name{font-size:16px;} .next-up-details{font-size:12px;} .price-preview{flex-direction:column;gap:4px;align-items:flex-start;padding:12px 14px;} .price-preview-total{font-size:18px;} .price-preview-breakdown{font-size:12px;line-height:1.5;} .ticket-card{margin-top:20px;} .ticket-header{padding:16px 14px 14px;} .ticket-body{padding:14px;} .ticket-grid{grid-template-columns:repeat(2,1fr);} .ticket-cell{padding:10px 11px;} .ticket-notice{margin:0 14px 16px;font-size:11px;} .account-stats-strip{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:20px;} .account-stat{padding:12px;} .account-stat-val{font-size:18px;} .size-chip{min-width:60px;padding:7px 10px;font-size:14px;} .bike-assign-grid{grid-template-columns:repeat(2,1fr);} .modal-backdrop{padding:0;align-items:flex-end;} .modal-box{ padding:20px 16px;border-radius:9px 9px 0 0; max-height:92dvh;width:100%;max-width:100%; padding-bottom:max(20px,env(safe-area-inset-bottom)); } .modal-bikes-grid{grid-template-columns:repeat(2,1fr);gap:8px;} .modal-title{font-size:16px;margin-bottom:4px;} .modal-sub{font-size:12px;margin-bottom:12px;} .modal-footer{flex-direction:column-reverse;gap:8px;} .modal-footer .btn-primary,.modal-footer .btn-secondary{width:100%;text-align:center;padding:13px;} .pin-box{padding:24px 18px;border-radius:7px;} .pin-numpad{gap:8px;} .pin-key{padding:14px 8px;font-size:18px;min-height:52px;} .auth-backdrop{ align-items:flex-end;padding:0; overflow:hidden; } .auth-box{ padding:20px 16px max(28px,env(safe-area-inset-bottom)); border-radius:9px 9px 0 0;width:100%;max-width:100%;margin:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; max-height:92dvh; height:auto; } .auth-logo{max-height:44px;} .auth-title{font-size:18px;} .auth-sub{font-size:12px;margin-bottom:14px;} .auth-tabs{margin-bottom:14px;} .auth-tab{padding:9px 16px;font-size:13px;} .auth-field{margin-bottom:10px;} .auth-submit{min-height:50px;font-size:16px;} .queue-mobile-view{display:block;} .queue-table-desktop-wrap{display:none;} .q-card .btn-sm{flex:1;padding:10px 12px;font-size:12px;min-height:40px;text-align:center;justify-content:center;} .sess-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;} .sess-dash-chip{min-width:0;padding:8px 10px;} .sess-dash-num{font-size:15px;} .undo-bar{min-width:0;width:calc(100vw - 28px);} .empty-state{padding:28px 16px;font-size:13px;} .rides-empty{padding:28px 16px;} .toast{font-size:12px;padding:10px 14px;white-space:normal; max-width:calc(100vw - 28px);text-align:center;} #toast-container{ width:100%;align-items:center; bottom:calc(70px + env(safe-area-inset-bottom) + 8px); left:0;transform:none;padding:0 14px; } } @media(max-width:390px){ .view-main{padding:10px 12px 20px;} .landing-main-title{font-size:22px;} .session-cards-grid{grid-template-columns:1fr 1fr;} .stats-row{grid-template-columns:repeat(2,1fr);} .account-stats-strip{grid-template-columns:repeat(2,1fr);} .bikes-grid{grid-template-columns:1fr 1fr;} .toggle-btn{padding:6px 9px;font-size:12px;} .size-toggle{min-width:52px;padding:7px 6px;} .size-toggle .size-name{font-size:13px;} .tab-btn{padding:10px 8px;font-size:10px;flex:1;} .ticket-num{font-size:48px;} .ticket-grid{grid-template-columns:1fr 1fr;} .topbar-right{gap:4px;} .topbar-brand-name{display:none;} .lang-toggle{padding:5px 6px;font-size:10px;} #topbar{gap:4px;} .queue-table{min-width:620px;} .filter-select{font-size:12px;height:38px;} .btn-sm{padding:5px 8px;font-size:11px;} } /* ── Sessions tab (phones <=480px): stack the admin tables into label/value cards so every session is fully visible with vertical-only scrolling. No contained horizontal table scroll. Desktop/tablet are untouched (these rules only apply under 480px). ── */ @media(max-width:480px){ #tab-sessions .table-wrapper{overflow-x:visible;border:none;border-radius:0;} #tab-sessions .sess-admin-table, #tab-sessions .sess-admin-table tbody, #tab-sessions .sess-admin-table tr, #tab-sessions .sess-admin-table td{display:block;width:100%;max-width:100%;box-sizing:border-box;} #tab-sessions .sess-admin-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;} #tab-sessions .sess-admin-table tr{background:var(--s1);border:1px solid var(--border);border-radius:6px;margin-bottom:10px;padding:2px;overflow:hidden;} #tab-sessions .sess-admin-table td{border:none;border-bottom:1px solid rgba(var(--tint-rgb),.05);padding:8px 14px;font-size:13px;text-align:left;overflow-wrap:anywhere;} #tab-sessions .sess-admin-table td:last-child{border-bottom:none;} #tab-sessions .sess-admin-table td::before{content:attr(data-label);display:block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:3px;} #tab-sessions .sess-admin-table td[colspan]{text-align:center;} #tab-sessions .sess-admin-table td[colspan]::before{display:none;} #tab-sessions .sess-admin-table td.cell-actions::before{display:none;} #tab-sessions .sess-admin-table td.cell-actions .actions-cell{gap:8px;} #tab-sessions .sess-admin-table td.cell-actions .btn-sm{flex:1 1 calc(50% - 5px);min-width:0;padding:10px;font-size:12px;} /* keep the "new session" add-form fleet-count grid contained (admin entry), not page-wide */ #tab-sessions .inline-form table{min-width:0;} } /* ── iOS touch & feedback polish (HIG: 44pt targets, no grey tap-flash, press feedback) ── */ .btn-primary,.btn-secondary,.btn-sm,.topbar-btn,.lang-toggle,.tab-btn,.toggle-btn,.filter-select,.pay-toggle,.cust-bnav-btn{ -webkit-tap-highlight-color:transparent;touch-action:manipulation; } .btn-primary:active,.btn-secondary:active{transform:scale(.97);} @media(max-width:767px){ .topbar-btn,.lang-toggle{min-height:44px;} /* HIG minimum touch target */ .actions-cell .btn-sm{min-height:44px;} /* session/booking row actions stay tappable */ } /* ── Staff Dashboard ── */ .dash-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;} .dash-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:linear-gradient(155deg,rgba(var(--tint-rgb),.045),var(--s1) 62%);border:1px solid var(--border);border-radius:6px;padding:18px 20px;cursor:pointer;font-family:var(--font-body);box-shadow:0 1px 3px rgba(16,19,18,.06);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;} .dash-kpi:hover{transform:translateY(-3px);border-color:rgba(var(--green-rgb),.28);box-shadow:0 12px 28px rgba(16,19,18,.12);} .dash-kpi-num{font-size:32px;font-weight:700;line-height:1.05;letter-spacing:-1px;} .dash-kpi-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;} .dash-kpi-sub{font-size:11px;color:var(--muted-l);font-weight:700;margin-top:2px;} .dash-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:6px 0 12px;display:flex;align-items:center;gap:8px;} .dash-alert-count{background:var(--ac-fill);color:#04130b;border-radius:3px;font-size:11px;font-weight:700;padding:1px 8px;} .dash-alerts{display:flex;flex-direction:column;gap:8px;} .dash-alert{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--s1);border:1px solid var(--border);border-inline-start-width:3px;border-radius:6px;padding:12px 14px;cursor:pointer;font-family:var(--font-body);transition:background .15s,transform .15s;} .dash-alert:hover{background:var(--s2);transform:translateX(2px);} .dash-alert .dash-alert-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;} .dash-alert.tone-red{border-inline-start-color:var(--red);} .dash-alert.tone-red .dash-alert-dot{background:var(--red);} .dash-alert.tone-orange{border-inline-start-color:var(--orange);} .dash-alert.tone-orange .dash-alert-dot{background:var(--orange);} .dash-alert.tone-blue{border-inline-start-color:var(--blue);} .dash-alert.tone-blue .dash-alert-dot{background:var(--blue);} .dash-alert-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .dash-alert-title{font-size:14px;font-weight:700;color:var(--text);} .dash-alert-sub{font-size:12px;color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .dash-alert-go{color:var(--muted);font-size:20px;font-weight:700;flex-shrink:0;} .dash-allclear{background:rgba(var(--green-rgb),.05);border:1px solid rgba(var(--green-rgb),.2);border-radius:6px;padding:20px;text-align:center;color:var(--green);font-size:14px;font-weight:700;} @media(max-width:1023px){.dash-kpi-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.dash-kpi-grid{gap:8px;}.dash-kpi{padding:14px 16px;}.dash-kpi-num{font-size:26px;}} /* ── Sessions two-pane (iPad/desktop list+detail) + master-detail (phone) ── */ .sess-twopane{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:16px;align-items:start;} .sess-list-pane{min-width:0;} .sess-list-scroll{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 300px);max-height:calc(100dvh - 300px);overflow-y:auto;padding-right:2px;-webkit-overflow-scrolling:touch;} .sess-lc{display:block;width:100%;text-align:left;background:var(--s1);border:1px solid var(--border);border-radius:6px;padding:12px 14px;cursor:pointer;font-family:var(--font-body);transition:border-color .15s,background .15s;} .sess-lc:hover{border-color:rgba(var(--green-rgb),.35);background:var(--s2);} .sess-lc.selected{border-color:var(--green);background:rgba(var(--green-rgb),.08);} .sess-lc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;} .sess-lc-date{font-size:15px;font-weight:700;letter-spacing:-.2px;} .sess-lc-meta{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sess-lc-bar{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-bottom:6px;} .sess-lc-bar>div{height:100%;border-radius:2px;transition:width .25s;} .sess-lc-count{font-size:11px;color:var(--muted-l);font-weight:700;} .sess-detail-pane{background:var(--s1);border:1px solid var(--border);border-radius:6px;padding:20px;min-width:0;} .sess-back-btn{display:none;background:none;border:none;color:var(--green);font-family:var(--font-body);font-size:15px;font-weight:700;cursor:pointer;padding:0 0 12px;align-items:center;gap:4px;min-height:44px;} .sess-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;} .sess-detail-date{font-size:22px;font-weight:700;letter-spacing:-.4px;} .sess-detail-day{font-size:12px;color:var(--muted);font-weight:700;margin-top:3px;overflow:hidden;text-overflow:ellipsis;} .sess-detail-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;} .sess-detail-stats>div{background:var(--s3);border:1px solid rgba(var(--tint-rgb),.06);border-radius:4px;padding:10px 14px;min-width:74px;} .sess-ds-num{font-size:20px;font-weight:700;line-height:1.1;} .sess-ds-lbl{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:3px;} .sess-ds-fleet{flex:2;min-width:120px;} .sess-ds-fleetval{font-size:13px;font-weight:700;line-height:1.3;} .sess-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;} .sess-detail-rtitle{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:10px;} .sess-detail-riders{display:flex;flex-direction:column;gap:6px;} .sess-rider{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s2);border:1px solid rgba(var(--tint-rgb),.05);border-radius:4px;} .sess-rider-q{font-size:12px;font-weight:700;color:var(--muted);min-width:30px;flex-shrink:0;} .sess-rider-info{flex:1;min-width:0;} .sess-rider-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sess-rider-bike{font-size:11px;color:var(--green);font-weight:700;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sess-detail-empty{display:flex;align-items:center;justify-content:center;min-height:220px;} @media(max-width:767px){ .sess-twopane{grid-template-columns:1fr;} .sess-list-scroll{max-height:none;overflow:visible;} .sess-twopane.has-detail .sess-list-pane{display:none;} .sess-twopane:not(.has-detail) .sess-detail-pane{display:none;} .sess-back-btn{display:inline-flex;} .sess-detail-pane{padding:16px;} } /* Pull-to-refresh indicator */ #ptr-ind{position:fixed;top:env(safe-area-inset-top,0);left:50%;transform:translateX(-50%) translateY(-64px);z-index:9998;width:38px;height:38px;border-radius:50%;background:var(--s2);border:1px solid var(--border);box-shadow:0 4px 14px rgba(16,19,18,.1);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;pointer-events:none;} #ptr-ind .ptr-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--green);} #ptr-ind.refreshing .ptr-spin{animation:ptrspin .7s linear infinite;} @keyframes ptrspin{to{transform:rotate(360deg);}} /* Phone fixes: Fleet header "Add Bike" button must never overflow (wraps to its own full-width row); session-detail action buttons go 2-up so none get clipped. */ @media(max-width:480px){ #tab-bikes .section-header > div:last-child{flex-wrap:wrap;gap:8px;width:100%;} #tab-bikes .section-header .view-toggle{flex:0 0 auto;} #tab-bikes .section-header .btn-primary{flex:1 1 100%;min-height:44px;} .sess-detail-actions .btn-sm{flex:1 1 calc(50% - 4px);min-height:44px;} } /* RTL phones: the base rule (html[dir="rtl"] .section-header{flex-direction:row}) keeps the header a horizontal row, pushing the action button and the page off-screen. Stack it like LTR so nothing overflows. */ @media(max-width:767px){ html[dir="rtl"] .section-header{flex-direction:column;align-items:stretch;} html[dir="rtl"] .section-header>div{text-align:start;} } /* Wide tables scroll inside their own wrapper instead of widening the whole page */ .table-wrapper{max-width:100%;} .analytics-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;} @media(max-width:1023px){.analytics-kpi-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.analytics-kpi-grid{grid-template-columns:1fr 1fr;gap:8px;}} .analytics-kpi-card{background:linear-gradient(155deg,rgba(var(--tint-rgb),.045),var(--s1) 62%);border:1px solid var(--border);border-radius:6px;padding:18px 20px;box-shadow:0 1px 3px rgba(16,19,18,.06);position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;} .analytics-kpi-card:hover{transform:translateY(-3px);border-color:rgba(var(--green-rgb),.28);box-shadow:0 12px 28px rgba(16,19,18,.12);} .analytics-kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--green-rgb),.65),transparent);opacity:0;transition:opacity .18s ease;} .analytics-kpi-card:hover::before{opacity:1;} .analytics-kpi-value{font-size:29px;font-weight:700;letter-spacing:-.6px;line-height:1;margin-bottom:5px;} .analytics-kpi-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;} .analytics-kpi-sub{font-size:11px;color:var(--muted);margin-top:5px;font-weight:600;} .analytics-section-title{font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.9px;margin:30px 0 14px;display:flex;align-items:center;gap:10px;} .analytics-section-title::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--green);flex-shrink:0;} .analytics-section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--tint-rgb),.14),transparent);} .analytics-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;} .analytics-bar-label{font-size:12px;font-weight:700;min-width:68px;color:var(--text);} .analytics-bar-track{flex:1;height:7px;background:rgba(var(--tint-rgb),.06);border-radius:4px;overflow:hidden;} .analytics-bar-fill{height:100%;border-radius:4px;transition:width .25s cubic-bezier(.2,.8,.2,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);} .analytics-bar-value{font-size:12px;font-weight:700;min-width:44px;text-align:right;color:var(--text);} .analytics-trend-table{width:100%;border-collapse:collapse;} .analytics-trend-table th{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line2);white-space:nowrap;background:none;} .analytics-trend-table td{padding:12px 14px;border-bottom:1px solid rgba(var(--tint-rgb),.04);font-size:13px;vertical-align:middle;} .analytics-trend-table tbody tr:hover td{background:rgba(var(--tint-rgb),.018);} .analytics-occ-bar{display:flex;align-items:center;gap:8px;} .analytics-occ-track{width:60px;height:5px;background:rgba(var(--tint-rgb),.08);border-radius:3px;overflow:hidden;flex-shrink:0;} .analytics-occ-fill{height:100%;border-radius:3px;} .chart-card{background:linear-gradient(160deg,rgba(var(--tint-rgb),.028),var(--s1) 58%);border:1px solid var(--border);border-radius:6px;padding:20px;box-shadow:0 1px 3px rgba(16,19,18,.06);transition:border-color .18s ease,box-shadow .18s ease;} .chart-card:hover{border-color:rgba(var(--tint-rgb),.16);box-shadow:0 8px 24px rgba(16,19,18,.1);} .chart-card-title{font-size:12px;font-weight:700;letter-spacing:-.1px;margin-bottom:2px;} .chart-card-sub{font-size:11px;color:var(--muted);margin-bottom:12px;font-weight:600;line-height:1.4;} .chart-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;} .chart-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;} .chart-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .chart-grid-wide{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-bottom:14px;} @media(max-width:767px){.chart-grid-wide{grid-template-columns:1fr;}} .chart-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;} @media(max-width:767px){.chart-grid-3{grid-template-columns:1fr;}} .chart-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;} @media(max-width:767px){.chart-grid-2{grid-template-columns:1fr;}} .donut-wrap{display:flex;align-items:center;gap:16px;} .donut-legend{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0;} .donut-legend-item{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;min-width:0;} .donut-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;} .an-range-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;align-items:center;background:linear-gradient(160deg,rgba(var(--tint-rgb),.03),var(--s1) 60%);border:1px solid var(--border);border-radius:6px;padding:10px 13px;box-shadow:0 1px 3px rgba(16,19,18,.06);} .an-range-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;} /* ── Analytics sub-tab navigation (redesign) ── */ .an-anchor{display:none!important;} .an-sticky{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,var(--bg) 72%,transparent);padding:8px 0 6px;margin:0 0 8px;} .an-sticky .an-range-bar{margin-bottom:8px;} .an-subnav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;} .an-nav-btn{flex:0 0 auto;padding:8px 16px;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--muted);font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease,opacity .16s ease;letter-spacing:.2px;} .an-nav-btn:hover{border-color:rgba(var(--green-rgb),.35);color:var(--text);transform:translateY(-1px);} .an-nav-btn.active{background:var(--ac-fill);border-color:var(--ac-fill);color:var(--acink);} @media(max-width:767px){.an-subnav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:2px 16px;}.an-subnav::-webkit-scrollbar{display:none;}.an-nav-btn{padding:7px 13px;font-size:11px;}} /* Period-over-period delta pill on KPI labels */ .an-delta{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:700;letter-spacing:0;margin-left:5px;padding:1px 6px;border-radius:3px;background:rgba(var(--tint-rgb),.06);vertical-align:middle;text-transform:none;white-space:nowrap;} /* Chart hover targets get a pointer + subtle highlight so tooltips feel interactive */ .an-hit{cursor:pointer;transition:opacity .12s ease,filter .12s ease;} svg:hover .an-hit{opacity:.45;} svg .an-hit:hover{opacity:1!important;filter:brightness(1.15) drop-shadow(0 0 4px rgba(var(--green-rgb),.4));} .an-sort-th{cursor:pointer;user-select:none;transition:color .15s;} .an-sort-th:hover{color:rgba(var(--tint-rgb),.85)!important;} .an-sort-active{color:var(--green)!important;} .an-sort-active::after{content:' ↑';font-size:9px;} .an-sort-active.desc::after{content:' ↓';} .analytics-highlight-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px;} @media(max-width:767px){.analytics-highlight-row{grid-template-columns:1fr;}} .analytics-highlight-card{background:linear-gradient(160deg,rgba(var(--tint-rgb),.028),var(--s1) 58%);border:1px solid var(--border);border-radius:6px;padding:18px 20px;transition:border-color .18s ease,box-shadow .18s ease;} .analytics-highlight-card:hover{border-color:rgba(var(--tint-rgb),.16);box-shadow:0 8px 24px rgba(16,19,18,.08);} .hl-item{margin-bottom:14px;} .hl-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;} .hl-value{font-size:19px;font-weight:700;} .insights-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:24px;} .insight-card{display:flex;gap:12px;align-items:flex-start;border-radius:6px;padding:13px 15px;border:1px solid;} .insight-card.good{background:rgba(var(--green-rgb),.06);border-color:rgba(var(--green-rgb),.22);} .insight-card.warn{background:rgba(var(--warn-rgb),.06);border-color:rgba(var(--warn-rgb),.25);} .insight-card.alert{background:rgba(217,9,9,.06);border-color:rgba(217,9,9,.22);} .insight-card.info{background:rgba(var(--blue-rgb),.06);border-color:rgba(var(--blue-rgb),.22);} .insight-card.purple{background:rgba(160,106,240,.06);border-color:rgba(160,106,240,.22);} .insight-icon{font-size:18px;line-height:1;flex-shrink:0;margin-top:1px;} .insight-title{font-size:12px;font-weight:700;margin-bottom:3px;letter-spacing:.2px;} .insight-body{font-size:12px;color:var(--muted);line-height:1.5;font-weight:600;} .insight-card.good .insight-title{color:var(--green);} .insight-card.warn .insight-title{color:var(--text);} .insight-card.alert .insight-title{color:var(--red);} .insight-card.info .insight-title{color:var(--green);} .insight-card.purple .insight-title{color:var(--green);} .kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;margin-top:4px;} .kpi-delta.up{background:rgba(var(--green-rgb),.12);color:var(--green);} .kpi-delta.down{background:rgba(217,9,9,.1);color:var(--red);} .kpi-delta.flat{background:rgba(var(--tint-rgb),.06);color:var(--muted);} .occ-gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;} .occ-gauge-svg{overflow:visible;} @media(max-width:767px){.insights-grid{grid-template-columns:1fr;}} .search-wrap{position:relative;flex-shrink:0;} .search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.4;} .search-input{background:var(--s3);border:1px solid rgba(var(--tint-rgb),.09);border-radius:3px; padding:6px 12px 6px 32px;color:var(--text);font-family:var(--font-body); font-size:13px;font-weight:500;outline:none;transition:border-color .2s;width:200px;} .search-input:focus{border-color:rgba(var(--green-rgb),.5);background:var(--s2);} .search-input::placeholder{color:var(--muted);} @media(max-width:767px){.search-input{width:130px;font-size:12px;}} .filter-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .filter-group-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;} .filter-bar{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;} .filter-bar-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;} @media(max-width:767px){.filter-bar-row{gap:5px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;} .filter-bar-row::-webkit-scrollbar{display:none;}} .sort-pill .asc::after{content:' ↑';} .sort-pill .desc::after{content:' ↓';} .result-count{font-size:11px;font-weight:700;color:var(--muted);padding:0 4px;} #booth-popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;align-items:center;justify-content:center;padding:24px;} .booth-popup-box{background:var(--s2);border:1px solid rgba(var(--green-rgb),.3);border-radius:7px;padding:32px;max-width:380px;width:100%;text-align:center;position:relative;} .booth-popup-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;font-family:var(--font-body);} .booth-popup-close:hover{color:var(--text);} .booth-popup-icon{font-size:48px;margin-bottom:16px;} .booth-popup-title{font-size:20px;font-weight:700;margin-bottom:10px;} .booth-popup-msg{font-size:14px;font-weight:600;color:var(--muted-l);line-height:1.7;} /* Accessibility: visible keyboard focus (mouse clicks stay clean via :focus-visible) */ :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px;} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--green);outline-offset:2px;} :root[data-theme="light"] :focus-visible{outline-color:var(--green-d);} /* Respect users who ask for less motion */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } /* Low-stock count badge on the Inventory staff tab */ /* Thumb-reachable primary action: the sale total + Record button stick to the bottom of the viewport on phones so a long cart never buries the main action. Styled like the topbar. */ @media (max-width:720px){ .mm-cart-foot,.mm-reg-foot{position:sticky;bottom:0;z-index:20;margin-top:8px; padding:8px 4px calc(8px + env(safe-area-inset-bottom)); background:var(--bg);border-top:1px solid var(--border); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:0 -10px 20px -12px rgba(0,0,0,.55);} } /* Perf: let the browser skip rendering + layout for off-screen cards (big analytics/ session lists). contain-intrinsic-size 'auto ' remembers the real size once rendered, so the scrollbar stays stable. */ .chart-card{content-visibility:auto;contain-intrinsic-size:auto 240px;} .sess-card{content-visibility:auto;contain-intrinsic-size:auto 100px;} .tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:3px;background:var(--orange);color:#1a1200;font-size:10px;font-weight:700;line-height:1;vertical-align:middle;} /* ── iPhone / iOS UI enhancements ─────────────────────────────────────── */ /* Prevent Safari's zoom-on-focus: any focusable control under 16px makes iOS zoom in and shift the layout. 16px on touch widths stops it (!important to beat inline font-sizes on some fields). */ @media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } } /* Installed PWA: the translucent status bar lets content sit under the notch / Dynamic Island. Reserve that space at the top of the sticky header. */ @media all and (display-mode: standalone) { #topbar { padding-top: env(safe-area-inset-top); height: calc(64px + env(safe-area-inset-top)); } } @media all and (display-mode: standalone) and (max-width: 767px) { #topbar { height: calc(52px + env(safe-area-inset-top)); } } /* Comfortable tap targets for the customer's primary controls on phones. */ @media (max-width: 767px) { .btn-primary, .btn-secondary { min-height: 46px; } } /* ── Display numerals: Chakra Petch (race-timing numerals), tabular so digits align ── */ .landing-main-title span,.topbar-brand-sub,.queue-num-cell,.pos-badge,.ticket-num,.ticket-dial-num, .stat-num,.rides-stat-num,.account-stat-val,.analytics-kpi-value,.dash-kpi-num,.sess-dash-num, .sess-ds-num,.hl-value,.price-preview-total,.type-count-input,.size-toggle .size-name,.size-chip, .next-up-name,.sess-lc-date,.sess-detail-date{ font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums; } html[lang="ar"] .landing-main-title span,html[lang="ar"] .topbar-brand-sub,html[lang="ar"] .queue-num-cell, html[lang="ar"] .pos-badge,html[lang="ar"] .ticket-num,html[lang="ar"] .ticket-dial-num, html[lang="ar"] .stat-num,html[lang="ar"] .rides-stat-num,html[lang="ar"] .account-stat-val, html[lang="ar"] .analytics-kpi-value,html[lang="ar"] .dash-kpi-num,html[lang="ar"] .sess-dash-num, html[lang="ar"] .sess-ds-num,html[lang="ar"] .hl-value,html[lang="ar"] .price-preview-total, html[lang="ar"] .type-count-input,html[lang="ar"] .size-toggle .size-name,html[lang="ar"] .size-chip, html[lang="ar"] .next-up-name,html[lang="ar"] .sess-lc-date, html[lang="ar"] .sess-detail-date{ font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:700; } /* ════════════════ JEDDAH CORNICHE CIRCUIT identity layer ════════════════ Motorsport timing-tower look: condensed italic display type, race numerals, angled CTAs, session rows as a timing board. Appended last so it wins the cascade at equal specificity; the html[lang="ar"] guards at the bottom re-assert Arabic typography (condensed italic has no Arabic equivalent and synthesized oblique Arabic is illegible). */ /* Display headings: Barlow Condensed 800 italic, uppercase */ .landing-main-title,.page-title,.auth-title,.modal-title,.form-title,.rides-zero-num{ font-family:var(--font-display);font-weight:800;font-style:italic; text-transform:uppercase;letter-spacing:.2px; } .landing-main-title{font-size:54px;line-height:.96;letter-spacing:-.5px;} .landing-main-title span{font-family:inherit;font-weight:800;color:var(--green-d);} .page-title{font-size:28px;letter-spacing:0;} .auth-title{font-size:26px;} .modal-title{font-size:22px;} .form-title{font-size:19px;} .topbar-brand-name{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;font-size:18px;letter-spacing:.5px;} @media(max-width:1100px){.topbar-brand-name{font-size:16px;}} /* Section eyebrows: Chakra Petch, wide tracking (timing-tower labels) */ .section-label{font-family:var(--font-mono);letter-spacing:3px;} /* Topbar: a plain hairline. The green "start-light" segment that used to sit under the logo is gone — it read as a stray underline rather than a racing motif. */ #topbar{border-bottom:1px solid var(--border);} /* Primary CTA: angled start/finish chevron cut, condensed italic label */ .btn-primary{ border-radius:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); font-family:var(--font-display);font-weight:800;font-style:italic; text-transform:uppercase;font-size:16px;letter-spacing:1px;padding:12px 28px; } /* clip-path swallows the default outline (it paints outside the border box), so focus gets an inset ring instead */ .btn-primary:focus-visible{outline:none;box-shadow:inset 0 0 0 2.5px var(--acink);} .btn-secondary{ border-radius:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); font-family:var(--font-display);font-weight:800;font-style:italic; text-transform:uppercase;font-size:14px;letter-spacing:1px; } .btn-secondary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--green);} /* Session board: each session is a timing-tower row - carbon panel with a green start-light edge; full sessions lose the light */ .sess-card,.landing-avail-row{ background:var(--s1);border:1px solid var(--border);border-inline-start:3px solid var(--green); border-radius:0;margin-bottom:10px; } .sess-card.sess-full,.landing-avail-row.full{border-inline-start-color:var(--border);} .sess-card.sess-selected{background:var(--acsoft);border-color:var(--accent2);border-inline-start-color:var(--green);} .landing-avail-rows{border-top:none;} /* Status lamps glow like start lights */ .sess-card-dot.on,.landing-avail-dot:not(.full){box-shadow:0 0 8px rgba(var(--green-rgb),.9);} .sess-card-date,.landing-avail-date{font-weight:700;} /* Ticket: timing-green top strip */ .ticket-card{position:relative;overflow:hidden;} .ticket-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--green);} /* ── Arabic guards: IBM Plex, upright, no uppercase games ── */ html[lang="ar"] .landing-main-title,html[lang="ar"] .page-title,html[lang="ar"] .auth-title, html[lang="ar"] .modal-title,html[lang="ar"] .form-title,html[lang="ar"] .rides-zero-num, html[lang="ar"] .topbar-brand-name,html[lang="ar"] .section-label, html[lang="ar"] .btn-primary,html[lang="ar"] .btn-secondary{ font-family:'IBM Plex Sans Arabic',sans-serif;font-style:normal;text-transform:none; } html[lang="ar"] .landing-main-title{font-size:38px;line-height:1.3;} html[lang="ar"] .btn-primary{font-size:15px;} html[lang="ar"] .btn-secondary{font-size:13px;} /* ── JEDDAH CORNICHE CIRCUIT layer 2: every remaining component ── Timing-tower micro-labels, uppercase tab/badge/button furniture, green start-light edge on raised surfaces. The Chakra Petch stack includes IBM Plex Sans Arabic so Arabic glyphs fall through cleanly. */ /* Micro-labels and table headers: race-timing capitals */ .queue-table th,.filter-label,.filter-group-label,.sort-label,.stat-label,.rides-stat-label, .ticket-num-label,.view-badge,.analytics-kpi-label,.an-range-label,.hl-label, .session-picker-label,.chart-card-title,.analytics-section-title,.analytics-bars-title{ font-family:'Chakra Petch','IBM Plex Sans Arabic',sans-serif;letter-spacing:1.6px; } .queue-table th{letter-spacing:1.2px;} /* Tabs: pit-board capitals with the existing green underline */ .tab-btn,.auth-tab{text-transform:uppercase;letter-spacing:1.2px;font-weight:700;} /* Badges: timing-board chips */ .status-badge,.type-badge,.walk-in-badge{ font-family:'Chakra Petch','IBM Plex Sans Arabic',sans-serif;font-weight:700; text-transform:uppercase;letter-spacing:.8px; } /* Utility buttons: uppercase furniture, quiet but on-theme */ .btn-sm,.toggle-btn,.filter-pill,.density-btn,.topbar-btn,.pay-toggle,.inv-navbtn,.lang-toggle{ text-transform:uppercase;letter-spacing:.8px; } /* Raised surfaces get the start-light edge */ .modal-box,.auth-box,.booth-popup-box,.pin-box{border-top:3px solid var(--green);} /* ── Arabic guards for layer 2 ── */ html[lang="ar"] .tab-btn,html[lang="ar"] .auth-tab, html[lang="ar"] .status-badge,html[lang="ar"] .type-badge,html[lang="ar"] .walk-in-badge, html[lang="ar"] .btn-sm,html[lang="ar"] .toggle-btn,html[lang="ar"] .filter-pill, html[lang="ar"] .density-btn,html[lang="ar"] .topbar-btn,html[lang="ar"] .pay-toggle, html[lang="ar"] .inv-navbtn,html[lang="ar"] .lang-toggle{ text-transform:none; } /* Bare headings (staff panels use inline-styled h2/h3/h4): same display face. Inline styles only set size/weight, so family/italic/case apply cleanly. */ h2,h3,h4{font-family:var(--font-display);font-style:italic;text-transform:uppercase;letter-spacing:.3px;} html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{font-family:'IBM Plex Sans Arabic',sans-serif;font-style:normal;text-transform:none;} /* ── JEDDAH CORNICHE CIRCUIT layer 3: race-craft details ── */ /* Landing eyebrow: timing label with a start-light dash */ .landing-eyebrow{display:flex;align-items:center;gap:10px;font-family:'Chakra Petch','IBM Plex Sans Arabic',sans-serif;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--green);margin-bottom:16px;} .landing-eyebrow::before{content:'';width:26px;height:2px;background:var(--green);flex-shrink:0;} html[lang="ar"] .landing-eyebrow{text-transform:none;} /* Ghost display text behind the hero (decorative, Latin display face - hidden in AR) */ #landing-body{position:relative;overflow:hidden;} .landing-ghost{position:absolute;top:-6px;inset-inline-end:-24px;white-space:nowrap;font-family:var(--font-display);font-weight:800;font-style:italic;font-size:clamp(96px,15vw,200px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--border);text-transform:uppercase;pointer-events:none;user-select:none;z-index:0;} .landing-hero-grid,.landing-avail-rows,.landing-footer{position:relative;z-index:1;} html[lang="ar"] .landing-ghost{display:none;} /* Speed stripes: green fading divider */ .sector-stripes{display:flex;gap:6px;margin:40px 0 6px;} .sector-stripes i{height:4px;flex:1;} .sector-stripes i:nth-child(1){background:var(--green);} .sector-stripes i:nth-child(2){background:rgba(var(--green-rgb),.45);} .sector-stripes i:nth-child(3){background:rgba(var(--green-rgb),.18);} /* Start-line dashed strip above the landing session board */ .landing-avail-rows{padding-top:26px;} .landing-avail-rows::before{content:'';position:absolute;top:8px;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,var(--border) 0 12px,transparent 12px 24px);} /* Footer carries the green strip on top */ #app-footer{position:relative;} #app-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--green);} /* Primary CTA: timing-green glow, stronger on hover */ .btn-primary{box-shadow:0 4px 18px rgba(var(--green-rgb),.22);} .btn-primary:hover{box-shadow:0 6px 26px rgba(var(--green-rgb),.32);} /* Capacity bars glow like the pit-lane light strip (semantic inline colors still win) */ .sess-chip-fill{background:linear-gradient(90deg,var(--green),var(--green-h));box-shadow:0 0 6px rgba(var(--green-rgb),.45);} /* Text selection in timing green */ ::selection{background:var(--green);color:var(--acink);} /* Slim carbon scrollbars */ html{scrollbar-width:thin;scrollbar-color:var(--s3) transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{background:var(--s3);border-radius:5px;} ::-webkit-scrollbar-thumb:hover{background:var(--muted-l);} ::-webkit-scrollbar-track{background:transparent;} /* Boot loader on asphalt with a timing-label pulse */ #loading-screen{background:#08090b;} #loading-screen .ld-txt{font-family:'Chakra Petch','IBM Plex Sans Arabic',sans-serif;text-transform:uppercase;letter-spacing:3px;color:var(--green);} html[lang="ar"] #loading-screen .ld-txt{text-transform:none;letter-spacing:0;} /* ── Add-on product photos: big enough to actually see, biggest on phones ── */ .addon-thumb{width:52px;height:52px;border-radius:4px;object-fit:contain;background:var(--photo-bg);border:1px solid var(--border);flex-shrink:0;} .addon-thumb-sm{width:44px;height:44px;} @media(max-width:767px){ .addon-thumb{width:72px;height:72px;} .addon-thumb-sm{width:56px;height:56px;} .addon-row{gap:14px;padding:14px 4px;} } /* ── JEDDAH CORNICHE CIRCUIT layer 4 ── */ /* Ticket: perforated stub line with punch holes between the number/QR and the details */ .ticket-cols{border-top:1px dashed var(--line2);position:relative;} .ticket-cols::before,.ticket-cols::after{content:'';position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--border);} .ticket-cols::before{left:-10px;} .ticket-cols::after{right:-10px;} /* Inputs: timing-green focus ring */ input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--acsoft);outline:none;} /* an invalid field keeps its red ring while focused - a green ring around a red border reads as mixed signals */ input.field-invalid:focus,select.field-invalid:focus{box-shadow:0 0 0 3px rgba(var(--red-rgb),.15);} /* Analytics KPI cards: timing-green top strips */ .analytics-kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--green);} /* Session rows light up on hover */ .sess-card:hover:not(.sess-full),.landing-avail-row:hover:not(.full){border-color:rgba(var(--green-rgb),.4);box-shadow:0 0 14px rgba(var(--green-rgb),.12);} /* Booking stepper: the active step glows like a start light, digits in race numerals */ .reg-stepper [aria-current]{font-family:var(--font-mono);font-variant-numeric:tabular-nums;} .reg-stepper [aria-current="step"]{box-shadow:0 0 10px rgba(var(--green-rgb),.55);} /* Sticky queue header must be opaque: the base th rule's background:none was winning the cascade, letting row text and the filter bar scroll straight through the stuck header strip */ @media(min-width:1024px){ .queue-table-desktop-wrap .queue-table th{background:var(--s1);box-shadow:0 1px 0 var(--line2);} } /* ── Add-on photos: big, tappable product shots ── */ .addon-thumb{width:72px;height:72px;border-radius:6px;cursor:zoom-in;transition:transform .15s ease,box-shadow .15s ease;} .addon-thumb:hover,.addon-thumb:focus-visible{transform:scale(1.06);box-shadow:0 4px 16px rgba(0,0,0,.35);} .addon-thumb-sm{width:56px;height:56px;} @media(max-width:767px){ .addon-thumb{width:96px;height:96px;} .addon-thumb-sm{width:64px;height:64px;} } /* Full-screen product photo viewer */ .photo-lightbox{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .15s ease;} .photo-lightbox img{max-width:min(92vw,560px);max-height:70vh;object-fit:contain;background:var(--photo-bg);border-radius:8px;padding:12px;} .photo-lightbox-cap{color:#fff;font-weight:700;font-size:15px;text-align:center;} .photo-lightbox-close{position:absolute;top:18px;inset-inline-end:18px;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:18px;width:42px;height:42px;border-radius:50%;cursor:pointer;} @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* ── Staff topbar controls: one visual system ── */ .topbar-btn,.lang-toggle{height:34px;} .topbar-btn.icon{width:36px;padding:0;justify-content:center;} .role-seg{display:inline-flex;align-items:stretch;height:34px;border:1px solid var(--border);border-radius:4px;overflow:hidden;flex-shrink:0;} .role-seg button{background:none;border:none;color:var(--muted-l);font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.8px;text-transform:uppercase;padding:0 14px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;} .role-seg button+button{border-inline-start:1px solid var(--border);} .role-seg button.on{background:rgba(var(--green-rgb),.14);color:var(--green);cursor:default;} .role-seg button:not(.on):hover{background:rgba(var(--tint-rgb),.06);color:var(--text);} html[lang="ar"] .role-seg button{font-family:'IBM Plex Sans Arabic',sans-serif;text-transform:none;font-size:13px;} /* ── Phone UX pass ── */ /* 1. iOS zooms the page into any focused field rendered under 16px - keep every input at 16px on phones so forms never trigger the jump (beats inline styles). */ @media(max-width:767px){ input,select,textarea,.filter-select{font-size:16px!important;} } /* 3. Native-feeling press feedback: buttons compress slightly under the finger */ @media (prefers-reduced-motion: no-preference){ button:not(:disabled):active{transform:scale(.97);} } /* 6. Roomier action buttons on small phones - Check In / No-Show sit close together */ @media(max-width:400px){ .actions-cell{gap:8px;} } /* 2. While the on-screen keyboard is up, sticky footer bars unstick so they never hover over the focused field (set via the visualViewport listener). */ html.kb-open .mm-reg-foot,html.kb-open .mm-cart-foot{position:static;} /* ── Light theme, more black: the topbar goes asphalt (matching the footer and bottom nav), and the page gray deepens a step so white cards pop against it. ── */ :root:not([data-theme="dark"]){--bg:#e9edee;} :root:not([data-theme="dark"]) #topbar{background:var(--foot);border-bottom-color:rgba(255,255,255,.08);} :root:not([data-theme="dark"]) #topbar .topbar-btn, :root:not([data-theme="dark"]) #topbar .lang-toggle{color:#c4ccc7;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);} :root:not([data-theme="dark"]) #topbar .topbar-btn:hover, :root:not([data-theme="dark"]) #topbar .lang-toggle:hover{color:#ffffff;} :root:not([data-theme="dark"]) #topbar .topbar-btn.danger{color:#e59384;} :root:not([data-theme="dark"]) #topbar .role-seg{border-color:rgba(255,255,255,.15);} :root:not([data-theme="dark"]) #topbar .role-seg button{color:#9aa39d;} :root:not([data-theme="dark"]) #topbar .role-seg button+button{border-inline-start-color:rgba(255,255,255,.15);} :root:not([data-theme="dark"]) #topbar .role-seg button.on{background:rgba(0,229,133,.16);color:#00e585;} :root:not([data-theme="dark"]) #topbar .role-seg button:not(.on):hover{background:rgba(255,255,255,.07);color:#ffffff;} :root:not([data-theme="dark"]) #topbar .view-badge{color:#c4ccc7;border-color:rgba(255,255,255,.2);} :root:not([data-theme="dark"]) #topbar .cust-topbar-name{color:#f2f5f2;} :root:not([data-theme="dark"]) #topbar .cust-topbar-email{color:#9aa39d;} :root:not([data-theme="dark"]) #topbar .topbar-brand-name{color:#00e585;} :root:not([data-theme="dark"]) #topbar .staff-access-btn{color:#9aa39d;} :root:not([data-theme="dark"]) #topbar .btn-primary.topbar-reserve{background:#00cf78;color:#04140c;} /* ── Light theme, more black (round 2): the staff panel's hero moments go asphalt ── */ /* Next Up banner: dark panel with the timing-green name - the eye lands here first */ :root:not([data-theme="dark"]) .next-up-banner{background:var(--foot);border-color:rgba(0,229,133,.35);} :root:not([data-theme="dark"]) .next-up-label{color:#8b939b;} :root:not([data-theme="dark"]) .next-up-label span{color:#8b939b!important;} :root:not([data-theme="dark"]) .next-up-name{color:#00e585;} :root:not([data-theme="dark"]) .next-up-details{color:#9aa39d;} :root:not([data-theme="dark"]) .next-up-banner .btn-primary{background:#00cf78;color:#04140c;} /* Table headers: dark timing strips over white rows (all staff tables) */ :root:not([data-theme="dark"]) .queue-table thead th{background:var(--foot);color:#9aa39d;border-bottom-color:rgba(255,255,255,.12);} :root:not([data-theme="dark"]) .queue-table thead th.an-sort-active{color:#00e585;} :root:not([data-theme="dark"]) .queue-table thead th.an-sort-th:hover{color:#f2f5f2;} :root:not([data-theme="dark"]) .queue-table-desktop-wrap .queue-table th{background:var(--foot);box-shadow:0 1px 0 rgba(255,255,255,.12);} /* ── Sticky footer: on short pages the footer hugs the viewport bottom instead of floating mid-page with raw page background showing beneath it ── */ body{display:flex;flex-direction:column;} #app-footer{margin-top:auto;} /* ── My Rides rider profile: tier bar, badges, member card, share ── */ .mr-tierbar{height:4px;background:var(--s2);border-radius:2px;margin:7px auto 5px;max-width:130px;overflow:hidden;} .mr-tierbar i{display:block;height:100%;background:var(--green);transition:width .25s;} .mr-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;} .mr-badge{display:inline-flex;align-items:center;gap:7px;background:var(--s1);border:1px solid var(--border);border-radius:4px;padding:8px 12px;font-size:12.5px;font-weight:700;cursor:default;} .mr-badge-ic{font-size:15px;line-height:1;} .mr-badge.locked{opacity:.45;filter:grayscale(1);} .mr-badge-p{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:1px;} .mr-cardrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px;} .member-card{flex:1;min-width:280px;max-width:440px;background:#0b0d10;border:1px solid #232830;border-top:3px solid #00e585;border-radius:7px;padding:18px 20px;color:#f2f5f2;} .member-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;} .member-card-brand{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;font-size:15px;letter-spacing:.5px;} .member-card-brand i{color:#00e585;} .member-card-tier{font-family:'Chakra Petch','IBM Plex Sans Arabic',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#00e585;border:1px solid rgba(0,229,133,.35);padding:3px 10px;border-radius:999px;white-space:nowrap;} .member-card-name{font-family:var(--font-display);font-weight:800;font-style:italic;font-size:30px;text-transform:uppercase;margin:14px 0 12px;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .member-card-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;} .member-card-lbl{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#8b939b;text-transform:uppercase;margin-bottom:3px;} .member-card-val{font-family:var(--font-mono);font-weight:700;font-size:15px;} html[lang="ar"] .member-card-name{font-family:'IBM Plex Sans Arabic',sans-serif;font-style:normal;text-transform:none;} html[lang="ar"] .member-card-tier{letter-spacing:0;} /* ── Badge info card + member card logo ── */ .member-card-logo{height:30px;width:auto;object-fit:contain;} .badge-pop{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .15s ease;} .badge-pop-box{background:var(--s1);border:1px solid var(--border);border-top:3px solid var(--green);border-radius:7px;padding:26px 24px;width:min(92vw,320px);text-align:center;} .badge-pop-ic{font-size:44px;line-height:1;margin-bottom:10px;} .badge-pop-ic.locked{opacity:.45;filter:grayscale(1);} .badge-pop-nm{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;font-size:22px;margin-bottom:12px;} .badge-pop-how{font-family:'Chakra Petch','IBM Plex Sans Arabic',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:4px;} .badge-pop-d{font-size:13.5px;font-weight:600;color:var(--text);} .badge-pop-earned{margin-top:12px;font-weight:800;color:var(--green);font-size:13px;} .badge-pop-prog{margin-top:12px;font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--green);letter-spacing:1px;} html[lang="ar"] .badge-pop-nm{font-family:'IBM Plex Sans Arabic',sans-serif;font-style:normal;text-transform:none;} /* ── Emil Kowalski animation pass ── */ /* Popovers scale in from their trigger (150ms, strong ease-out); modals stay centered */ @keyframes payMenuIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}} .pay-menu-popup{transform-origin:top;animation:payMenuIn .15s var(--ease) both;} /* Small dialogs enter with scale(.97)+fade - nothing appears from nothing */ @keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}} .badge-pop-box{animation:popIn .18s var(--ease) both;} .photo-lightbox img{animation:popIn .18s var(--ease) both;} /* Hover-lift transforms are desktop-only: taps fire :hover on touch and the lift sticks until the next tap, so gate them to real pointers */ @media (hover: none){ .undo-bar-action:hover,.social-link:hover,.btn-primary:hover,.btn-sm:hover, .bike-card:hover,.dash-kpi:hover,.dash-alert:hover,.analytics-kpi-card:hover, .addon-thumb:hover{transform:none;} } /* Sign in with Apple: black button per Apple's HIG (white in dark theme surface) */ .btn-apple{background:#000;color:#fff;border-color:#000;margin-top:8px;} .btn-apple:hover{background:#1a1a1a;color:#fff;} :root[data-theme="dark"] .btn-apple{background:#fff;color:#000;border-color:#fff;} :root[data-theme="dark"] .btn-apple:hover{background:#e8e8e8;color:#000;} /* Add to Apple Wallet: a mini "pass" - matte-black card, hairline green edge, matching the black/green pass it generates. Same look in both themes. */ .btn-wallet{width:100%;display:flex;align-items:center;justify-content:center;gap:10px; background:linear-gradient(180deg,#141619,#050607);color:#f4f7f4; border:1px solid rgba(0,229,133,.32);border-radius:13px;padding:13px 18px; font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:.2px; cursor:pointer;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35); transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;} /* thin green sheen across the top edge, echoing the pass's label colour */ .btn-wallet::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(0,229,133,.85),transparent);} .btn-wallet .wallet-glyph{flex:none;color:#f4f7f4;} .btn-wallet:hover{border-color:rgba(0,229,133,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,229,133,.16);} .btn-wallet:active{transform:scale(.985);} .btn-wallet:disabled{opacity:.6;cursor:default;transform:none;} .btn-wallet:focus-visible{outline:2px solid #00e585;outline-offset:2px;} @media (prefers-reduced-motion: reduce){.btn-wallet{transition:none;}.btn-wallet:active{transform:none;}} html[lang="ar"] .btn-wallet{font-family:'IBM Plex Sans Arabic',sans-serif;} /* ════════════════════════════════════════════════════════════════════════ CUSTOMER RESKIN — micromobility.sa brand (paper #FBF9F4, #00b467 CTAs, #123019 selected chips, #077a4b kickers, 6-10px radii, Space Grotesk). Scoped to body: the staff area keeps the JCC identity above in full — same markup, same classes, untouched look. Reference: "Rentals Mobile (iPhone)" handoff, Section 00 + 07. ════════════════════════════════════════════════════════════════════════ */ body{ --bg:#FBF9F4; --s1:#ffffff; --s2:#ffffff; --s3:#f2efe8; --in-bg:#ffffff; --green:#077a4b; --green-h:#06603b; --green-d:#06603b; --ac-fill:#00b467; --ac-fill-h:#00a25d; --acink:#04140c; --red:#a33b2e; --orange:#8a5c14; --blue:#2f63ad; --purple:#7a46c2; --text:#1A1919; --muted:#4f565c; --muted-l:#8b897f; --border:rgba(26,25,25,.14); --accent2:rgba(7,122,75,.4); --warn:rgba(26,25,25,.38); --photo-bg:#ffffff; --line2:rgba(26,25,25,.16); --acsoft:rgba(7,122,75,.08); --foot:#123019; --footink:#fbf9f4; --footmut:#9fc4ab; --green-rgb:7,122,75; --tint-rgb:26,25,25; --red-rgb:163,59,46; --warn-rgb:138,92,20; --purple-rgb:122,70,194; --blue-rgb:47,99,173; --r-xs:4px; --r-sm:6px; --r-md:6px; --r-lg:8px; --r-xl:10px; --sh-1:none; --sh-2:0 1px 3px rgba(26,25,25,.06); --sh-3:0 12px 32px rgba(26,25,25,.10); --font-body:'Space Grotesk','IBM Plex Sans Arabic',sans-serif; --font-display:'Space Grotesk','IBM Plex Sans Arabic',sans-serif; --font-mono:'Space Grotesk','IBM Plex Sans Arabic',sans-serif; color-scheme:light; background-color:var(--bg); background-image:none; /* paper is flat — no radial green tint */ color:var(--text); } /* Header: 54px white bar with a bottom hairline (site header recipe #1) */ body #topbar{background:var(--s1);border-bottom:1px solid rgba(26,25,25,.10);box-shadow:none;} /* Primary CTA: #00b467 fill, #04140c ink, 6px radius, 48px, 700 */ body .btn-primary{ background:var(--ac-fill);color:var(--acink);border-radius:6px;min-height:48px; font-size:15px;font-weight:700;letter-spacing:0;} body .btn-primary:hover{background:var(--ac-fill-h);} body .btn-primary:active{background:var(--ac-fill-h);transform:scale(.98);} body .btn-secondary{ background:#ffffff;color:var(--text);border:1px solid rgba(26,25,25,.25);border-radius:6px;min-height:44px;font-weight:700;} /* Chips (bike type, filters): 44px, 6px radius; selected = dark #123019 with neon dot */ body .toggle-btn{ background:#ffffff;border:1px solid rgba(26,25,25,.16);border-radius:6px;color:var(--text); font-weight:500;min-height:44px;} body .toggle-btn.active{ background:#123019;border-color:#123019;color:#fbf9f4;font-weight:700;} body .toggle-btn.active::before{ content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#03FF89; margin-inline-end:7px;vertical-align:1px;} /* Inputs: white, 8px radius, ≥46px, hairline border; focus ring #077a4b */ body input[type="text"],body input[type="tel"], body input[type="number"],body input[type="email"], body input[type="date"],body input[type="password"], body select,body textarea{ background:#ffffff;border:1px solid rgba(26,25,25,.16);border-radius:8px;color:var(--text); min-height:46px;font-size:16px;} body input:focus,body select:focus,body textarea:focus{ border-color:#077a4b;box-shadow:inset 0 0 0 1px #077a4b;outline:none;} body input[type="checkbox"]{accent-color:#00b467;width:22px;height:22px;border-radius:6px;} body :focus-visible{outline:2px solid #077a4b;} /* Cards: white, 10-12px radius, hairline — kill glow/heavy shadows */ body .landing-event-card{ background:#ffffff;border:1px solid rgba(26,25,25,.14);border-radius:12px;box-shadow:none;} body .landing-event-card:hover{transform:none;border-color:rgba(26,25,25,.25);box-shadow:0 1px 3px rgba(26,25,25,.06);} /* Event-card titles: Space Grotesk has no italic — upright 700, uppercase stays */ body .lec-title{font-style:normal;font-weight:700;letter-spacing:.4px;} /* Kickers: 11px/800 uppercase 1.4px #077a4b (AR overrides below) */ body .lec-kicker,body .landing-kicker{ color:#077a4b;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;} html[lang="ar"] body .lec-kicker,html[lang="ar"] body .landing-kicker{ font-size:12px;letter-spacing:0;text-transform:none;} /* Arabic type rules: taller lines, no letter-spacing, Plex first */ html[lang="ar"] body{ --font-body:'IBM Plex Sans Arabic','Space Grotesk',sans-serif; --font-display:'IBM Plex Sans Arabic','Space Grotesk',sans-serif; line-height:1.7;} html[lang="ar"] body .lec-title{letter-spacing:0;} /* Ticket + auth + modal surfaces ride the token remap; hairline them explicitly */ body .ticket-card,body .auth-box,body .modal-box{ background:#ffffff;border:1px solid rgba(26,25,25,.14);box-shadow:0 12px 32px rgba(26,25,25,.10);} /* Motion: pressed = darker + 98%; reduced-motion already globally handled */ body button:active{transition-duration:.15s;} /* ── Reskin part 2: neutralize the motorsport identity on customer pages ── (condensed-italic display, chevron-cut CTAs and timing-board rows are retired app-wide) */ body .btn-primary,body .btn-secondary{ clip-path:none;font-family:var(--font-body);font-style:normal;text-transform:none;letter-spacing:0;} body .btn-primary{font-size:15px;font-weight:700;border-radius:6px;} body .btn-secondary{font-size:14px;font-weight:700;border-radius:6px;} body .btn-primary:focus-visible{outline:none;box-shadow:inset 0 0 0 2.5px var(--acink);} body .landing-main-title,body .page-title, body .auth-title,body .modal-title, body .form-title,body .rides-zero-num{ font-family:var(--font-body);font-style:normal;} body .landing-main-title{font-size:34px;font-weight:600;letter-spacing:-1.2px;line-height:1.1;text-transform:none;} body .landing-main-title span{font-weight:700;color:#06603b;} body .page-title{font-size:21px;font-weight:700;letter-spacing:.4px;} body .auth-title{font-size:26px;font-weight:700;letter-spacing:-.4px;text-transform:none;} body .modal-title{font-size:20px;font-weight:700;text-transform:none;letter-spacing:0;} body .form-title{font-size:17px;font-weight:700;text-transform:none;letter-spacing:0;} body h2,body h3,body h4{ font-family:var(--font-body);font-style:normal;text-transform:none;letter-spacing:0;} body .topbar-brand-name{font-family:var(--font-body);font-style:normal;font-weight:700;letter-spacing:0;text-transform:none;} body .landing-ghost{display:none;} /* racing ghost numerals are staff-era */ body .section-label{font-family:var(--font-body);letter-spacing:1.4px;font-weight:800;font-size:11px;text-transform:uppercase;color:#4f565c;} html[lang="ar"] body .section-label{letter-spacing:0;text-transform:none;font-size:13px;} /* Session rows: white 10px slot cards, no start-light edge */ body .sess-card,body .landing-avail-row{ background:#ffffff;border:1px solid rgba(26,25,25,.14);border-inline-start:1px solid rgba(26,25,25,.14);border-radius:10px;} /* Ticket: queue number in ink (design: 76px+/700, -2px tracking, never green) */ body .ticket-num{color:var(--text);letter-spacing:-2px;} body .queue-num-cell{color:var(--text);} /* Bottom tab bar: light paper bar, hairline, ink active + green dot */ body #cust-bottom-nav{background:rgba(251,249,244,.97);border-top:1px solid rgba(26,25,25,.10);} body .cust-bnav-btn{color:#8b897f;font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;} body .cust-bnav-btn.active{color:#1A1919;font-weight:700;} body .cust-bnav-btn.active::after{content:'';width:5px;height:5px;border-radius:50%;background:#00b467;margin-top:1px;} body .cust-bnav-btn.active svg{transform:none;} /* Auth: boxed white fields instead of underline inputs */ body .auth-box .auth-field input{ background:#ffffff;border:1px solid rgba(26,25,25,.16);border-radius:8px;padding:12px 14px;min-height:46px;font-size:16px;} body .auth-box .auth-field input:focus{border-color:#077a4b;box-shadow:inset 0 0 0 1px #077a4b;} body .btn-google{border-radius:6px;background:#ffffff;min-height:48px;} /* Card kickers restored (reference frames): venue name above the title — JCC green, community/Micromobility blue. lec2 copy is a flex column. */ body .lec2-copy .lec-kicker{display:block;margin-bottom:0;} body .landing-event-card.community .lec-kicker{color:#2f63ad;} /* ── Customer side is LIGHT-ONLY: no theme toggle, and theme-swapped image pairs always resolve to their on-light art regardless of the html data-theme attr (a staff device toggled dark must not leak white-wordmark art onto paper). ── */ body #theme-toggle-btn{display:none;} html[data-theme="dark"] body .mm-on-light{display:inline;} html body .mm-on-dark{display:none;} /* ════════════════════════════════════════════════════════════════════════ STAFF ERP RESKIN — Micromobility ERP design (design_handoff_erp_reskin). Scoped to body.view-staff so the customer paper skin above is untouched. Desk #f2f2ec · cards #ffffff · hairlines #e2e2d8 · ink #111512 · brand green #0c7a3d · dark surface #123019 / topbar+rail #0f1215 with #03FF89 neon strictly as small accents on dark. Barlow / IBM Plex Arabic. ════════════════════════════════════════════════════════════════════════ */ body.view-staff{ --bg:#f2f2ec; --s1:#ffffff; --s2:#f4f6f3; --s3:#f7f7f2; --in-bg:#ffffff; --green:#0c7a3d; --green-h:#0a6a35; --green-d:#0c7a3d; --ac-fill:#0c7a3d; --ac-fill-h:#0a6a35; --acink:#ffffff; /* one-accent system: blue collapses to ink and purple to muted inside staff — status colors (green/amber/red/neutral) are reserved for status */ --red:#a33b2e; --orange:#8a5c14; --blue:#111512; --purple:#5a635c; --text:#111512; --muted:#5a635c; --muted-l:#8a938c; --border:#e2e2d8; --line2:#e2e2d8; --accent2:rgba(12,122,61,.4); --warn:rgba(17,21,18,.38); --photo-bg:#ffffff; --acsoft:rgba(12,122,61,.07); --foot:#0f1215; --footink:#e9edee; --footmut:#9aa39d; --green-rgb:12,122,61; --tint-rgb:17,21,18; --red-rgb:163,59,46; --warn-rgb:138,92,20; --purple-rgb:90,99,92; --blue-rgb:17,21,18; --r-xs:4px; --r-sm:6px; --r-md:6px; --r-lg:8px; --r-xl:10px; --sh-1:none; --sh-2:0 1px 3px rgba(16,19,18,.06); --sh-3:0 12px 40px rgba(16,19,18,.16); --font-body:'Barlow','IBM Plex Sans Arabic',sans-serif; --font-display:'Barlow','IBM Plex Sans Arabic',sans-serif; --font-mono:'Barlow','IBM Plex Sans Arabic',sans-serif; background:var(--bg);background-image:none;color:var(--text); /* Surface roles — the dark staff theme flips these in one place. */ --sf-card:#ffffff; --sf-line:#e2e2d8; --sf-line2:#dfe4e6; --sf-ctl:#cfd6d9; --sf-ctl-h:#b7c0c4; --sf-head:#f7f7f2; --sf-zebra:#fafcfa; --sf-hover:#f4f6f3; --sf-hover2:#f7f9f9; --sf-sep:#eef1ec; --sf-chip:#f2f2ec; --sf-green-ink:#0c7a3d; } html[lang="ar"] body.view-staff{ --font-body:'IBM Plex Sans Arabic','Barlow',sans-serif; --font-display:'IBM Plex Sans Arabic','Barlow',sans-serif; --font-mono:'IBM Plex Sans Arabic','Barlow',sans-serif; } /* ── Topbar: 56px ink strip, neon accent segment, white logo mark ── (#topbar doubled so this outranks the :root[data-theme] topbar recipes) */ body.view-staff #topbar#topbar{ background:#0f1215;border-bottom:none;height:56px;padding:0 clamp(12px,2.5vw,24px); backdrop-filter:none;-webkit-backdrop-filter:none;position:sticky; } /* the mark art is already brand green — no white filter, it reads as the accent on ink */ body.view-staff #topbar-logo-img{height:26px;max-width:120px;} body.view-staff #topbar .lang-toggle{ color:#d7dcda;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14); border-radius:7px;height:38px;padding:0 12px;font-size:11.5px;font-weight:700;text-transform:none;letter-spacing:0; } body.view-staff #topbar .lang-toggle:hover{background:rgba(255,255,255,.1);color:#fff;} body.view-staff #topbar .topbar-btn{ color:#d7dcda;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14); border-radius:7px;height:38px;font-size:11.5px;font-weight:700;text-transform:none;letter-spacing:0; } body.view-staff #topbar .topbar-btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22);} body.view-staff #topbar .topbar-btn.danger:hover{color:#ff8d7e;border-color:rgba(255,141,126,.4);background:rgba(229,72,77,.12);} body.view-staff #topbar .topbar-btn.undo-btn{color:#03ff89;border-color:rgba(3,255,137,.3);background:rgba(3,255,137,.08);} body.view-staff #topbar .topbar-btn.undo-btn:hover{background:rgba(3,255,137,.16);} body.view-staff #topbar .role-seg{border-color:rgba(255,255,255,.15);border-radius:7px;height:38px;} body.view-staff #topbar .role-seg button{color:#9aa39d;text-transform:none;letter-spacing:.2px;font-size:12px;} body.view-staff #topbar .role-seg button+button{border-inline-start-color:rgba(255,255,255,.15);} body.view-staff #topbar .role-seg button.on{background:rgba(3,255,137,.12);color:#03ff89;} body.view-staff #topbar .role-seg button:not(.on):hover{background:rgba(255,255,255,.07);color:#fff;} /* ── Layout: dark rail sidebar (#staff-tab-nav re-clothed) + desk content ── */ body.view-staff #view-staff.active{ display:grid;grid-template-columns:232px minmax(0,1fr);align-items:stretch; background:linear-gradient(to right,#0f1215 232px,transparent 232px); /* rail column stays dark past the sticky nav */ } html[dir="rtl"] body.view-staff #view-staff.active{background:linear-gradient(to left,#0f1215 232px,transparent 232px);} @media(max-width:1023px){ body.view-staff #view-staff.active,html[dir="rtl"] body.view-staff #view-staff.active{background:none;} } body.view-staff #staff-tab-nav{ display:flex;flex-direction:column;justify-content:flex-start;gap:2px; background:#0f1215;border-bottom:none;border-inline-end:1px solid rgba(255,255,255,.07); padding:14px 10px;position:sticky;top:56px;height:calc(100vh - 56px);height:calc(100dvh - 56px); overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#2a3138 #0f1215; } body.view-staff #view-staff .view-main{max-width:none;padding:26px clamp(18px,3vw,40px) 80px;min-width:0;} /* group labels between nav items */ body.view-staff .snav-group{ font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase; color:#5d666b;padding:14px 11px 5px;white-space:nowrap; } html[lang="ar"] body.view-staff .snav-group{letter-spacing:0;text-transform:none;font-size:11px;} body.view-staff #staff-tab-nav .snav-group:first-child{padding-top:2px;} body.view-staff #staff-tab-nav.desk-mode .snav-group{display:none;} body.view-staff #staff-tab-nav .tab-btn{ display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box; padding:11px;min-height:40px;border:none;border-radius:9px;text-align:start; font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#7d868d; transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } html[lang="ar"] body.view-staff #staff-tab-nav .tab-btn{letter-spacing:0;text-transform:none;font-size:13px;} body.view-staff #staff-tab-nav .tab-btn:hover{background:rgba(255,255,255,.08);color:#c3ccd2;border-bottom-color:transparent;} body.view-staff #staff-tab-nav .tab-btn.active{background:#123019;color:#03ff89;border-bottom-color:transparent;} body.view-staff #staff-tab-nav .tab-btn .tab-badge{ background:var(--sf-card);color:var(--text);border-radius:8px;min-width:16px;height:16px;font-size:9.5px;font-weight:700; } /* tablet & phones: rail becomes a horizontal dark strip above the content */ @media(max-width:1023px){ body.view-staff #view-staff.active{display:block;} body.view-staff #staff-tab-nav{ flex-direction:row;align-items:center;height:auto;position:sticky;top:0;z-index:60; overflow-x:auto;overflow-y:hidden;padding:8px 10px;border-inline-end:none; border-bottom:1px solid rgba(255,255,255,.1);scrollbar-width:none; } body.view-staff .snav-group{display:none;} body.view-staff #staff-tab-nav .tab-btn{width:auto;flex:0 0 auto;padding:9px 13px;min-height:40px;} body.view-staff #view-staff .view-main{padding:16px 14px 40px;} } /* ── Page furniture ── */ body.view-staff .page-title{ font-family:var(--font-body);font-size:22px;font-weight:700;font-style:normal; letter-spacing:-.4px;text-transform:none;margin-bottom:2px; } body.view-staff .page-sub{font-size:12.5px;color:var(--muted);margin-bottom:20px;} body.view-staff .section-label{ font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--muted-l); } html[lang="ar"] body.view-staff .section-label{letter-spacing:0;} body.view-staff h2,body.view-staff h3,body.view-staff h4{ font-family:var(--font-body);font-style:normal;text-transform:none;letter-spacing:0; } body.view-staff .card{border-radius:10px;border-color:var(--border);box-shadow:none;} /* ── Buttons ── */ body.view-staff .btn-primary{ background:#0c7a3d;color:#fff;border-radius:8px;min-height:44px;padding:11px 18px; font-size:13px;font-weight:600;letter-spacing:0;clip-path:none;font-style:normal;text-transform:none; box-shadow:none; } body.view-staff .btn-primary:hover{background:#0a6a35;color:#fff;transform:none;box-shadow:none;} body.view-staff .btn-secondary{ background:var(--sf-card);color:var(--text);border:1px solid var(--sf-ctl);border-radius:8px;min-height:40px; font-size:12.5px;font-weight:600;letter-spacing:0;clip-path:none;font-style:normal;text-transform:none; } body.view-staff .btn-secondary:hover{border-color:var(--sf-ctl-h);color:var(--text);background:var(--sf-hover2);} body.view-staff .btn-sm{border-radius:7px;font-size:11.5px;font-weight:700;letter-spacing:.2px;text-transform:none;min-height:30px;padding:6px 12px;} /* row actions: compact packed buttons, never one-per-line stacks */ body.view-staff .actions-cell{gap:5px;min-width:180px;} body.view-staff .actions-cell .btn-sm{flex:0 1 auto;min-width:0;white-space:nowrap;padding:5px 10px;} body.view-staff .btn-sm:hover{transform:none;opacity:1;filter:brightness(.97);} body.view-staff .btn-green{background:#0c7a3d;color:#fff;border:1px solid #0c7a3d;} body.view-staff .btn-green:hover{background:#0a6a35;border-color:#0a6a35;} /* destructive: white + red text + hairline at rest; red fill only on hover/confirm */ body.view-staff .btn-red{background:var(--sf-card);color:#a33b2e;border:1px solid var(--sf-line);} body.view-staff .btn-red:hover{background:#a33b2e;border-color:#a33b2e;color:#fff;filter:none;} body.view-staff .btn-muted{background:var(--sf-card);color:var(--text);border:1px solid var(--sf-line);} body.view-staff .btn-muted:hover{background:var(--sf-hover2);} /* ── Form fields ── */ body.view-staff input[type="text"],body.view-staff input[type="tel"], body.view-staff input[type="number"],body.view-staff input[type="email"], body.view-staff input[type="date"],body.view-staff input[type="time"], body.view-staff input[type="password"],body.view-staff select,body.view-staff textarea{ background:var(--sf-card);border:1px solid var(--sf-ctl);border-radius:8px;color:var(--text); font-size:13.5px;min-height:42px;padding:9px 13px; } body.view-staff input:focus,body.view-staff select:focus,body.view-staff textarea:focus{ border-color:var(--sf-green-ink);box-shadow:0 0 0 2px rgba(12,122,61,.14); } body.view-staff input[type="checkbox"]{accent-color:var(--sf-green-ink);width:16px;height:16px;min-height:0;} body.view-staff label{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--muted);} html[lang="ar"] body.view-staff label{letter-spacing:0;} body.view-staff .filter-select{ height:34px;min-height:34px;background-color:#fff;border:1px solid var(--sf-ctl);border-radius:7px; font-size:12px;font-weight:600;color:var(--text);text-transform:none;letter-spacing:0; } body.view-staff .search-input{ background:var(--sf-card);border:1px solid var(--sf-ctl);border-radius:7px;font-size:12.5px;min-height:34px; } body.view-staff .search-input:focus{border-color:var(--sf-green-ink);background:var(--sf-card);} body.view-staff .filter-label,body.view-staff .filter-group-label,body.view-staff .sort-label{ font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--muted-l); } html[lang="ar"] body.view-staff .filter-label,html[lang="ar"] body.view-staff .filter-group-label,html[lang="ar"] body.view-staff .sort-label{letter-spacing:0;} body.view-staff .filter-pill,body.view-staff .sort-pill,body.view-staff .an-nav-btn{ background:var(--sf-card);border:1px solid var(--sf-ctl);border-radius:999px;color:var(--text); font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;padding:7px 15px;min-height:34px; } body.view-staff .filter-pill:hover,body.view-staff .sort-pill:hover,body.view-staff .an-nav-btn:hover{border-color:var(--muted-l);color:var(--text);transform:none;} body.view-staff .filter-pill.active,body.view-staff .sort-pill.active,body.view-staff .an-nav-btn.active{ background:#123019;border-color:#123019;color:#03ff89;font-weight:700; } body.view-staff .density-btn{background:var(--sf-card);border:1px solid var(--sf-ctl);border-radius:7px;text-transform:none;letter-spacing:0;color:var(--muted);} body.view-staff .density-btn.active{background:#123019;border-color:#123019;color:#03ff89;} body.view-staff .toggle-btn{ background:var(--sf-card);border:1px solid var(--sf-ctl);border-radius:7px;color:var(--text); font-weight:600;text-transform:none;letter-spacing:0;min-height:40px; } body.view-staff .toggle-btn.active{background:#123019;border-color:#123019;color:#03ff89;font-weight:700;} body.view-staff .toggle-btn.active::before{content:none;} body.view-staff .view-toggle{background:var(--sf-card);border:1px solid var(--sf-ctl);border-radius:7px;} body.view-staff .view-toggle-btn.active{background:#123019;color:#03ff89;} /* ── Stat tiles ── */ body.view-staff .stats-row,body.view-staff .rides-stat-row{ border:none;border-radius:0;background:none;overflow:visible;gap:10px; } body.view-staff .stat-card,body.view-staff .rides-stat-card{ background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;padding:13px 15px; } body.view-staff .stat-card:not(:first-child),body.view-staff .rides-stat-card:not(:first-child){border-inline-start:1px solid var(--sf-line2);} body.view-staff .stat-num,body.view-staff .rides-stat-num{ font-family:var(--font-body);font-size:24px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums; } /* KPI numbers are ink — never amber/blue/green (status colors are for status only). !important intentionally beats the per-tile inline color styles in the JS templates. */ body.view-staff .stat-num,body.view-staff .stat-num.green,body.view-staff .rides-stat-num, body.view-staff .dash-kpi-num,body.view-staff .analytics-kpi-value,body.view-staff .hl-value, body.view-staff .sess-dash-num,body.view-staff .sess-ds-num{color:var(--text)!important;} body.view-staff .stat-label,body.view-staff .rides-stat-label{ font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--muted);margin-top:5px; } html[lang="ar"] body.view-staff .stat-label,html[lang="ar"] body.view-staff .rides-stat-label{letter-spacing:0;} /* ── Tables: the heart of the system ── */ body.view-staff .table-wrapper{border:1px solid var(--border);border-radius:10px;background:var(--sf-card);} body.view-staff .queue-table,body.view-staff .sess-admin-table,body.view-staff .analytics-trend-table{background:var(--sf-card);} body.view-staff .queue-table th,body.view-staff .sess-admin-table th,body.view-staff .analytics-trend-table th{ font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:1px; color:var(--muted);background:var(--sf-head);border-bottom:1px solid var(--border);padding:9px 10px; } html[lang="ar"] body.view-staff .queue-table th,html[lang="ar"] body.view-staff .sess-admin-table th,html[lang="ar"] body.view-staff .analytics-trend-table th{letter-spacing:0;} body.view-staff .queue-table thead th{background:var(--sf-head);color:var(--muted);border-bottom-color:var(--border);} body.view-staff .queue-table thead th.an-sort-active{color:var(--sf-green-ink);} body.view-staff .queue-table thead th.an-sort-th:hover{color:var(--text);} @media(min-width:1024px){ body.view-staff .queue-table-desktop-wrap .queue-table th{top:56px;background:var(--sf-head);box-shadow:0 1px 0 var(--border);} } body.view-staff .queue-table td{padding:9px 10px;border-bottom:1px solid var(--sf-sep);} body.view-staff .queue-table tbody tr:nth-child(odd) td{background:var(--sf-zebra);} body.view-staff .queue-table tbody tr:hover td{background:var(--sf-hover);} body.view-staff .queue-table tbody tr.sess-group-hdr td{ background:var(--sf-head);border-top:1px solid var(--border);border-bottom:1px solid var(--border); font-size:11.5px;font-weight:700;color:var(--muted); } body.view-staff .queue-table tbody tr.row-active{background:none;} body.view-staff .queue-table tbody tr.row-active td{background:rgba(12,122,61,.05);} body.view-staff .queue-table tbody tr.row-active:hover td{background:rgba(12,122,61,.08);} body.view-staff .queue-table tbody tr.row-noshow-cancel td{background:rgba(163,59,46,.05);} body.view-staff .queue-table tbody tr.row-done-paid{background:none;} body.view-staff .queue-table tbody tr.row-done-paid td{background:var(--sf-zebra);} body.view-staff .sess-admin-table td{border-bottom:1px solid var(--sf-sep);font-size:13px;} body.view-staff .analytics-trend-table td{border-bottom:1px solid var(--sf-sep);} body.view-staff .queue-num-cell{font-family:var(--font-body);font-size:17px;font-weight:700;color:var(--text);letter-spacing:0;} body.view-staff .rider-name{font-size:13.5px;} body.view-staff .rider-sub{font-size:11px;color:var(--muted-l);} body.view-staff .pos-badge{color:var(--text);background:var(--sf-card);border:1px solid var(--sf-line);border-radius:6px;font-family:var(--font-body);} /* ── Status = small dots + 700 text (never glowing pills) ── */ body.view-staff .status-badge{ font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:0;text-transform:none; display:inline-flex;align-items:center;gap:6px; } body.view-staff .status-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;} body.view-staff .badge-waiting{color:#8a5c14;} body.view-staff .badge-active{color:var(--sf-green-ink);} body.view-staff .badge-done{color:var(--muted-l);} body.view-staff .badge-noshow{color:#a33b2e;} body.view-staff .type-badge{ font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.2px;text-transform:none; border-radius:6px;padding:3px 9px; } /* bike-type chips: white + hairline + ink text, tiny green icon — no mint fills */ body.view-staff .type-road,body.view-staff .type-mountain,body.view-staff .type-hybrid, body.view-staff .type-gravel,body.view-staff .type-roadcarbon{background:var(--sf-card);color:var(--text);border:1px solid var(--sf-line);} body.view-staff .type-any{background:var(--sf-card);color:var(--muted-l);border:1px solid var(--sf-line);} body.view-staff .type-badge svg{color:var(--sf-green-ink);} body.view-staff .walk-in-badge{font-family:var(--font-body);text-transform:none;letter-spacing:0;background:var(--sf-chip);color:var(--muted);border-radius:6px;} body.view-staff .avail-dot{box-shadow:none;animation:none;} body.view-staff .dot-green{background:#0c7a3d;} body.view-staff .dot-orange{background:#8a5c14;} body.view-staff .dot-red{background:#a33b2e;} body.view-staff .dot-blue{background:#8a5c14;box-shadow:none;} /* bike out/in-use reads as warn, not blue */ body.view-staff .session-spots{border-radius:999px;font-weight:700;} body.view-staff .spots-green{background:rgba(12,122,61,.1);color:var(--sf-green-ink);} body.view-staff .spots-red{background:rgba(163,59,46,.1);color:#a33b2e;} /* session open/closed/full: status = small dot + 700 text, not a filled pill */ body.view-staff .badge-open,body.view-staff .badge-closed,body.view-staff .badge-full{ background:none;border:none;padding:0;border-radius:0;font-size:12px;font-weight:700;letter-spacing:0; display:inline-flex;align-items:center;gap:6px; } body.view-staff .badge-open::before,body.view-staff .badge-closed::before,body.view-staff .badge-full::before{ content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0; } body.view-staff .badge-open{color:var(--sf-green-ink);} body.view-staff .badge-closed{color:var(--muted-l);} body.view-staff .badge-full{color:#8a5c14;} /* ── Payment cell ── */ body.view-staff .pay-toggle{font-family:var(--font-body);text-transform:none;letter-spacing:0;border-radius:7px;font-weight:700;} body.view-staff .pay-toggle.paid{color:var(--sf-green-ink);} body.view-staff .pay-toggle.pending{color:#8a5c14;border-color:#e6d3a8;background:#fdf9ef;} body.view-staff .pay-toggle.pending:hover{background:#f3ead3;border-color:#d9c08a;} body.view-staff .pay-toggle.house{color:var(--muted);border-color:var(--sf-line);background:var(--sf-card);} /* ── Session chips / dashboards ── */ body.view-staff .sess-summary-chip{background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;} body.view-staff .sess-summary-chip:hover{background:var(--sf-card);border-color:var(--sf-ctl-h);} body.view-staff .sess-summary-chip.active-sess{border-color:var(--sf-green-ink);box-shadow:0 0 0 1px rgba(12,122,61,.35);} body.view-staff .sess-chip-fill{background:#0c7a3d;box-shadow:none;} body.view-staff .sess-dashboard{background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;} body.view-staff .sess-dash-chip{background:var(--sf-head);border:1px solid var(--sf-sep);border-radius:8px;} body.view-staff .sess-dash-num{font-family:var(--font-body);font-variant-numeric:tabular-nums;} body.view-staff .sess-card,body.view-staff .sess-lc{ background:var(--sf-card);border:1px solid var(--sf-line2);border-inline-start:1px solid var(--sf-line2);border-radius:10px;box-shadow:none; } body.view-staff .sess-card:hover:not(.sess-full),body.view-staff .sess-lc:hover{border-color:var(--sf-ctl-h);box-shadow:none;background:var(--sf-card);} body.view-staff .sess-card.sess-selected,body.view-staff .sess-lc.selected{border-color:var(--sf-green-ink);background:rgba(12,122,61,.04);} body.view-staff .sess-card-dot.on{box-shadow:none;} body.view-staff .sess-detail-pane{background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;} body.view-staff .sess-detail-stats>div{background:var(--sf-head);border:1px solid var(--sf-sep);border-radius:8px;} body.view-staff .sess-rider{background:var(--sf-zebra);border:1px solid var(--sf-sep);border-radius:8px;} body.view-staff .sess-card-date,body.view-staff .sess-lc-date,body.view-staff .sess-detail-date{font-family:var(--font-body);} /* ── Next-up banner: the one dark-green hero surface in content ── */ body.view-staff .next-up-banner{background:#123019;border:none;border-radius:10px;} body.view-staff .next-up-label{color:#9fc4ab;} body.view-staff .next-up-label span{color:#9fc4ab!important;} body.view-staff .next-up-name{color:#03ff89;font-family:var(--font-body);letter-spacing:-.2px;} body.view-staff .next-up-details{color:#9fc4ab;} body.view-staff .next-up-banner .btn-primary{background:#0c7a3d;color:#fff;} body.view-staff .next-up-banner .btn-primary:hover{background:#0e8c46;} /* ── Dashboard KPI + alerts ── */ body.view-staff .dash-kpi,body.view-staff .analytics-kpi-card{ background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;box-shadow:none;padding:14px 16px; } body.view-staff .dash-kpi:hover,body.view-staff .analytics-kpi-card:hover{transform:none;border-color:var(--sf-ctl-h);box-shadow:none;} body.view-staff .analytics-kpi-card::before{display:none;} body.view-staff .dash-kpi-num,body.view-staff .analytics-kpi-value{ font-family:var(--font-body);font-size:24px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums; } body.view-staff .dash-kpi-lbl,body.view-staff .analytics-kpi-label{font-size:10px;letter-spacing:1px;color:var(--muted);} html[lang="ar"] body.view-staff .dash-kpi-lbl,html[lang="ar"] body.view-staff .analytics-kpi-label{letter-spacing:0;} body.view-staff .dash-alert{background:var(--sf-card);border:1px solid var(--sf-line2);border-inline-start-width:3px;border-radius:8px;} body.view-staff .dash-alert:hover{background:var(--sf-zebra);transform:none;} body.view-staff .dash-allclear{background:rgba(12,122,61,.06);border:1px solid rgba(12,122,61,.2);border-radius:8px;color:var(--sf-green-ink);} body.view-staff .an-range-bar{background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;box-shadow:none;} body.view-staff .an-sticky{background:linear-gradient(180deg,var(--bg) 72%,transparent);} body.view-staff .chart-card,body.view-staff .analytics-highlight-card{ background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;box-shadow:none; } body.view-staff .chart-card:hover,body.view-staff .analytics-highlight-card:hover{border-color:var(--sf-line2);box-shadow:none;} body.view-staff .analytics-section-title{font-family:var(--font-body);font-size:12px;letter-spacing:.8px;color:var(--muted);} body.view-staff .analytics-section-title::before{background:#0c7a3d;} body.view-staff .analytics-section-title::after{background:linear-gradient(90deg,var(--sf-line),transparent);} body.view-staff .hl-value,body.view-staff .analytics-kpi-value{font-family:var(--font-body);} body.view-staff .insight-card{border-radius:10px;} /* one accent: info/purple insight variants ride the green accent in staff */ body.view-staff .insight-card.info,body.view-staff .insight-card.purple{background:rgba(12,122,61,.05);border-color:rgba(12,122,61,.2);} body.view-staff .insight-card.info .insight-title,body.view-staff .insight-card.purple .insight-title{color:var(--sf-green-ink);} /* inventory low-stock count badge: white, hairline, ink — not an amber block */ body.view-staff .tab-badge{background:var(--sf-card);color:var(--text);border:1px solid var(--sf-line);border-radius:6px;} /* community (Saturday) session chrome in staff: no blue identity — green/ink only */ body.view-staff .sess-summary-chip.community{background:var(--sf-card);border-color:var(--sf-line2);} body.view-staff .sess-summary-chip.community.active-sess{border-color:var(--sf-green-ink);box-shadow:0 0 0 1px rgba(12,122,61,.35);} body.view-staff .sess-chip-event{color:var(--sf-green-ink);} body.view-staff .sess-comm-chip{color:var(--sf-green-ink);border-color:rgba(12,122,61,.4);} body.view-staff .sess-card-comm{border-inline-start-color:var(--sf-green-ink);} body.view-staff .sess-card-comm .sess-card-dot{border-color:var(--sf-green-ink);} body.view-staff .sess-card-comm .sess-card-dot.on{background:#0c7a3d;border-color:var(--sf-green-ink);} body.view-staff .analytics-bar-fill{box-shadow:none;} body.view-staff .an-hit:hover{filter:none;} /* ── Inventory / fleet ── */ body.view-staff .inv-navbtn{ background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:8px;color:var(--muted); text-transform:none;letter-spacing:0;font-weight:600; } body.view-staff .inv-navbtn:hover{border-color:var(--sf-ctl-h);color:var(--text);} body.view-staff .inv-navbtn.active{background:#123019;border-color:#123019;color:#03ff89;} body.view-staff .bike-list-row{background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;} body.view-staff .bike-list-row:hover{background:var(--sf-zebra);border-color:var(--sf-ctl-h);} body.view-staff .bike-card,body.view-staff .bike-grid-card{background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;} body.view-staff .bike-card:hover{transform:none;border-color:var(--sf-ctl-h);} body.view-staff .bike-assign-card{background:var(--sf-card);border:1.5px solid var(--sf-line2);border-radius:8px;} body.view-staff .bike-assign-card:hover:not(.busy){border-color:rgba(12,122,61,.5);background:rgba(12,122,61,.04);} body.view-staff .bike-assign-card.selected{border-color:var(--sf-green-ink);background:rgba(12,122,61,.07);} body.view-staff .inline-form{background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;} body.view-staff .form-section{background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;box-shadow:none;} body.view-staff .form-title{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;font-style:normal;font-family:var(--font-body);} body.view-staff .type-count-box{background:var(--sf-head);border:1px solid var(--sf-sep);border-radius:8px;} body.view-staff .type-count-input{font-family:var(--font-body);background:var(--sf-card);border:1px solid var(--sf-ctl);border-radius:7px;} /* ── Modals & overlays ── */ /* class doubled: outranks the :root[data-theme="dark"] modal/backdrop recipes */ body.view-staff.view-staff .modal-backdrop,body.view-staff.view-staff .pin-backdrop,body.view-staff.view-staff .auth-backdrop{ background:rgba(15,18,21,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); } body.view-staff.view-staff .modal-box,body.view-staff.view-staff .pin-box,body.view-staff.view-staff .confirm-box,body.view-staff.view-staff .booth-popup-box,body.view-staff.view-staff .auth-box{ background:var(--sf-card);border:1px solid var(--sf-line2);border-top:1px solid var(--sf-line2);border-radius:10px; box-shadow:0 12px 40px rgba(16,19,18,.16); } body.view-staff .modal-title{font-family:var(--font-body);font-size:17px;font-weight:700;text-transform:none;letter-spacing:0;font-style:normal;} body.view-staff .modal-footer{border-top:1px solid var(--sf-sep);} body.view-staff .modal-bike-card{background:var(--sf-card);border:1.5px solid var(--sf-line2);border-radius:8px;} body.view-staff .modal-bike-card.selected{border-color:var(--sf-green-ink);background:rgba(12,122,61,.06);} body.view-staff .pin-key{background:var(--sf-head);border:1px solid var(--sf-line);border-radius:8px;font-family:var(--font-body);} body.view-staff .pin-key:hover{background:var(--sf-chip);border-color:var(--sf-green-ink);} body.view-staff .pay-menu-opt{font-family:var(--font-body);} body.view-staff .pay-menu-opt.active{color:var(--sf-green-ink);background:rgba(12,122,61,.07);} body.view-staff .toast{ background:#0f1215;color:#e9edee;border:none;border-inline-start:3px solid #03ff89;border-radius:8px; box-shadow:0 8px 28px rgba(16,19,18,.3);backdrop-filter:none;font-family:var(--font-body); } body.view-staff .toast.error{border-inline-start-color:#ff6f66;} body.view-staff .toast.warning{border-inline-start-color:#f2b43f;} body.view-staff .undo-bar{background:#0f1215;border:1px solid rgba(3,255,137,.3);border-radius:10px;} body.view-staff .undo-bar-text{color:#e9edee;} body.view-staff .undo-bar-action{background:#03ff89;color:#06130c;border-radius:7px;} body.view-staff .undo-bar-action:hover{background:#2effa0;transform:none;} body.view-staff .undo-bar-progress{background:rgba(3,255,137,.35);} body.view-staff .receipt-box{ background:var(--sf-head);color:var(--text);border:1px dashed var(--sf-ctl);border-radius:8px;box-shadow:none; } /* ── Community tags / accounts ── */ body.view-staff .am-meta{color:var(--muted);} body.view-staff .queue-mobile-view .q-card{background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px;} body.view-staff .q-card.row-active{background:rgba(12,122,61,.04);border-color:rgba(12,122,61,.25);} /* ── Empty states / skeletons ── */ body.view-staff .rides-empty,body.view-staff .no-sessions-msg{background:var(--sf-card);border:1px dashed var(--sf-ctl);border-radius:10px;} body.view-staff .sk-row{border:1px solid var(--sf-sep);background:linear-gradient(100deg,#fff 30%,var(--sf-head) 50%,#fff 70%);background-size:200% 100%;} body.view-staff .empty-illus-title,body.view-staff .empty-illus-sub{color:var(--muted);} /* ── Scrollbars & selection: quiet, professional ── */ body.view-staff ::selection{background:#0c7a3d;color:#fff;} body.view-staff .refresh-dot{background:#0c7a3d;} body.view-staff :focus-visible{outline:2px solid #0c7a3d;} /* ── Numbers: Barlow tabular everywhere (race numerals retired in staff) ── */ body.view-staff .queue-num-cell,body.view-staff .pos-badge,body.view-staff .stat-num, body.view-staff .rides-stat-num,body.view-staff .analytics-kpi-value,body.view-staff .dash-kpi-num, body.view-staff .sess-dash-num,body.view-staff .sess-ds-num,body.view-staff .hl-value, body.view-staff .price-preview-total,body.view-staff .type-count-input, body.view-staff .sess-lc-date,body.view-staff .sess-detail-date,body.view-staff .next-up-name{ font-family:var(--font-body);font-variant-numeric:tabular-nums; } /* ── Staff phone polish (≤767px): tidy topbar, wrapping filter rows, comfy targets ── */ @media(max-width:767px){ body.view-staff #topbar#topbar{padding:0 10px;gap:6px;height:52px;} body.view-staff #topbar-logo-img{height:20px;max-width:56px;} body.view-staff #topbar .role-seg{height:34px;border-radius:6px;} body.view-staff #topbar .role-seg button{padding:0 9px;font-size:11px;} body.view-staff #topbar .topbar-btn,body.view-staff #topbar .lang-toggle{height:34px;min-height:34px;padding:0 9px;font-size:11px;border-radius:6px;} body.view-staff #topbar .topbar-right{gap:4px;} body.view-staff #staff-tab-nav{padding:6px 8px;gap:3px;} body.view-staff #staff-tab-nav .tab-btn{padding:8px 11px;min-height:36px;font-size:10.5px;} /* header action rows wrap; filter rows wrap instead of clipping mid-control */ body.view-staff .section-header>div{flex-wrap:wrap;} body.view-staff .filter-row,body.view-staff .filter-bar-row{flex-wrap:wrap;overflow-x:visible;padding-bottom:0;} body.view-staff .filter-row .filter-label,body.view-staff .filter-bar-row .filter-label, body.view-staff .filter-row .filter-group-label{display:none;} /* labels orphan from their selects when wrapping; the dense ERP filter row is unlabeled */ body.view-staff .filter-row .filter-select,body.view-staff .filter-bar-row .filter-select{flex:1 1 44%;min-width:0;} body.view-staff .filter-row .search-wrap{flex:1 1 100%;} body.view-staff .filter-row .search-input{width:100%!important;} body.view-staff .density-btn{min-height:34px;} /* q-cards: comfortable touch targets, no leftover table min-widths */ body.view-staff .q-card .btn-sm{min-height:40px;} body.view-staff .actions-cell{min-width:0;} } /* ── Staff fleet tables on phones: 13 columns can't fit, and a nested sideways scroll hides the Status/Rider/action columns entirely. Same treatment the sessions table already gets: each row becomes a label/value card. ── */ @media(max-width:767px){ body.view-staff .bk-table,body.view-staff .bk-table tbody, body.view-staff .bk-table tr,body.view-staff .bk-table td{display:block;width:100%;max-width:100%;box-sizing:border-box;} body.view-staff .bk-table{min-width:0!important;} body.view-staff .table-wrapper:has(.bk-table){overflow-x:visible;border:none;background:none;border-radius:0;} body.view-staff .bk-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;} body.view-staff .bk-table tr{ position:relative;background:var(--sf-card);border:1px solid var(--sf-line2);border-radius:10px; margin-bottom:10px;padding:10px 12px;overflow:hidden; } body.view-staff .bk-table tbody tr:nth-child(odd) td, body.view-staff .bk-table tbody tr:hover td{background:none;} body.view-staff .bk-table td{border:none;padding:5px 0;text-align:start;overflow-wrap:anywhere;} /* label/value rows */ body.view-staff .bk-table td[data-label]{display:flex;align-items:center;justify-content:space-between;gap:12px;} body.view-staff .bk-table td[data-label]::before{ content:attr(data-label);flex:0 0 auto; font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted); } html[lang="ar"] body.view-staff .bk-table td[data-label]::before{letter-spacing:0;text-transform:none;} /* name headlines the card; the select checkbox tucks beside it */ body.view-staff .bk-table td.bk-cell-name{ padding:0 0 8px;margin-bottom:4px;border-bottom:1px solid var(--sf-sep);font-size:15px;font-weight:700; } body.view-staff .bk-table td.bk-cell-sel{ position:absolute;top:10px;inset-inline-end:12px;width:auto;padding:0; } /* actions get their own full-width row of comfortable buttons */ body.view-staff .bk-table td:last-child .actions-cell{gap:6px;margin-top:6px;} body.view-staff .bk-table td:last-child .actions-cell .btn-sm{flex:1 1 calc(50% - 3px);min-height:40px;} /* empty-state row: no giant blank table box */ body.view-staff .bk-table td[colspan]{padding:6px 0;} body.view-staff .bk-table td[colspan]::before{display:none;} body.view-staff .bk-table tr:has(td[colspan]){padding:4px 10px;} } /* ── Phone tap targets: HIG asks for ~44px; staff controls were 24–31px ── */ @media(max-width:767px){ body.view-staff .btn-sm{min-height:40px;padding:8px 12px;} body.view-staff .actions-cell .btn-sm{min-height:40px;} body.view-staff .pay-toggle{min-height:36px;padding:8px 12px;} body.view-staff .view-toggle-btn,body.view-staff .density-btn{min-height:38px;min-width:42px;} body.view-staff .bk-table input[type="checkbox"], body.view-staff .queue-table input[type="checkbox"]{width:22px;height:22px;} /* contact call/WhatsApp circles */ body.view-staff .q-card a[href^="tel:"],body.view-staff .q-card a[href*="wa.me"], body.view-staff .queue-table a[href^="tel:"],body.view-staff .queue-table a[href*="wa.me"]{width:36px!important;height:36px!important;} /* customer back button was a 17px hit area */ .cust-back-btn{min-height:40px;padding:0 6px;} } /* Long names must ellipsize, never spill out of their card */ .member-card-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cust-topbar-name,.cust-topbar-email{max-width:min(140px,28vw);} /* These carry inline min-height in the JS templates, so the phone sizing has to outrank it. Handler names are load-bearing in this repo, so they're stable hooks. */ @media(max-width:767px){ body.view-staff .pay-toggle{min-height:36px!important;} button[onclick*="showAddonPicker"]{min-height:36px!important;} body.view-staff [onclick*="showEditQNumModal"], body.view-staff [onclick*="showGroupEditModal"], body.view-staff [onclick*="showEditPriceModal"]{min-height:36px!important;min-width:36px;} .topbar-logo{min-height:40px;display:inline-flex;align-items:center;} } @media(max-width:767px){ body.view-staff [onclick*="toggleResetTool"]{min-height:38px;min-width:38px;} body.view-staff .bk-table td.bk-cell-sel input[type="checkbox"]{width:24px;height:24px;} /* customer topbar: at ≤400px the avatar + name + LOG OUT overran the viewport */ #topbar-right .cust-topbar-name,#topbar-right .cust-topbar-email{max-width:64px;} } @media(max-width:400px){ #topbar-right .cust-topbar-name,#topbar-right .cust-topbar-email{display:none;} #topbar-right{gap:4px;} } /* Member card name: shrink to fit on phones instead of ellipsizing a rider's own name */ @media(max-width:560px){ .member-card-name{font-size:22px;} } @media(max-width:390px){ .member-card-name{font-size:19px;} } /* ── Customer sections bar on the event picker ────────────────────────── #customer-tab-nav and #cust-bottom-nav now sit outside #view-customer so the signed-in picker (landing) shows them too. They are hidden by default and the body class decides: view-customer = inside the app, view-picker = the signed-in event picker. Signed-out visitors (auth page) and staff never see them. */ #customer-tab-nav,#cust-bottom-nav{display:none;} body.view-customer #customer-tab-nav, body.view-picker #customer-tab-nav{display:flex;} @media(max-width:767px){ /* phones use the fixed bottom bar instead of the top tabs */ body.view-customer #customer-tab-nav, body.view-picker #customer-tab-nav{display:none;} body.view-customer #cust-bottom-nav, body.view-picker #cust-bottom-nav{display:block;} /* the picker's last card must clear the fixed bar */ body.view-picker #landing-body{padding-bottom:calc(74px + env(safe-area-inset-bottom));} /* the bar is ~78px tall, so the footer's stock 70px let the copyright slip under it */ body.view-customer #app-footer, body.view-picker #app-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom));} } /* ════════════════════════════════════════════════════════════════════════ STAFF DARK THEME — opt-in per device from the staff topbar toggle (html[data-staff-theme="dark"], stored under cq_staff_theme). Deliberately separate from the customer cq_theme: the customer side is light-only and the staff default stays light, so this only ever repaints the staff area. Palette is the reference bundle's dark staff skin (#08090b base, #101318 panels, #25d184 green on dark). ════════════════════════════════════════════════════════════════════════ */ html[data-staff-theme="dark"] body.view-staff{ --bg:#08090b; --s1:#101318; --s2:#161a21; --s3:#14171c; --in-bg:#14171c; --text:#e8ebed; --muted:#98a2a9; --muted-l:#7f8890; --border:rgba(255,255,255,.09); --line2:rgba(255,255,255,.09); --green:#25d184; --green-h:#2ee08f; --green-d:#25d184; --red:#ff6f66; --orange:#f2b43f; --blue:#e8ebed; --purple:#98a2a9; --green-rgb:37,209,132; --tint-rgb:232,235,237; --red-rgb:255,111,102; --warn-rgb:242,180,63; --acsoft:rgba(37,209,132,.12); --accent2:rgba(37,209,132,.4); --sf-card:#101318; --sf-line:rgba(255,255,255,.09); --sf-line2:rgba(255,255,255,.09); --sf-ctl:rgba(255,255,255,.16); --sf-ctl-h:rgba(255,255,255,.3); --sf-head:rgba(255,255,255,.05); --sf-zebra:rgba(255,255,255,.02); --sf-hover:rgba(255,255,255,.06); --sf-hover2:rgba(255,255,255,.08); --sf-sep:rgba(255,255,255,.06); --sf-chip:rgba(255,255,255,.06); --sf-green-ink:#25d184; color-scheme:dark; } /* fields read as wells on dark, not raised panels */ html[data-staff-theme="dark"] body.view-staff input[type="text"], html[data-staff-theme="dark"] body.view-staff input[type="tel"], html[data-staff-theme="dark"] body.view-staff input[type="number"], html[data-staff-theme="dark"] body.view-staff input[type="email"], html[data-staff-theme="dark"] body.view-staff input[type="date"], html[data-staff-theme="dark"] body.view-staff input[type="time"], html[data-staff-theme="dark"] body.view-staff input[type="password"], html[data-staff-theme="dark"] body.view-staff select, html[data-staff-theme="dark"] body.view-staff textarea, html[data-staff-theme="dark"] body.view-staff .filter-select, html[data-staff-theme="dark"] body.view-staff .search-input{background:var(--in-bg);color:var(--text);} html[data-staff-theme="dark"] body.view-staff select option{background:#14171c;color:#e8ebed;} /* status ink: the print-weight amber/red are unreadable on #08090b */ html[data-staff-theme="dark"] body.view-staff .badge-waiting, html[data-staff-theme="dark"] body.view-staff .badge-full{color:#f2b43f;} html[data-staff-theme="dark"] body.view-staff .badge-noshow{color:#ff6f66;} html[data-staff-theme="dark"] body.view-staff .dot-orange, html[data-staff-theme="dark"] body.view-staff .dot-blue{background:#f2b43f;} html[data-staff-theme="dark"] body.view-staff .dot-red{background:#ff6f66;} html[data-staff-theme="dark"] body.view-staff .pay-toggle.pending{ color:#f2b43f;border-color:rgba(242,180,63,.4);background:rgba(242,180,63,.1);} html[data-staff-theme="dark"] body.view-staff .pay-toggle.pending:hover{background:rgba(242,180,63,.18);} html[data-staff-theme="dark"] body.view-staff .pay-toggle.paid{color:#25d184;} html[data-staff-theme="dark"] body.view-staff .btn-red{color:#ff6f66;border-color:rgba(255,111,102,.4);} html[data-staff-theme="dark"] body.view-staff .btn-red:hover{background:#a33b2e;border-color:#a33b2e;color:#fff;} html[data-staff-theme="dark"] body.view-staff .badge-open{color:#25d184;} html[data-staff-theme="dark"] body.view-staff .type-badge svg{color:#25d184;} /* skeleton shimmer was built from white stops */ html[data-staff-theme="dark"] body.view-staff .sk-row{ background:linear-gradient(100deg,#101318 30%,#181c23 50%,#101318 70%);background-size:200% 100%;} /* selected pills already sit on #123019 — lift the neon so they read as active */ html[data-staff-theme="dark"] body.view-staff .filter-pill.active, html[data-staff-theme="dark"] body.view-staff .sort-pill.active, html[data-staff-theme="dark"] body.view-staff .an-nav-btn.active, html[data-staff-theme="dark"] body.view-staff .toggle-btn.active, html[data-staff-theme="dark"] body.view-staff .inv-navbtn.active, html[data-staff-theme="dark"] body.view-staff .density-btn.active, html[data-staff-theme="dark"] body.view-staff .view-toggle-btn.active{border-color:rgba(3,255,137,.35);} /* the sidebar rail already matches the dark desk; hairline it so it still reads apart */ html[data-staff-theme="dark"] body.view-staff #staff-tab-nav{border-inline-end-color:rgba(255,255,255,.12);} /* desktop only — below 1024px the rail is a horizontal strip, so the column gradient would paint a stray band (the light theme resets it the same way) */ @media(min-width:1024px){ html[data-staff-theme="dark"] body.view-staff #view-staff.active{ background:linear-gradient(to right,#0f1215 232px,transparent 232px);} html[dir="rtl"][data-staff-theme="dark"] body.view-staff #view-staff.active{ background:linear-gradient(to left,#0f1215 232px,transparent 232px);} } /* the toggle itself: hidden app-wide by the customer light-only rule, shown for staff */ body.view-staff #theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;} /* ── Sidebar rail: pinned or hover ────────────────────────────────────── #rail-pin switches between the pinned 232px sidebar and a 64px art rail that opens under the pointer. Desktop only — below 1024px the nav is a horizontal strip, where neither collapsing nor hover makes sense. */ body.view-staff .snav-pin{ display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box; background:none;border:none;border-radius:9px;padding:9px 11px;margin-bottom:4px; color:#5d666b;font-family:var(--font-body);font-size:10.5px;font-weight:700; letter-spacing:1px;text-transform:uppercase;cursor:pointer;white-space:nowrap; overflow:hidden;transition:background .15s,color .15s; } html[lang="ar"] body.view-staff .snav-pin{letter-spacing:0;text-transform:none;font-size:12px;} body.view-staff .snav-pin:hover{background:rgba(255,255,255,.08);color:#c3ccd2;} body.view-staff .snav-ico{display:inline-flex;align-items:center;justify-content:center;width:19px;flex:0 0 19px;} body.view-staff #staff-tab-nav .tab-btn .snav-ico{color:#7d868d;} body.view-staff #staff-tab-nav .tab-btn.active .snav-ico{color:#03ff89;} body.view-staff #staff-tab-nav .tab-btn:hover .snav-ico{color:#c3ccd2;} body.view-staff .snav-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;} @media(min-width:1024px){ body.view-staff.rail-hover #view-staff.active{ grid-template-columns:64px minmax(0,1fr); background:linear-gradient(to right,#0f1215 64px,transparent 64px); } html[dir="rtl"] body.view-staff.rail-hover #view-staff.active{ background:linear-gradient(to left,#0f1215 64px,transparent 64px); } html[data-staff-theme="dark"] body.view-staff.rail-hover #view-staff.active{ background:linear-gradient(to right,#0f1215 64px,transparent 64px); } html[dir="rtl"][data-staff-theme="dark"] body.view-staff.rail-hover #view-staff.active{ background:linear-gradient(to left,#0f1215 64px,transparent 64px); } /* the rail overflows its 64px column on hover so content never reflows */ body.view-staff.rail-hover #staff-tab-nav{ width:64px;z-index:61;transition:width .16s ease;overflow-y:auto;overflow-x:hidden; } body.view-staff.rail-hover #staff-tab-nav:hover{width:232px;box-shadow:8px 0 28px rgba(0,0,0,.4);} html[dir="rtl"] body.view-staff.rail-hover #staff-tab-nav:hover{box-shadow:-8px 0 28px rgba(0,0,0,.4);} /* collapsed: art only. Labels and suite headings return under the pointer. */ body.view-staff.rail-hover #staff-tab-nav .snav-lbl, body.view-staff.rail-hover #staff-tab-nav .snav-group{opacity:0;transition:opacity .12s ease;} body.view-staff.rail-hover #staff-tab-nav:hover .snav-lbl, body.view-staff.rail-hover #staff-tab-nav:hover .snav-group{opacity:1;} body.view-staff.rail-hover #staff-tab-nav .snav-group{height:0;padding-top:6px;padding-bottom:0;overflow:hidden;} body.view-staff.rail-hover #staff-tab-nav:hover .snav-group{height:auto;padding-top:14px;padding-bottom:5px;} /* the low-stock badge would clip in the narrow rail — pin it to the icon */ body.view-staff.rail-hover #staff-tab-nav .tab-btn .tab-badge{position:absolute;top:4px;inset-inline-end:6px;} body.view-staff.rail-hover #staff-tab-nav .tab-btn{position:relative;} } /* tablets/phones use the horizontal strip: no collapsing, no pin button */ @media(max-width:1023px){ body.view-staff .snav-pin{display:none;} body.view-staff .snav-lbl{opacity:1;} } /* ── Search clear (×) — mounted by _mountSearchClears() into each search field ── */ .search-clear{ position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%); width:26px;height:26px;padding:0;border:none;border-radius:50%;background:none; color:var(--muted);cursor:pointer;display:none;align-items:center;justify-content:center; line-height:0;flex-shrink:0; } .search-clear:hover{background:rgba(var(--tint-rgb),.1);color:var(--text);} input.has-clear{padding-inline-end:34px;} /* ── Staff topbar on small phones ─────────────────────────────────────── The role switch + undo + password + Lock could overflow the bar in portrait, pushing Lock off-screen (it was only reachable in landscape). Everything shrinks and the right-hand group is allowed to compress so Lock always fits. */ @media(max-width:520px){ body.view-staff #topbar#topbar{gap:4px;padding:0 8px;} body.view-staff #topbar .topbar-logo{flex-shrink:1;min-width:0;} body.view-staff #topbar-logo-img{max-width:38px;} body.view-staff #topbar > div{min-width:0;gap:4px;} body.view-staff #topbar .topbar-right{gap:3px;min-width:0;flex-wrap:nowrap;} body.view-staff #topbar .role-seg{flex-shrink:1;min-width:0;} body.view-staff #topbar .role-seg button{padding:0 7px;font-size:10.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;} body.view-staff #topbar .lang-toggle{padding:0 6px;font-size:10.5px;gap:3px;} body.view-staff #topbar .topbar-btn{padding:0 7px;font-size:10.5px;gap:4px;flex-shrink:0;} body.view-staff #topbar .topbar-btn.icon{width:32px;padding:0;} /* Lock is the escape hatch — it never shrinks away */ body.view-staff #topbar .topbar-btn.danger{flex-shrink:0;} } @media(max-width:380px){ body.view-staff #topbar .lang-toggle{font-size:0;padding:0 8px;} /* flag only */ body.view-staff #topbar .lang-toggle::first-letter{font-size:13px;} body.view-staff #topbar .role-seg button{padding:0 5px;font-size:10px;} } @media(max-width:430px){ /* secondary staff controls go icon-only so Lock always has room */ body.view-staff #topbar .topbar-btn.undo-btn{font-size:0;padding:0 8px;gap:0;} body.view-staff #topbar .topbar-btn.undo-btn svg{width:14px;height:14px;} body.view-staff #topbar .role-seg button{max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:34px;} } @media(max-width:340px){ body.view-staff #topbar .topbar-btn.danger{font-size:0;padding:0 8px;gap:0;} body.view-staff #topbar .topbar-btn.danger svg{width:14px;height:14px;} } /* ════════════════════════════════════════════════════════════════════════ LIGHT THEME: white header + white footer (customer and staff). The staff bar keeps its ink treatment only in the staff dark theme. ════════════════════════════════════════════════════════════════════════ */ body #app-footer{background:#ffffff;border-top:1px solid var(--border);} body #app-footer::before{background:var(--green);opacity:.85;} body .footer-copy{color:var(--muted);} /* staff header on paper */ body.view-staff #topbar#topbar{background:#ffffff;border-bottom:1px solid var(--sf-line);} body.view-staff #topbar .lang-toggle, body.view-staff #topbar .topbar-btn{ color:var(--text);background:var(--sf-card);border:1px solid var(--sf-ctl); } body.view-staff #topbar .lang-toggle:hover, body.view-staff #topbar .topbar-btn:hover{background:var(--sf-hover2);color:var(--text);border-color:var(--sf-ctl-h);} body.view-staff #topbar .topbar-btn.danger{color:var(--red);} body.view-staff #topbar .topbar-btn.danger:hover{background:#a33b2e;border-color:#a33b2e;color:#fff;} body.view-staff #topbar .topbar-btn.undo-btn{color:var(--green);border-color:rgba(12,122,61,.35);background:rgba(12,122,61,.07);} body.view-staff #topbar .topbar-btn.undo-btn:hover{background:rgba(12,122,61,.14);} body.view-staff #topbar .role-seg{border-color:var(--sf-ctl);} body.view-staff #topbar .role-seg button{color:var(--muted);} body.view-staff #topbar .role-seg button+button{border-inline-start-color:var(--sf-ctl);} body.view-staff #topbar .role-seg button.on{background:rgba(12,122,61,.1);color:var(--green);} body.view-staff #topbar .role-seg button:not(.on):hover{background:var(--sf-hover);color:var(--text);} /* staff dark theme keeps the ink bar */ html[data-staff-theme="dark"] body.view-staff #topbar#topbar{background:#0f1215;border-bottom:none;} html[data-staff-theme="dark"] body.view-staff #topbar .lang-toggle, html[data-staff-theme="dark"] body.view-staff #topbar .topbar-btn{ color:#d7dcda;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14); } html[data-staff-theme="dark"] body.view-staff #topbar .lang-toggle:hover, html[data-staff-theme="dark"] body.view-staff #topbar .topbar-btn:hover{background:rgba(255,255,255,.1);color:#fff;} html[data-staff-theme="dark"] body.view-staff #topbar .topbar-btn.danger{color:#ff8d7e;} html[data-staff-theme="dark"] body.view-staff #topbar .topbar-btn.undo-btn{color:#03ff89;border-color:rgba(3,255,137,.3);background:rgba(3,255,137,.08);} html[data-staff-theme="dark"] body.view-staff #topbar .role-seg{border-color:rgba(255,255,255,.15);} html[data-staff-theme="dark"] body.view-staff #topbar .role-seg button{color:#9aa39d;} html[data-staff-theme="dark"] body.view-staff #topbar .role-seg button+button{border-inline-start-color:rgba(255,255,255,.15);} html[data-staff-theme="dark"] body.view-staff #topbar .role-seg button.on{background:rgba(3,255,137,.12);color:#03ff89;} html[data-staff-theme="dark"] body.view-staff #topbar .role-seg button:not(.on):hover{background:rgba(255,255,255,.07);color:#fff;} html[data-staff-theme="dark"] body #app-footer{background:#0f1215;border-top:1px solid rgba(255,255,255,.08);} /* ── One control size: adjacent buttons/selects match height and line up ── Staff rows previously mixed 30px row buttons with 34px selects, 40px secondaries and 44px primaries, so neighbours looked ragged. */ body.view-staff .section-header, body.view-staff .section-header > div, body.view-staff .filter-row, body.view-staff .filter-bar-row, body.view-staff .actions-cell, body.view-staff .sort-bar, body.view-staff .an-subnav, body.view-staff .an-range-bar, body.view-staff .toggle-group, body.view-staff .bike-actions, body.view-staff .bike-list-actions, body.view-staff .density-toggle, body.view-staff .view-toggle, body.view-staff .hist-action-btns{align-items:center;} body.view-staff .btn-primary, body.view-staff .btn-secondary, body.view-staff .btn-sm, body.view-staff .toggle-btn, body.view-staff .filter-pill, body.view-staff .sort-pill, body.view-staff .an-nav-btn, body.view-staff .density-btn, body.view-staff .view-toggle-btn, body.view-staff .filter-select, body.view-staff .search-input, body.view-staff .pay-toggle{ min-height:38px;padding-top:0;padding-bottom:0; display:inline-flex;align-items:center;justify-content:center; white-space:nowrap;line-height:1.15; } /* selects keep their native arrow padding; inputs stay text-aligned */ body.view-staff .filter-select,body.view-staff .search-input{justify-content:flex-start;} body.view-staff .search-input{display:block;} body.view-staff .view-toggle{min-height:38px;} body.view-staff .view-toggle-btn{min-height:36px;} /* the sidebar rail is a vertical list — keep its items left-aligned */ body.view-staff .inv-navbtn{min-height:38px;display:flex;align-items:center;justify-content:flex-start;} @media(max-width:767px){ body.view-staff .btn-primary, body.view-staff .btn-secondary, body.view-staff .btn-sm, body.view-staff .toggle-btn, body.view-staff .filter-pill, body.view-staff .sort-pill, body.view-staff .an-nav-btn, body.view-staff .density-btn, body.view-staff .filter-select, body.view-staff .search-input, body.view-staff .pay-toggle{min-height:42px;} body.view-staff .view-toggle{min-height:42px;} body.view-staff .view-toggle-btn{min-height:40px;} /* equal-width action buttons so a row of them reads as one control group */ body.view-staff .actions-cell .btn-sm{flex:1 1 calc(50% - 3px);} } /* customer side: keep neighbouring buttons the same height too */ body:not(.view-staff) .section-header, body:not(.view-staff) .filter-row, body:not(.view-staff) .toggle-group, body:not(.view-staff) .sort-bar{align-items:center;} /* ── Accessibility corrections (measured against WCAG AA) ──────────────── Verified ratios before/after: the rail's suite labels and pin were 3.20:1 on #0f1215, --muted-l was 2.82:1 on the desk, and .filter-select dropped its focus ring for a 2.07:1 border. --muted/--orange/--red/--green already passed and are left alone; the staff dark theme already passes everywhere. */ body.view-staff .snav-group, body.view-staff .snav-pin{color:#98a2a9;} /* 3.20:1 -> 7.4:1 on the rail */ body.view-staff{--muted-l:#67706a;} /* 2.82:1 -> 4.56:1 desk / 5.12:1 card; still lighter than --muted (5.54:1) */ /* the focus ring must not be traded for a 2:1 border */ body.view-staff .filter-select:focus-visible, body.view-staff .search-input:focus-visible{outline:2px solid var(--green);outline-offset:2px;} /* the maintenance shortcut was a click-only div — make it a real control */ .stat-card-clickable{cursor:pointer;} .stat-card-clickable:focus-visible{outline:2px solid var(--green);outline-offset:2px;} /* ── RTL: physical offsets that never flipped ───────────────────────────── Inline margin-left/border-left on staff rows put the gap and the accent stripe on the trailing edge in Arabic. Neutralise the physical property and re-apply it as a logical one so both directions are correct. */ html[dir="rtl"] body.view-staff .filter-row > span[style*="margin-left"], html[dir="rtl"] body.view-staff .filter-bar-row > span[style*="margin-left"]{ margin-left:0!important;margin-right:8px; } /* ══ One colour per ride ══════════════════════════════════════════════════ Three rides now share the same screens, so each carries its own colour everywhere it appears: the Jeddah Corniche Circuit blue, the Saturday Social Ride green, the Petromin Wednesday Ride red. Every element that belongs to a ride gets an ev-* class, which sets the two tokens below; nothing further down names a colour of its own. This block lives at the END of the sheet on purpose: it has to win over both the original "community = blue" rules and the staff reskin layer, which re-tints the same elements green. Same specificity, later wins. */ .ev-jcc{--ev:var(--blue);--ev-rgb:var(--blue-rgb);} .ev-saturday{--ev:var(--green);--ev-rgb:var(--green-rgb);} .ev-petromin{--ev:var(--red);--ev-rgb:var(--red-rgb);} /* the ride's name, wherever it is stamped on something */ body .ev-chip{display:inline-block;font-size:9px;font-weight:900;color:var(--ev); border:1px solid rgba(var(--ev-rgb),.45);border-radius:2px;padding:1px 6px; text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;} body .ev-name{font-size:11px;font-weight:900;color:var(--ev); text-transform:uppercase;letter-spacing:.4px;} body .sess-chip-event{color:var(--ev);} body .sess-summary-chip.community{border-color:rgba(var(--ev-rgb),.45);background:rgba(var(--ev-rgb),.06);} body .sess-summary-chip.community.active-sess{border-color:var(--ev);box-shadow:0 0 0 1px rgba(var(--ev-rgb),.35);} /* customer-facing session cards */ body .sess-card .sess-comm-chip{color:var(--ev);border-color:rgba(var(--ev-rgb),.45);} body .sess-card.sess-card-comm{border-inline-start-color:var(--ev);} body .sess-card .sess-card-dot{border-color:var(--ev);} body .sess-card .sess-card-dot.on{background:var(--ev);border-color:var(--ev);} body .sess-card.sess-selected{background:rgba(var(--ev-rgb),.08);border-color:rgba(var(--ev-rgb),.45);} body .sess-card:hover:not(.sess-full){background:rgba(var(--ev-rgb),.06);} /* staff session browser */ body .sess-lc{border-inline-start:3px solid var(--ev);} body .sess-lc.selected{border-color:rgba(var(--ev-rgb),.5);border-inline-start-color:var(--ev);} /* the event picker on the new-session form */ body .toggle-btn.ev-pick.active{background:rgba(var(--ev-rgb),.14);border-color:var(--ev);color:var(--ev);} /* landing cards: the circuit is blue, and the rides card is an umbrella over a green ride and a red one — so its stripe carries both rather than picking a side. */ body .landing-event-card.ev-jcc::before{background:var(--blue);} body .landing-event-card.ev-jcc:hover{border-color:rgba(var(--blue-rgb),.55);} body .landing-event-card.ev-jcc .lec-kicker,body .landing-event-card.ev-jcc .lec-arrow{color:var(--blue);} body .landing-event-card.ev-community::before{background:linear-gradient(90deg,var(--green),var(--red));} body .landing-event-card.ev-community:hover{border-color:rgba(var(--green-rgb),.5);} body .landing-event-card.ev-community .lec-kicker,body .landing-event-card.ev-community .lec-arrow{color:var(--green);} /* ── The Apple button had gone white-on-white ───────────────────────────── It is a .btn-google too (same shape, same layout), and the customer reskin repaints every .btn-google with a white fill at a higher specificity than .btn-apple's black one. The label and the glyph stayed white, so the button rendered as an empty outlined box. Black fill in BOTH themes, deliberately: the customer side is light-only (the reskin paints its surfaces white whatever data-theme says), so the old dark inversion would have put a white button on a white page — the same invisibility, one theme over. */ body .btn-google.btn-apple{background:#000;color:#fff;border-color:#000;} body .btn-google.btn-apple:hover{background:#1a1a1a;color:#fff;} /* ── Waitlisted reads as waitlisted ─────────────────────────────────────── A waitlisted booking used to share the "waiting" badge, so on a busy roster the only difference between a rider who has a place and one who does not was a word in the same weight and colour. It gets the warning colour and the heaviest weight the badge uses, on staff screens and on the rider's ticket. */ body .status-badge.badge-waitlist{ color:var(--orange);font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.5px; background:rgba(var(--warn-rgb),.12);border:1px solid rgba(var(--warn-rgb),.45); border-radius:3px;padding:2px 8px;} body .ticket-num-label.wl-loud{color:var(--orange);font-weight:900;letter-spacing:1.2px;} /* the rider count on a party's header in the Staff List */ body .mw-party-chip{display:inline-block;padding:1px 7px;border:1px solid rgba(var(--tint-rgb),.2);border-radius:2px; color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;} /* what being waitlisted actually means, under the rider's number */ body .wl-note{margin-top:8px;max-width:34ch;color:var(--orange);font-size:11.5px;font-weight:700;line-height:1.5;} /* A highlight card that belongs to one ride wears that ride's colour as an edge. The values themselves stay monochrome: body.view-staff .hl-value pins them to --text with !important, on purpose, so every number on the tab reads the same weight. */ body .analytics-highlight-card.ev-jcc, body .analytics-highlight-card.ev-saturday, body .analytics-highlight-card.ev-petromin{border-inline-start:3px solid var(--ev);} /* ── A confirmation must outrank what raised it ─────────────────────────── Every modal shares .modal-backdrop at z-index 200, so stacking fell to DOM order — and #confirm-modal is declared BEFORE #cust-modal, #walkin-modal, #cashier-modal and the rest. Any confirm opened from one of those sat behind it: visible through the blur, impossible to click, and the staffer left thinking the button was broken. It is the only dialog that is always ABOUT another one, so it gets its own layer. */ body #confirm-modal .modal-backdrop{z-index:300;} /* the bike-type picker on a Staff List row: a control, not a form field */ /* Selects are full-width form fields by default; this one is an inline control on a row, so it takes its own width and never pushes the chip beside it onto a second line. */ body .mw-type{width:auto;max-width:150px;flex:0 0 auto;padding:3px 22px 3px 8px;min-height:26px; border:1px solid rgba(var(--tint-rgb),.18);border-radius:3px;background:var(--s3);color:var(--text); font-family:var(--font-body);font-size:11px;font-weight:800;cursor:pointer;} /* ════════════════════════════════════════════════════════════════════════ CUSTOMER RESKIN — platform light identity (Rides handoff, theme decision b) Scoped to :not(.view-staff) so the ERP layer is untouched: the two never match the same document. Appended last, so it is the final word on the customer layer above. What this changes from the previous customer reskin: · CTAs become pills (999px) filled #077A4B, ink #FBF9F4 — not 6px #00b467 · Status/cues become a 7px dot + coloured text — never a filled pill · Notices lose their coloured wash; white/off-white + hairline instead · Ride identity moves from a coloured left edge to a dot + kicker · Toasts become a dark pill with a status dot · Modals: 18px desktop, bottom-sheet under 767px · The Sunlight/Night toggle is gone customer-side (light only) ════════════════════════════════════════════════════════════════════════ */ /* Light only. The token layer above already forces it (body-level custom properties beat :root[data-theme]), so this just removes the control that implies a choice the customer no longer has. */ body:not(.view-staff) #theme-toggle-btn{display:none;} /* ── Buttons: pills ─────────────────────────────────────────────────── */ body:not(.view-staff) .btn-primary{ background:#077A4B;color:#FBF9F4;border-radius:999px;min-height:48px; padding:0 26px;font-size:15px;font-weight:700;letter-spacing:0; display:inline-flex;align-items:center;justify-content:center; box-shadow:none;clip-path:none;} body:not(.view-staff) .btn-primary:hover{background:#06603b;color:#FBF9F4;transform:none;box-shadow:none;} body:not(.view-staff) .btn-primary:active{background:#06603b;transform:scale(.98);} body:not(.view-staff) .btn-secondary{ background:#ffffff;color:#1A1919;border:1px solid rgba(26,25,25,.25); border-radius:999px;min-height:44px;padding:0 22px;font-size:14px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;} body:not(.view-staff) .btn-secondary:hover{border-color:rgba(26,25,25,.45);color:#1A1919;transform:none;} body:not(.view-staff) .btn-sm{border-radius:999px;min-height:44px;padding:0 16px;font-size:12.5px; display:inline-flex;align-items:center;justify-content:center;text-transform:none;letter-spacing:0;} body:not(.view-staff) .btn-primary:disabled, body:not(.view-staff) .btn-secondary:disabled, body:not(.view-staff) .btn-sm:disabled{opacity:.4;} /* Destructive stays an outline pill until it is the confirm itself. */ body:not(.view-staff) .btn-red{background:#ffffff;color:#a33b2e;border:1px solid rgba(163,59,46,.4);} body:not(.view-staff) .btn-red:hover{background:#a33b2e;border-color:#a33b2e;color:#FBF9F4;} /* ── Status is a dot and a word, never a filled pill ─────────────────── */ body:not(.view-staff) .status-badge, body:not(.view-staff) .sess-card-spots{ background:none!important;border:0!important;padding:0!important;border-radius:0!important; display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:0;} body:not(.view-staff) .status-badge::before, body:not(.view-staff) .sess-card-spots::before{ content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;} body:not(.view-staff) .badge-waiting,body:not(.view-staff) .spots-low{color:#7a5a10;} body:not(.view-staff) .badge-active,body:not(.view-staff) .spots-green{color:#06603b;} body:not(.view-staff) .badge-done{color:#57605a;} body:not(.view-staff) .badge-noshow,body:not(.view-staff) .spots-red{color:#a33b2e;} body:not(.view-staff) .badge-waitlist{color:#7a5a10;} /* The ticket's waitlist line is the same cue at ticket scale. */ body:not(.view-staff) .wl-loud{ background:none;border:0;padding:0;color:#7a5a10; display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:700;} body:not(.view-staff) .wl-loud::before{ content:'';width:8px;height:8px;border-radius:50%;background:#b98a1a;flex:none;} /* ── Notices: hairline cards, no coloured wash ───────────────────────── */ /* .mm-note is the hook added to the blocks that used to carry an amber or green wash inline (full-session notice, already-booked banner, ticket cues). The colour moves into the dot beside the text. */ body:not(.view-staff) .mm-note{ background:#FBF9F4;border:1px solid rgba(26,25,25,.10);border-radius:10px; color:#57605a;box-shadow:none;} body:not(.view-staff) .mm-note span[style*="color:var(--orange)"]{color:#7a5a10!important;} /* The one exception the brief keeps: a confirmed cue reads as an action. */ body:not(.view-staff) .mm-note-go{border-color:rgba(7,122,75,.45);color:#06603b;} /* ── Ride identity: a dot and a kicker, not a coloured edge ──────────── */ body:not(.view-staff) .sess-card-comm{border-inline-start:1px solid rgba(26,25,25,.12);padding-inline-start:18px;} body:not(.view-staff) .sess-card{border-radius:12px;} body:not(.view-staff) .sess-comm-chip{ background:none;border:0;padding:0;color:var(--ev); display:inline-flex;align-items:center;gap:6px; font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;} body:not(.view-staff) .sess-comm-chip::before{ content:'';width:6px;height:6px;border-radius:50%;background:var(--ev);flex:none;} html[lang="ar"] body:not(.view-staff) .sess-comm-chip{text-transform:none;letter-spacing:0;font-size:12px;} /* ── Cards ──────────────────────────────────────────────────────────── */ body:not(.view-staff) .ticket-card{border-radius:16px;} body:not(.view-staff) .q-card, body:not(.view-staff) .landing-event-card, body:not(.view-staff) .reg-summary-panel{border-radius:12px;} body:not(.view-staff) .ticket-num{font-size:62px;font-weight:700;letter-spacing:-2px;line-height:1;} body:not(.view-staff) .ticket-num-label{ color:#077A4B;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;} html[lang="ar"] body:not(.view-staff) .ticket-num-label{text-transform:none;letter-spacing:0;font-size:12px;} /* ── Inputs ─────────────────────────────────────────────────────────── */ body:not(.view-staff) input[type="text"],body:not(.view-staff) input[type="tel"], body:not(.view-staff) input[type="number"],body:not(.view-staff) input[type="email"], body:not(.view-staff) input[type="date"],body:not(.view-staff) input[type="password"], body:not(.view-staff) select,body:not(.view-staff) textarea{ border-radius:10px;min-height:46px;} /* ── Toasts: dark pill, status dot ──────────────────────────────────── */ body:not(.view-staff) .toast{ background:#1A1919;color:#FBF9F4;border:0;border-inline-start:0;border-radius:10px; padding:12px 18px;font-size:13px;font-weight:600;white-space:normal;max-width:86vw; display:inline-flex;align-items:center;gap:9px; box-shadow:0 8px 28px rgba(26,25,25,.30);backdrop-filter:none;} body:not(.view-staff) .toast::before{ content:'';width:7px;height:7px;border-radius:50%;background:#03FF89;flex:none;} body:not(.view-staff) .toast.error::before{background:#ff6f66;} body:not(.view-staff) .toast.warning::before{background:#f2b43f;} /* ── Modals: 18px, bottom-sheet on a phone ──────────────────────────── */ body:not(.view-staff) .modal-backdrop, body:not(.view-staff) .auth-backdrop, body:not(.view-staff) .pin-backdrop{background:rgba(26,25,25,.45);} body:not(.view-staff) .modal-box, body:not(.view-staff) .auth-box{border-radius:18px;border-top:1px solid rgba(26,25,25,.14);} @media(max-width:767px){ body:not(.view-staff) .modal-box, body:not(.view-staff) .auth-box{ border-radius:18px 18px 0 0;align-self:flex-end;width:100%;max-width:none;max-height:88svh;} } /* ── Type ───────────────────────────────────────────────────────────── */ body:not(.view-staff) .landing-main-title{ font-size:clamp(38px,5vw,62px);line-height:.98;letter-spacing:-1.8px;font-weight:700;} body:not(.view-staff) .page-title{font-size:20px;letter-spacing:-.4px;font-weight:700;} body:not(.view-staff) .landing-eyebrow{ color:#077A4B;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.2px;} html[lang="ar"] body:not(.view-staff) .landing-main-title{letter-spacing:0;line-height:1.25;} html[lang="ar"] body:not(.view-staff) .landing-eyebrow{text-transform:none;letter-spacing:0;font-size:12.5px;} /* Latin digits stay upright and LTR inside Arabic copy. */ html[dir="rtl"] body:not(.view-staff) .ticket-num, html[dir="rtl"] body:not(.view-staff) .lat{direction:ltr;unicode-bidi:isolate;} body:not(.view-staff) :focus-visible{outline:2px solid #077A4B;outline-offset:2px;} /* ── Waiver step ────────────────────────────────────────────────────── */ /* The bare `label` rule up the file shouts every label in uppercase, which is fine for a four-word field name and wrong for a sentence somebody is agreeing to. This one reads as prose. */ body:not(.view-staff) .mm-waiver-agree{ text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--text);} html[lang="ar"] body:not(.view-staff) .mm-waiver-agree{font-size:14px;font-weight:600;} /* Inputs are globally -webkit-appearance:none, which leaves an UNCHECKED box with nothing to draw — the rider sees a sentence and no way to agree to it. */ body:not(.view-staff) input[type="checkbox"]{ -webkit-appearance:checkbox;appearance:checkbox;accent-color:#077A4B; width:20px;height:20px;min-height:0;border-radius:0;flex:none;margin:0;}