/* * Doctor Phone Pro - the repair ticket card rebuilt (v3.20.19) * * Presentation only; loaded LAST (after theme-dp.css). Scoped to the repairs list (#activePhonesContainer), the stage sheet (.dpp-stopt) and the stage pills (#activeStageBar). * Every handler, id and data attribute of the card is the one the repairs script already renders: this file only re-skins it. * * The four mental state colours (never mixed, one per stage family) drive the card's thin edge, the stage button, the stepper, the stage pills and the stage sheet: * cyan = قيد الفحص والتشخيص + جاري الصيانة (data-tone="cyan") * amber = في انتظار قطع الغيار + اكتشاف عطل إضافي (data-tone="amber") * emerald = تم الإصلاح - جاهز للاستلام (data-tone="emerald") * crimson = غير قابل للإصلاح + تم إلغاء الصيانة (data-tone="crimson", calm rose) * The tone variable --tn ("r, g, b") comes from DPP.statusNorm.getStatusTheme through the data-tone attribute (css/theme-dp.css). * Targets are >= 44 px, the customer's name wraps in full, nothing scrolls sideways, and the list ends with 128 px of air for the floating back capsule. */ /* ---------- 0. the list: bottom air for the floating «رجوع» capsule, no sideways scroll ---------- */ :root:root #adminApp #tab-active { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 128px); max-width: 100%; } :root:root #activePhonesContainer { max-width: 100%; } /* ---------- 1. the card: dark navy, one thin coloured edge, no neon fill; compact (v3.20.20: ~40 % shorter than v3.20.19) ---------- */ :root:root #activePhonesContainer > .tk, :root:root #activePhonesContainer > .tk[data-tone]:not([data-neutral]) { --edge: var(--tn, 34, 211, 238); gap: 5px; padding: 8px 9px; border-radius: 12px; max-width: 100%; overflow-x: clip; background: #0b1324 !important; border: 1px solid #1e293b !important; border-inline-start: 3px solid rgb(var(--tn, 34, 211, 238)) !important; box-shadow: none !important; } :root:root #activePhonesContainer .tk .tk-top { gap: 4px 6px; min-height: 24px; } :root:root #activePhonesContainer .tk .tk-id { font-size: 13.5px; letter-spacing: .03em; padding-block: 0; } :root:root #activePhonesContainer .tk .tk-who { min-height: 24px; padding: 1px 8px 2px; } :root:root #activePhonesContainer .tk .tk-wdrow > button, :root:root #activePhonesContainer .tk .tk-wdrow > span { min-height: 26px; padding-block: 2px; } /* Targets: the visible control is compact (36-40 px); an invisible ::after widens every hit area to >= 44 px, so a thumb still lands first time */ :root:root #activePhonesContainer .tk :is(.tk-act, .tk-mini, .tk-stbtn, .tk-cta, .tk-logbtn) { position: relative; } :root:root #activePhonesContainer .tk :is(.tk-act, .tk-mini, .tk-stbtn, .tk-cta, .tk-logbtn)::after { content: ""; position: absolute; inset: -6px -2px !important; } /* ---------- 2. the action bar: the five known buttons, one 38 px row, icon over a tiny label ---------- */ :root:root #activePhonesContainer .tk .tk-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } :root:root #activePhonesContainer .tk .tk-act { flex-direction: column; gap: 1px; height: 38px !important; min-height: 36px !important; padding: 2px 1px; font-size: 10px; line-height: 1.15; border-radius: 9px; } :root:root #activePhonesContainer .tk .tk-act i { font-size: 12.5px; } :root:root #activePhonesContainer .tk .tk-act span { white-space: nowrap; } /* the receipt-condition chip lives on the device line, next to the faults */ :root:root #activePhonesContainer .tk .tk-prebadge { display: inline-flex; align-items: center; max-width: 100%; height: 22px; min-height: 0; padding: 0 8px; gap: 4px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.4; white-space: nowrap; } :root:root #activePhonesContainer .tk .tk-prebadge i { font-size: 9.5px; } :root:root #activePhonesContainer .tk .tk-prebadge > span { overflow: hidden; text-overflow: ellipsis; } /* ---------- 3. the stepper: a slim strip that wears the stage colour; the current step pops in once, the finished line fills in ---------- */ :root:root #activePhonesContainer .tk .tk-step { padding: 0; } :root:root #activePhonesContainer .tk .dpp-stp { --tn-s: var(--tn, 34, 211, 238); } :root:root #activePhonesContainer .tk .dpp-stp-dot { width: 17px; height: 17px; font-size: 8.5px; border-width: 1.5px; transition: transform .18s ease, box-shadow .18s ease; } :root:root #activePhonesContainer .tk .dpp-stp-col { cursor: default; } :root:root #activePhonesContainer .tk .dpp-stp-bar { top: 7.5px; height: 2px; border-radius: 2px; background: rgba(148, 163, 184, .22); transform-origin: right center; } :root:root #activePhonesContainer .tk .dpp-stp-bar:not([data-state="todo"]) { background: rgba(var(--tn-s), .75); } :root:root #activePhonesContainer .tk .dpp-stp-col[data-state="done"] .dpp-stp-dot { background: rgb(var(--tn-s)); border-color: transparent; color: #020617; } :root:root #activePhonesContainer .tk .dpp-stp-col[data-state="active"] .dpp-stp-dot { background: #0b1324; border-color: rgb(var(--tn-s)); color: rgb(var(--tn-s)); box-shadow: 0 0 0 3px rgba(var(--tn-s), .16); } :root:root #activePhonesContainer .tk .dpp-stp-col[data-state="todo"] .dpp-stp-dot { background: #0f172a; border-color: rgba(148, 163, 184, .28); color: #64748b; } :root:root #activePhonesContainer .tk .dpp-stp-col > div:last-child { margin-top: 1px; font-size: 9.5px; line-height: 1.15; white-space: nowrap; overflow: visible; text-overflow: clip; } :root:root #activePhonesContainer .tk .dpp-stp-col[data-state="active"] > div:last-child { color: rgb(var(--tn-s)); font-weight: 900; } :root:root #activePhonesContainer .tk .dpp-stp-col[data-state="done"] > div:last-child { color: rgba(var(--tn-s), .8); } :root:root #activePhonesContainer .tk .tk-step:active .dpp-stp-col[data-state="active"] .dpp-stp-dot { transform: scale(1.12); } @keyframes dppStpPop { from { transform: scale(.7); opacity: .3; } to { transform: scale(1); opacity: 1; } } @keyframes dppStpFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: no-preference) { :root:root #activePhonesContainer .tk .dpp-stp-col[data-state="active"] .dpp-stp-dot { animation: dppStpPop .32s cubic-bezier(.2, .9, .3, 1.3) both; } :root:root #activePhonesContainer .tk .dpp-stp-bar:not([data-state="todo"]) { animation: dppStpFill .35s ease-out both; } } /* ---------- 4. the customer block: small photo, tight lines (name + number share a line when they fit, wrap in full when they don't), one slim money line ---------- */ :root:root #activePhonesContainer .tk .tk-row { flex-wrap: wrap; align-items: flex-start; gap: 3px 8px; padding: 6px 8px; background: rgba(15, 23, 42, .6); border: 1px solid #1e293b; border-radius: 10px; } :root:root #activePhonesContainer .tk .tk-thumb { width: 38px; height: 38px; flex: 0 0 38px; padding: 2px; border-radius: 8px; } :root:root #activePhonesContainer .tk .tk-thumb-ph { font-size: 16px; } :root:root #activePhonesContainer .tk .tk-info { flex: 1 1 0; min-width: 0; gap: 1px; } :root:root #activePhonesContainer .tk .tk-cust { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 10px; } :root:root #activePhonesContainer .tk .tk-name { display: flex; align-items: baseline; gap: 5px; max-width: 100%; font-size: 15px; line-height: 1.25; } :root:root #activePhonesContainer .tk .tk-nm { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } :root:root #activePhonesContainer .tk .tk-name i { margin-top: 0; font-size: 9px; } :root:root #activePhonesContainer .tk .tk-phone { font-size: 12.5px; line-height: 1.25; padding-inline-start: 0; } :root:root #activePhonesContainer .tk .tk-dev { flex-direction: row; flex-wrap: wrap; gap: 2px 6px; align-items: center; } :root:root #activePhonesContainer .tk .tk-faults { display: inline-flex; gap: 4px; } :root:root #activePhonesContainer .tk .tk-mdl { font-size: 13px; line-height: 1.25; } :root:root #activePhonesContainer .tk .tk-fault { padding: 0 8px; font-size: 11px; line-height: 1.55; } :root:root #activePhonesContainer .tk .tk-money { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 0; padding-top: 3px; border-top: 1px dashed rgba(148, 163, 184, .16); font-family: Cairo, system-ui, sans-serif; text-align: start; line-height: 1.2; } :root:root #activePhonesContainer .tk .tk-m1, :root:root #activePhonesContainer .tk .tk-m2 { display: inline-flex; align-items: baseline; gap: 3px; padding-inline: 8px; line-height: 1.2; } :root:root #activePhonesContainer .tk .tk-m1 { padding-inline-start: 0; } :root:root #activePhonesContainer .tk .tk-m2 { border-inline-start: 1px solid rgba(148, 163, 184, .25); } :root:root #activePhonesContainer .tk .tk-m1 em::after, :root:root #activePhonesContainer .tk .tk-m2 em::after { content: ":"; } :root:root #activePhonesContainer .tk .tk-m1 em, :root:root #activePhonesContainer .tk .tk-m2 em { font-size: 11px; } :root:root #activePhonesContainer .tk .tk-m1 b, :root:root #activePhonesContainer .tk .tk-m2 b { font-size: 14.5px; font-family: ui-monospace, monospace; } :root:root #activePhonesContainer .tk .tk-cur { text-decoration: none; font-style: normal; font-size: 10px; font-weight: 800; color: #94a3b8; margin-inline-start: 1px; } :root:root #activePhonesContainer .tk .tk-cost { display: inline-flex; align-items: baseline; gap: 3px; padding-inline-start: 8px; border-inline-start: 1px solid rgba(148, 163, 184, .25); font-size: 11.5px; font-family: ui-monospace, monospace; } :root:root #activePhonesContainer .tk .tk-cost::before { content: "تكلفة:"; font-family: Cairo, system-ui, sans-serif; font-size: 10.5px; font-weight: 700; color: #94a3b8; } :root:root #activePhonesContainer .tk .tk-lossflag, :root:root #activePhonesContainer .tk .tk-advflag { flex: 1 1 100%; width: max-content; max-width: 100%; margin-inline-start: 0; padding: 0 8px; border-radius: 999px; font-size: 10.5px; line-height: 1.5; } :root:root #activePhonesContainer .tk .tk-dep { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 3px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 800; line-height: 1.3; } :root:root #activePhonesContainer .tk .tk-dep .tk-cur { color: inherit; opacity: .8; } :root:root #activePhonesContainer .tk .tk-dep-go { min-height: 32px; } /* ---------- 5. the control row: ONE line - the stage button (wears the stage colour) + call / WhatsApp / loss as icon buttons ---------- */ :root:root #activePhonesContainer .tk .tk-ctl { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 5px; } :root:root #activePhonesContainer .tk .tk-stbtn { flex: 1 1 auto; min-width: 0; min-height: 38px !important; height: 38px !important; padding: 0 10px; gap: 7px; border-radius: 10px; font-size: 13px; font-weight: 900; line-height: 1.2; color: rgb(var(--tn)); background: rgba(var(--tn), .1); border: 1px solid rgba(var(--tn), .45); } :root:root #activePhonesContainer .tk .tk-stbtn .tk-stname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root:root #activePhonesContainer .tk .tk-stbtn .tk-stdot { display: none; } :root:root #activePhonesContainer .tk .tk-stbtn .tk-sticon { font-size: 13px; opacity: 1; } :root:root #activePhonesContainer .tk .tk-stbtn .fa-chevron-down { font-size: 10px; opacity: .7; } :root:root #activePhonesContainer .tk .tk-stbtn:active { background: rgba(var(--tn), .2); } :root:root #activePhonesContainer .tk .tk-mini { flex: 0 0 40px; width: 40px; min-width: 0; height: 38px !important; min-height: 36px !important; gap: 0; padding: 0; border-radius: 10px; } :root:root #activePhonesContainer .tk .tk-mini span { display: none; } :root:root #activePhonesContainer .tk .tk-mini i { font-size: 15px; } :root:root #activePhonesContainer .tk .tk-loss input { min-height: 44px !important; font-size: 14px; } :root:root #activePhonesContainer .tk .tk-loss button { min-height: 48px !important; border-radius: 12px; font-size: 13px; } /* ---------- 6. the delivery button and the log: slim (neutral slate for «بدون قبض»: amber belongs to the waiting stages) ---------- */ :root:root #activePhonesContainer .tk .tk-cta { height: 40px !important; min-height: 38px !important; border-radius: 10px; font-size: 13px; } :root:root #activePhonesContainer .tk .tk-cta-go { background: #059669; } :root:root #activePhonesContainer .tk .tk-cta-alt { background: #111c33; color: #cbd5e1; border: 1px solid #334155; font-weight: 800; } :root:root #activePhonesContainer .tk .tk-logbtn { min-height: 36px !important; height: 36px !important; padding-block: 0; font-size: 12px; border-radius: 9px; } /* ---------- 7. the stage pills above the list: the same four colours ---------- */ :root:root #activeStageBar .dpp-pill[data-f="diag"], :root:root #activeStageBar .dpp-pill[data-f="repair"] { --tn: 34, 211, 238; } :root:root #activeStageBar .dpp-pill[data-f="parts"], :root:root #activeStageBar .dpp-pill[data-f="extra"] { --tn: 251, 176, 64; } :root:root #activeStageBar .dpp-pill[data-f="ready"] { --tn: 52, 245, 160; } :root:root #activeStageBar .dpp-pill[data-f="declined"], :root:root #activeStageBar .dpp-pill[data-f="cancelled"] { --tn: 226, 96, 118; } :root:root #activeStageBar .dpp-pill[data-f]:not([data-f="all"]) { min-height: 36px; color: rgb(var(--tn)); background: rgba(var(--tn), .08); border-color: rgba(var(--tn), .4); } :root:root #activeStageBar .dpp-pill[data-f]:not([data-f="all"]).is-on, :root:root #activeStageBar .dpp-pill[data-f]:not([data-f="all"]).on { color: #fff; background: rgba(var(--tn), .26); border-color: rgb(var(--tn)); box-shadow: none; } /* ---------- 8. the stage sheet: seven rows in the four families, a thin coloured edge, the current stage ticked ---------- */ :root:root .dpp-stopt[data-tone], :root:root .dpp-stopt { position: relative; min-height: 54px; gap: 12px; padding-inline: 14px; border-radius: 12px; letter-spacing: 0; word-spacing: 0; font-size: 14.5px; color: #f1f5f9; background: rgba(var(--tn), .07); border: 1px solid rgba(var(--tn), .3); border-inline-start: 4px solid rgb(var(--tn)); box-shadow: none; } :root:root .dpp-stopt .tk-stdot { display: none; } :root:root .dpp-stopt .dpp-stopt-ic { flex: none; width: 22px; text-align: center; font-size: 16px; color: rgb(var(--tn)); } :root:root .dpp-stopt .dpp-stopt-n { flex: 1 1 auto; min-width: 0; text-align: start; } :root:root .dpp-stopt[data-nid="parts"], :root:root .dpp-stopt[data-nid="ready"], :root:root .dpp-stopt[data-nid="declined"] { margin-top: 12px; } :root:root .dpp-stopt.is-here[data-tone] { background: rgba(var(--tn), .2); border-color: rgb(var(--tn)); box-shadow: 0 0 0 1px rgba(var(--tn), .5); } :root:root .dpp-stopt.is-here::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; color: rgb(var(--tn)); } :root:root .dpp-stopt.is-confirm { background: rgba(251, 176, 64, .2); border-color: rgb(251, 176, 64); } /* ---------- 9. calm secondary actions: the loss button is a quiet rose outline (no glow); delete keeps its rose text ---------- */ :root:root #activePhonesContainer .tk .tk-mini-loss { box-shadow: none !important; background: rgba(226, 96, 118, .08) !important; border: 1px solid rgba(226, 96, 118, .35) !important; color: #f5a3b0 !important; } :root:root #activePhonesContainer .tk .tk-act, :root:root #activePhonesContainer .tk .tk-mini { box-shadow: none; } /* ===================================================================================================================================================== v3.20.21 - the delivery card, the after-receive sheet, the code-only screen, the photo viewer, the edit sheet ===================================================================================================================================================== */ /* ---------- 10. the delivery card («تسليم الهاتف للزبون»): the v3.20.20 geometry (~345 px), the four stage colours on the edge and the stage badge ---------- */ :root:root [data-card="delivery"].hv-card { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px; border-radius: 12px; max-width: 100%; overflow-x: clip; background: #0b1324 !important; border: 1px solid #1e293b !important; border-inline-start: 3px solid rgb(var(--tn, 34, 211, 238)) !important; box-shadow: none !important; } :root:root [data-card="delivery"] .hv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 24px; } :root:root [data-card="delivery"] .hv-id { font-size: 13.5px; line-height: 1.45; color: rgb(var(--tn, 34, 211, 238)); } :root:root [data-card="delivery"] .hv-stage { display: inline-flex; align-items: center; min-height: 24px; color: rgb(var(--tn)) !important; background: rgba(var(--tn), .1) !important; border-color: rgba(var(--tn), .45) !important; } :root:root [data-card="delivery"] .hv-who { margin-inline-start: auto; min-width: 0; } :root:root [data-card="delivery"] .hv-row { display: flex; align-items: flex-start; gap: 10px; padding: 2px 0; background: none !important; border: 0 !important; border-radius: 0; } /* v3.20.22: no frame inside the frame - the customer block flows in the card */ :root:root [data-card="delivery"] .hv-row .dpp-phone-thumb { width: 44px !important; height: auto; flex: 0 0 44px; padding: 2px; border-radius: 8px; cursor: zoom-in; } :root:root [data-card="delivery"] .hv-row .w-16 { width: 44px; } :root:root [data-card="delivery"] .hv-info { display: flex; flex-direction: column; gap: 1px; } :root:root [data-card="delivery"] .hv-name { font-size: 15.5px; font-weight: 900; line-height: 1.3; color: #f8fafc; overflow-wrap: anywhere; } :root:root [data-card="delivery"] .hv-namerow { gap: 1px; } /* the number and its two quick actions share ONE line: the number first, then small call / WhatsApp buttons (32 px visible, 44 px hit area through an invisible margin) */ :root:root [data-card="delivery"] .hv-phone-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; min-height: 32px; } :root:root [data-card="delivery"] .hv-phone { font-size: 13px; line-height: 1.3; } :root:root [data-card="delivery"] .hv-call, :root:root [data-card="delivery"] .hv-wa { position: relative; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; font-size: 14px; } :root:root [data-card="delivery"] .hv-call::after, :root:root [data-card="delivery"] .hv-wa::after { content: ""; position: absolute; inset: -6px; } :root:root [data-card="delivery"] .hv-dev { font-size: 12px; line-height: 1.35; } :root:root [data-card="delivery"] .hv-sep { color: #64748b; } :root:root [data-card="delivery"] .hv-moneyline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; padding: 3px 2px 0; } :root:root [data-card="delivery"] .hv-m { display: inline-flex; align-items: baseline; gap: 2px; padding-inline: 6px; border-inline-start: 1px solid rgba(148, 163, 184, .25); line-height: 1.2; } :root:root [data-card="delivery"] .hv-m:first-child { padding-inline-start: 0; border-inline-start: 0; } :root:root [data-card="delivery"] .hv-m em { font-style: normal; font-size: 11px; color: #94a3b8; } :root:root [data-card="delivery"] .hv-m em::after { content: ":"; } :root:root [data-card="delivery"] .hv-m b { font-size: 13.5px; font-family: ui-monospace, monospace; } :root:root [data-card="delivery"] .hv-m u { text-decoration: none; font-size: 10px; font-weight: 800; color: #94a3b8; } :root:root [data-card="delivery"] .hv-loss { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 1.6; } :root:root [data-card="delivery"] [data-hv-actions] { gap: 5px; padding-top: 2px; } :root:root [data-card="delivery"] [data-hv-actions] > button, :root:root [data-card="delivery"] [data-hv-actions] .dpp-acts button { position: relative; height: 40px !important; min-height: 38px !important; padding-block: 0 !important; border-radius: 10px !important; } :root:root [data-card="delivery"] [data-hv-actions] > button::after, :root:root [data-card="delivery"] [data-hv-actions] .dpp-acts button::after { content: ""; position: absolute; inset: -5px -2px; } :root:root [data-card="delivery"] .fa-user, :root:root [data-card="delivery"] .fa-mobile-screen { color: rgb(var(--tn)); } /* ---------- 11. the delivery / collect buttons: high contrast, readable under shop lighting (near-black on bright emerald, 8:1+) ---------- */ :root:root .act-confirm, :root:root #activePhonesContainer .tk .tk-cta-go, :root:root [data-card="delivery"] .act-confirm { background: #34d399 !important; border: 1px solid #6ee7b7 !important; color: #022c1e !important; font-weight: 900 !important; text-shadow: none !important; opacity: 1 !important; box-shadow: none !important; } :root:root .act-confirm *, :root:root #activePhonesContainer .tk .tk-cta-go *, :root:root [data-card="delivery"] .act-confirm * { color: #022c1e !important; opacity: 1 !important; } :root:root .act-confirm:active, :root:root #activePhonesContainer .tk .tk-cta-go:active { background: #10b981 !important; } /* ---------- 12. «تغيير النمط» (was «أعيد توزيعه»): a quiet slate chip in the header line, beside the mode badge ---------- */ :root:root [data-wmm-badge] { min-height: 26px; padding: 0 9px; border-radius: 8px; background: rgba(30, 41, 59, .9); border: 1px solid rgba(148, 163, 184, .5); color: #e2e8f0; font-size: 10.5px; font-weight: 800; } :root:root button[data-wmm-badge] { cursor: pointer; position: relative; } :root:root button[data-wmm-badge]::after { content: ""; position: absolute; inset: -9px -3px; } :root:root [data-wmm-badge] i { color: #22d3ee; } /* ---------- 13. the after-receive sheet: Dark Slate, the operation number as the hero, four actions in field order ---------- */ :root:root #postReceiveModal .pr-card { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: #0b1324; border: 1px solid #1e293b; text-align: center; } :root:root #postReceiveModal .pr-state { display: flex; align-items: center; justify-content: center; gap: 8px; } :root:root #postReceiveModal .pr-state i { font-size: 20px; color: rgb(52, 245, 160); } :root:root #postReceiveModal .pr-state h3 { font-size: 14px; font-weight: 900; color: #f1f5f9; line-height: 1.4; } :root:root #postReceiveModal .pr-codebox { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #050b16; border: 1px solid #1e293b; } :root:root #postReceiveModal .pr-thumb { width: 52px; height: 68px; flex: 0 0 52px; object-fit: contain; border-radius: 8px; background: rgba(0, 0, 0, .4); border: 1px solid #1e293b; cursor: zoom-in; } :root:root #postReceiveModal .pr-codecol { display: flex; flex-direction: column; align-items: center; min-width: 0; } :root:root #postReceiveModal .pr-codecol em { font-style: normal; font-size: 11px; font-weight: 700; color: #94a3b8; } :root:root #postReceiveModal .pr-code { font: 900 44px/1.05 ui-monospace, "Courier New", monospace; letter-spacing: .04em; color: rgb(34, 211, 238); direction: ltr; white-space: nowrap; } :root:root #postReceiveModal .pr-dev { max-width: 100%; margin-top: 2px; font-size: 12px; font-weight: 800; color: #cbd5e1; overflow-wrap: anywhere; line-height: 1.35; } :root:root #postReceiveModal .pr-actions { display: flex; flex-direction: column; gap: 7px; } :root:root #postReceiveModal .pr-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; font-weight: 900; color: #f1f5f9; background: #111c33; border: 1px solid #334155; } :root:root #postReceiveModal .pr-btn i { font-size: 15px; color: rgb(34, 211, 238); } :root:root #postReceiveModal .pr-btn.pr-primary { min-height: 54px; font-size: 14.5px; color: #04212b; background: rgb(34, 211, 238); border-color: rgb(103, 232, 249); } :root:root #postReceiveModal .pr-btn.pr-primary i { color: #04212b; } :root:root #postReceiveModal .pr-btn.dpp-cloud-print { background: #111c33 !important; border: 1px solid #334155 !important; color: #f1f5f9 !important; } :root:root #postReceiveModal .pr-btn.dpp-cloud-print i { color: rgb(34, 211, 238) !important; } :root:root #postReceiveModal .pr-btn:active { transform: scale(.98); } :root:root #postReceiveModal .pr-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } :root:root #postReceiveModal .pr-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 4px 2px; border-radius: 10px; font-size: 10.5px; font-weight: 800; line-height: 1.2; color: #94a3b8; background: transparent; border: 1px solid #1e293b; } :root:root #postReceiveModal .pr-tool i { font-size: 13px; color: #94a3b8; } :root:root #postReceiveModal .pr-tool.hidden { display: none; } /* ---------- 14. «عرض الكود فقط»: the number as large as the screen allows, the customer and the model, one close button ---------- */ :root:root #giantCodeModal .gc-card { width: 100%; max-width: 24rem; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 14px; border-radius: 20px; background: #0b1324; border: 1px solid #1e293b; } :root:root #giantCodeModal .gc-note { font-size: 12px; font-weight: 800; color: #94a3b8; } :root:root #giantCodeModal .gc-code { display: block; width: 100%; font: 900 clamp(40px, 17vw, 84px)/1.05 ui-monospace, "Courier New", monospace; letter-spacing: .03em; color: rgb(34, 211, 238); text-align: center; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } /* v3.20.23: ONE line whatever the width (6 digits never break into 5 + 1) */ :root:root #giantCodeModal .gc-meta { width: 100%; padding: 10px 12px; border-radius: 12px; background: #050b16; border: 1px solid #1e293b; } :root:root #giantCodeModal .gc-cust { font-size: 15px; font-weight: 900; color: #f1f5f9; overflow-wrap: anywhere; } :root:root #giantCodeModal .gc-dev { font-size: 13px; font-weight: 800; color: #cbd5e1; margin-top: 2px; overflow-wrap: anywhere; } :root:root #giantCodeModal .gc-done { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 14px; font-size: 15px; font-weight: 900; color: #022c1e; background: #34d399; border: 1px solid #6ee7b7; } /* ---------- 15. the photo viewer ---------- */ :root:root img[data-lightbox], :root:root img.tk-thumb, :root:root img.dpp-phone-thumb { cursor: zoom-in; } .dpp-lb { position: fixed; inset: 0; z-index: 2147483000; display: none; align-items: center; justify-content: center; background: rgba(2, 6, 23, .96); -webkit-tap-highlight-color: transparent; } .dpp-lb.is-open { display: flex; } .dpp-lb-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; padding: 64px 12px calc(24px + env(safe-area-inset-bottom, 0px)); } .dpp-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: pinch-zoom; user-select: none; -webkit-user-drag: none; border-radius: 6px; background: rgba(255, 255, 255, .03); } .dpp-lb-cap { font-size: 13px; font-weight: 800; color: #cbd5e1; text-align: center; } .dpp-lb-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 900; color: #fff; background: #0b1324; border: 1.5px solid #e2e8f0; } html.dpp-lb-lock, html.dpp-lb-lock body { overflow: hidden !important; } /* ---------- 16. the edit sheet: one template for every section, compact; money fields carry their دج badge; the receipt condition is a drawer ---------- */ :root:root #adminEditModal > div { padding: 14px; gap: 10px; } :root:root #adminEditModal .space-y-3 > * + * { margin-top: 8px; } :root:root #adminEditModal input:not([type="checkbox"]):not([type="hidden"]), :root:root #adminEditModal select { min-height: 42px; } :root:root #adminEditModal .mf { display: flex; align-items: stretch; direction: ltr; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); } :root:root #adminEditModal .mf > input { flex: 1 1 auto; min-width: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: right; direction: ltr; } :root:root #adminEditModal .mf > .mf-cur { display: inline-flex; align-items: center; padding: 0 10px; font-size: 11.5px; font-weight: 900; color: #94a3b8; background: rgba(15, 23, 42, .9); border-inline-start: 1px solid rgba(255, 255, 255, .12); direction: rtl; } :root:root #adminEditModal .mf:focus-within { border-color: #22d3ee; } :root:root .dpp-prebox { border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(15, 23, 42, .55); } :root:root .dpp-prebox > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font-size: 12px; } :root:root .dpp-prebox > summary::-webkit-details-marker { display: none; } :root:root .dpp-prebox > summary b { flex: 1 1 auto; min-width: 0; color: #f1f5f9; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root:root .dpp-prebox > summary i { color: #94a3b8; font-size: 11px; transition: transform .15s; } :root:root .dpp-prebox[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, .1); } :root:root .dpp-prebox[open] > summary i { transform: rotate(180deg); } :root:root .dpp-prebox .dpp-precheck { padding: 8px; } :root:root .dpp-prebox .dpp-precheck button { min-height: 40px; font-size: 11px; line-height: 1.25; } /* ---------- 17. v3.20.23: the closing allocation rows - the label, the two quick buttons and the amount field are three separate lines (the buttons used to sit on the label and print «0 دج (ترحيل كامل)المتاح كاملاً») ---------- */ :root:root #tab-closing .alloc-head > label { display: block; font-size: 11.5px; line-height: 1.4; } :root:root #tab-closing .alloc-quick { direction: rtl; } :root:root #tab-closing .alloc-q { position: relative; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; white-space: normal; text-align: center; padding-block: 4px; line-height: 1.25; } /* v3.20.29: «0 DA (report intégral)» wraps in its half column */ :root:root #tab-closing .alloc-q::after { content: ""; position: absolute; inset: -3px 0; } :root:root #tab-closing #fcLossDeductInput, :root:root #tab-closing #fcExpDeductInput { min-height: 44px; } /* ---------- 18. v3.20.23: the worker's session-mode sheet «جوكر النمط» + the [تبديل النمط] button of the intake bar ---------- */ .wsm { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: flex-end; justify-content: center; background: rgba(2, 6, 23, .72); } .wsm-sheet { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #0f172a; border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0; display: flex; flex-direction: column; gap: 10px; } .wsm-title { font-size: 16px; font-weight: 900; color: #fff; } .wsm-sub { font-size: 12px; font-weight: 700; color: #94a3b8; line-height: 1.5; } .wsm-list { display: flex; flex-direction: column; gap: 8px; } .wsm-row { --mt: 34, 211, 238; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #fff; text-align: start; cursor: pointer; } .wsm-row[data-tone="emerald"] { --mt: 52, 245, 160; } .wsm-row[data-tone="amber"] { --mt: 251, 176, 64; } .wsm-row[data-tone="coral"] { --mt: 226, 96, 118; } .wsm-row[data-tone="titanium"] { --mt: 148, 163, 184; } .wsm-row .wsm-ic { flex: 0 0 24px; text-align: center; color: rgb(var(--mt)); font-size: 15px; } .wsm-row .wsm-t { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 800; unicode-bidi: plaintext; } .wsm-row .wsm-ck { color: transparent; font-size: 12px; } .wsm-row.is-on { border-color: rgba(var(--mt), .7); background: rgba(var(--mt), .16); } .wsm-row.is-on .wsm-ck { color: rgb(var(--mt)); } .wsm-out { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; border: 1px solid rgba(226, 96, 118, .55); background: rgba(226, 96, 118, .12); color: #fda4af; font-size: 13px; font-weight: 900; } .wsm-later { min-height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #cbd5e1; font-size: 12px; font-weight: 800; } .wsm-switch { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(251, 176, 64, .45); background: rgba(251, 176, 64, .12); color: #fbb040; font-size: 11px; font-weight: 900; white-space: nowrap; } .wsm-switch::after { content: ""; position: absolute; inset: -6px -3px; } /* ---------- 19. v3.20.23: bulk management of the store phones (select several listings; the bar floats above the bottom edge) ---------- */ :root:root #storeRoot .pos-photo .pos-sel { position: absolute !important; inset-inline-end: 8px !important; inset-inline-start: auto !important; inset-block-start: 104px !important; inset-block-end: auto !important; z-index: 3; width: 34px; height: 34px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .7); background: rgba(2, 6, 23, .7); color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } :root:root #storeRoot .pos-photo .pos-sel::after { content: ""; position: absolute; inset: -6px; } :root:root #storeRoot .pos-photo .pos-sel.is-on { background: #22d3ee; border-color: #22d3ee; color: #04222b; } :root:root #storeRoot .pos-bulkbar { position: fixed; inset-inline: 8px; inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 9000; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; max-width: 520px; margin-inline: auto; border-radius: 16px; background: rgba(15, 23, 42, .96); border: 1px solid rgba(34, 211, 238, .45); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } :root:root #storeRoot .pos-bulkbar .pos-bulk-n { flex: 0 0 auto; font-size: 12px; font-weight: 900; color: #67e8f9; padding-inline: 6px; } :root:root #storeRoot .pos-bulkbar .pos-btn { min-height: 44px; } :root:root #storeRoot .pos-bulkbar .pos-btn:disabled { opacity: .4; } :root:root #storeRoot .pos-bulkbar[aria-busy="true"] { opacity: .6; pointer-events: none; } :root:root #storeRoot .pos-margin { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: 14px; background: rgba(15, 23, 42, .6); border: 1px solid rgba(255, 255, 255, .12); font-size: 12px; font-weight: 800; color: #cbd5e1; } :root:root #storeRoot .pos-margin b { font-size: 14px; } :root:root #storeRoot .pos:has(.pos-bulkbar) { padding-bottom: 150px; } /* ---------- 20. v3.20.24: the receipt-condition chip of the shared device board, on the delivery card exactly as on the maintenance card ---------- */ :root:root [data-card="delivery"] .tk-prebadge { display: inline-flex; align-items: center; max-width: 100%; height: 22px; min-height: 0; padding: 0 8px; gap: 4px; margin-top: 4px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .35); color: #cbd5e1; } :root:root [data-card="delivery"] .tk-prebadge i { font-size: 9.5px; color: #94a3b8; } :root:root [data-card="delivery"] .tk-prebadge > span { overflow: hidden; text-overflow: ellipsis; } :root:root [data-card="delivery"] .tk-prebadge.is-warn { background: rgba(245, 158, 11, .12); border-color: rgba(251, 191, 36, .45); color: #fcd34d; } :root:root [data-card="delivery"] .tk-prebadge.is-warn i { color: #d9b96a; } /* ---------- 21. v3.20.24: a staff session never shows the owners' red sync-diagnosis banner (it sat over the back capsule and looked like a freeze) ---------- */ html[data-staff="1"] #syncHealthBanner, html[data-staff="1"] .sync-health { display: none !important; } /* ---------- 22. v3.20.25: the lean store hub (one slim counts strip, a compact search + scan bar, camera shortcut) ---------- */ :root:root #storeRoot .pos-counts { display: flex; gap: 6px; } :root:root #storeRoot .pos-count { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 8px; border-radius: 999px; background: rgba(15, 23, 42, .6); border: 1px solid rgba(255, 255, 255, .1); cursor: pointer; } :root:root #storeRoot .pos-count strong { font: 900 14px/1 ui-monospace, Menlo, monospace; color: var(--tone, #e2e8f0); } :root:root #storeRoot .pos-count span { font-size: 11px; font-weight: 800; color: #94a3b8; } :root:root #storeRoot .pos-quick.pos-quick-bar { grid-template-columns: 1fr 1fr 48px; gap: 8px; } :root:root #storeRoot .pos-quick-bar .pos-btn { min-height: 46px; padding: 0 10px; font-size: 12.5px; } :root:root #storeRoot .pos-quick-bar .pos-btn .pos-chip { width: 30px; height: 30px; border-radius: 9px; } :root:root #storeRoot .pos-quick-bar .pos-btn-ico { padding: 0; width: 48px; justify-content: center; font-size: 17px; } :root:root #storeRoot .pos-find input[type="search"], :root:root #storeRoot .pos-find input[type="text"], :root:root #storeRoot .pos-find .dpp-scanwrap > input { min-height: 46px; height: 46px; border-radius: 14px; font-size: 14px; } :root:root #storeRoot .pos-find .dpp-scanbtn { width: 46px; min-height: 46px; height: 46px; border-radius: 14px; } :root:root #storeRoot .pos-find-ico { top: 23px; }