/* ========================================================================================================================================================== Doctor Phone Pro - design system v3.13.9 ("midnight ocean + selective neon", revised design bundle theme.css + handoff.md) Loaded LAST. Presentation only: no id, handler, text or logic changes; the colours of the Tailwind utilities come from js/core/dp-palette.js. Language: translucent surfaces on a midnight base, minimal 6% hairline frames, a 14px rhythm, NO background blobs, NO heavy shadows. Neon is SELECTIVE: a luminous 3px accent on ONE edge (the start / right edge) of operational cards (repair tickets, receive / deliver, active, closing, losses), a muted steel edge + faint ambient wash on store / auxiliary panels, and plain hairlines on informational containers, whose glow appears only on touch / focus and on key numbers (eye comfort for 10-hour shifts: every glow <= 40% alpha, static lightweight box-shadows, nothing animated while scrolling). One theme only. Colour is a code: neon cyan = default + accent, green = success + money in, red = loss + delete, amber = edit + warning. Nothing else. Target: standard iPhone portrait (360-430 px wide, 19.5:9), one hand, vertical scroll only. Blur (backdrop-filter) lives ONLY on the dashboard tiles, the sticky header and the elevated sheets, never on the long lists. The layer draws no fixed / absolute overlay and no pointer-events trap. Sections: 1 tokens 2 surfaces 3 tone code 4 dashboard 5 controls + button roles 6 soft neon 7 tactile feedback 8 header glass (v3.13.9) 9 hero metrics + pips (v3.13.9) 10 public portal glow (v3.13.9) ========================================================================================================================================================== */ /* ============================== 1. tokens ============================== */ :root { --dp-bg-base: #041120; --dp-bg: var(--dp-bg-base); --dp-hair: rgba(255, 255, 255, .06); --dp-steel: 143, 180, 208; --dp-surface: rgba(255, 255, 255, .045); --dp-surface-2: rgba(255, 255, 255, .07); --dp-field: rgba(3, 15, 30, .45); --dp-line: rgba(255, 255, 255, .14); --dp-text: #EAF6FF; --dp-muted: #8FB4D0; --dp-muted-2: #6F94B3; --dp-accent: #22D3EE; --dp-neon-soft: #67E8F9; --dp-accent-ink: #031B2A; --dp-accent-soft: rgba(34, 211, 238, .2); --dp-accent-text: #A5F3FC; --dp-ok: #34F5A0; --dp-ok-bg: rgba(52, 245, 160, .09); --dp-ok-ink: #032014; --dp-bad: #FF5C7A; --dp-bad-bg: rgba(255, 92, 122, .10); --dp-warn: #FFC857; --dp-warn-bg: rgba(255, 200, 87, .09); --dp-border: rgba(255, 255, 255, .24); --dp-border-soft: rgba(255, 255, 255, .10); --dp-border-card: rgba(103, 232, 249, .24); --dp-border-ok: rgba(52, 245, 160, .46); --dp-border-bad: rgba(255, 92, 122, .5); --dp-border-warn: rgba(255, 200, 87, .46); --dp-glow: 0 0 14px rgba(34, 211, 238, .38); --dp-glow-ok: 0 0 14px rgba(52, 245, 160, .34); --dp-glass: blur(12px) saturate(140%); --dp-edge-dx: -4px; /* the edge glow leans inward: leftwards in RTL (edge on the right), rightwards in LTR */ --dp-r-card: 20px; --dp-r-field: 15px; --dp-r-btn: 14px; --dp-ease: cubic-bezier(.2, .8, .2, 1); /* the existing token layers re-point to the bundle (ui-polish.css + the inline :root block of index.html) */ --ui-bg: var(--dp-bg); --ui-surface: var(--dp-surface); --ui-surface-2: var(--dp-surface-2); --ui-hairline: var(--dp-border-card); --ui-text: var(--dp-text); --ui-muted: var(--dp-muted); --ui-accent: var(--dp-accent); --ui-shadow: none; --app-bg: var(--dp-bg); --app-card-bg: var(--dp-surface); --app-border: var(--dp-border-card); --app-text: var(--dp-text); --app-text-muted: var(--dp-muted); } :root[dir="ltr"] { --dp-edge-dx: 4px; } /* ============================== 2. surfaces: ocean page, translucent framed cards, no blobs / gradients / heavy shadows ============================== */ html:not([data-theme="light"]) body, html:not([data-theme="light"]) body[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--dp-bg); background-image: none; color: var(--dp-text); } body::before { display: none; } /* the per-section "stage light" */ .brand-hero::before { display: none; } :root .blur-2xl, :root .blur-3xl { display: none; } /* cards: a translucent surface and a thin cyan-tinted frame; the blur is NOT applied here (long lists stay light) */ html:not([data-theme="light"]) .glass { background: var(--dp-surface); border-color: var(--dp-hair); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } html:not([data-theme="light"]) .glass .glass { background: rgba(255, 255, 255, .045); border-color: var(--dp-border-soft); } :root .shadow, :root .shadow-sm, :root .shadow-md, :root .shadow-lg, :root .shadow-xl, :root .shadow-2xl, :root .shadow-inner { box-shadow: none; } :root [class*="shadow-["], :root [class*="shadow-cyan"], :root [class*="shadow-sky"], :root [class*="shadow-blue"], :root [class*="shadow-emerald"], :root [class*="shadow-amber"], :root [class*="shadow-rose"] { box-shadow: none; } :root [class*="drop-shadow"] { filter: none; } /* elevated surfaces keep the glass: the sticky header and the sheets */ :root #adminApp > header.dpp-hdr { background: rgba(4, 17, 32, .84); border-color: var(--dp-hair); -webkit-backdrop-filter: var(--dp-glass); backdrop-filter: var(--dp-glass); box-shadow: none; } :root .dpp-sheet { background: rgba(4, 17, 32, .95); border-color: rgba(34, 211, 238, .3); -webkit-backdrop-filter: var(--dp-glass); backdrop-filter: var(--dp-glass); box-shadow: 0 -6px 30px rgba(34, 211, 238, .16), inset 0 1px 0 rgba(255, 255, 255, .14); } /* section fingerprints: one neon accent for every screen (green = treasury, red = losses), no coloured header glow */ body[data-tab] { --stage: 34, 211, 238; --stage-2: 34, 211, 238; } body[data-tab="closing"], body[data-tab="finance"] { --stage: 52, 245, 160; --stage-2: 52, 245, 160; } body[data-tab="losses"], body[data-tab="deleted"] { --stage: 255, 92, 122; --stage-2: 255, 92, 122; } body[data-tab]:not([data-tab="home"]) > #adminApp > header { border-bottom-color: var(--dp-hair); box-shadow: none; } body[data-tab="new"] #btnSaveNewPhone { box-shadow: none; } /* ============================== 3. tone code: every dashboard hue collapses to the code ============================== */ .tone-sky, .tone-cyan, .tone-teal, .tone-blue, .tone-petrol, .tone-sapphire, .tone-cobalt, .tone-neonteal, .tone-orange, .tone-industrial { --tone: 34, 211, 238; } .tone-emerald { --tone: 52, 245, 160; } .tone-rose, .tone-red { --tone: 255, 92, 122; } .tone-amber { --tone: 255, 200, 87; } [class*="tone-"].card-interactive, [data-module-id].tone-cyan { background-image: none; box-shadow: none; } [data-module-id].tone-cyan:focus-within { box-shadow: 0 0 0 1px var(--dp-accent), var(--dp-glow); } .tone-icon { background: none; box-shadow: none; } .tone-count { box-shadow: none; background: rgba(255, 255, 255, .07); border: 1px solid rgba(var(--tone), .4); } #tab-home .tone-emerald .tone-icon { animation: none; } .pulse-dot { animation: none; } /* ============================== 4. dashboard (الرئيسية): Operations > Finance & commerce > Logs & management, two tiles per row ============================== */ :root #adminApp #tab-home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; align-content: start; padding-bottom: 0; } :root #adminApp #tab-home > * { grid-column: 1 / -1; margin: 0; contain: layout style; } :root #adminApp #tab-home > [data-module-id="closing"], :root #adminApp #tab-home > [data-module-id="ledger"], :root #adminApp #tab-home > [data-module-id="store"], :root #adminApp #tab-home > [data-module-id="inventory"], :root #adminApp #tab-home > [data-module-id="records"], :root #adminApp #tab-home > [data-module-id="bookings"], :root #adminApp #tab-home > [data-module-id="messages"], :root #adminApp #tab-home > [data-module-id="teardown"] { grid-column: auto; } /* every module card (not the grid wrapper of receive | deliver): translucent glass, a 1px frame, an inner top highlight */ :root #adminApp #tab-home > [data-module-id]:not([data-module-id="intakeHandover"]), :root #adminApp #tab-home [data-module-id="intakeHandover"] > button { background: var(--dp-surface); border: 1px solid var(--dp-hair); border-radius: var(--dp-r-card); background-image: none; color: var(--dp-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: var(--dp-glass); backdrop-filter: var(--dp-glass); } :root #adminApp #tab-home > [data-module-id="ledger"].card-interactive { --tone: 255, 92, 122; } :root #adminApp #tab-home > [data-module-id="intakeHandover"] { padding: 0; background: none; border: 0; border-radius: 0; gap: 10px; } :root #adminApp #tab-home .tone-title { color: var(--dp-text); } :root #adminApp #tab-home .tone-icon { background: none; box-shadow: none; border: 0; color: rgb(var(--tone)); } :root #adminApp #tab-home .tone-glyph { color: rgb(var(--tone)); } :root #adminApp #tab-home .tone-count { color: rgb(var(--tone)); } /* line icons from the design bundle's sprite (inline ): 34px (v3.13.9), centred, drawn in the tile's own colour */ .dp-icon { width: 44px; height: 44px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; shape-rendering: geometricPrecision; } .dp-icon .f { fill: currentColor; fill-opacity: .16; } :root #adminApp #tab-home .tone-icon { display: inline-flex; align-items: center; justify-content: center; } :root #adminApp #tab-home .tone-icon .dp-icon { width: 44px; height: 44px; } /* v3.13.10: 44px line icons (34 in v3.13.9) inside the same tile boundaries */ /* hero tiles: receive | deliver */ :root #adminApp #tab-home [data-module-id="intakeHandover"] > button { padding: 10px 12px; gap: 6px; min-height: 104px; border-radius: 22px; } :root #adminApp #tab-home [data-module-id="intakeHandover"] .tone-icon { width: 46px; height: 46px; font-size: 28px; border-radius: 0; } :root #adminApp #tab-home [data-module-id="intakeHandover"] .tone-icon .dp-icon { width: 46px; height: 46px; } :root #adminApp #tab-home [data-module-id="intakeHandover"] .tone-title { font-size: 16px; font-weight: 700; } /* active repairs: a full-width row with the live counter as a key number */ :root #adminApp #tab-home > button[data-module-id="active"] { padding: 8px 14px; min-height: 64px; } :root #adminApp #tab-home > [data-module-id="active"] .tone-icon { width: 44px; height: 44px; font-size: 26px; border-radius: 0; } :root #adminApp #tab-home > [data-module-id="active"] .tone-title { font-size: 16px; font-weight: 700; } :root #adminApp #tab-home > [data-module-id="active"] .tone-count { font-size: 20px; font-weight: 800; line-height: 1.1; padding: 4px 12px; border-radius: 12px; } /* the eight half-width tiles: icon + counter on top, title (two lines at most) + one-line subtitle below */ :root #adminApp #tab-home > button[data-module-id]:is([data-module-id="closing"], [data-module-id="store"], [data-module-id="inventory"], [data-module-id="records"], [data-module-id="bookings"], [data-module-id="messages"], [data-module-id="teardown"]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "icon badge" "text text"; align-items: start; row-gap: 4px; column-gap: 6px; min-height: 100px; padding: 8px 12px; text-align: start; } :root #adminApp #tab-home > button[data-module-id]:is([data-module-id="closing"], [data-module-id="store"], [data-module-id="inventory"], [data-module-id="records"], [data-module-id="bookings"], [data-module-id="messages"], [data-module-id="teardown"]) > span:first-child { display: contents; } :root #adminApp #tab-home > button[data-module-id]:is([data-module-id="closing"], [data-module-id="store"], [data-module-id="inventory"], [data-module-id="records"], [data-module-id="bookings"], [data-module-id="messages"], [data-module-id="teardown"]) .tone-icon { grid-area: icon; justify-self: start; width: 44px; height: 44px; font-size: 24px; border-radius: 0; } :root #adminApp #tab-home > button[data-module-id]:is([data-module-id="closing"], [data-module-id="store"], [data-module-id="inventory"], [data-module-id="records"], [data-module-id="bookings"], [data-module-id="messages"], [data-module-id="teardown"]) > span:first-child > span.text-right { grid-area: text; min-width: 0; align-self: end; } :root #adminApp #tab-home > button[data-module-id]:is([data-module-id="closing"], [data-module-id="store"], [data-module-id="inventory"], [data-module-id="records"], [data-module-id="bookings"], [data-module-id="messages"], [data-module-id="teardown"]) > span:last-child { grid-area: badge; justify-self: end; align-self: start; } :root #adminApp #tab-home > button[data-module-id] .dir-arrow { display: none; } :root #adminApp #tab-home > button[data-module-id]:is([data-module-id="closing"], [data-module-id="store"], [data-module-id="inventory"], [data-module-id="records"], [data-module-id="bookings"], [data-module-id="messages"], [data-module-id="teardown"]) .tone-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.3; } :root #adminApp #tab-home > button[data-module-id] .leading-snug { display: block; font-size: 10.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* losses: its own simple markup (icon + title) stacked the same way */ :root #adminApp #tab-home > [data-module-id="ledger"] { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 100px; padding: 10px 12px; } :root #adminApp #tab-home > [data-module-id="ledger"] > i { font-size: 24px; line-height: 32px; } :root #adminApp #tab-home > [data-module-id="ledger"] .tone-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: start; } /* the compact layer's row minimum (40px) is more specific than the rules above: the tile sizes are restated with a doubled id so they win */ :root #adminApp #tab-home#tab-home > button[data-module-id="active"] { min-height: 64px; } :root #adminApp #tab-home#tab-home > button[data-module-id]:is([data-module-id="closing"], [data-module-id="store"], [data-module-id="inventory"], [data-module-id="records"], [data-module-id="bookings"], [data-module-id="messages"], [data-module-id="teardown"]), :root #adminApp #tab-home#tab-home > [data-module-id="ledger"] { min-height: 100px; } /* the search bar (v3.13.9): ONE thin row, 40px - lead glyph, the code / serial field, barcode + QR icon buttons, the solid "open" button */ :root #adminApp #tab-home#tab-home > [data-module-id="quickSearch"] { display: flex; align-items: center; gap: 4px; height: 40px; min-height: 40px; padding: 0 4px 0 10px; border-radius: 14px; background: var(--dp-field); border: 1px solid var(--dp-border); } :root #adminApp #tab-home > [data-module-id="quickSearch"]:focus-within { border-color: var(--dp-accent); box-shadow: 0 0 0 1px var(--dp-accent), var(--dp-glow); } :root #adminApp #tab-home .qs-lead { flex: none; color: var(--dp-muted-2); font-size: 13px; } :root #adminApp #tab-home#tab-home .qs-input { flex: 1 1 auto; min-width: 0; height: 38px; min-height: 38px; padding: 0 4px; border: 0; box-shadow: none; background-color: transparent; color: var(--dp-text); font-size: 16px; } :root #adminApp #tab-home .qs-input::placeholder { font-size: 13.5px; color: var(--dp-muted-2); } :root #adminApp #tab-home#tab-home .qs-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: var(--dp-accent); font-size: 15px; touch-action: manipulation; } :root #adminApp #tab-home#tab-home .qs-ico:active { background: var(--dp-accent-soft); } :root #adminApp #tab-home#tab-home .qs-open { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; min-height: 32px; padding: 0 11px; border-radius: 10px; font-size: 12px; background: var(--dp-accent); color: var(--dp-accent-ink); border: 1px solid var(--dp-accent); box-shadow: var(--dp-glow); touch-action: manipulation; } /* the dashboard tiles are UNIFORM and calm: a 6% hairline, a translucent surface, an ultra-subtle top highlight - no edge strip, no tinted fill, no glow dot. The colour code lives on the DATA cards (4b). */ :root #adminApp #tab-home#tab-home > [data-module-id]:not([data-module-id="intakeHandover"]), :root #adminApp #tab-home#tab-home [data-module-id="intakeHandover"] > button { background: var(--dp-surface); border: 1px solid var(--dp-hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } :root #adminApp #tab-home .tone-count span[class~="w-1.5"] { display: none; } /* the small status dot of the receive badge */ /* ============================== 4b. data cards: a 3px START-edge accent (right in RTL) with a soft inner glow, one explicit colour per card type ============================== */ /* ready for delivery emerald #34F5A0 in-progress repair cyan #22D3EE customer chat neon violet #A78BFA store phone listing steel blue #4A729A loss / expense crimson coral #FF5C7A The glow is INSET (nothing bleeds outside the card), static and lightweight: no filter, no animation, no pseudo-element. */ :root { --dp-inset-dx: -10px; } :root[dir="ltr"] { --dp-inset-dx: 10px; } :root:root #activePhonesContainer > .tk:not([data-watchdog-card]), :root:root [data-card], :root:root [data-store-row] { border-inline-start: 3px solid rgb(var(--edge, 34, 211, 238)); border-top-color: var(--dp-hair); border-bottom-color: var(--dp-hair); border-inline-end-color: var(--dp-hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset var(--dp-inset-dx) 0 18px -14px rgba(var(--edge, 34, 211, 238), .38); } :root:root #activePhonesContainer > .tk:not([data-watchdog-card]) { --edge: 222, 168, 72; background: var(--dp-surface); } /* v3.14.2: the repairs module's soft amber (was cyan: an odd blue neon on amber-iconed cards) */ :root:root #activePhonesContainer > .tk.border-emerald-500\/40:not([data-watchdog-card]) { --edge: 52, 245, 160; } :root:root [data-card="delivery"] { --edge: 34, 211, 238; } :root:root [data-card="delivery"][data-ready="1"] { --edge: 52, 245, 160; } :root:root [data-card="chat"] { --edge: 56, 189, 248; } :root:root [data-store-row] { --edge: 74, 114, 154; border-radius: 16px; } :root:root [data-card="loss"] { --edge: 255, 92, 122; } /* ============================== 4c. SPA views and sheets (js/core/view-router.js) ============================== */ /* exactly one .app-view is on screen: `.active`. Everything else is hidden by the stylesheet (never by inline style), so a grid / flex screen keeps its layout when it comes back. */ .app-view:not(.active) { display: none !important; } /* sheets, drawers and modals mount OVER the view: a solid, blurred backdrop so no dashboard card ghosts through */ :root .fixed.inset-0:not(.hidden)[class*="bg-"]:not([style*="background"]):not(#privacyLockScreen) { background-color: rgba(4, 17, 32, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* the scrollable bodies inside sheets keep their momentum and never chain the scroll to the page behind */ :root .fixed.inset-0 [class*="overflow-y-auto"], :root .fixed.inset-0 [class*="max-h-"], :root .dpp-sheet-body, :root #ownerPanelModal [data-role="body"] { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ============================== 5. controls and button roles ============================== */ /* every filled "cyan" button is the PRIMARY role: solid neon cyan, dark ink */ :root #adminApp button[class*="bg-sky-500"]:not([class*="bg-sky-500/"]), :root #adminApp button[class*="bg-cyan-500"]:not([class*="bg-cyan-500/"]), :root #adminApp button[class*="bg-cyan-400"]:not([class*="bg-cyan-400/"]), :root #adminApp button[class*="bg-sky-400"]:not([class*="bg-sky-400/"]), :root #adminApp button.bg-blue-500, :root #adminApp .bg-blue-500.text-white { color: var(--dp-accent-ink); } /* v3.16.0: only SOLID fills take the dark ink; a translucent "bg-sky-500/20" chip keeps its own light text */ /* gradient buttons go flat: cyan-ish gradients -> primary, green -> confirm, red -> danger, amber -> edit */ :root #adminApp [class*="bg-gradient-to-"][class*="from-cyan"], :root #adminApp [class*="bg-gradient-to-"][class*="from-sky"], :root #adminApp [class*="bg-gradient-to-"][class*="from-blue"], :root #adminApp [class*="bg-gradient-to-"][class*="from-teal"] { background-image: none; background-color: var(--dp-accent); color: var(--dp-accent-ink); } :root #adminApp [class*="bg-gradient-to-"][class*="from-emerald"], :root #adminApp [class*="bg-gradient-to-"][class*="from-green"] { background-image: none; background-color: var(--dp-ok); color: var(--dp-ok-ink); } :root #adminApp [class*="bg-gradient-to-"][class*="from-rose"], :root #adminApp [class*="bg-gradient-to-"][class*="from-red"] { background-image: none; background-color: var(--dp-bad-bg); color: var(--dp-bad); border: 1px solid var(--dp-border-bad); } :root #adminApp [class*="bg-gradient-to-"][class*="from-amber"], :root #adminApp [class*="bg-gradient-to-"][class*="from-orange"], :root #adminApp [class*="bg-gradient-to-"][class*="from-yellow"] { background-image: none; background-color: var(--dp-warn-bg); color: var(--dp-warn); border: 1px solid var(--dp-border-warn); } :root #adminApp button:not([class*="bg-gradient-to-"]) { background-image: none; } #headerAdminBadge[data-owner="1"] { background: var(--dp-warn-bg); background-image: none; border-color: var(--dp-border-warn); } /* the owners' badge: amber code, no gold gradient */ /* fields: translucent field, 1px frame, 15px radius, a neon ring on focus */ :root #adminApp input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), :root #adminApp select, :root #adminApp textarea { background-color: var(--dp-field); border-color: var(--dp-border); } :root #adminApp input:not([type="checkbox"]):not([type="radio"]):focus, :root #adminApp select:focus, :root #adminApp textarea:focus { border-color: var(--dp-accent); box-shadow: 0 0 0 1px var(--dp-accent), 0 0 12px rgba(34, 211, 238, .3); outline: none; } /* thin frames wherever cards sit next to each other, so nothing looks glued together; tickets are separated by the frame and the 12px gap */ :root #adminApp .tab-content > .glass:not([data-card]):not([data-store-row]):not(.tk), :root #adminApp .tab-content > div > .glass:not([data-card]):not([data-store-row]):not(.tk) { border: 1px solid var(--dp-hair); } /* (data cards - tickets, delivery, chat, store rows, losses - keep their 3px colour edge, section 4b) */ #activePhonesContainer > .tk { box-shadow: none; } /* ============================== 6. soft neon: icons, primary / confirm buttons, key numbers (diffused, never harsh) ============================== */ :root #adminApp #tab-home .tone-count { text-shadow: 0 0 8px rgba(var(--tone), .35); } :root #adminApp button[class*="bg-sky-500"], :root #adminApp button[class*="bg-cyan-500"], :root #adminApp [class*="bg-gradient-to-"][class*="from-cyan"], :root #adminApp [class*="bg-gradient-to-"][class*="from-sky"], :root #adminApp [class*="bg-gradient-to-"][class*="from-blue"] { box-shadow: var(--dp-glow); } :root #adminApp [class*="bg-gradient-to-"][class*="from-emerald"], :root #adminApp [class*="bg-gradient-to-"][class*="from-green"] { box-shadow: var(--dp-glow-ok); } @media (prefers-contrast: more) { :root #adminApp #tab-home .tone-count, :root #adminApp #tab-home .card-interactive:active .tone-icon i { text-shadow: none; } } /* ============================== 7. tactile feedback: a quick press, a soft edge glow, an icon that leans in (no bouncing) ============================== */ :root #adminApp #tab-home > [data-module-id].card-interactive, :root #adminApp #tab-home [data-module-id="intakeHandover"] > button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .14s var(--dp-ease), border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } :root #adminApp #tab-home > [data-module-id].card-interactive:active, :root #adminApp #tab-home [data-module-id="intakeHandover"] > button:active { transform: scale(.975); border-color: rgba(var(--tone), .7); background-color: rgba(var(--tone), .10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(var(--tone), .28), 0 0 16px rgba(var(--tone), .22); } :root #adminApp #tab-home .tone-icon { transition: transform .3s cubic-bezier(.3, 1.25, .5, 1), filter .2s var(--dp-ease); } /* release: a soft spring */ /* v3.13.9 kinetic icons: pressed = shrink + a 2deg lean + a soft neon halo; on release the same .12s curve (no overshoot) returns it smoothly */ :root #adminApp #tab-home .card-interactive:active .tone-icon, :root #adminApp #tab-home [data-module-id="intakeHandover"] > button:active .tone-icon { transform: scale(.92) rotate(-2deg); filter: drop-shadow(0 0 6px rgba(var(--tone), .4)); transition-duration: .12s, .12s; } @media (hover: hover) { :root #adminApp #tab-home [data-module-id].card-interactive:hover, :root #adminApp #tab-home [data-module-id="intakeHandover"] > button:hover { border-color: rgba(var(--tone), .55); } :root #adminApp #tab-home .card-interactive:hover:not(:active) .tone-icon { transform: translateY(-1px); } button.bg-sky-500:hover, button.bg-cyan-500:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { #tab-home > *, .tab-content, .card-interactive, .tone-icon, .pulse-dot { animation: none; transition: none; } } /* ============================== 8. header (v3.13.9): oceanic glass buttons, a gold-crown identity pill, a refined ruby counter ============================== */ /* the six header buttons are ONE material: a 5% white glass with a 1px 8% hairline; no cyan / blue fill, no gradient, no shadow */ :root #adminApp header.dpp-hdr .hb { background-color: rgba(255, 255, 255, .05); background-image: none; border: 1px solid rgba(255, 255, 255, .08); color: var(--dp-accent-text); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform .12s var(--dp-ease), background-color .18s ease, border-color .18s ease; } :root #adminApp header.dpp-hdr .hb i { color: var(--dp-accent-text); } :root #adminApp header.dpp-hdr .hb:active { background-color: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .32); } :root #adminApp header.dpp-hdr #deviceStationBadge i, :root #adminApp header.dpp-hdr #btnHeaderManagement i { color: var(--dp-accent-text); } /* the identity pill: the same glass; for owners a fine gold hairline that carries the SVG crown (mobile-shell.css) */ :root #adminApp header.dpp-hdr #headerAdminBadge { background-color: rgba(255, 255, 255, .05); background-image: none; border-color: rgba(255, 255, 255, .08); box-shadow: none; } :root #adminApp header.dpp-hdr #headerAdminBadge[data-owner="1"] { background-color: rgba(255, 255, 255, .05); border-color: rgba(245, 197, 68, .38); } :root #adminApp header.dpp-hdr #headerAdminBadge[data-owner="1"] #headerAdminNameText { color: #FFE9A8; } /* the counters on chat + bell: a glowing ruby pill that widens with the digits (1 -> a circle, 12 -> a capsule, 99+ -> a wider capsule) */ :root #adminApp header.dpp-hdr #headerUnreadMessagesCount, :root #adminApp header.dpp-hdr #headerUnreadNotificationsCount { box-sizing: border-box; min-width: 16px; width: auto; height: 16px; padding: 0 4px; border-radius: 999px; background: #FF5C7A; background-image: none; border: 1px solid rgba(4, 17, 32, .9); box-shadow: 0 0 8px rgba(255, 92, 122, .4); color: #2A0610; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: -.2px; animation: none; white-space: nowrap; } /* ============================== 9. hero metrics + notification pips (v3.13.9) ============================== */ /* key numbers: big, bold, tabular, lit by a diffused halo (<= 40% alpha) - the handover count (emerald), the available store phones (steel / neon cyan), the drawer cash */ :root #adminApp #tab-home .dp-hero { font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1; letter-spacing: -.02em; white-space: nowrap; background: none; border: 0; padding: 0; box-shadow: none; } :root #adminApp #tab-home .dp-hero-ok { font-size: 30px; color: var(--dp-ok); text-shadow: 0 0 12px rgba(52, 245, 160, .35); } :root #adminApp #tab-home .dp-hero-steel { font-size: 28px; color: var(--dp-neon-soft); text-shadow: 0 0 12px rgba(34, 211, 238, .35); } :root #adminApp #tab-home .dp-hero-cash { font-size: 17px; color: var(--dp-ok); text-shadow: 0 0 10px rgba(52, 245, 160, .3); } :root #adminApp #tab-home .dp-hero-box { display: flex; flex-direction: column; align-items: flex-end; } :root #adminApp #tab-home .dp-tag { display: inline-flex; align-items: center; flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; } :root #adminApp #tab-home .dp-tag-ok { color: var(--dp-ok); background: rgba(52, 245, 160, .10); border: 1px solid rgba(52, 245, 160, .34); } /* the records tile no longer shows a counter */ :root #adminApp #tab-home #badgeTotalRecordsCount { display: none; } /* compact glowing pips (chat, bookings, store bookings): a ruby dot that sits on the tile icon's top edge. No absolute positioning: the pip shares the icon's grid cell. */ :root #adminApp #tab-home > button[data-module-id]:is([data-module-id="store"], [data-module-id="bookings"], [data-module-id="messages"]) > span:last-child { display: contents; } :root #adminApp #tab-home .dp-pip { grid-area: icon; justify-self: start; align-self: start; z-index: 2; margin-inline-start: 23px; margin-top: -6px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #FF5C7A; border: 1px solid rgba(4, 17, 32, .9); box-shadow: 0 0 8px rgba(255, 92, 122, .4); color: #2A0610; font-size: 10px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; animation: none; } :root #adminApp #tab-home .dp-pip.hidden { display: none; } :root #adminApp #tab-home > [data-module-id="store"] .dp-hero-steel { grid-area: badge; justify-self: end; align-self: start; } /* ============================== 10. public portal (the customer landing): delicate asymmetric neon glow + crisp glass edging (v3.13.9) ============================== */ /* the technician WhatsApp cards, the Google Maps card and the TikTok identity card: a crisp 1px glass edge, a brighter neon hairline on the TOP and START edges only (asymmetric), and a barely-there cyan halo. Presentation only: colours of the links / icons stay as they are. */ /* (the identity card = #unifiedHeader: logo + brand + status) */ :root #publicLanding #unifiedHeader, :root #publicLanding [data-site-owner-card], :root #publicLanding a[href^="https://www.google.com/maps"], :root #publicLanding .hdr-tt:not(.hidden) { border: 1px solid rgba(34, 211, 238, .24); border-top-color: rgba(34, 211, 238, .42); border-inline-start-color: rgba(34, 211, 238, .32); box-shadow: 0 0 18px rgba(34, 211, 238, .14), inset 0 1px 0 rgba(255, 255, 255, .12), inset 1px 0 0 rgba(255, 255, 255, .05); -webkit-backdrop-filter: none; backdrop-filter: none; } :root #publicLanding [data-site-owner-card]:active, :root #publicLanding a[href^="https://www.google.com/maps"]:active, :root #publicLanding .hdr-tt:not(.hidden):active { border-top-color: rgba(34, 211, 238, .6); border-inline-start-color: rgba(34, 211, 238, .5); box-shadow: 0 0 14px rgba(34, 211, 238, .22), inset 0 1px 0 rgba(255, 255, 255, .16); } /* ============================== 11. semantic colour nuances on the dashboard (v3.13.10) ============================== */ /* v3.13.11 eye-comfort set: warm orange intake | soft rich amber repairs (no neon glare) | emerald handover | malachite closing | blue-violet chat | mechanical olive-lime parts | burgundy store phones | rosy mocha records */ :root #adminApp #tab-home > [data-module-id="intakeHandover"] > button:first-child { --tone: 255, 140, 66; } :root #adminApp #tab-home > [data-module-id="active"] { --tone: 203, 174, 138; } :root #adminApp #tab-home > [data-module-id="closing"] { --tone: 11, 191, 106; } :root #adminApp #tab-home > [data-module-id="messages"] { --tone: 124, 108, 247; } :root #adminApp #tab-home > [data-module-id="records"] { --tone: 172, 128, 116; } :root #adminApp #tab-home > [data-module-id="inventory"] { --tone: 150, 190, 70; } :root #adminApp #tab-home > [data-module-id="store"] { --tone: 78, 18, 40; } :root #adminApp #tab-home .dp-hero-steel { color: rgb(var(--tone)); text-shadow: 0 0 12px rgba(var(--tone), .3); } :root #adminApp #tab-home .dp-hero-cash { color: rgb(var(--tone)); text-shadow: 0 0 10px rgba(var(--tone), .3); } :root #adminApp #tab-home > [data-module-id="intakeHandover"] > button:first-child .tone-count { color: rgb(var(--tone)); } /* ============================== 12. the compact store-status row of the management drawer (v3.13.10) ============================== */ .wh-bar { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; align-items: stretch; } .wh-pill, .wh-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: 12px; font-weight: 900; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: var(--dp-muted); touch-action: manipulation; } .wh-pill-open.on { color: var(--dp-ok); border-color: var(--dp-border-ok); background: var(--dp-ok-bg); box-shadow: 0 0 10px rgba(52, 245, 160, .2); } .wh-pill-closed.on { color: var(--dp-bad); border-color: var(--dp-border-bad); background: var(--dp-bad-bg); box-shadow: 0 0 10px rgba(255, 92, 122, .2); } .wh-chip.on { color: var(--dp-accent-text); border-color: rgba(34, 211, 238, .5); background: var(--dp-accent-soft); } .wh-pill:active, .wh-chip:active { transform: scale(.96); } /* ============================== 13. v3.14.0: group-themed drawer, fault families, bookings hub, diffused light ============================== */ /* hardware family: the teardown hub and the spare parts share ONE mechanical olive-lime */ :root #adminApp #tab-home > [data-module-id="teardown"] { --tone: 150, 190, 70; } /* fault families (js/core/faults.js): a glyph + a soft family accent on the intake chips and the ticket badges */ .dp-ficon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :root #adminApp .fq { color: rgb(var(--fc)); background-color: rgba(var(--fc), .10); border-color: rgba(var(--fc), .36); box-shadow: 0 0 12px rgba(var(--fc), .10); } :root #adminApp .fq:active { background-color: rgba(var(--fc), .2); } :root #activePhonesContainer .tkf { display: inline-flex; align-items: center; gap: 5px; color: rgb(var(--fc)); background: rgba(var(--fc), .11); border-color: rgba(var(--fc), .4); box-shadow: 0 0 12px rgba(var(--fc), .12); } :root #activePhonesContainer .tkf .dp-ficon { width: 15px; height: 15px; } /* the unified bookings hub: three category segments */ .bkh-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; overflow: visible; } .bkh-seg { min-height: 52px; padding: 4px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; font-size: 11.5px; font-weight: 900; line-height: 1.2; white-space: normal; text-align: center; flex-direction: column; gap: 2px; color: var(--dp-muted); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); touch-action: manipulation; } .bkh-seg small { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 10px; } .bkh-seg.on { color: var(--dp-accent-text); background: var(--dp-accent-soft); border-color: rgba(34, 211, 238, .5); box-shadow: 0 0 14px rgba(34, 211, 238, .14); } /* the management drawer: every section's accent colours ALL of its cards (chiseled glass edge + a diffused aura), the cards stay on the dark ocean glass */ #managementDrawerModal [data-grp="quick"] { --g: 34, 211, 238; } #managementDrawerModal [data-grp="portals"] { --g: 82, 132, 240; } #managementDrawerModal [data-grp="status"] { --g: 52, 245, 160; } #managementDrawerModal [data-grp="lang"] { --g: 100, 168, 204; } #managementDrawerModal [data-grp="partners"] { --g: 45, 190, 170; } #managementDrawerModal [data-grp="backup"] { --g: 240, 184, 70; } #managementDrawerModal [data-grp="security"] { --g: 255, 92, 122; } :root #managementDrawerModal [data-grp] > .drawer-sec { --tone: var(--g); border-inline-start: 0; box-shadow: none; } /* v3.20.13: the group keeps its colour in the icon and the title only - no coloured edge, no glow */ :root #managementDrawerModal [data-grp] button:not(.on), :root #managementDrawerModal [data-grp] a.glass { background-color: rgba(4, 17, 32, .78); border: 1px solid #1e2b45; box-shadow: none; /* v3.20.13: one dark hairline for every drawer button */ } :root #managementDrawerModal [data-grp] button:not(.on):active { border-color: #334155; box-shadow: none; } :root #managementDrawerModal [data-grp] button:not(.wh-pill):not(.wh-chip) i, :root #managementDrawerModal [data-grp] button:not(.wh-pill):not(.wh-chip) svg { color: rgb(var(--g)); } :root #managementDrawerModal [data-grp] button .w-8.h-8 { background-color: rgba(var(--g), .10); box-shadow: none; } :root #managementDrawerModal [data-grp] .wh-pill-open:not(.on), :root #managementDrawerModal [data-grp] .wh-pill-closed:not(.on) { color: var(--dp-muted); } :root #managementDrawerModal [data-grp] .wh-chip.on { color: rgb(var(--g)); border-color: rgba(var(--g), .55); background-color: rgba(var(--g), .12); } /* diffused light instead of sharp neon lines: the colour-coded data-card edge keeps a 3px start edge but softened, with a faint bleed outside */ :root:root #activePhonesContainer > .tk:not([data-watchdog-card]), :root:root [data-card], :root:root [data-store-row] { border-inline-start-color: rgba(var(--edge, 34, 211, 238), .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset var(--dp-inset-dx) 0 18px -14px rgba(var(--edge, 34, 211, 238), .38), 0 0 16px rgba(var(--edge, 34, 211, 238), .10); } /* the ceiling of an opened sub-view glows softly in the module's own accent (inset: nothing bleeds outside, nothing is positioned) */ body[data-tab="new"] { --stage: 255, 140, 66; } body[data-tab="active"] { --stage: 222, 168, 72; } body[data-tab="closing"] { --stage: 11, 191, 106; } body[data-tab="store"], body[data-tab="bookings"] { --stage: 78, 18, 40; } body[data-tab="inventory"], body[data-tab="teardown"] { --stage: 150, 190, 70; } body[data-tab="messages"] { --stage: 124, 108, 247; } body[data-tab="archive"] { --stage: 172, 128, 116; } :root #adminApp .app-view.active:not(#tab-home) { box-shadow: inset 0 38px 46px -36px rgba(var(--stage, 34, 211, 238), .16); } /* ============================== 14. v3.14.2: deep violet-burgundy (midnight plum) for هواتِف المتجر, clearly apart from the coral of الأعباء والخسائر ============================== */ :root:root [data-store-row] { --edge: 78, 18, 40; } :root #adminApp #tab-home#tab-home > button[data-module-id="store"] .tone-icon { width: 54px; height: 54px; filter: drop-shadow(0 0 9px rgba(78, 18, 40, .4)); } :root #adminApp #tab-home#tab-home > button[data-module-id="store"] .tone-icon .dp-icon { width: 54px; height: 54px; color: #A3508F; } :root #adminApp #tab-home#tab-home > button[data-module-id="store"][data-module-id]:not(.x) { border-color: rgba(78, 18, 40, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 16px rgba(78, 18, 40, .20); } :root #adminApp #tab-home .dp-hero-steel { color: #A3508F; text-shadow: 0 0 12px rgba(78, 18, 40, .34); } :root #adminApp #tab-home#tab-home > button[data-module-id="store"] .dp-pip { background: #5A1832; box-shadow: 0 0 8px rgba(78, 18, 40, .4); color: #F6DDEA; } /* ============================== 15. v3.14.2: repair cards follow the module's amber (info frame + glyphs borrow the card's own edge colour) ============================== */ :root:root #activePhonesContainer .tk-row { border-color: rgba(var(--edge, 222, 168, 72), .22); box-shadow: 0 0 16px rgba(var(--edge, 222, 168, 72), .12); } :root:root #activePhonesContainer .tk-id { color: #F0C879; } :root:root #activePhonesContainer .tk-thumb-ph { color: #DEA848; } :root:root #activePhonesContainer .tk-thumb { border-color: rgba(var(--edge, 222, 168, 72), .22); } /* ============================== 16. v3.14.3: technician badges - bespoke SVG glyph in cyber-glass, larger glyph + name ============================== */ .tk-tech-ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(var(--tc, 34, 211, 238), .5)); } #headerAdminNameText { font-size: clamp(13px, 3.8vw, 15.5px); } /* capital attribution chips (v3.14.3): the store manager's plum and the multi-partner mix - classes, not Tailwind palette names */ .tone-abdou { background: rgba(90, 24, 50, .35); color: #E9B9D0; border-color: rgba(176, 80, 127, .4); } .tone-mix { background: rgba(120, 130, 190, .14); color: #C9D2F5; border-color: rgba(150, 160, 215, .35); } /* ============================== 17. v3.14.4: teardown hub header - the partner's capital recovery ring + profit / remaining-stock tiles ============================== */ .td-chart { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border-radius: 18px; background: var(--dp-surface); border: 1px solid rgba(34, 211, 238, .24); box-shadow: 0 0 18px rgba(34, 211, 238, .14), inset 0 1px 0 rgba(255, 255, 255, .08); } .td-chart.hidden { display: none; } .td-ringwrap { display: grid; place-items: center; width: 116px; height: 116px; } .td-ring { grid-area: 1 / 1; width: 116px; height: 116px; display: block; filter: drop-shadow(0 0 7px rgba(34, 211, 238, .38)); } .td-ring-arc { transition: stroke-dasharray .6s ease; } .td-ring-c { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; } .td-ring-c b { font: 900 22px/1 ui-monospace, Menlo, monospace; color: #E6FBFF; } .td-ring-c span { font-size: 10px; font-weight: 800; color: #8CEBFF; margin-top: 3px; } .td-chart-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .td-chart-h { font-size: 12.5px; font-weight: 900; color: #E2E8F0; line-height: 1.35; } .td-chart-h.ok { color: #6EE7B7; } .td-st { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); } .td-st span { font-size: 10px; font-weight: 800; color: #94A3B8; } .td-st b { font: 900 13px/1.2 ui-monospace, Menlo, monospace; color: #F1F5F9; } .td-st b.good { color: #6EE7B7; } .td-st b.warn { color: #F0C879; } .td-st small { flex-basis: 100%; font-size: 9.5px; font-weight: 700; color: #64748B; } @media (max-width: 380px) { .td-chart { grid-template-columns: 96px minmax(0, 1fr); } .td-ringwrap, .td-ring { width: 96px; height: 96px; } .td-ring-c b { font-size: 18px; } } /* ============================== 18. v3.14.5: the workshop-wide action palette (muscle memory) - confirm / deliver = emerald, edit = amber, delete / cancel = crimson, print label = thermal cyan ============================== */ :root:root .act-confirm { background: #047857 !important; border: 1px solid #34D399 !important; color: #ECFDF5 !important; } :root:root .act-edit { background: rgba(245, 158, 11, .16) !important; border: 1px solid rgba(245, 158, 11, .5) !important; color: #FCD34D !important; } :root:root .act-del { background: rgba(159, 18, 57, .22) !important; border: 1px solid rgba(190, 18, 60, .55) !important; color: #FDA4AF !important; } :root:root .act-print { background: rgba(6, 182, 212, .16) !important; border: 1px solid rgba(34, 211, 238, .5) !important; color: #67E8F9 !important; } /* spec values (v3.14.5): battery % and storage GB stay LTR-isolated inside Arabic text */ bdi.spec-battery, bdi.spec-storage { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ticket deposit badge (v3.14.5) */ .tk-dep { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0; padding: 5px 8px; border-radius: 10px; font-size: 11px; font-weight: 800; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .45); color: #FDE68A; } .tk-dep b { font-family: ui-monospace, Menlo, monospace; color: #FFF7DB; } .tk-dep.is-done { background: rgba(4, 120, 87, .22); border-color: rgba(52, 211, 153, .5); color: #A7F3D0; } .tk-dep-go { margin-inline-start: auto; min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 11px; font-weight: 900; } /* ============================== 19. v3.14.6: vertical device frames (3:4) + tracking stage glow ============================== */ :root:root #activePhonesContainer .tk-thumb { width: 66px; height: auto; aspect-ratio: 3 / 4; flex: 0 0 66px; object-fit: contain; border-radius: 0; padding: 0; background: rgba(0, 0, 0, .35); } :root:root #activePhonesContainer .tk-thumb-ph { width: 66px; height: 88px; border-radius: 0; } #resPhoneImageContainer { width: 96px; height: auto; aspect-ratio: 3 / 4; min-height: 0; padding: 0; border-radius: 0; background: rgba(0, 0, 0, .35); } #custModalPhoneImgCard > div:first-child { width: 96px; min-height: 0; aspect-ratio: 3 / 4; border-radius: 0; padding: 0; background: rgba(0, 0, 0, .35); } #resPhoneImg, #custModalDeviceImage { max-height: 100%; width: 100%; height: 100%; object-fit: contain; } .dpp-phone-thumb { aspect-ratio: 3 / 4; object-fit: contain; border-radius: 0; background: rgba(0, 0, 0, .35); } .trk-pulse { border-color: #67E8F9 !important; color: #ECFEFF !important; box-shadow: 0 0 0 0 rgba(var(--pulse, 34, 211, 238), .4), 0 0 9px rgba(var(--pulse, 34, 211, 238), .4); animation: trkPulse 1.8s ease-in-out infinite; } @keyframes trkPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pulse, 34, 211, 238), .4), 0 0 7px rgba(var(--pulse, 34, 211, 238), .4); } 50% { box-shadow: 0 0 0 6px rgba(var(--pulse, 34, 211, 238), 0), 0 0 13px rgba(var(--pulse, 34, 211, 238), .4); } } @media (prefers-reduced-motion: reduce) { .trk-pulse { animation: none; } } /* v3.14.7: larger sharp-cornered device frames (nothing of the hardware is clipped) */ :root:root #activePhonesContainer .tk-thumb { border-radius: 0; } /* ============================== 20. v3.14.9: readable controls - accessories / catalog tabs and the privacy lock never fall back to dark text ============================== */ :root:root [data-acc-tab][aria-selected="false"], :root:root [data-acc-cat][aria-pressed="false"], :root:root [data-acc-act="add"] { color: #DDF6FF !important; } :root:root [data-acc-tab][aria-selected="true"] { color: #ECFEFF !important; } :root:root [data-acc-row] button, :root:root [data-acc-row] .act-print, :root:root [data-acc-row] .act-edit { font-size: 11.5px; } :root:root [data-grp="security"] button:not([class*="rose"]) span, :root:root [data-grp="security"] button:not([class*="rose"]) { color: #E6FBFF !important; } :root:root .fc-adv-arch-btn { min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 11px; font-weight: 900; } /* v3.17.2: `pan-y` here intersected with the chip strip's own touch-action (the effective value is the intersection up the ancestors) and forbade its horizontal swipe on iOS; `manipulation` keeps every pan and pinch */ #tab-new, #repairIssuesListContainer { overflow-y: visible; touch-action: manipulation; } /* ============================== 21. v3.14.9: customer home - WhatsApp pair in one row + compact Maps bar ============================== */ .wa-pair > [data-site-owner-card] { padding: 7px 9px; gap: 6px; border-radius: 12px; min-width: 0; } .wa-pair > [data-site-owner-card] .w-10 { width: 30px; height: 30px; font-size: 17px; flex: none; } .wa-pair > [data-site-owner-card] > span { display: none; } .wa-pair > [data-site-owner-card] .text-xs { font-size: 11px; white-space: nowrap; } .wa-pair > [data-site-owner-card] [data-site-kind="text"] { font-size: 11px; letter-spacing: 0; } .maps-bar { display: flex; align-items: center; gap: 9px; padding: 8px 10px; min-height: 46px; border-radius: 14px; background: rgba(239, 68, 68, .07); border: 1px solid rgba(239, 68, 68, .3); text-align: right; } .maps-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(239, 68, 68, .18); color: #FCA5A5; font-size: 14px; } .maps-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .maps-ttl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; font-weight: 900; color: #fff; } .maps-open { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(16, 185, 129, .2); border: 1px solid rgba(16, 185, 129, .35); color: #6EE7B7; font-size: 9px; font-weight: 800; } .maps-dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; } .maps-adr { font-size: 10px; color: #FCD34D; font-weight: 700; line-height: 1.35; overflow-wrap: break-word; } .maps-go { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border-radius: 10px; background: rgba(239, 68, 68, .2); border: 1px solid rgba(239, 68, 68, .4); color: #FECACA; font-size: 10.5px; font-weight: 900; } /* ============================== 22. v3.16.0: customer chat cards (dark, high contrast) ============================== */ :root:root [data-card="chat"] { background: #0b1626; } :root:root [data-card="chat"] button[class*="bg-sky-500/"], :root:root [data-card="chat"] button[class*="bg-cyan-500/"] { background-color: rgba(14, 116, 144, .35); color: #E0F2FE; border-color: rgba(125, 211, 252, .55); } :root:root [data-card="chat"] button[class*="bg-amber-500/"] { background-color: rgba(180, 83, 9, .35); color: #FEF3C7; border-color: rgba(251, 191, 36, .55); } :root:root [data-card="chat"] button[class*="bg-emerald-500/"], :root:root [data-card="chat"] a[class*="bg-emerald-500/"] { background-color: rgba(4, 120, 87, .35); color: #D1FAE5; } :root:root [data-card="chat"] button[class*="bg-rose-950"], :root:root [data-card="chat"] button[class*="bg-rose-500/"] { background-color: rgba(159, 18, 57, .3); color: #FFE4E6; } :root:root [data-card="chat"] [class*="text-sky-300"] { color: #BAE6FD; } :root:root [data-card="chat"] [class*="text-gray-400"] { color: #CBD5E1; } /* ============================== 12. v3.18.6: a cleaner, larger workshop hub; stage dots follow the neon edge ============================== */ /* bigger line icons and titles on every hub card (the descriptive sub-lines were removed from the markup); a zero badge is never shown (js/app/shell.js toggles .hidden) */ :root:root #adminApp #tab-home .tone-icon, :root:root #adminApp #tab-home .tone-icon .dp-icon { width: 54px; height: 54px; } :root:root #adminApp #tab-home#tab-home > button[data-module-id="store"] .tone-icon, :root:root #adminApp #tab-home#tab-home > button[data-module-id="store"] .tone-icon .dp-icon { width: 58px; height: 58px; } :root:root #adminApp #tab-home > button[data-module-id]:is([data-module-id="closing"], [data-module-id="store"], [data-module-id="inventory"], [data-module-id="records"], [data-module-id="bookings"], [data-module-id="messages"], [data-module-id="teardown"]) .tone-icon { width: 54px; height: 54px; } :root:root #adminApp #tab-home .tone-title, :root:root #adminApp #tab-home > button[data-module-id] .tone-title, :root:root #adminApp #tab-home > [data-module-id="ledger"] .tone-title { font-size: 17px; font-weight: 800; line-height: 1.25; } :root:root #adminApp #tab-home > [data-module-id="active"] .tone-title, :root:root #adminApp #tab-home [data-module-id="intakeHandover"] .tone-title { font-size: 18px; font-weight: 800; } :root:root #adminApp #tab-home .dp-hero.hidden, :root:root #adminApp #tab-home .dp-tag.hidden, :root:root #adminApp #tab-home .tone-count.hidden { display: none !important; } /* the ledger tile's badge: pending expenses + losses of the active mode, in the tile's own colour, on the start side of the icon row */ :root:root #adminApp #tab-home > [data-module-id="ledger"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "icon badge" "text text"; align-items: start; row-gap: 4px; } :root:root #adminApp #tab-home > [data-module-id="ledger"] .tone-icon { grid-area: icon; justify-self: start; } :root:root #adminApp #tab-home > [data-module-id="ledger"] .tone-title { grid-area: text; align-self: end; } :root:root #adminApp #tab-home .dp-hero-ledger { grid-area: badge; justify-self: end; align-self: start; font-size: 17px; color: rgb(var(--tone)); text-shadow: 0 0 10px rgba(var(--tone), .3); } /* stage dots (status menu rows + the card's stage button) = the four neon groups of the ticket edge; the colour comes from DPP.statusNorm.getStatusTheme (data-tone), v3.18.7. Both roots are listed: the card button sits under #adminApp (an id outweighs the body rule), the menu is appended to body. */ :root:root #adminApp .tk-stdot, :root:root body[data-tab] .tk-stdot { background: rgb(34, 211, 238); } :root:root #adminApp .tk-stdot[data-tone="cyan"], :root:root body[data-tab] .tk-stdot[data-tone="cyan"] { background: rgb(34, 211, 238); } :root:root #adminApp .tk-stdot[data-tone="amber"], :root:root body[data-tab] .tk-stdot[data-tone="amber"] { background: rgb(251, 176, 64); } :root:root #adminApp .tk-stdot[data-tone="emerald"], :root:root body[data-tab] .tk-stdot[data-tone="emerald"] { background: rgb(52, 245, 160); } :root:root #adminApp .tk-stdot[data-tone="crimson"], :root:root body[data-tab] .tk-stdot[data-tone="crimson"] { background: rgb(226, 96, 118); } /* the customer's tracking receipt: the active stage icon + its pulse take the stage colour (data-tone from js/modules/tracker-timeline.js) */ .trk-pulse[data-tone="amber"] { --pulse: 251, 176, 64; border-color: #FBB040 !important; color: #FFF3DC !important; background-color: rgba(251, 176, 64, .22) !important; } .trk-pulse[data-tone="emerald"] { --pulse: 52, 245, 160; border-color: #34F5A0 !important; color: #E6FFF3 !important; background-color: rgba(52, 245, 160, .2) !important; } .trk-pulse[data-tone="crimson"] { --pulse: 226, 96, 118; border-color: #E26076 !important; color: #FFE4E9 !important; background-color: rgba(226, 96, 118, .2) !important; } /* ============================== 13. v3.18.8: the semantic colour system of the ticket cards ============================== * The four NEON colours (cyan / amber / emerald / crimson) belong to the maintenance STAGE only: the card edge, the stage button dot, the stage badge, the tracking timeline. * Everything else on a card speaks a quieter language, one family per meaning: * neutral slate fault badges, «قطعة», «سحابي», the receipt-condition badge, «تحرير» (a darker slate-blue), the technician / register badge * communication sky: the customer's number + the call and message buttons (one unit) * money soft gold: the total and the remaining; mint: the advance taken + the «+ تسبيق» button * danger muted crimson: «حذف», the loss button / flag, the parts cost * «تأكيد تسليم» keeps its own emerald (the final action). Presentation only: markup, handlers and data are untouched. */ :root { --sl-bg: rgba(148, 163, 184, .10); --sl-bd: rgba(148, 163, 184, .28); --sl-tx: #CBD5E1; --cm-bg: rgba(56, 189, 248, .10); --cm-bd: rgba(56, 189, 248, .34); --cm-tx: #7DD3FC; --mn-bg: rgba(94, 214, 176, .11); --mn-bd: rgba(94, 214, 176, .36); --mn-tx: #8FE3C6; --gd-tx: #E6D3A3; --dg-bg: rgba(190, 18, 60, .18); --dg-bd: rgba(225, 29, 72, .5); --dg-tx: #FDA4AF; } :root:root .act-edit { background: rgba(71, 85, 105, .38) !important; border: 1px solid rgba(148, 163, 184, .38) !important; color: #E2E8F0 !important; } /* action bar: neutral by default; the advance button is mint, delete is crimson */ :root:root #activePhonesContainer .tk .tk-act { background: var(--sl-bg); border-color: var(--sl-bd); color: var(--sl-tx); } :root:root #activePhonesContainer .tk .tk-act.act-adv { background: var(--mn-bg); border-color: var(--mn-bd); color: var(--mn-tx); } :root:root #activePhonesContainer .tk .tk-act.act-del, :root:root #activePhonesContainer .tk .tk-act.tk-del { background: var(--dg-bg) !important; border-color: var(--dg-bd) !important; color: var(--dg-tx) !important; } :root:root #activePhonesContainer .tk .tk-prebadge, :root:root #activePhonesContainer .tk .tk-prebadge.is-warn { background: var(--sl-bg); border-color: var(--sl-bd); color: var(--sl-tx); } :root:root #activePhonesContainer .tk .tk-prebadge i { color: #94A3B8; } :root:root #activePhonesContainer .tk .tk-prebadge.is-warn i { color: #D9B96A; } /* fault badges: one neutral family */ :root:root #activePhonesContainer .tk .tk-fault, :root:root #activePhonesContainer .tk .tk-fault-screen, :root:root #activePhonesContainer .tk .tk-fault-soft, :root:root #activePhonesContainer .tk .tk-fault-power, :root:root #activePhonesContainer .tk .tk-fault-water, :root:root #activePhonesContainer .tk .tk-fault-other, :root:root #activePhonesContainer .tk .tk-fault-more { background: var(--sl-bg); border-color: var(--sl-bd); color: var(--sl-tx); } :root:root #activePhonesContainer .tk .tk-fault i, :root:root #activePhonesContainer .tk .tk-fault svg { color: #94A3B8; } /* the customer's number + call + message = ONE communication family (sky) */ :root:root #activePhonesContainer .tk .tk-phone { color: var(--cm-tx); } :root:root #activePhonesContainer .tk .tk-call, :root:root #activePhonesContainer .tk .tk-mini-msg { background: var(--cm-bg); border-color: var(--cm-bd); color: var(--cm-tx); } :root:root #activePhonesContainer .tk .tk-mini-loss { background: var(--dg-bg); border-color: var(--dg-bd); color: var(--dg-tx); } /* money: one gold for the total and the remaining; mint for what was already collected */ :root:root #activePhonesContainer .tk .tk-total, :root:root #activePhonesContainer .tk .tk-rem { color: var(--gd-tx); } :root:root #activePhonesContainer .tk .tk-cost.has-cost { color: var(--sb-tx); } :root:root #activePhonesContainer .tk .tk-lossflag { color: var(--dg-tx); background: var(--dg-bg); border-color: var(--dg-bd); } :root:root #activePhonesContainer .tk .tk-advflag, :root:root #activePhonesContainer .tk .tk-dep, :root:root #activePhonesContainer .tk .tk-dep.is-done { background: var(--mn-bg); border-color: var(--mn-bd); color: var(--mn-tx); } :root:root #activePhonesContainer .tk .tk-dep b { color: #E9FFF6; } /* ONE badge for the technician + register: neutral, the name in white */ #activePhonesContainer .tk-who, .tk-who { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--sl-bd); background: var(--sl-bg); font-size: 11.5px; line-height: 1.25; white-space: nowrap; } .tk-who b { font-weight: 900; color: #F1F5F9; } .tk-who i { font-style: normal; color: #64748B; } .tk-who span { font-weight: 800; color: #94A3B8; } /* the stage button: its border takes the stage colour (the text is no longer repeated in a header badge) */ :root:root #activePhonesContainer .tk-stbtn[data-tone="cyan"] { border-color: rgba(34, 211, 238, .38); } :root:root #activePhonesContainer .tk-stbtn[data-tone="amber"] { border-color: rgba(251, 176, 64, .45); } :root:root #activePhonesContainer .tk-stbtn[data-tone="emerald"] { border-color: rgba(52, 245, 160, .45); } :root:root #activePhonesContainer .tk-stbtn[data-tone="crimson"] { border-color: rgba(226, 96, 118, .45); } :root:root #activePhonesContainer .tk-stbtn { color: #F1F5F9; } /* the delivery screen (the hand-over list) speaks the same language */ :root:root [data-card="delivery"] .hv-phone { color: var(--cm-tx); } :root:root [data-card="delivery"] .hv-money { color: var(--gd-tx); } :root:root [data-card="delivery"] .hv-adv { color: var(--mn-tx); } :root:root [data-card="delivery"] .hv-loss { background: var(--dg-bg); border: 1px solid var(--dg-bd); color: var(--dg-tx); } :root:root [data-card="delivery"] .hv-loss i { color: var(--dg-tx); } /* the customer's tracking receipt (v3.18.8): the same quiet money language as the workshop cards - gold for the price and the remainder, mint for the advance already paid */ :root:root #customerTrackingModal .cust-money, :root:root #customerTrackingModal .cust-money b { color: var(--gd-tx); } :root:root #customerTrackingModal .cust-adv, :root:root #customerTrackingModal .cust-adv b { color: var(--mn-tx); } /* ============================== 14. v3.18.9: calmer ticket cards (white id, one steel button family, on-demand log) + a compact watchdog chip ============================== */ :root:root #activePhonesContainer .tk-id { color: #FFFFFF; } /* the four action buttons: ONE dark-slate family, white bold labels that fill the button; each keeps only its icon colour (cloud = sky, coins = mint) */ :root:root #activePhonesContainer .tk .tk-act, :root:root #activePhonesContainer .tk .tk-act.act-adv, :root:root #activePhonesContainer .tk .tk-act.act-part, :root:root #activePhonesContainer .tk .tk-act.act-cloud { background: rgba(51, 65, 85, .62); border-color: rgba(148, 163, 184, .34); color: #FFFFFF; height: 36px; font-size: 12.5px; font-weight: 900; gap: 5px; padding: 0 3px; } :root:root #activePhonesContainer .tk .tk-act.act-edit { background: rgba(51, 65, 85, .62) !important; border: 1px solid rgba(148, 163, 184, .34) !important; color: #FFFFFF !important; height: 36px; font-size: 13.5px; } :root:root #activePhonesContainer .tk .tk-act.act-del, :root:root #activePhonesContainer .tk .tk-act.tk-del { height: 36px; font-size: 12.5px; font-weight: 900; } :root:root #activePhonesContainer .tk .tk-act i { font-size: 13px; } :root:root #activePhonesContainer .tk .tk-act.act-cloud i { color: #38BDF8; font-size: 15px; } :root:root #activePhonesContainer .tk .tk-act.act-adv { font-size: 13.5px; } :root:root #activePhonesContainer .tk .tk-act.act-adv i { color: #5EE0B0; font-size: 16px; } :root:root #activePhonesContainer .tk .tk-act.act-edit i { font-size: 16px; color: #FFFFFF; } :root:root #activePhonesContainer .tk .tk-act.act-part i { color: #CBD5E1; } /* the receipt-condition badge: the whole text, never cut (adaptive font, wraps to two lines on a narrow phone) */ :root:root #activePhonesContainer .tk .tk-prebadge { height: auto; min-height: 36px; padding: 3px 7px; white-space: normal; overflow: visible; font-size: clamp(9px, 2.55vw, 10.5px); line-height: 1.2; text-align: center; } :root:root #activePhonesContainer .tk .tk-prebadge > span { overflow: visible; text-overflow: clip; text-wrap: balance; } /* header: the technician + register badge adapts to a long mode name; the receive time is faint beside it */ :root:root .tk-who { max-width: 100%; } .tk-who-ic { font-size: 10px; color: #94A3B8; } :root:root #activePhonesContainer .tk-who[data-len="m"], :root:root .tk-who[data-len="m"] { font-size: clamp(10px, 2.8vw, 11px); } :root:root #activePhonesContainer .tk-who[data-len="l"], :root:root .tk-who[data-len="l"] { font-size: clamp(8.5px, 2.35vw, 10px); white-space: normal; line-height: 1.15; } .tk-rtime { flex: 0 0 auto; font: 600 10px/1.2 ui-monospace, monospace; color: #94A3B8; opacity: .85; white-space: nowrap; } /* the on-demand log button */ :root:root #activePhonesContainer .tk .tk-logbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, .3); background: rgba(51, 65, 85, .5); color: #FFFFFF; font-size: 12.5px; font-weight: 900; } :root:root #activePhonesContainer .tk .tk-logbtn i { color: #7DD3FC; font-size: 14px; } :root:root #activePhonesContainer .tk .tk-logbtn b { color: #CBD5E1; font-family: ui-monospace, monospace; } /* v3.18.10: the watchdog is a full-width hub card with the SAME size as «حالة صيانة هاتف» (the generic hub-card rules apply); only its descriptive line stays out (it is in the tooltip and the digest sheet) */ :root:root #adminApp #tab-home > #homeWatchdogStrip #homeWatchdogText { display: none; } /* ===== 15. v3.18.10 ===== */ :root { --sb-tx: #9DB4D6; } /* the cost of a part: a neutral technical slate blue - never red (a cost is not a loss) */ /* advance dialog: the confirm button is mint with bright white text, large and readable */ :root:root .adv-confirm { background: #0E9F76 !important; color: #FFFFFF !important; border: 1px solid rgba(110, 231, 183, .55) !important; min-height: 46px; font-size: 14.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } :root:root .adv-confirm:disabled { opacity: .65; color: #FFFFFF !important; } :root:root #advanceTrancheModal [data-adv-line] { font-size: 11.5px; } /* the card loss drawer: readable fields (it opens only from the «تسجيل خسارة» button) */ :root:root #activePhonesContainer .tk .tk-loss input { background: rgba(15, 23, 42, .92) !important; color: #F8FAFC !important; border: 1px solid rgba(251, 113, 133, .45) !important; font-weight: 800; font-size: 13px; } :root:root #activePhonesContainer .tk .tk-loss input::placeholder { color: #A8B3C7; opacity: 1; } :root:root #activePhonesContainer .tk .tk-loss button { background: #BE123C !important; color: #FFFFFF !important; border: 1px solid rgba(251, 113, 133, .6) !important; min-height: 38px; font-size: 12.5px; font-weight: 900; } /* the register glyph (fa-users shared / fa-user solo) and the delivery header stack */ :root:root .tk-who-ic { color: #7DD3FC; font-size: 11px; } :root:root [data-card="delivery"] .hv-who { min-width: 0; } :root:root [data-card="delivery"] .hv-who .tk-rtime { font-size: 10.5px; } /* «تحرير»: calm glowing metallic silver, no orange neon */ :root:root [data-card="delivery"] .act-edit { background: rgba(203, 213, 225, .16) !important; border: 1px solid rgba(226, 232, 240, .55) !important; color: #F1F5F9 !important; box-shadow: 0 0 12px rgba(203, 213, 225, .3), inset 0 1px 0 rgba(255, 255, 255, .28) !important; text-shadow: none !important; } :root:root [data-card="delivery"] .act-edit i { color: #E2E8F0 !important; } /* the watchdog card: exactly the hub-card size of «حالة صيانة هاتف» */ :root:root #adminApp #tab-home > #homeWatchdogStrip { padding: 8px 14px; min-height: 64px; } :root:root #adminApp #tab-home > #homeWatchdogStrip .tone-icon { width: 44px; height: 44px; font-size: 26px; border-radius: 0; } :root:root #adminApp #tab-home > #homeWatchdogStrip .tone-title { font-size: 16px; font-weight: 700; } :root:root #adminApp #tab-home > #homeWatchdogStrip #homeWatchdogCount { font-size: 20px; font-weight: 800; line-height: 1.1; padding: 4px 12px; border-radius: 12px; } /* ===== 16. v3.19.0 ===== */ /* the fault chips start from ONE anchor: the model on its own line, the chips below it, flush with the start edge, wrapping in order */ :root:root #activePhonesContainer .tk .tk-dev { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } :root:root #activePhonesContainer .tk .tk-faults { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 6px; min-width: 0; max-width: 100%; } /* the watchdog line: one fixed row above the card header, full width (never beside the ticket number) */ :root:root #activePhonesContainer .tk .tk-wdrow { display: flex; width: 100%; } :root:root #activePhonesContainer .tk .tk-wdrow > span { flex: 1 1 auto; text-align: center; font-size: 11.5px; padding-block: 3px; } /* «قطعة»: a vivid cyan chip glyph on the neutral slate button; «تحرير»: polished silver / chrome */ :root:root #activePhonesContainer .tk .tk-act.act-part i { color: #00E5FF; } :root:root #activePhonesContainer .tk .tk-act.act-edit { background: rgba(203, 213, 225, .15) !important; border: 1px solid rgba(226, 232, 240, .55) !important; color: #F8FAFC !important; box-shadow: 0 0 10px rgba(203, 213, 225, .26), inset 0 1px 0 rgba(255, 255, 255, .22) !important; } :root:root #activePhonesContainer .tk .tk-act.act-edit i { color: #E2E8F0; } /* the identity badge in portrait: crown + name | mode glyph + mode name; a long mode name shrinks */ :root:root #currentModeLabel { font-size: clamp(9.5px, 2.7vw, 11px); } :root:root #currentModeLabel[data-len="m"] { font-size: clamp(8.5px, 2.35vw, 10px); } :root:root #currentModeLabel[data-len="l"] { font-size: clamp(7.5px, 2vw, 9px); line-height: 1.1; white-space: normal; max-height: 2.3em; } :root:root #headerModeIcon { display: inline-flex; align-items: center; } /* ===== 17. v3.19.1 ===== */ /* one fixed colour per register glyph: shared = sky handshake, Oussama alone = violet screwdriver-wrench, Houcine alone = fuchsia microchip */ :root { --mi-shared: #7DD3FC; --mi-oussama: #A78BFA; --mi-houcine: #E879F9; --tn-cyan: #67E8F9; --tn-amber: #FDBA5A; --tn-emerald: #4DF5A8; --tn-crimson: #F58A9B; } :root:root .mi-shared { color: var(--mi-shared); } :root:root .mi-oussama { color: var(--mi-oussama); } :root:root .mi-houcine { color: var(--mi-houcine); } :root:root .tk-who-ic.mi-shared { color: var(--mi-shared); } :root:root .tk-who-ic.mi-oussama { color: var(--mi-oussama); } :root:root .tk-who-ic.mi-houcine { color: var(--mi-houcine); } /* the four stage tones (the shared colour engine's cyan / amber / emerald / coral): code colour + badge outline follow the stage */ :root:root [data-tone="cyan"] { --tn: 34, 211, 238; --tn-tx: var(--tn-cyan); } :root:root [data-tone="amber"] { --tn: 251, 176, 64; --tn-tx: var(--tn-amber); } :root:root [data-tone="emerald"] { --tn: 52, 245, 160; --tn-tx: var(--tn-emerald); } :root:root [data-tone="crimson"] { --tn: 226, 96, 118; --tn-tx: var(--tn-crimson); } :root:root #activePhonesContainer .tk .tk-id, :root:root [data-card="delivery"] .hv-id, :root:root #customerTrackingModal [data-trk-code] { color: var(--tn-tx, var(--tn-cyan)); } :root:root #customerTrackingModal [data-trk-code] i { color: var(--tn-tx, var(--tn-cyan)); } :root:root #activePhonesContainer .tk[data-tone] .tk-who, :root:root [data-card="delivery"][data-tone] .tk-who { border-color: rgba(var(--tn), .6); } /* clipping (Safari / WebKit): Arabic hamza / alef marks need line room - no 1.0 line-heights, no hidden overflow on the id / owner / stamp chips */ :root:root #activePhonesContainer .tk .tk-id, :root:root [data-card="delivery"] .hv-id { line-height: 1.45; padding-block: 2px; overflow: visible; font-size: 13.5px; } :root:root #activePhonesContainer .tk .tk-top { min-height: 26px; align-items: center; row-gap: 5px; } :root:root .tk-who { padding: 3px 9px 4px; line-height: 1.55; overflow: visible; min-height: 26px; } :root:root .tk-who[data-len="l"] { line-height: 1.35; } :root:root .tk-who b, :root:root .tk-who span { line-height: 1.55; display: inline-block; padding-top: 1px; } :root:root .tk-rtime { line-height: 1.5; padding-block: 2px; } :root:root .tk-rtime .tk-clock { font-size: 9.5px; margin-inline-end: 4px; color: #94A3B8; } /* the delivery card's one-tap call button (tel:) beside the customer's number */ :root:root [data-card="delivery"] .hv-call { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--cm-bg); border: 1px solid var(--cm-bd); color: var(--cm-tx); font-size: 14px; flex: 0 0 auto; } :root:root [data-card="delivery"] .hv-call:active { transform: scale(.94); } /* stage picker = bottom sheet sized to its titles: light backdrop (the card stays readable behind), no footer, coloured rows grouped cyan / amber / emerald / coral */ :root:root .dpp-sheet-backdrop[data-kind="stage"] { background: rgba(2, 6, 23, .3); } :root:root .dpp-sheet[data-kind="stage"] .dpp-sheet-foot { display: none; } :root:root .dpp-sheet[data-kind="stage"] .dpp-sheet-title { font: 800 12px/1.3 ui-monospace, monospace; color: #CBD5E1; direction: ltr; } :root:root .dpp-sheet[data-kind="stage"] .dpp-sheet-body { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } :root:root .dpp-stopt { min-height: 50px; font-size: 14.5px; font-weight: 800; color: #F8FAFC; line-height: 1.5; } :root:root .dpp-stopt small:empty { display: none; } :root:root .dpp-stopt[data-tone="cyan"] { border-color: rgba(34, 211, 238, .35); } :root:root .dpp-stopt[data-tone="amber"] { border-color: rgba(251, 176, 64, .4); } :root:root .dpp-stopt[data-tone="emerald"] { border-color: rgba(52, 245, 160, .4); } :root:root .dpp-stopt[data-tone="crimson"] { border-color: rgba(226, 96, 118, .42); } :root:root .dpp-stopt.is-here[data-tone="cyan"] { background: rgba(34, 211, 238, .16); border-color: rgba(34, 211, 238, .7); } :root:root .dpp-stopt.is-here[data-tone="amber"] { background: rgba(251, 176, 64, .16); border-color: rgba(251, 176, 64, .75); } :root:root .dpp-stopt.is-here[data-tone="emerald"] { background: rgba(52, 245, 160, .15); border-color: rgba(52, 245, 160, .75); } :root:root .dpp-stopt.is-here[data-tone="crimson"] { background: rgba(226, 96, 118, .16); border-color: rgba(226, 96, 118, .75); } :root:root #activePhonesContainer .tk .tk-wdrow > button, :root:root #activePhonesContainer .tk .tk-wdrow > span { flex: 1 1 auto; text-align: center; font-size: 11.5px; padding-block: 4px; min-height: 30px; cursor: pointer; } /* ===================================================================================================================================================== v3.19.3 */ /* closing screen (WebKit): the delivered-devices list is no longer a nested scroller (iOS Safari rubber-banded it back to the top the moment the finger lifted); the page itself scrolls smoothly and keeps a safe bottom gap so the last devices clear the action bar and the home indicator */ :root #adminApp #tab-closing { -webkit-overflow-scrolling: touch; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); } :root #adminApp #fcDeliveredPhonesContainer { max-height: none; overflow: visible; overscroll-behavior: auto; } :root .dpp-sheet-body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); } /* micro pills: a